/* Extracted verbatim from designs/flagship-v2/index.html, the approved base.
   Do not edit here: edit flagship-v2 and re-run build.py. */

/* ==========================================================================
   РЕПАРИН-ХЕЛПЕР® · flagship v2
   Base aesthetic: designs/merge-clean-kinetic (standardised by the user)
   Restructured against competitor-research/index.html (16 US vet-DTC sites)

   COLOUR LAW (research RX-01, the Dutch discipline):
     magenta #E3007B  ->  buy actions, the one hero number, prices, active
                          filter state, cart badge.  NOTHING ELSE.
     blue    #436EB3  ->  all structure: rules, icons, kickers, links,
                          the mechanism diagram, informational badges.
     paper   #FCF5F0  ->  warm off-white, sampled from the hero photograph
                          so the image dissolves into the page.
   ========================================================================== */
:root{
  --paper:#FCF5F0; --paper-2:#F6EDE5; --paper-3:#F0E5DB;
  --card:#FFFFFF;
  --ink:#17171C; --ink-2:#55535C; --ink-3:#8C8992;
  --line:#EBE1D8; --line-2:#DCCFC2;
  --magenta:#E3007B; --magenta-press:#BE0068; --magenta-soft:#FDEBF4;
  --blue:#436EB3; --blue-ink:#33578F; --blue-soft:#EDF1F8; --blue-line:#D6E0EF;
  --amber:#C98A1E;
  --ok:#2C7A57;
  --sans:'Onest',system-ui,-apple-system,Segoe UI,sans-serif;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --wrap:1240px;
  --pad:clamp(20px,5vw,64px);
  --r:10px; --r-sm:6px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sh-1:0 1px 2px rgba(23,23,28,.05);
  --sh-2:0 14px 40px -20px rgba(23,23,28,.24);
  --sh-3:0 30px 70px -30px rgba(23,23,28,.36);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans); background:var(--paper); color:var(--ink);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden}
h1,h2,h3,h4{line-height:1.04; letter-spacing:-.025em; font-weight:800; text-wrap:balance}
p{text-wrap:pretty}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:none}
sup{font-size:.6em; font-weight:700; vertical-align:super; line-height:0}
/* The rule above was written for FOOTNOTE DIGITS, which want to be small and
   bold. ® is not a footnote: at .6em it lands on 11.2px inside 18.7px body copy
   and the bold makes it a blob rather than a mark. Tony, 2026-08-07: «the
   superscript also made the size of the ® symbol too small ... font-size is
   "smaller" - check this». The browser default IS `smaller` (~.83em); .72em with
   the surrounding weight sits between the two and stays a mark, not a glyph. */
sup.reg{font-size:.72em; font-weight:inherit}
::selection{background:var(--magenta); color:#fff}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:3px}

.wrap{max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.section{padding:clamp(56px,7.5vw,100px) 0; border-top:1px solid var(--line)}
.section--flush{border-top:none}
[id]{scroll-margin-top:92px}
.tnum{font-variant-numeric:tabular-nums}

/* ---- editorial section header ---- */
.kicker{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--blue-ink); display:inline-flex; align-items:center; gap:10px}
.kicker .idx{color:var(--ink-3)}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(20px,4vw,64px);
  align-items:end; margin-bottom:clamp(30px,4.5vw,54px)}
.sec-head .lead{font-family:var(--serif); font-size:clamp(1.02rem,1.6vw,1.24rem); line-height:1.5;
  color:var(--ink-2); padding-bottom:.35em}
.sec-title{font-size:clamp(1.85rem,3.9vw,2.95rem); margin:.42em 0 0; max-width:17ch}
.sec-title.wide{max-width:23ch}

/* ---- buttons ---- */
.btn{font-family:var(--sans); font-weight:700; font-size:16px; letter-spacing:-.01em;
  border:1px solid transparent; border-radius:var(--r-sm); cursor:pointer;
  padding:14px 22px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease),
             transform .12s var(--ease), box-shadow .18s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-buy{background:var(--magenta); color:#fff; box-shadow:0 10px 26px -14px rgba(227,0,123,.7)}
@media(hover:hover){.btn-buy:hover{background:var(--magenta-press); box-shadow:0 16px 34px -14px rgba(227,0,123,.75)}}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
@media(hover:hover){.btn-ghost:hover{border-color:var(--ink); background:#fff}}
.btn-ink{background:var(--ink); color:#fff}
@media(hover:hover){.btn-ink:hover{background:#000}}
.btn-block{width:100%}
.btn.is-added{background:var(--ok)}
.btn-lg{padding:17px 30px; font-size:17px}
.btn svg{flex:none}
.link-go{color:var(--blue-ink); font-weight:700; display:inline-flex; align-items:center; gap:7px;
  border-bottom:1.5px solid transparent; transition:border-color .15s var(--ease)}
.link-go svg{transition:transform .15s var(--ease)}
@media(hover:hover){.link-go:hover{border-color:var(--blue)} .link-go:hover svg{transform:translateX(3px)}}

.chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:5px 11px; border-radius:999px; line-height:1; white-space:nowrap}
.chip-info{background:var(--blue-soft); color:var(--blue-ink)}
.chip-vol{background:var(--paper-2); color:var(--ink-2); font-family:var(--mono); font-weight:500; font-size:12px}
.chip-pick{background:var(--magenta); color:#fff}

/* ==========================================================================
   S1 · UTILITY BAR + HEADER   (research RX-10: the clinic channel is a door)
   ========================================================================== */

.hdr{position:sticky; top:0; z-index:60; background:rgba(252,245,240,.84);
  backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease)}
.hdr.scrolled{border-color:var(--line)}
.hdr-in{display:flex; align-items:center; gap:18px; height:72px}
.brand img{height:31px; width:auto}
.hdr-nav{margin-left:34px; display:flex; align-items:center; gap:26px}
.hdr-nav a{font-size:15.5px; font-weight:600; color:var(--ink-2); transition:color .14s var(--ease); white-space:nowrap}
@media(hover:hover){.hdr-nav a:hover{color:var(--ink)}}
.hdr-right{margin-left:auto; display:flex; align-items:center; gap:10px}
/* Account and Корзина are the only two things in the header's right rail. The
   phone was removed on purpose: calling is not the contact route we want, and
   the pink «Каталог» button duplicated the nav item next to it.

   Scoped to .hdr, never a bare `.cart`: WooCommerce puts class="cart" on the
   add-to-cart FORM of every product page and on the cart table itself, so the
   unscoped rule turned both into a 46x46 flex box with a border. That is what
   split the cart table's head and body into two columns, and what drew a stray
   bordered box around the volume selector on every PDP. */
.hdr .cart,.hdr-ico{position:relative; display:flex; align-items:center; justify-content:center; width:46px; height:46px;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff; color:var(--ink-2);
  transition:border-color .15s var(--ease), color .15s var(--ease)}
@media(hover:hover){.hdr .cart:hover,.hdr-ico:hover{border-color:var(--ink); color:var(--ink)}}
.cart-count{position:absolute; top:-8px; right:-8px; min-width:21px; height:21px; padding:0 5px;
  background:var(--magenta); color:#fff; border-radius:999px; font-size:11.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--paper);
  transform:scale(.6); opacity:0; transition:transform .3s var(--ease), opacity .18s ease}
.cart-count.on{transform:scale(1); opacity:1}
.cart-count.bump{animation:bump .32s var(--ease)}
@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.4)}100%{transform:scale(1)}}

/* ==========================================================================
   S2 · HERO   (research RX-04 one number does the heavy lifting,
                RX-12 the "I don't know" second CTA, pattern 10 colour)
   ========================================================================== */
.hero{position:relative; overflow:hidden; isolation:isolate; background:var(--paper)}
.hero-photo{position:absolute; inset:0; z-index:0}
/* Pinned to the RIGHT on purpose. cover crops horizontally, and at 72% every
   viewport under ~2000px sliced the bottle in half; the frame carries a wide
   blank left edge precisely so the crop can all come off that side. */
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:100% 42%}
/* dissolve the photograph's cream into the page on the left and the foot */
.hero-photo::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(96deg, var(--paper) 0%, var(--paper) 26%, rgba(252,245,240,.72) 44%, rgba(252,245,240,0) 62%),
             linear-gradient(0deg, var(--paper) 0%, rgba(252,245,240,0) 22%)}
.hero-in{position:relative; z-index:2; min-height:min(86vh,760px); display:flex; align-items:center}
.hero-copy{padding:clamp(56px,8vh,96px) 0 clamp(40px,6vh,72px); max-width:640px}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--blue-ink); font-weight:500; margin-bottom:clamp(18px,2.6vh,30px);
  display:inline-flex; gap:11px; align-items:center}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--blue)}

.hero h1{display:block; margin:0}
.h1-num{display:block; font-size:clamp(3.8rem,10vw,8.6rem); line-height:.86; letter-spacing:-.05em;
  color:var(--magenta); font-variant-numeric:tabular-nums; font-weight:800}
.h1-say .fn{font-size:.44em; font-weight:700; vertical-align:super; line-height:0; margin-left:.15em;
  color:var(--blue-ink); border-bottom:1px solid var(--blue-line)}
.h1-say{display:block; font-size:clamp(1.42rem,2.7vw,2.25rem); line-height:1.12; letter-spacing:-.025em;
  margin-top:clamp(12px,1.8vh,20px); max-width:19ch}
.hero-sub{font-size:clamp(1.04rem,1.45vw,1.19rem); color:var(--ink-2); margin-top:20px;
  max-width:46ch; line-height:1.55}
.hero-sub b{color:var(--ink); font-weight:600}
.hero-cta{display:flex; gap:13px; margin-top:clamp(24px,3.4vh,34px); flex-wrap:wrap}
.hero-proof{display:flex; flex-wrap:wrap; align-items:center; gap:0;
  margin-top:clamp(26px,3.6vh,38px); border-top:1px solid var(--line-2); padding-top:20px}
.hero-proof .hp{padding:0 20px; display:flex; flex-direction:column; gap:2px}
.hero-proof .hp:first-child{padding-left:0}
.hero-proof .hp+.hp{border-left:1px solid var(--line-2)}
.hero-proof .hp b{font-size:1.06rem; font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; gap:5px}
.hero-proof .hp b .st{color:var(--amber)}
.hero-proof .hp span{font-size:12.5px; color:var(--ink-3); font-weight:500}
.hero-proof .hp .mono{font-family:var(--mono); font-size:.93rem; font-weight:500; letter-spacing:-.01em}

/* four-verb band (research RX-06, the Adequan device) */
.verbs{position:relative; z-index:2; background:var(--ink); color:#fff}
.verb-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.14)}
.verb{background:var(--ink); padding:24px clamp(16px,2vw,26px)}
.verb b{display:block; font-family:var(--sans); font-size:clamp(.98rem,1.5vw,1.18rem); font-weight:800;
  letter-spacing:.02em; text-transform:uppercase; color:#fff}
.verb span{display:block; font-size:13.5px; color:rgba(255,255,255,.62); margin-top:7px; line-height:1.4}

/* ==========================================================================
   S3 · STORE   (research RX-02 two filter layers over the rail,
                 RX-03 photographic problem doors, RX-09 card anatomy)
   ========================================================================== */
/* the doors ARE the condition filter, not decoration */
.doors{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,20px);
  margin-bottom:clamp(26px,3.4vw,40px)}
.door{position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--card); text-align:left; display:block; cursor:pointer;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease)}
@media(hover:hover){.door:hover{border-color:var(--line-2); box-shadow:var(--sh-2); transform:translateY(-3px)}}
.door figure{aspect-ratio:16/10; overflow:hidden; background:var(--paper-2)}
.door figure img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
@media(hover:hover){.door:hover figure img{transform:scale(1.045)}}
.door-body{padding:16px 18px 18px}
.door-body h3{font-size:1.16rem; display:flex; align-items:center; gap:9px}
.door-body h3 svg{color:var(--blue); flex:none}
.door-body p{font-size:13.5px; color:var(--ink-2); margin-top:7px; line-height:1.45}
.door-body .go{font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--blue-ink); margin-top:12px; display:flex; align-items:center; gap:7px}

/* second filter layer: species */
.filters{display:flex; align-items:center; gap:16px 22px; flex-wrap:wrap; margin-bottom:clamp(22px,2.6vw,30px)}
.filter-lbl{font-family:var(--mono); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
/* Segmented control: the inner buttons take the button radius, the track takes
   the container radius, so track = button + its own 4px padding. */
.pills{display:inline-flex; padding:4px; background:var(--paper-2); border-radius:var(--r); gap:2px}
.pills button{font-size:14px; font-weight:600; color:var(--ink-2); padding:9px 19px; border-radius:var(--r-sm);
  border:0; background:transparent; transition:color .15s var(--ease), background .15s var(--ease)}
.pills button.active{background:#fff; color:var(--ink); box-shadow:var(--sh-1)}
.pills.pills-cond button.active{background:var(--magenta); color:#fff; box-shadow:none}
.filter-reset{font-size:13.5px; color:var(--ink-3); border-bottom:1px solid var(--line-2)}
@media(hover:hover){.filter-reset:hover{color:var(--ink)}}
.store-count{font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.02em}

.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.pcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), opacity .2s ease}
@media(hover:hover){.pcard:hover{border-color:var(--line-2); box-shadow:var(--sh-2); transform:translateY(-3px)}}
.pcard.is-out{display:none}
.pcard-media{position:relative; aspect-ratio:4/3; padding:18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 6%, #fff 0%, #FEFBF8 58%, #F7F0E8 100%)}
.pcard-media img{max-height:100%; width:auto; object-fit:contain; filter:drop-shadow(0 10px 16px rgba(23,23,28,.11))}
.pcard-media .tag-tl{position:absolute; top:12px; left:12px}
.pcard-media .tag-tr{position:absolute; top:12px; right:12px}
.pcard-body{padding:18px 18px 20px; display:flex; flex-direction:column; flex:1}
.pcard-brand{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:6px}
.pcard-name{font-size:1.15rem; font-weight:700; letter-spacing:-.02em}
.pcard-note{font-family:var(--serif); font-style:italic; font-size:14px; color:var(--ink-2);
  margin-top:7px; line-height:1.4}
.pcard-rating{display:flex; align-items:center; gap:7px; margin-top:13px; font-size:13.5px;
  color:var(--ink-2); font-weight:600}
.pcard-rating .stars{display:inline-flex; gap:1px; color:var(--amber)}
.pcard-rating .cnt{color:var(--ink-3); font-weight:500}
.pcard-rating .no-rate{color:var(--ink-3); font-weight:500; font-family:var(--mono); font-size:11.5px}
.pcard-foot{margin-top:auto; padding-top:16px}
.price-row{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.price-new{font-size:1.55rem; font-weight:800; letter-spacing:-.025em; font-variant-numeric:tabular-nums; color:var(--magenta)}
.price-old{font-size:1rem; color:var(--ink-3); text-decoration:line-through; font-variant-numeric:tabular-nums}
.price-unit{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-top:5px; letter-spacing:.02em}
.price-set{font-family:var(--mono); font-size:11.5px; color:var(--blue-ink); margin-top:4px; letter-spacing:.02em}
.pcard .btn{margin-top:15px}
.pcard-pick{display:none; align-items:center; gap:7px; margin-top:11px; font-size:12.5px;
  font-weight:600; color:var(--magenta)}
.pcard.is-pick .pcard-pick{display:flex}

.store-empty{display:none; padding:40px 0; text-align:center; color:var(--ink-2)}
.store-empty.on{display:block}

/* bundle */
.bundle{grid-column:1/-1; background:var(--ink); color:#fff; border-radius:var(--r);
  display:grid; grid-template-columns:1.3fr 1fr; gap:28px; overflow:hidden; align-items:center; position:relative}
.bundle::before{content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background:radial-gradient(90% 120% at 88% 20%, rgba(227,0,123,.3), rgba(227,0,123,0) 60%)}
.bundle-txt{padding:clamp(26px,4vw,42px); position:relative}
.bundle .bl{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.66); display:inline-flex; gap:9px; align-items:center; margin-bottom:16px}
.bundle h3{font-size:clamp(1.45rem,2.5vw,2rem); color:#fff}
.bundle p{color:rgba(255,255,255,.74); margin-top:14px; font-size:15.5px; max-width:44ch}
.bundle .save{display:inline-flex; align-items:baseline; gap:10px; margin-top:22px}
.bundle .save b{font-size:2.1rem; font-weight:800; color:var(--magenta); letter-spacing:-.03em}
.bundle .save span{font-size:13px; color:rgba(255,255,255,.6)}
.bundle-cta{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap}
.bundle-cta .btn-ghost{border-color:rgba(255,255,255,.3); color:#fff}
@media(hover:hover){.bundle-cta .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.09)}}
/* One landscape group shot, not two bottles rotated over each other. The pair
   was capped at 236px tall inside a 230px box and read as two thumbnails; Tony,
   2026-08-07: «the image on it is very bad - its too small - it looks bad on
   mobile». bottles-website.png is the transparent range shot, so it can fill
   the panel's width instead of being sized off its height. */
.bundle-media{align-self:stretch; position:relative; min-height:250px; padding:20px;
  background:radial-gradient(120% 100% at 70% 40%, #32323C 0%, #17171C 70%);
  display:flex; align-items:center; justify-content:center}
.bundle-media img{width:100%; max-width:420px; height:auto; object-fit:contain;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.5))}

/* buy-direct trust row + the registration seal (research RX-11) */
.wedge-band{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,2.4vw,28px);
  align-items:stretch; margin-top:clamp(28px,3.6vw,44px)}
/* White card, black text, no circular badge: the seal reads as a fact, not as a
   decorated award medallion. */
.seal{border:1px solid var(--line); background:var(--card); border-radius:var(--r);
  padding:22px 24px; display:flex; flex-direction:column; justify-content:center; gap:10px; max-width:310px}
.seal-mark{display:grid; place-items:center; width:26px; height:26px; color:var(--blue)}
.seal b{font-size:14.5px; line-height:1.35; color:var(--ink)}
.seal .num{font-family:var(--mono); font-size:13.5px; font-weight:500; color:var(--ink); letter-spacing:.01em}
.seal span{font-size:12.5px; color:var(--ink-2); line-height:1.45}
/* Four wedges, four columns. It was repeat(5,1fr) with only four children, so
   the row always ended in an empty cell. */
.store-wedge{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.wedge{background:var(--card); padding:18px 20px; display:flex; flex-direction:column; gap:7px}
.wedge svg{color:var(--blue); width:22px; height:22px}
.wedge b{font-size:14.5px; font-weight:700}
.wedge span{font-size:12.5px; color:var(--ink-2); line-height:1.4}

/* ==========================================================================
   S4 · THE 48-HOUR CLAIM BAR  (research RX-04: a claim you can buy from,
        not a story section)
   ========================================================================== */
.claim{background:var(--paper-2)}
.claim-top{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(20px,3.4vw,48px);
  align-items:center; padding-bottom:clamp(30px,4vw,44px); border-bottom:1px solid var(--line-2)}
.claim-48{font-size:clamp(4.2rem,11vw,8.4rem); line-height:.78; letter-spacing:-.055em; color:var(--magenta)}
.claim-say .k{font-family:var(--mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--blue-ink)}
.claim-say h2{font-size:clamp(1.4rem,2.5vw,2.05rem); max-width:22ch; margin-top:9px}
.claim-say p{font-size:15px; color:var(--ink-2); margin-top:11px; max-width:48ch; line-height:1.5}
.claim-buy{display:flex; flex-direction:column; gap:9px; align-items:flex-start}
.claim-buy .from{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.arc{margin-top:clamp(32px,4vw,48px)}
.arc-track{position:relative}
.arc-fill{position:absolute; left:0; right:0; top:19px; height:2px; background:var(--line-2);
  overflow:hidden; border-radius:2px}
.arc-fill i{position:absolute; inset:0; transform:scaleX(0); transform-origin:left;
  background:var(--blue); transition:transform 1.5s var(--ease) .15s}
.arc.in .arc-fill i{transform:scaleX(1)}
.arc-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,34px); position:relative}
.astep .node{width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; margin-bottom:20px;
  background:var(--paper-2); border:2px solid var(--line-2); color:var(--ink-3);
  font-family:var(--mono); font-size:13px; font-weight:500;
  transition:border-color .4s var(--ease), color .4s var(--ease)}
.arc.in .astep:nth-child(1) .node{border-color:var(--blue); color:var(--blue-ink); transition-delay:.25s}
.arc.in .astep:nth-child(2) .node{border-color:var(--blue); color:var(--blue-ink); transition-delay:.7s}
.arc.in .astep:nth-child(3) .node{border-color:var(--blue); color:var(--blue-ink); transition-delay:1.15s}
.astep .day{font-size:1.32rem; font-weight:800; letter-spacing:-.02em; margin-bottom:.3em}
.astep .day em{font-style:normal; color:var(--blue-ink)}
.astep p{color:var(--ink-2); font-size:14.5px; line-height:1.5; max-width:36ch}
.astep p em{font-style:italic; font-family:var(--serif); color:var(--ink)}

