@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Montserrat:wght@300;400;500;600;700&display=swap');
:root{--sand:#FAFAF9;--ink:#1C1917;--clay:#A16207;--clay-10:rgba(161,98,7,.10);--clay-20:rgba(161,98,7,.20);--clay-30:rgba(161,98,7,.30);--ink-5:rgba(28,25,23,.05);--ink-10:rgba(28,25,23,.10);--ink-20:rgba(28,25,23,.20);--ink-muted:#6B6451;--ink-faint:#A09880;--font-serif:'Cormorant',Georgia,serif;--font-sans:'Montserrat',system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1);--nav-h:4.5rem;--max-w:82.5rem;--section-gap:clamp(3rem,6vw,8rem);--card-gap:clamp(1rem,2vw,2rem)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;
  /* Proportional scaling: 1rem tracks the viewport width.
     At 1440px wide  → font-size ≈ 16px  (1440 × 0.01111 = 16)
     At 1280px wide  → font-size ≈ 14.2px
     At 1024px wide  → font-size ≈ 13px  (clamped to minimum)
     At 375px phone  → font-size = 13px  (clamped, readable)
     At 2560px 4K    → font-size = 18px  (clamped, not too large)  */
  font-size: clamp(13px, 1.111vw, 18px);
}
body{background:var(--sand);color:var(--ink);font-family:var(--font-sans);overflow-x:hidden}
img{display:block;width:100%;height:auto;object-fit:cover}
a{text-decoration:none;color:inherit}
button{border:none;background:none;cursor:pointer;font-family:inherit;color:inherit}
ul{list-style:none}
::selection{background:var(--clay);color:#fff}
.glass{background:rgba(255,255,255,.10);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.20)}
.glass-dark{background:rgba(26,26,26,.60);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.10)}
body.no-scroll{overflow:hidden}
/* Skip to content link (a11y) */
.skip-link{position:absolute;top:-100%;left:1rem;z-index:9999;padding:.75rem 1.5rem;background:var(--ink);color:#fff;font-size:13px;font-weight:700;letter-spacing:.1em;text-decoration:none;border-radius:0 0 4px 4px;transition:top .2s}
.skip-link:focus{top:0}
/* Reset button styles for cart-item-remove */
button.cart-item-remove{background:none;border:none;padding:0;font-family:inherit;cursor:pointer}
.page{display:none}.page.active{display:block}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulseHot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}
@keyframes slideInR{from{transform:translateX(100%)}to{transform:translateX(0)}}
/* NAVBAR */
#navbar{position:fixed;top:0;left:0;width:100%;z-index:500;height:var(--nav-h);padding:0 3rem;display:flex;align-items:center;justify-content:space-between;background:transparent;border-bottom:1px solid transparent;transition:background .5s,border-color .5s,box-shadow .5s,color .5s}
#navbar.scrolled{background:#fff;border-bottom:1px solid var(--ink-5);box-shadow:0 2px 30px rgba(0,0,0,.06)}
/* Hero-mode: white icons on transparent */
#navbar:not(.scrolled) .nav-logo,#navbar:not(.scrolled) .nav-hamburger span,#navbar:not(.scrolled) .nav-search-trigger,#navbar:not(.scrolled) .nav-action,#navbar:not(.scrolled) .nav-cart-btn,#navbar:not(.scrolled) .nav-wish-btn{color:#fff;opacity:1}
#navbar:not(.scrolled) .nav-hamburger span{background:#fff;box-shadow:0 0 4px rgba(0,0,0,.6)}
#navbar:not(.scrolled) .nav-logo{color:#fff}
#navbar:not(.scrolled) .nav-search-trigger::after{background:rgba(255,255,255,.3)}
#navbar:not(.scrolled) .nav-action svg,#navbar:not(.scrolled) .nav-cart-btn svg,#navbar:not(.scrolled) .nav-wish-btn svg{stroke:#fff}
.nav-left{display:flex;align-items:center;gap:2rem}
.nav-center{flex:1;max-width:200px;margin:0 auto;display:flex;justify-content:center}
.nav-right{display:flex;align-items:center;gap:1.75rem}
.nav-hamburger{display:flex;flex-direction:column;gap:5px;width:44px;min-height:44px;cursor:pointer;justify-content:center;align-items:center}
.nav-hamburger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:1px;transition:background .4s}
.nav-hamburger:focus-visible,.nav-search-trigger:focus-visible,.nav-action:focus-visible,.nav-cart-btn:focus-visible{outline:2px solid var(--clay);outline-offset:4px;border-radius:2px}
.nav-logo{font-family:var(--font-serif);font-size:2rem;font-weight:600;letter-spacing:-.05em;cursor:pointer;transition:opacity .3s,color .5s}
.nav-logo:hover{opacity:.5}
.nav-search-trigger{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.7;cursor:pointer;position:relative;padding-bottom:4px;transition:opacity .3s,color .5s}
.nav-search-trigger::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--ink-20);transition:background .3s}
.nav-search-trigger:hover{opacity:1}
.nav-search-trigger:hover::after{background:var(--ink)}
.nav-action{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;opacity:.8;cursor:pointer;transition:opacity .3s,color .5s}
.nav-action:hover{opacity:1}
.nav-action svg,.nav-cart-btn svg{width:16px;height:16px;transition:stroke .5s}
.nav-cart-btn{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:opacity .3s,color .5s}
.nav-cart-btn:hover{opacity:.6}
@media(max-width:900px){.nav-center,.nav-action{display:none}#navbar{padding:0 1.25rem}}
/* Mobile: ensure visible nav icons (hamburger, saved, basket) are crisp white on hero */
@media(max-width:900px){
  #navbar:not(.scrolled) .nav-wish-btn,
  #navbar:not(.scrolled) .nav-cart-btn{color:#fff}
  #navbar:not(.scrolled) .nav-wish-btn svg,
  #navbar:not(.scrolled) .nav-cart-btn svg{stroke:#fff;filter:drop-shadow(0 0 3px rgba(0,0,0,.5))}
  #navbar:not(.scrolled) .nav-logo{text-shadow:0 1px 8px rgba(0,0,0,.5)}
  .nav-wish-btn svg{width:20px;height:20px}
  .nav-cart-btn svg{width:20px;height:20px}
  .nav-right{gap:0.75rem}
  .nav-wish-btn .nav-label,
  .nav-cart-btn .nav-label { display: none; }
}
/* MENU OVERLAY */
#menu-overlay{position:fixed;inset:0;z-index:900;display:flex;flex-direction:row;background:var(--sand);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
#menu-overlay.open{opacity:1;pointer-events:all}
.menu-left{flex:1;padding:3.5rem 5rem;display:flex;flex-direction:column;justify-content:center;overflow-y:auto;min-height:0}
.menu-close{position:absolute;top:2rem;right:2.5rem;cursor:pointer;padding:1rem;transition:transform .5s;z-index:10}
.menu-close:hover{transform:rotate(90deg)}
.menu-close svg{width:1.5rem;height:1.5rem}
.menu-label{font-size:10px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;opacity:.3;margin-bottom:1.5rem}
.menu-items{display:flex;flex-direction:column}
.menu-item{display:flex;align-items:baseline;gap:1.5rem;cursor:pointer;padding:.25rem 0;opacity:0;transform:translateX(-40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
#menu-overlay.open .menu-item{opacity:1;transform:translateX(0)}
#menu-overlay.open .menu-item:nth-child(1){transition-delay:.05s}
#menu-overlay.open .menu-item:nth-child(2){transition-delay:.10s}
#menu-overlay.open .menu-item:nth-child(3){transition-delay:.15s}
#menu-overlay.open .menu-item:nth-child(4){transition-delay:.20s}
#menu-overlay.open .menu-item:nth-child(5){transition-delay:.25s}
#menu-overlay.open .menu-item:nth-child(6){transition-delay:.30s}
.menu-item-num{font-variant-numeric:tabular-nums;font-size:10px;opacity:.2;min-width:2ch;transition:opacity .4s}
.menu-item-label{font-family:var(--font-serif);font-size:clamp(1.3rem,2.2vw,2.2rem);letter-spacing:-.02em;transition:all .7s var(--ease)}
.menu-item:hover .menu-item-num{opacity:1}
.menu-item:hover .menu-item-label{font-style:italic;padding-left:1rem}
.menu-sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding-top:1.5rem;border-top:1px solid var(--ink-10);margin-top:1rem}
.menu-sub-title{font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;opacity:.6;margin-bottom:1rem;color:var(--ink)}
.menu-sub-list li{font-size:.9rem;font-weight:500;padding:.35rem 0;cursor:pointer;opacity:.7;transition:opacity .3s,padding-left .3s}
.menu-sub-list li:hover{opacity:1;padding-left:.5rem}
.menu-right{width:50%;position:relative;background:var(--clay-10);overflow:hidden}
@media(max-width:900px){
  .menu-right{display:none}
  .menu-left{
    padding:5rem 2rem 2rem;
    width:100%;
    justify-content:center;
    gap:0
  }
  /* Large, tappable menu items that fill the screen */
  .menu-item{
    padding:0.6rem 0;
    opacity:1;
    transform:none
  }
  .menu-item-label{
    font-size:clamp(2.2rem,8vw,3.2rem) !important;
    letter-spacing:-0.02em
  }
  .menu-item-num{
    font-size:12px;
    min-width:2.5ch
  }
  .menu-sub-grid{
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    margin-top:1.5rem;
    padding-top:1.5rem
  }
  .menu-sub-list li{
    font-size:1rem;
    padding:0.5rem 0;
    min-height:44px;
    display:flex;
    align-items:center
  }
  .menu-label{margin-bottom:1rem}
}
@media(max-width:900px) and (max-height:700px){
  .menu-item-label{font-size:clamp(1.7rem,6vw,2.4rem) !important}
  .menu-item{padding:0.35rem 0}
}
@media(max-height:800px) and (min-width:901px){.menu-left{padding:2rem 5rem;justify-content:flex-start;padding-top:5rem}.menu-item-label{font-size:clamp(1.1rem,1.8vw,1.8rem)}.menu-item{padding:.15rem 0}.menu-sub-grid{margin-top:.75rem;padding-top:1rem}}
.menu-preview-img{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity .8s ease,transform .8s ease}
.menu-preview-img.active{opacity:1;transform:scale(1)}
.menu-preview-overlay{position:absolute;inset:0;background:rgba(26,26,26,.12)}
.menu-preview-caption{position:absolute;bottom:5rem;left:5rem;right:5rem;color:#fff}
.menu-preview-caption-label{font-size:10px;font-weight:700;letter-spacing:.5em;text-transform:uppercase;opacity:.7;margin-bottom:1rem}
.menu-preview-caption h3{font-family:var(--font-serif);font-size:2rem;font-style:italic}
/* SEARCH OVERLAY */
#search-overlay{position:fixed;inset:0;z-index:1000;background:var(--ink);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:3rem;opacity:0;pointer-events:none;transition:opacity .55s var(--ease),transform .55s var(--ease);transform:translateY(-16px)}
#search-overlay.open{opacity:1;pointer-events:all;transform:translateY(0)}
.search-header{position:absolute;top:0;left:0;right:0;padding:2rem 3rem;display:flex;justify-content:space-between;align-items:center}
.search-eyebrow{font-size:9px;font-weight:700;letter-spacing:.5em;text-transform:uppercase;color:var(--sand);opacity:.35}
.search-close{cursor:pointer;padding:.75rem;transition:transform .3s,opacity .3s;opacity:.6}
.search-close:hover{transform:rotate(90deg);opacity:1}
.search-close svg{width:1.25rem;height:1.25rem;stroke:var(--sand)}
.search-body{width:100%;max-width:760px;text-align:center}
.search-prompt{font-family:var(--font-serif);font-size:clamp(1rem,2vw,1.35rem);font-style:italic;color:var(--sand);opacity:.35;letter-spacing:.05em;margin-bottom:2.5rem}
.search-input-wrap{position:relative;width:100%;margin-bottom:3rem}
.search-input{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(250,250,249,.15);padding:1.25rem 3rem 1.25rem 0;font-family:var(--font-serif);font-size:clamp(2.2rem,5vw,4rem);font-weight:300;font-style:italic;outline:none;color:var(--sand);text-align:center;transition:border-color .4s;caret-color:var(--clay)}
.search-input:focus{border-bottom-color:rgba(250,250,249,.4)}
.search-input::placeholder{color:var(--sand);opacity:.18}
.search-input-line{position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--clay);transform:translateX(-50%);transition:width .5s var(--ease)}
#search-overlay.open .search-input-line{width:0}
.search-input:focus ~ .search-input-line{width:60%}
.search-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:.18}
.search-icon svg{width:1.75rem;height:1.75rem;stroke:var(--sand)}
.search-categories{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-bottom:3.5rem}
.search-cat-pill{padding:.45rem 1.25rem;border:1px solid rgba(250,250,249,.15);color:var(--sand);font-size:9px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;transition:background .3s,border-color .3s,color .3s;border-radius:0}
.search-cat-pill:hover{background:var(--clay);border-color:var(--clay);color:#fff}
.search-suggestions{text-align:center}
.search-sug-label{font-size:9px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:var(--sand);opacity:.3;margin-bottom:1.75rem;display:block}
.search-sug-list{display:flex;flex-wrap:wrap;justify-content:center;gap:0 2.5rem}
.search-sug-list li{font-family:var(--font-serif);font-size:1.2rem;font-style:italic;color:var(--sand);opacity:.55;cursor:pointer;transition:opacity .3s,letter-spacing .3s;position:relative;padding:.3rem 0}
.search-sug-list li::after{content:'↗';font-style:normal;font-size:.7rem;margin-left:.4rem;opacity:0;transition:opacity .3s}
.search-sug-list li:hover{opacity:1;letter-spacing:.02em}
.search-sug-list li:hover::after{opacity:.7}
.search-divider{width:1px;height:3rem;background:rgba(250,250,249,.12);margin:2.5rem auto 0}
/* CART DRAWER */
#cart-backdrop{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .4s}
#cart-backdrop.open{opacity:1;pointer-events:all}
#cart-drawer{position:fixed;top:0;right:0;height:100%;width:100%;max-width:440px;z-index:700;background:var(--sand);display:flex;flex-direction:column;box-shadow:-4px 0 40px rgba(0,0,0,.12);transform:translateX(100%);transition:transform .5s var(--ease)}
#cart-drawer.open{transform:translateX(0)}
.cart-header{padding:2rem 2.5rem;border-bottom:1px solid var(--ink-5);display:flex;justify-content:space-between;align-items:center}
.cart-title{font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase}
.cart-close{cursor:pointer;padding:.5rem;transition:opacity .3s}
.cart-close:hover{opacity:.5}
.cart-close svg{width:1.25rem;height:1.25rem}
.cart-body{flex:1;overflow-y:auto;padding:2.5rem}
.cart-item{display:flex;gap:1.5rem;margin-bottom:2.5rem}
.cart-item-img{width:6rem;height:8rem;flex-shrink:0;background:var(--clay-10);overflow:hidden}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-info{flex:1;display:flex;flex-direction:column;gap:.4rem}
.cart-item-name{font-family:var(--font-serif);font-size:.9rem}
.cart-item-price{font-size:.75rem;opacity:.5}
.cart-qty{display:flex;align-items:center;gap:1rem;margin-top:.75rem}
.cart-qty-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--ink-10);transition:border-color .3s;flex-shrink:0}
.cart-qty-btn:hover{border-color:var(--ink)}
.cart-qty-btn svg{width:.75rem;height:.75rem}
.cart-qty-num{font-size:.8rem}
.cart-item-remove{font-size:9px;opacity:.3;cursor:pointer;letter-spacing:.1em;text-transform:uppercase;transition:opacity .3s;margin-top:.5rem;display:inline-block}
.cart-item-remove:hover{opacity:.8}
.cart-empty{text-align:center;padding:4rem 0}
.cart-empty p{font-family:var(--font-serif);font-size:1.25rem;font-style:italic;opacity:.4;margin-bottom:2rem}
.cart-empty-cta{font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:4px;cursor:pointer}
.cart-footer{padding:2.5rem;background:var(--clay-10)}
.cart-subtotal{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.5rem}
.cart-note{font-size:9px;opacity:.5;font-style:italic;margin-bottom:1.5rem}
.cart-checkout-btn{width:100%;padding:1.25rem;background:var(--ink);color:#fff;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;transition:background .4s}
.cart-checkout-btn:hover{background:var(--clay)}
.cart-continue{display:block;width:100%;text-align:center;margin-top:1rem;font-size:9px;opacity:.4;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:opacity .3s}
.cart-continue:hover{opacity:.8}
/* HERO */
#hero{position:relative;height:100vh;width:100%;overflow:hidden}
.hero-slideshow{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease-in-out}
.hero-slide.active{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);pointer-events:none}
.hero-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;flex-direction:column}
.hero-tagline{font-family:var(--font-serif);font-size:clamp(2.5rem,7vw,6.5rem);font-weight:300;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,0.3);line-height:1.05;font-style:italic}
.hero-tagline em{font-style:normal;font-weight:400}
.hero-links{position:absolute;bottom:8rem;left:0;right:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.5rem;color:rgba(255,255,255,.7);padding:0 1.5rem}
.hero-link{font-size:10px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:color .25s;min-height:44px;padding:.75rem 1.25rem;display:inline-flex;align-items:center}
.hero-link:hover,.hero-link.active{color:#fff;font-weight:700}
@media(max-width:600px){
  .hero-links{bottom:9rem;gap:.75rem}
  .hero-link{font-size:9px;padding:.75rem 1rem}
  .hero-tagline{font-size:clamp(2rem,9vw,5rem);padding:0 1.25rem}
}
.hero-link:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:4px;border-radius:2px}
.hero-slide-dots{position:absolute;bottom:4.5rem;left:50%;transform:translateX(-50%);display:flex;gap:.75rem;z-index:10}
.hero-dot{width:32px;height:32px;border-radius:50%;background:transparent;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}
.hero-dot::after{content:'';width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:all .3s ease;display:block}
.hero-dot.active::after{background:#fff;width:18px;border-radius:3px}
.hero-scroll{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;color:rgba(255,255,255,.4)}
.hero-scroll span{font-size:8px;letter-spacing:.3em;text-transform:uppercase}
.hero-scroll-line{width:1px;height:40px;background:rgba(255,255,255,.3);animation:pulseHot 2s infinite}

/* TRUST BAND */
#trust-band{background:var(--sand);border-bottom:1px solid var(--ink-5);padding:2.5rem 3rem}
.trust-inner{max-width:var(--max-w);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem}
.trust-pillars{display:flex;flex-wrap:wrap;gap:1.5rem 4rem}
.trust-pillar{display:flex;align-items:center;gap:.75rem}
.trust-pillar svg{width:1rem;height:1rem;opacity:.4}
.trust-pillar-label{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted)}
.trust-payment{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);font-style:italic}
@media(max-width:768px){#trust-band{padding:1.5rem}.trust-inner{flex-direction:column}}
/* SECTION SHARED */
.section-wrap{max-width:var(--max-w);margin:0 auto;padding:4rem 3rem}
@media(max-width:768px){.section-wrap{padding:2.5rem 1.5rem}}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.5em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:1.5rem}
.section-heading{font-family:var(--font-serif);font-size:clamp(3rem,6vw,5.5rem);font-weight:400;line-height:1.05;letter-spacing:-.02em}
.section-heading em{font-style:italic}
.section-heading .u{text-decoration:underline;text-decoration-color:var(--clay-30);text-underline-offset:10px}
.section-heading-center{text-align:center;margin-bottom:6rem}
.section-heading-spaced{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:3rem;margin-bottom:6rem}
.view-all{display:flex;align-items:center;gap:1.5rem;font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.view-all .line{width:3.5rem;height:1px;background:var(--ink);transition:width .7s var(--ease)}
.view-all:hover .line{width:6rem}
/* PRODUCT GRID */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem 2rem}
@media(max-width:1200px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.product-grid{grid-template-columns:1fr}}
.product-card{cursor:pointer;transition:transform .3s var(--ease);display:flex;flex-direction:column;height:100%}
.product-card:hover{transform:translateY(-6px)}
.product-card:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
.product-card-img-wrap{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--clay-10);margin-bottom:1.5rem}
.product-card-img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.product-card:hover .product-card-img{transform:scale(1.10)}
/* Quick Add: hidden by default on pointer:fine (mouse), always visible on touch */
.product-card-quick{position:absolute;bottom:0;left:0;right:0;padding:1.5rem;transform:translateY(100%);transition:transform .5s var(--ease)}
.product-card:hover .product-card-quick{transform:translateY(0)}
@media(hover:none){.product-card-quick{transform:translateY(0)}}
@media(hover:none){.product-card:hover{transform:none}}
.product-card-quick-btn{width:100%;padding:1rem;background:var(--ink);color:#fff;font-size:9px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:.75rem;box-shadow:0 4px 30px rgba(0,0,0,.3);transition:background .3s}
.product-card-quick-btn:hover{background:var(--clay)}
.product-card-quick-btn svg{width:.75rem;height:.75rem}
.product-card-heart{position:absolute;top:1.5rem;right:1.5rem;color:rgba(255,255,255,.4);z-index:2;transition:color .3s;cursor:pointer}
.product-card-heart:hover,.product-card-heart.active{color:var(--clay)}
.product-card-heart svg{width:1rem;height:1rem}
/* Meta: flex column so Add to Cart always sits at the bottom */
.product-card-meta{text-align:center;display:flex;flex-direction:column;flex:1;gap:.35rem}
.product-card-add{margin-top:auto}
.product-card-cat{font-size:9px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.4rem}
.product-card-name{font-family:var(--font-serif);font-size:.95rem;letter-spacing:.02em;line-height:1.3;margin-bottom:.4rem;min-height:calc(.95rem * 1.3 * 3)}
.product-card-price{font-size:.9rem;font-weight:300;letter-spacing:.1em;color:var(--ink-muted)}
/* Best Seller badge — flush edge, luxury label style */
.product-card-badge{
  position: absolute;
  top: 1.25rem;
  left: 0;
  z-index: 3;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: .45em;
  text-transform: uppercase;
  padding: .35rem 1rem .35rem .75rem;
  border-radius: 0;
  pointer-events: none;
  white-space: nowrap;
}
/* ARTISAN SPOTLIGHT */
#artisan-spotlight{padding:4rem 3rem;background:var(--ink);color:var(--sand)}
.artisan-inner{max-width:var(--max-w);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6rem}
@media(max-width:768px){
  #artisan-spotlight{padding:3rem 1.5rem}
  .artisan-inner{gap:3rem}
  .artisan-heading{font-size:clamp(2.8rem,9vw,4rem)}
  .artisan-body,.artisan-note{max-width:100%}
}
.artisan-img-col{flex:1;min-width:280px;max-width:560px;aspect-ratio:4/5;overflow:hidden;border-radius:2px}
.artisan-img-col img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter 1s ease}
.artisan-img-col:hover img{filter:grayscale(0)}
.artisan-text-col{flex:1;min-width:280px;display:flex;flex-direction:column;gap:3rem}
.artisan-eyebrow{font-size:10px;font-weight:700;letter-spacing:.6em;text-transform:uppercase;color:rgba(250,250,249,.4)}
.artisan-heading{font-family:var(--font-serif);font-size:clamp(3.5rem,6vw,6rem);line-height:1.05;color:var(--sand)}
.artisan-heading em{font-style:italic}
.artisan-body{font-size:1.1rem;font-weight:300;line-height:1.8;color:rgba(250,250,249,.75);max-width:480px}
.artisan-note{font-size:1rem;font-weight:300;font-style:italic;color:rgba(250,250,249,.5);max-width:480px}
.artisan-cta{display:flex;align-items:center;gap:1.5rem;font-size:11px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;cursor:pointer;min-height:44px}
.artisan-cta svg{width:1.25rem;height:1.25rem;transition:transform .5s var(--ease)}
.artisan-cta:hover svg{transform:translateX(1rem)}
/* LOOKBOOK */
#lookbook{padding:0;max-width:var(--max-w);margin:0 auto}
.lookbook-img-wrap{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:2px}
.lookbook-img-wrap img{transition:transform 1.5s ease}
.lookbook-img-wrap:hover img{transform:scale(1.03)}
.hotspot{position:absolute;transform:translate(-50%,-50%)}
.hotspot-dot{width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;animation:pulseHot 2.5s infinite;position:relative;z-index:2}
.hotspot-dot::before{content:'';width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 2px 20px rgba(0,0,0,.3);display:block}
.hotspot-tooltip{position:absolute;bottom:calc(100% + .5rem);left:50%;transform:translateX(-50%);width:200px;background:rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.25);padding:1rem;border-radius:2px;opacity:0;pointer-events:none;transition:opacity .3s;z-index:10;color:#fff}
.hotspot:hover .hotspot-tooltip,.hotspot.active .hotspot-tooltip{opacity:1;pointer-events:all}
.hotspot-tooltip-title{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.25rem}
.hotspot-tooltip-price{font-family:var(--font-serif);font-size:.9rem;font-style:italic;opacity:.8;margin-bottom:.75rem}
.hotspot-add-btn{width:100%;padding:.5rem;background:#fff;color:var(--ink);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:background .3s,color .3s}
.hotspot-add-btn:hover{background:var(--clay);color:#fff}
/* EDITORIAL — compact half-height */
#editorial{padding:0;max-width:var(--max-w);margin:0 auto}
.editorial-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
@media(max-width:900px){.editorial-grid{grid-template-columns:1fr;gap:2rem}}
.editorial-text{display:flex;flex-direction:column;gap:1.5rem}
.editorial-heading{font-family:var(--font-serif);font-size:clamp(2rem,3.5vw,3.2rem);line-height:1.05}
.editorial-heading em{font-style:italic}
.editorial-body{font-size:.95rem;font-weight:300;line-height:1.7;color:var(--ink-muted);max-width:400px}
.editorial-cta{display:flex;align-items:center;gap:1.25rem;font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;min-height:44px}
.editorial-cta:focus-visible{outline:2px solid var(--clay);outline-offset:4px;border-radius:2px}
.editorial-cta .line{width:2.5rem;height:1px;background:var(--ink);transition:width .7s var(--ease)}
.editorial-cta:hover .line{width:4rem}
.editorial-img-wrap{position:relative;aspect-ratio:16/9;border-radius:2px}
.editorial-img-wrap img{width:100%;height:100%;object-fit:cover;box-shadow:0 12px 40px rgba(0,0,0,.1)}
.editorial-float-card{position:absolute;bottom:1.25rem;left:1.25rem;width:11rem;background:var(--sand);border:1px solid var(--ink-5);padding:1.25rem;box-shadow:0 6px 24px rgba(0,0,0,.15)}
@media(max-width:1200px){.editorial-float-card{bottom:1rem;left:1rem;width:9rem;padding:1rem}}
.editorial-float-issue{font-size:8px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;opacity:.4;margin-bottom:.6rem}
.editorial-float-title{font-family:var(--font-serif);font-size:.95rem;font-style:italic;line-height:1.4}
/* CATEGORY SECTION */
#categories{padding:0;max-width:var(--max-w);margin:0 auto}
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
@media(max-width:900px){.category-grid{grid-template-columns:1fr}}
.category-card{position:relative;aspect-ratio:3/4;overflow:hidden;cursor:pointer;border-radius:2px;display:block}
.category-card:focus-visible{outline:3px solid var(--clay);outline-offset:3px}
.category-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease)}
.category-card:hover img{transform:scale(1.10)}
.category-overlay{position:absolute;inset:0;background:rgba(26,26,26,.22);transition:background .7s}
.category-card:hover .category-overlay{background:rgba(26,26,26,.45)}
.category-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:2.5rem}
.category-sub{font-size:9px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;opacity:.7;margin-bottom:1rem}
.category-name{font-family:var(--font-serif);font-size:clamp(1.5rem,2.5vw,2.5rem);margin-bottom:1rem}
.category-line{width:0;height:1px;background:#fff;transition:width .7s var(--ease)}
.category-card:hover .category-line{width:4rem}
/* CURATED ORIGINALS */
#curated{padding:0;max-width:var(--max-w);margin:0 auto}
.curated-scroll{display:block;overflow:visible}
.curated-img{position:relative;aspect-ratio:3/4;overflow:hidden;margin-bottom:1.5rem}
.curated-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;transition:transform .65s ease}
.curated-img .curated-main{transform:scale(1);opacity:1}
.curated-badge{position:absolute;top:1.5rem;left:1.5rem;z-index:2;background:var(--clay);color:#fff;font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .75rem}
.curated-name{font-family:var(--font-serif);font-size:1.5rem;margin-bottom:.35rem}
.curated-price{font-size:.85rem;color:var(--ink-muted);letter-spacing:.1em}
/* COLLECTION HIGHLIGHT */
/* COLLECTION HIGHLIGHT — Split Layout */
#collection-highlight{position:relative;height:90vh;overflow:hidden}
#collection-highlight .bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#collection-highlight .bg-overlay{position:absolute;inset:0;background:rgba(10,10,10,.55)}
/* Split wrapper */
.ch-split{position:absolute;inset:0;display:flex;align-items:stretch}
/* LEFT: narrative panel */
.ch-narrative{width:30%;min-width:280px;display:flex;flex-direction:column;justify-content:center;gap:1.75rem;padding:4rem 3rem 4rem 5rem;background:rgba(10,10,10,.60);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-right:1px solid rgba(255,255,255,.08);color:#fff}
.collection-label{font-size:9px;font-weight:700;letter-spacing:.6em;text-transform:uppercase;opacity:.55;display:block;color:#fff}
.ch-heading{font-family:var(--font-serif);font-size:clamp(2.2rem,3.5vw,4rem);line-height:1.1;font-weight:300;color:#fff}
.ch-heading em{font-style:italic}
.ch-body{font-size:.9rem;font-weight:300;line-height:1.8;opacity:.65;max-width:320px}
.collection-btn{display:inline-block;padding:1rem 2.5rem;background:#fff;color:var(--ink);font-size:9px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;transition:background .5s,color .5s;align-self:flex-start;white-space:nowrap}
.collection-btn:hover{background:var(--clay);color:#fff}
/* RIGHT col: rail + controls stacked */
.ch-right-col{flex:1;display:flex;flex-direction:column;min-width:0}
.ch-products-rail{flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;padding:2.5rem 2rem 1.5rem;scrollbar-width:none;scroll-behavior:smooth;scroll-snap-type:x mandatory;scroll-padding-left:2rem}
.ch-products-rail::-webkit-scrollbar{display:none}
.ch-products-track{display:flex;gap:1.5rem;align-items:stretch}
/* Controls bar */
.ch-controls{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:1rem;padding:.75rem 2rem 1.5rem}
.ch-nav{width:2rem;height:2rem;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:.85rem;cursor:pointer;transition:background .3s,border-color .3s;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ch-nav:hover{background:var(--clay);border-color:var(--clay)}
.ch-nav:disabled{opacity:.2;pointer-events:none}
/* Dots */
.ch-dots{display:flex;align-items:center;gap:.45rem}
.ch-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.28);border:none;padding:0;cursor:pointer;transition:background .3s,transform .3s}
.ch-dot.active{background:#fff;transform:scale(1.4)}
/* Individual product cards inside the rail */
.ch-card{flex:0 0 200px;display:flex;flex-direction:column;background:rgba(250,248,245,.93);color:var(--ink);cursor:pointer;transition:transform .4s var(--ease);scroll-snap-align:start}
.ch-card:hover{transform:translateY(-6px)}
.ch-card-img{aspect-ratio:3/4;overflow:hidden}
.ch-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ch-card:hover .ch-card-img img{transform:scale(1.06)}
.ch-card-meta{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;flex:1;gap:.35rem}
.ch-card-cat{font-size:7px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;opacity:.45}
.ch-card-name{font-family:var(--font-serif);font-size:.82rem;line-height:1.3;flex:1}
.ch-card-price{font-size:.78rem;font-weight:300;letter-spacing:.08em;opacity:.7}
.ch-card-btn{margin-top:.6rem;width:100%;padding:.6rem;background:var(--ink);color:#fff;font-size:7px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;border:none;cursor:pointer;transition:background .3s}
.ch-card-btn:hover{background:var(--clay)}
/* Mobile: stack vertically */
@media(max-width:768px){
  #collection-highlight{height:auto}
  .ch-split{flex-direction:column;position:relative}
  .ch-narrative{width:100%;min-width:unset;padding:3rem 1.5rem;border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}
  .ch-products-rail{padding:1.5rem;flex-wrap:wrap}
  .ch-card{flex:0 0 calc(50% - .75rem)}
}


/* NEWSLETTER */
#newsletter{padding:0;background:var(--ink) url('../images/home/newsletter-bg.jpg') center center / cover no-repeat;color:var(--sand);position:relative;overflow:hidden}
#newsletter::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.5);pointer-events:none}
.newsletter-inner{max-width:680px;margin:0 auto;text-align:center;position:relative;z-index:1;padding:6rem 3rem}
.newsletter-eyebrow{font-size:10px;font-weight:700;letter-spacing:.6em;text-transform:uppercase;opacity:.4;display:block;margin-bottom:2rem;color:var(--sand)}
.newsletter-heading{font-family:var(--font-serif);font-size:clamp(2.8rem,5vw,5rem);font-style:italic;margin:0 0 0.6rem;line-height:1.1;color:var(--sand);font-weight:300}
.newsletter-sub{font-size:.95rem;font-weight:300;opacity:.5;line-height:1.7;margin-bottom:0.9rem;max-width:420px;margin-left:auto;margin-right:auto}
.newsletter-form{position:relative;max-width:500px;margin:0 auto;display:flex;gap:0;border:1px solid rgba(245,242,237,.2);transition:border-color .3s}
.newsletter-form:focus-within{border-color:var(--clay)}
.newsletter-input{flex:1;background:transparent;border:none;padding:1.4rem 1.5rem;font-size:.95rem;font-weight:300;font-family:var(--font-sans);outline:none;color:var(--sand);transition:border-color .3s}
.newsletter-input::placeholder{color:var(--sand);opacity:.35}
.newsletter-submit{padding:1.4rem 2.5rem;background:var(--clay);color:#fff;font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;border:none;cursor:pointer;white-space:nowrap;transition:background .3s,opacity .3s;flex-shrink:0}
.newsletter-submit:hover{background:#8e6640}
.newsletter-legal{margin-top:0.75rem;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.25;color:var(--sand)}
/* FOOTER */
#footer{background:var(--ink);color:var(--sand);padding:6rem 3rem 3rem}
@media(max-width:768px){#footer{padding:4rem 1.5rem 2rem}}
.footer-inner{max-width:var(--max-w);margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 2fr;gap:4rem;margin-bottom:6rem}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr}}
.footer-brand-logo{font-family:var(--font-serif);font-size:2rem;letter-spacing:.05em;margin-bottom:2rem}
.footer-brand-desc{font-size:.875rem;opacity:.6;line-height:1.7;max-width:260px;margin-bottom:2rem}
.footer-socials{display:flex;gap:1.5rem}
.footer-socials svg{width:1.25rem;height:1.25rem;cursor:pointer;opacity:.6;transition:opacity .3s,color .3s}
.footer-socials svg:hover{opacity:1;color:var(--clay)}
.footer-col-title{font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;margin-bottom:1.5rem}
.footer-col-list{display:flex;flex-direction:column;gap:1rem}
.footer-col-list a{font-size:.875rem;opacity:.6;transition:opacity .3s;cursor:pointer}
.footer-col-list a:hover{opacity:1}
.footer-nl-desc{font-size:.875rem;opacity:.6;margin-bottom:2rem}
.footer-nl-wrap{position:relative}
.footer-nl-input{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(245,242,237,.20);padding:.75rem 2.5rem .75rem 0;font-size:.875rem;font-family:var(--font-sans);color:var(--sand);outline:none;transition:border-color .3s}
.footer-nl-input::placeholder{color:var(--sand);opacity:.3}
.footer-nl-input:focus{border-color:var(--sand)}
.footer-nl-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:.6;transition:opacity .3s}
.footer-nl-btn:hover{opacity:1}
.footer-nl-btn svg{width:1.25rem;height:1.25rem}
.footer-bottom{padding-top:3rem;border-top:1px solid rgba(245,242,237,.10);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2rem}
.footer-bottom-left{display:flex;gap:2rem}
.footer-bottom-item{display:flex;align-items:center;gap:.5rem;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.4;cursor:pointer;transition:opacity .3s}
.footer-bottom-item:hover{opacity:1}
.footer-bottom-item svg{width:.75rem;height:.75rem}
.footer-copy{font-size:9px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;opacity:.3}
/* SCROLL TO TOP */
#scroll-top{position:fixed;bottom:2.5rem;right:2.5rem;z-index:400;width:48px;height:48px;background:rgba(255,255,255,.10);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.20);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(1rem);transition:opacity .4s,transform .4s,background .3s}
#scroll-top.visible{opacity:1;pointer-events:all;transform:translateY(0)}
#scroll-top:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
#scroll-top svg{width:1.25rem;height:1.25rem;transform:rotate(90deg)}
/* REVEAL */
.reveal{opacity:1;transform:translateY(0);transition:none}
.reveal.visible{opacity:1;transform:translateY(0);will-change:auto}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}

/* ── ACCESSIBILITY: Reduced Motion ────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .hero-scroll-line{animation:none}
  .hotspot-dot{animation:none}
  .reveal{opacity:1;transform:none;transition:none;will-change:auto}
  .reveal.visible{transform:none}
  .menu-item{opacity:1;transform:none;transition:none}
  .popup-modal{animation:none}
}

.editorial-img-wrap img,.artisan-img-col img,.category-card img,.lookbook-img-wrap img,.curated-img img,.bg-img{height:100%}.product-card-img{height:100%}.hero-img img{width:100%;height:100vh;object-fit:cover}

.product-grid .reveal{opacity:1;transform:none}.product-grid .reveal.visible{opacity:1;transform:none}
.product-card-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* BESTSELLERS & RATINGS */
.product-card-stars{color:var(--clay);display:flex;justify-content:center;gap:2px;margin-bottom:.5rem}
.product-card-stars svg{width:12px;height:12px;fill:currentColor}

/* TESTIMONIALS CAROUSEL */
#testimonials{background:var(--clay-10)}
.testimonial-carousel-wrap{position:relative}
.testimonial-track-outer{overflow:hidden;width:100%;cursor:grab}
.testimonial-track-outer:active{cursor:grabbing}
.testimonial-track{display:flex;gap:2rem;transition:transform .4s var(--ease);will-change:transform}
.testimonial-card{flex:0 0 calc(33.333% - 1.4rem);background:var(--sand);padding:3.5rem 2.5rem;text-align:center;border:1px solid var(--ink-5);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
@media(max-width:1100px){.testimonial-card{flex:0 0 calc(50% - 1rem)}}
@media(max-width:680px){.testimonial-card{flex:0 0 100%}}
.testimonial-card:hover{transform:translateY(-6px);box-shadow:0 16px 50px rgba(0,0,0,.08)}
.testimonial-stars{color:var(--clay);display:flex;justify-content:center;gap:4px;margin-bottom:1.5rem}
.testimonial-stars svg{width:14px;height:14px;fill:currentColor}
.testimonial-text{font-family:var(--font-serif);font-size:1.2rem;font-style:italic;line-height:1.65;color:var(--ink-muted);margin-bottom:2rem}
.testimonial-author{font-size:9px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-faint)}
.testimonial-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:3.5rem}
.testimonial-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--ink-20);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,border-color .25s,transform .25s var(--ease);background:transparent;flex-shrink:0}
.testimonial-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--sand);transform:scale(1.05)}
.testimonial-btn:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
.testimonial-btn svg{width:18px;height:18px;transition:color .3s}
.testimonial-dots{display:flex;gap:.6rem;align-items:center}
.testimonial-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-20);cursor:pointer;transition:background .3s,transform .3s;border:none}
.testimonial-dot.active{background:var(--clay);transform:scale(1.3)}

