/* ==========================================================================
   COSMETIC ZONE HUB — design system
   Brand: teal #00A8A8 + navy #1A2B5D, on a cool near-white ground.
   Poppins (display) + Inter (UI), matching the logo's geometric sans.

   The neutral token names below are historical; they are the single place the
   palette is defined, so recolouring the whole store happens here.
   ========================================================================== */

:root{
  /* ---- Brand ---- */
  --teal:#00A8A8;
  --teal-dark:#008587;
  --teal-soft:#E4F6F6;
  --navy:#1A2B5D;
  --navy-light:#2E4179;
  --navy-deep:#122043;

  /* ---- Surfaces & text (names kept so existing rules recolour in place) ---- */
  --ivory:#F7FBFB;        /* page background */
  --nude:#E9F6F6;         /* tinted surface / cards */
  --nude-deep:#D5EDEE;
  --beige:#A6CFD2;
  --champagne:#00A8A8;    /* accent — now teal */
  --champagne-soft:#4CC4C4;
  --ink:#1A2B5D;          /* headings — navy */
  --ink-soft:#3F4F79;     /* body copy */
  --muted:#7A88A6;
  --line:#DCE7EC;
  --white:#FFFFFF;
  --sale:#E1494F;

  --font-display:'Poppins', 'Segoe UI', -apple-system, sans-serif;
  --font-ui:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container:1360px;
  --container-narrow:1080px;
  --gutter:clamp(18px, 4vw, 56px);
  --header-h:76px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.45s;

  /* ---- Header / hero accents, mapped onto the brand pair ---- */
  --pop-turquoise:#00A8A8;
  --pop-turquoise-dark:#008587;
  --pop-yellow:#00A8A8;   /* the Menu pill — teal, not yellow */
  --pop-pink:#1A2B5D;
  --pop-purple:#1A2B5D;   /* hover accent — navy */
  --pop-cyan-soft:#E4F6F6;
  --pop-pink-soft:#EEF4F8;
  --pop-mint-soft:#F0FAFA;

  --font-pop:'Poppins', 'Segoe UI', sans-serif;
  --font-pop-ui:'Inter', -apple-system, 'Segoe UI', sans-serif;

  --nav-max:1250px;
  --hero-max:1640px;
  --r-nav:34px;
  --r-hero:28px;
  --r-pill:999px;

  --shadow-nav:0 10px 34px rgba(26,43,93,.12), 0 2px 8px rgba(26,43,93,.06);
  --shadow-pop:0 6px 18px rgba(26,43,93,.18);
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink-soft);
  font-family:var(--font-ui);
  font-size:15.5px;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}

/* Poppins sets much larger on the body than the serif this replaced, so the
   scale is pulled down to keep the same optical heading size. */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--ink);
  margin:0 0 .45em;
  line-height:1.16;
  letter-spacing:-.02em;
}
h1{font-size:clamp(32px,4.4vw,56px);}
h2{font-size:clamp(26px,3.2vw,40px);}
h3{font-size:clamp(18px,1.9vw,23px);}
h4{font-size:clamp(16px,1.5vw,18px);}
p{margin:0 0 1.2em;}

.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter);}
.container--narrow{max-width:var(--container-narrow);}
/* One spacing step for every band, so the page has a steady rhythm instead of
   120px canyons between sections. */
.section{padding:30px 0;}
.section--tight{padding:34px 0;}
/* Tinted bands all use the same token — three near-identical blues read as a
   mistake rather than a system. */
.section--nude{background:var(--nude);}
.section--ink{background:var(--ink);color:var(--beige);}
.section--ink h2,.section--ink h3{color:var(--white);}

/* --- eyebrow / heading cluster --- */
.eyebrow{
  display:block;
  font-size:11px;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--champagne);
  margin-bottom:14px;
}
.section-head{margin-bottom:clamp(28px,4vw,56px);}
.section-head--center{text-align:center;max-width:620px;margin-inline:auto;}
.section-head p{color:var(--muted);margin:0;max-width:52ch;}
.section-head--center p{margin-inline:auto;}
.section-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}

/* --- buttons --- */
.btn{
  --btn-bg:var(--ink);
  --btn-fg:var(--white);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 34px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:11.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--btn-bg);
  overflow:hidden;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space:nowrap;
}
.btn::after{
  content:"";position:absolute;inset:0;background:var(--white);
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur) var(--ease);z-index:0;
}
.btn > *{position:relative;z-index:1;}
.btn:hover{color:var(--ink);}
.btn:hover::after{transform:scaleX(1);transform-origin:left;}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);border-color:var(--ink);}
.btn--ghost::after{background:var(--ink);}
.btn--ghost:hover{color:var(--white);}

/* Buy Now reads as an urgent, distinct action wherever it appears — the
   product card, the single product page, and the hero product block. */
.btn--ghost.ecrin-buy-now{
  --btn-bg:var(--sale);--btn-fg:#fff;
  border-color:var(--sale);background:var(--sale);color:#fff;
}
.btn--ghost.ecrin-buy-now::after{background:#C93A40;}
.btn--ghost.ecrin-buy-now:hover{border-color:#C93A40;color:#fff;}
.btn--light{--btn-bg:var(--white);--btn-fg:var(--ink);}
.btn--light::after{background:var(--ink);}
.btn--light:hover{color:var(--white);}
.btn--block{width:100%;}
.btn[disabled]{opacity:.55;pointer-events:none;}

.link-underline{
  position:relative;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:4px;color:var(--ink);
}
.link-underline::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(1);transform-origin:right;transition:transform var(--dur) var(--ease);
}
.link-underline:hover::after{transform:scaleX(0);}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--ink);color:#fff;padding:12px 20px;}
.skip-link:focus{left:16px;top:16px;}
:focus-visible{outline:2px solid var(--champagne);outline-offset:3px;}

/* ==========================================================================
   Announcement bar
   ========================================================================== */
/* Pastel marquee. The track holds two identical groups and travels -50%, so the
   second lands exactly where the first started and the loop never jumps. */
.announce{
  position:relative;z-index:340;overflow:hidden;
  background:linear-gradient(90deg,#1a2b5d 0%,#00a8a8 34%,#1a2b5d 68%,#00a8a8 100%);
  font-family:var(--font-pop-ui);
}
.announce__track{
  display:flex;width:max-content;
  animation:ecrin-marquee var(--marquee-speed,22s) linear infinite;
  will-change:transform;
}
.announce:hover .announce__track{animation-play-state:paused;}
.announce__group{display:flex;align-items:center;}
.announce__item{
  display:inline-flex;align-items:center;gap:12px;
  padding:0 26px;height:46px;white-space:nowrap;
}
/* The bar runs dark, so its type and pills invert to white. */
.announce__item::after{
  content:"";width:5px;height:5px;border-radius:50%;
  background:#fff;opacity:.45;margin-left:26px;
}
.announce__text{
  font-size:14px;font-weight:600;color:#fff;letter-spacing:.005em;
}
.announce__btn{
  display:inline-flex;align-items:center;
  background:#fff;color:var(--navy);border-radius:var(--r-pill);
  padding:7px 17px;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.announce__btn:hover{background:var(--navy);color:#fff;transform:translateY(-1px);}
@keyframes ecrin-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ==========================================================================
   Header
   ========================================================================== */
/* Floating glass bar that overlaps the hero. The header itself is a transparent
   positioning layer; the visible pill is .header__bar. */
.site-header{
  position:sticky;top:0;z-index:330;
  background:transparent;
  padding:14px var(--gutter) 0;
  margin-bottom:-38px; /* lets the bar sit over the top of the hero */
  transition:transform .4s var(--ease);
  pointer-events:none;
}
.site-header > *{pointer-events:auto;}
.site-header.is-hidden{transform:translateY(calc(-100% - 14px));}

.header__bar{
  max-width:var(--nav-max);margin:0 auto;
  min-height:72px;
  display:flex;align-items:center;gap:16px;
  padding:0 14px 0 22px;
  border-radius:var(--r-nav);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--shadow-nav);
  backdrop-filter:saturate(1.6) blur(16px);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck .header__bar{
  background:rgba(255,255,255,.93);
  box-shadow:0 12px 40px rgba(23,21,20,.14);
}

.brand{
  font-family:var(--font-pop);font-size:19px;font-weight:700;
  letter-spacing:-.01em;color:var(--ink);
  line-height:1.05;flex:0 0 auto;display:inline-flex;align-items:center;
}
.brand--logo{line-height:0;}
.brand img,
.brand .custom-logo-link{display:block;}
.brand img{max-height:46px;width:auto;height:auto;}
.brand small{display:block;font-family:var(--font-pop-ui);font-size:9px;letter-spacing:.1em;color:var(--teal-dark);margin-top:2px;font-weight:600;text-transform:none;}

/* Yellow pill that opens the full menu panel. */
.menu-pill{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 18px;border:none;border-radius:var(--r-pill);
  background:var(--teal);color:#fff;cursor:pointer;
  font-family:var(--font-pop-ui);font-size:13.5px;font-weight:600;
  box-shadow:0 3px 0 rgba(26,43,93,.14);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
}
.menu-pill svg{width:17px;height:17px;stroke-width:2.2;}
.menu-pill:hover{background:var(--navy);transform:translateY(-2px);box-shadow:0 6px 16px rgba(26,43,93,.34);}
.menu-pill:active{transform:translateY(0);}

.nav{display:flex;align-items:center;flex:1 1 auto;min-width:0;justify-content:center;}
.nav__list{
  display:flex;align-items:center;gap:0;
  list-style:none;margin:0;padding:0;
}
/* Never let an item shrink below its text — overlapping labels look broken.
   When space runs out, whole items are hidden by the breakpoints instead. */
.nav__list > li{list-style:none;margin:0;flex:0 0 auto;}
.nav__list > li > a{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-pop-ui);font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  text-transform:none;color:#25303A;
  padding:9px 8px;border-radius:var(--r-pill);white-space:nowrap;
  transition:color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.nav__list > li > a svg{width:15px;height:15px;stroke-width:1.9;color:var(--pop-turquoise-dark);flex:0 0 auto;transition:transform .25s var(--ease);}
.nav__list > li > a:hover{color:var(--pop-purple);background:rgba(123,92,255,.09);transform:translateY(-1px);}
.nav__list > li > a:hover svg{transform:scale(1.14) rotate(-4deg);}
.nav__list > li.current-menu-item > a{color:var(--pop-turquoise-dark);background:rgba(47,198,201,.12);}

.header__actions{display:flex;align-items:center;justify-content:flex-end;gap:2px;flex:0 0 auto;margin-left:auto;}
.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;color:#25303A;
  transition:color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.icon-btn svg{width:21px;height:21px;stroke-width:1.7;}
.icon-btn:hover{color:var(--pop-purple);background:rgba(123,92,255,.10);transform:translateY(-1px);}
.icon-btn__count{
  position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;
  background:var(--muted);color:#fff;border-radius:99px;
  font-family:var(--font-pop-ui);font-size:10px;font-weight:700;letter-spacing:0;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}
/* Red + gently pulsing only when the bag actually has something in it. */
.icon-btn__count.is-filled{background:#F0353B;animation:ecrin-badge-pulse 2.4s var(--ease) infinite;}
@keyframes ecrin-badge-pulse{
  0%,72%,100%{transform:scale(1);}
  80%{transform:scale(1.18);}
  88%{transform:scale(.96);}
}

.burger{display:none;flex-direction:column;gap:5px;width:24px;background:none;border:none;cursor:pointer;padding:8px 0;}
.burger span{height:2px;width:100%;background:#25303A;border-radius:2px;transition:transform .3s var(--ease),opacity .3s;}

/* --- mega menu --- */
.has-mega{position:static;}
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--white);border-top:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(23,21,20,.22);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  z-index:310;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0);}
.mega__inner{display:grid;grid-template-columns:repeat(4,1fr) 1.15fr;gap:40px;padding:44px 0 52px;}
.mega__col h4{font-family:var(--font-ui);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne);margin-bottom:16px;}
.mega__col li + li{margin-top:11px;}
.mega__col a{font-size:14px;color:var(--ink-soft);transition:color .25s var(--ease),padding-left .25s var(--ease);display:inline-block;}
.mega__col a:hover{color:var(--ink);padding-left:5px;}
.mega__promo{position:relative;overflow:hidden;background:var(--nude);aspect-ratio:4/3;}
.mega__promo img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);}
.mega__promo:hover img{transform:scale(1.05);}
.mega__promo figcaption{position:absolute;left:22px;bottom:20px;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.4);}
.mega__promo figcaption strong{display:block;font-family:var(--font-display);font-size:22px;font-weight:400;}

/* --- menu / mobile drawer --- */
.mobile-nav{
  position:fixed;inset:0 auto 0 0;width:min(90vw,400px);
  background:linear-gradient(170deg,var(--pop-cyan-soft) 0%,#fff 38%);
  transform:translateX(-100%);transition:transform .5s var(--ease);
  z-index:420;display:flex;flex-direction:column;padding:22px var(--gutter) 40px;overflow-y:auto;
  font-family:var(--font-pop-ui);
}
.mobile-nav.is-open{transform:none;}
.mobile-nav__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}

