:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --off-white:#f7f6f4;
  --grey:#8a8a8a;
  --light-grey:#e5e3df;
  --border:#dedcd7;
  --accent:#0a0a0a;
  --transition:0.35s cubic-bezier(.4,0,.2,1);
  /* Real value is measured and set by JS on load/resize (main.js,
     initHeaderHeightVar) — this is just a sane fallback for the first
     paint before that runs. */
  --header-height:112px;

  /* ---- Theme roles ----
     Components (cards, panels, inputs, tables, dropdowns) should read
     from these, not from --white/--black directly. --white/--black stay
     fixed-contrast pairs for things like buttons (a black button always
     needs white text, in either theme) — redefining THOSE per theme is
     what causes "blindly inverted", broken-contrast dark modes. These
     role variables are what actually change between themes. */
  --surface:var(--white);
  --surface-alt:var(--off-white);
  --surface-translucent:rgba(255,255,255,.94);
  --text-primary:var(--black);
  --text-muted:var(--grey);
  --border-soft:var(--border);
}

body.dark-mode{
  --surface:#1c1c1c;
  --surface-alt:#161616;
  --surface-translucent:rgba(28,28,28,.9);
  --text-primary:#f0f0ee;
  --text-muted:#9a9a9a;
  --border-soft:#333230;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  overflow-x:hidden;
  font-family:'Jost','Helvetica Neue',Arial,sans-serif;
  color:var(--text-primary);
  background:var(--surface-alt);
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease;
}
h1,h2,h3,h4{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;
  letter-spacing:.5px;
  line-height:1.12;
  margin:0 0 .5em;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:1360px;margin:0 auto;padding:0 32px;}
::selection{background:var(--text-primary);color:var(--surface);}

/* Custom scrollbar */
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:var(--surface-alt);}
::-webkit-scrollbar-thumb{background:var(--text-primary);border-radius:0;}

/* ---------- Top bar & nav ---------- */
.announcement-bar{
  background:var(--black);color:var(--white);text-align:center;
  font-size:.72rem;letter-spacing:1.5px;padding:9px 0;text-transform:uppercase;
}
header.site-header{
  position:sticky;top:0;z-index:3000;background:var(--surface-translucent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border-soft);
  transition:box-shadow var(--transition);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;max-width:1360px;margin:0 auto;}
.logo{font-family:'Cormorant Garamond',serif;font-size:1.9rem;letter-spacing:4px;font-weight:600;text-transform:uppercase;}
.main-nav{display:flex;align-items:center;gap:34px;}
.main-nav a{font-size:.82rem;letter-spacing:1.2px;text-transform:uppercase;position:relative;padding:6px 0;}
.main-nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--text-primary);transition:width var(--transition);}
.main-nav a:hover::after{width:100%;}

/* The "Shop" trigger is a <button>, not an <a>, but is styled identically
   to the other nav links so it lines up in height, spacing and hover
   behavior with Men / Women / Sale etc. */
.nav-shop-trigger{
  font-family:inherit;font-size:.82rem;letter-spacing:1.2px;text-transform:uppercase;
  position:relative;padding:6px 0;background:none;border:none;cursor:pointer;color:inherit;
  line-height:inherit;
}
.nav-shop-trigger::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width var(--transition);}
.nav-shop-trigger:hover::after,.nav-shop-trigger.is-active::after{width:100%;}

.nav-currency-trigger{
  font-family:inherit;font-size:.82rem;letter-spacing:1.2px;text-transform:uppercase;
  position:relative;padding:6px 0;background:none;border:none;cursor:pointer;color:inherit;
  line-height:inherit;
}
.nav-currency-trigger::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width var(--transition);}
.nav-currency-trigger:hover::after{width:100%;}
.nav-currency-trigger span{color:var(--text-muted);margin-left:2px;}

.nav-icons{display:flex;gap:22px;align-items:center;}
.nav-icons a{font-size:1.05rem;position:relative;cursor:pointer;transition:opacity .25s;}
.nav-icons a:hover{opacity:.6;}
.cart-badge,.wishlist-badge{
  position:absolute;top:-8px;right:-10px;background:var(--text-primary);color:var(--surface);
  border-radius:50%;font-size:.62rem;width:16px;height:16px;display:flex;align-items:center;justify-content:center;
  transition:transform .25s;
}
.cart-badge.bump,.wishlist-badge.bump{transform:scale(1.35);}
.mobile-toggle{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:inherit;}
.mobile-toggle:focus-visible,.shop-panel-close:focus-visible,.dark-toggle:focus-visible,
.mobile-currency-trigger:focus-visible{outline:2px solid var(--text-primary);outline-offset:4px;}

.mobile-nav{
  display:none;flex-direction:column;padding:10px 24px 24px;
  border-top:1px solid var(--border-soft);background:var(--surface);color:var(--text-primary);
}
.mobile-nav.is-open{display:flex;}
.mobile-nav a,.mobile-currency-trigger{
  display:block;padding:10px 0;border:0;background:none;color:inherit;
  font:inherit;text-align:left;cursor:pointer;
}
.mobile-nav a:hover,.mobile-currency-trigger:hover{color:var(--text-muted);}
.mobile-currency-trigger{border-top:1px solid var(--border-soft);margin-top:6px;padding-top:16px;}
.mobile-currency-trigger span{color:var(--text-muted);margin-left:2px;}

/* ---------- Shop slide-out panel (replaces the old hover dropdown) ----------
   Both start BELOW the header (top: var(--header-height)) rather than
   at top:0. Previously the overlay used `inset:0`, which covered the
   entire header — including the Shop trigger itself — the instant the
   panel opened. Since the overlay had no mouseenter handler, that
   covering caused the trigger's mouseleave to schedule a close with
   nothing to cancel it, so the menu closed and immediately reopened
   in a loop. Keeping both below the header removes the overlap
   entirely, which is a more reliable fix than only patching timers. */
.shop-overlay{position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background:rgba(10,10,10,.55);z-index:2400;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease;}
.shop-overlay.is-visible{opacity:1;visibility:visible;pointer-events:auto;}
.shop-panel{
  position:fixed;top:var(--header-height);left:0;height:calc(100vh - var(--header-height));
  width:25vw;min-width:340px;max-width:480px;
  background:var(--surface);color:var(--text-primary);z-index:2500;box-shadow:24px 0 60px rgba(0,0,0,.15);
  transform:translateX(-100%);transition:transform .45s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.shop-panel.is-open{transform:translateX(0);}
.shop-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 30px;border-bottom:1px solid var(--border-soft);flex-shrink:0;
}
.shop-panel-header h2{font-size:1.3rem;margin:0;letter-spacing:1px;}
.shop-panel-close{background:none;border:none;font-size:1.6rem;cursor:pointer;line-height:1;padding:0;}
.shop-panel-viewport{position:relative;flex:1;overflow:hidden;}
.shop-panel-level{
  position:absolute;top:0;left:0;width:100%;height:100%;overflow-y:auto;
  padding:14px 12px 30px;transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.shop-panel-level[data-level="2"]{transform:translateX(100%);}
.shop-panel-viewport.at-level-2 .shop-panel-level[data-level="1"]{transform:translateX(-100%);}
.shop-panel-viewport.at-level-2 .shop-panel-level[data-level="2"]{transform:translateX(0);}
.shop-panel-level a,.shop-panel-back{
  display:block;padding:14px 18px;font-size:.95rem;letter-spacing:.4px;
  border-radius:2px;transition:background .2s,padding-left .2s;
}
.shop-panel-level a:hover,.shop-panel-level a:focus-visible{background:var(--surface-alt);padding-left:24px;}
.shop-panel-back{
  display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--text-muted);
  font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px;border:none;background:none;width:100%;text-align:left;
}
.shop-panel-back:hover{color:var(--text-primary);}
.shop-panel-section-title{
  padding:16px 18px 8px;font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);
}
.shop-panel-divider{height:1px;background:var(--border-soft);margin:10px 18px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;padding:15px 38px;border:1px solid var(--black);background:var(--black);color:var(--white);
  font-size:.78rem;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all var(--transition);
  border-radius:10px;
}
.btn:hover{background:var(--white);color:var(--black);}
.btn-outline{background:transparent;color:var(--text-primary);border-color:var(--border-soft);}
.btn-outline:hover{background:var(--text-primary);color:var(--surface);border-color:var(--text-primary);}
.btn-sm{padding:10px 22px;font-size:.7rem;border-radius:8px;}
.btn-block{width:100%;text-align:center;}
.btn:disabled{opacity:.4;cursor:not-allowed;}