/* SHOP FILTER BUTTONS */
.filter-btn{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:.5rem 1.5rem;border:1px solid var(--ink-20);background:transparent;cursor:pointer;transition:all .3s;min-height:44px;color:var(--ink)}
.filter-btn.active,.filter-btn[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.filter-btn:hover:not(.active):not([aria-pressed="true"]){border-color:var(--ink);opacity:.7}
.filter-btn:focus-visible{outline:2px solid var(--clay);outline-offset:4px;border-radius:2px}

/* SHOP GUIDE PAGE — uses inline styles in HTML, no utility classes needed */

/* LANGUAGE SWITCHER */
.lang-switcher{display:flex;align-items:center;gap:.4rem;margin-right:.5rem}
.lang-btn{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);cursor:pointer;padding:8px 6px;min-height:44px;border:1px solid transparent;transition:color .25s,border-color .25s;background:none;border-radius:2px;display:inline-flex;align-items:center}
.lang-btn.active{color:var(--ink);border-color:currentColor}
.lang-btn:hover{color:var(--ink)}
.lang-btn:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
#navbar:not(.scrolled) .lang-btn{color:#fff}
.lang-sep{font-size:8px;opacity:.25}
#navbar:not(.scrolled) .lang-sep{color:#fff}

/* EMAIL POPUP */
.popup-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:rgba(26,26,26,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.popup-overlay.open{opacity:1;pointer-events:all}
.popup-modal{position:relative;display:flex;max-width:860px;width:90%;max-height:90vh;background:#fff;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.25);animation:slideUp .6s var(--ease) both}
.popup-close{position:absolute;top:1.25rem;right:1.25rem;z-index:10;font-size:1.5rem;color:var(--ink-faint);cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;transition:color .25s,transform .25s;background:none;border:none;line-height:1}
.popup-close:focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-radius:2px}
.popup-close:hover{opacity:1;transform:rotate(90deg)}
.popup-left{flex:1;padding:4rem 3.5rem;display:flex;flex-direction:column;justify-content:center;min-width:0}
.popup-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;background:var(--clay-10);color:var(--clay);padding:.4rem 1rem;margin-bottom:2rem;border-radius:2px}
.popup-heading{font-family:var(--font-serif);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:400;line-height:1.1;margin-bottom:1.5rem;letter-spacing:-.02em}
.popup-heading em{font-style:italic;color:var(--clay)}
.popup-body{font-size:.95rem;font-weight:300;line-height:1.7;color:var(--ink-muted);margin-bottom:2.5rem;max-width:380px}
.popup-body strong{color:var(--clay);font-weight:600}
.popup-form{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}
.popup-input{padding:1rem 1.25rem;border:1px solid var(--ink-10);background:transparent;font-family:var(--font-sans);font-size:.9rem;outline:none;transition:border-color .3s}
.popup-input:focus{border-color:var(--clay)}
.popup-input::placeholder{color:var(--ink-faint)}
.popup-input:focus-visible{outline:2px solid var(--clay);outline-offset:0}
.popup-submit{padding:1.1rem 2rem;background:var(--ink);color:#fff;font-size:10px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;border:none;cursor:pointer;transition:background .4s}
.popup-submit:hover{background:var(--clay)}
.popup-legal{font-size:9px;opacity:.3;letter-spacing:.05em}
.popup-right{width:45%;flex-shrink:0;position:relative;overflow:hidden;min-height:420px}
.popup-right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 8s ease}
.popup-overlay.open .popup-right img{transform:scale(1.05)}
.popup-right-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(26,26,26,.3) 0%,rgba(166,124,82,.2) 100%)}
.popup-right-caption{position:absolute;bottom:2rem;left:2rem;right:2rem;font-size:10px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.8)}
@media(max-width:680px){.popup-right{display:none}.popup-left{padding:3rem 2rem}}