/* ==========================================================================
   S5 · MECHANISM  (research RX-05: one graphic, never a chapter)
   ========================================================================== */
.mech-wrap{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4.5vw,64px); align-items:start}
.mech-body{font-size:clamp(1.02rem,1.5vw,1.17rem); color:var(--ink-2); line-height:1.6}
.mech-body b{color:var(--ink); font-weight:600}
.mech-body+.mech-body{margin-top:16px}
.no-contains{margin-top:28px; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 24px; display:flex; align-items:center; gap:14px 26px; flex-wrap:wrap}
.no-contains .nc-lbl{font-family:var(--mono); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500}
.no-contains .nc-items{display:flex; gap:9px 20px; flex-wrap:wrap}
.no-contains .nc-items span{font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:8px}
.no-contains .nc-items span::before{content:""; width:13px; height:1.5px; background:var(--blue); transform:rotate(-12deg)}

/* the bubble diagram */
.diagram{position:relative; aspect-ratio:1/.98; max-width:560px; margin:0 auto; width:100%}
/* The core carries the art again, and this time the art was composed for it: a
   WREATH of protein folds around a deliberately empty middle third, so the label
   sits in real white space. The 2026-07 attempt failed for a structural reason,
   not a taste one — brand blue over near-black read as murky and the radial scrim
   that kept the label legible was fighting the art it covered. Both problems are
   the same problem: a full-bleed image behind text. Solved by composition (an
   open centre) plus a light disc, so there is no scrim anywhere. The disc grew
   38% -> 46% to give the eight molecules room; at 46% it still clears the n2/n6
   node cards, which start at 72.5%. */
.dg-core{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:46%; aspect-ratio:1/1; border-radius:50%; background:#fff; color:var(--ink);
  border:1px solid var(--blue-line);
  display:grid; place-items:center; text-align:center; padding:12px; box-shadow:var(--sh-2);
  overflow:hidden; isolation:isolate}
/* Exactly 100%: the source is a square wreath inscribed well inside its own
   frame, so at full width every molecule clears the circular mask with a little
   white to spare. Scaling it up crops the folds at 12 and 6 o'clock, which reads
   as a mistake rather than as a crop. max-width:none because the sheet's global
   `img{max-width:100%}` otherwise resolves against the padding box and quietly
   letterboxes the art a few pixels smaller than the rule asks for. */
.dg-core img{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:100%; height:100%; max-width:none; object-fit:contain; z-index:1}
.dg-core>div{position:relative; z-index:3}
.dg-core b{font-size:clamp(.86rem,1.4vw,1.02rem); line-height:1.2; letter-spacing:-.02em}
/* max-width:9ch breaks the mono line in two so it clears the molecules at 9 and
   3 o'clock instead of running under them. */
.dg-core span{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); margin-top:6px;
  max-width:9ch; margin-left:auto; margin-right:auto}
.dg-ring{position:absolute; inset:11% 6%; border:1px dashed var(--blue-line); border-radius:50%; z-index:1}
.dg-node{position:absolute; z-index:2; width:31%; transform:translate(-50%,-50%);
  background:var(--card); border:1px solid var(--blue-line); border-radius:var(--r-sm);
  padding:11px 12px; box-shadow:var(--sh-1)}
.dg-node b{display:block; font-size:13px; letter-spacing:-.01em; color:var(--ink)}
.dg-node span{display:block; font-size:11.5px; color:var(--ink-2); line-height:1.35; margin-top:3px}
.dg-node i{position:absolute; width:9px; height:9px; border-radius:50%; background:var(--blue);
  border:2px solid var(--paper); top:-5px; left:14px}
.dg-node.n1{left:50%; top:5%}
.dg-node.n2{left:88%; top:29%}
.dg-node.n3{left:88%; top:73%}
.dg-node.n4{left:50%; top:92%}
.dg-node.n5{left:12%; top:73%}
.dg-node.n6{left:12%; top:29%}
.dg-cap{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); text-align:center; margin-top:14px}

.sci-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; margin-top:clamp(34px,4.4vw,54px)}
.sci-stat{background:var(--paper); padding:24px 22px}
.sci-stat .n{font-size:clamp(1.6rem,2.6vw,2.2rem); font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.sci-stat .n.mono{font-family:var(--mono); font-size:clamp(.95rem,1.5vw,1.18rem); font-weight:500; letter-spacing:0}
.sci-stat .l{font-size:13px; color:var(--ink-2); margin-top:8px; line-height:1.4}
.footnotes{margin-top:24px; padding-top:18px; border-top:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:7px}
.footnotes p{font-size:12.5px; color:var(--ink-3); line-height:1.45; font-family:var(--mono); max-width:96ch}
.footnotes sup{color:var(--blue)}

/* ==========================================================================
   S6 · DOCTORS  (research RX-07: a named vet with a face, above the midpoint)
   ========================================================================== */
.docs{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px,2.6vw,28px); align-items:stretch}
.doc-lead{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr)}
/* doc-saroyan.jpg is a tight head-and-shoulders crop at 371x349, so its aspect
   is essentially 1:1. Stretched down the card's full height in a 260px column it
   lost both sides; at 16/10 on mobile it lost the top of the head and the chin.
   Tony, 2026-08-07: «cut off on side on desktop and vertically on mobile». The
   box matches the source's aspect now, so `cover` has almost nothing to crop —
   which is why align-self is start: a stretched grid item ignores aspect-ratio. */
.doc-lead .portrait{position:relative; background:var(--paper-2); align-self:start;
  aspect-ratio:1/1; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.doc-lead .portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 50%}
.doc-lead .portrait .yrs{position:absolute; left:0; bottom:0; right:0; background:var(--ink); color:#fff;
  padding:11px 16px; font-size:12.5px; display:flex; align-items:baseline; gap:8px}
.doc-lead .portrait .yrs b{font-size:1.35rem; font-weight:800; letter-spacing:-.02em}
.doc-lead .quote{padding:clamp(24px,3vw,34px); display:flex; flex-direction:column}
.doc-lead .qmark{font-family:var(--serif); font-size:3.2rem; line-height:.6; color:var(--blue); height:26px}
.doc-lead blockquote{font-family:var(--serif); font-size:clamp(1.04rem,1.55vw,1.22rem); line-height:1.5;
  margin-top:10px}
.doc-lead .who{margin-top:auto; padding-top:22px; border-top:1px solid var(--line)}
.doc-lead .who b{display:block; font-size:16px; font-weight:700}
.doc-lead .who span{display:block; font-size:13px; color:var(--ink-2); line-height:1.45; margin-top:4px}
.doc-side{display:flex; flex-direction:column; gap:clamp(20px,2.6vw,28px)}
.doc-2{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column; flex:1}
.doc-2 blockquote{font-family:var(--serif); font-size:1.04rem; line-height:1.5; margin-top:10px}
.doc-2 .attr{display:flex; align-items:center; gap:13px; margin-top:auto; padding-top:20px}
.doc-2 .ph{width:52px; height:52px; border-radius:50%; background:var(--blue-soft); border:1px solid var(--blue-line);
  display:grid; place-items:center; color:var(--blue); flex:none}
.doc-2 .attr b{display:block; font-size:15px}
.doc-2 .attr span{display:block; font-size:12.5px; color:var(--ink-2); line-height:1.4; margin-top:2px}
.clinic-card{background:var(--blue-soft); border:1px solid var(--blue-line); border-radius:var(--r);
  padding:clamp(22px,2.6vw,28px)}
.clinic-card h4{font-size:1.12rem}
.clinic-card p{font-size:14px; color:var(--ink-2); margin-top:8px; line-height:1.5}
.clinic-card .link-go{margin-top:14px}

/* ==========================================================================
   S7 · REVIEW WALL  (research RX-08: filterable by problem, every card
        attached to a SKU with its own buy button)
   ========================================================================== */
.rev-top{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(22px,3.4vw,44px);
  align-items:center; margin-bottom:clamp(24px,3vw,34px)}
.rating-block{border:1px solid var(--line-2); border-radius:var(--r); padding:clamp(20px,2.4vw,28px);
  background:var(--card); min-width:250px}
.rating-block .big{display:flex; align-items:baseline; gap:13px}
.rating-block .score{font-size:3.4rem; font-weight:800; letter-spacing:-.04em; line-height:.9; font-variant-numeric:tabular-nums}
.rating-block .stars-lg{display:inline-flex; gap:2px; color:var(--amber)}
.rating-block .rb-meta{margin-top:14px; display:flex; flex-direction:column; gap:5px; font-size:14px; color:var(--ink-2)}
.rating-block .rb-meta b{color:var(--ink); font-weight:700}
.rating-block .rb-src{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:12px;
  letter-spacing:.04em; text-transform:uppercase}
.rev-filters{display:flex; align-items:center; gap:14px 18px; flex-wrap:wrap}
.rev-wall{columns:3; column-gap:18px}
.rev{break-inside:avoid; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 21px 18px; margin-bottom:18px; display:inline-block; width:100%}
.rev.is-out{display:none}
.rev .rv-top{display:flex; align-items:center; gap:9px; margin-bottom:11px}
.rev .rv-stars{display:inline-flex; gap:1px; color:var(--amber); font-size:13px}
.rev .rv-ok{font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ok); display:inline-flex; align-items:center; gap:4px}
.rev p{font-family:var(--serif); font-size:1rem; line-height:1.52; color:var(--ink)}
.rev .rv-foot{margin-top:15px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.rev .rv-sku{font-family:var(--mono); font-size:11px; letter-spacing:.03em; text-transform:uppercase; color:var(--blue-ink)}
.rev .rv-buy{margin-left:auto; font-size:13.5px; font-weight:700; color:var(--magenta);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
@media(hover:hover){.rev .rv-buy:hover{color:var(--magenta-press)}}
.rev-slot{break-inside:avoid; border:1px dashed var(--line-2); border-radius:var(--r); padding:22px;
  margin-bottom:18px; display:inline-block; width:100%; background:var(--paper-2)}
.rev-slot .rs-l{font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
.rev-slot b{display:block; font-size:1.05rem; margin-top:8px}
.rev-slot p{font-size:13.5px; color:var(--ink-2); margin-top:7px; line-height:1.45}
.pet-strip{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:clamp(22px,2.8vw,32px)}
.pet-strip figure{aspect-ratio:1/1; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); background:var(--paper-2)}
.pet-strip img{width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease)}
@media(hover:hover){.pet-strip figure:hover img{transform:scale(1.06)}}
.rev-note{display:flex; align-items:flex-start; gap:10px; margin-top:16px; font-size:13px;
  color:var(--ink-3); max-width:80ch; line-height:1.5}
.rev-note svg{flex:none; margin-top:2px; color:var(--blue)}

/* ==========================================================================
   S8 · SPECIES · S9 · HONESTY · S10 · FAQ · S11 · FINAL · S12 · FOOTER
   ========================================================================== */
.spec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.spec{background:var(--card); padding:22px 24px; display:flex; align-items:center; gap:14px;
  transition:background .15s var(--ease)}
@media(hover:hover){.spec:hover{background:var(--paper)}}
.spec svg{color:var(--blue); flex:none}
.spec b{font-size:1.04rem; font-weight:700}
.spec span{font-size:13px; color:var(--ink-3); display:block}
.age-badge{margin-top:20px; display:flex; align-items:flex-start; gap:16px; background:var(--blue-soft);
  border:1px solid var(--blue-line); border-radius:var(--r); padding:22px 26px}
.age-badge svg{color:var(--blue); flex:none; margin-top:2px}
.age-badge p{font-size:15.5px; color:var(--blue-ink); line-height:1.5}
.age-badge p b{font-weight:700; color:var(--ink)}
/* .rare-note was a bare 14px line with a grey icon sitting directly under the
   blue-tinted .age-badge card, so two different highlight treatments stacked.
   Tony, 2026-08-06: «its weird to have two different highlight styles one below
   the other». One treatment now: same card, same blue, same icon colour. */
.rare-note{margin-top:12px; display:flex; align-items:flex-start; gap:16px;
  background:var(--blue-soft); border:1px solid var(--blue-line);
  border-radius:var(--r); padding:22px 26px; font-size:15.5px;
  color:var(--blue-ink); line-height:1.5}
.rare-note svg{color:var(--blue); flex:none; margin-top:2px}
.rare-note p{font-size:15.5px; color:var(--blue-ink); line-height:1.5}
.rare-note p b{font-weight:700; color:var(--ink)}
.mech-more{display:flex; flex-wrap:wrap; gap:14px 32px; margin-top:26px;
  padding-top:22px; border-top:1px solid var(--line)}

.honesty{background:var(--ink); color:#fff; border-top-color:var(--ink)}
.honesty .kicker{color:rgba(255,255,255,.6)}
.honesty .kicker .idx{color:rgba(255,255,255,.4)}
.honesty .sec-title{color:#fff}
.honesty .sec-head .lead{color:rgba(255,255,255,.7)}
.honest-list{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.13); border-radius:var(--r); overflow:hidden}
.honest-item{background:var(--ink); padding:26px clamp(22px,3vw,30px)}
.honest-item .hi-n{font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.45); letter-spacing:.06em}
.honest-item h4{color:#fff; font-size:1.1rem; margin-top:10px}
.honest-item p{color:rgba(255,255,255,.66); font-size:14.5px; margin-top:8px; line-height:1.5}
.honest-close{margin-top:26px; font-family:var(--serif); font-size:clamp(1.02rem,1.6vw,1.24rem);
  line-height:1.55; color:#fff; max-width:68ch; padding-left:20px; border-left:2px solid var(--magenta)}

.faq-list{border-top:1px solid var(--line-2)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%; text-align:left; padding:23px 46px 23px 0; font-size:clamp(1.02rem,1.6vw,1.19rem);
  font-weight:700; position:relative; line-height:1.35; display:block}
.faq-q .fx{position:absolute; right:6px; top:25px; width:20px; height:20px;
  transition:transform .24s var(--ease); color:var(--blue)}
.faq-item.open .faq-q .fx{transform:rotate(45deg)}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease), opacity .3s var(--ease); opacity:0}
.faq-item.open .faq-a{grid-template-rows:1fr; opacity:1}
.faq-a-in{overflow:hidden}
.faq-a p{font-size:15.5px; color:var(--ink-2); line-height:1.6; padding:0 60px 24px 0; max-width:82ch}
.faq-a p b{color:var(--ink); font-weight:600}

/* Left column is the whole editorial run (headline, sub, photo, buy, reassurance);
   the right column carries only the contact form. align-items:start so the form
   sits at the top of the band next to the headline instead of floating centred
   against a much taller column. */
.final-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,60px); align-items:start}
.final-grid>*{min-width:0}
/* The heading spans both columns so the copy and the form share a top line.
   The measure is capped at the width it had inside the left column, so the
   line breaks the design was approved with do not change. */
.final-head{grid-column:1/-1; margin-bottom:clamp(4px,1vw,12px)}
.final-head h2{max-width:17ch}
.final .fsub{margin-top:0}
.final h2{font-size:clamp(2rem,4.2vw,3.2rem); line-height:1}
.final .fsub{font-size:clamp(1.02rem,1.55vw,1.18rem); color:var(--ink-2); margin-top:20px; max-width:46ch; line-height:1.55}
.final .fsub b{color:var(--ink); font-weight:600}
.final-cta{display:flex; gap:13px; margin-top:30px; flex-wrap:wrap}
/* Was display:flex + flex-wrap with per-item side padding, so each row broke at
   whatever width its own text needed and no two icons shared a vertical line.
   Tony, 2026-08-07: «thee icons here arent aligned in a grid - so they look
   off». Two fixed columns put every icon on one of two lines. */
.reassure{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 28px; margin-top:32px; border-top:1px solid var(--line); padding-top:22px}
.reassure .ri{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-2); font-weight:500}
.reassure .ri svg{color:var(--blue); flex:none}
/* The photo now sits in the copy column directly under the headline, so it is a
   landscape band rather than the old 4/5 portrait beside the text. */
.final-shot{margin-top:28px; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--sh-2); aspect-ratio:16/9}
.final-shot img{width:100%; height:100%; object-fit:cover; object-position:50% 42%}
.email-cap{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px}
.email-cap .ec-lbl{font-weight:700; font-size:15px; display:flex; align-items:center; gap:9px}
.email-cap .ec-lbl svg{color:var(--blue)}
.email-cap p{font-size:13px; color:var(--ink-3); margin-top:4px}
.email-form{display:flex; gap:8px; margin-top:14px}
.email-form input{flex:1; font-family:var(--sans); font-size:15px; padding:12px 14px;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); min-width:0}
.email-form input:focus{outline:none; border-color:var(--blue)}

.footer{background:var(--ink); color:rgba(255,255,255,.62); padding:clamp(46px,6vw,70px) 0 38px}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;
  padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.13)}
.footer-brand img{height:30px; margin-bottom:18px}
.footer-brand p{font-size:13.5px; line-height:1.6; max-width:40ch}
.footer-brand .reg{font-family:var(--mono); font-size:11.5px; color:rgba(255,255,255,.5); margin-top:13px}
.footer-col h5{color:#fff; font-size:11.5px; text-transform:uppercase; letter-spacing:.09em;
  font-family:var(--mono); font-weight:500; margin-bottom:15px}
