:root{
  --green:#aee000;        /* Whoopee! lime */
  --green-d:#8fbe00;
  --brand-warm:#e63946;   /* Warm tomato - primary CTA */
  --brand-warm-d:#c62839;
  --ink:#0d0d0d;
  --grey:#6b7280;
  --line:#e6e8ea;
  --bg:#f6f7f4;
  --white:#fff;
  --radius:14px;
  --shadow:0 4px 18px rgba(0,0,0,.08);
  --maxw:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
h1,h2,h3,h4{line-height:1.2;margin:.2em 0 .5em}

/* Buttons - warm tomato primary; lime "brand-green" for save/action; outlined secondary.
   All text/background pairs meet WCAG AA (>=4.5:1). */
.btn{display:inline-block;background:var(--brand-warm);color:#fff;border:2px solid transparent;padding:11px 22px;border-radius:999px;font-weight:700;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s;font-size:15px;text-align:center;line-height:1.2;text-decoration:none}
.btn:hover{background:var(--brand-warm-d);transform:translateY(-1px);box-shadow:0 4px 14px rgba(230,57,70,.28)}
.btn:focus-visible{outline:3px solid rgba(230,57,70,.45);outline-offset:2px}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-green{background:var(--green);color:var(--ink);border-color:transparent}
.btn-green:hover{background:var(--green-d);box-shadow:0 4px 14px rgba(143,190,0,.32)}
.btn-green:focus-visible{outline:3px solid rgba(13,13,13,.45)}
.btn-outline{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.btn-outline:focus-visible{outline:3px solid rgba(13,13,13,.35)}
.btn-block{display:block;width:100%;text-align:center}
.btn-sm{padding:7px 14px;font-size:13px}

/* Header */
.announce{background:var(--ink);color:var(--green);font-size:13px;padding:7px 0;font-weight:600;overflow:hidden;white-space:nowrap}
.announce-track{display:inline-flex;white-space:nowrap;animation:marquee 15s linear infinite;will-change:transform}
.announce-item{padding-right:4rem}
.announce:hover .announce-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.announce .ohe{font-size:1.7em;font-weight:800;vertical-align:-2px}
.announce-wa{display:inline-block;background:var(--green);color:var(--ink);font-weight:800;text-decoration:none;padding:1px 10px;border-radius:999px;margin-left:4px;white-space:nowrap}
.announce-wa svg{width:14px;height:14px;vertical-align:-2px;margin-right:2px}
.announce-wa:hover{background:#fff}
@media(prefers-reduced-motion:reduce){.announce-track{animation:none;padding-left:0}}
.site-header{background:var(--green);position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}
.header-inner{display:flex;align-items:center;gap:18px;padding:10px 18px}
.brand-logo{height:120px;width:auto;border-radius:8px;margin-left:-28px}
.main-nav{display:flex;gap:20px;align-items:center;font-weight:600;font-size:17px;margin-left:6px}
.main-nav a:hover{color:#222}
.has-sub{position:relative}
.has-sub .sub{position:absolute;top:130%;left:0;background:#fff;box-shadow:var(--shadow);border-radius:12px;padding:8px;min-width:210px;display:none;flex-direction:column}
.has-sub:hover .sub{display:flex}
.has-sub .sub a{padding:8px 12px;border-radius:8px;font-weight:500}
.has-sub .sub a:hover{background:var(--bg)}
.search{margin-left:auto}
.search input{border:none;border-radius:999px;padding:10px 16px;width:210px;background:rgba(255,255,255,.85)}
.cart-link{font-size:20px;position:relative;font-weight:700}
.cart-count{position:absolute;top:-8px;right:-12px;background:var(--ink);color:#fff;font-size:11px;min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.nav-toggle{display:none;background:none;border:none;font-size:24px;cursor:pointer}

.site-main{min-height:60vh;padding-bottom:50px;background-color:var(--bg);background-image:url('../img/watermark.svg');background-repeat:repeat;background-size:170px auto}
/* Hero is opaque so the watermark visually starts right below it */
.hero{position:relative;z-index:1}
/* Sections that opt into the icon watermark (e.g. What's HOT) */
.section-wm{background-color:var(--bg);background-image:url('../img/watermark.svg');background-repeat:repeat;background-size:170px auto}
.flash{background:#fff;border-left:5px solid var(--green);box-shadow:var(--shadow);padding:12px 16px;border-radius:10px;margin:16px 0;font-weight:600}
.flash-error{border-left-color:#e63946;background:#fff2f3;color:#7a0d17}
.flash-warn{border-left-color:#ffce42;background:#fff8e1;color:#7a5c00}

/* Hero */
.hero{background:var(--green);overflow:hidden}
.hero .wrap{display:flex;align-items:center;gap:30px;padding:48px 18px}
.hero-text{flex:1}
.hero-text h1{font-size:46px;margin:0 0 10px}
.hero-text p{font-size:19px;max-width:520px;margin:0 0 22px}
.hero-badge{display:inline-block;background:var(--ink);color:var(--green);padding:6px 14px;border-radius:999px;font-weight:700;font-size:13px;margin-bottom:14px}
.hero-img{flex:1.25;display:flex;justify-content:center}
.hero-img img{max-height:280px;border-radius:18px;box-shadow:var(--shadow)}

/* Section */
.section{padding:46px 0}
.section h2{font-size:30px;text-align:center}
.section .lead{text-align:center;color:var(--grey);margin:-4px 0 30px}

/* Category chips */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
/* All categories forced onto a single row (count passed via --cats). */
.cat-grid.one-line{grid-template-columns:repeat(var(--cats,7),minmax(0,1fr));gap:10px}
.cat-grid.one-line .cat-card{padding:14px 8px;font-size:13.5px}
.cat-grid.one-line .cat-card .cat-ico{max-width:74px}
@media(max-width:900px){
  /* On narrow screens switch to a horizontal scroll strip so it still fits one line. */
  .cat-grid.one-line{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .cat-grid.one-line .cat-card{flex:0 0 120px}
}
/* Product option selectors (colour / size / branding) */
.opt-field{margin:0 0 14px}
.opt-field label{display:block;font-weight:600;margin-bottom:5px;font-size:14px}
.opt-field select{padding:9px 12px;border:1px solid var(--line);border-radius:8px;min-width:180px;font-size:14px;background:#fff}
.opt-field.brand-opt{background:#f7f9f2;border:1px dashed var(--green);border-radius:10px;padding:10px 12px}
.opt-field.brand-opt label{font-weight:600}
.cat-card{background:#fff;border-radius:var(--radius);padding:22px 16px;text-align:center;box-shadow:var(--shadow);font-weight:700;transition:.15s;border:2px solid transparent}
.cat-card:hover{border-color:var(--green);transform:translateY(-2px)}
.cat-card span{display:block;margin-bottom:6px}
.cat-card .cat-ico{width:100%;max-width:140px;height:auto;display:block;margin:0 auto;animation:catFloat 3s ease-in-out infinite}
.cat-card .cat-ico-fa{width:auto;max-width:none;height:auto;font-size:62px;line-height:1;color:var(--green-d)}
.cat-grid.one-line .cat-card .cat-ico-fa{max-width:none;font-size:42px}
.cat-card:nth-child(2n) .cat-ico{animation-delay:-1.5s}
.cat-card:nth-child(3n) .cat-ico{animation-delay:-.8s}
.cat-card:hover .cat-ico{animation:catPop .6s ease}
@keyframes catFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes catPop{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.18) rotate(-7deg)}70%{transform:scale(1.07) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){.cat-card .cat-ico{animation:none}}

/* Product grid */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.product-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.15s}
.product-card:hover{transform:translateY(-3px)}
.product-card .pimg{aspect-ratio:1/1;background:#fff;overflow:hidden}
/* Smart fit: JS adds .fit-contain to images whose shape differs too much from
   their square frame, so the whole photo is shown instead of being cut off. */
.product-body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.product-body .cat{font-size:12px;color:var(--grey);text-transform:uppercase;letter-spacing:.04em}
.product-body h3{font-size:16px;margin:0}
.price{font-weight:800;font-size:18px}
.price .old{color:var(--grey);text-decoration:line-through;font-weight:500;font-size:14px;margin-left:6px}
.product-body .btn{margin-top:auto}
.badge-feat{position:absolute;margin:10px;background:var(--green);color:var(--ink);font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px}
.badge-pre{position:absolute;margin:10px;background:#ff9800;color:#fff;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;z-index:2}
.stock-pre{color:#e07b00;font-weight:700}

/* Layout helpers */
.row{display:flex;gap:30px;flex-wrap:wrap}
.shop-layout{display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:start}
.filter{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.filter h4{margin-top:0}
.filter a{display:block;padding:7px 8px;border-radius:8px;color:var(--grey)}
.filter a.active,.filter a:hover{background:var(--bg);color:var(--ink);font-weight:700}

/* Product detail */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:24px}
.pd-gallery .main-img{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:1/1}
.pd-gallery .main-img img{width:100%;height:100%;object-fit:contain}
.pd-thumbs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.pd-thumbs img{width:70px;height:70px;object-fit:contain;border-radius:10px;cursor:pointer;border:2px solid transparent;background:#fff}
.pd-thumbs img:hover{border-color:var(--green)}
.pd-info h1{font-size:32px}
.pd-info .price{font-size:28px;margin:8px 0}
.qty{display:flex;align-items:center;gap:10px;margin:18px 0}
.qty input{width:64px;padding:10px;border:1px solid var(--line);border-radius:10px;text-align:center}
.stock-in{color:#1a8a3a;font-weight:700}
.stock-out{color:#b00;font-weight:700}

/* Tables / cart */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.table th{background:#fafbf7;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--grey)}
.cart-prod{display:flex;align-items:center;gap:12px}
.cart-prod img{width:60px;height:60px;object-fit:contain;border-radius:10px}
.cart-summary{background:#fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.cart-summary .line{display:flex;justify-content:space-between;margin:8px 0}
.cart-summary .total{font-size:22px;font-weight:800;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}

/* Forms */
.form-card{background:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;margin-bottom:5px;font-size:14px}
.field input,.field textarea,.field select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit}
.field textarea{min-height:90px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* About / content */
.content-card{background:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);max-width:820px;margin:24px auto}

/* Footer */
.site-footer{background:var(--ink);color:#cfd3cf;margin-top:40px;padding-top:40px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:26px;padding-bottom:28px}
.footer-grid h4{color:#fff}
.footer-grid a{display:block;color:#cfd3cf;padding:3px 0}
.footer-grid a:hover{color:var(--green)}
.footer-logo{height:48px;border-radius:8px;margin-bottom:10px}
/* The logo runs the full width of its footer column — as large as it can be
   without pushing into the Shop links. Width-driven rather than height-driven
   because the wordmark is ~3:1, so the column edge is what limits it, not the
   height. margin-left is 0 (not the old -30px) so the left edge lines up with
   the "Connect with our Community" line beneath it; the artwork has no
   transparent padding to compensate for. The max-width stops it ballooning
   when the grid collapses to one column on phones. */
.footer-brand{display:block;margin-bottom:12px;max-width:360px}
.footer-brand img{display:block;width:100%;height:auto;margin-left:0}
.contact-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:9px}
.contact-list li{display:flex;align-items:center;gap:10px}
.contact-list svg{width:18px;height:18px;flex:0 0 auto;color:var(--green)}
.contact-list a{color:#cfd3cf;padding:0;word-break:break-word}
.contact-list a:hover{color:var(--green)}
.pay-note{color:var(--green);margin-bottom:6px}
.dpo-footer-badge{display:inline-block;background:#fff;border-radius:8px;padding:6px 10px}
.dpo-footer-badge img{height:22px;width:auto;display:block}
.copyright{border-top:1px solid #222;padding:16px 18px;text-align:center;font-size:13px;color:#9aa09a}

/* Empty state */
.empty{text-align:center;padding:60px 20px;color:var(--grey)}
.empty span{font-size:54px;display:block;margin-bottom:10px}

/* Responsive */
@media(max-width:880px){
  .shop-layout{grid-template-columns:1fr}
  .pd{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero .wrap{flex-direction:column;text-align:center}
  .main-nav,.search{display:none}
  .nav-toggle{display:block;margin-left:auto;order:3}
  body.nav-open .main-nav{display:flex;flex-direction:column;position:absolute;top:96px;left:0;right:0;background:var(--green);padding:14px 18px;gap:10px}
  body.nav-open .main-nav .has-sub .sub{position:static;display:flex;box-shadow:none;background:transparent}
}
@media(max-width:520px){
  .grid-2,.cart-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-text h1{font-size:34px}
}

/* Social icons (footer) */
.social-row{display:flex;gap:10px;margin:12px 0 4px;flex-wrap:wrap}
.footer-grid .social-row a.social-ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.10);color:#cfd3cf;padding:0;transition:.15s}
.footer-grid .social-row a.social-ico:hover{background:var(--green);color:var(--ink);transform:translateY(-2px)}
.social-ico svg{width:18px;height:18px}

/* Reviews */
.reviews-section{background:#fff}
.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.review-card{background:var(--bg);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.review-card .stars{color:#ddd;font-size:18px;letter-spacing:2px}
.review-card .stars .star.on{color:#ffb400}
.review-body{margin:0;font-style:italic;color:#333}
.review-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;font-size:14px}
.review-meta span{color:var(--grey)}
.review-src{margin-left:auto;background:var(--green);color:var(--ink);font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px}

/* Hero slideshow - wide landscape rectangle, drop shadow (no solid border) */
.hero-img .hero-slider{position:relative;width:100%;max-width:720px;aspect-ratio:3/2;height:auto;border-radius:22px;overflow:hidden;background:transparent;border:none;box-shadow:0 22px 60px rgba(0,0,0,.32),0 8px 20px rgba(13,13,13,.22),0 0 0 8px rgba(255,255,255,.5)}
.hero-img .hero-slide.active{opacity:1}
.hero-dots{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:8px;z-index:2}
.hero-dot{width:10px;height:10px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.75);cursor:pointer;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.hero-dot.active{background:var(--ink);transform:scale(1.2)}
@media(max-width:880px){.hero-img .hero-slider{max-width:100%}}

/* Floating WhatsApp button */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:80;width:56px;height:56px;border-radius:50%;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.7),0 4px 10px rgba(0,0,0,.18);background:#fff;
  display:grid;place-items:center;transition:transform .18s ease}
.wa-float svg{width:100%;height:100%;border-radius:50%}
.wa-float:hover{transform:scale(1.08) translateY(-2px)}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:waPulse 2.4s infinite}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(max-width:560px){.wa-float{right:14px;bottom:14px;width:52px;height:52px}}

/* DPO Pay trust badge */
.dpo-paylogo{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line,#e3e6ea);color:var(--grey,#6b7280);font-size:.78rem;font-weight:600;letter-spacing:.03em}
.dpo-paylogo img{height:26px;width:auto}

/* ===========================================================================
   HERO v2 ("herox") — cinematic, brand-coloured hero with an embedded slider.
   Namespaced so the previous .hero rules above stay intact and a partial
   revert (index.php only) still works. Palette: ink stage, tomato primary,
   lime accents.
   ========================================================================= */
.herox{
  position:relative;
  min-height:560px;
  height:85vh;
  max-height:900px;
  overflow:hidden;
  background:var(--ink);
  isolation:isolate;
}

/* ---- Rotating imagery ---- */
.herox__media{position:absolute;inset:0;z-index:0}
.herox__slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
.herox__slide.is-active{opacity:1}
.herox__slide img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.08);
  transition:transform .3s linear;
}
/* Slow Ken Burns drift on whichever slide is showing. */
.herox__slide.is-active img{
  animation:heroxDrift calc(var(--herox-dur,5200ms) + 1600ms) ease-out forwards;
}
@keyframes heroxDrift{from{transform:scale(1.09)}to{transform:scale(1)}}

/* Readability: darker at the top (under the sticky header) and along the
   bottom edge where the controls sit, lighter through the middle so the
   product photography still reads. */
.herox__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(13,13,13,.78) 0%,
      rgba(13,13,13,.42) 26%,
      rgba(13,13,13,.18) 50%,
      rgba(13,13,13,.62) 82%,
      rgba(13,13,13,.86) 100%),
    radial-gradient(130% 90% at 0% 0%, rgba(13,13,13,.60) 0%, rgba(13,13,13,0) 62%);
}

/* ---- Content ---- */
.herox__inner{
  position:relative;z-index:2;
  height:85vh;min-height:560px;max-height:900px;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(26px,5vh,58px) 18px clamp(22px,4vh,46px);
  color:#fff;
}
.herox__top{max-width:min(100%,780px)}

.herox__eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;
  padding:7px 15px 7px 11px;border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.herox__eyebrow i{
  width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 4px rgba(174,224,0,.22);
  animation:heroxPulse 2.4s ease-in-out infinite;
}
@keyframes heroxPulse{0%,100%{box-shadow:0 0 0 3px rgba(174,224,0,.20)}50%{box-shadow:0 0 0 7px rgba(174,224,0,0)}}

.herox__title{
  margin:18px 0 12px;
  font-size:clamp(36px,5.6vw,74px);
  line-height:1.02;
  letter-spacing:-.025em;
  font-weight:800;
  text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.42);
}
.herox__sub{
  margin:0;
  font-size:clamp(15.5px,1.5vw,19px);
  line-height:1.6;
  color:rgba(255,255,255,.92);
  max-width:58ch;
  text-shadow:0 1px 14px rgba(0,0,0,.5);
  /* Long CMS copy is trimmed visually (still complete in the DOM for SEO). */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}

/* ---- Bottom row: progress bars left, action dock right ---- */
.herox__bottom{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
}

.herox__bars{display:flex;align-items:center;gap:9px;padding-bottom:6px}
.herox__bar{
  position:relative;
  width:46px;height:4px;padding:0;border:none;border-radius:999px;
  background:rgba(255,255,255,.32);
  cursor:pointer;overflow:hidden;
  transition:width .35s cubic-bezier(.4,0,.2,1),background .2s;
}
.herox__bar:hover{background:rgba(255,255,255,.55)}
.herox__bar.is-active{width:74px}
.herox__bar i{
  position:absolute;inset:0;width:0;
  background:var(--green);border-radius:999px;display:block;
}
.herox__bar.is-active i{animation:heroxFill var(--herox-dur,5200ms) linear forwards}
@keyframes heroxFill{from{width:0}to{width:100%}}
.herox__bar:focus-visible{outline:3px solid rgba(174,224,0,.6);outline-offset:4px}

.herox__dock{
  display:inline-flex;gap:8px;padding:8px;border-radius:999px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 18px 44px rgba(0,0,0,.34);
}
.herox__cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 24px;border-radius:999px;
  font-weight:700;font-size:15px;line-height:1.2;white-space:nowrap;
  transition:background .18s,color .18s,transform .18s,box-shadow .18s;
}
.herox__cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s cubic-bezier(.4,0,.2,1)}
.herox__cta:hover svg{transform:translateX(4px)}
.herox__cta:focus-visible{outline:3px solid rgba(255,255,255,.75);outline-offset:3px}

.herox__cta--primary{background:var(--brand-warm);color:#fff}
.herox__cta--primary:hover{background:var(--brand-warm-d);transform:translateY(-2px);box-shadow:0 10px 26px rgba(230,57,70,.42)}

.herox__cta--ghost{background:rgba(255,255,255,.94);color:var(--ink)}
.herox__cta--ghost:hover{background:var(--green);color:var(--ink);transform:translateY(-2px);box-shadow:0 10px 26px rgba(174,224,0,.38)}

/* ---- Entrance choreography ---- */
@keyframes heroxRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.herox__eyebrow,.herox__title,.herox__sub,.herox__bars,.herox__dock{
  animation:heroxRise .85s cubic-bezier(.16,1,.3,1) backwards;
}
.herox__eyebrow{animation-delay:.05s}
.herox__title  {animation-delay:.16s}
.herox__sub    {animation-delay:.27s}
.herox__bars   {animation-delay:.40s}
.herox__dock   {animation-delay:.40s}

/* ---- Responsive ---- */
@media(max-width:900px){
  .herox,.herox__inner{height:auto;min-height:0;max-height:none}
  .herox__inner{min-height:78vh;padding:clamp(24px,4vh,40px) 18px 26px;gap:30px}
  .herox__sub{-webkit-line-clamp:3}
  .herox__bottom{align-items:stretch;flex-direction:column-reverse;gap:18px}
  .herox__dock{width:100%;justify-content:center}
  .herox__cta{flex:1 1 0;justify-content:center;padding:13px 16px}
  .herox__bars{justify-content:center;padding-bottom:0}
}
@media(max-width:560px){
  .herox__inner{min-height:82vh}
  .herox__title{font-size:clamp(30px,8.4vw,42px);margin:14px 0 10px}
  .herox__sub{-webkit-line-clamp:2;font-size:15px}
  .herox__eyebrow{font-size:11px;letter-spacing:.13em;padding:6px 13px 6px 10px}
  .herox__dock{flex-direction:column;border-radius:26px;gap:7px}
  .herox__cta{width:100%;padding:14px 18px}
  .herox__bar{width:34px}
  .herox__bar.is-active{width:56px}
}

/* ---- Respect reduced-motion ---- */
@media(prefers-reduced-motion:reduce){
  .herox__slide{transition:opacity .01ms}
  .herox__slide.is-active img,
  .herox__eyebrow,.herox__title,.herox__sub,.herox__bars,.herox__dock,
  .herox__eyebrow i{animation:none}
  .herox__slide img{transform:none}
  .herox__bar.is-active i{animation:none;width:100%}
  .herox__cta,.herox__cta svg{transition:none}
}

/* ===========================================================================
   HOMEPAGE v3 (".ps-") — editorial layout modelled on the Powersheds
   structure, rendered in Whoopee! brand colours. Namespaced so the earlier
   .hero / .herox rules stay intact and a revert of index.php is enough.
   ========================================================================= */
.ps-h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.025em;line-height:1.06;margin:0 0 26px;font-weight:800}
.ps-kicker{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}

.ps-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;
  font-size:12.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--ink)}
.ps-eyebrow--light{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.ps-mark{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--green);color:var(--ink)}
.ps-mark svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ps-mark--ink{background:var(--ink);color:var(--green)}

/* ---- Pills ---- */
.ps-pill{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;
  font-weight:700;font-size:15px;line-height:1.2;white-space:nowrap;border:1.5px solid transparent;
  transition:background .18s,color .18s,transform .18s,box-shadow .18s,border-color .18s}
.ps-arrow{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s cubic-bezier(.4,0,.2,1)}
.ps-pill:hover .ps-arrow,.ps-link:hover .ps-arrow{transform:translateX(5px)}
.ps-pill:focus-visible{outline:3px solid rgba(174,224,0,.7);outline-offset:3px}
.ps-pill--dark{background:var(--ink);color:#fff}
.ps-pill--dark:hover{background:var(--brand-warm);transform:translateY(-2px);box-shadow:0 12px 28px rgba(230,57,70,.34)}
.ps-pill--light{background:#fff;color:var(--ink)}
.ps-pill--light:hover{background:var(--green);transform:translateY(-2px);box-shadow:0 12px 28px rgba(174,224,0,.4)}
.ps-pill--line{background:transparent;color:var(--ink);border-color:var(--ink)}
.ps-pill--line:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.ps-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--ink);
  border-bottom:2px solid var(--green);padding-bottom:2px}
.ps-link--light{color:#fff;border-bottom-color:var(--green)}

/* ---- 1. Hero ---- */
.ps-hero{position:relative;height:88vh;min-height:580px;max-height:940px;overflow:hidden;background:var(--ink);isolation:isolate}
.ps-hero__media{position:absolute;inset:0;z-index:0}
.ps-hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s cubic-bezier(.4,0,.2,1)}
.ps-hero__slide.is-active{opacity:1}
/* Slides are wrapped in <picture> so the portrait and landscape frames can be
   art directed by media query. picture is inline by default, which would
   collapse the img's percentage height — make it a block that fills the slide. */
.ps-hero__slide picture{display:block;width:100%;height:100%}
.ps-hero__slide img{width:100%;height:100%;object-fit:cover}
.ps-hero__slide.is-active img{animation:psDrift 7200ms ease-out forwards}
@keyframes psDrift{from{transform:scale(1.08)}to{transform:scale(1)}}
.ps-hero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(13,13,13,.80) 0%,rgba(13,13,13,.42) 26%,rgba(13,13,13,.10) 52%,rgba(13,13,13,.30) 78%,rgba(13,13,13,.55) 100%)}
.ps-hero__head{position:relative;z-index:2;padding-top:clamp(30px,6vh,66px);color:#fff}
.ps-hero__title{margin:20px 0 14px;max-width:16ch;font-size:clamp(38px,6.4vw,86px);line-height:.98;
  letter-spacing:-.032em;font-weight:800;text-wrap:balance;text-shadow:0 2px 26px rgba(0,0,0,.45)}
.ps-hero__sub{margin:0;max-width:54ch;font-size:clamp(15.5px,1.5vw,19px);line-height:1.6;color:rgba(255,255,255,.92);
  text-shadow:0 1px 14px rgba(0,0,0,.55);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ps-hero__dock{position:absolute;z-index:3;right:clamp(16px,4vw,48px);bottom:clamp(20px,4vh,44px);
  display:inline-flex;gap:10px;padding:10px;border-radius:999px;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.34)}
.ps-hero__dock .ps-pill--light{background:var(--bg)}

/* ---- 2. Editorial panels ---- */
.ps-panel{position:relative;height:74vh;min-height:460px;max-height:760px;overflow:hidden;background:var(--ink)}
.ps-panel__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(13,13,13,.62) 0%,rgba(13,13,13,.18) 45%,rgba(13,13,13,.72) 100%)}
.ps-panel__body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(30px,6vh,64px);color:#fff}
.ps-panel__title{margin:16px 0 24px;max-width:18ch;font-size:clamp(30px,4.6vw,60px);line-height:1.02;
  letter-spacing:-.03em;font-weight:800;text-shadow:0 2px 22px rgba(0,0,0,.45)}
.ps-panel .ps-pill{align-self:flex-start}

/* ---- 3 & 8. Tickers ---- */
.ps-ticker{overflow:hidden;background:var(--ink);color:#fff;padding:15px 0}
.ps-ticker--pale{background:transparent;color:var(--ink);padding:10px 0}
.ps-ticker__track{display:flex;align-items:center;gap:34px;width:max-content;animation:psScroll 34s linear infinite}
.ps-ticker__track--slow{animation-duration:52s}
.ps-ticker:hover .ps-ticker__track{animation-play-state:paused}
.ps-ticker__item{display:inline-flex;align-items:center;gap:12px;font-size:13.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.ps-ticker__item i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
@keyframes psScroll{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}

/* ---- 4. Statement ---- */
.ps-statement{background:var(--bg);padding:clamp(58px,9vw,120px) 0;text-align:center}
/* The big word is now an uploaded logo. Height-driven so any aspect ratio
   sits correctly, and capped in width so a wide wordmark cannot overrun. */
.ps-statement__logo{
  display:block;margin:0 auto clamp(18px,2.4vw,30px);
  height:clamp(52px,8vw,132px);
  width:auto;max-width:min(92%,620px);
  object-fit:contain;
}
.ps-statement__body{max-width:920px;margin:0 auto 30px;font-size:clamp(18px,2.2vw,28px);line-height:1.42;
  font-weight:600;letter-spacing:-.01em;color:var(--ink)}

/* ---- 5. Two-up cards ---- */
.ps-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,38px);padding-top:clamp(48px,7vw,86px);padding-bottom:clamp(10px,2vw,20px)}
.ps-duo__media{display:block;border-radius:20px;overflow:hidden;aspect-ratio:1/1;background:var(--line)}
.ps-duo__card:hover .ps-duo__media img{transform:scale(1.05)}
.ps-duo__card .ps-eyebrow{margin-top:22px}
.ps-duo__title{margin:10px 0 20px;font-size:clamp(20px,2.2vw,28px);line-height:1.18;letter-spacing:-.02em;font-weight:700;max-width:22ch}
.ps-duo__acts{display:flex;gap:10px;flex-wrap:wrap}

/* ---- 6. Feature panel ---- */
.ps-feature{padding-top:clamp(52px,8vw,96px)}
.ps-feature__title{margin:16px 0 28px;max-width:16ch;font-size:clamp(32px,5vw,68px);line-height:1;letter-spacing:-.03em;font-weight:800}
.ps-feature__media{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/9;background:var(--line)}
.ps-feature__media img{width:100%;height:100%;object-fit:cover}
.ps-feature__dock{position:absolute;right:clamp(12px,2vw,26px);bottom:clamp(12px,2vw,26px);display:inline-flex;gap:10px;
  padding:10px;border-radius:999px;background:#fff;box-shadow:0 18px 44px rgba(0,0,0,.3)}
.ps-feature__dock .ps-pill--light{background:var(--bg)}

/* ---- 7. Easy grid ---- */
.ps-easy{padding-top:clamp(56px,8vw,104px)}
.ps-easy__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,34px)}
.ps-easy__ico{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:var(--green);color:var(--ink);margin-bottom:16px}
.ps-easy__ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ps-easy__item h3{margin:0 0 8px;font-size:19px;letter-spacing:-.01em}
.ps-easy__item p{margin:0;color:var(--grey);font-size:15px;line-height:1.6}

/* ---- 8. Trusted ---- */
.ps-trusted{padding:clamp(46px,7vw,84px) 0 0;text-align:center}
.ps-trusted .ps-kicker{margin-bottom:14px}

/* ---- 9. Tabs ---- */
.ps-tabs{padding-top:clamp(52px,8vw,96px)}
.ps-tabs__nav{display:flex;gap:8px;overflow-x:auto;padding-bottom:22px;scrollbar-width:none}
.ps-tabs__nav::-webkit-scrollbar{display:none}
.ps-tab{flex:none;padding:11px 20px;border-radius:999px;border:1.5px solid var(--line);background:#fff;
  font-weight:700;font-size:14.5px;color:var(--ink);cursor:pointer;transition:.18s;white-space:nowrap}
.ps-tab:hover{border-color:var(--ink)}
.ps-tab.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.ps-tabs__pane{display:none}
.ps-tabs__pane.is-active{display:block;animation:psFade .45s ease both}
@keyframes psFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ps-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-bottom:24px}

/* ---- 10. Slogan marquee ---- */
.ps-slogan{overflow:hidden;background:var(--green);color:var(--ink);padding:18px 0;margin-top:clamp(48px,7vw,90px)}
.ps-slogan__track{display:flex;align-items:center;gap:26px;width:max-content;animation:psScroll 40s linear infinite}
.ps-slogan__track span{font-size:clamp(20px,2.6vw,34px);font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.ps-slogan__track em{font-style:normal;opacity:.55}

/* ---- 11. About ---- */
.ps-about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);align-items:center;padding:clamp(56px,8vw,104px) 18px}
.ps-about__media{border-radius:24px;overflow:hidden;aspect-ratio:1/1;background:var(--line)}
.ps-about__media img{width:100%;height:100%;object-fit:contain}
.ps-about__copy p{color:var(--grey);font-size:16.5px;line-height:1.7;margin:0 0 16px;max-width:52ch}
.ps-about__copy .ps-pill{margin-top:10px}

/* ---- 12. Support ---- */
/* Extra support had bottom padding only, so it butted straight up against the
   section above it. Space on both sides now, and a little more below so the
   scrolling rail that follows reads as a separate block. */
.ps-support{
  padding-top:clamp(48px,7vw,92px);
  padding-bottom:clamp(58px,8.5vw,110px);
}
/* auto-fit so the row stays balanced whether three or four cards are shown. */
.ps-support__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(16px,2.4vw,28px)}
.ps-support__item{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 22px;transition:transform .25s,box-shadow .25s}
.ps-support__item:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(13,13,13,.09)}
.ps-support__n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--green);color:var(--ink);font-weight:800;font-size:15px;margin-bottom:14px}
.ps-support__item h3{margin:0 0 8px;font-size:18px;letter-spacing:-.01em}
.ps-support__item p{margin:0 0 16px;color:var(--grey);font-size:15px;line-height:1.6}

/* ---- 14. Promo cards ---- */
.ps-promos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,32px);padding-bottom:clamp(46px,7vw,88px)}
.ps-promo{position:relative;display:block;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:var(--ink);color:#fff}
.ps-promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .3s}
.ps-promo:hover img{transform:scale(1.06);opacity:.5}
.ps-promo__body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,3vw,34px);
  background:linear-gradient(180deg,rgba(13,13,13,.15) 0%,rgba(13,13,13,.72) 100%)}
.ps-promo__body h3{margin:12px 0 6px;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.02em}
.ps-promo__body p{margin:0 0 16px;color:rgba(255,255,255,.86);font-size:15.5px}

/* ---- 15. Reviews ---- */
.ps-reviews{padding-top:clamp(40px,6vw,76px);padding-bottom:clamp(50px,7vw,92px)}
.ps-reviews__rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,1fr);gap:16px;
  overflow-x:auto;padding-bottom:18px;margin-bottom:20px;scroll-snap-type:x mandatory;scrollbar-width:none}
.ps-reviews__rail::-webkit-scrollbar{display:none}
.ps-review{scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 22px}
.ps-review__stars{color:var(--green);font-size:15px;margin-bottom:10px;letter-spacing:2px}
.ps-review__stars .star{color:var(--line)}
.ps-review__stars .star.on{color:var(--green)}
.ps-review p{margin:0 0 14px;font-size:15.5px;line-height:1.62;color:var(--ink)}
.ps-review__by{font-size:13.5px;color:var(--grey);font-weight:600}

/* ---- 16. Trust row ---- */
.ps-trustrow{background:var(--ink);color:#fff;padding:clamp(34px,5vw,58px) 0}
.ps-trustrow__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px)}
.ps-trustrow h4{margin:0 0 6px;font-size:16.5px;letter-spacing:-.01em}
.ps-trustrow p{margin:0;color:rgba(255,255,255,.72);font-size:15px;line-height:1.6}