/* ---------- Hero ---------- */
.hero{
  position:relative;height:92vh;min-height:560px;display:flex;align-items:center;justify-content:center;
  text-align:center;background:linear-gradient(180deg,rgba(10,10,10,.35),rgba(10,10,10,.55)),
  url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=1974&auto=format&fit=crop') center/cover no-repeat;
  color:var(--white);
}
.homepage-surface-edit{
  position:absolute;z-index:2;padding:8px 12px;background:rgba(12,12,12,.78);border:1px solid rgba(255,255,255,.5);
  color:var(--white);font-size:.68rem;letter-spacing:1.4px;text-transform:uppercase;transition:background .2s ease;
}
.homepage-surface-edit:hover,.homepage-surface-edit:focus-visible{background:rgba(12,12,12,.96);outline:2px solid var(--white);outline-offset:3px;}
.homepage-hero-edit{top:18px;right:18px;}
.hero-content{max-width:620px;padding:0 24px;animation:fadeUp 1.1s ease both;}
.hero-content .eyebrow{letter-spacing:4px;font-size:.78rem;text-transform:uppercase;margin-bottom:18px;opacity:.85;}
.hero-content h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.05;color:var(--white);margin-bottom:22px;}
.hero-content p{font-size:1.05rem;margin-bottom:34px;opacity:.9;}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Sections ---------- */
section{padding:96px 0;}
.section-heading{text-align:center;margin-bottom:56px;}
.section-heading .eyebrow{display:block;letter-spacing:3px;font-size:.75rem;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;}
.section-heading h2{font-size:clamp(2rem,4vw,2.8rem);letter-spacing:0;}

.collections-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:3px;}
.collection-card{position:relative;aspect-ratio:3/4;overflow:hidden;}
.collection-card--feature{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;min-height:420px;}
.homepage-category-card-link{display:block;width:100%;height:100%;color:inherit;}
.collection-card img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--transition);}
.collection-card:hover img{transform:scale(1.08);}
.collection-card .label{
  position:absolute;bottom:26px;left:26px;color:var(--white);font-family:'Cormorant Garamond',serif;font-size:1.5rem;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.homepage-category-card-edit{
  position:absolute;top:14px;right:14px;z-index:2;padding:8px 12px;
  background:var(--surface-translucent);border:1px solid var(--border-soft);
  color:var(--text-primary);font-size:.68rem;letter-spacing:1.4px;text-transform:uppercase;
  opacity:.92;transition:opacity .2s ease,background .2s ease;
}
.homepage-manage-link{display:inline-block;margin-top:14px;color:var(--text-muted);font-size:.68rem;letter-spacing:1.4px;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px;}
.homepage-manage-link:hover,.homepage-manage-link:focus-visible{color:var(--text-primary);}
.homepage-category-card:hover .homepage-category-card-edit,
.homepage-category-card:focus-within .homepage-category-card-edit{opacity:1;}
.homepage-category-card-edit:hover,.homepage-category-card-edit:focus-visible{background:var(--surface);outline:2px solid var(--text-primary);outline-offset:2px;}

.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 26px;align-items:stretch;}

/* Flex column so every card is the same height as its tallest neighbor,
   and the action row always sits at the bottom via margin-top:auto —
   regardless of how long the product name or description runs. */
.product-card{position:relative;display:flex;flex-direction:column;height:100%;}

.product-card .img-wrap{position:relative;overflow:hidden;background:var(--surface-alt);aspect-ratio:3/4;flex-shrink:0;}
.product-card .img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--transition), opacity .5s ease;}
.product-card:hover .img-wrap .img-primary{transform:scale(1.04);}
.product-card .img-secondary{position:absolute;inset:0;opacity:0;}
.product-card:hover .img-wrap .img-secondary{opacity:1;transform:scale(1.04);}
.product-card .tag{position:absolute;top:14px;left:14px;background:var(--black);color:var(--white);font-size:.66rem;letter-spacing:1px;padding:5px 10px;text-transform:uppercase;z-index:2;}

/* Quick View is nested INSIDE .img-wrap in the markup, so this absolute
   positioning is relative to the image box only — it can never stretch
   down and cover the brand/name/price/rating text below. */
.quick-view-btn{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  padding:12px 0;background:var(--surface-translucent);border:1px solid var(--border-soft);color:var(--text-primary);
  font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border-radius:8px;
  opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s,background .25s,color .25s,border-color .25s;
}
.product-card:hover .quick-view-btn{opacity:1;transform:translateY(0);}
.quick-view-btn:hover{background:var(--text-primary);color:var(--surface);border-color:var(--text-primary);}

/* Info block grows to fill remaining space above the action row, so the
   buttons of every card in a row line up even when names wrap to two
   lines. The product name is clamped to a fixed two-line height for the
   same reason. */
.product-info{padding-top:16px;flex:1 0 auto;display:flex;flex-direction:column;}
.product-info .brand{font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);}
.product-info h3{
  font-size:1.02rem;margin:6px 0 8px;font-family:'Jost',sans-serif;font-weight:500;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;
}
.price-row{display:flex;gap:10px;align-items:center;font-size:.95rem;}
.price-row .original{color:var(--text-muted);text-decoration:line-through;font-size:.85rem;}
.price-row .sale{color:#b5121b;}
.rating-stars{color:var(--text-primary);font-size:.8rem;letter-spacing:1px;margin-top:8px;min-height:1.2em;}

/* Footer action row — always pinned to the bottom of the card. */
.product-actions{display:flex;gap:8px;margin-top:auto;padding-top:16px;}
.btn-bag,.btn-wishlist{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 10px;border:1px solid var(--black);background:var(--black);color:var(--white);
  font-size:.68rem;letter-spacing:1px;text-transform:uppercase;cursor:pointer;border-radius:8px;
  transition:background .25s,color .25s,border-color .25s;white-space:nowrap;min-width:0;
}
.btn-bag{min-width:118px;}
.btn-wishlist{background:transparent;color:var(--text-primary);border-color:var(--border-soft);min-width:96px;}
.btn-bag:hover{background:var(--white);color:var(--black);}
.btn-wishlist:hover{background:var(--text-primary);color:var(--surface);border-color:var(--text-primary);}
.btn-bag.is-added{background:var(--white);color:var(--black);}
.btn-wishlist.is-saved{background:var(--text-primary);color:var(--surface);border-color:var(--text-primary);}
.btn-bag:disabled,.btn-bag.is-disabled{opacity:.4;cursor:not-allowed;background:var(--surface-alt);color:var(--text-muted);border-color:var(--border-soft);}
.wishlist-icon{font-size:.95rem;line-height:1;}

.promo-banner{
  background:var(--black);color:var(--white);text-align:center;padding:70px 24px;
}
.promo-banner h2{color:var(--white);font-size:2rem;margin-bottom:14px;}

.newsletter{background:var(--surface-alt);text-align:center;padding:80px 24px;}
.newsletter form{display:flex;max-width:460px;margin:26px auto 0;border-bottom:1px solid var(--border-soft);}
.newsletter input{flex:1;border:none;background:transparent;padding:12px 6px;font-size:.95rem;outline:none;}
.newsletter button{background:none;border:none;letter-spacing:2px;font-size:.75rem;text-transform:uppercase;cursor:pointer;}

.instagram-gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;}
.instagram-gallery img{aspect-ratio:1/1;object-fit:cover;transition:opacity var(--transition);}
.instagram-gallery img:hover{opacity:.75;}

