/* ==========================================================================
   MIERE — responsive layer for LARGE screens (901px and up)
   --------------------------------------------------------------------------
   Anything for phones and small tablets lives in assets/css/mobile/, loaded
   separately with media="(max-width:900px)". Keeping the two apart means a
   mobile fix can never quietly change the desktop layout, and vice versa.
   ========================================================================== */

/* Global guards — these apply at every size. */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip;} /* clip: no sideways scroll, and sticky still works */
img,video{max-width:100%;}

/* ── sticky header ───────────────────────────────────────────────────────
   The promo bar scrolls away; the nav bar docks to the top and picks up a
   shadow once it does. */
.navbar{
  position:sticky;top:0;z-index:1200;
  background:#fff;
  transition:box-shadow .25s;
}
body.nav-stuck .navbar{box-shadow:0 2px 18px rgba(0,0,0,.09);}
.nav-item .mega,.nav-item .dropdown{z-index:1300;}

:target{scroll-margin-top:90px;}
html{scroll-behavior:smooth;}

/* The drawer is markup that exists at all sizes but only shows on mobile. */
.mobile-drawer{display:none;}
.drawer-scrim{display:none;}
.nav-burger{display:none;}

/* ── product grids ───────────────────────────────────────────────────────
   .products takes its column count from a --cols custom property set by the
   template (never an inline grid-template-columns, or media queries could not
   override it on a phone).

   .product-grid and .related-grid are deliberately left alone: they use
   auto-fill/minmax in listing.css and product.php and size themselves. Only
   the mobile folder overrides them, because auto-fill collapses to a single
   column on a narrow screen. */
.products,.mood-grid{
  grid-template-columns:repeat(var(--cols,4),1fr);
}

/* ── large tablets / small laptops ───────────────────────────────────────── */
@media (max-width:1100px){
  .nav-inner{padding:0 22px;}
  .nav-menu{gap:16px;}
  .nav-menu > .nav-item > a{font-size:.72rem;}
  .sec-head h2{font-size:clamp(1.4rem,3.4vw,2rem);}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .products,.mood-grid{grid-template-columns:repeat(3,1fr);}
  .shop-layout{grid-template-columns:220px 1fr;gap:24px;}
  .gtl{grid-template-columns:minmax(240px,340px) 1fr;gap:32px;padding:56px 28px;}
  .gtl-hero img{min-height:420px;}
  .fsplit-img img{min-height:460px;}
  .fsplit-side{padding:40px 28px;}
}

/* ── phones and portrait tablets: hand the menu over to the drawer. 900px, to
   match the mobile stylesheets that style the drawer (header.php). ────────── */
@media (max-width:900px){
  .nav-menu{display:none;}
  .nav-burger{display:block;}
  .mobile-drawer{display:flex;}
  .drawer-scrim{display:block;}
  .nav-inner{padding:0 18px;gap:12px;}
  .nav-logo{margin-right:auto;}
  .nav-cta{display:none;}
}

/* ── portrait tablets ────────────────────────────────────────────────────── */
@media (max-width:980px){
  .products,.mood-grid{grid-template-columns:repeat(3,1fr);}
  .shop-layout{grid-template-columns:1fr;}
  .filter-sidebar{position:static;width:auto;}
  .hero{min-height:460px;}
  .sale-banner{flex-direction:column;align-items:flex-start;gap:26px;padding:36px 24px;}
  .gtl{grid-template-columns:1fr;gap:28px;}
  .gtl-hero{order:-1;}
  .fsplit{grid-template-columns:1fr;}
  .fh-cart-layout,.fh-checkout,.fh-account{grid-template-columns:1fr;}
  .fh-summary{position:static;}
}

/* Motion preferences */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  .mobile-drawer{transition:none;}
}