/* ==========================================================================
   TERRA VERDE — theme.css
   Brand book: Midnight Violet #271732 · Soft Linen #E8DFD6 · Dry Sage #AEA989
   Secondary: Mist Grey #7F8888 · Soft Cream #F3EDDC · Bronze Earth #9C7C56
   Typeface: Montserrat (only). Light editorial luxury direction.
   ========================================================================== */

:root{
  --violet:#271732; --violet-2:#3a2350; --violet-soft:#4a3a57;
  --linen:#E8DFD6; --cream:#F3EDDC; --paper:#FAF7F1; --white:#FFFDF9;
  --sage:#AEA989; --sage-deep:#8f8b6c; --bronze:#9C7C56; --mist:#7F8888;
  --ink:#271732; --body:#514556; --muted:#8a7f8c;
  --line:rgba(39,23,50,.12); --line-strong:rgba(39,23,50,.22);
  --shadow:0 24px 60px -28px rgba(39,23,50,.45);
  --shadow-sm:0 10px 30px -18px rgba(39,23,50,.4);
  --maxw:1440px; --gutter:clamp(20px,5vw,64px); --r:16px;
  --f:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
/* 18px base: every rem-sized label, button and heading scales with it (owner: "make the font bigger") */
html{scroll-behavior:smooth;font-size:18px}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--f);
  font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;font-size:1rem;overflow-x:hidden;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{color:var(--ink);font-weight:300;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:4px}
.site-head :focus-visible{outline:2px solid var(--violet);outline-offset:2px;box-shadow:0 0 0 5px var(--linen)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap.narrow{max-width:820px}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--sage-deep);display:inline-block}
.section{padding-block:clamp(64px,9vw,120px)}
.tnum{font-variant-numeric:tabular-nums}
.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:-999px;top:0;z-index:200;background:var(--violet);color:var(--cream);padding:.7em 1.2em;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-size:.82rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:1.05em 2em;border-radius:100px;cursor:pointer;
  border:1px solid transparent;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .35s,color .35s,box-shadow .35s;white-space:nowrap;line-height:1}
.btn-solid{background:var(--violet);color:var(--cream)}
.btn-solid:hover{background:var(--violet-2);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-outline:hover{border-color:var(--violet);background:var(--violet);color:var(--cream);transform:translateY(-2px)}
.btn-cream{background:var(--cream);color:var(--violet)}
.btn-cream:hover{transform:translateY(-2px);box-shadow:0 14px 34px -18px rgba(0,0,0,.6)}
.btn-ghost-cream{background:transparent;color:var(--cream);border-color:rgba(243,237,220,.4)}
.btn-ghost-cream:hover{background:var(--cream);color:var(--violet);transform:translateY(-2px)}
.btn-frost{background:rgba(250,247,241,.14);color:var(--cream);border-color:rgba(243,237,220,.55);backdrop-filter:blur(6px)}
.btn-frost:hover{background:var(--cream);color:var(--violet);transform:translateY(-2px)}

/* ---------- announcement ---------- */
.announce{background:var(--violet);color:var(--cream)}
.announce .wrap{display:flex;justify-content:space-between;align-items:center;gap:1.5em;flex-wrap:wrap;padding-block:.7em;
  font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.announce span{opacity:.92;display:inline-flex;align-items:center;gap:.6em}
.announce .dot{width:4px;height:4px;border-radius:50%;background:var(--sage);flex:none}
.announce .ann-left{display:flex;align-items:center;gap:2.5em;flex-wrap:wrap}
.announce .ann-social{display:flex;align-items:center;gap:1.1em;flex:none}
.announce .ann-social a{display:inline-flex;color:var(--cream);opacity:.78;transition:opacity .25s}
.announce .ann-social a:hover,.announce .ann-social a:focus-visible{opacity:1}
.announce .ann-social .icon{width:17px;height:17px}
@media(max-width:640px){
  .announce .wrap{justify-content:center;gap:.9em}
  .announce .ann-left{justify-content:center;gap:1.2em}
}

/* ---------- header ---------- */
:root{--head-h:98px;--ann-h:34px;--top-h:calc(var(--head-h) + var(--ann-h))}
@media(max-width:640px){:root{--head-h:80px}}
html.no-announce{--ann-h:0px}
/* The announcement bar and the nav pin together, so the promo stays visible while scrolling.
   --top-h is their combined height (JS refines it from the real box); --head-h is the nav alone. */
.site-top{position:sticky;top:0;z-index:60}
/* Soft Linen (#E8DFD6) frosted header: translucent + blur so the page shows through */
.site-head{position:relative;top:auto;z-index:1;background:rgba(255,253,249,.86);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(39,23,50,.1);transition:box-shadow .3s,background .3s}
.site-head.scrolled{background:rgba(255,253,249,.95);box-shadow:0 8px 30px -22px rgba(39,23,50,.5)}
.admin-bar .site-top{top:32px}
@media screen and (max-width:782px){.admin-bar .site-top{top:46px}}
@media screen and (max-width:600px){.admin-bar .site-top{top:0}}
.nav{display:flex;align-items:center;gap:2rem;height:var(--head-h)}
.brand{display:inline-flex}
.brand img{height:72px;width:auto}
@media(max-width:640px){.brand img{height:56px}}
.nav-links{display:flex;align-items:center;gap:1.9rem;margin-left:auto;list-style:none;margin-block:0;padding:0}
.nav-links li{position:static}
.nav-links a{color:var(--ink);padding-block:.4em;position:relative;text-transform:uppercase;font-size:.74rem;letter-spacing:.12em;font-weight:500}
.nav-links>li>a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--bronze);transition:width .3s}
.nav-links>li:hover>a::after{width:100%}
.nav-icons{display:flex;align-items:center;gap:1.15rem}
.nav-icons button,.nav-icons a{background:none;border:0;cursor:pointer;color:var(--ink);display:inline-flex;padding:.2em}
/* the language button (AR on English pages, EN on Arabic ones): a small pill, on every
   screen size, printed by PHP only while the translation plugin is active */
.nav-icons .lang-switch{font-size:.66rem;font-weight:700;letter-spacing:.12em;line-height:1;padding:.55em .8em .5em;
  border:1px solid var(--line-strong);border-radius:100px;text-decoration:none;transition:background .25s,border-color .25s,color .25s}
.nav-icons .lang-switch:hover,.nav-icons .lang-switch:focus-visible{background:var(--violet);border-color:var(--violet);color:var(--cream)}
.icon{width:21px;height:21px}
.icon-lg{width:26px;height:26px}
.cart-wrap{position:relative}
.cart-count{position:absolute;top:-6px;right:-8px;background:var(--bronze);color:#fff;font-size:.58rem;
  font-weight:700;min-width:15px;height:15px;border-radius:9px;display:grid;place-items:center;padding:0 3px}

/* mega / dropdown */
.has-mega{position:static}
.mega,.nav-links .sub-menu{position:absolute;left:0;right:0;top:100%;background:var(--white);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.28s;z-index:55}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega-grid{max-width:var(--maxw);margin-inline:auto;padding:2.2rem var(--gutter);
  display:grid;grid-template-columns:repeat(3,1fr) 1.2fr;gap:1.6rem}
.mega-item{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .9rem;border-radius:12px;transition:background .25s}
.mega-item:hover{background:var(--paper)}
.mega-item .t{font-weight:600;color:var(--ink);font-size:.92rem;text-transform:none;letter-spacing:.01em}
.mega-item .c{font-size:.74rem;color:var(--muted);text-transform:none;letter-spacing:.01em}
.mega-cta{background:var(--violet);border-radius:14px;padding:1.5rem;color:var(--cream);display:flex;flex-direction:column;justify-content:center;gap:.4rem}
.mega-cta .t{font-size:1.05rem;color:var(--cream);font-weight:300}
.mega-cta .c{font-size:.76rem;opacity:.8}
.mega-cta a{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-top:.3rem}
/* Native WP submenu (when a menu is assigned) */
.nav-links .sub-menu{padding:1rem;min-width:220px;left:auto;right:auto;width:max-content}
.nav-links li:hover>.sub-menu{opacity:1;visibility:visible;transform:none}
.nav-links .sub-menu a{display:block;padding:.5em .8em;border-radius:8px;text-transform:none;letter-spacing:0;font-size:.85rem}
.nav-links .sub-menu a:hover{background:var(--paper)}

/* search overlay */
.search-overlay{position:fixed;inset:0;z-index:90;background:rgba(39,23,50,.62);backdrop-filter:blur(6px);
  display:grid;place-items:start center;padding-top:16vh;opacity:0;visibility:hidden;transition:.3s}
