/*
Theme Name: Cavelleo
Theme URI: https://cavelleo.example
Author: Cavelleo
Description: Custom WooCommerce storefront theme for Cavelleo — everyday essentials, home, tech & gifts.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: cavelleo
*/

/* ---------- Design tokens ---------- */
:root{
  --base: #fafdfa;
  --accent: oklch(0.52 0.13 150);
  --accent-2: oklch(0.78 0.14 140);
  --accent-3: oklch(0.52 0.14 158);
  --ink: oklch(0.22 0.012 155);
  --mute: oklch(0.46 0.012 155);
  --mute-2: oklch(0.42 0.012 155);
  --price: oklch(0.52 0.20 25);
  --sale: oklch(0.55 0.21 25);
  --star: oklch(0.72 0.15 75);
  --line: oklch(0.93 0.014 148);
  --line-2: oklch(0.90 0.014 148);
  --wash-top: oklch(0.93 0.065 148);
  --wash-mid: oklch(0.955 0.04 148);
  --panel: #fff;
  --radius-btn: 8px;
  --radius-img: 14px;
  --radius-panel: 16px;
  --radius-panel-lg: 18px;
  --radius-pill: 999px;
  --container: 1180px;
  --gap: clamp(12px,3vw,18px);
  --pad-x: clamp(14px,4vw,20px);

  /* ---------- Motion system ----------
     One shared easing + duration scale, used across every hover/interaction
     rule in this file, so timing feels consistent site-wide instead of each
     component inventing its own numbers. See the @media query below for how
     these collapse to near-zero under prefers-reduced-motion. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;    /* icon/button micro-interactions */
  --dur-card: 250ms;    /* card lift, shadow */
  --dur-image: 350ms;   /* image zoom */
  --dur-modal: 300ms;   /* drawers/overlays */
  --dur-reveal: 600ms;  /* scroll-reveal fade-in */
}

