:root{
  /* Monochrome — the absence of marketing colour IS the trust signal.
     No persuasion via hue. The facts do the work.
     Grey is structural only; black carries all emphasis. */
  --black:#000000;
  --ink:#111111;         /* body / headlines */
  --ink-soft:#6B6B6B;    /* secondary text */
  --grey-100:#F7F7F7;    /* subtle fill */
  --grey-200:#EFEFEF;    /* alt fill */
  --line:#E0E0E0;        /* hairline */
  --line-strong:#111111;
  --white:#FFFFFF;
  --paper:#FFFFFF;
  --cream:#FFFFFF;
  --muted:#6B6B6B;
  /* Brand palette, sampled directly from the FoxKies logo. */
  --fox:#FB9630;         /* fox fur — the bright orange */
  --fox-deep:#D15E06;    /* the "Kies" wordmark orange */
  --fox-bright:#FF9F45;  /* lifted, so hover stays legible on the dark footer */
  --fox-brown:#532303;   /* the "Fox" wordmark brown */
  --fox-cream:#FDF3E3;   /* logo background */
  --fox-green:#6E701A;   /* "Healthy Cookies" banner */

  /* legacy aliases -> all resolve to monochrome */
  --blue:#111111; --blue-dark:#000000; --blue-soft:#F7F7F7; --blue-mid:#6B6B6B;
  --verify:#111111; --verify-soft:#F7F7F7;
  --forest:#111111; --sage:#6B6B6B; --amber:#111111; --terracotta:#111111;
  --gold:#111111; --orange:#111111; --green:#111111; --pink:#111111; --purple:#111111;
  --radius:2px;          /* near-square: clinical, not friendly */
  --shadow:none;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.logo{font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:-0.03em;line-height:1.05}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
img{max-width:100%;display:block}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--white);
  border-bottom:1px solid var(--line)}
/* The logo is now a WIDE 3:1 lockup, not a circular badge, so it no longer needs
   to overhang: it fits inside a slim bar naturally. */
.header-inner{display:flex;align-items:center;height:78px;gap:16px}
/* Logo and the button cluster take equal width, so the nav sits dead centre
   of the header and doesn't drift when the cart count or logo width changes. */
.logo{flex:1 1 0;min-width:0}
.header-actions{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:10px;
  align-self:center}
.logo{color:var(--ink);display:flex;align-items:center}
.main-nav{display:flex;justify-content:center;gap:26px;font-weight:500;font-size:.95rem;
  flex:0 0 auto;white-space:nowrap}