.search-overlay.open{opacity:1;visibility:visible}
.search-inner{position:relative;width:min(640px,90vw)}
.search-close{position:absolute;right:-6px;top:-46px;background:none;border:0;color:var(--cream);cursor:pointer}
.search-overlay form{display:flex;gap:.5rem;background:var(--white);border-radius:100px;padding:.5rem .6rem .5rem 1.4rem;box-shadow:var(--shadow)}
.search-overlay input[type=search],.search-overlay .search-field{flex:1;border:0;background:none;font-family:var(--f);font-size:1rem;color:var(--ink);outline:none}
.search-overlay button[type=submit]{background:var(--violet);color:var(--cream);border:0;border-radius:100px;padding:0 1.4rem;cursor:pointer}

/* mobile nav */
.nav-icons .hamburger{display:none}
.mobile-nav{position:fixed;inset:0;z-index:80;background:var(--violet);color:var(--cream);
  padding:2rem var(--gutter);transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:.4rem;overflow-y:auto}
.mobile-nav.open{transform:none}
.mobile-nav .mtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.mobile-nav .mtop img{height:40px;width:auto}
.mobile-nav .mtop .mbrand{display:inline-flex}
.m-close{background:none;border:0;color:var(--cream);cursor:pointer}
.mobile-links{display:flex;flex-direction:column}
.mobile-nav a,.mobile-links a{font-size:1.4rem;font-weight:300;padding:.7rem 0;border-bottom:1px solid rgba(243,237,220,.14);letter-spacing:.02em;color:var(--cream)}
.mobile-whatsapp{display:inline-flex!important;align-items:center;gap:.6em;font-size:.95rem!important;margin-top:1.4rem;border:0!important;color:var(--sage)!important}
.mobile-whatsapp .icon{width:20px;height:20px}

/* ---------- hero (cinematic image) ---------- */
.hero{position:relative;background:var(--violet)}
/* One screen tall and edge to edge, never tucked under the nav, and the photograph shown
   whole wherever the window is wide enough for it. Three layouts, one markup:
   - a wide window (16:9 and wider; the media block after .hero-cta): the frame is the
     photograph's own shape at the full height under the fold and sits at the right edge;
     the headline leaves the picture for the violet panel that takes the rest of the width.
   - a squarer window (this base rule): the frame fills the width, its height is capped at
     the fold, and the photograph is trimmed top and bottom to fit. object-position 44%
     keeps that trim on the band the products stand in - 22% to 73% of the height across
     all three bundled photographs - and gives up the wall above and the props below first.
   - a phone (the phone block): the whole photograph at full width, the headline beneath.
   --hero-ar is the photograph's shape, width over height: 1.5 for the bundled 3:2 ones,
   and PHP sets it from whatever the owner uploads. The floor stops the band collapsing on
   a very short window; its cap stops it overshooting the fold on an ultrawide monitor. */
.hero-media{--hero-ar:1.5;position:relative;width:100%;overflow:hidden;background:var(--violet)}
/* width pinned on purpose: with it auto, max-height would transfer to the width through the
   aspect ratio and the frame would shrink instead of trimming. The floor is low enough that a
   1366x768 laptop, with about 630px inside the browser, still ends at the fold. */
.hero-frame{position:relative;width:100%;aspect-ratio:var(--hero-ar);min-height:min(calc(60px + 30vw),680px);max-height:calc(100vh - var(--top-h))}
@supports (height:1svh){.hero-frame{max-height:calc(100svh - var(--top-h))}}
/* a browser without aspect-ratio (Safari 14 and older) would give the frame no height at all */
@supports not (aspect-ratio:1){.hero-frame{height:clamp(min(calc(60px + 30vw),680px),calc(100vw / var(--hero-ar)),calc(100vh - var(--top-h)))}}
.hero-stage{position:absolute;inset:0;overflow:hidden}
/* Up to three photographs stacked in the same frame; one is visible at a time and
   they cross-fade. With a single photograph nothing here moves. */
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 44%;display:block;
  z-index:0;opacity:0;transition:opacity 1.2s ease-in-out}
.hero-slide.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}
/* Bare chevrons on either edge step the photographs by hand; the clock then restarts
   from that photograph. No disc behind them - just the glyph with a soft shadow so it
   still reads over a pale patch of photo. PHP prints them only when there is more than
   one photograph. */
/* A third of the way down, not half: the headline block is anchored to the foot and on a
   short laptop window takes most of the height, so half way down lands on the pill. */
.hero-arrow{position:absolute;top:32%;z-index:3;transform:translateY(-50%);width:48px;height:48px;
  display:grid;place-items:center;padding:0;cursor:pointer;color:var(--cream);background:none;border:0;
  opacity:.85;filter:drop-shadow(0 1px 6px rgba(39,23,50,.65));transition:opacity .25s}
.hero-arrow svg{width:28px;height:28px;display:block}
.hero-arrow.prev{left:var(--gutter)}
.hero-arrow.next{right:var(--gutter)}
.hero-arrow:hover{opacity:1}
.hero-arrow:focus-visible{opacity:1;outline:2px solid var(--cream);outline-offset:2px;border-radius:50%}
/* the foot of the frame carries the headline now, so it is darkened further */
.hero-scrim{position:absolute;inset:0;pointer-events:none;z-index:1;background:
   radial-gradient(120% 105% at 6% 112%, rgba(39,23,50,.82), rgba(39,23,50,0) 58%),
   linear-gradient(0deg, rgba(39,23,50,.55), rgba(39,23,50,0) 46%),
   linear-gradient(100deg, rgba(250,247,241,.16), rgba(39,23,50,0) 40%)}
.hero-overlay{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(26px,5vw,62px) var(--gutter);
  display:flex;flex-direction:column;align-items:flex-start;gap:1.05rem;max-width:min(92%,620px)}