/* HOME TRENDING MARQUEE */
.marquee-container {
  grid-column: 1 / -1;
  overflow: hidden;
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  display: flex;
  padding: 2rem 0;
}
.marquee-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marqueeLoop 50s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}
@keyframes marqueeLoop {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 1.5rem)); }
}
/* Curated Originals: same motion, slower cadence */
.marquee-track--slow {
  animation-duration: 70s;
}
.marquee-item {
  flex-shrink: 0;
  width: 320px;
}
@media (max-width: 768px) {
  .marquee-item { width: 260px; }
}

/* ── CHECKOUT RESPONSIVE FIX (H7) ──────────────────────────── */
@media(max-width:768px){
  .checkout-grid{grid-template-columns:1fr !important;gap:2rem !important}
}

/* ── MENU ITEM TOUCH TARGETS (C3) ──────────────────────────── */
.menu-item{cursor:pointer}
.menu-sub-list li{cursor:pointer}

/* ── FORM FOCUS & ERROR STATES (C6, M8) ──────────────────── */
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--clay);outline-offset:2px;border-color:var(--clay) !important;
}
.field-error{border-color:#DC2626 !important}
.field-error-msg{font-size:11px;color:#DC2626;margin-top:.25rem;display:none}
.field-error + .field-error-msg{display:block}

/* ── NAV TOUCH TARGETS (C5) ──────────────────────────────── */
/* nav-hamburger touch target already set in base rule above */
.nav-action{min-height:44px;padding:0 4px}
.nav-cart-btn{min-height:44px;padding:0 4px}
.menu-close{min-width:44px;min-height:44px}
.search-close{min-width:44px;min-height:44px}
.cart-close{min-width:44px;min-height:44px}

/* ── FOOTER SOCIAL TOUCH TARGETS ────────────────────────── */
.footer-socials a,.footer-socials span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}

/* ── VIEW ALL FOCUS ──────────────────────────────────────── */
.view-all:focus-visible{outline:2px solid var(--clay);outline-offset:4px;border-radius:2px}

/* ── ARTISAN CTA FOCUS ───────────────────────────────────── */
.artisan-cta:focus-visible{outline:2px solid rgba(250,250,249,.8);outline-offset:4px;border-radius:2px}

/* ── COLLECTION BUTTON FOCUS ─────────────────────────────── */
.collection-btn:focus-visible{outline:2px solid var(--clay);outline-offset:4px;border-radius:2px}

/* ── NEWSLETTER FOCUS ────────────────────────────────────── */
.newsletter-submit:focus-visible{outline:2px solid #fff;outline-offset:2px}
.newsletter-input:focus-visible{outline:none}

/* ── FILTER/SEARCH SUGGESTIONS FOCUS ────────────────────── */
.search-sug-list li:focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-radius:2px}

/* ── HOTSPOT FOCUS ───────────────────────────────────────── */
.hotspot-dot:focus-visible{outline:2px solid var(--clay);outline-offset:4px;border-radius:50%}

/* ── TOUCH: always show hotspot tooltip on touch devices ─── */
@media(hover:none){
  .hotspot-tooltip{opacity:1;pointer-events:all;position:relative;transform:none;left:auto;bottom:auto;width:100%;margin-top:.5rem}
  .hotspot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}
}

