/*
Theme Name: PepShop SA
Theme URI: https://pepshopsa.com
Author: PepShop SA
Description: Protocol-first peptide storefront — berry/black brand, WooCommerce ready.
Version: 2.7.7
License: GPL-2.0-or-later
Text Domain: pepshop
*/

@font-face{font-family:AntonL;src:url('assets/fonts/anton.woff2') format('woff2');font-display:swap}


*{margin:0;padding:0;box-sizing:border-box}
:root{--berry:#8f1233;--berry2:#c22047;--deep:#5c0a20;--ink:#1b1016;--paper:#faf6f4;--soft:#6d5560}
body{font-family:ui-monospace,'SF Mono',Menlo,monospace;background:var(--paper);color:var(--ink)}
.w{max-width:1180px;margin:0 auto;padding:0 44px}
.an{font-family:AntonL,Impact,sans-serif;text-transform:uppercase;letter-spacing:-1px}

/* NAV + HERO */
.hero{background:radial-gradient(125% 120% at 78% 8%,var(--berry2) 0%,var(--berry) 52%,var(--deep) 100%);color:#fff;padding:30px 0 96px}
.nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:76px}
.logo{font-family:AntonL,Impact,sans-serif;font-size:34px;letter-spacing:5px}
/* Seven items plus a CTA in wide-tracked monospace is a lot of bar. Sized to fit
   the 1180 container down to the 1100 burger breakpoint with room to spare (155px
   of slack measured at 1101) — below that the dropdown takes over rather than the
   row squeezing. Matched to .sitenav below; the two navs are a pair. */
.nav .lk{display:flex;gap:13px;align-items:center;font-size:12.5px;letter-spacing:.06em;color:#f3c3ce}
.nav .lk a{white-space:nowrap}
.nav .lk .cartlink{margin-left:14px}
.btn{background:#fff;color:var(--berry);padding:15px 28px;border-radius:40px;text-decoration:none;font-weight:700;font-size:13.5px;letter-spacing:.12em}
.hg{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.kick{font-size:13px;letter-spacing:.32em;color:#f3a8bb;margin-bottom:24px}
h1{font-family:AntonL,Impact,sans-serif;font-size:92px;line-height:.93;letter-spacing:-1px;text-transform:uppercase;margin-bottom:26px}
.lead{font-size:16.5px;line-height:1.85;color:#f6dae1;max-width:520px;margin-bottom:34px}
.lead b{color:#fff}
.hbtns{display:flex;gap:16px;align-items:center;margin-bottom:46px}
.ghost{border:1.5px solid rgba(255,255,255,.5);color:#fff;padding:15px 28px;border-radius:40px;text-decoration:none;font-size:13.5px;letter-spacing:.12em}
.chips{display:flex;gap:12px;flex-wrap:wrap}
.chip{border:1px solid rgba(255,255,255,.3);border-radius:30px;padding:9px 16px;font-size:11.5px;letter-spacing:.1em;color:#f6dae1}
.hero img{width:auto;max-height:470px;display:block;margin:0 auto;filter:drop-shadow(0 34px 54px rgba(40,3,14,.6))}

/* TICKER */
.tick{background:var(--ink);color:#f3c3ce;padding:20px 0;text-align:center;font-size:12.5px;letter-spacing:.3em}

/* STEPS */
.sec{padding:96px 0}
.eyebrow{font-size:12.5px;letter-spacing:.3em;color:var(--berry2);font-weight:700;margin-bottom:16px}
h2{font-family:AntonL,Impact,sans-serif;font-size:52px;line-height:1.02;text-transform:uppercase;letter-spacing:-1px;margin-bottom:20px}
.sub{font-size:16px;line-height:1.8;color:var(--soft);max-width:600px;margin-bottom:56px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.step{background:#fff;border:1px solid #ece3e6;border-radius:20px;padding:38px 32px}
.step .n{font-family:AntonL,Impact,sans-serif;font-size:56px;color:#f0d3da;line-height:1;margin-bottom:18px}
.step h3{font-size:19px;margin-bottom:12px;font-weight:700}
.step p{font-size:14.5px;line-height:1.75;color:var(--soft)}

/* PROTOCOLS */
.dark{background:var(--ink);color:#fff}
.dark h2{color:#fff}.dark .sub{color:#c4a9b3}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:34px}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}
.card .nm{font-family:AntonL,Impact,sans-serif;font-size:32px;letter-spacing:-.5px}
.card .wk{font-size:11.5px;letter-spacing:.16em;color:#f3a8bb;margin-top:8px}
.card .pr{text-align:right}
.card .pr b{font-family:AntonL,Impact,sans-serif;font-size:34px}
.card .pr span{display:block;font-size:11.5px;color:#c4a9b3;letter-spacing:.1em;margin-top:4px}
.card p{font-size:14px;line-height:1.75;color:#d9c3cb;margin-bottom:20px}
.card .go{color:#fff;font-size:12.5px;letter-spacing:.14em;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:4px}
.freeband{margin-top:34px;background:rgba(255,215,106,.1);border:1px solid rgba(255,215,106,.35);border-radius:16px;padding:22px 28px;font-size:14.5px;color:#ffd76a;letter-spacing:.04em;text-align:center}

/* CARD FEATURE */
.feat{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.feat img{width:100%;border-radius:22px;box-shadow:0 30px 70px rgba(92,10,32,.22)}
.tickl{list-style:none;margin-top:26px}
.tickl li{font-size:15px;line-height:1.65;color:var(--soft);margin-bottom:16px;padding-left:30px;position:relative}
.tickl li:before{content:"✓";position:absolute;left:0;color:var(--berry2);font-weight:700}

/* PROOF */
.proof{background:#fff;border-top:1px solid #ece3e6;border-bottom:1px solid #ece3e6}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;text-align:center}
.pgrid .big{font-family:AntonL,Impact,sans-serif;font-size:46px;color:var(--berry2);margin-bottom:10px}
.pgrid p{font-size:14px;line-height:1.7;color:var(--soft)}

/* CTA + FOOT */
.end{background:radial-gradient(120% 130% at 50% 0%,var(--berry2),var(--deep));color:#fff;text-align:center;padding:110px 0}
.end h2{font-size:70px;margin-bottom:22px}
.end p{font-size:16.5px;color:#f6dae1;max-width:540px;margin:0 auto 38px;line-height:1.8}
footer{background:var(--ink);color:#9c8189;padding:52px 0;font-size:12.5px;line-height:1.9;text-align:center}
footer .fl{font-family:AntonL,Impact,sans-serif;color:#fff;font-size:26px;letter-spacing:5px;margin-bottom:16px}

/* A lone last card (odd count) spans the full row instead of floating half-width. */
.grid .card:last-child:nth-child(odd){grid-column:1/-1}
.grid .card:last-child:nth-child(odd) p{max-width:640px}

/* ============================================================
   SITE BAR — every page except the front page
   ============================================================ */
.sitebar{background:var(--paper);border-bottom:1px solid #eee0e4;position:sticky;top:0;z-index:40}
.sitebar-in{display:flex;justify-content:space-between;align-items:center;padding-top:20px;padding-bottom:20px}
.sitelogo{display:block;line-height:0}
.sitelogo img{height:30px;width:auto;display:block}
/* Matched to .nav .lk — see the note there. */
.sitenav{display:flex;gap:13px;align-items:center;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.sitenav a{color:var(--soft);text-decoration:none;white-space:nowrap}
.sitenav a:hover{color:var(--berry2)}
/* a small gap sets the actions apart from the content links without a hard rule */
.sitenav .cartlink{margin-left:14px}
/* tell people where they are */
.sitenav a[aria-current="page"]{color:var(--ink);font-weight:700}
.sitenav .btn{color:#fff;background:var(--berry)}
.btn-sm{padding:12px 22px;font-size:12px;white-space:nowrap}
.cartn{background:var(--berry2);color:#fff;border-radius:20px;padding:2px 8px;font-size:11px;margin-left:2px}

/* ============================================================
   SHOP + PRODUCT — our own markup, not Woo's
   ============================================================ */
.ps-shop,.ps-pdp{padding:64px 0 96px}
.ps-h1{font-family:AntonL,Impact,sans-serif;font-size:62px;line-height:.98;text-transform:uppercase;letter-spacing:-1.5px;margin-bottom:18px}
.ps-h2{font-family:AntonL,Impact,sans-serif;font-size:38px;text-transform:uppercase;letter-spacing:-.8px;margin-bottom:30px}

.ps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:52px}
.ps-grid-3{grid-template-columns:repeat(3,1fr);margin-top:0}
.ps-card{background:#fff;border:1px solid #ece3e6;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .22s ease,transform .22s ease}
.ps-card:hover{box-shadow:0 26px 54px rgba(92,10,32,.13);transform:translateY(-4px)}
.ps-card-img{display:block;position:relative;background:#fff;line-height:0}
.ps-card-img img{width:100%;height:auto;display:block}
.ps-flag{position:absolute;top:16px;left:16px;background:var(--ink);color:#fff;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:30px}
.ps-card.is-out .ps-card-img img{opacity:.42}
.ps-card-body{padding:0 26px 26px;display:flex;flex-direction:column;flex:1}
.ps-card-name{font-family:AntonL,Impact,sans-serif;font-size:27px;text-transform:uppercase;letter-spacing:-.5px;margin-bottom:10px;line-height:1.05}
.ps-card-name a{color:var(--ink);text-decoration:none}
.ps-card-blurb{font-size:13.5px;line-height:1.7;color:var(--soft);margin-bottom:22px}
.ps-card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:18px;border-top:1px solid #f2e9ec}
.ps-price{font-size:19px;font-weight:700;color:var(--ink)}
.ps-price del{color:#b9a3ab;font-weight:400;margin-right:6px}
.ps-price ins{text-decoration:none}
.ps-go{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--berry2);text-decoration:none;white-space:nowrap}
.ps-band{margin-top:44px;background:#fff6e6;border:1px solid #f0dcb4;border-radius:18px;padding:24px 30px;font-size:14.5px;color:#7a5a16;text-align:center;line-height:1.7}

/* PDP */
.ps-back{display:inline-block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);text-decoration:none;margin-bottom:34px}
.ps-back:hover{color:var(--berry2)}
.ps-pdp-top{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.ps-shot{background:#fff;border:1px solid #ece3e6;border-radius:26px;overflow:hidden;line-height:0}
.ps-shot img{width:100%;height:auto;display:block}
.ps-title{font-family:AntonL,Impact,sans-serif;font-size:60px;line-height:.96;text-transform:uppercase;letter-spacing:-1.5px;margin-bottom:20px}
.ps-pdp-price{font-family:AntonL,Impact,sans-serif;font-size:42px;color:var(--berry2);margin-bottom:24px;display:flex;align-items:baseline;gap:12px}
.ps-pdp-price .per{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.ps-hook{font-size:16.5px;line-height:1.8;color:var(--soft);padding-bottom:28px;border-bottom:1px solid #ece3e6;margin-bottom:28px}
.ps-cart{display:flex;gap:14px;align-items:flex-end;margin-bottom:14px}
.ps-qty span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:8px}
.ps-qty input{font-family:inherit;font-size:16px;width:84px;padding:15px 12px;border:1px solid #e2d5d9;border-radius:14px;background:#fff;color:var(--ink)}
.ps-buy{font-family:inherit;background:var(--berry);color:#fff;border:0;border-radius:40px;padding:18px 40px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .18s}
.ps-buy:hover{background:var(--berry2)}
.ps-stockline{font-size:12.5px;color:#2e7d4f;letter-spacing:.03em;margin-bottom:30px}
.ps-oos{background:#fbf1f4;border:1px solid #f0dde3;border-radius:14px;padding:18px 22px;font-size:14px;color:var(--berry);margin-bottom:30px}
.ps-assure{list-style:none;border-top:1px solid #ece3e6;padding-top:26px}
.ps-assure li{font-size:14px;line-height:1.7;color:var(--soft);margin-bottom:14px;padding-left:26px;position:relative}
.ps-assure li:before{content:"\2713";position:absolute;left:0;color:var(--berry2);font-weight:700}
.ps-assure b{color:var(--ink)}
.ps-meta{margin-top:22px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#b7a1a9}

.ps-detail{margin-top:76px;padding-top:56px;border-top:1px solid #ece3e6}
.ps-detail-in{max-width:720px}
.ps-detail-in p{font-size:16px;line-height:1.85;color:var(--soft);margin-bottom:18px}
.ps-detail-in h3{font-family:AntonL,Impact,sans-serif;font-size:26px;text-transform:uppercase;letter-spacing:-.4px;color:var(--ink);margin:40px 0 14px}
.ps-detail-in ul{margin:0 0 20px 22px}
.ps-detail-in li{font-size:15.5px;line-height:1.8;color:var(--soft);margin-bottom:9px}
.ps-detail-in strong{color:var(--ink)}
.ps-detail-in .ruo{margin-top:36px;padding:20px 24px;background:#faf4f6;border:1px solid #f0e2e7;border-radius:16px;font-size:13px;line-height:1.75;color:#8a6d77}
.ps-detail-in .ruo strong{color:#6d5560}
.ps-related{margin-top:80px;padding-top:56px;border-top:1px solid #ece3e6}

/* Cart / checkout / account page body (Woo shortcode output) */
.ps-wc-page{margin-top:34px}
.ps-wc-page h2,.ps-wc-page h3{font-family:AntonL,Impact,sans-serif;text-transform:uppercase;letter-spacing:-.5px;font-size:26px;margin:34px 0 16px}
.ps-wc-page p,.ps-wc-page li,.ps-wc-page td,.ps-wc-page th{font-size:14.5px}
.ps-wc-page a{color:var(--berry2)}

/* Checkout opt-in + thank-you */
.ps-optin{margin:22px 0 6px;padding:20px 22px;background:#fff;border:1px solid #ece3e6;border-radius:16px}
.ps-optin label{font-size:14px;line-height:1.65;color:var(--ink);display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.ps-optin input[type=checkbox]{width:19px;height:19px;margin-top:1px;accent-color:var(--berry);flex:none}
.ps-optin-note{font-size:12.5px;line-height:1.7;color:var(--soft);margin:0 0 22px;padding:0 22px}
.ps-thanks{background:#fff;border:1px solid #ece3e6;border-radius:20px;padding:32px 34px;margin:30px 0}
.ps-thanks h3{font-family:AntonL,Impact,sans-serif;font-size:28px;text-transform:uppercase;letter-spacing:-.5px;margin-bottom:14px}
.ps-thanks p{font-size:15px;line-height:1.8;color:var(--soft);margin-bottom:18px}
.ps-thanks-wa{display:inline-block;text-decoration:none}

/* ============================================================
   CART / CHECKOUT — still Woo's templates, pulled into the brand
   ============================================================ */
.woocommerce .w,.woocommerce-page .w{max-width:1180px}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{
  background:var(--berry);color:#fff;border-radius:40px;padding:15px 30px;font-family:inherit;
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;line-height:1}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--berry2);color:#fff}
.woocommerce table.shop_table{border-color:#ece3e6;border-radius:16px}
.woocommerce table.shop_table th{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--berry2);font-size:14px;border-radius:12px;background:#fff}
.woocommerce-message::before,.woocommerce-info::before{color:var(--berry2)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.woocommerce .select2-selection{
  font-family:inherit;padding:13px 14px;border:1px solid #e2d5d9;border-radius:12px}
.woocommerce h2,.woocommerce h3{font-family:AntonL,Impact,sans-serif;text-transform:uppercase;letter-spacing:-.5px}
.woocommerce-order .woocommerce-order-details,.woocommerce-order .woocommerce-customer-details{margin-top:34px}

/* ============================================================
   RESPONSIVE — most traffic lands here from a phone.
   ============================================================ */
@media (max-width:1024px){
  .w{padding:0 32px}
  h1{font-size:68px}
  .hg{gap:38px}
  .ps-grid,.ps-grid-3{grid-template-columns:repeat(2,1fr);gap:24px}
  .ps-pdp-top{grid-template-columns:1fr;gap:40px}
  .ps-title{font-size:44px}
  .ps-h1{font-size:48px}
  .ps-shot{max-width:520px}
}
@media (max-width:820px){
  .nav .lk{display:none}
  .hg,.feat{grid-template-columns:1fr;gap:44px}
  .hero{padding:24px 0 68px}
  .hero img{max-height:340px}
  h1{font-size:56px}
  h2{font-size:38px}
  .sec{padding:64px 0}
  .steps,.pgrid{grid-template-columns:1fr;gap:20px}
  .grid{grid-template-columns:1fr}
  .grid .card:last-child:nth-child(odd){grid-column:auto}
  .end h2{font-size:44px}
  .end{padding:76px 0}
  .tick{font-size:11px;letter-spacing:.2em}
  /* `.sitenav a:not(.btn){display:none}` lived here — it dropped every link
     except the CTA back when small screens had no menu at all. The burger
     replaced that, but the rule outlived it and outranks the dropdown's
     `.sitenav a` on specificity, so the panel opened empty on every page
     except the front page (which uses `.nav .lk` and was never matched). */
  .sitelogo img{height:30px}
  .btn-sm{padding:11px 16px;font-size:11px;letter-spacing:.08em}
  .ps-shop,.ps-pdp{padding:44px 0 72px}
}
@media (max-width:560px){
  .w{padding:0 20px}
  .logo{font-size:27px;letter-spacing:3px}
  .btn{padding:12px 18px;font-size:12px}
  h1{font-size:42px}
  h2{font-size:31px}
  .lead{font-size:15px}
  .hbtns{flex-direction:column;align-items:stretch;gap:12px}
  .hbtns a{text-align:center}
  .card{padding:26px 22px}
  .card .nm{font-size:26px}
  .card .pr b{font-size:27px}
  .card .top{gap:14px}
  .freeband{font-size:13px;padding:18px 20px}
  .ps-grid,.ps-grid-3{grid-template-columns:1fr;gap:20px}
  .ps-h1{font-size:37px}
  .ps-title{font-size:35px}
  .ps-pdp-price{font-size:32px}
  .ps-card-body{padding:0 20px 20px}
  .ps-cart{gap:10px}
  .ps-buy{padding:17px 26px;flex:1}
  .ps-band{font-size:13px;padding:20px 22px}
  .end h2{font-size:35px}
}

/* ---- reviews (real ones; section is absent until reviews.json has entries) ---- */
.reviews .rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.rcard{background:#fff;border:1px solid #ece3e6;border-radius:18px;padding:28px 26px}
.rcard blockquote{font-size:16.5px;line-height:1.62;color:#3a2b31}
.rcard figcaption{margin-top:18px;display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;letter-spacing:.12em}
.rcard .rn{font-weight:700;color:var(--ink)}
.rcard .rv{color:var(--berry2);letter-spacing:.18em;font-size:11px}
.rmore{margin-top:24px;font-size:14px;color:var(--soft)}

/* ---- what to expect (honest stand-in while there are no reviews) ---- */
.expect{background:var(--paper)}
.expect .elead{max-width:640px;margin-top:14px;font-size:17px;line-height:1.6;color:var(--soft)}
.expect .egrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}
.expect .egrid h3{font-family:AntonL,Impact,sans-serif;font-size:26px;letter-spacing:-.3px;
  text-transform:none;margin-bottom:10px}
.expect .egrid p{font-size:15.5px;line-height:1.62;color:#5c4a51}
@media(max-width:860px){
  .reviews .rgrid,.expect .egrid{grid-template-columns:1fr}
}

/* ---- review strip (checkout + product page) ---- */
.rstrip{background:#fff;border:1px solid #ece3e6;border-radius:16px;padding:22px 24px;margin:22px 0}
.rstrip-h{font-size:11.5px;letter-spacing:.2em;color:var(--berry2);font-weight:700;margin-bottom:14px}
.rstrip p{font-size:14.5px;line-height:1.6;color:#4a3a40;margin-bottom:12px}
.rstrip p:last-child{margin-bottom:0}
.rstrip p span{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.16em;color:#a2929a}

/* ---- order on WhatsApp (cart + checkout alternative to a blind EFT) ---- */
.ps-waorder{background:#f6fbf7;border:1px solid #cfe8d6;border-radius:16px;
  padding:22px 24px;margin:20px 0}
.ps-waorder.tight{padding:18px 20px;margin:16px 0}
.ps-waorder-h{font-size:11.5px;letter-spacing:.2em;font-weight:700;color:#1e7a44;margin-bottom:10px}
.ps-waorder p{font-size:14.5px;line-height:1.6;color:#3d4a42;margin-bottom:16px}
.ps-wabtn{display:inline-block;background:#1fa855;color:#fff;text-decoration:none;
  padding:13px 24px;border-radius:40px;font-size:13px;font-weight:700;letter-spacing:.1em}
.ps-wabtn:hover{background:#178a45;color:#fff}
.ps-waorder-n{display:block;margin-top:12px;font-size:12px;color:#7d8c83}

/* ============================================================================
   ACCESSIBILITY PASS — readability for older eyes, and on phones
   ----------------------------------------------------------------------------
   Audited 15 Aug: 57 rules under 16px, body copy at 14–15px, two contrast pairs
   at 2.95:1 against a 4.5:1 standard, and every paragraph set in MONOSPACE.

   Monospace is the brand signature and it stays — on eyebrows, labels, chips and
   technical marks, where it reads as deliberate. But uniform character widths
   measurably slow reading, so running BODY copy in it costs comprehension for
   exactly the 45–65 buyer this store sells to. Body moves to the system UI stack:
   generic (no firewall signature), zero download, and rendered by the reader's
   own device the way they've already tuned it.

   Everything below is an override so the audit stays legible as one block rather
   than 57 scattered edits.
   ========================================================================== */

:root{ --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* --- body copy: readable face, readable size --- */
body,
p, li, td, th, label, blockquote, input, textarea, select{
  font-family: var(--ui);
}
.lead{ font-size:17.5px; line-height:1.62 }
.sub{ font-size:16.5px; line-height:1.6 }
.card p, .step p, .pgrid p, .tickl li, .rstrip p,
.expect .egrid p, .ps-card-blurb, .ps-detail-in li,
.ps-assure li, .ps-waorder p, .rcard blockquote,
.ps-wc-page p, .ps-wc-page li, .ps-wc-page td, .ps-wc-page th{
  font-size:16.5px; line-height:1.62;
}
.rmore, .ps-optin label, .ps-thanks p, .woocommerce-message,
.woocommerce-info, .woocommerce-error, .ps-oos{ font-size:16px; line-height:1.6 }
footer{ font-size:14.5px; line-height:1.7 }

/* --- the mono signature stays exactly where it earns its keep --- */
.eyebrow, .kick, .tick, .chip, .rstrip-h, .ps-waorder-h, .ps-waorder-n,
.rcard .rv, .rcard figcaption, .mark, .pg, .nav .lk, .sitenav,
.ps-meta, .ps-band, .ps-flag, .card .wk, .card .pr span, .btn, .ghost,
.btn-sm, .ps-go, .ps-back, .ps-buy, .ps-wabtn, .card .go, .freeband{
  font-family: ui-monospace,'SF Mono',Menlo,monospace;
}

/* --- smallest labels lifted off the floor --- */
.tick{ font-size:12.5px }
.chip, .rstrip-h, .ps-waorder-h, .rcard .rv{ font-size:12.5px }
.eyebrow, .kick{ font-size:13.5px }
.btn, .ghost, .ps-wabtn, .card .go, .ps-go, .btn-sm{ font-size:14.5px }
.rstrip p span, .ps-flag, .ps-waorder-n, .ps-meta{ font-size:12.5px }

/* --- contrast: these two were 2.95:1, below the 4.5:1 minimum --- */
.rstrip p span, .ps-waorder-n{ color:#6b5c63 }   /* 5.4:1 on white */
.rcard .rn{ color:#2b2126 }

/* --- tap targets: 44px minimum, and full-width buttons on a phone --- */
.btn, .ghost, .ps-wabtn, .btn-sm, .card .go, .ps-go{
  min-height:48px; display:inline-flex; align-items:center; justify-content:center;
}
.nav .lk a{ display:inline-block; padding:10px 6px }   /* was a bare inline link */

@media(max-width:860px){
  .lead{ font-size:17px }
  .btn, .ghost, .ps-wabtn{ width:100%; text-align:center }
  /* stop the long mono ticker shouting on a narrow screen */
  .tick{ font-size:11.5px; letter-spacing:.08em }
}

/* ============================================================================
   REVIEWS, LOUDER
   Six small cards in body type read as more page copy and got scrolled past.
   Testimony has to LOOK unlike prose: fewer, much bigger, and on a ground the
   rest of the page never uses.
   ========================================================================== */

/* --- one big pull quote near the top --- */
.pullq{background:var(--paper);text-align:center;padding:56px 0 52px}
.pq-stars{color:#e8a33d;font-size:20px;letter-spacing:5px;margin-bottom:20px}
.pq{font-family:AntonL,Impact,sans-serif;font-size:38px;line-height:1.18;
  letter-spacing:-.4px;max-width:880px;margin:0 auto;color:var(--ink);
  text-transform:none;font-weight:400}
.pq-by{margin-top:22px;font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:13px;letter-spacing:.16em;color:var(--berry2);font-weight:700}
.pq-by span{color:#8a7681;font-weight:400;letter-spacing:.1em}

/* --- the full section: dark band, three big cards --- */
.reviews.dark{background:var(--deep);color:#fff}
.reviews.dark h2{color:#fff}
.reviews.dark .eyebrow{color:#f0a8bd}
.rlede{font-size:17px;color:rgba(255,255,255,.72);margin-top:10px;max-width:560px}
.reviews .rgrid{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.reviews.dark .rcard{background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:30px 28px}
.rstars{color:#e8a33d;font-size:14px;letter-spacing:3px;margin-bottom:16px}
.reviews.dark .rcard blockquote{font-size:18px;line-height:1.55;color:#fff}
.reviews.dark .rcard figcaption{margin-top:22px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14);display:block}
.reviews.dark .rcard .rn{color:#fff;font-size:13px;letter-spacing:.14em}
.reviews.dark .rcard .rv{display:block;margin-top:5px;color:#f0a8bd;font-size:11.5px}
.reviews.dark .rmore{color:rgba(255,255,255,.6);font-size:15px}

@media(max-width:860px){
  .pq{font-size:26px;line-height:1.22}
  .pullq{padding:40px 22px 38px}
  .reviews .rgrid{grid-template-columns:1fr}
  .reviews.dark .rcard blockquote{font-size:17px}
}

/* ---- /guide/ — the preparation manual on the web ---- */
.guide-hero{background:var(--paper);padding:64px 0 52px;border-bottom:1px solid #ece3e6}
.guide-hero h1{font-family:AntonL,Impact,sans-serif;font-size:64px;line-height:.95;
  letter-spacing:-1.5px;margin:12px 0 18px}
.guide-hero .lead{max-width:600px}
.ghbtns{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.sec.guide{background:#fff}
.gstep{display:flex;gap:34px;align-items:center;padding:30px 0;
  border-bottom:1px solid #f0e8ea}
.gstep img{width:190px;height:190px;object-fit:contain;flex:none;
  background:var(--paper);border-radius:18px}
.gn{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12.5px;
  letter-spacing:.2em;color:var(--berry2);font-weight:700;margin-bottom:8px}
.gstep h2{font-family:AntonL,Impact,sans-serif;font-size:30px;letter-spacing:-.3px;
  margin-bottom:10px;text-transform:none}
.gstep p{font-size:17px;line-height:1.6;max-width:560px}
.gnote,.gwarn{border-radius:14px;padding:22px 26px;margin:26px 0}
.gnote{background:var(--paper);border:1px solid #ece3e6}
.gwarn{background:#fff4f6;border-left:4px solid var(--berry2)}
.gnote b,.gwarn b{display:block;font-size:15px;margin-bottom:7px}
.gwarn b{color:var(--berry2)}
.gnote p,.gwarn p{font-size:16.5px;line-height:1.6}
.gh2{font-family:AntonL,Impact,sans-serif;font-size:36px;margin:44px 0 22px;
  text-transform:none;letter-spacing:-.4px}
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ggrid h3{font-family:AntonL,Impact,sans-serif;font-size:22px;margin-bottom:8px;
  text-transform:none}
.ggrid p{font-size:16px;line-height:1.6;color:#5c4a51}
.gend{text-align:center;background:var(--paper);border-radius:20px;padding:44px 30px;margin-top:44px}
.gend h2{font-family:AntonL,Impact,sans-serif;font-size:34px;margin-bottom:10px;text-transform:none}
.gend p{font-size:17px;margin-bottom:22px}
@media(max-width:860px){
  .guide-hero h1{font-size:42px}
  .gstep{flex-direction:column;align-items:flex-start;gap:18px}
  .gstep img{width:100%;height:auto;max-height:260px}
  .ggrid{grid-template-columns:1fr}
  .ghbtns .btn,.ghbtns .ghost{width:100%}
}

/* ---- fix: hero type is coloured for the DARK berry hero (#f6dae1 / white).
        On the light guide hero that renders pale-on-pale and reads as invisible. ---- */
.guide-hero .lead{color:#5c4a51}
.guide-hero .ghost{border:1.5px solid rgba(28,20,24,.28);color:var(--ink)}
.guide-hero .ghost:hover{border-color:var(--ink);background:rgba(28,20,24,.04)}
/* same trap anywhere else a ghost button sits on a light ground */
.sec .ghost, .gend .ghost, .expect .ghost{border-color:rgba(28,20,24,.28);color:var(--ink)}

.ps-guidelink{margin:14px 0 0}
.ps-guidelink a{font-size:15.5px;color:var(--berry2);text-decoration:none;font-weight:600}
.ps-guidelink a:hover{text-decoration:underline}

/* ---- dual-chamber page extras ---- */
.ggrid.dual4{grid-template-columns:repeat(4,1fr)}
.dual4 .dn{font-family:AntonL,Impact,sans-serif;font-size:30px;color:var(--berry2);
  line-height:1;margin-bottom:8px}
/* ---- "can't find it" on the shop archive ---- */
.ps-notfound{background:var(--paper);border:1px solid #ece3e6;border-radius:20px;
  padding:36px 34px;margin:44px 0 10px;text-align:center}
.ps-notfound h3{font-family:AntonL,Impact,sans-serif;font-size:30px;margin-bottom:10px;
  text-transform:none;letter-spacing:-.3px}
.ps-notfound p{font-size:16.5px;line-height:1.6;max-width:620px;margin:0 auto 22px;color:#5c4a51}
@media(max-width:860px){ .ggrid.dual4{grid-template-columns:1fr 1fr} }

/* ============================================================================
   MOBILE NAV — a real dropdown.
   Adding Dual-chamber / Guide / Ask us made the bar too long for a phone, and the
   flex-wrap fallback stacked them beside the logo. CSS-only (checkbox) so there is
   no JS to fail and no flash of an open menu on load.
   ========================================================================== */
.navtoggle{display:none}
.navburger{background:none;display:none;cursor:pointer;padding:12px;margin-left:auto;
  flex-direction:column;gap:5px;z-index:60}
.navburger span{display:block;width:26px;height:2.5px;background:#fff;border-radius:2px;
  transition:transform .2s, opacity .2s}
.navburger.onlight span{background:var(--ink)}

/* 1100, not 860. The tightened row measures 812px; below about 1100 the window
   stops being able to hold that next to the logo, and the links wrapped onto two
   lines with the spacing going ragged. Measured, not guessed — at 1025 the slack
   was 10px, which is not a margin. A laptop window this narrow is better served
   by the same dropdown the phone gets than by a squeezed row. */
@media(max-width:1260px){
  .nav, .sitebar-in{position:relative;align-items:center}
  .navburger{display:flex}

  /* The front page paints its own nav in the hero (`.nav .lk`); every other page
     gets the sticky bar (`.sitenav`). They are two elements doing one job, so
     EVERY selector in this block names BOTH — a rule added to one and not the
     other is precisely how the dropdown came to work on the home page only.
     If you touch one side of a comma here, touch the other. */

  /* collapsed by default; the checkbox opens it */
  .nav .lk, .sitenav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-radius:16px; padding:8px;
    box-shadow:0 18px 44px rgba(28,4,14,.28); margin-top:10px; z-index:50;
  }
  .navtoggle:checked ~ .lk, .navtoggle:checked ~ .sitenav{ display:flex }

  .nav .lk a, .sitenav a{
    display:block; width:100%; padding:15px 16px; text-align:left;
    color:var(--ink) !important; border-bottom:1px solid #f0e8ea;
    font-size:15px; letter-spacing:.1em;
  }
  .nav .lk a:last-child, .sitenav a:last-child{ border-bottom:0 }
  /* the CTA stays a button, just full width inside the sheet */
  .nav .lk a.btn, .sitenav a.btn{
    background:var(--berry); color:#fff !important; border-radius:40px;
    margin-top:8px; text-align:center; border-bottom:0;
  }
  /* burger animates to a cross so the state is obvious */
  .navtoggle:checked ~ .navburger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .navtoggle:checked ~ .navburger span:nth-child(2){opacity:0}
  .navtoggle:checked ~ .navburger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* ============================================================================
   MOBILE POLISH
   Container gutters, image sizing and rhythm on a phone. The layout was built
   desktop-first and several sections still assumed room they do not have.
   ========================================================================== */
@media(max-width:860px){
  /* one consistent gutter everywhere — sections were setting their own */
  .w{ padding-left:20px; padding-right:20px; max-width:100% }
  .sec{ padding:44px 0 }

  /* headings were sized for a 1200px column and were overflowing */
  h1{ font-size:clamp(34px, 11vw, 52px); line-height:.96; letter-spacing:-1px }
  h2{ font-size:clamp(26px, 7.5vw, 36px); line-height:1.02 }
  .hero h1{ font-size:clamp(38px, 13vw, 62px) }

  /* images: never wider than the column, never pixel-stretched */
  img{ max-width:100%; height:auto }
  .hero img{ max-height:300px; width:auto }
  .feat img, .ggrid img, .gstep img{ width:100%; height:auto; object-fit:contain }

  /* grids collapse rather than squeeze */
  .steps, .grid, .pgrid, .feat, .ggrid, .egrid, .rgrid{
    grid-template-columns:1fr !important; display:grid; gap:16px }
  .feat{ gap:24px }

  /* cards were touching the screen edge */
  .card, .step, .rcard, .gnote, .gwarn, .ps-notfound, .ps-waorder, .rstrip{
    border-radius:16px }

  /* the marquee was running three lines deep */
  .tick{ padding:12px 0; white-space:nowrap; overflow:hidden }

  /* product grid: two up is too tight below 520px */
  .ps-cards{ grid-template-columns:repeat(2,1fr); gap:12px }
}
@media(max-width:520px){
  .ps-cards{ grid-template-columns:1fr }
  .pq{ font-size:23px }
  .guide-hero h1{ font-size:34px }
}

/* ---------------------------------------------------------------------------
   MOBILE LEGIBILITY FLOOR
   Measured against the live site at 375px rather than written from the source,
   because an earlier accessibility pass already lifted the buttons to 14.5px
   and a blanket rule here would have quietly pulled them back down.
   These seven were the only things still under 13.5px on a phone. Every value
   below is a RAISE — nothing in this block may lower an existing size.
   Tracking comes in with the size: at 11.5px with 2.5px of letter-spacing the
   gaps between letters start reading as gaps between words.
--------------------------------------------------------------------------- */
@media(max-width:860px){
  .tick,
  .card .wk,
  .card .pr span,
  .rcard .rv,
  .chip,
  .ps-flag,
  .gn{ font-size:13.5px }

  .card .wk{ letter-spacing:.12em }
  .gn{ letter-spacing:.16em }
  .rcard .rv{ letter-spacing:.12em }
  .tick{ letter-spacing:.16em }
}

/* ===========================================================================
   FLOATING WHATSAPP  ·  FAQ  ·  COPY BUTTON  ·  SKIP LINK  ·  PRINT
   =========================================================================== */

/* Skip link: invisible until focused, then unmissable. */
.ps-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:14px 22px;border-radius:0 0 12px 0;font-size:14px;letter-spacing:.08em;text-decoration:none}
.ps-skip:focus{left:0}

/* Floating WhatsApp. Bottom-right on desktop; on a phone it sits above the
   thumb rest rather than under it, and shrinks to the icon so it never covers
   a price or an Add-to-order button. */
.ps-fab{position:fixed;right:22px;bottom:22px;z-index:90;display:inline-flex;align-items:center;
  gap:10px;background:#1e7a44;color:#fff;text-decoration:none;padding:14px 20px;border-radius:40px;
  box-shadow:0 10px 30px rgba(12,60,32,.34);font-size:13.5px;letter-spacing:.08em;
  font-weight:700;transition:transform .18s ease,box-shadow .18s ease}
.ps-fab:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(12,60,32,.42)}
.ps-fab svg{width:22px;height:22px;fill:currentColor;flex:0 0 auto}
@media(max-width:600px){
  .ps-fab{right:16px;bottom:16px;padding:14px;gap:0}
  .ps-fab span{display:none}
  .ps-fab svg{width:24px;height:24px}
}
@media print{ .ps-fab{display:none} }

/* FAQ. <details> so it works with no JS and prints open. */
.ps-faq{background:#fff;border-top:1px solid #ece3e6}
.ps-faq-list{max-width:820px;margin-top:34px}
.ps-faq details{border-bottom:1px solid #ece3e6}
.ps-faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:16.5px;font-weight:700;line-height:1.5}
.ps-faq summary::-webkit-details-marker{display:none}
.ps-faq summary:hover{color:var(--berry2)}
.ps-faq summary:focus-visible{outline:2px solid var(--berry2);outline-offset:3px}
/* the +/- is drawn, not a glyph, so it cannot go missing with a font */
.ps-faq summary:after,.ps-faq summary:before{content:"";position:absolute;right:8px;top:50%;
  background:var(--berry2);transition:transform .2s ease,opacity .2s ease}
.ps-faq summary:before{width:15px;height:2px;margin-top:-1px}
.ps-faq summary:after{width:2px;height:15px;margin-top:-7.5px;right:14.5px}
.ps-faq details[open] summary:after{transform:rotate(90deg);opacity:0}
.ps-faq-a{padding:0 44px 26px 0}
.ps-faq-a p{font-size:15.5px;line-height:1.85;color:var(--soft);margin:0}
.ps-faq-more{margin-top:30px;font-size:15px;color:var(--soft)}
.ps-faq-more a{color:var(--berry2);font-weight:700}
@media(max-width:860px){
  .ps-faq summary{font-size:15.5px;padding:20px 40px 20px 0}
  .ps-faq-a p{font-size:15px}
}

/* Copy buttons on the EFT details. */
.wc-bacs-bank-details li,.woocommerce-bacs-bank-details li{display:flex;align-items:center;
  gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid #f0e8ea}
.ps-copy{margin-left:auto;background:var(--ink);color:#fff;border:0;border-radius:30px;
  padding:8px 16px;font-family:inherit;font-size:12.5px;letter-spacing:.08em;cursor:pointer;
  min-height:38px;transition:background .16s ease}
.ps-copy:hover{background:var(--berry)}
.ps-copy.is-done{background:#1e7a44}
.ps-payref{background:#fff8e6;border:1px solid #f0dca8;border-radius:14px;padding:18px 22px;
  font-size:15px;line-height:1.7;margin:22px 0}

/* PRINT — the preparation guide is the one page people genuinely print and
   stick on a kitchen cupboard, so it gets to look like a document. */
@media print{
  .sitebar,.ps-fab,.ghbtns,.gend,.ps-skip,.rstrip,footer .fl,.navburger{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .w{max-width:100%;padding:0}
  .guide-hero{background:#fff !important;color:#000 !important;padding:0 0 12pt}
  .guide-hero h1{font-size:26pt;color:#000}
  .guide-hero .lead{color:#000}
  .gstep{page-break-inside:avoid;break-inside:avoid;margin-bottom:14pt}
  .gstep img{max-width:38%;filter:grayscale(1)}
  .gwarn,.gnote{border:1pt solid #000;background:#fff !important;page-break-inside:avoid}
  .ps-faq details{page-break-inside:avoid}
  .ps-faq details:not([open]) .ps-faq-a{display:block}  /* print every answer */
  a[href^="http"]:after{content:" (" attr(href) ")";font-size:8pt;color:#444}
}

/* ===========================================================================
   POLISH PASS — search, dark mode, progress, back-to-top, cookie notice,
   loading + form states, password toggle, confirm modal, last-updated.
   =========================================================================== */

/* ===========================================================================
   DARK MODE — COMPLETE PASS
   The first attempt covered about seven surfaces because I listed them by hand.
   These are scanned from the stylesheet and classified by LUMINANCE, so the
   near-white creams are caught too: 20 surfaces, 3 controls, 4 bands.

   Every darkened surface also sets `color`. An input or button with no colour
   of its own falls back to the browser default BLACK, which is invisible the
   moment its ground goes dark.
   =========================================================================== */
:root[data-theme="dark"]{
  --paper:#140a0f; --ink:#f6ecef; --soft:#b9a2ab; --berry2:#e4557a;
  --card:#1e1017; --line:#33202a; --invert-bg:#f6ecef; --invert-fg:#140a0f;
}
:root{--invert-bg:#1b1016;--invert-fg:#ffffff}
:root[data-theme="dark"] body{background:var(--paper);color:var(--ink)}

/* 1 — every light surface, with text to match */
:root[data-theme="dark"] .step,:root[data-theme="dark"] .proof,:root[data-theme="dark"] .ps-card{background:var(--card);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .ps-band,:root[data-theme="dark"] .ps-qty input,:root[data-theme="dark"] .ps-oos{background:var(--card);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .ps-detail-in .ruo,:root[data-theme="dark"] .ps-optin,:root[data-theme="dark"] .ps-thanks{background:var(--card);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .rcard,:root[data-theme="dark"] .rstrip,:root[data-theme="dark"] .ps-waorder{background:var(--card);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .sec.guide,:root[data-theme="dark"] .gwarn,:root[data-theme="dark"] .nav .lk{background:var(--card);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .sitenav,:root[data-theme="dark"] .ps-faq,:root[data-theme="dark"] .ps-payref{background:var(--card);border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .guide-hero,:root[data-theme="dark"] .gnote{background:var(--card);border-color:var(--line);color:var(--ink)}

/* 2 — controls that used --ink as a ground with white text on top */
/* the theme sets color:#fff on these; the ground inverts so the text must too */
:root[data-theme="dark"] .ps-flag,
:root[data-theme="dark"] .ps-copy{background:var(--invert-bg);color:var(--invert-fg)!important}

/* 3 — bands stay dark; they were already dark in light mode */
:root[data-theme="dark"] .tick,:root[data-theme="dark"] .dark,:root[data-theme="dark"] footer{background:#0c0509;color:#f6ecef}
:root[data-theme="dark"] .ps-skip{background:#0c0509;color:#f6ecef!important}
:root[data-theme="dark"] footer{color:#b9a2ab}

/* 4 — deliberately kept white, so they need their dark text back */
:root[data-theme="dark"] .btn{background:#fff;color:var(--berry)!important}
:root[data-theme="dark"] .ps-shot,
:root[data-theme="dark"] .ps-card-img{background:#fff}
:root[data-theme="dark"] .navburger span,
:root[data-theme="dark"] .navburger.onlight span{background:#f6ecef}

/* 5 — Woo's own notices ship their own light grounds */
:root[data-theme="dark"] .woocommerce-message,
:root[data-theme="dark"] .woocommerce-info,
:root[data-theme="dark"] .woocommerce-error{background:var(--card);color:var(--ink)}

/* 6 — my own overlays use --ink as a ground, which now inverts */
:root[data-theme="dark"] .ps-cookie{background:#0c0509;color:#f6ecef}
:root[data-theme="dark"] .ps-cookie p{color:#d9c3cb}
:root[data-theme="dark"] .ps-cookie .btn{background:#f6ecef;color:#140a0f!important}
:root[data-theme="dark"] .ps-cookie .ghost{background:none;color:#f6ecef!important;border-color:rgba(255,255,255,.45)}
:root[data-theme="dark"] .ps-totop{background:#f6ecef;color:#140a0f}
:root[data-theme="dark"] .ps-modal-in{background:var(--card);color:var(--ink)}

/* --- 3. SEARCH ---------------------------------------------------------- */
.ps-search{display:flex;align-items:center;gap:0;flex:0 0 auto}
.ps-search input{font-family:inherit;font-size:12.5px;padding:9px 11px;width:104px;
  border:1px solid var(--line);border-right:0;border-radius:30px 0 0 30px;
  background:var(--card);color:var(--ink);outline-offset:2px}
.ps-search input::placeholder{color:var(--soft)}
.ps-search input:focus{width:180px;border-color:var(--berry2)}
.ps-search button{border:1px solid var(--line);border-left:0;border-radius:0 30px 30px 0;
  background:var(--card);padding:8px 12px;cursor:pointer;line-height:0;min-height:38px}
.ps-search svg{width:15px;height:15px;fill:var(--soft)}
.ps-search button:hover svg{fill:var(--berry2)}
@media(max-width:1260px){ .ps-search{width:100%;margin:8px 0} .ps-search input{width:100%} }

/* --- 8. SCROLL PROGRESS ------------------------------------------------- */
.ps-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none}
.ps-progress span{display:block;height:100%;width:0;background:var(--berry2);transition:width .08s linear}

/* --- 4. BACK TO TOP ----------------------------------------------------- */
.ps-totop{position:fixed;right:22px;bottom:96px;z-index:88;width:44px;height:44px;border:0;
  border-radius:50%;background:var(--ink);color:var(--paper);cursor:pointer;display:flex;
  align-items:center;justify-content:center;opacity:0;pointer-events:none;
  transform:translateY(8px);transition:opacity .2s ease,transform .2s ease}
.ps-totop.on{opacity:.92;pointer-events:auto;transform:none}
.ps-totop:hover{opacity:1}
.ps-totop svg{width:20px;height:20px;fill:currentColor}
@media(max-width:600px){ .ps-totop{right:16px;bottom:84px;width:40px;height:40px} }
@media print{ .ps-totop,.ps-progress,.ps-cookie{display:none !important} }

/* --- 2. COOKIE NOTICE --------------------------------------------------- */
.ps-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:110;background:var(--ink);
  color:#fff;border-radius:18px;padding:20px 22px;max-width:520px;
  box-shadow:0 20px 50px rgba(0,0,0,.4)}
.ps-cookie p{font-size:13.5px;line-height:1.7;margin-bottom:14px;color:#e6d6db}
.ps-cookie-b{display:flex;gap:10px;flex-wrap:wrap}
.ps-cookie .btn{background:#fff;color:var(--ink)}
.ps-cookie .ghost{border-color:rgba(255,255,255,.45);color:#fff}

/* --- 17. CONFIRM MODAL -------------------------------------------------- */
.ps-modal{position:fixed;inset:0;z-index:130;background:rgba(20,4,12,.6);
  display:flex;align-items:center;justify-content:center;padding:20px}
.ps-modal[hidden]{display:none}
.ps-modal-in{background:var(--card);color:var(--ink);border-radius:20px;padding:30px;
  max-width:420px;width:100%;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.ps-modal-in h3{font-size:19px;margin-bottom:10px}
.ps-modal-m{font-size:14.5px;line-height:1.7;color:var(--soft);margin-bottom:22px}
.ps-modal-b{display:flex;gap:10px;justify-content:flex-end}

/* --- 6. LOADING STATE --------------------------------------------------- */
.is-busy{opacity:.72;pointer-events:none;position:relative}
@media(prefers-reduced-motion:no-preference){
  .is-busy:after{content:"";position:absolute;right:14px;top:50%;width:12px;height:12px;
    margin-top:-6px;border:2px solid currentColor;border-right-color:transparent;
    border-radius:50%;animation:ps-spin .6s linear infinite}
}
@keyframes ps-spin{to{transform:rotate(360deg)}}

/* --- 13. PASSWORD TOGGLE ------------------------------------------------ */
.ps-pw{position:relative;display:block}
.ps-pw input{width:100%;padding-right:64px}
.ps-pw-t{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;
  border:0;color:var(--berry2);font-family:inherit;font-size:12.5px;cursor:pointer;
  padding:8px 10px;min-height:38px}

/* --- 15/16. FORM STATES + 18. LAST UPDATED ------------------------------ */
.ps-ok{font-weight:700;color:#1e7a44}
.woocommerce-error,.woocommerce-NoticeGroup .woocommerce-error{border-left:3px solid #c22047}
.ps-updated{font-size:12.5px;color:var(--soft);letter-spacing:.04em;margin-bottom:26px}

/* ===========================================================================
   19. CLASSIC CART / CHECKOUT — STRUCTURE
   Woo's own `woocommerce-layout` sheet is dequeued in functions.php, so
   nothing has ever sized these rows. It went unnoticed because the cart and
   checkout pages shipped as BLOCK pages and this markup never rendered; the
   moment they moved to the shortcodes, every input fell back to the browser
   default ~176px. Appearance (borders, radii, buttons) is already handled in
   the CART / CHECKOUT section above — this block is layout only.
   =========================================================================== */

/* Field rows. The wrapper drives the columns so `-first`/`-last` can pair up
   without inline-block whitespace gaps. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.woocommerce form .form-row{display:block;margin:0 0 18px;padding:0;grid-column:1/-1}
.woocommerce form .form-row-first{grid-column:1}
.woocommerce form .form-row-last{grid-column:2}
.woocommerce form .form-row label{display:block;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft);margin-bottom:7px}
.woocommerce form .form-row label .required{color:var(--berry2);text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{width:100%;display:block}
.woocommerce form .form-row textarea{min-height:96px;resize:vertical}
.woocommerce form .form-row .description{font-size:12.5px;line-height:1.6;color:var(--soft);margin-top:7px}

/* Two columns: details on the left, the order and its payment box on the
   right. Same shape the block checkout had, so the page does not lurch. */
.woocommerce-checkout form.checkout{display:grid;grid-template-columns:minmax(0,1fr) 372px;
  gap:0 46px;align-items:start}
.woocommerce-checkout form.checkout>*{grid-column:1/-1}
.woocommerce-checkout form.checkout>#customer_details{grid-column:1;grid-row:1/span 2}
.woocommerce-checkout form.checkout>#order_review_heading{grid-column:2;grid-row:1;margin-top:0}
.woocommerce-checkout form.checkout>#order_review{grid-column:2;grid-row:2}

#order_review{background:#fff;border:1px solid #ece3e6;border-radius:18px;padding:24px 22px;
  position:sticky;top:96px}
#order_review table.shop_table{width:100%;border:0;margin:0;border-radius:0}
#order_review table.shop_table th,
#order_review table.shop_table td{padding:11px 0;border:0;border-bottom:1px solid #f0e6ea;
  font-size:14px;text-align:left}
#order_review table.shop_table td{text-align:right}
#order_review table.shop_table tfoot .order-total th,
#order_review table.shop_table tfoot .order-total td{border-bottom:0;padding-top:16px;font-size:16.5px}

#payment{background:none;border-radius:0}
#payment ul.payment_methods{list-style:none;margin:18px 0 0;padding:0;border:0}
#payment ul.payment_methods li{margin-bottom:10px;font-size:14.5px}
#payment .payment_box{background:var(--paper);border-radius:12px;padding:14px 16px;margin:10px 0 0;
  font-size:13.5px;line-height:1.65;color:var(--soft)}
#payment .form-row.place-order{margin:20px 0 0;padding:0}
#payment #place_order{width:100%}

/* Cart */
.woocommerce-cart table.shop_table{width:100%;border-collapse:collapse}
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td{padding:14px 10px;border:0;border-bottom:1px solid #f0e6ea}
.woocommerce-cart .product-thumbnail img{width:64px;height:auto;border-radius:10px}
/* the actions row and its coupon are laid out in section 20 — a table cell with
   colspan cannot be a flex container, see the note there */
.woocommerce-cart .cart-collaterals{margin-top:34px;display:flex;justify-content:flex-end}
.woocommerce-cart .cart_totals{width:100%;max-width:400px;background:#fff;border:1px solid #ece3e6;
  border-radius:18px;padding:24px}
.woocommerce-cart .cart_totals table{width:100%}
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td{padding:10px 0;border:0;border-bottom:1px solid #f0e6ea;font-size:14px}

@media(max-width:900px){
  .woocommerce-checkout form.checkout{grid-template-columns:1fr;gap:0}
  .woocommerce-checkout form.checkout>#customer_details,
  .woocommerce-checkout form.checkout>#order_review_heading,
  .woocommerce-checkout form.checkout>#order_review{grid-column:1/-1;grid-row:auto}
  #order_review{position:static;margin-top:8px}
}
@media(max-width:560px){
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-additional-fields__field-wrapper{grid-template-columns:1fr}
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last{grid-column:1}
  .woocommerce-cart .cart_totals{max-width:none}
}

/* Dark mode. Per the retrofit rule: every darkened surface sets `color` too,
   and inputs are darkened explicitly — a bare input keeps a white ground and
   black text, which is a glaring hole in an otherwise dark page. */
:root[data-theme="dark"] #order_review,
:root[data-theme="dark"] .woocommerce-cart .cart_totals{background:var(--card);
  border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .woocommerce form .form-row input.input-text,
:root[data-theme="dark"] .woocommerce form .form-row textarea,
:root[data-theme="dark"] .woocommerce form .form-row select{background:var(--card);
  border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] #payment .payment_box{background:rgba(255,255,255,.05);color:var(--soft)}
:root[data-theme="dark"] #order_review table.shop_table th,
:root[data-theme="dark"] #order_review table.shop_table td,
:root[data-theme="dark"] .woocommerce-cart table.shop_table th,
:root[data-theme="dark"] .woocommerce-cart table.shop_table td,
:root[data-theme="dark"] .woocommerce-cart .cart_totals th,
:root[data-theme="dark"] .woocommerce-cart .cart_totals td{border-bottom-color:var(--line);color:var(--ink)}

/* ===========================================================================
   20. THEME TOGGLE + THE REST OF WOO'S SURFACES
   Two problems, one cause: Woo's `woocommerce-general` sheet is dequeued and
   the theme only ever styled the pages it had actually looked at. A sweep of
   every rendering class across cart / checkout / my-account / order-received
   found 69 with no rule at all. The toggle was worse — `.ps-theme` had NO css
   whatsoever, so its two SVGs (viewBox, no width/height) expanded to fill
   their container and swallowed the mobile menu.
   =========================================================================== */

/* --- the dark-mode toggle ------------------------------------------------ */
.ps-theme{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;padding:0;border:0;background:none;color:inherit;
  cursor:pointer;border-radius:50%;line-height:0}
.ps-theme:hover{background:rgba(0,0,0,.06)}
.ps-theme svg{width:19px;height:19px;display:block;flex:none;fill:currentColor}
/* Show the destination, not the current state: moon = "go dark". */
.ps-theme .sun{display:none}
.ps-theme .moon{display:block}
:root[data-theme="dark"] .ps-theme .sun{display:block}
:root[data-theme="dark"] .ps-theme .moon{display:none}
:root[data-theme="dark"] .ps-theme:hover{background:rgba(255,255,255,.1)}
@media(max-width:1260px){
  /* inside the burger sheet it is a row like the links, not a floating icon */
  .nav .lk .ps-theme,.sitenav .ps-theme{width:100%;height:auto;justify-content:flex-start;
    padding:15px 16px;border-radius:0;gap:12px}
  .nav .lk .ps-theme::after,.sitenav .ps-theme::after{content:'Dark mode';font-size:15px;
    letter-spacing:.1em;line-height:1;color:var(--ink)}
  :root[data-theme="dark"] .nav .lk .ps-theme::after,
  :root[data-theme="dark"] .sitenav .ps-theme::after{content:'Light mode'}
}

/* --- buttons: kill the inherited link underline -------------------------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.checkout-button,.ps-wc-page a.button,.woocommerce-button{
  text-decoration:none;box-shadow:none;cursor:pointer;display:inline-block;text-align:center}

/* --- cart table ---------------------------------------------------------- */
/* Without explicit widths the browser hands the empty remove column half the
   row, which is what made the cart look broken. */
.woocommerce-cart table.cart{table-layout:auto}
.woocommerce-cart table.cart th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);text-align:left;padding:0 10px 12px}
.woocommerce-cart table.cart td{vertical-align:middle}
.woocommerce-cart table.cart .product-remove{width:34px;padding-left:0;text-align:left}
.woocommerce-cart table.cart .product-remove a.remove{display:inline-flex;align-items:center;
  justify-content:center;width:26px;height:26px;border-radius:50%;font-size:19px;line-height:1;
  color:var(--soft);text-decoration:none}
.woocommerce-cart table.cart .product-remove a.remove:hover{background:var(--berry);color:#fff}
.woocommerce-cart table.cart .product-thumbnail{width:82px}
/* The name column absorbs the slack. Under `table-layout:auto` a width is only a
   suggestion, and with the remove/thumbnail headers empty the browser was handing
   the leftover 300px to the remove column — which is what opened the huge gap
   before the product. Something must be told to take the space. */
.woocommerce-cart table.cart .product-name{text-align:left;width:100%}
.woocommerce-cart table.cart .product-name a{text-decoration:none;font-size:15px;color:var(--ink)}
.woocommerce-cart table.cart .product-name a:hover{color:var(--berry2)}
.woocommerce-cart table.cart .product-price,
.woocommerce-cart table.cart .product-subtotal{text-align:right;white-space:nowrap;width:120px}
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart th.product-subtotal{text-align:right}
.woocommerce-cart table.cart .product-quantity{width:110px}
.woocommerce-cart table.cart .quantity input.qty{width:78px;padding:10px;text-align:center}

/* Coupon left, update right, on one row.
   ⚠️ Do NOT put `display:flex` on this cell. It carries `colspan="6"`, and giving a
   table cell a flex display takes it out of table layout entirely — it stops
   spanning and collapses to the width of column one, which is what pushed the
   Update Cart button onto its own line. Keep it a table-cell and lay the children
   out with inline-flex + a float instead. */
.woocommerce-cart table.cart td.actions{display:table-cell;padding:20px 0 0;text-align:left}
.woocommerce-cart table.cart td.actions::after{content:'';display:block;clear:both}
.woocommerce-cart table.cart td.actions .coupon{display:inline-flex;gap:10px;align-items:center;
  width:auto;max-width:440px;vertical-align:middle}
.woocommerce-cart table.cart td.actions .coupon input.input-text{flex:1;min-width:150px;width:auto}
.woocommerce-cart table.cart td.actions>button.button{float:right}

/* Totals: a card, not a stray block adrift in white space. */
.woocommerce-cart .cart-collaterals{margin-top:30px;display:flex;justify-content:flex-end}
.woocommerce-cart .cart_totals h2{font-size:22px;margin:0 0 14px}
.woocommerce-cart .cart_totals .checkout-button{width:100%;margin-top:16px}
.woocommerce-cart .cart_totals .cart-subtotal th,
.woocommerce-cart .cart_totals .order-total th{font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft);text-align:left}
.woocommerce-cart .cart_totals td{text-align:right}
.woocommerce-cart .cart_totals .order-total td{font-size:17px}

/* --- checkout: the panels Woo opens above the form ----------------------- */
.woocommerce-form-coupon-toggle,.woocommerce-form-login-toggle{margin-bottom:14px}
.woocommerce form.checkout_coupon,.woocommerce form.woocommerce-form-login{
  background:#fff;border:1px solid #ece3e6;border-radius:16px;padding:22px 24px;margin:0 0 22px}
.woocommerce form.checkout_coupon .form-row{display:inline-block;width:auto;margin-right:10px;
  vertical-align:middle}
.woocommerce-input-wrapper{display:block;width:100%}
.woocommerce-terms-and-conditions-wrapper{margin:16px 0 0}
.woocommerce-privacy-policy-text p{font-size:12.5px;line-height:1.65;color:var(--soft)}
.woocommerce-notices-wrapper:empty{display:none}

/* --- my account: the login form had no styling at all -------------------- */
.woocommerce-account .woocommerce-form-login{max-width:460px}
.woocommerce-form-row label,.woocommerce form .form-row label{display:block}
.woocommerce-Input--text,.woocommerce-Input--email,.woocommerce-Input--password{
  width:100%;display:block;font-family:inherit;padding:13px 14px;border:1px solid #e2d5d9;
  border-radius:12px}
.woocommerce-form-login__rememberme{display:flex;align-items:center;gap:10px;font-size:14px;
  margin-bottom:16px}
.woocommerce-form-login__rememberme input{width:17px;height:17px;accent-color:var(--berry);flex:none}
.woocommerce-LostPassword{margin-top:14px;font-size:13.5px}

/* --- order received ------------------------------------------------------ */
.woocommerce-order .woocommerce-notice--success{font-size:16px;margin-bottom:22px}
ul.woocommerce-order-overview{list-style:none;margin:22px 0;padding:22px 24px;background:#fff;
  border:1px solid #ece3e6;border-radius:18px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
ul.woocommerce-order-overview li{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);border:0}
ul.woocommerce-order-overview li strong{display:block;margin-top:6px;font-size:15.5px;
  letter-spacing:0;text-transform:none;color:var(--ink)}
.woocommerce-bacs-bank-details{background:#fff;border:1px solid #ece3e6;border-radius:18px;
  padding:22px 24px;margin:22px 0}
.woocommerce-bacs-bank-details h2{font-size:20px;margin:0 0 10px}
.woocommerce-bacs-bank-details h3{font-size:15px;margin:0 0 10px}
ul.wc-bacs-bank-details{list-style:none;margin:0;padding:0}
ul.wc-bacs-bank-details li{font-size:14.5px;padding:7px 0;border-bottom:1px solid #f0e6ea}
ul.wc-bacs-bank-details li:last-child{border-bottom:0}
.woocommerce-table--order-details,.woocommerce-table--order-details th,
.woocommerce-table--order-details td{border:0}
.woocommerce-table--order-details{width:100%;border-collapse:collapse}
.woocommerce-table--order-details th,.woocommerce-table--order-details td{padding:12px 0;
  border-bottom:1px solid #f0e6ea;font-size:14.5px;text-align:left}
.woocommerce-table--order-details td.product-total,
.woocommerce-table--order-details th.product-total,
.woocommerce-table--order-details tfoot td{text-align:right}
.woocommerce-table__product-name a{text-decoration:none;color:var(--ink)}

@media(max-width:700px){
  /* Woo's own responsive table markup stacks the rows; give it room to. */
  .woocommerce-cart table.cart .product-thumbnail{width:60px}
  .woocommerce-cart table.cart .product-price,
  .woocommerce-cart table.cart .product-subtotal{width:auto}
  .woocommerce-cart table.cart td.actions .coupon{display:flex;width:100%;max-width:none;
    flex-direction:column;align-items:stretch}
  .woocommerce-cart table.cart td.actions>button.button,
  .woocommerce-cart table.cart td.actions .coupon .button{float:none;width:100%;margin-top:10px}
  ul.woocommerce-order-overview{grid-template-columns:1fr;gap:14px}
}

/* --- dark mode for everything added above -------------------------------- */
:root[data-theme="dark"] .woocommerce form.checkout_coupon,
:root[data-theme="dark"] .woocommerce form.woocommerce-form-login,
:root[data-theme="dark"] ul.woocommerce-order-overview,
:root[data-theme="dark"] .woocommerce-bacs-bank-details{background:var(--card);
  border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .woocommerce-Input--text,
:root[data-theme="dark"] .woocommerce-Input--email,
:root[data-theme="dark"] .woocommerce-Input--password,
:root[data-theme="dark"] .woocommerce-cart .quantity input.qty{background:var(--card);
  border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .woocommerce-cart table.cart th,
:root[data-theme="dark"] .woocommerce-cart table.cart td,
:root[data-theme="dark"] ul.wc-bacs-bank-details li,
:root[data-theme="dark"] .woocommerce-table--order-details th,
:root[data-theme="dark"] .woocommerce-table--order-details td{border-bottom-color:var(--line);
  color:var(--ink)}
:root[data-theme="dark"] .woocommerce-cart table.cart .product-name a,
:root[data-theme="dark"] ul.woocommerce-order-overview li strong,
:root[data-theme="dark"] .woocommerce-table__product-name a{color:var(--ink)}
:root[data-theme="dark"] .woocommerce-cart table.cart th,
:root[data-theme="dark"] .woocommerce-cart .cart_totals .cart-subtotal th,
:root[data-theme="dark"] .woocommerce-cart .cart_totals .order-total th,
:root[data-theme="dark"] ul.woocommerce-order-overview li{color:var(--soft)}

/* ===========================================================================
   21. WOO INPUTS EVERYWHERE + THE RESPONSIVE CART TABLE
   Two leftovers from dequeuing Woo's sheets. The coupon field sits outside a
   `.form-row`, so every input rule written so far missed it and it rendered as
   a bare white box — glaring in dark mode. And `woocommerce-smallscreen` is
   dequeued too, so the cart table kept its six desktop columns on a phone and
   simply ran off the side of the screen. The markup carries `data-title` on
   every cell, so the stacked layout can be rebuilt from that.
   =========================================================================== */

/* Catch every Woo control, not just the ones inside a form-row. */
.woocommerce input.input-text,.woocommerce textarea,.woocommerce select,
.woocommerce-page input.input-text,.woocommerce-page textarea{
  font-family:inherit;padding:13px 14px;border:1px solid #e2d5d9;border-radius:12px;
  background:#fff;color:var(--ink)}
.woocommerce input.input-text::placeholder,.woocommerce textarea::placeholder{color:#b3a0a8}
.woocommerce input.input-text:focus,.woocommerce textarea:focus,.woocommerce select:focus{
  outline:2px solid var(--berry2);outline-offset:1px;border-color:transparent}
/* browser default button chrome — the pills were carrying a stray border */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.checkout-button,.woocommerce-button{border:0}

:root[data-theme="dark"] .woocommerce input.input-text,
:root[data-theme="dark"] .woocommerce textarea,
:root[data-theme="dark"] .woocommerce select,
:root[data-theme="dark"] .woocommerce-page input.input-text,
:root[data-theme="dark"] .woocommerce-page textarea,
:root[data-theme="dark"] .select2-selection{background:var(--card);border-color:var(--line);
  color:var(--ink)}
:root[data-theme="dark"] .woocommerce input.input-text::placeholder,
:root[data-theme="dark"] .woocommerce textarea::placeholder{color:#8c757e}

/* --- cart table stacks on a phone (rebuilds woocommerce-smallscreen) ----- */
@media(max-width:700px){
  .woocommerce-cart table.shop_table_responsive,
  .woocommerce-cart table.shop_table_responsive tbody{display:block;width:100%}
  .woocommerce-cart table.shop_table_responsive thead{display:none}
  .woocommerce-cart table.shop_table_responsive tbody tr{display:block;position:relative;
    padding:16px 34px 16px 0;border-bottom:1px solid #f0e6ea}
  .woocommerce-cart table.shop_table_responsive tbody tr:last-child{border-bottom:0}
  .woocommerce-cart table.shop_table_responsive tbody td{display:flex;align-items:center;
    justify-content:space-between;gap:14px;width:auto;padding:6px 0;border:0;text-align:right}
  .woocommerce-cart table.shop_table_responsive tbody td::before{content:attr(data-title);
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
    text-align:left;flex:none}
  /* the cells that should not carry a label */
  .woocommerce-cart table.shop_table_responsive td.product-remove{position:absolute;top:14px;
    right:0;width:auto;padding:0}
  .woocommerce-cart table.shop_table_responsive td.product-thumbnail{justify-content:flex-start}
  .woocommerce-cart table.shop_table_responsive td.product-remove::before,
  .woocommerce-cart table.shop_table_responsive td.product-thumbnail::before,
  .woocommerce-cart table.shop_table_responsive td.actions::before{content:none}
  .woocommerce-cart table.shop_table_responsive td.product-name{justify-content:space-between}
  .woocommerce-cart table.shop_table_responsive td.actions{display:block;padding:18px 0 0}
  .woocommerce-cart table.shop_table_responsive td.product-thumbnail img{width:56px}
  .woocommerce-cart .cart_totals{max-width:none}
}
:root[data-theme="dark"] .woocommerce-cart table.shop_table_responsive tbody tr{
  border-bottom-color:var(--line)}