/* ============================================================
   Stack - Wireframes shared stylesheet (_wf.css)
   GREYSCALE ONLY. Structure, not appearance. No colour, no brand,
   no real type scale, no decorative shadow/icon-as-art.
   Palette lifted from the existing ia/*.html .wf blocks, colour stripped.
   One source of truth for the whole wireframe set - change here, all screens follow.
   ============================================================ */

:root {
  --ink: #1b1b1b;        /* body text */
  --strong: #111;        /* headings / emphasis */
  --sec: #777;           /* secondary text */
  --light: #999;         /* tertiary / meta */
  --faint: #8a8a8a;
  --hair: #e4e4e4;       /* hairline border */
  --hair2: #cfcfcf;      /* stronger border */
  --fill: #f4f4f4;       /* rail / chip fill */
  --fill2: #fafafa;      /* zone fill */
  --dark: #161616;       /* the single "dark" accent: selected / primary (greyscale) */
  --r: 10px; --rs: 6px;
  --sh: 0 1px 2px rgba(0,0,0,.05);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; } /* keep anchor targets clear of the sticky header */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  background: #fff; color: var(--ink); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ---------- prototype shell (screen canvas + Step-4 nav rail) ---------- */
.wf-canvas { min-height: 100vh; }
.wf-page { max-width: 1200px; margin: 0 auto; padding: 0 16px 40px; }

/* ---------- inherited header (Navigation 0.1), greyscale ---------- */
.wfh { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--hair); }
.wfh-in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.wfh-meta { display: none; font-size: 11.5px; color: var(--sec); border-bottom: 1px solid var(--hair); }
.wfh-meta .wfh-in { padding: 6px 16px; gap: 18px; }
.wfh-meta a { color: var(--sec); }
.wfh-meta .strongl { color: var(--strong); font-weight: 700; }
/* language switcher dropdown (meta bar) */
.wfh-lang-wrap { position: relative; }
.wfh-lang { cursor: pointer; }
.wfh-langmenu { display: none; position: absolute; right: 0; top: 100%; z-index: 46; margin-top: 7px;
  min-width: 152px; background: #fff; border: 1px solid var(--hair); border-top: 2px solid var(--dark);
  border-radius: 0 0 12px 12px; box-shadow: 0 12px 30px rgba(0,0,0,.12); padding: 6px 0; }
.wfh-langmenu.open { display: block; }
.wfh-langmenu a { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--strong); }
.wfh-langmenu a:hover { background: var(--fill); }
.wfh-langmenu a.on::after { content: '✓'; font-weight: 800; color: var(--sec); }
.wfh-main { padding: 0; }
.wfh-burger { font-size: 20px; line-height: 1; padding: 4px; }
/* ☰ becomes ✕ while the mobile menu panel is open (the header is the close control) */
.wfh-burger .bi-close { display: none; }
.wfh.drawer-open .wfh-burger .bi-open { display: none; }
.wfh.drawer-open .wfh-burger .bi-close { display: inline; }
.wfh-logo { font-size: 20px; font-weight: 800; color: var(--strong); letter-spacing: -.02em; }
.wfh-nav { display: none; gap: 6px; }
.wfh-nav .navbtn { display: inline-flex; align-items: center; gap: 7px; background: var(--dark); color: #fff; border: 1.5px solid var(--dark); border-radius: 8px; padding: 9px 15px; font-size: 13px; font-weight: 700; }
.wfh-nav .navbtn .g { font-size: 15px; }
.wfh-nav .navlink { padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--strong); display: inline-flex; align-items: center; gap: 5px; }
.wfh-nav .navbtn .cav { font-size: 11px; opacity: .8; }

/* ---------- Catalog mega-menu (node 0.1), desktop hover - Belok-style, goals-first ---------- */
.wfh-cat { position: relative; }
.wfh-mega { display: none; position: absolute; top: 100%; left: 0; z-index: 40;
  grid-template-columns: 226px minmax(420px, 1fr) 196px; width: 940px; max-width: 94vw;
  background: #fff; border: 1px solid var(--hair); border-top: 2px solid var(--dark);
  border-radius: 0 0 12px 12px; box-shadow: 0 14px 34px rgba(0,0,0,.12); margin-top: 6px; overflow: hidden; }
.wfh.mega-open .wfh-mega, .wfh.mega-pinned .wfh-mega { display: grid; }
/* transparent hover-bridge across the 6px gap between the Каталог button and the panel,
   so moving the mouse down into the mega does NOT fire mouseleave and close it */
.wfh-cat::after { content: ""; display: none; position: absolute; top: 100%; left: 0; width: 100%; height: 12px; }
.wfh.mega-open .wfh-cat::after, .wfh.mega-pinned .wfh-cat::after { display: block; }
/* the Каталог button darkens + caret flips while its mega is open */
.wfh-nav .navbtn .cav { transition: transform .15s; }
.wfh.mega-open .wfh-cat .navbtn, .wfh.mega-pinned .wfh-cat .navbtn { background: #000; border-color: #000; }
.wfh.mega-open .wfh-cat .navbtn .cav, .wfh.mega-pinned .wfh-cat .navbtn .cav { transform: rotate(180deg); }
/* Comfy-style overlay: dark scrim over the page while the mega is open. Body-level,
   full viewport, z-index BELOW the sticky header (30) but ABOVE page content (0) → the
   whole header stays crisp, the page dims. No hard-coded header height. */
/* z-index 28: below the sticky header (30) so header+mega stay crisp, but ABOVE the home
   category rail wrapper (.hrail-wrap z-index 25) so that rail dims too - otherwise it peeks
   bright beside the mega and looks selected. */
.wfh-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.44); z-index: 28; }
.wfh-scrim.open, .wfh-scrim.pinned { display: block; }
@media (max-width: 859px) { .wfh-scrim { display: none !important; } }
/* left rail - «За ціллю» first, then 12 categories */
.wfh-mega .mega-cats { border-right: 1px solid var(--hair); padding: 8px 0; background: var(--fill2); max-height: 74vh; overflow-y: auto; }
.wfh-mega .mega-cat { display: flex; align-items: center; gap: 8px; padding: 9px 15px; font-size: 12.5px; font-weight: 600; color: var(--strong); }
.wfh-mega .mega-cat .mci { width: 18px; text-align: center; font-size: 13px; flex: none; }
.wfh-mega .mega-cat .ar { margin-left: auto; color: #bbb; font-weight: 700; }
/* state = background + left marker, NEVER weight: a 600→800 switch widens the label, a long
   one re-wraps to a second line and every item below it jumps down under the cursor */
.wfh-mega .mega-cat:hover, .wfh-mega .mega-cat.on { background: #fff; box-shadow: inset 2px 0 0 var(--dark); }
.wfh-mega .mega-cat.on .ar { color: var(--strong); }
.wfh-mega .mega-cat-goals { font-weight: 800; border-bottom: 1px solid var(--hair); margin-bottom: 6px; padding-bottom: 12px; padding-top: 11px; }
/* middle - changes per hovered left item */
.wfh-mega .mega-mid { padding: 16px 18px; max-height: 74vh; overflow-y: auto; }
.wfh-mega .mega-panel { display: none; }
.wfh-mega .mega-panel.on { display: block; }
.wfh-mega .mph { display: inline-block; font-size: 13px; font-weight: 800; color: var(--strong); margin-bottom: 13px; text-decoration: underline; text-decoration-color: var(--hair2); }
.wfh-mega .mega-groups { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.wfh-mega .mega-grp { min-width: 150px; }
.wfh-mega .mgt { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--light); margin-bottom: 6px; }
.wfh-mega .mega-sub { display: block; font-size: 12.5px; color: var(--sec); padding: 4px 0; }
.wfh-mega .mega-sub:hover { color: var(--strong); text-decoration: underline; }
.wfh-mega .mega-goalrow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.wfh-mega .mgl { font-size: 11px; font-weight: 800; color: var(--sec); }
.wfh-mega .mgchip { font-size: 11.5px; font-weight: 600; color: var(--strong); border: 1.5px solid var(--hair2); border-radius: 100px; padding: 4px 11px; }
.wfh-mega .mgchip:hover { border-color: var(--dark); }
/* goals middle panel - 6 concern cards */
.wfh-mega .mega-goalgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wfh-mega .mega-goalcard { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--hair2); border-radius: 10px; padding: 10px 12px; }
.wfh-mega .mega-goalcard:hover { border-color: var(--dark); }
.wfh-mega .mega-goalcard .gi { font-size: 17px; flex: none; }
.wfh-mega .mega-goalcard .gtx { display: flex; flex-direction: column; gap: 2px; }
.wfh-mega .mega-goalcard b { font-size: 13px; color: var(--strong); }
.wfh-mega .mega-goalcard .gc { font-size: 11px; color: var(--light); line-height: 1.4; }
/* right utility + featured panel */
.wfh-mega .mega-side { border-left: 1px solid var(--hair); background: var(--fill2); padding: 14px 15px; }
.wfh-mega .ms-lead { display: block; font-size: 12.5px; font-weight: 800; color: var(--strong); padding: 6px 0 10px; border-bottom: 1px solid var(--hair); margin-bottom: 6px; }
.wfh-mega .ms-link { display: block; font-size: 12.5px; color: var(--sec); padding: 6px 0; }
.wfh-mega .ms-link:hover { color: var(--strong); text-decoration: underline; }
.wfh-mega .ms-feat { display: block; margin-top: 12px; border: 1px solid var(--hair); border-radius: 10px; background: #fff; padding: 10px; transition: border-color .15s ease, box-shadow .15s ease; }
.wfh-mega a.ms-feat:hover { border-color: var(--hair2); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.wfh-mega .ms-ph { height: 78px; border-radius: 7px; background: repeating-linear-gradient(45deg, #fafafa, #fafafa 8px, #f1f1f1 8px, #f1f1f1 16px); display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 10px; margin-bottom: 8px; }
.wfh-mega .ms-ftag { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--sec); }
.wfh-mega .ms-fh { font-size: 12.5px; font-weight: 800; color: var(--strong); margin: 3px 0; line-height: 1.25; }
.wfh-mega .ms-fs { font-size: 11.5px; color: var(--sec); }
.wfh-mega .ms-fb { display: inline-block; margin-top: 7px; font-size: 11.5px; font-weight: 800; color: var(--strong); text-decoration: underline; }

/* ---------- generic modal overlay (city dialog, drawer share it) ---------- */
.wf-ov { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.32); z-index: 60; }
.wf-ov.open { display: block; }

/* ---------- city selector dialog (node 0.1a) ---------- */
.wf-city { display: none; position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 560px; max-width: 94vw; max-height: 86vh; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.22); flex-direction: column; }
.wf-city.open { display: flex; }
.wf-city-h { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px;
  border-bottom: 1px solid var(--hair); font-size: 17px; font-weight: 800; color: var(--strong); }
.wf-city-h .x { font-size: 20px; color: var(--light); }
.wf-city-b { padding: 16px 18px 20px; overflow-y: auto; }
.city-search { width: 100%; border: 1.5px solid var(--hair2); border-radius: 8px; padding: 11px 13px; font-size: 14px; margin-bottom: 16px; }
.city-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--sec); margin: 14px 0 9px; }
.city-lbl:first-of-type { margin-top: 0; }
.city-pop { display: flex; flex-wrap: wrap; gap: 8px; }
.city-badge { border: 1.5px solid var(--hair2); border-radius: 100px; padding: 8px 15px; font-size: 13px; font-weight: 700; color: var(--strong); }
.city-badge:hover { border-color: var(--dark); }
.city-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; }
@media (max-width: 480px) { .city-list { grid-template-columns: repeat(2, 1fr); } }
.city-az { text-align: left; font-size: 13px; color: var(--ink); padding: 7px 4px; }
.city-az:hover { color: var(--strong); text-decoration: underline; }
.city-note { font-size: 12px; color: var(--light); margin-top: 16px; line-height: 1.5; border-top: 1px solid var(--hair); padding-top: 14px; }

/* ---------- mobile menu panel (burger) ----------
   Unfolds DOWNWARD from the header instead of sliding over the page as a side
   drawer: full width, pinned under the sticky header (--dr-top is measured in JS
   at open time, so the прототип bar / meta bar / scroll position never break it),
   its own internal scroll, and it stops above the bottom tab bar.
   It lives on <body> (not inside .wfh) and sits BELOW the header in z-order
   (29 < .wfh 30), so the panel really rolls out from under the header, the header
   with its ☰ → ✕ stays visible, and no dark scrim is needed.
   The page underneath never reflows; its scroll is frozen while the panel is open. */
.wf-drawer { position: fixed; z-index: 29; left: 0; right: 0; top: var(--dr-top, 56px); bottom: 57px;
  background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--hair); box-shadow: 0 16px 34px rgba(0,0,0,.13);
  transform: translateY(-100%); visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s; }
.wf-drawer.open { transform: translateY(0); visibility: visible; transition: transform .22s ease; }
/* freeze the page behind the panel. Lock the root ONLY: `overflow:hidden` on
   <body> would turn body into the scroll container and the sticky header would
   stop sticking (it must stay pinned - it carries the ✕). */
html.dr-lock { overflow: hidden; }
.dr-b { padding: 14px 16px 30px; }
.dr-city { display: block; font-size: 13px; font-weight: 700; color: var(--strong); padding: 10px 0; border-bottom: 1px solid var(--hair); margin-bottom: 6px; }
.dr-lbl { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--sec); margin: 16px 0 8px; }
.dr-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dr-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--hair2); border-radius: 100px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--strong); }
.dr-catwrap { border-bottom: 1px solid var(--hair); }
.dr-cat { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font-size: 14px; font-weight: 600; color: var(--strong); padding: 12px 0; background: none; }
.dr-cat .dc-ic { width: 20px; text-align: center; flex: none; }
.dr-cat .ar { margin-left: auto; color: var(--sec); font-weight: 700; font-size: 15px; }
.dr-subs { display: none; padding: 2px 0 10px 29px; }
.dr-subs.open { display: block; }
.dr-suball { display: block; font-size: 13px; font-weight: 700; color: var(--strong); padding: 7px 0; }
.dr-sub { display: block; font-size: 13px; color: var(--sec); padding: 6px 0; }
.dr-link { display: block; font-size: 13.5px; color: var(--ink); padding: 10px 0; border-bottom: 1px solid var(--hair); }
.dr-link.strong { font-weight: 800; color: var(--strong); }
@media (min-width: 860px) { .wf-drawer { display: none !important; } }

/* ---------- cookie-consent banner + settings (node S, UA law) ---------- */
.wf-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: #fff;
  border-top: 2px solid var(--dark); box-shadow: 0 -6px 24px rgba(0,0,0,.10);
  padding: 14px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.wf-cookie.hidden { display: none; }
.wf-cookie .ck-txt { flex: 1; min-width: 240px; font-size: 12.5px; color: var(--sec); line-height: 1.5; }
.wf-cookie .ck-txt b { color: var(--strong); }
.wf-cookie .ck-txt a { color: var(--strong); text-decoration: underline; }
.wf-cookie .ck-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ck-btn { border: 1.5px solid var(--dark); border-radius: 8px; padding: 10px 16px; font-size: 12.5px; font-weight: 700; color: var(--strong); background: #fff; white-space: nowrap; }
.ck-btn.ghost { border-color: var(--hair2); color: var(--sec); }
@media (min-width: 620px) { .wf-cookie { padding: 14px 22px; } }
/* settings dialog (reuses .wf-ov) */
.wf-ckset { display: none; position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 480px; max-width: 94vw; max-height: 88vh; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.22); flex-direction: column; }
.wf-ckset.open { display: flex; }
.wf-ckset-h { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--hair); font-size: 16px; font-weight: 800; color: var(--strong); }
.wf-ckset-h .x { font-size: 20px; color: var(--light); }
.wf-ckset-b { padding: 6px 18px 8px; overflow-y: auto; }
.ck-cat { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.ck-cat:last-of-type { border-bottom: none; }
.ck-cat-t { font-size: 13.5px; font-weight: 800; color: var(--strong); }
.ck-lock { font-size: 11px; }
.ck-cat-d { display: block; font-size: 12px; font-weight: 500; color: var(--sec); margin-top: 3px; max-width: 300px; }
.ck-tog { flex: none; width: 42px; height: 24px; border-radius: 100px; background: var(--fill); border: 1.5px solid var(--hair2); position: relative; cursor: pointer; transition: background .15s; }
.ck-tog i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid var(--hair2); transition: left .15s; }
.ck-tog.on { background: var(--dark); border-color: var(--dark); }
.ck-tog.on i { left: 20px; border-color: var(--dark); }
.ck-tog.locked { opacity: .6; cursor: not-allowed; }
.ck-note { font-size: 11.5px; color: var(--light); line-height: 1.5; padding: 12px 0 4px; }
.ck-note a { color: var(--strong); text-decoration: underline; }
.wf-ckset-f { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--hair); }
.wf-ckset-f .btn { flex: 1; text-align: center; }

/* ---------- toasts (node S, global) ---------- */
.wf-toasts { position: fixed; z-index: 70; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; width: 92%; max-width: 380px; }
.wf-toast { display: flex; align-items: center; gap: 11px; background: var(--dark); color: #fff;
  border-radius: 10px; padding: 12px 14px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.22);
  animation: tt-in .22s ease; }