/* ---- Scroll reveal ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
.reveal.is-in{opacity:1;transform:none}

/* ---- Responsive ---- */
@media(max-width:980px){
  .ps-easy__grid,.ps-support__grid{grid-template-columns:repeat(2,1fr)}
  .ps-trustrow__grid{grid-template-columns:1fr;gap:20px}
  .ps-about{grid-template-columns:1fr}
  .ps-about__media{aspect-ratio:16/10}
}
@media(max-width:760px){
  .ps-hero{height:auto;min-height:0}
  .ps-hero__head{padding-top:36px;padding-bottom:210px}
  .ps-hero__dock{left:16px;right:16px;bottom:20px;flex-direction:column;border-radius:26px;padding:8px}
  .ps-hero__dock .ps-pill{justify-content:center;width:100%}
  .ps-panel{height:auto;min-height:0}
  .ps-panel__body{padding-top:230px;padding-bottom:34px}
  .ps-duo,.ps-promos{grid-template-columns:1fr}
  .ps-feature__media{aspect-ratio:4/3}
  .ps-feature__dock{left:12px;right:12px;flex-direction:column;border-radius:24px}
  .ps-feature__dock .ps-pill{justify-content:center}
  .ps-rail{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
}
@media(max-width:520px){
  .ps-easy__grid,.ps-support__grid{grid-template-columns:1fr}
  .ps-hero__sub{-webkit-line-clamp:2}
}

/* ---- Reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  .ps-hero__slide{transition:opacity .01ms}
  .ps-hero__slide.is-active img{animation:none}
  .ps-ticker__track,.ps-slogan__track{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .ps-duo__media img,.ps-promo img,.ps-pill,.ps-arrow{transition:none}
}

/* ---- Footer newsletter (homepage v3) ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ps-news{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;
  padding:clamp(26px,4vw,44px) 18px;border-bottom:1px solid rgba(255,255,255,.14)}
.ps-news h3{margin:0 0 4px;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em}
.ps-news p{margin:0;opacity:.72;font-size:15px}
.ps-news__form{display:flex;gap:10px;flex-wrap:wrap}
.ps-news__form input{min-width:250px;padding:13px 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);color:inherit;font-size:15px}
.ps-news__form input::placeholder{color:currentColor;opacity:.55}
.ps-news__form input:focus{outline:none;border-color:var(--green);background:rgba(255,255,255,.14)}
.ps-news__form .ps-pill--dark{background:var(--green);color:var(--ink)}
.ps-news__form .ps-pill--dark:hover{background:#fff;box-shadow:none}
@media(max-width:760px){.ps-news{grid-template-columns:1fr}.ps-news__form input{min-width:0;flex:1}}

/* ===========================================================================
   HERO DOCK — the circled detail: a solid white panel sitting flush into the
   bottom-right corner of the image, its top-left corner rounded so the panel
   appears to notch into the photograph. Holds a dark pill and a pale pill.
   One dock per slide, so the buttons change with the picture.
   ========================================================================= */
.ps-dockwrap{position:absolute;z-index:3;right:0;bottom:0;display:grid}
.ps-dock{grid-area:1/1;display:flex;gap:12px;align-items:center;
  background:#fff;padding:18px;border-radius:34px 0 0 0;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(10px);
  transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1),visibility 0s .55s}