/* ── CUSTOM SCROLLBAR POLISH ─────────────────────────────── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--clay-20);border-radius:2px}
* {scrollbar-width:thin;scrollbar-color:var(--clay-20) transparent}

/* ── SCREEN READER ONLY UTILITY (H5) ─────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── PRODUCT SKELETON LOADING STATES (H3) ─────────────────── */
.product-skeleton{background:var(--clay-10);border-radius:2px}
.product-skeleton-img{aspect-ratio:3/4;margin-bottom:1.5rem;background:linear-gradient(90deg,var(--clay-10) 25%,rgba(161,98,7,.18) 50%,var(--clay-10) 75%);background-size:200% 100%;animation:shimmer 1.6s infinite}
.product-skeleton-line{height:12px;margin-bottom:.75rem;border-radius:2px;background:linear-gradient(90deg,var(--clay-10) 25%,rgba(161,98,7,.18) 50%,var(--clay-10) 75%);background-size:200% 100%;animation:shimmer 1.6s infinite}
.product-skeleton-line.short{width:60%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.product-skeleton-img,.product-skeleton-line{animation:none}}

/* ══════════════════════════════════════════════════════════════════
   COOKIE CONSENT — BOTTOM BANNER
══════════════════════════════════════════════════════════════════ */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9000;background:var(--ink);color:var(--sand);padding:1.75rem 3rem;transform:translateY(110%);transition:transform .6s var(--ease);pointer-events:none}
#cookie-banner.visible{transform:translateY(0);pointer-events:all}
.cookie-banner-inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;gap:3rem;flex-wrap:wrap}
.cookie-banner-text{flex:1;min-width:260px}
.cookie-banner-text p{font-size:.85rem;font-weight:300;line-height:1.7;opacity:.75;max-width:640px}
.cookie-banner-text a{color:var(--clay);text-decoration:underline;text-underline-offset:3px}
.cookie-banner-text a:hover{opacity:.8}
.cookie-banner-title{font-family:var(--font-serif);font-size:1.25rem;font-weight:400;margin-bottom:.5rem;letter-spacing:-.01em}
.cookie-banner-actions{display:flex;align-items:center;gap:1rem;flex-shrink:0;flex-wrap:wrap}
.cookie-btn{padding:.65rem 1.75rem;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;transition:all .3s var(--ease);white-space:nowrap;border-radius:1px}
.cookie-btn-accept{background:var(--sand);color:var(--ink);border:1.5px solid var(--sand)}
.cookie-btn-accept:hover{background:var(--clay);border-color:var(--clay);color:#fff}
.cookie-btn-reject{background:transparent;color:var(--sand);border:1.5px solid rgba(250,250,249,.3)}
.cookie-btn-reject:hover{border-color:var(--sand)}
.cookie-btn-settings{background:transparent;color:var(--sand);border:none;opacity:.5;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;padding:.65rem 0}
.cookie-btn-settings:hover{opacity:1}
@media(max-width:768px){#cookie-banner{padding:1.5rem}
.cookie-banner-inner{flex-direction:column;align-items:stretch;gap:1.5rem}
.cookie-banner-actions{flex-direction:column}
.cookie-btn{width:100%;text-align:center}}

/* ══════════════════════════════════════════════════════════════════
   COOKIE CONSENT — PREFERENCE MODAL
══════════════════════════════════════════════════════════════════ */
#cookie-modal{position:fixed;inset:0;z-index:9100;background:rgba(28,25,23,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
#cookie-modal.visible{opacity:1;pointer-events:all}
.cookie-modal-box{width:100%;max-width:700px;background:var(--sand);color:var(--ink);border-radius:4px 4px 0 0;transform:translateY(40px);transition:transform .5s var(--ease);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
#cookie-modal.visible .cookie-modal-box{transform:translateY(0)}
.cookie-modal-header{display:flex;align-items:center;justify-content:space-between;padding:2rem 2.5rem 1.5rem;border-bottom:1px solid var(--ink-5)}
.cookie-modal-title{font-family:var(--font-serif);font-size:1.6rem;font-weight:400;letter-spacing:-.02em}
.cookie-modal-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .25s;color:var(--ink)}
.cookie-modal-close:hover{background:var(--ink-5)}
.cookie-modal-close svg{width:18px;height:18px}
.cookie-modal-body{overflow-y:auto;padding:1.5rem 2.5rem;flex:1}
.cookie-modal-intro{font-size:.875rem;font-weight:300;line-height:1.75;opacity:.7;margin-bottom:2rem}
.cookie-modal-intro a{color:var(--clay);text-decoration:underline;text-underline-offset:3px}
/* Cookie Category Rows */
.cookie-cat{display:flex;align-items:flex-start;gap:1.5rem;padding:1.25rem 0;border-bottom:1px solid var(--ink-5)}
.cookie-cat:last-child{border-bottom:none}
.cookie-cat-info{flex:1}
.cookie-cat-name{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.4rem}
.cookie-cat-desc{font-size:.8rem;font-weight:300;line-height:1.6;opacity:.65}
/* Toggle Switch */
.cookie-toggle-wrap{flex-shrink:0;margin-top:2px}
.cookie-toggle{position:relative;display:inline-block;width:40px;height:22px}
.cookie-toggle input{opacity:0;width:0;height:0;position:absolute}
.cookie-toggle-slider{position:absolute;inset:0;background:var(--ink-20);border-radius:22px;cursor:pointer;transition:background .3s}
.cookie-toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .3s var(--ease),box-shadow .3s}
.cookie-toggle input:checked + .cookie-toggle-slider{background:var(--clay)}
.cookie-toggle input:checked + .cookie-toggle-slider::before{transform:translateX(18px)}
.cookie-toggle input:disabled + .cookie-toggle-slider{cursor:not-allowed;opacity:.5}
.cookie-toggle input:focus-visible + .cookie-toggle-slider{outline:2px solid var(--clay);outline-offset:2px}
/* Always on badge */
.cookie-always-on{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--clay);opacity:.8;margin-top:4px;text-align:center}
/* Footer */
.cookie-modal-footer{padding:1.5rem 2.5rem;border-top:1px solid var(--ink-5);display:flex;gap:1rem;justify-content:flex-end;flex-wrap:wrap}
.cookie-modal-footer .cookie-btn{padding:.65rem 2rem}
.cookie-btn-save{background:var(--ink);color:var(--sand);border:1.5px solid var(--ink)}
.cookie-btn-save:hover{background:var(--clay);border-color:var(--clay)}
.cookie-btn-accept-all{background:transparent;color:var(--ink);border:1.5px solid var(--ink-20)}
.cookie-btn-accept-all:hover{border-color:var(--ink)}
@media(max-width:600px){.cookie-modal-header,.cookie-modal-body,.cookie-modal-footer{padding-left:1.5rem;padding-right:1.5rem}
.cookie-modal-footer{flex-direction:column}
.cookie-modal-footer .cookie-btn{width:100%;text-align:center}}

/* ══════════════════════════════════════════════════════════════════
   SHOP PAGE — BREADCRUMBS
══════════════════════════════════════════════════════════════════ */
.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:2.5rem;flex-wrap:wrap}
.breadcrumb-item{cursor:pointer;transition:color .25s}
.breadcrumb-item:hover:not(.active){color:var(--ink)}
.breadcrumb-item.active{color:var(--ink);pointer-events:none}
.breadcrumb-sep{font-size:9px;opacity:.4;user-select:none}

/* ══════════════════════════════════════════════════════════════════
   PHASE 2A — WISHLIST HEART BUTTON (on product cards)
══════════════════════════════════════════════════════════════════ */
.wish-btn{position:absolute;top:1rem;right:1rem;width:36px;height:36px;background:rgba(250,250,249,.9);backdrop-filter:blur(6px);border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .3s var(--ease);z-index:2;opacity:0}
.product-card:hover .wish-btn,.wish-btn.active{opacity:1}
.wish-btn svg{width:16px;height:16px;stroke:var(--ink);transition:all .3s var(--ease)}
.wish-btn.active svg{fill:var(--clay);stroke:var(--clay)}
.wish-btn:hover{background:#fff;transform:scale(1.1)}

/* Nav wishlist trigger */
.nav-wish-btn{position:relative;display:flex;align-items:center;gap:.4rem;background:none;border:none;cursor:pointer;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);padding:.5rem;transition:opacity .25s}
.nav-wish-btn:hover{opacity:.6}
.nav-wish-btn svg{width:18px;height:18px;stroke:var(--ink)}
#wish-badge{position:absolute;top:-2px;right:-2px;width:16px;height:16px;background:var(--clay);color:#fff;border-radius:50%;font-size:8px;font-weight:700;display:none;align-items:center;justify-content:center}