.hero-pill{display:inline-flex;align-items:center;background:transparent;color:var(--cream);
  font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:.62em 1.15em;border-radius:100px;border:1px solid rgba(243,237,220,.3);text-shadow:0 1px 8px rgba(39,23,50,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.hero-title{color:var(--cream);font-weight:300;letter-spacing:-.015em;line-height:1.1;max-width:min(100%,38vw);
  display:flex;flex-direction:column;text-shadow:0 2px 26px rgba(39,23,50,.6);margin:0}
.hero-title .l1{font-size:clamp(1.3rem,2.7vw,3.1rem)}
.hero-title .l2{font-size:clamp(1.45rem,3.05vw,3.5rem);font-weight:700;color:var(--white)}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
/* The wide-window layout. The gate is the viewport's shape rather than its width: from 16:9
   on, a 3:2 photograph at the full height under the fold leaves roughly 0.28 x the viewport
   height + 205px beside it, 380px and more on real laptops. The frame's width is its height
   times the ratio, never more than the band; the overlay stops being absolute and becomes
   the panel, first in the row, taking whatever width is left. The panel keeps a minimum for
   the headline and the chevron beside it, and the frame gives way by that little on the
   narrowest windows the gate admits, or to a photograph wider than the band. The headline is
   sized from the panel, not the window (container units; the window sizes stand in where a
   browser lacks them), because the panel shrinks as the window gets taller while the window
   does not. Below 901px the phone block owns every window this gate could otherwise catch. */
@media(min-width:901px) and (min-aspect-ratio:16/9){
  .hero-media{display:flex;align-items:stretch}
  .hero-frame{order:1;flex:0 1 auto;align-self:flex-start;min-width:0;min-height:0;max-height:none;
    width:min(100%,calc(max(calc(100vh - var(--top-h)),min(calc(60px + 30vw),680px)) * var(--hero-ar)))}
  @supports (height:1svh){.hero-frame{width:min(100%,calc(max(calc(100svh - var(--top-h)),min(calc(60px + 30vw),680px)) * var(--hero-ar)))}}
  @supports not (aspect-ratio:1){.hero-frame{height:max(calc(100vh - var(--top-h)),min(calc(60px + 30vw),680px))}}
  .hero-scrim{display:none}
  .hero-overlay{position:static;order:0;flex:1 1 0%;min-width:min(420px,42%);max-width:none;justify-content:center;
    padding:clamp(26px,4vw,62px) var(--gutter);container-type:inline-size}
  /* 1cqw is 1% of the panel's inner width; the headline column is that less the chevron's 64px */
  .hero-title .l1{font-size:clamp(1.1rem,7.6cqw,3.1rem)}
  .hero-title .l2{font-size:clamp(1.25rem,9cqw,3.5rem)}
  /* The left chevron leaves the photograph for the panel, beside the words, and the right one
     keeps the photograph's right edge; both half way down, level with the headline. The stage
     lets the left one out. The pill and the headline stop short of it; the buttons sit at the
     foot of the block, below its height, and keep the full width. */
  .hero-stage{overflow:visible}
  .hero-arrow{top:50%}
  .hero-arrow.prev{left:auto;right:calc(100% + var(--gutter))}
  .hero-title{max-width:calc(100% - 64px);text-shadow:none}
  /* the pill may wrap on the narrowest panel; its shadow and blur were for reading over a photograph */
  .hero-pill{max-width:calc(100% - 64px);white-space:normal;text-align:left;line-height:1.5;text-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* free shipping is a feature, not a footnote */
.tv-free{display:inline-block;background:rgba(174,169,137,.28);color:var(--ink);
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.3em .8em;border-radius:100px;border:1px solid rgba(156,124,86,.35);line-height:1.2}

/* ---------- trust strip ---------- */
.trust{background:var(--white);border-block:1px solid var(--line)}
.trust .wrap{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-block:1.4rem}
.trust-item{display:flex;align-items:center;gap:.7em;font-size:.78rem;font-weight:500;letter-spacing:.03em;color:var(--ink)}
.trust-item .icon{width:22px;height:22px;stroke:var(--bronze);flex:none}

/* ---------- section heading ---------- */
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:300}
.sec-head .lead{color:var(--muted);max-width:52ch;margin:.7rem auto 0;font-size:.95rem}
.sec-link{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;border-bottom:1px solid var(--line-strong);padding-bottom:.3em}
.sec-link .icon{width:15px;height:15px}
.sec-link:hover{color:var(--bronze);border-color:var(--bronze)}

/* ---------- collection ---------- */
/* two across; an odd last card (Infinity) takes the whole row */
.coll-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}
.coll-grid>.coll-card:last-child:nth-child(odd){grid-column:1/-1}
.coll-grid .coll-stage{height:280px}
.coll-grid .coll-stage img{height:260px}
.coll-grid>.coll-card:last-child:nth-child(odd) .coll-stage{height:340px}
.coll-grid>.coll-card:last-child:nth-child(odd) .coll-stage img{height:320px}
.coll-card{position:relative;background:radial-gradient(120% 80% at 50% 12%, var(--white), var(--linen) 120%);
  border:1px solid var(--line);border-radius:var(--r);padding:1.8rem 1.6rem 1.6rem;overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .5s;display:flex;flex-direction:column;color:inherit}
.coll-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.coll-badge{align-self:flex-start;font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--violet);background:rgba(174,169,137,.24);padding:.4em .8em;border-radius:100px}
.coll-stage{height:210px;display:grid;place-items:center;margin:.4rem 0}
.coll-stage img{height:200px;width:auto;object-fit:contain;filter:drop-shadow(0 22px 22px rgba(39,23,50,.24));transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.coll-card:hover .coll-stage img{transform:translateY(-6px) scale(1.05)}
.coll-name{font-size:1.35rem;font-weight:300;color:var(--ink);margin-bottom:.15rem}
.coll-desc{font-size:.82rem;color:var(--muted);margin-bottom:1rem;min-height:2.4em}
.coll-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem .8rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--line)}
.coll-price{font-size:.9rem;color:var(--ink);font-weight:500}
.coll-price .amount,.coll-price bdi{font-weight:600;white-space:nowrap}
/* "Buy one": the card's call to action, so it reads as a button and not an ornament */
.coll-arrow{display:inline-flex;align-items:center;gap:.5em;height:36px;padding:0 .95em 0 1.1em;border-radius:100px;border:1px solid var(--line-strong);
  font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap;transition:.35s;flex:none}
.coll-arrow .icon{width:15px;height:15px}
.coll-card:hover .coll-arrow{background:var(--violet);border-color:var(--violet);color:var(--cream)}
.coll-badges{display:flex;justify-content:space-between;align-items:flex-start;gap:.4rem;flex-wrap:wrap}
.coll-badge.is-best{background:var(--bronze);color:#fff}

/* ---------- bestsellers (two picks above the collection) ---------- */
.best{background:var(--linen)}
.best-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;max-width:1040px;margin-inline:auto}
.best .coll-card{padding:2rem 1.8rem 1.8rem}
.best .coll-stage{height:260px}
.best .coll-stage img{height:250px}
.best .coll-name{font-size:1.6rem}
/* ...and three bestseller scents under them */
.best-scents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;max-width:1040px;margin:1.6rem auto 0}
@media(max-width:560px){.best-grid{grid-template-columns:1fr}.best .coll-stage{height:200px}.best .coll-stage img{height:190px}
  .best-scents{grid-template-columns:1fr 1fr;gap:.9rem;margin-top:.9rem}
  .best-scents>.scent2:last-child:nth-child(odd){grid-column:1/-1}
  .best-scents>.scent2:last-child:nth-child(odd) .scent2-img{aspect-ratio:2/.9}}

/* ---------- product cards (home + shop) ---------- */
.feat{background:var(--linen)}
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;list-style:none;margin:0;padding:0}
.pcard{background:var(--white);border-radius:var(--r);border:1px solid var(--line);overflow:hidden;
  transition:transform .45s,box-shadow .45s;display:flex;flex-direction:column;margin:0}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.pcard-stage{position:relative;height:260px;display:grid;place-items:center;background:radial-gradient(110% 80% at 50% 20%,var(--paper),var(--linen));padding:1rem}
.pcard-stage img{height:220px;width:auto;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(39,23,50,.22));transition:transform .5s}
.pcard:hover .pcard-stage img{transform:scale(1.06)}
.pcard-tag{position:absolute;top:12px;left:12px;font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--violet);color:var(--cream);padding:.35em .7em;border-radius:100px;z-index:2}
.pcard-sale{position:absolute;top:12px;right:12px;font-size:.62rem;font-weight:700;letter-spacing:.05em;background:var(--bronze);color:#fff;padding:.35em .6em;border-radius:100px;z-index:2}
.pcard-oos{position:absolute;bottom:12px;left:12px;font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--mist);color:#fff;padding:.3em .6em;border-radius:100px;z-index:2}
.pcard-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.pcard-rate{display:flex;align-items:center;gap:.4em;font-size:.72rem;color:var(--muted)}
.stars{color:var(--bronze);letter-spacing:.08em;font-size:.8rem}
.stars-empty{color:var(--line-strong)}
.pcard-name{font-size:1.05rem;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.pcard-cov{font-size:.74rem;color:var(--muted)}
.pcard-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:.9rem;gap:.6rem}
.pcard .price{min-width:0}
.pcard-add{margin-left:auto}   /* keeps the + button on the right when the foot wraps */
.price{font-size:1.02rem;font-weight:600;color:var(--ink)}
.price del,.price s{font-size:.78rem;color:var(--muted);font-weight:400;margin-right:.4em;text-decoration:line-through}
.pcard .price del,.pcard .price s{display:block;margin-right:0;font-size:.72rem;line-height:1.3}
.price ins{text-decoration:none}
.pcard .pcard-add .button,.pcard .pcard-add a.button{width:38px;height:38px;padding:0;border-radius:50%;background:var(--violet);color:transparent;
  display:grid;place-items:center;border:0;position:relative;font-size:0;transition:.3s;min-width:0;box-shadow:none;letter-spacing:0}
.pcard .pcard-add .button::after{content:"+";color:var(--cream);font-size:1.3rem;font-weight:300;line-height:1}
.pcard .pcard-add .button:hover{background:var(--bronze);transform:scale(1.08)}
.pcard .pcard-add .button.loading{opacity:.6}
.pcard .pcard-add .added_to_cart{display:none}

/* ---------- story band ---------- */
.story{background:var(--violet);color:var(--cream);position:relative;overflow:hidden}
.story .wrap{position:relative;z-index:2;text-align:center;max-width:840px;padding-block:clamp(72px,10vw,130px)}
.story .mono{height:88px;margin:0 auto 2rem;opacity:.95;width:auto}
.story .eyebrow{color:var(--sage)}
.story h2{color:var(--cream);font-size:clamp(2rem,4.4vw,3.4rem);font-weight:200;margin:1rem 0 1.4rem;line-height:1.1}
.story h2 em{font-style:italic;color:var(--sage)}
.story p{color:rgba(243,237,220,.78);font-size:1.02rem;max-width:56ch;margin:0 auto 2.2rem}
.story-smoke{position:absolute;inset:0;z-index:1;opacity:.5;background:
   radial-gradient(40% 60% at 20% 30%, rgba(174,169,137,.16), transparent 70%),
   radial-gradient(40% 60% at 80% 70%, rgba(156,124,86,.14), transparent 70%)}

/* ---------- features ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.fcard{padding:2rem 1.5rem;border:1px solid var(--line);border-radius:var(--r);background:var(--white);transition:.4s}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.fcard .ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(174,169,137,.2);margin-bottom:1.1rem}
.fcard .ic .icon{width:24px;height:24px;stroke:var(--violet)}
.fcard h3{font-size:1.05rem;font-weight:600;margin-bottom:.5rem}
.fcard p{font-size:.84rem;color:var(--muted);line-height:1.6}

/* ---------- scents ---------- */
.scents{background:var(--cream)}
.chips{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2.4rem}
.chip{font-size:.74rem;font-weight:500;letter-spacing:.06em;padding:.6em 1.2em;border-radius:100px;
  border:1px solid var(--line-strong);color:var(--ink);cursor:pointer;transition:.3s;background:transparent;display:inline-block}
.chip:hover,.chip.active{background:var(--violet);color:var(--cream);border-color:var(--violet)}
.scent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.scent-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem 1.5rem;position:relative;overflow:hidden;transition:.4s}
.scent-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.scent-card .fam{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep)}
.scent-card h3{font-size:1.3rem;font-weight:300;margin:.5rem 0 .8rem}
.scent-card .notes{font-size:.8rem;color:var(--muted);line-height:1.6}
.scent-card .wm{position:absolute;right:-14px;bottom:-14px;height:96px;width:auto;opacity:.06}
.scent-card .from{margin-top:1.2rem;font-size:.82rem;color:var(--ink);font-weight:500}