.ps-dock.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}

.ps-dock__btn{display:inline-flex;align-items:center;gap:14px;
  padding:17px 30px;border-radius:999px;
  font-size:16px;font-weight:500;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;
  transition:background .2s,color .2s,box-shadow .2s}
.ps-dock__btn span{display:block;max-width:34ch;overflow:hidden;text-overflow:ellipsis}
.ps-dock__btn .ps-arrow{width:17px;height:17px;stroke-width:1.9;flex:none}
.ps-dock__btn:focus-visible{outline:3px solid var(--green);outline-offset:3px}

.ps-dock__btn--dark{background:#1c1c1c;color:#fff}
.ps-dock__btn--dark:hover{background:var(--brand-warm);box-shadow:0 10px 26px rgba(230,57,70,.34)}
.ps-dock__btn--pale{background:#eef0ec;color:#1c1c1c}
.ps-dock__btn--pale:hover{background:var(--green);box-shadow:0 10px 26px rgba(174,224,0,.4)}

/* The same dock, reused inside the rounded feature card further down the page. */
.ps-feature__dock{padding:18px;border-radius:34px 0 24px 0;right:0;bottom:0;gap:12px;box-shadow:none}

@media(max-width:760px){
  .ps-dockwrap{left:0;right:0}
  .ps-dock{flex-direction:column;align-items:stretch;gap:10px;padding:14px;border-radius:28px 28px 0 0}
  .ps-dock__btn{justify-content:space-between;padding:16px 22px;font-size:15px}
  .ps-dock__btn span{max-width:none}
  .ps-feature__dock{left:0;right:0;flex-direction:column;border-radius:28px 28px 0 0}
}
@media(prefers-reduced-motion:reduce){
  .ps-dock{transition:opacity .01ms;transform:none}
  .ps-dock__btn{transition:none}
}

/* ===========================================================================
   TYPOGRAPHY — matched to the Powersheds type system.
   Measured from their live site: headings are Articulat CF at weight 500 with
   -0.025em tracking (not bold — the restraint is the whole look), and the
   small uppercase labels are Termina at weight 700.
   Both families are named first below; without an Adobe Fonts licence the
   browser falls straight through to Figtree / Archivo Expanded.
   ========================================================================= */
:root{
  --font-sans:'articulat-cf','Figtree','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-label:'termina','Archivo','Figtree','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
input,select,textarea,button{font-family:inherit}

/* Display headings: weight 500, tight negative tracking. */
h1,h2,h3,h4,
.ps-h2,.ps-hero__title,.ps-panel__title,.ps-feature__title,
.ps-duo__title,.ps-promo__body h3,.ps-news h3{
  font-family:var(--font-sans);
  font-weight:500;
  letter-spacing:-.025em;
}
.ps-hero__title{letter-spacing:-.032em}
.ps-easy__item h3,.ps-support__item h3,.ps-trustrow h4{font-weight:600;letter-spacing:-.015em}

/* Small uppercase labels use the label family at 700, as Powersheds does. */
.ps-eyebrow,.ps-kicker,.ps-ticker__item{
  font-family:var(--font-label);
  font-weight:700;
  font-stretch:125%;
}
.ps-slogan__track span{font-family:var(--font-label);font-weight:700;font-stretch:125%;letter-spacing:-.01em}

/* Buttons and pills sit at 500, matching their dock. */
.ps-pill,.ps-dock__btn,.ps-tab,.ps-link{font-family:var(--font-sans);font-weight:500;letter-spacing:-.01em}
.ps-tab{font-weight:600}

/* Body copy */
.ps-hero__sub,.ps-about__copy p,.ps-easy__item p,.ps-support__item p,
.ps-review p,.ps-trustrow p,.ps-promo__body p{font-weight:400}
.ps-statement__body{font-weight:500;letter-spacing:-.018em}

/* ===========================================================================
   HERO FIT — the whole hero must be visible on load, at any viewport, without
   scrolling or clipping.
   The hero is not 100vh: the announce bar and the sticky header sit above it,
   so its height is the viewport MINUS that chrome. JS measures the real value
   into --ps-chrome; the number below is only the pre-measurement fallback.
   Sizes are driven by min(vw, vh) so a short-but-wide window (laptops, phones
   in landscape) shrinks type by height as readily as by width.
   ========================================================================= */
:root{--ps-chrome:116px}

.ps-hero{
  height:calc(100vh - var(--ps-chrome));   /* fallback for older browsers */
  height:calc(100svh - var(--ps-chrome));  /* ignores mobile URL-bar growth */
  /* Never taller than the space actually available, or a landscape phone
     (~268px of room) would clip the dock straight back off the screen. */
  min-height:min(340px, calc(100svh - var(--ps-chrome)));
  max-height:none;
  overflow:hidden;
}

/* Head grows, dock sits at the bottom. Both in flow, so they can never
   overlap and the section can never outgrow its box. */
.ps-hero__inner{
  position:relative;z-index:2;
  height:100%;
  display:flex;flex-direction:column;justify-content:space-between;
  --ps-pad:clamp(14px,2.4vh,42px);
  padding-block:var(--ps-pad);
  gap:clamp(12px,2vh,28px);
}
.ps-hero__head{
  flex:0 1 auto;min-height:0;
  padding-top:0;padding-bottom:0;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.ps-hero__title{
  margin:clamp(8px,1.6vh,20px) 0 clamp(6px,1.2vh,14px);
  font-size:clamp(25px,min(6.1vw,8.6vh),84px);
  line-height:1.02;
  max-width:17ch;
}
.ps-hero__sub{
  /* +20% on every stop of the scale, so it grows consistently at all sizes. */
  font-size:clamp(16.2px,min(1.74vw,2.52vh),22.8px);
  line-height:1.55;
  max-width:56ch;
  -webkit-line-clamp:3;
}
.ps-eyebrow{font-size:clamp(10px,min(1vw,1.5vh),12.5px)}

/* Dock in flow, hugging the right edge, still notched into the corner. */
.ps-dockwrap{
  position:static;
  align-self:flex-end;
  display:grid;
  flex:none;
  /* Already flush to the right edge; pull it down through the column padding
     so it notches into the bottom corner exactly as in the reference. */
  margin-bottom:calc(-1 * var(--ps-pad));
}
.ps-dock{padding:clamp(10px,1.6vh,18px)}
.ps-dock__btn{
  padding:clamp(11px,1.7vh,17px) clamp(18px,2.2vw,30px);
  font-size:clamp(13px,min(1.15vw,1.75vh),16px);
  gap:clamp(8px,1vw,14px);
}
.ps-dock__btn .ps-arrow{width:clamp(14px,1.2vw,17px);height:clamp(14px,1.2vw,17px)}

/* ---- Short viewports: laptops at 768px tall, phones in landscape ---- */
@media(max-height:720px){
  .ps-hero__sub{-webkit-line-clamp:2}
}
@media(max-height:600px){
  .ps-hero__title{max-width:22ch}
  .ps-hero__sub{-webkit-line-clamp:1}
  .ps-dock{border-radius:24px 0 0 0}
}
@media(max-height:480px){
  .ps-hero__sub{display:none}
  .ps-eyebrow .ps-mark{width:18px;height:18px}
}

/* ---- Narrow screens: dock spans the width, buttons stack ---- */
@media(max-width:760px){
  .ps-hero{height:calc(100vh - var(--ps-chrome));height:calc(100svh - var(--ps-chrome))}
  .ps-hero__head{padding-bottom:0;justify-content:flex-end}
  .ps-hero__title{font-size:clamp(24px,min(7.6vw,7.4vh),46px);max-width:none}
  .ps-dockwrap{align-self:stretch;width:auto}
  .ps-dock{flex-direction:column;align-items:stretch;border-radius:24px 24px 0 0;gap:8px}
  .ps-dock__btn{justify-content:space-between}
}

/* Landscape phones: keep the dock on one row, it is wider than it is tall. */
@media(max-width:900px) and (orientation:landscape){
  .ps-dockwrap{align-self:flex-end}
  .ps-dock{flex-direction:row;align-items:center;border-radius:24px 0 0 0}
  .ps-dock__btn{padding:10px 16px;font-size:13px}
}

/* Very large monitors: stop the headline running away. */
@media(min-width:1800px){
  .ps-hero__title{font-size:clamp(60px,min(4.6vw,9vh),96px)}
}

/* ===========================================================================
   HERO CHROME FIXES
   1. The floating WhatsApp button stays in the bottom-right corner and stays
      VISIBLE at all times, including over the hero. It used to fade out while
      the hero was on screen because the hero dock occupies the same corner.
      Hiding a contact button over the hero meant it vanished exactly when a
      first-time visitor arrived, which is the worst possible moment, so it now
      steps UP over the dock instead of disappearing (rules below).
   2. The logo was a fixed 120px, making the header ~140px tall on every
      device. That is viewport the hero cannot use. It is now fluid, and
      shrinks further on short screens where the room is worth most.
   ========================================================================= */
/* Kept as no-ops so a cached stylesheet or stale markup can never leave the
   button hidden. Do not reintroduce an is-tucked hiding rule. */
.wa-float,
.wa-float.is-tucked{
  opacity:1;visibility:visible;pointer-events:auto;
}

/* The hero dock is notched into the bottom-right corner on desktop, and on
   phones it becomes a full-width stacked bar pinned to the bottom of the hero.
   Either way it lands under this button. Rather than hide the button, it LIFTS
   clear of the dock while the hero is on screen and drops back to the corner
   once you scroll past — visible and tappable the whole time.
   --wa-lift is measured in main.js from the live dock, so it is correct at any
   width and however many buttons a slide has. */
.wa-float{transition:transform .3s ease}
.wa-float.is-lifted{transform:translateY(calc(-1 * var(--wa-lift,0px)))}
/* Restate hover so the lift is not thrown away by the base :hover rule. */
.wa-float.is-lifted:hover{
  transform:translateY(calc(-1 * var(--wa-lift,0px))) scale(1.08);
}

.brand-logo{
  height:clamp(52px,6.6vw,120px);
  margin-left:clamp(-28px,-1.6vw,0px);
}
.header-inner{padding-block:clamp(6px,1vh,10px)}

/* Short viewports: claw back header height so the hero keeps its proportions. */
@media(max-height:800px){
  .brand-logo{height:clamp(48px,5.4vw,88px)}
}
@media(max-height:640px){
  .brand-logo{height:clamp(40px,4.6vw,64px)}
  .announce{font-size:12px;padding:5px 0}
  .header-inner{gap:12px}
}
@media(max-width:560px){
  .brand-logo{height:clamp(44px,12vw,64px);margin-left:0}
}

/* ===========================================================================
   CARD IMAGERY — show the whole subject.
   Two jobs, two rules:
     SUBJECT images (a product, a category) must never lose an edge, so they
     are contained inside a fixed box and letterboxed against a neutral tint.
     Every card keeps identical dimensions because the BOX is fixed, not the
     picture.
     BACKDROP images (hero, the notched cards, promo tiles) sit behind text and
     must fill their frame or the type becomes unreadable, so those still
     cover — cropping is the correct behaviour there.
   ========================================================================= */
:root{--shot-bg:#f2f3ef}

/* ---- Product cards: never crop a product ---- */
.product-card .pimg{
  aspect-ratio:1/1;
  background:var(--shot-bg);
  display:grid;place-items:center;
  padding:10px;
}
.product-card .pimg img{
  width:100%;height:100%;
  object-fit:contain;          /* whole product, always */
  object-position:center;
}

/* ---- Category cards further down: contained, consistent, neutral ---- */
.ps-duo__media{
  aspect-ratio:4/3;
  background:var(--shot-bg);
  display:grid;place-items:center;
  padding:clamp(10px,1.4vw,18px);
}

/* ---- Social tiles: square boxes, complete pictures ---- */

/* ---- About portrait ---- */
.ps-about__media{background:var(--shot-bg);display:grid;place-items:center;padding:clamp(10px,1.4vw,20px)}
.ps-about__media img{width:100%;height:100%;object-fit:contain}

/* ---- Backdrops keep covering, but bias the crop upward, where products and
       faces usually sit, rather than dead centre. ---- */
.ps-feature__media img,
.ps-promo img{object-position:50% 42%}

/* Sharpness: stop the browser blurring letterboxed art when it scales down. */
.product-card .pimg img,
.ps-duo__media img,
.ps-about__media img{image-rendering:auto;background:transparent}

@media(max-width:760px){
  .product-card .pimg{padding:8px}
  .ps-duo__media{aspect-ratio:3/2}
}

/* ===========================================================================
   NAVIGATION (.mn-) — Powersheds' header pattern: a small set of triggers
   opening a full-width panel, rather than a long row of links with a cramped
   hover dropdown. Two triggers only ("Shop", "More"), so the bar stays quiet
   and the panel does the work.
   ========================================================================= */
.site-header{position:sticky;top:0;z-index:60}
.header-inner{position:relative;display:flex;align-items:center;gap:clamp(10px,1.6vw,22px)}

.mn{display:flex;align-items:center;gap:4px;margin-left:clamp(6px,1.4vw,20px)}
.mn__item{position:static}
.mn__trigger{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 16px;border:none;border-radius:999px;background:transparent;
  font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:background .16s;
}
.mn__trigger:hover{background:rgba(13,13,13,.08)}
.mn__trigger[aria-expanded="true"]{background:var(--ink);color:var(--green)}
.mn__chev{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s}
.mn__trigger[aria-expanded="true"] .mn__chev{transform:rotate(180deg)}
.mn__trigger:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ---- Panels ---- */
.mn__panel{
  position:absolute;top:100%;z-index:70;
  background:#fff;
  border-top:1px solid var(--line);
  box-shadow:0 24px 50px rgba(13,13,13,.14);
  opacity:0;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease;
}
.mn__panel.is-open{opacity:1;transform:none}
.mn__panel--mega{left:0;right:0;border-radius:0 0 22px 22px}
.mn__panel--drop{
  left:auto;min-width:250px;border-radius:0 0 18px 18px;padding:10px;
  margin-left:clamp(6px,1.4vw,20px);
}
.mn__panel--drop a{display:block;padding:11px 16px;border-radius:12px;font-size:15px;font-weight:500}
.mn__panel--drop a:hover{background:var(--bg)}

.mn__mega{display:grid;grid-template-columns:1fr minmax(240px,300px);gap:clamp(20px,3vw,44px);padding:clamp(22px,2.6vw,34px) 18px}
.mn__cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.mn__cat{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:14px;transition:background .16s}
.mn__cat:hover{background:var(--bg)}
.mn__cat-ico{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--green)}
.mn__cat-ico svg{width:24px;height:24px}
.mn__cat-txt{display:flex;flex-direction:column;line-height:1.25}
.mn__cat-txt strong{font-size:15px;font-weight:600;letter-spacing:-.01em}
.mn__cat-txt small{font-size:12.5px;color:var(--grey)}

.mn__aside{display:flex;flex-direction:column;gap:12px}
.mn__promo{
  display:flex;flex-direction:column;gap:6px;
  padding:20px;border-radius:18px;background:var(--ink);color:#fff;
  transition:transform .2s,box-shadow .2s;
}
.mn__promo:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(13,13,13,.28)}
.mn__promo-kick{font-family:var(--font-label);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.mn__promo strong{font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.mn__promo-go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;font-weight:600;color:var(--green)}
.mn__all{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 20px;border-radius:999px;border:1.5px solid var(--ink);font-weight:600;font-size:15px}
.mn__all:hover{background:var(--ink);color:#fff}

/* ---- Burger + drawer ---- */
.mn__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  padding:0 10px;border:none;border-radius:12px;background:transparent;cursor:pointer}
.mn__burger span{display:block;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .28s,opacity .2s}
.mn__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.mn__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.mn__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.mn__drawer{
  position:absolute;top:100%;left:0;right:0;z-index:70;
  background:#fff;border-top:1px solid var(--line);
  padding:14px 18px 22px;max-height:calc(100svh - 100%);overflow-y:auto;
  box-shadow:0 24px 50px rgba(13,13,13,.16);
  opacity:0;transform:translateY(-10px);transition:opacity .24s,transform .24s;
}
.mn__drawer.is-open{opacity:1;transform:none}
.mn__drawer-search input{width:100%;padding:13px 18px;border-radius:999px;border:1.5px solid var(--line);font-size:16px;font-family:inherit}
.mn__acc{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:10px;
  padding:14px 4px;border:none;border-bottom:1px solid var(--line);background:transparent;
  font-family:inherit;font-size:17px;font-weight:600;color:var(--ink);cursor:pointer}
.mn__acc[aria-expanded="true"] .mn__chev{transform:rotate(180deg)}
.mn__acc-body{display:flex;flex-direction:column;padding:6px 0}
.mn__acc-body a{padding:11px 6px;font-size:15.5px;border-radius:10px}
.mn__acc-body a:hover{background:var(--bg)}
.mn__scrim{position:fixed;inset:0;z-index:55;background:rgba(13,13,13,.42);opacity:0;transition:opacity .25s}
.mn__scrim.is-open{opacity:1}

@media(max-width:980px){
  .mn,.search{display:none}
  .mn__burger{display:flex}
  .header-inner{justify-content:space-between}
  .brand{margin-right:auto}
}
@media(min-width:981px){
  .mn__drawer{display:none}
}
@media(prefers-reduced-motion:reduce){
  .mn__panel,.mn__drawer,.mn__chev,.mn__promo,.mn__burger span{transition:none}
}

/* ===========================================================================
   MENU STABILITY FIX
   The scrim is position:fixed inset:0 inside the header's stacking context, so
   it was painting OVER the header bar itself — including the Shop button. The
   pointer therefore landed on the scrim, not the trigger, which fired
   mouseleave, which closed the panel, which removed the scrim, which put the
   pointer back on the trigger... an open/close loop for as long as you hovered.
   Restacking inside the header fixes it: scrim at the bottom, bar and panels
   above it.
   ========================================================================= */
.mn__scrim{z-index:1}
.header-inner{position:relative;z-index:3}
.mn__panel{z-index:2}
.mn__drawer{z-index:2}

/* Bridge the dead zone between the button and the panel. Without it, the few
   pixels of header padding count as "outside" and start the close timer on
   every trip down to the menu. */
.mn__panel::before{
  content:"";position:absolute;left:0;right:0;top:-18px;height:18px;
}
/* The trigger keeps its hover hit-area while the panel is open. */
.mn__item{position:static}

/* Category tiles carry just the name now, so centre it against the icon. */
.mn__cat-txt{justify-content:center}
.mn__cat-txt small{display:none}
.mn__cat{padding:12px 13px}

/* The pale dock button is the "Shop now" action — in the hero, the notched
   category cards and the feature panel. In brand lime it reads as the
   commercial action next to the black "Discover" button. */
.ps-dock__btn--pale{background:var(--green);color:var(--ink)}
.ps-dock__btn--pale:hover{background:var(--green-d);color:var(--ink);box-shadow:0 10px 26px rgba(174,224,0,.42)}
.ps-dock__btn--pale:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ===========================================================================
   "SHOP NOW" — one green for every buy action, site-wide.
   Given its own modifier rather than recolouring a shared variant, so
   "Corporate Gifts", "Discover", "All <category>" and "Review us on Facebook"
   keep their own treatments and green always means the same thing.
   ========================================================================= */
.ps-dock__btn--shop,
.ps-pill--shop{
  background:var(--green);
  color:var(--ink);
  border-color:transparent;
}
.ps-dock__btn--shop:hover,
.ps-pill--shop:hover{
  background:var(--green-d);
  color:var(--ink);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(174,224,0,.42);
}
.ps-dock__btn--shop:focus-visible,
.ps-pill--shop:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* The pale variant goes back to neutral: it now carries non-shop actions such
   as "Corporate Gifts", which should not compete with the green buy button. */
.ps-dock__btn--pale{background:#eef0ec;color:#1c1c1c}
.ps-dock__btn--pale:hover{background:#e2e5df;color:#1c1c1c;box-shadow:none}

/* ===========================================================================
   BUTTON SHAPE — square left edge, rounded right.
   Applied to the dock buttons (hero, category cards, feature panel) and the
   arrow pills, so every call-to-action on the homepage shares one silhouette.
   ========================================================================= */
.ps-dock__btn,
.ps-pill{
  border-radius:0 999px 999px 0;
}

/* The dock itself keeps its notch, but its inner corner is squared to sit flush
   against the squared button edge rather than leaving a sliver of white. */
.ps-dock{padding-left:0}
.ps-dock__btn:first-child{margin-left:0}

@media(max-width:760px){
  /* Stacked buttons keep the same shape so the set still reads as one family. */
  .ps-dock__btn,
  .ps-pill{border-radius:0 999px 999px 0}
}

/* ===========================================================================
   MENU PANELS IN BRAND LIME
   The Shop mega panel and the About Us dropdown now continue the header's
   green rather than dropping a white sheet over the page.
   Knock-on: category_icon() renders its glyphs in #aee000, which would be
   invisible on a lime panel, so the icon tiles flip to ink.
   ========================================================================= */
.mn__panel{
  background:var(--green);
  border-top:1px solid rgba(13,13,13,.16);
  box-shadow:0 24px 50px rgba(13,13,13,.22);
}
.mn__cat{color:var(--ink)}
.mn__cat:hover{background:rgba(13,13,13,.10)}

/* Dark tile so the lime glyphs read. */
.mn__cat-ico{background:var(--ink)}
.mn__cat-ico .cat-ico-fa{color:var(--green);font-size:22px}

.mn__panel--drop a{color:var(--ink)}
.mn__panel--drop a:hover{background:rgba(13,13,13,.10)}

.mn__all{border-color:var(--ink);color:var(--ink)}
.mn__all:hover{background:var(--ink);color:var(--green)}

/* The promo card stays ink — it is the one thing that should still pop. */
.mn__promo{background:var(--ink)}

/* Mobile drawer matches, so the menu reads the same on every device. */
.mn__drawer{
  background:var(--green);
  border-top:1px solid rgba(13,13,13,.16);
}
.mn__drawer-search input{background:#fff;border-color:rgba(13,13,13,.20)}
.mn__acc{color:var(--ink);border-bottom-color:rgba(13,13,13,.20)}
.mn__acc-body a{color:var(--ink)}
.mn__acc-body a:hover{background:rgba(13,13,13,.10)}

/* Safety net: if main.js is cached, blocked or fails, the panels still open on
   hover. Scoped to html:not(.js-nav) so it never competes with the script. */
html:not(.js-nav) .mn__item:hover .mn__panel[hidden],
html:not(.js-nav) .mn__item:focus-within .mn__panel[hidden]{
  display:block;
  opacity:1;
  transform:none;
}

/* ===========================================================================
   SHOPPING SECTIONS — What's Hot, Shop by Category, Shop Highlights.
   These three lead the page now, so products are the first thing below the
   hero rather than the eighth section down. Shared header block and rhythm so
   the sequence reads as one deliberate run rather than three bolted-on grids.
   ========================================================================= */
.ps-shop,
.ps-catgrid{padding-top:clamp(48px,6.5vw,86px)}

/* Shared heading row: title left, "all products" right, stacking on mobile. */
.ps-shop__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,32px);
}
.ps-shop__head .ps-h2{margin:0}
.ps-shop__sub{margin:8px 0 0;color:var(--grey);font-size:16px;max-width:52ch}
.ps-shop__all{flex:none}

/* Product grids */
.ps-shop__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:clamp(14px,1.8vw,22px);
}

/* A lime hairline separates What's Hot from the category grid without adding
   another heavy band to the page. */
.ps-catgrid{position:relative}
.ps-catgrid::before{
  content:"";display:block;height:1px;background:var(--line);
  margin-bottom:clamp(40px,5.5vw,72px);
}

/* ---- Shop by Category: icon tiles ----
   The client wants icons rather than photography here. Each category already
   has an icon picked in the CMS, so this uses that directly and needs no
   product photos at all — the section looks complete from day one.
   The glyphs are lime (#aee000), so the tile behind them is ink or they would
   disappear; same reason the mega-menu tiles are dark. */
.ps-catgrid__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.6vw,20px);
}
.ps-cat{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  padding:clamp(18px,2vw,26px);
  border:1px solid transparent;border-radius:18px;
  background:var(--green);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,background .22s;
}
.ps-cat:hover{
  transform:translateY(-4px);
  background:var(--green-d);
  box-shadow:0 16px 34px rgba(143,190,0,.34);
}
.ps-cat:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* No tile behind the glyph — black icons sit straight on the green card.
   category_icon() hard-codes fill="#aee000" as an SVG *attribute*; CSS beats
   presentation attributes, so these rules recolour the shared icon library
   without editing it or affecting the mega menu. */
.ps-cat__ico{
  /* Doubled twice from the original clamp(46px,4.4vw,58px). The icon is the
     whole point of these cards, so it dominates and the label reads as a
     caption beneath it. */
  width:clamp(150px,17.6vw,232px);height:clamp(150px,17.6vw,232px);
  max-width:100%;
  display:grid;place-items:center;flex:none;
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.ps-cat:hover .ps-cat__ico{transform:scale(1.06)}
.ps-cat__ico svg{width:100%;height:100%;fill:var(--ink);stroke:var(--ink)}
/* Inner highlights were white for contrast on a dark tile; on a green card
   they become the card colour so they still read as cut-outs. */
.ps-cat__ico svg [fill="#fff"],
.ps-cat__ico svg [fill="#FFF"],
.ps-cat__ico svg [fill="#ffffff"]{fill:var(--green)}
.ps-cat:hover .ps-cat__ico svg [fill="#fff"],
.ps-cat:hover .ps-cat__ico svg [fill="#FFF"],
.ps-cat:hover .ps-cat__ico svg [fill="#ffffff"]{fill:var(--green-d)}
/* Outline-only shapes must stay unfilled. */
.ps-cat__ico svg [fill="none"]{fill:none}
.ps-cat__ico .cat-ico-fa{color:var(--ink);font-size:clamp(76px,9.6vw,120px)}

.ps-cat__name{
  font-weight:600;font-size:clamp(15px,1.15vw,17px);
  letter-spacing:-.015em;line-height:1.25;color:var(--ink);
}
.ps-cat__go{display:inline-flex;align-items:center;justify-content:center;margin-top:auto;color:var(--ink)}
.ps-cat__go .ps-arrow{width:18px;height:18px;transition:transform .22s cubic-bezier(.4,0,.2,1)}
.ps-cat:hover .ps-cat__go .ps-arrow{transform:translateX(5px)}

@media(max-width:980px){ .ps-catgrid__grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:640px){
  .ps-catgrid__grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .ps-cat{padding:16px;gap:10px;border-radius:14px}
  .ps-cat__ico{width:clamp(110px,38vw,150px);height:clamp(110px,38vw,150px)}
  .ps-cat__ico .cat-ico-fa{font-size:clamp(58px,20vw,78px)}
}
@media(prefers-reduced-motion:reduce){
  .ps-cat,.ps-cat__ico,.ps-cat__go .ps-arrow{transition:none}
}

@media(max-width:600px){
  .ps-shop__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .ps-shop__all{width:100%;justify-content:center}
  .ps-shop__head{margin-bottom:18px}
}
@media(prefers-reduced-motion:reduce){
}

/* Admin: one-click "What's Hot" toggle in the product list. Lime when on,
   quiet outline when off, so the whole section can be curated at a glance. */
.hot-toggle{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;color:var(--grey);
  font-family:inherit;font-size:12.5px;font-weight:600;white-space:nowrap;
  transition:background .16s,color .16s,border-color .16s;
}
.hot-toggle:hover{border-color:var(--ink);color:var(--ink)}
.hot-toggle.is-on{background:var(--green);border-color:var(--green);color:var(--ink)}
.hot-toggle.is-on:hover{background:var(--green-d);border-color:var(--green-d)}
.hot-toggle:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ===========================================================================
   IMAGE FIT AUDIT — site-wide
   Rule: an image showing a SUBJECT (a product, a logo) is never cropped; an
   image acting as a BACKDROP behind text must fill its frame or the type
   becomes unreadable. Everything below is one or the other, deliberately.

   The product detail page, its thumbnails, the colour preview and the cart
   were all cropping the product itself — the worst place on a shop to hide
   part of what someone is buying.
   ========================================================================= */

/* ---- Product detail: the whole product, always ---- */
.pd-gallery .main-img{background:var(--shot-bg);display:grid;place-items:center;padding:clamp(10px,2vw,22px)}
.pd-gallery .main-img img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
}
.pd-thumbs img{
  object-fit:contain;
  background:var(--shot-bg);
  padding:5px;
}
#colourPreviewImg{object-fit:contain;background:var(--shot-bg);border-radius:10px;padding:4px}

/* ---- Cart line items ---- */
.cart-prod img{object-fit:contain;background:var(--shot-bg);padding:4px}

/* ---- Logos: never distort, never crop ---- */
/* NOTE: .brand-logo is deliberately NOT in this rule. Its height is set at
   line ~889 and scaled per breakpoint; adding height:auto here overrode that
   and the header logo rendered at full intrinsic size, breaking the nav. */
/* .footer-brand img is excluded from the height:auto rule below for the same
   reason as .brand-logo: its height is set at line ~186 to match the header
   logo, and height:auto here overrode that and capped it at 64px. */
.brand-logo{object-fit:contain;max-width:100%}
.footer-brand img{object-fit:contain;max-width:100%}
.dpo-footer-badge img,
.dpo-paylogo img{object-fit:contain;height:auto;max-width:100%}
.dpo-footer-badge img,.dpo-paylogo img{max-height:38px;width:auto}

/* ---- Backdrops keep covering. Focal point is settable per site so a
       subject sitting high or low in the frame is not decapitated. ---- */
:root{--focal-hero:50% 50%;--focal-feature:50% 45%}
/* The hero frames are pre-composed with the product already on the focal line
   and a safe margin around it, so they must be cropped from the CENTRE — that
   is the only position where the margin is symmetrical and the product is
   guaranteed to survive. The site-wide focal setting is therefore ignored here
   (it still applies to the feature panel and promos below). */
.ps-hero__slide img{object-position:50% 50%}
.ps-feature__media img{object-position:var(--focal-feature)}
.ps-promo img{object-position:50% 42%}

/* ---- Tall portrait photos in a wide frame lose the most, so give the
       feature panel a taller frame on narrow screens rather than a thin slot. */
@media(max-width:760px){
  .ps-feature__media{aspect-ratio:4/3}
  .pd-gallery .main-img{padding:10px}
}

/* ===========================================================================
   HERO — TEXT LEFT, CTA DOCK RIGHT
   The eyebrow, headline and description sit hard left (see the block at the
   end of this file). The CTA dock is deliberately NOT dragged left with them:
   it stays notched into the bottom-RIGHT corner, which is where the reference
   design puts it and where it balances the left-hand copy.

   This block previously pulled the dock across to the left margin. That is
   reverted; the dock falls back to the base `align-self:flex-end` and the base
   `border-radius:34px 0 0 0` notch, so nothing here needs to restate them.
   The knock-on is that the dock shares the bottom-right corner with the
   floating WhatsApp button again — handled by lifting the button, not hiding
   it. See "HERO CHROME FIXES" above.
   ========================================================================= */
@media(min-width:1000px){
  /* Copy measure only — kept so the headline still breaks where it did. */
  .ps-hero__title{max-width:18ch}
  .ps-hero__sub{max-width:54ch}
}

/* Very wide monitors: stop the column drifting from the text as the viewport
   grows, and give the hero a little more breathing room top and bottom. */
@media(min-width:1800px){
  .ps-hero__inner{--ps-pad:clamp(28px,3vh,56px)}
}

/* ===========================================================================
   HERO TEXT — TRUE LEFT ALIGNMENT
   .ps-hero__head carries .wrap, whose `margin:0 auto` sets auto margins on the
   cross axis. Inside a flex COLUMN that disables stretch, so the block shrank
   to its content width and centred itself — the text looked centred even
   though text-align was start.

   Stretch it full width instead and reproduce the .wrap grid with padding, so
   the copy lands on exactly the same left line as the dock beneath it.
   ========================================================================= */
.ps-hero__head{
  align-self:stretch;
  width:100%;
  max-width:none;
  margin:0;
  padding-inline:calc(max(0px, (100% - var(--maxw)) / 2) + 18px) 18px;
  text-align:left;
}
.ps-hero__head > *{margin-left:0;margin-right:0}

/* ===========================================================================
   HERO READABILITY — TEXT ONLY, THE PHOTO IS NEVER TOUCHED
   ---------------------------------------------------------------------------
   An earlier version put an organic dark splash with a backdrop blur behind
   the copy. It read well but it altered the photograph: the blur softened
   whatever product happened to sit under the text, so a cooler bag or a laptop
   sleeve looked out of focus in its own hero shot. On a shop, the product has
   to stay sharp — that treatment is removed entirely.

   Contrast is now carried by the LETTERFORMS instead of the picture:
   a tight, dark halo hugging each glyph plus a wider soft shadow for lift.
   Nothing is dimmed, blurred, desaturated or covered, so every hero image
   renders exactly as uploaded.

   Trade-off, stated plainly: a halo improves perceived legibility but does not
   raise the measured contrast ratio the way a scrim does. Over the palest hero
   photos the copy is readable rather than comfortable. The durable fix is on
   the content side — hero shots whose left third is darker or busier-free —
   not more CSS.
   ========================================================================= */

/* Hero description in white. It was briefly brand lime, but lime's relative
   luminance is .62 against white's 1.0 — roughly 1.6x less contrast against
   every hero photo — and it fell below a readable ratio on the paler slides.
   Pure white (not the old .92 alpha) buys back the last of that margin at no
   visual cost. The halo is kept, just lighter than lime needed: it holds the
   letterforms over bright patches without the text looking outlined. */
.ps-hero__sub{
  color:#fff;
  text-shadow:
    0 1px 2px rgba(0,0,0,.6),
    0 2px 12px rgba(0,0,0,.55),
    0 4px 30px rgba(0,0,0,.4);
}

.ps-hero__title{
  text-shadow:
    0 1px 2px rgba(0,0,0,.55),
    0 3px 16px rgba(0,0,0,.5),
    0 6px 44px rgba(0,0,0,.42);
}

.ps-eyebrow--light{
  text-shadow:
    0 1px 2px rgba(0,0,0,.75),
    0 2px 12px rgba(0,0,0,.55);
}

/* ---------------------------------------------------------------------------
   A pool of shade under the copy — gradients only, nothing that distorts.
   ---------------------------------------------------------------------------
   This is the earlier splash idea with the destructive half removed. There is
   no backdrop-filter, no SVG filter, no blur and no desaturation anywhere: a
   gradient can only shift brightness, so every product in the photo stays
   exactly as sharp as it was uploaded. That was the client's objection, and it
   does not apply to this.

   The lobes are offset and different sizes so the pool is not a tidy ellipse,
   and every stop reaches alpha 0 long before the hero's edges, so it dissolves
   into the picture instead of ending at a line. The offsets are anchored to
   --sc-x, the same left line as .wrap, so the shade tracks the text column on
   every screen; min() shrinks them on phones so the pool does not slide off to
   the right of a narrow hero.
   ------------------------------------------------------------------------- */
.ps-hero__scrim{
  --sc-x:calc(max(0px, (100% - var(--maxw)) / 2) + 18px);
  background:
    radial-gradient(52% 40% at calc(var(--sc-x) + min(290px,32vw)) 24%,
      rgba(8,11,9,.58) 0%, rgba(8,11,9,.48) 36%, rgba(8,11,9,.2) 64%, rgba(8,11,9,0) 85%),
    radial-gradient(32% 26% at calc(var(--sc-x) + min(50px,8vw)) 13%,
      rgba(8,11,9,.4) 0%, rgba(8,11,9,.14) 58%, rgba(8,11,9,0) 83%),
    radial-gradient(38% 24% at calc(var(--sc-x) + min(170px,22vw)) 40%,
      rgba(8,11,9,.36) 0%, rgba(8,11,9,.12) 60%, rgba(8,11,9,0) 85%),
    radial-gradient(20% 15% at calc(var(--sc-x) + min(470px,52vw)) 30%,
      rgba(8,11,9,.24) 0%, rgba(8,11,9,0) 80%),
    /* Light vertical vignette for depth at the top and bottom edges. */
    linear-gradient(180deg,
      rgba(13,13,13,.34) 0%,
      rgba(13,13,13,.12) 22%,
      rgba(13,13,13,.02) 50%,
      rgba(13,13,13,.12) 76%,
      rgba(13,13,13,.30) 100%);
}

/* ===========================================================================
   CHECKOUT OPTION CARDS — delivery zone + payment method
   Radio buttons alone read as a form; these read as a choice. The whole card
   is the label, so the tap target is the full row rather than a 13px circle,
   which matters most on the phones that carry most of this traffic.
   ========================================================================= */
.opt-card{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin-bottom:10px;cursor:pointer;
  background:#fff;transition:border-color .15s,background .15s,box-shadow .15s;
}
.opt-card:hover{border-color:var(--green-d)}
.opt-card.is-on{border-color:var(--green);background:#f7f9f2;box-shadow:0 2px 10px rgba(174,224,0,.22)}
.opt-card input{margin-top:4px;flex:none;accent-color:var(--green-d);width:18px;height:18px}
.opt-card__main{display:block;flex:1;min-width:0}
.opt-card__title{display:flex;justify-content:space-between;gap:10px;font-weight:600;line-height:1.35}
.opt-card__fee{white-space:nowrap;color:var(--ink)}
.opt-card__note{display:block;margin-top:4px;font-size:12.5px;line-height:1.55;color:var(--grey)}
.opt-card:focus-within{outline:3px solid var(--green);outline-offset:2px}

/* Order tracking page */
.track-status{display:inline-block;padding:5px 14px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.track-status--paid{background:var(--green);color:var(--ink)}
.track-status--pending{background:#ffe9a8;color:#7a5c00}
.track-status--failed{background:#ffd9dc;color:#8a1420}
.track-steps{display:flex;gap:0;margin:22px 0 6px;padding:0;list-style:none;counter-reset:s}
.track-steps li{flex:1;position:relative;padding-top:30px;text-align:center;font-size:12.5px;color:var(--grey);line-height:1.4}
.track-steps li::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:#dfe3dd;z-index:1}
.track-steps li::after{content:"";position:absolute;top:15px;left:-50%;width:100%;height:2px;background:#dfe3dd}
.track-steps li:first-child::after{display:none}
.track-steps li.done{color:var(--ink);font-weight:600}
.track-steps li.done::before{background:var(--green)}
.track-steps li.done::after{background:var(--green)}

/* ============ FAQ accordion ============ */
.faq-hero{max-width:820px;margin:34px auto 6px;text-align:center;padding:0 4px}
.faq-hero__eyebrow{display:inline-block;background:var(--green);color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.faq-hero h1{margin:14px 0 8px;font-size:clamp(28px,4.4vw,42px);line-height:1.15;letter-spacing:-.02em}
.faq-hero p{margin:0 auto;max-width:600px;color:var(--grey);font-size:16px;line-height:1.65}

.faq-tools{max-width:820px;margin:24px auto 0;position:relative}
.faq-search{width:100%;padding:15px 18px 15px 48px;font:inherit;font-size:15px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.04);transition:border-color .2s,box-shadow .2s}
.faq-search::placeholder{color:#9aa1a8}
.faq-search:focus{outline:none;border-color:var(--green-d);box-shadow:0 0 0 4px rgba(174,224,0,.28)}
.faq-tools svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--grey);pointer-events:none}

.faq-list{max-width:820px;margin:22px auto 0;display:flex;flex-direction:column;gap:14px}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,.045);overflow:hidden;transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease}
.faq-item:hover{border-color:#d3d8cf;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.faq-item[open]{border-color:var(--green-d);box-shadow:0 10px 30px rgba(0,0,0,.09)}
.faq-item[hidden]{display:none}

.faq-q{display:flex;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;list-style:none;font-family:var(--font-label,inherit);font-size:clamp(15.5px,1.7vw,17.5px);font-weight:700;line-height:1.45;color:var(--ink);transition:background .2s ease,color .2s ease;-webkit-tap-highlight-color:transparent}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{background:#fafbf6}
.faq-q:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.faq-item[open] .faq-q{background:linear-gradient(90deg,rgba(174,224,0,.16),rgba(174,224,0,.04));box-shadow:inset 4px 0 0 var(--green-d)}
.faq-q span{flex:1;min-width:0}

.faq-ico{position:relative;flex:none;width:32px;height:32px;border-radius:50%;background:#f1f3ec;transition:background .25s ease,transform .3s ease}
.faq-ico::before,.faq-ico::after{content:"";position:absolute;top:50%;left:50%;width:13px;height:2.5px;border-radius:2px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s ease}
.faq-ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-q:hover .faq-ico{background:var(--green)}
.faq-item[open] .faq-ico{background:var(--green-d);transform:rotate(180deg)}
.faq-item[open] .faq-ico::after{transform:translate(-50%,-50%) rotate(0);opacity:0}

.faq-a{overflow:hidden}
.faq-a__inner{padding:2px 22px 22px 70px;color:#3f4650;font-size:15.5px;line-height:1.75}
.faq-a__inner p{margin:0}

.faq-empty{max-width:820px;margin:22px auto 0;text-align:center;color:var(--grey);padding:26px;background:var(--white);border:1px dashed var(--line);border-radius:16px}

.faq-cta{max-width:820px;margin:30px auto 46px;text-align:center;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:30px 24px;box-shadow:var(--shadow)}
.faq-cta h2{margin:0 0 8px;font-size:clamp(19px,2.6vw,24px)}
.faq-cta p{margin:0 0 18px;color:var(--grey);line-height:1.6}
.faq-cta .btn{margin:0 5px 8px}

@media(max-width:560px){
  .faq-q{gap:12px;padding:17px 16px}
  .faq-a__inner{padding:0 16px 20px;font-size:15px}
  .faq-item[open] .faq-q{box-shadow:inset 3px 0 0 var(--green-d)}
}
@media(prefers-reduced-motion:reduce){
  .faq-item,.faq-ico,.faq-ico::before,.faq-ico::after,.faq-a{transition:none!important}
}

/* ============ Delivery & Shipping page ============ */
.dv-wrap{max-width:960px;margin:0 auto}

/* Hero */
.dv-hero{position:relative;overflow:hidden;margin:26px auto 0;padding:clamp(28px,4.5vw,48px);border-radius:24px;background:linear-gradient(135deg,#0d0d0d 0%,#1c1f18 55%,#2b3320 100%);color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.18)}
.dv-hero::after{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(174,224,0,.35),transparent 68%);pointer-events:none}
.dv-hero__eyebrow{display:inline-block;background:var(--green);color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.dv-hero h1{margin:15px 0 10px;font-size:clamp(28px,4.6vw,44px);line-height:1.12;letter-spacing:-.02em;color:#fff;position:relative;z-index:1}
.dv-hero__lead{margin:0;max-width:600px;font-size:clamp(15px,1.9vw,17.5px);line-height:1.7;color:rgba(255,255,255,.82);position:relative;z-index:1}
.dv-hero__lead strong{color:var(--green)}
.dv-hero__stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;position:relative;z-index:1}
.dv-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(4px);padding:9px 15px;border-radius:999px;font-size:13.5px;font-weight:600;color:#fff}
.dv-chip svg{width:16px;height:16px;flex:none;color:var(--green)}

/* Fee cards */
.dv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:22px auto 0}
.dv-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.045);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.dv-card:hover{transform:translateY(-3px);border-color:#d3d8cf;box-shadow:0 12px 30px rgba(0,0,0,.09)}
.dv-card__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#f1f3ec;color:var(--ink);margin-bottom:14px}
.dv-card__ico svg{width:22px;height:22px}
.dv-card--accent{border-color:var(--green-d);background:linear-gradient(160deg,rgba(174,224,0,.14),var(--white) 62%)}
.dv-card--accent .dv-card__ico{background:var(--green)}
.dv-card h3{margin:0 0 6px;font-size:16px;letter-spacing:-.01em}
.dv-card__val{display:block;margin:0 0 6px;font-size:clamp(24px,3.2vw,30px);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.dv-card p{margin:0;color:var(--grey);font-size:14.5px;line-height:1.65}

/* Section shell */
.dv-sec{margin:34px auto 0}
.dv-sec__head{margin:0 0 16px}
.dv-sec__head h2{margin:0 0 6px;font-size:clamp(20px,2.8vw,27px);letter-spacing:-.02em}
.dv-sec__head p{margin:0;color:var(--grey);line-height:1.65}

/* Coverage zones */
.dv-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.dv-zone{position:relative;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:22px 22px 22px 24px;box-shadow:0 2px 12px rgba(0,0,0,.045);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.dv-zone::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--green)}
.dv-zone:nth-child(2)::before{background:var(--brand-warm)}
.dv-zone:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.09)}
.dv-zone h3{margin:0 0 4px;font-size:17px}
.dv-zone__eta{display:inline-block;margin:0 0 10px;background:#f1f3ec;color:var(--ink);font-size:12.5px;font-weight:700;padding:4px 11px;border-radius:999px}
.dv-zone p{margin:0;color:var(--grey);font-size:14.5px;line-height:1.7}

/* How it works timeline */
.dv-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;counter-reset:dv}
.dv-steps li{position:relative;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px 20px 20px;box-shadow:0 2px 12px rgba(0,0,0,.045);transition:transform .25s ease,box-shadow .25s ease}
.dv-steps li:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.09)}
.dv-steps li::before{counter-increment:dv;content:counter(dv);position:absolute;top:-15px;left:20px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green);color:var(--ink);font-weight:800;font-size:15px;box-shadow:0 3px 10px rgba(143,190,0,.4)}
.dv-steps h3{margin:0 0 6px;font-size:16px}
.dv-steps p{margin:0;color:var(--grey);font-size:14.5px;line-height:1.65}

/* Note strip */
.dv-note{display:flex;gap:14px;align-items:flex-start;margin:26px auto 0;padding:18px 20px;background:#fbfcf6;border:1px solid #e3ead0;border-left:5px solid var(--green-d);border-radius:14px;color:#3f4650;font-size:14.5px;line-height:1.7}
.dv-note svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--green-d)}
.dv-note strong{color:var(--ink)}

/* CTA */
.dv-cta{margin:30px auto 46px;text-align:center;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:32px 24px;box-shadow:var(--shadow)}
.dv-cta h2{margin:0 0 8px;font-size:clamp(19px,2.6vw,25px)}
.dv-cta p{margin:0 0 18px;color:var(--grey);line-height:1.6}
.dv-cta .btn{margin:0 5px 8px}

@media(max-width:560px){
  .dv-hero{border-radius:18px;margin-top:16px}
  .dv-card,.dv-zone,.dv-steps li{padding:20px}
  .dv-steps{gap:24px}
}
@media(prefers-reduced-motion:reduce){
  .dv-card,.dv-zone,.dv-steps li{transition:none!important}
}

/* ---- About page (shares the .dv- delivery design system) ---- */
.dv-prose{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3.4vw,34px);box-shadow:0 2px 12px rgba(0,0,0,.045)}
.dv-prose p{margin:0 0 15px;color:#3f4650;font-size:16px;line-height:1.8}
.dv-prose p:last-child{margin-bottom:0}
.dv-prose p:first-child{font-size:clamp(16.5px,2vw,18.5px);color:var(--ink);line-height:1.7}

.dv-why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.dv-why li{display:flex;align-items:flex-start;gap:13px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:19px 20px;box-shadow:0 2px 12px rgba(0,0,0,.045);font-size:15.5px;line-height:1.6;font-weight:600;color:var(--ink);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.dv-why li:hover{transform:translateY(-3px);border-color:#d3d8cf;box-shadow:0 12px 30px rgba(0,0,0,.09)}
.dv-why li::before{content:"";flex:none;width:26px;height:26px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0d0d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/15px no-repeat}

.dv-tags{display:flex;flex-wrap:wrap;gap:10px}
.dv-tags a{display:inline-block;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.dv-tags a:hover{background:var(--green);border-color:var(--green-d);transform:translateY(-2px);box-shadow:0 6px 18px rgba(143,190,0,.28)}

/* ---- Contact page (shares the .dv- design system) ---- */
.dv-split{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start;margin-top:22px}
@media(max-width:820px){.dv-split{grid-template-columns:1fr}}

.dv-form{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3.4vw,32px);box-shadow:0 2px 12px rgba(0,0,0,.045)}
.dv-form h2{margin:0 0 4px;font-size:clamp(19px,2.5vw,23px);letter-spacing:-.02em}
.dv-form__sub{margin:0 0 20px;color:var(--grey);font-size:14.5px;line-height:1.6}
.dv-form .field label{font-size:13px;letter-spacing:.02em;color:#4a515b}
.dv-form .field input,.dv-form .field textarea{padding:13px 15px;border-radius:12px;background:#fbfcfa;transition:border-color .2s,box-shadow .2s,background .2s}
.dv-form .field input:focus,.dv-form .field textarea:focus{outline:none;background:var(--white);border-color:var(--green-d);box-shadow:0 0 0 4px rgba(174,224,0,.26)}
.dv-form .field textarea{min-height:130px;resize:vertical}
.dv-form .btn{margin-top:6px}
.dv-form__note{margin:14px 0 0;font-size:13px;color:var(--grey);line-height:1.6}

.dv-ways{display:flex;flex-direction:column;gap:14px}
.dv-way{display:flex;gap:15px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,.045);text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.dv-way:hover{transform:translateY(-3px);border-color:#d3d8cf;box-shadow:0 12px 30px rgba(0,0,0,.09)}
.dv-way__ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:13px;background:#f1f3ec;color:var(--ink)}
.dv-way__ico svg{width:22px;height:22px}
.dv-way--wa .dv-way__ico{background:#25d366;color:#fff}
.dv-way--call .dv-way__ico{background:var(--green)}
.dv-way__body{min-width:0}
.dv-way h3{margin:0 0 3px;font-size:15.5px}
.dv-way p{margin:0;color:var(--grey);font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.dv-way strong{display:block;color:var(--ink);font-size:15px;font-weight:700;margin-bottom:2px;overflow-wrap:anywhere}

.dv-hours{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,.045)}
.dv-hours h3{margin:0 0 10px;font-size:15.5px}
.dv-hours dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:7px 14px;font-size:14.5px}
.dv-hours dt{color:var(--grey)}
.dv-hours dd{margin:0;font-weight:600;color:var(--ink);text-align:right}

/* ---- Returns page (shares the .dv- design system) ---- */
.dv-why--x li::before{background:#ffdfe2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c62839' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/13px no-repeat}
.dv-why--x li{font-weight:600}
.dv-card--warm{border-color:#f3c6ca;background:linear-gradient(160deg,rgba(230,57,70,.08),var(--white) 62%)}
.dv-card--warm .dv-card__ico{background:var(--brand-warm);color:#fff}
.dv-steps--warm li::before{background:var(--brand-warm);color:#fff;box-shadow:0 3px 10px rgba(230,57,70,.35)}

/* ---- Terms / legal pages (shares the .dv- design system) ---- */
.dv-split--toc{grid-template-columns:270px 1fr}
@media(max-width:900px){.dv-split--toc{grid-template-columns:1fr}}

.dv-toc{position:sticky;top:100px;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,.045)}
.dv-toc h2{margin:0 0 12px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.dv-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.dv-toc li{margin:0 0 3px}
.dv-toc a{counter-increment:toc;display:flex;gap:10px;align-items:baseline;padding:9px 11px;border-radius:11px;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;line-height:1.45;transition:background .18s ease,color .18s ease}
.dv-toc a::before{content:counter(toc);flex:none;width:20px;font-size:12.5px;font-weight:800;color:var(--grey);transition:color .18s ease}
.dv-toc a:hover{background:#f4f7ea}
.dv-toc a:hover::before{color:var(--green-d)}
@media(max-width:900px){.dv-toc{position:static}}

.dv-legal{display:flex;flex-direction:column;gap:16px}
.dv-clause{scroll-margin-top:110px;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,3vw,28px);box-shadow:0 2px 12px rgba(0,0,0,.045);transition:box-shadow .25s ease,border-color .25s ease}
.dv-clause:hover{border-color:#d3d8cf;box-shadow:0 10px 26px rgba(0,0,0,.075)}
.dv-clause:target{border-color:var(--green-d);box-shadow:0 10px 30px rgba(0,0,0,.09)}
.dv-clause__head{display:flex;align-items:center;gap:13px;margin:0 0 12px}
.dv-clause__num{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--green);color:var(--ink);font-weight:800;font-size:15px}
.dv-clause h2{margin:0;font-size:clamp(17px,2.2vw,20px);letter-spacing:-.01em}
.dv-clause p{margin:0 0 12px;color:#3f4650;font-size:15.5px;line-height:1.78}
.dv-clause p:last-child{margin-bottom:0}
.dv-clause a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--green-d)}

.dv-updated{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;color:rgba(255,255,255,.9);margin-top:18px}
.dv-updated svg{width:15px;height:15px;color:var(--green)}