/* Nestiq overrides for the reference landing page (loaded after the build's
   stylesheet). Keeps the design as-is while fixing usability issues. */

/* 1. First screen shows the logo only; nav and actions appear once the hero
      is scrolled past (the reference behaviour). */
.site-header:not(.is-scrolled) .header-inner { justify-content: flex-start; }

/* 2. Consistent logo size in both header states. */
.site-header .site-brand { align-items: center; padding: 0; overflow: visible; }
.site-header .site-brand img,
.site-header:not(.is-scrolled) .site-brand img { height: 64px !important; max-height: 64px !important; width: auto; max-width: none; }
@media (min-width: 640px) { .site-header .site-brand img, .site-header:not(.is-scrolled) .site-brand img { height: 76px !important; max-height: 76px !important; } }
@media (min-width: 1024px) { .site-header .site-brand img, .site-header:not(.is-scrolled) .site-brand img { height: 88px !important; max-height: 88px !important; } }
@media (max-width: 1023px) { .site-header:not(.is-scrolled) .header-inner { height: 84px; padding-top: 0; } }

/* 3. Comfortable tap targets. */
.site-nav a { padding: 10px 2px; }
.header-actions button, .header-actions a, .header-account { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: inherit; }
.header-actions a:hover { color: #ffffff; }
.shop-room-panel .hotspot, .hotspot { width: 32px; height: 32px; }
.footer-inner ul a, .style-all-link, .site-nav-mobile a { display: inline-flex; align-items: center; min-height: 32px; }
.footer-inner ul { gap: 2px; }
.footer-socials a { width: 36px; height: 36px; align-items: center; justify-content: center; }

/* 4. Hero video: cover cleanly and never show layout gaps while it loads. */
.hero-video { background: #0f1b2d; }

/* 5. Crisper brand asset (landscape lockup) — footer/CTA sizing for it. */
.footer-brand { margin-left: 0 !important; }
.footer-brand img { height: 72px !important; margin: 0 0 4px !important; }
@media (min-width: 768px) { .footer-brand img { height: 84px !important; } }
.cta-logo { width: 132px !important; max-width: 132px !important; margin-left: 0 !important; }
@media (max-width: 767px) { .cta-logo { width: 108px !important; max-width: 108px !important; } }