/* ── FAVOURITES DRAWER ──────────────────────────────────────────── */
#wish-backdrop{position:fixed;inset:0;background:rgba(28,25,23,.5);z-index:8000;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
#wish-backdrop.visible{opacity:1;pointer-events:all}
#wish-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--sand);z-index:8100;transform:translateX(100%);transition:transform .5s var(--ease);display:flex;flex-direction:column;overflow:hidden}
#wish-drawer.open{transform:translateX(0)}
.wish-header{display:flex;align-items:center;justify-content:space-between;padding:2rem 2.5rem;border-bottom:1px solid var(--ink-5);flex-shrink:0}
.wish-header-left h2{font-family:var(--font-serif);font-size:1.4rem;font-weight:400;letter-spacing:-.01em}
.wish-header-left span{font-size:10px;opacity:.45;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.wish-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .25s;color:var(--ink);border:none;background:transparent;cursor:pointer}
.wish-close:hover{background:var(--ink-5)}
.wish-close svg{width:18px;height:18px}
#wish-body{flex:1;overflow-y:auto;padding:1.5rem 2.5rem}
/* Empty state */
.wish-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1.5rem;text-align:center;padding:4rem 0}
.wish-empty svg{width:48px;height:48px;opacity:.2}
.wish-empty p{font-size:.9rem;opacity:.5;font-weight:300}
.wish-empty-cta{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;cursor:pointer;opacity:.6;transition:opacity .25s}
.wish-empty-cta:hover{opacity:1}
/* Wish item card */
.wish-item{display:flex;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--ink-5)}
.wish-item:last-child{border-bottom:none}
.wish-item-img{width:90px;height:110px;flex-shrink:0;overflow:hidden;border-radius:2px}
.wish-item-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.wish-item-img:hover img{transform:scale(1.05)}
.wish-item-info{flex:1;display:flex;flex-direction:column;gap:.4rem}
.wish-item-cat{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;opacity:.45}
.wish-item-title{font-family:var(--font-serif);font-size:1rem;font-weight:400;line-height:1.3}
.wish-item-price{font-size:.85rem;font-weight:500;color:var(--clay)}
.wish-item-actions{display:flex;align-items:center;gap:1rem;margin-top:.5rem}
.wish-item-add{padding:.5rem 1.25rem;background:var(--ink);color:var(--sand);font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;border:none;cursor:pointer;border-radius:1px;transition:background .3s var(--ease);flex:1}
.wish-item-add:hover{background:var(--clay)}
.wish-item-remove{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--ink-10);background:transparent;cursor:pointer;transition:all .25s;flex-shrink:0}
.wish-item-remove:hover{border-color:var(--ink);background:var(--ink-5)}
.wish-item-remove svg{width:14px;height:14px}
@media(max-width:480px){.wish-header,#wish-body{padding-left:1.5rem;padding-right:1.5rem}}

/* ══════════════════════════════════════════════════════════════════
   PHASE 2B — QUICK-VIEW MODAL
══════════════════════════════════════════════════════════════════ */
#quickview-modal{position:fixed;inset:0;z-index:9200;background:rgba(28,25,23,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s var(--ease);padding:2rem}
#quickview-modal.visible{opacity:1;pointer-events:all}
#quickview-inner{width:100%;max-width:1060px;max-height:90vh;background:var(--sand);border-radius:3px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;transform:translateY(30px) scale(.98);transition:transform .5s var(--ease)}
#quickview-modal.visible #quickview-inner{transform:translateY(0) scale(1)}
/* Right column: details top + CTL bottom */
.qv-right-col{display:flex;flex-direction:column;overflow:hidden;min-height:0}

/* Close button */
.qv-close-btn{position:absolute;top:1.5rem;right:1.5rem;width:40px;height:40px;background:rgba(250,250,249,.95);border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;z-index:10;transition:all .25s;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.qv-close-btn:hover{background:#fff;transform:scale(1.1)}
.qv-close-btn svg{width:18px;height:18px}

/* Left: Image Panel */
.qv-img-panel{position:relative;overflow:hidden;background:var(--clay-5)}
.qv-img-main{width:100%;height:100%;min-height:500px}
.qv-img-main img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.qv-img-panel:hover .qv-img-main img{transform:scale(1.04)}
.qv-category-badge{position:absolute;bottom:1.5rem;left:1.5rem;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;background:rgba(250,250,249,.9);color:var(--ink);padding:.4rem .9rem;backdrop-filter:blur(4px);border-radius:1px}
.qv-wish-btn{top:1.5rem;right:1.5rem;width:40px;height:40px;background:rgba(250,250,249,.92);opacity:1 !important}

/* Right column: flex-column, header fixed, rest scrolls */
.qv-right-col{display:flex;flex-direction:column;overflow:hidden;min-height:0}

/* Fixed header — never scrolls */
.qv-details-header{flex-shrink:0;padding:1.5rem 2rem 1.25rem;border-bottom:1px solid var(--ink-5);background:var(--sand)}

/* Single scroll zone — everything below the header */
.qv-details-scroll{flex:1;overflow-y:auto;padding:1.25rem 2rem 2rem}
/* Back-to-results pill */
.qv-back-pill{display:inline-flex;align-items:center;gap:.4rem;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);background:var(--clay-10);border:1px solid var(--clay-20);padding:.35rem .85rem;border-radius:999px;cursor:pointer;margin-bottom:1.5rem;transition:background .2s,border-color .2s;white-space:nowrap}
.qv-back-pill:hover{background:var(--clay-20);border-color:var(--clay-30)}
.qv-back-pill svg{flex-shrink:0;transition:transform .2s}
.qv-back-pill:hover svg{transform:translateX(-3px)}

.qv-eyebrow{font-size:8px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;opacity:.4;margin-bottom:.5rem}
.qv-title{font-family:var(--font-serif);font-size:clamp(1.25rem,2.5vw,1.7rem);font-weight:400;line-height:1.2;margin-bottom:.5rem;letter-spacing:-.01em}
.qv-price{font-size:1rem;font-weight:600;color:var(--clay);letter-spacing:.04em}
.qv-desc{font-size:.88rem;font-weight:300;line-height:1.75;opacity:.7;margin-bottom:1.5rem}

/* Accordion */
.qv-accordion{border-top:1px solid var(--ink-5)}
.qv-accordion-item{border-bottom:1px solid var(--ink-5);overflow:hidden}
.qv-accordion-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.1rem 0;background:transparent;border:none;cursor:pointer;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-align:left;color:var(--ink);transition:opacity .25s}
.qv-accordion-trigger:hover{opacity:.6}
.qv-accordion-icon{width:16px;height:16px;flex-shrink:0;transition:transform .35s var(--ease)}
.qv-accordion-item.open .qv-accordion-icon{transform:rotate(180deg)}
.qv-accordion-body{max-height:0;transition:max-height .4s var(--ease),padding .4s var(--ease);overflow:hidden;padding:0}
.qv-accordion-item.open .qv-accordion-body{max-height:300px;padding-bottom:1.25rem}
.qv-accordion-body p{font-size:.85rem;font-weight:300;line-height:1.75;opacity:.65}

/* Add to Basket — inline in scroll, not a sticky bar */
.qv-add-section{padding:1.5rem 0 .5rem;border-top:1px solid var(--ink-5)}
.qv-add-btn{display:block;width:100%;padding:1rem 2rem;background:var(--ink);color:var(--sand);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;border:none;cursor:pointer;border-radius:1px;transition:background .3s var(--ease);text-align:center}
.qv-add-btn:hover{background:var(--clay)}

/* ── Complete the Look — inline in scroll, below add button ──── */
.qv-ctl{border-top:1px solid var(--ink-5);padding:1.5rem 0 1rem}
.qv-ctl-label{font-size:9px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;opacity:.4;margin-bottom:1rem}
.qv-ctl-row{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:none}
.qv-ctl-row::-webkit-scrollbar{display:none}
.qv-ctl-card{flex:none;width:80px;background:none;border:none;cursor:pointer;text-align:left;padding:0;transition:transform .25s var(--ease)}
.qv-ctl-card:hover{transform:translateY(-3px)}
.qv-ctl-img{width:80px;height:106px;overflow:hidden;border-radius:2px;margin-bottom:.5rem;background:var(--ink-5)}
.qv-ctl-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.qv-ctl-card:hover .qv-ctl-img img{transform:scale(1.06)}
.qv-ctl-name{font-family:var(--font-serif);font-size:.7rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px;margin-bottom:.2rem}
.qv-ctl-price{font-size:.65rem;font-weight:600;color:var(--clay);letter-spacing:.05em}

/* Responsive — Mobile Quick-View */
@media(max-width:768px){
  #quickview-modal{padding:.5rem;align-items:flex-end}
  #quickview-inner{grid-template-columns:1fr;max-height:94vh;border-radius:10px 10px 0 0}

  /* Shrink image on mobile */
  .qv-img-main{min-height:160px;max-height:180px}

  /* Tighter header on mobile */
  .qv-details-header{padding:1rem 1.25rem .75rem}

  /* More vertical space for the scroll zone */
  .qv-details-scroll{padding:1rem 1.25rem 1.5rem}
}

/* ══════════════════════════════════════════════════════════════════
   SHOP FILTER SYSTEM
══════════════════════════════════════════════════════════════════ */

/* Toolbar */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--ink-5);flex-wrap:wrap}
.shop-toolbar-left{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;flex:1}
.shop-count-label{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.4;white-space:nowrap}

/* Filter trigger button */
.shop-filter-trigger{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.4rem;border:1px solid var(--ink-20);background:transparent;color:var(--ink);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;border-radius:1px;transition:all .25s var(--ease);position:relative;flex-shrink:0}
.shop-filter-trigger:hover{background:var(--ink);color:var(--sand)}
.shop-filter-trigger:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.shop-filter-trigger.has-filters{border-color:var(--clay);color:var(--clay)}
.shop-filter-trigger.has-filters:hover{background:var(--clay);color:var(--sand)}
.filter-active-dot{width:6px;height:6px;border-radius:50%;background:var(--clay);flex-shrink:0}

/* Active filter tags */
.active-filter-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.active-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--clay-10);border:1px solid var(--clay-20);color:var(--clay);padding:.3rem .7rem;border-radius:999px}
.active-tag-x{background:none;border:none;cursor:pointer;color:var(--clay);font-size:10px;padding:0;line-height:1;opacity:.7;transition:opacity .2s}
.active-tag-x:hover{opacity:1}

/* Backdrop */
.filter-backdrop{position:fixed;inset:0;z-index:8000;background:rgba(28,25,23,.55);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.filter-backdrop.open{opacity:1;pointer-events:all}

/* Drawer */
.filter-drawer{position:fixed;top:0;right:0;bottom:0;z-index:8100;width:min(420px,100vw);background:var(--sand);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .45s var(--ease);box-shadow:-4px 0 40px rgba(0,0,0,.15)}
.filter-drawer.open{transform:translateX(0)}

.filter-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:1.75rem 2rem 1.5rem;border-bottom:1px solid var(--ink-5);flex-shrink:0}
.filter-drawer-title{font-size:10px;font-weight:700;letter-spacing:.35em;text-transform:uppercase}
.filter-drawer-close{width:44px;height:44px;background:var(--ink-5);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.filter-drawer-close:hover{background:var(--ink-10)}
.filter-drawer-close:focus-visible{outline:2px solid var(--clay);outline-offset:2px}

/* Scrollable body */
.filter-drawer-body{flex:1;overflow-y:auto;padding:0}
.filter-section{padding:1.5rem 2rem}
.filter-section-label{font-size:9px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;opacity:.4;margin-bottom:1rem}
.filter-divider{height:1px;background:var(--ink-5);margin:0}

/* Sort radios */
.filter-sort-options{display:flex;flex-direction:column;gap:.15rem}
.filter-sort-opt{display:flex;align-items:center;gap:.75rem;padding:.85rem 0;cursor:pointer;font-size:.85rem;font-weight:400;letter-spacing:.02em;opacity:.6;transition:opacity .2s}
.filter-sort-opt:has(input:checked){opacity:1;font-weight:600}
.filter-sort-opt input{accent-color:var(--clay);width:18px;height:18px;cursor:pointer;margin:0}

/* Category checkboxes */
.filter-checkboxes{display:flex;flex-direction:column;gap:.15rem}
.filter-check{display:flex;align-items:center;gap:.75rem;padding:.85rem 0;cursor:pointer;font-size:.85rem;font-weight:400;opacity:.6;transition:opacity .2s}
.filter-check:has(input:checked){opacity:1;font-weight:600}
.filter-check input{accent-color:var(--clay);width:18px;height:18px;cursor:pointer;margin:0}

/* Price range dual sliders */
.filter-price-display{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;letter-spacing:.05em;margin-bottom:.75rem;color:var(--clay)}
.filter-range-wrap{display:flex;flex-direction:column;gap:.5rem}
.filter-range{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:2px;background:var(--ink-10);outline:none;cursor:pointer;accent-color:var(--clay)}
.filter-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--ink);border:2px solid var(--sand);box-shadow:0 1px 6px rgba(0,0,0,.2);cursor:grab;transition:background .2s}
.filter-range::-webkit-slider-thumb:hover{background:var(--clay)}
.filter-range:active::-webkit-slider-thumb{cursor:grabbing}

/* iOS-style toggle switches */
.filter-toggles{display:flex;flex-direction:column;gap:1rem}
.filter-toggle-row{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:.88rem;font-weight:400;letter-spacing:.02em}
.filter-toggle-input{position:absolute;opacity:0;width:0;height:0}
.filter-toggle-thumb{display:inline-block;width:44px;height:24px;background:var(--ink-10);border-radius:12px;position:relative;transition:background .3s var(--ease);flex-shrink:0}
.filter-toggle-thumb::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .3s var(--ease)}
.filter-toggle-input:checked + .filter-toggle-thumb{background:var(--clay)}
.filter-toggle-input:checked + .filter-toggle-thumb::after{transform:translateX(20px)}

/* Drawer footer */
.filter-drawer-footer{display:flex;gap:1rem;padding:1.25rem 2rem;border-top:1px solid var(--ink-5);flex-shrink:0}
.filter-reset-btn{flex:1;padding:.9rem;border:1px solid var(--ink-20);background:transparent;color:var(--ink);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;border-radius:1px;transition:all .25s}
.filter-reset-btn:hover{border-color:var(--ink);background:var(--ink-5)}
.filter-reset-btn:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.filter-apply-btn{flex:2;padding:.9rem;border:none;background:var(--ink);color:var(--sand);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;border-radius:1px;transition:background .3s var(--ease)}
.filter-apply-btn:hover{background:var(--clay)}
.filter-apply-btn:focus-visible{outline:2px solid var(--clay);outline-offset:2px}

/* Mobile filter drawer */
@media(max-width:768px){
  .filter-drawer{width:100vw}
  .filter-drawer-header{padding:1.25rem 1.5rem 1rem}
  .filter-section{padding:1.25rem 1.5rem}
  .filter-drawer-footer{padding:1rem 1.5rem}
}

/* ── Search Results ────────────────────────────────────────────── */
.search-result-count {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .5;
  margin: 1.5rem 0 1rem;
  min-height: 1.2em;
}
.search-results-list {
  max-height: 55vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.5rem;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--clay-20) transparent;
}
.search-results-list::-webkit-scrollbar { width: 4px; }
.search-results-list::-webkit-scrollbar-thumb { background: var(--clay-30); border-radius: 2px; }

.search-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .35;
  margin-bottom: .5rem;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .75rem 1rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background .2s, transform .2s;
  border: 1px solid rgba(250,250,249,.08);
  position: relative;
}
.search-result-item:hover {
  background: rgba(250,250,249,.07);
  border-color: var(--clay);
  transform: translateX(4px);
}
.search-result-img {
  width: 64px;
  height: 64px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ink-5);
}
.search-result-img img { width: 100%; height: 100%; object-fit: cover; }
.search-result-info { flex: 1; min-width: 0; }
.search-result-cat {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .4;
  margin-bottom: .25rem;
}
.search-result-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--sand);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-price {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--clay);
  margin-top: .3rem;
}
.search-result-add {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(250,250,249,.2);
  color: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
  opacity: 0;
}
.search-result-item:hover .search-result-add { opacity: 1; }
.search-result-add:hover { background: var(--clay); border-color: var(--clay); color: #fff; }
.search-result-add svg { width: 14px; height: 14px; }

.search-no-results {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--sand);
  opacity: .55;
}
.search-no-results p { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: .5rem; }
.search-no-results span { font-size: .85rem; }