.footer-col a{display:block; font-size:14.5px; color:rgba(255,255,255,.66); padding:6px 0; transition:color .14s var(--ease)}
@media(hover:hover){.footer-col a:hover{color:#fff}}
.footer-phone{font-size:1.28rem; font-weight:700; color:#fff; margin-bottom:6px}
.footer-bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:24px; font-size:12.5px; color:rgba(255,255,255,.45)}

/* ---- toast, finder ---- */
/* The sticky buy bar lived here until 2026-08-07. The toast's `bottom` used to
   clear it; with the bar gone it sits at the normal bottom offset. */
.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:95;
  background:var(--ink); color:#fff; padding:13px 20px; border-radius:var(--r-sm); font-size:14.5px;
  font-weight:600; display:flex; align-items:center; gap:10px; box-shadow:var(--sh-2); opacity:0;
  pointer-events:none; transition:opacity .22s var(--ease), transform .22s var(--ease)}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast svg{color:#6FD6A6}

.modal{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px}
.modal.on{display:flex}
.modal-bg{position:absolute; inset:0; background:rgba(23,23,28,.55); backdrop-filter:blur(3px)}
.modal-card{position:relative; background:var(--paper); border-radius:var(--r); max-width:560px; width:100%;
  box-shadow:var(--sh-3); padding:clamp(26px,4vw,38px); max-height:88vh; overflow-y:auto}
.modal-card .mx{position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:var(--r-sm);
  display:grid; place-items:center; color:var(--ink-3)}
@media(hover:hover){.modal-card .mx:hover{background:var(--paper-2); color:var(--ink)}}
.modal-card .mk{font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--blue-ink)}
.modal-card h3{font-size:clamp(1.3rem,2.4vw,1.7rem); margin-top:9px}
.fq{margin-top:24px}
.fq.is-hidden{display:none}
.fq .fq-q{font-size:15px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:9px}
.fq .fq-q .step{font-family:var(--mono); font-size:11px; color:var(--ink-3); font-weight:500}
.fq-opts{display:grid; gap:9px}
.fq-opt{text-align:left; border:1px solid var(--line-2); background:var(--card); border-radius:var(--r-sm);
  padding:14px 16px; font-size:15px; font-weight:600; display:flex; align-items:center; gap:11px;
  transition:border-color .15s var(--ease), background .15s var(--ease)}
@media(hover:hover){.fq-opt:hover{border-color:var(--magenta); background:#fff}}
.fq-opt span{font-size:13px; font-weight:400; color:var(--ink-2); margin-left:auto; text-align:right}
.fq-res{display:none}
.fq-res.on{display:block}
.fq-res .rc{display:flex; gap:18px; align-items:center; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:18px; margin-top:18px}
.fq-res .rc img{width:88px; height:88px; object-fit:contain; flex:none}
.fq-res .rc b{display:block; font-size:1.1rem}
.fq-res .rc .why{font-size:13.5px; color:var(--ink-2); margin-top:5px; line-height:1.45}
.fq-res .rc .pr{font-size:1.25rem; font-weight:800; color:var(--magenta); margin-top:9px; font-variant-numeric:tabular-nums}
.fq-back{margin-top:16px; font-size:13.5px; color:var(--ink-3); border-bottom:1px solid var(--line-2)}

/* reveal */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1100px){
  .hero-photo{position:relative; height:min(46vh,380px)}
  .hero-photo::after{background:linear-gradient(0deg, var(--paper) 0%, rgba(252,245,240,0) 42%)}
  .hero-photo img{object-position:100% 40%}
  .hero-in{min-height:0; display:block}
  .hero-copy{padding:clamp(26px,4vh,40px) 0 clamp(34px,5vh,52px); max-width:none}
  .sec-head{grid-template-columns:1fr; align-items:start; gap:14px}
  .sec-head .lead{padding-bottom:0}
  .mech-wrap{grid-template-columns:1fr; gap:36px}
  .docs{grid-template-columns:1fr}
  .doc-lead{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
  .rev-wall{columns:2}
  .rev-top{grid-template-columns:1fr; gap:22px}
  .wedge-band{grid-template-columns:1fr}
  .seal{max-width:none; flex-direction:row; align-items:center; gap:18px}
  .store-wedge{grid-template-columns:repeat(2,1fr)}
  .final-grid{grid-template-columns:1fr}
  /* No order:-1 any more: .final-media is the contact form now, not the photo,
     and a form above the headline it belongs to reads as a different section. */
  .final-media{max-width:460px}
  .footer-top{grid-template-columns:1fr 1fr}
  .claim-top{grid-template-columns:auto minmax(0,1fr); row-gap:26px}
  .claim-buy{grid-column:1/-1; flex-direction:row; align-items:center; gap:16px}
  .pet-strip{grid-template-columns:repeat(6,1fr)}
}
@media(max-width:860px){
  .hdr-nav{display:none}
  .verb-grid{grid-template-columns:repeat(2,1fr)}
  .doors{grid-template-columns:1fr; gap:12px}
  .door{display:grid; grid-template-columns:120px minmax(0,1fr); align-items:stretch}
  .door figure{aspect-ratio:auto; height:100%}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .sci-stats{grid-template-columns:repeat(2,1fr)}
  .doc-lead{grid-template-columns:1fr}
  /* A full-bleed 16/10 band cropped the face top and bottom. Keep the square. */
  .doc-lead .portrait{aspect-ratio:1/1; width:100%; max-width:250px;
    margin:22px auto 0; border:1px solid var(--line); border-radius:var(--r-sm);
    overflow:hidden}
  .honest-list{grid-template-columns:1fr}
  .bundle{grid-template-columns:1fr}
  .bundle-media{min-height:0; order:-1; padding:22px 16px}
  /* «the buttons are different sizes wich is fine on desktop but very glaring
     on mobile» — one column, both full width. */
  .bundle-cta{flex-direction:column; align-items:stretch}
  .bundle-cta .btn{width:100%; justify-content:center}
  .spec-grid{grid-template-columns:1fr 1fr}
  .store-wedge{grid-template-columns:repeat(2,1fr)}
  .diagram{max-width:420px}
  .dg-node{width:38%}
}
@media(max-width:680px){
  .hdr-in{gap:10px; height:64px}
  .hero-proof .hp{padding:9px 0; width:50%; border-left:0!important}
  .h1-say{max-width:none}
  .rev-wall{columns:1}
  .pgrid{grid-template-columns:1fr}
  .spec-grid{grid-template-columns:1fr}
  .store-wedge{grid-template-columns:1fr}
  .sci-stats{grid-template-columns:1fr}
  .pet-strip{grid-template-columns:repeat(4,1fr); gap:7px}
  /* Tony, 2026-08-07: «the 1/2/3 on main page ... looks bad on mobile ... the
     cirvles arent circular on mobile either», pointing at regenique.ru/#contact
     as the reference. The ellipse had one cause: .node was a flex ITEM here with
     no flex:none, so flex-shrink squeezed its 40px width while the height held.
     regenique's .contact-step absolutely positions the number for exactly that
     reason, and runs a hairline down the column to connect them — which also
     replaces .arc-fill, whose horizontal progress bar means nothing in a stack. */
  .arc-fill{display:none}
  .arc-steps{grid-template-columns:1fr; gap:0}
  .astep{position:relative; padding-left:44px; padding-bottom:26px}
  .astep:last-child{padding-bottom:0}
  .astep::before{content:""; position:absolute; left:16px; top:36px; bottom:2px;
    width:1px; background:var(--line-2)}
  .astep:last-child::before{display:none}
  .astep .node{position:absolute; left:0; top:0; width:32px; height:32px;
    margin-bottom:0; font-size:12px}
  .astep .day{margin-bottom:.15em}
  .astep p{max-width:none}
  .claim-top{grid-template-columns:1fr}
  .claim-buy{flex-direction:column; align-items:flex-start}
  .reassure{grid-template-columns:1fr}
  /* 🔴 This block is the ONLY mobile treatment for the diagram. site.css used to
     carry a second one at 640px, so between 641 and 700px the component had a
     different layout than below it and the two drifted apart. */
  .diagram{display:flex; flex-direction:column; gap:10px; aspect-ratio:auto; max-width:none}
  .dg-ring{display:none}
  /* Stays a CIRCLE on mobile. It used to flatten into a full-width rounded card,
     which was fine while the core was a plain ink disc with two lines of text on
     it. Now it holds the cytokine wreath, and a wreath in a 340x80 card renders
     as a ~98px smudge directly under the label. A fixed 240px circle gives the
     art the same room the desktop disc gives it.
     position:RELATIVE, not static: the art layer inside is absolutely positioned
     at 100%/100%, so a static core hands it `.diagram` as its containing block
     and it renders 358x760 instead of filling the disc. */
  .dg-core{position:relative; left:auto; top:auto; transform:none;
    width:240px; max-width:100%; aspect-ratio:1/1; align-self:center;
    padding:18px; margin:6px auto 12px}
  .dg-node{position:relative; left:auto!important; top:auto!important; transform:none;
    width:100%; padding:13px 15px; margin-bottom:0}
  .dg-node i{display:none}
  /* Tony, 2026-08-07: «maybe it should have 3 descriptions on top 3 on bottom?».
     n1..n3 are the mechanism sequence and n4..n6 are the properties, so the split
     follows the content instead of just halving the list. */
  .dg-node.n1,.dg-node.n2,.dg-node.n3{order:1}
  .dg-core{order:2}
  .dg-node.n4,.dg-node.n5,.dg-node.n6{order:3}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .reveal{opacity:1; transform:none}
  .arc-fill i{transform:scaleX(1)}
}


/* ============================ site.css ============================ */
/* ===========================================================================
   site.css — what a multi-page site needs that the one-page homepage never had.
   Tokens, buttons, cards, doors, FAQ and footer all come from base.css.
   Nothing here redefines a token.
   =========================================================================== */

/* ---------------------------------------------------------------- header nav */
.nav-drop{position:relative}
.nav-drop-t{display:inline-flex; align-items:center; gap:5px; font-size:15.5px; font-weight:600;
  color:var(--ink-2); white-space:nowrap; transition:color .14s var(--ease)}
.nav-drop-t svg{transition:transform .2s var(--ease)}
@media(hover:hover){.nav-drop:hover .nav-drop-t{color:var(--ink)}
  .nav-drop:hover .nav-drop-t svg{transform:rotate(180deg)}}
.nav-drop-t[aria-current]{color:var(--ink)}
.hdr-nav a[aria-current]{color:var(--ink)}

.nav-panel{position:absolute; top:calc(100% + 14px); left:-18px; width:334px; z-index:70;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-3); padding:8px; opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s}
.nav-drop:hover .nav-panel,.nav-drop:focus-within .nav-panel{opacity:1; visibility:visible; transform:none}
.nav-panel::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px}
.nav-panel>a{display:block; padding:11px 13px; border-radius:var(--r-sm);
  transition:background .14s var(--ease)}
@media(hover:hover){.nav-panel>a:hover{background:var(--paper-2)}}
/* base.css sets .hdr-nav a{white-space:nowrap} for the top-level nav items, and
   the panel links are also inside .hdr-nav, so every description inherited it
   and ran straight out of the 334px panel. Only visible with the panel open,
   which is why a full-page overflow check never caught it.
   Two classes deliberately: a bare `.nav-panel a` ties (0,1,1) with
   `.hdr-nav a`, and then whichever stylesheet comes last wins. That is fine
   inside this file but loses when the same rule is pushed to Global Styles,
   which WordPress prints BEFORE the theme's own <link>. */
.hdr-nav .nav-panel a{white-space:normal}
.nav-panel b{display:block; font-size:15px; font-weight:700; letter-spacing:-.01em}
.nav-panel span{display:block; font-size:12.5px; color:var(--ink-3); line-height:1.4; margin-top:3px}
.nav-panel-all{border-top:1px solid var(--line); margin-top:6px; padding-top:13px!important;
  border-radius:0 0 var(--r-sm) var(--r-sm); font-size:13.5px; font-weight:700;
  color:var(--blue-ink)!important; display:flex!important; align-items:center; gap:7px}

/* mobile drawer */
.burger{display:none; width:46px; height:46px; border:1px solid var(--line-2);
  border-radius:var(--r-sm); background:#fff; flex-direction:column; justify-content:center;
  align-items:center; gap:4px}
.burger span{display:block; width:18px; height:1.8px; background:var(--ink); border-radius:2px;
  transition:transform .22s var(--ease), opacity .16s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}
.drawer{border-top:1px solid var(--line); background:var(--paper);
  max-height:calc(100vh - 72px); overflow-y:auto}
.drawer-in{display:flex; flex-direction:column; padding-top:12px; padding-bottom:20px}
.drawer-in a{padding:13px 0; font-size:17px; font-weight:600; border-bottom:1px solid var(--line)}
.drawer-cta{margin-top:18px; border-bottom:none!important; justify-content:center;
  color:#fff!important; padding:15px 22px!important}

@media(max-width:860px){
  .burger{display:flex}
}
@media(min-width:861px){.drawer{display:none}}

/* ---------------------------------------------------------------- breadcrumb */
.crumb{border-bottom:1px solid var(--line); background:var(--paper)}
.crumb .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:13px;
  padding-bottom:13px; font-size:13px; color:var(--ink-3)}
.crumb a{color:var(--ink-3); transition:color .14s var(--ease)}
@media(hover:hover){.crumb a:hover{color:var(--blue-ink)}}
.crumb i{font-style:normal; color:var(--line-2)}
.crumb span{color:var(--ink-2); font-weight:600}

/* ---------------------------------------------------------------- page hero */
.phero{padding:clamp(32px,4.6vw,60px) 0 clamp(30px,4vw,48px)}
.phero-in{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);
  gap:clamp(24px,5vw,72px); align-items:end}
.phero h1{font-size:clamp(2rem,4.6vw,3.5rem); margin:.34em 0 0; max-width:18ch}
.phero h1 .num{color:var(--magenta); font-variant-numeric:tabular-nums}
.phero-lede{font-family:var(--serif); font-size:clamp(1.02rem,1.55vw,1.2rem); line-height:1.55;
  color:var(--ink-2); max-width:48ch}
/* With an aside the lede stacks under the H1 and needs a gap; without one it sits
   in the second column, already aligned to the H1 baseline. */
.phero-copy .phero-lede{margin-top:clamp(16px,1.8vw,24px)}
.phero-lede b{font-family:var(--sans); font-weight:700; color:var(--ink); font-size:.94em}
/* `.phero-in` IS the `.wrap` (shell.page_hero), so capping ITS width also moved
   the element that defines the page's left edge: `.wrap`'s `margin:0 auto` then
   centred the narrower box and pushed the whole hero 201px right of every other
   wrap on the page (534 vs 333 at 1920). Tony, 2026-08-05: «01 Фармаконтроль
   Сообщить о … is offset too much». Constrain the COPY, not the wrap, so the
   measure stays 74ch and the hero still starts on the page's own left edge. */
.phero--narrow .phero-in{grid-template-columns:1fr}
.phero--narrow .phero-copy{max-width:74ch}
.phero--dark{background:var(--ink); color:#fff}
.phero--dark h1,.phero--dark .phero-lede{color:#fff}
.phero--dark .phero-lede{color:rgba(255,255,255,.7)}
.phero--dark .kicker{color:#9FB8DE}

/* The condition-page hero photo. It had NO rules at all, so it rendered at the
   natural size of the 16:10 homepage tile crop and read as a cut-off animal.
   Now: one framed 4:3 well on all three doors (Tony asked for consistency), fed
   the uncropped source, with the subject positioned per door. */
.phero-fig{margin:0; border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--sh-2); background:var(--paper-2); aspect-ratio:4/3}
.phero-fig img{width:100%; height:100%; object-fit:cover}
.phero-fig--eyes img{object-position:50% 34%}    /* ears in, eyes on the upper third */
.phero-fig--wounds img{object-position:50% 62%}  /* bandage and both paws, more body */
.phero-fig--mouth img{object-position:50% 44%}

.stat-row{display:flex; flex-wrap:wrap; gap:0; margin-top:clamp(26px,3.6vw,40px);
  border-top:1px solid var(--line)}
.stat-row .st{flex:1 1 150px; padding:18px 22px 16px 0; border-right:1px solid var(--line)}
.stat-row .st:last-child{border-right:none}

/* In the HERO ASIDE the row is only ~446px wide (.phero-in is 1.2fr/.9fr), and
   `flex:1 1 150px` plus 22px of right padding needs 516px for three, so /shop's
   three stats broke 2 + 1 and the orphan stretched the full width. Tony,
   2026-08-06: «this part looks weird in 2 rows». Inside the aside it is an
   explicit 3-track grid that cannot wrap; the divider moves to a border-LEFT
   centred in the gap so the whole width is text, and the number steps down a
   size because «от 950 ₽» does not fit 148px at 2.05rem. Only the aside is
   scoped — the four full-width .stat-rows on /cases, /reviews, /science and the
   condition pages carry 4-5 items across 1112px and are right as they are. */
.phero-aside .stat-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:20px}
.phero-aside .stat-row .st{padding:18px 0 16px; border-right:none;
  border-left:1px solid var(--line); padding-left:20px; margin-left:-10px}
.phero-aside .stat-row .st:first-child{border-left:none; padding-left:0; margin-left:0}
.phero-aside .stat-row b{font-size:clamp(1.25rem,1.9vw,1.6rem)}
.phero-aside .stat-row span{font-size:12.5px}
@media(max-width:980px){
  .phero-aside .stat-row{column-gap:14px}
  .phero-aside .stat-row .st{padding-left:14px; margin-left:-7px}
}
/* Clinic contact line under a vet quote. Only ever an ORGANISATION's published
   switchboard: build_clinic_log.py withholds the four personal mobiles. */
.dq-contact{margin-top:10px; font-size:13px; color:var(--ink-3); line-height:1.5}
.dq-contact a{color:var(--blue-ink); border-bottom:1px solid var(--blue-line)}
@media(hover:hover){.dq-contact a:hover{border-bottom-color:var(--blue)}}

/* Tony, 2026-08-07: «On both mobile and desktop I dont like this section on
   /cases (and same goes for /reviews): 29 случаев из практики 102 фотографии до
   и после ... i prefer you make it like the cards on the main page in this
   section: Покупка напрямую у производителя - this will also look a lot better
   on mobile».
   That section is `.store-wedge`: a seamless grid of white cards separated by
   1px of --line inside one rounded, bordered box. Same chrome exactly, with the
   number sitting where the wedge puts its icon. Only /cases and /reviews change;
   the .stat-row on /science, /shop and the condition pages is untouched.
   The counts differ (4 on /cases, 5 on /reviews) and a seamless grid with an
   empty cell shows a bare strip of the divider colour, so the odd card out
   spans the row rather than leaving a hole. */
.stat-cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; margin-top:clamp(22px,2.8vw,32px)}
.stat-cards:has(> :nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}
.stat-cards .st{background:var(--card); padding:20px 22px; display:flex;
  flex-direction:column; gap:7px; border:0; margin:0; flex-basis:auto}
.stat-cards .st b{display:block; font-size:clamp(1.45rem,2.3vw,1.9rem); font-weight:800;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1; color:var(--ink)}
.stat-cards .st span{display:block; margin-top:0; font-size:13.5px; color:var(--ink-2);
  line-height:1.4}
@media(max-width:900px){
  .stat-cards,.stat-cards:has(> :nth-child(5):last-child){
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-cards:has(> :nth-child(5):last-child) > .st:last-child{grid-column:1/-1}
}
@media(max-width:520px){
  .stat-cards,.stat-cards:has(> :nth-child(5):last-child){grid-template-columns:1fr}
}

/* =========================================================================
   /company/ — patents, building and production (Tony, 2026-08-07)
   The patent grid and its pop-out are PORTED FROM regenique.ru/company/, which
   he pointed at and asked to copy exactly. It is a no-JS checkbox lightbox: the
   hidden input holds the state, the first <label> opens it, the second <label>
   IS the overlay and closes it. Keeping the `cpage-` prefix on purpose so the
   shared origin is visible and a fix ports back unchanged; only the colours are
   swapped for this site's tokens.
   ========================================================================= */
.co-building{margin:0}
.co-building img{width:100%; height:auto; border-radius:var(--r);
  border:1px solid var(--line); display:block}
.co-building figcaption{margin-top:12px; font-size:13.5px; color:var(--ink-3);
  line-height:1.5}
.co-shots{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,20px); margin-top:clamp(22px,2.8vw,32px)}
.co-shots figure{margin:0}
.co-shots img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r);
  border:1px solid var(--line); display:block}
@media(max-width:760px){.co-shots{grid-template-columns:1fr}}

.cpage-patent-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,30px) clamp(16px,2.2vw,28px);
  margin-top:clamp(26px,3.2vw,40px); align-items:start}
.cpage-patent-card{display:flex; flex-direction:column; margin:0}
.cpage-lb-toggle{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
.cpage-patent-open{display:block; border:1px solid var(--line-2);
  border-radius:var(--r-sm); overflow:hidden; background:#fff; aspect-ratio:71/100;
  cursor:zoom-in; transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
@media(hover:hover){.cpage-patent-open:hover{border-color:var(--blue);
  box-shadow:var(--sh-2)}}
.cpage-lb-toggle:focus-visible + .cpage-patent-open{outline:2px solid var(--blue);
  outline-offset:3px}
.cpage-patent-open img{width:100%; height:100%; object-fit:contain; display:block;
  background:#fff}
.cpage-patent-card figcaption{display:flex; flex-direction:column; gap:3px;
  padding:12px 2px 0}
.cpage-patent-card .pt-country{font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--blue-ink); font-weight:600}
.cpage-patent-card .pt-num{font-size:17px; font-weight:700; letter-spacing:-.01em;
  color:var(--ink)}
.cpage-patent-card .pt-date{font-size:13px; color:var(--ink-3)}
.cpage-lightbox{display:none}
.cpage-lb-toggle:checked ~ .cpage-lightbox{display:flex; position:fixed; inset:0;
  z-index:1000; align-items:center; justify-content:center; padding:5vmin;
  background:rgba(23,23,28,.88); cursor:zoom-out}
.cpage-lightbox img{max-width:min(880px,92vw); max-height:90vh; width:auto;
  height:auto; object-fit:contain; border-radius:var(--r-sm); background:#fff;
  box-shadow:0 30px 90px rgba(0,0,0,.5)}
.cpage-lb-toggle:checked ~ .cpage-lightbox::after{content:"\00d7"; position:fixed;
  top:16px; right:24px; font-size:34px; line-height:1; color:rgba(255,255,255,.85)}
@media(max-width:1100px){.cpage-patent-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.cpage-patent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* /usage hero aside. Tony, 2026-08-07: «need a link to the actual instruction».
   The page is the readable version; this is the registered document itself,
   which is what a vet or a marketplace actually asks for. */
.doc-dl{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,2.4vw,26px); display:flex; flex-direction:column; gap:8px}
.doc-dl .k{font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3)}
.doc-dl b{font-size:1.1rem; letter-spacing:-.01em}
.doc-dl > span:not(.k){font-size:13.5px; color:var(--ink-2); line-height:1.5}
.doc-dl .link-go{margin-top:6px; align-self:flex-start}

.stat-row b{display:block; font-size:clamp(1.5rem,2.6vw,2.05rem); font-weight:800;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1}
.stat-row span{display:block; margin-top:7px; font-size:13.5px; color:var(--ink-3); line-height:1.35}

/* ------------------------------------------------------------ video facades */
/* A horizontal rail of cover frames. The player is injected on click by site.js,
   so nothing here talks to YouTube until the visitor asks it to. */
/* A WRAPPING grid, not a horizontal rail. Sixteen clinical case videos were the
   strongest asset on /vets/ and fifteen of them were off-screen behind a sideways
   scroll almost nobody performs. Tony, 2026-08-05: "the videos are hidden in a
   scroller … maybe make this a grid instead". Both video sections change, so the
   two adjacent rails do not end up behaving differently. The cards are still
   click-to-load facades, so this adds thumbnails, not sixteen YouTube iframes. */
.vscroll{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:clamp(16px,2vw,22px); margin-top:clamp(22px,3vw,30px)}
.vscroll--wide{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.vcard{scroll-snap-align:start; text-align:left; display:flex; flex-direction:column;
  gap:11px; padding:0; background:none; border:0}
.vcard-fig{position:relative; display:block; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; background:var(--ink); aspect-ratio:16/9}
.vcard-fig img{width:100%; height:100%; object-fit:cover;
  transition:transform .3s var(--ease), opacity .2s var(--ease)}
.vcard-fig iframe{width:100%; height:100%; border:0; display:block}
.vcard-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; background:rgba(23,23,28,.72);
  color:#fff; display:grid; place-items:center; backdrop-filter:blur(3px);
  transition:background .16s var(--ease), transform .16s var(--ease)}
.vcard-play svg{margin-left:3px}
@media(hover:hover){
  .vcard:hover .vcard-fig img{transform:scale(1.04); opacity:.86}
  .vcard:hover .vcard-play{background:var(--magenta); transform:translate(-50%,-50%) scale(1.06)}
}
.vcard-b b{display:block; font-size:14.5px; font-weight:700; line-height:1.3;
  letter-spacing:-.01em; color:var(--ink)}
.vcard-b span{display:block; margin-top:5px; font-size:12.5px; color:var(--ink-3); line-height:1.4}
/* Once the player is in, the card is no longer a button. */
.vcard.is-live{pointer-events:auto; cursor:default}
.vcard.is-live .vcard-play{display:none}

/* ---------------------------------------------------------------- dark CTA band */
.cta-dark{background:var(--ink); color:#fff; border-radius:var(--r);
  padding:clamp(28px,4vw,52px); display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(22px,4vw,48px); align-items:center}
.cta-dark h2{font-size:clamp(1.5rem,2.8vw,2.2rem); max-width:20ch; color:#fff}
.cta-dark p{color:rgba(255,255,255,.66); font-size:15px; line-height:1.6; margin-top:12px; max-width:48ch}
.cta-btns{display:flex; flex-wrap:wrap; gap:11px}
.cta-dark .btn-ghost{color:#fff; border-color:rgba(255,255,255,.3)}
@media(hover:hover){.cta-dark .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.08)}}
.band-wrap{padding-top:0}

/* ---------------------------------------------------------------- prose */
/* `74ch` is not 74 characters. Onest's zero glyph is 0.665em wide, so 74ch
   resolved to 812px, and Russian text at 16.5px averages ~8.3px per glyph —
   measured 98 characters per line on /corneal-ulcer-in-bulldog/. Tony,
   2026-08-06: «so is the text - its not the proper width for the page».
   620px is ~75 characters, the top of the comfortable editorial range, and it
   is stated in px precisely because the ch unit lied here. */
.prose{max-width:620px; font-size:16.5px; line-height:1.68; color:var(--ink-2)}
.prose p{margin-top:1.05em}
.prose p:first-child{margin-top:0}
.prose h2{font-size:clamp(1.3rem,2.2vw,1.7rem); color:var(--ink); margin-top:1.9em}
.prose h3{font-size:1.15rem; color:var(--ink); margin-top:1.6em}
.prose ul,.prose ol{margin-top:1em; padding-left:1.3em}
.prose li{margin-top:.5em}
.prose a{color:var(--blue-ink); border-bottom:1px solid var(--blue-line)}
.prose b,.prose strong{color:var(--ink)}
.prose-note{margin-top:2.4em; padding-top:1.4em; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--ink-3)}