/* Respect the OS-level motion preference everywhere at once: collapse every
   duration token to ~0 and neutralise transform-based entrance animations,
   rather than trying to remember this per-component. Essential state changes
   (e.g. hidden/shown) still work instantly — only the *motion* is removed. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-card: 0.01ms;
    --dur-image: 0.01ms;
    --dur-modal: 0.01ms;
    --dur-reveal: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-on-scroll { opacity: 1 !important; transform: none !important; }
  .hero-float, .parallax-layer { animation: none !important; transform: none !important; }
}

/* ---------- Reset & base ---------- */
*{box-sizing:border-box}
body{margin:0;overflow-x:hidden;background:var(--base);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.55;font-size:17px}
h1,h2,h3,h4{font-family:Poppins,system-ui,sans-serif;margin:0;letter-spacing:-0.02em}
a{color:var(--mute-2);text-decoration:none}
a:hover{color:var(--accent);text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
img{max-width:100%;display:block}
ul{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:oklch(0.90 0.014 148);border-radius:9px}
@keyframes kFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.container{max-width:var(--container);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.visually-hidden,.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
/* Fallback for products/categories with no thumbnail yet. A soft branded wash with a
   centred parcel glyph reads as an intentional "no photo" state — the old diagonal
   hatch read as an unstyled wireframe. */
.placeholder-swatch{background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23568069" stroke-opacity="0.5" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.6 21 7v10l-9 4.4L3 17V7Z"/><path d="m3 7 9 4.4L21 7"/><path d="M12 11.4v10"/></svg>') center/36% no-repeat,linear-gradient(150deg,oklch(0.968 0.02 148) 0%,oklch(0.925 0.04 150) 100%)}

.cavelleo-icon{flex:none}

/* ---------- Buttons ---------- */
.btn-primary{padding:15px 26px;border:0;border-radius:var(--radius-pill);background:var(--accent);color:#fff;font-weight:700;font-size:17px;display:inline-flex;align-items:center;gap:10px;box-shadow:0 10px 22px oklch(0.52 0.13 150 / .28);min-height:48px;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.btn-primary:hover{color:#fff;transform:translateY(-1px);box-shadow:0 14px 28px oklch(0.52 0.13 150 / .36)}
.btn-primary:active{transform:translateY(1px);box-shadow:0 6px 14px oklch(0.52 0.13 150 / .28)}
.btn-ghost{padding:15px 26px;border:1.5px solid var(--ink);border-radius:var(--radius-pill);background:transparent;color:var(--ink);font-weight:600;font-size:17px;min-height:48px;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.btn-ghost:hover{background:oklch(0.96 0.01 155);transform:translateY(-1px)}
.btn-ghost:active{transform:translateY(1px)}
/* The arrow glyph in CTAs (btn-primary/btn-ghost/btn-white-pill/.product .button all
   wrap it in <span aria-hidden="true">→</span>) nudges right on hover — a small,
   consistent "this leads somewhere" cue used the same way everywhere it appears. */
.btn-primary span[aria-hidden],.btn-ghost span[aria-hidden],.btn-white-pill span[aria-hidden]{display:inline-block;transition:transform var(--dur-fast) var(--ease-out)}
.btn-primary:hover span[aria-hidden],.btn-ghost:hover span[aria-hidden],.btn-white-pill:hover span[aria-hidden]{transform:translateX(3px)}
.btn-outline{padding:0 22px;min-height:44px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:#fff;font-weight:600;font-size:16px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.btn-outline:disabled{opacity:.5;cursor:not-allowed;color:var(--mute)}
.btn-white-pill{min-height:46px;padding:0 22px;border:0;border-radius:var(--radius-pill);background:#fff;color:var(--ink);font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;box-shadow:0 2px 8px oklch(0.2 0.02 155 / .12);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.btn-white-pill:hover{transform:translateY(-1px);box-shadow:0 6px 16px oklch(0.2 0.02 155 / .22)}
.btn-white-pill:active{transform:translateY(1px);box-shadow:0 2px 6px oklch(0.2 0.02 155 / .18)}

/* ---------- Header ---------- */
.announce-bar{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center;background:oklch(0.94 0.045 148);color:oklch(0.30 0.03 155);font-size:14px;font-weight:600;padding:10px var(--pad-x)}
.announce-bar svg{width:16px;height:16px;flex:none;color:var(--accent)}
.announce-bar a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.announce-bar a:hover{color:var(--accent-3)}

.site-header{position:sticky;top:0;z-index:40;background:oklch(0.93 0.065 148 / .94);backdrop-filter:blur(12px);border-bottom:1px solid oklch(0.90 0.035 148)}
.site-bar{max-width:var(--container);margin:0 auto;padding:14px var(--pad-x);display:flex;align-items:center;gap:clamp(16px,3vw,32px)}
.site-logo{display:flex;align-items:center;flex:0 1 auto;min-width:0}
.site-logo img{display:block;height:56px;width:auto;max-width:100%;object-fit:contain}
.site-nav{flex:1 1 auto;min-width:0;display:flex;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
.site-nav::-webkit-scrollbar{display:none}
.site-nav ul{display:flex;gap:clamp(14px,3vw,26px);margin:0;padding:0;list-style:none}
.site-nav li{display:flex}
.site-nav a{position:relative;padding:11px 2px;font-size:16px;font-weight:600;white-space:nowrap;color:var(--ink);text-decoration:none;transition:color .15s ease}
.site-nav a::after{content:"";position:absolute;left:2px;right:2px;bottom:4px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .2s ease}
.site-nav a:hover{color:var(--accent)}
.site-nav a:hover::after,.site-nav .current-menu-item>a::after,.site-nav .current-menu-ancestor>a::after{transform:scaleX(1)}
.site-nav .current-menu-item>a,.site-nav .current-menu-ancestor>a{color:var(--accent)}
.nav-toggle{display:none;width:44px;height:44px;flex:none;border:0;background:transparent;border-radius:50%;color:oklch(0.24 0.015 155);align-items:center;justify-content:center;transition:background .15s ease}
.nav-toggle svg{width:24px;height:24px;flex:none}
.nav-toggle:hover{background:oklch(0.955 0.022 148)}
.site-icons{display:flex;align-items:center;gap:4px;flex:none;margin-left:auto}
.site-icons button,.site-icons a{position:relative;width:52px;height:52px;border:0;background:transparent;border-radius:50%;color:oklch(0.24 0.015 155);display:grid;place-items:center;transition:background .15s ease,color .15s ease,transform .15s ease}
.site-icons svg{width:26px;height:26px;flex:none}
.site-icons button:hover,.site-icons a:hover{background:oklch(0.955 0.022 148);color:var(--accent);transform:translateY(-1px)}
/* "You are here" state for wishlist/account/cart — mirrors the main nav's
   current-page highlight (see .site-nav .current-menu-item) so the header
   consistently shows which destination is currently open. */
.site-icons a.is-active{background:oklch(0.94 0.05 150);color:var(--accent)}
.site-icons a.is-active::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;border-radius:50%;background:var(--accent);transform:translateX(-50%)}
.cart-count{position:absolute;top:4px;right:4px;min-width:19px;height:19px;border-radius:10px;background:var(--accent);color:#fff;font:700 11px "DM Sans",sans-serif;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 0 0 2px oklch(0.93 0.065 148 / .94)}
/* Bumped by theme.js (bumpCartCount()) whenever the count actually changes — a
   quick scale pulse confirms "yes, that add-to-cart click landed" without the
   customer having to go find the cart page to check. */
.cart-count.is-bumping{animation:cartBump .35s var(--ease-out)}
@keyframes cartBump{0%{transform:scale(1)}45%{transform:scale(1.25)}100%{transform:scale(1)}}

.search-panel{border-top:1px solid var(--line);background:oklch(0.965 0.03 148);animation:kFade .16s ease-out;display:none}
.search-panel.is-open{display:block}
.search-panel-inner{max-width:var(--container);margin:0 auto;padding:14px var(--pad-x)}
.search-panel input[type=search]{width:100%;padding:14px 16px;border:1.5px solid var(--line-2);border-radius:var(--radius-pill);font-size:17px;background:var(--base)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--wash-top) 0%,var(--wash-mid) 60%,var(--base) 100%)}
/* Soft ambient glow blobs behind the copy/art — the bit of depth that separates
   "modern" from a flat two-column hero, without going full glassmorphism. Purely
   decorative, so they sit behind everything (z-index) and never affect layout. */
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;z-index:0}
.hero::before{width:clamp(260px,32vw,460px);aspect-ratio:1/1;left:-8%;top:-12%;background:radial-gradient(circle,var(--accent-2) 0%,transparent 70%)}
.hero::after{width:clamp(220px,26vw,380px);aspect-ratio:1/1;right:-6%;bottom:-18%;background:radial-gradient(circle,oklch(0.82 0.13 80) 0%,transparent 70%)}
.hero-inner{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:clamp(24px,5vw,40px) var(--pad-x) clamp(20px,4vw,30px);display:grid;gap:clamp(18px,4vw,24px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center}
/* Give the photo column a bit more of the row than the text column, on top of the
   image itself scaling past 100% of its own cell (below) — together these make the
   hero photo read as noticeably bigger without the text column getting cramped. */
@media (min-width:900px){.hero-inner{grid-template-columns:minmax(280px,1fr) minmax(320px,1.2fr)}}
.hero-badge{position:relative;margin:0 0 16px;display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:7px 14px;border-radius:var(--radius-pill);box-shadow:0 8px 18px -10px oklch(0.2 0.02 155 / .5)}
.hero-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-2);animation:heroPulse 1.8s ease-in-out infinite}
@keyframes heroPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}
.hero h1{font-size:clamp(36px,5.2vw,57px);line-height:1.06;font-weight:700;text-wrap:balance}
.hero-lede{margin:14px 0 22px;font-size:18px;color:var(--mute-2)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
/* Entrance: the hero is above the fold, so it needs a one-time fade-in on load
   rather than the scroll-triggered .reveal-on-scroll used further down the page
   (which wouldn't fire meaningfully for content already in view). Staggered so
   the eye lands on the badge first, then headline, copy, and buttons in order. */
.hero-badge,.hero h1,.hero-lede,.hero-ctas{animation:kFade .7s var(--ease-out) both}
.hero h1{animation-delay:.08s}
.hero-lede{animation-delay:.16s}
.hero-ctas{animation-delay:.24s}
/* Single pre-composed product photo (see cavelleo_hero_photo()) — the backdrop circle
   and staging podiums are already baked into the image itself, so this just centres
   and scales it responsively. aspect-ratio matches the source file (1536x1024) to
   reserve its box and avoid layout shift while it loads. */
.hero-art{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;overflow:visible}
/* No CSS transition here deliberately — the scroll-zoom easing in theme.js
   (initHeroScrollZoom) already smooths the transform itself frame-by-frame;
   layering a CSS transition on top would re-smooth an already-smoothed value
   and read as laggy/rubbery instead of crisp. */
.hero-photo{display:block;width:118%;max-width:none;height:auto;aspect-ratio:1536/1024;object-fit:contain;will-change:transform}
@media (max-width:899px){.hero-photo{width:100%}}

/* ---------- Sections ---------- */
.section{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}
.section-pad-top{padding-top:clamp(30px,6vw,44px)}
.section-title{font-size:clamp(27px,3.6vw,36px);text-align:center;font-weight:600}

/* Collections */
.section-head{text-align:center;margin-bottom:22px}
.section-head h2{font-size:clamp(27px,3.6vw,36px);font-weight:600}
.section-head p{margin:6px 0 0;font-size:16px;color:var(--mute)}

/* Trust strip: a single bordered bar directly under the hero (5 columns on desktop,
   wrapping to 2/1 on narrower screens) — quicker to scan than the fuller "why shop
   with us" cards further down the page, which restate the same claims in more depth. */
.trust-strip{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:var(--radius-panel);background:#fff;overflow:hidden}
.trust-strip-item{display:flex;align-items:center;gap:12px;padding:18px 16px;border-right:1px solid var(--line)}
.trust-strip-item:last-child{border-right:0}
.trust-strip-icon{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:oklch(0.94 0.05 150);color:var(--accent);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.trust-strip-item:hover .trust-strip-icon{transform:scale(1.08) translateY(-2px);box-shadow:0 6px 14px -6px oklch(0.52 0.13 150 / .4)}
.trust-strip-icon .cavelleo-icon{width:20px;height:20px}
/* Real theme-shipped icon badges (assets/images/icons/) already carry their own
   tinted circle background, so drop this element's own background/color for those
   and just size the image to match the SVG-icon badges' footprint. */
.trust-strip-icon.has-photo{background:none}
.trust-strip-icon.has-photo img{width:100%;height:100%;object-fit:contain}
.trust-strip-item h3{font-size:14px;font-weight:700;margin:0}
.trust-strip-item p{margin:2px 0 0;font-size:12.5px;color:var(--mute)}
@media (max-width:900px){
  .trust-strip{grid-template-columns:repeat(2,1fr)}
  .trust-strip-item{border-right:1px solid var(--line)}
  .trust-strip-item:nth-child(2n){border-right:0}
  .trust-strip-item:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:480px){
  .trust-strip{grid-template-columns:1fr}
  .trust-strip-item{border-right:0}
  .trust-strip-item:not(:first-child){border-top:1px solid var(--line)}
}

/* "Shop by Categories" cards: a tall photographic tile (real photo if there is
   one, otherwise a themed icon over a tinted gradient — see tone-* below), a
   bottom scrim for legible text, name + subtitle, and a circular arrow button
   bottom-right as the click/nav affordance. */
/* auto-fit + minmax lets cards wrap to the next line once they no longer fit at
   their minimum width, but the floor has to actually divide the container: at
   230px min, 5 cards + 4 gaps (~1222px) didn't fit inside the 1180px container,
   so a desktop viewport was silently wrapping to 4-then-1 instead of one row of
   5. 200px keeps 5 in a single row up to the container's full width (5*200+4*18
   = ~1072px) and still wraps naturally on narrower screens. */
.collections-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
/* Square 600x600 source photos (assets/images/categories/) — aspect-ratio:1/1
   matches them exactly, so object-fit:cover fills the card with zero cropping.
   These particular photos deliberately run their subjects edge-to-edge (props
   touching the left/right frame border), so a taller non-square card here would
   crop real content, not just background, on every one of them. */
.collection-item{position:relative;display:block;border-radius:var(--radius-panel-lg);overflow:hidden;aspect-ratio:1/1;background:oklch(0.97 0.012 148);border:1.5px solid var(--line-2);box-shadow:0 1px 3px oklch(0.2 0.02 155 / .06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.collection-item:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 34px -18px oklch(0.2 0.05 155 / .35)}
.collection-item:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.collection-photo{position:absolute;inset:0;z-index:0}
/* display:block matters here — an <img> defaults to inline, which reserves a few
   px of baseline whitespace below it, so width/height:100% still left a sliver of
   the card's background showing at the bottom edge instead of a flush fit. */
.collection-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.collection-item:hover .collection-photo img{transform:scale(1.05)}
/* Gradient scrim so the white name/subtitle stay legible over any photo. Needs an
   explicit z-index higher than .collection-photo — ::before paints as the FIRST
   child by spec, so at the default z-index:auto the photo (later in the DOM) was
   stacking on top of it, hiding the scrim entirely and leaving the text with no
   contrast backing at all. */
.collection-item.has-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 40%,oklch(0.1 0.02 155 / .82) 100%);pointer-events:none}
.collection-icon{position:absolute;top:22px;left:20px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.55);display:grid;place-items:center;color:oklch(0.30 0.03 155);z-index:1}
.collection-icon .cavelleo-icon{width:22px;height:22px}
.collection-arrow{position:absolute;right:16px;bottom:16px;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 4px 10px -4px oklch(0.2 0.02 155 / .3);transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);z-index:1}
.collection-arrow svg{width:17px;height:17px}
.collection-item:hover .collection-arrow{background:var(--accent);color:#fff;transform:translateX(4px)}
.collection-text{position:absolute;left:20px;bottom:18px;right:64px;display:flex;flex-direction:column;gap:2px;z-index:1}
.collection-name{font-size:19px;font-weight:700;color:var(--ink)}
.collection-sub{font-size:13px;color:var(--mute-2)}
.collection-item.has-photo .collection-name{color:#fff}
.collection-item.has-photo .collection-sub{color:rgba(255,255,255,.85)}
.tone-rose{background:linear-gradient(160deg,oklch(0.90 0.05 15) 0%,oklch(0.82 0.07 10) 100%)}
.tone-green{background:linear-gradient(160deg,oklch(0.90 0.06 148) 0%,oklch(0.80 0.09 148) 100%)}
.tone-cream{background:linear-gradient(160deg,oklch(0.93 0.03 85) 0%,oklch(0.85 0.05 75) 100%)}
.tone-amber{background:linear-gradient(160deg,oklch(0.90 0.06 75) 0%,oklch(0.80 0.09 65) 100%)}
.tone-blue{background:linear-gradient(160deg,oklch(0.88 0.04 235) 0%,oklch(0.78 0.06 235) 100%)}

/* ---------- Product grid & cards (also used by WooCommerce overrides) ---------- */
ul.products{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin:22px 0 0;padding:0;list-style:none}
ul.products li.product,.product-card{display:flex;flex-direction:column;gap:9px;float:none;width:auto;margin:0;padding:10px;border:1px solid var(--line);border-radius:var(--radius-panel);transition:box-shadow var(--dur-card) var(--ease-out),border-color var(--dur-card) var(--ease-out)}
.product:hover,.product-card:hover{box-shadow:0 16px 32px -20px oklch(0.2 0.05 155 / .35);border-color:var(--line-2)}
.product .thumb,.product-card .thumb{position:relative;aspect-ratio:1/1;border-radius:var(--radius-img);overflow:hidden;background:oklch(0.945 0.03 148);transition:transform var(--dur-card) var(--ease-out);display:flex;align-items:flex-end;justify-content:center;padding:10px}
.product:hover .thumb,.product-card:hover .thumb{transform:translateY(-4px)}
.product .thumb img,.product-card .thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform var(--dur-image) var(--ease-out)}
.product:hover .thumb img,.product-card:hover .thumb img{transform:scale(1.04)}
.onsale,.badge-sale{position:absolute;top:9px;right:9px;background:var(--sale);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;padding:4px 8px;border-radius:5px;z-index:2;animation:kFade var(--dur-card) var(--ease-out)}
.badge-tag{position:absolute;top:9px;left:9px;background:rgba(255,255,255,.9);font-size:10px;font-weight:700;letter-spacing:.05em;padding:4px 8px;border-radius:5px;color:oklch(0.30 0.012 155);z-index:2;animation:kFade var(--dur-card) var(--ease-out)}
.badge-soldout{position:absolute;top:9px;right:9px;background:oklch(0.32 0.012 155);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;padding:4px 8px;border-radius:5px;z-index:2;animation:kFade var(--dur-card) var(--ease-out)}
.wish-btn{position:absolute;top:8px;left:8px;width:34px;height:34px;border:0;background:rgba(255,255,255,.9);border-radius:50%;font-size:16px;color:oklch(0.50 0.18 20);z-index:2;display:grid;place-items:center;transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.product:hover .wish-btn,.product-card:hover .wish-btn{background:#fff;box-shadow:0 4px 12px -4px oklch(0.2 0.02 155 / .35)}
/* Toggled briefly by initWishlistButtons() in theme.js on click (removed after the
   animation finishes) — a quick scale pulse confirms the toggle without looping. */
.wish-btn.is-pulsing{animation:wishPulse .3s var(--ease-out)}
@keyframes wishPulse{0%{transform:scale(1)}45%{transform:scale(1.25)}100%{transform:scale(1)}}
/* Reflects the real cart contents (see cavelleo_product_card()'s WC()->cart lookup) —
   hidden entirely via the `hidden` attribute when the product isn't in the cart. */
.badge-incart{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:4px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:5px 9px 5px 7px;border-radius:var(--radius-pill);z-index:2;box-shadow:0 4px 12px -4px oklch(0.52 0.13 150 / .55);animation:kFade .2s ease-out;cursor:pointer;text-decoration:none}
.badge-incart:hover{filter:brightness(1.08);color:#fff}
.badge-incart[hidden]{display:none}
.badge-incart svg{width:13px;height:13px;flex:none}
.product .brand,.product-card .brand{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:oklch(0.58 0.012 155);font-weight:600;text-align:center;margin:0}
.product h2,.product h3,.product-card h3{font-size:16px;font-weight:600;text-align:center;line-height:1.35;margin:0}
.product h2 a,.product h3 a,.product-card h3 a{color:var(--ink)}
.product .rating-line{margin:0;text-align:center;font-size:15px;color:var(--mute)}
.product .rating-line .star{color:var(--star)}
/* Sold count / low-stock urgency line, sits between rating and price */
.stock-meta{margin:0;display:flex;justify-content:center;align-items:center;gap:6px;font-size:12px;font-weight:600;flex-wrap:wrap}
.stock-meta .stock-low{color:var(--sale)}
.stock-meta .stock-available,.stock-meta .stock-sold{color:var(--mute);font-weight:500}
.stock-meta .stock-low+.stock-sold,.stock-meta .stock-available+.stock-sold{position:relative;padding-left:8px}
.stock-meta .stock-low+.stock-sold::before,.stock-meta .stock-available+.stock-sold::before{content:"";position:absolute;left:0;top:50%;width:3px;height:3px;border-radius:50%;background:currentColor;transform:translateY(-50%)}
.product .price,.product-card .price,.woocommerce ul.products li.product .price{text-align:center;font-size:16px;font-weight:700;color:var(--price);display:flex;gap:7px;justify-content:center;align-items:baseline}
.product .price del,.product-card .price del{color:oklch(0.62 0.012 155);font-weight:400;margin-right:0}
.product .price ins,.product-card .price ins{text-decoration:none}
.product .button,.product-card .button,.woocommerce a.button,.woocommerce button.button{margin-top:auto;min-height:44px;border:1px solid oklch(0.86 0.014 148);border-radius:var(--radius-btn);background:#fff;font-size:15px;font-weight:600;color:oklch(0.24 0.012 155);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);text-align:center;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.product .button svg,.product-card .button svg{width:16px;height:16px;flex:none;transition:transform var(--dur-fast) var(--ease-out)}
.product .button:hover,.product-card .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px)}
.product .button:active,.product-card .button:active{transform:translateY(1px)}
/* Success state applied briefly by theme.js after a live add-to-cart (see the
   'added_to_cart' jQuery handler) — a filled green button + checkmark confirms the
   click worked without waiting for the page's own badge/count updates to register. */
.product .button.is-added,.product-card .button.is-added{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Out-of-stock: deliberately unlike the active buy buttons — a dashed border reads as
   "unavailable" at a glance, rather than just a greyed-out clone of the normal button
   (which too easily misreads as merely disabled-but-loading). */
/* An amber/warning tint rather than neutral gray — an out-of-stock control should
   read as an alert state, not just "disabled", without the alarm of red. */
.button-soldout,.button-soldout:hover,.product .button-soldout:hover,.product-card .button-soldout:hover{margin-top:auto;min-height:44px;border:1.5px dashed oklch(0.75 0.12 75);border-radius:var(--radius-btn);background:oklch(0.95 0.05 85);color:oklch(0.46 0.13 65);font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px;cursor:not-allowed;transform:none}
.button-soldout svg{width:16px;height:16px;flex:none;opacity:.8}
.thumb.is-soldout img{filter:grayscale(45%);opacity:.55}
.thumb.is-soldout::after{content:"";position:absolute;inset:0;background:oklch(1 0 0 / .1)}

/* "Add to cart" row: WooCommerce's add-to-cart.js inserts the "View cart" link as a
   sibling right after the button (jQuery .after()), which lands inside this wrapper —
   styled as a compact icon button next to Add to cart instead of a text link below it. */
.pc-cart-row{margin-top:auto;display:flex;gap:8px}
.pc-cart-row .button{flex:1;margin-top:0}
.pc-cart-row .added_to_cart.wc-forward{position:relative;flex:none;width:44px;min-height:44px;border:1px solid var(--accent);border-radius:var(--radius-btn);background:oklch(0.96 0.03 150);color:var(--accent);font-size:0;line-height:0;overflow:hidden;transition:background .15s ease,color .15s ease;animation:kFade .2s ease-out}
.pc-cart-row .added_to_cart.wc-forward:hover{background:var(--accent);color:#fff}
/* Positioned absolutely (rather than centered via flex/grid) so the button's own text
   node — invisible via font-size:0 but still a layout box — can't skew the icon off-center. */
.pc-cart-row .added_to_cart.wc-forward::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;background:currentColor;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1.4"/><circle cx="18" cy="21" r="1.4"/><path d="M2.5 3h2l2.2 12.2a2 2 0 0 0 2 1.7h8a2 2 0 0 0 2-1.6L21 8H6.2"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1.4"/><circle cx="18" cy="21" r="1.4"/><path d="M2.5 3h2l2.2 12.2a2 2 0 0 0 2 1.7h8a2 2 0 0 0 2-1.6L21 8H6.2"/></svg>') center/contain no-repeat}

/* ---------- Horizontal scroll rail (New Arrivals, Best Sellers, Customer Reviews) ----------
   JS (initScrollRails) toggles is-start/is-end/no-scroll on the outer .rail-section as the
   track scrolls; everything below — fades, arrow disabled state, progress bar — reacts to
   those three classes rather than tracking scroll state itself. */
.rail-section.no-scroll .rail-controls{visibility:hidden}

.rail-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.rail-head .section-title{text-align:left;margin:0}
.rail-controls{display:flex;align-items:center;gap:14px;flex:none}
.rail-progress-wrap{width:120px;height:4px;border-radius:99px;background:oklch(0.92 0.014 148);overflow:hidden}
.rail-progress-thumb{display:block;height:100%;width:30%;border-radius:99px;background:var(--accent);transform:translateX(0);transition:transform .12s linear}

.scroll-rail{position:relative;margin-top:18px;--rail-fade:56px}
.rail-track,ul.products.rail-track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:6px 2px 18px;margin:0;list-style:none;cursor:grab;user-select:none}
.rail-section.is-dragging .rail-track{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.rail-track::-webkit-scrollbar{display:none}
.rail-track>li.product,.rail-track>.product-card{flex:0 0 260px;align-self:stretch;scroll-snap-align:start}
.rail-track>.testimonial{flex:0 0 min(340px,84vw);scroll-snap-align:start}
/* Edge fades hint that there's more to scroll; fully opaque only once the rail can scroll. */
.scroll-rail::before,.scroll-rail::after{content:"";position:absolute;top:0;bottom:18px;width:var(--rail-fade);pointer-events:none;z-index:2;opacity:1;transition:opacity .25s ease}
.scroll-rail::before{left:0;background:linear-gradient(90deg,var(--base) 15%,transparent)}
.scroll-rail::after{right:0;background:linear-gradient(270deg,var(--base) 15%,transparent)}
.rail-section.is-start .scroll-rail::before,.rail-section.no-scroll .scroll-rail::before{opacity:0}
.rail-section.is-end .scroll-rail::after,.rail-section.no-scroll .scroll-rail::after{opacity:0}

.rail-nav{width:40px;height:40px;border-radius:50%;background:#fff;border:1.5px solid var(--accent);box-shadow:0 0 0 3px oklch(0.52 0.13 150 / .12),0 6px 16px -10px oklch(0.20 0.012 155 / .4);display:grid;place-items:center;color:var(--accent);transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.rail-nav:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px) scale(1.06);box-shadow:0 0 0 4px oklch(0.52 0.13 150 / .18),0 10px 20px -10px oklch(0.52 0.13 150 / .55)}
.rail-nav:active{transform:translateY(0) scale(.94)}
.rail-nav svg{width:18px;height:18px}
.rail-nav:disabled{opacity:.35;pointer-events:none;transform:none;box-shadow:none;border-color:var(--line-2);color:var(--mute)}
@media (max-width:820px){.rail-controls{display:none}.scroll-rail::before,.scroll-rail::after{width:32px}}
@media (max-width:560px){.rail-progress-wrap{width:80px}}

/* Promo — Special Offer banner: real theme-shipped artwork (assets/images/promo/,
   set via the --promo-bg custom property inline in front-page.php) as the full
   card background, sized/positioned so its built-in negative space sits on the
   left for the real HTML copy — not a separate floating photo card. */
.promo-banner{position:relative;width:100%;border-radius:var(--radius-panel);overflow:hidden;min-height:clamp(220px,28vw,340px);display:flex;align-items:center;text-align:left;padding:clamp(28px,4.5vw,48px);background:var(--promo-bg) center/cover no-repeat,linear-gradient(118deg,oklch(0.43 0.12 158) 0%,oklch(0.6 0.13 140) 100%)}
.promo-banner-content{position:relative;z-index:1;max-width:420px}
.promo-badge{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:var(--radius-pill);margin-bottom:14px}
.promo-banner h3{font-size:clamp(28px,3.8vw,42px);color:#fff;font-weight:700;letter-spacing:-0.01em}
.promo-banner p{margin:10px 0 20px;color:rgba(255,255,255,.92);font-size:17px;max-width:34ch}

/* Promo — Kitchen/Tech tiles: same "real artwork as the card background, copy over
   its built-in left-side negative space" treatment as the banner above. */
.promo-tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:16px}
.promo-tile{position:relative;border-radius:var(--radius-panel);overflow:hidden;min-height:200px;display:flex;align-items:center;padding:22px;background:var(--promo-bg) center/cover no-repeat}
.promo-tile-content{position:relative;z-index:1;max-width:70%}
.promo-tile h3{color:#fff;font-size:24px;font-weight:700}
.promo-tile p{margin:6px 0 14px;color:rgba(255,255,255,.9);font-size:15px}
@media (max-width:420px){.promo-tile-photo-card{display:none}}

.discount-strip{border-radius:var(--radius-panel);background:linear-gradient(90deg,var(--accent-2),var(--accent-3));padding:22px 24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;text-align:center}
.discount-strip h2{font-size:clamp(21px,2.6vw,27px);color:#fff;font-weight:600}
.discount-strip .btn-white-pill{color:oklch(0.34 0.10 158)}

/* Pillars */
.pillars-wrap{display:grid;gap:clamp(20px,5vw,32px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:center}
.pillars-art{position:relative;aspect-ratio:1/1;border-radius:50%;background:oklch(0.93 0.03 195);display:grid;place-items:center}
/* delivery-illustration.png is a transparent-background cutout (not a filled photo),
   so contain — not cover — keeps the whole character visible and lets .pillars-art's
   own soft circular backdrop show through around it, matching the intended "floating
   illustration on a tinted circle" look instead of cropping the character to a square. */
.pillars-art-inner{width:88%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.pillars-art-inner img{display:block;width:100%;height:100%;object-fit:contain}
/* Floating badge icons around the illustration, echoing the delivery/security theme
   of the pillars below without repeating their exact copy. */
.pillars-badge{position:absolute;width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 10px 24px -10px oklch(0.2 0.05 155 / .35);display:grid;place-items:center;color:var(--accent)}
.pillars-badge .cavelleo-icon{width:24px;height:24px}
.pillars-badge-a{top:2%;left:0}
.pillars-badge-b{bottom:6%;right:-2%;color:oklch(0.5 0.12 235)}

.eyebrow{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

/* Each pillar pairs a tinted icon circle with its title/body, rather than plain
   stacked text — same tone-* language as the "Shop by Categories" cards above. */
.pillar{margin-top:18px;display:flex;gap:14px;align-items:flex-start}
.pillar-icon{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.pillar-icon .cavelleo-icon{width:21px;height:21px}
.pillar-icon.tone-green{background:oklch(0.94 0.05 150);color:var(--accent)}
.pillar-icon.tone-amber{background:oklch(0.95 0.05 75);color:oklch(0.55 0.12 65)}
.pillar-icon.tone-blue{background:oklch(0.93 0.035 235);color:oklch(0.5 0.12 235)}
.pillar h3{font-size:17px;font-weight:600;margin:0 0 4px}
.pillar p{margin:0;font-size:15px;color:var(--mute-2)}
.pillar h3{font-size:17px;font-weight:600}
.pillar p{margin:6px 0 0;font-size:16px;line-height:1.6;color:var(--mute-2);max-width:52ch}

/* Testimonials */
.testimonial{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.testimonial .stars{margin:0 0 10px;color:var(--star);font-size:16px;letter-spacing:.14em}
.testimonial h3{font-size:20px;font-weight:600;line-height:1.4}
.testimonial p{margin:10px 0 0;font-size:16px;line-height:1.65;color:var(--mute-2)}
.testimonial footer{margin-top:14px;font-size:15px;font-style:italic;color:oklch(0.48 0.012 155)}

/* Brands */
.brands-row{display:flex;flex-wrap:wrap;gap:18px clamp(22px,5vw,40px);justify-content:center;margin-top:20px}
.brand-name{font:600 22px Poppins,sans-serif;letter-spacing:.06em;color:oklch(0.76 0.009 155)}

/* Trust */
.trust-grid{display:grid;gap:clamp(18px,4vw,22px);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.trust-icon{display:flex;width:48px;height:48px;border-radius:50%;align-items:center;justify-content:center;flex:none;background:oklch(0.94 0.05 150);color:var(--accent)}
.trust-icon .cavelleo-icon{width:23px;height:23px}
.trust-grid h3{font-size:16px;font-weight:600;margin-top:12px}
.trust-grid p{margin:6px 0 0;font-size:15px;line-height:1.6;color:oklch(0.46 0.012 155)}

/* ---------- Shop / archive ---------- */
.breadcrumb{font-size:15px;color:oklch(0.50 0.012 155)}
.shop-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:20px 0 14px}
.pill-btn{padding:12px 18px;border:1px solid var(--line-2);background:#fff;border-radius:var(--radius-pill);font-weight:600;font-size:16px;min-height:44px}
/* WooCommerce's own catalog-ordering template renders <form class="woocommerce-ordering">
   <select class="orderby">, not the "sort-select" class this used to (mistakenly) target,
   so the dropdown was falling back to bare browser chrome. */
.sort-select-wrap .woocommerce-ordering{display:block}
.sort-select-wrap select.orderby{appearance:none;-webkit-appearance:none;padding:11px 40px 11px 18px;border:1px solid var(--line-2);border-radius:var(--radius-pill);font-size:16px;font-weight:600;color:var(--ink);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234b5a4e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 14px center/18px 18px;min-height:44px;cursor:pointer;transition:border-color .15s ease}
.sort-select-wrap select.orderby:hover{border-color:var(--accent)}
.sort-select-wrap select.orderby:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.result-count{margin:0 0 0 auto;font-size:16px;color:oklch(0.50 0.012 155)}
.filters-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-panel);padding:18px;margin-bottom:18px;animation:kFade .18s ease-out}
.filters-panel legend{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:oklch(0.52 0.012 155);padding:0 0 8px}
.filter-chip{padding:9px 14px;border-radius:var(--radius-pill);font-size:15px;font-weight:500;min-height:38px;border:1px solid var(--line-2);background:#fff}
.pagination-pills{display:flex;justify-content:center;gap:8px;padding:22px 0}
.pagination-pills .page-numbers,.pagination-pills a,.pagination-pills span{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);font-weight:600;font-size:16px;border:1px solid var(--line-2);background:#fff}
.pagination-pills .current{background:var(--accent);color:#fff;border-color:var(--accent)}
.faq-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius-panel);padding:22px}
.faq-item{border-top:1px solid oklch(0.95 0.010 148);padding:14px 0 0;margin-top:14px}
.faq-item h3{font-size:17px;font-weight:600}
.faq-item p{margin:6px 0 0;font-size:16px;line-height:1.65;color:var(--mute-2)}

/* ---------- Single product ---------- */
.pdp-grid{display:grid;gap:clamp(24px,5vw,44px);grid-template-columns:repeat(auto-fit,minmax(290px,1fr));margin-top:18px;align-items:start}
.pdp-gallery-main{position:relative;aspect-ratio:1/1;border-radius:22px;background:oklch(0.945 0.03 148);overflow:hidden;box-shadow:0 1px 2px oklch(0.20 0.012 155 / .04),0 18px 40px -18px oklch(0.20 0.012 155 / .18)}
.pdp-gallery-main img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .35s ease}
.pdp-gallery-main:hover img{transform:scale(1.04)}
.pdp-gallery-main .badge-sale{top:14px;right:14px;font-size:11px;padding:5px 10px;border-radius:6px}
.pdp-gallery-wish{position:absolute;top:14px;left:14px;z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);font-size:18px;line-height:1;color:oklch(0.50 0.18 20);box-shadow:0 4px 12px oklch(0.20 0.012 155 / .16);transition:transform .15s ease,background .15s ease}
.pdp-gallery-wish:hover{transform:scale(1.08);background:#fff}
.pdp-thumbs{display:flex;gap:10px;margin-top:12px}
.pdp-thumb{flex:1;aspect-ratio:1/1;border-radius:14px;background:repeating-linear-gradient(135deg,oklch(0.955 0.02 148) 0 8px,oklch(0.915 0.028 148) 8px 16px);border:2px solid transparent;padding:0;overflow:hidden;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.pdp-thumb:hover{transform:translateY(-2px);box-shadow:0 6px 14px oklch(0.20 0.012 155 / .10)}
.pdp-thumb.is-active{border-color:var(--accent);box-shadow:0 0 0 3px oklch(0.52 0.13 150 / .16)}
.pdp-thumb img{width:100%;height:100%;object-fit:cover}
.pdp-brand{margin:0 0 10px;display:inline-block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);background:oklch(0.96 0.03 150);padding:5px 11px;border-radius:var(--radius-pill)}
.pdp-title{font-size:clamp(28px,3.6vw,40px);line-height:1.1;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.pdp-meta{margin:12px 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:15px;color:var(--mute-2)}
.pdp-meta .star{color:var(--star);letter-spacing:.08em}
.pdp-meta-sep{color:var(--line-2)}
.pdp-meta a{text-decoration:underline;text-underline-offset:2px}
.pdp-meta-firstreview{font-weight:600;color:var(--accent)}

.pdp-buybox{margin-top:22px;border:1px solid var(--line);border-radius:var(--radius-panel-lg);background:#fff;padding:22px;box-shadow:0 1px 2px oklch(0.20 0.012 155 / .03),0 14px 32px -20px oklch(0.20 0.012 155 / .16)}
.pdp-price-row{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
/* WooCommerce renders prices as .price > del/ins, so those must be targeted directly. */
.pdp-price-row .price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0}
.pdp-price-row .price,.pdp-price-row ins,.pdp-price-row ins .amount,.pdp-price-row>.price>.amount{font:700 36px Poppins,sans-serif;color:var(--price);text-decoration:none;letter-spacing:-.02em}
.pdp-price-row ins{order:1;background:transparent}
.pdp-price-row del{order:2;text-decoration:line-through}
.pdp-price-row del,.pdp-price-row del .amount{font:400 18px "DM Sans",sans-serif;color:oklch(0.62 0.012 155)}
.pdp-price{font:700 36px Poppins,sans-serif;color:var(--price)}
.pdp-was{font-size:18px;color:oklch(0.62 0.012 155)}
.pdp-off{order:3;align-self:center;font-size:12px;font-weight:700;color:#fff;background:var(--sale);padding:5px 9px;border-radius:6px;letter-spacing:.03em}
.pdp-stock{margin:10px 0 0;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:oklch(0.48 0.12 150)}
.pdp-stock-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.pdp-stock.is-out-stock{color:var(--price)}
.pdp-buy-row{display:flex;gap:10px;align-items:center;margin:18px 0 12px}
.qty-stepper{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:#fff;flex:none}
.qty-stepper button{width:46px;height:48px;border:0;background:transparent;font-size:22px;color:var(--ink);border-radius:var(--radius-pill);transition:background .15s ease}
.qty-stepper button:hover{background:oklch(0.96 0.03 150)}
.qty-stepper span,.qty-stepper input{min-width:34px;width:34px;text-align:center;font-weight:700;border:0;background:transparent;-moz-appearance:textfield}
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.btn-add-cart{flex:1;min-height:48px;padding:0 20px;border:1.5px solid var(--ink);border-radius:var(--radius-pill);background:#fff;font-weight:700;font-size:17px;transition:background .15s ease,color .15s ease,transform .15s ease}
.btn-add-cart:hover{background:var(--ink);color:#fff;transform:translateY(-1px)}
.btn-buy-now{width:100%;min-height:52px;border:0;border-radius:var(--radius-pill);background:var(--accent);color:#fff;font-weight:700;font-size:18px;box-shadow:0 10px 22px oklch(0.52 0.13 150 / .26);transition:transform .15s ease,box-shadow .15s ease}
.btn-buy-now:hover{transform:translateY(-1px);box-shadow:0 14px 28px oklch(0.52 0.13 150 / .32)}
.pdp-secondary-row{display:flex;gap:10px;margin-top:10px}
.pdp-secondary-row button{flex:1;min-height:44px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:#fff;font-weight:600;font-size:15px;transition:border-color .15s ease,color .15s ease}
.pdp-secondary-row button:hover{border-color:var(--accent);color:var(--accent)}
.pdp-added-msg{margin:0;font-size:15px;font-weight:600;color:oklch(0.46 0.12 150)}
.pdp-added-msg:not(:empty){margin-top:12px}
.pdp-trust-row{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 20px}
.pdp-trust-row li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--mute-2)}
.pdp-trust-row span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:oklch(0.96 0.03 150);color:var(--accent);font-size:13px;flex:none}
.pdp-good-to-know{margin-top:16px;border:1px solid var(--line);border-radius:var(--radius-panel-lg);background:#fff;padding:18px 20px}
.pdp-good-to-know h2{font-size:16px;font-weight:600}
.pdp-good-to-know p{margin:8px 0 0;font-size:15px;line-height:1.7;color:var(--mute-2)}
.pdp-good-to-know ul{margin:8px 0 0;padding-left:18px;font-size:15px;line-height:1.75;color:var(--mute-2)}

.pdp-tabs{display:flex;gap:4px;overflow-x:auto;margin:40px 0 0;padding:5px;background:oklch(0.955 0.016 148);border-radius:var(--radius-pill);width:fit-content;max-width:100%;scrollbar-width:none}
.pdp-tabs::-webkit-scrollbar{display:none}
.pdp-tabs button{padding:11px 18px;border:0;background:transparent;border-radius:var(--radius-pill);font-size:15px;font-weight:600;white-space:nowrap;min-height:40px;color:var(--mute-2);transition:background .15s ease,color .15s ease}
.pdp-tabs button:hover{color:var(--ink)}
.pdp-tabs button.is-active{color:#fff;background:var(--accent);box-shadow:0 4px 10px oklch(0.52 0.13 150 / .3)}
.pdp-tab-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-panel-lg);padding:26px;margin-top:14px}
.pdp-tab-panel h2{font-size:20px;font-weight:600}
.pdp-tab-panel p{margin:10px 0 0;font-size:17px;line-height:1.7;color:oklch(0.38 0.012 155);max-width:75ch}
.pdp-tab-panel ul{margin:14px 0 0;padding-left:18px;font-size:16px;line-height:1.85;color:oklch(0.40 0.012 155)}
.pdp-tab-panel table{width:100%;border-collapse:collapse;margin-top:12px;font-size:15px}
.pdp-tab-panel th,.pdp-tab-panel td{text-align:left;padding:11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.pdp-tab-panel th{width:34%;font-weight:600;color:var(--mute-2)}
.pdp-tab-panel td p{margin:0;font-size:15px}

/* Reviews */
.pdp-section-title{font-size:clamp(22px,2.8vw,27px);font-weight:600}
.pdp-reviews{margin-top:40px}
.pdp-reviews-grid{display:grid;gap:18px;grid-template-columns:minmax(240px,300px) minmax(0,1fr);align-items:start;margin-top:18px}
@media (max-width:760px){.pdp-reviews-grid{grid-template-columns:1fr}}
.reviews-list{display:grid;gap:14px;min-width:0}
.reviews-empty{margin:0;background:#fff;border:1px dashed var(--line-2);border-radius:var(--radius-panel-lg);padding:24px;text-align:center;font-size:15px;color:var(--mute)}
.reviews-summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius-panel-lg);padding:22px;box-shadow:0 1px 2px oklch(0.20 0.012 155 / .03),0 14px 32px -22px oklch(0.20 0.012 155 / .16)}
.reviews-summary .avg{margin:0;font:700 46px Poppins,sans-serif;letter-spacing:-.02em;line-height:1}
.reviews-summary .stars{margin:8px 0 0;color:var(--star);letter-spacing:.14em}
.reviews-summary .count{margin:6px 0 16px;font-size:14px;color:oklch(0.50 0.012 155)}
.rating-distribution{display:grid;gap:8px}
.dist-row{display:flex;align-items:center;gap:10px;margin:0;font-size:13px;color:var(--mute)}
.dist-row>span:first-child{width:26px;flex:none}
.dist-row>span:last-child{width:26px;flex:none;text-align:right}
.dist-bar{flex:1;height:8px;border-radius:99px;background:oklch(0.94 0.011 148);overflow:hidden}
.dist-bar-fill{display:block;height:8px;border-radius:99px;background:var(--star)}
.review-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-panel-lg);padding:20px;transition:box-shadow .15s ease}
.review-card:hover{box-shadow:0 10px 24px -16px oklch(0.20 0.012 155 / .22)}
.review-card .stars{margin:0;color:var(--star);font-size:15px;letter-spacing:.14em}
.review-card h3{font-size:17px;margin-top:6px;font-weight:600}
.review-card p{margin:6px 0 0;font-size:16px;line-height:1.65;color:oklch(0.38 0.012 155)}
.review-card footer{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:oklch(0.50 0.012 155);align-items:center}
.review-verified{color:oklch(0.46 0.12 150);font-weight:700}
.pdp-related{margin-top:40px}
.pdp-related .products{margin-top:18px}

.review-form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-panel-lg);padding:22px;box-shadow:0 1px 2px oklch(0.20 0.012 155 / .03),0 14px 32px -22px oklch(0.20 0.012 155 / .16)}
.review-form-card .comment-reply-title{font-size:19px;font-weight:600}
.review-form-card .comment-notes{margin:8px 0 18px;font-size:14px;color:var(--mute)}
.cavelleo-review-form{display:grid;gap:16px}
.cavelleo-review-form .form-row{margin:0;display:grid;gap:6px}
.cavelleo-review-form label{font-size:13px;font-weight:600;color:var(--mute-2)}
.cavelleo-review-form .required{color:var(--price)}
.cavelleo-review-form input[type=text],.cavelleo-review-form input[type=email],.cavelleo-review-form input[type=url],.cavelleo-review-form textarea{width:100%;padding:13px 16px;border:1px solid var(--line-2);border-radius:12px;font-size:15px;background:var(--base);resize:vertical}
.cavelleo-review-form input:focus,.cavelleo-review-form textarea:focus{border-color:var(--accent)}
.cavelleo-review-form .comment-form-cookies-consent{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute)}
.cavelleo-review-form .comment-form-cookies-consent input{margin:0}
.cavelleo-review-form .form-submit{margin:0}
.cavelleo-review-form .form-submit .btn-primary{border:0;cursor:pointer}
.cavelleo-review-form .logged-in-as{font-size:14px;color:var(--mute)}
.cavelleo-review-form .logged-in-as a{text-decoration:underline}

/* ---------- Cart ---------- */
.cart-empty{background:#fff;border:1px solid var(--line);border-radius:var(--radius-panel-lg);padding:48px 20px;text-align:center;margin-top:18px}
.cart-item-count{margin:6px 0 0;font-size:15px;color:var(--mute)}
.cart-item-count strong{color:var(--ink)}
.cart-layout{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:18px;align-items:start;transition:opacity .15s ease}
.cart-layout.is-updating{opacity:.55;pointer-events:none}

/* Remove-item confirmation dialog (replaces the browser's plain confirm()) — built
   from the same tokens/pill-button language as the rest of the theme (radius-pill
   actions, Poppins heading, --price for the destructive action) instead of a
   generic browser-style box. */
body.has-modal{overflow:hidden}
.cart-remove-overlay{position:fixed;inset:0;z-index:200;background:oklch(0.18 0.02 155 / .5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px;animation:kFade .15s ease-out}
.cart-remove-dialog{background:#fff;border:1px solid var(--line);border-radius:var(--radius-panel-lg);padding:28px;max-width:360px;width:100%;text-align:center;box-shadow:0 24px 60px -20px oklch(0.15 0.02 155 / .45);animation:kFade .2s ease-out}
.cart-remove-icon{width:52px;height:52px;margin:0 auto;border-radius:50%;background:oklch(0.95 0.03 25);color:oklch(0.46 0.17 25);display:grid;place-items:center}
.cart-remove-icon svg{width:24px;height:24px}
.cart-remove-dialog h2{margin:16px 0 0;font-size:19px;font-weight:700}
.cart-remove-dialog p{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--mute-2)}
.cart-remove-actions{margin-top:22px;display:flex;gap:10px}
.cart-remove-actions .btn-outline,.cart-remove-confirm{flex:1;padding:0 18px;min-height:46px;border-radius:var(--radius-pill);font-weight:600;font-size:15px}
.cart-remove-confirm{border:0;background:var(--price);color:#fff;transition:background .15s ease,transform .15s ease}
.cart-remove-confirm:hover{background:oklch(0.46 0.20 25);transform:translateY(-1px)}

/* Non-destructive variant (checkout confirm) — brand accent instead of warning red. */
.cart-remove-dialog.is-accent .cart-remove-icon{background:oklch(0.94 0.05 150);color:var(--accent)}
.cart-remove-dialog.is-accent .cart-remove-confirm{background:var(--accent)}
.cart-remove-dialog.is-accent .cart-remove-confirm:hover{background:var(--accent-3)}
.cart-items-col{display:grid;gap:12px}
.free-ship-msg{background:oklch(0.95 0.025 195);border-radius:12px;padding:12px 16px;font-size:16px;font-weight:600;color:oklch(0.36 0.09 150);margin-bottom:2px}

.cart-line{background:#fff;border:1px solid var(--line);border-radius:var(--radius-panel);padding:18px;display:flex;gap:18px;transition:box-shadow .15s ease,border-color .15s ease}
.cart-line:hover{box-shadow:0 6px 20px -12px oklch(0.2 0.02 155 / .25)}
.cart-line.is-highlight{outline:2px solid var(--accent);outline-offset:2px;animation:kFade .4s ease-out}
.cart-line-thumb{width:104px;height:104px;border-radius:var(--radius-img);flex:none;overflow:hidden;background:oklch(0.96 0.02 148)}
.cart-line-thumb img{width:100%;height:100%;object-fit:cover}
.cart-line-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}

/* Top: title/SKU/unit-price on the left, the line subtotal pinned to the right —
   the subtotal is what a shopper scans for first, so it gets its own clear block
   rather than being buried in a corner-anchored price. */
.cart-line-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.cart-line-heading{min-width:0}
.cart-line-heading h2{font-size:16px;line-height:1.35;font-weight:600}
.cart-line-meta{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--mute)}
.cart-line-unit{position:relative;padding-left:11px}
.cart-line-unit::before{content:"";position:absolute;left:0;top:50%;width:3px;height:3px;border-radius:50%;background:currentColor;transform:translateY(-50%)}
.cart-line-subtotal{flex:none;text-align:right}
.cart-line-subtotal-label{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.cart-line-price{font-size:19px;font-weight:700;color:var(--ink);white-space:nowrap}

/* Foot: quantity control on the left, a text+icon "Remove" action on the right —
   easier to scan and tap than a lone icon-only circle floating in the top corner. */
.cart-line-foot{margin-top:auto;padding-top:4px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cart-line-remove{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;color:var(--price);font-size:13px;font-weight:600;padding:6px 4px;border-radius:8px;transition:color .15s ease,background .15s ease}
.cart-line-remove:hover{color:#fff;background:var(--price)}
.cart-line-remove svg{width:16px;height:16px;flex:none}

@media (max-width:480px){
  .cart-line{padding:14px;gap:12px}
  .cart-line-thumb{width:80px;height:80px}
  .cart-line-top{flex-wrap:wrap}
  .cart-line-subtotal{text-align:left}
}

.cart-actions-row{margin-top:4px}

.order-summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius-panel-lg);padding:20px}
.order-summary dl{margin:14px 0 0;display:grid;grid-template-columns:1fr auto;gap:10px;font-size:16px;color:var(--mute-2)}
.order-summary .total-row{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid oklch(0.95 0.010 148);margin:14px 0 0;padding-top:14px}
.order-summary .total-row .amount{font:700 28px Poppins,sans-serif}
/* Coupon field lives inside the order summary card, between the totals list and the
   grand total, rather than crowding the "Update cart" action row above the line items. */
.cart-coupon-row{display:flex;gap:8px;margin:16px 0 0;padding-top:16px;border-top:1px solid oklch(0.95 0.010 148)}
.cart-coupon-row .input-text{flex:1;min-width:0;min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--radius-pill);font-size:15px;background:var(--base)}
.cart-coupon-row .btn-outline{flex:none;padding:0 18px}

/* ---------- Checkout ---------- */
.checkout-steps{list-style:none;padding:0;margin:18px 0 0;display:flex;gap:8px;overflow-x:auto}
.checkout-steps li{flex:none;padding:9px 14px;border-radius:var(--radius-pill);font-size:15px;font-weight:600;border:1px solid var(--line-2);display:flex;align-items:center;gap:8px;color:var(--mute);background:#fff;cursor:default}
.checkout-steps li.is-active{border-color:var(--accent);color:var(--ink);background:oklch(0.96 0.03 150)}
.checkout-steps li.is-active .step-num{background:var(--accent);color:#fff}
.checkout-steps li.is-done{color:var(--mute-2);cursor:pointer}
.checkout-steps li.is-done .step-num{background:oklch(0.90 0.03 150);color:oklch(0.36 0.10 150)}
.checkout-steps .step-num{width:20px;height:20px;border-radius:50%;background:var(--line-2);color:var(--mute);font-size:11px;font-weight:700;display:grid;place-items:center;flex:none}
.checkout-panel{margin-top:0}
.checkout-panel h2{font-size:20px;font-weight:600;margin-bottom:14px}
.checkout-step + .checkout-step{margin-top:0}
.checkout-step-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:20px}
.woocommerce-billing-fields__field-wrapper{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.woocommerce-billing-fields__field-wrapper .form-row-wide{grid-column:1/-1}
.woocommerce-checkout .form-row label{display:block;font-size:15px;font-weight:600;margin-bottom:6px;color:var(--mute-2)}
.woocommerce-checkout .form-row input.input-text,.woocommerce-checkout select{padding:13px 16px;border:1px solid var(--line-2);border-radius:12px;font-size:17px;min-height:48px;background:var(--base);width:100%}
.woocommerce-checkout #order_review{background:transparent;border:0;padding:0}
.shipping-methods-wrap table,.woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse;font-size:16px}
.shipping-methods-wrap td,.shipping-methods-wrap th,.woocommerce-checkout-review-order-table td,.woocommerce-checkout-review-order-table th{padding:10px 0;border-bottom:1px solid var(--line);text-align:left}
.wc_payment_methods{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.wc_payment_methods > li{border:1px solid var(--line-2);border-radius:12px;padding:14px}
.payment_box{margin-top:10px;font-size:15px;color:var(--mute-2)}
.woocommerce-checkout button[type=submit],#place_order{min-height:52px;border:0;border-radius:var(--radius-pill);background:var(--accent);color:#fff;font-weight:700;font-size:18px;padding:0 26px}
@media (max-width:820px){.checkout-layout{grid-template-columns:1fr !important}}

/* ---------- Wishlist / account ---------- */
.narrow-main{max-width:1040px;margin:0 auto;padding:20px var(--pad-x) clamp(26px,5vw,34px)}
.narrow-main h1{font-size:33px;font-weight:600;margin-bottom:22px}
.account-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-panel-lg);padding:20px}
.account-card h2{font-size:20px;font-weight:600}
.order-row{border-top:1px solid oklch(0.95 0.010 148);margin-top:12px;padding-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.order-status{font-size:14px;font-weight:600;padding:4px 10px;border-radius:var(--radius-pill)}
/* WooCommerce's [woocommerce_my_account] shortcode always wraps its output in its own
   <div class="woocommerce"> (WC_Shortcodes::shortcode_wrapper) regardless of theme hooks,
   so the nav/content two-up grid has to target that wrapper, not .narrow-main itself. */
.woocommerce-account .narrow-main>.woocommerce:has(.woocommerce-MyAccount-navigation){display:grid;gap:24px;grid-template-columns:200px 1fr;align-items:start}
.woocommerce-MyAccount-navigation{background:#fff;border:1px solid var(--line);border-radius:var(--radius-panel-lg);padding:14px;align-self:start;position:sticky;top:86px}
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.woocommerce-MyAccount-navigation a{display:block;padding:10px 12px;border-radius:10px;font-size:16px;font-weight:600;color:var(--mute-2);transition:background .15s,color .15s}
.woocommerce-MyAccount-navigation a:hover{background:oklch(0.97 0.018 148);color:var(--ink)}
.woocommerce-MyAccount-navigation li.is-active a,.woocommerce-MyAccount-navigation a[aria-current]{background:oklch(0.96 0.03 150);color:var(--ink)}
.woocommerce-MyAccount-content{min-width:0}
/* Logged-out view (login/register) has no nav — center the auth card instead of leaving it pinned in the empty nav column */
.woocommerce-account .narrow-main:not(:has(.woocommerce-MyAccount-navigation)){max-width:460px}
.woocommerce-account .narrow-main:not(:has(.woocommerce-MyAccount-navigation)):has(.account-auth-columns){max-width:820px}
@media (max-width:720px){.woocommerce-account .narrow-main>.woocommerce:has(.woocommerce-MyAccount-navigation){grid-template-columns:1fr}.woocommerce-MyAccount-navigation{position:static}}

/* WC's woocommerce_output_all_notices() wraps notices in this div, and some notices
   (e.g. checkout's "Have a coupon?" prompt, fired by woocommerce_before_checkout_form
   before <main> even opens) render as a bare .woocommerce-info with no wrapper at
   all — so containment/spacing is applied to the message/error/info elements
   themselves below, not just this wrapper, and works either way. */
.woocommerce-notices-wrapper{display:flex;flex-direction:column}
.woocommerce-notices-wrapper:empty{display:none}

/* My Account — notices (WC emits these both as bare divs, e.g. the email-verification
   and "no orders yet" notices, and as <ul> lists — style both forms the same way).
   max-width/margin:auto contain them to the page column and keep them clear of the
   sticky header, whether or not a .woocommerce-notices-wrapper is present around them.
   WooCommerce's own stylesheet (woocommerce.css) sets width:auto;margin:0 0 2em on
   this exact selector at the same specificity, so whichever stylesheet loads second
   wins — rather than depend on enqueue order, the `body` prefix here gives ours
   higher specificity so it always wins regardless of load order. */
body .woocommerce-message,body .woocommerce-error,body .woocommerce-info{list-style:none;box-sizing:border-box;width:calc(100% - (var(--pad-x) * 2));max-width:var(--container);margin:24px auto 18px;padding:14px 18px 14px 16px;border-radius:var(--radius-panel);background:oklch(0.96 0.03 150);border:1px solid var(--line);border-left:4px solid var(--accent);font-size:15px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;box-shadow:0 4px 14px -10px oklch(0.2 0.02 155 / .3)}
body .woocommerce-notices-wrapper .woocommerce-message,body .woocommerce-notices-wrapper .woocommerce-error,body .woocommerce-notices-wrapper .woocommerce-info{margin:0 auto 12px}
body .woocommerce-error{background:oklch(0.96 0.03 25);border-color:oklch(0.85 0.06 25);border-left-color:oklch(0.58 0.19 25)}

/* The coupon code input + "Apply coupon" button (checkout's toggled coupon form) is
   a separate <form class="checkout_coupon">, not a .woocommerce-message/-info/-error
   — WC's own CSS gives it `margin:2em 0` (no side margins) at the same specificity
   our earlier notice fix used, so it needs its own contained/gutter rule here too. */
body .woocommerce-form-coupon,body form.checkout_coupon{box-sizing:border-box;width:calc(100% - (var(--pad-x) * 2));max-width:var(--container);margin:0 auto 18px;padding:18px;border-radius:var(--radius-panel);border:1px solid var(--line);background:#fff;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
body .woocommerce-form-coupon p,body form.checkout_coupon p{margin:0;flex:1 1 220px;display:flex;gap:10px;flex-wrap:wrap}
body .woocommerce-form-coupon .input-text,body form.checkout_coupon .input-text{flex:1 1 180px;min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--radius-pill);font-size:15px}
body .woocommerce-form-coupon button,body form.checkout_coupon button{flex:none;padding:0 20px;min-height:44px;border:0;border-radius:var(--radius-pill);background:var(--accent);color:#fff;font-weight:600;font-size:15px}
body .woocommerce-message a.button,body .woocommerce-error a.button,body .woocommerce-info a.button{padding:0 18px;min-height:38px;border-radius:var(--radius-pill);background:var(--accent);color:#fff;font-weight:600;font-size:14px;display:inline-flex;align-items:center;width:auto;flex:none;margin:0;order:2}

/* My Account — form inputs (login, register, edit-account) */
.woocommerce-form .form-row label,.woocommerce-EditAccountForm .form-row label{display:block;font-size:15px;font-weight:600;margin-bottom:6px;color:var(--mute-2)}
.woocommerce-form .form-row input.input-text,.woocommerce-EditAccountForm .form-row input.input-text,.woocommerce-checkout .form-row input.input-text,.woocommerce-checkout select{padding:13px 16px;border:1px solid var(--line-2);border-radius:12px;font-size:17px;min-height:48px;background:var(--base);width:100%}
.woocommerce-form .form-row,.woocommerce-EditAccountForm .form-row{margin-bottom:14px}
.woocommerce-EditAccountForm fieldset{border:0;margin:26px 0 0;padding:22px 0 0;position:relative}
.woocommerce-EditAccountForm fieldset::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}
.woocommerce-EditAccountForm fieldset legend{padding:0;margin-bottom:14px;font-size:18px;font-weight:600;font-family:Poppins,system-ui,sans-serif}
.woocommerce-form button.woocommerce-button,.woocommerce-EditAccountForm button.woocommerce-button,.woocommerce-EditAccountForm button.woocommerce-Button{min-height:50px;border:0;border-radius:var(--radius-pill);background:var(--accent);color:#fff;font-weight:700;font-size:16px;padding:0 26px;cursor:pointer}
.woocommerce-form__label-for-checkbox{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--mute-2);margin-bottom:0}
.woocommerce-LostPassword{margin-top:10px}
.woocommerce-LostPassword a{font-size:14px;color:var(--mute);text-decoration:underline}

/* My Account — password visibility toggle (core WC markup, unstyled by default) */
.password-input{position:relative;display:block}
.password-input input.input-text{padding-right:46px}
.show-password-input{position:absolute;top:0;right:0;bottom:0;width:44px;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;color:var(--mute);border-radius:0 12px 12px 0}
.show-password-input:hover{color:var(--ink)}
.show-password-input::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg>') center/contain no-repeat}
.show-password-input.display-password::before{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.6 21.6 0 0 1 5.06-6.06M9.9 4.24A10.94 10.94 0 0 1 12 5c7 0 11 7 11 7a21.6 21.6 0 0 1-2.94 3.94M1 1l22 22"/><path d="M14.12 14.12A3 3 0 1 1 9.88 9.88"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.6 21.6 0 0 1 5.06-6.06M9.9 4.24A10.94 10.94 0 0 1 12 5c7 0 11 7 11 7a21.6 21.6 0 0 1-2.94 3.94M1 1l22 22"/><path d="M14.12 14.12A3 3 0 1 1 9.88 9.88"/></svg>')}

/* My Account — login/register layout */
.account-auth-columns{display:grid;gap:20px;grid-template-columns:1fr 1fr;align-items:start}
.account-auth-columns .account-card form{margin-top:14px}
.account-auth-columns:has(> .account-card:only-child){grid-template-columns:1fr;max-width:420px;margin:0 auto}
@media (max-width:720px){.account-auth-columns{grid-template-columns:1fr}}

/* My Account — orders list */
.account-orders-list{display:flex;flex-direction:column;gap:14px}
.account-orders-list .order-row{border-top:0;margin-top:0;padding-top:0}
.account-orders-list .order-row .order-num{font-weight:700}
.account-orders-list .order-row .order-meta{font-size:12px;color:var(--mute)}
.account-orders-list .order-row .order-actions{display:flex;gap:8px;margin-left:auto}
.woocommerce-pagination{display:flex;gap:10px;justify-content:center;margin-top:18px}
@media (max-width:480px){
	.order-row{flex-direction:column;align-items:flex-start;gap:8px}
	.account-orders-list .order-row .order-actions{margin-left:0}
}

/* My Account — single order */
.order-line-items{width:100%;border-collapse:collapse;font-size:15px;margin-top:14px}
.order-line-items td,.order-line-items th{padding:10px 0;border-bottom:1px solid var(--line);text-align:left}
.order-line-items tfoot td{border-bottom:0;font-weight:600}
.order-line-items tfoot tr:last-child td{font-size:18px;font-weight:700}
.order-address-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:18px}
.order-address-grid address{font-style:normal;font-size:15px;color:var(--mute-2);line-height:1.6}
.account-card + .account-card{margin-top:18px}
/* ...except when cards are laid out as grid/flex siblings (dashboard panels, address
   cards) — the adjacent-sibling margin above is only meant for cards stacked in normal
   flow (e.g. view-order's status + line-items sections) and otherwise breaks row alignment. */
.dashboard-cards .account-card + .account-card,
.account-addresses-grid .account-card + .account-card{margin-top:0}
.account-card mark{background:none;color:inherit;font-weight:700}
.account-card mark.order-status{font-weight:600;padding:4px 10px;border-radius:var(--radius-pill);font-size:14px}

/* My Account — generic shop tables (downloads, etc.) */
.woocommerce-MyAccount-content table.shop_table{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px}
.woocommerce-MyAccount-content table.shop_table td,.woocommerce-MyAccount-content table.shop_table th{padding:10px 0;border-bottom:1px solid var(--line);text-align:left}
.woocommerce-MyAccount-content table.shop_table a.button{padding:0 16px;min-height:36px;border-radius:var(--radius-pill);background:var(--accent);color:#fff;font-weight:600;font-size:13px;display:inline-flex;align-items:center}
.woocommerce-Downloads.digital-downloads{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px}

/* My Account — addresses */
.account-addresses-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.account-addresses-grid .address-card{display:flex;flex-direction:column}
.address-card-head{display:flex;align-items:center;gap:12px}
.address-card-icon{width:38px;height:38px;border-radius:50%;background:oklch(0.96 0.03 150);color:var(--accent);display:grid;place-items:center;flex:none}
.address-card-icon svg{width:19px;height:19px}
.address-card-head h2{font-size:18px}
.address-card-body{font-style:normal;font-size:15px;color:var(--mute-2);line-height:1.6;margin:16px 0 20px;flex:1}
.address-card-empty{color:var(--mute)}
/* Actions pinned to the card's bottom edge (like product-card buttons) so Billing and
   Shipping always line up the same way regardless of address length or button label. */
.address-card-actions{margin-top:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.address-card-action{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.address-card-action span{transition:transform .15s ease}
.address-card-action:hover span{transform:translateX(3px)}
.address-card-remove{font-size:14px;font-weight:600;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.address-card-remove:hover{color:var(--price)}

/* My Account — edit address form */
.woocommerce-EditAddressForm h2{font-size:20px;font-weight:600;margin-bottom:18px}
.woocommerce-address-fields__field-wrapper{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.woocommerce-address-fields__field-wrapper .form-row-wide{grid-column:1/-1}
.woocommerce-EditAddressForm select{padding:13px 16px;border:1px solid var(--line-2);border-radius:12px;font-size:17px;min-height:48px;background:var(--base);width:100%}
.woocommerce-EditAddressForm .form-row{margin-bottom:0}
.woocommerce-EditAddressForm p:last-child{margin:22px 0 0}

/* ---------- Footer ---------- */
.site-footer{position:relative;overflow:hidden;border-top:1px solid var(--line);margin-top:20px;background:linear-gradient(180deg,var(--base) 0%,oklch(0.966 0.032 148) 45%,var(--wash-top) 100%)}
.footer-inner{position:relative;max-width:var(--container);margin:0 auto;padding:clamp(30px,6vw,40px) var(--pad-x) 28px;text-align:center}
/* Decorative potted-plant graphic anchored to the bottom-right corner, matching
   the reference layout — purely decorative (empty alt), sits behind the footer
   text via z-index so it never intercepts clicks/taps. */
.footer-plant{position:absolute;right:0;bottom:60px;width:clamp(120px,15vw,190px);height:auto;pointer-events:none;z-index:0}
.footer-logo{display:block;height:68px;width:auto;max-width:100%;object-fit:contain;margin:0 auto}
.footer-lede{margin:10px auto 0;max-width:62ch;font-size:16px;line-height:1.65;color:var(--mute-2)}
.footer-cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:34px;text-align:left}
/* Grid/flex children default to min-width:auto, so an input's intrinsic width
   can force a track wider than its share and overflow the page. */
.footer-cols>*{min-width:0}
.footer-cols h2{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:oklch(0.40 0.012 155);font-weight:700}
.footer-cols ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:9px}
.footer-cols a{font-size:16px;color:var(--mute-2)}
.newsletter-form{margin-top:12px;display:grid;gap:9px}
.newsletter-form label{font-size:15px;color:var(--mute-2)}
.newsletter-form input{width:100%;min-width:0;padding:13px 16px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:#fff;font-size:17px;min-height:48px}
.newsletter-form button{min-height:48px;border:0;border-radius:var(--radius-pill);background:var(--accent);color:#fff;font-weight:700;font-size:16px}
.payments-label{margin:32px 0 8px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:oklch(0.50 0.012 155);font-weight:700}
.payments-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.payment-badge{border:1px solid var(--line-2);border-radius:7px;background:#fff;padding:7px 11px;font:600 11px "DM Sans",sans-serif;letter-spacing:.04em;color:var(--mute-2)}
.footer-copy{margin:22px 0 0;font-size:14px;color:oklch(0.54 0.012 155)}
.footer-copy a{text-decoration:underline}

/* ---------- Responsive ----------
   The header's logo + 4 icon buttons were previously unshrinkable, forcing the
   whole document wider than narrow viewports (horizontal scroll / clipped page).
   These rules let every fixed-size cluster shrink instead of overflowing. */
img,svg,video,canvas{max-width:100%}
p,h1,h2,h3,h4,li,a,td,th{overflow-wrap:break-word}

@media (max-width:900px){
  .site-bar{gap:14px}
  .site-icons button,.site-icons a{width:44px;height:44px}
  .site-icons svg{width:22px;height:22px}

  /* Nav collapses into a dropdown panel opened via the hamburger button, instead
     of the desktop's inline horizontally-scrolling list. */
  .nav-toggle{display:flex}
  .site-nav{order:10;flex-basis:100%;flex:0 0 100%;max-height:0;overflow:hidden;transition:max-height .2s ease}
  .site-nav.is-open{max-height:70vh;overflow-y:auto}
  .site-nav ul{flex-direction:column;gap:0;padding:10px 0 4px}
  .site-nav li{width:100%}
  .site-nav a{width:100%;padding:12px 2px}
  .site-nav a::after{display:none}
}

@media (max-width:640px){
  .site-bar{gap:10px;padding:10px var(--pad-x)}
  .site-logo img{height:42px}
  .site-icons{gap:0}
  .site-icons button,.site-icons a{width:40px;height:40px}
  .site-icons svg{width:20px;height:20px}
  .nav-toggle{width:40px;height:40px}
  .nav-toggle svg{width:22px;height:22px}
  .cart-count{top:2px;right:1px;min-width:17px;height:17px;font-size:10px}
  .site-nav a{font-size:15px}

  .pdp-buy-row{flex-wrap:wrap}
  .pdp-buy-row .qty-stepper{flex:1 1 100%;justify-content:space-between}
  .btn-add-cart{flex:1 1 100%}
  .pdp-secondary-row{flex-wrap:wrap}
  .pdp-trust-row{gap:10px 14px}
  .pdp-buybox,.pdp-tab-panel,.reviews-summary,.review-card,.review-form-card{padding:16px}
  .pdp-tabs{width:100%;justify-content:flex-start}
}

/* ---------- Scroll reveal ----------
   initScrollReveal() in theme.js adds .is-visible via IntersectionObserver; the
   pre-visible state below is the "hidden" side of that fade+rise. Kept as a small,
   deliberately generic hook (not per-section rules) so it's easy to apply broadly
   without a new class per section. */
.reveal-on-scroll{opacity:0;transform:translateY(20px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.reveal-on-scroll.is-visible{opacity:1;transform:none}

/* ---------- Toast notifications ----------
   Compact, auto-dismissing confirmation (see showToast() in theme.js) — used for
   quick "did my action work?" feedback like add-to-cart, distinct from the
   confirm-dialog pattern (.cart-remove-dialog) used for choices that need a
   decision rather than just an acknowledgement. */
.toast-stack{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:210;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--radius-panel);box-shadow:0 14px 30px -10px oklch(0.15 0.02 155 / .5);font-size:14px;opacity:0;transform:translateY(8px);transition:opacity var(--dur-modal) var(--ease-out),transform var(--dur-modal) var(--ease-out)}
.toast.is-visible{opacity:1;transform:translateY(0)}
.toast-icon{flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.toast strong{font-weight:600}
@media (max-width:480px){.toast-stack{left:16px;right:16px;transform:none;bottom:16px}.toast{width:100%}}

/* ---------- Back to top ---------- */
.back-to-top{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border:0;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px oklch(0.52 0.13 150 / .5);z-index:60;opacity:0;transform:scale(.6);pointer-events:none;transition:opacity var(--dur-card) var(--ease-out),transform var(--dur-card) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.back-to-top.is-visible{opacity:1;transform:scale(1);pointer-events:auto}
.back-to-top:hover{background:var(--accent-3)}
.back-to-top svg{width:20px;height:20px}
@media (max-width:640px){.back-to-top{right:14px;bottom:14px;width:42px;height:42px}}