/* ---------- b2b ---------- */
.b2b{background:var(--violet);color:var(--cream)}
.b2b-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;padding-block:clamp(60px,8vw,110px)}
.b2b .eyebrow{color:var(--sage)}
.b2b h2{color:var(--cream);font-size:clamp(1.9rem,3.8vw,3rem);font-weight:200;margin:1rem 0 1.3rem}
.b2b p{color:rgba(243,237,220,.78);margin-bottom:1rem;max-width:48ch}
.b2b .quote{border-left:2px solid var(--sage);padding-left:1.2rem;font-style:italic;color:var(--cream);margin:1.6rem 0 2rem;font-size:1.05rem}
.b2b-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.b2b-stat{background:rgba(243,237,220,.06);border:1px solid rgba(243,237,220,.14);border-radius:14px;padding:1.4rem 1.2rem}
.b2b-stat .n{font-size:1.9rem;font-weight:200;color:var(--cream);line-height:1}
.b2b-stat .l{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);margin-top:.5rem}
.clients{border-top:1px solid rgba(243,237,220,.14);margin-top:clamp(40px,6vw,64px);padding-top:2rem}
.clients .lab{text-align:center;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sage);margin-bottom:1.5rem}
.clients-row{display:flex;justify-content:center;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;
  font-size:.9rem;font-weight:600;letter-spacing:.1em;color:rgba(243,237,220,.55);text-transform:uppercase}

/* ---------- newsletter ---------- */
.news{background:var(--linen)}
.news .wrap{text-align:center;max-width:640px;padding-block:clamp(60px,8vw,100px)}
.news h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:300;margin-bottom:.8rem}
.news p{color:var(--muted);margin-bottom:2rem}
.news-form{display:flex;gap:.6rem;max-width:460px;margin:0 auto;flex-wrap:wrap}
.news-form input{flex:1;min-width:200px;padding:1.05em 1.4em;border:1px solid var(--line-strong);border-radius:100px;font-family:var(--f);font-size:.9rem;background:var(--white);color:var(--ink)}
.news-form input:focus{outline:none;border-color:var(--bronze)}

/* ---------- footer ---------- */
.foot{background:var(--violet);color:rgba(243,237,220,.72)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem;padding-block:clamp(56px,7vw,84px)}
.foot img.flogo{height:56px;width:auto;margin-bottom:1.3rem}
.foot .fbrand{display:inline-block}
.foot .tag{font-size:.85rem;line-height:1.7;max-width:32ch;color:rgba(243,237,220,.6)}
.foot h4{color:var(--cream);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.2rem}
.foot .foot-menu{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.7rem}
.foot .foot-menu a{font-size:.86rem;color:rgba(243,237,220,.7)}
.foot .foot-menu a:hover{color:var(--sage)}
.foot .contact{list-style:none;padding:0;margin:0}
.foot .contact li{font-size:.86rem;display:flex;gap:.7em;align-items:flex-start;margin-bottom:.8rem;color:rgba(243,237,220,.7)}
.foot .contact li a:hover{color:var(--sage)}
.foot .contact .icon{width:17px;height:17px;stroke:var(--sage);flex:none;margin-top:3px}
.socials{display:flex;gap:.7rem;margin-top:1.3rem}
.socials a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(243,237,220,.2);display:grid;place-items:center;transition:.3s;color:var(--cream)}
.socials a:hover{background:var(--sage);border-color:var(--sage)}
.socials .icon{width:17px;height:17px}
.foot-bar{border-top:1px solid rgba(243,237,220,.14);padding-block:1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.74rem;letter-spacing:.04em;color:rgba(243,237,220,.5)}
.foot-bar .pays{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.foot-bar .pay{border:1px solid rgba(243,237,220,.2);border-radius:6px;padding:.25em .6em;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}

/* ---------- generic pages / prose ---------- */
.tv-page .page-head{margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.tv-page .page-head h1{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:300}
.entry{font-size:1.02rem;line-height:1.8;color:var(--body)}
.entry>*+*{margin-top:1.2em}
.entry h2{font-size:1.6rem;font-weight:400;margin-top:2em}
.entry h3{font-size:1.25rem;font-weight:600;margin-top:1.6em}
.entry a{color:var(--bronze);text-decoration:underline;text-underline-offset:3px}
.entry ul,.entry ol{padding-left:1.3em}
.entry li{margin:.4em 0}
.entry blockquote{border-left:3px solid var(--sage);padding-left:1.2rem;color:var(--ink);font-style:italic}
.entry img{border-radius:12px}
.lead-center{max-width:60ch;margin-inline:auto;color:var(--muted)}
/* Store policies: each page carries its own brand tone (owner request). Both grounds
   are pale, so the body copy keeps the default ink and needs no override. */
.tv-page--shipping-policy{background:var(--linen)}
.tv-page--refund-policy{background:var(--white)}

/* ---------- corporate deals (design A: above-the-fold contact) ---------- */
.tv-corp{--corp-cream-soft:rgba(243,237,220,.74);--corp-hair:rgba(243,237,220,.22)}
.tv-corp .wrap{max-width:1160px}
.tv-corp .corp-hero{background:var(--violet);color:var(--cream);padding-block:clamp(52px,8vw,104px) clamp(52px,8vw,96px)}
.tv-corp .corp-hero-grid{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:center}
.tv-corp .corp-hero-copy{min-width:0}
.tv-corp .corp-hero .eyebrow{color:var(--sage)}
.tv-corp .corp-hero h1{color:var(--cream);font-weight:200;font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.1;margin:.75rem 0 1.1rem;max-width:16ch}
.tv-corp .corp-intro{color:var(--corp-cream-soft);font-weight:300;font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.7;max-width:46ch}
.tv-corp .corp-entry{color:var(--corp-cream-soft);margin-top:1rem;max-width:46ch}
.tv-corp .corp-contact{border:1px solid var(--corp-hair);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;gap:.9rem;min-width:0}
.tv-corp .corp-contact-label{display:inline-flex;align-items:center;gap:.55em;font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--sage)}
.tv-corp .corp-contact-label .icon{width:18px;height:18px;flex:none;stroke:var(--sage)}
.tv-corp .corp-number{display:block;align-self:flex-start;color:var(--cream);font-weight:200;font-size:clamp(1.8rem,2.9vw,2.1rem);line-height:1.1;letter-spacing:.02em;white-space:nowrap;overflow-wrap:anywhere;border-bottom:1px solid transparent;transition:border-color .3s}
.tv-corp .corp-number:hover{border-color:var(--sage)}
.tv-corp .corp-contact-note{color:var(--corp-cream-soft);font-weight:300;font-size:.9rem;line-height:1.6;max-width:36ch;margin-bottom:.4rem;text-wrap:pretty}
.tv-corp .corp-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.tv-corp .corp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;max-width:100%;padding:.9em 1.2em;border-radius:100px;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;text-align:center;border:1px solid transparent;transition:background .3s,color .3s,border-color .3s}
.tv-corp .corp-btn .icon{width:18px;height:18px;flex:none}
.tv-corp .corp-btn-cream{background:var(--cream);color:var(--violet);border-color:var(--cream)}
.tv-corp .corp-btn-cream:hover{background:var(--white);border-color:var(--white)}
.tv-corp .corp-btn-outline{color:var(--cream);border-color:rgba(243,237,220,.45)}
.tv-corp .corp-btn-outline:hover{background:rgba(243,237,220,.1);border-color:var(--cream)}
.tv-corp .corp-btn-violet{background:var(--violet);color:var(--cream);border-color:var(--violet)}
.tv-corp .corp-btn-violet:hover{background:var(--violet-2);border-color:var(--violet-2)}
.tv-corp .corp-btn-line{color:var(--violet);border-color:var(--line-strong)}
.tv-corp .corp-btn-line:hover{background:var(--white);border-color:var(--violet)}
.tv-corp .corp-why{background:var(--paper);padding-block:clamp(64px,9vw,120px)}
.tv-corp .corp-head{text-align:center;margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.tv-corp .corp-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-top:.6rem}
.tv-corp .corp-perks{list-style:none;margin:0 auto;padding:0;max-width:720px;border-top:1px solid var(--line)}
.tv-corp .corp-perks li{display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;align-items:start;padding:1.35rem 0;border-bottom:1px solid var(--line)}
.tv-corp .corp-perks .icon{width:26px;height:26px;stroke:var(--bronze);grid-row:1/3;margin-top:.15em}
.tv-corp .corp-perks h3{font-size:1.02rem;font-weight:500;color:var(--ink);letter-spacing:0;line-height:1.3}
.tv-corp .corp-perks p{font-size:.9rem;color:var(--body);line-height:1.6;margin-top:.3rem}
.tv-corp .corp-close{background:var(--cream);border-top:1px solid var(--line);padding-block:clamp(64px,9vw,112px)}
.tv-corp .corp-close .wrap{max-width:820px;text-align:center}
.tv-corp .corp-close h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-top:.6rem}
.tv-corp .corp-lines{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem 0;margin:2rem 0 2.2rem;padding:0}
.tv-corp .corp-lines div{display:flex;flex-direction:column;gap:.2rem;min-width:0;max-width:100%;padding-inline:1.5rem}
.tv-corp .corp-lines div+div{border-left:1px solid var(--line-strong)}
.tv-corp .corp-lines dt{font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--body)}
.tv-corp .corp-lines dd{margin:0;font-size:clamp(1.1rem,2vw,1.45rem);font-weight:300;color:var(--ink);line-height:1.3;overflow-wrap:anywhere}
.tv-corp .corp-lines dd a{border-bottom:1px solid var(--line-strong);transition:border-color .3s;padding-bottom:.05em}
.tv-corp .corp-lines dd a:hover{border-color:var(--bronze)}
.tv-corp .corp-close .corp-actions{justify-content:center}
@media(min-width:900px){.tv-corp .corp-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2.5rem,6vw,5.5rem)}}
@media(min-width:1120px){
  .tv-corp .corp-perks{max-width:none;display:grid;grid-template-columns:repeat(5,1fr);border-top:0;border-bottom:0}
  .tv-corp .corp-perks li{display:block;padding:.4rem 1rem .6rem;border-bottom:0;border-left:1px solid var(--line)}
  .tv-corp .corp-perks li:first-child{border-left:0;padding-left:0}
  .tv-corp .corp-perks li:last-child{padding-right:0}
  .tv-corp .corp-perks .icon{margin:0 0 1rem}
  .tv-corp .corp-perks h3{font-size:.98rem;text-wrap:pretty}
  .tv-corp .corp-perks p{font-size:.86rem;margin-top:.45rem}
}
@media(max-width:760px){
  .tv-corp .corp-lines{flex-direction:column;align-items:center}
  .tv-corp .corp-lines div{padding-inline:0;align-items:center;text-align:center}
  .tv-corp .corp-lines div+div{border-left:0;border-top:1px solid var(--line-strong);padding-top:1.1rem}
}
@media(max-width:560px){
  .tv-corp .corp-actions{flex-direction:column;align-items:stretch}
  .tv-corp .corp-btn{width:100%;font-size:.7rem;letter-spacing:.09em;padding:.9em 1em}
  .tv-corp .corp-perks .icon{width:24px;height:24px}
  .tv-corp .corp-perks h3{font-size:1rem}
  .tv-corp .corp-perks p{font-size:.9rem}
}
.tv-empty{color:var(--muted);text-align:center;padding-block:3rem}

