/* Amino Connection — ported from the prototype.
   Design tokens live in tokens.css; the :root block is stripped here so the
   two cannot drift. TODO: split per template — this loads whole on every page. */

/* ============================================================
   AMINO CONNECTION — design tokens
   Derived from the supplied design comps (homepage, products,
   contact) and the Amino Connection logo.
   ============================================================ */


/* The page is a light commercial storefront. Keep it stable inside a
   dark-preference viewer rather than inverting the brand. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ color-scheme: light; }
}
:root[data-theme="dark"]{ color-scheme: light; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
/* height:auto matters here. The prototype's images were data URIs with no
   width/height attributes; WordPress adds both for CLS, and without this the
   attribute height wins — the image keeps its full natural height while the
   width is constrained, and it renders stretched. */
img{ max-width:100%; display:block; height:auto; }
a{ color:var(--brand-500); text-decoration:none; }
a:hover{ color:var(--brand-700); }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--brand-500); outline-offset:2px; border-radius:4px; }

h1,h2,h3,h4{ font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.1; margin:0; color:var(--ink); }
h1{ font-size:clamp(2.1rem, 1.35rem + 3.1vw, 3.6rem); font-weight:600; letter-spacing:-.035em; }
h2{ font-size:clamp(1.7rem, 1.12rem + 2.1vw, 2.6rem); font-weight:600; letter-spacing:-.03em; }
h3{ font-size:clamp(1.16rem, 1rem + .6vw, 1.42rem); font-weight:600; letter-spacing:-.02em; }
h4{ font-size:1.02rem; font-weight:600; }
p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.narrow{ max-width:760px; }
.lede{ font-size:1.075rem; color:var(--ink-2); line-height:1.68; max-width:62ch; }
.muted{ color:var(--muted); }
.sec{ padding:clamp(56px, 7vw, 104px) 0; }
.sec-tight{ padding:clamp(40px, 5vw, 68px) 0; }
.tint{ background:var(--surface-tint); }
.soft{ background:var(--surface-soft); }
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }

/* ---------- eyebrow (molecule mark + label, as in the comps) ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--text); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand-500);
  margin-bottom:14px;
}
.eyebrow svg{ width:16px; height:16px; flex:none; }
.on-dark .eyebrow{ color:var(--brand-300); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border-radius:var(--pill); border:1px solid transparent;
  padding:13px 26px; font-weight:600; font-size:.95rem; cursor:pointer;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
  text-align:center; white-space:nowrap;
}
.btn-primary{ background:var(--brand-600); color:#fff; }
.btn-primary:hover{ background:var(--brand-700); color:#fff; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--brand-500); color:var(--brand-700); }
.on-dark .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.34); }
.on-dark .btn-ghost:hover{ border-color:#fff; color:#fff; background:rgba(255,255,255,.08); }
.btn-white{ background:#fff; color:var(--brand-700); }
.btn-white:hover{ background:#EAF2FE; color:var(--brand-700); }
.btn-sm{ padding:9px 18px; font-size:.86rem; }
.btn-block{ display:flex; width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.center .btn-row{ justify-content:center; }
.textlink{ font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.textlink .chev{ transition:transform .16s ease; }
.textlink:hover .chev{ transform:translateX(3px); }

/* ---------- flagged placeholders ---------- */
.ph{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--ph-bg); color:var(--ph); border:1px dashed var(--ph-line);
  border-radius:6px; padding:1px 8px; font-size:.82em; font-weight:600;
  font-family:var(--text); line-height:1.5;
}
.ph::before{ content:"⚑"; font-size:.85em; }
.ph-block{
  background:var(--ph-bg); border:1px dashed var(--ph-line); color:#6B4508;
  border-radius:var(--r); padding:18px 20px; font-size:.9rem;
}
.ph-block strong{ color:var(--ph); display:block; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; }
.ph-media{
  background:repeating-linear-gradient(135deg, #EFF4FB 0 12px, #E7EFF9 12px 24px);
  border:1px dashed var(--line-strong); border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--muted); font-size:.82rem; padding:18px; min-height:150px;
}

/* ---------- announcement + header ---------- */
.announce{
  background:var(--teal-600); color:#FFFFFF; font-size:.8rem;
  padding:11px 0; text-align:center;
}
.announce .wrap{ display:flex; align-items:center; justify-content:center; gap:9px; }
.announce svg{ width:15px; height:15px; opacity:.95; flex:none; }