/* ══════════════════════════════════════════════════════════════════
   PRODUCT CARD — Multi-image Slider
══════════════════════════════════════════════════════════════════ */
.pc-img-slider{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--clay-10);border-radius:2px}
.pc-thumb-track{position:relative;width:100%;height:100%}
.pc-thumb-item{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.pc-thumb-item.active{opacity:1;pointer-events:auto}
.pc-thumb-item img{width:100%;height:100%;object-fit:cover;display:block}
.pc-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(28,25,23,.55);backdrop-filter:blur(6px);border:none;color:var(--sand);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:4;opacity:0;transition:opacity .25s,background .2s}
.pc-nav:hover{background:var(--clay)}
.pc-prev{left:.75rem}
.pc-next{right:.75rem}
.product-card:hover .pc-nav{opacity:1}
.pc-dots{position:absolute;bottom:.75rem;left:50%;transform:translateX(-50%);display:flex;gap:.35rem;z-index:3;opacity:0;transition:opacity .25s}
.product-card:hover .pc-dots{opacity:1}
.pc-dot{width:5px;height:5px;border-radius:50%;background:rgba(250,250,249,.4);transition:background .25s,transform .25s}
.pc-dot.active{background:var(--sand);transform:scale(1.3)}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT PAGE — Vertical Thumbnail Gallery
══════════════════════════════════════════════════════════════════ */
.pp-grid{display:grid;grid-template-columns:80px 1fr 1fr;gap:2rem;align-items:start}
.pp-thumbs{display:flex;flex-direction:column;gap:.75rem;position:sticky;top:calc(var(--nav-h) + 2rem)}
.pp-thumb{width:80px;height:80px;border:2px solid transparent;border-radius:2px;overflow:hidden;cursor:pointer;padding:0;background:var(--clay-10);transition:border-color .2s,opacity .2s;opacity:.55;flex-shrink:0}
.pp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pp-thumb:hover{opacity:.85;border-color:var(--ink-20)}
.pp-thumb.active{border-color:var(--ink);opacity:1}
.pp-main-img-wrap{position:sticky;top:calc(var(--nav-h) + 2rem);aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--clay-10)}
.pp-main-img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .18s ease}
.pp-main-img.pp-img-fade{opacity:0}
.pp-info{display:flex;flex-direction:column;gap:2rem;padding-top:1rem}
@media(max-width:900px){
  .pp-grid{grid-template-columns:72px 1fr;grid-template-rows:auto auto}
  .pp-thumbs{position:static}
  .pp-main-img-wrap{position:static}
  .pp-info{grid-column:1 / -1;grid-row:3}
}
@media(max-width:600px){
  .pp-grid{grid-template-columns:1fr;grid-template-rows:none}
  .pp-thumbs{flex-direction:row;overflow-x:auto;scrollbar-width:none;position:static;padding-bottom:.5rem;gap:.5rem}
  .pp-thumbs::-webkit-scrollbar{display:none}
  .pp-thumb{width:64px;height:64px;flex-shrink:0}
  .pp-main-img-wrap{position:static;aspect-ratio:4/3;width:100%}
  .pp-info{grid-column:1 / -1;position:static;padding-top:0}
}


/* ══════════════════════════════════════════════════════════════════
   COMPLETE THE LOOK — Horizontal Product Section
══════════════════════════════════════════════════════════════════ */
.ctl-section {
  padding: 6rem 0 8rem;
  background: var(--clay-5);
  border-top: 1px solid var(--ink-5);
}

/* Header row */
.ctl-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3.5rem;
  flex-wrap: wrap;
}
.ctl-heading {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 1.1;
  margin-top: .75rem;
}
.ctl-browse-btn {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .75rem;
  white-space: nowrap;
  opacity: .7;
  transition: opacity .2s;
}
.ctl-browse-btn:hover { opacity: 1; }
.ctl-browse-btn .line {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--ink);
  transition: width .3s var(--ease);
}
.ctl-browse-btn:hover .line { width: 70px; }

/* Horizontal scrollable track */
.ctl-track-wrap {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: var(--clay-30) transparent;
  padding-bottom: 1rem;
}
.ctl-track-wrap::-webkit-scrollbar { height: 4px; }
.ctl-track-wrap::-webkit-scrollbar-thumb { background: var(--clay-30); border-radius: 2px; }
.ctl-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
}

/* Individual card */
.ctl-card {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* Image */
.ctl-img-wrap {
  position: relative;
  width: 220px;
  height: 260px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--clay-10);
  cursor: pointer;
}
.ctl-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.ctl-img-wrap:hover img { transform: scale(1.05); }
.ctl-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28,25,23,0);
  transition: background .3s;
}
.ctl-img-wrap:hover .ctl-img-overlay { background: rgba(28,25,23,.06); }

/* Meta */
.ctl-meta {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.ctl-cat {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .4;
}
.ctl-title {
  font-family: var(--font-serif);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: opacity .2s;
}
.ctl-title:hover { opacity: .6; }
.ctl-price {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--clay);
}
.ctl-add-btn {
  margin-top: .5rem;
  width: 100%;
  padding: .8rem 1rem;
  background: transparent;
  border: 1px solid var(--ink-20);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
  border-radius: 1px;
}
.ctl-add-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--sand);
}

/* Mobile: narrower cards */
@media(max-width:600px) {
  .ctl-card { width: 170px; }
  .ctl-img-wrap { width: 170px; height: 200px; }
  .ctl-heading { font-size: 2rem; }
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT PAGE — Close (X) Button
══════════════════════════════════════════════════════════════════ */
.pp-close-btn {
  position: fixed;
  top: calc(var(--nav-h) + 1.25rem);
  right: 2rem;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(250,250,249,.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ink-10);
  border-radius: 100px;
  padding: .55rem 1.1rem .55rem .9rem;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(28,25,23,.08);
  transition: background .2s, box-shadow .2s, transform .2s;
}
.pp-close-btn:hover {
  background: var(--ink);
  color: var(--sand);
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(28,25,23,.15);
}
.pp-close-btn:hover svg { stroke: var(--sand); }
.pp-close-btn svg {
  transition: stroke .2s, transform .2s;
  flex-shrink: 0;
}
.pp-close-btn:hover svg { transform: rotate(90deg); }

/* Hide label on very small screens, keep just the X */
@media(max-width:480px){
  .pp-close-btn span { display: none; }
  .pp-close-btn { padding: .65rem; border-radius: 50%; right: 1rem; }
}



/* ══════════════════════════════════════════════════════════════════
   PROPORTIONAL SCALING OVERRIDES
   The root font-size is now viewport-proportional (clamp 13px → 18px).
   These overrides make the remaining hard-coded px values fluid too.
══════════════════════════════════════════════════════════════════ */

/* Navbar — already uses rem for height via --nav-h, reinforce padding */
#navbar { padding: 0 clamp(1rem, 3vw, 4rem); }

/* Section wrapper — fluid horizontal padding + capped width */
.section-wrap {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left:  clamp(1.25rem, 4vw, 5rem);
  padding-right: clamp(1.25rem, 4vw, 5rem);
}

/* Product grid — fluid columns and gap */
.product-grid {
  gap: clamp(1rem, 2vw, 2.5rem);
}

/* Hero — keep text proportional */
.hero-title {
  font-size: clamp(2.8rem, 6vw, 7.5rem) !important;
}
.hero-sub {
  font-size: clamp(.8rem, 1.1vw, 1.1rem) !important;
}

/* Trust band */
.trust-band {
  padding: clamp(1.5rem, 3vw, 3rem) 0;
}

/* Section headings — already use clamp in most places, this backstops others */
.section-title, h2 {
  font-size: clamp(1.8rem, 3.5vw, 4rem);
}

/* Body copy — proportional */
p {
  font-size: clamp(.85rem, 1vw, 1.1rem);
  line-height: 1.75;
}

/* Product card — proportional meta text */
.product-card-name  { font-size: clamp(.9rem, 1.2vw, 1.25rem); }
.product-card-price { font-size: clamp(.75rem, .9vw, 1rem); }
.product-card-cat   { font-size: clamp(8px, .65vw, 10px); }

/* Eyebrow labels */
.eyebrow {
  font-size: clamp(8px, .65vw, 10px);
  letter-spacing: .35em;
}

/* Footer proportional */
.footer-col-title { font-size: clamp(8px, .65vw, 10px); }
.footer-link      { font-size: clamp(.8rem, .9vw, 1rem); }

/* CTL cards — scale with screen */
.ctl-card    { width: clamp(160px, 16vw, 240px); }
.ctl-img-wrap{ width: clamp(160px, 16vw, 240px);
               height: clamp(190px, 19vw, 285px); }

/* ══════════════════════════════════════════════════════════════════
   SAMSUNG GALAXY S20 & ALL SMALL PHONES — COMPREHENSIVE MOBILE FIX
   Target: 360–480px viewport width
══════════════════════════════════════════════════════════════════ */
@media(max-width:480px){

  /* ── Global paragraph readability ── */
  p{font-size:0.9rem !important;line-height:1.75}

  /* ── Navbar ── */
  #navbar{padding:0 0.875rem !important;height:3.5rem}
  :root{--nav-h:3.5rem}
  .nav-logo{font-size:1.35rem !important}
  .nav-hamburger{width:40px;min-height:40px}
  .nav-hamburger span{width:18px}
  .nav-right{gap:0.1rem}
  .nav-wish-btn,.nav-cart-btn{padding:0.4rem !important;min-height:40px !important}
  .nav-wish-btn svg{width:22px !important;height:22px !important}
  .nav-cart-btn svg{width:22px !important;height:22px !important}
  /* On transparent hero — white icons with shadow for visibility */
  #navbar:not(.scrolled) .nav-wish-btn svg,
  #navbar:not(.scrolled) .nav-cart-btn svg,
  #navbar:not(.scrolled) .nav-hamburger span{
    filter:drop-shadow(0 0 4px rgba(0,0,0,.7))
  }
  #navbar:not(.scrolled) .nav-hamburger span{
    box-shadow:0 0 6px rgba(0,0,0,.8)
  }

  /* ── Hero ── */
  #hero{min-height:100svh}
  .hero-tagline{
    font-size:clamp(1.75rem,7.5vw,2.8rem) !important;
    padding:0 1rem;
    line-height:1.1
  }
  .hero-sub,
  .hero-center p{
    font-size:0.9rem !important;
    padding:0 1.5rem;
    margin:0.75rem auto 1.75rem !important;
    max-width:100% !important
  }
  .hero-links{
    bottom:5rem;
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
    padding:0 1.5rem
  }
  .hero-link{
    font-size:9px;
    padding:0.75rem 1.5rem;
    border:1px solid rgba(255,255,255,.25);
    width:100%;
    justify-content:center;
    max-width:280px;
    min-height:44px !important
  }
  .hero-scroll{display:none}

  /* ── Trust Band ── */
  #trust-band{padding:1.25rem 1rem}
  .trust-pillars{gap:0.6rem 1.25rem;justify-content:center}
  .trust-pillar-label{font-size:8.5px}
  .trust-pillar svg{width:0.9rem;height:0.9rem}

  /* ── Section shared ── */
  .section-heading{font-size:clamp(1.9rem,7.5vw,2.8rem) !important}
  .section-wrap{padding-left:1.25rem !important;padding-right:1.25rem !important}
  .eyebrow{font-size:8.5px !important;letter-spacing:.3em}

  /* ── Product grid: 2 cols ── */
  .product-grid{grid-template-columns:repeat(2,1fr) !important;gap:1rem 0.75rem}
  .product-card-name{font-size:0.8rem !important}
  .product-card-price{font-size:0.75rem !important}

  /* ── Artisan section ── */
  #artisan-spotlight{padding:2.5rem 1.25rem}
  .artisan-inner{gap:2rem !important;flex-direction:column}
  .artisan-img-col{max-width:100%;min-width:unset;width:100%;aspect-ratio:16/9}
  .artisan-text-col{min-width:unset;gap:1.5rem}
  .artisan-heading{font-size:clamp(2rem,7.5vw,3rem) !important}
  .artisan-body,.artisan-note{font-size:0.9rem !important;max-width:100%}

  /* ── Categories: 1 column ── */
  .category-grid{grid-template-columns:1fr !important;gap:1rem}
  .category-card{aspect-ratio:16/9 !important}

  /* ── Collection highlight ── */
  .collection-card{padding:2rem 1.25rem !important}
  .collection-card h3{font-size:clamp(1.8rem,7vw,2.8rem) !important}
  .collection-card p{font-size:0.85rem !important}
  .collection-btn{padding:1rem 2rem;font-size:9px}

  /* ── Editorial ── */
  .editorial-heading{font-size:clamp(2.2rem,8vw,3.2rem) !important}
  .editorial-float-card{display:none}
  .editorial-body{font-size:0.9rem !important}

  /* ── Testimonials ── */
  .testimonial-text{font-size:0.95rem !important}
  #testimonials .section-wrap{padding:2.5rem 1rem}
  .testimonial-card{padding:2rem 1.5rem}

  /* ── Newsletter: stack form elements ── */
  .newsletter-inner{padding:3.5rem 1.25rem !important}
  .newsletter-heading{font-size:clamp(1.8rem,7.5vw,3rem) !important}
  .newsletter-sub{font-size:0.85rem !important;margin-bottom:2rem}
  .newsletter-form{
    flex-direction:column !important;
    border:none !important;
    gap:0.75rem
  }
  .newsletter-input{
    border:1px solid rgba(245,242,237,.2) !important;
    padding:1rem 1.25rem !important;
    font-size:0.9rem !important
  }
  .newsletter-submit{
    padding:1rem 2rem !important;
    width:100% !important;
    font-size:10px
  }

  /* ── Footer ── */
  #footer{padding:3rem 1.25rem 2rem !important}
  .footer-brand-logo{font-size:1.4rem}
  .footer-brand-desc{font-size:0.8rem}
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
    padding-top:2rem
  }
  .footer-copy{font-size:8.5px;width:100%;text-align:center;margin-top:0.5rem}
  .footer-bottom-left{flex-wrap:wrap;gap:0.75rem}

  /* ── Cart & Drawers full-width ── */
  #cart-drawer{max-width:100vw !important}
  #wish-drawer{width:100vw !important}

  /* ── Scroll to top ── */
  #scroll-top{bottom:1.25rem;right:1rem;width:44px;height:44px}

  /* ── Account / Contact / FAQ page padding ── */
  #page-account section,
  #page-contact section,
  #page-faq section,
  #page-shopguide section{
    padding-left:1.25rem !important;
    padding-right:1.25rem !important
  }

  /* ── Checkout single column ── */
  .checkout-grid{grid-template-columns:1fr !important;gap:2rem !important}

  /* ── Lookbook: disable hotspot absolute tooltips (too cramped) ── */
  .hotspot-tooltip{
    width:160px !important;
    font-size:8px !important
  }
}