.wf-toast.out { opacity: 0; transform: translateY(8px); transition: all .25s ease; }
.wf-toast .tt-ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: #fff; color: var(--dark); }
.wf-toast.error .tt-ic { background: #fff; color: #111; }
.wf-toast.info .tt-ic { font-style: normal; }
.wf-toast .tt-m { flex: 1; }
.wf-toast .tt-x { color: #fff; opacity: .7; font-size: 13px; }
.wf-toast.error { border: 1px solid #fff; }   /* greyscale: differentiate by outline, not colour */
@keyframes tt-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- PDP review / question modal (shared component, wfPdpModals) ---------- */
.pm { display: none; position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 520px; max-width: 94vw; max-height: 88vh; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.22); flex-direction: column; }
.pm.open { display: flex; }
.pm-h { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--hair); font-size: 17px; font-weight: 800; color: var(--strong); }
.pm-h .x { font-size: 20px; color: var(--light); }
.pm-b { padding: 16px 18px; overflow-y: auto; }
.pm-b label { display: block; font-size: 12.5px; font-weight: 700; color: var(--sec); margin: 12px 0 6px; }
.pm-b label:first-child { margin-top: 0; }
.pm-b input, .pm-b textarea { width: 100%; border: 1.5px solid var(--hair2); border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; }
.pm-b textarea { min-height: 84px; resize: vertical; }
/* rating widget: five real buttons (wfPmStars in _nav.js paints them on hover) */
/* label row: «Ваша оцінка» left, the verdict word right, on the same line */
.pm-rhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pm-rhead label { margin: 0; }
.pm-rw { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--sec); }
.pm-rate { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 40px; margin-top: 6px; }
.pm-stars { display: flex; gap: 2px; }
.pm-stars .pmst { font-size: 27px; line-height: 1; color: var(--hair2); background: none; border: none; padding: 0 1px; cursor: pointer; }
.pm-stars .pmst.on { color: var(--strong); }
/* readout: the figure, large, level with the stars */
.pm-rv { font-size: 26px; font-weight: 800; line-height: 1; color: var(--strong); }
/* field states: .has = filled, .err + message under the field on an invalid submit */
.pm-e { display: none; font-size: 12px; font-weight: 600; color: var(--strong); margin-top: 5px; }
.pm-e.on { display: block; }
.pm-b input.err, .pm-b textarea.err { border-color: var(--strong); }
.pm-cnt { text-align: right; font-size: 11.5px; color: var(--light); margin-top: 4px; }
.pm-b label .opt { font-weight: 600; color: var(--light); }
.pm-f { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--hair); }
.pm-f .btn { flex: 1; text-align: center; }
.pm-note { font-size: 11.5px; color: var(--light); margin-top: 10px; }