/* blog cards */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.post-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.post-thumb img{width:100%;height:200px;object-fit:cover}
.post-body{padding:1.4rem;display:flex;flex-direction:column;gap:.5rem}
.post-body h2{font-size:1.2rem;font-weight:500}
.post-body p{font-size:.86rem;color:var(--muted)}
.pagination,.woocommerce-pagination{margin-top:2.5rem;display:flex;justify-content:center}
.pagination .nav-links,.woocommerce-pagination ul{display:flex;gap:.4rem;list-style:none;padding:0;margin:0;align-items:center}
.page-numbers{display:grid;place-items:center;min-width:40px;height:40px;padding:0 .6em;border:1px solid var(--line-strong);border-radius:100px;color:var(--ink);font-size:.85rem}
.page-numbers.current{background:var(--violet);color:var(--cream);border-color:var(--violet)}
.page-numbers:hover{border-color:var(--violet)}

/* ---------- 404 ---------- */
.tv-404 .wrap{text-align:center}
.tv-404 h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:300;margin:.6rem 0}
.tv-404 p{color:var(--muted);max-width:46ch;margin:0 auto 2rem}
.tv-404-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.5rem}
.tv-404-search{max-width:440px;margin-inline:auto}

/* ---------- search form ---------- */
.tv-search{display:flex;gap:.5rem;background:var(--white);border:1px solid var(--line-strong);border-radius:100px;padding:.4rem .5rem .4rem 1.3rem}
.tv-search-field{flex:1;border:0;background:none;font-family:var(--f);font-size:.95rem;color:var(--ink);outline:none}
.tv-search-btn{background:var(--violet);color:var(--cream);border:0;border-radius:100px;width:42px;height:42px;display:grid;place-items:center;cursor:pointer;flex:none}
.tv-search-btn .icon{width:18px;height:18px}

/* ---------- contact page ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.5rem;margin-top:clamp(2rem,4vw,3.5rem)}
.contact-info{display:flex;flex-direction:column;gap:1rem}
.ci-card{display:flex;gap:1rem;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.4rem;color:var(--ink);transition:.3s}
.ci-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.ci-card .icon{width:24px;height:24px;stroke:var(--bronze);flex:none}
.ci-card span{display:flex;flex-direction:column;font-size:.9rem}
.ci-card strong{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600;margin-bottom:.15rem}
.ci-static{cursor:default}
.contact-form-wrap{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.5rem,4vw,2.4rem)}
.tv-form{display:flex;flex-direction:column;gap:1.1rem}
.tv-field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.tv-form label{display:flex;flex-direction:column;gap:.4rem;font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.tv-form input,.tv-form textarea{font-family:var(--f);font-size:.95rem;padding:.9em 1.1em;border:1px solid var(--line-strong);border-radius:12px;background:var(--paper);color:var(--ink);font-weight:400}
.tv-form input:focus,.tv-form textarea:focus{outline:none;border-color:var(--bronze);background:var(--white)}
.tv-form .btn{align-self:flex-start;margin-top:.4rem}
.tv-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.tv-note{padding:1em 1.2em;border-radius:12px;font-size:.9rem;margin-bottom:1.4rem}
.tv-note-ok{background:rgba(174,169,137,.2);color:var(--violet);border:1px solid var(--sage)}
.tv-note-warn{background:#f6e6de;color:#7a3b22;border:1px solid #d8a68e}

/* ---------- about page ---------- */
.about-hero{position:relative;height:clamp(320px,52vh,520px);overflow:hidden;background:var(--violet)}
.about-hero img{width:100%;height:100%;object-fit:cover}
.about-hero-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(39,23,50,.72),rgba(39,23,50,.25))}
.about-hero-cap{position:absolute;left:0;right:0;bottom:clamp(24px,5vw,54px);color:var(--cream)}
.about-hero-cap .eyebrow{color:var(--sage)}
.about-hero-cap h1{color:var(--cream);font-size:clamp(2.2rem,5vw,3.6rem);font-weight:200;margin-top:.5rem}
.about-lead{font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:300;color:var(--ink);line-height:1.5;text-align:center}
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;text-align:center}
.about-stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:2rem 1rem}
.about-stat .n{font-size:2.4rem;font-weight:200;color:var(--violet)}
.about-stat .l{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.4rem}
.about-cta .wrap{text-align:center}
.about-cta h2{color:var(--cream);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:200;margin-bottom:1.6rem}
.about-cta-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* ---------- reveal ---------- */
.reveal{opacity:0;translate:0 26px;transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;translate:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1080px){
  .prod-grid,.feat-grid,.scent-grid,.about-stats{grid-template-columns:repeat(2,1fr)}
  .coll-grid,.post-grid{grid-template-columns:repeat(2,1fr)}
  .mega-grid{grid-template-columns:repeat(2,1fr)}
}
/* five links beside the logo and icons need about 1000px at 18px type, so
   the drawer takes over below 1080px rather than 860px */