/* ══════════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVENESS OVERHAUL — Phase 1–4
   Audit-driven fixes: all additive, brand aesthetic untouched.
══════════════════════════════════════════════════════════════════ */

/* ── Phase 1: Global image safety ──────────────────────────────── */
img {
  max-width: 100%;
}

/* ── Phase 1: iOS Safari input zoom prevention (needs >= 16px) ── */
input,
textarea,
select {
  font-size: max(16px, 1rem);
}

/* ── Phase 2 Tablet (<=1024px) — layout adaptation ─────────────── */
@media (max-width: 1024px) {

  /* Reduce oversized desktop vertical padding */
  .section-wrap {
    padding-top:    clamp(2rem, 5vw, 4rem);
    padding-bottom: clamp(2rem, 5vw, 4rem);
  }

  /* Category grid: 2 cols on tablet */
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Collection card: tighter glass panel */
  .collection-card {
    padding: 3.5rem 4rem;
  }

  /* Newsletter: stack form vertically on tablet */
  .newsletter-form {
    flex-direction: column;
    border: none;
    max-width: 420px;
    gap: 0.75rem;
  }
  .newsletter-input {
    border: 1px solid rgba(245, 242, 237, 0.2);
    padding: 1rem 1.25rem;
    width: 100%;
  }
  .newsletter-submit {
    width: 100%;
    padding: 1rem 2rem;
  }

  /* Editorial: single column on tablet */
  .editorial-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .editorial-float-card { display: none; }

  /* Artisan: stack columns on tablet */
  .artisan-inner {
    flex-direction: column;
    gap: 3rem;
  }
  .artisan-img-col {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .artisan-text-col { min-width: unset; }
}

/* ── Phase 2 Mobile (<=768px) — header & nav refactor ──────────── */
@media (max-width: 768px) {

  /* Hide all nav text labels; keep icons only */
  .nav-label { display: none !important; }

  /* Hide search trigger text and LOG IN / HELP action buttons */
  .nav-center  { display: none; }
  .nav-action  { display: none; }

  /* Wish + Cart: proper touch targets */
  .nav-wish-btn,
  .nav-cart-btn {
    min-width:  44px;
    min-height: 44px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-right { gap: 0.25rem; }

  /* ── Phase 1: Hero sub-text fluid scaling ── */
  .hero-center p,
  .hero-sub {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
    padding: 0 1.5rem;
    max-width: 100% !important;
    margin: 1rem auto 2rem !important;
    line-height: 1.6;
  }

  /* ── Phase 1: Section headings fluid ── */
  .section-heading {
    font-size: clamp(2rem, 8vw, 3.5rem) !important;
    line-height: 1.1;
  }

  /* ── Phase 3: Section padding ── */
  .section-wrap {
    padding-left:  1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* ── Phase 3: Category grid — 1 column ── */
  .category-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
  .category-card { aspect-ratio: 16 / 9 !important; }

  /* ── Phase 3: Lookbook — safe aspect ratio on mobile ── */
  .lookbook-img-wrap { aspect-ratio: 4 / 3; }

  /* Hotspot tooltips — prevent off-screen overflow */
  .hotspot-tooltip {
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    width: 180px !important;
    font-size: 9px !important;
  }

  /* ── Phase 3: Artisan section single column ── */
  #artisan-spotlight   { padding: 3rem 1.5rem; }
  .artisan-inner       { flex-direction: column; gap: 2.5rem; }
  .artisan-img-col     { width: 100%; max-width: 100%; min-width: unset; aspect-ratio: 16 / 9; }
  .artisan-text-col    { min-width: unset; gap: 1.5rem; }
  .artisan-heading     { font-size: clamp(2.5rem, 8vw, 3.5rem) !important; }

  /* ── Phase 3: Editorial — single column ── */
  .editorial-grid      { grid-template-columns: 1fr !important; gap: 2.5rem; }
  .editorial-float-card{ display: none; }

  /* ── Phase 3: Collection highlight ── */
  .collection-card     { padding: 3rem 2rem !important; max-width: 100%; }
  .collection-card h3  { font-size: clamp(2rem, 7vw, 3.5rem) !important; }
  .collection-card p   { font-size: clamp(0.85rem, 3.5vw, 1rem) !important; }

  /* ── Phase 4: Newsletter — stacked, full-width ── */
  .newsletter-inner    { padding: 4rem 1.5rem !important; }
  .newsletter-heading  { font-size: clamp(2rem, 7vw, 3.2rem) !important; }
  .newsletter-form     { flex-direction: column !important; border: none !important; gap: 0.75rem; }
  .newsletter-input    {
    border: 1px solid rgba(245, 242, 237, 0.2) !important;
    padding: 1rem 1.25rem !important;
    width: 100%;
    font-size: max(16px, 0.95rem) !important;
  }
  .newsletter-submit   { width: 100% !important; padding: 1rem 2rem !important; }

  /* ── Phase 4: Footer — single stacked column, centred ── */
  #footer { padding: 4rem 1.5rem 2rem !important; }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem;
    text-align: center;
  }
  .footer-brand-desc   { max-width: 100%; margin: 0 auto 2rem; }
  .footer-socials      { justify-content: center; }
  .footer-col-list     { align-items: center; }
  .footer-nl-wrap      { max-width: 360px; margin: 0 auto; }
  .footer-bottom       { flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding-top: 2rem; }
  .footer-bottom-left  { justify-content: center; flex-wrap: wrap; }

  /* ── Phase 4: All form inputs full-width + iOS zoom fix ── */
  input[type="email"],
  input[type="text"],
  input[type="password"],
  input[type="search"],
  textarea {
    width: 100% !important;
    font-size: max(16px, 0.9rem) !important;
  }

  /* ── Phase 4: Checkout — single column ── */
  .checkout-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }

  /* ── Search overlay: comfortable on small screens ── */
  #search-overlay      { padding: 2rem 1.25rem; }
  .search-header       { padding: 1.25rem 1.25rem; }
  .search-input        { font-size: clamp(1.6rem, 8vw, 3rem) !important; }
  .search-cat-pill     { font-size: 8.5px; padding: 0.4rem 0.9rem; }
  .search-categories   { gap: 0.5rem; }

  /* ── Testimonials — full-card single view ── */
  .testimonial-card    { flex: 0 0 100% !important; padding: 2.5rem 1.75rem; }

  /* ── Trust band — centred wrap ── */
  .trust-pillars       { gap: 0.75rem 1.5rem; justify-content: center; }
}

/* ── Extra-small phones (<=380px) ───────────────────────────────── */
@media (max-width: 380px) {

  #navbar              { padding: 0 0.75rem !important; }
  .nav-logo            { font-size: 1.2rem !important; }

  .hero-tagline {
    font-size: clamp(1.6rem, 7vw, 2.25rem) !important;
    padding: 0 0.75rem;
  }

  .section-wrap {
    padding-left:  1rem !important;
    padding-right: 1rem !important;
  }

  .product-grid        { gap: 0.6rem 0.5rem !important; }
  .product-card-name   { font-size: 0.75rem !important; line-height: 1.3; }
}


/* ══════════════════════════════════════════════════════════════════
   TARGETED MOBILE NAV & LAYOUT FIX — Screenshot Audit Corrections
══════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Force-hide ALL span text in nav-right on mobile ──────
   Targets: SAVED, BASKET, LOG IN, HELP — keeps badge counts only */
@media (max-width: 900px) {
  /* Nuclear option: hide every text span inside the nav right group */
  .nav-wish-btn > span.nav-label,
  .nav-cart-btn > span.nav-label {
    display: none !important;
    width: 0 !important;
    overflow: hidden !important;
  }
  /* Also handle any data-en span labels inside nav-right */
  .nav-right .nav-label,
  .nav-right [data-en] {
    display: none !important;
  }
}

/* ── FIX 2: Navbar overflow — prevent "BAS" cutoff ──────────────
   Shrink logo + tighten layout so all icons fit on one row       */
@media (max-width: 768px) {
  #navbar {
    padding: 0 1rem !important;
    overflow: visible;
  }

  /* Logo: fluid size that shrinks gracefully */
  .nav-logo {
    font-size: clamp(0.95rem, 4.5vw, 1.4rem) !important;
    letter-spacing: -0.02em;
    white-space: nowrap;
    flex-shrink: 1;
  }

  /* Left side: less gap so logo doesn't push right icons off */
  .nav-left {
    gap: 0.6rem;
    flex-shrink: 0;
  }

  /* Right side: icons only, tight spacing */
  .nav-right {
    gap: 0.15rem !important;
    flex-shrink: 0;
  }

  /* Make icon buttons smaller touch targets (still >= 40px) */
  .nav-wish-btn,
  .nav-cart-btn {
    padding: 0.4rem !important;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Icons: consistent 22px */
  .nav-wish-btn svg,
  .nav-cart-btn svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
  }

  /* Hamburger: tighter */
  .nav-hamburger {
    width: 40px;
    min-height: 40px;
  }
}

/* ── FIX 2b: Extra small phones (<=400px) — maximum compression ── */
@media (max-width: 400px) {
  #navbar {
    padding: 0 0.75rem !important;
  }
  .nav-logo {
    font-size: clamp(0.85rem, 4vw, 1.1rem) !important;
    letter-spacing: -0.04em;
  }
  .nav-left {
    gap: 0.5rem;
  }
  .nav-right {
    gap: 0.1rem !important;
  }
  .nav-wish-btn,
  .nav-cart-btn {
    padding: 0.35rem !important;
    min-width: 36px;
    min-height: 36px;
  }
  .nav-wish-btn svg,
  .nav-cart-btn svg {
    width: 20px !important;
    height: 20px !important;
  }
  .nav-hamburger {
    width: 36px;
    min-height: 36px;
  }
  .nav-hamburger span {
    width: 17px;
  }
}

/* ── FIX 3: Lookbook — full-width image on mobile ────────────────
   Prevent horizontal clipping and ensure hotspots don't overflow  */
@media (max-width: 768px) {
  #lookbook {
    overflow: hidden;
    width: 100%;
  }

  /* Switch to a square-ish ratio so image isn't distorted */
  .lookbook-img-wrap {
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 2px;
    overflow: hidden;
  }

  .lookbook-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Hotspot dots: keep visible but constrain tooltip size */
  .hotspot-dot::before {
    width: 14px;
    height: 14px;
  }

  /* Tooltips: force small and contained */
  .hotspot-tooltip {
    width: 150px !important;
    padding: 0.6rem !important;
    font-size: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(100% + 0.35rem) !important;
    right: auto !important;
  }

  .hotspot-tooltip-title {
    font-size: 8px !important;
  }
  .hotspot-tooltip-price {
    font-size: 0.8rem !important;
  }
  .hotspot-add-btn {
    padding: 0.4rem !important;
    font-size: 7.5px !important;
  }
}

/* ── FIX 4: Menu overlay — fill screen, no dead space ───────────── */
@media (max-width: 768px) {
  #menu-overlay {
    /* Ensure it fills the full viewport */
    position: fixed;
    inset: 0;
  }

  .menu-left {
    width: 100%;
    padding: 4.5rem 1.75rem 2rem !important;
    justify-content: flex-start;
    overflow-y: auto;
  }

  /* Menu items: large and tappable */
  .menu-item {
    padding: 0.5rem 0;
    min-height: 44px;
    align-items: center;
  }
  .menu-item-label {
    font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
  }
  .menu-item-num {
    font-size: 11px;
    opacity: 0.3;
  }

  /* Sub-grid: single column on very small phones */
  .menu-sub-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }

  /* Sub-list items: readable size */
  .menu-sub-list li {
    font-size: 0.95rem;
    padding: 0.45rem 0;
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  /* Close button: top-right, easy to tap */
  .menu-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .menu-left {
    padding: 4rem 1.25rem 2rem !important;
  }
  .menu-item-label {
    font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important;
  }
  .menu-sub-grid {
    gap: 1rem;
  }
  .menu-sub-list li {
    font-size: 0.875rem;
  }
}


/* ══════════════════════════════════════════════════════════════════
   MOBILE HERO REDESIGN — Premium Centered Layout
   Targets: phones ≤ 768px
══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Hero: full screen with a warmer, layered overlay ── */
  #hero {
    min-height: 100svh;
    position: relative;
  }

  /* Richer gradient overlay: dark at top/bottom, open in middle */
  .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.20) 35%,
      rgba(0, 0, 0, 0.20) 60%,
      rgba(0, 0, 0, 0.65) 100%
    ) !important;
  }

  /* ── Hero center: push content to upper-center area ── */
  .hero-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1.5rem;
    padding-top: 4rem;      /* below navbar */
    padding-bottom: 12rem;  /* above buttons */
  }

  /* ── Hero tagline: large, italic, centered ── */
  .hero-tagline {
    font-size: clamp(2.2rem, 9vw, 3.4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
    text-align: center;
    padding: 0 !important;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
    margin-bottom: 0;
  }

  /* ── Decorative divider line under heading ── */
  .hero-tagline::after {
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    margin: 1.25rem auto 0;
  }

  /* ── Hero subtitle: clear and legible ── */
  .hero-center p,
  .hero-sub {
    font-size: clamp(0.85rem, 3.5vw, 1rem) !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-align: center;
    padding: 0 0.5rem !important;
    max-width: 340px !important;
    margin: 1.25rem auto 0 !important;
    font-weight: 300;
    letter-spacing: 0.01em;
  }

  /* ── Hero CTAs: moved up — clear of dots and scroll label ── */
  .hero-links {
    position: absolute;
    bottom: 9rem;
    left: 0;
    right: 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.75rem;
  }

  /* Both buttons: full-width base */
  .hero-link {
    width: 100%;
    max-width: 300px;
    text-align: center;
    justify-content: center;
    min-height: 48px;
    font-size: 10px !important;
    letter-spacing: 0.22em;
    font-weight: 700;
    border-radius: 1px;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    display: flex;
    align-items: center;
  }

  /* Primary CTA: solid warm fill */
  .hero-link:first-child,
  .hero-link.active {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1C1917 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    font-weight: 700;
  }
  .hero-link:first-child:hover {
    background: var(--clay) !important;
    border-color: var(--clay) !important;
    color: #fff !important;
  }

  /* Secondary CTA: ghost outline */
  .hero-link:last-child {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.40) !important;
    font-weight: 500;
  }
  .hero-link:last-child:hover {
    border-color: rgba(255, 255, 255, 0.9) !important;
    color: #fff !important;
  }

  /* ── Slide dots: sit between buttons and scroll label ── */
  .hero-slide-dots {
    bottom: 4.5rem;
    z-index: 12;
  }

  /* ── Scroll indicator: visible at very bottom, clear of dots ── */
  .hero-scroll {
    display: flex !important;
    bottom: 1rem;
    z-index: 12;
    opacity: 0.55;
  }
  .hero-scroll span {
    font-size: 7px;
    letter-spacing: 0.3em;
  }
  .hero-scroll-line {
    height: 24px; /* shorter line on mobile */
  }
}