/* --------------------------------------------------------- blog single post
   Three faults, all measured on /corneal-ulcer-in-bulldog/ at 1745px:
   the 483x480 featured image was blown up to 1112x626 by the block's
   aspectRatio:16/9, the text ran 98 characters wide, and the last paragraph
   ended exactly 0px above the footer. The template no longer forces an aspect
   ratio, .prose is capped above, and the rest is here. Tony, 2026-08-06. */
.rp-post .rp-post-hero{margin:clamp(20px,2.6vw,30px) 0 clamp(24px,3vw,34px)}
/* width:auto keeps the image at its intrinsic size, so a small upload is shown
   small instead of being upscaled and softened. It is centred on a tinted
   plate so a narrow hero does not read as a mistake. */
.rp-post .rp-post-hero img{width:auto; max-width:100%; height:auto; display:block;
  margin-inline:auto; border-radius:var(--r); background:var(--paper-2)}
/* 2026-08-07: «the text is squished to left side - it should be the same width
   as header». Measured on /top-5-breeds-with-eye-problems/ at 1920px: the wrap
   ran 397..1509 (1112px), the title 397..1208, the hero 465..1441 CENTRED, and
   .prose 397..1017. Four different edges, so nothing lined up with anything and
   the body text sat in the left half of an empty column.
   Settled 2026-08-07 (Tony): the FULL content width, same as the header, not a
   narrower measure. Everything in the article — title, date, hero, body — is
   flush to the 1112px column. The type goes up to 18px/1.72 because a longer
   line needs more leading and a larger eye to stay readable.
   The HERO deliberately keeps width:auto (see the rule above): /corneal-ulcer-in-bulldog/
   uploads a 483x480 cover, and stretching that to 1112px is the upscaling-and-
   softening fault fixed on 08-06. A wide photo fills the column, a small one
   stays its own size, centred. */
.rp-post .prose{max-width:none; font-size:18px; line-height:1.72}
.rp-post .rp-post-title{max-width:none}
.rp-post .prose h2{max-width:none}
.rp-post .rp-post-date{font-family:var(--mono); font-size:12.5px; color:var(--ink-3);
  margin-top:10px}
/* Figures and tables may use the whole column,
   which is what stops a wide screenshot from being squeezed into the measure. */
.rp-post .prose figure,.rp-post .prose img,.rp-post .prose table,
.rp-post .prose .wp-block-image{max-width:100%; width:auto}
.rp-post .prose > figure,.rp-post .prose > .wp-block-image{margin-inline:auto}
.rp-post .prose img{height:auto; border-radius:var(--r-sm)}
/* The post ended flush against the footer's top edge. */
.rp-post{padding-bottom:clamp(48px,7vw,96px)}
.rp-post .prose::after{content:""; display:block; margin-top:clamp(34px,4.5vw,56px);
  border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- symptom grid */
.sym-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden}
/* auto-fit packs floor(1112/255) = FOUR tracks, so a six-item grid rendered
   4 + 2 with a two-thirds-empty second row. Tony, 2026-08-06: «they should be in
   a 3x2 columns/rows - to make it more symmetrical» — /usage «Условия хранения»,
   /eyes /mouth /wounds «Похоже на ваш случай?».
   Scoped to EXACTLY six children with a quantity query, so it cannot touch the
   spray PDP, where the two merged doors make twelve. */
.sym-grid:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){
  .sym-grid:has(> :nth-child(6):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .sym-grid:has(> :nth-child(6):last-child){grid-template-columns:1fr}
}
.sym{background:var(--card); padding:20px 22px; display:flex; gap:13px; align-items:flex-start}
.sym-mark{flex:none; width:22px; height:22px; border-radius:50%; background:var(--magenta-soft);
  color:var(--magenta); display:grid; place-items:center; margin-top:2px}
.sym b{display:block; font-size:15.5px; letter-spacing:-.01em; line-height:1.3}
.sym span{display:block; font-size:13px; color:var(--ink-3); margin-top:4px; line-height:1.4}

/* ---------------------------------------------------------------- does list */
.does{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px 28px;
  margin-top:clamp(22px,3vw,32px)}
.does li{list-style:none; display:flex; gap:11px; align-items:flex-start; font-size:15.5px;
  line-height:1.45; color:var(--ink-2)}
.does li svg{flex:none; color:var(--blue); margin-top:3px}
.does li a{color:var(--blue-ink); border-bottom:1px solid var(--blue-line)}

/* ---------------------------------------------------------------- dose table */
.dose{border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden;
  background:var(--card)}
.dose-head,.dose-row{display:grid; grid-template-columns:1.5fr 1fr 1fr}
.dose-head{background:var(--paper-2); border-bottom:1px solid var(--line-2)}
.dose-head span{padding:13px 18px; font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.dose-row span{padding:17px 18px; font-size:15.5px; font-weight:600; line-height:1.35}
.dose-row span:first-child{font-weight:700}
.dose-note{font-size:14px; line-height:1.55; color:var(--ink-2); margin-top:15px; max-width:66ch}
.dose-note b{color:var(--ink)}
/* The spray sells two doors and they are dosed differently (1-3 спрей-дозы 2-4
   раза in a wound, 4-6 доз 1-3 раза on a gum), with notes that contradict each
   other if merged. Two tables need two labels; this is the same mono eyebrow as
   .dose-head span so the pair reads as one component. */
.dose-lbl{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin:30px 0 10px}
.dose-lbl:first-child{margin-top:0}

/* ---------------------------------------------------------------- form pick */
.formpick{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(14px,2vw,20px); margin-top:clamp(22px,3vw,30px)}
.fp{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 22px; display:flex; gap:16px; align-items:center}
.fp img{width:64px; flex:none; object-fit:contain}
.fp b{display:block; font-size:16px}
.fp span{display:block; font-size:13.5px; color:var(--ink-2); line-height:1.45; margin-top:4px}

/* ---------------------------------------------------------------- clinical cases */
/* 2026-08-07, both measured on /reviews/ at 1920px with the bar stuck at top:64.
   (1) «the sicky filter scroll down but they have no background so it looks
       weird on the scroll». It had one — rgba(252,245,240,.93) — but 93% of the
       PAGE colour over the page is invisible, 7% of the cards underneath ghosted
       through, and a 1px --line border is not enough to read as a layer once
       content is moving beneath it. Opaque now, with a soft drop shadow that is
       what actually separates a sticky rail from the page.
   (2) «дерматит и расчесы is off the page». The rows are overflow-x:auto with
       BOTH scrollbars hidden, and the second row measured scrollWidth 1587 in a
       1112px box: 475px of chips, «Дерматит и расчёсы» among them, were simply
       unreachable with a mouse and nothing on screen said so. They wrap now, so
       every chip is visible; the horizontal scroll is kept only on narrow
       screens, where swiping a chip rail is the expected gesture and a wrapped
       rail would eat half the viewport. */
.cs-filter{position:sticky; top:64px; z-index:40; background:var(--paper);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:0 10px 20px -16px rgba(23,23,28,.45)}
.cs-filter-in{display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:11px 0}
/* --r-sm is the button radius. Filter buttons were 999px pills, which read as a
   different control from every other button on the site. .fbtn is shared by the
   cases, blog and reviews filters, so this squares all three at once. */
.fbtn{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:14.5px; font-weight:600; padding:9px 15px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); color:var(--ink-2); background:#fff;
  transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease)}
.fbtn-n{font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--ink-3);
  background:var(--paper-2); padding:2px 6px; border-radius:5px; line-height:1.35}
@media(hover:hover){.fbtn:hover{border-color:var(--ink-3); color:var(--ink)}}
.fbtn.is-on{background:var(--magenta); border-color:var(--magenta); color:#fff}
.fbtn.is-on .fbtn-n{background:rgba(255,255,255,.22); color:#fff}

/* «Только с видео» is a toggle that ANDs with the area, not another area */
.fbtn-tog{margin-left:auto}
.fbtn-tog svg{flex:none; opacity:.75}
.fbtn-tog.is-on{background:var(--ink); border-color:var(--ink); color:#fff}
.fbtn-tog.is-on svg{opacity:1}
.fbtn-tog.is-on .fbtn-n{background:rgba(255,255,255,.22); color:#fff}
@media(max-width:860px){.fbtn-tog{margin-left:0}}

/* second filter row: the nosologies inside the selected area */
.cs-filter-in--2{padding-top:0; padding-bottom:11px; gap:7px}
.cs-filter-in--2 .fbtn{font-size:13.5px; padding:7px 12px; font-weight:600;
  border-color:var(--line); color:var(--ink-3)}
.cs-filter-in--2 .fbtn.is-on{background:var(--blue); border-color:var(--blue); color:#fff}
.cs-filter-in--2 .fbtn.is-on .fbtn-n{background:rgba(255,255,255,.22); color:#fff}
.cs-filter-in--2 .fbtn[hidden]{display:none}

/* ==========================================================================
   REVIEWS  ·  real Ozon reviews with owner-shot photos and video
   ========================================================================== */
.rv-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:clamp(18px,2.2vw,26px); align-items:start}
/* The three-card strips sprinkled onto the condition pages and the PDPs. Fixed
   at three so the row cannot reflow to two-plus-one on a wide screen; auto-fill
   is right for /reviews/, where the count is 86 and unknown. */
.rv-grid--strip{grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(22px,3vw,32px)}
@media(max-width:940px){.rv-grid--strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.rv-grid--strip{grid-template-columns:1fr}}
.rv{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--sh-1);
  transition:box-shadow .25s var(--ease), border-color .25s var(--ease)}
@media(hover:hover){.rv:hover{box-shadow:var(--sh-2); border-color:var(--line-2)}}
.rv[hidden]{display:none}

/* Every frame from the same review sits in one snap strip: no JS, swipes on
   touch, and a multi-photo review stays one card instead of N duplicates. */
.rv-strip{display:flex; gap:2px; overflow-x:auto; scroll-snap-type:x mandatory;
  background:#000; scrollbar-width:none}
.rv-strip::-webkit-scrollbar{display:none}
.rv-m{position:relative; flex:0 0 100%; scroll-snap-align:start; aspect-ratio:4/3;
  background:#0d0d10}
.rv-m img,.rv-m video{width:100%; height:100%; object-fit:cover; display:block}
.rv-m video{background:#000}
.rv-play{position:absolute; left:11px; bottom:11px; display:inline-flex; align-items:center;
  gap:5px; padding:5px 10px 5px 7px; border-radius:999px; pointer-events:none;
  background:rgba(13,13,16,.72); color:#fff; font-size:12px; font-weight:600;
  backdrop-filter:blur(6px)}
.rv-strip>.rv-m:only-child{flex-basis:100%}

.rv-b{padding:16px 18px 18px}
.rv-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  flex-wrap:wrap}
.rv-stars{color:var(--magenta); font-size:14px; letter-spacing:.06em}
.rv-who{font-size:12.5px; color:var(--ink-3)}
/* External reviews are credited to the site, not to a person, so the byline has
   to read as attribution rather than as somebody's name. */
.rv-src{font-weight:600; color:var(--ink-2)}
.rv-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
.rv-tags:empty{display:none}
.rv-q{font-size:15px; line-height:1.6; color:var(--ink-2); margin-top:12px}
.rv-more{font-size:13.5px; font-weight:700; color:var(--blue-ink); margin-top:8px;
  display:inline-block; border-bottom:1.5px solid transparent}
@media(hover:hover){.rv-more:hover{border-color:var(--blue)}}

@media(max-width:680px){
  .rv-m{aspect-ratio:1/1}
  .rv-b{padding:14px 15px 16px}
}

/* species tiles carrying a real owner photo instead of a flat icon */
a.spec{color:inherit; background:var(--card); transition:background .18s var(--ease)}
@media(hover:hover){a.spec:hover{background:var(--paper-2)}
  a.spec--photo:hover img{opacity:.94}}
.spec--photo{padding:0; display:block; position:relative; overflow:hidden; min-height:0;
  align-items:stretch}
.spec--photo img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:opacity .2s var(--ease)}
.spec--photo>div{padding:13px 15px 15px}
.spec--photo b{display:block}

/* Homepage review wall, rebuilt as media cards. base.css still ships the old
   `.rev-wall{columns:3}` masonry and the blockquote-shaped `.rev`; site.css loads
   after it, so these overrides win without touching the extracted base. */
.rev-wall{columns:auto; column-gap:normal;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px);
  align-items:start}
.rev--home{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; padding:0; margin:0; box-shadow:var(--sh-1);
  transition:box-shadow .25s var(--ease), border-color .25s var(--ease)}
@media(hover:hover){.rev--home:hover{box-shadow:var(--sh-2); border-color:var(--line-2)}}
.rev--home.is-out{display:none}
.rev--home .rv-strip{border-radius:0}
.rev--home .rv-q{font-size:14.5px; margin-top:10px}
.rev--home .link-go{margin-top:12px; font-size:13.5px}
.rev--home::before{content:none}
@media(max-width:1100px){.rev-wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.rev-wall{grid-template-columns:1fr}}

/* The набор block used to shout «−10%» in a 2.1rem magenta numeral. The 10% is
   real (every «Набор=2 шт» variation IS exactly 10% off 2× the single), but
   Tony wants the benefit stated, not the arithmetic — 2026-08-06. Without a
   number there is nothing for `.save b`'s display size to hang on, so the row
   becomes one highlighted sentence instead.
   2026-08-07: «the "Самая выгодная цена за миллилитр" rounding is wrong - we
   dont use this rounding anywhere». It was a 999px pill, which the site uses
   only for small chips; a statement this size takes the standard --r-sm. */
.bundle .save--txt{margin-top:20px}
.bundle .save--txt span{font-size:15px; font-weight:700; color:#fff;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-sm); padding:9px 16px; display:inline-block; line-height:1.2}

/* «9 отзывов» is gone. It was a live count of the SELECTED cards on this page,
   so it read as the total and made 5 500+ reviews look like nine. Its slot now
   says what the wall actually is and points at /reviews/. Tony, 2026-08-06. */
.rev-selected{font-size:13.5px; color:var(--ink-3); line-height:1.5}
.rev-selected a{color:var(--magenta); font-weight:700; white-space:nowrap}
@media(hover:hover){.rev-selected a:hover{color:var(--magenta-press)}}
/* With the count removed the filter row had a hole in it, so the rating card
   takes a little more of the width back. */
.rev-top .rating-block{min-width:290px}
@media(max-width:900px){.rev-top .rating-block{min-width:0}}

/* homepage strip: the same cards, laid out as a horizontal rail */
.rv-rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px,320px);
  gap:16px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:6px;
  scrollbar-width:none}
.rv-rail::-webkit-scrollbar{display:none}
.rv-rail>.rv{scroll-snap-align:start}

.cs-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:clamp(18px,2.2vw,26px)}
.cs{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sh-1);
  transition:box-shadow .25s var(--ease), border-color .25s var(--ease)}
@media(hover:hover){.cs:hover{box-shadow:var(--sh-2); border-color:var(--line-2)}}
.cs[hidden]{display:none}
.cs-pair{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border-bottom:1px solid var(--line)}
.cs-pair figure{position:relative; margin:0; background:var(--paper-3)}
.cs-pair img{width:100%; aspect-ratio:4/3; object-fit:cover}
.cs-pair figcaption{position:absolute; left:9px; bottom:9px; font-family:var(--mono);
  font-size:10.5px; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  color:#fff; background:rgba(23,23,28,.72); padding:4px 8px; border-radius:4px}
.cs-pair figcaption.is-after{background:rgba(227,0,123,.9)}
/* .cs-days (the white «N дней» bubble) is retired — it contradicted the day count
   burnt into several of the photos. See cases_data.card(). */
.cs-body{padding:18px 19px 19px; display:flex; flex-direction:column; flex:1}
.cs-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.cs-no{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
.cs h3{font-size:1.11rem; line-height:1.2; margin:11px 0 0; letter-spacing:-.02em}
.cs-who{font-size:14px; color:var(--ink-3); margin-top:5px}
.cs-tried,.cs-scheme{font-size:14px; line-height:1.5; margin-top:13px; color:var(--ink-2)}
.cs-tried span,.cs-scheme span{display:block; font-family:var(--mono); font-size:10.5px;
  font-weight:500; letter-spacing:.07em; text-transform:uppercase; margin-bottom:3px}
.cs-tried{padding-left:11px; border-left:2px solid var(--line-2)}
.cs-tried span{color:var(--ink-3)}
.cs-scheme span{color:var(--blue-ink)}
.cs-res{font-size:14.5px; line-height:1.52; margin-top:13px; color:var(--ink)}
.cs-src{font-size:12.5px; color:var(--ink-3); margin-top:13px; padding-top:12px;
  border-top:1px solid var(--line)}
.cs-more{margin-top:14px; align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:var(--blue-ink)}
.cs-more svg{transition:transform .2s var(--ease)}
@media(hover:hover){.cs-more:hover{color:var(--blue)}
  .cs-more:hover svg{transform:scale(1.12)}}
/* `.cs-series` is never shown in the card any more. It stays in the markup as the
   single copy of the photos and their captions, and site.js clones it into the
   lightbox. `hidden` is what keeps it out of the card and out of the a11y tree. */
.cs-series{margin-top:14px}
.cs-series-in{display:flex; gap:9px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin}
.cs-shot{flex:0 0 128px; margin:0}
.cs-shot img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-sm);
  border:1px solid var(--line)}
.cs-shot figcaption{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:5px}

/* ---------------------------------------------------------- case lightbox */
/* The photos are the strongest proof on this site and they were being shown at
   128px inside a horizontal scroller (Tony, 2026-08-04: "hard to see this").
   The dialog reuses base.css's .modal / .modal-bg / .modal-card shell, which the
   homepage finder already uses, and only widens it and undoes the 1:1 thumbnail
   crop: in here a photo keeps its own aspect ratio at full width. */
.modal--case .modal-card{max-width:min(980px,100%); padding:clamp(22px,3.2vw,34px)}
.cs-lb-head{padding-right:46px}
.cs-lb-head .cs-top{margin-bottom:9px}
.cs-lb-head h3{margin-top:0}
.cs-lb-head .cs-who{font-size:15px; color:var(--ink-2)}
.cs-lb-head .cs-tried,.cs-lb-head .cs-scheme,.cs-lb-head .cs-res{max-width:78ch}
.cs-lb-count{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin-top:clamp(20px,2.6vw,28px);
  padding-top:clamp(18px,2.4vw,24px); border-top:1px solid var(--line)}
.cs-lb-shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(14px,2vw,20px); margin-top:14px}
.cs-lb-shots .cs-shot{flex:none; margin:0}
.cs-lb-shots .cs-shot img{aspect-ratio:auto; object-fit:contain; background:var(--paper-3);
  max-height:62vh; border-radius:var(--r-sm); border:1px solid var(--line)}