.menu-panel__group + .menu-panel__group{margin-top:26px;}
.menu-panel h3{
  font-family:var(--font-pop);font-size:15px;font-weight:600;color:var(--pop-turquoise-dark);
  letter-spacing:.04em;margin:0 0 12px;
}
.menu-panel__cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.menu-panel__cats a{
  display:flex;align-items:center;gap:10px;padding:8px;border-radius:16px;
  background:#fff;box-shadow:0 2px 8px rgba(23,21,20,.06);
  font-size:13px;font-weight:600;color:#25303A;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.menu-panel__cats a:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(23,21,20,.12);}
.menu-panel__cats img{width:38px;height:38px;border-radius:12px;object-fit:cover;background:var(--pop-cyan-soft);flex:0 0 auto;}
.menu-panel__cats span{line-height:1.25;}

.menu-panel__links{list-style:none;margin:0;padding:0;}
.menu-panel__links a{
  display:flex;align-items:center;gap:10px;padding:12px 2px;
  border-bottom:1px solid rgba(23,21,20,.08);
  font-size:14px;font-weight:600;color:#25303A;
  transition:color .25s var(--ease),padding-left .25s var(--ease);
}
.menu-panel__links a svg{width:17px;height:17px;color:var(--pop-turquoise-dark);}
.menu-panel__links a:hover{color:var(--pop-purple);padding-left:6px;}

.overlay{position:fixed;inset:0;background:rgba(23,21,20,.42);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;z-index:400;}
.overlay.is-open{opacity:1;visibility:visible;}
body.is-locked{overflow:hidden;}

/* ==========================================================================
   Search
   ========================================================================== */
.search-panel{
  position:fixed;inset:0 0 auto 0;background:var(--ivory);z-index:430;
  padding:clamp(24px,5vw,60px) 0 36px;
  transform:translateY(-100%);transition:transform .5s var(--ease);
  box-shadow:0 30px 60px -40px rgba(23,21,20,.4);
}
.search-panel.is-open{transform:none;}
.search-panel form{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--ink);padding-bottom:14px;}
.search-panel input[type=search]{
  flex:1;border:none;background:none;font-family:var(--font-display);font-size:clamp(22px,3.4vw,36px);
  padding:6px 0;outline:none;color:var(--ink);
}
.search-panel input::placeholder{color:var(--beige);}
.search-results{margin-top:26px;max-height:56vh;overflow-y:auto;}
.search-results__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;}
.search-result{display:flex;gap:14px;align-items:center;}
.search-result img{width:64px;height:64px;object-fit:cover;background:var(--nude);}
.search-result__name{font-size:13px;color:var(--ink);line-height:1.35;display:block;}
.search-result__price{font-size:12.5px;color:var(--champagne);}
.search-empty,.search-hint{color:var(--muted);font-size:13px;}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Pastel field the floating nav and rounded slider sit on. */
.hero-wrap{
  position:relative;
  padding:0 var(--gutter) 0;
  background:linear-gradient(180deg,var(--pop-cyan-soft) 0%,var(--pop-mint-soft) 46%,var(--ivory) 100%);
}

/* --- Banner slider: the artwork is the slide ------------------------------ */
.hero--banners{
  position:relative;
  /* width:100% is load-bearing: with only a max-width, aspect-ratio plus
     min-height lets the browser derive the *width* from the height and the
     slider grows past the viewport. A definite width makes aspect-ratio
     affect height only. */
  width:100%;
  max-width:var(--hero-max);margin:30px auto 0;
  border-radius:var(--r-hero);overflow:hidden;
  background:var(--pop-cyan-soft);
  box-shadow:0 18px 50px -24px rgba(23,21,20,.35);
  /* Reserves the slide height before the image decodes, so nothing jumps.
     Matches the 16:9 the campaign banners are actually supplied at (2560x1429
     ≈ 1.79:1) — the previous 21:10 (2.1:1) was noticeably wider than that,
     so `cover` was cropping a real slice off the top and bottom of every
     banner regardless of content (clipping logos, headlines and the footer
     URL line). At 16:9 the crop is close to zero up to ~1460px wide. */
  aspect-ratio:16/9;
  min-height:480px;
  max-height:820px;
}
.hero--banners .hero__slides{position:absolute;inset:0;}
/* .is-active is also matched by the split-panel rule further down at equal
   specificity, so these carry the extra class to stay ahead of it. */
.hero--banners .hero__slide,
.hero--banners .hero__slide.is-active{
  position:absolute;inset:0;display:block;min-height:0;
  transition:opacity .7s var(--ease),transform .9s var(--ease),visibility .7s;
}
.hero--banners .hero__slide{opacity:0;visibility:hidden;transform:scale(1.015);}
.hero--banners .hero__slide.is-active{opacity:1;visibility:visible;transform:none;}
.hero__banner,
.hero__banner-link{display:block;width:100%;height:100%;}
/* Centred: at the corrected 16:9 ratio there's almost no crop to bias in
   either direction, and these banners carry important content at BOTH the
   top edge (logo/headline) and bottom edge (URL/contact strip), so favouring
   one over the other just clips the other one instead. */
.hero__banner img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;}

/* Optional caption, only rendered when a slide actually has copy. A scrim sits
   behind it so the text stays legible whatever the artwork happens to be. */
.hero__slide--banner.has-caption::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,16,22,.62) 0%,rgba(12,16,22,.34) 38%,rgba(12,16,22,0) 68%);
}
.hero__caption{
  position:absolute;z-index:2;
  left:clamp(22px,4vw,64px);bottom:clamp(54px,7vw,84px);
  max-width:min(520px,72%);color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.42);
  font-family:var(--font-pop-ui);
}
.hero__caption h1{
  font-family:var(--font-pop);font-weight:700;color:#fff;
  font-size:clamp(28px,4vw,54px);line-height:1.05;margin-bottom:10px;
}
.hero__caption p{font-size:clamp(14px,1.3vw,17px);font-weight:500;margin-bottom:18px;}
.btn--pop{
  background:var(--teal);border-color:var(--teal);color:#fff;
  border-radius:var(--r-pill);font-family:var(--font-pop-ui);font-weight:600;
  letter-spacing:.04em;text-transform:none;font-size:14px;padding:13px 26px;
  box-shadow:var(--shadow-pop);
}
.btn--pop:hover{background:#fff;border-color:#fff;color:var(--navy);transform:translateY(-2px);}

/* Split panel: copy on a solid ground, photography beside it. Product packshots
   are shot on light backgrounds, so text is never laid over the image. */
.hero{position:relative;background:var(--ivory);overflow:hidden;}
.hero__slides{position:relative;}
.hero__slide{
  display:none;
  position:relative;
  grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  align-items:stretch;
  min-height:clamp(460px,72vh,680px);
}
.hero__slide.is-active{display:grid;}

.hero__copy{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:clamp(48px,6vw,84px) clamp(26px,5vw,72px) clamp(48px,6vw,84px) var(--gutter);
  background:var(--ivory);
}
.hero__copy .eyebrow{color:var(--champagne);}
.hero__copy h1{
  color:var(--ink);margin-bottom:18px;
  font-size:clamp(38px,4.4vw,62px);line-height:1.04;letter-spacing:-.015em;
  max-width:15ch;
}
.hero__copy p{color:var(--ink-soft);font-size:16px;line-height:1.7;max-width:46ch;margin-bottom:26px;}
.hero__price{
  font-family:var(--font-display);font-size:30px;color:var(--ink);
  margin:0 0 28px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.hero__price s{color:var(--muted);font-size:.66em;text-decoration-thickness:1px;}
.hero__price em{
  font-family:var(--font-ui);font-style:normal;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sale);border:1px solid currentColor;padding:4px 9px;
}
.hero__ctas{display:flex;gap:14px;flex-wrap:wrap;}

.hero__media{position:relative;background:var(--nude);overflow:hidden;}
.hero__media img{width:100%;height:100%;object-fit:cover;display:block;}

.hero__nav{position:absolute;bottom:28px;right:28px;z-index:3;display:flex;gap:10px;}
.hero__nav button{
  width:44px;height:44px;border:1px solid rgba(23,21,20,.18);background:rgba(255,255,255,.82);
  color:var(--ink);display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease),color .3s var(--ease);backdrop-filter:blur(4px);
}
.hero__nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.hero__dots{position:absolute;bottom:clamp(28px,4vw,46px);left:var(--gutter);z-index:3;display:flex;gap:8px;align-items:center;}
.hero__dots button{width:26px;height:2px;background:rgba(23,21,20,.22);}
.hero__dots button.is-active{background:var(--champagne);}

/* Banner-slider controls: round glass arrows at the sides, pill dots centred. */
.hero--banners .hero__nav{
  position:static;
}
.hero--banners .hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border:none;border-radius:50%;
  background:rgba(255,255,255,.9);color:#25303A;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  /* Ring + drop shadow so the control stays visible on pale artwork. */
  box-shadow:0 0 0 1px rgba(23,21,20,.10), 0 6px 18px rgba(23,21,20,.24);
  backdrop-filter:blur(6px);
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.hero--banners .hero__arrow svg{width:22px;height:22px;stroke-width:2.2;}
.hero--banners [data-hero-prev]{left:clamp(10px,1.6vw,22px);}
.hero--banners [data-hero-next]{right:clamp(10px,1.6vw,22px);}
.hero--banners .hero__arrow:hover{background:var(--pop-purple);color:#fff;transform:translateY(-50%) scale(1.08);}

.hero--banners .hero__dots{
  left:50%;right:auto;bottom:clamp(14px,2vw,22px);
  transform:translateX(-50%);
  display:flex;gap:7px;align-items:center;
  background:rgba(255,255,255,.72);
  padding:8px 12px;border-radius:var(--r-pill);
  backdrop-filter:blur(6px);
}
.hero--banners .hero__dots button{
  width:9px;height:9px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(23,21,20,.26);
  transition:width .35s var(--ease),background .3s var(--ease);
}
.hero--banners .hero__dots button.is-active{width:26px;border-radius:var(--r-pill);background:var(--pop-purple);}

/* ==========================================================================
   Value bar
   ========================================================================== */
.value-bar{padding:26px 0;}
.value-bar__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:#fff;border-radius:22px;
  box-shadow:0 10px 40px rgba(26,43,93,.08);
}
.value-bar__item{
  display:flex;align-items:center;gap:14px;text-align:left;
  padding:22px 22px;
}
.value-bar__item + .value-bar__item{border-left:1px solid var(--line);}
.value-bar__icon{
  flex:0 0 46px;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--vb-bg);color:var(--vb-color);
}
.value-bar__icon svg{width:22px;height:22px;stroke-width:1.6;}
.value-bar__text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.value-bar__text strong{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3;}
.value-bar__text small{font-size:12.5px;color:var(--muted);line-height:1.3;}

/* ==========================================================================
   Category cards
   ========================================================================== */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);}
.cat-card{position:relative;display:block;overflow:hidden;background:var(--nude);aspect-ratio:3/4;}
.cat-card:nth-child(1){grid-row:span 2;aspect-ratio:3/5;}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.cat-card:hover img{transform:scale(1.06);}
.cat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,21,20,0) 42%,rgba(23,21,20,.62) 100%);}
.cat-card__label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px;color:#fff;}
.cat-card__label h3{color:#fff;font-size:clamp(20px,2vw,28px);margin:0 0 4px;}
.cat-card__label span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.85;}
.cat-card__cta{
  display:inline-block;margin-top:12px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:3px;
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.cat-card:hover .cat-card__cta{opacity:1;transform:none;}

/* --------------------------------------------------------------------------
   Category showcase — image card with a white information panel beneath.
   (.cat-card above is still used by the social gallery grid.)
   -------------------------------------------------------------------------- */
/* Flat tint, same token as every other tinted band. The old gradient faded to
   transparent mid-section, which made this band look like a different colour
   from the ones above and below it. */
.catshow{background:var(--nude);}
.catshow__title{position:relative;display:inline-block;}
.catshow__spark{position:absolute;color:var(--champagne-soft);opacity:.55;}
.catshow__spark svg{width:22px;height:22px;}
.catshow__spark--a{top:-14px;left:-34px;transform:rotate(-12deg);}
.catshow__spark--b{bottom:2px;right:-36px;transform:rotate(14deg);}

.catshow__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px);
}