footer{background:var(--black);color:#c9c9c9;padding:70px 0 24px;margin-top:60px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px;}
.footer-grid h4{color:var(--white);font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:18px;}
.footer-grid a{display:block;padding:5px 0;font-size:.88rem;color:#c9c9c9;}
.footer-grid a:hover{color:var(--white);}
.footer-logo{font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:var(--white);letter-spacing:3px;margin-bottom:14px;}
.social-icons{display:flex;gap:16px;margin-top:18px;}
.social-icons a{font-size:1.1rem;}
.footer-bottom{border-top:1px solid #262626;padding-top:22px;text-align:center;font-size:.78rem;color:#7a7a7a;}
.legal-links{display:block;margin-top:10px;}
.legal-links a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
.legal-links a:hover{color:#fff;}
.cookie-settings-trigger{appearance:none;border:0;background:none;color:inherit;font:inherit;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.cookie-settings-trigger:hover,.cookie-settings-trigger:focus-visible{color:#fff;}

/* ---------- Breadcrumb / page header ---------- */
.page-header{padding:60px 0 30px;text-align:center;border-bottom:1px solid var(--border-soft);}
.page-header .eyebrow{letter-spacing:3px;font-size:.75rem;text-transform:uppercase;color:var(--text-muted);}
.breadcrumb{font-size:.8rem;color:var(--text-muted);padding:18px 0;}
.breadcrumb a{color:var(--text-muted);}
.breadcrumb a:hover{color:var(--text-primary);}

/* ---------- Shop layout ---------- */
/* ---------- Shop: editorial banner (replaces the old permanent sidebar) ---------- */
.shop-editorial-banner{
  position:relative;margin-top:36px;height:280px;overflow:hidden;border-radius:2px;
}
.shop-editorial-banner img{width:100%;height:100%;object-fit:cover;}
.shop-editorial-caption{
  position:absolute;left:0;bottom:0;padding:30px 36px;color:var(--white);
  background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);
}
.shop-editorial-caption .eyebrow{color:#eee;}
.shop-editorial-caption h2{color:var(--white);font-size:2rem;margin:4px 0 0;}

/* ---------- Shop: controls bar (search, filter trigger, sort) ---------- */
.shop-controls-bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:34px 0 16px;}
.shop-search-form{position:relative;flex:1;min-width:200px;max-width:340px;}
.shop-search-form input{
  width:100%;border:none;border-bottom:1px solid var(--border-soft);padding:10px 26px 10px 2px;
  font-size:.88rem;background:transparent;color:var(--text-primary);transition:border-color .25s ease;
}
.shop-search-form input::placeholder{color:var(--text-muted);}
.shop-search-form input:focus{outline:none;border-color:var(--text-primary);}
.shop-search-form::after{
  content:'\2197';position:absolute;right:2px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);font-size:.9rem;pointer-events:none;
}
.shop-controls-actions{display:flex;align-items:center;gap:14px;}
.shop-controls-actions select{
  border:1px solid var(--border-soft);padding:10px 32px 10px 16px;font-size:.8rem;letter-spacing:.5px;
  background-color:var(--surface);color:var(--text-primary);cursor:pointer;transition:border-color .25s ease;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.shop-controls-actions select:hover,.shop-controls-actions select:focus{outline:none;border-color:var(--text-primary);}
.shop-toolbar-meta{color:var(--text-muted);font-size:.88rem;margin-bottom:20px;}

.filter-trigger-btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border:1px solid var(--text-primary);
  background:var(--text-primary);color:var(--surface);font-size:.76rem;letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;border-radius:10px;transition:background .3s ease,color .3s ease,letter-spacing .3s ease;
}
.filter-trigger-btn:focus-visible{outline:2px solid var(--text-primary);outline-offset:4px;}
.filter-trigger-btn:hover{background:var(--surface);color:var(--text-primary);letter-spacing:2.5px;}
.filter-count-badge{
  background:var(--surface);color:var(--text-primary);border-radius:50%;min-width:19px;height:19px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;font-size:.66rem;transition:background .3s ease,color .3s ease;
}
.filter-trigger-btn:hover .filter-count-badge{background:var(--text-primary);color:var(--surface);}

/* ---------- Shop: active filter chips ---------- */
.active-filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;}
.active-filter-chips:empty{display:none;}
.filter-chip{
  display:inline-flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border:1px solid var(--border-soft);
  font-size:.8rem;background:var(--surface);color:var(--text-primary);animation:fadeUp .25s ease both;
  border-radius:20px;transition:border-color .2s ease;
}
.filter-chip:hover{border-color:var(--text-primary);}
.filter-chip button{
  background:var(--surface-alt);border:none;border-radius:50%;width:19px;height:19px;cursor:pointer;
  font-size:.8rem;line-height:1;color:inherit;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease;
}
.filter-chip button:hover{background:var(--text-primary);color:var(--surface);}
.filter-clear-chip{background:none;border:none;text-decoration:underline;font-size:.8rem;color:var(--text-muted);cursor:pointer;padding:7px 4px;}

/* ---------- Shop: filter drawer (right-side; mirrors .shop-panel's
   mechanics — overlay, header-offset, slide transition — for a
   consistent feel with the Shop nav panel, just anchored right) ---------- */
  .shop-filter-overlay{position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background:rgba(10,10,10,.55);z-index:2400;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease;}
.shop-filter-overlay.is-visible{opacity:1;visibility:visible;pointer-events:auto;}
 .shop-filter-drawer{
  position:fixed;top:var(--header-height);right:0;height:calc(100vh - var(--header-height));
  width:25vw;min-width:340px;max-width:440px;background:var(--surface);color:var(--text-primary);
  z-index:2500;box-shadow:-24px 0 60px rgba(0,0,0,.15);transform:translateX(100%);
  transition:transform .45s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
}
.shop-filter-drawer.is-open{transform:translateX(0);}
.filter-drawer-body{flex:1;overflow-y:auto;padding:6px 30px;margin:0;}
.filter-group{border:none;border-top:1px solid var(--border-soft);padding:18px 0;margin:0;}
.filter-group:first-child{border-top:none;}
.filter-group legend{font-size:.75rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);padding:0 0 12px;width:100%;}
.filter-option{display:flex;align-items:center;gap:10px;padding:8px 2px;font-size:.92rem;cursor:pointer;}
.filter-option input{accent-color:var(--text-primary);width:16px;height:16px;flex-shrink:0;}
.filter-option input:focus-visible{outline:2px solid var(--text-primary);outline-offset:3px;}
.filter-swatch{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid var(--border-soft);}
.filter-price-inputs{display:flex;align-items:center;gap:10px;}
.filter-price-inputs input{width:100%;border:1px solid var(--border-soft);padding:10px 12px;background:var(--surface);color:var(--text-primary);font-size:.88rem;}
.filter-price-inputs input:focus{outline:2px solid var(--text-primary);outline-offset:1px;border-color:var(--text-primary);}
.filter-price-inputs span{color:var(--text-muted);font-size:.85rem;}
.filter-drawer-footer{display:flex;align-items:center;gap:14px;padding:20px 30px;border-top:1px solid var(--border-soft);}
.filter-drawer-footer .btn-block{flex:1;}
.filter-drawer-footer .btn.is-loading{opacity:.7;cursor:wait;}

/* Skeleton state while an AJAX filter request is in flight — dims and
   slightly scales the existing cards rather than blanking the screen. */
#shopResultsContainer.is-loading .product-grid,
#shopResultsContainer.is-loading .empty-state{opacity:.45;filter:saturate(.6);pointer-events:none;transition:opacity .2s,filter .2s;}
#shopResultsContainer{transition:opacity .2s;}

.pagination{display:flex;justify-content:center;gap:10px;margin-top:60px;}
.pagination a,.pagination span{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-soft);font-size:.85rem;}
.pagination .active{background:var(--black);color:var(--white);border-color:var(--black);}

/* ---------- Product detail ---------- */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:60px 0;}
.pd-gallery-main{aspect-ratio:3/4;overflow:hidden;background:var(--surface-alt);cursor:zoom-in;}
.pd-gallery-main img{width:100%;height:100%;object-fit:cover;transition:transform .4s,opacity .25s ease;}
.pd-gallery-main:hover img{transform:scale(1.15);}
.pd-thumbs{display:flex;gap:10px;margin-top:12px;}
.pd-thumbs img{width:78px;height:96px;object-fit:cover;border:1px solid var(--border-soft);cursor:pointer;}
.pd-thumbs img.active{border-color:var(--text-primary);}
.pd-info .brand{color:var(--text-muted);letter-spacing:1.5px;font-size:.78rem;text-transform:uppercase;}
.pd-info h1{font-size:2.2rem;margin:8px 0 14px;}
.pd-info .price-row{font-size:1.4rem;margin-bottom:20px;}
.pd-info .desc{color:var(--text-primary);line-height:1.7;margin-bottom:30px;}
.option-group{margin-bottom:24px;}
.option-group label{display:block;font-size:.78rem;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;}
.swatches{display:flex;gap:10px;flex-wrap:wrap;}
.swatch{border:1px solid var(--border-soft);padding:9px 16px;cursor:pointer;font-size:.85rem;transition:all .2s;}
.swatch:hover,.swatch.selected{border-color:var(--text-primary);background:var(--text-primary);color:var(--surface);}