@media(max-width:1080px){
  .nav-links,.nav-icons .desk{display:none}
  .nav-icons .hamburger{display:inline-flex}
  .nav-icons{margin-left:auto} /* the links carried the auto margin; hidden, the icons take it */
}
@media(max-width:860px){
  .b2b-grid,.contact-grid{grid-template-columns:1fr}
  /* Footer: keep Shop / Company / Contact BESIDE each other */
  .foot-top{grid-template-columns:repeat(3,1fr);gap:1.8rem}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:760px),(max-width:900px) and (max-height:560px){
  /* A phone is portrait, and a 3:2 photograph shown whole is only two thirds as tall as it
     is wide here - the headline stack would cover most of it. So the frame lets go of its
     shape, the stage keeps the photograph's, and the headline drops out beneath it onto the
     violet. A phone held sideways gets the same: its band would be too short to hold the
     headline. */
  .hero-frame{width:100%;aspect-ratio:auto;min-height:0;max-height:none}
  .hero-stage{position:relative;aspect-ratio:var(--hero-ar)}
  /* a browser without aspect-ratio (iOS 14 and older) would give the stage no height at all */
  @supports not (aspect-ratio:1){.hero-stage{height:calc(100vw / var(--hero-ar))}}
  .hero-scrim{display:none}
  /* The Our Story banner keeps its own phone rule: a taller band that trims
     the width, rather than the 276px the photograph's own shape would give
     at this width. */
  .tv-story .st-hero{height:min(72vh,125vw);height:min(72svh,125vw)}
  .tv-story .st-hero img.bg{object-position:center 50%}
  .hero-overlay{position:static;max-width:none;padding:1.5rem var(--gutter) 2rem;gap:.9rem}
  /* 38vw is a desktop measure; on a phone the headline may run the full width */
  .hero-title{max-width:100%}
  .hero-arrow{top:50%;width:40px;height:40px}
  .hero-arrow svg{width:22px;height:22px}
  .hero-arrow.prev{left:8px}
  .hero-arrow.next{right:8px}
}
@media(max-width:560px){
  .coll-grid,.prod-grid,.feat-grid,.scent-grid,.post-grid,.about-stats{grid-template-columns:1fr 1fr;gap:.9rem}
  .coll-stage img{height:150px}.coll-stage{height:160px}
  .coll-grid .coll-stage,.coll-grid>.coll-card:last-child:nth-child(odd) .coll-stage{height:170px}
  .coll-grid .coll-stage img,.coll-grid>.coll-card:last-child:nth-child(odd) .coll-stage img{height:160px}
  .coll-grid{gap:.8rem}.coll-card{padding:1.2rem 1rem 1rem}.coll-desc{font-size:.76rem;min-height:0}
  .coll-arrow{height:32px;padding:0 .8em 0 .9em;font-size:.6rem}.coll-name{font-size:1.15rem}
  /* two-across on a phone: the badge stays on one line, the foot stacks, the price fits the card */
  .coll-badge{white-space:nowrap;font-size:.58rem;padding:.35em .6em;max-width:100%}
  .coll-grid .coll-foot{flex-direction:column;align-items:stretch;gap:.55rem}
  .coll-grid .coll-price{font-size:.8rem}
  .coll-grid .coll-arrow{width:100%;justify-content:center}
  .trust .wrap{justify-content:flex-start;gap:1rem 1.4rem}
  .sec-head{align-items:flex-start}
  .tv-field-row{grid-template-columns:1fr}
  .b2b-stats{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  .prod-grid,.scent-grid{grid-template-columns:1fr}
}
@media(max-width:400px){
  .coll-grid .coll-card{padding:1rem .8rem .9rem}
  .coll-grid .coll-price{font-size:.74rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;translate:none}
}

/* ==========================================================================
   Signature Scents photo cards + brand band + story background
   ========================================================================== */
.story-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;z-index:0;filter:saturate(.85)}
.scent-grid2{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.scent2{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .45s,box-shadow .45s;color:inherit}
.scent2:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.scent2-img{aspect-ratio:1/.8;overflow:hidden;background:var(--linen)}
.scent2-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.scent2:hover .scent2-img img{transform:scale(1.06)}
.scent2-b{padding:1.15rem 1.25rem 1.4rem;display:flex;flex-direction:column;gap:.4rem}
.scent2-b .fam{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep)}
.scent2-b h3{font-size:1.12rem;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.scent2-b .notes{font-size:.79rem;color:var(--muted);line-height:1.55}
.scent2.hide{display:none}
/* The homepage row shows eight scents and folds the rest behind a Show more button: PHP
   prints every scent and marks the ninth onward hidden, main.js unfolds them and retires
   the button. Without JavaScript a <noscript> style in the template part shows them all. */
.scent-grid2.is-clipped>.scent2[hidden]{display:none}
.scent-more{display:flex;justify-content:center;margin-top:clamp(1.8rem,3.4vw,2.6rem)}
.scent-more.is-done{display:none}
/* Bigger than the other buttons on purpose: it is the only way to the other half of the range. */
.scent-more .btn{font-size:.9rem;padding:1.15em 2.6em;gap:.7em}
.scent-more .btn .icon{width:18px;height:18px;stroke:currentColor}

/* scent PRODUCT cards (homepage row + Scents page + the shop loop): the whole
   card is the link to the scent's product page; Buy pill on the right */
.scent2.scent-prod{position:relative;cursor:default}
.scent2.scent-prod .scent2-img{position:relative;display:block}
.scent2.scent-prod .scent2-b{flex:1}
.scent2.scent-prod h3 a{color:inherit}
.scent2.scent-prod h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.scent2-best{position:absolute;top:12px;left:12px;z-index:2;font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--bronze);color:#fff;padding:.35em .7em;border-radius:100px}
.scent2-foot{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:auto;padding-top:.8rem;border-top:1px solid var(--line)}
.scent2-price{font-size:.82rem;color:var(--ink);font-weight:500;min-height:1em}
.scent2-price b{font-weight:600;white-space:nowrap}
.scent2-foot .coll-arrow{position:relative;z-index:2;height:34px;padding:0 .9em 0 1em}
.scent2.scent-prod:hover .coll-arrow{background:var(--violet);border-color:var(--violet);color:var(--cream)}
.scent2.scent-prod:hover .coll-arrow .icon{stroke:var(--cream)}
.scents .sec-head{align-items:center}
@media(max-width:560px){
  .scent2.scent-prod .scent2-b{padding:.9rem .9rem 1rem;gap:.3rem}
  .scent2-foot{flex-direction:column;align-items:stretch;gap:.5rem}
  .scent2-foot .coll-arrow{width:100%;justify-content:center;height:32px;font-size:.6rem}
  .scent2-price{font-size:.78rem}
}

.brandband{position:relative;overflow:hidden;background:var(--violet)}
.brandband-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center}
.brandband-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(39,23,50,.93),rgba(39,23,50,.62) 55%,rgba(39,23,50,.25))}
.brandband-in{position:relative;z-index:2;color:var(--cream);max-width:560px;padding-block:clamp(80px,12vw,150px)}
.brandband-in .eyebrow{color:var(--sage)}
.brandband-in h2{color:var(--cream);font-size:clamp(1.9rem,4vw,3rem);font-weight:200;margin:1rem 0 1.2rem}
.brandband-in p{color:rgba(243,237,220,.82);margin-bottom:2rem}

@media(max-width:1080px){.scent-grid2{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.scent-grid2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.scent-grid2{grid-template-columns:1fr 1fr;gap:.9rem}}

/* ==========================================================================
   Midnight Violet header · clickable scent cards · scent modal · reasons grid
   ========================================================================== */
html{scroll-padding-top:calc(var(--top-h) + 8px)}

.scent2{cursor:pointer}
.scent2:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.scent-hint{text-align:center;color:var(--muted);font-size:.78rem;letter-spacing:.04em;margin:-1rem 0 2rem}

.feat-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1080px){.feat-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.feat-grid-3{grid-template-columns:1fr}}