.catcard{
  --accent:var(--teal);
  --accent-soft:#E4F6F6;
  display:flex;flex-direction:column;
  background:var(--accent-soft);
  border-radius:28px;overflow:hidden;
  box-shadow:0 2px 10px rgba(26,43,93,.06);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.catcard--teal{--accent:#00A8A8;--accent-soft:#E4F6F6;}
.catcard--navy{--accent:#1A2B5D;--accent-soft:#EAEFF8;}
.catcard--rose{--accent:#E1496F;--accent-soft:#FDECF1;}

.catcard:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(26,43,93,.14);}

.catcard__media{display:block;aspect-ratio:16/11;overflow:hidden;background:var(--accent-soft);}
.catcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.catcard:hover .catcard__media img{transform:scale(1.05);}

.catcard__panel{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:10px;padding:12px 15px;
  background:#fff;border-radius:16px;
}
.catcard__text{display:block;min-width:0;}
.catcard__name{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(16px,1.4vw,19px);line-height:1.2;color:var(--accent);
}
.catcard__sub{
  display:block;margin-top:2px;font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.catcard__go{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.catcard__go svg{width:19px;height:19px;stroke-width:2.4;transition:transform .28s var(--ease);}
.catcard:hover .catcard__go{box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent);}
.catcard:hover .catcard__go svg{transform:translateX(3px);}

/* ==========================================================================
   Product card
   ========================================================================== */
.product-rail{position:relative;}
.product-rail__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr);
  gap:clamp(14px,1.8vw,28px);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-bottom:6px;
}
.product-rail__track::-webkit-scrollbar{display:none;}
.product-rail__track > *{scroll-snap-align:start;}
.rail-nav{display:flex;gap:8px;}
.rail-nav button{width:40px;height:40px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s;}
.rail-nav button:hover{background:var(--ink);border-color:var(--ink);color:#fff;}

/* minmax(0,1fr) rather than 1fr: a plain 1fr track keeps min-width:auto, so a
   wide child (a long title, a native select) forces the whole grid past its
   container instead of wrapping. */
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,34px) clamp(14px,1.8vw,26px);}

/* WooCommerce emits its own <ul class="products columns-N"> for related
   products, up-sells, cross-sells and the [products] shortcode. Give it the
   same grid so those blocks don't fall back to unstyled list items. */
ul.products{
  display:grid;list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,34px) clamp(14px,1.8vw,26px);
}
ul.products::before,ul.products::after{content:none;display:none;}
ul.products > li.product{list-style:none;margin:0;width:auto;float:none;clear:none;}
ul.products.columns-1{grid-template-columns:1fr;}
ul.products.columns-2{grid-template-columns:repeat(2,minmax(0,1fr));}
ul.products.columns-3{grid-template-columns:repeat(3,minmax(0,1fr));}
ul.products.columns-5{grid-template-columns:repeat(5,minmax(0,1fr));}
ul.products.columns-6{grid-template-columns:repeat(6,minmax(0,1fr));}

/* Card is a white panel so the Add to Cart button has something to sit on. */
.pcard{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 1px 3px rgba(26,43,93,.04);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s;
}
.pcard:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(26,43,93,.13);border-color:transparent;}
.pcard__media{position:relative;display:block;overflow:hidden;background:var(--nude);aspect-ratio:1/1;}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease),transform 1.2s var(--ease);}
.pcard__media .pcard__img--hover{position:absolute;inset:0;opacity:0;}
.pcard:hover .pcard__img--hover{opacity:1;}
.pcard:hover .pcard__img--main{transform:scale(1.04);}
.pcard__badges{position:absolute;top:12px;left:12px;z-index:3;display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.badge{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 10px;background:var(--white);color:var(--ink);
}
.badge--sale{background:var(--ink);color:#fff;}
.badge--gift{background:var(--champagne);color:#fff;}
.badge--new{background:var(--white);color:var(--ink);}
/* Always visible — a hover-only wishlist is unreachable on touch. */
.pcard__wish{
  position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.94);color:var(--ink);
  box-shadow:0 2px 8px rgba(26,43,93,.12);
  transition:transform .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.pcard__wish:hover{background:#fff;color:var(--sale);transform:scale(1.08);}
.pcard__wish.is-active{color:var(--sale);}
.pcard__wish.is-active svg{fill:currentColor;}
/* Actions are always visible — Quick View + Buy Now on one row, Add to Cart
   full width beneath. Hover-only controls hide the main CTA on touch. */
.pcard__row{display:flex;gap:7px;margin-bottom:8px;}
/* Buy Now is the wide primary action; quick view is the compact green square. */
.pcard__buynow{
  position:relative;overflow:hidden;
  flex:1;min-width:0;height:42px;border-radius:12px;
  background:linear-gradient(135deg,#FF7A7F 0%,var(--sale) 55%,#B5343A 100%);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--font-ui);font-size:12.5px;font-weight:600;white-space:nowrap;
  box-shadow:0 5px 14px rgba(225,73,79,.3);
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.pcard__buynow svg{width:16px;height:16px;flex:0 0 16px;position:relative;z-index:1;}
.pcard__buynow span{position:relative;z-index:1;}
.pcard__buynow::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-120%);pointer-events:none;
}
.pcard__buynow:hover{background:linear-gradient(135deg,var(--sale) 0%,#9A2B30 100%);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(154,43,48,.4);}
.pcard__buynow:hover::before{transform:translateX(120%);transition:transform .7s var(--ease);}
.pcard__qv{
  flex:0 0 46px;width:46px;height:42px;border-radius:12px;
  background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.pcard__qv svg{width:18px;height:18px;}
.pcard__qv:hover{background:var(--teal-dark);color:#fff;transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,168,168,.4);}

.pcard__body{padding:16px 16px 18px;text-align:left;display:flex;flex-direction:column;flex:1;}
.pcard__cat{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-dark);display:block;margin-bottom:7px;}
.pcard__title{font-family:var(--font-ui);font-size:14px;font-weight:500;line-height:1.45;color:var(--ink);margin:0 0 8px;}
.pcard__title a:hover{color:var(--champagne);}
.pcard__rating{display:flex;align-items:center;gap:7px;margin-bottom:8px;}
.pcard__price{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.pcard__price del{color:var(--muted);font-size:.78em;font-weight:500;}
.pcard__price ins{text-decoration:none;}
.pcard__discount{font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--sale);}

/* Add to Cart — pinned to the bottom so every card in a row lines up. */
.pcard__buy{margin-top:auto;padding-top:14px;}
/* Extra .pcard qualifier so this beats the generic `.woocommerce .button`
   rule further down the sheet, which would otherwise repaint it navy and
   re-apply uppercase letter-spacing. */
.pcard .pcard__buy .button,
.pcard .pcard__buy a.button,
.pcard .pcard__buy .added_to_cart{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px 14px;border:none;border-radius:12px;
  background:linear-gradient(135deg,var(--navy-light) 0%,var(--navy) 100%);color:#fff;
  font-family:var(--font-ui);font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;line-height:1.2;
  box-shadow:0 5px 14px rgba(26,43,93,.28);
  transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.pcard .pcard__buy .button::before{
  content:"";width:17px;height:17px;flex:0 0 17px;position:relative;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.6 12.4a1.5 1.5 0 0 0 1.5 1.2h8.3a1.5 1.5 0 0 0 1.5-1.2L21 7H6'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;
}
.pcard .pcard__buy .button > *{position:relative;z-index:1;}
.pcard .pcard__buy .button::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);pointer-events:none;
}
.pcard .pcard__buy .button:hover{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-dark) 100%);color:#fff;transform:translateY(-2px);box-shadow:0 9px 20px rgba(0,168,168,.38);}
.pcard .pcard__buy .button:hover::after{transform:translateX(120%);transition:transform .7s var(--ease);}
.pcard:hover .pcard__buy .button{box-shadow:0 6px 16px rgba(26,43,93,.22);}
/* WooCommerce's loading / added states. */
.pcard .pcard__buy .button.loading{opacity:.75;pointer-events:none;}
.pcard .pcard__buy .added_to_cart{background:var(--navy);margin-top:8px;}
.pcard .pcard__buy .button.added{display:none;}

/* --------------------------------------------------------------------------
   Category pill filters
   -------------------------------------------------------------------------- */
/* Grid/flex children default to min-width:auto and refuse to shrink below
   their content; these layouts must be allowed to. */
.shop-layout > *,
.shop-toolbar > *{min-width:0;}

.pill-filters{
  display:flex;gap:9px;align-items:center;min-width:0;
  margin-bottom:20px;padding-bottom:4px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.pill-filters::-webkit-scrollbar{display:none;}
.pill{
  flex:0 0 auto;
  padding:10px 18px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);
  font-family:var(--font-ui);font-size:13px;font-weight:600;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.pill:hover{border-color:var(--teal);color:var(--teal-dark);}
.pill.is-active{background:var(--teal);border-color:var(--teal);color:#fff;}

/* --------------------------------------------------------------------------
   Floating WhatsApp button
   -------------------------------------------------------------------------- */
.wa-float{
  position:fixed;left:20px;bottom:22px;z-index:560;
  display:inline-flex;align-items:center;gap:0;
  height:56px;padding:0;border-radius:999px;
  background:#25D366;color:#fff;
  box-shadow:0 6px 20px rgba(37,211,102,.42);
  overflow:hidden;
  transition:gap .3s var(--ease),padding .3s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.wa-float__icon{
  flex:0 0 56px;width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
}
.wa-float__icon svg{width:27px;height:27px;}
/* The label is collapsed to zero width and only expands on hover/focus, so the
   control stays a small circle and never covers page content. */
.wa-float__label{
  max-width:0;opacity:0;white-space:nowrap;
  font-family:var(--font-ui);font-size:14px;font-weight:600;
  transition:max-width .3s var(--ease),opacity .25s var(--ease),padding .3s var(--ease);
}
.wa-float:hover,
.wa-float:focus-visible{background:#1DA851;color:#fff;transform:translateY(-2px);}
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label{max-width:180px;opacity:1;padding-right:22px;}

/* A slow attention pulse, stopped on hover and under reduced motion. */
.wa-float::after{
  content:"";position:absolute;inset:0;border-radius:999px;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:czh-wa-pulse 2.8s ease-out infinite;
  pointer-events:none;
}
.wa-float:hover::after{animation:none;}
@keyframes czh-wa-pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,2.5vw,32px);align-items:start;}
.contact__aside,.contact__main{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,34px);}
.contact__lead{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--ink);margin:0 0 10px;line-height:1.35;}
.contact__blurb{font-size:14.5px;color:var(--ink-soft);line-height:1.65;margin:0 0 20px;}
.contact__list{display:grid;gap:13px;margin:0 0 20px;}
.contact__list li{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:var(--ink-soft);line-height:1.5;}
.contact__list svg{width:18px;height:18px;flex:0 0 18px;margin-top:2px;color:var(--teal);}
.contact__list a:hover{color:var(--teal-dark);}
.contact__art{
  margin:22px 0 0;border-radius:16px;overflow:hidden;background:var(--nude);
}
.contact__art img{display:block;width:100%;height:auto;}
.contact__main h2{font-size:clamp(24px,2.8vw,34px);margin-bottom:6px;}
.contact__sub{color:var(--muted);font-size:14.5px;margin-bottom:22px;}
.contact__content{max-width:none;padding-top:clamp(28px,4vw,44px);}

.cform__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;}
.cform__field{margin-bottom:16px;}
.cform__field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:7px;}
.cform__field .req{color:var(--sale);}
.cform__optional{font-weight:400;color:var(--muted);font-size:11.5px;}
.cform__field input,
.cform__field select,
.cform__field textarea{
  width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:13px 15px;font-family:var(--font-ui);font-size:14.5px;color:var(--ink);
  outline:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.cform__field textarea{resize:vertical;min-height:140px;}
.cform__field input:focus,
.cform__field select:focus,
.cform__field textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,168,168,.14);}
.cform__field .is-invalid{border-color:var(--sale);}
.cform__field select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231A2B5D' stroke-width='1.4'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;
}
.cform__err{margin:6px 0 0;font-size:12px;color:var(--sale);}
.cform__err:empty{display:none;}
.cform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.cform__notice{margin:0 0 14px;font-size:14px;font-weight:600;}
.cform__notice:empty{display:none;}
.cform__notice.is-error{color:var(--sale);}
.cform__notice.is-ok{color:var(--teal-dark);}
.cform__submit{
  width:100%;border:none;border-radius:12px;background:var(--navy);color:#fff;
  padding:16px 20px;font-family:var(--font-ui);font-size:14px;font-weight:700;
  letter-spacing:.04em;cursor:pointer;
  transition:background .25s var(--ease),box-shadow .25s var(--ease);
}
.cform__submit:hover{background:var(--teal);box-shadow:0 8px 20px rgba(0,168,168,.3);}
.cform__submit.is-busy{opacity:.7;pointer-events:none;}

/* --------------------------------------------------------------------------
   One-step Cash on Delivery modal
   -------------------------------------------------------------------------- */
.qo{
  position:fixed;inset:0;z-index:620;
  display:flex;align-items:flex-start;justify-content:center;
  padding:24px 16px;overflow-y:auto;
  background:rgba(18,32,67,.55);
  opacity:0;transition:opacity .28s var(--ease);
  -webkit-overflow-scrolling:touch;
}
.qo.is-open{opacity:1;}
.qo[hidden]{display:none;}
.qo__panel{
  width:min(620px,100%);background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(18,32,67,.32);
  transform:translateY(16px) scale(.98);
  transition:transform .32s var(--ease);
  margin:auto;
}
.qo.is-open .qo__panel{transform:none;}

.qo__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line);
}
.qo__head h2{
  margin:0;font-family:var(--font-display);font-size:15px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
}
.qo__body{padding:22px 26px 26px;}