/* Visual color swatches — the actual product color, not just its name.
   44px meets the usual minimum comfortable touch-target size. Selection
   is an elegant halo ring (offset box-shadow), not a heavy outline. */
.color-swatches{display:flex;gap:14px;flex-wrap:wrap;}
.color-swatch{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(0,0,0,.15);
  cursor:pointer;padding:0;position:relative;transition:transform .15s ease,box-shadow .15s ease;
}
.color-swatch:hover{transform:scale(1.08);}
.color-swatch:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text-primary);}
.color-swatch.is-selected{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--text-primary);}
#selectedColorName{color:var(--text-muted);text-transform:none;letter-spacing:0;font-size:.85rem;}
.pd-availability-note{
  color:#a13232;font-size:.82rem;margin:-8px 0 18px;padding:8px 12px;
  background:rgba(161,50,50,.08);border-left:2px solid #a13232;
}

.qty-selector{display:flex;align-items:center;border:1px solid var(--border-soft);width:130px;background:var(--surface);}
.qty-selector button{flex:1;border:none;background:none;padding:10px 0;cursor:pointer;font-size:1rem;color:var(--text-primary);}
.qty-selector button:disabled{color:var(--text-muted);cursor:not-allowed;}
.qty-selector input{width:40px;border:none;text-align:center;font-size:.95rem;background:var(--surface);color:var(--text-primary);}
.pd-actions{display:flex;gap:12px;margin:26px 0;}
.pd-meta{border-top:1px solid var(--border-soft);padding-top:22px;font-size:.85rem;color:var(--text-muted);}
.pd-meta p{margin:5px 0;}
.accordion-item{border-top:1px solid var(--border-soft);}
.accordion-item summary{padding:16px 0;cursor:pointer;font-size:.85rem;letter-spacing:1px;text-transform:uppercase;}
.accordion-item p{padding-bottom:16px;color:var(--text-primary);line-height:1.7;}

/* ---------- Reviews ---------- */
.review-section{background:var(--surface-alt);padding:80px 0;}
.review-card{border-bottom:1px solid var(--border-soft);padding:22px 0;}
.review-card .stars{color:var(--text-primary);}
.review-card .meta{font-size:.78rem;color:var(--text-muted);margin-top:4px;}
.review-card strong,.review-card p{color:var(--text-primary);}
.review-empty-state{color:var(--text-muted);font-family:'Cormorant Garamond',serif;font-size:1.3rem;line-height:1.5;}

.review-form{margin-top:48px;padding-top:40px;border-top:1px solid var(--border-soft);}
.review-form-group{margin-bottom:28px;}
.review-form-label{
  display:block;font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:12px;
}
.review-form input[type="text"],.review-form textarea{
  width:100%;border:1px solid var(--border-soft);padding:14px 16px;font-size:.95rem;
  font-family:inherit;background:var(--surface);color:var(--text-primary);transition:border-color .2s ease;
}
.review-form input[type="text"]::placeholder,.review-form textarea::placeholder{color:var(--text-muted);}
.review-form input[type="text"]:focus,.review-form textarea:focus{outline:none;border-color:var(--text-primary);}
.review-submit-btn{
  display:inline-flex;align-items:center;gap:10px;background:none;border:none;padding:0;
  font-size:.82rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-primary);
  cursor:pointer;font-family:inherit;
}
.review-submit-btn span{transition:transform .25s ease;display:inline-block;}
.review-submit-btn:hover span{transform:translateX(4px);}
.review-submit-btn::before{
  content:'';display:block;width:36px;height:1px;background:var(--text-primary);
  transition:width .25s ease;
}
.review-submit-btn:hover::before{width:52px;}
.review-submit-btn:disabled{opacity:.5;cursor:wait;}

/* CSS-only star rating: radios are visually hidden but fully keyboard
   navigable (Tab + arrow keys + Space, native <input type="radio">
   behavior). row-reverse displays them 1→5 left-to-right while letting
   the ~ sibling combinator fill in "this star and everything before it"
   for both :checked (persists) and :hover (live preview) — no
   JavaScript needed for the core interaction. Sized 34px+ and using
   --text-muted (not the fainter --border-soft) for the empty state, so
   unfilled stars stay perceptible at a glance in either theme, not just
   technically visible on close inspection. */
.star-rating{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px;}
.star-rating input{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;}
.star-rating label{
  font-size:2.35rem;line-height:1;color:var(--text-muted);cursor:pointer;
  transition:color .15s ease,transform .15s ease;padding:4px;
}
.star-rating label:hover{transform:scale(1.08);}
.star-rating input:checked + label,
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label{color:#b8902f;}
.star-rating input:focus-visible + label{outline:2px solid var(--text-primary);outline-offset:3px;border-radius:2px;}
@media(max-width:600px){.star-rating label{font-size:2.1rem;padding:6px;}}

/* ---------- Product-page "Back" link ---------- */
.pd-back-link{
  display:inline-block;margin:20px 0 0;font-size:.85rem;color:var(--text-muted);
  transition:color .2s ease;
}
.pd-back-link:hover{color:var(--text-primary);}

/* AMATUNI Studio Light CSS intentionally removed — the feature was disabled on the public site (see static/js/main.js and templates/product.html for the full note). */

/* ---------- Cart ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 380px;gap:60px;padding:50px 0 100px;}
.cart-row{display:grid;grid-template-columns:110px 1fr auto;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--border-soft);}
.cart-row img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.cart-row .meta{font-size:.85rem;color:var(--text-muted);margin:4px 0;}
.order-summary{background:var(--surface-alt);color:var(--text-primary);padding:34px;height:max-content;position:sticky;top:110px;}
.order-summary .row{display:flex;justify-content:space-between;font-size:.92rem;padding:8px 0;}
.order-summary .total{font-weight:600;font-size:1.1rem;border-top:1px solid var(--border-soft);margin-top:14px;padding-top:16px;}
.coupon-form{display:flex;gap:8px;margin:20px 0;}
.coupon-form input{flex:1;border:1px solid var(--border-soft);padding:10px 12px;}

/* ---------- Forms / Auth ---------- */
.auth-wrap{max-width:440px;margin:70px auto;padding:0 24px;}
.form-group{margin-bottom:20px;}
.form-group label{display:block;font-size:.8rem;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;}
.form-group input,.form-group select,.form-group textarea{
  width:100%;border:1px solid var(--border-soft);padding:13px 14px;font-size:.95rem;font-family:inherit;background:var(--surface);color:var(--text-primary);
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--text-primary);}
.form-error{color:#b5121b;font-size:.78rem;margin-top:6px;}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:.88rem;}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-footer-link{text-align:center;margin-top:24px;font-size:.9rem;}

/* ---------- Checkout ---------- */
.checkout-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;padding:50px 0 100px;}
.checkout-section{border-top:1px solid var(--border-soft);padding-top:30px;margin-top:30px;}
.checkout-section:first-child{border-top:none;padding-top:0;margin-top:0;}
.checkout-section h3{font-size:1.1rem;margin-bottom:18px;}
.ship-option{display:flex;justify-content:space-between;border:1px solid var(--border-soft);padding:16px;margin-bottom:10px;cursor:pointer;}
.ship-option.selected{border-color:var(--text-primary);}
.payment-box{border:1px dashed var(--border-soft);padding:20px;background:var(--surface-alt);font-size:.85rem;color:var(--text-muted);}