.cs-lb-shots .cs-shot figcaption{font-size:12px; color:var(--ink-2); margin-top:7px}
@media(max-width:700px){
  .modal--case .modal-card{max-height:calc(100vh - 24px)}
  .cs-lb-shots .cs-shot img{max-height:52vh}
}
.cs-empty{padding:60px 0; text-align:center; color:var(--ink-3)}
.cs-note{font-size:13px; line-height:1.55; color:var(--ink-3); max-width:78ch;
  margin-top:clamp(26px,3.4vw,38px)}

/* the 41-dog controlled comparison */
.study{background:var(--blue-soft); border:1px solid var(--blue-line); border-radius:var(--r);
  padding:clamp(24px,3.4vw,40px); display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:clamp(22px,4vw,54px); align-items:center}
.study h2{font-size:clamp(1.4rem,2.5vw,1.95rem); max-width:19ch; margin-top:.42em}
.study p{font-size:15px; line-height:1.6; color:var(--ink-2); margin-top:13px; max-width:52ch}
.study-arms{display:flex; flex-direction:column; gap:9px}
.arm{background:#fff; border:1px solid var(--blue-line); border-radius:var(--r-sm);
  padding:13px 15px; display:flex; align-items:center; gap:14px}
.arm-n{font-family:var(--mono); font-size:12px; color:var(--ink-3); flex:none; width:66px}
.arm-l{font-size:14px; line-height:1.35; flex:1}
.arm-d{font-family:var(--mono); font-size:13px; font-weight:500; flex:none}
.arm-d.win{color:var(--magenta)}
.arm.is-ctrl{background:var(--paper-2); border-color:var(--line-2)}

/* ---------------------------------------------------------------- PDP */
.pdp{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:start; padding-top:clamp(26px,3.4vw,44px)}
/* Gallery, not a single render: the SKU shot, the range for scale, then real
   owner frames of the product in use (video first). */
.pdp-media{position:sticky; top:96px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(20px,3vw,34px)}
.pdp-stage{position:relative; display:grid; place-items:center; aspect-ratio:1/1}
/* The markup also carries `hidden` on the inactive frames, which is what holds
   the gallery together when the body is a deploy ahead of this stylesheet. */
.pdp-frame{display:none; width:100%; height:100%; place-items:center}
.pdp-frame.is-on{display:grid}
.pdp-frame[hidden]{display:none}
.pdp-frame img{max-width:340px; max-height:100%; width:auto; object-fit:contain}
/* An owner photo is a rectangular snapshot, not a cut-out render, so it fills
   the well instead of floating in the middle of it. */