.scent-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
.scent-modal.open{display:flex}
.sm-backdrop{position:absolute;inset:0;background:rgba(39,23,50,.62);backdrop-filter:blur(6px)}
.sm-card{position:relative;z-index:2;background:var(--white);border-radius:var(--r);max-width:720px;width:100%;max-height:88vh;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:var(--shadow);animation:smIn .35s cubic-bezier(.2,.7,.2,1)}
@keyframes smIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.sm-media{background:var(--linen)}
.sm-media img{width:100%;height:100%;object-fit:cover}
.sm-body{padding:2.2rem 2rem;overflow-y:auto}
.sm-body .fam{font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep)}
.sm-body h3{font-size:1.9rem;font-weight:300;margin:.4rem 0 .9rem;color:var(--ink)}
.sm-desc{font-size:.9rem;color:var(--body);line-height:1.65;margin-bottom:1.2rem}
.sm-desc:empty{display:none;margin:0}
.sm-notes .row{display:flex;gap:1rem;padding:.7rem 0;border-top:1px solid var(--line)}
.sm-notes .row .k{min-width:64px;font-weight:600;color:var(--sage-deep);text-transform:uppercase;font-size:.66rem;letter-spacing:.1em;padding-top:.2em}
.sm-notes .row .v{color:var(--ink);font-size:.9rem}
.sm-notes .single{padding-top:.8rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink)}
.sm-close{position:absolute;top:.7rem;right:.8rem;z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.25s}
.sm-close:hover{background:var(--violet);color:var(--cream)}
@media(max-width:620px){.sm-card{grid-template-columns:1fr;max-height:92vh}.sm-media{height:190px}}

/* Whole product card clickable to the product page (stretched link).
   The add-to-cart button stays clickable above it. */
.pcard{position:relative}
.pcard .pcard-name::after{content:"";position:absolute;inset:0;z-index:1}
.pcard .pcard-add,.pcard .pcard-add .button,.pcard .pcard-add a{position:relative;z-index:2}
.pcard .quick{position:relative;z-index:2}

/* Footer columns stay side by side down to small screens */
.foot-top{align-items:start}
@media(max-width:640px){
  .foot-top{grid-template-columns:repeat(3,1fr);gap:1.2rem}
  .foot-brand{grid-column:1/-1}
  .foot h4{font-size:.68rem;letter-spacing:.12em;margin-bottom:.9rem}
  .foot .foot-menu a,.foot .contact li{font-size:.78rem}
  .foot .contact li{gap:.5em}
}
/* Three footer columns need about 455px; below that the contact column is cut
   off at the right edge, so drop to two with contact across the full row. */
@media(max-width:480px){
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  #site-contact{grid-column:1/-1}
  .foot .foot-menu{gap:.5rem}
}

/* ==========================================================================
   Scents page (page-scents.php)
   ========================================================================== */
.scents-page .scents-head{text-align:center;margin-bottom:clamp(2rem,4vw,3rem)}
.scents-page .scents-head .lead-center{color:var(--muted);margin-top:.8rem}
.scents-page .chips{justify-content:center}
.scents-cta{text-align:center;margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line-strong)}
.scents-cta h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:300;margin-bottom:.7rem}
.scents-cta p{color:var(--muted);max-width:52ch;margin:0 auto 1.6rem}
.scents-cta-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   Our Story (page-about.php)
   ========================================================================== */
/* Edge to edge, about one screen tall, and done by the time you scroll past
   it. The 70.7vw cap is 1/1.415, the photograph's own shape, so the band
   never grows taller than the picture needs. */
.tv-story .st-hero{position:relative;display:grid;place-items:center;overflow:hidden;background:var(--violet);
  height:clamp(calc(90px + 34vw),calc(100vh - var(--top-h)),70.7vw);
  height:clamp(calc(90px + 34vw),calc(100svh - var(--top-h)),70.7vw)}
.tv-story .st-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;z-index:1}
.tv-story .st-hero .scrim{position:absolute;inset:0;z-index:2;background:radial-gradient(90% 90% at 50% 60%, rgba(39,23,50,.28), rgba(39,23,50,.72))}
.tv-story .st-hero .inner{position:relative;z-index:3;text-align:center;color:var(--cream);padding:2rem var(--gutter)}
.tv-story .st-hero .eyebrow{color:var(--sage)}
.tv-story .st-hero h1{color:var(--cream);font-size:clamp(2.6rem,7vw,5rem);font-weight:200;margin:.5rem 0 1rem}
.tv-story .st-hero h1 em{font-style:italic;color:var(--sage)}
.tv-story .st-hero p{color:rgba(243,237,220,.85);max-width:46ch;margin-inline:auto;font-weight:300;font-size:1.05rem}
.tv-story .st-intro{background:var(--cream);text-align:center}
.tv-story .st-intro .lead{font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:300;color:var(--ink);line-height:1.55;max-width:58rem;margin:1.4rem auto 0}
.tv-story .st-concept .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.tv-story .st-concept h2{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:300;margin:.6rem 0 1.3rem}
.tv-story .st-concept p{margin-bottom:1.1rem}
.tv-story .st-concept .pull{border-left:2px solid var(--sage);padding-left:1.2rem;font-style:italic;color:var(--ink);font-size:1.06rem;margin-top:1.6rem}
.tv-story .st-concept .art.tiles{display:grid;grid-template-columns:1fr 1.05fr;gap:16px;aspect-ratio:5/4}
.tv-story .st-concept .art.tiles img{width:100%;height:100%;object-fit:cover;border-radius:14px;box-shadow:var(--shadow-sm);display:block}
.tv-story .st-concept .t-col{display:grid;grid-template-rows:1fr .85fr;gap:16px;min-height:0}
/* mission / vision: quote-led contrast pair (white + Midnight Violet, one rounded object) */
.mv-d{background:var(--linen);padding-bottom:clamp(84px,11vw,150px)}
.mv-d .mv-head{text-align:center;margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.mv-d .mv-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:300;margin-top:.6rem}

/* two panels edge to edge; the three rows (tag, quote, statement) line up across both */
.mv-d .pair{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.mv-d .panel{position:relative;min-width:0;display:grid;grid-template-rows:auto auto auto;row-gap:clamp(1.5rem,2.8vw,2.3rem);padding:clamp(2rem,5vw,4rem)}
@supports (grid-template-rows:subgrid){.mv-d .panel{grid-row:span 3;grid-template-rows:subgrid}}
.mv-d .panel.light{background:var(--white);color:var(--body)}
.mv-d .panel.dark{background:var(--violet);color:rgba(243,237,220,.82)}
/* the fabric only lightens the violet, so the panel stays Midnight Violet rather than turning black */
.mv-d .panel.dark .tex{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;mix-blend-mode:screen;pointer-events:none;margin:0}
.mv-d .panel .tag,.mv-d .panel .quote,.mv-d .panel .sub{position:relative}

/* small tag with a single bronze hairline */
.mv-d .tag{display:flex;align-items:center;gap:.8em;font-size:.68rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--sage-deep);line-height:1}
.mv-d .tag::before{content:"";width:2rem;height:1px;background:var(--bronze);flex:none}
.mv-d .panel.dark .tag{color:rgba(243,237,220,.66)}

/* the quote leads */
.mv-d .quote{margin:0;padding:0;align-self:start;max-width:30ch}
.mv-d .quote p{font-style:italic;font-weight:300;font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.38;letter-spacing:-.01em;color:var(--ink);text-wrap:balance;margin:0}
.mv-d .panel.dark .quote p{color:var(--cream)}

/* the statement under a shared hairline */
.mv-d .sub{align-self:end;padding-top:clamp(1.4rem,2.5vw,2rem);border-top:1px solid var(--line)}
.mv-d .panel.dark .sub{border-top-color:rgba(243,237,220,.2)}
.mv-d .sub h3{font-size:1.3rem;font-weight:400;line-height:1.3;letter-spacing:0;margin:0 0 .7rem;text-wrap:balance}
.mv-d .panel.dark .sub h3{color:var(--cream)}
.mv-d .sub p{font-size:.95rem;line-height:1.7;max-width:46ch;margin:0}