/* ── Extra fine-tuning for very small phones ─────────────────── */
@media (max-width: 400px) {
  .hero-center {
    padding-top: 3.5rem;
    padding-bottom: 11rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .hero-tagline {
    font-size: clamp(1.9rem, 8vw, 2.8rem) !important;
  }
  .hero-links {
    bottom: 8rem;   /* slightly less than 768px to account for smaller screen */
    padding: 0 1.25rem;
  }
  .hero-link {
    max-width: 100%;
    font-size: 9px !important;
    min-height: 44px;
  }
}


/* ══════════════════════════════════════════════════════════════════
   PRODUCT CARD META REDESIGN
   Hide category label, enlarge name, add visible Add to Cart CTA
══════════════════════════════════════════════════════════════════ */

/* Hide the category label — clean up card meta */
.product-card-cat {
  display: none !important;
}

/* Product name: bigger, bolder, more readable */
.product-card-name {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.2rem) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.4rem !important;
}

/* Price: slightly bolder */
.product-card-price {
  font-size: clamp(0.85rem, 1vw, 1rem) !important;
  font-weight: 500 !important;
  color: var(--clay) !important;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem !important;
}

/* Card meta: left-align for better readability */
.product-card-meta {
  text-align: left !important;
  padding: 0 0.25rem;
}

/* ── Add to Cart button below price — always visible ── */
/* Inject using the card-meta as container via CSS sibling trick */
/* We show it via the quick-btn, but also add a persistent inline CTA */
.product-card-meta .product-card-add {
  display: block;
  width: 100%;
  padding: 0.65rem 1rem;
  margin-top: 0.5rem;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  transition: background 0.3s var(--ease);
  min-height: 40px;
}
.product-card-meta .product-card-add:hover {
  background: var(--clay);
}

/* Mobile: ensure name stays readable on 2-col grid */
@media (max-width: 768px) {
  .product-card-name {
    font-size: clamp(0.9rem, 3.5vw, 1.05rem) !important;
    margin-bottom: 0.3rem !important;
  }
  .product-card-price {
    font-size: 0.85rem !important;
    margin-bottom: 0.6rem !important;
  }
  .product-card-meta {
    padding: 0;
  }
  .product-card-meta .product-card-add {
    font-size: 8.5px;
    padding: 0.6rem 0.75rem;
    min-height: 38px;
  }
}

@media (max-width: 400px) {
  .product-card-name {
    font-size: 0.85rem !important;
  }
  .product-card-price {
    font-size: 0.8rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   MOBILE PRODUCT GRID — Symmetric 2-column layout
   Ensures equal padding both sides so grid is perfectly centred
══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Grid: 2 equal columns, fills full container width */
  .product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem 1rem !important;   /* row-gap col-gap — equal both sides */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Section wrapper: symmetric equal padding both sides */
  #page-shop .section-wrap,
  #page-home .section-wrap,
  #page-newarrivals .section-wrap,
  #page-bestsellers .section-wrap,
  #page-limited .section-wrap {
    padding-left:  1rem !important;
    padding-right: 1rem !important;
  }

  /* Product card: fill its grid cell fully */
  .product-card {
    width: 100% !important;
    min-width: 0;           /* prevent overflow in narrow columns */
  }

  /* Product card image: fixed aspect, fills column */
  .product-card-img-wrap {
    width: 100% !important;
    aspect-ratio: 3 / 4;
  }

  /* Card name: wrap cleanly, no overflow */
  .product-card-name {
    white-space: normal;
    word-break: break-word;
    font-size: clamp(0.82rem, 3vw, 1rem) !important;
  }

  /* Price: same size both cards */
  .product-card-price {
    font-size: 0.82rem !important;
  }

  /* Add to Cart: full width within card, same height both sides */
  .product-card-add {
    width: 100% !important;
    font-size: 8px !important;
    padding: 0.6rem 0.5rem !important;
    letter-spacing: 0.15em !important;
  }
}

/* Extra small phones — keep 2-col but tighter padding */
@media (max-width: 400px) {
  .product-grid {
    gap: 0.85rem 0.65rem !important;
  }
  #page-shop .section-wrap,
  #page-home .section-wrap,
  #page-newarrivals .section-wrap,
  #page-bestsellers .section-wrap,
  #page-limited .section-wrap {
    padding-left:  0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .product-card-name {
    font-size: 0.78rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   MOBILE PRODUCT GRID — Zara Home-style edge-filling layout
   Near-zero column gap, minimal side padding, larger text
══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Grid: edge-filling with tiny column gap ── */
  .product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px 6px !important;   /* tight uniform gap like Zara Home */
    width: 100%;
    padding: 0 !important;     /* no extra padding on the grid itself */
    margin: 0 !important;
  }

  /* ── Section wrap: minimal side padding so grid is near full-width ── */
  #page-shop .section-wrap,
  #page-home .section-wrap,
  #page-newarrivals .section-wrap,
  #page-bestsellers .section-wrap,
  #page-limited .section-wrap {
    padding-left:  8px !important;
    padding-right: 8px !important;
  }

  /* ── Product card: fills column completely ── */
  .product-card {
    width: 100% !important;
    min-width: 0;
  }

  /* ── Image wrapper: fills full column width, square-ish ratio ── */
  .product-card-img-wrap {
    width: 100% !important;
    aspect-ratio: 4 / 5 !important; /* taller than wide — premium feel */
    margin-bottom: 0.6rem !important;
  }

  /* ── Card meta: left-aligned text below image ── */
  .product-card-meta {
    text-align: left !important;
    padding: 0 0.25rem 0.5rem !important;
  }

  /* ── Product name: large, clear, serif ── */
  .product-card-name {
    font-family: var(--font-serif) !important;
    font-size: clamp(0.9rem, 3.8vw, 1.05rem) !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    color: var(--ink) !important;
    margin-bottom: 0.35rem !important;
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── Price: bold, warm clay, visible ── */
  .product-card-price {
    font-size: clamp(0.88rem, 3.5vw, 1rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: var(--clay) !important;
    margin-bottom: 0.5rem !important;
  }

  /* ── Add to Cart: compact, full-width ── */
  .product-card-add {
    width: 100% !important;
    padding: 0.55rem 0.5rem !important;
    font-size: 8px !important;
    letter-spacing: 0.18em !important;
    min-height: 36px !important;
  }

  /* ── Wishlist button: always visible on mobile ── */
  .wish-btn {
    opacity: 1 !important;
    right: 0.5rem !important;
    top: 0.5rem !important;
  }
}

/* ── Very small phones ── */
@media (max-width: 400px) {
  .product-grid {
    gap: 4px 4px !important;
  }
  #page-shop .section-wrap,
  #page-home .section-wrap,
  #page-newarrivals .section-wrap,
  #page-bestsellers .section-wrap,
  #page-limited .section-wrap {
    padding-left:  6px !important;
    padding-right: 6px !important;
  }
  .product-card-name {
    font-size: 0.85rem !important;
  }
  .product-card-price {
    font-size: 0.85rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   CURATED FOR YOU SECTION — Bigger text on mobile
══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Curated marquee item: wider card */
  .marquee-item {
    width: clamp(160px, 42vw, 200px) !important;
  }

  /* Curated image: taller for impact */
  .curated-img {
    height: clamp(180px, 48vw, 220px) !important;
    width: 100% !important;
  }

  /* Curated product name: readable size */
  .curated-name {
    font-size: clamp(0.85rem, 3.5vw, 1rem) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin-top: 0.6rem !important;
    white-space: normal !important;
    word-break: break-word;
  }

  /* Curated price: clear & visible */
  .curated-price {
    font-size: clamp(0.8rem, 3vw, 0.95rem) !important;
    font-weight: 600 !important;
    color: var(--clay) !important;
    margin-top: 0.3rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   SHOP PAGE SECTION — replaces hard-coded inline padding
══════════════════════════════════════════════════════════════════ */

.shop-section {
  padding: 6rem 3rem 4rem;
  max-width: var(--max-w);
  margin: 0 auto;
}

@media (max-width: 768px) {
  .shop-section {
    padding: 2rem 8px 3rem !important;
    max-width: 100% !important;
  }
}

@media (max-width: 400px) {
  .shop-section {
    padding: 1.5rem 6px 2rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT CARD NAME & PRICE — absolute override for all grids
   Targets every context: shop, arrivals, bestsellers, limited
══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Name: max specificity override */
  .product-grid .product-card .product-card-name,
  .product-card .product-card-name {
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    font-family: var(--font-serif) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    color: var(--ink) !important;
    margin-bottom: 0.3rem !important;
    white-space: normal !important;
  }

  /* Price: max specificity override */
  .product-grid .product-card .product-card-price,
  .product-card .product-card-price {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--clay) !important;
    letter-spacing: 0.02em !important;
  }

  /* Meta block: left-aligned */
  .product-grid .product-card .product-card-meta,
  .product-card .product-card-meta {
    text-align: left !important;
    padding: 0.5rem 0.3rem 0.4rem !important;
  }
}

@media (max-width: 400px) {
  .product-grid .product-card .product-card-name,
  .product-card .product-card-name {
    font-size: 0.85rem !important;
  }
  .product-grid .product-card .product-card-price,
  .product-card .product-card-price {
    font-size: 0.82rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   CURATED SECTION — stronger selectors for name & price
══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .marquee-item .curated-name,
  .curated-scroll .curated-name,
  .curated-name {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    font-family: var(--font-serif) !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: break-word !important;
    margin-top: 0.6rem !important;
  }

  .marquee-item .curated-price,
  .curated-scroll .curated-price,
  .curated-price {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: var(--clay) !important;
    margin-top: 0.25rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   MOBILE PRODUCT NAME — Larger font for phone readability
══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .product-grid .product-card .product-card-name,
  .product-card .product-card-name {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
  }
  .product-grid .product-card .product-card-price,
  .product-card .product-card-price {
    font-size: 0.95rem !important;
  }
}

@media (max-width: 400px) {
  .product-grid .product-card .product-card-name,
  .product-card .product-card-name {
    font-size: 0.95rem !important;
  }
  .product-grid .product-card .product-card-price,
  .product-card .product-card-price {
    font-size: 0.88rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   LOOKBOOK RESPONSIVE VISIBILITY
══════════════════════════════════════════════════════════════════ */

.lb-desktop {
  display: block;
}
.lb-mobile {
  display: none !important;
}

@media (max-width: 768px) {
  .lb-desktop {
    display: none !important;
  }
  .lb-mobile {
    display: block !important;
  }
}



/* ======================================================================
   BESTSELLERS — UNIFIED SPLIT HERO LAYOUT
====================================================================== */

#bestsellers {
  background: var(--clay-5, #faf8f5);
}

#bestsellers .bestsellers-wrap {
  padding: 0;
  max-width: 100%;
}

/* Hero: text left, image right — fully flush to each other */
.bestsellers-hero {
  display: grid;
  grid-template-columns: 5fr 8fr;
  align-items: stretch;
  min-height: 480px;
}

/* Text panel — same background as section so no isolated block look */
.bestsellers-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 3.5rem 4rem 6rem;
  background: transparent;
}

.bestsellers-sub {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--ink);
  opacity: 0.5;
  line-height: 1.7;
  margin-bottom: 1rem;
  font-family: var(--font-sans);
  font-style: italic;
  max-width: 260px;
}

.bestsellers-title {
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 5.5vw, 6rem);
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
  margin: 0 0 2.5rem;
  letter-spacing: -0.03em;
}

.bestsellers-btn {
  display: inline-block;
  padding: 0.9rem 2.2rem;
  background: #6b7c5c;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.3s ease, transform 0.2s ease;
}

.bestsellers-btn:hover {
  background: #4f5f44;
  transform: translateY(-2px);
}

/* Image panel — fills the full height of the grid row */
.bestsellers-hero-img {
  overflow: hidden;
  position: relative;
  min-height: 480px;
}

.bestsellers-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform 0.7s ease;
}

.bestsellers-hero-img:hover img {
  transform: scale(1.04);
}

/* Thin separator between hero and product grid */
.bestsellers-hero + .product-grid {
  border-top: 1px solid rgba(0,0,0,0.07);
}

/* Product grid — 5 static columns, tight top gap */
#bestsellers .bestsellers-wrap .product-grid {
  padding: 0.5rem 6rem 5rem;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 1.5rem 1.25rem !important;
}

/* ── Tablet ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .bestsellers-hero-text {
    padding: 3rem 2.5rem 3rem 3rem;
  }
  #bestsellers .bestsellers-wrap .product-grid {
    padding: 0.5rem 3rem 5rem;
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bestsellers-hero {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  /* Image first on mobile for visual impact */
  .bestsellers-hero-img {
    order: -1;
    min-height: 52vw;
    max-height: 280px;
  }

  .bestsellers-hero-text {
    padding: 2.5rem 1.25rem 2rem;
    text-align: left;
  }

  .bestsellers-sub {
    max-width: 100%;
    font-size: 0.8rem;
  }

  .bestsellers-title {
    font-size: clamp(2.4rem, 11vw, 3.2rem);
    margin-bottom: 1.8rem;
  }

  .bestsellers-btn {
    width: 100%;
    text-align: center;
    padding: 0.9rem 1rem;
  }

  #bestsellers .bestsellers-wrap .product-grid {
    padding: 0.5rem 0.5rem 3.5rem;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem 0.75rem !important;
  }
}