.pdp-frame[data-i]:not([data-i="0"]):not([data-i="1"]) img,
.pdp-frame video{width:100%; height:100%; max-width:none; object-fit:cover;
  border-radius:var(--r-sm); background:#000}
.pdp-thumbs{display:flex; gap:9px; margin-top:16px; flex-wrap:wrap}
.pdp-thumb{position:relative; width:66px; height:66px; padding:0; overflow:hidden;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff;
  transition:border-color .15s var(--ease)}
.pdp-thumb img{width:100%; height:100%; object-fit:cover}
.pdp-thumb.is-on{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
@media(hover:hover){.pdp-thumb:hover{border-color:var(--ink-3)}}
.pdp-thumb-play{position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(23,23,28,.42); color:#fff}
.pdp-thumb-play svg{width:16px; height:16px}
.pdp-badges{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.pdp h1{font-size:clamp(1.8rem,3.4vw,2.7rem); max-width:16ch}
.pdp-brand{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue-ink)}
.pdp-lead{font-family:var(--serif); font-size:1.12rem; line-height:1.55; color:var(--ink-2);
  margin-top:16px; max-width:44ch}
.pdp-rating{display:flex; align-items:center; gap:9px; margin-top:16px; font-size:14px}
.pdp-rating .stars{color:var(--amber); letter-spacing:1px}
.pdp-rating .cnt{color:var(--ink-3)}
.pdp-buy{margin-top:clamp(22px,3vw,30px); background:var(--card); border:1px solid var(--line-2);
  border-radius:var(--r); padding:clamp(20px,2.6vw,26px)}
.pdp-price{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.pdp-price .now{font-size:clamp(1.9rem,3.4vw,2.5rem); font-weight:800; letter-spacing:-.035em;
  color:var(--magenta); font-variant-numeric:tabular-nums}
.pdp-price .was{font-size:1.05rem; color:var(--ink-3); text-decoration:line-through}
.pdp-price .per{font-family:var(--mono); font-size:12.5px; color:var(--ink-3)}
/* .pdp-buy-scoped, never a bare `.qty`: WooCommerce puts class="qty" on its own
   quantity INPUT, so an unscoped rule made every cart and PDP quantity field a
   flex box pushed 18px down its row. */
.pdp-buy .qty{display:flex; align-items:center; gap:10px; margin-top:18px}
.qty-lbl{font-size:14px; color:var(--ink-2)}
.qty-box{display:inline-flex; align-items:center; border:1px solid var(--line-2);
  border-radius:var(--r-sm); overflow:hidden; background:#fff}
.qty-box button{width:40px; height:42px; font-size:19px; color:var(--ink-2);
  transition:background .14s var(--ease)}
@media(hover:hover){.qty-box button:hover{background:var(--paper-2)}}
.qty-box input{width:46px; height:42px; text-align:center; border:0; font-weight:700;
  font-size:16px; font-variant-numeric:tabular-nums; background:transparent}
.qty-box input::-webkit-outer-spin-button,.qty-box input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0}
.pdp-set{margin-top:14px; font-size:13.5px; color:var(--ink-2); background:var(--magenta-soft);
  border-radius:var(--r-sm); padding:11px 14px}
.pdp-set b{color:var(--magenta)}
.pdp-cta{margin-top:16px; display:flex; gap:10px; flex-wrap:wrap}
.pdp-cta .btn{flex:1 1 190px}
.pdp-trust{margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:9px}
.pdp-trust li{list-style:none; display:flex; gap:10px; align-items:flex-start; font-size:13.5px;
  color:var(--ink-2); line-height:1.45}
.pdp-trust svg{flex:none; color:var(--blue); margin-top:2px}
.pdp-spec{margin-top:clamp(26px,3.4vw,38px); border-top:1px solid var(--line)}
.pdp-spec .row{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:20px;
  padding:14px 0; border-bottom:1px solid var(--line); font-size:14.5px}
.pdp-spec .row dt{color:var(--ink-3)}
.pdp-spec .row dd{color:var(--ink); font-weight:600}

/* ==========================================================================
   MINI-CART  (wp:woocommerce/mini-cart, in the header template part)
   --------------------------------------------------------------------------
   The header's cart control is WooCommerce's own block, exactly as on the
   regenique theme: it owns the badge and the slide-out drawer, and it stays
   correct without a line of our JS. site.js only tells it the cart moved, by
   firing the `wc-blocks_added_to_cart` document event its markup asks for.

   So the job here is purely visual: make it the same 46x46 outlined square as
   the account button beside it, and dress the drawer in the design's paper,
   type and magenta. Woo's block CSS is printed after this stylesheet, hence the
   specific selectors (and the handful of !important where it insists).
   ========================================================================== */
/* The same glyph shell.CART_SVG draws, as a mask so it takes the button's
   colour. Encoded with a literal stroke colour: a mask reads the image's own
   alpha, so `currentColor` inside the SVG would resolve to nothing. */
:root{
  --rp-cart-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E");
}
.rp-cart{display:flex; align-items:center}
.rp-cart .wc-block-mini-cart__button{position:relative; display:flex; align-items:center;
  justify-content:center; width:46px; height:46px; padding:0; background:#fff;
  border:1px solid var(--line-2); border-radius:var(--r-sm); color:var(--ink-2);
  transition:border-color .15s var(--ease), color .15s var(--ease)}
@media(hover:hover){.rp-cart .wc-block-mini-cart__button:hover{border-color:var(--ink);
  color:var(--ink)}}
/* Woo's icon is a heavier, filled cart; next to the 1.6-stroke account glyph it
   reads as a different icon set. Mask in the design's own cart instead, so it
   still takes its colour from the button. */
.rp-cart .wc-block-mini-cart__icon{display:none}
.rp-cart .wc-block-mini-cart__quantity-badge{position:static; display:flex;
  align-items:center; justify-content:center; width:100%; height:100%}
.rp-cart .wc-block-mini-cart__quantity-badge::before{content:""; width:21px; height:21px;
  background-color:currentColor;
  -webkit-mask:var(--rp-cart-icon) center/21px 21px no-repeat;
  mask:var(--rp-cart-icon) center/21px 21px no-repeat}
.rp-cart .wc-block-mini-cart__badge{position:absolute; top:-8px; right:-8px; min-width:21px;
  height:21px; padding:0 5px; background:var(--magenta); color:#fff; border-radius:999px;
  font-family:var(--sans); font-size:11.5px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--paper)}

/* 🔴 The block already asks to hide the badge on an empty cart
   (data-wp-context productCountVisibility:greater_than_zero) and does it by
   setting the `hidden` ATTRIBUTE via data-wp-bind--hidden. The rule above then
   put `display:flex` back, because a class selector beats the UA stylesheet's
   [hidden]{display:none} — so the header wore a «0» badge on every page for
   every visitor who had not yet added anything. Same physics as the PDP
   gallery's [hidden] frames: if Woo drives state through that attribute, any
   `display` we set on the element has to opt out of it. */
.rp-cart .wc-block-mini-cart__badge[hidden]{display:none}

/* 🔴 And the block itself has to leave the row on /cart/ and /checkout/. Woo
   prints the mini-cart with an INLINE `style="visibility:hidden"` and lets its
   own script clear it once the block hydrates. On the cart and the checkout that
   script never runs, so the block stays invisible but keeps its 46px of layout,
   parking an empty gap to the right of the account icon and knocking it 56px out
   of line with the page's content edge. `visibility` reserves space; only
   `display` gives it back. */
.woocommerce-cart .hdr .rp-cart,
.woocommerce-checkout .hdr .rp-cart{display:none}

/* The drawer offered «Просмотр корзины» and «Перейти к оформлению заказа» side by
   side. Tony, 2026-08-05: "the mini cart should not link to the main cart - just
   checkout". Woo exposes no attribute for that and its drawer contents come from
   a PLUGIN template part (woocommerce//mini-cart), so overriding the part would
   mean freezing a copy of Woo's markup into this theme and re-breaking it at
   every Woo update. Hiding Woo's own semantic class is the smaller, more durable
   surface. `display:none` also takes it out of the accessibility tree, so it is
   not merely invisible. /cart/ itself still exists and still works.
   🔴 Must carry Woo's own selector DEPTH. mini-cart.css sets
   `.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions
   .wc-block-components-button{display:inline-flex}` — three classes. A bare
   `.wc-block-mini-cart__footer-cart{display:none}` is one class and loses on
   specificity at ANY source position, so moving it later never helps. Same bug as
   the PDP variation selects earlier the same day; measured, not guessed. */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions
  .wc-block-mini-cart__footer-cart{display:none}

/* «Начать покупки» on the EMPTY drawer was the one button in the whole site
   wearing a 999px pill; every other button is --r-sm (6px). Woo ships that
   radius and we had simply never styled the empty state. Tony, 2026-08-05: "all
   buttons must have same style corner rounding". Checked the rest of the sheet:
   every other 999px is a chip, badge or count bubble, which are meant to be
   pills, so this is the only offender. */
.wc-block-mini-cart__shopping-button{border-radius:var(--r-sm)}

/* ---- /pharmacontrol: «Что произойдёт дальше» above a FULL-WIDTH form ----
   Was a .split--form, which gave the longest form on the site 1.28fr of the page
   while its ~30 regulated fields fought for the room. Tony, 2026-08-05. */
.pv-intro{max-width:74ch}
.pv-intro .does{margin-top:clamp(18px,2.4vw,26px)}
.pv-form{margin-top:clamp(28px,4vw,44px)}

/* ---- the drawer ---- */
.wc-block-components-drawer__screen-overlay{background:rgba(23,23,28,.45)}
.wc-block-mini-cart__drawer .wc-block-components-drawer{background:var(--paper);
  border-left:1px solid var(--line)}
.wc-block-mini-cart__title{font-family:var(--sans); font-size:1.15rem; font-weight:800;
  letter-spacing:-.028em; color:var(--ink)}
.wc-block-mini-cart__products-table .wc-block-cart-items__row td{padding-top:18px;
  padding-bottom:18px}
.wc-block-mini-cart__products-table .wc-block-cart-item__image,
.wc-block-mini-cart__products-table .wc-block-cart-item__image img{width:64px !important;
  max-width:64px !important; height:auto !important; border-radius:var(--r-sm)}

/* ==========================================================================
   CATALOGUE  (/shop/ = the WooCommerce product archive)
   --------------------------------------------------------------------------
   Two cards, not six: the six SKUs are two variable products and the volume is
   chosen on the product page. .pcard--form is the design's own card rendered by
   shell.form_card(); .rp-pgrid is WooCommerce's product-collection wearing the
   same clothes, and it is what the live archive actually renders.
   ========================================================================== */
/* max-width:840px with the default `margin:0` left the two cards hard against
   the left edge of a 1112px wrap, so /shop read as a page with a 272px hole on
   the right. Two products is the catalogue now, not a temporary state, so the
   pair is centred rather than widened. Tony, 2026-08-06. */
.pgrid--forms{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:840px;
  margin-inline:auto}
.pcard--form .pcard-media{background:var(--paper-2)}
.pcard-vols{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px}
.price-lbl{font-size:14px; color:var(--ink-3); font-weight:600}
.pcard--form .price-unit{margin-top:4px}
.pcard--form .btn{margin-top:14px}

/* The Woo collection: same card, Woo's markup. product-collection renders a
   <ul> of <li>, so the grid lives on the list, not on the block wrapper. */
.rp-pgrid{margin:0}
.rp-pgrid .wc-block-product-template{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px; max-width:840px; list-style:none; margin:0 auto; padding:0}
.rp-pgrid .wc-block-product-template__responsive-wrapper,
.rp-pgrid li.wc-block-product{background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column;
  padding:0 0 20px; margin:0}
.rp-pgrid li.wc-block-product .wc-block-components-product-image{margin:0 0 16px;
  background:var(--paper-2)}
.rp-pgrid li.wc-block-product .wc-block-components-product-image img{width:100%;
  height:auto; display:block}
.rp-pgrid li.wc-block-product > *:not(.wc-block-components-product-image){
  padding-left:20px; padding-right:20px}
.rp-pgrid li.wc-block-product .wp-block-post-title{font-size:1.12rem; font-weight:700;
  letter-spacing:-.02em; margin:0 0 8px; text-align:left}
.rp-pgrid li.wc-block-product .wp-block-post-title a{color:var(--ink)}
@media(hover:hover){.rp-pgrid li.wc-block-product .wp-block-post-title a:hover{
  color:var(--magenta)}}
.rp-pgrid li.wc-block-product .wp-block-post-excerpt{font-size:13.5px; color:var(--ink-2);
  line-height:1.5; margin:0 0 12px}
.rp-pgrid li.wc-block-product .wp-block-post-excerpt__more-text{display:none}
.rp-pgrid .rp-vols{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; font-size:0}
.rp-pgrid .rp-vols a{display:inline-flex; align-items:center; font-size:12px;
  font-family:var(--mono); font-weight:500; background:var(--paper-2); color:var(--ink-2);
  padding:5px 11px; border-radius:999px; line-height:1}
.rp-pgrid .wc-block-components-product-price{font-size:1.35rem; font-weight:800;
  letter-spacing:-.025em; color:var(--magenta); font-variant-numeric:tabular-nums;
  margin:auto 0 12px; text-align:left}
.rp-pgrid .wc-block-components-product-price del{font-size:.95rem; color:var(--ink-3);
  font-weight:400}
.rp-pgrid .wc-block-components-product-price ins{text-decoration:none}
.rp-pgrid .wp-block-woocommerce-product-button{text-align:left}
.rp-pgrid .wp-block-woocommerce-product-button .wp-block-button__link{width:100%;
  justify-content:center; background:var(--magenta); color:#fff; border-radius:var(--r-sm);
  font-family:var(--sans); font-weight:700; font-size:16px; padding:14px 22px}
@media(hover:hover){.rp-pgrid .wp-block-woocommerce-product-button .wp-block-button__link:hover{
  background:var(--magenta-press)}}
@media(max-width:700px){
  .pgrid--forms,.rp-pgrid .wc-block-product-template{grid-template-columns:1fr}
}

/* ==========================================================================
   PRODUCT PAGE  (templates/single-product.html)
   --------------------------------------------------------------------------
   One template for both products. The wrappers are the design's own .pdp /
   .pdp-media / .pdp-copy / .pdp-buy, so most of the PDP's existing rules apply
   unchanged; what is new here is WooCommerce's own furniture inside the buy
   box — the variation selects, the quantity field and the add-to-cart button.
   ========================================================================== */
.rp-pdp .rp-crumb{padding-top:18px}
.rp-pdp .woocommerce-breadcrumb{font-size:13px; color:var(--ink-3)}
.rp-pdp .woocommerce-breadcrumb a{color:var(--ink-3)}
@media(hover:hover){.rp-pdp .woocommerce-breadcrumb a:hover{color:var(--ink)}}
.rp-pdp .pdp-copy > .wp-block-post-title{font-size:clamp(1.85rem,3.4vw,2.6rem);
  margin:6px 0 0; letter-spacing:-.03em}
.rp-pdp .pdp-lead{font-family:var(--serif); font-size:clamp(1.02rem,1.6vw,1.18rem);
  line-height:1.5; color:var(--ink-2); margin:14px 0 0}
.rp-pdp .pdp-lead a{display:none}                 /* Woo's «Читать далее» */

/* The price range, before a volume is picked. */
.rp-pdp .pdp-buy .wc-block-components-product-price{display:block;
  font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800; letter-spacing:-.035em;
  color:var(--magenta); font-variant-numeric:tabular-nums; line-height:1.15}
.rp-pdp .pdp-buy .wc-block-components-product-price del{font-size:1rem;
  color:var(--ink-3); font-weight:400}
.rp-pdp .pdp-buy .wc-block-components-product-price ins{text-decoration:none}

.rp-pdp table.variations{width:100%; margin:18px 0 0; border-collapse:collapse}
.rp-pdp table.variations th{text-align:left; font-size:13.5px; font-weight:600;
  color:var(--ink-2); padding:0 12px 10px 0; white-space:nowrap; vertical-align:middle}
.rp-pdp table.variations td{padding:0 0 10px}
.rp-pdp table.variations select{width:100%; padding:12px 14px; font:inherit;
  font-size:15px; background:#fff; border:1px solid var(--line-2);
  border-radius:var(--r-sm); color:var(--ink)}
.rp-pdp table.variations select:focus{outline:2px solid var(--blue); outline-offset:1px;
  border-color:transparent}
/* woocommerce-blocktheme.css styles this at `.woocommerce div.product form.cart
   table.variations td select`, which is four classes and five elements, so a
   short selector simply loses. Matched here rather than shouted down with
   !important, and the theme's stylesheet is enqueued after Woo's, so the tie
   goes to us. (It does NOT in the Global Styles preview; see the marker note.)
   🔴 `div.product` is OUTSIDE our <main>: Woo's block template wraps the page in
   `div.wp-block-group.woocommerce.product` and `.rp-pdp` is its CHILD. So
   `.rp-pdp div.product …` matches nothing, ever. The order has to be reversed.
   That mismatch left the selects at Woo's 13px with an inherited 34px line box
   inside a 15.6px content box, which clipped the option text out of sight. */
div.product .rp-pdp form.cart table.variations td select{font-size:15px;
  padding:12px 40px 12px 14px; height:auto; line-height:1.4}
.rp-pdp .reset_variations{display:inline-block; font-size:12.5px; color:var(--ink-3);
  margin-top:2px}

/* The chosen variation's own price, which is the number the buyer acts on. */
.rp-pdp .woocommerce-variation-price{margin:4px 0 14px}
.rp-pdp .woocommerce-variation-price .price{font-size:clamp(1.9rem,3.4vw,2.5rem);
  font-weight:800; letter-spacing:-.035em; color:var(--magenta);
  font-variant-numeric:tabular-nums; display:block}
.rp-pdp .woocommerce-variation-price del{font-size:1.05rem; color:var(--ink-3);
  font-weight:400; margin-right:10px}
.rp-pdp .woocommerce-variation-price ins{text-decoration:none}
.rp-pdp .woocommerce-variation-availability{font-size:13px; color:var(--ink-3)}
.rp-pdp .woocommerce-variation-description{font-size:13.5px; color:var(--ink-2);
  margin-top:6px}

.rp-pdp .woocommerce-variation-add-to-cart{display:flex; gap:12px; align-items:center;
  flex-wrap:wrap; margin-top:6px}
.rp-pdp .quantity input.qty{width:84px; height:52px; text-align:center; font-weight:700;
  font-size:16px; font-variant-numeric:tabular-nums; background:#fff; color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-sm)}
.rp-pdp .single_add_to_cart_button{flex:1 1 210px; border-radius:var(--r-sm);
  padding:17px 28px; font-size:17px; font-weight:700; background:var(--magenta);
  color:#fff; border:0; box-shadow:0 10px 26px -14px rgba(227,0,123,.7)}
@media(hover:hover){.rp-pdp .single_add_to_cart_button:hover{background:var(--magenta-press)}}
.rp-pdp .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button{
  opacity:.45; box-shadow:none; cursor:not-allowed}
.rp-pdp .pdp-trust{margin-top:20px}

/* Woo's sale flash is an olive oval by default. The gallery block ships its own
   `.woocommerce .wp-block-woocommerce-product-image-gallery span.onsale`, so the
   badge needs that reach to be recoloured at all. */
.rp-pdp .onsale,.rp-pgrid .wc-block-components-product-sale-badge,
.rp-pdp .wp-block-woocommerce-product-image-gallery span.onsale{position:absolute;
  top:14px; left:14px; right:auto; min-width:0; min-height:0; width:auto; height:auto;
  padding:5px 12px; border-radius:999px; background:var(--magenta); color:#fff;
  font-family:var(--sans); font-size:12.5px; font-weight:600; line-height:1;
  margin:0; display:inline-flex; align-items:center}
.rp-pdp .wp-block-woocommerce-product-meta{font-size:12.5px; color:var(--ink-3);
  margin-top:18px}
/* The «Описание» / «Детали» tabs under the fold. */
.rp-pdp .wc-tabs{list-style:none; display:flex; gap:26px; margin:0 0 22px; padding:0 0 12px;
  border-bottom:1px solid var(--line)}
.rp-pdp .wc-tabs li a{font-size:15px; font-weight:700; color:var(--ink-3)}
.rp-pdp .wc-tabs li.active a{color:var(--ink)}
.rp-pdp .pdp-spec-table{width:100%; border-collapse:collapse; margin-top:18px}
.rp-pdp .pdp-spec-table th{text-align:left; font-weight:400; color:var(--ink-3);
  font-size:14.5px; padding:14px 20px 14px 0; border-bottom:1px solid var(--line);
  width:38%}
.rp-pdp .pdp-spec-table td{font-size:14.5px; font-weight:600; padding:14px 0;
  border-bottom:1px solid var(--line)}
.rp-pdp .pdp-reg{font-family:var(--mono); font-size:12.5px; color:var(--ink-3);
  margin-top:18px}

/* ==========================================================================
   «ЗАКАЗ ПРИНЯТ»  (templates/order-confirmation.html)
   ========================================================================== */
.rp-thanks-in{padding-top:clamp(28px,4vw,48px); padding-bottom:clamp(40px,6vw,80px)}
.rp-thanks-in .wc-block-order-confirmation-status{font-size:clamp(1.85rem,3.9vw,2.6rem);
  font-weight:800; letter-spacing:-.03em; margin:0 0 10px}
.rp-thanks-in .woocommerce-order-overview,
.rp-thanks-in .wc-block-order-confirmation-summary{list-style:none; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px; margin:26px 0 0;
  padding:22px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r)}
.rp-thanks-in .wc-block-order-confirmation-summary li{font-size:15px; font-weight:700}
.rp-thanks-in h2{font-size:1.15rem; margin:34px 0 12px}
.rp-thanks-in table{width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.rp-thanks-in table th,.rp-thanks-in table td{padding:14px 18px;
  border-bottom:1px solid var(--line); text-align:left}
.rp-thanks-in table tfoot tr:last-child th,
.rp-thanks-in table tfoot tr:last-child td{font-size:18px; font-weight:800;
  border-bottom:none}
.rp-thanks-in table tfoot tr:last-child td{color:var(--magenta)}
.rp-thanks-in address{font-style:normal; font-size:14.5px; line-height:1.6;
  color:var(--ink-2); background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:18px 20px}
.rp-thanks-in .cs-note{margin-top:28px}

/* Each mini-cart line holds the picture TWICE: WooCommerce renders a bare <img>
   and then hydrates an <a><img></a> beside it rather than replacing it, and its
   own CSS sizes both, so the drawer showed two stacked thumbnails per product.
   Dropped only when the linked copy is actually present, so a page that never
   hydrates still shows a picture. */
.wc-block-mini-cart__products-table .wc-block-cart-item__image:has(> a) > img{
  display:none !important}

.wc-block-mini-cart__products-table .wc-block-components-product-name{font-family:var(--sans);
  font-size:15px; font-weight:700; color:var(--ink)}
.wc-block-mini-cart__products-table .wc-block-components-product-metadata__description{
  display:none}
.wc-block-mini-cart__products-table .wc-block-cart-item__total
  .wc-block-components-formatted-money-amount{font-size:16px; font-weight:800;
  font-variant-numeric:tabular-nums}
.wc-block-mini-cart__footer{border-top:1px solid var(--line)}
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label{font-size:16px;
  color:var(--ink-2)}
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value{font-size:20px;
  font-weight:800; color:var(--magenta); font-variant-numeric:tabular-nums}
.wc-block-mini-cart__footer-actions .wc-block-components-button{font-family:var(--sans);
  font-weight:700; font-size:15px; border-radius:var(--r-sm)}
.wc-block-mini-cart__footer-checkout{background:var(--magenta) !important; color:#fff !important;
  border-color:var(--magenta) !important}
.wc-block-mini-cart__footer-cart{background:transparent !important; color:var(--ink) !important;
  border:1px solid var(--line-2) !important}
.wc-block-mini-cart__items,.wc-block-mini-cart__products{overflow-x:hidden !important}

/* ==========================================================================
   WOOCOMMERCE · cart, checkout, order received
   --------------------------------------------------------------------------
   /cart/ and /checkout/ are the [woocommerce_cart] and [woocommerce_checkout]
   shortcodes now, inside `.wc-slot`. The design used to draw both out of a
   localStorage basket that could never become an order, so this section is not
   a skin over our own markup: it is the design's vocabulary (card surfaces on
   --line, magenta totals, .btn-buy) applied to WooCommerce's real classes.

   The checkout's two columns come from the regenique-checkout plugin, which
   wraps them in .rgqc-col-main and .rgqc-summary. Without that plugin active
   WooCommerce renders the gateway list and the pay button inside #order_review,
   and no CSS here can fix it — see the plugin's own header comment.
   ========================================================================== */
.wc-slot{margin-top:8px}
.wc-slot .woocommerce{color:var(--ink)}

/* 🔴 The commerce pages were 112px narrower than the rest of the site.
   woocommerce-blocktheme.css ships
     .woocommerce-{account,cart,checkout} main .woocommerce{max-width:1000px}
   which capped /cart/, /checkout/ and /my-account/ at 1000px inside a 1112px
   `.wrap`, so their content stopped short of the header, the breadcrumb, the H1
   and the footer, and the order summary lost 43px it had no reason to lose.
   That selector is (0,2,1) and Woo loads after us, so beating it needs three
   classes, not the obvious `.wc-slot .woocommerce`. */
.woocommerce-cart .wc-slot .woocommerce,
.woocommerce-checkout .wc-slot .woocommerce,
.woocommerce-account .wc-slot .woocommerce{max-width:none}

/* ---- shared surfaces ---- */
.wc-slot .shop_table{width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.wc-slot .shop_table th{font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); text-align:left; padding:14px 18px;
  border-bottom:1px solid var(--line)}
.wc-slot .shop_table td{padding:18px; border-bottom:1px solid var(--line); vertical-align:middle}
.wc-slot .shop_table tr:last-child td{border-bottom:none}
.wc-slot .woocommerce-Price-amount{font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---- WooCommerce's own buttons speak the design's button language ---- */
.wc-slot .button,.wc-slot button.button,.wc-slot a.button,.wc-slot .wp-element-button{
  font-family:var(--sans); font-weight:700; font-size:16px; letter-spacing:-.01em;
  border:1px solid transparent; border-radius:var(--r-sm); cursor:pointer;
  padding:14px 22px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--magenta); color:#fff; line-height:1.2;
  box-shadow:0 10px 26px -14px rgba(227,0,123,.7);
  transition:background .15s var(--ease), box-shadow .18s var(--ease)}
@media(hover:hover){.wc-slot .button:hover,.wc-slot button.button:hover,
  .wc-slot a.button:hover,.wc-slot .wp-element-button:hover{background:var(--magenta-press)}}
.wc-slot .button:disabled,.wc-slot .button[disabled]{opacity:.45; box-shadow:none; cursor:default}
/* «Обновить корзину» and «Применить купон» are secondary next to «Оформить заказ». */
.wc-slot button[name="update_cart"],.wc-slot .coupon .button{background:transparent;
  color:var(--ink); border-color:var(--line-2); box-shadow:none}
@media(hover:hover){.wc-slot button[name="update_cart"]:hover,
  .wc-slot .coupon .button:hover{border-color:var(--ink); background:#fff}}

/* ---- cart page ---- */
.wc-slot .woocommerce-cart-form{margin:0}
/* td.product-thumbnail img, not .cart_item img: WooCommerce's own rule is
   `.woocommerce table.shop_table td.product-thumbnail img`, and a looser
   selector loses to it — with max-width:100% still applying, the picture
   collapsed to 8px rather than merely staying Woo's size. */
.wc-slot table.shop_table td.product-thumbnail img{width:72px; max-width:none;
  height:auto; border-radius:var(--r-sm); background:var(--paper-2); display:block}
/* Let the name column take the slack. `width:1%` + nowrap is the auto-layout
   table idiom for "shrink to content"; `width:100%` on the name instead is a
   demand for the whole table, and it crushed the thumbnail column to 32px. */
.wc-slot .cart_item .product-thumbnail{width:88px}
.wc-slot .cart_item .product-price,.wc-slot .cart_item .product-quantity,
.wc-slot .cart_item .product-subtotal{width:1%; white-space:nowrap}
/* ...except neither rule above ever won. `width:1%` is only a hint to an
   auto-layout table, so the amounts still claimed ~118px each, and the 88px LOST
   OUTRIGHT to woocommerce-blocktheme.css's
   `.woocommerce-page .woocommerce-cart-form .product-thumbnail{width:120px}`:
   three classes each, identical specificity, decided by load order, and Woo
   loads after us. The name column was left 107px and wrapped over six lines.
   Fixed layout ends the argument - the thead widths below are the whole truth
   and nothing downstream can bid for a column. Measured against real content
   (price 89px, qty box 93px, subtotal 91px, + 16px padding); the name takes
   what is left, 180px. Mobile is unaffected: at <=700px the rows become a grid
   and table-layout stops applying. */
.wc-slot .woocommerce-cart-form__contents{table-layout:fixed}
.wc-slot .woocommerce-cart-form__contents th,
.wc-slot .woocommerce-cart-form__contents td{padding-left:8px; padding-right:8px}
/* 34px is the remove button (26px) plus its 8px of cell padding, and 80px is
   the 72px thumbnail plus the same — both were carrying slack the name column
   needed. Nothing here can clip: neither cell holds text. */
.wc-slot .woocommerce-cart-form__contents thead th.product-remove{width:34px}
.wc-slot .woocommerce-cart-form__contents thead th.product-thumbnail{width:80px}
/* Money columns sized for a real bulk order, not for the cart in front of you:
   30 x 50 мл is «105 000,00 ₽», which renders at 131px. 109px cut it off, and a
   cut-off total is silent because .wc-slot .shop_table is overflow:hidden. The
   checkout solves this with auto layout instead; here the layout has to stay
   fixed, because in auto mode woocommerce-blocktheme.css wins the thumbnail
   column back and the name drops to 109px. Ceiling is ~7 figures. */
.wc-slot .woocommerce-cart-form__contents thead th.product-price{width:108px}
.wc-slot .woocommerce-cart-form__contents thead th.product-quantity{width:105px}
.wc-slot .woocommerce-cart-form__contents thead th.product-subtotal{width:134px}
.wc-slot .cart_item .product-name a{font-size:16px; font-weight:700; color:var(--ink)}
@media(hover:hover){.wc-slot .cart_item .product-name a:hover{color:var(--magenta)}}
.wc-slot .cart_item .product-name .variation{margin:5px 0 0; font-size:13px; color:var(--ink-3);
  display:flex; flex-wrap:wrap; gap:2px 10px}
.wc-slot .cart_item .product-name .variation dt,
.wc-slot .cart_item .product-name .variation dd{margin:0; display:inline}
.wc-slot .cart_item .product-name .variation dd p{margin:0; display:inline}
.wc-slot .product-subtotal,.wc-slot .product-total{font-weight:800; font-size:17px;
  white-space:nowrap; text-align:right}
.wc-slot .product-remove{width:34px}
.wc-slot .product-remove a.remove{display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:999px; font-size:18px; line-height:1;
  color:var(--ink-3); background:var(--paper-2)}
@media(hover:hover){.wc-slot .product-remove a.remove:hover{background:var(--magenta); color:#fff}}
.wc-slot .quantity input.qty{width:66px; height:42px; text-align:center; font-weight:700;
  font-size:16px; font-variant-numeric:tabular-nums; background:#fff; color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-sm)}
.wc-slot td.actions{background:var(--paper-2)}
.wc-slot td.actions .coupon{display:inline-flex; gap:10px; flex-wrap:wrap; margin-right:12px}
.wc-slot td.actions .coupon input[type="text"]{width:190px; padding:13px 15px; font:inherit;
  font-size:15px; background:#fff; border:1px solid var(--line-2); border-radius:var(--r-sm)}

/* Totals: the design's summary card, sticky beside the list. The approved cart
   is two columns; WooCommerce stacks them and floats .cart-collaterals right at
   48%, which left half the page empty under the list. Scoped to the cart page
   because /checkout/ has its own two-column split. */
/* 1.5fr / .75fr left the item list 709px of the 1112px slot, and inside a fixed
   table that is only 233px for the product name — «Репарин-Хелпер® Капли для
   глаз — 5 мл» wrapped to four lines. Tony, 2026-08-06: «The cart also has the
   same squished mini cart as the checkout». Page-level alignment is NOT the
   cause this time: measured at 1745px, the header icon and the cart content
   both end at 1422, offBy 0. It really is the split.
   The totals card holds four short rows and a button, so it gives width back:
   1.85fr / .75fr puts the list at ~775px and the name column at ~300px.
   The money columns are NOT trimmed to find that room — they are sized for
   «105 000,00 ₽» and the table is overflow:hidden, so a narrower one clips a
   six-figure total in silence. Same reason the layout stays `fixed` here: in
   auto mode woocommerce-blocktheme.css wins the thumbnail column back. */
.page-cart .wc-slot .woocommerce{display:grid;
  grid-template-columns:minmax(0,1.85fr) minmax(0,.75fr);
  gap:clamp(24px,3.4vw,40px); align-items:start}
.page-cart .wc-slot .woocommerce-notices-wrapper{grid-column:1/-1}
/* Woo floats BOTH of these right at 48%, so resetting only the outer one left
   the card sitting in the right half of its own column. */
.wc-slot .cart-collaterals{float:none; width:auto; margin:0; position:sticky; top:96px}
.wc-slot .cart-collaterals .cart_totals{float:none; width:auto; border:1px solid var(--line-2);
  border-radius:var(--r); background:var(--card); padding:clamp(20px,2.6vw,26px)}
.wc-slot .cart_totals h2{font-size:1.15rem; margin:0 0 8px}
.wc-slot .cart_totals .shop_table{border:0; border-radius:0; background:transparent}
.wc-slot .cart_totals .shop_table th{text-transform:none; letter-spacing:0; font-size:15px;
  font-weight:400; color:var(--ink-2); padding:12px 0; vertical-align:top}
.wc-slot .cart_totals .shop_table td{text-align:right; font-size:14px; padding:12px 0}
.wc-slot .cart_totals .order-total th{font-size:19px; font-weight:800; color:var(--ink);
  border-bottom:none}
.wc-slot .cart_totals .order-total td{font-size:19px; font-weight:800; color:var(--magenta);
  border-bottom:none}
.wc-slot .woocommerce-shipping-methods{list-style:none; margin:0; padding:0}
.wc-slot .woocommerce-shipping-destination,
.wc-slot .woocommerce-shipping-calculator{font-size:12.5px; color:var(--ink-3)}
.wc-slot .wc-proceed-to-checkout{margin-top:18px}
.wc-slot .wc-proceed-to-checkout .checkout-button{width:100%; padding:17px 30px; font-size:17px}
.wc-slot .return-to-shop{margin-top:22px}
.wc-slot .cart-empty,.wc-slot .wc-empty-cart-message{font-size:1.15rem; color:var(--ink-2)}

/* ---- checkout ---- */
/* .9fr, not .8fr: the summary holds a thumb, a two-line product name and a price
   in one row, and at .8fr the name had 95px of text to live in. */
.wc-slot form.checkout{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,48px); align-items:start}
.wc-slot .rgqc-summary{position:sticky; top:96px; border:1px solid var(--line-2);
  border-radius:var(--r); background:var(--card); padding:clamp(20px,2.6vw,26px)}
.wc-slot #order_review_heading{font-size:1.15rem; margin:0 0 14px}
.wc-slot .woocommerce-billing-fields h3,.wc-slot .rgqc-payment-title,
.wc-slot .woocommerce-additional-fields h3{font-size:1.15rem; margin:0 0 4px}
.wc-slot .woocommerce-billing-fields,.wc-slot .woocommerce-additional-fields{margin-top:30px}
.wc-slot .rgqc-payment + #customer_details .woocommerce-billing-fields{margin-top:34px}
/* Woo floats the two halves of #customer_details side by side. The order note
   belongs UNDER the address, not beside it: at this column width the pair was
   two ~250px columns of half-width inputs. */
.wc-slot #customer_details.col2-set{display:block}
.wc-slot #customer_details .col-1,.wc-slot #customer_details .col-2{float:none; width:auto}
/* «Доставка по другому адресу?» is a checkbox WooCommerce wraps in an <h3>, so
   it inherited the 47px section-heading size and towered over the form. */
.wc-slot #ship-to-different-address{font-size:15.5px; font-weight:600; margin:24px 0 0;
  letter-spacing:0; line-height:1.4}
.wc-slot #ship-to-different-address label{display:flex; gap:11px; align-items:center;
  margin:0; font-size:15.5px; color:var(--ink); cursor:pointer}
.wc-slot #ship-to-different-address input{accent-color:var(--magenta); width:auto; margin:0}

/* The field vocabulary is the design's .field, expressed on WooCommerce's
   p.form-row. form-row-first/last is the two-up row .field-2 used to be. */
.wc-slot .form-row{margin:16px 0 0; display:block}
.wc-slot .form-row label{display:block; font-size:13.5px; color:var(--ink-2); margin-bottom:6px}
.wc-slot .form-row .required{color:var(--magenta); text-decoration:none; border:0}
.wc-slot .form-row input.input-text,.wc-slot .form-row textarea,
.wc-slot .form-row select,.wc-slot .select2-container .select2-selection{
  width:100%; padding:13px 15px; font:inherit; font-size:15.5px; background:#fff;
  border:1px solid var(--line-2); border-radius:var(--r-sm); color:var(--ink)}
.wc-slot .form-row input.input-text:focus,.wc-slot .form-row textarea:focus,
.wc-slot .form-row select:focus{outline:2px solid var(--blue); outline-offset:1px;
  border-color:transparent}
.wc-slot .form-row textarea{min-height:96px}
.wc-slot .form-row.woocommerce-invalid input.input-text{border-color:var(--magenta)}
@media(min-width:641px){
  .wc-slot #customer_details .col-1{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
  .wc-slot .form-row-first{grid-column:1}
  .wc-slot .form-row-last{grid-column:2}
  .wc-slot .form-row-wide,.wc-slot .woocommerce-billing-fields,
  .wc-slot .woocommerce-additional-fields,.wc-slot .col-1 > h3{grid-column:1/-1}
}
/* The address suggestion list has to escape the field, so the row it sits in
   cannot be the containing block's only positioned ancestor by accident. */
.wc-slot .form-row{position:relative}

/* Gateways reuse the design's .opt radio card. */
.wc-slot .wc_payment_methods{list-style:none; margin:10px 0 0; padding:0}
.wc-slot .wc_payment_methods li{display:block; padding:15px 17px; border:1px solid var(--line-2);
  border-radius:var(--r-sm); background:#fff; margin-top:10px;
  transition:border-color .15s var(--ease), background .15s var(--ease)}
.wc-slot .wc_payment_methods li:has(input:checked){border-color:var(--magenta);
  background:var(--magenta-soft)}
.wc-slot .wc_payment_methods input[type="radio"]{accent-color:var(--magenta); margin-right:8px}
.wc-slot .wc_payment_methods label{display:inline; font-size:15.5px; font-weight:600;
  color:var(--ink); margin:0}
.wc-slot .payment_box{font-size:13px; color:var(--ink-3); margin:8px 0 0; line-height:1.5}
.wc-slot .payment_box p{margin:0}

/* Order summary table inside the sticky card: no card-in-a-card.

   table-layout is FIXED on purpose. One table carries both the item rows and the
   totals rows, and the totals cells are unclassed <th>/<td> — so `width:1%` below
   only ever reached `.product-total` and, under auto layout, the longest string in
   column 2 («Рассчитывается при подтверждении заказа») sized the whole column to
   138 of 292px. That starved the item name to 95px of text and wrapped it over
   five lines. Fixed layout pins column 2 to the price it actually has to show and
   gives the rest to the product; the shipping note wraps instead. */
.wc-slot #order_review .shop_table{border:0; border-radius:0; background:transparent}
.wc-slot #order_review tfoot td{white-space:normal}
/* THE fix for the squeezed item name, and the whole of it. One table carries the
   item rows and the totals rows, and «Рассчитывается при подтверждении заказа»
   sat in the totals column inheriting 17px/700 - that one word is 138px wide, so
   it alone sized the column and left the product name 95px of text over five
   lines. It is a note, not an amount; sized and coloured as the aside it is, the
   column falls back to what the money actually needs and the name takes the rest.

   Deliberately NOT table-layout:fixed. That was tried and shipped in 0.1.24-25
   and it is a trap: a fixed money column has to be guessed ahead of the largest
   total the shop will ever show, and the guess loses silently because
   `.wc-slot .shop_table` sets overflow:hidden for its border radius, so an
   over-long amount is CUT OFF rather than spilling. 112px was measured against
   «15 750,00 ₽» and still clipped a real two-item cart at «11 520,00 ₽», because
   the thousands separator is a non-breaking space that renders wider than the
   plain space a synthetic probe measures. Auto layout asks the amount how much
   room it needs, every time, and cannot clip. */
.wc-slot #order_review .woocommerce-shipping-totals td{font-size:13px; font-weight:500;
  line-height:1.35; color:var(--ink-3)}
.wc-slot #order_review .shop_table th,.wc-slot #order_review .shop_table td{padding:11px 0}
.wc-slot #order_review .shop_table thead th{padding-top:0}
.wc-slot #order_review .cart_item .product-name{font-size:14.5px; color:var(--ink-2);
  line-height:1.4}
.wc-slot #order_review .product-total{font-size:15px; font-weight:700; width:1%;
  white-space:nowrap; text-align:right}
.wc-slot #order_review .order-total th{font-size:19px; font-weight:800; color:var(--ink);
  border-bottom:none}
.wc-slot #order_review .order-total td{font-size:19px; font-weight:800; color:var(--magenta);
  border-bottom:none}
/* The plugin rebuilds each summary line as thumb + name + unit price so the
   classic summary matches the block one. Laid out as a grid, because the name
   is a bare text node between two spans and only a grid can put it in a cell. */
.wc-slot #order_review td.product-name{display:grid;
  grid-template-columns:auto minmax(0,1fr); gap:2px 12px; align-items:center}
.wc-slot .rgqc-thumb{grid-row:1/3; position:relative; line-height:0}
.wc-slot .rgqc-thumb img{width:48px; height:auto; border-radius:var(--r-sm);
  background:var(--paper-2); display:block}
.wc-slot .rgqc-qty{position:absolute; top:-7px; right:-7px; min-width:19px; height:19px;
  padding:0 5px; background:var(--ink); color:#fff; border-radius:999px; font-size:11px;
  font-weight:700; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--card)}
.wc-slot .rgqc-unit{grid-column:2; font-size:12.5px; color:var(--ink-3)}
.wc-slot .rgqc-coupon-toggle{font-size:13.5px; font-weight:700; color:var(--blue-ink)}
.wc-slot .rgqc-coupon-panel{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.wc-slot .rgqc-coupon-code{flex:1 1 120px; padding:11px 13px; font:inherit; font-size:14px;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-sm)}
.wc-slot .rgqc-coupon-msg{flex:1 1 100%; font-size:12.5px; color:var(--ink-3)}

.wc-slot .rgqc-place-order{margin-top:18px}
.wc-slot #place_order{width:100%; padding:17px 30px; font-size:17px}
/* 152-ФЗ consent. WooCommerce renders and VALIDATES this, which is why the page
   no longer carries a hand-rolled checkbox of its own. */
.wc-slot .woocommerce-terms-and-conditions-wrapper{font-size:13px; color:var(--ink-3);
  line-height:1.5; margin-bottom:14px}
.wc-slot .woocommerce-terms-and-conditions-wrapper a{color:var(--blue-ink);
  border-bottom:1px solid var(--blue-line)}
.wc-slot .woocommerce-terms-and-conditions-wrapper .form-row{margin-top:12px}
.wc-slot .woocommerce-form__label-for-checkbox{display:flex; gap:11px; align-items:flex-start}
.wc-slot .woocommerce-form__input-checkbox{accent-color:var(--magenta); margin-top:2px}
/* The terms box inlines the WHOLE oferta page, breadcrumb and page hero
   included, because WooCommerce simply prints that page's content. Keep the
   text, drop the chrome that only makes sense on the page itself. */
.wc-slot .woocommerce-terms-and-conditions{max-height:220px; overflow-y:auto;
  border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px;
  margin-top:12px; background:var(--paper-2); font-size:12.5px}
.wc-slot .woocommerce-terms-and-conditions .crumb,
.wc-slot .woocommerce-terms-and-conditions .doc-head,
.wc-slot .woocommerce-terms-and-conditions .phero{display:none}
.wc-slot .woocommerce-terms-and-conditions .wrap{width:auto; padding:0; max-width:none}

/* ---- notices ---- */
.wc-slot .woocommerce-message,.wc-slot .woocommerce-info,.wc-slot .woocommerce-error,
.wc-slot .woocommerce-notice{list-style:none; margin:0 0 18px; padding:14px 18px;
  border-radius:var(--r-sm); font-size:14.5px; background:var(--blue-soft);
  color:var(--blue-ink); border:1px solid var(--blue-line)}
.wc-slot .woocommerce-error{background:var(--magenta-soft); color:var(--magenta);
  border-color:var(--magenta)}
.wc-slot .woocommerce-error li,.wc-slot .woocommerce-message li{margin:0}

@media(max-width:980px){
  .wc-slot form.checkout,.page-cart .wc-slot .woocommerce{grid-template-columns:1fr}
  .wc-slot .rgqc-summary,.wc-slot .cart-collaterals{position:static}
}
@media(max-width:700px){
  /* shop_table_responsive: WooCommerce relabels each cell from data-title. */
  .wc-slot .woocommerce-cart-form__contents thead{display:none}
  .wc-slot .woocommerce-cart-form__contents tr{display:grid;
    grid-template-columns:88px minmax(0,1fr) auto; gap:6px 14px; padding:16px;
    border-bottom:1px solid var(--line)}
  .wc-slot .woocommerce-cart-form__contents td{border:0; padding:0}
  .wc-slot .cart_item .product-thumbnail{grid-row:1/3}
  .wc-slot .cart_item .product-name{grid-column:2/4}
  .wc-slot .cart_item .product-price{display:none}
  .wc-slot .cart_item .product-remove{grid-column:3; grid-row:1}
  .wc-slot td.actions{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- forms */
.field{margin-top:16px}
.field label{display:block; font-size:13.5px; color:var(--ink-2); margin-bottom:6px}
.field input,.field textarea,.field select{width:100%; padding:13px 15px; font:inherit;
  font-size:15.5px; background:#fff; border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--blue);
  outline-offset:1px; border-color:transparent}
.field-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.opt{display:flex; gap:12px; align-items:flex-start; padding:15px 17px; border:1px solid var(--line-2);
  border-radius:var(--r-sm); background:#fff; cursor:pointer; margin-top:10px;
  transition:border-color .15s var(--ease), background .15s var(--ease)}
.opt input{margin-top:3px; accent-color:var(--magenta)}
.opt b{display:block; font-size:15.5px}
.opt span{display:block; font-size:13px; color:var(--ink-3); margin-top:3px; line-height:1.4}
.opt:has(input:checked){border-color:var(--magenta); background:var(--magenta-soft)}
.consent{display:flex; gap:11px; align-items:flex-start; margin-top:20px; font-size:13px;
  color:var(--ink-3); line-height:1.5}
.consent input{margin-top:2px; accent-color:var(--magenta)}
.consent a{color:var(--blue-ink); border-bottom:1px solid var(--blue-line)}

/* ---------------------------------------------------------------- papers & docs */
.paper-list{display:flex; flex-direction:column; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.paper{background:var(--card); padding:22px 24px; display:grid;
  grid-template-columns:44px minmax(0,1fr); gap:18px; align-items:start}
.paper-n{font-family:var(--mono); font-size:12px; color:var(--ink-3); padding-top:3px}
.paper h3{font-size:1.05rem; line-height:1.3}
.paper p{font-size:14px; line-height:1.55; color:var(--ink-2); margin-top:8px; max-width:74ch}
/* Journal + year, under the title. Renders only when data.PAPERS carries a
   `cite`, which none of them do yet — see the note above data.PAPERS. */
.paper-cite{font-family:var(--mono); font-size:11.5px; letter-spacing:.03em;
  color:var(--blue-ink); margin-top:6px}

/* ------------------------------------------------------------ contact form head
   base.css styles this label as `.email-cap .ec-lbl`, because on the homepage
   the form lives in an `.email-cap`. shell.contact_form() emits the same
   `.ec-lbl` everywhere, so on /vets, /company and /pharmacontrol — where the
   form sits in a `.form-card` — the flex row and its 9px gap never applied and
   the mail icon butted straight against the text. Tony, 2026-08-06: «this
   contact form text is too close to the mail icon». Unscoped here rather than
   in base.css, which is generated from flagship-v2. */
.ec-lbl{font-weight:700; font-size:15px; display:flex; align-items:center; gap:10px}
.ec-lbl svg{color:var(--blue); flex:none}
.form-card .ec-lbl{font-size:16px}
.form-card .ec-lbl + p{margin-top:8px; font-size:14px; color:var(--ink-2); line-height:1.55}

/* -------------------------------------------------------- WooCommerce notices
   «Вы отложили «Репарин-Хелпер® Спрей для ран и рта» в свою корзину.» is
   printed by `woocommerce_output_all_notices` straight into the template, OUTSIDE
   any `.wrap`, so it started at the left edge of a full-bleed page while every
   other thing on it started at the content edge. Tony, 2026-08-06: «is not being
   left adjusted - so its all the way on left side of full width page».
   Only notices that are NOT already inside a wrap are re-wrapped; the cart and
   checkout print theirs inside `.wc-slot`, which is already in the column. */
.rp-main > .woocommerce-notices-wrapper,
.rp-main > .woocommerce-message,
.rp-main > .woocommerce-info,
.rp-main > .woocommerce-error,
.woocommerce > .woocommerce-notices-wrapper:not(.wc-slot *){
  max-width:var(--wrap); margin-inline:auto;
  padding-left:var(--pad); padding-right:var(--pad); box-sizing:border-box}
.rp-main > .woocommerce-notices-wrapper:empty{padding:0}

/* ---------------------------------------------------------- empty cart upsell
   functions.php renders the two products on `woocommerce_cart_is_empty`, so an
   empty basket offers the catalogue rather than linking to it. */
.cart-empty-upsell{margin-top:clamp(26px,3.4vw,40px); padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--line)}
.cart-empty-upsell h2{font-size:clamp(1.2rem,2vw,1.55rem); letter-spacing:-.02em}
.ce-lede{margin-top:8px; font-size:14.5px; color:var(--ink-2); max-width:56ch}
.ce-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,20px); margin-top:clamp(18px,2.4vw,24px)}
.ce-card{display:flex; gap:16px; align-items:center; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); padding:16px 18px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease)}
@media(hover:hover){.ce-card:hover{border-color:var(--line-2); box-shadow:var(--sh-1)}}
.ce-media{flex:none; width:76px; height:76px; border-radius:var(--r-sm);
  background:var(--paper-2); display:grid; place-items:center; overflow:hidden}