/* With the extra desktop width, pair the shorter fields so the form doesn't
   become one long column the customer has to scroll through. */
@media (min-width:560px){
  .qo__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;}
  .qo__grid .qo__field{margin-bottom:14px;}
}
.qo__loading{color:var(--muted);font-size:14px;text-align:center;padding:20px 0;}

.qo__line{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.qo__thumb{position:relative;flex:0 0 52px;width:52px;}
.qo__thumb img{width:52px;height:52px;object-fit:cover;border-radius:8px;background:var(--nude);display:block;}
.qo__qty-badge{
  position:absolute;top:-6px;left:-6px;min-width:20px;height:20px;padding:0 5px;
  background:var(--navy);color:#fff;border-radius:99px;border:2px solid #fff;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.qo__name{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:underline;line-height:1.4;}
.qo__line-price{font-weight:700;color:var(--ink);white-space:nowrap;}

.qo__qty{text-align:center;padding:16px 0;}
.qo__qty-label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.qo__stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.qo__stepper button{width:40px;height:40px;font-size:18px;color:var(--ink);background:#fff;transition:background .2s var(--ease);}
.qo__stepper button:hover{background:var(--nude);}
.qo__stepper input{
  width:54px;height:40px;border:none;border-inline:1px solid var(--line);
  text-align:center;font-size:15px;font-weight:600;color:var(--ink);
  -moz-appearance:textfield;
}
.qo__stepper input::-webkit-outer-spin-button,
.qo__stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.qo__totals{background:var(--nude);border-radius:10px;padding:14px 16px;margin:0 0 20px;}
.qo__totals > div{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:4px 0;}
.qo__totals dt{color:var(--ink-soft);margin:0;}
.qo__totals dd{margin:0;font-weight:600;color:var(--ink);}
.qo__grand{border-top:1px solid rgba(26,43,93,.14);margin-top:8px;padding-top:10px !important;}
.qo__grand dt,.qo__grand dd{font-size:16px;font-weight:700;color:var(--ink);}

.qo__form h3{
  text-align:center;font-family:var(--font-display);font-size:19px;font-weight:700;
  color:var(--ink);margin:0 0 18px;
}
.qo__field{margin-bottom:14px;}
.qo__field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.qo__field .req{color:var(--sale);}
.qo__optional{font-weight:400;color:var(--muted);font-size:11.5px;}
.qo__input{
  display:flex;align-items:center;gap:0;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;
  transition:border-color .2s var(--ease);
}
/* box-sizing:border-box + a fixed width so the tinted icon block fills the
   full field height instead of sitting as a short tab on the left. */
.qo__input svg{
  flex:0 0 46px;width:46px;height:auto;box-sizing:border-box;
  padding:13px;align-self:stretch;
  color:var(--muted);background:var(--nude);
  border-right:1px solid var(--line);
}
.qo__input input{flex:1;min-width:0;border:none;outline:none;padding:13px 14px;font-size:14px;color:var(--ink);background:none;}
.qo__input select{
  flex:1;min-width:0;border:none;outline:none;padding:13px 34px 13px 14px;font-size:14px;color:var(--ink);
  background:none;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.qo__input select:invalid{color:var(--muted);}
.qo__input:focus-within{border-color:var(--teal);}
.qo__input.is-invalid{border-color:var(--sale);}
.qo__err{margin:5px 0 0;font-size:12px;color:var(--sale);min-height:0;}
.qo__err:empty{display:none;}

/* Honeypot: off-screen but still focusable by scripts that ignore display. */
.qo__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.qo__notice{margin:0 0 12px;font-size:13.5px;color:var(--ink-soft);}
.qo__notice:empty{display:none;}
.qo__notice.is-error{color:var(--sale);font-weight:600;}

.qo__submit{
  width:100%;background:#111;color:#fff;border:none;border-radius:8px;
  padding:16px 18px;font-family:var(--font-ui);font-size:15px;font-weight:700;
  cursor:pointer;transition:background .25s var(--ease),transform .2s var(--ease);
}
.qo__submit:hover{background:var(--teal);}
.qo__submit.is-busy{opacity:.7;pointer-events:none;}
.qo__reassure{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:12px 0 0;font-size:12.5px;color:var(--muted);text-align:center;
}
.qo__reassure svg{width:15px;height:15px;color:var(--teal);flex:0 0 15px;}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.toast-stack{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:600;display:flex;flex-direction:column;gap:10px;align-items:center;
  pointer-events:none;width:min(92vw,420px);
}
.toast{
  display:flex;align-items:center;gap:12px;width:100%;
  background:var(--navy);color:#fff;border-radius:14px;
  padding:13px 16px;box-shadow:0 10px 30px rgba(26,43,93,.32);
  font-family:var(--font-ui);font-size:14px;font-weight:500;
  opacity:0;transform:translateY(14px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  pointer-events:auto;
}
.toast.is-in{opacity:1;transform:none;}
.toast__mark{
  flex:0 0 24px;width:24px;height:24px;border-radius:50%;
  background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;
}
.toast__mark svg{width:15px;height:15px;stroke-width:2.6;}
.toast__msg{flex:1;min-width:0;}
.toast__action{
  flex:0 0 auto;background:rgba(255,255,255,.16);color:#fff;
  border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:600;
  transition:background .25s var(--ease);
}
.toast__action:hover{background:rgba(255,255,255,.3);}

/* star rating (shared) */
.stars{display:inline-flex;gap:2px;color:var(--champagne);font-size:11px;letter-spacing:.08em;}
.rating-count{font-size:11px;color:var(--muted);}

/* ==========================================================================
   Quantity bundle selector (Single / Duo / Trio)
   ========================================================================== */
.bundle{margin:22px 0;}
.bundle__title{font-family:var(--font-ui);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink);margin:0 0 12px;}
.bundle__options{display:grid;gap:10px;}
.bundle__opt{
  position:relative;display:flex;align-items:center;gap:14px;
  border:1.5px solid var(--line);border-radius:14px;background:#fff;
  padding:16px 18px;cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
}
.bundle__opt:hover{border-color:var(--teal-dark);}
.bundle__opt.is-active{border-color:var(--navy);background:var(--nude);box-shadow:0 0 0 1px var(--navy);}
.bundle__opt input{position:absolute;opacity:0;width:1px;height:1px;}
.bundle__radio{
  flex:0 0 20px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s var(--ease);
}
.bundle__radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--navy);transform:scale(0);transition:transform .2s var(--ease);}
.bundle__opt.is-active .bundle__radio{border-color:var(--navy);}
.bundle__opt.is-active .bundle__radio::after{transform:scale(1);}
.bundle__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.bundle__info strong{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink);}
.bundle__badge{
  align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:#fff;background:var(--sale);border-radius:var(--r-pill);padding:2px 9px;
}
.bundle__price{font-family:var(--font-ui);font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;}
.bundle__price del{color:var(--muted);font-weight:400;margin-right:6px;}
.bundle__flag{
  position:absolute;top:-10px;left:18px;
  background:var(--navy);color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:3px 10px;border-radius:var(--r-pill);
}
.bundle__bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);
}
.bundle__delivery{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--teal-dark);font-weight:600;}
.bundle__delivery svg{width:16px;height:16px;}
.bundle__total{font-size:14px;color:var(--ink-soft);}
.bundle__total strong{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ink);margin-left:6px;}

/* The stepper still renders when a bundle is active (buttons disabled, input
   readonly) so the layout doesn't jump — just visibly inert. */
.qo__stepper.is-locked{opacity:.5;}
.qo__stepper.is-locked button{cursor:not-allowed;}
.qo__bundle-note{
  margin:0 0 4px;font-size:12.5px;font-weight:600;color:var(--teal-dark);
  display:flex;align-items:center;gap:6px;
}

/* ==========================================================================
   Delivery estimate timeline
   ========================================================================== */
.delivery-est{margin:20px 0;padding:18px 20px;background:var(--nude);border-radius:14px;}
.delivery-est__lede{margin:0 0 14px;font-size:13px;color:var(--ink-soft);}
.delivery-est__row{display:flex;align-items:flex-start;gap:6px;}
.delivery-est__step{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;flex:1;min-width:0;}
.delivery-est__icon{
  width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.delivery-est__icon svg{width:19px;height:19px;}
.delivery-est__step strong{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--ink);}
.delivery-est__step span{font-size:11px;color:var(--muted);line-height:1.3;}
.delivery-est__sep{flex:0 0 auto;width:100%;max-width:44px;height:1.5px;background:var(--line);margin-top:21px;}

/* ==========================================================================
   Product page reviews
   ========================================================================== */
.previews{margin-top:clamp(40px,6vw,80px);padding-top:clamp(30px,4vw,50px);border-top:1px solid var(--line);}
.previews__head h2{font-size:clamp(22px,2.6vw,32px);margin-bottom:22px;}
.previews__summary{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,56px);
  align-items:center;background:var(--nude);border-radius:20px;
  padding:clamp(20px,2.6vw,30px);margin-bottom:clamp(26px,3vw,40px);
}
.previews__score{text-align:center;display:grid;gap:6px;justify-items:center;min-width:150px;}
.previews__score strong{font-family:var(--font-display);font-size:44px;font-weight:700;color:var(--ink);line-height:1;}
.previews__score span{font-size:12.5px;color:var(--muted);}
.previews__bars{display:grid;gap:8px;margin:0;}
.previews__bars li{display:grid;grid-template-columns:54px minmax(0,1fr) 28px;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);}
.previews__bar{display:block;height:8px;border-radius:99px;background:rgba(26,43,93,.10);overflow:hidden;}
.previews__bar > span{display:block;height:100%;background:var(--teal);border-radius:99px;}
.previews__bar-count{text-align:right;}

.previews__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(26px,4vw,56px);align-items:start;}
.previews__list .commentlist{list-style:none;margin:0;padding:0;display:grid;gap:16px;}
.rvitem{list-style:none;}
.rvitem__inner{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;}
.rvitem__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.rvitem__avatar{border-radius:50%;}
.rvitem__meta{display:grid;line-height:1.3;}
.rvitem__meta strong{font-size:14px;color:var(--ink);font-weight:600;}
.rvitem__date{font-size:12px;color:var(--muted);}
.rvitem__verified{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  background:var(--teal-soft);color:var(--teal-dark);border-radius:99px;
  padding:5px 11px;font-size:11.5px;font-weight:600;
}
.rvitem__verified svg{width:13px;height:13px;stroke-width:3;}
.rvitem__rating{margin:12px 0 6px;}
.rvitem__title{font-family:var(--font-ui);font-size:15px;font-weight:700;color:var(--ink);margin:0 0 6px;}
.rvitem__text{font-size:14.5px;color:var(--ink-soft);line-height:1.65;}
.rvitem__text p{margin:0 0 .6em;}
.rvitem__photo{display:inline-block;margin-top:12px;border-radius:12px;overflow:hidden;border:1px solid var(--line);max-width:190px;}
.rvitem__photo img{display:block;width:100%;height:auto;}

.previews__form{
  background:var(--nude);border-radius:20px;padding:clamp(20px,2.6vw,30px);
  position:sticky;top:calc(var(--header-h) + 18px);
}
.previews__form .comment-reply-title{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--ink);display:block;margin-bottom:6px;}
.previews__form .comment-notes{font-size:13px;color:var(--muted);margin-bottom:16px;}
.previews__form label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.previews__form input[type=text],
.previews__form input[type=email],
.previews__form textarea,
.previews__form select{
  width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:12px 14px;font-size:14px;color:var(--ink);outline:none;
  transition:border-color .25s var(--ease);
}
.previews__form input:focus,
.previews__form textarea:focus,
.previews__form select:focus{border-color:var(--teal);}
.previews__form p{margin:0 0 14px;}
.previews__form .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--muted);}
.previews__form .comment-form-cookies-consent input{width:auto;}
.previews__form .comment-form-cookies-consent label{margin:0;font-weight:400;color:var(--muted);}
.previews__form .form-submit{margin:0;}
.previews__form input[type=submit]{
  width:100%;border:none;border-radius:12px;background:var(--navy);color:#fff;
  padding:14px 20px;font-family:var(--font-ui);font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  transition:background .25s var(--ease),box-shadow .25s var(--ease);
}
.previews__form input[type=submit]:hover{background:var(--teal);box-shadow:0 8px 20px rgba(0,168,168,.32);}
.woocommerce-noreviews{color:var(--muted);font-size:14.5px;}

/* WooCommerce turns the rating <select> into these anchors. Its own icon-font
   styling is dequeued with the rest of the plugin CSS, so the stars are drawn
   here instead — otherwise they render as "1 of 5 stars" plain text. */