/* transparent navbar sitting over the home hero */
.site-header.overlay{ margin-bottom:calc(-1 * var(--header-h) - 1px); }
.site-header.is-over{ background:transparent; border-bottom-color:rgba(255,255,255,.28); }
.site-header.is-over .nav-link{ color:#fff; }
.site-header.is-over .nav-link:hover{ color:#fff; background:rgba(255,255,255,.12); }
.site-header.is-over .nav-link[aria-current="page"]{ color:#fff; }
.site-header.is-over .icon-btn{ color:#fff; }
.site-header.is-over .icon-btn:hover{ background:rgba(255,255,255,.14); color:#fff; }
.logo-img-white{ display:none; }
.site-header.is-over .logo-img{ display:none; }
.site-header.is-over .logo-img-white{ display:block; }

.site-header{
  position:sticky; top:0; z-index:60; background:#fff;
  border-bottom:1px solid var(--line);
}
.hdr{ display:flex; align-items:center; gap:18px; height:var(--header-h); }
.logo{ display:flex; align-items:center; gap:10px; flex:none; }
.logo img.logo-img, .logo img.logo-img-white{ height:46px; width:auto; }
.site-footer .logo img.logo-img{ height:46px; }
.mnav-head .logo img.logo-img{ height:38px; }
.nav{ display:flex; align-items:center; gap:2px; margin-inline:auto; }
.nav-item{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:5px; padding:10px 14px; border-radius:var(--r-sm);
  color:var(--ink); font-weight:500; font-size:.94rem; background:none; border:0; cursor:pointer;
}
.nav-link:hover{ color:var(--brand-600); background:var(--surface-tint); }
.nav-link[aria-current="page"]{ color:var(--brand-600); }
.caret{ width:12px; height:12px; flex:none; }
.nav-link .caret{ width:11px; height:11px; opacity:.6; transition:transform .15s ease; }
.nav-item.open .nav-link .caret{ transform:rotate(180deg); }
.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:250px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:8px; display:none;
}
.nav-item.open .dropdown{ display:block; }
.dropdown a{
  display:block; padding:10px 12px; border-radius:var(--r-sm);
  color:var(--ink); font-size:.92rem; font-weight:500;
}
.dropdown a:hover{ background:var(--surface-tint); color:var(--brand-600); }
.dropdown a small{ display:block; font-weight:400; color:var(--muted); font-size:.79rem; margin-top:1px; }

.hdr-actions{ display:flex; align-items:center; gap:6px; flex:none; }
.icon-btn{
  width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--pill); border:1px solid transparent; background:none; cursor:pointer; position:relative;
}
.icon-btn:hover{ background:var(--surface-tint); color:var(--brand-600); }
.icon-btn svg{ width:20px; height:20px; }
.cart-count{
  position:absolute; top:4px; right:3px; min-width:18px; height:18px; padding:0 4px;
  background:var(--green-500); color:var(--ink); border-radius:var(--pill);
  font-size:.68rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}
.burger{ display:none; }

/* header action pills */
.pill-btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  border-radius:var(--pill); padding:10px 20px; font-size:.9rem; font-weight:600;
  border:1px solid transparent; white-space:nowrap;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.pill-btn svg{ width:18px; height:18px; flex:none; }
.pill-cart{ background:#fff; border-color:var(--line-strong); color:var(--ink); }
.pill-cart:hover{ border-color:var(--brand-500); color:var(--brand-700); }
.pill-login{ background:var(--brand-600); color:#fff; }
.pill-login:hover{ background:var(--brand-700); color:#fff; }
.pill-btn .cart-count{
  position:static; border:0; min-width:19px; height:19px; font-size:.7rem;
}
.site-header.is-over .pill-cart{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.site-header.is-over .pill-cart:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }
.hdr-actions{ gap:10px; }

/* ---------- mobile nav ---------- */
.mobile-nav{
  position:fixed; inset:0; z-index:90; background:#fff; display:none;
  flex-direction:column; overflow-y:auto;
}
.mobile-nav.open{ display:flex; }
.mnav-head{ display:flex; align-items:center; justify-content:space-between; padding:14px var(--gut); border-bottom:1px solid var(--line); }
.mnav-body{ padding:8px var(--gut) 28px; }
.macc{ border-bottom:1px solid var(--line); }
.macc > button, .macc > a{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:16px 2px; background:none; border:0; cursor:pointer;
  font-family:var(--display); font-size:1.12rem; font-weight:600; color:var(--ink); text-align:left;
}
.macc-panel{ display:none; padding-bottom:12px; }
.macc.open .macc-panel{ display:block; }
.macc.open .caret{ transform:rotate(180deg); }
.macc-panel a{ display:block; padding:9px 2px 9px 16px; color:var(--ink-2); font-size:.97rem; border-left:2px solid var(--line); }
.macc-panel a:hover{ color:var(--brand-600); border-left-color:var(--brand-500); }
.mnav-cta{ padding:22px 0 0; display:grid; gap:10px; }

/* ---------- hero ---------- */
.hero{
  position:relative; background:var(--navy-900); color:#fff; overflow:hidden;
  background-image:var(--hero-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero-in{
  display:flex; align-items:center;
  min-height:clamp(480px, 46vw, 660px);
  padding:calc(clamp(48px,6vw,80px) + var(--header-h)) 0 clamp(48px,6vw,80px);
}
.hero-copy{ max-width:560px; }
.hero h1{ color:#fff; max-width:14ch; }
.hero p{ color:#C3D6EE; max-width:46ch; margin-top:18px; font-size:1.05rem; }
.hero-photo{ display:none; }
.shop-hero-img{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.shop-hero-img img{ width:100%; height:100%; object-fit:cover; object-position:center right; display:block; }

/* ---------- stat band ---------- */
/* trust bar — full-bleed band under the hero */
.stats{
  color:#fff; position:relative; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:var(--navy-800);
  background-image:
    radial-gradient(700px 240px at 12% -60%, rgba(47,169,201,.20), transparent 64%),
    radial-gradient(820px 260px at 88% 160%, rgba(2,159,172,.22), transparent 64%),
    radial-gradient(640px 220px at 50% 150%, rgba(18,104,214,.24), transparent 66%),
    linear-gradient(104deg, #051631 0%, #0B2A57 34%, #10386F 52%, #092349 78%, #041228 100%);
}
/* faint lattice, purely atmospheric */
.stats::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.6px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.6), transparent 40%, transparent 60%, rgba(0,0,0,.6));
  mask-image:linear-gradient(90deg, rgba(0,0,0,.6), transparent 40%, transparent 60%, rgba(0,0,0,.6));
}
/* light catching the top edge */
.stats::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.32) 22%, rgba(255,255,255,.32) 78%, transparent);
}
.stats-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  padding:clamp(24px,2.4vw,32px) 0;
}
.stat{ display:flex; align-items:center; gap:14px; justify-content:center; }
.stat-ico{
  width:48px; height:48px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.stat-ico svg{ width:100%; height:100%; display:block; }
.stat-ico .stat-badge{ width:47px; height:auto; display:block; }
.stat .div{
  width:1px; height:38px; flex:none;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.3), transparent);
}
.stat-text{ display:block; }
.stat b{
  font-family:var(--display); font-size:clamp(1.6rem,1.25rem + .8vw,2rem); font-weight:700;
  letter-spacing:-.03em; display:block; line-height:1.05; color:#fff;
  background:linear-gradient(180deg,#FFFFFF 42%,#AEDFEC 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;
}
@supports not (background-clip:text){ .stat b{ -webkit-text-fill-color:#fff; } }
.stat-text > span{
  font-size:.75rem; color:#A9C1DD; font-weight:500; letter-spacing:.02em; display:block; margin-top:3px;
}

/* ---------- grids ---------- */
.grid{ display:grid; gap:20px; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; flex-wrap:wrap; }
.sec-head p{ margin-top:12px; }

/* ---------- category tiles ---------- */
.cat{
  position:relative; border-radius:var(--r); overflow:hidden; min-height:240px;
  background:var(--surface-card); display:flex; align-items:flex-end;
  padding:18px; color:#fff; cursor:pointer; border:0; width:100%; text-align:left;
}
.cat::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,21,41,0) 62%, rgba(6,21,41,.46) 80%, rgba(6,21,41,.8) 100%); }
.cat .cat-art{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.cat .cat-art svg{ height:74%; width:auto; }
.cat .cat-art .pimg{ height:88%; transform:translateY(-14%); }
.cat-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.cat.has-photo::after{
  background:linear-gradient(180deg, rgba(6,21,41,0) 34%, rgba(6,21,41,.5) 68%, rgba(6,21,41,.88) 100%);
}
.cat b{ position:relative; z-index:2; font-family:var(--display); font-size:1.02rem; font-weight:600; color:#fff; }
/* the tile is a link, so override the global link-hover colour */
.cat:hover, .cat:focus, .cat:active, .cat:hover b, .cat:focus b{ color:#fff; }
.cat .cat-art, .cat-photo{ transition:transform .3s ease; }
.cat:hover .cat-art{ transform:translateY(-4px); }
.cat:hover .cat-photo{ transform:scale(1.05); }
.cat::after{ transition:opacity .2s ease; }
.cat:hover::after{ opacity:.88; }
@media (prefers-reduced-motion: reduce){
  .cat:hover .cat-art, .cat:hover .cat-photo{ transform:none; }
}

/* ---------- product card ---------- */
.pcard{ display:flex; flex-direction:column; }
.pcard-media{
  background:var(--surface-card); border-radius:var(--r); position:relative;
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:14px;
  overflow:hidden;
}
.pcard-media svg{ height:78%; width:auto; }
.pcard-badges{ position:absolute; top:12px; left:12px; display:flex; gap:6px; flex-wrap:wrap; }
.badge{
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
  font-size:.7rem; font-weight:600; padding:3px 9px; border-radius:var(--pill);
}
.pcard-quick{
  position:absolute; left:14px; right:14px; bottom:14px; opacity:0; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease;
}
.pcard:hover .pcard-quick, .pcard:focus-within .pcard-quick{ opacity:1; transform:none; }
.pcard h3{ font-size:1.12rem; margin-top:16px; font-weight:600; letter-spacing:-.015em; }
.pcard h3 a{ color:inherit; }
.pcard h3 a:hover{ color:var(--brand-600); }
.pcard-price{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.pcard-price span{ font-size:.95rem; color:var(--ink); font-weight:500; }
.pcard-desc{ color:var(--muted); font-size:.88rem; margin-top:10px; }
.pcard-foot{ margin-top:auto; padding-top:16px; }
select.size{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  border:1px solid var(--line-strong); border-radius:var(--pill);
  padding:6px 30px 6px 13px; font-size:.83rem; font-family:var(--text); font-weight:500;
  line-height:1.5; color:var(--ink); background-color:#fff; cursor:pointer; min-width:84px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2365788E' stroke-width='1.6'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:11px;
}
select.size option{ color:var(--ink); background:#fff; }
.size-tag{
  display:inline-flex; align-items:center; border:1px solid var(--line-strong);
  border-radius:var(--pill); padding:6px 14px; font-size:.83rem; font-weight:500;
  color:var(--ink); background:#fff; line-height:1.5;
}
.pcard.is-placeholder .pcard-media{ background:repeating-linear-gradient(135deg,#F1F6FC 0 12px,#E9F1FA 12px 24px); border:1px dashed var(--line-strong); }


/* supplied product photography */
.pimg{ display:block; width:auto; max-width:100%; height:100%; object-fit:contain; }
.pcard-media .pimg{ height:100%; }
.pdp-media .pimg{ max-height:620px; }
.pdp-thumb .pimg{ height:86%; }
.cart-line .thumb .pimg{ height:100%; }
.search-res .pimg{ height:auto; width:100%; }

.pcard-figure{ position:relative; }
a.pcard-media{ color:inherit; display:flex; }
a.pcard-media:hover{ color:inherit; }
a.pcard-media .pimg{ transition:transform .3s ease; }
a.pcard-media:hover .pimg{ transform:scale(1.04); }
a.pcard-media:focus-visible{ outline:3px solid var(--brand-500); outline-offset:3px; }
.pcard-badges{ display:flex; }
@media (prefers-reduced-motion: reduce){ a.pcard-media:hover .pimg{ transform:none; } }

/* ---------- document request card ---------- */
.field, .input{
  width:100%; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:11px 13px; font:inherit; font-size:.92rem; background:#fff; color:var(--ink);
}
.field::placeholder{ color:#9AACC0; }
.field:focus{ outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(18,104,214,.14); }

/* ---------- standard list (right column) ---------- */
.std-row{ padding:20px 0; border-bottom:1px solid var(--line); }
.std-row:first-child{ padding-top:0; }
.std-row h4{ margin-bottom:6px; font-size:1.02rem; }
.std-row p{ color:var(--muted); font-size:.91rem; max-width:52ch; margin-bottom:9px; }
.std-row .textlink{ font-size:.88rem; }

/* left standards card */
.std-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px; margin-top:26px; box-shadow:var(--shadow-sm);
}
.std-card h3{ font-size:1.18rem; }
.std-card p{ color:var(--muted); font-size:.92rem; margin:20px 0 16px; max-width:46ch; }
.chain{ list-style:none; margin:20px 0 0; padding:0; }
.chain li{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:0 0 22px 0;
}
.chain li:last-child{ padding-bottom:0; }
.chain li::before{
  content:""; position:absolute; left:15px; top:32px; bottom:-2px; width:2px;
  background:linear-gradient(180deg, var(--brand-300), #DCE8F7);
}
.chain li:last-child::before{ display:none; }
.chain .chain-node{
  width:32px; height:32px; border-radius:50%; flex:none; z-index:1;
  background:#EAF2FE; color:var(--brand-600); border:1px solid #C8DDF7;
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:700; font-family:var(--display);
}
.chain b{ font-family:var(--display); font-weight:600; font-size:1.04rem; color:var(--ink); }

/* the two standards columns share a baseline */
.std-split{ align-items:stretch; }
.std-intro{ display:flex; flex-direction:column; }
.std-intro .std-card{ flex:1; display:flex; flex-direction:column; }
.std-intro .std-card .chain{ flex:1; }
.std-list{ display:flex; flex-direction:column; justify-content:center; }

/* full-width glass differentiator */
.glass-wide{
  position:relative; border-radius:var(--r-xl); color:#fff;
  background:var(--navy-700);
  background-image:
    radial-gradient(620px 420px at 14% 8%, rgba(47,169,201,.20), transparent 64%),
    radial-gradient(700px 400px at 92% 108%, rgba(2,159,172,.26), transparent 62%),
    radial-gradient(760px 520px at 52% 112%, rgba(18,104,214,.26), transparent 66%),
    linear-gradient(118deg, #071F42 0%, #0D3268 34%, #12407F 57%, #0A2750 82%, #061A38 100%);
  display:grid; grid-template-columns:minmax(260px, .92fr) 1.08fr;
  align-items:center; gap:clamp(14px,2.4vw,36px);
  padding:clamp(26px,2.8vw,38px) clamp(30px,4vw,58px);
}
.glass-wide-art{ position:relative; display:flex; align-items:center; }
.glass-wide-art img{
  width:min(540px,100%); display:block;
  /* the artwork carries its own soft shading; it breaks out of the card
     vertically only, so nothing is clipped at the edges */
  margin-top:calc(-1 * clamp(34px,4.4vw,72px));
  margin-bottom:calc(-1 * clamp(34px,4.4vw,72px));
  margin-left:calc(-1 * clamp(4px,1.8vw,30px));
  margin-right:auto;
}
.glass-wide-copy{ padding:6px 0; }
.glass-wide-copy h2{ color:#fff; font-size:clamp(1.55rem,1.2rem + 1.35vw,2.15rem); }
.glass-wide-copy p{ color:var(--on-dark-muted); margin-top:13px; margin-bottom:0; font-size:.96rem; line-height:1.65; max-width:50ch; }
.glass-wide-copy .btn-row{ margin-top:22px; }

/* ---------- feature / info cards ---------- */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; }
.card h3{ margin-bottom:10px; }
.card p{ color:var(--ink-2); font-size:.95rem; }
.card-tint{ background:var(--surface-tint); border-color:transparent; }
.icon-chip{
  width:44px; height:44px; border-radius:12px; background:#E6F0FD; color:var(--brand-600);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.icon-chip svg{ width:22px; height:22px; }

/* ---------- comparison ---------- */
.compare{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.comp-col{ border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; background:#fff; }
.comp-col.good{ border-color:#BFD9F6; background:linear-gradient(180deg,#F5F9FF,#fff); }
.comp-col h3{ display:flex; align-items:center; gap:10px; }
.comp-item{ padding:14px 0; border-top:1px solid var(--line); }
.comp-item h4{ font-size:.96rem; }
.comp-item p{ color:var(--muted); font-size:.88rem; margin-top:3px; }

/* ---------- steps / flow ---------- */
.flow{ display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; }
.flow-step{
  flex:1 1 170px; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:18px; position:relative;
}
.flow-step b{ font-family:var(--display); font-weight:600; font-size:1.02rem; display:block; margin-bottom:5px; }
.flow-step p{ font-size:.87rem; color:var(--muted); }

/* ---------- dark CTA band ---------- */
.band{
  background:var(--navy-700); color:#fff; border-radius:var(--r-xl); overflow:hidden;
  background-image:radial-gradient(760px 320px at 85% 120%, rgba(24,169,190,.22), transparent 60%),
                   radial-gradient(600px 300px at 10% -20%, rgba(18,104,214,.3), transparent 60%);
}
.band-in{ display:grid; grid-template-columns:1fr 1px 1fr; gap:38px; padding:clamp(30px,4vw,48px); }
.band h2{ color:#fff; font-size:clamp(1.5rem,1.1rem + 1.4vw,2.05rem); }
.band p{ color:var(--on-dark-muted); margin-top:12px; font-size:.97rem; max-width:44ch; }
.band .rule{ background:rgba(255,255,255,.16); }

/* ---------- FAQ ---------- */
.faq-list{ display:grid; gap:0; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 4px; background:none; border:0; cursor:pointer; text-align:left;
  font-size:1.02rem; font-weight:600; color:var(--ink); font-family:var(--display);
}
.faq-q .caret{ flex:none; transition:transform .18s ease; color:var(--muted); }
.faq-item.open .faq-q{ color:var(--brand-600); }
.faq-item.open .faq-q .caret{ transform:rotate(180deg); }
.faq-a{
  /* height, not display, so accordion.js can animate it. The bottom padding
     stays put and is clipped while collapsed. */
  height:0; overflow:hidden; transition:height .24s ease;
  padding:0 4px; color:var(--ink-2); font-size:.95rem; max-width:72ch;
}
/* The bottom padding only exists while open. On a height:0 element padding
   still occupies space, which made every collapsed row 22px too tall. */
.faq-item.open .faq-a{ height:auto; padding-bottom:22px; }
@media (prefers-reduced-motion: reduce){ .faq-a{ transition:none; } }

/* FAQ section */
.faq-split{ display:grid; grid-template-columns:40% 1fr; gap:clamp(24px,3.2vw,52px); align-items:start; }
.faq-intro{ padding-top:2px; }
.faq-intro .lede{ max-width:38ch; }
/* a quiet continuation of the intro, not a support card */
.faq-help{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line);
}
.faq-help-icon{ flex:none; color:var(--brand-600); display:inline-flex; }
.faq-help-icon svg{ width:24px; height:24px; }
.faq-help-text{
  font-size:.95rem; line-height:1.5; color:var(--ink-2); margin-right:auto;
}
.faq-help-link{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:600; font-size:.93rem; color:var(--brand-600); white-space:nowrap;
}
.faq-help-link .chev{ transition:transform .16s ease; }
.faq-help-link:hover{ color:var(--brand-700); }
.faq-help-link:hover .chev{ transform:translateX(4px); }
.faq-list .faq-item:first-child{ border-top:1px solid var(--line); }
.faq-a a{ font-weight:600; }

/* ---------- blog ---------- */
.post-tag{ position:absolute; top:12px; left:12px; background:#fff; font-size:.72rem; font-weight:600; padding:4px 10px; border-radius:var(--pill); z-index:2; }
.post h3{ font-size:1.06rem; font-weight:600; margin-top:16px; letter-spacing:-.015em; }
.post p{ color:var(--muted); font-size:.89rem; margin-top:8px; }
.post .meta{ font-size:.78rem; color:var(--muted); margin-top:12px; }

/* ---------- blog ---------- */
a.post{ display:block; color:inherit; }
a.post:hover h3{ color:var(--brand-600); }
.post-media{ display:block; position:relative; border-radius:var(--r); overflow:hidden; }
.post-media .ph-media{ min-height:210px; }
a.post .meta{ display:block; }

.post-media img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.post-lead{ border-radius:var(--r-md,12px); overflow:hidden; }
.post-lead img{ display:block; width:100%; aspect-ratio:21/9; object-fit:cover; }
a.post:hover .post-media img{ transform:scale(1.03); }
.post-media img{ transition:transform .3s ease; }
@media (prefers-reduced-motion: reduce){ a.post:hover .post-media img{ transform:none; } }

/* article layout: contents rail beside the text */
.post-shell{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(28px,4.5vw,64px); align-items:start; }
.post-main{ min-width:0; max-width:68ch; }
.post-side{ min-width:0; position:sticky; top:calc(var(--header-h) + 28px); align-self:start; padding-top:4px; }
.post-side-title{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:12px;
}
.post-toc{ margin-bottom:28px; }
.post-toc-list{ display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--line); }
.post-toclink{
  display:block; width:100%; text-align:left; padding:8px 14px; margin-left:-1px;
  border:0; border-left:2px solid transparent; background:transparent;
  font:inherit; font-size:.88rem; line-height:1.45; color:var(--ink-2);
  cursor:pointer; transition:color .15s ease, border-color .15s ease;
}
.post-toclink:hover{ color:var(--brand-600); }
.post-toclink.on{ color:var(--brand-600); font-weight:600; border-left-color:var(--brand-600); }
.post-shop{ padding-top:22px; border-top:1px solid var(--line); }
.post-shop p{ font-size:.88rem; color:var(--ink-2); line-height:1.6; margin-bottom:14px; }
.post-shop .btn{ width:100%; justify-content:center; }
.post-shop .textlink{ display:inline-block; margin-top:12px; font-size:.86rem; }
@media (max-width:980px){
  .post-shell{ grid-template-columns:1fr; gap:22px; }
  .post-main{ max-width:none; }
  .post-side{ position:static; order:2; }
  .post-main{ order:1; }
  .post-toc{ display:none; }
  .post-shop{ margin-top:8px; padding-top:26px; }
}

/* article page */
.post-article{ padding:clamp(34px,4vw,56px) 0 clamp(40px,5vw,72px); background:linear-gradient(180deg,#F4F9FF 0,#fff 420px); }
.post-article h1{ max-width:20ch; font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem); }
.post-article .post-body{ margin-top:clamp(26px,3vw,38px); }
.post-cat{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand-600); margin-bottom:14px;
}
.post-meta{ margin-top:16px; font-size:.86rem; color:var(--muted); }
.post-lead{ margin-top:26px; }
.post-body{ max-width:none; }
.post-body > p{ font-size:1.04rem; line-height:1.75; color:var(--ink-2); margin-bottom:18px; }
.post-body h2{
  font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); margin:40px 0 14px;
  padding-top:22px; border-top:1px solid var(--line);
}
.post-body h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.post-body .bullets{ margin-bottom:22px; }
.post-body .pull{
  font-family:var(--display); font-size:clamp(1.1rem,1rem + .5vw,1.3rem); font-weight:500;
  line-height:1.5; color:var(--ink); border-left:3px solid var(--brand-500);
  padding:4px 0 4px 22px; margin:26px 0;
}
.post-body a{ font-weight:600; }
.post-cta{ max-width:68ch; margin:34px auto 0; }
.post-ruo{
  /* .post-body is max-width:none, so a 68ch cap plus auto margins left this
     note and its rule floating in a narrower centred column than the article
     text above it. It belongs on the same measure as the body. */
  max-width:none; margin:26px 0 0; padding-top:20px; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--muted);
}

/* ---------- shop layout ---------- */
.shop-bar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.chip{
  border:1px solid var(--line-strong); background:#fff; border-radius:var(--pill);
  padding:8px 16px; font-size:.87rem; cursor:pointer; color:var(--ink-2); font-weight:500;
}
.chip:hover{ border-color:var(--brand-300); color:var(--brand-600); }
.chip.on{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.chip-toggle.on{ background:#E6F0FD; color:var(--brand-700); border-color:#BAD5F5; }
.shop-count{ font-size:.92rem; color:var(--ink-2); }

/* shop: straight into the products */
.shop-top{ padding:18px 0 0; }
.shop-head{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.shop-head h1{ font-size:clamp(1.6rem,1.25rem + 1.1vw,2.2rem); margin:0; }
.shop-head .field{ max-width:420px; flex:1 1 280px; }
/* Wrapping the input in a real <form> (it has to submit) made the form the
   flex child, so the sizing above stopped applying to anything. Move it to the
   form and let the input fill it. */
.shop-head .shop-search{ flex:1 1 280px; max-width:420px; display:block; }
.shop-head .shop-search .field{ width:100%; max-width:none; }
.phero + .stats{ margin-top:0; }

/* ---------- product detail ---------- */
.pdp{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:start; }
.pdp-media{ background:var(--surface-card); border-radius:var(--r-lg); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:28px; }
.pdp-media svg{ height:84%; width:auto; }
.pdp-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.pdp-thumb{ background:var(--surface-card); border-radius:var(--r-sm); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; border:1px solid transparent; cursor:pointer; padding:8px; }
.pdp-thumb.on{ border-color:var(--brand-500); }
.pdp-thumb svg{ height:80%; }
.pdp-thumb .ph-media{ min-height:0; width:100%; height:100%; padding:4px; font-size:.68rem; }
.pdp > *{ min-width:0; }
.pdp-media, .pdp-thumbs{ min-width:0; }
.price-lg{ font-family:var(--display); font-size:2rem; font-weight:700; }
.opt-group{ margin-top:22px; }
.opt-label{ font-size:.82rem; font-weight:600; letter-spacing:.04em; color:var(--ink-2); margin-bottom:9px; display:block; }
.opts{ display:flex; gap:9px; flex-wrap:wrap; }
.opt{
  border:1px solid var(--line-strong); background:#fff; border-radius:var(--r-sm);
  padding:10px 18px; cursor:pointer; font-size:.9rem; font-weight:500;
}
.opt.on{ border-color:var(--brand-600); background:#EFF6FF; color:var(--brand-700); box-shadow:inset 0 0 0 1px var(--brand-600); }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--pill); overflow:hidden; }
.qty button{ width:42px; height:44px; background:none; border:0; cursor:pointer; font-size:1.1rem; color:var(--ink-2); }
.qty button:hover{ background:var(--surface-tint); }
.qty span{ min-width:34px; text-align:center; font-weight:600; }
.trust-row{ display:grid; gap:10px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.trust-row div{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--ink-2); }
.trust-row svg{ width:17px; height:17px; color:var(--brand-600); flex:none; margin-top:3px; }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto; }
.tab{ padding:14px 18px; background:none; border:0; border-bottom:2px solid transparent; cursor:pointer; font-weight:500; color:var(--muted); white-space:nowrap; }
.tab.on{ color:var(--brand-600); border-bottom-color:var(--brand-600); }
.tabpanel{ padding:26px 0; display:none; }
.tabpanel.on{ display:block; }
.spec-table{ width:100%; border-collapse:collapse; font-size:.93rem; }
.spec-table th, .spec-table td{ text-align:left; padding:13px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.spec-table th{ width:230px; font-weight:600; color:var(--ink-2); }

/* long-form product copy */
.prose{ max-width:72ch; }
.prose p{ margin-bottom:14px; color:var(--ink-2); font-size:.97rem; line-height:1.7; }
.prose h3{ margin-top:4px; }
.prose h4{ font-size:1rem; margin-bottom:8px; }
.prose .spec-table{ max-width:none; }
.bullets{ margin:12px 0 0; padding-left:0; list-style:none; }
.bullets li{ position:relative; padding:9px 0 9px 26px; color:var(--ink-2); font-size:.95rem; border-bottom:1px solid var(--line); }
.bullets li:last-child{ border-bottom:0; }
.bullets li::before{
  content:""; position:absolute; left:6px; top:17px; width:6px; height:6px;
  border-radius:50%; background:var(--brand-500);
}
.pdp-kicker{ font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-500); margin-bottom:8px; }
.pdp-sub{ font-size:1.02rem; color:var(--ink-2); margin-top:8px; font-weight:500; }
.spec-table sub{ font-size:.72em; }

.pdp-thumbs{ grid-template-columns:repeat(4,1fr); }
button.pdp-thumb{ padding:0; overflow:hidden; background:var(--surface-card); }
button.pdp-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.pdp-media #pdpShot{ max-height:520px; width:auto; max-width:100%; object-fit:contain; }

/* legal documents */
.legal-split{ display:grid; grid-template-columns:260px 1fr; gap:clamp(28px,4vw,64px); align-items:start; }
.legal-toc{ position:sticky; top:calc(var(--header-h) + 18px); }
.legal-toc h4{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.legal-toc nav{ display:grid; gap:2px; max-height:62vh; overflow-y:auto; }
.legal-toc a{ font-size:.86rem; color:var(--ink-2); padding:5px 0; line-height:1.4; }
.legal-toc a:hover{ color:var(--brand-600); }
.legal-body{ max-width:74ch; }
.legal-body h2{
  font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem); margin:36px 0 12px;
  padding-top:20px; border-top:1px solid var(--line); scroll-margin-top:100px;
}
.legal-body h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal-body p{ font-size:.97rem; line-height:1.72; color:var(--ink-2); margin-bottom:14px; }
.legal-body .bullets{ margin-bottom:18px; }
.legal-body a{ font-weight:600; }
a.legal-card{ display:block; color:inherit; }
a.legal-card:hover{ border-color:var(--brand-300); color:inherit; }
.legal-card h3{ margin-bottom:8px; }
.legal-card p{ color:var(--muted); font-size:.93rem; margin-bottom:14px; }
.legal-card.is-pending{ background:var(--surface-soft); }
@media (max-width:900px){
  .legal-split{ grid-template-columns:1fr; }
  .legal-toc{ position:static; max-height:none; }
  .legal-toc nav{ max-height:none; }
}

.legal-body h3{ font-size:1.02rem; margin:22px 0 6px; font-weight:600; }
.legal-body h3 + p{ margin-top:0; }

/* about: key facts */
.facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin:30px 0 0; }
.fact{ padding:18px 0; border-top:1px solid var(--line); }
.fact:nth-child(odd){ padding-right:28px; }
.fact:nth-child(even){ padding-left:28px; border-left:1px solid var(--line); }
.fact dt{ font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; color:var(--brand-600); font-weight:700; margin-bottom:6px; }
.fact dd{ margin:0; font-size:.98rem; color:var(--ink); line-height:1.55; }
@media (max-width:720px){
  .facts{ grid-template-columns:1fr; }
  .fact:nth-child(odd), .fact:nth-child(even){ padding-left:0; padding-right:0; border-left:0; }
}

/* multi-step application progress */
.steps{ display:flex; list-style:none; margin:0 0 26px; padding:0; gap:6px; flex-wrap:wrap; }
.steps li{ display:flex; align-items:center; gap:9px; flex:1 1 140px; padding:12px 14px;
  border-radius:var(--r); background:var(--surface-soft); border:1px solid var(--line);
  font-size:.9rem; color:var(--muted); }
.steps li.is-done{ color:var(--ink); border-color:var(--brand-200); background:var(--surface-tint); }
.steps li.is-now{ color:var(--ink); border-color:var(--brand-600); background:#fff; box-shadow:var(--shadow-sm); }
.step-dot{
  width:26px; height:26px; border-radius:var(--pill); flex:none; display:flex;
  align-items:center; justify-content:center; font-size:.8rem; font-weight:700;
  background:#fff; border:1px solid var(--line); color:var(--muted);
}
.steps li.is-done .step-dot{ background:var(--green-500); border-color:var(--green-500); color:#fff; }
.steps li.is-done .step-dot svg{ width:14px; height:14px; }
.steps li.is-now .step-dot{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.step-label{ font-weight:600; }
.form-title{ font-size:1.35rem; margin-bottom:6px; }

/* application flow */
.apply-nav{ display:flex; gap:12px; justify-content:space-between; margin-top:26px; flex-wrap:wrap; }
.apply-nav .btn{ flex:1 1 180px; }
.embed-frame{
  border:1px dashed var(--line-strong); border-radius:var(--r-lg);
  background:var(--surface-soft); padding:clamp(28px,4vw,54px); text-align:center;
}
.embed-inner{ max-width:520px; margin-inline:auto; display:grid; justify-items:center; gap:8px; }
.embed-inner svg{ width:30px; height:30px; color:var(--brand-600); }
.embed-inner b{ font-family:var(--display); font-size:1.05rem; }
.embed-inner span{ color:var(--muted); font-size:.92rem; }
.embed-inner .ph-block{ margin-top:14px; text-align:left; }
.done-mark{
  width:60px; height:60px; border-radius:var(--pill); display:inline-flex;
  align-items:center; justify-content:center; background:var(--green-500); color:#fff;
}
.done-mark svg{ width:28px; height:28px; }

.flow-3{ grid-template-columns:repeat(3,1fr); }
.flow-num{
  width:34px; height:34px; border-radius:var(--pill); display:flex; align-items:center;
  justify-content:center; font-family:var(--display); font-weight:700; font-size:.95rem;
  background:var(--brand-600); color:#fff; margin-bottom:12px;
}
@media (max-width:900px){ .flow-3{ grid-template-columns:1fr; } }

/* ==========================================================
   QUALITY PAGES
   ========================================================== */
.qnav{
  position:sticky; top:var(--header-h); z-index:30; background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line);
}
.qnav-in{ display:flex; gap:clamp(18px,2.6vw,34px); overflow-x:auto; scrollbar-width:none; }
.qnav-in::-webkit-scrollbar{ display:none; }
.qnav a{
  padding:15px 0 13px; font-size:.92rem; font-weight:600; color:var(--muted);
  border-bottom:2px solid transparent; white-space:nowrap;
}
.qnav a:hover{ color:var(--ink); }
.qnav a.on{ color:var(--brand-600); border-bottom-color:var(--brand-600); }

.q-hero{ padding:clamp(38px,4.4vw,62px) 0 clamp(30px,3.4vw,46px); background:linear-gradient(180deg,#F3F8FF,#fff); }
.q-hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(26px,4vw,58px); align-items:center; }
.q-hero h1{ font-size:clamp(2.05rem,1.5rem + 2.1vw,3.1rem); }
.q-lede{ margin-top:16px; font-size:1.06rem; line-height:1.66; color:var(--ink-2); max-width:52ch; }
.q-figure{ border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-md); }
.q-figure img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }

.q-figure.fit{ background:var(--surface-tint); box-shadow:none; border:1px solid var(--line); }
.q-figure.fit img{ aspect-ratio:auto; object-fit:contain; padding:clamp(18px,3vw,34px); }

.q-head{ max-width:60ch; }
.q-head h2{ font-size:clamp(1.7rem,1.35rem + 1.3vw,2.4rem); }
.q-head p{ margin-top:14px; font-size:1.02rem; line-height:1.68; color:var(--ink-2); }

/* numbered editorial rows */
.q-row{
  display:grid; grid-template-columns:56px 1fr auto; gap:clamp(14px,2.2vw,30px);
  align-items:start; padding:26px 0; border-top:1px solid var(--line);
}
.q-row:first-child{ border-top:0; padding-top:6px; }
.q-num{ font-family:var(--display); font-size:1.45rem; font-weight:700; color:var(--brand-300); line-height:1.2; }
.q-row h3{ font-size:1.15rem; }
.q-row p{ margin-top:8px; max-width:62ch; color:var(--ink-2); }
.q-row .textlink{ white-space:nowrap; padding-top:4px; }

/* connected process chain */
.q-chain{ display:grid; grid-template-columns:repeat(5,1fr); margin-top:34px; }
.q-chain.q-chain-4{ grid-template-columns:repeat(4,1fr); }
/* The chain's column count has to match how many steps are actually in it.
   The prototype hardcodes 5 (or 4 via the modifier), so the three-step chain
   on /wholesale stopped two-thirds of the way across with a dead column and a
   half. Deriving the count from the children fixes that one and any future
   chain, whatever its length, without touching the generated markup.
   Scoped to the desktop range on purpose: :has() carries the specificity of
   its argument, so unscoped these would outrank the plain .q-chain rules in
   the max-width media queries below and keep the chain multi-column on a
   phone — which pushed four pages into sideways scrolling. */
@media (min-width:981px){
  .q-chain:has(> .q-step:nth-child(2):last-child){ grid-template-columns:repeat(2,1fr); }
  .q-chain:has(> .q-step:nth-child(3):last-child){ grid-template-columns:repeat(3,1fr); }
  .q-chain:has(> .q-step:nth-child(4):last-child){ grid-template-columns:repeat(4,1fr); }
}
.q-step{ position:relative; padding:0 10px; text-align:center; }
.q-step::before{ content:""; position:absolute; top:18px; left:0; right:0; height:2px; background:var(--line); }
.q-step:first-child::before{ left:50%; }
.q-step:last-child::before{ right:50%; }
.q-dot{
  position:relative; width:38px; height:38px; border-radius:var(--pill);
  background:var(--brand-600); color:#fff; display:flex; align-items:center;
  justify-content:center; font-family:var(--display); font-weight:700; font-size:.95rem;
  margin:0 auto 14px; box-shadow:0 0 0 6px #fff;
}
.q-step b{ display:block; font-family:var(--display); font-size:1rem; }
.q-step p{ margin-top:6px; font-size:.87rem; color:var(--muted); }

/* head-to-head comparison */
.vs{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(14px,2.2vw,30px); align-items:start; margin-top:32px; }
.vs-col{ border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,2.3vw,28px); background:#fff; }
.vs-col.good{ border-color:var(--brand-300); background:var(--surface-tint); box-shadow:var(--shadow-sm); }
.vs-tag{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); background:var(--surface-soft); border-radius:var(--pill); padding:4px 10px; margin-bottom:12px;
}
.vs-col.good .vs-tag{ color:#fff; background:var(--brand-600); }
.vs-col h3{ font-size:1.12rem; }
.vs-item{ padding:14px 0 0; margin-top:14px; border-top:1px solid var(--line); }
.vs-item b{ display:block; font-size:.95rem; font-family:var(--display); }
.vs-item p{ margin-top:5px; font-size:.9rem; color:var(--muted); }
.vs-div{
  align-self:center; width:46px; height:46px; border-radius:var(--pill); background:#fff;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; color:var(--muted); letter-spacing:.04em;
}

/* document anatomy */
.doc-mock{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md); padding:clamp(18px,2vw,26px);
}
.doc-mock-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.doc-mock-head b{ font-family:var(--display); font-size:1rem; }
.doc-mock-head span{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.doc-line{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px dashed var(--line); font-size:.92rem; }
.doc-line:last-child{ border-bottom:0; }
.doc-line b{ font-weight:600; }
.doc-line span{ color:var(--muted); font-variant-numeric:tabular-nums; }

/* definition pairs */
.defs{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:26px; }
.def{ padding:22px 0; border-top:1px solid var(--line); }
.def:nth-child(odd){ padding-right:30px; }
.def:nth-child(even){ padding-left:30px; border-left:1px solid var(--line); }
.def h4{ font-size:1.02rem; }
.def p{ margin-top:7px; color:var(--ink-2); font-size:.95rem; }

/* pull quote */
.q-quote{
  /* The rule is the blockquote's left border, so its length is the padding
     box. With 34px of vertical padding and no margin it overshot the text at
     both ends AND butted straight into the heading above and the paragraph
     below. Trading most of that padding for margin shortens the rule and
     separates it, for about the same total block height. */
  margin:clamp(32px,4vw,48px) 0; padding:clamp(10px,1.4vw,16px) 0 clamp(10px,1.4vw,16px) clamp(20px,2.6vw,34px);
  border-left:3px solid var(--brand-500);
  font-family:var(--display); font-size:clamp(1.15rem,1rem + .7vw,1.5rem);
  line-height:1.45; font-weight:500; color:var(--ink); max-width:44ch;
}

/* next-step card */
.q-next{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:clamp(20px,2.4vw,28px); border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface-tint);
}
.q-next .eyebrow{ display:flex; margin-bottom:6px; }
.q-next b{ display:block; }
.q-next b{ font-family:var(--display); font-size:1.15rem; }

@media (max-width:980px){
  .q-hero-grid{ grid-template-columns:1fr; }
  .q-figure{ order:-1; }
  .q-chain, .q-chain.q-chain-4{ grid-template-columns:1fr 1fr; gap:22px 0; }
  .q-step::before{ display:none; }
  .vs{ grid-template-columns:1fr; }
  .vs-div{ justify-self:center; }
}
@media (max-width:720px){
  .q-row{ grid-template-columns:40px 1fr; }
  .q-row .textlink{ grid-column:2; padding-top:0; }
  .defs{ grid-template-columns:1fr; }
  .def:nth-child(odd), .def:nth-child(even){ padding-left:0; padding-right:0; border-left:0; }
  .q-chain, .q-chain.q-chain-4{ grid-template-columns:1fr; gap:18px; }
}

.band .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.45); background:transparent; }
.band .btn-ghost:hover{ color:var(--navy-900); background:#fff; border-color:#fff; }

/* credibility strip */
.stat-strip{ border-block:1px solid var(--line); background:var(--surface-soft); }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat-cell{ padding:26px 0; text-align:center; border-left:1px solid var(--line); }
.stat-cell:first-child{ border-left:0; }
.stat-cell b{ display:block; font-family:var(--display); font-size:clamp(1.15rem,1rem + .6vw,1.5rem); font-weight:700; letter-spacing:-.02em; }
.stat-cell span{ display:block; margin-top:5px; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
@media (max-width:720px){
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .stat-cell:nth-child(odd){ border-left:0; }
  .stat-cell:nth-child(n+3){ border-top:1px solid var(--line); }
}

/* contact page */
.contact-methods{ display:grid; gap:14px; align-content:center; }
.contact-method{
  display:flex; align-items:center; gap:16px; padding:20px 22px; color:inherit;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  transition:border-color .16s ease, transform .16s ease;
}
.contact-method:hover{ border-color:var(--brand-300); transform:translateY(-2px); color:inherit; }
.contact-method > span:nth-child(2){ flex:1; min-width:0; }
.contact-methods, .contact-method{ min-width:0; }
.contact-method em{ overflow-wrap:anywhere; }
.contact-method b{ display:block; font-family:var(--display); font-size:1.02rem; }
.contact-method em{ display:block; font-style:normal; color:var(--brand-600); font-size:.94rem; margin-top:2px; }
.contact-method .chev, .contact-method svg:last-child{ color:var(--muted); flex:none; }
.cm-icon{
  width:44px; height:44px; border-radius:var(--pill); flex:none; display:flex;
  align-items:center; justify-content:center; background:var(--surface-tint);
  border:1px solid var(--line); color:var(--brand-600);
}
.cm-icon svg{ width:20px; height:20px; }

.contact-grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(24px,3.4vw,48px); align-items:start; }
.contact-aside{ display:grid; gap:16px; position:sticky; top:calc(var(--header-h) + 20px); }
.contact-address{ font-style:normal; margin-top:10px; line-height:1.7; color:var(--ink-2); font-size:.95rem; }

.use-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.use-chip{
  display:flex; align-items:center; gap:10px; padding:11px 16px;
  border:1px solid var(--line); border-radius:var(--pill); background:var(--surface-soft);
  font-size:.92rem; color:var(--ink-2);
}
.use-chip svg{ width:17px; height:17px; color:var(--muted); flex:none; }

@media (max-width:980px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-aside{ position:static; }
}
@media (max-width:520px){
  .contact-method{ padding:16px 18px; gap:13px; }
  .contact-method em{ font-size:.86rem; overflow-wrap:normal; }
  .cm-icon{ width:38px; height:38px; }
}

/* account path cards */
.acct-card{ display:flex; flex-direction:column; min-width:0; }
.acct-card .btn{ white-space:normal; }
.acct-card .btn-row{
  /* margin-top:auto aligns the buttons across the row, but in the tallest card
     there is no free space left to absorb, so the button landed flat against
     the last bullet. The padding is the gap that survives either way. */
  margin-top:auto; padding-top:20px;
}
.acct-tag{
  display:inline-block; align-self:flex-start; margin:4px 0 8px;
  font-size:.7rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--brand-600); background:var(--surface-tint); border-radius:var(--pill); padding:4px 10px;
}


/* affiliate commission tiers */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); margin-top:32px; }
.tier{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column; align-items:flex-start;
}
.tier.is-top{ border-color:var(--brand-600); box-shadow:var(--shadow-md); position:relative; }
.tier-name{
  font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
}
.tier.is-top .tier-name{ color:var(--brand-600); }
.tier-rate{ font-family:var(--display); font-size:clamp(2.2rem,1.7rem + 2vw,3rem); font-weight:700; line-height:1; letter-spacing:-.03em; }
.tier-label{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:6px; font-weight:600; }
.tier p{ margin-top:14px; font-size:.93rem; color:var(--ink-2); }
@media (max-width:860px){ .tiers{ grid-template-columns:1fr; } }

.card.is-current{ border-color:var(--brand-600); box-shadow:var(--shadow-sm); }

/* login type picker */
.login-picks{ display:grid; gap:14px; margin-top:26px; }
.login-pick{
  display:flex; align-items:center; gap:16px; padding:20px 22px; color:inherit; min-width:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  transition:border-color .16s ease, transform .16s ease;
}
.login-pick:hover{ border-color:var(--brand-300); transform:translateY(-2px); color:inherit; }
.login-pick > span:nth-child(2){ flex:1; min-width:0; }
.login-pick b{ display:block; font-family:var(--display); font-size:1.04rem; }
.login-pick em{ display:block; font-style:normal; color:var(--muted); font-size:.9rem; margin-top:3px; line-height:1.5; }
.login-pick svg:last-child{ color:var(--muted); flex:none; }

/* FAQ page */
.faq-hero{ background:var(--surface-tint); padding:clamp(34px,4vw,54px) 0 clamp(30px,3.5vw,44px); border-bottom:1px solid var(--line); }
.faq-hero-grid{ display:grid; grid-template-columns:1fr minmax(300px,380px); gap:clamp(24px,4vw,60px); align-items:end; margin-top:10px; }
.faq-hero h1{ font-size:clamp(1.9rem,1.4rem + 1.8vw,2.7rem); }
.faq-hero-side{ padding-bottom:4px; }
.faq-hero-note{ margin-top:12px; font-size:.9rem; color:var(--muted); }
.faq-search{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--pill); padding:4px 6px 4px 16px;
}
.faq-search span{ color:var(--muted); display:flex; flex:none; }
.faq-search span svg{ width:18px; height:18px; }
.faq-search input{
  flex:1; min-width:0; border:0; background:transparent; padding:11px 8px;
  font:inherit; font-size:.95rem; color:var(--ink); outline:none;
}

.faq-layout{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:clamp(30px,5vw,72px); align-items:start; }
.faq-side{ min-width:0; }
.faq-side{ position:sticky; top:calc(var(--header-h) + 28px); align-self:start; }
.faq-side.dim{ opacity:.45; }
.faq-side-title{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:12px;
}
.faq-nav{ display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--line); }
.faq-navlink{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:9px 14px; margin-left:-1px; border:0; border-left:2px solid transparent;
  background:transparent; font:inherit; font-size:.92rem; color:var(--ink-2);
  text-align:left; cursor:pointer; transition:color .15s ease, border-color .15s ease;
}
.faq-navlink em{ font-style:normal; font-size:.78rem; color:var(--muted); }
.faq-navlink:hover{ color:var(--brand-600); }
.faq-navlink.on{ color:var(--brand-600); font-weight:600; border-left-color:var(--brand-600); }
.faq-navlink.on em{ color:var(--brand-600); }
.faq-side-help{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
.faq-side-help p{ font-size:.9rem; color:var(--muted); margin-bottom:10px; }

.faq-main{ max-width:760px; }
.faq-count{ font-size:.92rem; color:var(--muted); margin-bottom:20px; }
.faq-group{ scroll-margin-top:calc(var(--header-h) + 24px); }
.faq-group + .faq-group{ margin-top:clamp(38px,4.5vw,58px); }
.faq-group-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.faq-group-num{ font-family:var(--display); font-size:.8rem; font-weight:700; color:var(--brand-300); }
.faq-group-head h2{ font-size:clamp(1.2rem,1.05rem + .55vw,1.45rem); }
.faq-group-count{ font-size:.82rem; color:var(--muted); margin-left:auto; }
.faq-empty{ text-align:center; padding:50px 20px; color:var(--muted); }
.faq-empty .btn{ margin-top:14px; }
.faq-a a{ color:var(--brand-600); text-decoration:underline; text-underline-offset:2px; }

@media (max-width:980px){
  .faq-hero-grid{ grid-template-columns:1fr; align-items:start; gap:22px; }
  .faq-layout{ grid-template-columns:1fr; gap:24px; }
  .faq-side{ position:static; }
  .faq-side-title, .faq-side-help{ display:none; }
  .faq-nav{
    flex-direction:row; gap:8px; border-left:0;
    overflow-x:auto; padding-bottom:4px; scrollbar-width:none;
  }
  .faq-nav::-webkit-scrollbar{ display:none; }
  .faq-navlink{
    flex:none; width:auto; margin-left:0; padding:9px 15px; gap:8px;
    border:1px solid var(--line); border-radius:var(--pill);
    background:#fff; white-space:nowrap;
  }
  .faq-navlink.on{ border-color:var(--brand-600); }
  .faq-main{ max-width:none; }
}

/* wholesale */
.ws-hero{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:clamp(28px,4vw,64px); align-items:start; margin-top:6px; }
.ws-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,2.5vw,30px); box-shadow:var(--shadow-sm); }
.ws-card-title{ font-family:var(--display); font-size:1.12rem; font-weight:700; }
.ws-card-lede{ margin-top:8px; color:var(--ink-2); font-size:.95rem; }
.creds{ margin-top:18px; display:flex; flex-direction:column; gap:14px; }
.cred{ display:flex; gap:12px; align-items:flex-start; }
.cred-tick{ color:var(--brand-600); flex:none; width:18px; display:flex; padding-top:2px; }
.cred b{ font-size:.96rem; }
.cred p{ margin-top:3px; font-size:.88rem; color:var(--muted); line-height:1.55; }
.ws-card-foot{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-size:.85rem; color:var(--muted); line-height:1.6; }
@media (max-width:900px){ .ws-hero{ grid-template-columns:1fr; } }

/* age gate */
.age-locked, .age-locked body{ overflow:hidden; }
.agegate{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(6,21,41,.78); backdrop-filter:blur(6px);
  animation:ageIn .22s ease-out;
}
.agegate.out{ opacity:0; transition:opacity .2s ease; }
@keyframes ageIn{ from{ opacity:0 } to{ opacity:1 } }
.agegate-card{
  width:100%; max-width:480px; background:#fff; border-radius:var(--r-lg);
  padding:clamp(28px,4vw,44px); text-align:center; box-shadow:0 30px 70px rgba(6,21,41,.35);
  animation:ageCard .26s cubic-bezier(.2,.8,.3,1);
}
@keyframes ageCard{ from{ opacity:0; transform:translateY(12px) scale(.98) } to{ opacity:1; transform:none } }
.agegate-logo{ height:36px; width:auto; margin:0 auto 22px; display:block; }
.agegate-card h2{ font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem); }
.agegate-card > p{ margin-top:12px; color:var(--ink-2); font-size:.97rem; line-height:1.65; }
.agegate-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.agegate-actions .btn{ flex:1 1 auto; min-width:150px; justify-content:center; }
.agegate-fine{
  margin-top:24px; padding-top:18px; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--muted); line-height:1.6;
}
@media (max-width:480px){ .agegate-actions .btn{ flex:1 1 100%; } }

/* footer newsletter */
.foot-signup{
  display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,4vw,50px);
  flex-wrap:wrap; padding-bottom:clamp(28px,3.5vw,42px); margin-bottom:clamp(28px,3.5vw,42px);
  border-bottom:1px solid var(--line);
}
.foot-signup h4{ font-size:1.12rem; }
.foot-signup p{ margin-top:8px; color:var(--ink-2); font-size:.93rem; max-width:48ch; }
.signup-form{ display:flex; gap:10px; flex:1 1 380px; max-width:480px; }
.signup-form input{
  flex:1; min-width:0; border:1px solid var(--line); background:#fff; border-radius:var(--pill);
  padding:12px 18px; font:inherit; font-size:.95rem; color:var(--ink); outline:none;
}
.signup-form input:focus{ border-color:var(--brand-600); box-shadow:0 0 0 3px rgba(11,87,184,.12); }
.signup-form .btn{ flex:none; }
.signup-done{ display:flex; align-items:center; gap:8px; color:var(--brand-600); font-weight:600; font-size:.95rem; }
.signup-done svg{ width:18px; height:18px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:640px){ .signup-form{ flex-wrap:wrap; } .signup-form .btn{ width:100%; } }

/* cookie notice */
.cookiebar{
  position:fixed; left:0; right:0; bottom:0; z-index:150; padding:14px clamp(14px,3vw,28px);
  transform:translateY(120%); transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.cookiebar.in{ transform:none; }
.cookiebar-in{
  max-width:1120px; margin:0 auto; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:0 18px 44px rgba(6,21,41,.16);
  padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,26px);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3vw,32px); flex-wrap:wrap;
}
.cookiebar-in p{ flex:1 1 380px; font-size:.9rem; color:var(--ink-2); line-height:1.6; margin:0; }
.cookiebar-in a{ color:var(--brand-600); text-decoration:underline; text-underline-offset:2px; }
.cookiebar-btns{ display:flex; gap:10px; flex:none; }
@media (max-width:620px){
  .cookiebar-btns{ width:100%; }
  .cookiebar-btns .btn{ flex:1; justify-content:center; }
}

/* checkout */
.co-hero{ padding-bottom:0; }
.co-steps{ display:flex; gap:clamp(8px,2vw,26px); list-style:none; margin:26px 0 0; padding:0 0 22px; flex-wrap:wrap; }
.co-steps li{ display:flex; align-items:center; gap:9px; font-size:.9rem; color:var(--muted); font-weight:500; }
.co-steps li span{
  width:26px; height:26px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); font-size:.82rem; font-weight:700; color:var(--muted);
}
.co-steps li span svg{ width:14px; height:14px; }
.co-steps li.on{ color:var(--ink); font-weight:600; }
.co-steps li.on span{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.co-steps li.done{ color:var(--ink-2); }
.co-steps li.done span{ background:var(--brand-50,#EAF2FD); border-color:var(--brand-300); color:var(--brand-600); }

.co-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.85fr); gap:clamp(24px,4vw,56px); align-items:start; }
.co-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); }
.co-card h2{ font-size:clamp(1.2rem,1.05rem + .6vw,1.45rem); }
.co-lede{ margin-top:10px; color:var(--ink-2); font-size:.95rem; line-height:1.65; }
.co-lede a, .co-next a{ color:var(--brand-600); text-decoration:underline; text-underline-offset:2px; }
.co-card .form{ margin-top:22px; }

.co-sum{ background:var(--surface-tint); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,2.4vw,26px); position:sticky; top:calc(var(--header-h) + 24px); }
.co-sum-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.co-sum-head h3{ font-size:1.02rem; }
.co-lines{ margin-top:18px; display:flex; flex-direction:column; gap:14px; }
.co-line{ display:grid; grid-template-columns:48px 1fr auto; gap:12px; align-items:center; }
.co-thumb{ position:relative; width:48px; height:48px; background:#fff; border:1px solid var(--line); border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.co-thumb img{ max-width:80%; max-height:80%; object-fit:contain; }
.co-qty{ position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:var(--navy-800); color:#fff; font-size:.68rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.co-line b{ display:block; font-size:.9rem; line-height:1.35; }
.co-line small{ color:var(--muted); font-size:.8rem; }
.co-amt{ font-weight:600; font-size:.9rem; white-space:nowrap; }
.co-totals{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px; }
.co-totals > div{ display:flex; justify-content:space-between; gap:12px; font-size:.9rem; color:var(--ink-2); }
.co-totals em{ font-style:normal; color:var(--muted); font-size:.85em; }
.co-nudge{ font-size:.82rem; color:var(--brand-600); }
.co-grand{ margin-top:6px; padding-top:12px; border-top:1px solid var(--line); font-family:var(--display); font-size:1.05rem; font-weight:700; color:var(--ink) !important; }
.co-fine{ margin-top:16px; font-size:.8rem; color:var(--muted); line-height:1.6; }

.pay-opt{ display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-md,12px); cursor:pointer; }
.pay-opt.on{ border-color:var(--brand-600); box-shadow:0 0 0 3px rgba(11,87,184,.1); }
.pay-opt input{ margin-top:3px; accent-color:var(--brand-600); }
.pay-body b{ display:block; font-size:1rem; }
.pay-body small{ display:block; margin-top:5px; color:var(--ink-2); font-size:.88rem; line-height:1.6; }
.pay-note{ display:flex; gap:10px; margin-top:14px; padding:14px 16px; background:var(--surface-tint); border-radius:var(--r-md,12px); font-size:.87rem; color:var(--ink-2); line-height:1.6; }
.pay-note svg{ width:18px; height:18px; flex:none; color:var(--brand-600); margin-top:1px; }

.co-done{ text-align:left; }
.co-tick{ width:46px; height:46px; border-radius:50%; background:var(--brand-600); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.co-tick svg{ width:24px; height:24px; }
.zelle{ margin-top:24px; border:1px solid var(--brand-300); border-radius:var(--r-lg); overflow:hidden; }
.zelle-head{ background:var(--surface-tint); padding:14px 20px; border-bottom:1px solid var(--line); font-family:var(--display); }
.zelle-rows{ margin:0; padding:6px 20px 18px; }
.zelle-rows > div{ display:grid; grid-template-columns:150px 1fr; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); align-items:center; }
.zelle-rows > div:last-child{ border-bottom:0; }
.zelle-rows dt{ font-size:.85rem; color:var(--muted); font-weight:600; }
.zelle-rows dd{ margin:0; font-size:.93rem; }
.co-next-h{ margin-top:30px; font-size:1.02rem; }
.co-next{ margin:14px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:10px; }
.co-next li{ font-size:.93rem; color:var(--ink-2); line-height:1.6; }
@media (max-width:900px){
  .co-grid{ grid-template-columns:1fr; }
  .co-sum{ position:static; order:-1; }
  .zelle-rows > div{ grid-template-columns:1fr; gap:4px; }
}

.co-form{ margin-top:22px; display:flex; flex-direction:column; gap:16px; }
.co-form .frow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.co-form .frow.one{ grid-template-columns:1fr; }
.co-form .frow.three{ grid-template-columns:1.4fr 1fr .8fr; }
.co-form .flabel{ display:block; margin-bottom:7px; font-size:.86rem; font-weight:600; color:var(--ink-2); }
.co-form .flabel em{ font-style:normal; font-weight:500; color:var(--muted); }
.co-form .field{ width:100%; }
.co-check{ display:flex; gap:11px; align-items:flex-start; font-size:.89rem; color:var(--ink-2); line-height:1.6; cursor:pointer; }
.co-check input{ margin-top:3px; flex:none; accent-color:var(--brand-600); width:16px; height:16px; }
.co-check a{ color:var(--brand-600); text-decoration:underline; text-underline-offset:2px; }
@media (max-width:640px){
  .co-form .frow, .co-form .frow.three{ grid-template-columns:1fr; }
}

.zelle-body{ display:grid; grid-template-columns:auto minmax(0,1fr); max-width:100%; gap:clamp(18px,3vw,30px); padding:20px; align-items:start; }
.zelle-qr{ text-align:center; flex:none; }
.zelle-qr img{ width:160px; height:160px; display:block; border:1px solid var(--line); border-radius:10px; padding:8px; background:#fff; image-rendering:pixelated; }
.zelle-qr small{ display:block; margin-top:8px; font-size:.78rem; color:var(--muted); }
.zelle-rows{ margin:0; padding:0; }
.zelle-rows > div{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:14px; padding:11px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.zelle-rows > div:first-child{ padding-top:0; }
.zelle-rows > div:last-child{ border-bottom:0; padding-bottom:0; }
.zelle-rows dd em{ display:block; font-style:normal; font-size:.8rem; color:var(--muted); margin-top:3px; }
.copy{
  display:inline-flex; align-items:center; gap:7px; padding:4px 9px; margin:-4px -9px;
  border:0; border-radius:7px; background:transparent; font:inherit; font-size:.93rem;
  color:var(--ink); cursor:pointer; text-align:left; transition:background .15s ease;
}
.copy:hover{ background:var(--surface-tint); color:var(--brand-600); }
.copy svg{ width:15px; height:15px; flex:none; color:var(--muted); }
.copy:hover svg{ color:var(--brand-600); }
.zelle-alert{
  display:flex; gap:10px; margin:0; padding:14px 20px; border-top:1px solid var(--line);
  background:var(--surface-tint); font-size:.86rem; color:var(--ink-2); line-height:1.6;
}
.zelle-alert svg{ width:17px; height:17px; flex:none; color:var(--brand-600); margin-top:2px; }
@media (max-width:640px){
  .zelle-body{ grid-template-columns:minmax(0,1fr); justify-items:center; padding:18px 16px; }
  .zelle-rows{ width:100%; min-width:0; }
  .zelle-rows > div{ grid-template-columns:minmax(0,1fr); gap:3px; }
  .zelle-rows dd{ min-width:0; overflow-wrap:anywhere; }
  .copy{ max-width:100%; overflow-wrap:anywhere; }
}

.co-pending{ font-style:normal; color:var(--muted); font-size:.85em; }

/* ---------- forms ---------- */
.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); box-shadow:var(--shadow-sm); }
.fieldset{ border:0; padding:0; margin:0 0 30px; }
.fieldset legend{
  font-family:var(--display); font-weight:600; font-size:1.05rem; padding:0; margin-bottom:4px;
}
.fieldset .hint{ font-size:.88rem; color:var(--muted); margin-bottom:16px; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.frow.one{ grid-template-columns:1fr; }
.flabel{ display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; color:var(--ink-2); }
.req{ color:#C0392B; }
select.field{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2365788E' stroke-width='1.6'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px; padding-right:34px;
}
textarea.field{ min-height:120px; resize:vertical; }

/* ---------- note strip ---------- */
.note{
  display:flex; gap:12px; align-items:flex-start; background:#EAF2FD;
  border-radius:var(--r); padding:16px 18px; font-size:.88rem; color:var(--ink-2);
}
.note svg{ width:18px; height:18px; color:var(--brand-600); flex:none; margin-top:2px; }
.rou{
  background:var(--surface-tint); border-top:1px solid var(--line);
  font-size:.82rem; color:var(--muted); padding:22px 0; text-align:center;
}

/* ---------- use-policy icons ---------- */
.uses{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; text-align:center; }
.uses div{ font-size:.92rem; color:var(--ink); }
.uses svg{ width:30px; height:30px; color:var(--brand-600); margin:0 auto 12px; }

/* ---------- footer ---------- */
.site-footer{ background:var(--surface-tint); border-top:1px solid var(--line); padding:54px 0 26px; }
.foot-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:32px; }
.foot-top h5{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin:0 0 14px; font-weight:700; }
.foot-top a, .foot-top p{ display:block; color:var(--ink-2); font-size:.9rem; margin-bottom:9px; }
.foot-top a:hover{ color:var(--brand-600); }
.foot-brand p{ max-width:34ch; color:var(--muted); margin-top:16px; }
.foot-bot{ border-top:1px solid var(--line-strong); margin-top:36px; padding-top:20px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.82rem; color:var(--muted); }
.foot-legal{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.foot-legal p{ font-size:.78rem; color:var(--muted); line-height:1.65; margin-bottom:10px; max-width:none; }
.foot-legal p:last-child{ margin-bottom:0; }
.social{ display:flex; gap:8px; }
.social a{ width:30px; height:30px; border-radius:var(--pill); background:var(--brand-600); color:#fff; display:flex; align-items:center; justify-content:center; }
.social svg{ width:14px; height:14px; }

/* ---------- cart drawer ---------- */
.scrim{ position:fixed; inset:0; background:rgba(6,21,41,.5); z-index:80; display:none; }
.scrim.open{ display:block; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(430px,100%); background:#fff; z-index:85;
  display:flex; flex-direction:column; transform:translateX(100%); transition:transform .22s ease;
}
.drawer.open{ transform:none; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.drawer-body{ flex:1; overflow-y:auto; padding:18px 22px; }
.drawer-foot{ border-top:1px solid var(--line); padding:18px 22px; background:var(--surface-soft); }
.cart-line{ display:grid; grid-template-columns:70px 1fr auto; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.cart-line .thumb{ background:var(--surface-card); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; padding:7px; height:70px; }
.cart-line .thumb svg{ height:100%; }
.cart-line b{ font-weight:600; font-size:.93rem; display:block; }
.cart-line small{ color:var(--muted); font-size:.8rem; }
.ship-bar{ height:6px; background:var(--line); border-radius:var(--pill); overflow:hidden; margin:8px 0 14px; }
.ship-bar i{ display:block; height:100%; background:var(--green-500); }
.empty{ text-align:center; padding:60px 10px; color:var(--muted); }

/* ---------- search overlay ---------- */
.search-panel{
  position:fixed; top:0; left:0; right:0; background:#fff; z-index:86; padding:22px var(--gut);
  border-bottom:1px solid var(--line); box-shadow:var(--shadow); display:none;
}
.search-panel.open{ display:block; }
.search-in{ max-width:var(--maxw); margin-inline:auto; display:flex; gap:10px; align-items:center; }
.search-res{ max-width:var(--maxw); margin:16px auto 0; display:grid; gap:4px; }
.search-res a{ display:flex; gap:12px; align-items:center; padding:9px 10px; border-radius:var(--r-sm); color:var(--ink); }
.search-res a:hover{ background:var(--surface-tint); }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--navy-800); color:#fff; padding:13px 20px; border-radius:var(--pill);
  font-size:.9rem; z-index:95; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%); }

/* ---------- page hero (interior) ---------- */
.phero{ padding:clamp(44px,5vw,76px) 0 clamp(36px,4vw,56px); background:linear-gradient(180deg,#F4F9FF,#fff); border-bottom:1px solid var(--line); }
.phero h1{ max-width:16ch; }
.phero .lede{ margin-top:18px; }
.crumbs{ font-size:.82rem; color:var(--muted); margin-bottom:16px; }
.shop-top .crumbs{ margin-bottom:10px; }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--brand-600); }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.split.wide-left{ grid-template-columns:1.15fr .85fr; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav{ display:none; }
  .pill-label{ display:none; }
  .pill-btn{ padding:10px 14px; gap:7px; }
  .hdr-actions{ gap:6px; }
  .burger{ display:inline-flex; }
  .hdr{ justify-content:space-between; }
  .logo{ margin-right:auto; }
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .uses{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .hero{
    background-image:radial-gradient(900px 480px at 78% 92%, rgba(23,108,207,.34), transparent 64%);
  }
  .hero-in{ min-height:0; flex-direction:column; align-items:stretch; padding:calc(40px + var(--header-h)) 0 0; }
  .hero-copy{ max-width:none; }
  .hero-photo{ display:block; margin:32px calc(var(--gut) * -1) 0; }
  .hero-photo img{ width:100%; aspect-ratio:16/11; object-fit:cover; object-position:66% center; display:block; }
  .hero h1{ max-width:none; }
  .stats-in{ grid-template-columns:repeat(2,1fr); row-gap:26px; }
  .stat{ justify-content:flex-start; }
  .stat:nth-child(odd)::before{ display:none; }
  .stat:nth-child(n+3)::after{
    content:""; position:absolute; top:-15px; left:8%; right:8%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  }
  .pdp{ grid-template-columns:1fr; }
  .split, .split.wide-left{ grid-template-columns:1fr; }
  .band-in{ grid-template-columns:1fr; gap:26px; }
  .std-list{ justify-content:flex-start; }
  .glass-wide{ grid-template-columns:1fr; text-align:center; }
  .glass-wide-art{ display:flex; justify-content:center; }
  .glass-wide-art{ justify-content:center; }
  .glass-wide-art img{ margin:calc(-1 * clamp(22px,5vw,42px)) auto 4px; width:min(340px,90%); }
  .glass-wide-copy p{ max-width:none; }
  .glass-wide-copy p{ margin-inline:auto; }
  .glass-wide-copy .btn-row{ justify-content:center; }
  .band .rule{ height:1px; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .compare{ grid-template-columns:1fr; }
  .faq-split{ grid-template-columns:1fr; gap:28px; }
  .faq-help-text{ margin-right:0; }
  .faq-help-link{ flex:1 1 100%; }
  .faq-intro .lede{ max-width:none; }
}
.only-mobile{ display:none; }
@media (max-width:720px){
  :root{ --gut:18px; }
  .shop-head{ align-items:flex-start; }
  .shop-head .field{ max-width:none; }
  .only-mobile{ display:flex; margin-bottom:8px; }
  .pcard-quick{ display:none; }
  .chips-scroll{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut); padding-bottom:4px; }
  .chips-scroll::-webkit-scrollbar{ display:none; }
  .chips-scroll .chip{ white-space:nowrap; flex:none; }
  .g-3{ grid-template-columns:repeat(2,1fr); }
  .g-2{ grid-template-columns:1fr; }
  .frow{ grid-template-columns:1fr; }
  .sec-head{ align-items:flex-start; }
  .spec-table th{ width:auto; display:block; border-bottom:0; padding-bottom:2px; }
  .spec-table td{ display:block; padding-top:0; }
  .pcard-media{ padding:16px; }
}
@media (max-width:620px){
  .posts-grid{ grid-template-columns:1fr !important; }
  .flow-step{ flex-basis:100%; }
}
@media (max-width:520px){
  .g-3, .g-4{ grid-template-columns:1fr 1fr; }
  .cat{ min-height:200px; padding:14px; }
  .cat b{ font-size:.95rem; line-height:1.25; }
  .cat::after{ background:linear-gradient(180deg, rgba(6,21,41,0) 26%, rgba(6,21,41,.5) 58%, rgba(6,21,41,.88) 100%); }
  .cat.has-photo::after{ background:linear-gradient(180deg, rgba(6,21,41,0) 20%, rgba(6,21,41,.55) 54%, rgba(6,21,41,.92) 100%); }
  .cat .cat-art .pimg{ height:82%; transform:translateY(-18%); }
  .pcard-badges{ gap:4px; top:9px; left:9px; flex-wrap:nowrap; }
  .pcard-badges .badge{ font-size:.62rem; padding:2px 7px; }
  .pcard-badges .badge:nth-child(n+2){ display:none; }
  h1{ font-size:clamp(1.8rem, 1.05rem + 3.4vw, 2.5rem); }
  .uses{ grid-template-columns:repeat(2,1fr); }
  .foot-top{ grid-template-columns:1fr; }
  .pcard h3{ font-size:1rem; }
  .pcard-desc{ display:none; }
}

@media (max-width:860px){ .grid.accts-grid{ grid-template-columns:1fr; } }

/* ---------- review mode ---------- */
.amino-review-note{
  border:1px solid var(--line-strong); background:var(--surface-tint); color:var(--ink-2);
  border-radius:var(--r); padding:14px 16px; margin-bottom:22px; font-size:.92rem; line-height:1.55;
}
.amino-review-note strong{ color:var(--ink); }
.amino-review-note.is-admin{ background:var(--ph-bg); border-color:var(--ph-line); color:var(--ph); }


/* ---------- WooCommerce controls in the design's language ---------- */

/* Woo renders its own buttons with .button/.alt; give them the .btn look
   rather than restyling every template. */
.single_add_to_cart_button,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.wc-proceed-to-checkout .checkout-button,
#place_order,
.woocommerce-Button{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border-radius:var(--pill); border:1px solid transparent;
  padding:13px 26px; font-weight:600; font-size:.95rem; cursor:pointer;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
  text-align:center; white-space:nowrap;
  background:var(--brand-600); color:#fff; font-family:var(--text);
}
.single_add_to_cart_button:hover,
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.wc-proceed-to-checkout .checkout-button:hover,
#place_order:hover,
.woocommerce-Button:hover{ background:var(--brand-700); color:#fff; }

/* The product page's buy row: quantity beside a button that fills the rest. */
form.cart{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:4px; }
form.cart .quantity{
  display:inline-flex; align-items:center;
  border:1px solid var(--line-strong); border-radius:var(--pill); overflow:hidden;
}
form.cart .quantity input.qty{
  width:74px; height:44px; border:0; text-align:center; font-weight:600;
  color:var(--ink); background:none; font-family:var(--text);
}
form.cart .single_add_to_cart_button{ flex:1 1 220px; }
form.cart .variations{ flex:1 1 100%; }
form.cart .variations{ width:100%; border-collapse:collapse; }
form.cart .variations td, form.cart .variations th{
  padding:0 0 12px; text-align:left; vertical-align:middle;
}
form.cart .variations th{ width:70px; padding-right:14px; }
form.cart .variations label{ font-weight:600; font-size:.9rem; color:var(--ink); margin:0; display:block; }
form.cart .variations select{
  width:100%; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:11px 14px; font-family:var(--text); color:var(--ink); background:#fff;
}
.woocommerce-variation-price{ flex:1 1 100%; }

/* Secondary Woo buttons (cart updates, "return to shop") read as ghosts. */
.woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.checkout-button){
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--pill); border:1px solid var(--line-strong);
  padding:11px 22px; font-weight:600; font-size:.9rem; cursor:pointer;
  background:transparent; color:var(--ink); font-family:var(--text);
}
.woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.checkout-button):hover{
  border-color:var(--brand-500); color:var(--brand-700);
}

/* WooCommerce's stylesheet paints .button.alt in its own purple with selectors
   like ".woocommerce button.button.alt" — more specific than a bare class, so
   the colour has to be restated at that weight to win. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce button.single_add_to_cart_button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order{
  background-color:var(--brand-600); color:#fff; border-radius:var(--pill);
  font-weight:600; font-family:var(--text);
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover{
  background-color:var(--brand-700); color:#fff;
}

/* Woo's secondary buttons, same treatment at the same weight. */
.woocommerce button.button:not(.alt):not(.single_add_to_cart_button),
.woocommerce a.button:not(.alt):not(.checkout-button){
  background-color:transparent; color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--pill); font-weight:600;
}
.woocommerce button.button:not(.alt):not(.single_add_to_cart_button):hover,
.woocommerce a.button:not(.alt):not(.checkout-button):hover{
  background-color:transparent; border-color:var(--brand-500); color:var(--brand-700);
}

/* ---------- cart page ---------- */
.cart-lines{ margin-top:6px; }
.cart-line{
  display:grid; grid-template-columns:76px 1fr auto; gap:16px; align-items:center;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.cart-line:last-child{ border-bottom:0; }
.cart-line-media{ background:var(--surface-card); border-radius:var(--r-sm); overflow:hidden; }
.cart-line-media img{ width:100%; height:auto; }
.cart-line-body b{ display:block; font-size:1rem; font-weight:600; }
.cart-line-body b a{ color:inherit; }
.cart-line-body b a:hover{ color:var(--brand-600); }
.cart-line-body small{ display:block; color:var(--muted); font-size:.85rem; margin-top:2px; }
.cart-line-qty{ display:flex; align-items:center; gap:14px; margin-top:10px; }
.cart-line-qty .quantity{
  display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--pill); overflow:hidden;
}
.cart-line-qty .quantity input.qty{
  width:66px; height:38px; border:0; text-align:center; font-weight:600;
  color:var(--ink); background:none; font-family:var(--text);
}
.cart-line-remove{ font-size:.85rem; color:var(--muted); }
.cart-line-remove:hover{ color:#B3261E; }
.cart-line-amt{ font-weight:600; white-space:nowrap; }
.cart-actions{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin-top:20px; padding-top:20px; border-top:1px solid var(--line);
}
.cart-coupon{ display:flex; gap:8px; flex:1 1 280px; }
.cart-coupon .field{ flex:1; }
.cart-actions .textlink{ margin-left:auto; }
.wc-proceed-to-checkout{ margin-top:18px; }
.wc-proceed-to-checkout .checkout-button{ width:100%; }

/* ---------- WooCommerce chrome, in the design's language ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice{
  border:1px solid var(--line-strong); border-left-width:3px; background:var(--surface-tint);
  border-radius:var(--r-sm); padding:14px 16px; margin:0 0 20px; list-style:none;
  font-size:.92rem; color:var(--ink-2);
}
.woocommerce-error{ border-color:#E7B4AE; border-left-color:#B3261E; background:#FDF4F3; color:#7A1C15; }
.woocommerce-message{ border-left-color:var(--green-500); }
.woocommerce-info{ border-left-color:var(--brand-500); }
/* WooCommerce puts the action button first in the markup and floats it right,
   which leaves the message wrapping in a narrow column beside it — three
   cramped lines next to a button, which is what the temporary-password notice
   looked like. Flex instead: the text takes the room it needs and the button
   sits at the end, where it reads as the action rather than the headline. */
.woocommerce-message,
.woocommerce-info{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.woocommerce-message .button,
.woocommerce-info .button{
  order:2; margin-left:auto; flex:none; white-space:nowrap;
}
@media (max-width:520px){
  .woocommerce-message,
  .woocommerce-info{ align-items:flex-start }
  .woocommerce-message .button,
  .woocommerce-info .button{ margin-left:0 }
}

/* Checkout and account form rows */
.woocommerce form .form-row{ margin:0 0 16px; padding:0; display:block; }
.woocommerce form .form-row label,
.co-form .form-row label{
  display:block; font-weight:600; font-size:.9rem; color:var(--ink); margin-bottom:7px;
}
.woocommerce form .form-row .required{ color:var(--brand-600); text-decoration:none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.co-form input[type="text"], .co-form input[type="email"], .co-form input[type="tel"],
.co-form input[type="password"], .co-form select, .co-form textarea{
  width:100%; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:12px 14px; font-family:var(--text); font-size:.95rem; color:var(--ink); background:#fff;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.co-form input:focus, .co-form select:focus, .co-form textarea:focus{
  outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(18,104,214,.12);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{ border-color:#B3261E; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last{
  width:calc(50% - 8px); display:inline-block; vertical-align:top;
}
.woocommerce form .form-row-first{ margin-right:16px; }
.co-check label, .form-row.co-check label{ display:flex; gap:10px; align-items:flex-start; font-weight:400; color:var(--ink-2); }
.co-check input[type="checkbox"]{ margin-top:4px; }

/* Order review table on checkout */
.woocommerce-checkout-review-order-table{ width:100%; border-collapse:collapse; margin-bottom:22px; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{
  padding:12px 0; border-bottom:1px solid var(--line); font-size:.94rem; text-align:left;
}
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child{ text-align:right; }
.woocommerce-checkout-review-order-table tfoot th{ font-weight:600; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td{ font-size:1.05rem; border-bottom:0; }

/* Payment box */
#payment{ background:var(--surface-soft); border:1px solid var(--line); border-radius:var(--r); padding:18px; }
#payment ul.payment_methods{ list-style:none; margin:0 0 16px; padding:0; border-bottom:1px solid var(--line); padding-bottom:16px; }
#payment ul.payment_methods li{ margin-bottom:8px; }
#payment ul.payment_methods label{ font-weight:600; }
#payment .payment_box{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:14px; margin-top:10px; font-size:.9rem; color:var(--ink-2);
}
#payment .place-order{ margin:0; }
#payment #place_order{ width:100%; }

/* My account */
.woocommerce-MyAccount-navigation ul{ list-style:none; padding:0; margin:0 0 26px; display:flex; flex-wrap:wrap; gap:8px; }
.woocommerce-MyAccount-navigation li a{
  display:inline-flex; padding:9px 16px; border:1px solid var(--line); border-radius:var(--pill);
  font-size:.9rem; font-weight:600; color:var(--ink-2); background:#fff;
}
.woocommerce-MyAccount-navigation li.is-active a{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.woocommerce-orders-table, .woocommerce-table--order-details{ width:100%; border-collapse:collapse; }
.woocommerce-orders-table th, .woocommerce-orders-table td,
.woocommerce-table--order-details th, .woocommerce-table--order-details td{
  padding:12px; border-bottom:1px solid var(--line); text-align:left; font-size:.93rem;
}

@media (max-width:760px){
  .cart-line{ grid-template-columns:64px 1fr; }
  .cart-line-amt{ grid-column:2; text-align:right; }
  .woocommerce form .form-row-first, .woocommerce form .form-row-last{ width:100%; margin-right:0; }
}

/* WooCommerce's checkout CSS floats #order_review into a 48% column for its
   own two-column layout. Ours is already a grid, so that just squeezes the
   payment step into a narrow strip. */
.co-form #order_review,
.co-form #customer_details,
.woocommerce-checkout .co-form #order_review,
.woocommerce-checkout .co-form #customer_details{
  width:100%; float:none; clear:both;
}
.co-step > .co-card{ width:100%; }

/* ---------- account area ---------- */
.acct-grid{
  display:grid; grid-template-columns:minmax(200px,.5fr) minmax(0,1.6fr);
  gap:clamp(20px,3vw,44px); align-items:start;
}
.acct-nav{
  background:var(--surface-tint); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:14px;
  position:sticky; top:calc(var(--header-h) + 24px);
}
.acct-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.acct-nav li a{
  display:block; padding:10px 14px; border-radius:var(--r-sm);
  font-size:.93rem; font-weight:600; color:var(--ink-2);
}
.acct-nav li a:hover{ background:#fff; color:var(--brand-600); }
.acct-nav li.is-active a{ background:var(--brand-600); color:#fff; }
.acct-content{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px);
}
.acct-content > h2:first-child, .acct-content > h3:first-child{ margin-top:0; }
.acct-section + .acct-section{ margin-top:26px; padding-top:26px; border-top:1px solid var(--line); }
.acct-alert{
  border:1px solid var(--line-strong); border-left:3px solid var(--brand-500);
  background:var(--surface-tint); border-radius:var(--r-sm);
  padding:14px 16px; margin-bottom:22px; font-size:.93rem; line-height:1.6; color:var(--ink-2);
}
.acct-alert strong{ display:block; color:var(--ink); margin-bottom:4px; }
.acct-alert a{ display:inline-block; margin-top:6px; font-weight:600; }
.acct-orders{ border-top:1px solid var(--line); }
.acct-order{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.acct-order b{ font-size:1rem; }
.acct-order b a{ color:inherit; }
.acct-order b a:hover{ color:var(--brand-600); }
.acct-order small{ display:block; color:var(--muted); font-size:.85rem; margin-top:3px; }
.acct-order-amt{ text-align:right; font-weight:600; white-space:nowrap; }
.acct-order-amt .textlink{ display:block; font-weight:600; font-size:.85rem; margin-top:3px; }

/* WooCommerce's own account tables and forms, inside our cards */
.acct-content .woocommerce-table--order-details,
.acct-content .woocommerce-orders-table{ width:100%; border-collapse:collapse; }
.acct-content .woocommerce-customer-details{ margin-top:22px; }
.acct-content address{
  font-style:normal; border:1px solid var(--line); border-radius:var(--r);
  padding:16px; background:var(--surface-soft); line-height:1.7; font-size:.94rem;
}
.acct-content .woocommerce-column__title{ font-size:1.05rem; margin:22px 0 10px; }
.acct-content h2, .acct-content h3{ font-size:1.05rem; }
.acct-content .woocommerce-Address-title h2, .acct-content .woocommerce-Address-title h3{ margin-bottom:8px; }
.acct-content .woocommerce-Addresses{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.acct-content legend{ font-weight:600; padding:0 0 8px; }
.acct-content fieldset{ border:0; padding:0; margin:22px 0 0; }

@media (max-width:860px){
  .acct-grid{ grid-template-columns:1fr; }
  .acct-nav{ position:static; }
  .acct-nav ul{ flex-direction:row; flex-wrap:wrap; }
  .acct-content .woocommerce-Addresses{ grid-template-columns:1fr; }
}

/* ---------- order tracking ---------- */
.track-form{ max-width:520px; margin-inline:auto; }
.eyebrow-plain{
  font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;
}
.track-lines{ margin-top:20px; border-top:1px solid var(--line); }
.track-line{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:.94rem; color:var(--ink-2);
}
.track-line.track-total{ font-weight:600; color:var(--ink); border-bottom:0; }
.track .zelle{ margin-top:22px; }


/* Keyboard users land on the nav on every page; this gets them past it. */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand-600); color:#fff; padding:12px 20px;
  border-radius:0 0 var(--r-sm) 0; font-weight:600; font-size:.95rem;
}
.skip-link:focus{ left:0; color:#fff; }


/* ---------- shipment tracking ---------- */
.tracking-block{
  margin-top:22px; padding:16px 18px;
  border:1px solid var(--line-strong); border-left:3px solid var(--green-500);
  border-radius:var(--r); background:var(--surface-soft);
}
.tracking-head{ margin:0; font-size:.9rem; color:var(--ink-2); }
.tracking-number{
  margin:4px 0 12px; font-family:var(--text); font-size:1.15rem;
  font-weight:700; letter-spacing:.02em; color:var(--ink);
}

/* WooCommerce's own selects — the catalogue ordering dropdown especially —
   render as raw browser controls otherwise. */
.woocommerce-ordering select,
.woocommerce select.orderby,
.woocommerce-page select.orderby{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--line-strong); border-radius:var(--pill);
  padding:10px 38px 10px 16px; font-family:var(--text); font-size:.9rem;
  font-weight:600; color:var(--ink); background-color:#fff; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2365788E' stroke-width='1.7'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
}
.woocommerce-ordering select:focus, .woocommerce select.orderby:focus{
  outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(18,104,214,.12);
}
.woocommerce-result-count{ color:var(--muted); font-size:.9rem; margin:0; }


/* Woo greys its add-to-cart out until a variation is chosen. Left alone that
   reads as a washed-out purple from its own stylesheet. */
.woocommerce button.single_add_to_cart_button.disabled,
.woocommerce button.single_add_to_cart_button:disabled,
.woocommerce button.button.alt.disabled{
  background-color:var(--brand-600); color:#fff; opacity:.4; cursor:not-allowed;
}
.woocommerce button.single_add_to_cart_button.disabled:hover,
.woocommerce button.button.alt.disabled:hover{ background-color:var(--brand-600); }

/* ---------- Start a business ----------
   This page's markup references classes the prototype never styled — its own
   copy of the page renders the same way, so this is unfinished source rather
   than a porting loss. Styled here in the established language: the dark hero
   the white buttons were clearly written for, and numbered rows like the
   standards chain. */
.pitch-hero{
  background:linear-gradient(160deg, var(--navy-900), var(--navy-700));
  color:#fff; padding:clamp(54px,7vw,92px) 0 clamp(46px,6vw,74px);
}
.pitch-hero .crumbs, .pitch-hero .crumbs a{ color:var(--on-dark-muted); }
.pitch-hero .crumbs a:hover{ color:#fff; }
.pitch-hero h1{ color:#fff; margin-top:10px; }
.pitch-hero .lede{ color:var(--on-dark-muted); }
.biz-eye{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-300); margin-bottom:14px;
}
.btn-ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.34); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.08); border-color:#fff; color:#fff; }
.pitch-hero .btn-row{ margin-top:26px; }
.pitch-note{
  margin-top:20px; font-size:.88rem; color:var(--on-dark-muted); max-width:70ch;
}

.pitch-rows{ display:grid; gap:clamp(18px,2.4vw,26px); margin-top:clamp(28px,4vw,44px); }
.pitch-row{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px); box-shadow:var(--shadow-sm);
}
.pitch-row-head{ display:flex; align-items:flex-start; gap:16px; }
.pitch-row-head h3{ font-size:1.18rem; font-weight:600; letter-spacing:-.015em; }
.pitch-row-head p{ margin:6px 0 0; color:var(--ink-2); font-size:.95rem; max-width:62ch; }
.pitch-num{
  flex:none; font-family:var(--text); font-size:.82rem; font-weight:700;
  color:var(--brand-600); background:var(--surface-card);
  border-radius:var(--pill); padding:6px 11px; letter-spacing:.04em;
}
.pitch-row .icon-chip{ flex:none; }
.pitch-list{ margin:18px 0 0; padding-top:18px; border-top:1px solid var(--line); }
.pitch-list li{ color:var(--ink-2); font-size:.93rem; }

@media (max-width:640px){
  .pitch-row-head{ flex-wrap:wrap; gap:12px; }
}

/* ==========================================================================
   Wholesale account pricing
   ========================================================================== */

/* Green rather than the brand blue: it should read as a state the account is
   in, not as another link or button. */
.wholesale-band{background:#EAF7F1;border-block:1px solid #BFE6D3;color:#14503A}
.wholesale-band .wrap{padding-block:12px;font-size:.92rem}
.wholesale-band strong{color:#0E3D2C}

.wholesale-tag{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 9px;
  border-radius:var(--pill);background:#EAF7F1;border:1px solid #BFE6D3;color:#14503A;
  font-family:var(--text);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* The struck-through retail price is decoration for a figure the account
   holder no longer pays; it is hidden from assistive tech at the markup. */
.price-lg del,.pcard-price del,.woocommerce-variation-price del{opacity:.55;font-weight:500;margin-right:6px}
.price-lg del .amount,.pcard-price del .amount{font-size:.75em}
.price-lg ins,.pcard-price ins,.woocommerce-variation-price ins{text-decoration:none;background:none}

/* wp-admin's products list: the column is a health check, so a missing price
   should look wrong. */
.column-amino_wholesale{width:110px}

/* ==========================================================================
   Wholesale agreement: the signing pane
   ========================================================================== */

/* The applicant reads the agreement in place rather than in a second tab, so
   the step can take a signature against what is actually on screen. It scrolls
   on its own, and is focusable so it can be read with the keyboard. */
.agreement-pane{
  max-height:min(52vh,460px); overflow-y:auto; overscroll-behavior:contain;
  padding:22px 24px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-soft);
}
.agreement-pane:focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px }
.agreement-pane h2{
  font-size:1rem; font-weight:700; color:var(--ink); margin:26px 0 8px;
  padding-top:16px; border-top:1px solid var(--line);
}
.agreement-pane h2:first-child{ margin-top:0; padding-top:0; border-top:0 }
.agreement-pane p{ font-size:.9rem; line-height:1.68; color:var(--ink-2); margin-bottom:12px }
.agreement-pane .bullets{ margin-bottom:16px }
.agreement-pane .bullets li{ font-size:.9rem; line-height:1.6 }
.agreement-pane > :last-child{ margin-bottom:0 }

/* A typed signature should look like one, so it is not mistaken for another
   text field to fill in. */
.sig-field{ font-size:1.15rem; letter-spacing:.01em }

@media (max-width:640px){
  .agreement-pane{ max-height:46vh; padding:18px }
}

/* ==========================================================================
   Affiliate dashboard
   ========================================================================== */

.aff-link{ display:flex; gap:10px; align-items:stretch; max-width:640px }
.aff-link .field{ flex:1; font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace); font-size:.9rem }
.aff-link .btn{ white-space:nowrap }

.aff-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px }
.aff-stat{ padding:18px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-soft) }
.aff-stat-n{ display:block; font-family:var(--display); font-size:1.5rem; font-weight:700; color:var(--ink) }
.aff-stat-l{ display:block; margin-top:4px; font-size:.82rem; color:var(--muted) }

.aff-table{ width:100%; border-collapse:collapse; font-size:.92rem }
.aff-table th,.aff-table td{ padding:11px 12px; text-align:left; border-bottom:1px solid var(--line) }
.aff-table th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600 }
.aff-table tbody tr:last-child td{ border-bottom:0 }

/* Status reads at a glance: paid and payable are settled, pending is waiting,
   void is the one worth noticing. */
.aff-pill{ display:inline-block; padding:3px 10px; border-radius:var(--pill);
  font-size:.75rem; font-weight:700; letter-spacing:.02em }
.aff-pill.is-approved{ background:#EAF7F1; border:1px solid #BFE6D3; color:#14503A }
.aff-pill.is-paid{ background:var(--surface-card); border:1px solid var(--line-strong); color:var(--brand-700) }
.aff-pill.is-pending{ background:var(--ph-bg); border:1px solid var(--ph-line); color:var(--ph) }
.aff-pill.is-void{ background:#FBEBEA; border:1px solid #F0C4C1; color:#9B2C22 }

@media (max-width:860px){
  .aff-stats{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:560px){
  .aff-link{ flex-direction:column }
  .aff-table{ font-size:.86rem }
  .aff-table th,.aff-table td{ padding:9px 8px }
}

/* ==========================================================================
   Touch targets
   ========================================================================== */

/* Standalone text links read at 22–26px tall, which is a small thing to hit
   with a thumb. The padding grows the tap area and the negative margin gives
   the space straight back, so nothing moves — only the hit box changes.
   Phones only: a mouse does not need it, and on desktop the overlap could
   swallow a neighbouring click. */
@media (hover:none) and (max-width:860px){
  .textlink{ padding-block:11px; margin-block:-11px }

  /* A product card's title shares its destination with the image above it,
     which is already a large target — this just makes the words work too. */
  .pcard h3 a{ display:inline-block; padding-block:8px; margin-block:-8px }

  .faq-help a{ display:inline-block; padding-block:10px; margin-block:-10px }
}

/* ==========================================================================
   Order received
   ========================================================================== */

/* The order meta that WooCommerce renders as a bare list. Four facts the
   customer wants at a glance, in a row that wraps rather than one that
   scrolls. */
.ty-meta{ display:flex; flex-wrap:wrap; gap:10px 32px; margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--line) }
.ty-meta > div{ min-width:120px }
.ty-meta dt{ font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600 }
.ty-meta dd{ margin:4px 0 0; font-size:.95rem; color:var(--ink) }

.ty-address{ font-style:normal; font-size:.95rem; line-height:1.7; color:var(--ink-2) }

/* Woo's own notice on this page duplicates the heading above it. */
.woocommerce-order .woocommerce-notice--success{ display:none }

@media (max-width:560px){
  .ty-meta{ gap:14px 24px }
}