.ce-media img{width:100%; height:100%; object-fit:contain; display:block}
.ce-txt{display:flex; flex-direction:column; gap:4px; min-width:0}
.ce-txt b{font-size:15.5px; line-height:1.3; color:var(--ink)}
.ce-price{font-size:14px; font-weight:700; color:var(--magenta);
  font-variant-numeric:tabular-nums}
.ce-price del{font-weight:400; color:var(--ink-3); font-size:.9em}
.ce-price ins{text-decoration:none}
.ce-go{font-size:13px; font-weight:700; color:var(--blue-ink); margin-top:2px}
.ce-help{margin-top:16px; font-size:14px}
.ce-help a{color:var(--blue-ink); font-weight:700}
@media(max-width:640px){.ce-grid{grid-template-columns:1fr}}

/* =========================================================================
   /my-account/ (Tony, 2026-08-06)
   Page 247 shipped as a bare [woocommerce_my_account] with no `.wrap`, so the
   login form began at x=0 on a full-bleed <main> — 310px left of every other
   page's content edge — and the page was Woo's default markup with nothing of
   the design on it. pages_shop.my_account() supplies the crumb, hero and column;
   these rules give Woo's own output the site's surfaces.
   ========================================================================= */
.ma-grid{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,.8fr);
  gap:clamp(22px,3.4vw,44px); align-items:start}
.ma-main .woocommerce{background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(24px,3vw,34px)}
.ma-main h2{font-size:clamp(1.15rem,1.9vw,1.45rem); letter-spacing:-.02em; margin:0 0 6px}
.ma-main .woocommerce-form-login__submit,
.ma-main .woocommerce-Button{margin-top:6px}
/* Woo's login inputs are unstyled browser fields; match the contact form. */
.ma-main .woocommerce-form-row{margin-top:16px}
.ma-main label{display:block; font-size:13px; font-weight:600; color:var(--ink-2);
  margin-bottom:6px}
.ma-main input[type="text"],.ma-main input[type="email"],
.ma-main input[type="password"],.ma-main input[type="tel"]{width:100%;
  padding:13px 15px; font:inherit; font-size:15px; background:#fff; color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-sm); box-sizing:border-box}
.ma-main input:focus-visible{border-color:var(--blue)}
.ma-main .woocommerce-form-login__rememberme{font-size:13.5px; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:8px; margin:14px 0 0}
.ma-main .woocommerce-LostPassword{margin-top:12px; font-size:13.5px}
.ma-main .woocommerce-LostPassword a{color:var(--blue-ink); font-weight:600}
/* The logged-in view. 2026-08-07: «the selectiosn should still be in a column -
   like original - and not round pills - we dont use that roundness on the site».
   Both were true: the <ul> was flex-wrap:wrap in a ROW and every link was
   border-radius:999px, so nine account sections read as a bag of tags across the
   top instead of the sidebar WooCommerce ships. It is a real two-column screen
   now — nav rail left, content right — and the rail uses --r-sm, the same radius
   as every button on the site. 999px is reserved for small chips. */
.ma-main .woocommerce-MyAccount-navigation{float:none; width:auto}
.ma-main .woocommerce{display:grid; grid-template-columns:minmax(0,208px) minmax(0,1fr);
  gap:clamp(20px,2.6vw,32px); align-items:start}
/* The login form is a single column: only the account screen is two-up. */
.ma-main .woocommerce:not(:has(.woocommerce-MyAccount-navigation)){display:block}
/* Placement is EXPLICIT, not auto. Measured on the live page: with both items on
   `grid-column:auto` the content landed in column 1 and the nav in column 2, and
   Woo's own `width:68%` then sized the content to 141px of a 208px track. Pinning
   the two cells and resetting the width is what makes this deterministic. */
.ma-main .woocommerce-MyAccount-navigation{grid-column:1; grid-row:1}
.ma-main .woocommerce-MyAccount-content{grid-column:2; grid-row:1; width:auto; float:none}
/* Logged in, the account screen takes the whole content column: inside .ma-grid's
   1.7fr it had 420px, and an orders table does not fit in 420px. The aside drops
   below as a row of cards instead of a rail. */
.ma-grid:has(.woocommerce-MyAccount-navigation){grid-template-columns:1fr}
.ma-grid:has(.woocommerce-MyAccount-navigation) .ma-aside{position:static;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.ma-main .woocommerce-MyAccount-navigation ul{list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:2px}
.ma-main .woocommerce-MyAccount-navigation li a{display:flex; align-items:center;
  padding:10px 14px; border-radius:var(--r-sm); background:transparent;
  color:var(--ink-2); font-size:14px; font-weight:600; line-height:1.3;
  transition:background .14s var(--ease), color .14s var(--ease)}
@media(hover:hover){.ma-main .woocommerce-MyAccount-navigation li a:hover{
  background:var(--paper-2); color:var(--ink)}}
.ma-main .woocommerce-MyAccount-navigation li.is-active a{background:var(--magenta);
  color:#fff}
.ma-main .woocommerce-MyAccount-content{margin:0; padding:0; border-top:0;
  min-width:0}
/* Below the two-column breakpoint the rail goes back on top, still a column but
   scrollable, so it never eats the whole first screen. */
@media(max-width:760px){
  .ma-main .woocommerce{grid-template-columns:1fr}
  .ma-main .woocommerce-MyAccount-navigation{padding-bottom:18px;
    border-bottom:1px solid var(--line); margin-bottom:18px}
  .ma-main .woocommerce-MyAccount-navigation ul{flex-direction:row; flex-wrap:wrap;
    gap:6px}
  .ma-main .woocommerce-MyAccount-navigation li a{background:var(--paper-2);
    padding:9px 13px; font-size:13.5px}
}

.ma-aside{display:flex; flex-direction:column; gap:clamp(14px,1.8vw,18px);
  position:sticky; top:96px}
.ma-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,2.4vw,26px)}
.ma-card--soft{background:var(--blue-soft); border-color:var(--blue-line)}
.ma-card h3{font-size:1.02rem; letter-spacing:-.01em}
.ma-card p{margin-top:10px; font-size:14px; line-height:1.55; color:var(--ink-2)}
.ma-card--soft p{color:var(--blue-ink)}
.ma-list{list-style:none; margin:14px 0 0; padding:0; display:flex;
  flex-direction:column; gap:11px}
.ma-list li{display:flex; gap:11px; align-items:flex-start; font-size:14px;
  line-height:1.5; color:var(--ink-2)}
.ma-list li svg{flex:none; color:var(--magenta); margin-top:3px}
.ma-contact{display:flex; flex-direction:column; gap:4px; margin-top:14px}
.ma-contact a{color:var(--blue-ink); font-weight:700}
@media(max-width:900px){
  .ma-grid{grid-template-columns:1fr}
  .ma-aside{position:static}
}

/* =========================================================================
   /checkout/ — chrome-free (Tony, 2026-08-06)
   templates/page-checkout.html drops both template parts, so this page has no
   header to push the content down and no footer to close it. The padding the
   header used to supply is put back here, and the buy bar is belt-and-braced
   off in case the page ever falls back to templates/page.html.
   ========================================================================= */
.rp-checkout{padding-top:clamp(28px,4vw,56px); padding-bottom:clamp(40px,6vw,80px)}
.co-only{padding-top:0}
.co-h1{font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.03em;
  margin-bottom:clamp(20px,2.6vw,30px)}
/* The cold-chain answer, immediately above «Оформить заказ». Tony, 2026-08-07:
   «we need to overome the final objection of how will it be delivered at room
   temperature». Rendered by reparin_checkout_cold_chain() on
   woocommerce_review_order_after_payment. */
.co-chain{display:flex; gap:14px; align-items:flex-start; margin-top:18px;
  background:var(--blue-soft); border:1px solid var(--blue-line);
  border-radius:var(--r); padding:18px 20px}
.co-chain-i{flex:none; color:var(--blue); display:flex; margin-top:1px}
.co-chain b{display:block; font-size:15px; letter-spacing:-.01em}
.co-chain p{margin-top:6px; font-size:13.5px; line-height:1.55; color:var(--ink-2)}
@media(max-width:600px){.co-chain{padding:16px; gap:12px}}
/* ------------------------------------------------- /action, the four roles
   The four cytokine roles used to be four rows of text in a .paper-list. They
   are four STAGES of one wound closing, which is a thing to show, so each row
   now carries its own frame of the sequence. Two per row on desktop, so the
   four frames read left-to-right, top-to-bottom as a progression. */
.role-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,26px)}
.role{position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column}
.role .paper-n{position:absolute; top:14px; left:16px; z-index:1; padding:3px 8px;
  border-radius:999px; background:rgba(255,255,255,.86); backdrop-filter:blur(3px)}