.previews__form .comment-form-rating{margin-bottom:16px;}
p.stars{display:inline-flex;margin:0;}
p.stars span{display:inline-flex;gap:5px;}
p.stars a{
  position:relative;width:26px;height:26px;overflow:hidden;
  text-indent:-999em;display:inline-block;
}
p.stars a::before{
  content:"\2605";position:absolute;inset:0;text-indent:0;
  font-size:24px;line-height:26px;text-align:center;
  color:#CBD9E1;transition:color .18s var(--ease);
}
p.stars:hover a::before{color:var(--champagne);}
p.stars a:hover ~ a::before{color:#CBD9E1;}
p.stars.selected a::before{color:var(--champagne);}
p.stars.selected a.active ~ a::before{color:#CBD9E1;}
p.stars.selected a:not(.active):hover ~ a::before{color:#CBD9E1;}
.previews__form select#rating{display:none;}
.previews__form .comment-form-rating label{margin-bottom:8px;}

/* ==========================================================================
   Customer video rail
   ========================================================================== */
.vrail{padding:50px 0;background:var(--nude);overflow:hidden;}
.vrail__viewport{overflow:hidden;margin-top:clamp(22px,3vw,38px);}
.vrail__track{
  display:flex;width:max-content;
  animation:czh-vrail 56s linear infinite;
  will-change:transform;
}
.vrail__viewport:hover .vrail__track{animation-play-state:paused;}
.vrail__group{display:flex;gap:clamp(12px,1.4vw,20px);padding-right:clamp(12px,1.4vw,20px);}
.vrail__item{
  flex:0 0 auto;width:clamp(180px,16vw,236px);
  border-radius:20px;overflow:hidden;background:var(--navy);
  box-shadow:0 8px 24px rgba(26,43,93,.14);
}
.vrail__video{
  display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--navy);
}
@keyframes czh-vrail{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ==========================================================================
   Review cards (homepage rail)
   ========================================================================== */
.rvrail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr);
  gap:clamp(14px,1.8vw,24px);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-bottom:6px;margin-top:clamp(22px,3vw,36px);
}
.rvrail::-webkit-scrollbar{display:none;}
.rvrail > *{scroll-snap-align:start;}
.rvcard{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.rvcard:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(26,43,93,.13);}
.rvcard__media{aspect-ratio:1/1;overflow:hidden;background:var(--nude);}
.rvcard__media img{width:100%;height:100%;object-fit:cover;display:block;}
.rvcard__body{padding:16px;display:flex;flex-direction:column;flex:1;}
.rvcard__title{font-family:var(--font-ui);font-size:14px;font-weight:700;color:var(--ink);margin:8px 0 6px;line-height:1.35;}
.rvcard__text{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 14px;}
.rvcard__who{margin-top:auto;display:flex;flex-direction:column;gap:4px;font-size:12.5px;}
.rvcard__who strong{color:var(--ink);font-weight:600;}
.rvcard__verified{display:inline-flex;align-items:center;gap:5px;color:var(--teal-dark);font-weight:600;}
.rvcard__verified svg{width:14px;height:14px;stroke-width:3;}
.rvcard__link{
  display:block;text-align:center;padding:12px;border-top:1px solid var(--line);
  background:var(--nude);color:var(--navy);font-size:13px;font-weight:600;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.rvcard__link:hover{background:var(--navy);color:#fff;}

/* ==========================================================================
   Hero product
   ========================================================================== */
/* Sits on the page background; the white card inside provides the contrast. */
.hp{background:transparent;}
.hp__inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:clamp(26px,4vw,64px);
  background:#fff;border-radius:28px;
  padding:clamp(24px,3vw,44px);
  box-shadow:0 10px 40px rgba(26,43,93,.08);
}
.hp__media{position:relative;}
/* Mirrors the hero product block: same component, image on the right
   instead of the left, so a second hero-style section doesn't look like a
   copy-pasted duplicate of the first. Grid `order` (not DOM reordering)
   keeps source order — and screen-reader/tab order — sane either way. */
.hp--reverse .hp__media{order:2;}
.hp--reverse .hp__body{order:1;}
.hp__flag{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--sale);color:#fff;border-radius:var(--r-pill);
  padding:7px 14px;font-size:12px;font-weight:700;letter-spacing:.04em;
}
.hp__shot{
  display:block;border-radius:20px;overflow:hidden;background:var(--nude);aspect-ratio:1/1;
}
/* A slow, shallow drift — enough to catch the eye without drawing attention
   to itself. Disabled wholesale by the reduced-motion block below. */
.hp__shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);animation:czh-float 7s ease-in-out infinite;}
.hp__shot:hover img{animation-play-state:paused;}
@keyframes czh-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-9px);}
}
.proof__count{display:inline-block;min-width:3ch;}
.hp__shot:hover img{transform:scale(1.04);}
.hp__thumbs{display:flex;gap:10px;margin-top:12px;}
.hp__thumbs a{
  flex:0 0 76px;width:76px;border-radius:12px;overflow:hidden;
  background:var(--nude);border:1px solid var(--line);
  transition:border-color .25s var(--ease);
}
.hp__thumbs a:hover{border-color:var(--teal);}
.hp__thumbs img{width:100%;height:76px;object-fit:cover;display:block;}

.hp__body h2{margin:6px 0 10px;font-size:clamp(24px,2.9vw,38px);line-height:1.18;}
.hp__body h2 a{color:inherit;}
.hp__body h2 a:hover{color:var(--teal-dark);}
.hp__rating{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.hp__price{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-family:var(--font-display);font-weight:700;font-size:clamp(24px,2.4vw,32px);color:var(--ink);
  margin-bottom:18px;
}
.hp__price del{color:var(--muted);font-size:.62em;font-weight:500;}
.hp__price ins{text-decoration:none;}
.hp__save{
  font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--sale);border:1px solid currentColor;border-radius:var(--r-pill);padding:4px 11px;
}
.hp__points{display:grid;gap:10px;margin:0 0 24px;}
.hp__points li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink-soft);line-height:1.5;}
.hp__points svg{width:18px;height:18px;flex:0 0 18px;margin-top:2px;color:var(--teal);stroke-width:2.4;}

/* Same gradient system as .woocommerce .button.alt (single product, cards).
   The hero block sits on the homepage, which carries no .woocommerce ancestor
   class, so that rule never reached it — this one exists purely to carry the
   identical look onto a page WooCommerce's own scoping can't reach. */
.hp__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;}
.hp__cta .button,
.hp__cta a.button{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 30px;border:1px solid var(--teal-dark);border-radius:12px;
  background:linear-gradient(135deg,var(--champagne-soft) 0%,var(--champagne) 60%,var(--teal-dark) 100%);
  color:#fff;
  font-family:var(--font-ui);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 6px 18px rgba(0,168,168,.32);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .3s var(--ease);
}
.hp__cta .button::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-120%);pointer-events:none;
}
.hp__cta .button:hover{
  background:linear-gradient(135deg,var(--teal-dark) 0%,var(--navy) 100%);
  border-color:var(--navy);color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(26,43,93,.34);
}
.hp__cta .button:hover::before{transform:translateX(120%);transition:transform .75s var(--ease);}
.hp__cta .btn--ghost{border-radius:12px;padding:15px 28px;}
.hp__cta .added_to_cart{display:none;}
.hp__stock{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:13.5px;color:var(--muted);}
.hp__dot{width:8px;height:8px;border-radius:50%;background:#2BB673;box-shadow:0 0 0 3px rgba(43,182,115,.18);}

/* ==========================================================================
   Editorial / promo
   ========================================================================== */
.editorial{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5vw,80px);}
.editorial__media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--nude);}
.editorial__media img{width:100%;height:100%;object-fit:cover;}
.editorial--reverse .editorial__media{order:2;}
.editorial__body{max-width:520px;}
.editorial__body p{color:var(--muted);}

.promo{position:relative;min-height:clamp(320px,46vw,520px);display:flex;align-items:center;overflow:hidden;background:var(--ink);}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.66;}
.promo__inner{position:relative;z-index:2;text-align:center;width:100%;color:#fff;}
.promo__inner h2{color:#fff;}
.promo__inner p{color:rgba(255,255,255,.82);max-width:46ch;margin-inline:auto;}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.quote-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:24px;overflow-x:auto;scrollbar-width:none;}
.quote-rail::-webkit-scrollbar{display:none;}
.quote{background:var(--white);padding:36px 32px;border:1px solid var(--line);}
.section--nude .quote{border-color:transparent;}
.quote__text{font-family:var(--font-display);font-size:19px;line-height:1.5;color:var(--ink);margin:14px 0 22px;}
.quote__who{display:flex;align-items:center;gap:12px;}
.quote__who img{width:42px;height:42px;border-radius:50%;object-fit:cover;}
.quote__who strong{display:block;font-size:12.5px;font-weight:400;color:var(--ink);letter-spacing:.04em;}
.quote__who span{font-size:11px;color:var(--muted);}
.quote__verified{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--champagne);}

/* rating summary */
.rating-summary{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,70px);align-items:center;}
.rating-summary__score{text-align:center;}
.rating-summary__score strong{display:block;font-family:var(--font-display);font-size:64px;line-height:1;color:var(--ink);}
.rating-bars{display:grid;gap:8px;min-width:240px;}
.rating-bar{display:grid;grid-template-columns:44px 1fr 34px;align-items:center;gap:12px;font-size:11.5px;color:var(--muted);}
.rating-bar__track{height:4px;background:var(--nude-deep);}
.rating-bar__fill{height:100%;background:var(--champagne);}

/* ==========================================================================
   Newsletter + footer
   ========================================================================== */
.newsletter__note{font-size:12.5px;margin-top:12px;min-height:18px;color:rgba(255,255,255,.88);}

/* Newsletter — navy panel with soft brand blobs, copy left, form right. */
.nl{padding:0 0 clamp(40px,6vw,80px);}
.nl__panel{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;gap:clamp(26px,4vw,56px);
  background:var(--navy);color:#fff;border-radius:28px;
  padding:clamp(30px,4vw,56px);
}
.nl__blob{position:absolute;border-radius:50%;pointer-events:none;}
.nl__blob--a{width:260px;height:260px;top:-90px;right:-60px;background:rgba(0,168,168,.28);}
.nl__blob--b{width:180px;height:180px;bottom:-80px;left:-40px;background:rgba(0,168,168,.16);}
.nl__body,.nl__form{position:relative;z-index:1;}