/* ---------- Tables (account / admin) ---------- */
table.data-table{width:100%;border-collapse:collapse;font-size:.88rem;}
table.data-table th,table.data-table td{padding:14px 12px;border-bottom:1px solid var(--border-soft);text-align:left;color:var(--text-primary);}
table.data-table th{text-transform:uppercase;font-size:.72rem;letter-spacing:1px;color:var(--text-muted);}
.status-pill{padding:4px 12px;border-radius:20px;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;}
.status-Pending{background:#f2e6c9;color:#8a6d1e;}
.status-Processing{background:#dfe7f5;color:#2a4f8f;}
.status-Shipped{background:#e0e9e0;color:#3a6b3a;}
.status-Delivered{background:#111;color:#fff;}
.status-Cancelled{background:#f5dede;color:#a13232;}
.status-payment-pending{background:#f2e6c9;color:#8a6d1e;}
.status-payment-paid{background:#e0e9e0;color:#3a6b3a;}
.status-payment-failed{background:#f5dede;color:#a13232;}
.status-payment-refunded{background:#e5e3df;color:#555;}

/* ---------- Admin ---------- */
.admin-shell{display:grid;grid-template-columns:230px 1fr;min-height:80vh;}
.admin-sidebar{background:var(--black);color:#d6d6d6;padding:34px 0;}
.admin-sidebar a{display:block;padding:12px 30px;font-size:.85rem;letter-spacing:.5px;}
.admin-sidebar a:hover,.admin-sidebar a.active{color:#fff;background:#1a1a1a;}
.admin-main{padding:44px;background:var(--surface-alt);}
.admin-page-heading{display:flex;gap:20px;align-items:flex-end;justify-content:space-between;margin-bottom:30px;}
.admin-page-heading .eyebrow{display:block;font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:7px;}
.admin-page-heading h1{font-size:2rem;margin:0;}
.homepage-card-editor{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(240px,.75fr);gap:28px;align-items:start;max-width:980px;}
.admin-editor-note{margin:0 0 24px;color:var(--text-muted);font-size:.88rem;line-height:1.6;}
.form-help,.form-error{margin:7px 0 0;font-size:.76rem;line-height:1.45;}
.form-help{color:var(--text-muted);}
.form-error{color:#a13232;}
.homepage-card-preview{padding:20px;background:var(--surface);border:1px solid var(--border-soft);}
.homepage-card-preview>.eyebrow{display:block;font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px;}
.homepage-card-preview-card{width:100%;}
.homepage-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.homepage-preview-empty{display:flex;align-items:center;justify-content:center;min-height:320px;background:var(--surface-alt);color:var(--text-muted);font-size:.8rem;text-align:center;padding:16px;}
.homepage-hero-preview{position:relative;min-height:360px;padding:34px 28px;display:flex;flex-direction:column;justify-content:flex-end;background-position:center;background-size:cover;color:var(--white);}
.homepage-hero-preview span{font-size:.7rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;opacity:.9;}
.homepage-hero-preview strong{font-family:'Cormorant Garamond',serif;font-size:2.2rem;line-height:1.05;white-space:pre-line;font-weight:500;}
.homepage-journey-preview{overflow:hidden;aspect-ratio:3/4;background:var(--surface-alt);}
.homepage-journey-preview img{width:100%;height:100%;object-fit:cover;}
.homepage-manager-section{background:var(--surface);border:1px solid var(--border-soft);padding:28px;margin-bottom:24px;color:var(--text-primary);}
.homepage-manager-heading{display:flex;gap:20px;align-items:flex-end;justify-content:space-between;margin-bottom:12px;}
.homepage-manager-heading .eyebrow{display:block;font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:7px;}
.homepage-manager-heading h2{font-size:1.5rem;margin:0;}
.homepage-manager-list{display:grid;gap:10px;}
.homepage-manager-item{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:16px;align-items:center;border-top:1px solid var(--border-soft);padding-top:10px;}
.homepage-manager-item strong{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:500;}
.homepage-manager-item p{margin:2px 0 0;color:var(--text-muted);font-size:.78rem;}
.homepage-manager-thumb{width:74px;height:90px;overflow:hidden;background:var(--surface-alt);}
.homepage-manager-thumb img{width:100%;height:100%;object-fit:cover;}
.homepage-manager-actions{display:flex;align-items:center;gap:8px;}
.homepage-manager-actions form{margin:0;}
.btn-danger{border:1px solid #a13232;background:#a13232;color:#fff;cursor:pointer;font-family:inherit;letter-spacing:1px;text-transform:uppercase;}
.btn-danger:hover,.btn-danger:focus-visible{background:#7f2222;border-color:#7f2222;color:#fff;}
.approval-summary{display:grid;grid-template-columns:minmax(130px, .4fr) 1fr;gap:12px 20px;margin:0;}
.approval-summary dt{font-size:.76rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);}
.approval-summary dd{margin:0;color:var(--text-primary);white-space:pre-line;}
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:40px;}
.stat-card{background:var(--surface);padding:26px;border:1px solid var(--border-soft);color:var(--text-primary);}
.stat-card .value{font-family:'Cormorant Garamond',serif;font-size:2.1rem;}
.stat-card .label{font-size:.75rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);}
.admin-panel{background:var(--surface);padding:30px;border:1px solid var(--border-soft);margin-bottom:30px;color:var(--text-primary);}
.order-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.order-detail-heading{font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:16px;}
.order-detail-row{display:flex;justify-content:space-between;padding:6px 0;font-size:.9rem;}
.customer-stat-row{display:flex;gap:36px;margin-bottom:24px;}
.customer-stat{text-align:left;}
.customer-stat .value{font-size:1.6rem;font-family:'Cormorant Garamond',serif;}
.customer-stat .label{font-size:.72rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);}
@media(max-width:900px){.order-detail-grid{grid-template-columns:1fr;}}
.admin-panel h3{font-size:1.1rem;margin-bottom:18px;}
.account-security-panel p{color:var(--text-muted);font-size:.9rem;line-height:1.6;max-width:620px;}
.account-confirm-dialog{width:min(100% - 32px,460px);padding:0;border:1px solid var(--border-soft);background:var(--surface);color:var(--text-primary);box-shadow:0 24px 70px rgba(0,0,0,.28);}
.account-confirm-dialog::backdrop{background:rgba(10,10,10,.58);backdrop-filter:blur(3px);}
.account-confirm-dialog__content{padding:32px;}
.account-confirm-dialog h2{font-size:1.7rem;margin-bottom:10px;}
.account-confirm-dialog p:not(.eyebrow){color:var(--text-muted);line-height:1.6;margin:0;}
.account-confirm-dialog__actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:28px;}
.cookie-consent{position:fixed;z-index:5200;left:14px;right:14px;bottom:14px;max-width:760px;margin:0 auto;padding: 20px;display:none;align-items:flex-end;gap:24px;border:1px solid var(--border-soft);background:var(--surface);color:var(--text-primary);box-shadow:0 18px 55px rgba(0,0,0,.22);opacity:0;pointer-events:none;transform:translateY(18px);transition:opacity .22s ease,transform .22s ease;}
.cookie-consent:not([hidden]){display:flex;}
.cookie-consent:not([hidden]).is-visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.cookie-consent[hidden]{display:none !important;pointer-events:none !important;}
.cookie-consent__copy{flex:1;min-width:0;}
.cookie-consent h2{font-size:1.45rem;margin-bottom:7px;}
.cookie-consent p:not(.eyebrow){margin:0;color:var(--text-muted);font-size:.87rem;line-height:1.55;}
.cookie-consent a{display:inline-block;margin-top:8px;font-size:.8rem;text-decoration:underline;text-underline-offset:3px;}
.cookie-consent__actions{display:flex;flex-wrap:wrap;gap:10px;flex-shrink:0;}
.address-default-badge{display:inline-block;background:var(--surface-alt);border:1px solid var(--border-soft);color:var(--text-muted);font:500 .65rem 'Jost',sans-serif;letter-spacing:.7px;padding:3px 6px;text-transform:uppercase;vertical-align:middle;}
.address-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.address-actions form{margin:0;}
.legal-page{max-width:900px;padding-top:58px;padding-bottom:100px;font-size:1rem;line-height:1.75;}
.legal-page h2{font-size:1.55rem;margin:42px 0 12px;}
.legal-page p{max-width:800px;margin:0 0 16px;}
.legal-page a{text-decoration:underline;text-underline-offset:3px;}
.legal-updated{color:var(--text-muted);font-size:.85rem;}

/* ---------- Misc ---------- */
.alert{padding:14px 20px;font-size:.88rem;margin-bottom:20px;border-left:3px solid var(--text-primary);background:var(--surface-alt);color:var(--text-primary);}
.alert-success{border-color:#3a6b3a;}
.alert-danger{border-color:#a13232;}
.alert-info{border-color:#2a4f8f;}
.empty-state{text-align:center;padding:100px 24px;color:var(--text-muted);}
.dark-toggle{cursor:pointer;background:none;border:none;font-size:1rem;color:inherit;transition:color .3s ease;}

body.dark-mode{background:var(--surface-alt);color:var(--text-primary);}
body.dark-mode header.site-header{background:var(--surface-translucent);border-color:var(--border-soft);}
body.dark-mode .main-nav a::after{background:var(--text-primary);}
body.dark-mode .product-card .img-wrap{background:var(--surface-alt);}
body.dark-mode .mobile-nav{background:var(--surface);border-color:var(--border-soft);}
body.dark-mode .shop-panel-level a:hover,
body.dark-mode .shop-panel-level a:focus-visible{background:var(--surface-alt);}
body.dark-mode footer{background:#000;}

.loader{width:34px;height:34px;border:2px solid var(--border-soft);border-top-color:var(--text-primary);border-radius:50%;animation:spin 0.8s linear infinite;margin:60px auto;}

/* ---------- Quick View modal ---------- */
.qv-modal{display:none;position:fixed;inset:0;z-index:2000;}
.qv-backdrop{position:fixed;inset:0;background:rgba(10,10,10,.6);display:flex;align-items:center;justify-content:center;padding:20px;}
.qv-box{position:relative;background:var(--surface);color:var(--text-primary);max-width:760px;width:100%;padding:34px;max-height:86vh;overflow:auto;}
.qv-close{position:absolute;top:14px;right:18px;background:none;border:none;font-size:1.6rem;cursor:pointer;color:inherit;}
.qv-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
.qv-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.qv-heading{font-family:'Cormorant Garamond',serif;}
.qv-price-row{margin:10px 0;display:flex;gap:10px;align-items:center;}
.qv-desc{color:var(--text-muted);font-size:.9rem;line-height:1.6;}
.qv-cta{margin-top:16px;display:inline-block;}
.qv-error{padding:40px;color:var(--text-muted);}
@media(max-width:640px){.qv-grid{grid-template-columns:1fr;}}
@keyframes spin{to{transform:rotate(360deg);}}


/* ---------- Toast notifications ---------- */
.toast-container{
  position:fixed;top:90px;right:24px;z-index:3200;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;
  pointer-events:none;
}
.toast{
  background:var(--black);color:var(--white);padding:14px 22px;font-size:.85rem;
  letter-spacing:.3px;box-shadow:0 12px 30px rgba(0,0,0,.18);
  opacity:0;transform:translateX(16px);transition:opacity .3s ease,transform .3s ease;
  max-width:320px;
}
.toast.is-visible{opacity:1;transform:translateX(0);}
.toast.toast-danger{background:#a13232;}

/* ---------- General hover / motion polish ---------- */
.product-card{transition:transform .3s ease;}
.product-card:hover{transform:translateY(-3px);}
.collection-card,.product-card .img-wrap,.pd-gallery-main{will-change:transform;}
.btn,.btn-sm,.btn-bag,.btn-wishlist,.quick-view-btn{transition:background .25s ease,color .25s ease,border-color .25s ease,opacity .25s ease;}

/* ---------- Scroll reveal (shared utility — used across the homepage
   instead of a bespoke animation per section) ----------
   Only takes effect once JS has confirmed it's running (.js-ready on
   <html>, set in base.html). Without JS, .reveal elements have no
   special styling at all and are simply visible — the reveal is
   enhancement, never a requirement to see the content. */
.js-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease;}
.js-ready .reveal.is-visible{opacity:1;transform:translateY(0);}
.js-ready .reveal-stagger .reveal:nth-child(2){transition-delay:.08s;}
.js-ready .reveal-stagger .reveal:nth-child(3){transition-delay:.16s;}
.js-ready .reveal-stagger .reveal:nth-child(4){transition-delay:.24s;}

/* ---------- AMATUNI entrance intro (homepage, first visit per session) ----------
   Safety model is the mirror image of .reveal above: the safe no-JS
   fallback here is "never show this decorative overlay at all", not
   "show it statically" — these elements duplicate the real header
   logo, so hiding them by default is what "fails open" means for this
   feature. display:none is unconditional; only JS explicitly adding
   .is-active (after confirming .js-ready, deciding to run the intro,
   and measuring the real logo's position) ever reveals it. If JS
   never runs, this rule never changes and the homepage renders exactly
   as if the intro didn't exist. */
.amatuni-intro-overlay{display:none;}
.js-ready .amatuni-intro-overlay.is-active{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:fixed;inset:0;z-index:9000;background:#161412;
  opacity:1;transition:opacity .6s ease;
}
.js-ready .amatuni-intro-overlay.is-fading{opacity:0;}
.amatuni-intro-eyebrow{
  color:rgba(243,240,232,.6);font-size:.8rem;letter-spacing:4px;text-transform:uppercase;
  margin-bottom:14px;transition:opacity .4s ease;
}
.amatuni-intro-overlay.is-eyebrow-out .amatuni-intro-eyebrow{opacity:0;}
/* Opening: each word composes in on its own — a soft opacity+upward
   drift with the letter-spacing settling from slightly open to normal,
   staggered ~180ms apart. Deliberately NOT a literal typewriter (no
   per-letter reveal, no cursor, no monospace) — this is closer to how
   an editorial title card assembles itself. */
.intro-word{
  display:inline-block;opacity:0;transform:translateY(8px);letter-spacing:.2em;
  transition:opacity .55s ease,transform .55s ease,letter-spacing .55s ease;
}
.amatuni-intro-overlay.is-active .intro-word{opacity:1;transform:translateY(0);letter-spacing:normal;}
.intro-word-to{transition-delay:.18s;}
.amatuni-intro-wordmark{
  color:#f3f0e8;font-family:'Cormorant Garamond',serif;font-weight:600;
  letter-spacing:4px;text-transform:uppercase;font-size:clamp(2.4rem,8vw,4.6rem);
  opacity:0;transform:scale(.92);
  transition:opacity .7s ease,transform .7s ease;
  transform-origin:center center;will-change:transform;
}
/* AMATUNI resolves in on its own beat, after the eyebrow has composed
   — see initHomepageIntro()'s timing. Not tied to .is-active directly
   any more, so the two don't compete for the same instant. */
.amatuni-intro-overlay.is-wordmark-in .amatuni-intro-wordmark{opacity:1;transform:scale(1);}
/* The move-to-logo transform is applied inline via JS (translate/scale
   computed from real measured geometry) with its own longer, easing
   transition — see initHomepageIntro() in main.js. Unchanged from
   before — this ending stays exactly as it was. */
.amatuni-intro-wordmark.is-transitioning{transition:transform 1s cubic-bezier(.65,0,.35,1),opacity .4s ease;}

@media(prefers-reduced-motion:reduce){
  .js-ready .amatuni-intro-overlay.is-active{transition:none;}
  .amatuni-intro-eyebrow,.intro-word,.amatuni-intro-wordmark,.amatuni-intro-wordmark.is-transitioning{transition:none!important;}
}

/* ---------- Editorial statement (large typographic pause between sections) ---------- */
.editorial-statement{padding:70px 0;text-align:center;}
.editorial-statement p{
  max-width:820px;margin:0 auto;font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.4;color:var(--text-primary);
}

/* ---------- Editorial marquee (moving typographic strip) ----------
   Pure CSS keyframe — no JS needed for a simple text ticker. Content is
   duplicated once so the -50% loop point is seamless. */
.editorial-marquee{overflow:hidden;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:22px 0;}
.editorial-marquee-track{display:flex;width:max-content;animation:marqueeScroll 26s linear infinite;}
.editorial-marquee-item{
  flex:0 0 auto;font-family:'Cormorant Garamond',serif;font-size:1.6rem;letter-spacing:1px;
  padding:0 34px;color:var(--text-muted);white-space:nowrap;
}
@keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Follow the Journey (continuous horizontal image track) ----------
   JS-driven (requestAnimationFrame) rather than a pure CSS keyframe,
   specifically so it can be paused on hover and dragged — a plain
   @keyframes loop can't respond to pointer input. Falls back to a
   static row (see main.js) under prefers-reduced-motion. */
.journey-section{padding-bottom:0;}
.homepage-journey-admin{max-width:1360px;margin:0 auto 16px;padding:0 32px;text-align:right;}
.journey-track{overflow:hidden;position:relative;cursor:grab;touch-action:pan-y;}
.journey-track:active{cursor:grabbing;}
.journey-track-row{display:flex;width:max-content;will-change:transform;}
.journey-item{flex:0 0 auto;width:280px;height:360px;margin-right:3px;position:relative;overflow:hidden;}
.journey-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;pointer-events:none;}
.journey-item:hover img{transform:scale(1.05);}

/* ---------- Responsive ---------- */
/* ---------- Admin: drag-drop image upload ---------- */
.visually-hidden-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* ---------- AMATUNI currency selector ----------
   One structural orbit, never five competing position transforms:

   rotation layer      = moves the whole circle as one unit
   fixed slot wrapper  = each evenly spaced point around the circle
   spread wrapper      = starts at the exact center, then moves outward
   coin face           = counter-rotates to keep symbol/code upright

   Keeping those responsibilities on separate nested nodes avoids the old
   double-centering bug (margin offsets plus translate(-50%)) that made the
   medallions appear to drift away from the modal center. */
.currency-modal-overlay{
  position:fixed;inset:0;background:rgba(10,9,8,.6);z-index:5000;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s ease,visibility 0s linear .32s;
}
.currency-modal-overlay.is-visible{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;}

.currency-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.985);
  z-index:5100;background:var(--surface);border:1px solid var(--border-soft);
  padding:58px 30px 34px;width:min(520px,92vw);text-align:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.75,.2,1),visibility 0s linear .32s;
}
.currency-modal.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1);transition-delay:0s;}

.currency-modal-close{
  position:absolute;top:16px;right:18px;background:none;border:none;font-size:1.7rem;
  color:var(--text-muted);cursor:pointer;line-height:1;padding:4px;transition:color .2s ease;
}
.currency-modal-close:hover,.currency-modal-close:focus-visible{color:var(--text-primary);}

.currency-medallion-ring{
  position:relative;width:min(368px,82vw);height:min(368px,82vw);margin:4px auto 18px;
  --currency-radius:140px;
  --orbit-angle:0deg;
  --face-angle:0deg;
  --orbit-duration:600ms;
  --coin-face:#f5ecdc;
  --coin-ink:#17130f;
  --coin-rim:#9c7846;
  --coin-rim-soft:#dcc092;
  --coin-shadow:rgba(53,38,20,.27);
}
body.dark-mode .currency-medallion-ring{
  --coin-face:#29211b;
  --coin-ink:#fff3df;
  --coin-rim:#c4a168;
  --coin-rim-soft:#765c38;
  --coin-shadow:rgba(0,0,0,.58);
}
@media(max-width:480px){
  .currency-medallion-ring{--currency-radius:114px;width:min(312px,82vw);height:min(312px,82vw);}
  .currency-medallion{width:76px;height:76px;}
}
@media(max-width:380px){
  .currency-medallion-ring{--currency-radius:96px;width:min(264px,78vw);height:min(264px,78vw);}
  .currency-medallion{width:68px;height:68px;}
  .medallion-symbol{font-size:1.68rem;}
  .currency-modal{padding:48px 18px 26px;}
}

.currency-orbit-rotation{
  position:absolute;inset:0;transform:rotate(var(--orbit-angle));
  transition:transform var(--orbit-duration) cubic-bezier(.2,.75,.2,1);
}
.currency-medallion-ring.is-resetting .currency-orbit-rotation,
.currency-medallion-ring.is-resetting .medallion-face{transition:none!important;}
.currency-orbit-position{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform:rotate(var(--slot-angle));transform-origin:center;
}
.currency-orbit-spread{
  position:absolute;left:0;top:0;width:0;height:0;
  transform:translateY(0);transition:transform .48s cubic-bezier(.2,.78,.23,1);
}
.currency-modal.is-open .currency-orbit-spread{transform:translateY(calc(-1 * var(--currency-radius)));}

.currency-medallion{
  position:absolute;left:0;top:0;width:88px;height:88px;
  background:none;border:none;padding:0;cursor:pointer;opacity:1;
  transform:translate(-50%,-50%) scale(.82);
  transition:transform .48s cubic-bezier(.2,.78,.23,1);
}
.currency-modal.is-open .currency-medallion{
  transform:translate(-50%,-50%) scale(1);
}
/* Light staggering gives the emergence a little choreography without ever
   changing the fixed orbit positions. Last coin lands at about 600 ms. */
.currency-orbit-position:nth-child(1) .currency-medallion,.currency-orbit-position:nth-child(1) .currency-orbit-spread{transition-delay:0ms;}
.currency-orbit-position:nth-child(2) .currency-medallion,.currency-orbit-position:nth-child(2) .currency-orbit-spread{transition-delay:28ms;}
.currency-orbit-position:nth-child(3) .currency-medallion,.currency-orbit-position:nth-child(3) .currency-orbit-spread{transition-delay:56ms;}
.currency-orbit-position:nth-child(4) .currency-medallion,.currency-orbit-position:nth-child(4) .currency-orbit-spread{transition-delay:84ms;}
.currency-orbit-position:nth-child(5) .currency-medallion,.currency-orbit-position:nth-child(5) .currency-orbit-spread{transition-delay:112ms;}

.medallion-face{
  position:relative;width:100%;height:100%;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:visible;
  background:radial-gradient(circle at 31% 26%,rgba(255,255,255,.68) 0 2%,transparent 23%),linear-gradient(145deg,var(--coin-face),color-mix(in srgb,var(--coin-face) 76%,var(--coin-rim)));
  border:2px solid var(--coin-rim);
  box-shadow:0 9px 20px var(--coin-shadow),inset 0 0 0 3px color-mix(in srgb,var(--coin-rim-soft) 62%,transparent);
  transform:rotate(calc(-1 * var(--slot-angle) + var(--face-angle)));
  transition:transform var(--orbit-duration) cubic-bezier(.2,.75,.2,1),box-shadow .2s ease;
}
.medallion-face::before{
  content:'';position:absolute;inset:6px;border:1px solid var(--coin-rim-soft);border-radius:50%;
  box-shadow:inset 0 0 12px rgba(0,0,0,.13);pointer-events:none;
}
.medallion-rim{
  position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);overflow:visible;pointer-events:none;
}
.medallion-rim text{fill:var(--coin-rim);font-family:'Jost','Helvetica Neue',Arial,sans-serif;font-size:6px;font-weight:600;letter-spacing:1.1px;}
.medallion-symbol{
  position:relative;z-index:1;width:1.14em;height:1.07em;display:grid;place-items:center;
  font-family:'Cormorant Garamond','Noto Serif Armenian',Georgia,serif;font-size:1.95rem;font-weight:600;color:var(--coin-ink);line-height:1;
}
/* Currency glyphs use different native proportions. These tiny optical
   corrections make every symbol read at the same visual size. */
.currency-medallion[data-currency='AMD'] .medallion-symbol{font-size:2.04rem;transform:translateY(-.01em) scaleX(1.04);}
.currency-medallion[data-currency='EUR'] .medallion-symbol{font-size:1.95rem;}
.currency-medallion[data-currency='USD'] .medallion-symbol{font-size:1.98rem;}
.currency-medallion[data-currency='GBP'] .medallion-symbol{font-size:1.96rem;}
.currency-medallion[data-currency='RUB'] .medallion-symbol{font-size:2.01rem;}
.medallion-code{position:relative;z-index:1;font-size:.59rem;letter-spacing:1.65px;color:var(--coin-ink);margin-top:3px;font-weight:600;}

/* Hover/focus: the target medallion grows slightly; the rest quiet down. */
.currency-medallion:hover .medallion-face,
.currency-medallion:focus-visible .medallion-face{box-shadow:0 11px 24px var(--coin-shadow),inset 0 0 0 3px var(--coin-rim-soft);}
.currency-medallion:focus-visible{outline:none;}
.currency-medallion:focus-visible .medallion-face{outline:2px solid var(--coin-rim);outline-offset:4px;}

/* Current selection — never relies on color alone: a ring plus a
   slightly heavier border. */
.currency-medallion.is-selected .medallion-face{border-width:3px;}
.currency-medallion.is-selected .medallion-face::before{
  inset:-7px;border-color:var(--coin-rim);box-shadow:0 0 0 2px color-mix(in srgb,var(--coin-rim-soft) 50%,transparent);
}

.currency-medallion-ring.is-transitioning .currency-medallion{pointer-events:none;}
.currency-medallion.is-pending .medallion-face{border-width:3px;box-shadow:0 11px 24px var(--coin-shadow),inset 0 0 0 3px var(--coin-rim-soft);}
.currency-medallion:disabled{cursor:wait;}

/* After a confirmed choice, the orbit returns gracefully to its centre
   before the modal itself fades out. The coins never vanish in one frame. */
.currency-modal.is-open.is-closing .currency-orbit-spread{
  transform:translateY(0);transition-duration:.24s;transition-delay:0ms;
}
.currency-modal.is-open.is-closing .currency-medallion{
  transform:translate(-50%,-50%) scale(.78);transition-duration:.24s;transition-delay:0ms;
}

.currency-modal-hint{font-size:.78rem;color:var(--text-muted);margin:6px 0 0;}

@media(prefers-reduced-motion:reduce){
  .currency-modal,.currency-modal-overlay,.currency-orbit-rotation,.currency-orbit-spread,.currency-medallion,.medallion-face{
    transition:none!important;
  }
}
.image-dropzone{
  border:2px dashed var(--border-soft);border-radius:2px;padding:36px 20px;text-align:center;
  cursor:pointer;transition:border-color .25s,background .25s;background:var(--surface-alt);color:var(--text-primary);
}
.image-dropzone:hover,.image-dropzone:focus-visible{border-color:var(--text-primary);outline:none;}
.image-dropzone.is-dragover{border-color:var(--text-primary);background:var(--surface);}
.image-dropzone-text{font-size:.92rem;margin-bottom:4px;}
.image-preview-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.image-preview-thumb{width:84px;text-align:center;animation:fadeUp .3s ease both;}
.image-preview-thumb img{width:84px;height:100px;object-fit:cover;border:1px solid var(--border-soft);}
.image-preview-thumb span{display:block;font-size:.65rem;color:var(--text-muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- Admin: draggable image gallery ---------- */
.image-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;}
.image-gallery-card{
  position:relative;border:1px solid var(--border-soft);padding:10px;background:var(--surface);color:var(--text-primary);
  cursor:grab;transition:transform .2s,box-shadow .2s,opacity .2s;
}
.image-gallery-card:active{cursor:grabbing;}
.image-gallery-card.is-dragging{opacity:.4;transform:scale(.97);}
.image-gallery-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.08);}
.image-gallery-thumb{aspect-ratio:3/4;overflow:hidden;background:var(--surface-alt);margin-bottom:8px;}
.image-gallery-thumb img{width:100%;height:100%;object-fit:cover;}
.image-primary-badge{position:absolute;top:16px;left:16px;z-index:2;}
.image-studio-badge{position:absolute;top:16px;right:16px;z-index:2;}
.image-alt-input{width:100%;font-size:.78rem;padding:7px 8px;border:1px solid var(--border-soft);margin-bottom:8px;background:var(--surface);color:var(--text-primary);}
.image-color-select{width:100%;font-size:.78rem;padding:7px 8px;border:1px solid var(--border-soft);margin-bottom:8px;background:var(--surface);color:var(--text-primary);}
.image-gallery-actions{display:flex;flex-direction:column;gap:6px;}

@media(max-width:1024px){
  .product-grid,.collections-grid{grid-template-columns:repeat(2,1fr);}
  .collection-card--feature{grid-column:span 2;}
  .homepage-card-editor{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .product-detail,.cart-layout,.checkout-layout{grid-template-columns:1fr;}
  .admin-shell{grid-template-columns:1fr;}
  .admin-sidebar{display:flex;overflow-x:auto;padding:14px;}
  .approval-summary{grid-template-columns:1fr;gap:4px;}
  .instagram-gallery{grid-template-columns:repeat(3,1fr);}
  .shop-panel{width:40vw;}
  .shop-filter-drawer{width:44vw;}
}
@media(max-width:720px){
  .main-nav{display:none;}
  .mobile-toggle{display:block;}
  .nav-wrap{padding:16px 20px;}
  .stat-cards{grid-template-columns:1fr 1fr;}
  .product-grid,.collections-grid{grid-template-columns:repeat(2,1fr);}
  .collection-card--feature{grid-column:span 2;min-height:330px;}
  .homepage-form-row{grid-template-columns:1fr;gap:0;}
  .homepage-manager-section{padding:20px;}
  .homepage-manager-heading{align-items:flex-start;flex-direction:column;gap:12px;}
  .homepage-manager-item{grid-template-columns:58px minmax(0,1fr);}
  .homepage-manager-thumb{width:58px;height:72px;}
  .homepage-manager-actions{grid-column:1 / -1;justify-content:flex-end;}
  section{padding:60px 0;}
  .shop-panel{width:86vw;min-width:0;}
  .toast-container{top:auto;bottom:24px;right:16px;left:16px;align-items:stretch;}
  .toast{max-width:none;}
  /* Full-screen sheet, not a scaled-down drawer — comfortable touch
     targets and room to breathe on a phone. */
  .shop-filter-drawer{width:100vw;max-width:none;min-width:0;top:0;height:100vh;}
  .shop-filter-overlay{top:0;}
  .shop-controls-bar{flex-direction:column;align-items:stretch;}
  .shop-search-form{max-width:none;}
  .shop-controls-actions{justify-content:space-between;}
  .shop-editorial-banner{height:180px;}
  .journey-item{width:190px;height:250px;}
  .homepage-journey-admin{padding:0 20px;}
  .editorial-marquee-item{font-size:1.1rem;padding:0 20px;}
  .editorial-statement p{padding:0 8px;}
  .cookie-consent{left:14px;right:14px;bottom:14px;padding:20px;}
  .cookie-consent:not([hidden]){display:block;}
  .cookie-consent__actions{margin-top:18px;}
  .cookie-consent__actions .btn{flex:1;white-space:nowrap;}
  .account-confirm-dialog__content{padding:26px 20px;}
}

/* ---------- Phone-only: swipeable product track ----------
   Narrower than the 720px breakpoint above on purpose — that one
   still serves tablets/phablets fine with a 2-column grid (per the
   brief, tablet already looks correct and isn't being touched). This
   targets true phone widths, where forcing two full cards into the
   remaining ~300px was the actual cause of the reported squeeze/
   overflow. Comes after the 720px block in source order so it wins
   for the overlapping range (browsers apply the later same-specificity
   rule). Native overflow-x + scroll-snap — no carousel library, no
   drag-handling JS, no continuous loop. Vertical page scroll is
   completely unaffected: this is a separate nested scroll container,
   not something that hijacks touch events on the page. */
@media(max-width:600px){
  .product-grid{
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:14px;
    /* Bleeds the track to the viewport edge (canceling .container's
       32px padding) then re-adds it as scroll-padding so the first
       card still lines up with the heading/text above it, and the
       page itself never gains horizontal overflow from this. */
    margin:0 -32px;
    padding:4px 32px 14px;
    scroll-padding-left:32px;
    scrollbar-width:none;
  }
  .product-grid::-webkit-scrollbar{display:none;}
  .product-grid .product-card{
    scroll-snap-align:start;
    flex:0 0 78vw;
    width:78vw;
    max-width:320px;
  }
}

/* Prevents the page behind the filter drawer (or the Shop nav panel)
   from scrolling while either is open on a touch device. */
body.no-scroll{overflow:hidden;}

@media(prefers-reduced-motion:reduce){
  .shop-filter-drawer,.shop-panel,.shop-filter-overlay,.shop-overlay,
  .product-card,.filter-chip,.editorial-marquee-track,.product-grid,body{transition:none!important;animation:none!important;}
  .product-grid{scroll-behavior:auto;}
  /* .reveal content appears instantly instead of animating in — still
     fully visible and functional, just without the motion. */
  .js-ready .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  /* The journey track's continuous auto-scroll is JS-driven (see
     main.js), which checks this same media query itself and simply
     never starts the animation loop — this rule only guards against
     any residual inline transform so the row sits in its natural,
     fully-visible static position. */
  .journey-track-row{transform:none!important;}
}