/* ---------- system pages (404 / 500 / maintenance / system hub) ---------- */
.sys-min { min-height: 78vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; gap: 4px; }
.sys-min .sys-logo { font-size: 22px; font-weight: 800; color: var(--strong); margin-bottom: 18px; letter-spacing: -.02em; }
.sys-code { font-size: 60px; font-weight: 800; color: var(--strong); line-height: 1; letter-spacing: -.02em; }
.sys-h { font-size: 22px; font-weight: 800; color: var(--strong); margin: 14px 0 6px; }
.sys-s { font-size: 14px; color: var(--sec); max-width: 460px; margin: 0 auto 20px; line-height: 1.55; }
.sys-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sys-search { display: flex; max-width: 460px; margin: 0 auto 18px; width: 100%; border: 1.5px solid var(--hair2); border-radius: 9px; overflow: hidden; }
.sys-search input { flex: 1; border: none; padding: 12px 14px; font-size: 14px; }
.sys-search .go { background: var(--dark); color: #fff; padding: 0 18px; font-size: 13px; font-weight: 700; }
.sys-links { display: flex; gap: 8px 18px; flex-wrap: wrap; justify-content: center; font-size: 13px; margin-top: 6px; }
.sys-links a { color: var(--strong); font-weight: 700; text-decoration: underline; }
/* system hub (component gallery) */
.sysgrid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 16px 0; }
@media (min-width: 720px) { .sysgrid { grid-template-columns: repeat(3, 1fr); } }
.syscard { border: 1px solid var(--hair); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.syscard .sc-code { font-size: 13px; font-weight: 800; color: var(--light); }
.syscard .sc-t { font-size: 15px; font-weight: 800; color: var(--strong); }
.syscard .sc-d { font-size: 12.5px; color: var(--sec); flex: 1; line-height: 1.5; }
.syscard a.sc-open { font-size: 12.5px; font-weight: 700; color: var(--strong); text-decoration: underline; margin-top: 4px; }
.sysdemo { border: 1px solid var(--hair); border-radius: 12px; padding: 18px; margin: 14px 0; }
.sysdemo h3 { font-size: 16px; font-weight: 800; color: var(--strong); margin-bottom: 6px; }
.sysdemo p { font-size: 13px; color: var(--sec); margin-bottom: 12px; line-height: 1.5; }
.sysdemo .demo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sysdemo .demo-btns .btn { cursor: pointer; }
.wfh-search { display: none; flex: 1; border: 1.5px solid var(--hair2); border-radius: 8px; overflow: hidden; }
.wfh-search input { flex: 1; border: none; padding: 9px 12px; font-size: 13px; width: 100%; }
.wfh-search .go { background: var(--dark); color: #fff; padding: 0 16px; font-size: 13px; font-weight: 700; }
.wfh-sp { flex: 1; }
/* desktop action buttons: Увійти · Обране · Бонуси · Кошик (order locked) */
.wfh-actions { display: none; align-items: center; gap: 8px; }
.wfh-act { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--hair2); border-radius: 9px; padding: 6px 11px; color: var(--strong); }
.wfh-act .g { font-size: 17px; }
.wfh-act .lbl { font-size: 12.5px; font-weight: 700; }
.wfh-act .t { display: flex; flex-direction: column; line-height: 1.12; }
.wfh-act .t .cap { font-size: 9px; color: var(--sec); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.wfh-act .t .val { font-size: 12.5px; font-weight: 800; }
/* Бонуси / Кошик: reserve a stable width so the header buttons don't shift as values change */
.wfh-act.numbtn { min-width: 96px; justify-content: flex-start; }
/* Увійти / Обране = stacked icon-over-label, borderless */
.wfh-act.stack { flex-direction: column; gap: 3px; border: none; padding: 3px 8px; }
.wfh-act.stack .g { font-size: 19px; }
.wfh-act.stack .lbl { font-size: 11px; font-weight: 600; color: var(--sec); }
/* logged-in account dropdown (Кабінет) */
.wfh-cab { position: relative; }
.wfh-cabbtn { cursor: pointer; }
.wfh-cabmenu { display: none; position: absolute; right: 0; top: 100%; z-index: 45; margin-top: 8px;
  min-width: 230px; background: #fff; border: 1px solid var(--hair); border-top: 2px solid var(--dark);
  border-radius: 0 0 12px 12px; box-shadow: 0 12px 30px rgba(0,0,0,.12); padding: 6px 0; }
.wfh-cabmenu.open { display: block; }
.wfh-cabmenu .cab-head { padding: 10px 16px 10px; border-bottom: 1px solid var(--hair); margin-bottom: 6px; display: flex; flex-direction: column; gap: 4px; }
.wfh-cabmenu .cab-nm { font-size: 14px; font-weight: 800; color: var(--strong); }
.wfh-cabmenu .cab-tier { align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: .05em; background: var(--dark); color: #fff; border-radius: 100px; padding: 2px 9px; }
.wfh-cabmenu .cab-lvl { font-size: 11.5px; color: var(--sec); font-weight: 600; }
.wfh-cabmenu a { display: block; padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--strong); }
.wfh-cabmenu a:hover { background: var(--fill); }
.wfh-cabmenu .cab-sep { border-top: 1px solid var(--hair); margin: 6px 0; }
/* mobile icon row */
.wfh-mi { display: flex; align-items: center; gap: 15px; font-size: 19px; margin-left: auto; }
@media (min-width: 860px) {
  .wfh-meta { display: block; }
  .wfh-burger { display: none; }
  .wfh-nav { display: flex; }
  .wfh-search { display: flex; }
  .wfh-actions { display: flex; }
  .wfh-mi { display: none; }
}

/* ---------- Mobile bottom tab bar (navigation.md §B; primary mobile nav, LOCKED 2026-06-29) ---------- */
.wf-tabbar { display: none; }
@media (max-width: 859px) {
  .wf-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: #fff; border-top: 1px solid var(--hair); padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -2px 12px rgba(0,0,0,.05); }
  .wf-tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 2px; font-size: 10.5px; font-weight: 600; color: var(--light); position: relative; }
  .wf-tab .ti { font-size: 20px; line-height: 1; }
  .wf-tab .tl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .wf-tab[aria-current="page"], .wf-tab.catov-open { color: var(--strong); font-weight: 800; }
  .wf-tab .tbadge { position: absolute; top: 2px; left: 50%; margin-left: 4px; min-width: 15px; height: 15px;
    padding: 0 4px; border-radius: 100px; background: var(--dark); color: #fff; font-size: 9.5px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; }
  /* keep page content clear of the fixed bar */
  body { padding-bottom: 60px; }
}

/* header badge counters (cart / favourites) - small corner counter on the buttons */
.wfh-mi { padding-right: 8px; }   /* room so the last icon's badge never pokes past the edge */
.wfh-mi a { position: relative; }
.wfh-act { position: relative; }
.wfh-mi .hb, .wfh-act .g .hb { position: absolute; top: -6px; right: -4px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 100px; background: var(--dark); color: #fff; font-size: 9.5px; font-weight: 800; line-height: 15px;
  text-align: center; box-shadow: 0 0 0 2px #fff; }
.wfh-act .g { position: relative; }
/* belt-and-suspenders: a few px of decorative overhang must never scroll the page */
html { overflow-x: hidden; }

/* ---------- Mobile catalog overlay (node 0.1 drill-down; opened by the Каталог tab) ---------- */
.wf-catov { display: none; }
@media (max-width: 859px) {
  /* sits above the header but below the bottom tab bar (z 50), and stops above it, so the
     tab bar stays visible + clickable → re-tapping «Каталог» toggles the overlay closed */
  .wf-catov { position: fixed; top: 0; left: 0; right: 0; bottom: 57px; z-index: 49; background: #fff; flex-direction: column; }
  .wf-catov.open { display: flex; }
  .wf-catov-h { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--hair);
    position: sticky; top: 0; background: #fff; min-height: 52px; }
  .wf-catov-h .ctitle { font-size: 17px; font-weight: 800; color: var(--strong); }
  .wf-catov-h .ctitle.sub { font-size: 15px; font-weight: 700; color: var(--sec); }
  .wf-catov-h .cback { font-size: 14px; font-weight: 700; color: var(--strong); display: inline-flex; align-items: center; gap: 4px; }
  .wf-catov-h .cx { margin-left: auto; font-size: 20px; color: var(--light); line-height: 1; padding: 4px; }
  .wf-catov-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .wf-catov-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px 16px; background: #fff;
    font-size: 14.5px; font-weight: 600; color: var(--strong); border-bottom: 1px solid var(--hair); text-align: left; }
  .wf-catov-row .ci { width: 24px; text-align: center; font-size: 18px; flex: none; }
  .wf-catov-row .cl { min-width: 0; overflow-wrap: anywhere; }
  .wf-catov-row .car { margin-left: auto; color: #cbcbcb; font-weight: 700; font-size: 17px; }
  .wf-catov-row.lead { font-weight: 800; }
  .wf-catov-all { display: flex; align-items: center; gap: 10px; padding: 15px 16px; font-size: 14.5px; font-weight: 800;
    color: var(--strong); border-bottom: 1px solid var(--hair); background: var(--fill2); }
  .wf-catov-all .ci { font-size: 17px; }
  .wf-catov-all .car { margin-left: auto; color: #bbb; }
  .wf-catov-sub { display: block; padding: 13px 16px 13px 20px; font-size: 14px; color: var(--sec); border-bottom: 1px solid var(--hair); }
  .wf-catov-goal { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--hair); }
  .wf-catov-goal .ci { width: 24px; text-align: center; font-size: 19px; flex: none; }
  .wf-catov-goal .cg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .wf-catov-goal .gn { font-size: 14.5px; font-weight: 800; color: var(--strong); }
  .wf-catov-goal .gc { font-size: 11.5px; color: var(--light); line-height: 1.4; overflow-wrap: anywhere; }
  .wf-catov-goal .car { margin-left: auto; color: #cbcbcb; font-weight: 700; }
}

/* ---------- breadcrumb ---------- */
.crumb { font-size: 12px; color: var(--light); padding: 14px 0 10px; }
.crumb a { color: var(--light); }
.crumb .sep { color: #ccc; margin: 0 6px; }
.crumb .cur { color: var(--strong); font-weight: 700; }

/* ---------- listing head ---------- */
.lh1 { font-size: 26px; font-weight: 800; color: var(--strong); letter-spacing: -.01em; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lh1 .cnt { font-size: 14px; font-weight: 600; color: var(--light); }
.lintro { color: var(--sec); font-size: 14px; margin: 8px 0 0; max-width: 720px; }
.lintro .more { color: var(--strong); font-weight: 700; white-space: nowrap; }

/* ---------- toolbar ---------- */
/* desktop toolbar (mobile uses .mtoolbar). Hidden on mobile without .only-desk,
   which would set display:block and break the flex spacer. */
.ltool { display: none; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--hair2); }
@media (min-width: 860px) { .ltool { display: flex; } }
.ctrl { border: 1.5px solid var(--hair2); border-radius: 8px; padding: 9px 13px; font-size: 13px; font-weight: 600; color: var(--strong); display: inline-flex; align-items: center; gap: 8px; background: #fff; }
.ctrl .cap { color: var(--light); font-weight: 600; }
.ctrl .b { background: var(--dark); color: #fff; border-radius: 100px; font-size: 11px; font-weight: 800; padding: 1px 7px; }
.ltool .sp { flex: 1; }
.ltool .count { border: none; color: var(--light); font-weight: 600; }
.vtoggle { display: none; border: 1.5px solid var(--hair2); border-radius: 8px; overflow: hidden; }
.vtoggle a, .vtoggle span { padding: 9px 12px; font-size: 14px; color: var(--light); display: inline-flex; }
.vtoggle a.on, .vtoggle span.on { background: var(--dark); color: #fff; }
@media (min-width: 860px) { .vtoggle { display: inline-flex; } }

/* active filter chips */
.afilters { display: none; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
@media (min-width: 860px) { .afilters { display: flex; } }
.afilter { background: var(--fill); border: 1px solid var(--hair); border-radius: 100px; padding: 6px 11px; font-size: 12px; color: var(--strong); font-weight: 600; display: inline-flex; gap: 7px; align-items: center; }
.afilter .x { color: var(--light); font-weight: 800; }
.afilters .clear { font-size: 12px; color: var(--strong); font-weight: 700; text-decoration: underline; }

/* ---------- two-col listing ---------- */
.listing { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 16px; }
@media (min-width: 860px) { .listing { grid-template-columns: 240px 1fr; } }

/* filter rail (desktop) */
.frail { display: none; border: 1px solid var(--hair); border-radius: var(--r); padding: 2px 0; align-self: start; position: sticky; top: 120px; }
@media (min-width: 860px) { .frail { display: block; } }
.fgroup { border-bottom: 1px solid #eee; padding: 12px 14px; }
.fgroup:last-child { border-bottom: none; }
.fgroup .fh { font-size: 13px; font-weight: 800; color: var(--strong); display: flex; justify-content: space-between; align-items: center; }
.fgroup .fh .ar { color: #aaa; font-weight: 700; }
/* collapsible filter groups (rail + mobile sheet): click the header to fold */
.fgroup .fh { cursor: pointer; user-select: none; }
.fgroup .fh .ar { transition: transform .2s ease; }
.fgroup.collapsed .fh .ar { transform: rotate(180deg); }
.fgroup.collapsed > *:not(.fh) { display: none; }
.fopt { font-size: 13px; color: #444; margin-top: 9px; display: flex; align-items: center; gap: 9px; cursor: pointer; }
.fopt .cb { width: 15px; height: 15px; border: 1.5px solid #bbb; border-radius: 4px; display: inline-block; flex: none; }
.fopt .cb.on { background: var(--dark); border-color: var(--dark); position: relative; }
.fopt .cb.on::after { content: '✓'; color: #fff; font-size: 10px; position: absolute; top: -2px; left: 2px; }
.fopt .ct { color: #bbb; margin-left: auto; font-size: 12px; }
.fmore { font-size: 12px; color: var(--light); margin-top: 9px; }
/* taxonomy (type / subcategory) = links to inner category pages, not facet checkboxes (SEO + real pages) */
.flinks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.flink { border: 1.5px solid var(--hair2); border-radius: 100px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--strong); }
.flink .ct { color: #bbb; margin-left: 5px; font-size: 11px; }
.frange { height: 4px; background: #ddd; border-radius: 4px; margin: 14px 2px 9px; position: relative; }
.frange::before, .frange::after { content: ''; position: absolute; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--dark); }
.frange::before { left: 18%; } .frange::after { right: 26%; }
.frow { display: flex; gap: 9px; font-size: 12px; color: #666; }
.frow .in { flex: 1; border: 1px solid #ddd; border-radius: var(--rs); padding: 7px 9px; }

/* ---------- product grid (canonical card) ---------- */
.prow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 620px) { .prow { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .prow { grid-template-columns: repeat(4, 1fr); } }
.pcard { border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: #fff; position: relative; }
.pcard .ph { aspect-ratio: 10/11; background: var(--fill); display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 12px; position: relative; }
.pcard .fav, .pcard .wlrm { position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--faint); }
/* 7.6 Обране: the same corner slot, a DIFFERENT job. Everything on that page is already
   saved, so a heart there can only mean «unsave» - which is not what a heart says, and
   the wireframe even drew it unfilled. The card carries a plain remove control instead. */
.pcard .wlrm:hover { color: var(--strong); border-color: var(--dark); }
.pcard .tag { position: absolute; top: 9px; left: 9px; background: #fff; border: 1.5px solid var(--dark); color: var(--strong); font-size: 10px; font-weight: 800; border-radius: 5px; padding: 2px 7px; text-transform: uppercase; }
.pcard .bd { padding: 11px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.pcard .pbrand { font-size: 11.5px; color: var(--faint); margin: 0 0 4px; }
.pcard .nm { font-size: 14px; color: var(--strong); line-height: 1.3; font-weight: 600; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 37px; }
/* fixed row heights so the price + buy button NEVER shift between cards */
.pcard .pavail { margin-bottom: 7px; min-height: 15px; font-size: 11px; font-weight: 700; }
.pcard .pavail.in { color: var(--strong); }
.pcard .pavail.low { color: var(--strong); }        /* honesty via text, not colour */
.pcard .pavail.pre { color: var(--sec); }
.pcard .pavail.out { color: var(--sec); }
.pcard .prow2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pcard .pcol { display: flex; flex-direction: column; gap: 2px; }
.pcard .poldline { display: flex; align-items: center; gap: 7px; min-height: 15px; }
.pcard .pold { font-size: 12px; color: #aaa; text-decoration: line-through; }
.pcard .pcut { background: var(--dark); color: #fff; font-size: 10px; font-weight: 800; border-radius: 4px; padding: 1px 6px; }
.pcard .pnew { font-weight: 800; color: var(--strong); font-size: 20px; }
.pcard .cartbtn { width: 44px; height: 44px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--dark); color: #fff; }
.pcard .cartbtn.notify { background: #fff; color: var(--dark); border: 1.5px solid var(--dark); font-size: 16px; }
.pcard .rate { font-size: 11.5px; color: var(--light); display: flex; align-items: center; gap: 6px; margin-top: 10px; min-height: 15px; }
.pcard .rate .st { color: var(--strong); font-weight: 700; }
.pcard .pmeta2 { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #f0f0f0; font-size: 11.5px; }
.pcard .perserv { color: var(--sec); } .pcard .perserv b { color: var(--strong); }
.pcard .bonus { color: var(--strong); font-weight: 700; white-space: nowrap; }
.pcard.dim .ph, .pcard.dim .prow2 { opacity: .5; }
.gnote { font-size: 12px; color: var(--light); margin: 10px 2px 0; line-height: 1.4; }

/* ---------- product LIST view (☰ toggle) - image · info · price (middle) · ♡+cart (right) ---------- */
.plist { display: flex; flex-direction: column; gap: 10px; }
.pcard-l { display: grid; grid-template-columns: 84px 1fr auto auto; gap: 16px; border: 1px solid var(--hair); border-radius: 12px; padding: 12px; align-items: center; }
.pcard-l .lph { width: 84px; aspect-ratio: 1; background: var(--fill); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 10px; position: relative; }
.pcard-l .lph .tag { position: absolute; top: 5px; left: 5px; background: #fff; border: 1.5px solid var(--dark); color: var(--strong); font-size: 8.5px; font-weight: 800; border-radius: 4px; padding: 1px 5px; text-transform: uppercase; }
.pcard-l .lbd { min-width: 0; }
.pcard-l .lbrand { font-size: 11.5px; color: var(--faint); }
.pcard-l .lnm { font-size: 15px; font-weight: 600; color: var(--strong); margin: 2px 0 6px; }
.pcard-l .lavail { font-size: 11px; font-weight: 700; color: var(--strong); }
.pcard-l .lavail.pre, .pcard-l .lavail.out { color: var(--sec); }
.pcard-l .lmeta { font-size: 11.5px; color: var(--sec); margin-top: 5px; }
.pcard-l .lmeta .st { color: var(--strong); font-weight: 700; }
/* price block in the middle (old price + badge, then new) */
.pcard-l .lprice-col { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.pcard-l .lold-row { display: flex; align-items: center; gap: 6px; min-height: 15px; }
.pcard-l .lold { font-size: 12px; color: #aaa; text-decoration: line-through; }
.pcard-l .lcut { background: var(--dark); color: #fff; font-size: 10px; font-weight: 800; border-radius: 4px; padding: 1px 6px; }
.pcard-l .lprice { font-size: 21px; font-weight: 800; color: var(--strong); }
/* right actions: favourite + clean cart button */
.pcard-l .lactions { display: flex; align-items: center; gap: 10px; }
.pcard-l .lfav { font-size: 18px; color: var(--faint); background: none; line-height: 1; }
.pcard-l .cartbtn { width: 44px; height: 44px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--dark); color: #fff; }
.pcard-l .cartbtn.notify { background: #fff; color: var(--dark); border: 1.5px solid var(--dark); font-size: 16px; }
.pcard-l.dim .lph, .pcard-l.dim .lprice { opacity: .5; }
@media (max-width: 560px) {
  .pcard-l { grid-template-columns: 56px 1fr; row-gap: 12px; }
  .pcard-l .lph { width: 56px; }
  .pcard-l .lprice-col { align-items: flex-start; }
  .pcard-l .lactions { justify-content: flex-end; }
}

/* ---------- pagination ---------- */
.pgnav { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 22px; }
.loadmore { border: 1.5px solid var(--dark); border-radius: 8px; padding: 12px 26px; font-size: 14px; font-weight: 700; color: var(--strong); }
.pages { display: flex; gap: 7px; }
.pages a, .pages button { min-width: 34px; height: 34px; border: 1px solid #ddd; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #444; }
.pages a.on, .pages button.on { background: var(--dark); color: #fff; border-color: var(--dark); }

/* ---------- seo text ---------- */
.seotext { padding: 18px 18px; background: var(--fill2); border: 1px solid var(--hair); border-radius: var(--r); margin-top: 26px; }
.seotext .h { font-size: 17px; font-weight: 800; color: var(--strong); margin-bottom: 10px; }
.seotext p { font-size: 13.5px; color: #555; margin-bottom: 9px; line-height: 1.6; }
/* SEO body is always fully expanded - never collapse (hidden text isn't indexed) */

/* ---------- related strip ---------- */
.relrow { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
.relbox { border: 1px solid #ddd; border-radius: 8px; padding: 10px 15px; font-size: 13px; font-weight: 700; color: #444; background: #fff; }
.relh { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--light); margin: 22px 0 0; }

/* ---------- loading skeletons (grid) ---------- */
.skgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 620px) { .skgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .skgrid { grid-template-columns: repeat(4, 1fr); } }
.skcard { border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.skcard .skimg { aspect-ratio: 10/11; background: var(--fill); }
.skcard .skb { padding: 11px 12px 13px; }
.skline { height: 10px; border-radius: 5px; background: #ececec; margin: 8px 0; }
.skline.s { width: 50%; } .skline.m { width: 72%; } .skline.l { width: 90%; }
.skpulse { animation: skpulse 1.1s ease-in-out infinite; }   /* functional loading cue, not decoration */
@keyframes skpulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.loadnote { text-align: center; font-size: 13px; color: var(--sec); margin-top: 18px; }

/* ---------- empty state ---------- */
.empty { border: 1.5px dashed var(--hair2); border-radius: var(--r); padding: 40px 20px; text-align: center; }
.empty .ei { font-size: 30px; }
.empty .et { font-size: 17px; font-weight: 800; color: var(--strong); margin: 12px 0 6px; }
.empty .es { font-size: 13.5px; color: var(--sec); margin-bottom: 16px; }
.empty .eact { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.btn { border: 1.5px solid var(--dark); border-radius: 8px; padding: 11px 20px; font-size: 13px; font-weight: 700; color: var(--strong); display: inline-block; }
.btn.dark { background: var(--dark); color: #fff; }

/* ---------- inherited footer (Footer 0.2), greyscale ---------- */
.wff { border-top: 1px solid var(--hair); margin-top: 34px; background: var(--fill2); }
.wff-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 1200px; margin: 0 auto; padding: 20px 16px; }
@media (min-width: 720px) { .wff-trust { grid-template-columns: repeat(4, 1fr); } }
.wff-tc { border: 1px solid var(--hair); border-radius: var(--r); background: #fff; padding: 12px 14px; }
.wff-tc .th { font-size: 13px; font-weight: 800; color: var(--strong); }
.wff-tc .ts { font-size: 11.5px; color: var(--sec); margin-top: 3px; }
.wff-cols { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 6px 16px 20px; }
@media (min-width: 720px) { .wff-cols { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.wff-col h4 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--strong); margin-bottom: 9px; }
.wff-col a { display: block; font-size: 12.5px; color: var(--sec); padding: 3px 0; }
.wff-col a.wff-phone { font-size: 23px; font-weight: 800; color: var(--strong); letter-spacing: -.02em; padding: 2px 0 8px; line-height: 1.1; white-space: nowrap; }
/* messenger channels: the glyph gets its own fixed-width slot so Telegram and Viber
   line up with each other and with the text links above them */
.wff-col a.wff-msg { display: flex; align-items: center; gap: 8px; }
.wff-col a.wff-msg .mi { width: 16px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.wff-news { display: flex; gap: 6px; margin-bottom: 10px; }
.wff-news input { flex: 1; min-width: 0; border: 1px solid var(--hair2); border-radius: 6px; padding: 7px 9px; font-size: 12px; background: #fff; }
.wff-news button { border: 1px solid var(--dark); background: var(--dark); color: #fff; border-radius: 6px; padding: 7px 11px; font-size: 12px; font-weight: 700; }
.wff-bot .wff-soc { display: inline-flex; gap: 12px; }
/* step 7.30: these three links were drawn by style="color:inherit;text-decoration:
   underline" written inline into _nav.js, on 129 screens - rule 3 of this folder
   says anything repeating on two or more screens moves here, and this was the
   single most repeated link on the site. Same appearance, byte for byte; the
   colour layer now reaches it through .wff-legal. */
.wff-legal a { color: inherit; text-decoration: underline; }
.wff-seo { max-width: 1200px; margin: 0 auto; padding: 14px 16px; border-top: 1px solid var(--hair); font-size: 11.5px; color: var(--light); line-height: 1.9; }
.wff-seo b { color: var(--strong); }
.wff-bot { max-width: 1200px; margin: 0 auto; padding: 12px 16px 26px; font-size: 11.5px; color: var(--light); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--hair); }

/* ---------- mobile filter bottom-sheet ---------- */
.fsheet-ov { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 50; }
.fsheet-ov.open { display: block; }
.fsheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 16px 16px 0 0; z-index: 51; transform: translateY(100%); transition: transform .22s ease; }
.fsheet.open { transform: translateY(0); }
.fsheet-h { position: sticky; top: 0; background: #fff; padding: 15px 16px; border-bottom: 1px solid var(--hair); font-size: 16px; font-weight: 800; color: var(--strong); display: flex; justify-content: space-between; align-items: center; }
.fsheet-h .x { font-size: 20px; color: var(--light); }
.fsheet-foot { position: sticky; bottom: 0; background: #fff; display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--hair); }
.fsheet-foot .btn { flex: 1; text-align: center; }
.fsheet-foot .btn.dark { flex: 2; }
@media (min-width: 860px) { .fsheet, .fsheet-ov { display: none !important; } }

/* mobile toolbar sticky */
.mtoolbar { position: sticky; top: 57px; z-index: 20; background: #fff; display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.mtoolbar .mc { flex: 1; border: 1.5px solid var(--hair2); border-radius: 8px; padding: 11px; font-size: 13px; font-weight: 700; color: var(--strong); text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.mtoolbar .mc .b { background: var(--dark); color: #fff; border-radius: 100px; font-size: 11px; font-weight: 800; padding: 1px 7px; }
@media (min-width: 860px) { .mtoolbar { display: none; } }
.only-mobile { display: block; } @media (min-width: 860px) { .only-mobile { display: none; } }
.only-desk { display: none; } @media (min-width: 860px) { .only-desk { display: block; } }

/* sibling-states strip (top of each state page - Step 5) */
.wf-states { background: var(--fill); border-bottom: 1px solid var(--hair); font-size: 12px; padding: 7px 16px; color: var(--sec); display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.wf-states b { color: var(--strong); text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }
.wf-states a { color: var(--sec); text-decoration: underline; }
.wf-states a.cur { color: var(--strong); font-weight: 800; text-decoration: none; }

/* ============================================================
   HOME (node 0.0)
   ============================================================ */
.homeh1 { font-size: 15px; font-weight: 700; color: var(--sec); margin: 14px 0 4px; }
/* hero: category rail + banners (Foxtrot pattern) */
.hero-wrap { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 8px 0 6px; }
@media (min-width: 860px) { .hero-wrap { grid-template-columns: 250px 1fr; } }
.hrail { display: none; border: 1px solid var(--hair); border-radius: 12px; padding: 5px 0; align-self: start; background: #fff; }
@media (min-width: 860px) { .hrail { display: block; } }
/* left-aligned like the mega .mega-cat: icon + text grouped left, arrow pushed right */
.hrail a { display: flex; justify-content: flex-start; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; color: var(--strong); font-weight: 600; }
/* same rule as the mega rail: the hover state must not touch the metrics, or a wrapping
   label («Ізотоніки та витривалість») gains a line and shoves the rest of the list down */
.hrail a:hover, .hrail a.on { background: var(--fill); box-shadow: inset 2px 0 0 var(--dark); }
.hrail a.lead { font-weight: 800; }
.hrail a .ar { margin-left: auto; color: #bbb; font-weight: 700; }
.hrail a.on .ar { color: var(--strong); }
.hrail .rsep { border-top: 1px solid var(--hair); margin: 5px 12px; }
.hrail a .ic { display: inline-block; width: 18px; text-align: center; flex: none; }
/* HOME RAIL FLYOUT (overlay) - shared by index.html + home-catalog.html (wfHomeRail).
   The rail wrapper sits above the scrim; the flyout floats to the right of the rail
   over a dimmed page (Comfy-home). Panel visibility reuses .wfh-mega .mega-panel.on. */
.hrail-wrap { position: relative; align-self: start; }
@media (min-width: 860px) { .hrail-wrap { z-index: 25; } }
/* flyout spans the FULL height of the category rail (top:0 → bottom:0), like a mega panel.
   It joins the rail with NO gap (left: calc(100% - 1px) overlaps the shared 1px seam) so the
   rail + panel read as ONE continuous block and the mouse never crosses an empty hole that
   would fire .hrail-wrap's onmouseleave and close the overlay mid-move. */
.hrail-fly.wfh-mega { display: none; position: absolute; top: 0; bottom: 0; left: calc(100% - 1px); width: 600px; max-width: calc(100vw - 249px);
  grid-template-columns: none; margin: 0; padding: 16px 20px; border: 1px solid var(--hair); border-top: 2px solid var(--dark);
  border-radius: 0 12px 12px 0; box-shadow: 0 16px 36px rgba(0,0,0,.14); z-index: 38; overflow-y: auto; background: #fff; }
.hrail-fly.wfh-mega.open { display: block; }
/* when the panel is open, square the rail's right corners so the join is a clean seam, one block */
/* the accent seam is 1px border + 1px inset shadow, NOT a 2px border: growing the border
   would push the whole list down by a pixel every time the panel opens */
.hrail-wrap:has(.hrail-fly.open) .hrail { border-top-right-radius: 0; border-bottom-right-radius: 0;
  border-top-color: var(--dark); box-shadow: inset 0 1px 0 var(--dark); }
@media (max-width: 859px) { .hrail-fly.wfh-mega { display: none !important; } }
.hrail-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.44); z-index: 20; }
.hrail-scrim.open { display: block; }
@media (max-width: 859px) { .hrail-scrim { display: none !important; } }
.hero-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.hero-chips::-webkit-scrollbar { display: none; }
@media (min-width: 860px) { .hero-chips { display: none; } }
.hero-chips a { flex: none; border: 1.5px solid var(--hair2); border-radius: 100px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--strong); white-space: nowrap; }
/* hero PROMO (per ia/home.md): a promo SLIDER of 2–3 vertical banner cards (visible at once,
   swipeable) + 2 vertical promo banners stacked on the right. */
.hbanners { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 720px) { .hbanners { grid-template-columns: 2fr 1fr; } }
/* HERO LAYOUT with an offer of the day (owner's call 2026-07-30). The category rail is
   ~13 items tall and the banner block was not, so the hero ended in a band of empty
   white. Now the two small banners sit UNDER the slider (filling exactly that band)
   and the right column becomes one tall slot for «Пропозиція дня» - the hero gets a
   third thing to say instead of a hole. Keyed on :has(.hdeal), so a page that carries
   no offer card (home-catalog) keeps the plain side-by-side layout. */
@media (min-width: 720px) {
  .hbanners:has(.hdeal) .hslider { grid-column: 1; grid-row: 1; }
  .hbanners:has(.hdeal) .hside { grid-column: 1; grid-row: 2; grid-template-columns: 1fr 1fr; }
  /* stretch, or the card stops at its content and leaves a gap under itself - the
     whole point of the slot is that it is as tall as the two rows beside it */
  .hbanners:has(.hdeal) .hdeal { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
}

/* OFFER OF THE DAY - the hero's own product card. Same price story as every other
   card (struck price + −% chip + the live figure), just given the room to be looked at. */
.hdeal { border: 1px solid var(--hair); border-radius: 12px; background: #fff; display: flex;
  flex-direction: column; padding: 16px; min-height: 300px; }
.hdeal .hd-tag { font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--strong); }
/* the photo takes whatever height the card has left, so the product is as large as
   the slot allows instead of a fixed thumbnail with white under it */
.hdeal .hd-ph { flex: 1; min-height: 180px; margin: 12px 0; border-radius: 10px; background: var(--fill);
  display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 11px; }
.hdeal .hd-brand { font-size: 11.5px; color: var(--faint); }
.hdeal .hd-nm { font-size: 15px; font-weight: 700; color: var(--strong); line-height: 1.25; margin: 3px 0 6px; }
.hdeal .hd-av { font-size: 11px; font-weight: 700; color: var(--strong); }
.hdeal .hd-price { display: flex; flex-direction: column; gap: 2px; margin: 9px 0 4px; }
.hdeal .hd-oldline { display: flex; align-items: center; gap: 7px; }
.hdeal .hd-old { font-size: 12.5px; color: #aaa; text-decoration: line-through; }
.hdeal .hd-cut { background: var(--dark); color: #fff; font-size: 10px; font-weight: 800; border-radius: 4px; padding: 1px 6px; }
.hdeal .hd-new { font-size: 26px; font-weight: 800; color: var(--strong); }
.hdeal .hd-meta { font-size: 11.5px; color: var(--sec); }
.hdeal .hd-cta { margin-top: 12px; text-align: center; background: var(--dark); color: #fff;
  border-radius: 9px; padding: 12px; font-size: 14px; font-weight: 800; }
/* main slider - 2–3 portrait cards, horizontal scroll-snap (swipe) */
.hslider { min-width: 0; }
.hstrip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.hstrip::-webkit-scrollbar { display: none; }
.hpromo { scroll-snap-align: start; flex: 0 0 62%; min-height: 300px; border: 1px solid var(--hair); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  background: repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f3f3f3 10px, #f3f3f3 20px); }
@media (min-width: 720px) { .hpromo { flex-basis: 46%; min-height: 340px; } }
.hpromo .hptag { font-size: 11px; font-weight: 700; color: var(--sec); letter-spacing: .02em; }
.hpromo .hph { font-size: 18px; font-weight: 800; color: var(--strong); line-height: 1.2; }
.hpromo .hps { font-size: 12.5px; color: var(--sec); }
.hdots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.hdots i { width: 7px; height: 7px; border-radius: 50%; background: #cfcfcf; }
.hdots i.on { background: var(--dark); }
/* right column - 2 vertical banners stacked (новинки / сезон) */
.hside { display: grid; gap: 12px; grid-template-columns: 1fr; }
.hvert { border: 1px solid var(--hair); border-radius: 12px; background: var(--fill); min-height: 130px;
  padding: 14px 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
@media (min-width: 720px) { .hvert { min-height: 164px; } }
/* the side banners sit two-across under the slider, so their copy keeps to a column
   of its own - a product can then be shown large without ever running into a word */
.hvert .hvt { font-size: 15px; font-weight: 800; color: var(--strong); max-width: 60%; }
.hvert .hvs { font-size: 12px; color: var(--sec); max-width: 60%; }

/* personal strip (role state) */
.pstrip { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; border: 1px solid var(--hair); border-radius: 12px; padding: 12px 16px; margin: 12px 0; background: var(--fill2); font-size: 13.5px; }
.pstrip .pt { font-weight: 700; color: var(--strong); }
.pstrip .psp { flex: 1; }
.pstrip .thumbs { display: flex; gap: 6px; }
.pstrip .thumb { width: 34px; height: 34px; border-radius: 6px; background: var(--fill); border: 1px solid var(--hair); }
/* CART SHELF (home state, ia/home.md §«Cart shelf») - non-empty-cart nudge under the hero:
   count + sum + item thumbnails + «Оформити замовлення» / «Переглянути кошик». */
.cshelf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1.5px solid var(--dark); border-radius: 12px; padding: 13px 16px; margin: 14px 0; background: #fff; }
.cshelf .cs-ico { font-size: 20px; flex: none; }
.cshelf .cs-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cshelf .cs-h { font-size: 14px; font-weight: 800; color: var(--strong); }
.cshelf .cs-s { font-size: 12.5px; color: var(--sec); }
.cshelf .cs-s b { color: var(--strong); }
.cshelf .cs-thumbs { display: flex; gap: 6px; margin-left: 4px; }
.cshelf .cs-th { width: 40px; height: 40px; border-radius: 7px; background: var(--fill); border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 8px; position: relative; }
.cshelf .cs-th .q { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; border-radius: 100px; background: var(--dark); color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.cshelf .cs-th.more { font-size: 12px; font-weight: 800; color: var(--sec); }
.cshelf .cs-sp { flex: 1; min-width: 12px; }
.cshelf .cs-act { display: flex; gap: 9px; flex-wrap: wrap; }
@media (max-width: 560px) { .cshelf .cs-act { width: 100%; } .cshelf .cs-act .btn { flex: 1; text-align: center; } }

/* section heading */
.sech { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 32px 0 14px; }
.sech h2 { font-size: 21px; font-weight: 800; color: var(--strong); letter-spacing: -.01em; }
.sech .all { font-size: 13px; color: var(--strong); font-weight: 700; white-space: nowrap; }

/* goal tiles */
.goaltiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 620px) { .goaltiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .goaltiles { grid-template-columns: repeat(6, 1fr); } }
.gtile { border: 1.5px solid var(--hair2); border-radius: 12px; padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.gtile:hover { border-color: var(--dark); }
.gtile .gph { width: 40px; height: 40px; border-radius: 9px; background: var(--fill); }
.gtile .gt { font-size: 13px; font-weight: 700; color: var(--strong); }
.goalcta { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.goalcta .hint { font-size: 12.5px; color: var(--sec); }

/* trust band - the plain text strip. Still used by the coach landing (5.0), which
   has no imagery of its own; the home page uses .tbanners below. */
.tband { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 13px 16px; border: 1px solid var(--hair); border-radius: 12px; background: var(--fill2); font-size: 12.5px; color: var(--sec); margin: 22px 0; }
.tband span b { color: var(--strong); }

/* trust - five MINI BANNERS (home 0.0, owner's call 2026-07-30). The one-line strip
   read as fine print; the same five promises as picture + claim carry their weight,
   and each one is a real link into the page that proves it (guarantee · delivery ·
   returns · reviews) - the trust band becomes an internal-link surface, not decoration. */
.tbanners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 22px 0; }
@media (min-width: 700px) { .tbanners { grid-template-columns: repeat(5, 1fr); } }
.tbanners .tbn { border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.tbanners .tbim { display: block; height: 96px; background: var(--fill); flex: none; }
.tbanners .tbx { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 3px; }
.tbanners .tbx b { font-size: 13px; font-weight: 800; color: var(--strong); line-height: 1.25; }
.tbanners .tbx i { font-style: normal; font-size: 11.5px; color: var(--sec); line-height: 1.35; }

/* product tabs */
.ptabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ptab { border: 1.5px solid var(--hair2); border-radius: 100px; padding: 8px 15px; font-size: 13px; font-weight: 700; color: var(--strong); }
.ptab.on { background: var(--dark); color: #fff; border-color: var(--dark); }

/* coach banner */
.coachbn { border: 1.5px solid var(--dark); border-radius: 14px; padding: 22px; margin: 32px 0; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.coachbn .ct { font-size: 19px; font-weight: 800; color: var(--strong); }
.coachbn .cs { font-size: 13px; color: var(--sec); margin-top: 5px; max-width: 560px; }

/* brands / blog / promo */
.brandrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 620px) { .brandrow { grid-template-columns: repeat(6, 1fr); } }
.brandbox { border: 1px solid var(--hair); border-radius: 10px; height: 62px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--sec); }
.blogrow { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .blogrow { grid-template-columns: repeat(3, 1fr); } }
.blogcard { border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.blogcard .bim { height: 120px; background: var(--fill); }
.blogcard .btx { padding: 12px 13px 14px; }
.blogcard .bt { font-size: 14px; font-weight: 700; color: var(--strong); line-height: 1.3; }
.blogcard .bdt { font-size: 12px; color: var(--sec); margin-top: 6px; }
/* weekly promo - a real banner, not a dashed note: the claim sits left, the picture
   fills the strip (owner's call 2026-07-30). Still calm, still no timer. */
.promo { border: 1px solid var(--hair); border-radius: 12px; background: var(--fill2); padding: 26px 24px; margin: 22px 0; min-height: 150px; display: flex; flex-direction: column; justify-content: center; }
.promo .pt { font-size: 20px; font-weight: 800; color: var(--strong); max-width: 22ch; line-height: 1.2; }
.promo .ps { font-size: 13px; color: var(--sec); margin-top: 7px; }
/* step 7.30: «Усі акції» was drawn by style="text-decoration:underline;font-weight:
   700;color:#111" typed into four screens - rule 3 again, and #111 is var(--strong)
   to the byte. It also explains an `!important` that had sat in banner.css since
   the split: the colour layer could not beat an inline style any other way. Same
   appearance here, and the colour layer now wins without shouting. */
.promo .ps a { color: var(--strong); font-weight: 700; text-decoration: underline; }

/* ============================================================
   PRODUCT DETAIL (PDP, node 3.0)
   ============================================================ */
/* sticks BELOW the sticky header (mobile main bar ~32px; desktop meta+main ~87px) - not top:0, else it hides behind the header */
.pdp-tabs { position: sticky; top: 33px; z-index: 25; background: #fff; border-bottom: 1px solid var(--hair); display: flex; gap: 4px; overflow-x: auto; padding: 10px 0; margin-bottom: 18px; align-items: center; scrollbar-width: none; }
.pdp-tabs::-webkit-scrollbar { display: none; }
.pdp-tabs a { flex: none; font-size: 13px; font-weight: 600; color: var(--sec); padding: 6px 12px; border-radius: 100px; white-space: nowrap; }
.pdp-tabs a.on { background: var(--dark); color: #fff; }
.pdp-tabs .tsp { flex: 1; }
/* the shelf repeats the WHOLE price fact, not just the figure (synced 2026-07-29):
   struck old price + −% chip on the top row, the live figure under them, the two-row
   block vertically centred on «У кошик» - the same story the buy box tells. */
.pdp-tabs .tprice { display: none; flex: none; grid-template-columns: auto auto; column-gap: 7px;
  align-items: center; justify-items: start; line-height: 1.15; color: var(--strong);
  white-space: nowrap; margin-right: 6px; }
.pdp-tabs .tprice .told { grid-row: 1; grid-column: 1; font-size: 11.5px; color: #aaa; text-decoration: line-through; }
.pdp-tabs .tprice .tcut { grid-row: 1; grid-column: 2; font-size: 10.5px; font-weight: 800;
  background: var(--dark); color: #fff; border-radius: 4px; padding: 1px 5px; }
.pdp-tabs .tprice .tnew { grid-row: 2; grid-column: 1 / -1; font-size: 17px; font-weight: 800; }
/* no discount → the figure is the whole block and sits on one line */
.pdp-tabs .tprice:not(:has(.told)) .tnew { grid-row: 1; }
.pdp-tabs .tbuy { display: none; }
@media (min-width: 860px) { .pdp-tabs { top: 87px; } .pdp-tabs .tprice { display: inline-grid; } .pdp-tabs .tbuy { display: inline-flex; background: var(--dark); color: #fff; border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 700; margin-left: 10px; } }

.pdp { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 860px) { .pdp { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; } }

.gal .gmain { aspect-ratio: 1; background: var(--fill); border: 1px solid var(--hair); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #bbb; position: relative; }
.gal .gmain .gtag { position: absolute; top: 12px; left: 12px; background: #fff; border: 1.5px solid var(--dark); color: var(--strong); font-size: 10px; font-weight: 800; border-radius: 5px; padding: 2px 8px; text-transform: uppercase; }
.gal .gthumbs { display: flex; gap: 8px; margin-top: 10px; }
.gal .gthumb { width: 64px; height: 64px; border: 1px solid var(--hair); border-radius: 8px; background: var(--fill); }
.gal .gthumb.on { border: 1.5px solid var(--dark); }

.bb .eyebrow { font-size: 12.5px; color: var(--sec); }
.bb h1 { font-size: 23px; font-weight: 800; color: var(--strong); line-height: 1.2; margin: 4px 0 8px; letter-spacing: -.01em; }
.bb .bbrate { font-size: 13px; color: var(--light); } .bb .bbrate .st { color: var(--strong); font-weight: 700; }
.bb .bbmeta { font-size: 12.5px; color: var(--sec); margin: 8px 0; display: flex; gap: 14px; flex-wrap: wrap; }
.bb .bbavail { font-weight: 700; color: var(--strong); }
/* out of stock is a fact, not an alarm: it steps down in tone, it never becomes a red
   pill (contract §2 - no colour semantics) */
.bb .bbavail.out { color: var(--sec); }
/* status line, ONE row under the H1 (locked 2026-07-27): availability + SKU on the
   left, rating + review count on the right. Two facts of the same weight share a row
   instead of stacking two thin lines; under 480px they stack, rating first. */
.bb .bbline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 18px; margin: 9px 0 4px; }
.bb .bbline .bbmeta, .bb .bbline .bbrate { margin: 0; }
.bb .bbline .bbmeta { align-items: center; gap: 10px; }
.bb .bbmeta .art::before { content: "·"; margin-right: 10px; color: var(--hair2); }
@media (max-width: 479px) { .bb .bbline { gap: 3px 14px; } .bb .bbline .bbrate { order: -1; } }
.bb .simple { font-size: 14px; color: var(--ink); background: var(--fill2); border: 1px solid var(--hair); border-radius: 10px; padding: 11px 13px; margin: 12px 0; }
/* price and action share ONE row (synced from the coloured PDP 2026-07-29): the
   figure on the left, «У кошик» + ♡ on the right, the small print full-width under
   both. No quantity stepper - quantity is a cart job, here it only delays the one
   clear action. */
.bb .priceblk { margin: 14px 0; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  display: grid; grid-template-columns: auto minmax(200px, 1fr); column-gap: 22px; row-gap: 9px; align-items: center; }
.bb .priceblk .pbl { grid-column: 1; }
.bb .priceblk .buyrow { grid-column: 2; margin: 0; }
.bb .priceblk .perserv { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 479px) { .bb .priceblk { grid-template-columns: 1fr; row-gap: 14px; } .bb .priceblk .buyrow { grid-column: 1; } }
.bb .oldrow { display: flex; align-items: center; gap: 8px; min-height: 18px; }
.bb .old { font-size: 14px; color: #aaa; text-decoration: line-through; }
.bb .cut { background: var(--dark); color: #fff; font-size: 11px; font-weight: 800; border-radius: 4px; padding: 1px 7px; }
.bb .new { font-size: 32px; font-weight: 800; color: var(--strong); }
.bb .perserv { font-size: 12.5px; color: var(--sec); margin-top: 3px; }
.bb .tier { font-size: 12.5px; color: var(--strong); font-weight: 700; border: 1px dashed var(--hair2); border-radius: 8px; padding: 6px 10px; margin-top: 10px; display: inline-block; }
.bb .vgroup { margin: 14px 0; }
.bb .vlbl { font-size: 12px; font-weight: 700; color: var(--sec); margin-bottom: 7px; }
.bb .vopts { display: flex; gap: 8px; flex-wrap: wrap; }
.bb .vopt { border: 1.5px solid var(--hair2); border-radius: 8px; padding: 8px 13px; font-size: 13px; font-weight: 600; color: var(--strong); }
.bb .vopt.on { border-color: var(--dark); background: var(--dark); color: #fff; }
.bb .vopt.off { color: #bbb; text-decoration: line-through; border-style: dashed; }
.bb .buyrow { display: flex; gap: 10px; align-items: center; margin: 16px 0; }
.bb .addcart { flex: 1; background: var(--dark); color: #fff; border-radius: 9px; padding: 15px; font-size: 15px; font-weight: 700; text-align: center; }
.bb .wish { width: 50px; height: 50px; flex: none; border: 1.5px solid var(--hair2); border-radius: 9px; font-size: 18px; color: var(--faint); }
/* delivery + payment: ONE row per method - mark · method over term · price on the
   right (locked 2026-07-27). Term and price are two different answers (when it
   arrives / what it costs) and must not be glued into one string. Free is stated in
   words. The city chip in the header is the one input that changes every number
   below, so it is a real control and opens the «Оберіть місто» dialog (0.1a). */
.bb .dpblk { border: 1px solid var(--hair); border-radius: 12px; padding: 14px; margin-top: 14px; font-size: 13px; }
.bb .dphead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bb .dph { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--sec); margin: 4px 0 8px; }
.bb .dph2 { margin-top: 14px; padding-top: 13px; }
.bb .dpcity { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--hair2); border-radius: 8px;
  padding: 4px 9px; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--strong); background: #fff; cursor: pointer; }
.bb .dpcity .dpcar { font-size: 10px; color: var(--light); }
.bb .dprow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  column-gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); color: var(--ink); }
.bb .dpic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--fill); font-size: 10px; font-weight: 800; color: var(--sec); }
.bb .dpt b { display: block; font-weight: 700; color: var(--strong); line-height: 1.3; }
.bb .dpt span { display: block; margin-top: 2px; font-size: 12px; color: var(--sec); }
.bb .dpp { font-weight: 700; color: var(--strong); white-space: nowrap; text-align: right; }
.bb .dppay { display: flex; flex-wrap: wrap; gap: 6px; }
.bb .paych { border: 1px solid var(--hair2); border-radius: 7px; padding: 4px 9px; font-size: 12px; color: var(--sec); }

.truststrip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 28px 0 20px; }
@media (min-width: 720px) { .truststrip { grid-template-columns: repeat(4, 1fr); } }
.tsx { border: 1px solid var(--hair); border-radius: 10px; padding: 11px 13px; font-size: 12.5px; }
.tsx b { display: block; color: var(--strong); font-size: 13px; margin-bottom: 2px; }
.tsx span { color: var(--sec); }

.trustsec { border: 1px solid var(--hair); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.trustsec > summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-size: 16px; font-weight: 800; color: var(--strong); background: var(--fill2); cursor: pointer; list-style: none; }
.trustsec > summary::-webkit-details-marker { display: none; }
.trustsec > summary .chev { color: var(--light); }
.trustsec[open] > summary .chev { transform: rotate(180deg); }
.trustsec .tsb { padding: 14px 16px; font-size: 13.5px; color: var(--ink); }
.ctable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ctable th, .ctable td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hair); }
.ctable th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--sec); }
.ctable td b { color: var(--strong); }
.fullcomp { background: var(--fill2); border: 1px solid var(--hair); border-radius: 10px;
  padding: 11px 13px; margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--ink); }
/* allergens are pulled OUT of the ingredient paragraph (locked 2026-07-27): a safety
   fact must be findable in one glance, so it gets its own block with a warning mark.
   Greyscale: weight + the ⚠ glyph carry it, never a colour (contract §2). */
.allerg { display: flex; align-items: flex-start; gap: 9px; margin-top: 9px; font-size: 12.5px;
  line-height: 1.5; color: var(--ink); border: 1px solid var(--hair2); border-radius: 10px; padding: 11px 13px; }
.allerg .algic { flex: none; font-weight: 800; color: var(--strong); }
.allerg b { color: var(--strong); font-weight: 800; }
.allerg .algv { font-weight: 800; color: var(--strong); letter-spacing: .02em; }
/* the composition label as printed on the pack, shown LARGE (locked 2026-07-27):
   the same figures as .ctable above, laid out the way the buyer will check them
   against the jar in their hand. Built in DOM, never a generated image - this block
   exists to be read. */
.packlabel { margin: 16px 0 0; }
.pl-panel { border: 1px solid var(--hair2); border-radius: 14px; background: var(--fill); padding: 16px; display: grid; gap: 16px; }
@media (min-width: 720px) {
  .pl-panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; padding: 20px; align-items: stretch; }
  .pl-foot { grid-column: 1 / -1; }
}
.pl-facts { background: #fff; border: 1px solid var(--hair); border-radius: 10px; padding: 14px 15px 12px; }
.pl-h { font-size: 18px; font-weight: 800; color: var(--strong); line-height: 1.1; border-bottom: 2px solid var(--dark); padding-bottom: 7px; }
.pl-serv { font-size: 12.5px; line-height: 1.45; padding: 7px 0; border-bottom: 1px solid var(--hair); color: var(--ink); }
.pl-cal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 2px solid var(--dark); }
.pl-cal span { font-size: 12.5px; font-weight: 700; color: var(--sec); }
.pl-cal b { font-size: 22px; font-weight: 800; color: var(--strong); line-height: 1; }
.pl-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pl-t th { text-align: left; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--sec);
  padding: 6px 0 5px; border-bottom: 1px solid var(--hair2); }
.pl-t th:last-child, .pl-t td:last-child { text-align: right; white-space: nowrap; }
.pl-t td { padding: 6px 0; border-bottom: 1px solid var(--hair); line-height: 1.35; color: var(--ink); }
.pl-t tr:last-child td { border-bottom: none; }
.pl-note { font-size: 10.5px; line-height: 1.4; color: var(--light); padding-top: 8px; border-top: 1px solid var(--hair2); margin-top: 2px; }
.pl-right { display: grid; gap: 14px; grid-template-rows: auto 1fr; align-content: stretch; }
.pl-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; text-align: center;
  padding-bottom: 14px; border-bottom: 1px solid var(--hair2); }
.pl-hw { display: grid; justify-items: center; gap: 2px; }
/* :empty so the placeholder box disappears the moment a real icon is injected */
.pl-hw .pl-ic:empty { width: 26px; height: 26px; border: 1px solid var(--hair2); border-radius: 7px; margin-bottom: 4px; }
/* no colour here on purpose: the figure inherits its panel. In the wireframe the panel
   is a light fill (ink text), in the colour layer it is the pack's dark surface (white
   text) - hard-coding ink here put black on black there. */
.pl-hw b { font-size: 14px; font-weight: 800; }
.pl-hw span:not(.pl-ic) { font-size: 10.5px; line-height: 1.35; color: var(--sec); }
.pl-ing { background: #fff; border: 1px solid var(--hair); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.pl-ing b { font-weight: 800; color: var(--strong); }
.pl-alg { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--hair); }
.pl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; border-top: 1px solid var(--hair2);
  padding-top: 12px; font-size: 10.5px; line-height: 1.4; color: var(--sec); }
.pl-mark { width: 17px; height: 17px; flex: none; background: var(--fill2); border-radius: 4px; }
.packlabel figcaption { font-size: 12px; color: var(--light); margin-top: 9px; }
/* PDP description - stacked blocks: text, then a picture below it (repeatable) */
.pdesc { display: flex; flex-direction: column; gap: 28px; margin-top: 12px; max-width: 900px; }
.pd-tx { color: var(--sec); font-size: 14px; line-height: 1.6; }
.pd-tx b { color: var(--strong); }
.pd-img { margin-top: 12px; aspect-ratio: 16 / 7; border: 1px dashed var(--hair2); border-radius: 12px; background: var(--fill); display: flex; align-items: center; justify-content: center; color: var(--light); font-size: 12px; }
.certbox { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.certthumb { width: 90px; height: 120px; border: 1px solid var(--hair2); border-radius: 8px; background: var(--fill); display: flex; align-items: center; justify-content: center; color: var(--light); font-size: 11px; text-align: center; }

.spectbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.spectbl td { padding: 9px 10px; border-bottom: 1px solid var(--hair); }
.spectbl td:first-child { color: var(--sec); width: 200px; }
.spectbl td b { color: var(--strong); }

.rvhead { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; margin-bottom: 12px; }
@media (min-width: 620px) { .rvhead { grid-template-columns: 190px 1fr auto; } }
.rvbig { text-align: center; }
.rvbig .n { font-size: 44px; font-weight: 800; color: var(--strong); line-height: 1; }
.rvbig .s { font-size: 13px; color: var(--sec); margin-top: 4px; }
.rvbars { display: flex; flex-direction: column; gap: 5px; }
.rvbar { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sec); }
/* the count column is FIXED and left-aligned: sized by its own text, «103» stole width
   from its track and that row's bar ended short of the others - five bars that should
   compare read as a ragged edge (fixed 2026-07-29; px, not ch, because the wireframe
   font is proportional) */
.rvbar > span { text-align: left; }
.rvbar > span:first-child { min-width: 9px; }
.rvbar > span:last-child { min-width: 26px; }
.rvbar .track { flex: 1; height: 6px; background: var(--fill); border-radius: 4px; overflow: hidden; }
.rvbar .fill { height: 100%; background: var(--dark); }
.rvitem { border-top: 1px solid var(--hair); padding: 16px 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 620px) { .rvitem { grid-template-columns: 180px 1fr; } }
.rvmeta .rname { font-weight: 700; color: var(--strong); font-size: 14px; }
.rvmeta .rdate { font-size: 12px; color: var(--light); margin-top: 2px; }
.rvmeta .rstars { font-size: 13px; color: var(--strong); font-weight: 700; margin-top: 4px; }
.rvmeta .rbadge { display: inline-block; font-size: 10px; font-weight: 800; border: 1px solid var(--hair2); border-radius: 100px; padding: 1px 7px; color: var(--sec); margin-top: 6px; }
.rvbody .prc { font-size: 13px; margin: 3px 0; } .rvbody .prc b { color: var(--strong); }
.rvbody .rtext { font-size: 13.5px; color: var(--ink); margin-top: 4px; }
.rvreply { border-left: 2px solid var(--hair2); padding: 8px 0 4px 12px; margin-top: 10px; font-size: 13px; }
.rvreply .rchip { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--strong); font-size: 12px; margin-bottom: 4px; }
.rvreply .rchip .lg { background: var(--dark); color: #fff; border-radius: 4px; font-size: 9px; padding: 1px 5px; }

.qaitem { border-top: 1px solid var(--hair); padding: 14px 0; }
.qaitem .qq { font-weight: 700; color: var(--strong); font-size: 14px; }
.qaitem .qans { font-size: 13.5px; color: var(--ink); margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--hair2); }

/* ---------- reviews-recovery state (3.0 · відгуки): proof left, product pinned right ----------
   Locked 2026-07-30. The unsure buyer reads the certificate and other people's words while the
   thing they are deciding on stays on screen and travels with the scroll. Replaces the two bare
   CTAs that used to wait at the very bottom of the page: the action follows the proof instead of
   being announced after it.
   The product is the CANONICAL product card (.pcard - the very same component as the listing
   grid, owner's call 2026-07-30), so the pinned card can never drift from the card language:
   photo · brand · name · availability · price row with the compact cart button · rating ·
   per-serving/bonus. This wrapper adds only the sticky behaviour and the quiet way back. */
.revcols { display: grid; grid-template-columns: 1fr; gap: 24px; }
.pmini .pmback { display: block; font-size: 12.5px; color: var(--sec); margin: 12px 2px 0;
  padding-top: 12px; border-top: 1px solid var(--hair); }
/* mobile: the card is context and comes FIRST (right under the banner - you see what is being
   judged before you read the proof), and it lies down so it costs a third of a screen, not one */
@media (max-width: 859px) {
  .pmini { order: -1; }
  .pmini .pcard { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: start; }
  .pmini .pcard .ph { aspect-ratio: 1; }
  .pmini .pcard .bd { padding-right: 46px; }   /* keeps the name clear of the ♡ corner */
  .pmini .pcard .nm { min-height: 0; }
}
@media (min-width: 860px) {
  .revcols { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
  .pmini { position: sticky; top: 120px; }
}

.mbuybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--hair); display: flex; gap: 12px; align-items: center; padding: 10px 16px; }
@media (min-width: 860px) { .mbuybar { display: none; } }
/* the same price story as the buy box: struck price + −% above, the figure below.
   A discount the page shows must not vanish in the bar that actually sells. */
.mbuybar .mbp { display: grid; grid-template-columns: auto auto; column-gap: 7px; align-items: center;
  font-size: 19px; font-weight: 800; color: var(--strong); line-height: 1.15; }
.mbuybar .mbp .mold { grid-row: 1; grid-column: 1; font-size: 12px; color: #aaa; text-decoration: line-through; }
.mbuybar .mbp .mcut { grid-row: 1; grid-column: 2; font-size: 11px; font-weight: 800;
  background: var(--dark); color: #fff; border-radius: 4px; padding: 1px 6px; }
.mbuybar .mbp b { grid-row: 2; grid-column: 1 / -1; font-size: 19px; font-weight: 800; }
.mbuybar .mba { flex: 1; background: var(--dark); color: #fff; border-radius: 9px; padding: 13px; font-size: 15px; font-weight: 700; text-align: center; }
/* the tab bar already owns the bottom edge on mobile (60px + safe area), so the buy bar
   stacks ABOVE it - at bottom:0 the tab bar (z-index 50) covered it and the page's one
   action was unreachable. Only a page that HAS a buy bar reserves the extra room, else
   the listing would show a white hole above the tab bar. (Ported from the colour layer,
   where this was already fixed - 2026-07-30.) */
@media (max-width: 859px) {
  .mbuybar { bottom: calc(61px + env(safe-area-inset-bottom, 0px)); }   /* 60px bar + its 1px hairline */
  body:has(.mbuybar) { padding-bottom: 132px; }
}

/* ---------- prototype bar (thin, top of every screen; from _nav.js) ---------- */
.wf-bar { background: var(--dark); color: #fff; font-size: 12px; padding: 7px 16px; display: flex; gap: 6px 13px; flex-wrap: wrap; align-items: center; }
.wf-bar a { color: #fff; opacity: .8; }
.wf-bar a:hover { opacity: 1; text-decoration: underline; }
.wf-bar .sepb { opacity: .35; }
.wf-bar .cur { font-weight: 800; }

/* ---------- «Всі екрани» tree (@@WFHUB@@; from _nav.js) ---------- */
.wt-flow { border: 1px solid var(--hair); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.wt-fh { background: var(--fill); padding: 13px 16px; font-weight: 800; color: var(--strong); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wt-fh .soon { background: var(--dark); color: #fff; font-size: 10px; font-weight: 800; border-radius: 100px; padding: 2px 9px; text-transform: uppercase; letter-spacing: .04em; }
.wt-fnote { font-size: 12px; color: var(--sec); font-weight: 500; }
.wt-screen { border-top: 1px solid var(--hair); padding: 11px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.wt-sname { font-weight: 700; color: var(--strong); font-size: 14px; min-width: 190px; }
.wt-sname .node { color: var(--light); font-weight: 600; font-size: 11px; margin-left: 6px; }
.wt-sname.planned { color: var(--light); }
.wt-states { display: flex; flex-wrap: wrap; gap: 6px; }
.wt-st { border: 1px solid var(--hair2); border-radius: 100px; padding: 3px 11px; font-size: 11px; font-weight: 600; color: #444; }
.wt-st.base { border-color: var(--dark); color: var(--strong); }
.wt-st.planned { color: #bbb; border-style: dashed; border-color: var(--hair); }

/* ============================================================
   ACCOUNT SHELL (node 7.x) - shared across account.html + all account-*.html
   sub-sections. Moved here from account.html so every account page + the
   wfAccountNav() component stay in sync. Greyscale only.
   ============================================================ */
.acc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 16px; }
@media (min-width: 960px) { .acc { grid-template-columns: 268px minmax(0, 1fr); gap: 28px; } }
.acc-nav { align-self: start; min-width: 0; }
@media (min-width: 960px) { .acc-nav { position: sticky; top: 120px; } }
.acc-prof { border: 1px solid var(--hair); border-radius: 14px; padding: 15px 16px; display: flex; gap: 13px; align-items: center; }
.acc-prof .av { width: 48px; height: 48px; border-radius: 50%; background: var(--fill); border: 1px solid var(--hair); flex: none; display: flex; align-items: center; justify-content: center; color: var(--light); font-size: 19px; }
.acc-prof .who { min-width: 0; }
.acc-prof .nm { font-weight: 800; color: var(--strong); font-size: 15px; }
.acc-prof .ph { font-size: 12px; color: var(--sec); margin-top: 2px; }
.acc-tier { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 11px; font-weight: 800; border: 1px solid var(--hair2); border-radius: 100px; padding: 2px 9px; color: var(--strong); }
.acc-tier.free { border-color: var(--hair2); color: var(--sec); }
/* coach cabinet: «Нова сесія» distinct highlighted CTA block (separate from the section list) */
.coach-newcta { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 12px; padding: 14px 15px; border-radius: 12px; background: var(--dark); color: #fff; font-size: 14px; font-weight: 800; border: 1.5px solid var(--dark); }
.coach-newcta .cn-plus { font-size: 18px; line-height: 1; }
.acc-links { margin-top: 12px; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; }
.acc-link { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 13px 15px; border-bottom: 1px solid var(--hair); font-size: 14px; font-weight: 600; color: var(--strong); background: #fff; }
.acc-link:last-child { border-bottom: none; }
.acc-link .ic { width: 20px; text-align: center; color: var(--sec); font-size: 15px; }
.acc-link .ct { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--light); }
.acc-link .ar { margin-left: 8px; color: #bbb; font-weight: 700; }
@media (min-width: 960px) { .acc-link .ar { display: none; } }
.acc-link[aria-current="page"] { background: var(--fill); }
.acc-link[aria-current="page"] .ic { color: var(--strong); }
.acc-link.logout { color: var(--sec); font-weight: 700; }
.acc-link.buyer { color: var(--sec); font-weight: 700; border-top: 1px solid var(--hair); }
@media (max-width: 959px) { .acc-link.buyer { border-top: 0; } }
/* ---- Mobile account nav: horizontal swipeable chips (не довгий список вниз) ---- */
@media (max-width: 959px) {
  .acc-links {
    margin-top: 12px; min-width: 0; max-width: 100%;
    border: 0; border-radius: 0;
    display: flex; gap: 8px; padding-bottom: 4px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .acc-links::-webkit-scrollbar { display: none; }
  .acc-link {
    width: auto; flex: none; white-space: nowrap;
    border: 1px solid var(--hair2); border-radius: 100px;
    padding: 9px 15px; gap: 8px; font-weight: 700; background: #fff;
  }
  .acc-link .ar { display: none; }
  .acc-link .ic { font-size: 14px; }
  .acc-link .ct {
    margin-left: 3px; border: 1px solid var(--hair2);
    border-radius: 100px; padding: 0 6px; color: var(--sec);
  }
  .acc-link[aria-current="page"] { background: var(--dark); border-color: var(--dark); color: #fff; }
  .acc-link[aria-current="page"] .ic { color: #fff; }
  .acc-link[aria-current="page"] .ct { border-color: rgba(255,255,255,.45); color: #fff; }
}
.acc-h1 { font-size: 24px; font-weight: 800; color: var(--strong); letter-spacing: -.01em; }
.acc-sub { color: var(--sec); font-size: 14px; margin-top: 4px; }
.acc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
@media (min-width: 640px) { .acc-grid { grid-template-columns: 1fr 1fr; } }
.acard { border: 1px solid var(--hair); border-radius: 14px; padding: 16px; }
.acard.span2 { grid-column: 1 / -1; }
.acard .ah { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.acard .ah h3 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--sec); }
.acard .ah a, .acard .ah .lnk { font-size: 12.5px; font-weight: 700; color: var(--strong); }
.abonus .big { font-size: 34px; font-weight: 800; color: var(--strong); line-height: 1; }
.abonus .u { font-size: 13px; color: var(--sec); margin-top: 4px; }
.abonus .warn { font-size: 12.5px; color: var(--sec); margin-top: 12px; border: 1px dashed var(--hair2); border-radius: 8px; padding: 8px 10px; }
.abonus .warn b { color: var(--strong); }
.loy .lt { font-size: 16px; font-weight: 800; color: var(--strong); }
.loy .lbar { height: 8px; background: var(--fill); border-radius: 6px; overflow: hidden; margin: 11px 0 7px; }
.loy .lbar i { display: block; height: 100%; background: var(--dark); }
.loy .ls { font-size: 12.5px; color: var(--sec); }
.loy .ls b { color: var(--strong); }
.loy .ladder { display: flex; gap: 8px; margin-top: 13px; }
.loy .lrung { flex: 1; border: 1px solid var(--hair); border-radius: 9px; padding: 9px 6px; text-align: center; font-size: 11.5px; color: var(--sec); background: var(--fill2); }
.loy .lrung .rn { display: block; font-weight: 800; color: var(--strong); font-size: 12px; }
/* The ladder has to answer three questions at a glance: what is already MINE, where am
   I NOW, what is NEXT. One class per answer - and a status word under every rung,
   because a border cannot say «отримано» and cannot be read out loud. */
.loy .lrung .rs { display: block; margin-top: 4px; font-size: 10.5px; color: var(--light); }
.loy .lrung.done { background: #fff; border-color: var(--hair2); }
.loy .lrung.done .rs { color: var(--sec); }
/* поточний = «ви тут»: the same top marker the account nav uses for the open section */
.loy .lrung.now { background: #fff; border-color: var(--dark); box-shadow: inset 0 2px 0 var(--dark); }
.loy .lrung.now .rs { color: var(--strong); font-weight: 700; }
/* наступний = a boundary drawn but not crossed yet, so the border is dashed. It keeps
   the white ground of the earned rungs: white = in play (mine, or the one I am working
   toward), tinted = not yet - on a brand-new account this is the ONLY lit rung. */
.loy .lrung.next { background: #fff; border-style: dashed; border-color: var(--hair2); }
.loy .lrung.next .rs { color: var(--strong); }
.loy .lrung.locked .rn { color: var(--sec); }
.aorder .orow { display: flex; align-items: flex-start; gap: 13px; }
.aord-thumbs { display: flex; gap: 6px; flex: none; }
.aord-thumbs .t { width: 46px; height: 46px; border-radius: 8px; background: var(--fill); border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 9px; }
.aord-info { min-width: 0; }
.aord-info .no { font-weight: 800; color: var(--strong); font-size: 14px; }
.aord-info .meta { font-size: 12.5px; color: var(--sec); margin-top: 3px; }
.aord-status { display: inline-block; font-size: 11px; font-weight: 800; border: 1px solid var(--hair2); border-radius: 100px; padding: 2px 9px; color: var(--strong); margin-top: 8px; }
.aord-actions { display: flex; gap: 9px; margin-top: 15px; flex-wrap: wrap; }
.aord-actions .btn { padding: 10px 16px; }
.aaddr .adef { border: 1px solid var(--hair); border-radius: 10px; padding: 11px 12px; font-size: 13px; }
.aaddr .adef .tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--sec); }
.aaddr .adef .line { color: var(--strong); font-weight: 700; margin-top: 3px; }
.aaddr .amore { font-size: 12.5px; color: var(--sec); margin-top: 10px; }

/* ============================================================
   ACCOUNT SECTIONS (7.0–7.6) - the per-section components. These used to live
   in a per-page <style> block, which meant (a) five pages carried their own copy
   of the shell and (b) no later stylesheet could re-skin them (an inline <style>
   in <head> wins at equal specificity). One definition each, here.
   ============================================================ */

/* --- 7.0 Огляд: restock nudge (Decision 4 · Job 3-restock) - calm, no anxiety --- */
.restock .rk-lead { font-size: 13px; color: var(--sec); margin: -4px 0 12px; }
.rk-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.rk-item:last-child { border-bottom: none; padding-bottom: 2px; }
.rk-item:first-of-type { padding-top: 2px; }
.rk-ph { width: 46px; height: 46px; border-radius: 8px; background: var(--fill); border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 9px; flex: none; }
.rk-tx { min-width: 0; }
.rk-nm { font-size: 13.5px; font-weight: 700; color: var(--strong); line-height: 1.3; }
.rk-cy { font-size: 12px; color: var(--sec); margin-top: 2px; }
.rk-cy b { color: var(--strong); font-weight: 700; }
.rk-add { margin-left: auto; white-space: nowrap; }

/* --- 7.2/7.3 Замовлення: accordion (collapsed row → full order detail) --- */
.ord-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 4px; }
.ord-tab { font-size: 12.5px; font-weight: 700; border: 1px solid var(--hair2); border-radius: 100px; padding: 7px 15px; color: var(--sec); background: #fff; }
.ord-tab.on { border-color: var(--dark); color: var(--strong); background: var(--fill); }
.ord-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.ord { border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: #fff; }
.ord-h { width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 9px 14px; padding: 14px 16px; background: #fff; border: 0; text-align: left; cursor: pointer; font: inherit; }
.oh-no { font-size: 15px; font-weight: 800; color: var(--strong); white-space: nowrap; }
.oh-date { font-size: 12.5px; color: var(--sec); white-space: nowrap; }
.oh-status { font-size: 11.5px; font-weight: 800; border: 1px solid var(--hair2); border-radius: 100px; padding: 3px 10px; white-space: nowrap; color: var(--strong); }
.oh-status.ok::before, .oh-status.go::before, .oh-status.wait::before { content: "● "; }
.oh-thumbs { display: flex; gap: 5px; margin-left: auto; }
.oh-thumbs i { width: 34px; height: 38px; border-radius: 7px; background: var(--fill); border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; font-size: 8px; color: #bbb; font-style: normal; }
.oh-thumbs i.more { font-weight: 800; color: var(--sec); font-size: 12px; background: var(--fill2); }
.oh-sum { font-size: 15px; font-weight: 800; color: var(--strong); white-space: nowrap; min-width: 72px; text-align: right; }
.oh-drop { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--hair2); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--sec); flex: none; }
.chev { display: inline-block; transition: transform .15s; line-height: 1; }
.ord.open .chev { transform: rotate(180deg); }
.ob-collapse { display: none; }
.ord-body { display: none; border-top: 1px solid var(--hair); padding: 16px; }
.ord.open .ord-body { display: block; }
.ob-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 820px) { .ob-grid { grid-template-columns: 1fr 292px; } }
.ob-line { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--hair); align-items: start; }
.ob-line:first-child { padding-top: 2px; }
.ob-line .ph { width: 52px; height: 56px; border-radius: 8px; background: var(--fill); border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 9px; }
.ln-nm { font-size: 13.5px; font-weight: 700; color: var(--strong); line-height: 1.3; }
.ln-review { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 12px; font-weight: 700; color: var(--strong); text-decoration: underline; }
.ln-right { text-align: right; white-space: nowrap; }
.ln-calc { font-size: 12px; color: var(--sec); }
.ln-tot { font-size: 14px; font-weight: 800; color: var(--strong); margin-top: 3px; }
.ob-sum { margin-top: 15px; }
.sr { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 0; }
.sr span:first-child { color: var(--sec); }
.sr span:last-child { color: var(--strong); font-weight: 600; white-space: nowrap; }
.sr.total { border-top: 1.5px solid var(--hair2); margin-top: 7px; padding-top: 12px; }
.sr.total span { font-size: 16px; font-weight: 800; color: var(--strong); }
.sr.accrual span:last-child { color: var(--strong); font-weight: 800; }
.ob-receipt { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--strong); text-decoration: underline; }
.ob-repeat { width: 100%; justify-content: center; }
.ob-del { border: 1px solid var(--hair); border-radius: 12px; padding: 15px; margin-top: 14px; display: flex; flex-direction: column; gap: 13px; }
.dl .dk { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--light); font-weight: 700; }
.dl .dv { font-size: 13px; color: var(--strong); font-weight: 600; margin-top: 3px; line-height: 1.4; }
.ord-oos { font-size: 12px; color: var(--sec); margin: 14px 0 2px; border: 1px dashed var(--hair2); border-radius: 8px; padding: 9px 11px; }
.ord-oos b { color: var(--strong); }
/* mobile order card: 2-col facts (№/статус · дата/сума) → thumbs → «Детальніше» bar;
   an open card ends with a «Згорнути» button */
@media (max-width: 640px) {
  .ord-h { display: grid; align-items: center; gap: 3px 12px; grid-template-columns: 1fr auto;
    grid-template-areas: "no date" "stat sum" "thmb thmb" "more more"; }
  .oh-no { grid-area: no; }
  .oh-date { grid-area: date; justify-self: end; }
  .oh-status { grid-area: stat; justify-self: start; margin-top: 3px; }
  .oh-sum { grid-area: sum; justify-self: end; margin-top: 3px; }
  .oh-thumbs { grid-area: thmb; margin-left: 0; margin-top: 11px; }
  .oh-drop { grid-area: more; width: 100%; height: auto; margin-top: 13px; padding: 11px;
    border-radius: 10px; gap: 7px; font-size: 13px; font-weight: 800; color: var(--strong); }
  .oh-drop::before { content: "Детальніше"; }
  .ord.open .oh-drop { display: none; }
  .ob-collapse { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; margin-top: 16px; padding: 11px; border: 1px solid var(--hair2); border-radius: 10px;
    background: #fff; font: inherit; font-size: 13px; font-weight: 800; color: var(--strong); cursor: pointer; }
}

/* --- 7.4 Знижки та бонуси: two mechanisms + bonus ledger (Job 6) --- */
.loy-two { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
@media (min-width: 760px) { .loy-two { grid-template-columns: 1fr 1fr; } }
.loy-two .acard { padding: 18px; }
.mech-kicker { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--light); }
.lbar.maxed i { background: var(--strong); }
/* the top tier at max is just the current tier - .now already draws it, one name per look */
.led-wrap { border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; margin-top: 22px; }
.led-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 15px 16px 13px; border-bottom: 1px solid var(--hair); }
.led-head h2 { font-size: 16px; font-weight: 800; color: var(--strong); }
.led-head a { font-size: 12.5px; font-weight: 700; color: var(--strong); }
table.led { width: 100%; border-collapse: collapse; font-size: 13px; }
table.led th { text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--sec); padding: 10px 16px; background: var(--fill); }
table.led th.num, table.led td.num { text-align: right; white-space: nowrap; }
table.led td { padding: 12px 16px; border-top: 1px solid var(--hair); color: var(--strong); }
table.led td.dt { color: var(--sec); white-space: nowrap; }
table.led td.amt.pos { font-weight: 800; }
table.led td.amt.neg { color: var(--sec); font-weight: 700; }
/* spending bonuses and LOSING them to expiry are different events - the ledger has to
   tell them apart, or the burn (the retention driver) hides among ordinary spends */
table.led tr.burn td { background: var(--fill2); }
table.led td.bal { color: var(--sec); }
.led-note { font-size: 12px; color: var(--sec); padding: 12px 16px; border-top: 1px solid var(--hair); }
.led-empty { padding: 34px 20px; text-align: center; color: var(--sec); font-size: 13.5px; line-height: 1.5; }
.led-empty b { color: var(--strong); display: block; margin-bottom: 4px; font-size: 15px; }

/* --- 7.5 Адреси --- */
.addr-list { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
@media (min-width: 720px) { .addr-list { grid-template-columns: 1fr 1fr; } }
.addr-card { border: 1px solid var(--hair); border-radius: 14px; padding: 16px; }
.addr-card.def { border-color: var(--dark); }
.addr-tag { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--sec); border: 1px solid var(--hair2); border-radius: 100px; padding: 2px 9px; margin-bottom: 10px; }
.addr-card.def .addr-tag { border-color: var(--dark); color: var(--strong); }
.addr-type { font-size: 12px; color: var(--sec); }
.addr-line { font-size: 15px; font-weight: 700; color: var(--strong); margin: 4px 0 2px; }
.addr-sub { font-size: 12.5px; color: var(--sec); }
.addr-acts { display: flex; gap: 9px; margin-top: 15px; flex-wrap: wrap; }
.addr-acts .btn { padding: 9px 15px; }
.addr-add { margin-top: 18px; }
.addr-hint { font-size: 12.5px; color: var(--sec); margin-top: 14px; border: 1px dashed var(--hair2); border-radius: 8px; padding: 10px 12px; line-height: 1.5; }
.addr-hint b { color: var(--strong); }

/* --- 7.1 Профіль (passwordless per auth 1.x). The panel was called .pcard, which is
   the CANONICAL PRODUCT CARD - the colour layer's card skin (and its orange hover)
   landed on the profile form. Renamed .pfcard. --- */
.pfcard { border: 1px solid var(--hair); border-radius: 14px; padding: 18px; margin-top: 18px; max-width: 620px; }
.pfield { padding: 15px 0; border-bottom: 1px solid var(--hair); }
.pfield:first-child { padding-top: 2px; }
.pfield:last-child { border-bottom: none; padding-bottom: 2px; }
.pf-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--sec); }
.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.pf-val { font-size: 15px; font-weight: 700; color: var(--strong); }
.pf-val .ok { font-size: 12px; font-weight: 800; color: var(--strong); margin-left: 6px; }
.pf-act { font-size: 12.5px; font-weight: 700; color: var(--strong); white-space: nowrap; }
.pf-hint { font-size: 12px; color: var(--sec); margin-top: 4px; }
.pf-input { width: 100%; border: 1px solid var(--hair2); border-radius: 8px; padding: 11px 12px; font-size: 15px; color: var(--strong); background: #fafafa; margin-top: 6px; }
.sw { position: relative; width: 44px; height: 26px; border-radius: 100px; background: var(--dark); flex: none; }
.sw i { position: absolute; top: 3px; left: 21px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.sw.off { background: #ddd; }
.sw.off i { left: 3px; }
.pf-note { font-size: 12.5px; color: var(--sec); margin-top: 16px; border: 1px dashed var(--hair2); border-radius: 8px; padding: 10px 12px; max-width: 620px; }
.pf-note b { color: var(--strong); }
.pf-save { margin-top: 18px; }
.pf-danger { margin-top: 22px; }
.pf-actbtn { background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; font-family: inherit; }
.pf-dangerbtn { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--sec); text-decoration: underline; }

/* --- 7.6 Обране: count chip above the canonical .pcard grid --- */
.wl-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.wl-count { font-size: 13px; font-weight: 800; color: var(--sec); }

/* --- shared empty / error boxes (account sections; .mini sits INSIDE a card) --- */
.emptybox { border: 1.5px dashed var(--hair2); border-radius: 14px; padding: 46px 22px; text-align: center; margin-top: 18px; }
.emptybox .ei { font-size: 34px; }
.emptybox .et { font-size: 17px; font-weight: 800; color: var(--strong); margin: 12px 0 6px; }
.emptybox .es { font-size: 13.5px; color: var(--sec); margin-bottom: 18px; max-width: 440px; margin-left: auto; margin-right: auto; line-height: 1.5; }
.emptybox .eact { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.emptybox.mini { border-radius: 12px; padding: 26px 18px; margin-top: 0; }
.emptybox.mini .ei { font-size: 26px; }
.emptybox.mini .et { font-size: 15px; margin: 9px 0 5px; }
.emptybox.mini .es { font-size: 13px; margin-bottom: 15px; }
.errbox { border: 1.5px dashed var(--hair2); border-radius: 14px; padding: 48px 22px; text-align: center; margin-top: 22px; }
.errbox .ei { font-size: 34px; }
.errbox .et { font-size: 19px; font-weight: 800; color: var(--strong); margin: 14px 0 7px; }
.errbox .es { font-size: 13.5px; color: var(--sec); margin-bottom: 20px; max-width: 420px; margin-left: auto; margin-right: auto; }
.errbox .eact { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* loading skeleton of the account shell */
.acc-h1sk { height: 24px; width: 240px; border-radius: 6px; background: #ececec; margin-top: 2px; }
.acc-subsk { height: 12px; width: 320px; max-width: 80%; border-radius: 5px; background: #ececec; margin-top: 12px; }
.acc-cardgrid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
@media (min-width: 640px) { .acc-cardgrid { grid-template-columns: 1fr 1fr; } }
.skcardbox { border: 1px solid var(--hair); border-radius: 14px; padding: 16px; }
.skcardbox.span2 { grid-column: 1 / -1; }
.skcardbox .skline { background: #ececec; }

/* ============================================================
   AUTH DIALOG (node 1.x) - SHARED component. Injected once into <body>
   by wfHeader() → mounted hidden; openAuth(state)/wfAuthGo(state) drive it.
   Phone-OTP-first, passwordless. Split layout. States: phone (base) ·
   loading · code · error · newuser. Greyscale only.
   ============================================================ */
.auth-ov { display: none; position: fixed; inset: 0; background: rgba(18,18,18,.55); z-index: 60;
  align-items: stretch; justify-content: center; }
.auth-ov.open { display: flex; }
.auth-modal { background: #fff; width: 100%; display: flex; overflow-y: auto; }
@media (min-width: 720px) {
  .auth-ov { align-items: center; padding: 24px; }
  /* min-height must yield on a short screen: a fixed 560px beats max-height:94vh in CSS
     (min wins over max), and the dialog then grew past the scrim's padding and lost its
     bottom edge (fixed 2026-07-30) */
  .auth-modal { max-width: 880px; min-height: min(560px, 94vh); max-height: 94vh; border-radius: 16px;
    overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
}
/* left visual panel (desktop only) */
.auth-visual { display: none; }
@media (min-width: 720px) {
  .auth-visual { display: flex; flex-direction: column; justify-content: space-between;
    width: 42%; flex: none; padding: 26px; color: var(--sec); font-size: 12px;
    background: repeating-linear-gradient(45deg,#fafafa,#fafafa 10px,#f2f2f2 10px,#f2f2f2 20px);
    border-right: 1px solid var(--hair); }
}
.auth-visual .vlogo { font-size: 22px; font-weight: 800; color: var(--strong); letter-spacing: -.02em; }
.auth-visual .vmid { align-self: center; text-align: center; color: var(--light); }
.auth-visual .vmid .vi { font-size: 34px; }
.auth-visual .vtag { font-size: 12.5px; color: var(--sec); }
.auth-visual .vtag b { color: var(--strong); display: block; font-size: 14px; margin-bottom: 3px; }
/* right / form panel. It is the SCROLLER: the modal is capped at 94vh and clips (rounded
   corners + the brand panel), so on a short screen the form has to scroll inside it -
   otherwise the dialog is simply cut off with no way down (fixed 2026-07-30). */
.auth-form { flex: 1; min-width: 0; padding: 20px 20px 30px; display: flex; flex-direction: column;
  overflow-y: auto; }
@media (min-width: 720px) { .auth-form { padding: 34px 40px; } }
.auth-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.auth-mlogo { font-size: 18px; font-weight: 800; color: var(--strong); }
/* desktop: the mobile logo is hidden, so the top row would be an empty band above the
   title. The close moves ONTO the title's line instead (owner's call 2026-07-30) - it is
   pinned to the panel corner and the H1 keeps a lane clear of it. */
@media (min-width: 720px) {
  .auth-mlogo { display: none; }
  .auth-form { position: relative; }
  /* ONE horizontal across the whole dialog (owner's call 2026-07-30): wordmark · state
     chip · title · close. Everything but the title is an absolute box that starts at the
     same 34px and is one title-line tall (--auth-row), so all four centres coincide by
     construction, not by a guessed offset. --auth-row is per LAYER, because the layers
     set the H1 at different sizes (grey 22px → 34; colour Oswald 27px → 42, in _theme). */
  .auth-modal { --auth-row: 34px; }
  .auth-top { position: absolute; top: 34px; right: 40px; height: var(--auth-row); margin: 0; }
  .auth-h1 { padding-right: 54px; }
  .auth-visual .vlogo { display: flex; align-items: center; height: var(--auth-row);
    margin-top: 8px; }   /* 26px panel padding + 8 = the same 34px */
}
/* close = the glyph alone, pinned to the right edge (owner's call 2026-07-30): the
   dialog has exactly one way out and it needs no label - and on desktop, where the
   mobile logo is hidden, margin-left:auto keeps it in the corner instead of the start */
.auth-x { margin-left: auto; width: 38px; height: 38px; flex: none; font-size: 16px; color: var(--sec);
  border: 1px solid var(--hair); border-radius: 9px; display: inline-flex; align-items: center;
  justify-content: center; background: none; cursor: pointer; }
/* slim mobile banner replacing the visual */
.auth-banner { display: flex; align-items: center; gap: 10px; background: var(--fill2);
  border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; margin: 8px 0 18px; }
.auth-banner .bi { width: 40px; height: 40px; border-radius: 9px; background: var(--fill);
  display: flex; align-items: center; justify-content: center; color: var(--light); font-size: 18px; flex: none; }
.auth-banner .bt { font-size: 12.5px; color: var(--sec); } .auth-banner .bt b { color: var(--strong); display: block; }
@media (min-width: 720px) { .auth-banner { display: none; } }
.auth-h1 { font-size: 22px; font-weight: 800; color: var(--strong); letter-spacing: -.01em; }
.auth-sub { font-size: 13.5px; color: var(--sec); margin: 6px 0 20px; }
.auth-sub b { color: var(--strong); }
.auth-sub a { color: var(--strong); text-decoration: underline; font-weight: 700; }
/* field */
.fld { margin-bottom: 14px; }
.fld > label { display: block; font-size: 12px; font-weight: 700; color: var(--sec); margin-bottom: 7px; }
.fld > label .opt, .opt { font-size: 11.5px; color: var(--light); font-weight: 600; }
.ph-field { display: flex; align-items: center; border: 1.5px solid var(--hair2); border-radius: 10px; overflow: hidden; }
.ph-field .cc { padding: 13px 12px; background: var(--fill); color: var(--strong); font-weight: 700;
  font-size: 15px; border-right: 1.5px solid var(--hair2); }
.ph-field input { flex: 1; border: none; padding: 13px 12px; font-size: 16px; width: 100%; letter-spacing: .04em; }
.ph-field input:focus { outline: none; }
.txt-field { width: 100%; border: 1.5px solid var(--hair2); border-radius: 10px; padding: 13px 12px; font-size: 16px; }
.txt-field:focus { outline: 2px solid var(--dark); outline-offset: -2px; }
/* primary button (full width, dark) */
.auth-cta { display: block; width: 100%; text-align: center; background: var(--dark); color: #fff;
  border: none; cursor: pointer; border-radius: 10px; padding: 15px; font-size: 15px; font-weight: 700; }
.auth-alt { display: block; width: 100%; text-align: center; border: 1.5px solid var(--dark); background: none;
  cursor: pointer; border-radius: 10px; padding: 14px; font-size: 14px; font-weight: 700; color: var(--strong); margin-top: 10px; }
.auth-consent { font-size: 11.5px; color: var(--light); line-height: 1.55; margin: 14px 0 4px; }
.auth-consent a { color: var(--strong); text-decoration: underline; }
/* «або» divider */
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--light); font-size: 12px; margin: 20px 0; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
/* secondary method buttons */
.smeths { display: flex; flex-direction: column; gap: 10px; }
.sbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; cursor: pointer;
  border: 1.5px solid var(--hair2); border-radius: 10px; padding: 13px; font-size: 14px; font-weight: 700; color: var(--strong); background: #fff; }
.sbtn .ic { width: 22px; height: 22px; border-radius: 5px; background: var(--fill); display: inline-flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--strong); }
.optin { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--sec); margin: 16px 0 4px; cursor: pointer; }
/* the same checkbox as the filter rail, states included - one component, not two */
.optin .cb { width: 18px; height: 18px; border: 1.5px solid var(--hair2); border-radius: 5px; flex: none; margin-top: 1px; }
.optin .cb.on { background: var(--dark); border-color: var(--dark); position: relative; }
.optin .cb.on::after { content: '✓'; color: #fff; font-size: 11px; position: absolute; top: -2px; left: 3px; }
.auth-foot { margin-top: auto; padding-top: 18px; font-size: 12px; color: var(--light); }
.auth-foot a { color: var(--strong); text-decoration: underline; cursor: pointer; }
/* OTP boxes */
.otp { display: flex; gap: 8px; margin: 4px 0 8px; }
.otp .box { flex: 1; min-width: 0; height: 56px; border: 1.5px solid var(--hair2); border-radius: 10px;
  text-align: center; font-size: 22px; font-weight: 800; color: var(--strong); }
.otp .box:focus { outline: 2px solid var(--dark); outline-offset: -2px; }
.otp .box.on { border-color: var(--dark); }
.otp .box.err { border-color: var(--dark); border-width: 2px; background: var(--fill); }
.otp-note { font-size: 12.5px; color: var(--sec); margin: 6px 0 2px; }
.otp-err { font-size: 13px; font-weight: 700; color: var(--strong); border: 1.5px solid var(--dark);
  background: var(--fill); border-radius: 8px; padding: 10px 12px; margin: 8px 0 14px; display: flex; gap: 9px; align-items: flex-start; }
.otp-err .m { font-size: 16px; line-height: 1; }
.otp-err small { display: block; font-weight: 600; color: var(--sec); font-size: 12px; margin-top: 2px; }
.resend { font-size: 12.5px; color: var(--light); margin-top: 14px; }
.resend .cool { font-weight: 700; color: var(--sec); }
.resend a { color: var(--strong); font-weight: 700; text-decoration: underline; cursor: pointer; }
.linkrow { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; margin-top: 14px; }
.linkrow a { color: var(--strong); font-weight: 700; text-decoration: underline; cursor: pointer; }
/* loading block (static - motion deferred) */
.auth-load { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 22px 0 6px; }
.auth-spin { width: 46px; height: 46px; border: 4px solid var(--hair); border-top-color: var(--dark); border-radius: 50%; margin-bottom: 20px; }
.auth-load .lt { font-size: 15px; font-weight: 800; color: var(--strong); }
.auth-load .lp { font-size: 13.5px; color: var(--sec); margin-top: 6px; } .auth-load .lp b { color: var(--strong); }
.auth-skel { width: 100%; max-width: 300px; margin: 24px auto 0; }
.auth-skel .sl { height: 11px; border-radius: 6px; background: #ececec; margin: 9px 0; }
.auth-skel .sl.m { width: 70%; margin-inline: auto; }
.auth-note { font-size: 12px; color: var(--light); text-align: center; margin-top: 14px; line-height: 1.6; }

/* ============================================================
   CLIENT EDIT (node 5.4a) - SHARED modal (edit + delete-confirm). Injected once
   into #wf-client-edit by wfClientEdit(); openClientEdit()/openClientDelete()/
   closeClientEdit() drive it. Inline over the client profile (5.4) or over the
   dimmed .ce-behind context on the reference pages. Greyscale only.
   ============================================================ */
.ceov { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.36); z-index: 55;
  align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.ceov.open { display: flex; }
.cemodal { background: #fff; width: 100%; max-width: 460px; border: 1px solid var(--hair2); border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12); padding: 22px; margin: auto; }
.cemodal h2 { font-size: 19px; font-weight: 800; color: var(--strong); }
.cemodal .ce-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cemodal .ce-x { font-size: 20px; color: var(--light); background: none; border: none; cursor: pointer; line-height: 1; }
.cemodal .sub { font-size: 13px; color: var(--sec); margin: 6px 0 16px; line-height: 1.5; }
.cef { margin-bottom: 14px; }
.cef label { display: block; font-size: 12px; font-weight: 700; color: var(--sec); margin-bottom: 6px; }
.cef label .opt { color: var(--light); font-weight: 600; }
.cef input, .cef textarea { width: 100%; border: 1.5px solid var(--hair2); border-radius: 9px; padding: 12px; font-size: 15px; font-family: inherit; }
.cef textarea { min-height: 62px; resize: vertical; font-size: 14px; }
.cegoals { display: flex; flex-wrap: wrap; gap: 8px; }
.cegoals button { font-size: 12.5px; font-weight: 700; border: 1.5px solid var(--hair2); border-radius: 100px; padding: 8px 13px; color: var(--strong); background: #fff; cursor: pointer; }
.cegoals button.on { border-color: var(--dark); background: var(--dark); color: #fff; }
.ceact { display: flex; gap: 10px; margin-top: 18px; }
.ceact .btn { flex: 1; text-align: center; cursor: pointer; }
.cedel { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.cedel button { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--strong); border: 1.5px solid var(--hair2); border-radius: 9px; padding: 9px 14px; background: none; cursor: pointer; }
.cedel .dn { font-size: 11.5px; color: var(--light); margin-top: 8px; line-height: 1.5; }
/* delete-confirm dialog */
.cedlg { background: #fff; width: 100%; max-width: 400px; border: 1px solid var(--hair2); border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12); padding: 24px; text-align: center; margin: auto; }
.cedlg .ic { width: 48px; height: 48px; margin: 0 auto 14px; border: 2px solid var(--strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.cedlg h2 { font-size: 19px; font-weight: 800; color: var(--strong); }
.cedlg p { font-size: 13.5px; color: var(--sec); margin: 8px 0 20px; line-height: 1.55; }
.cedlg .act { display: flex; gap: 10px; }
.cedlg .act .btn { flex: 1; text-align: center; cursor: pointer; }

/* add-address dialog (node 7.5) - reuses .ceov/.cemodal/.cef/.ceact */
.addr-modal { max-height: 90vh; overflow: auto; }
.addr-methods { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.addr-method { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; border: 1.5px solid var(--hair2); border-radius: 12px; padding: 14px; background: #fff; cursor: pointer; }
.addr-method:hover { border-color: var(--dark); background: var(--fill); }
.addr-method .am-ic { font-size: 22px; flex: none; }
.addr-method .am-tx { display: flex; flex-direction: column; min-width: 0; }
.addr-method .am-tx b { font-size: 14px; color: var(--strong); }
.addr-method .am-tx i { font-size: 12px; color: var(--sec); font-style: normal; margin-top: 2px; }
.addr-method .am-ar { margin-left: auto; color: #bbb; font-weight: 700; font-size: 17px; }
.addr-back { background: none; border: none; color: var(--strong); font-weight: 700; font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 14px; text-decoration: underline; }
.addr-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.addr-cityfld { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1.5px solid var(--hair2); border-radius: 9px; padding: 12px; background: #fff; cursor: pointer; font-size: 15px; color: var(--strong); }
.addr-cityfld .chg { font-size: 12px; font-weight: 700; color: var(--sec); text-decoration: underline; }
.addr-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--strong); font-weight: 600; margin-top: 2px; cursor: pointer; }
.addr-check input { width: 18px; height: 18px; flex: none; }
.addr-note { font-size: 12.5px; color: var(--sec); border: 1px dashed var(--hair2); border-radius: 8px; padding: 10px 12px; margin-top: 14px; line-height: 1.5; }
.cemodal.mode-edit .addr-back { display: none; }
.addr-del-row { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--hair); }
.addr-del-row button { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--strong); border: 1.5px solid var(--hair2); border-radius: 9px; padding: 9px 14px; background: none; cursor: pointer; }

/* profile dialogs (node 7.1) - language picker + delete-confirm checkbox */
.pf-resend { font-weight: 700; color: var(--strong); text-decoration: underline; cursor: pointer; }
.pf-langs { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pf-lang { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--hair2); border-radius: 12px; padding: 14px 16px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--strong); }
.pf-lang input { position: absolute; opacity: 0; pointer-events: none; }
.pf-lang .rc { margin-left: auto; width: 20px; height: 20px; border: 2px solid var(--hair2); border-radius: 50%; flex: none; }
.pf-lang.on { border-color: var(--dark); background: var(--fill); }
.pf-lang.on .rc { border-color: var(--dark); background: var(--dark); box-shadow: inset 0 0 0 3px #fff; }
.pf-delcheck { display: flex; align-items: flex-start; gap: 9px; text-align: left; font-size: 13px; font-weight: 600; color: var(--strong); margin: 0 0 18px; cursor: pointer; }
.pf-delcheck input { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* ============================================================
   CART DRAWER (node 6.0) - «Кошик», a right-side quick view over a dimmed page.
   Line items + qty + remove + ♡ В обране + ONLY the total («Разом»). Discount,
   bonuses and delivery are NOT here - they live at checkout (6.1), see cart.md.

   Moved out of five per-page <style> blocks (2026-07-30): cart.html, cart-empty,
   cart-oos, cart-coach and cart-coach-empty each carried their own copy of the same
   component, so a fix had to be made five times - and a later stylesheet could not
   reach it at all. One component, one place. The coach variant adds the client
   grouping below; it keeps only its own deltas in the page.
   ============================================================ */
/* the prototype rail sits above the modal, so the stand stays usable with a dialog open */
body:has(.cart-drawer) .wf-bar { position: relative; z-index: 80; }
.cart-behind { max-width: 1200px; margin: 0 auto; padding: 24px 16px 60px; }
.cart-behind h2 { font-size: 20px; font-weight: 800; color: var(--strong); margin-bottom: 4px; }
.cart-behind p { font-size: 13.5px; color: var(--sec); }
.cart-behind .ph-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 18px; }
@media (min-width: 620px) { .cart-behind .ph-grid { grid-template-columns: repeat(4,1fr); } }
.cart-behind .ph-card { border: 1px solid var(--hair); border-radius: 12px; height: 150px; background: var(--fill2); }

/* overlay + drawer. --wfbar-h is published by wfBar(): the prototype bar paints above
   the modal (z 80), so a drawer pinned to top:0 had its head clipped by it. */
.cart-ov { position: fixed; inset: var(--wfbar-h, 0px) 0 0 0; background: rgba(0,0,0,.34); z-index: 60; }
.cart-drawer {
  position: fixed; top: var(--wfbar-h, 0px); right: 0; bottom: 0; z-index: 61;
  width: 100%; max-width: 420px; background: #fff; display: flex; flex-direction: column;
  border-left: 1px solid var(--hair); box-shadow: -2px 0 14px rgba(0,0,0,.08);
}
.cd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--hair); }
.cd-head h1 { font-size: 18px; font-weight: 800; color: var(--strong); display: flex; align-items: baseline; gap: 9px; }
.cd-head .cd-cnt { font-size: 12.5px; font-weight: 600; color: var(--light); }
.cd-x { font-size: 20px; color: var(--light); line-height: 1; padding: 4px; }

.cd-body { flex: 1; overflow-y: auto; padding: 6px 18px; }
/* the empty block centres itself in the body - data-driven, no state class to remember */
.cd-body:has(.cd-empty) { display: flex; flex-direction: column; justify-content: center; }

/* line item - `article`, because `.ci` is two letters and the catalogue overlay uses
   the same class for the MARK of its rows (`<span class="ci">`, built in _nav.js).
   Unscoped, this grid put the drawing 9px over the first letter of every label, hung
   a stray 24px dash under each row from the border, and grew the row 62 -> 90. The
   markup already tells them apart: a line item is an article, a mark is a span. */
article.ci { display: grid; grid-template-columns: 74px 1fr; gap: 13px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.ci-ph { width: 74px; aspect-ratio: 10/11; background: var(--fill); border: 1px solid var(--hair); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 10px; }
.ci-mid { min-width: 0; }
.ci-brand { font-size: 11.5px; color: var(--faint); }
.ci-nm { display: block; font-size: 14px; font-weight: 600; color: var(--strong); line-height: 1.3; margin: 2px 0 5px; }
.ci-var { font-size: 12px; color: var(--sec); }
.ci-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; }
.ci-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--hair2); border-radius: 8px; }
.ci-qty button { width: 32px; height: 34px; font-size: 16px; color: var(--strong); }
.ci-qty button[disabled] { color: #ccc; cursor: not-allowed; }
.ci-qty .qn { width: 30px; text-align: center; font-weight: 700; font-size: 13px; }
.ci-price { font-size: 16px; font-weight: 800; color: var(--strong); white-space: nowrap; text-align: right; }
.ci-price .ci-sum { display: block; }
/* The item's OWN discount, carried through from the listing/PDP (owner's call
   2026-07-30): the same product must tell the same price story everywhere, so a line
   that is −15% on the shelf is −15% here too. This is ITEM data - the order-level
   breakdown (loyalty discount, bonuses, delivery) still belongs to checkout, and
   «Разом» below stays a plain sum. */
.ci-price .ci-oldline { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ci-price .ci-oldline:empty { display: none; }
.ci-price .ci-old { font-size: 11.5px; font-weight: 500; color: #aaa; text-decoration: line-through; }
.ci-price .ci-cut { background: var(--dark); color: #fff; font-size: 10px; font-weight: 800; border-radius: 4px; padding: 1px 6px; }
/* the per-unit figure of a multi-qty line. NOT struck through (fixed 2026-07-30):
   everywhere else in this prototype a struck price means «стара ціна», and this one
   is simply 2 100 ₴ ÷ 2 - it was reading as a discount that does not exist. */
.ci-price .ci-per { display: block; font-size: 11.5px; font-weight: 500; color: var(--light); text-align: right; }
.ci-price .ci-per:empty { display: none; }
.ci-links { display: flex; gap: 16px; margin-top: 10px; }
.ci-lnk { font-size: 12px; font-weight: 600; color: var(--sec); display: inline-flex; align-items: center; gap: 5px; }
.ci-lnk:hover { color: var(--strong); text-decoration: underline; }
.ci-lnk.strong { color: var(--strong); font-weight: 700; }

/* OOS line - a fact, not an error: the line dims, states why, and offers the way out */
.ci.oos .ci-ph, .ci.oos .ci-nm, .ci.oos .ci-price { opacity: .5; }
.ci-oostag { display: inline-block; font-size: 11px; font-weight: 800; color: var(--strong); border: 1px solid var(--hair2); border-radius: 100px; padding: 2px 9px; margin-top: 4px; }
.cd-oosnote { border: 1px solid var(--hair2); border-radius: 10px; background: var(--fill2); padding: 12px 13px; font-size: 12.5px; color: var(--ink); margin: 16px 0 2px; line-height: 1.55; }
.cd-oosnote b { color: var(--strong); }

/* footer of the drawer: total + CTAs only */
.cd-foot { border-top: 1px solid var(--hair); padding: 15px 18px 18px; background: #fff; }
.cd-total { display: flex; align-items: baseline; justify-content: space-between; }
.cd-total span { font-size: 14px; font-weight: 700; color: var(--strong); }
.cd-total .sub { font-size: 11.5px; font-weight: 500; color: var(--light); }
.cd-total b { font-size: 24px; font-weight: 800; color: var(--strong); }
.cd-hint { font-size: 12px; color: var(--sec); margin: 5px 0 14px; }
.cd-cta, .cd-cont, .cd-fix { display: block; width: 100%; text-align: center; }
.cd-cont { margin-top: 9px; border-color: var(--hair2); }
/* checkout is blocked while an unavailable line is in the cart - visibly disabled,
   never hidden: a person must see that the step exists and why it is not open */
.cd-blocked { display: block; width: 100%; text-align: center; margin-top: 9px; border: 1.5px solid var(--hair2); border-radius: 8px; padding: 11px 20px; font-size: 13px; font-weight: 700; color: var(--light); background: var(--fill); cursor: not-allowed; }

/* drawer empty state - no dead end: goal selector / catalog */
.cd-empty { text-align: center; padding: 40px 8px; }
.cd-empty .ei { font-size: 34px; }
.cd-empty .et { font-size: 18px; font-weight: 800; color: var(--strong); margin: 14px 0 6px; }
.cd-empty .es { font-size: 13.5px; color: var(--sec); margin-bottom: 22px; }
.cd-empty .btn { display: block; width: 100%; text-align: center; margin-top: 9px; }
.cd-empty .btn.gh { border-color: var(--hair2); }

/* ---- coach variant (6.0 · тренер): the same drawer, grouped by client ---- */
.cd-group { border-bottom: 1px solid var(--hair2); }
.cd-group:last-child { border-bottom: 0; }
.cg-head { position: sticky; top: 0; background: var(--fill2); border: 1px solid var(--hair); border-radius: 8px; padding: 9px 12px; margin: 14px 0 2px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cg-who { min-width: 0; }
.cg-nm { font-size: 14px; font-weight: 800; color: var(--strong); }
.cg-goal { font-size: 11.5px; color: var(--sec); }
.cg-sub { font-size: 13px; font-weight: 800; color: var(--strong); white-space: nowrap; }
.cg-sub small { display: block; font-size: 10.5px; font-weight: 600; color: var(--light); text-align: right; }
.cprice { font-size: 15px; font-weight: 800; color: var(--strong); white-space: nowrap; text-align: right; }
.cprice .old { display: block; font-size: 11.5px; font-weight: 500; color: #aaa; text-decoration: line-through; }
.cprice .wtag { display: inline-block; font-size: 9.5px; font-weight: 800; color: var(--strong); border: 1px solid var(--hair2); border-radius: 4px; padding: 0 4px; margin-left: 5px; vertical-align: middle; }
.cd-note { border: 1px solid var(--hair2); border-radius: 10px; background: var(--fill2); padding: 10px 12px; font-size: 11.5px; color: var(--ink); margin-bottom: 12px; line-height: 1.5; }

/* ============================================================
   CHECKOUT (node 6.1) - «Оформлення», ONE sectioned page, not a wizard.
   Simplified chrome (logo + support only, per cart.md) so the funnel has fewer
   exits. Left column = Контакт → Ваше замовлення → Доставка → Оплата; right column
   = money only, sticky, so «Підтвердити» is always in view. Upsell full width.

   Moved out of five per-page <style> blocks (2026-07-30), the same way the cart
   drawer was: base · loggedin · noaddr · declined · loading each carried a copy of
   the chrome and half the page, so a later stylesheet could not reach any of it.
   The money panel is `.co-money` here - `.co-sum` is taken by the coach order rows.
   Behaviour (qty · remove · radios · bonus toggle · upsell) lives in _nav.js/wfCheckout.
   ============================================================ */
.co-head { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--hair); }
.co-head-in { max-width: 1200px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.co-logo { font-size: 20px; font-weight: 800; color: var(--strong); letter-spacing: -.02em; }
.co-support { text-align: right; font-size: 11.5px; color: var(--sec); line-height: 1.35; }
.co-support .sh { color: var(--light); }
.co-support b { color: var(--strong); font-size: 14px; font-weight: 800; }

.co-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px 40px; }
.co-h1 { font-size: 22px; font-weight: 800; color: var(--strong); margin: 20px 0 16px; letter-spacing: -.01em; }
.co-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 900px) { .co-grid { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }

.co-sec { border: 1px solid var(--hair); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.co-sec-h { font-size: 16px; font-weight: 800; color: var(--strong); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.co-sec-h .num { width: 24px; height: 24px; border-radius: 50%; background: var(--dark); color: #fff; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.co-sec-h .cnt { font-weight: 600; color: var(--light); font-size: 13px; }

/* 1 - Контакт: guest = passwordless sign-in prompt; logged-in = collapsed & prefilled */
.co-signin-note { font-size: 13px; color: var(--sec); margin-bottom: 12px; }
.co-field { display: flex; gap: 8px; }
.co-input { border: 1.5px solid var(--hair2); border-radius: 8px; padding: 12px 13px; font-size: 14px; font-family: inherit; width: 100%; }
.co-field .co-input { flex: 1; }
.co-input.req { border-color: var(--dark); }
.co-getcode { background: var(--dark); color: #fff; border-radius: 8px; padding: 0 18px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.co-or { display: flex; align-items: center; gap: 12px; color: var(--light); font-size: 12px; margin: 14px 0; }
.co-or::before, .co-or::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.co-social { display: flex; gap: 10px; }
.co-soc { flex: 1; border: 1.5px solid var(--hair2); border-radius: 8px; padding: 11px; font-size: 13px; font-weight: 700; color: var(--strong); text-align: center; background: #fff; }
.co-consent { font-size: 11px; color: var(--light); margin-top: 10px; line-height: 1.5; }
.co-me { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.co-me .mn { font-size: 14px; font-weight: 700; color: var(--strong); }
.co-me .md { font-size: 13px; color: var(--sec); margin-top: 2px; }
.co-edit { flex: none; border: 1.5px solid var(--hair2); border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 700; color: var(--strong); background: #fff; }

/* order line items - same price story as the cart line (see §CART DRAWER) */
.co-line { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); }
.co-line:first-of-type { border-top: none; padding-top: 2px; }
.co-line .li-img { width: 60px; height: 60px; border-radius: 8px; background: var(--fill); flex: none; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 9px; }
.co-line .li-bd { flex: 1; min-width: 0; }
.co-line .li-nm { font-size: 14px; font-weight: 600; color: var(--strong); line-height: 1.3; }
.co-line .li-meta { font-size: 12px; color: var(--sec); margin-top: 3px; }
.co-line .li-acts { display: flex; gap: 14px; margin-top: 9px; }
.co-line .li-acts button { font-size: 12px; color: var(--sec); font-weight: 600; display: inline-flex; gap: 5px; align-items: center; }
.co-line .li-right { text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.co-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--hair2); border-radius: 8px; }
.co-qty button { width: 30px; height: 32px; font-size: 16px; color: var(--strong); }
.co-qty button[disabled] { color: #ccc; cursor: not-allowed; }
.co-qty .qn { width: 28px; text-align: center; font-weight: 700; font-size: 13px; }
/* The quantity is an <input> since 2026-08-07 - see «кількість вводиться» in
   ia/docs/pages/cart.md. This is not a style choice, it is the reset that keeps
   a field from drawing a second border inside the control's own one. Size and
   weight above are untouched: the grey layer's two editions stay as they are,
   the merge to one size is the design system's decision and lives there. */
.ci-qty .qn, .co-qty .qn { appearance: none; -webkit-appearance: none;
  border: 0; background: none; padding: 0; margin: 0; min-width: 0;
  font-family: inherit; color: inherit; }
.ci-qty .qn:focus, .co-qty .qn:focus { outline: none; }
/* focus shows on the frame: the field has no border and the box clips */
.ci-qty:focus-within, .co-qty:focus-within { border-color: var(--strong); }
.ci-qty .qn[disabled], .co-qty .qn[disabled] { color: #ccc; }
.co-line .li-price { font-size: 16px; font-weight: 800; color: var(--strong); }
.co-line .li-oldline { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.co-line .li-oldline:empty { display: none; }
.co-line .li-old { font-size: 11.5px; font-weight: 500; color: #aaa; text-decoration: line-through; }
.co-line .li-cut { background: var(--dark); color: #fff; font-size: 10px; font-weight: 800; border-radius: 4px; padding: 1px 6px; }
.co-line .li-per { display: block; font-size: 11.5px; font-weight: 500; color: var(--light); }
.co-line .li-per:empty { display: none; }
/* narrow: the name column and the money column cannot share one row - the actions
   («В обране») wrapped mid-word. Money moves to its own full-width row under the item. */
@media (max-width: 560px) {
  .co-line { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; }
  .co-line .li-right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .co-line .li-acts button { white-space: nowrap; }
}

/* radio options (delivery / payment) */
.co-opt { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--hair2); border-radius: 10px; padding: 13px 14px; margin-bottom: 10px; cursor: pointer; }
.co-opt:last-child { margin-bottom: 0; }
.co-opt.on { border-color: var(--dark); }
.co-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--hair2); flex: none; margin-top: 1px; position: relative; }
.co-opt.on .co-radio { border-color: var(--dark); }
.co-opt.on .co-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--dark); }
.co-opt .ot { flex: 1; }
/* .otn/.otd are spans inside a span - without this the method name and its
   description run together on one line (fixed 2026-07-30) */
.co-opt .otn { display: block; font-size: 14px; font-weight: 700; color: var(--strong); }
.co-opt .otd { display: block; font-size: 12px; color: var(--sec); margin-top: 2px; }
.co-opt .op { font-size: 13px; font-weight: 800; color: var(--strong); white-space: nowrap; }

/* delivery sub-fields - shown under the ACTIVE method only */
.co-sub { margin: 0 0 12px 30px; display: flex; flex-direction: column; gap: 8px; }
.co-opt:not(.on) + .co-sub { display: none; }
.co-city { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--hair2); border-radius: 8px; padding: 10px 13px; font-size: 13px; font-weight: 700; color: var(--strong); align-self: flex-start; }
.co-saved { border: 1.5px solid var(--dark); border-radius: 8px; padding: 10px 13px; font-size: 13px; color: var(--strong); background: var(--fill2); }
.co-saved b { font-weight: 700; }
.co-saved .ch { font-size: 12px; color: var(--sec); font-weight: 600; margin-left: 6px; }
.co-noaddr { border: 1.5px dashed var(--hair2); border-radius: 10px; background: var(--fill2); padding: 12px 14px; font-size: 13px; color: var(--ink); margin-bottom: 12px; line-height: 1.5; }
.co-noaddr b { color: var(--strong); }
.co-cmt { width: 100%; border: 1.5px solid var(--hair2); border-radius: 8px; padding: 11px 13px; font-size: 13px; font-family: inherit; margin-top: 6px; min-height: 60px; resize: vertical; }
.co-cmt-lbl { font-size: 12px; font-weight: 700; color: var(--sec); margin-top: 12px; }

/* upsell (full width, under both columns) - a SHELF, not a box: heading + the
   canonical product grid (.prow > .pcard), no panel of its own (owner's call
   2026-07-30). Add-ons are products, so they use the product card and nothing else. */
.co-upsell { margin-top: 8px; }
.co-upsell-h { font-size: 16px; font-weight: 800; color: var(--strong); margin-bottom: 4px; }
.co-upsell-s { font-size: 12.5px; color: var(--sec); margin-bottom: 14px; }
/* added to the order: the buy button becomes a confirmed mark, the card stays put */
.co-upsell .pcard.added .cartbtn { background: #fff; color: var(--strong); border: 1.5px solid var(--dark); }

/* right column - money only, sticky, so «Підтвердити» stays in view */
.co-money { border: 1px solid var(--hair); border-radius: 12px; padding: 16px; }
@media (min-width: 900px) { .co-money { position: sticky; top: 78px; } }
.co-money-h { font-size: 15px; font-weight: 800; color: var(--strong); margin-bottom: 12px; }
.co-bonus { border: 1px solid var(--hair); border-radius: 10px; padding: 12px; background: var(--fill2); margin-bottom: 14px; }
.co-bonus-top { display: flex; justify-content: space-between; align-items: baseline; }
.co-bonus .bl { font-size: 13px; font-weight: 700; color: var(--strong); }
.co-bonus .bv { font-size: 14px; font-weight: 800; color: var(--strong); }
.co-bonus .bnote { font-size: 11.5px; color: var(--light); margin-top: 3px; }
.co-toggle { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--strong); font-weight: 700; margin-top: 11px; cursor: pointer; }
.co-sw { width: 38px; height: 22px; border-radius: 100px; background: var(--hair2); position: relative; flex: none; }
.co-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.co-sw.on { background: var(--dark); } .co-sw.on::after { left: 18px; }
.co-brow { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink); padding: 6px 0; }
.co-brow b { color: var(--strong); }
.co-brow .disc { color: var(--sec); }
.co-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 2px; border-top: 1px solid var(--hair); margin-top: 6px; }
.co-total .tl { font-size: 14px; font-weight: 800; color: var(--strong); }
.co-total .tv { font-size: 24px; font-weight: 800; color: var(--strong); }
.co-accrual { font-size: 12.5px; color: var(--sec); margin: 12px 0; display: flex; gap: 7px; align-items: center; background: var(--fill2); border: 1px solid var(--hair); border-radius: 8px; padding: 9px 11px; }
.co-accrual .star { color: var(--strong); font-weight: 800; }
.co-confirm { display: block; text-align: center; background: var(--dark); color: #fff; border-radius: 10px; padding: 15px; font-size: 15px; font-weight: 800; }
.co-confirm-note { font-size: 11.5px; color: var(--light); text-align: center; margin-top: 8px; }
.co-trust { font-size: 11.5px; color: var(--light); text-align: center; margin-top: 12px; line-height: 1.7; }

/* simplified footer */
.co-foot { border-top: 1px solid var(--hair); background: var(--fill2); margin-top: 30px; }
.co-foot-in { max-width: 1200px; margin: 0 auto; padding: 18px 16px; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; font-size: 12px; color: var(--light); }
.co-foot-links { display: flex; gap: 14px; flex-wrap: wrap; }
.co-foot-links a { color: var(--sec); }

/* payment declined - the order is PRESERVED, never lost; two ways forward */
.co-err { max-width: 560px; margin: 48px auto; padding: 0 16px; }
.co-err-box { border: 1px solid var(--hair2); border-radius: 14px; padding: 34px 26px; text-align: center; }
.co-err-mark { width: 54px; height: 54px; border: 2px solid var(--strong); border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: var(--strong); }
.co-err-h { font-size: 21px; font-weight: 800; color: var(--strong); margin-bottom: 8px; }
.co-err-s { font-size: 13.5px; color: var(--sec); line-height: 1.6; }
.co-keep { border: 1px solid var(--hair); border-radius: 12px; background: var(--fill2); padding: 14px 16px; margin: 22px 0; text-align: left; }
.co-keep-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--sec); margin-bottom: 10px; }
.co-keep .kr { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink); padding: 4px 0; }
.co-keep .kr b { color: var(--strong); }
.co-keep .kr.tot { border-top: 1px solid var(--hair); margin-top: 6px; padding-top: 10px; }
.co-keep .kr.tot .kv { font-size: 17px; font-weight: 800; color: var(--strong); }
.co-keep .knote { font-size: 12px; color: var(--light); margin-top: 8px; }
.co-err-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
@media (min-width: 480px) { .co-err-acts { flex-direction: row; } }
.co-err-acts .btn { flex: 1; text-align: center; }
.co-help { font-size: 12px; color: var(--light); margin-top: 16px; line-height: 1.6; }
.co-help a { color: var(--sec); text-decoration: underline; }

/* processing payment - honest wait, the card is entered on the bank's page */
.co-proc { max-width: 520px; margin: 56px auto; padding: 0 16px; text-align: center; }
.co-proc-box { border: 1px solid var(--hair); border-radius: 14px; padding: 40px 26px; }
.co-spin { width: 46px; height: 46px; border: 4px solid var(--hair); border-top-color: var(--dark); border-radius: 50%; margin: 0 auto 22px; }
.co-proc-h { font-size: 20px; font-weight: 800; color: var(--strong); margin-bottom: 8px; }
.co-proc-s { font-size: 13.5px; color: var(--sec); line-height: 1.6; }
.co-skel { margin: 26px auto 6px; max-width: 320px; }
.co-skel .sl { height: 11px; border-radius: 6px; background: #ececec; margin: 9px 0; }
.co-skel .sl.m { width: 72%; margin-left: auto; margin-right: auto; }
.co-skel .sl.s { width: 46%; margin-left: auto; margin-right: auto; }
.co-proc-note { font-size: 12px; color: var(--light); margin-top: 22px; line-height: 1.6; }
.co-proc-go { display: block; text-align: center; background: var(--dark); color: #fff; border-radius: 10px; padding: 14px; font-size: 14px; font-weight: 800; margin-top: 24px; }
.co-proc-cancel { display: inline-block; margin-top: 14px; font-size: 12.5px; color: var(--sec); text-decoration: underline; }