.nl__badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.14);border-radius:var(--r-pill);
  padding:7px 14px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:14px;
}
.nl__badge svg{width:15px;height:15px;}
.nl__body h2{color:#fff;font-size:clamp(24px,2.8vw,36px);margin-bottom:10px;}
.nl__body p{color:rgba(255,255,255,.76);font-size:15px;max-width:42ch;margin-bottom:18px;}
.nl__perks{display:grid;gap:9px;margin:0;}
.nl__perks li{display:flex;align-items:center;gap:9px;font-size:14px;color:rgba(255,255,255,.9);}
.nl__perks svg{width:17px;height:17px;flex:0 0 17px;color:var(--teal);stroke-width:2.6;}

.nl__field{
  display:flex;gap:8px;background:#fff;border-radius:14px;padding:7px;
}
.nl__field input[type=email]{
  flex:1;min-width:0;border:none;background:none;outline:none;
  padding:13px 14px;font-size:14.5px;color:var(--ink);
}
.nl__field input::placeholder{color:var(--muted);}
.nl__field button{
  flex:0 0 auto;border-radius:10px;background:var(--teal);color:#fff;
  padding:13px 26px;font-family:var(--font-ui);font-size:13.5px;font-weight:700;
  transition:background .25s var(--ease),box-shadow .25s var(--ease);
}
.nl__field button:hover{background:var(--teal-dark);box-shadow:0 6px 16px rgba(0,168,168,.4);}
.nl__fine{font-size:12.5px;color:rgba(255,255,255,.55);margin:10px 0 0;}

/* Footer sits on white; only the copyright bar is tinted. Content is held to a
   fixed measure and centred rather than stretching to the viewport edge. */
.site-footer{background:#fff;color:var(--ink-soft);border-top:1px solid var(--line);}
.footer__inner{max-width:1260px;margin:0 auto;padding-inline:var(--gutter);}
.site-footer > .footer__inner{padding-top:clamp(44px,5vw,72px);}

.footer__grid{
  display:grid;grid-template-columns:1.5fr repeat(3,1fr) 1.25fr;
  gap:clamp(24px,3vw,44px);padding-bottom:clamp(32px,4vw,52px);
}
.footer__brand{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);display:block;margin-bottom:12px;}
.footer__brand--logo{line-height:0;margin-bottom:16px;}
.footer__brand--logo img,
.footer__brand--logo .custom-logo-link{display:block;}
.footer__brand--logo img{max-height:72px;width:auto;height:auto;}
.footer__about{font-size:13.5px;color:var(--muted);max-width:34ch;line-height:1.7;}
.footer__col h4{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:16px;}
.footer__col li + li{margin-top:11px;}
.footer__col a{font-size:13.5px;color:var(--ink-soft);transition:color .25s var(--ease);}
.footer__col a:hover{color:var(--teal-dark);}

.footer__social{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.social{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--nude);color:var(--ink);
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.social:hover{transform:translateY(-3px) scale(1.06);color:#fff;}
.social--facebook:hover{background:#1877F2;}
.social--instagram:hover{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF);}
.social--tiktok:hover{background:#111;}
.social--youtube:hover{background:#FF0000;}

.footer__contact{display:grid;gap:11px;}
.footer__contact li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5;}
.footer__contact svg{width:17px;height:17px;flex:0 0 17px;margin-top:2px;color:var(--teal);}

.wa-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin-top:18px;width:100%;padding:13px 18px;border-radius:12px;
  background:#25D366;color:#fff;
  font-family:var(--font-ui);font-size:14px;font-weight:600;
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.wa-btn svg{width:19px;height:19px;}
.wa-btn:hover{background:#1DA851;color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,211,102,.34);}
.wa-note{font-size:12px;color:var(--muted);margin:8px 0 0;}

/* Payment / delivery strip */
.trust-strip{
  display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;gap:clamp(20px,3vw,40px);
  background:var(--teal-soft);border-radius:20px;
  padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,40px);
  margin-bottom:clamp(30px,4vw,48px);
}
.trust-strip__col{text-align:center;}
.trust-strip__col:first-child{grid-column:1;grid-row:1;}
.trust-strip__col:last-child{grid-column:3;grid-row:1;}
.trust-strip::after{
  content:"";grid-column:2;grid-row:1;
  width:1px;height:70%;background:rgba(26,43,93,.14);justify-self:center;
}
.trust-strip__col h5{
  font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--ink);
  margin:0 0 14px;
}
.trust-strip__logos{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:center;}
.trust-strip__logos img{height:30px;width:auto;object-fit:contain;}
.trust-chip{
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:7px 13px;font-size:12px;font-weight:600;color:var(--ink-soft);
}

/* Copyright bar */
.footer__bar{background:var(--teal);color:#fff;}
.footer__bar-inner{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding-top:15px;padding-bottom:15px;
  font-size:13px;font-weight:500;
}
.footer__bar-sep{opacity:.5;}
.footer__made{display:inline-flex;align-items:center;gap:6px;}
.footer__heart{display:inline-flex;}
.footer__heart svg{width:14px;height:14px;fill:#fff;stroke:#fff;}

/* ==========================================================================
   Cart drawer
   ========================================================================== */
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(92vw,436px);background:var(--ivory);z-index:440;
  transform:translateX(100%);transition:transform .5s var(--ease);
  display:flex;flex-direction:column;
}
.cart-drawer.is-open{transform:none;}
.cart-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:22px var(--gutter);border-bottom:1px solid var(--line);}
.cart-drawer__head h2{margin:0;font-size:22px;}
.cart-drawer__body{flex:1;overflow-y:auto;padding:0 var(--gutter);}
.cart-drawer__foot{border-top:1px solid var(--line);padding:20px var(--gutter) 26px;background:var(--ivory);}

.ship-bar{padding:18px 0;border-bottom:1px solid var(--line);}
.ship-bar p{font-size:12px;color:var(--ink);margin:0 0 10px;letter-spacing:.02em;}
.ship-bar__track{height:3px;background:var(--nude-deep);}
.ship-bar__fill{height:100%;background:var(--champagne);transition:width .6s var(--ease);}
.ship-bar.is-unlocked p{color:var(--champagne);}

.cart-line{display:grid;grid-template-columns:82px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);position:relative;}
.cart-line.is-busy{opacity:.45;pointer-events:none;}
.cart-line__img img{width:82px;height:100px;object-fit:cover;background:var(--nude);}
.cart-line__name{font-size:13px;color:var(--ink);line-height:1.4;display:block;margin-bottom:4px;padding-right:22px;}
.cart-line__meta{font-size:11.5px;color:var(--muted);}
.cart-line__price{font-family:var(--font-display);font-size:16px;color:var(--ink);margin-top:6px;display:block;}
.cart-line__remove{position:absolute;top:20px;right:0;color:var(--muted);transition:color .3s;}
.cart-line__remove:hover{color:var(--ink);}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);margin-top:10px;}
.qty button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:14px;}
.qty button:hover{background:var(--nude);}
.qty span,.qty input{min-width:34px;text-align:center;font-size:13px;border:none;background:none;padding:0;}
.cart-drawer__totals{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;}
.cart-drawer__totals span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.cart-drawer__totals strong{font-family:var(--font-display);font-size:24px;color:var(--ink);font-weight:400;}
.cart-drawer__ctas{display:grid;gap:10px;}
.cart-empty{text-align:center;padding:60px 0;}
.cart-empty p{color:var(--muted);}

/* ==========================================================================
   Quick view modal
   ========================================================================== */
.qv{
  position:fixed;inset:0;z-index:450;display:flex;align-items:center;justify-content:center;padding:var(--gutter);
  background:rgba(18,32,67,.5);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.qv.is-open{opacity:1;visibility:visible;}
.qv__panel{
  position:relative;background:#fff;border-radius:22px;overflow:hidden;
  width:min(920px,100%);max-height:88vh;overflow-y:auto;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  box-shadow:0 30px 70px -20px rgba(18,32,67,.45);
  transform:translateY(14px) scale(.98);transition:transform .4s var(--ease);
}
.qv.is-open .qv__panel{transform:none;}
.qv__close{
  position:absolute;top:16px;right:16px;z-index:4;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(18,32,67,.18);transition:background .2s var(--ease),transform .2s var(--ease);
}
.qv__close:hover{background:var(--navy);color:#fff;transform:rotate(90deg);}
.qv__media{position:relative;background:var(--nude);min-height:280px;}
.qv__media img{width:100%;height:100%;object-fit:cover;display:block;}
.qv__badges{position:absolute;top:16px;left:16px;z-index:3;display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.qv__body{padding:clamp(26px,3vw,42px);display:flex;flex-direction:column;}
.qv__cat{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-dark);display:block;margin-bottom:8px;}
.qv__body h3{font-size:clamp(20px,2.2vw,27px);line-height:1.25;margin-bottom:10px;padding-right:30px;}
.qv__rating{margin-bottom:12px;}
.qv__price{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:var(--font-display);font-weight:700;font-size:23px;color:var(--ink);margin-bottom:14px;
}
.qv__price del{color:var(--muted);font-size:.68em;font-weight:500;}
.qv__price ins{text-decoration:none;}
.qv__save{
  font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--sale);border:1px solid currentColor;border-radius:var(--r-pill);padding:3px 10px;
}
.qv__excerpt{font-size:14px;color:var(--ink-soft);line-height:1.6;margin-bottom:18px;}
.qv__excerpt p{margin:0 0 .6em;}

/* Quantity input and Add to Cart / Buy Now sit in one wrapped row. Buy Now is
   the Woo `.ecrin-buy-now` hooked in via woocommerce_after_add_to_cart_button,
   a sibling of the quantity + submit inside the same form.cart. */
.qv__cart form.cart{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin-bottom:0;}
.qv__cart form.cart .quantity{flex:0 0 auto;margin:0;}
.qv__cart form.cart .quantity .qty{height:100%;}
.qv__cart form.cart .single_add_to_cart_button,
.qv__cart form.cart .ecrin-buy-now{flex:1 1 140px;min-width:140px;margin:0;}
.qv__full{display:inline-block;margin-top:18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;}
.qv__loading{padding:60px;text-align:center;color:var(--muted);grid-column:1/-1;}

/* ==========================================================================
   Shop / archive
   ========================================================================== */
.shop-hero{background:var(--nude);padding:clamp(40px,6vw,86px) 0;text-align:center;}
.shop-hero h1{margin-bottom:8px;}
.shop-hero p{color:var(--muted);max-width:56ch;margin-inline:auto;}
.breadcrumb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:18px 0;}
.breadcrumb a:hover{color:var(--ink);}

.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:clamp(24px,4vw,56px);align-items:start;}
.shop-filters{position:sticky;top:calc(var(--header-h) + 20px);}
.filter-group{border-bottom:1px solid var(--line);padding:20px 0;}
.filter-group:first-child{padding-top:0;}
.filter-group h4{font-family:var(--font-ui);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;}
.filter-group li + li{margin-top:9px;}
.filter-group a{font-size:13px;color:var(--muted);transition:color .25s;}
.filter-group a:hover,.filter-group a.is-active{color:var(--ink);}
.filter-group a.is-active{border-bottom:1px solid var(--champagne);padding-bottom:2px;}
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px;}
.shop-count{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
/* Replace the native control chrome with a flat field + drawn caret so the
   ordering dropdown matches the rest of the UI instead of the OS. */
.shop-toolbar select,
.woocommerce-ordering select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  border:1px solid var(--line);border-radius:0;background:var(--ivory);
  padding:11px 40px 11px 16px;
  font-family:var(--font-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);cursor:pointer;line-height:1.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23171514' stroke-width='1.3'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
  transition:border-color .3s var(--ease);
}
.shop-toolbar select:hover,
.woocommerce-ordering select:hover{border-color:var(--beige);}
.shop-toolbar select:focus-visible,
.woocommerce-ordering select:focus-visible{outline:none;border-color:var(--champagne);}
.filter-toggle{display:none;}

.woocommerce-pagination{margin-top:clamp(36px,5vw,64px);display:flex;justify-content:center;}
.woocommerce-pagination ul{display:flex;gap:8px;}
.woocommerce-pagination a,.woocommerce-pagination span{
  min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);font-size:12.5px;transition:background .3s,color .3s,border-color .3s;
}
.woocommerce-pagination a:hover,.woocommerce-pagination .current{background:var(--ink);color:#fff;border-color:var(--ink);}

/* ==========================================================================
   Single product
   ========================================================================== */
.product-main{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(26px,4vw,72px);align-items:start;padding:clamp(24px,3vw,44px) 0 clamp(48px,6vw,86px);}
.gallery{display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:start;position:sticky;top:calc(var(--header-h) + 20px);}
.gallery__thumbs{display:flex;flex-direction:column;gap:10px;max-height:560px;overflow-y:auto;scrollbar-width:none;}
.gallery__thumbs::-webkit-scrollbar{display:none;}
.gallery__thumbs button{border:1px solid transparent;padding:0;background:var(--nude);aspect-ratio:3/4;overflow:hidden;transition:border-color .3s;}
.gallery__thumbs button.is-active{border-color:var(--ink);}
.gallery__thumbs img{width:100%;height:100%;object-fit:cover;}
.gallery__main{position:relative;background:var(--nude);aspect-ratio:3/4;overflow:hidden;cursor:zoom-in;}
.gallery__main img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.gallery__main.is-zoomed img{transform:scale(1.7);}

.psummary__cat{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);}
.psummary h1{font-size:clamp(26px,3.2vw,42px);margin:10px 0 14px;}

/* Quantity + Add to Cart + Buy Now, forced onto one row of matching height.
   Without this the three sat in plain document flow — usually fine, but the
   two buttons had no shared width/height rule, so a longer product name or a
   slightly different render could leave Buy Now visibly out of line with Add
   to Cart instead of reading as one matched pair of actions. */
