/* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --color-bg:            #f7f5f0;
    --color-bg-alt:        #eeece5;
    --color-panel:         #ffffff;
    --color-ink:           #1c1a17;
    --color-ink-soft:      #4a4640;
    --color-line:          #d9d5cb;
    --color-overlay:       rgba(28, 26, 23, 0.45);
    --color-accent:        #8a6f4b;
    --color-accent-soft:   #b79a72;

    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-utility: 'Jost', 'Helvetica Neue', Arial, sans-serif;

    --header-h: 84px;
    --ease: cubic-bezier(.65,0,.35,1);
    --dur-fast: .25s;
    --dur-med: .45s;
    --dur-slow: .7s;

    --gap: 4px;
    --radius-sm: 2px;
    --panel-inset: 12px;
    --panel-radius: 14px;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--color-bg);
    color:var(--color-ink);
    font-family:var(--font-utility);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{ display:block; max-width:100%; }
  button{ font-family:inherit; cursor:pointer; }
  a{ color:inherit; text-decoration:none; }
  ul{ margin:0; padding:0; list-style:none; }
  :focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; }

  .visually-hidden{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }

  /* ============================================================
     HEADER
     ============================================================ */
  .site-header{
    position:fixed; top:0; left:0; right:0; z-index:60;
    height:var(--header-h);
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:0 clamp(20px,4vw,56px);
    background:linear-gradient(to bottom, rgba(20,18,16,.55) 0%, rgba(20,18,16,0) 100%);
    color:#fff;
    transition:background var(--dur-med) var(--ease), color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
  }
  .site-header.is-scrolled{
    background:var(--color-panel);
    color:var(--color-ink);
    box-shadow:0 1px 0 var(--color-line);
  }
  .site-header.is-scrolled .icon-btn svg,
  .site-header.is-scrolled .menu-trigger svg{ stroke:var(--color-ink); }
  .site-header.is-scrolled .logo-mark svg{ fill:var(--color-ink); }

  .menu-trigger{
    justify-self:start;
    display:flex; align-items:center; gap:10px;
    background:none; border:none; color:inherit;
    font-family:var(--font-utility); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
    padding:8px 6px;
  }
  .menu-trigger svg{ width:20px; height:20px; stroke:currentColor; transition:transform var(--dur-fast) var(--ease); }
  .menu-trigger:hover svg{ transform:translateX(2px); }

  .logo{
    justify-self:center;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    line-height:1;
  }
  .logo-mark svg{ width:30px; height:30px; fill:currentColor; }
  .logo-word{
    font-family:var(--font-display);
    font-size:19px;
    letter-spacing:.28em;
    font-weight:500;
  }

  .header-icons{
    justify-self:end;
    display:flex; align-items:center; gap:22px;
  }

  /* Minimal language switcher — next to the user/account icon */
  .lang-switch{ position:relative; }
  .lang-switch-btn{
    display:flex; align-items:center; gap:5px;
    background:none; border:none; color:inherit;
    font-family:var(--font-utility);
    font-size:12px; letter-spacing:.06em; text-transform:uppercase;
    padding:4px 2px;
  }
  .lang-switch-btn svg{ width:12px; height:12px; stroke:currentColor; transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
  .lang-switch-btn:hover svg{ opacity:.65; }
  .lang-switch-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
  .lang-switch-menu{
    position:absolute; top:calc(100% + 14px); right:0;
    min-width:120px;
    background:var(--color-panel);
    border-radius:8px;
    box-shadow:0 14px 34px rgba(20,18,16,.18);
    list-style:none; margin:0; padding:6px;
    opacity:0; transform:translateY(-6px);
    pointer-events:none;
    transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    z-index:65;
  }
  .lang-switch-menu.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .lang-switch-menu a{
    display:block;
    padding:9px 12px;
    border-radius:5px;
    font-family:var(--font-utility);
    font-size:13.5px;
    color:var(--color-ink);
  }
  .lang-switch-menu a:hover{ background:var(--color-bg-alt); }
  .lang-switch-menu a.is-active{ color:var(--color-accent); font-weight:500; }

  .icon-btn{
    position:relative;
    background:none; border:none; color:inherit;
    display:flex; align-items:center; justify-content:center;
    width:26px; height:26px;
    padding:0;
  }
  .icon-btn svg{ width:100%; height:100%; stroke:currentColor; fill:none; transition:opacity var(--dur-fast) var(--ease); }
  .icon-btn:hover svg{ opacity:.65; }
  .badge{
    position:absolute; top:-7px; right:-9px;
    min-width:16px; height:16px; padding:0 3px;
    border-radius:50%;
    background:var(--color-accent);
    color:#fff;
    font-size:10px; font-weight:500;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-utility);
  }

  /* ============================================================
     HERO SLIDER (3 images + 1 video)
     ============================================================ */
  .hero{
    position:relative;
    height:100vh;
    min-height:560px;
    overflow:hidden;
    color:#fff;
    background:#0e0d0b; /* shows while media buffers */
  }

  .hero-slides{ position:absolute; inset:0; z-index:0; }
  .hero-slide{
    position:absolute; inset:0;
    opacity:0;
    transition:opacity 1.2s var(--ease);
  }
  .hero-slide.is-active{ opacity:1; z-index:1; }

  .hero-media{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }

  .hero-slide-overlay{
    position:absolute; inset:0; z-index:2;
    background:
      linear-gradient(90deg, rgba(10,9,8,.6) 0%, rgba(10,9,8,.2) 42%, rgba(10,9,8,0) 62%),
      linear-gradient(0deg, rgba(10,9,8,.55) 0%, rgba(10,9,8,0) 32%);
  }

  .hero-content{
    position:absolute; z-index:3;
    left:0; right:0; bottom:clamp(96px,14vh,150px);
    padding:0 clamp(20px,5vw,72px);
    max-width:760px;
  }
  .hero-heading{
    font-family:var(--font-display);
    font-weight:400;
    font-size:clamp(32px,5.2vw,60px);
    line-height:1.08;
    margin:0 0 30px;
    animation:rise .8s var(--ease) both .1s;
  }
  .hero-heading em{ font-style:italic; font-weight:600; }

  .hero-cta-group{
    display:flex; flex-wrap:wrap; gap:14px;
    animation:rise .8s var(--ease) both .25s;
  }
  .hero-btn{
    background:#fff; color:var(--color-ink);
    font-family:var(--font-utility);
    font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
    padding:18px 30px;
    border-radius:4px;
    transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .hero-btn:hover{ opacity:.82; transform:translateY(-1px); }

  .hero-sound-toggle{
    position:absolute; z-index:4;
    right:clamp(20px,5vw,72px); bottom:44px;
    width:40px; height:40px;
    border-radius:6px;
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(6px);
    border:none; color:#fff;
    display:flex; align-items:center; justify-content:center;
    transition:background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .hero-sound-toggle[hidden]{ display:none; }
  .hero-sound-toggle:hover{ background:rgba(255,255,255,.32); }
  .hero-sound-toggle svg{ width:18px; height:18px; }
  .hero-sound-toggle .icon-muted{ display:block; }
  .hero-sound-toggle .icon-unmuted{ display:none; }
  .hero-sound-toggle.is-unmuted .icon-muted{ display:none; }
  .hero-sound-toggle.is-unmuted .icon-unmuted{ display:block; }

  .hero-dots{
    position:absolute; z-index:4;
    left:0; right:0; bottom:20px;
    display:flex; align-items:center; justify-content:center;
    gap:10px;
  }

  @keyframes rise{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* ============================================================
     PRODUCT GRID
     ============================================================ */
  .grid-section{
    padding:56px clamp(24px,4vw,96px) 96px;
    max-width:1800px;
    margin:0 auto;
  }
  .product-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1.5fr;
    grid-template-rows:auto auto;
    gap:4px;
  }
  /* Explicit placement — do not rely on grid auto-flow, it can shove
     the 2nd tall item into a phantom implicit column. */
  .product-grid .pos-1{ grid-column:1; grid-row:1 / 3; }
  .product-grid .pos-2{ grid-column:2; grid-row:1; }
  .product-grid .pos-3{ grid-column:3; grid-row:1; }
  .product-grid .pos-4{ grid-column:2; grid-row:2; }
  .product-grid .pos-5{ grid-column:3; grid-row:2; }
  .product-grid .pos-6{ grid-column:4; grid-row:1 / 3; }

  .product-card{
    position:relative;
    overflow:hidden;
    background:var(--color-bg-alt);
    display:block;
  }
  /* NOTE: cell-tall and product-card sit on the SAME element, so this
     must be a compound selector (no space) — a descendant combinator
     here would never match. */
  .product-card.cell-tall{ height:100%; min-height:640px; }
  .product-card:not(.cell-tall){ aspect-ratio:3/4; }

  .product-card img{
    width:100%; height:100%; object-fit:cover;
    object-position:center 15%;
    transform:scale(1);
    transition:transform var(--dur-slow) var(--ease);
    will-change:transform;
  }
  .product-card.cell-tall img{ object-position:center 10%; }
  .product-card:hover img{ transform:scale(1.06); }

  .wish-btn{
    position:absolute; right:16px; bottom:16px;
    width:38px; height:38px; border-radius:50%;
    background:rgba(28,26,23,.45);
    backdrop-filter:blur(4px);
    border:none;
    display:flex; align-items:center; justify-content:center;
    opacity:1;
    transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .wish-btn svg{ width:17px; height:17px; stroke:#fff; fill:none; transition:fill var(--dur-fast) var(--ease); }
  .wish-btn:hover{ background:rgba(28,26,23,.8); transform:scale(1.06); }
  .wish-btn.is-active svg{ fill:#fff; }

  .product-caption{
    position:absolute; left:16px; bottom:16px;
    color:#fff; font-family:var(--font-utility);
    font-size:12px; letter-spacing:.05em;
    opacity:0; transform:translateY(6px);
    transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    text-shadow:0 1px 6px rgba(0,0,0,.4);
  }
  .product-card:hover .product-caption{ opacity:1; transform:translateY(0); }

  .section-heading{
    text-align:center;
    font-family:var(--font-display);
    font-weight:400;
    font-size:clamp(26px,3.4vw,40px);
    margin:0 0 40px;
    padding-top:64px;
  }

  /* ============================================================
     OVERLAY (shared)
     ============================================================ */
  .scrim{
    position:fixed; inset:0; z-index:70;
    background:rgba(45,42,38,.5);
    backdrop-filter:blur(3px);
    opacity:0; pointer-events:none;
    transition:opacity var(--dur-med) var(--ease);
  }
  .scrim.is-open{ opacity:1; pointer-events:auto; }

  /* ============================================================
     LEFT NAV PANEL
     ============================================================ */
  .nav-panel{
    position:fixed; z-index:80;
    top:var(--panel-inset); left:var(--panel-inset); bottom:var(--panel-inset);
    width:min(480px, calc(100vw - (var(--panel-inset) * 2)));
    border-radius:var(--panel-radius);
    background:var(--color-panel);
    box-shadow:0 24px 60px rgba(20,18,16,.22);
    opacity:0;
    transform:scale(.98);
    pointer-events:none;
    transition:opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
    display:flex; flex-direction:column;
    padding:28px clamp(24px,5vw,64px) 32px;
    overflow-y:auto;
  }
  .nav-panel.is-open{
    opacity:1;
    transform:scale(1);
    pointer-events:auto;
  }

  /* subtle staggered fade for menu text — direct-child combinator so
     this only targets the top-level Women/Men/Kids items, not the
     nested level-2 submenu <li>s (those animate via max-height instead) */
  .nav-list > li,
  .nav-secondary a,
  .nav-back,
  .nav-legal{
    opacity:0;
    transform:translateY(6px);
    transition:opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
  }
  .nav-panel.is-open .nav-list > li,
  .nav-panel.is-open .nav-secondary a,
  .nav-panel.is-open .nav-back,
  .nav-panel.is-open .nav-legal{
    opacity:1;
    transform:translateY(0);
  }
  .nav-list > li:nth-child(1){ transition-delay:.06s; }
  .nav-list > li:nth-child(2){ transition-delay:.10s; }
  .nav-list > li:nth-child(3){ transition-delay:.14s; }
  .nav-list > li:nth-child(4){ transition-delay:.18s; }
  .nav-list > li:nth-child(5){ transition-delay:.22s; }
  .nav-list > li:nth-child(6){ transition-delay:.26s; }
  .nav-list > li:nth-child(7){ transition-delay:.30s; }
  .nav-secondary a:nth-child(1){ transition-delay:.34s; }
  .nav-secondary a:nth-child(2){ transition-delay:.38s; }
  .nav-back{ transition-delay:.42s; }
  .nav-legal{ transition-delay:.46s; }

  .panel-close{
    align-self:flex-start;
    background:none; border:none;
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:36px;
  }
  .panel-close svg{ width:22px; height:22px; stroke:var(--color-ink); }

  .nav-list{ display:flex; flex-direction:column; gap:4px; margin-bottom:auto; }
  /* top-level link styling moved to .nav-list .nav-item-link, further
     down, so it doesn't also match the nested submenu <a> tags */

  .nav-secondary{ margin-top:44px; display:flex; flex-direction:column; gap:14px; }
  .nav-secondary a{
    font-size:15px; color:var(--color-ink-soft);
    display:flex; align-items:center; gap:6px;
  }
  .nav-secondary a svg{ width:13px; height:13px; }

  .nav-back{
    margin-top:40px;
    font-family:var(--font-display);
    font-style:italic;
    font-size:16px;
    display:flex; align-items:center; gap:6px;
    color:var(--color-ink-soft);
  }
  .nav-back svg{ width:13px; height:13px; }

  .nav-legal{
    margin-top:36px; padding-top:20px;
    border-top:1px solid var(--color-line);
    display:flex; flex-wrap:wrap; gap:20px;
  }
  .nav-legal a{
    font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:#8a857c;
  }
  .nav-legal a:hover{ color:var(--color-ink); }

  /* ============================================================
     RIGHT CART PANEL
     ============================================================ */
  .cart-panel{
    position:fixed; z-index:80;
    top:var(--panel-inset); right:var(--panel-inset); bottom:var(--panel-inset);
    width:min(560px, calc(100vw - (var(--panel-inset) * 2)));
    border-radius:var(--panel-radius);
    background:var(--color-panel);
    box-shadow:0 24px 60px rgba(20,18,16,.22);
    transform:translateX(calc(100% + var(--panel-inset)));
    transition:transform var(--dur-med) var(--ease);
    display:flex; flex-direction:column;
    padding:28px clamp(24px,5vw,64px) 40px;
    overflow-y:auto;
  }
  .cart-panel.is-open{ transform:translateX(0); }

  .cart-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:64px;
  }
  .cart-title{
    font-family:var(--font-display); font-weight:400;
    font-size:26px;
  }

  .cart-empty{ text-align:center; }
  .cart-empty-label{
    font-size:14px; color:var(--color-ink-soft);
    margin-bottom:28px;
  }
  .cart-quote{
    font-family:var(--font-display); font-style:italic;
    font-size:clamp(22px,3vw,30px);
    line-height:1.3;
    margin:0 0 40px;
  }
  .cart-image{
    width:65%; margin:0 auto; aspect-ratio:3/4; overflow:hidden;
    background:var(--color-bg-alt);
  }
  .cart-image img{ width:100%; height:100%; object-fit:cover; }

  /* ============================================================
     INSPIRE SLIDESHOW
     ============================================================ */
  .inspire-section{
    background:#141210;
    padding-bottom:28px;
  }
  .slideshow{
    position:relative;
    height:100vh;
    min-height:520px;
    max-height:960px;
    overflow:hidden;
  }
  .slide{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 1.4s var(--ease);
  }
  .slide.is-active{ opacity:1; }
  .slide-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,9,8,.35) 0%, rgba(10,9,8,.1) 35%, rgba(10,9,8,.5) 100%);
    pointer-events:none;
  }
  .inspire-copy{
    position:absolute; inset:0; z-index:2;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; color:#fff;
    padding:0 24px;
  }
  .inspire-copy h2{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(32px,5.4vw,64px);
    margin:0 0 14px;
  }
  .inspire-copy p{
    font-family:var(--font-utility);
    font-size:13px; letter-spacing:.08em; text-transform:uppercase;
    opacity:.85; margin:0;
  }

  .slide-dots{
    display:flex; align-items:center; justify-content:center;
    gap:10px;
    padding-top:22px;
  }
  .dot{
    width:7px; height:7px; border-radius:50%;
    background:rgba(255,255,255,.3);
    border:none; padding:0;
    transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .dot:hover{ background:rgba(255,255,255,.55); }
  .dot.is-active{ background:#fff; transform:scale(1.35); }

  /* ============================================================
     FOOTER
     ============================================================ */
  .site-footer{
    background:var(--color-ink);
    color:#fff;
    padding-top:64px;
  }

  .footer-inner{
    max-width:1800px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:40px;
    padding:0 clamp(20px,4vw,56px) 56px;
  }

  .footer-newsletter-label{
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.6);
    margin:0 0 20px;
    max-width:380px;
    line-height:1.6;
  }

  .newsletter-form{
    display:flex;
    align-items:center;
    background:#fff;
    border-radius:2px;
    max-width:440px;
    overflow:hidden;
  }
  .newsletter-input{
    flex:1; min-width:0;
    border:none; outline:none;
    background:transparent;
    font-family:var(--font-utility);
    font-size:15px;
    color:var(--color-ink);
    padding:16px 8px 16px 20px;
  }
  .newsletter-input::placeholder{ color:#8a857c; }
  .newsletter-submit{
    border:none; background:transparent;
    padding:16px 22px;
    font-family:var(--font-utility);
    font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--color-ink);
    white-space:nowrap;
    transition:opacity var(--dur-fast) var(--ease);
  }
  .newsletter-submit:hover{ opacity:.55; }

  .footer-social{
    display:flex; gap:14px;
    margin:28px 0 0;
    padding:0;
    list-style:none;
  }
  .footer-social a{
    width:34px; height:34px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    transition:opacity var(--dur-fast) var(--ease);
  }
  .footer-social svg{ width:18px; height:18px; }
  .footer-social a:hover{ opacity:.55; }

  .footer-col-title{
    font-size:12px; letter-spacing:.12em; text-transform:uppercase;
    color:rgba(255,255,255,.5);
    font-weight:500;
    margin:0 0 22px;
  }
  .footer-col ul{
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:16px;
  }
  .footer-col a{
    font-size:14px; letter-spacing:.04em; text-transform:uppercase;
    color:#fff;
    transition:opacity var(--dur-fast) var(--ease);
  }
  .footer-col a:hover{ opacity:.55; }

  .footer-bottom{
    max-width:1800px;
    margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:16px;
    padding:24px clamp(20px,4vw,56px) 32px;
    border-top:1px solid rgba(255,255,255,.15);
  }
  .footer-copyright{
    font-size:13px;
    color:rgba(255,255,255,.5);
    margin:0;
  }
  .footer-top-btn{
    background:none; border:none;
    color:#fff;
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .footer-top-btn svg{ width:18px; height:18px; }
  .footer-top-btn:hover{ transform:translateY(-3px); opacity:.7; }

  @media (max-width:900px){
    .footer-inner{ grid-template-columns:1fr 1fr; }
    .footer-newsletter{ grid-column:1 / -1; }
  }
  @media (max-width:560px){
    .footer-inner{ grid-template-columns:1fr; gap:36px; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; gap:18px; }
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width:1024px){
    .product-grid{ grid-template-columns:1fr 1fr; grid-template-rows:auto; }
    .product-grid .pos-1,
    .product-grid .pos-6{ grid-column:1 / -1; grid-row:auto; }
    .product-grid .pos-2,
    .product-grid .pos-3,
    .product-grid .pos-4,
    .product-grid .pos-5{ grid-column:auto; grid-row:auto; }
    .product-card.cell-tall{ min-height:420px; aspect-ratio:16/10; }
  }

  @media (max-width:640px){
    :root{ --header-h:64px; }
    .menu-trigger span{ display:none; }
    .logo-word{ font-size:15px; letter-spacing:.2em; }
    .header-icons{ gap:16px; }
    .product-grid{ grid-template-columns:1fr; }
    .product-grid [class^="pos-"]{ grid-column:1; grid-row:auto; }
    .product-card.cell-tall{ min-height:0; aspect-ratio:4/5; }
    .product-card:not(.cell-tall){ aspect-ratio:4/5; }
    .wish-btn, .product-caption{ opacity:1; transform:none; }
    .hero-heading{ font-size:9.5vw; }
    .hero-sound-toggle{ bottom:24px; width:34px; height:34px; }
    :root{ --panel-inset:8px; --panel-radius:10px; }
    .nav-panel, .cart-panel{ width:calc(100vw - (var(--panel-inset) * 2)); }
  }


  /* ============================================================
     SHOP + PRODUCT PAGES — merged in from shop.css / product.css
     (previously separate files; consolidated into one stylesheet
     per-page CSS that used to duplicate the shared tokens/header/
     nav/cart/footer above has been dropped, keeping only what was
     actually unique to those pages)
     ============================================================ */

  .site-header--inner{
    background:var(--color-panel);
    color:var(--color-ink);
    box-shadow:0 1px 0 var(--color-line);
  }
  .site-header--inner .icon-btn svg,
  .site-header--inner .menu-trigger svg{ stroke:var(--color-ink); }
  .site-header--inner .logo-mark svg{ fill:var(--color-ink); }
  .site-header.is-scrolled{ box-shadow:0 1px 0 var(--color-line), 0 8px 24px rgba(20,18,16,.06); }

  /* ============================================================
     PAGE HEAD — breadcrumb + title + utility bar
     ============================================================ */
  .page-wrap{
    max-width:1800px;
    margin:120px auto;
    padding:0 clamp(20px,4vw,56px);
  }

  .breadcrumb{
    padding-top:calc(var(--header-h) + 28px);
  }
  .breadcrumb ul{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--color-ink-soft);
  }
  .breadcrumb a:hover{ color:var(--color-ink); }
  .breadcrumb li[aria-current]{ color:var(--color-ink); }

  .page-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    padding:22px 0 8px;
    flex-wrap:wrap;
  }
  .page-title{
    font-family:var(--font-display);
    font-weight:400;
    font-size:clamp(30px,4.2vw,48px);
    margin:0;
  }
  .page-count{
    font-size:12.5px;
    color:var(--color-ink-soft);
    letter-spacing:.03em;
  }

  .utility-bar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:18px 0;
    border-top:1px solid var(--color-line);
    border-bottom:1px solid var(--color-line);
    margin-bottom:40px;
  }
  .filters-trigger{
    display:flex; align-items:center; gap:10px;
    background:none; border:none; color:var(--color-ink);
    font-size:12px; letter-spacing:.16em; text-transform:uppercase;
    padding:4px 2px;
  }
  .filters-trigger svg{ width:18px; height:18px; stroke:var(--color-ink); }
  .filters-trigger:hover{ opacity:.65; }

  /* Grid layout toggle — desktop stays fixed at 3-up and hides this;
     tablet/mobile reveal it so the shopper can choose 2-up or 1-up. */
  .grid-toggle{
    display:none;
    align-items:center;
    gap:8px;
    margin-right:auto;
  }
  .grid-toggle-btn{
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    background:none;
    border:1px solid var(--color-line);
    border-radius:2px;
    color:var(--color-ink-soft);
    transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .grid-toggle-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; }
  .grid-toggle-btn:hover:not(.is-active){ border-color:var(--color-ink); color:var(--color-ink); }
  .grid-toggle-btn.is-active{ background:var(--color-ink); border-color:var(--color-ink); color:#fff; }

  /* ============================================================
     SHOP GRID — uniform 3-up, equal width & height
     ============================================================ */
  .shop-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    column-gap:4px;
    row-gap:52px;
    padding-bottom:100px;
  }

  .shop-card{ display:block; }

  .shop-card-media{
    position:relative;
    aspect-ratio:4 / 5;
    overflow:hidden;
    background:var(--color-bg-alt);
  }
  .shop-img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    opacity:0;
    transform:scale(1);
    transition:opacity var(--dur-fast) var(--ease), transform var(--dur-slow) var(--ease);
  }
  .shop-img.is-active{ opacity:1; }
  .shop-card-media:hover .shop-img.is-active{ transform:scale(1.04); }

  .shop-wish{
    position:absolute; top:14px; right:14px; z-index:3;
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.92);
    border:none;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(20,18,16,.12);
    transition:transform var(--dur-fast) var(--ease);
  }
  .shop-wish svg{ width:16px; height:16px; stroke:var(--color-ink); fill:none; transition:fill var(--dur-fast) var(--ease); }
  .shop-wish:hover{ transform:scale(1.08); }
  .shop-wish.is-active svg{ fill:var(--color-ink); }

  .shop-nav{
    position:absolute; top:50%; z-index:3;
    transform:translateY(-50%);
    width:34px; height:34px;
    border-radius:50%;
    background:rgba(255,255,255,.85);
    border:none;
    display:flex; align-items:center; justify-content:center;
    opacity:0;
    transition:opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  }
  .shop-nav svg{ width:16px; height:16px; stroke:var(--color-ink); }
  .shop-nav--prev{ left:12px; }
  .shop-nav--next{ right:12px; }
  .shop-card-media:hover .shop-nav{ opacity:1; }
  .shop-nav:hover{ background:#fff; }
  .shop-card-media:not(.has-multiple) .shop-nav{ display:none; }

  .shop-progress{
    position:absolute; left:12px; right:12px; bottom:12px; z-index:3;
    display:flex; gap:4px;
  }
  .shop-progress-bar{
    flex:1; height:2px;
    background:rgba(255,255,255,.5);
    border-radius:1px;
    overflow:hidden;
  }
  .shop-progress-bar::after{
    content:"";
    display:block; height:100%; width:0%;
    background:#fff;
    transition:width var(--dur-fast) var(--ease);
  }
  .shop-progress-bar.is-active::after{ width:100%; }
  .shop-card-media:not(.has-multiple) .shop-progress{ display:none; }

  .shop-card-info{ padding-top:14px; }
  .shop-card-row{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:12px;
  }
  .shop-card-name{
    font-size:14.5px;
    letter-spacing:.01em;
    color:var(--color-ink);
    line-height:1.35;
  }
  .shop-card-name:hover{ color:var(--color-accent); }
  .shop-add{
    flex-shrink:0;
    width:24px; height:24px;
    border-radius:50%;
    border:1px solid var(--color-line);
    background:none;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; line-height:1;
    color:var(--color-ink);
    transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .shop-add:hover{ background:var(--color-ink); color:#fff; border-color:var(--color-ink); }

  .shop-card-price{
    font-size:14px;
    margin:8px 0 4px;
  }
  .shop-card-colours{
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--color-ink-soft);
    margin:0;
  }


  /* ============================================================
     RIGHT FILTER PANEL — same floating-card family as the cart,
     shares the single-active-panel state so it never stacks
     with the cart or the nav menu.
     ============================================================ */
  .filter-panel{
    position:fixed; z-index:80;
    top:var(--panel-inset); right:var(--panel-inset); bottom:var(--panel-inset);
    width:min(460px, calc(100vw - (var(--panel-inset) * 2)));
    border-radius:var(--panel-radius);
    background:var(--color-panel);
    box-shadow:0 24px 60px rgba(20,18,16,.22);
    transform:translateX(calc(100% + var(--panel-inset)));
    transition:transform var(--dur-med) var(--ease);
    display:flex; flex-direction:column;
    overflow:hidden;
  }
  .filter-panel.is-open{ transform:translateX(0); }

  .filter-head{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    padding:26px 24px;
    border-bottom:1px solid var(--color-line);
    flex-shrink:0;
  }
  .filter-title{
    font-family:var(--font-utility);
    font-size:13px; letter-spacing:.22em; text-transform:uppercase;
    margin:0;
  }
  .filter-head .panel-close{
    position:absolute; right:20px; top:50%;
    transform:translateY(-50%);
    margin-bottom:0;
  }

  .filter-body{
    flex:1; min-height:0;
    overflow-y:auto;
    padding:6px clamp(22px,4vw,40px) 24px;
  }

  .filter-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 0;
    border-bottom:1px solid var(--color-line);
  }
  .filter-row-label{ font-size:15px; }
  .filter-select{
    display:flex; align-items:center; gap:8px;
    background:none; border:none; color:var(--color-ink);
    font-size:15px;
  }
  .filter-select svg{ width:14px; height:14px; stroke:var(--color-ink); transition:transform var(--dur-fast) var(--ease); }
  .filter-select[aria-expanded="true"] svg{ transform:rotate(180deg); }

  .filter-row--sort{ position:relative; overflow:visible; }
  .sort-select{ position:relative; }
  .sort-select-menu{
    position:absolute; top:calc(100% + 10px); right:0;
    min-width:200px;
    background:var(--color-panel);
    border:1px solid var(--color-line);
    border-radius:8px;
    box-shadow:0 16px 36px rgba(20,18,16,.16);
    list-style:none; margin:0; padding:6px;
    opacity:0; transform:translateY(-6px);
    pointer-events:none;
    transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    z-index:20;
  }
  .sort-select-menu.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .sort-select-menu li{
    padding:10px 12px;
    border-radius:5px;
    font-size:13.5px;
    color:var(--color-ink);
    cursor:pointer;
    transition:background var(--dur-fast) var(--ease);
  }
  .sort-select-menu li:hover{ background:var(--color-bg-alt); }
  .sort-select-menu li[aria-selected="true"]{ color:var(--color-accent); font-weight:500; }

  .filter-group{ border-bottom:1px solid var(--color-line); }
  .filter-group-summary{
    list-style:none;
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 0;
    font-size:16px; font-weight:600;
    cursor:pointer;
  }
  .filter-group-summary::-webkit-details-marker{ display:none; }
  .filter-group-summary svg{
    width:16px; height:16px; stroke:var(--color-ink);
    transition:transform var(--dur-fast) var(--ease);
  }
  .filter-group[open] .filter-group-summary svg{ transform:rotate(180deg); }

  .filter-options{
    display:flex; flex-direction:column; gap:18px;
    padding-bottom:22px;
  }
  .filter-check{
    display:flex; align-items:center; gap:12px;
    font-size:15px;
    cursor:pointer;
  }
  .filter-check input{
    width:17px; height:17px;
    accent-color:var(--color-ink);
  }
  .filter-count{ color:var(--color-ink-soft); font-size:14px; }

  .filter-swatches{
    display:grid; grid-template-columns:repeat(6, 1fr);
    gap:10px; padding-bottom:22px;
  }
  .filter-swatch{
    width:100%; aspect-ratio:1;
    border-radius:50%;
    border:1px solid var(--color-line);
    cursor:pointer;
  }

  .filter-footer{
    flex-shrink:0;
    padding:20px clamp(22px,4vw,40px) 26px;
    border-top:1px solid var(--color-line);
    text-align:center;
  }
  .filter-reset{
    background:none; border:none;
    font-size:12px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--color-ink-soft);
    text-decoration:underline;
    text-underline-offset:4px;
    margin-bottom:16px;
  }
  .filter-reset:hover{ color:var(--color-ink); }
  .filter-apply{
    width:100%;
    background:var(--color-ink); color:#fff;
    border:none;
    padding:17px;
    font-size:13px; letter-spacing:.14em; text-transform:uppercase;
    transition:opacity var(--dur-fast) var(--ease);
  }
  .filter-apply:hover{ opacity:.85; }


  /* ============================================================
     PRODUCT MAIN — sticky right column via plain CSS position:sticky.
     It releases automatically once the taller left gallery column
     ends, so normal scrolling resumes with zero JS.
     ============================================================ */
  .product-main{
    display:grid;
    grid-template-columns:1fr 420px;
    gap:56px;
    align-items:start;
    padding-bottom:88px;
  }

  .product-gallery{ display:flex; flex-direction:column; gap:4px; }
  .product-gallery img{ width:100%; height:auto; background:var(--color-bg-alt); }

  .product-info{
    position:sticky;
    top:calc(var(--header-h) + 24px);
  }
  .product-info-top{
    display:flex; align-items:flex-start; justify-content:space-between;
    margin-bottom:16px;
  }
  .product-sku{ font-size:12px; color:var(--color-ink-soft); letter-spacing:.03em; }
  .product-info-icons{ display:flex; gap:16px; }
  .product-info-icons button{ background:none; border:none; width:22px; height:22px; padding:0; }
  .product-info-icons svg{ width:100%; height:100%; stroke:var(--color-ink); fill:none; transition:fill var(--dur-fast) var(--ease); }
  .product-info-icons button.is-active svg{ fill:var(--color-ink); }

  .product-title{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(24px,2.3vw,32px);
    line-height:1.28;
    margin:0 0 14px;
  }
  .product-price{ font-size:19px; margin:0 0 22px; }
  hr.product-divider{ border:none; border-top:1px solid var(--color-line); margin:0; }

  .color-block{ padding:24px 0; border-bottom:1px solid var(--color-line); }
  .color-block-top{ display:flex; align-items:center; gap:14px; }
  .color-label{
    font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--color-ink-soft);
    flex-shrink:0;
  }
  .color-row{
    display:flex; gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
    flex:1;
  }
  .color-row::-webkit-scrollbar{ display:none; }
  .color-swatch{
    flex-shrink:0;
    width:52px; height:62px;
    border:2px solid transparent;
    padding:0; background:none;
    overflow:hidden;
  }
  .color-swatch img{ width:100%; height:100%; object-fit:cover; }
  .color-swatch.is-active{ border-color:var(--color-ink); }
  .color-scroll-btn{
    flex-shrink:0;
    width:26px; height:26px;
    border-radius:50%;
    background:none; border:1px solid var(--color-line);
    display:flex; align-items:center; justify-content:center;
  }
  .color-scroll-btn svg{ width:13px; height:13px; stroke:var(--color-ink); }
  .color-selected-name{ font-size:13px; color:var(--color-ink-soft); margin:12px 0 0; }

  .size-block{ border-bottom:1px solid var(--color-line); }
  .size-toggle-row{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; background:none; border:none;
    padding:20px 0;
    font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--color-ink);
  }
  .size-toggle-row svg{ width:16px; height:16px; stroke:var(--color-ink); transition:transform var(--dur-fast) var(--ease); }
  .size-block.is-open .size-toggle-row svg{ transform:rotate(180deg); }
  .size-grid{
    display:flex; flex-wrap:wrap; gap:10px;
    max-height:0; overflow:hidden;
    transition:max-height var(--dur-med) var(--ease), padding-bottom var(--dur-med) var(--ease);
  }
  .size-block.is-open .size-grid{ max-height:220px; padding-bottom:22px; }
  .size-btn{
    width:46px; height:46px; border-radius:50%;
    border:1px solid var(--color-line); background:none;
    font-size:12.5px; color:var(--color-ink);
    display:flex; align-items:center; justify-content:center;
    transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .size-btn:hover{ border-color:var(--color-ink); }
  .size-btn.is-active{ background:var(--color-ink); color:#fff; border-color:var(--color-ink); }

  .view-details-btn{
    display:flex; align-items:center; gap:10px;
    width:100%; text-align:left;
    background:none; border:none;
    padding:20px 0;
    font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--color-ink);
  }
  .view-details-btn .plus-icon{ font-size:16px; width:14px; text-align:center; }
  .view-details-btn span.underline{ text-decoration:underline; text-underline-offset:4px; }

  .add-cart-btn{
    width:100%;
    background:var(--color-ink); color:#fff; border:none;
    padding:18px;
    font-size:13px; letter-spacing:.14em; text-transform:uppercase;
    margin-top:6px;
    transition:opacity var(--dur-fast) var(--ease);
  }
  .add-cart-btn:hover{ opacity:.85; }

  .shipping-note{
    display:flex; align-items:center; gap:10px;
    font-size:13px; color:var(--color-ink-soft);
    margin:20px 0 26px;
  }
  .shipping-note svg{ width:18px; height:18px; stroke:var(--color-ink-soft); flex-shrink:0; }

  .info-links{ display:flex; align-items:center; gap:18px; }
  .info-links a{
    display:flex; align-items:center; gap:6px;
    font-size:11px; letter-spacing:.07em; text-transform:uppercase;
    text-decoration:underline; text-underline-offset:4px;
  }
  .info-links a svg{ width:14px; height:14px; stroke:var(--color-ink); }
  .info-links-divider{ width:1px; height:16px; background:var(--color-line); }


  /* ============================================================
     PRODUCT EXTRA — Details / Packaging / Shipping & Returns
     (the "normal scrolling section" the View Details button jumps to)
     ============================================================ */
  .product-extra{
    max-width:1800px; margin:0 auto;
    padding:8px clamp(20px,4vw,56px) 72px;
    border-top:1px solid var(--color-line);
    scroll-margin-top:calc(var(--header-h) + 20px);
  }
  .extra-row{
    display:grid; grid-template-columns:1fr 1fr; gap:56px;
    padding:8px 0;
    border-bottom:1px solid var(--color-line);
  }
  .extra-row--full{ grid-template-columns:1fr; }

  /* Accordion — collapsed by default; JS sets an explicit max-height
     (measured via scrollHeight) to animate open/closed. */
  .accordion-toggle{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    gap:16px;
    background:none; border:none; text-align:left;
    padding:24px 0;
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
    color:var(--color-ink);
  }
  .accordion-icon{ position:relative; width:16px; height:16px; flex-shrink:0; }
  .accordion-icon::before,
  .accordion-icon::after{
    content:""; position:absolute;
    top:50%; left:50%; transform:translate(-50%,-50%);
    background:var(--color-ink);
  }
  .accordion-icon::before{ width:14px; height:1.4px; }
  .accordion-icon::after{ width:1.4px; height:14px; transition:opacity var(--dur-fast) var(--ease); }
  .accordion-toggle[aria-expanded="true"] .accordion-icon::after{ opacity:0; }

  .accordion-panel{
    max-height:0;
    overflow:hidden;
    transition:max-height var(--dur-med) var(--ease);
  }
  .accordion-panel.is-open{
      max-height:150px;
  }
  .accordion-panel-inner{ padding-bottom:28px; }

  .extra-list{ list-style:none; margin:0 0 18px; padding:0; color:var(--color-ink-soft); font-size:14px; line-height:1.9; }
  .extra-material{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-ink-soft); margin:0; }

  .extra-packaging{ display:flex; gap:24px; align-items:flex-start; }
  .extra-packaging img{ width:190px; flex-shrink:0; }
  .extra-packaging p{ font-size:14px; color:var(--color-ink-soft); line-height:1.75; margin:0; }

  .extra-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
  .extra-grid-2 h4{ font-size:14px; margin:0 0 10px; }
  .extra-grid-2 p{ font-size:14px; color:var(--color-ink-soft); line-height:1.75; margin:0; }
  .extra-grid-2 a{ text-decoration:underline; text-underline-offset:3px; color:var(--color-ink); }

  /* ============================================================
     STICKY "ADD TO CART" BAR — appears once the main add-to-cart
     button scrolls out of view, hides again near the footer.
     ============================================================ */
  .sticky-cart-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:55;
    background:var(--color-panel);
    border-top:1px solid var(--color-line);
    box-shadow:0 -10px 24px rgba(20,18,16,.08);
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:14px clamp(20px,4vw,56px);
    transform:translateY(100%);
    transition:transform var(--dur-med) var(--ease);
  }
  .sticky-cart-bar.is-visible{ transform:translateY(0); }
  .sticky-cart-info{ display:flex; align-items:center; gap:14px; min-width:0; }
  .sticky-cart-thumb{ width:44px; height:54px; object-fit:cover; flex-shrink:0; }
  .sticky-cart-text{ min-width:0; }
  .sticky-cart-name{
    font-size:13px; margin:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .sticky-cart-price{ font-size:13px; color:var(--color-ink-soft); margin:2px 0 0; }
  .sticky-cart-actions{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
  .sticky-select{
    display:flex; align-items:center; gap:8px;
    font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--color-ink-soft);
  }
  .sticky-select-thumb{ width:26px; height:32px; object-fit:cover; }
  .sticky-select svg{ width:12px; height:12px; stroke:var(--color-ink-soft); }
  .sticky-add-btn{
    background:var(--color-ink); color:#fff; border:none;
    padding:12px 24px;
    font-size:12px; letter-spacing:.12em; text-transform:uppercase;
    white-space:nowrap;
  }


  /* ============================================================
     RELATED PRODUCTS — reuses the Shop page's card system
     ============================================================ */
  .related-section{
    max-width:1800px; margin:0 auto;
    padding:64px clamp(20px,4vw,56px) 100px;
  }
  .related-heading{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(26px,3.6vw,42px);
    margin:0 0 40px;
  }

  /* Carousel — 3 visible desktop / 2 tablet / 1 mobile.
     Built on native scroll-snap rather than a JS library: cheap,
     smooth, gives free touch/trackpad swipe, and keeps this theme
     dependency-free like the rest of the site. */
  .carousel{ position:relative; }
  .carousel-track{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    padding-bottom:4px;
    margin:0 -4px;
    padding-inline:4px;
  }
  .carousel-track::-webkit-scrollbar{ display:none; }
  .carousel-item{
    scroll-snap-align:start;
    flex:0 0 calc((100% - (2 * 20px)) / 3); /* 3 visible on desktop */
    min-width:0;
  }
  .carousel-arrow{
    position:absolute; top:50%; z-index:5;
    transform:translateY(-50%);
    width:44px; height:44px;
    border-radius:50%;
    background:var(--color-panel);
    border:1px solid var(--color-line);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(20,18,16,.14);
    transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .carousel-arrow:hover{ background:var(--color-bg-alt); border-color:var(--color-ink); }
  .carousel-arrow svg{ width:18px; height:18px; stroke:var(--color-ink); }
  .carousel-arrow--prev{ left:22px; }
  .carousel-arrow--next{ right:22px; }
  .carousel-arrow[disabled]{ opacity:.35; pointer-events:none; }

  @media (max-width:1024px){
    .carousel-item{ flex-basis:calc((100% - 20px) / 2); } /* 2 visible on tablet */
    .carousel-arrow--prev{ left:-8px; }
    .carousel-arrow--next{ right:-8px; }
  }
  @media (max-width:640px){
    .carousel-item{ flex-basis:86%; } /* 1 visible on mobile, next peeking in */
 /*   .carousel-arrow{ display:none; } /* native swipe carries mobile */
  }

  /* ============================================================
     LOOKBOOK MODAL — "Complete the Look", opens on Add to Cart.
     Centered dialog on desktop/tablet; becomes a bottom sheet on
     mobile. Item data is WooCommerce-cross-sell shaped (see the
     $lookbook_items PHP array in product.php).
     ============================================================ */
  .lookbook-scrim{
    position:fixed; inset:0; z-index:90;
    background:rgba(45,42,38,.55);
    backdrop-filter:blur(4px);
    opacity:0; pointer-events:none;
    transition:opacity var(--dur-med) var(--ease);
  }
  .lookbook-scrim.is-open{ opacity:1; pointer-events:auto; }

  .lookbook-modal{
    position:fixed; z-index:95;
    top:50%; left:50%;
    transform:translate(-50%,-50%) scale(.96);
    width:min(720px, calc(100vw - 40px));
    max-height:min(84vh, 720px);
    background:var(--color-panel);
    border-radius:16px;
    box-shadow:0 30px 70px rgba(20,18,16,.28);
    opacity:0;
    pointer-events:none;
    transition:opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
    display:flex; flex-direction:column;
    overflow:hidden;
  }
  .lookbook-modal.is-open{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
    pointer-events:auto;
  }

  .lookbook-modal-head{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:16px;
    padding:28px 28px 20px;
    border-bottom:1px solid var(--color-line);
    flex-shrink:0;
  }
  .lookbook-eyebrow{
    font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--color-accent);
    margin:0 0 8px;
  }
  .lookbook-title{
    font-family:var(--font-display); font-weight:400;
    font-size:26px;
    margin:0 0 6px;
  }
  .lookbook-subtitle{
    font-size:13.5px; color:var(--color-ink-soft);
    margin:0;
  }

  .lookbook-grid{
    flex:1; min-height:0;
    overflow-y:auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
    padding:24px 28px;
  }
  .lookbook-item{ display:flex; flex-direction:column; }
  .lookbook-item-media{
    display:block;
    aspect-ratio:3/4;
    overflow:hidden;
    background:var(--color-bg-alt);
    margin-bottom:12px;
  }
  .lookbook-item-media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease); }
  .lookbook-item-media:hover img{ transform:scale(1.05); }
  .lookbook-item-name{ font-size:13.5px; margin:0 0 4px; line-height:1.3; }
  .lookbook-item-price{ font-size:13px; color:var(--color-ink-soft); margin:0 0 10px; }
  .lookbook-item-add{
    display:flex; align-items:center; justify-content:center; gap:6px;
    border:1px solid var(--color-line);
    background:none;
    padding:9px;
    font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--color-ink);
    transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
    margin-top:auto;
  }
  .lookbook-item-add:hover{ background:var(--color-ink); color:#fff; border-color:var(--color-ink); }
  .lookbook-item-add.is-active{ background:var(--color-accent); color:#fff; border-color:var(--color-accent); }

  .lookbook-modal-foot{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:20px 28px 26px;
    border-top:1px solid var(--color-line);
    flex-shrink:0;
  }
  .lookbook-add-all{
    flex:1;
    background:var(--color-ink); color:#fff; border:none;
    padding:16px;
    font-size:13px; letter-spacing:.12em; text-transform:uppercase;
    transition:opacity var(--dur-fast) var(--ease);
  }
  .lookbook-add-all:hover{ opacity:.85; }
  .lookbook-continue{
    background:none; border:none;
    font-size:12.5px; letter-spacing:.06em;
    text-decoration:underline; text-underline-offset:4px;
    color:var(--color-ink-soft);
    white-space:nowrap;
  }
  .lookbook-continue:hover{ color:var(--color-ink); }

  @media (max-width:760px){
    .lookbook-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:520px){
    .lookbook-modal{
      top:auto; left:0; right:0; bottom:0;
      width:100%; max-height:88vh;
      border-radius:16px 16px 0 0;
      transform:translateY(100%);
    }
    .lookbook-modal.is-open{ transform:translateY(0); }
    .lookbook-grid{ grid-template-columns:repeat(2, 1fr); padding:20px; }
    .lookbook-modal-foot{ flex-direction:column-reverse; align-items:stretch; }
    .lookbook-continue{ text-align:center; padding:6px 0; }
  }

  /* ============================================================
     LEVEL-2 SUBMENU + ICON HOVER — new/adjusted this round
     ============================================================ */
  /* ============================================================
     LEVEL-2 SUBMENUS — Women / Men / Kids category drill-down
     inside the nav panel. Collapsed by default; same responsive
     panel serves both desktop and mobile, so no separate mobile
     implementation is needed — only minor sizing tweaks below.
     ============================================================ */
  .nav-item-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px;
  }
  .nav-list .nav-item-link{
    font-family:var(--font-display);
    font-size:clamp(30px,5vw,42px);
    font-weight:400;
    padding:6px 0;
    display:inline-block;
    position:relative;
    width:fit-content;
    transition:color var(--dur-fast) var(--ease);
  }
  .nav-list .nav-item-link::after{
    content:"";
    position:absolute; left:0; right:100%; bottom:2px;
    height:1px; background:var(--color-ink);
    transition:right var(--dur-fast) var(--ease);
  }
  .nav-list .nav-item-link:hover{ color:var(--color-accent); }
  .nav-list .nav-item-link:hover::after{ right:0; background:var(--color-accent); }

  .nav-submenu-toggle{
    flex-shrink:0;
    width:36px; height:36px;
    border-radius:50%;
    border:1px solid var(--color-line);
    background:none;
    display:flex; align-items:center; justify-content:center;
    transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  }
  .nav-submenu-toggle svg{
    width:15px; height:15px; stroke:var(--color-ink);
    transition:transform var(--dur-fast) var(--ease);
  }
  .nav-submenu-toggle:hover{ border-color:var(--color-ink); }
  .nav-submenu-toggle[aria-expanded="true"]{ background:var(--color-bg-alt); }
  .nav-submenu-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }

  .nav-submenu{
    list-style:none; margin:0; padding:0;
    max-height:0; overflow:hidden;
    transition:max-height var(--dur-med) var(--ease);
  }
  .nav-submenu a{
    display:block;
    padding:9px 4px 9px 6px;
    font-family:var(--font-utility);
    font-size:15px;
    color:var(--color-ink-soft);
    transition:color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
  }
  .nav-submenu a:hover{ color:var(--color-ink); padding-left:12px; }

  .icon-btn:hover::before{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width:44px; height:44px;
    transform:translate(-50%,-50%);
    background-color:color-mix(in oklab, #f1ede7 10%, transparent);
    border-radius:50%;
    z-index:-1;
  }

  /* ============================================================
     PAGE-SPECIFIC RESPONSIVE (shop + product)
     Kept as separate breakpoint blocks per source page rather than
     hand-merged into the homepage's blocks above — same breakpoints
     can repeat safely in one stylesheet, and this keeps each page's
     overrides easy to find/maintain.
     ============================================================ */
  @media (max-width:1024px){
    .shop-grid{ grid-template-columns:repeat(2, 1fr); row-gap:44px; }
    .grid-toggle{ display:flex; }
    /* Higher specificity than the plain .shop-grid rules above (and the
       ≤640px rule below) so the user's chosen layout always wins,
       regardless of viewport width, as long as we're ≤1024px. */
    .shop-grid.shop-grid--2col{ grid-template-columns:repeat(2, 1fr); }
    .shop-grid.shop-grid--1col{ grid-template-columns:1fr; }
  }

  @media (max-width:640px){
    /* --header-h / --panel-inset / --panel-radius are already set in the
       homepage's own ≤640px block above; not repeated here. */
    .shop-grid{ grid-template-columns:1fr; row-gap:40px; }
    .nav-panel, .cart-panel, .filter-panel{ width:calc(100vw - (var(--panel-inset) * 2)); }
    .page-head{ align-items:flex-start; }
  }

  @media (max-width:1024px){
    .product-main{ grid-template-columns:1fr; gap:32px; }
    .product-info{ position:static; }
    .extra-row, .extra-grid-2{ grid-template-columns:1fr; gap:28px; }
    .sticky-cart-actions .sticky-select{ display:none; }
  }

  @media (max-width:640px){
    .sticky-cart-name{ max-width:120px; }
  }

  @media (max-width:640px){
    .nav-list .nav-item-link{ font-size:26px; }
    .nav-submenu-toggle{ width:38px; height:38px; }
    .nav-submenu a{ padding:11px 4px 11px 6px; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  }