@media(max-width:900px){
  .mv-d .pair{grid-template-columns:1fr}
  .mv-d .panel{row-gap:1.5rem;padding:clamp(1.8rem,5vw,2.6rem)}
  .mv-d .quote{max-width:none}
}
@media(max-width:560px){
  .mv-d{padding-bottom:clamp(64px,12vw,90px)}
  .mv-d .mv-head{margin-bottom:1.8rem}
  .mv-d .panel{padding:1.7rem 1.35rem;row-gap:1.3rem}
  .mv-d .tag::before{width:1.4rem}
  .mv-d .quote p{font-size:1.4rem;line-height:1.35}
  .mv-d .sub{padding-top:1.2rem}
  .mv-d .sub h3{font-size:1.15rem}
  .mv-d .sub p{font-size:.95rem;max-width:none}
}
.tv-story .st-close{position:relative;overflow:hidden;background:var(--violet);text-align:center}
.tv-story .st-close img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22}
.tv-story .st-close .inner{position:relative;z-index:2;color:var(--cream);padding-block:clamp(80px,12vw,140px)}
.tv-story .st-close h2{color:var(--cream);font-size:clamp(2rem,4.5vw,3rem);font-weight:200;margin-bottom:1rem}
.tv-story .st-close p{color:rgba(243,237,220,.8);max-width:50ch;margin:0 auto 2.2rem}
.tv-story .st-close .btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
@media(max-width:860px){
  .tv-story .st-concept .grid{grid-template-columns:1fr}
  .tv-story .st-concept .art{order:-1}
}


/* ---------- floating WhatsApp (themed) ---------- */
.tv-wa{position:fixed;right:22px;bottom:max(22px,calc(env(safe-area-inset-bottom) + 22px));z-index:70;border:1px solid rgba(243,237,220,.28);display:inline-flex;align-items:center;gap:.6em;background:var(--violet);color:var(--cream);
  border-radius:100px;padding:.85em 1.25em .85em 1em;box-shadow:0 18px 40px -18px rgba(39,23,50,.75);font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s,box-shadow .3s}
.tv-wa .icon{width:24px;height:24px;stroke:var(--sage);flex:none}
.tv-wa span{white-space:nowrap}
.tv-wa:hover{transform:translateY(-3px);background:var(--violet-2);box-shadow:0 24px 48px -18px rgba(39,23,50,.8)}
.tv-wa::before{content:"";position:absolute;inset:-4px;border-radius:inherit;border:1px solid rgba(174,169,137,.45);animation:tvWaPulse 2.6s ease-out infinite;pointer-events:none}
@keyframes tvWaPulse{0%{transform:scale(.95);opacity:.8}100%{transform:scale(1.25);opacity:0}}
@media(max-width:640px){.tv-wa{right:14px;bottom:max(14px,calc(env(safe-area-inset-bottom) + 14px));padding:.85em;border-radius:50%}.tv-wa span{display:none}.tv-wa .icon{width:26px;height:26px}}

/* ---------- floating "Buy now" (stacked above the WhatsApp pill) ---------- */
.tv-buy{position:fixed;right:22px;bottom:max(84px,calc(env(safe-area-inset-bottom) + 84px));z-index:70;display:inline-flex;align-items:center;gap:.6em;
  background:var(--bronze);color:#fff;border:1px solid rgba(255,253,249,.35);border-radius:100px;padding:.85em 1.25em .85em 1em;
  box-shadow:0 18px 40px -18px rgba(39,23,50,.6);font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s,box-shadow .3s}
.tv-buy .icon{width:22px;height:22px;stroke:#fff;flex:none}
.tv-buy span{white-space:nowrap}
.tv-buy:hover{transform:translateY(-3px);background:var(--violet);color:var(--cream);box-shadow:0 24px 48px -18px rgba(39,23,50,.8)}
@media(max-width:640px){.tv-buy{right:14px;bottom:max(76px,calc(env(safe-area-inset-bottom) + 76px));padding:.75em 1.1em .75em .9em;font-size:.7rem}.tv-buy .icon{width:20px;height:20px}}
/* not on the cart, the checkout or the order-received page: the visitor is past "Buy now",
   and on a phone the pill sat over the form fields */
.woocommerce-cart .tv-buy,.woocommerce-checkout .tv-buy{display:none}


/* ---------- "Why Terra Verde": deliberately static ----------
   These cards are not links. Any lift, shadow or icon movement reads as "press
   me", so the section carries none: no hover feedback, no scroll-drawn icons.
   The site-wide .reveal fade still brings it in like every other section. */
.whychoose .fcard{--i:0;background:var(--violet);border-color:var(--violet)}
.whychoose .fcard:hover{transform:none;box-shadow:none}
/* Midnight Violet card, WHITE icon disc with a violet glyph, cream copy (owner's pick) */
.whychoose .fcard h3{color:var(--white)}
.whychoose .fcard p{color:rgba(243,237,220,.8)}
.whychoose .fcard .ic,
.whychoose .fcard:hover .ic{transform:none;background:var(--white);transition:none}
.whychoose .fcard .ic .icon{stroke:var(--violet)}

/* ---------- colourway dots (under the product image) ---------- */
.tv-dots{display:flex;justify-content:center;align-items:center;gap:.55rem;margin-top:1.1rem}
.tv-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--line-strong);
  background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none;
  transition:background .25s,border-color .25s,transform .25s}
.tv-dots button:hover{border-color:var(--violet)}
.tv-dots button[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);transform:scale(1.25)}
.tv-dots button:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* ---------- round-3 audit fixes ---------- */
/* floating WhatsApp: keep the footer bar clear of the pill */
.foot-bar{padding-right:calc(var(--gutter) + 170px)}
@media(max-width:640px){.foot-bar{padding-right:var(--gutter);padding-bottom:calc(1.5rem + 124px)}}

/* ---------- generic marquee (clients, reviews): clones slide by one copy; hover pauses ---------- */
/* the row sits inside the page's content width (same box as the header's logo and cart icon),
   so the fade runs out exactly at those edges instead of at the viewport edges */
.tv-marquee{--mq-fade:clamp(24px,7%,110px);position:relative;width:min(100% - 2*var(--gutter),var(--maxw) - 2*var(--gutter));margin-inline:auto;overflow:hidden;padding:8px 0 36px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--mq-fade),#000 calc(100% - var(--mq-fade)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--mq-fade),#000 calc(100% - var(--mq-fade)),transparent)}
.tv-marquee .tv-track{display:flex;align-items:stretch;gap:1.2rem;width:max-content;animation:tvMarquee var(--mq-dur,60s) linear infinite;will-change:transform}
.tv-marquee.mq-right .tv-track{animation-name:tvMarqueeR}
.tv-marquee:hover .tv-track{animation-play-state:paused}
.tv-marquee:has(:focus-visible) .tv-track{animation:none}
.tv-marquee:has(:focus-visible){-webkit-mask-image:none;mask-image:none}
.tv-marquee.is-static{overflow-x:auto;scrollbar-width:thin;-webkit-mask-image:none;mask-image:none}
.tv-marquee.is-static .tv-track{animation:none}
.tv-marquee.is-centred .tv-track{margin-inline:auto}
.tv-marquee.is-held .tv-track{animation-play-state:paused} /* a finger on the row */
@keyframes tvMarquee{to{transform:translateX(calc(-1 * var(--mq-shift,0px)))}}  /* used by .tv-marquee .tv-track, which is live */
@keyframes tvMarqueeR{from{transform:translateX(calc(-1 * var(--mq-shift,0px)))}to{transform:none}}
@media(prefers-reduced-motion:reduce){.tv-marquee .tv-track{animation:none}.tv-marquee{overflow-x:auto}}

/* ---------- clients: violet silhouettes; hover shows the logo's own colours (white parts are pre-tinted violet) ---------- */
.clients{background:var(--white)}
.client-marquee{padding-bottom:12px}   /* no card shadows to make room for */
.client{position:relative;flex:0 0 auto;width:220px;height:120px;border-radius:14px}
.client::before,.client::after{content:"";position:absolute;inset:22px 26px;transition:opacity .35s}
.client::before{background:var(--violet);opacity:.78;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.client::after{background:var(--logo) center/contain no-repeat;opacity:0}
.client:hover::before,.client:focus-visible::before{opacity:0}
.client:hover::after,.client:focus-visible::after{opacity:1}
@media(max-width:640px){.client{width:170px;height:96px}.client::before,.client::after{inset:16px 20px}}

/* ---------- reviews: cards drift to the right ---------- */
.reviews{background:var(--linen)}
.rcard{flex:0 0 auto;width:340px;max-width:80vw;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.6rem 1.4rem;display:flex;flex-direction:column;gap:.8rem}
.rcard .stars{color:var(--bronze);letter-spacing:.14em;font-size:.95rem;line-height:1}
.rcard .stars .off{color:var(--line-strong)}
.rcard p{font-size:.95rem;line-height:1.65;color:var(--body)}
.rcard footer{display:flex;flex-direction:column;gap:.1rem;margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line)}
.rcard b{font-weight:600;color:var(--ink);font-size:.9rem}
.rcard span{font-size:.76rem;color:var(--muted)}