.role-fig{margin:0; background:var(--paper-2); aspect-ratio:1/1; overflow:hidden}
.role-fig img{width:100%; height:100%; object-fit:cover; display:block}
.role-txt{padding:20px 22px 22px}
.role-txt h3{font-size:1.05rem; line-height:1.3}
.role-cyt{font-family:var(--mono); font-size:12.5px; color:var(--blue-ink); margin-top:6px}
.role-txt > p:last-child{font-size:14px; line-height:1.55; color:var(--ink-2); margin-top:10px}
@media(max-width:760px){.role-grid{grid-template-columns:1fr}}
.doc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:clamp(14px,2vw,18px)}
.doc-c{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 22px; display:flex; flex-direction:column; gap:8px}
.doc-c .k{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue-ink)}
.doc-c b{font-size:15.5px; line-height:1.3}
.doc-c span{font-size:13px; color:var(--ink-3); line-height:1.45}
.doc-c .link-go{margin-top:auto; padding-top:12px; font-size:13.5px}
/* The one document we do not have a file for yet reads as pending instead of
   pretending to be a download. Remove this row's fallback once the МВА пособие
   PDF lands and it becomes a normal .link-go. */
.doc-c .doc-soon{margin-top:auto; padding-top:12px; font-size:12px; font-family:var(--mono);
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}

/* ---------------------------------------------------------------- blog */
.blog-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(16px,2.2vw,24px)}
.post{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 24px; display:flex; flex-direction:column; gap:10px;
  transition:box-shadow .25s var(--ease), border-color .25s var(--ease)}
@media(hover:hover){.post:hover{box-shadow:var(--sh-2); border-color:var(--line-2)}}
.post[hidden]{display:none}
.post-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.post-date{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
.post h3{font-size:1.08rem; line-height:1.28}
.post p{font-size:14px; line-height:1.55; color:var(--ink-2)}
.post .link-go{margin-top:auto; padding-top:6px; font-size:13.5px}

/* ---- /blog/, the real posts index (templates/home.html, not blog.html)
   The entries were bare: image, title, excerpt, date, with nothing to mark
   where one post ended and the next began, so a 36px gap between two
   borderless columns read as no spacing at all. Tony, 2026-08-06: «will likely
   need some more formatting ... to see between post spacing». Each entry
   becomes the same card the rest of the site uses, and the page shows 15
   instead of 12 so the grid fills five even rows. */
.rp-blog .rp-post-grid{align-items:stretch}
.rp-blog .rp-post-grid > li{background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column;
  padding:0 0 20px; transition:box-shadow .25s var(--ease), border-color .25s var(--ease)}
@media(hover:hover){.rp-blog .rp-post-grid > li:hover{box-shadow:var(--sh-2);
  border-color:var(--line-2)}}
.rp-blog .rp-post-grid > li > *:not(.wp-block-post-featured-image){
  padding-left:20px; padding-right:20px}
.rp-blog .rp-post-grid .wp-block-post-featured-image{margin:0 0 4px;
  background:var(--paper-2)}
.rp-blog .rp-post-grid .wp-block-post-featured-image img{width:100%; height:100%;
  object-fit:cover; display:block}
.rp-blog .rp-post-grid .wp-block-post-title{font-size:1.06rem; line-height:1.3;
  letter-spacing:-.01em}
.rp-blog .rp-post-grid .wp-block-post-title a{color:var(--ink)}
@media(hover:hover){.rp-blog .rp-post-grid .wp-block-post-title a:hover{color:var(--magenta)}}
.rp-blog .rp-post-grid .wp-block-post-excerpt{font-size:14px; line-height:1.55;
  color:var(--ink-2)}
.rp-blog .rp-post-grid .wp-block-post-excerpt__more-text{display:none}
.rp-blog .rp-post-grid .wp-block-post-date{margin-top:auto; font-family:var(--mono);
  font-size:11.5px; color:var(--ink-3)}
.rp-blog{padding-bottom:clamp(48px,7vw,96px)}

/* ---------------------------------------------------------------- vets / B2B */
.doc-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:clamp(16px,2.2vw,22px)}
.dq{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 26px; display:flex; flex-direction:column}
.dq-q{font-family:var(--serif); font-size:16.5px; line-height:1.55; color:var(--ink)}
.dq-who{margin-top:auto; padding-top:18px; display:flex; gap:13px; align-items:center}
.dq-who img{width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:50% 22%}
.dq-av{width:52px; height:52px; border-radius:50%; background:var(--blue-soft); color:var(--blue-ink);
  display:grid; place-items:center; font-weight:800; font-size:16px; flex:none}
.dq-who b{display:block; font-size:14.5px}
.dq-who span{display:block; font-size:12.5px; color:var(--ink-3); line-height:1.4; margin-top:3px}
.dq-extra{margin-top:12px; font-size:13px; color:var(--blue-ink); font-weight:600}

/* The monogram stands in for the four vets who have no photograph on file. It
   was one letter on a flat blue disc; two initials in the brand gradient read
   as a deliberate placeholder rather than a broken avatar, and it lines up with
   the two real portraits beside it. Tony, 2026-08-06 — real photos later. */
.dq-av{background:linear-gradient(140deg,var(--blue-soft),var(--magenta-soft));
  color:var(--blue-ink); font-size:15px; letter-spacing:.02em;
  border:1px solid var(--blue-line); font-variant-numeric:normal}
.dq--wide .dq-av{font-size:17px}

/* The condition pages run ONE quote the full width of the page, with the
   doctor-materials note below it as a note rather than a second fake quote.
   The quote gets a wider measure so a single card does not become one long
   line of serif text. */
.dq--wide{padding:clamp(26px,3vw,34px) clamp(28px,3.4vw,38px)}
.dq--wide .dq-q{font-size:clamp(17px,1.6vw,20px); max-width:62ch}
.dq--wide .dq-who{margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
.dq--wide .dq-who img,.dq--wide .dq-av{width:60px; height:60px}

.doc-mat{margin-top:clamp(14px,1.8vw,18px); background:var(--blue-soft);
  border:1px solid var(--blue-line); border-radius:var(--r);
  padding:clamp(22px,2.6vw,28px) clamp(24px,3vw,32px)}
.doc-mat-h{display:flex; gap:13px; align-items:center}
.doc-mat-mark{flex:none; width:34px; height:34px; border-radius:50%; background:var(--blue);
  color:#fff; display:grid; place-items:center}
.doc-mat-h b{display:block; font-size:15.5px; line-height:1.3}
.doc-mat-h span{display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px}
.doc-mat > p{margin-top:16px; font-size:14.5px; line-height:1.6; color:var(--blue-ink);
  max-width:80ch}
.doc-mat-links{display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:18px}

.inst{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden}
/* Same 4 + 2 as .sym-grid, on /company «Клиники, зоопарки и цирк» (6 items).
   /vets renders NINE here and lands on 4 + 4 + 1; three tracks would suit it
   too, but Tony only named the six-item case, so that one is flagged, not
   changed. */
.inst:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){
  .inst:has(> :nth-child(6):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .inst:has(> :nth-child(6):last-child){grid-template-columns:1fr}
}
.inst-i{background:var(--paper); padding:22px 24px}
.inst-i b{display:block; font-size:15.5px; line-height:1.3}
.inst-i span{display:block; font-size:13px; color:var(--ink-2); margin-top:7px; line-height:1.45}

.terms{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(14px,2vw,20px)}
.term{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px}
.term .n{font-family:var(--mono); font-size:11.5px; color:var(--blue-ink); letter-spacing:.08em;
  text-transform:uppercase}
.term b{display:block; font-size:1.05rem; margin-top:10px}
.term p{font-size:14px; line-height:1.55; color:var(--ink-2); margin-top:8px}

/* ---------------------------------------------------------------- company */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4.5vw,64px); align-items:center}
.contact-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,3vw,32px)}
.contact-card dl{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:14px 20px}
.contact-card dt{font-size:13.5px; color:var(--ink-3)}
.contact-card dd{font-size:15px; font-weight:600}
.contact-card dd a{color:var(--blue-ink)}

/* ---------------------------------------------------------------- responsive */
@media(max-width:980px){
  .pdp,.cart-grid,.co-grid{grid-template-columns:1fr}
  .pdp-media,.sumbox{position:static}
}
@media(max-width:900px){
  .phero-in,.study,.cta-dark,.split{grid-template-columns:1fr}
  .phero-in{gap:22px}
  .stat-row .st{flex-basis:120px; padding-right:16px}
  .cs-filter{top:56px}
  /* Below 900px a wrapped chip rail would take a third of the viewport and push
     the results off screen, so the rows go back to a swipeable strip. The
     scrollbar stays hidden, but the strip is edge-to-edge and the last chip is
     cut mid-way, which is the affordance a wrapped desktop row does not need. */
  .cs-filter-in{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .cs-filter-in::-webkit-scrollbar{display:none}
  .dose-head,.dose-row{grid-template-columns:1fr}
  .dose-head{display:none}
  .dose-row{border-bottom:1px solid var(--line)}
  .dose-row span{padding:11px 18px}
  .dose-row span:first-child{padding-top:16px}
}
@media(max-width:560px){
  .cs-grid,.blog-grid,.field-2{grid-template-columns:1fr}
  .stat-row .st:nth-child(2n){border-right:none}
  .cart-row{grid-template-columns:64px minmax(0,1fr); gap:14px}
  .cart-row img{width:64px}
  .cart-line-price{grid-column:2; text-align:left}
}
/* ---------------------------------------------------------------- dev slots
   The homepage marks the three door photos, the review wall and the pet strip
   with visible «фото: обновить с Ozon» labels, so nobody forgets they are
   placeholders. They are notes to us, not copy for a customer, so they stay in
   the markup (the slots still need filling) but are hidden once the page is
   somewhere a visitor can see it. Add ?slots to the URL to show them again. */
.door-slot,.rev-slot{display:none}
body.show-slots .door-slot,body.show-slots .rev-slot{display:block}

/* ===========================================================================
   MOBILE PASS
   base.css turns the hero into a stacked band below 1100px at min(46vh,380px).
   On a 390x844 phone that is 380px of photo under 108px of chrome, so the
   number and the buy button both start below the fold. Everything here buys
   that vertical budget back. Overrides live in site.css on purpose: flagship-v2
   is the approved artefact and build.py re-extracts base.css from it verbatim.
   =========================================================================== */
@media(max-width:700px){
  .hero-photo{height:min(31vh,258px)}
  .hero-photo img{object-position:50% 42%}
  /* the mobile crop is already framed, so only the foot needs dissolving */
  .hero-photo::after{background:linear-gradient(0deg, var(--paper) 0%, rgba(252,245,240,0) 34%)}
  .hero-copy{padding:22px 0 30px}
  .eyebrow{margin-bottom:14px; font-size:11px; letter-spacing:.1em}
  .h1-num{font-size:clamp(3.3rem,17vw,4.6rem); line-height:.9}
  .h1-say{font-size:1.29rem; line-height:1.16; margin-top:10px}
  .hero-sub{font-size:1rem; margin-top:14px; line-height:1.5}
  .hero-cta{margin-top:18px; gap:10px}
  .hero-cta .btn{width:100%}
  .hero-proof{margin-top:20px; padding-top:16px}
}

/* The diagram's mobile treatment used to be duplicated here at 640px as well as
   in base.css at 700px, so between 641 and 700px the component silently used a
   different layout. base.css owns it now, alone; only the neighbours are left. */
@media(max-width:640px){
  .dg-cap{margin-top:12px}
  .sci-stats{grid-template-columns:1fr 1fr}
  .verb-grid{grid-template-columns:1fr}
  .no-contains{flex-direction:column; align-items:flex-start; gap:10px}
}

/* Sticky rails must not stack: the header is 72px, the case filter sits under it. */
@media(max-width:860px){
  .cs-filter{top:64px}
  .pdp-media img{max-width:260px}
  .cta-dark .btn,.cta-btns{width:100%}
  .cta-btns .btn{flex:1 1 100%}
}
@media(max-width:560px){
  .crumb .wrap{font-size:12px}
  .phero h1{font-size:clamp(1.75rem,7.6vw,2.2rem)}
  .study-arms .arm{flex-wrap:wrap; gap:6px 12px}
  .arm-l{flex:1 1 100%; order:3}
  .paper{grid-template-columns:1fr; gap:8px}
  .paper-n{padding-top:0}
  .pdp-cta .btn{flex:1 1 100%}
  .contact-card dl{grid-template-columns:1fr; gap:4px 0}
  .contact-card dd{margin-bottom:12px}
  .cs-pair img{aspect-ratio:1/1}
}

/* ---------------------------------------------------------------- footer fix
   base.css declares four grid tracks (brand + 3 columns) because the one-page
   flagship had three. The site has four, so the last one wrapped onto its own
   row under the brand and left a hole. .footer-legal and .footer-dis are markup
   this site added and base.css never styled at all, so the six legal links ran
   together as one string. Both are fixed here, base.css stays generated. */
.footer-top{grid-template-columns:1.5fr repeat(4,minmax(0,1fr)); gap:32px 28px}
.footer-brand p{margin-bottom:20px}
/* The mark was a bare 30px <img>, so it was both the smallest thing in the
   footer and the only logo on the page that was not a link home. */
.footer-logo{display:inline-block; margin-bottom:20px}
.footer-brand .footer-logo img{height:46px; width:auto; margin-bottom:0;
  transition:opacity .14s var(--ease)}
@media(hover:hover){.footer-logo:hover img{opacity:.78}}
.footer-brand .reg a{color:inherit; border-bottom:1px solid rgba(255,255,255,.22)}
@media(hover:hover){.footer-brand .reg a:hover{color:#fff; border-bottom-color:#fff}}
/* Tony, 2026-08-07: «We need some of our socials - telegram (add later), VK».
   data.SOCIALS drives this, so adding the Telegram row is the whole change. */
.footer-soc{display:flex; gap:10px; margin-top:18px}
.soc{display:inline-flex; align-items:center; justify-content:center; width:38px;
  height:38px; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.75); transition:color .14s var(--ease),
  border-color .14s var(--ease), background .14s var(--ease)}
@media(hover:hover){.soc:hover{color:#fff; border-color:#fff;
  background:rgba(255,255,255,.08)}}

.footer-legal{display:flex; flex-wrap:wrap; align-items:center; gap:9px 18px;
  padding:22px 0 2px; font-size:13px}
.footer-legal a{color:rgba(255,255,255,.55); transition:color .14s var(--ease)}
@media(hover:hover){.footer-legal a:hover{color:#fff}}
.footer-legal a+a{position:relative}
.footer-legal a+a::before{content:""; position:absolute; left:-9px; top:50%;
  width:1px; height:11px; margin-top:-5px; background:rgba(255,255,255,.2)}

.footer-bottom{border-top:1px solid rgba(255,255,255,.13); margin-top:8px}
/* max-width:96ch is ~600px at this size, so the 155-character disclaimer broke
   into three lines inside a 1240px wrap. It is one sentence and reads as one
   line; it still wraps below ~1000px, where nowrap would overflow instead. */
.footer-dis{margin-top:14px; font-size:12.5px; line-height:1.6;
  color:rgba(255,255,255,.42); max-width:none}
.footer-dis a{color:rgba(255,255,255,.62); border-bottom:1px solid rgba(255,255,255,.22)}
@media(hover:hover){.footer-dis a:hover{color:#fff; border-bottom-color:#fff}}

@media(max-width:1080px){
  .footer-top{grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 26px}
  .footer-brand{grid-column:1/-1}
  .footer-brand p{max-width:52ch}
}
@media(max-width:700px){
  .footer-top{grid-template-columns:1fr 1fr}
  /* the links wrap here, and a divider stranded at the start of a new line
     reads as broken markup, so space them instead of separating them */
  .footer-legal{gap:10px 18px; font-size:12.5px}
  .footer-legal a+a::before{display:none}
}

/* ---------------------------------------------------------------- contact form
   Reuses the checkout field vocabulary (.field, .consent) so the site has one
   form language. .cform-hp is the honeypot: off-screen rather than
   display:none, because a display:none input is the first thing a bot skips. */
.cform{margin-top:16px}
.cform .field:first-of-type{margin-top:0}
.cform .consent{margin-top:18px}
.cform-note{margin-top:10px; font-size:12.5px; line-height:1.5; color:var(--ink-3)}
.cform-note a{color:var(--blue-ink); border-bottom:1px solid var(--blue-line)}
.cform button[type="submit"]{margin-top:18px}
.cform button[disabled]{opacity:.6; cursor:progress}
.cform-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,2.6vw,30px)}
.form-card .cform{margin-top:0}

/* ---- pharmacovigilance report ----
   ~30 regulated fields, so it needs a wider card and a two-column field grid or
   it becomes an unreadable ribbon. Long labels and textareas span both columns. */
.form-card--wide{max-width:none}
.split--form:has(.form-card--wide){grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
.pv-fields{display:grid; grid-template-columns:1fr 1fr; gap:0 18px; margin-top:4px}
.pv-sect{grid-column:1/-1; font-size:13px; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:var(--blue-ink); margin-top:22px; padding-top:16px;
  border-top:1px solid var(--line)}
.pv-fields .field--pv{margin-top:14px}
/* A field whose label runs long, or that holds free text, gets the full width. */
.pv-fields .field--pv:has(textarea),
.pv-fields .field--pv:has(.pv-checks){grid-column:1/-1}
.pv-lbl{display:block; font-size:13.5px; font-weight:600; color:var(--ink-2); margin-bottom:8px}
.pv-checks{display:grid; grid-template-columns:1fr 1fr; gap:8px 16px}
.pv-check{display:flex; align-items:flex-start; gap:9px; font-size:14px;
  line-height:1.4; color:var(--ink-2); cursor:pointer}
.pv-check input{margin-top:3px; flex:none}
@media(max-width:900px){
  .split--form:has(.form-card--wide){grid-template-columns:1fr}
  .pv-fields,.pv-checks{grid-template-columns:1fr}
}
.split--form{align-items:start}
.cform-msg{margin-top:12px; font-size:13.5px; line-height:1.5}
.cform-msg:empty{margin-top:0}
.cform-msg.is-ok{color:var(--ok); font-weight:600}
.cform-msg.is-err{color:#B3261E}

/* The homepage slot is the narrow card under the final-band photo, so it needs
   a tighter rhythm than the full form on /company/. */
.email-cap .cform .field{margin-top:12px}
.email-cap .cform-note{font-size:12px}
.email-cap .cform button[type="submit"]{margin-top:14px}

/* ------------------------------------------------------------ legal documents
   The six legal pages carry ported prod text that arrives as one wall. This is
   the reading layout: brand rule under the title, every section labelled by an
   h2 with its own short rule, clause paragraphs at document width. Mirrors the
   live regenique.ru legal pages in reparin's own tokens. */
.doc-head{padding:clamp(30px,4.4vw,56px) 0 0}
.doc-head h1{font-size:clamp(1.9rem,4.2vw,3rem); margin:.36em 0 0; max-width:22ch}
.doc-rule{width:64px; height:2px; background:var(--magenta); margin:22px 0 0}
.doc-lede{font-family:var(--serif); font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.55;
  color:var(--ink-2); margin-top:20px; max-width:60ch}

.doc{padding:clamp(26px,3.4vw,42px) 0 clamp(44px,6vw,80px)}
.doc-body{max-width:88ch; font-size:16px; line-height:1.75; color:var(--ink-2)}
.doc-body>:first-child{margin-top:0}
.doc-body p{margin:0 0 1.15em}
.doc-body h2{font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.3; color:var(--ink);
  margin:2.2em 0 .85em; scroll-margin-top:90px}
.doc-body h2:first-child{margin-top:0}
.doc-body h2::after{content:""; display:block; width:44px; height:2px;
  background:var(--magenta); margin-top:12px}
.doc-body h3{font-size:1.08rem; color:var(--ink); margin:1.7em 0 .6em}
.doc-body ul,.doc-body ol{margin:0 0 1.35em; padding-left:1.3em}
.doc-body li{margin:0 0 .5em; padding-left:.15em}
.doc-body li::marker{color:var(--magenta)}
.doc-body a{color:var(--blue-ink); border-bottom:1px solid var(--blue-line)}
@media(hover:hover){.doc-body a:hover{border-bottom-color:var(--blue)}}
.doc-body strong,.doc-body b{color:var(--ink); font-weight:600}
.doc-pay{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
  margin:0 0 1.35em; padding:18px 20px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r)}
.doc-pay img{height:24px; width:auto; max-width:130px; object-fit:contain}
.doc-note{margin-top:2.6em; padding-top:1.5em; border-top:1px solid var(--line);
  font-size:13.5px; line-height:1.65; color:var(--ink-3); max-width:88ch}
.doc-note a{color:var(--blue-ink); border-bottom:1px solid var(--blue-line)}

@media(max-width:560px){
  .doc-body{font-size:15.5px; line-height:1.7}
  .doc-body h2{margin-top:1.9em}
  .doc-pay{padding:14px 15px; gap:12px 16px}
  .doc-pay img{height:20px}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important; transition-duration:.01ms!important}}