.psummary form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin:22px 0;}
.psummary form.cart .quantity{flex:0 0 auto;margin:0;}
.psummary form.cart .quantity .qty{height:100%;}
.psummary form.cart .single_add_to_cart_button,
.psummary form.cart .ecrin-buy-now{
  flex:1 1 160px;min-width:160px;margin:0;
  display:flex;align-items:center;justify-content:center;
}
.psummary__rating{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.psummary__price{font-family:var(--font-display);font-size:30px;color:var(--ink);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.psummary__price del{color:var(--muted);font-size:.62em;}
.psummary__price ins{text-decoration:none;}
.psummary__save{font-family:var(--font-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sale);}
.psummary__excerpt{color:var(--muted);font-size:14.5px;border-top:1px solid var(--line);padding-top:20px;margin-top:20px;}
.psummary__stock{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;}
.psummary__stock.in{color:var(--champagne);}
.psummary__stock.out{color:var(--sale);}
.psummary__buy{display:grid;gap:12px;margin:24px 0;}
.psummary__buy-row{display:flex;gap:12px;align-items:stretch;}
.psummary__buy-row .qty{margin:0;flex:0 0 auto;}
.psummary__buy-row .btn{flex:1;}
.psummary__meta{font-size:12px;color:var(--muted);display:grid;gap:6px;border-top:1px solid var(--line);padding-top:18px;}
.trust-list{display:grid;gap:11px;margin-top:22px;border-top:1px solid var(--line);padding-top:22px;}
.trust-list li{display:flex;align-items:center;gap:11px;font-size:12.5px;color:var(--ink-soft);}
.trust-list svg{color:var(--champagne);flex:0 0 auto;}

/* variation swatches */
.variations{margin:22px 0;display:grid;gap:18px;}
.variations__row > label,.variations th label{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:10px;}
.swatches{display:flex;gap:9px;flex-wrap:wrap;}
.swatch{
  min-width:44px;height:44px;padding:0 14px;border:1px solid var(--line);background:var(--white);
  font-size:12px;letter-spacing:.06em;color:var(--ink-soft);
  display:inline-flex;align-items:center;justify-content:center;transition:border-color .25s,color .25s;
}
.swatch:hover{border-color:var(--beige);}
.swatch.is-selected{border-color:var(--ink);color:var(--ink);}
.swatch--color{width:34px;min-width:34px;height:34px;border-radius:50%;padding:0;position:relative;}
.swatch--color.is-selected::after{content:"";position:absolute;inset:-5px;border:1px solid var(--ink);border-radius:50%;}
.variations select{width:100%;border:1px solid var(--line);background:var(--white);padding:12px 14px;font-size:13px;}

/* accordions */
.accordion{border-top:1px solid var(--line);margin-top:26px;}
.accordion__item{border-bottom:1px solid var(--line);}
.accordion__trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0;text-align:left;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
}
.accordion__trigger .sign{position:relative;width:12px;height:12px;flex:0 0 auto;}
.accordion__trigger .sign::before,.accordion__trigger .sign::after{content:"";position:absolute;background:var(--ink);transition:transform .35s var(--ease);}
.accordion__trigger .sign::before{top:5.5px;left:0;width:12px;height:1px;}
.accordion__trigger .sign::after{left:5.5px;top:0;width:1px;height:12px;}
.accordion__item.is-open .sign::after{transform:scaleY(0);}
.accordion__panel{display:none;padding-bottom:22px;font-size:14px;color:var(--muted);}
.accordion__item.is-open .accordion__panel{display:block;}
.accordion__panel :where(p,ul,ol){margin-top:0;}
.accordion__panel ul{list-style:disc;padding-left:18px;}

/* sticky mobile buy bar */
.sticky-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:330;background:var(--ivory);border-top:1px solid var(--line);
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  display:none;gap:10px;align-items:center;
  transform:translateY(110%);transition:transform .4s var(--ease);
}
.sticky-buy.is-visible{transform:none;}
.sticky-buy img{width:44px;height:52px;object-fit:cover;background:var(--nude);}
.sticky-buy__info{flex:1;min-width:0;}
.sticky-buy__info strong{display:block;font-size:12px;font-weight:400;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sticky-buy__info span{font-family:var(--font-display);font-size:15px;color:var(--champagne);}

/* reviews */
.reviews-block{border-top:1px solid var(--line);padding-top:clamp(36px,5vw,64px);}
.review-item{border-bottom:1px solid var(--line);padding:24px 0;}
.review-item__head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.review-item__head strong{font-size:13px;font-weight:400;color:var(--ink);}
.review-item__date{font-size:11.5px;color:var(--muted);}
.comment-form{display:grid;gap:14px;max-width:620px;}
.comment-form input,.comment-form textarea{border:1px solid var(--line);background:var(--white);padding:13px 15px;font-size:14px;width:100%;}
.comment-form label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px;}
.comment-form .stars a{color:var(--champagne);}

/* ==========================================================================
   WooCommerce page reskins (cart / checkout / account)
   ========================================================================== */
.woo-page{padding:clamp(28px,4vw,60px) 0 clamp(56px,7vw,100px);}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border:1px solid var(--line);background:var(--white);padding:16px 20px;margin-bottom:24px;font-size:13.5px;list-style:none;
}
.woocommerce-error{border-color:var(--sale);color:var(--sale);}
.woocommerce table.shop_table{width:100%;border-collapse:collapse;}
.woocommerce table.shop_table th{
  text-align:left;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:400;
  padding:14px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.woocommerce table.shop_table td{padding:18px 12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle;}
.woocommerce table.shop_table th:first-child,
.woocommerce table.shop_table td:first-child{padding-left:0;}
.woocommerce table.shop_table th:last-child,
.woocommerce table.shop_table td:last-child{padding-right:0;text-align:right;}
.woocommerce table.shop_table img{width:74px;height:90px;object-fit:cover;background:var(--nude);}

/* Cart line items: keep the name column elastic and the numeric columns tight. */
.woocommerce-cart table.cart td.product-remove,
.woocommerce-cart table.cart th.product-remove{width:28px;padding-right:0;}
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce-cart table.cart th.product-thumbnail{width:90px;}
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal{white-space:nowrap;text-align:right;}
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart th.product-subtotal{text-align:right;}
.woocommerce-cart table.cart td.product-quantity,
.woocommerce-cart table.cart th.product-quantity{width:110px;text-align:center;}
.woocommerce-cart table.cart td.product-name a{color:var(--ink);}
.woocommerce-cart table.cart td.product-name a:hover{color:var(--champagne);}
.woocommerce-cart table.cart a.remove{
  display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border:1px solid var(--line);color:var(--muted);font-size:15px;line-height:1;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s;
}
.woocommerce-cart table.cart a.remove:hover{background:var(--ink);border-color:var(--ink);color:#fff;}

/* Coupon row + update button on one line. */
.woocommerce-cart table.cart td.actions{padding:22px 0;border-bottom:none;}
.woocommerce-cart table.cart td.actions .coupon{
  display:inline-flex;gap:10px;flex-wrap:wrap;vertical-align:middle;margin-right:12px;
}
.woocommerce-cart table.cart td.actions .coupon input[type="text"]{
  border:1px solid var(--line);background:var(--white);padding:14px 16px;min-width:200px;font-size:13px;
}

.woocommerce .quantity input.qty{width:64px;border:1px solid var(--line);padding:10px;text-align:center;background:var(--white);}
.cross-sells h2{font-size:24px;}

.woocommerce .button,.woocommerce button.button,.woocommerce input.button,.woocommerce a.button,
.woocommerce #respond input#submit,.wc-block-components-button{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:0;
  padding:15px 30px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
  transition:background .35s var(--ease),color .35s var(--ease);cursor:pointer;
}
.woocommerce .button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button:hover,.woocommerce #respond input#submit:hover{background:var(--white);color:var(--ink);}
/* Primary commerce CTA — Add to Cart on the product page, "Proceed to
   Checkout" on the cart page, and "Place Order" on checkout all share this
   class, so one premium treatment covers every money-moving button on the
   site: a teal gradient, a colour-matched glow, a lift on hover, and a light
   sweep that passes across the face once per hover. */
.woocommerce .button.alt,.woocommerce button.button.alt{
  position:relative;overflow:hidden;border-radius:12px;
  background:linear-gradient(135deg,var(--champagne-soft) 0%,var(--champagne) 60%,var(--teal-dark) 100%);
  border-color:var(--teal-dark);
  box-shadow:0 6px 18px rgba(0,168,168,.32);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .3s var(--ease);
}
.woocommerce .button.alt::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-120%);pointer-events:none;
}
.woocommerce .button.alt:hover{
  background:linear-gradient(135deg,var(--teal-dark) 0%,var(--navy) 100%);
  border-color:var(--navy);color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(26,43,93,.34);
}
.woocommerce .button.alt:hover::before{transform:translateX(120%);transition:transform .75s var(--ease);}
.woocommerce .button.alt:active{transform:translateY(0);}

/* Buy Now — same treatment in the brand red, so the two primary actions read
   as a clear pair rather than one polished button next to a flat one. */
.btn--ghost.ecrin-buy-now{
  --btn-bg:var(--sale);--btn-fg:#fff;
  position:relative;overflow:hidden;border-radius:12px;
  border-color:var(--sale);
  background:linear-gradient(135deg,#FF7A7F 0%,var(--sale) 55%,#B5343A 100%);
  box-shadow:0 6px 18px rgba(225,73,79,.34);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .3s var(--ease);
}
.btn--ghost.ecrin-buy-now svg{width:16px;height:16px;flex:0 0 16px;position:relative;z-index:1;}
.btn--ghost.ecrin-buy-now span{position:relative;z-index:1;}
.btn--ghost.ecrin-buy-now::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-120%);pointer-events:none;
}
.btn--ghost.ecrin-buy-now:hover{
  background:linear-gradient(135deg,var(--sale) 0%,#9A2B30 100%);
  border-color:#9A2B30;color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(154,43,48,.4);
}
.btn--ghost.ecrin-buy-now:hover::before{transform:translateX(120%);transition:transform .75s var(--ease);}
.btn--ghost.ecrin-buy-now:active{transform:translateY(0);}

/* A gentle up/down bob to draw the eye to the primary purchase action — the
   product page, hero showcase and quick view, where it's the one CTA that
   matters. Deliberately not applied to product-card grids: a whole page of
   bouncing buttons would read as noisy rather than inviting.
   animation:none on hover (not animation-play-state:paused) because a paused
   CSS animation still wins over a plain :hover transform on the same
   property — pausing would freeze the bob mid-bounce and swallow the hover
   lift instead of handing control back to it. */
.btn--ghost.ecrin-buy-now{animation:czh-buy-bob 1.8s ease-in-out infinite;}
.btn--ghost.ecrin-buy-now:hover{animation:none;}
@keyframes czh-buy-bob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-5px);}
}

/* --- Cart page: items left, sticky summary right -------------------------- */
/* Applied to WooCommerce's own classic markup so no template needs forking. */
.woocommerce-cart .woo-page .woocommerce{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(290px,.75fr);
  gap:clamp(28px,4vw,60px);
  align-items:start;
}
/* Explicit rows: notices and the shipping bar stay above the table, which would
   otherwise auto-place them after the explicitly positioned cart columns. */
.woocommerce-cart .woocommerce-notices-wrapper{grid-column:1/-1;grid-row:1;}
.woocommerce-cart .ship-bar{grid-column:1/-1;grid-row:2;}
.woocommerce-cart .woocommerce-cart-form{grid-column:1;grid-row:3;}
/* Lets .cart_totals and .cross-sells place themselves on the page grid. */
.woocommerce-cart .cart-collaterals{display:contents;}
.woocommerce-cart .cart_totals{
  grid-column:2;grid-row:3;margin:0;
  background:var(--nude);padding:clamp(22px,2.6vw,30px);
  position:sticky;top:calc(var(--header-h) + 18px);
}
.woocommerce-cart .cross-sells{grid-column:1/-1;grid-row:4;margin-top:clamp(30px,5vw,64px);}
.woocommerce-cart .cart_totals h2{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}
.woocommerce-cart .cart_totals .checkout-button{width:100%;margin-top:18px;}
.woocommerce-cart .actions .coupon{display:flex;gap:10px;flex-wrap:wrap;}

/* --- Checkout: fields left, sticky order summary right --------------------- */
.woocommerce-checkout form.checkout{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(300px,.8fr);
  grid-template-rows:auto 1fr;
  gap:6px clamp(30px,4.5vw,66px);
  align-items:start;
}
.woocommerce-checkout form.checkout > #customer_details{grid-column:1;grid-row:1/span 2;}
.woocommerce-checkout form.checkout > #order_review_heading{grid-column:2;grid-row:1;margin:0 0 16px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.woocommerce-checkout form.checkout > #order_review{
  grid-column:2;grid-row:2;align-self:start;
  background:var(--nude);padding:clamp(22px,2.6vw,30px);
  position:sticky;top:calc(var(--header-h) + 18px);
}
.woocommerce-checkout #customer_details .col2-set{display:grid;gap:clamp(24px,3vw,38px);}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{width:auto;float:none;}
.woocommerce-checkout #order_review .shop_table{margin-bottom:18px;}
.woocommerce-checkout #payment{background:transparent;}
.woocommerce-checkout #payment ul.payment_methods{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px;}
.woocommerce-checkout #payment ul.payment_methods li{border:1px solid var(--line);background:var(--white);padding:14px 16px;font-size:13.5px;}
.woocommerce-checkout #payment div.payment_box{background:transparent;padding:10px 0 0;font-size:13px;color:var(--ink-soft);}
.woocommerce-checkout #payment div.payment_box::before{display:none;}
.woocommerce-checkout #place_order{width:100%;}
.woocommerce form .form-row{display:grid;gap:6px;margin:0 0 16px;}
.woocommerce form .form-row label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row .select2-container .select2-selection,
.woocommerce form .form-row select{
  border:1px solid var(--line);background:var(--white);padding:14px 16px;font-size:14px;width:100%;border-radius:0;height:auto;
}
.woocommerce form .form-row input.input-text:focus{border-color:var(--ink);outline:none;}
#payment{background:transparent;}
#payment ul.payment_methods{border:none;padding:0;margin:0 0 18px;}
#payment ul.payment_methods li{border-bottom:1px solid var(--line);padding:14px 0;list-style:none;}
#payment div.payment_box{background:var(--white);border:1px solid var(--line);padding:14px 16px;font-size:13px;margin-top:10px;}
#payment div.payment_box::before{display:none;}

.woocommerce-MyAccount-navigation ul{display:grid;gap:4px;}
.woocommerce-MyAccount-navigation a{display:block;padding:13px 16px;border:1px solid var(--line);font-size:12px;letter-spacing:.12em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s;}
.woocommerce-MyAccount-navigation li.is-active a,.woocommerce-MyAccount-navigation a:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
/* My Account: nav rail + content, on WooCommerce's own markup. */
.woocommerce-account .woo-page .woocommerce{
  display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:start;
}
.woocommerce-account .woocommerce-notices-wrapper{grid-column:1/-1;}
/* The logged-out form is a single centred card, not a two-column dashboard. */
.woocommerce-account:not(.logged-in) .woo-page .woocommerce{grid-template-columns:minmax(0,1fr);max-width:480px;margin-inline:auto;}