.main-nav a{transition:color .2s}
.main-nav a:hover{color:var(--blue)}
.cart-btn:hover{background:#333}
.cart-ico{flex-shrink:0;display:block}
.header-inner{gap:10px}
/* Height is PINNED, not derived from padding — otherwise it never matches the
   account button and the two icons sit at different heights. */
.cart-btn{background:var(--black);color:#fff;height:38px;padding:0 14px;border-radius:3px;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:.85rem;line-height:1;flex-shrink:0;transition:background .15s}
.cart-count{background:#fff;color:var(--black);border-radius:999px;min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;font-size:.72rem;font-weight:800;line-height:1}

/* Buttons */
.btn{display:inline-block;border:none;cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:600;padding:15px 30px;border-radius:2px;font-size:.92rem;letter-spacing:.02em;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--black);color:#fff}
.btn-primary:hover{background:#333}
.btn-green{background:var(--black);color:#fff}
.btn-green:hover{background:#333}
.btn-outline{background:transparent;border:1px solid var(--black);color:var(--black)}
.btn-outline:hover{background:var(--black);color:#fff}
.btn-block{display:block;width:100%;text-align:center}
.btn-sm{padding:10px 18px;font-size:.88rem}

/* Hero */
.hero{background:var(--white);padding:80px 0 84px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:4rem;line-height:1.02;margin-bottom:22px;font-weight:800;letter-spacing:-0.045em}
.hero h1 span{color:var(--blue);font-style:normal}
.hero p{font-size:1.15rem;color:var(--ink-soft);margin-bottom:30px;max-width:480px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-badges{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap}
.hero-badge{background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  font-weight:500;font-size:.84rem;color:var(--ink-soft)}
.hero-art{font-size:12rem;text-align:center}

/* Hero slider */
.hero-slider{position:relative;width:100%;aspect-ratio:1/1;max-width:440px;margin:0 auto;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.hero-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;opacity:0;transition:opacity .8s ease;pointer-events:none}
.hero-slide.active{opacity:1;pointer-events:auto}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-slide-emoji{font-size:8rem;filter:drop-shadow(0 12px 20px rgba(0,0,0,.15))}
.hero-slide-label{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  background:rgba(43,33,24,.82);color:#fff;padding:8px 18px;border-radius:999px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:1rem;white-space:nowrap}
.hero-dots{position:absolute;bottom:0;left:0;right:0;display:flex;gap:8px;justify-content:center;padding:0;z-index:3;bottom:auto;top:16px}
.hero-dot{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.6);cursor:pointer;padding:0;transition:background .2s,transform .2s}
.hero-dot.active{background:#fff;transform:scale(1.3)}

/* Sections */
.section{padding:80px 0;border-bottom:1px solid var(--line)}
.section-head{text-align:center;margin-bottom:44px}
.section-head h2{font-size:2.9rem;margin-bottom:12px;font-weight:800;letter-spacing:-0.04em}
.section-head p{color:var(--ink-soft);font-size:1.08rem}
.eyebrow{display:inline-block;background:transparent;color:var(--ink);border:none;padding:0;font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}

/* Product grid */
.grid{display:grid;gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:2px;overflow:hidden;transition:border-color .18s;display:flex;flex-direction:column}
.card:hover{border-color:var(--black)}
.card-top{height:180px;display:flex;align-items:center;justify-content:center;font-size:4.5rem;padding:10px;overflow:hidden}
.card-top img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;display:block}
.card-top-wide{aspect-ratio:16/9;height:auto;padding:0}
.card-top-wide img{width:100%;height:100%;max-height:none;max-width:none;object-fit:cover}
.pdp-image{display:flex;align-items:center;justify-content:center;padding:20px;min-height:320px}
.pdp-image img{max-width:100%;max-height:520px;width:auto;height:auto;object-fit:contain;display:block;border-radius:12px}
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;margin:0 0 16px;border-radius:12px;overflow:hidden;background:#000}
.video-wrap iframe,.video-wrap video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- Product detail page ---- */
.pdp-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.pdp-media{position:sticky;top:90px}
.pdp-thumbs{display:flex;gap:8px;padding:14px;flex-wrap:wrap}
.pdp-thumbs img{width:70px;height:70px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid #eee;transition:border-color .2s}
.pdp-thumbs img:hover{border-color:var(--orange)}
.pdp-title{font-size:2.2rem;line-height:1.1;margin:10px 0 12px}
.pdp-sub{font-size:1.1rem;color:var(--muted);margin-bottom:18px}
.pdp-price-row{margin-bottom:18px}
.pdp-toggle{max-width:340px;margin-bottom:12px}
.pdp-cta{margin-top:6px;font-size:1.1rem;padding:15px}
.pdp-trust{text-align:center;font-size:.85rem;color:var(--muted);margin-top:12px}
.pdp-description{background:#fff;border:1px solid var(--line);border-radius:10px;padding:32px;margin-top:36px;max-width:820px}
.pdp-description h2{font-size:1.4rem;margin-bottom:14px}
.pdp-description p{color:#444444;line-height:1.7}
.ingredients-box{margin-top:22px;padding:22px;background:var(--white);border:1px solid var(--line);border-top:2px solid var(--black);border-radius:0}
.ingredients-box h3{font-size:1.05rem;margin-bottom:8px}
.ingredients-box p{font-size:.95rem;color:#555555;margin:0}
.ingredients-note{margin-top:8px !important;font-size:.82rem !important;color:#888888 !important}
.pdp-sticky{display:none}

.card-body{padding:22px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.3rem;margin-bottom:6px}
.card .desc{color:var(--muted);font-size:.95rem;margin-bottom:12px;flex:1}
.badge{position:absolute;top:12px;left:12px;background:var(--black);color:#fff;padding:5px 10px;border-radius:2px;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;z-index:2}
.price{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.price .now{font-family:'Montserrat',sans-serif;font-size:1.6rem;font-weight:700}
.price .was{color:var(--muted);text-decoration:line-through;font-size:1rem}
.combo-items{list-style:none;font-size:.88rem;color:var(--muted);margin-bottom:14px}
.combo-items li:before{content:"✓ ";color:var(--green);font-weight:800}
.card-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto}

/* Purchase toggle */
.buy-toggle{display:flex;background:#F2F2F2;border-radius:999px;padding:4px;margin-bottom:12px}
.buy-toggle button{flex:1;border:none;background:transparent;padding:8px;border-radius:999px;
  font-weight:800;cursor:pointer;font-size:.85rem;color:var(--muted)}
.buy-toggle button.active{background:#fff;color:var(--ink);border:1px solid var(--line)}
.sub-note{background:var(--grey-100);color:var(--ink);font-size:.8rem;font-weight:700;
  padding:6px 10px;border-radius:10px;margin-bottom:10px;text-align:center}

/* Subscribe banner */
.sub-banner{background:var(--black);color:#fff;border-radius:20px;
  padding:48px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.sub-banner h2{font-size:2.3rem;color:#fff;margin-bottom:10px}
.sub-banner p{opacity:.95;font-size:1.1rem}
.sub-perk{display:flex;gap:24px;margin-top:20px;flex-wrap:wrap}
.sub-perk div{font-weight:800}
.sub-perk span{display:block;font-size:2rem;font-family:'Montserrat',sans-serif}

/* Footer */
.site-footer{background:var(--ink);color:#EDEDED;margin-top:0;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;padding:52px 20px 36px}
.footer-logo{color:#fff;margin-bottom:14px}
.footer-tag{color:#9A9A9A;max-width:300px;margin-bottom:14px}
.footer-contact{color:#C4C4C4;font-size:.92rem}
.footer-col h4{color:#fff;margin-bottom:14px;font-size:1.05rem}
.footer-col a{display:block;color:#B0B0B0;margin-bottom:9px;transition:color .2s}
/* Was var(--orange), which the monochrome theme aliases to #111 — i.e. black
   text on the black footer. Unreadable. Use the fox accent instead. */
.footer-col a:hover{color:var(--fox-bright)}
.footer-bottom{border-top:1px solid #333333;padding:18px 0;text-align:center;color:#888888;font-size:.88rem}
/* Catch-all: ANY link on the dark footer hovers to fox orange. Without this a
   new link inherits the global black hover and vanishes against the background. */
.site-footer a:hover{color:var(--fox-bright)}
.footer-bottom a{color:#B0B0B0}
.footer-contact a{color:#C4C4C4}

/* Cart / checkout */
.cart-table{width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cart-row{display:grid;grid-template-columns:76px minmax(0,1fr) auto 110px 36px;gap:18px;align-items:center;padding:18px 22px;border-bottom:1px solid #F0F0F0}
.cart-row .ci-emoji{font-size:2rem;width:76px;height:76px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:4px;background:var(--grey-100)}
.ci-info{min-width:0}
.ci-info strong{display:block;font-size:.95rem;font-weight:700;line-height:1.35;margin-bottom:4px}
.ci-meta{font-size:.82rem;color:var(--ink-soft);line-height:1.45}
.ci-price{text-align:right;font-weight:800;font-size:1.05rem;letter-spacing:-0.02em;white-space:nowrap}
.ci-remove{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;cursor:pointer;color:var(--ink-soft);border-radius:4px;transition:color .15s,background .15s}
.ci-remove:hover{color:#c0392b;background:var(--grey-100)}
.cart-summary{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px}
.sum-line{display:flex;justify-content:space-between;margin-bottom:12px}
.sum-total{font-size:1.4rem;font-weight:800;font-family:'Montserrat',sans-serif;border-top:2px solid #eee;padding-top:14px}
.qty-ctrl{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.qty-ctrl button:hover{background:var(--grey-100)}
.qty-ctrl span{min-width:34px;text-align:center;font-weight:700;font-size:.9rem;border-left:1px solid var(--line);border-right:1px solid var(--line);line-height:32px}
.qty-ctrl button{width:32px;height:32px;border:none;background:var(--white);cursor:pointer;font-weight:700;font-size:1rem;color:var(--ink);line-height:1;transition:background .15s}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;margin-bottom:6px;font-size:.9rem}
.field input,.field textarea{width:100%;padding:12px;border:2px solid #E0E0E0;border-radius:12px;font-family:inherit;font-size:1rem}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--orange)}

/* Policy pages */
.policy{background:#fff;border:1px solid var(--line);border-radius:10px;padding:40px;max-width:820px;margin:40px auto}
.policy h1{font-size:2.2rem;margin-bottom:8px}
.policy .updated{color:var(--muted);margin-bottom:24px}
.policy h2{font-size:1.3rem;margin:24px 0 10px}
.policy p,.policy li{color:#444444;margin-bottom:10px}
.policy ul{padding-left:22px}

/* Exit modal */
.exit-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;
  align-items:center;justify-content:center;padding:20px}
.exit-box{background:#fff;border-radius:24px;padding:40px;max-width:420px;text-align:center;position:relative}
.exit-emoji{font-size:3.5rem;margin-bottom:10px}
.exit-box h3{font-size:1.5rem;margin-bottom:8px}
.exit-box p{color:var(--muted);margin-bottom:18px}
.exit-box input{width:100%;padding:12px;border:2px solid #E0E0E0;border-radius:12px;margin-bottom:14px;font-size:1rem}
.exit-close{position:absolute;top:14px;right:18px;background:none;border:none;font-size:1.6rem;cursor:pointer;color:#aaa}

.notice{background:var(--grey-100);border-left:2px solid var(--black);padding:14px 18px;border-radius:0;margin:20px 0}

/* ============ MOBILE BOTTOM NAV ============ */
.mobile-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--white);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0))}
.mnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;color:var(--muted);font-size:.68rem;font-weight:600;min-width:0}
.mnav-item.active{color:var(--black)}
.mnav-icon{font-size:1.35rem;line-height:1;position:relative;display:flex;align-items:center;justify-content:center;height:22px}
.mnav-icon svg{display:block}
.mnav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mnav-badge{position:absolute;top:-6px;right:-10px;background:var(--black);color:#fff;border-radius:999px;font-size:.6rem;font-weight:700;min-width:15px;height:15px;display:flex;align-items:center;justify-content:center;padding:0 3px}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
  .wrap{padding:0 18px}
  .hero h1{font-size:2.8rem}
  .section-head h2{font-size:2.9rem;margin-bottom:12px;font-weight:800;letter-spacing:-0.04em}
}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero p{margin-left:auto;margin-right:auto}
  .hero-cta,.hero-badges{justify-content:center}
  .hero h1{font-size:2.4rem}
  .hero-slider{position:relative;width:100%;aspect-ratio:1/1;max-width:440px;margin:0 auto;border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .sub-banner{grid-template-columns:1fr;text-align:center;gap:20px}
  .main-nav{display:none}
  .mobile-nav{display:flex}
  main{padding-bottom:70px}   /* room for the fixed mobile nav */
  .cart-row{grid-template-columns:60px minmax(0,1fr) auto;grid-template-areas:'img info remove' 'img qty price';gap:8px 14px;padding:16px}
  .cart-row .ci-thumb,.cart-row .ci-emoji{grid-area:img;width:60px;height:60px;align-self:start}
  .ci-info{grid-area:info}
  .qty-ctrl{grid-area:qty;justify-self:start}
  .ci-price{grid-area:price;text-align:right;align-self:center}
  .ci-remove{grid-area:remove;justify-self:end}

  /* Product detail: single column */
  .pdp-layout{grid-template-columns:1fr;gap:24px}
  .pdp-media{position:static}
  .pdp-image{min-height:0;padding:16px}
  .pdp-image img{max-height:360px}
  .pdp-title{font-size:1.7rem}
  .pdp-sub{font-size:1rem}
  .pdp-toggle{max-width:100%}
  .pdp-description{padding:22px;margin-top:24px}
  /* Do NOT hide the inline Add to Cart on mobile. The sticky bar can be
     obscured by the bottom nav or an on-screen keyboard, which left the page
     with no visible buy button at all. Keep both. */
  .pdp-cta{display:block}

  /* Sticky add-to-cart bar sits ABOVE the mobile nav */
  .pdp-sticky{display:flex;position:fixed;left:0;right:0;bottom:64px;z-index:65;
    background:var(--paper);border-top:1px solid var(--line);box-shadow:none;
    padding:12px 16px;gap:12px;align-items:center}
  .pdp-sticky-price{font-family:'Montserrat',sans-serif;font-size:1.5rem;font-weight:700}
  .pdp-sticky .btn{display:inline-block;border:none;cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:600;padding:15px 30px;border-radius:2px;font-size:.92rem;letter-spacing:.02em;transition:background .15s,color .15s,border-color .15s}
  main{padding-bottom:150px}   /* room for sticky bar + mobile nav on PDP */
}

@media(max-width:620px){
  .section{padding:52px 0}
  .grid-3{grid-template-columns:1fr}
  .hero{padding:52px 0 64px}
  .hero h1{font-size:2rem}
  .hero p{font-size:1.05rem}
  .hero-badge{font-size:.8rem;padding:8px 12px}
  .section-head h2{font-size:1.9rem}
  .footer-grid{grid-template-columns:1fr}
  .logo{font-size:1.4rem}
  .comm-hero h1{font-size:1.9rem}
  .comm-stats{gap:12px}
  .comm-stats div{padding:12px 16px;font-size:.85rem}
}


/* ---- Community / Affiliate page ---- */
.comm-hero{background:var(--grey-100);padding:76px 0 66px;text-align:center;border-bottom:1px solid var(--line)}
.comm-hero h1{font-size:3rem;line-height:1.05;margin:10px 0 14px;max-width:820px;margin-left:auto;margin-right:auto}
.comm-lead{font-size:1.2rem;color:#555555;max-width:680px;margin:0 auto 26px}
.comm-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.comm-stats{display:flex;gap:30px;justify-content:center;flex-wrap:wrap}
.comm-stats div{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:14px 22px;font-weight:600}
.comm-stats span{display:block;font-size:1.5rem;font-weight:800;color:var(--ink);letter-spacing:-0.02em}
.comm-card{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:30px}
.comm-icon{font-size:2.6rem;margin-bottom:10px}
.comm-card h3{font-size:1.4rem;margin-bottom:10px}
.comm-card p{color:var(--muted);margin-bottom:14px}
.comm-list{list-style:none;padding:0}
.comm-list li{padding:5px 0 5px 26px;position:relative;color:#444444}
.comm-list li:before{
  content:'';position:absolute;left:0;top:8px;width:15px;height:15px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23FB9630' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.comm-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.comm-step{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:24px 20px;position:relative}
.comm-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--black);color:#fff;font-weight:700;font-size:.95rem;margin-bottom:12px}
.comm-step h4{font-size:1.1rem;margin-bottom:8px}
.comm-step p{color:var(--muted);font-size:.95rem}
.comm-ol{padding-left:20px;margin:10px 0}
.comm-ol li{margin-bottom:12px;color:#444444;line-height:1.6}
.comm-tip{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:22px}
.comm-tip h4{font-size:1.1rem;margin-bottom:8px}
.comm-tip p{color:#555555;font-size:.95rem}
.comm-kit{background:var(--black);border-radius:14px;padding:44px;color:#fff}
.comm-kit h2{color:#fff;font-size:2.1rem;margin-bottom:12px}
.comm-kit p{opacity:.96;margin-bottom:16px}
.comm-kit .comm-list li{color:#fff}
/* On the dark Starter Kit card, the tick must be white to stay visible. */
.comm-kit .comm-list li:before{
  content:'';position:absolute;left:0;top:8px;width:15px;height:15px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.comm-kit-price{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.comm-kit-price .now{font-family:'Montserrat',sans-serif;font-size:2.2rem;font-weight:700}
.comm-kit-price .was{opacity:.75;text-decoration:line-through;font-size:1.2rem}
.comm-kit .btn-primary{background:var(--black);color:#fff}
@media(max-width:900px){
  .comm-hero h1{font-size:2.2rem}
  .comm-steps{grid-template-columns:1fr 1fr}
  .comm-kit{padding:28px}
}
@media(max-width:560px){
  .comm-steps{grid-template-columns:1fr}
}

/* ---- Audience stories ---- */
.stories-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.story{background:var(--white);border:1px solid var(--line);border-radius:2px;padding:28px 24px;border-top:2px solid var(--sc);display:flex;flex-direction:column;transition:border-color .18s}
.story:hover{border-color:var(--ink);border-top-color:var(--sc)}
.story-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.story-tag{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sc)}
.story-emoji{font-size:1.8rem}
.story h3{font-size:1.32rem;line-height:1.15;margin-bottom:10px;color:var(--ink);font-weight:800;letter-spacing:-0.02em}
.story p{color:var(--ink-soft);font-size:.94rem;flex:1;margin-bottom:16px}
.story-hash{font-weight:600;font-size:.9rem;color:var(--sc)}
.stories-note{text-align:left;color:var(--ink-soft);font-size:.88rem;margin:34px auto 0;max-width:760px;background:var(--white);border:1px solid var(--line);border-left:2px solid var(--black);border-radius:0;padding:18px 22px;line-height:1.6}
@media(max-width:900px){ .stories-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .stories-grid{grid-template-columns:1fr} }

/* ---- Cookie Advisor chat ---- */
.advisor{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:22px}
.advisor-log{display:flex;flex-direction:column;gap:12px;max-height:380px;overflow-y:auto;padding:6px 4px 14px}
.adv-msg{max-width:82%;padding:12px 16px;border-radius:16px;font-size:.96rem;line-height:1.5}
.adv-bot{align-self:flex-start;background:var(--grey-100);color:var(--ink);border-bottom-left-radius:2px}
.adv-user{align-self:flex-end;background:var(--black);color:#fff;border-bottom-right-radius:2px}
.adv-typing{opacity:.6;font-style:italic}
.advisor-quick{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.advisor-quick button{background:transparent;border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:8px 14px;font-size:.86rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:'Montserrat',sans-serif}
.advisor-quick button:hover{border-color:var(--forest);color:var(--forest)}
.advisor-input{display:flex;gap:10px;margin-top:6px}
.advisor-input input{flex:1;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;font-family:'Montserrat',sans-serif;font-size:.96rem}
.advisor-input input:focus{outline:none;border-color:var(--forest)}
.advisor-note{font-size:.76rem;color:var(--muted);margin-top:10px;text-align:center}
@media(max-width:620px){ .adv-msg{max-width:88%} }

/* ---- Floating Cookie Advisor ---- */
.adv-launcher{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;align-items:center;gap:9px;background:var(--black);color:#fff;border:none;cursor:pointer;padding:14px 20px;border-radius:2px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:.9rem;transition:background .15s}
.adv-launcher:hover{background:#333}
.adv-launcher-icon{font-size:1.3rem;line-height:1}
.adv-launcher.hidden{display:none}
.adv-popup{position:fixed;right:22px;bottom:22px;z-index:81;width:380px;max-width:calc(100vw - 32px);background:var(--white);border:1px solid var(--ink);border-radius:12px;display:none;flex-direction:column;overflow:hidden}
.adv-popup.open{display:flex}
@keyframes advIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.adv-popup-head{display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:#fff;padding:14px 18px}
.adv-popup-title{font-family:'Montserrat',sans-serif;font-weight:600;font-size:1.1rem;display:flex;align-items:center;gap:8px}
.adv-popup-close{background:none;border:none;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;opacity:.85}
.adv-popup-close:hover{opacity:1}
.adv-popup .advisor-log{max-height:340px;padding:16px 16px 8px}
.adv-popup .advisor-quick{padding:0 16px}
.adv-popup .advisor-input{padding:8px 16px 4px}
.adv-popup .advisor-note{padding:0 16px 14px;margin-top:6px}
/* TABLET (621px–900px): mobile bottom nav is visible here too, so lift the
   launcher clear of it and shrink it so it never sits on top of the nav. */
@media(max-width:900px) and (min-width:621px){
  .adv-launcher{bottom:84px;right:16px;padding:11px 16px;font-size:.85rem}
  .adv-launcher-icon{font-size:1.1rem}
  .adv-popup{bottom:84px;right:16px;width:340px}
}

/* MOBILE (<=620px): the bottom nav already has a MiSu entry, so remove the
   floating launcher entirely — it was overlapping the nav. The popup still
   opens from the mobile nav "MiSu" tab via window.openFoxAdvisor(). */
@media(max-width:620px){
  .adv-launcher{display:none !important}
  .adv-popup{position:fixed;left:8px;right:8px;bottom:74px;width:auto;max-width:none;
    z-index:81;background:var(--white);border:1px solid var(--ink);border-radius:12px;
    display:none;flex-direction:column;overflow:hidden}
  .adv-popup.open{display:flex}
}

/* ---- Functional line cards ---- */
.fn-card{position:relative}
.fn-card.fn-soon{background:var(--grey-100)}
.fn-badge{position:absolute;top:14px;right:14px;background:var(--sc);color:#fff;
  padding:3px 10px;border-radius:999px;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.fn-benefits{list-style:none;padding:0;margin:0 0 16px}
.fn-benefits li{padding:3px 0 3px 20px;position:relative;font-size:.86rem;color:var(--muted)}
.fn-benefits li:before{content:"•";position:absolute;left:4px;color:var(--sc);font-weight:800}
.fn-cta{margin-bottom:12px;align-self:flex-start}
#waitlistModal .exit-box input{margin-bottom:10px}
.pdp-tagline{font-family:'Montserrat',sans-serif;font-size:1.25rem;font-style:italic;color:var(--amber);margin-bottom:14px}
.wl-inline{display:flex;gap:10px;flex-wrap:wrap}
.wl-inline input{flex:1;min-width:200px;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;font-family:'Montserrat',sans-serif;font-size:.96rem}
.wl-inline input:focus{outline:none;border-color:var(--forest)}

/* ---- Trust bar ---- */
.trustbar{background:var(--grey-100);border-bottom:1px solid var(--line);padding:26px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.trust-item{display:flex;gap:11px;align-items:flex-start}
.trust-icon{flex-shrink:0;width:19px;height:19px;border-radius:50%;background:var(--black);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;margin-top:2px}
.trust-item strong{display:block;font-size:.88rem;font-weight:700;color:var(--ink);margin-bottom:2px;letter-spacing:-0.01em}
.trust-item span:not(.trust-icon){display:block;font-size:.8rem;color:var(--ink-soft);line-height:1.45}
@media(max-width:900px){ .trust-grid{grid-template-columns:1fr 1fr;gap:18px} }
@media(max-width:560px){ .trust-grid{grid-template-columns:1fr;gap:14px} .trustbar{background:var(--grey-100);border-bottom:1px solid var(--line);padding:26px 0} }

/* Verification green: reserved for safety/proof signals only */

.fn-benefits li:before{color:var(--verify)}
.sub-note{background:var(--grey-100);color:var(--ink);align-items:center;gap:9px;font-size:1.05rem;margin-bottom:10px;font-weight:800;letter-spacing:-0.01em}
.ingredients-note{margin-top:10px;font-size:.82rem;color:var(--ink-soft);line-height:1.55}

/* Monochrome discipline: line codes replace emoji. The spec is the identity. */
.story-emoji{font-size:.8rem;font-weight:700;letter-spacing:.1em;color:var(--sc);
  border:1px solid var(--sc);border-radius:2px;padding:2px 7px;line-height:1.4}
.hero-slide-emoji{display:none}
.hero-slide-label{font-weight:700;font-size:1rem;letter-spacing:-0.01em;color:var(--ink);
  background:transparent;padding:0;text-align:center;max-width:80%}

/* 4-up grid for the core range + refills */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1000px){ .grid-4{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .grid-4{grid-template-columns:1fr} }

/* Coming-soon product cards: recede, no price */
.card.is-soon{background:var(--grey-100)}
.card.is-soon .card-media{opacity:.5}
.card.is-soon .price{display:none}

/* Auto-flow product grid: adapts to any number of products (4, 5, 6...) */
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
@media(max-width:560px){ .grid-auto{grid-template-columns:1fr} }

/* Checkout summary: discount + tax lines */
.sum-discount{color:#1a7a44;font-weight:600}
.sum-sub{border-top:1px solid var(--line);margin-top:4px;padding-top:8px}
.sum-tax{color:var(--ink-soft);font-size:.86rem}
.tax-note{font-size:.75rem;color:var(--ink-soft);margin:6px 0 2px;line-height:1.4}
.saved-badge{margin-top:10px;background:var(--black);color:#fff;padding:9px 12px;
  font-size:.82rem;font-weight:700;text-align:center;border-radius:2px}
.hide{display:none}

/* Cart line item thumbnail */
.ci-thumb{display:block;width:76px;height:76px;flex-shrink:0;border:1px solid var(--line);
  border-radius:4px;overflow:hidden;background:var(--grey-100)}
.ci-thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:560px){ .ci-thumb{width:60px;height:60px} }

/* ================= Customer auth + dashboard ================= */
.auth-card{max-width:440px;margin:0 auto;background:var(--white);border:1px solid var(--line);
  border-radius:4px;padding:34px}
.tabs{display:flex;gap:0;margin-bottom:20px;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.tab{flex:1;padding:11px;background:var(--white);border:none;cursor:pointer;font-family:'Montserrat',sans-serif;
  font-weight:600;font-size:.88rem;color:var(--ink-soft);transition:background .15s,color .15s}
.tab.on{background:var(--black);color:#fff}
.phone-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.phone-input span{padding:12px 12px;background:var(--grey-100);font-weight:700;font-size:.9rem;
  border-right:1px solid var(--line)}
.phone-input input{border:none;flex:1;padding:12px;font-family:'Montserrat',sans-serif}
.phone-input input:focus{outline:none}
.otp-input{width:100%;padding:16px;font-size:1.6rem;letter-spacing:.5em;text-align:center;font-weight:700;
  border:1px solid var(--line);border-radius:3px;font-family:'Montserrat',sans-serif}
.otp-input:focus{outline:none;border-color:var(--black)}
.alert{padding:12px 15px;border-radius:3px;font-size:.88rem;margin-bottom:16px;border:1px solid}
.alert.ok{background:var(--grey-100);border-color:var(--line);color:var(--ink)}
.alert.err{background:#fff;border-color:#c0392b;color:#c0392b}
.fine{font-size:.78rem;color:var(--ink-soft);margin-top:16px;text-align:center;line-height:1.5}
.fine a{text-decoration:underline}

.acct-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}
.acct-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.acct-stats div{border:1px solid var(--line);border-radius:4px;padding:16px;text-align:center;
  font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.acct-stats span{display:block;font-size:1.6rem;font-weight:800;color:var(--ink);letter-spacing:-0.02em;
  text-transform:none;margin-bottom:2px}
.acct-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto}
.acct-tabs a{padding:12px 18px;font-weight:600;font-size:.9rem;color:var(--ink-soft);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.acct-tabs a.on{color:var(--ink);border-bottom-color:var(--black)}

.ord{border:1px solid var(--line);border-radius:4px;padding:20px;margin-bottom:16px;background:var(--white)}
.ord-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.ord-date{color:var(--ink-soft);font-size:.84rem;margin-left:10px}
.ord-total{font-weight:800;font-size:1.15rem;letter-spacing:-0.02em}
.ord-lines{margin:14px 0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ord-line{display:flex;justify-content:space-between;font-size:.88rem;padding:4px 0;color:var(--ink-soft)}
.ord-actions{display:flex;gap:8px;flex-wrap:wrap}
.sub-bar{height:5px;background:var(--grey-200);border-radius:99px;overflow:hidden;margin-top:12px}
.sub-bar span{display:block;height:100%;background:var(--black)}

.acct-table{width:100%;border-collapse:collapse;margin-top:18px}
.acct-table th{background:var(--black);color:#fff;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  padding:10px;text-align:left}
.acct-table td{padding:12px 10px;border-bottom:1px solid var(--line);font-size:.88rem}

.thread{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.tmsg{padding:12px 14px;border-radius:4px;font-size:.89rem;max-width:88%}
.tmsg.from-me{align-self:flex-end;background:var(--black);color:#fff}
.tmsg.from-support{align-self:flex-start;background:var(--grey-100);border:1px solid var(--line)}
.tmsg-who{font-size:.72rem;font-weight:700;opacity:.75;margin-bottom:4px;text-transform:uppercase;letter-spacing:.06em}
.tmsg-who small{font-weight:500;letter-spacing:0;text-transform:none;margin-left:6px}

.stars{display:flex;gap:4px}
.stars button{background:none;border:none;cursor:pointer;font-size:1.9rem;line-height:1;color:var(--line);padding:0}
.stars button.on{color:var(--black)}
.empty{text-align:center;padding:50px 20px;border:1px dashed var(--line);border-radius:4px;color:var(--ink-soft)}

.pill.open,.pill.pending{background:var(--black);color:#fff}
.pill.resolved,.pill.paid,.pill.active{background:var(--grey-200);color:var(--ink)}
.pill.closed{background:var(--grey-100);color:var(--ink-soft)}
.pill.in_progress{background:var(--ink-soft);color:#fff}

@media(max-width:760px){
  .acct-stats{grid-template-columns:1fr 1fr}
  .acct-head{flex-direction:column}
}

/* ================= CHAT-FIRST LANDING ================= */
.chat-land{min-height:calc(100vh - 74px);display:flex;flex-direction:column;
  justify-content:center;padding:30px 20px 20px;background:var(--white)}
.chat-inner{width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;flex:1;
  justify-content:center}

/* Once a conversation starts, the composer drops to the bottom (ChatGPT behaviour) */
.chat-land.started .chat-inner{justify-content:flex-start}
.chat-land.started{justify-content:flex-start;min-height:calc(100vh - 74px)}

.chat-intro{text-align:center;margin-bottom:30px}
.chat-mark{line-height:1;margin-bottom:16px;display:flex;justify-content:center}

/* ---- MiSu the fox ---- */
/* NB: this artwork's viewBox is 472x370, roughly 4x the previous one, so the
   transform origins and the eye-tracking clamp are scaled to match. */
.fox{width:132px;height:auto;display:block;transform-origin:236px 352px;
  animation:fox-in .6s cubic-bezier(.2,.9,.3,1.4) both}
/* The ears are part of the head path, so they can't twitch on their own —
   the whole head tilts instead, which suits this design better anyway. */
.fox-body{transform-origin:236px 352px;animation:fox-bob 3.6s ease-in-out .6s infinite}

/* Pupils + glints are moved by JS (cursor tracking); this smooths the motion. */
.pupil,.glint{transition:cx .13s ease-out, cy .13s ease-out}

/* Both eyes blink. The lid is the same cream as the face, so it reads as the
   eye closing rather than a disc appearing. Offset a touch — a perfectly
   synchronised blink looks mechanical. */
.lid{transform-origin:center;transform-box:fill-box;transform:scaleY(0);
  animation:fox-blink 4.8s ease-in-out 2s infinite}
.lid-r{animation-delay:2.03s}

/* Both halves of the smile draw in together. */
.fox-smile{stroke-dasharray:46;stroke-dashoffset:46;
  animation:fox-grin .6s ease-out .5s forwards}
.blush{opacity:0;animation:fox-blush .5s ease-out .9s forwards}

@keyframes fox-in{
  0%  {opacity:0; transform:translateY(10px) scale(.86)}
  100%{opacity:1; transform:translateY(0)   scale(1)}
}
@keyframes fox-bob{
  0%,100%{transform:translateY(0)     rotate(0deg)}
  25%    {transform:translateY(-10px) rotate(-1.6deg)}
  75%    {transform:translateY(-6px)  rotate(1.6deg)}
}
@keyframes fox-blink{
  0%,94%,100%{transform:scaleY(0)}
  96%,97.5%  {transform:scaleY(1)}
}
@keyframes fox-grin{ to{stroke-dashoffset:0} }
@keyframes fox-blush{ to{opacity:1} }

/* Motion can trigger nausea and migraines — honour the OS setting.
   The smile and blush stay; only the movement stops. */
@media (prefers-reduced-motion: reduce){
  .fox,.fox-body,.lid{animation:none}
  .lid{transform:scaleY(0)}
  .pupil,.glint{transition:none}
  .fox-smile{animation:none;stroke-dashoffset:0}
  .blush{animation:none;opacity:1}
}
.chat-intro h1{font-size:2.5rem;font-weight:800;letter-spacing:-0.04em;margin-bottom:12px}
.chat-intro p{color:var(--ink-soft);font-size:1.02rem;max-width:480px;margin:0 auto}

/* Thread */
.chat-thread{display:flex;flex-direction:column;gap:18px;margin-bottom:20px}
.chat-land.started .chat-thread{flex:1;padding-top:10px}
.msg{max-width:88%;font-size:.97rem;line-height:1.6}
.msg.me{align-self:flex-end;background:var(--black);color:#fff;padding:12px 16px;border-radius:16px 16px 3px 16px}
.msg.bot{align-self:flex-start;color:var(--ink);padding:2px 0}

/* Typing dots */
.dots{display:inline-flex;gap:4px;padding:8px 0}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-soft);animation:blink 1.3s infinite}
.dots i:nth-child(2){animation-delay:.18s}
.dots i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* Composer */
.chat-dock{position:sticky;bottom:0;background:var(--white);padding-top:8px}
.composer{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--ink);
  border-radius:22px;padding:8px 8px 8px 18px;background:var(--white)}
.composer textarea{flex:1;min-width:0;border:none;resize:none;font-family:'Montserrat',sans-serif;
  font-size:.98rem;line-height:1.5;padding:8px 0;background:transparent;color:var(--ink);
  /* height must be pinned: rows="1" alone lets a long placeholder wrap and clip
     before the autosize JS ever runs. */
  height:38px;min-height:38px;max-height:170px;overflow-y:auto}
/* A placeholder must never wrap — it has no reflow and just gets cut off. */
.composer textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer textarea:focus{outline:none}
.composer textarea::placeholder{color:var(--ink-soft)}
.composer button{flex-shrink:0;width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:var(--black);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:opacity .15s}
.composer button:disabled{opacity:.35;cursor:default}

/* Suggested chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.chips button{background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-family:'Montserrat',sans-serif;font-weight:500;font-size:.86rem;
  color:var(--ink-soft);cursor:pointer;transition:border-color .15s,color .15s}
.chips button:hover{border-color:var(--ink);color:var(--ink)}
.chat-fine{text-align:center;font-size:.76rem;color:var(--ink-soft);margin-top:14px}
.chat-fine a{text-decoration:underline}

/* ---- Product cards INSIDE the chat ---- */
.chat-cards{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.cc{display:flex;gap:14px;border:1px solid var(--line);border-radius:8px;padding:12px;
  background:var(--white);transition:border-color .18s}
.cc:hover{border-color:var(--ink)}
.cc-media{flex-shrink:0;width:84px;height:84px;border-radius:5px;overflow:hidden;
  background:var(--grey-100);display:flex;align-items:center;justify-content:center}
.cc-media img{width:100%;height:100%;object-fit:cover}
.cc-ph{font-size:2rem}
.cc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cc-body strong{font-size:.95rem;font-weight:700;letter-spacing:-0.01em}
.cc-desc{font-size:.82rem;color:var(--ink-soft);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-price{font-size:1.05rem;font-weight:800;letter-spacing:-0.02em;margin-top:2px}
.cc-price s{font-size:.82rem;font-weight:500;color:var(--ink-soft);margin-left:6px}
.cc-sub{font-size:.74rem;color:var(--ink-soft)}
.cc-actions{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap}
.cc-actions .btn{padding:8px 14px;font-size:.8rem}

@media(max-width:620px){
  .chat-land{min-height:calc(100vh - 130px);padding:20px 14px 14px}
  .chat-intro h1{font-size:1.85rem}
  .chat-mark{font-size:2.4rem}
  .msg{max-width:94%}
  .chips{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .chips button{white-space:nowrap}
  .cc{flex-direction:row}
  .cc-media{width:66px;height:66px}
  .chat-dock{padding-bottom:8px}
}

/* ---- Cart reminder on the dashboard ---- */
.cart-remind{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border:1px solid var(--ink);border-radius:6px;padding:18px 20px;margin-bottom:22px;background:var(--white)}
.cr-body{flex:1;min-width:220px}
.cr-body strong{display:block;font-size:.98rem;margin-bottom:6px}
.cr-note{font-size:.86rem;color:var(--ink-soft);margin-bottom:8px}
.cr-items{display:flex;gap:7px;flex-wrap:wrap}
.cr-chip{display:inline-flex;align-items:center;gap:6px;background:var(--grey-100);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px 4px 4px;font-size:.79rem;color:var(--ink-soft)}
.cr-chip img{width:22px!important;height:22px!important;border-radius:50%;object-fit:cover;display:block;flex:0 0 22px;max-width:22px;max-height:22px}
/* Belt and braces: nothing inside the reminder may exceed its box. */
.cart-remind img{max-width:100%;height:auto}
.cr-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.cr-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cr-total{font-weight:800;font-size:1.15rem;letter-spacing:-0.02em;margin-right:4px}
@media(max-width:640px){
  .cart-remind{flex-direction:column;align-items:stretch}
  .cr-act{justify-content:space-between}
}

/* ---- Account button (header, visible at ALL widths) ----
   Deliberately outside .main-nav, which is display:none on mobile. */
.acct-btn{position:relative;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--ink);border-radius:3px;
  color:var(--ink);background:var(--white);flex-shrink:0;
  transition:background .15s,color .15s}
.acct-btn:hover{background:var(--ink);color:var(--white)}
.acct-btn svg{display:block}
/* Small marker so a signed-in customer can see they're signed in. */
.acct-dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;
  background:var(--ink);border:2px solid var(--white)}
.acct-btn:hover .acct-dot{background:var(--white);border-color:var(--ink)}

/* ---- PWA install prompt ---- */
.pwa-prompt{position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);
  width:min(420px,calc(100vw - 24px));background:var(--white);border:1px solid var(--ink);
  border-radius:8px;padding:18px 18px 16px;z-index:1400;
  box-shadow:0 14px 40px rgba(0,0,0,.20);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.pwa-prompt.in{transform:translate(-50%,0)}
.pwa-prompt[hidden]{display:none}
.pwa-x{position:absolute;top:9px;right:9px;width:28px;height:28px;border:none;background:none;
  cursor:pointer;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;
  border-radius:4px}
.pwa-x:hover{background:var(--grey-100);color:var(--ink)}
.pwa-row{display:flex;gap:13px;align-items:center;margin-bottom:14px}
.pwa-icon{width:52px;height:52px;border-radius:11px;flex:0 0 52px;display:block}
.pwa-copy strong{display:block;font-size:.96rem;line-height:1.3;margin-bottom:3px;padding-right:22px}
.pwa-copy p{font-size:.83rem;color:var(--ink-soft);line-height:1.4}
.pwa-actions{display:flex;gap:8px}
.pwa-actions .btn{flex:1}
.pwa-ios ol{list-style:none;margin:0 0 12px;padding:0}
.pwa-ios li{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--ink);
  padding:7px 0;line-height:1.4}
.pwa-step{flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--white);
  font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.pwa-share{vertical-align:middle;margin:0 1px}
.pwa-ios .btn{width:100%}
/* Sit above the mobile bottom nav rather than under it. */
@media(max-width:900px){ .pwa-prompt{bottom:76px} }

/* ---- Mobile drawer ---- */
.nav-burger{display:none;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--ink);border-radius:3px;background:var(--white);color:var(--ink);
  cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}
.nav-burger:hover{background:var(--ink);color:var(--white)}
.nav-burger svg{display:block}

.drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:1500;opacity:0;
  transition:opacity .26s}
.drawer-scrim.in{opacity:1}
.drawer-scrim[hidden]{display:none}

.drawer{position:fixed;top:0;right:0;bottom:0;width:min(300px,84vw);background:var(--white);
  border-left:1px solid var(--ink);z-index:1600;transform:translateX(100%);
  transition:transform .26s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;
  overflow-y:auto}
.drawer.in{transform:translateX(0)}
.drawer[hidden]{display:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer-brand{font-weight:800;font-size:1.02rem;letter-spacing:-0.02em}
.drawer-x{width:32px;height:32px;border:none;background:none;cursor:pointer;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;border-radius:4px}
.drawer-x:hover{background:var(--grey-100);color:var(--ink)}
.drawer-nav{display:flex;flex-direction:column;padding:8px 0}
.drawer-nav a{padding:14px 18px;font-size:.96rem;font-weight:500;color:var(--ink);
  border-bottom:1px solid #F4F4F4;transition:background .15s}
.drawer-nav a:hover{background:var(--grey-100)}
.drawer-nav hr{border:none;border-top:1px solid var(--line);margin:8px 0}
.drawer-nav .drawer-muted{color:var(--ink-soft);font-size:.88rem}

/* Burger appears only where the main nav is hidden. */
@media(max-width:900px){
  .nav-burger{display:flex}
}

/* ---- Coupons ---- */
.coupon-box{display:flex;gap:8px;margin-top:14px}
.coupon-box input{flex:1;min-width:0;border:1px solid var(--line);border-radius:3px;
  padding:9px 11px;font-size:.86rem;font-family:inherit;text-transform:uppercase}
.coupon-box input:focus{outline:none;border-color:var(--ink)}
.coupon-box .btn{flex-shrink:0}
.coupon-err{font-size:.8rem;color:#c0392b;margin-top:7px;line-height:1.4}
.coupon-x{border:none;background:none;cursor:pointer;color:var(--ink-soft);font-size:1.05rem;
  line-height:1;padding:0 4px}
.coupon-x:hover{color:#c0392b}
.sum-disc{color:#1a7a44}
.you-save{text-align:center;font-size:.83rem;font-weight:700;color:#1a7a44;margin-top:10px}
/* Chat cards inside the MiSu popup (they were never rendered before). */
.adv-msg .chat-cards{margin-top:10px}

/* ---- Leadership ---- */
.page-hero{padding:56px 0 28px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:2.4rem;letter-spacing:-0.03em;margin-bottom:6px}
.page-sub{color:var(--ink-soft);font-size:1rem}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;padding:8px 0}
.team-card{border:1px solid var(--line);border-radius:6px;padding:22px;background:var(--white)}
.team-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;display:block;margin-bottom:14px;
  border:1px solid var(--line)}
.team-ph{display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--white);
  font-size:1.9rem;font-weight:800}
.team-name{font-size:1.05rem;margin-bottom:2px}
.team-role{font-size:.85rem;color:var(--ink-soft);margin-bottom:10px}
.team-bio{font-size:.88rem;line-height:1.6;color:var(--ink);margin-bottom:10px}
.team-link{font-size:.83rem;font-weight:700;color:var(--ink);text-decoration:underline}

/* ---- Partners ---- */
.partner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:16px 0 8px}
.partner-card{display:flex;gap:14px;border:1px solid var(--line);border-radius:6px;padding:16px;
  background:var(--white)}
.partner-logo{width:52px;height:52px;object-fit:contain;flex:0 0 52px;border-radius:4px;
  border:1px solid var(--line);background:var(--white)}
.partner-ph{display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--white);
  font-weight:800;font-size:1.2rem}
.partner-b{min-width:0}
.partner-b strong{display:block;font-size:.95rem}
.partner-rel{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-soft);margin:3px 0 6px}
.partner-blurb{font-size:.85rem;line-height:1.5;color:var(--ink-soft);margin-bottom:6px}

/* ---- Brand logo ----
   A horizontal lockup (fox + wordmark), roughly 3:1. Height is what's fixed;
   width follows from the aspect ratio, so it can never be squashed.
   NB: no border-radius and no negative margin here — both were for the old
   circular badge and would crop the wordmark off this one. */
.logo{display:flex;align-items:center}
.logo-mark{
  height:60px;
  width:auto;
  object-fit:contain;
  display:block;
  flex-shrink:0;
}
.footer-logo{display:flex;align-items:center}
.footer-logo .logo-mark{height:60px;width:auto}
.drawer-brand{display:flex;align-items:center}
.drawer-brand .logo-mark{height:44px;width:auto}

/* Responsive: scale by HEIGHT and let the width follow, so the lockup keeps its
   proportions instead of being squeezed. */
@media(max-width:900px){
  .header-inner{height:74px}
  .logo-mark{height:54px}
}
@media(max-width:700px){
  .header-inner{height:66px}
  .logo-mark{height:46px}
  .footer-logo .logo-mark{height:52px}
}
@media(max-width:480px){
  .header-inner{height:60px}
  .logo-mark{height:38px}
  .footer-logo .logo-mark{height:46px}
}

/* ---- Add-to-cart feedback ---- */
/* The button flashes fox orange on success. Colour + a tick is a much clearer
   confirmation than a text swap alone, especially on a busy product grid. */
.btn.is-adding{opacity:.72;cursor:wait}
.btn.is-added{
  background:var(--fox) !important;
  border-color:var(--fox) !important;
  color:#fff !important;
  animation:btn-pop .34s cubic-bezier(.2,.9,.3,1.5);
}
.btn-outline.is-added{background:var(--fox) !important;color:#fff !important}
.btn.is-error{background:#C0392B !important;border-color:#C0392B !important;color:#fff !important}

@keyframes btn-pop{
  0%  {transform:scale(1)}
  45% {transform:scale(1.07)}
  100%{transform:scale(1)}
}

/* Cart badge pulses orange too, so the eye is drawn to where the item landed. */
.cart-count.bump{animation:count-bump .5s cubic-bezier(.2,.9,.3,1.5)}
@keyframes count-bump{
  0%  {transform:scale(1);   background:var(--white); color:var(--black)}
  40% {transform:scale(1.35); background:var(--fox);  color:#fff}
  100%{transform:scale(1);   background:var(--white); color:var(--black)}
}

@media (prefers-reduced-motion: reduce){
  .btn.is-added{animation:none}
  .cart-count.bump{animation:none}
}

/* ---- Buy-button hover: fox orange ----
   Applies to every add-to-cart / buy surface: PDP, sticky bar, chat cards,
   combos, and the subscribe buttons. */
.btn-primary:hover:not(:disabled):not(.is-added):not(.is-error),
.pdp-sticky .btn:hover:not(:disabled):not(.is-added),
.cc .btn-primary:hover:not(:disabled):not(.is-added){
  background:var(--fox);
  border-color:var(--fox);
  color:#fff;
}
/* Outline buttons (Subscribe) invert to orange rather than filling black. */
.btn-outline:hover:not(:disabled):not(.is-added):not(.is-error){
  background:var(--fox);
  border-color:var(--fox);
  color:#fff;
}
/* The Buy Once / Subscribe mode toggle (class is .buy-toggle, not .pdp-buy) */
.buy-toggle button:hover:not(.active){color:var(--fox-deep)}

/* ---- Affiliate wallet ---- */
.wallet-hero{background:var(--black);color:#fff;padding:26px;border-radius:3px;margin-bottom:20px}
.wallet-label{display:block;font-size:.8rem;opacity:.7;letter-spacing:.05em;text-transform:uppercase}
.wallet-amount{display:block;font-size:2.4rem;font-weight:800;line-height:1.1;margin-top:4px}
.wallet-exits{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.wallet-exit{background:rgba(255,255,255,.08);padding:14px;border-radius:3px}
.wallet-exit.is-bonus{background:var(--fox);color:#fff}
.we-label{display:block;font-size:.78rem;opacity:.85;text-transform:uppercase;letter-spacing:.04em}
.we-value{display:block;font-size:1.5rem;font-weight:800;margin:3px 0}
.we-note{display:block;font-size:.78rem;opacity:.85}
.wallet-fine{margin:16px 0 0;font-size:.82rem;opacity:.75;line-height:1.5}

.wallet-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.wallet-stats div{background:#fff;border:1px solid #eee;padding:14px;border-radius:3px}
.wallet-stats span{display:block;font-size:.75rem;color:#888;text-transform:uppercase;letter-spacing:.04em}
.wallet-stats strong{display:block;font-size:1.2rem;margin-top:3px}

.wallet-card{background:#fff;border:1px solid #eee;padding:20px;border-radius:3px}
.wallet-card h3{margin:0 0 14px;font-size:1rem}
.wallet-form{display:grid;gap:11px}
.wallet-form label{font-size:.85rem;font-weight:600;color:#333}
.wallet-form input,.wallet-form select{width:100%;padding:10px;border:1px solid #ddd;
  border-radius:2px;font-family:inherit;margin-top:4px}
.wallet-form label.check{display:flex;align-items:center;gap:8px;font-weight:400}
.wallet-form label.check input{width:auto;margin:0}
.wallet-ledger td.pos{color:#1D6F35;font-weight:600}
.wallet-ledger td.neg{color:#9B2C2C;font-weight:600}
.wallet-ledger td.r,.wallet-ledger th.r{text-align:right}

/* ---- Leaderboard ---- */
.lb-you{display:flex;align-items:center;gap:20px;background:var(--black);color:#fff;
  padding:18px 22px;border-radius:3px;margin-bottom:22px;flex-wrap:wrap}
.lb-you-label{display:block;font-size:.75rem;opacity:.7;text-transform:uppercase;letter-spacing:.05em}
.lb-you-rank{font-size:1.9rem;font-weight:800;line-height:1}
.lb-you-meta{display:flex;gap:18px;margin-left:auto;font-size:.88rem;opacity:.9}
.lb-grid{gap:22px}
.lb-board{background:#fff;border:1px solid #eee;border-radius:3px;padding:22px}
.lb-title{margin:0;font-size:1.15rem}
.lb-sub{margin:3px 0 16px;color:#888;font-size:.85rem}
.lb-empty{color:#999;font-size:.9rem}
.lb-list{list-style:none;margin:0;padding:0}
.lb-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid #f2f2f2}
.lb-row:last-child{border-bottom:none}
.lb-row.is-me{background:#FFF6EA;margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:2px}
.lb-pos{width:24px;font-weight:800;color:#bbb;font-size:.9rem;text-align:center;flex-shrink:0}
.lb-pos-1{color:#D4A017}.lb-pos-2{color:#9AA0A6}.lb-pos-3{color:#B87333}
.lb-avatar{width:32px;height:32px;border-radius:50%;background:var(--fox);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0}
.lb-name{flex:1;font-weight:600;font-size:.92rem}
.lb-sales{color:#999;font-size:.8rem;white-space:nowrap}
.lb-earned{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-note{margin-top:20px;color:#999;font-size:.82rem;text-align:center}

.notice.ok{background:#E4F5E9;color:#1D6F35}
.notice.err{background:#FBE4E4;color:#9B2C2C}

@media(max-width:700px){
  .wallet-exits{grid-template-columns:1fr}
  .wallet-stats{grid-template-columns:1fr 1fr}
  .lb-you-meta{margin-left:0;width:100%}
}

/* WhatsApp consent */
.consent{display:flex;gap:9px;align-items:flex-start;font-weight:400;font-size:.88rem;cursor:pointer}
.consent input{width:auto;margin:3px 0 0;flex-shrink:0}
.consent small{display:block;color:#999;font-size:.78rem;margin-top:2px}

/* Leaderboard preview banner — the demo data must be visibly labelled as
   illustrative, not passed off as real earnings. */
.lb-demo{background:#FFF6E5;border:1px solid #F3D9A6;color:#7A5200;
  padding:13px 16px;border-radius:3px;margin-bottom:20px;font-size:.88rem;line-height:1.55}
.lb-demo strong{color:#5E3F00}

/* Leaderboard teaser on the Sell & Earn page */
.lb-teaser{display:flex;align-items:center;gap:14px;background:var(--black);color:#fff;
  padding:16px 20px;border-radius:3px;text-decoration:none;margin-bottom:26px;
  transition:background .16s}
.lb-teaser:hover{background:var(--fox)}
.lb-teaser-icon{font-size:1.5rem;flex-shrink:0}
.lb-teaser strong{display:block;font-size:1rem}
.lb-teaser small{display:block;opacity:.75;font-size:.83rem;margin-top:2px}
.lb-teaser-go{margin-left:auto;font-size:1.3rem;flex-shrink:0}

/* ---- PDP dual CTA ----
   Add to Cart stays the primary action; Buy Now is the express lane in the
   brand orange so it reads as an alternative rather than competing for the
   same emphasis. */
.pdp-actions{display:grid;gap:10px}
.btn-buynow{background:var(--fox);color:#fff;border:2px solid var(--fox)}
.btn-buynow:hover{background:var(--fox-deep);border-color:var(--fox-deep);color:#fff}
.btn-buynow:disabled{opacity:.65;cursor:default}

/* On the sticky mobile bar the two buttons share the row. Padding is trimmed
   so "Add to Cart" + "Buy Now" + the price still fit a 360px screen. */
.pdp-sticky .btn{flex:1;min-width:0;white-space:nowrap}
@media(max-width:560px){
  .pdp-sticky .btn{padding:14px 10px;font-size:.85rem}
  .pdp-sticky-price{font-size:1.15rem!important}
}

@media(min-width:700px){
  .pdp-actions{grid-template-columns:1fr 1fr}
}

/* Checkout sign-in nudge — an option, never a gate. */
.co-signin{background:#F7F7F7;border-left:3px solid var(--fox);padding:10px 14px;
  margin:-6px 0 18px;font-size:.88rem;border-radius:2px}
.co-signin a{color:var(--fox-deep);font-weight:700}

/* ================= CHECKOUT ================= */
/* Two-column: form left, order summary right (sticky on desktop). */
.co-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:0;align-items:start;
  max-width:1180px;margin:0 auto}
.co-form{padding:34px 46px 60px 0}
/* Right padding matches the left, so the summary content isn't flush against
   the panel edge. The negative right margin lets the grey panel bleed to the
   viewport edge while the CONTENT stays inside the 1180px column. */
.co-side{background:#F7F7F7;padding:34px 46px 60px 46px;
  border-left:1px solid var(--line);min-height:100%;position:sticky;top:96px}

.co-head{font-size:1.25rem;font-weight:700;margin:26px 0 14px;letter-spacing:-.01em}
.co-head:first-of-type{margin-top:0}

/* Floating-label field: the label sits inside until the input has content. */
.co-field{position:relative;margin-bottom:12px}
.co-field input,.co-field select,.co-field textarea{
  width:100%;padding:20px 14px 7px;border:1px solid #C9C9C9;border-radius:6px;
  font-family:inherit;font-size:.95rem;background:#fff;color:var(--ink);
  transition:border-color .15s,box-shadow .15s;appearance:none}
.co-field textarea{padding-top:24px;resize:vertical}
.co-field input:focus,.co-field select:focus,.co-field textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.co-field label{
  position:absolute;left:14px;top:14px;font-size:.95rem;color:#767676;
  pointer-events:none;transition:top .13s,font-size .13s,color .13s}
/* Raise the label once the field has content or focus. :placeholder-shown is
   why every input carries placeholder=" ". */
.co-field input:focus + label,
.co-field input:not(:placeholder-shown) + label,
.co-field textarea:focus + label,
.co-field textarea:not(:placeholder-shown) + label,
.co-field select:focus + label,
.co-field select + label{
  top:6px;font-size:.72rem;color:#767676}
.co-field select{padding-top:22px}
.co-select::after{content:'';position:absolute;right:16px;top:50%;width:9px;height:9px;
  border-right:2px solid #555;border-bottom:2px solid #555;
  transform:translateY(-70%) rotate(45deg);pointer-events:none}

.co-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-row-3{grid-template-columns:1fr 1fr 1fr}

.co-check{margin:6px 0 18px}
.co-check .consent{font-size:.9rem}
.co-gsthint{font-size:.78rem;color:var(--muted);margin:-4px 0 18px}

/* Order summary */
.co-side h3{font-size:1.05rem;margin:0 0 18px}
.co-line{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:.92rem}
.co-side .sum-line{font-size:.92rem}
.co-total{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line);margin-top:14px;padding-top:16px}
.co-total strong{font-size:1.5rem}

@media(max-width:900px){
  .co-wrap{grid-template-columns:1fr}
  /* Form FIRST on mobile. The summary previously sat on top, which put the Pay
     button above the form — you'd fill everything in, then have to scroll back
     up to pay. Order total stays visible in the sticky bar instead. */
  .co-form{padding:18px 0 30px;order:1}
  .co-side{position:static;border-left:none;border-top:1px solid var(--line);
    padding:22px 16px 30px;background:#F7F7F7;border-radius:4px;order:2;
    margin-bottom:96px}   /* clear the sticky pay bar */
  .co-row,.co-row-3{grid-template-columns:1fr 1fr}

  /* Bigger tap targets and 16px text — anything smaller makes iOS zoom the
     page on focus, which is disorienting mid-checkout. */
  .co-field input,.co-field select,.co-field textarea{
    font-size:16px;padding:22px 14px 8px;border-radius:8px}
  .co-field label{font-size:1rem;top:16px}
  .co-field input:focus + label,
  .co-field input:not(:placeholder-shown) + label,
  .co-field select:focus + label,
  .co-field select + label,
  .co-field textarea:focus + label,
  .co-field textarea:not(:placeholder-shown) + label{top:7px;font-size:.7rem}
  .co-head{font-size:1.15rem;margin:20px 0 12px}
  .co-check .consent{font-size:.92rem}

  /* Sticky pay bar: the total and the button are always reachable.
     z-index must beat the bottom mobile-nav (also 70) or the nav covers the
     Pay button entirely. We also hide that nav on checkout — a checkout page
     should not offer five ways to wander off mid-payment. */
  body.is-checkout .mobile-nav{display:none!important}
  .co-paybar{display:flex;align-items:center;gap:12px;position:fixed;
    left:0;right:0;bottom:0;z-index:90;background:#fff;
    border-top:1px solid var(--line);padding:10px 14px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -3px 14px rgba(0,0,0,.08)}
  .co-paybar-total{flex-shrink:0;line-height:1.15}
  .co-paybar-total span{display:block;font-size:.7rem;color:var(--muted);
    text-transform:uppercase;letter-spacing:.04em}
  .co-paybar-total strong{font-size:1.2rem}
  .co-paybar .btn{flex:1;padding:15px 12px;font-size:.95rem}
  /* The in-panel Pay button is redundant once the bar is showing. */
  .co-side .co-paybtn{display:none}
}
@media(min-width:901px){ .co-paybar{display:none} }

@media(max-width:480px){
  .co-row{grid-template-columns:1fr 1fr}
  .co-row-3{grid-template-columns:1fr}
}
@media(max-width:480px){
  .co-row-3{grid-template-columns:1fr}
}