/* Order-received page: the branded "Thank you" summary and the WhatsApp
   confirmation card (plus WooCommerce's own order table) stack with the
   WhatsApp card first on mobile — it's the thing that actually needs action
   — then sit side by side on desktop with WhatsApp on the left and the
   summary on the right. Flex `order` (not DOM order) drives this so the
   markup itself doesn't need to change per breakpoint. */
.order-received-layout{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px);}
.order-received-layout .order-detail{order:1;}
.order-received-layout .order-confirmed{order:2;}

@media (min-width:900px){
  .order-received-layout{flex-direction:row;align-items:flex-start;}
  .order-received-layout .order-detail,
  .order-received-layout .order-confirmed{flex:1 1 0;min-width:0;max-width:none;margin:0;}
}

.order-confirmed{
  text-align:center;max-width:620px;margin:0 auto clamp(40px,6vw,72px);
  background:var(--nude);padding:clamp(32px,5vw,56px) clamp(24px,4vw,48px);
}
.order-confirmed__mark{width:64px;height:64px;border:1px solid var(--champagne);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;color:var(--champagne);}
.order-confirmed__mark--failed{border-color:var(--sale);color:var(--sale);}
.order-confirmed h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:12px;}
.order-confirmed__lede{color:var(--ink-soft);font-size:15px;margin-bottom:28px;}
.order-confirmed__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px;}

.order-facts{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);text-align:left;}
.order-facts li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;background:var(--ivory);padding:14px 18px;}
.order-facts span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.order-facts strong{font-weight:400;font-size:14.5px;color:var(--ink);text-align:right;}

/* The order table / addresses WooCommerce prints under the confirmation. */
.order-detail{max-width:860px;margin-inline:auto;}
.order-detail h2,.order-detail h3{font-size:clamp(20px,2.4vw,26px);margin-bottom:16px;}
.order-detail .woocommerce-columns--addresses{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(28px,4vw,48px);}
.order-detail address{font-style:normal;font-size:14px;line-height:1.8;color:var(--ink-soft);}

/* Logged-out account form reads as a single card. */
.woocommerce-account:not(.logged-in) .woo-page h1{text-align:center;}
.woocommerce-account:not(.logged-in) .woocommerce form.login,
.woocommerce-account:not(.logged-in) .woocommerce form.register{
  border:1px solid var(--line);background:var(--white);padding:clamp(26px,4vw,40px);margin:0;
}
.woocommerce-account:not(.logged-in) .woocommerce form.login h2{display:none;}
.woocommerce-account:not(.logged-in) .woocommerce form.login button[type="submit"]{width:100%;}

/* ==========================================================================
   Entry content (pages / posts)
   ========================================================================== */
.entry{max-width:760px;margin-inline:auto;padding:clamp(34px,5vw,70px) 0 clamp(56px,7vw,100px);}
.entry h1{margin-bottom:26px;}
.entry :where(p,ul,ol){font-size:15.5px;color:var(--ink-soft);}
.entry ul{list-style:disc;padding-left:20px;}
.post-card__media{aspect-ratio:4/3;overflow:hidden;background:var(--nude);margin-bottom:16px;}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);}
.post-card:hover .post-card__media img{transform:scale(1.04);}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.is-in{opacity:1;transform:none;}
.reveal[data-delay="1"]{transition-delay:.08s;}
.reveal[data-delay="2"]{transition-delay:.16s;}
.reveal[data-delay="3"]{transition-delay:.24s;}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Nav items drop out in order of importance as the bar runs out of room.
   Index order: Reviews, Protection, Track, Connect, Login, My Order, Blog. */
/* Order: Shop, Contact, Track Order, Let's Connect, Account Login,
   My Order, Blog. "Let's Connect" goes first — Contact covers the same need.
   Shop is never hidden: it's the primary commercial link. */
@media (max-width:1330px){
  .nav__list > li:nth-child(4){display:none;} /* Let's Connect */
}
@media (max-width:1180px){
  .nav__list > li:nth-child(7){display:none;} /* Blog */
}
@media (max-width:1090px){
  .nav__list > li:nth-child(3){display:none;} /* Track Order */
}

@media (max-width:1100px){
  .mega__inner{grid-template-columns:repeat(3,1fr);}
  .mega__promo{display:none;}
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  ul.products,ul.products.columns-4,ul.products.columns-5,ul.products.columns-6{grid-template-columns:repeat(3,minmax(0,1fr));}
  .shop-layout{grid-template-columns:210px 1fr;}
  .catshow__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:980px){
  :root{--header-h:64px;}
  /* Everything collapses into the Menu pill + icon row. */
  .nav,.header__actions .desktop-only{display:none;}
  .site-header{padding-top:10px;margin-bottom:-30px;}
  .header__bar{min-height:62px;padding:0 10px 0 16px;border-radius:26px;gap:10px;}
  .brand{font-size:19px;}
  .brand small{font-size:7px;letter-spacing:.28em;}
  .menu-pill{margin-left:auto;}
  .icon-btn{width:38px;height:38px;}
  .product-main{grid-template-columns:1fr;}
  .gallery{position:static;grid-template-columns:1fr;}
  .gallery__thumbs{flex-direction:row;max-height:none;overflow-x:auto;}
  .gallery__thumbs button{flex:0 0 72px;}
  .editorial{grid-template-columns:1fr;}
  .editorial--reverse .editorial__media{order:0;}
  .hp__inner{grid-template-columns:minmax(0,1fr);}
  .nl__panel{grid-template-columns:minmax(0,1fr);}
  .qv__panel{grid-template-columns:1fr;max-height:92vh;}
  .qv__media{aspect-ratio:4/3;}
  .woocommerce-cart .woo-page .woocommerce,
  .woocommerce-checkout form.checkout,
  .woocommerce-account .woo-page .woocommerce{grid-template-columns:minmax(0,1fr);}
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart_totals,
  .woocommerce-checkout form.checkout > #customer_details,
  .woocommerce-checkout form.checkout > #order_review_heading,
  .woocommerce-checkout form.checkout > #order_review{grid-column:1;grid-row:auto;position:static;}
  .woocommerce-checkout form.checkout{grid-template-rows:none;gap:26px;}
  .woocommerce-checkout form.checkout > #order_review_heading{margin-top:12px;}
  .sticky-buy{display:flex;}
  body.single-product{padding-bottom:78px;}
  /* Clear the sticky purchase bar so the two controls never overlap. */
  body.single-product .wa-float{bottom:92px;}
}

@media (max-width:760px){
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .cat-card:nth-child(1){grid-row:span 1;aspect-ratio:3/4;}
  /* Two columns, not one — a full-width category card wastes most of a phone
     screen for a single tap target. Compact panel/media sizing below keeps
     the shorter card from looking sparse at this width. */
  .catshow__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .catcard{border-radius:18px;}
  .catcard__media{aspect-ratio:1/1;}
  .catcard__panel{margin:7px;padding:9px 10px;border-radius:12px;gap:8px;}
  .catcard__name{font-size:13px;}
  .catcard__sub{font-size:10.5px;margin-top:1px;}
  .catcard__go{width:30px;height:30px;}
  .catcard__go svg{width:15px;height:15px;}
  .catshow__spark{display:none;}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  ul.products,ul.products[class*="columns-"]{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* Below tablet width the horizontal slider becomes a plain 2-column grid —
     every trending/bestseller product is visible while scrolling the page
     instead of hidden behind a swipe, matching the shop grid's own layout. */
  .product-rail__track{
    display:grid;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;overflow-x:visible;scroll-snap-type:none;padding-bottom:0;
  }
  .rail-nav{display:none;}
  .value-bar__grid{grid-template-columns:repeat(2,1fr);border-radius:18px;}
  .value-bar__item{padding:16px 14px;gap:10px;}
  .value-bar__item:nth-child(odd){border-left:none;}
  .value-bar__item:nth-child(n+3){border-top:1px solid var(--line);}
  .value-bar__icon{flex:0 0 38px;width:38px;height:38px;}
  .value-bar__icon svg{width:18px;height:18px;}
  .value-bar__text strong{font-size:12.5px;}
  .value-bar__text small{font-size:10.5px;}
  .footer__grid{grid-template-columns:repeat(2,1fr);}
  .footer__col--brand,.footer__col--contact{grid-column:1/-1;}
  .trust-strip{grid-template-columns:1fr;}
  .trust-strip__col:first-child,.trust-strip__col:last-child{grid-column:1;grid-row:auto;}
  .trust-strip::after{display:none;}
  .shop-layout{grid-template-columns:1fr;}
  .shop-filters{position:fixed;inset:0 auto 0 0;width:min(86vw,340px);background:var(--ivory);z-index:430;padding:24px var(--gutter);overflow-y:auto;transform:translateX(-100%);transition:transform .45s var(--ease);}
  .shop-filters.is-open{transform:none;}
  .filter-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:10px 16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;}
  .contact{grid-template-columns:minmax(0,1fr);}
  .cform__grid{grid-template-columns:minmax(0,1fr);}
  .order-detail .woocommerce-columns--addresses{grid-template-columns:1fr;}
  .previews__grid{grid-template-columns:minmax(0,1fr);}
  .previews__form{position:static;}
  .previews__summary{grid-template-columns:minmax(0,1fr);}
  .rating-summary{grid-template-columns:1fr;text-align:center;}
  .rating-bars{margin-inline:auto;}
  .pcard__buynow{font-size:12px;}
  .pcard__qv{flex:0 0 42px;width:42px;}
  .pcard .pcard__buy .button{font-size:11.5px;letter-spacing:.04em;padding:12px 10px;}

  /* Stack the hero: photo first, copy beneath it. */
  .hero__slide{grid-template-columns:1fr;min-height:0;}
  .hero__slide.is-active{display:flex;flex-direction:column-reverse;}
  .hero__media{aspect-ratio:4/3;}
  .hero__copy{padding:34px var(--gutter) clamp(54px,12vw,72px);}
  .hero__copy h1{max-width:none;}
  .hero__nav{display:none;}
  .hero__dots{bottom:20px;left:50%;transform:translateX(-50%);}

  /* Banner slider keeps its own rules — it never stacks.
     max-height is cleared here: combined with aspect-ratio it caps the height
     first and then shrinks the *width* to match, pillarboxing the slide. */
  /* Campaign banners are supplied at roughly 16:9 with text running to the
     edges, so the box matches that ratio — cropping them to a taller shape
     cuts the headline off. Supply a portrait "mobile" image per slide in the
     Customizer to get a taller hero on phones. */
  .hero-wrap{padding-inline:12px;}
  .hero--banners{
    border-radius:20px;
    aspect-ratio:16/9;
    min-height:0;max-height:none;
  }
  .hero--banners .hero__slide.is-active{display:block;}
  .hero--banners .hero__arrow{width:38px;height:38px;}
  .hero--banners .hero__arrow svg{width:19px;height:19px;}
  .hero--banners .hero__dots{bottom:12px;padding:6px 10px;}
  .hero__caption{left:18px;right:18px;bottom:52px;max-width:none;}

  /* Compact marquee. */
  .announce__item{height:38px;padding:0 16px;gap:9px;}
  .announce__item::after{margin-left:16px;}
  .announce__text{font-size:12.5px;}
  .announce__btn{padding:5px 13px;font-size:10.5px;}
}

@media (max-width:520px){
  .hero--banners{aspect-ratio:16/9;min-height:0;max-height:none;}
  .menu-pill span{display:none;}
  .menu-pill{padding:0 13px;margin-left:auto;}
  .header__actions{margin-left:6px;}
  .menu-panel__cats{grid-template-columns:1fr;}
  .value-bar__grid{grid-template-columns:repeat(2,1fr);}
  .value-bar__item:nth-child(odd){border-left:none;}
  .value-bar__item:nth-child(n+3){border-top:1px solid var(--line);}
  .value-bar__item:nth-child(5){grid-column:1/-1;border-left:none;}
  .nl__field{flex-direction:column;}
  .nl__field button{width:100%;}
  .hp__cta{flex-direction:column;}
  .hp__cta .button,.hp__cta .btn--ghost{width:100%;}
  .footer__grid{grid-template-columns:1fr;}
  .footer__about{max-width:none;}
  .footer__bar-inner{text-align:center;gap:6px 10px;}
  .quote-rail{grid-auto-columns:minmax(80vw,1fr);}
  /* Below ~520px the paired 160px-min buttons no longer fit next to the
     quantity stepper — flex-wrap can't rescue it because a flex item's
     default min-width is its content size, not 0, so the row overflowed
     the viewport instead of wrapping. Stack full-width instead. */
  .psummary form.cart{flex-direction:column;}
  .psummary form.cart .quantity{width:100%;}
  .psummary form.cart .quantity .qty{width:100%;}
  .psummary form.cart .single_add_to_cart_button,
  .psummary form.cart .ecrin-buy-now{width:100%;min-width:0;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .reveal{opacity:1;transform:none;}
  .announce__track{animation:none;}
}