/* Carino Natural — main.css: everything below the fold, after the inlined
   critical.css (which defines --brand/--on-brand/--hair/--ease). Same rules:
   theme.json presets only, prototype class names verbatim. */

/* ------------------------------------------------------------
   STAKES
   ------------------------------------------------------------ */
.stakes{display:grid; grid-template-columns:auto 1fr; gap:var(--wp--preset--spacing--70)}
/* T41: a grid, so core's blockGap margin on the second child would push the
   list column down inside its cell. See .flush in critical.css. */
.stakes > *{margin-block-start:0}
.stakes ul{list-style:none; margin:0; padding:0; columns:2; column-gap:var(--wp--preset--spacing--70)}
.stakes li{
  padding:var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  border-top:var(--hair); break-inside:avoid; position:relative;
  font-size:var(--wp--preset--font-size--base);
}
.stakes li::before{
  content:"—"; position:absolute; left:0; color:var(--wp--preset--color--leaf); font-weight:600;
}
.stakes__note{
  margin-top:var(--wp--preset--spacing--50); font-family:var(--wp--preset--font-family--display);
  font-size:1.25rem; color:var(--wp--preset--color--ink); max-width:44ch;
}
@media(max-width:860px){
  .stakes{grid-template-columns:1fr; gap:var(--wp--preset--spacing--50)}
  .stakes ul{columns:1}
}

/* ------------------------------------------------------------
   BADGES
   ------------------------------------------------------------ */
.badges{
  display:grid; grid-template-columns:repeat(5,1fr);
}
.badges div{
  padding:var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  text-align:center;
  font-size:var(--wp--preset--font-size--xs); font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--wp--preset--color--ink);
}
@media(max-width:760px){
  .badges{grid-template-columns:repeat(2,1fr)}
}

/* ------------------------------------------------------------
   PLAN — 01/02/03 used here only, because this IS a sequence
   ------------------------------------------------------------ */
.plan{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:var(--wp--preset--spacing--60)}
.plan__step{
  padding:var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) 0;
  border-top:2px solid var(--wp--preset--color--ink); position:relative;
}
.plan__step + .plan__step{padding-left:var(--wp--preset--spacing--50)}
.plan__n{
  font-family:var(--wp--preset--font-family--body); font-size:.75rem; font-weight:600;
  letter-spacing:.14em; color:var(--wp--preset--color--leaf);
  display:block; margin-bottom:var(--wp--preset--spacing--30);
}
.plan__step h3{margin-bottom:var(--wp--preset--spacing--20); font-size:1.25rem}
.plan__step p{font-size:var(--wp--preset--font-size--sm); margin:0}
@media(max-width:760px){
  .plan{grid-template-columns:1fr}
  .plan__step + .plan__step{padding-left:0}
}

/* ------------------------------------------------------------
   SIGNATURE — transparency panel
   ------------------------------------------------------------ */
/* `wash` is the only tint on a white page: here and on .closing. */
.trans{background:var(--wp--preset--color--wash)}
.trans__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:var(--wp--preset--spacing--50); flex-wrap:wrap;
}
.chips{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  gap:var(--wp--preset--spacing--30); margin-top:var(--wp--preset--spacing--50);
}
.chip{
  border:1px solid transparent; border-radius:2px; padding:var(--wp--preset--spacing--40);
  background:var(--wp--preset--color--paper-pure); transition:border-color .15s var(--ease);
}
.chip:hover{border-color:var(--wp--preset--color--ink)}
/* The chip is an <a> where the ingredient has an archive to open. Same
   treatment .card__link gets: no underline, colour inherited, the existing
   .chip:hover border is the affordance. docs/labels.md */
a.chip{display:block; text-decoration:none; color:inherit}
.chip__inci{
  font-family:var(--wp--preset--font-family--display); font-size:1rem;
  color:var(--wp--preset--color--ink); line-height:1.25;
}
.chip__bg{font-size:var(--wp--preset--font-size--xs); color:var(--wp--preset--color--ink-soft); margin:2px 0 var(--wp--preset--spacing--30)}
.chip__tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.chip__tag::before{content:""; width:7px; height:7px; border-radius:999px; background:currentColor}
/* No red on the markers: both raw-material origins are green. Bio takes the
   lighter leaf, natural keeps herb. #4E7541 is the palest green that still
   clears 4.5:1 at 11px on paper — see inc/origins.php in the plugin. */
.t-bio{color:var(--wp--preset--color--leaf)}
.t-nat{color:var(--wp--preset--color--herb)}
.t-eo{color:var(--wp--preset--color--ink)}
.legend{
  display:flex; gap:var(--wp--preset--spacing--50); flex-wrap:wrap;
  margin-top:var(--wp--preset--spacing--50);
  padding-top:var(--wp--preset--spacing--40); border-top:var(--hair);
}
/* T41. The prototype writes both of these as inline styles on the homepage
   panel; they are the same two elements on all three placements (§5), so
   they are classes here. 38ch, not .read: the lede sits beside the H2 in a
   flex row, and the reading measure would let it swallow the whole row. */
.trans__lede{margin:0; max-width:38ch; font-size:var(--wp--preset--font-size--sm)}
.trans__more{margin:var(--wp--preset--spacing--50) 0 0; font-size:var(--wp--preset--font-size--sm)}

/* ------------------------------------------------------------
   PRODUCT GRID
   ------------------------------------------------------------ */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--wp--preset--spacing--50); margin-top:var(--wp--preset--spacing--60)}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.grid,.grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid,.grid--3{grid-template-columns:1fr; gap:var(--wp--preset--spacing--40)}}

.card{display:flex; flex-direction:column; text-decoration:none; position:relative}
/* The tile is a <div>, not an <a>: its add button is a real form control and
   cannot nest in a link (patterns/product-grid.php). .card__link keeps the
   column flow and stretches an invisible ::after over the tile, so clicking
   anywhere but the button still opens the product, as the prototype did. The
   add control is a sibling, lifted above that layer. Category tiles have no
   button and stay one <a class="card card--cat">. */
.card__link{display:flex; flex-direction:column; text-decoration:none; color:inherit}
.card__link::after{content:""; position:absolute; inset:0}
/* A COLUMN, like .card itself. .btn is inline-flex, so it fills the tile only
   by being stretched on its parent's cross axis — which it got as a direct
   child of .card and lost when the <form> came between. In a row the button
   would size to its label and sit short of the tile's right edge. */
.card__form{margin:0; display:flex; flex-direction:column}
.card__form,
.card__add{position:relative; z-index:1}
/* Mid-request. Not a spinner: the toast, the count and the flying image all
   report the result within a beat. */
.card__add[disabled]{opacity:.6; cursor:default}
/* No frame and no fill: on a white page the photo is the tile, and the
   meta sits flush under its left edge. */
.card__img{
  aspect-ratio:1; overflow:hidden; position:relative; border-radius:3px;
  margin-bottom:var(--wp--preset--spacing--30);
}
.card__img img{width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease)}
.card:hover .card__img img{transform:scale(1.03)}
.card__alt{display:none}
@media(hover:hover) and (pointer:fine){
.card:hover .card__alt{display:block; position:absolute; inset:0; background:var(--wp--preset--color--paper-pure); transition:opacity .35s var(--ease),transform .4s var(--ease)}
@starting-style{.card:hover .card__alt{opacity:0}}}
.card__cat{font-size:.6875rem; text-transform:uppercase; letter-spacing:.1em; color:var(--wp--preset--color--ink-soft)}
.card__ttl{
  font-family:var(--wp--preset--font-family--display); font-size:var(--wp--preset--font-size--base);
  color:var(--wp--preset--color--ink);
  margin:var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--20); line-height:1.25;
}
.card__price{font-weight:600; color:var(--wp--preset--color--ink); font-size:1rem}
.card__lv{font-size:var(--wp--preset--font-size--xs); color:var(--wp--preset--color--ink-soft); font-weight:400}
.card__stars{font-size:.75rem; color:var(--wp--preset--color--ink); margin-top:2px}
.card__stars--new{color:var(--wp--preset--color--salt)}
.card__add{margin-top:var(--wp--preset--spacing--30)}

/* ONE ROW, ONE BASELINE. A flex column does not pass the grid's row height
   down, so the surface takes the slack and the price sits at its bottom. */
.card__link{flex:1 0 auto}
.card__link .card__price{margin-top:auto}

/* category-grid reuses .card/.grid--3 for the three category tiles (T44):
   no price/rating row, one benefit line instead. Taller image, since there
   is no price/add-to-cart row underneath to balance a square one. */
.card--cat .card__img{aspect-ratio:4/5}
.card__desc{font-size:var(--wp--preset--font-size--sm); color:var(--wp--preset--color--ink-soft); margin:0}

/* ------------------------------------------------------------
   CATEGORY
   ------------------------------------------------------------ */
.cat-intro{display:grid; grid-template-columns:1fr 1fr; gap:var(--wp--preset--spacing--70); align-items:start}
/* T42: a grid, so core's blockGap on the second column would push it down
   inside its own cell. See .flush in critical.css. */
.cat-intro > *{margin-block-start:0}
@media(max-width:860px){.cat-intro{grid-template-columns:1fr; gap:var(--wp--preset--spacing--50)}}
.crumb{font-size:var(--wp--preset--font-size--xs); color:var(--wp--preset--color--ink-soft); margin-bottom:var(--wp--preset--spacing--40)}
/* colour restated: the crumb inherits its surface colour in the prototype */
.crumb a{color:inherit; text-decoration:none}
.crumb a:hover{color:var(--wp--preset--color--damask)}
/* T42. The prototype carries these two as inline styles inside the category
   help section. Written structurally, and scoped to that section, so they
   survive the client rewriting the copy — it is a synced pattern, and a class
   they delete would take the spacing with it. .choose sets the same top
   margin for itself, one rule up. */
.cat-help h2 + p{margin-top:var(--wp--preset--spacing--50)}
.cat-help .acc{margin-top:var(--wp--preset--spacing--50)}
.choose{list-style:none; margin:var(--wp--preset--spacing--50) 0 0; padding:0}
.choose li{padding:var(--wp--preset--spacing--30) 0; border-top:var(--hair); font-size:var(--wp--preset--font-size--sm)}
.choose b{color:var(--wp--preset--color--ink); font-family:var(--wp--preset--font-family--display); font-weight:600}
.filters{display:flex; gap:var(--wp--preset--spacing--20); flex-wrap:wrap; margin-top:var(--wp--preset--spacing--50)}
.pill{
  border:var(--hair); border-radius:999px;
  padding:var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  font-size:var(--wp--preset--font-size--xs); background:var(--wp--preset--color--paper-pure);
  transition:.15s var(--ease);
}
.pill:hover{border-color:var(--wp--preset--color--ink)}
.pill[aria-pressed="true"]{background:var(--brand); color:var(--on-brand); border-color:var(--brand-edge)}
/* T42. The shipped chips are links, not the prototype's <button aria-pressed>
   — a filter is a URL, and this way it needs no JavaScript. aria-pressed is a
   button state, so the selected chip says aria-current="page"; identical
   appearance. The two resets are the usual pair: theme.json underlines and
   ink-colours every link, and .pill wants neither. */
a.pill{color:inherit; text-decoration:none}
.pill[aria-current="page"]{background:var(--brand); color:var(--on-brand); border-color:var(--brand-edge)}

.empty{margin-top:var(--wp--preset--spacing--60)}

/* ------------------------------------------------------------
   PDP
   ------------------------------------------------------------ */
.pdp{display:grid; grid-template-columns:1.1fr 1fr; gap:var(--wp--preset--spacing--70); align-items:start}
@media(max-width:900px){.pdp{grid-template-columns:1fr; gap:var(--wp--preset--spacing--50)}}
.pdp__gal{display:grid; grid-template-columns:1fr 1fr; gap:var(--wp--preset--spacing--30)}
.pdp__gal figure{
  margin:0; background:var(--wp--preset--color--paper-pure);
  border-radius:2px; overflow:hidden; aspect-ratio:1;
}
/* The catalogue is shot square (1080×1080). The lead figure was 4/3, so
   `cover` ate the top and bottom quarter of every product photo; square +
   `contain` keeps any image whole and the white figure carries the margin. */
.pdp__gal figure:first-child{grid-column:1/-1}
.pdp__gal img{width:100%; height:100%; object-fit:contain}
.pdp__zoom{display:block; width:100%; height:100%; padding:0; cursor:zoom-in}

/* Lightbox — built by assets/js/gallery.js on first open. */
.lb-open{overflow:hidden}
.lb{
  position:fixed; inset:0; z-index:100; padding:var(--wp--preset--spacing--50); display:grid;
  grid-template:minmax(0,1fr) auto / auto minmax(0,1fr) auto; align-items:center;
  background:color-mix(in srgb, var(--wp--preset--color--ink-deep) 93%, transparent);
}
.lb[hidden]{display:none}
.lb__img{grid-area:1/2; justify-self:center; max-width:100%; max-height:86vh; object-fit:contain; border-radius:2px; background:var(--wp--preset--color--paper-pure)}
.lb__nav,.lb__x{color:var(--wp--preset--color--ink-sub); line-height:1}
.lb__nav:hover,.lb__x:hover{color:var(--wp--preset--color--paper-pure)}
.lb__nav{font-size:2.5rem; width:48px; height:64px}
.lb__nav--prev{grid-area:1/1}
.lb__nav--next{grid-area:1/3}
.lb__x{position:absolute; top:var(--wp--preset--spacing--30); right:var(--wp--preset--spacing--30); font-size:2rem; width:44px; height:44px}
.lb__count{grid-area:2/1/3/4; margin:var(--wp--preset--spacing--40) 0 0; text-align:center; color:var(--wp--preset--color--ink-sub); font-size:var(--wp--preset--font-size--xs)}
@media(max-width:600px){.lb{padding:var(--wp--preset--spacing--30)} .lb__nav{font-size:2rem; width:36px}}
/* --hdr-h (critical.css) + 20px. Was a hardcoded 84px, which the two-row
   header made wrong by 76px — this column parked under the header. */
.pdp__buy{position:sticky; top:calc(var(--hdr-h) + 20px)}
.pdp h1{font-size:clamp(1.875rem,1.4rem + 1.6vw,2.5rem); margin-bottom:var(--wp--preset--spacing--30)}
.pdp__hook{font-size:var(--wp--preset--font-size--base); margin-bottom:var(--wp--preset--spacing--50); max-width:46ch}
.pdp__price{display:flex; align-items:baseline; gap:var(--wp--preset--spacing--30); margin-bottom:var(--wp--preset--spacing--40)}
.pdp__price strong{font-size:1.625rem; color:var(--wp--preset--color--ink); font-weight:600}

.ship{
  background:var(--wp--preset--color--wash); border-radius:2px;
  padding:var(--wp--preset--spacing--40); margin-bottom:var(--wp--preset--spacing--50);
}
.ship__bar{
  height:4px; background:var(--wp--preset--color--salt); border-radius:999px;
  overflow:hidden; margin-top:var(--wp--preset--spacing--30);
}
.ship__fill{height:100%; background:var(--wp--preset--color--damask); width:56%; transition:width .5s var(--ease)}
.ship__txt{font-size:.875rem}
.ship__txt b{color:var(--wp--preset--color--ink)}

.opt__lbl{
  font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  color:var(--wp--preset--color--ink); display:block; margin-bottom:var(--wp--preset--spacing--30);
}
.opts{display:flex; gap:var(--wp--preset--spacing--20); margin-bottom:var(--wp--preset--spacing--50)}
.opt{
  flex:1; border:1px solid var(--wp--preset--color--salt); background:var(--wp--preset--color--paper-pure);
  border-radius:2px; padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  text-align:left; transition:.15s var(--ease);
}
.opt:hover{border-color:var(--wp--preset--color--ink-soft)}
.opt[aria-pressed="true"]{border-color:var(--wp--preset--color--ink); box-shadow:inset 0 0 0 1px var(--wp--preset--color--ink)}
.opt b{display:block; color:var(--wp--preset--color--ink); font-size:var(--wp--preset--font-size--sm)}
.opt span{font-size:var(--wp--preset--font-size--xs)}

.assure{list-style:none; margin:var(--wp--preset--spacing--40) 0 0; padding:0; display:grid; gap:var(--wp--preset--spacing--20)}
.assure li{font-size:.875rem; display:flex; gap:var(--wp--preset--spacing--20)}
.assure li::before{content:"✓"; color:var(--wp--preset--color--herb); font-weight:600}

.bens{list-style:none; padding:0; margin:var(--wp--preset--spacing--60) 0 0}
.bens li{border-top:var(--hair); padding:var(--wp--preset--spacing--40) 0}
.bens b{
  display:block; font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--base); color:var(--wp--preset--color--ink);
}
.bens span{font-size:var(--wp--preset--font-size--sm)}

.acc{border-top:var(--hair)}
.acc details{border-bottom:var(--hair)}
.acc summary{
  padding:var(--wp--preset--spacing--40) 0; cursor:pointer; list-style:none; display:flex;
  justify-content:space-between; align-items:center;
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--base); color:var(--wp--preset--color--ink);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+"; font-family:var(--wp--preset--font-family--body); color:var(--wp--preset--color--damask); font-size:1.25rem}
.acc details[open] summary::after{content:"–"}
.acc__body{padding-bottom:var(--wp--preset--spacing--50); font-size:var(--wp--preset--font-size--sm); max-width:62ch}
.acc h2{font-size:var(--wp--preset--font-size--xxl)}
.inci{font-size:.875rem; line-height:1.9}
/* No colour of its own: the marker carries its origin's .t-* class, so the
   superscript in the INCI list is the same colour as that ingredient's chip
   further up the page. It used to be flat damask for all four origins — one
   page, two colour languages for the same four facts. */
.inci i{font-style:normal; font-weight:600; font-size:.75rem; vertical-align:super}

.review{
  border-top:var(--hair); padding:var(--wp--preset--spacing--50) 0; display:grid;
  grid-template-columns:auto 1fr; gap:var(--wp--preset--spacing--40);
}
/* The reviewer's initial on a herb disc — one letter, one green, on
   every avatar the site draws. inc/review-avatars.php has the why. */
.review__av{
  width:44px; height:44px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--wp--preset--color--herb); color:var(--wp--preset--color--paper-pure);
  font-family:var(--wp--preset--font-family--display); font-weight:600;
  font-size:1.125rem; line-height:1;
}
.review__m{font-size:var(--wp--preset--font-size--xs); color:var(--wp--preset--color--ink-soft); margin-bottom:var(--wp--preset--spacing--20)}
.review__m b{color:var(--wp--preset--color--ink)}
.review p{margin:var(--wp--preset--spacing--20) 0 0}
.stars{color:var(--wp--preset--color--ink); letter-spacing:.08em}

/* T41 — the homepage "Доказателство" section around them. The rule is the
   separator from the products grid above, so the section skips its own top
   padding rather than doubling the two. */
.proof{padding-top:0}
.proof .rule{margin-bottom:var(--wp--preset--spacing--80)}
.reviews{margin-top:var(--wp--preset--spacing--60)}
/* Reviews are separated by .review's border-top, not by a gap. */
.reviews > *{margin-block-start:0}

.bundle{
  background:var(--brand); color:var(--on-brand); border-radius:2px;
  padding:var(--wp--preset--spacing--60); display:grid; grid-template-columns:1fr auto;
  gap:var(--wp--preset--spacing--50); align-items:center;
  box-shadow:inset 0 0 0 1px var(--brand-edge);
}
.bundle h3{color:var(--on-brand); margin-bottom:var(--wp--preset--spacing--20)}
.bundle p{color:var(--on-brand-soft); font-size:var(--wp--preset--font-size--sm); margin:0}
.bundle .btn{background:var(--on-brand); color:var(--brand); white-space:nowrap; box-shadow:none}
@media(max-width:640px){.bundle{grid-template-columns:1fr}}

/* T65 · /ritual/. The one rule that page adds; the rest is .cat-intro,
   .choose, .card, .grid and .bundle unchanged. See docs/ritual.md */
.ritual .rule{margin-bottom:var(--wp--preset--spacing--70)}

/* ------------------------------------------------------------
   PDP · WooCommerce add-to-cart form (T43)
   patterns/product-single.php embeds Woo's real variations form and layers the
   prototype's chrome (.opts, .pdp__price, .qty) over it. These rules subordinate
   the pieces the prototype replaces and restyle the ones it keeps. See
   docs/product-template.md.
   ------------------------------------------------------------ */
/* The native variation <select> is the mirror target for .opts (variant-select.js)
   and the no-JS / assistive-tech fallback, so it stays in the DOM and operable —
   just clipped out of sight, since .opts is the visible control. Same technique
   as .screen-reader-text. */
.pdp .variations{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
/* .pdp__price already shows the selected price (and is what variant-select.js
   repaints), so Woo's duplicate variation price — and its "Clear" link — go. */
.pdp .woocommerce-variation-price,
.pdp .reset_variations{display:none}
.pdp .woocommerce-variation-availability{
  font-size:var(--wp--preset--font-size--sm); color:var(--wp--preset--color--ink-soft);
  margin-bottom:var(--wp--preset--spacing--30);
}
/* Woo wraps its qty <input> in .quantity; flatten it so the input sits directly
   in our .qty flex row between the −/+ buttons (inc/single-product.php). */
.pdp .qty .quantity{display:contents}
.pdp .variations_form{margin:0}
/* Woo offers no class hook for the submit button, so it is mapped to
   .btn.btn--block.btn--lg (critical.css) here. */
.pdp .single_add_to_cart_button{
  display:inline-flex; align-items:center; justify-content:center; width:100%;
  margin-top:var(--wp--preset--spacing--40);
  padding:1.125rem var(--wp--preset--spacing--60);
  border:0; border-radius:2px; font-size:1rem; font-weight:600; letter-spacing:.01em;
  cursor:pointer; background:var(--brand); color:var(--on-brand);
  box-shadow:inset 0 0 0 1px var(--brand-edge); transition:background .15s var(--ease);
}
.pdp .single_add_to_cart_button:hover{background:var(--brand-soft)}
.pdp .single_add_to_cart_button:disabled,
.pdp .single_add_to_cart_button.disabled,
.pdp .single_add_to_cart_button.wc-variation-selection-needed{opacity:.5; cursor:default}

/* ------------------------------------------------------------
   QUANTITY STEPPER + free-shipping marker
   ------------------------------------------------------------ */
/* :not(input): Woo's field is class="qty" too and took this margin-top. */
.qty:not(input){
  display:inline-flex; border:var(--hair); border-radius:2px;
  margin-top:var(--wp--preset--spacing--30); background:var(--wp--preset--color--paper-pure);
}
.qty button{width:32px; height:32px; color:var(--wp--preset--color--ink)}
.qty button[disabled]{opacity:.35; cursor:default}
/* T14: the prototype's value is a <span>, which cannot be typed into or
   submitted. The shipped control is a real number input, styled to look
   identical; assets/js/qty-stepper.js drives it from the −/+ buttons. The
   native spinner is hidden because those buttons already do that job. */
.qty input{
  width:36px; height:32px; text-align:center; border:0; border-inline:var(--hair);
  background:transparent; color:var(--wp--preset--color--ink);
  font-size:var(--wp--preset--font-size--sm); -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.free{color:var(--wp--preset--color--herb); font-weight:600}

/* ------------------------------------------------------------
   CHECKOUT
   ------------------------------------------------------------ */

.co__trust{font-size:var(--wp--preset--font-size--xs); text-align:center; margin-top:var(--wp--preset--spacing--40)}
.guest{
  background:var(--wp--preset--color--paper-pure); border:var(--hair);
  border-left:2px solid var(--wp--preset--color--herb);
  padding:var(--wp--preset--spacing--40); font-size:.875rem;
  margin-bottom:var(--wp--preset--spacing--50); border-radius:2px;
}

/* ------------------------------------------------------------
   CLOSING CTA — the mark alone, used exactly once
   ------------------------------------------------------------ */
.closing{
  position:relative; overflow:hidden;
  background:var(--wp--preset--color--wash);
}
/* A tinted band that ends the page meets the footer; .ftr's top margin
   would leave a white strip between two fills. */
main:has(> :is(.closing,.trans):last-child) ~ .wp-block-template-part .ftr{margin-top:0}
/* margin-block-start: the watermark span is the section's first child, so
   core's blockGap would otherwise open a gap above the copy. */
.closing > *{position:relative; z-index:1; margin-block-start:0}
.closing .wrap{text-align:center; margin-inline:auto}
/* Reset core's blockGap across the three children (heading, note, button —
   .btn carries no margin of its own), then restate the one gap the
   prototype does specify, between the heading and the note. */
.closing .wrap > *{margin-block-start:0}
.closing .wrap > p{margin-top:var(--wp--preset--spacing--40)}
/* The watermark is the mark alone, but logo.svg is the whole lockup — the
   direction doc ships ONE mask asset, so the mark is cropped out of it here
   rather than duplicated into a second file. Inside logo.svg's 981.36x193.17
   canvas the mark occupies x 392.78, width 195.44, full height. Scaling the
   lockup by (--wm / 195.44) makes the mark exactly --wm wide; shifting it
   left by 392.78 of those units leaves the mark alone inside the box. The
   ratios below are that arithmetic pre-divided, so only --wm ever changes.
     5.02140 = 981.36/195.44   0.98841 = 193.17/195.44
     2.00977 = 392.78/195.44   0.00579 = (1 - 0.98841)/2, the vertical centring */
.closing__wm{
  --wm:min(440px,72vw);
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:var(--wm); height:var(--wm); background-color:var(--brand);
  opacity:var(--wm-op); pointer-events:none; z-index:0;
  -webkit-mask:url("../img/logo.svg") no-repeat;
          mask:url("../img/logo.svg") no-repeat;
  -webkit-mask-size:calc(var(--wm) * 5.02140) calc(var(--wm) * 0.98841);
          mask-size:calc(var(--wm) * 5.02140) calc(var(--wm) * 0.98841);
  -webkit-mask-position:calc(var(--wm) * -2.00977) calc(var(--wm) * 0.00579);
          mask-position:calc(var(--wm) * -2.00977) calc(var(--wm) * 0.00579);
}

/* ------------------------------------------------------------
   TOAST — add-to-cart feedback (design direction §6.2)
   ------------------------------------------------------------ */
#toast{
  position:fixed; left:50%; bottom:var(--wp--preset--spacing--60); transform:translate(-50%,20px);
  background:var(--brand); color:var(--on-brand);
  padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  box-shadow:inset 0 0 0 1px var(--brand-edge);
  border-radius:2px; font-size:.875rem; opacity:0; pointer-events:none;
  transition:.25s var(--ease); z-index:150;
}
#toast.on{opacity:1; transform:translate(-50%,0)}

/* ------------------------------------------------------------
   JOURNAL — the blog index (T47)
   No prototype screen; the blog is built in the same editorial
   voice as the rest of the site — a typographic list on hairlines,
   the way .stakes / .choose / .bens already read, not a card wall.
   The measure is the reading column (theme.json content-size, 680px),
   so an index of posts sits at the same width the posts do.
   ------------------------------------------------------------ */
.journal{max-width:var(--wp--style--global--content-size); margin-top:var(--wp--preset--spacing--60)}
/* the list children carry their own vertical spacing; kill core's blockGap */
.journal > *{margin-block-start:0}
.entry{border-top:var(--hair); padding-block:var(--wp--preset--spacing--60)}
.entry:first-child{border-top:0; padding-top:0}
.entry__meta{
  display:flex; flex-wrap:wrap; align-items:baseline;
  font-size:var(--wp--preset--font-size--xs); color:var(--wp--preset--color--ink-soft);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:var(--wp--preset--spacing--30);
}
.entry__meta a{color:inherit; text-decoration:none}
.entry__meta a:hover{color:var(--wp--preset--color--damask)}
/* a bare middot between the meta items, drawn by CSS so the markup stays a
   flat list of links with nothing between them to translate or maintain */
.entry__meta > * + *::before{content:"·"; margin-inline:var(--wp--preset--spacing--20); color:var(--wp--preset--color--ink-sub)}
.entry__ttl{
  font-family:var(--wp--preset--font-family--display); font-size:var(--wp--preset--font-size--xl);
  line-height:1.2; color:var(--wp--preset--color--ink); margin:0 0 var(--wp--preset--spacing--30);
}
.entry__ttl a{color:inherit; text-decoration:none}
.entry__ttl a:hover{color:var(--wp--preset--color--damask)}
.entry__ex{margin:0 0 var(--wp--preset--spacing--30); color:var(--wp--preset--color--ink-soft)}
.entry__more{
  font-size:var(--wp--preset--font-size--sm); font-weight:600;
  color:var(--wp--preset--color--ink); text-decoration:none;
  display:inline-flex; gap:var(--wp--preset--spacing--20);
}
.entry__more:hover{color:var(--wp--preset--color--damask)}
/* the quiet note an empty non-search archive shows (a search that finds
   nothing gets the designed .deadend instead) */
.journal .empty{color:var(--wp--preset--color--ink-soft)}

/* Pagination, for the journal AND the product listing: both call
   paginate_links(), which emits bare <a>/<span class="page-numbers">, and
   .pagenav is the wrapper the theme puts round them. Woo's own pager markup
   is deliberately not used — its stylesheet out-specifies any rule that
   names .current, and repaints the current page lavender. */
.pagenav{
  margin-top:var(--wp--preset--spacing--70); display:flex; flex-wrap:wrap;
  justify-content:center; gap:var(--wp--preset--spacing--20);
}
.pagenav .page-numbers{
  display:grid; place-items:center; min-width:38px; height:38px;
  padding-inline:var(--wp--preset--spacing--30);
  border:var(--hair); border-radius:2px;
  background:var(--wp--preset--color--paper-pure);
  font-size:var(--wp--preset--font-size--xs); color:var(--wp--preset--color--ink);
  text-decoration:none; transition:border-color .15s var(--ease);
}
.pagenav a.page-numbers:hover{border-color:var(--wp--preset--color--ink)}
.pagenav .page-numbers.current{background:var(--brand); color:var(--on-brand); border-color:var(--brand-edge)}
.pagenav .page-numbers.dots{border:0; background:transparent; min-width:auto}

/* ------------------------------------------------------------
   POST — a single blog entry (T47)
   The post lives inside .wrap.read, so the whole column is the 680px reading
   measure (theme.json content-size) the task sets — title, meta, featured
   image, body and end nav all share it. No constrained wrapper: that would add
   a second padding-inline over .wrap's, the trap front-page.html documents.
   ------------------------------------------------------------ */
.post{padding-block:var(--wp--preset--spacing--80)}
.post__head{margin-bottom:var(--wp--preset--spacing--60)}
.post__head h1{font-size:clamp(1.875rem,1.4rem + 1.6vw,2.5rem); margin-bottom:var(--wp--preset--spacing--30)}
/* the post meta reuses the journal meta's look */
.post__meta{
  display:flex; flex-wrap:wrap; align-items:baseline;
  font-size:var(--wp--preset--font-size--xs); color:var(--wp--preset--color--ink-soft);
  text-transform:uppercase; letter-spacing:.08em;
}
.post__meta a{color:inherit; text-decoration:none}
.post__meta a:hover{color:var(--wp--preset--color--damask)}
.post__meta > * + *::before{content:"·"; margin-inline:var(--wp--preset--spacing--20); color:var(--wp--preset--color--ink-sub)}
.post__cover{
  margin:0 0 var(--wp--preset--spacing--70);
  border-radius:2px; overflow:hidden;
}
.post__cover img{width:100%; height:auto; display:block}
/* end-of-post nav: back to the journal, on toward the shop — the same
   "never leave a reader at a dead end" idea the 404 and empty search use */
.post__on{
  margin:var(--wp--preset--spacing--70) 0 0;
  padding-top:var(--wp--preset--spacing--50); border-top:var(--hair);
  display:flex; flex-wrap:wrap; gap:var(--wp--preset--spacing--40);
  justify-content:space-between; align-items:center;
}
.post__on a{font-size:var(--wp--preset--font-size--sm); font-weight:600; text-decoration:none; color:var(--wp--preset--color--ink)}
.post__on a:hover{color:var(--wp--preset--color--damask)}

/* ------------------------------------------------------------
   DEAD ENDS — 404 and the empty search (T47)
   Where frustrated visitors land. Not a bare "404": a line in the
   brand's voice, the site search, and a route back into the shop —
   a lost end here is a lost customer. Centred, on the reading measure.
   ------------------------------------------------------------ */
.deadend{max-width:var(--wp--style--global--content-size); margin-inline:auto; text-align:center}
/* the three children (copy, search, actions) set their own spacing below */
.deadend > *{margin-block-start:0}
.deadend__code{
  font-size:var(--wp--preset--font-size--xs); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; color:var(--wp--preset--color--damask); margin:0 0 var(--wp--preset--spacing--40);
}
/* h1 on the 404, h2 on the empty search (its H1 is the query title above) */
.deadend :is(h1,h2){font-size:clamp(1.875rem,1.4rem + 1.6vw,2.5rem); margin-bottom:var(--wp--preset--spacing--40)}
.deadend p{color:var(--wp--preset--color--ink-soft); margin-inline:auto; max-width:46ch}
/* the core/search block, a direct child of .deadend: reading measure, centred,
   spaced off the copy above and the actions below */
.deadend .wp-block-search{max-width:30rem; margin:var(--wp--preset--spacing--60) auto 0}
.deadend__act{
  display:flex; flex-wrap:wrap; gap:var(--wp--preset--spacing--30);
  justify-content:center; margin-top:var(--wp--preset--spacing--50);
}

/* ------------------------------------------------------------
   PRODUCT REVIEWS (T35) — CusRev stores reviews as native Woo
   review-comments, so WordPress renders the stock commentlist:
   a bordered card, a floated gravatar and teal stars. Reshape it
   into the prototype's .review row — a hairline-separated grid
   with a flat salt disc and ink stars — and match the "add a
   review" form to .field. Only the PDP renders #reviews, but this
   sits in the global sheet beside .field / .pdp / .qty.
   ------------------------------------------------------------ */
/* WooCommerce's own review title is the only one on the page now —
   it names the product once a review exists, where the heading the
   template used to print said only "Отзиви". Brought down to the
   review-form heading's size; it used to be hidden here. */
.woocommerce #reviews .woocommerce-Reviews-title{
  font-size:var(--wp--preset--font-size--xl);
  margin:0 0 var(--wp--preset--spacing--40);
}

.woocommerce #reviews #comments ol.commentlist{margin:0; padding:0; list-style:none}
.woocommerce #reviews #comments ol.commentlist li.review{margin:0; padding:0}

/* .review: hairline top rule, 44px avatar column, 1rem gutter. */
.woocommerce #reviews #comments ol.commentlist li .comment_container{
  position:static; display:grid; grid-template-columns:44px 1fr;
  gap:var(--wp--preset--spacing--40); align-items:start;
  padding:var(--wp--preset--spacing--50) 0; border-top:var(--hair);
}
/* No rule for the avatar column: inc/review-avatars.php prints .review__av
   in the image's place, so the shared disc lands in column 1 as it did. This
   is the fall-through for a name with no usable first letter — core's own
   avatar, sized to match — and for a future review with a real photo. */
.woocommerce #reviews #comments ol.commentlist li img.avatar{
  width:44px; height:44px; border-radius:999px; margin:0; float:none;
}

/* Strip Woo's card and 50px avatar gutter; stack the three parts.
   body-qualified so it outweighs Woo's equal-length selector. */
body.woocommerce #reviews #comments ol.commentlist li .comment-text{
  display:flex; flex-direction:column; gap:var(--wp--preset--spacing--20);
  margin:0; padding:0; border:0; border-radius:0;
}
/* Prototype order: name·date, then stars, then the review body. */
.woocommerce #reviews #comments ol.commentlist li .comment-text .meta{order:1}
.woocommerce #reviews #comments ol.commentlist li .comment-text .star-rating{order:2; margin:0}
.woocommerce #reviews #comments ol.commentlist li .comment-text .description{order:3}

/* .review__m: xs, ink-soft; author in ink. A middot replaces Woo's
   dash to read "Name · date" like the mock. */
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta{
  margin:0; font-size:var(--wp--preset--font-size--xs);
  color:var(--wp--preset--color--ink-soft);
}
.woocommerce #reviews #comments ol.commentlist li .comment-text .woocommerce-review__author{
  color:var(--wp--preset--color--ink); font-weight:600;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text .woocommerce-review__dash{display:none}
.woocommerce #reviews #comments ol.commentlist li .comment-text .woocommerce-review__published-date::before{content:"· "}
/* Verified purchases (none yet — all imports are unverified) get the
   same middot treatment when they appear. */
.woocommerce #reviews #comments ol.commentlist li .comment-text .woocommerce-review__verified{
  font-style:normal; color:var(--wp--preset--color--ink-soft);
}
.woocommerce #reviews #comments ol.commentlist li .comment-text .description p:last-child{margin-bottom:0}

/* .stars: ink fill on a salt track. Woo draws the empty stars on
   .star-rating and fills them on the inner span. */
.woocommerce #reviews .star-rating{color:var(--wp--preset--color--salt)}
.woocommerce #reviews .star-rating::before{color:var(--wp--preset--color--salt)}
.woocommerce #reviews .star-rating span::before{color:var(--wp--preset--color--ink)}

/* "Add a review" form: heading on the display face, fields to .field. */
.woocommerce #review_form #reply-title{
  font-family:var(--wp--preset--font-family--display); font-weight:600;
  color:var(--wp--preset--color--ink); font-size:var(--wp--preset--font-size--xl);
  display:block; margin:0 0 var(--wp--preset--spacing--40);
}
/* Name and e-mail ABOVE the comment box. WordPress prints them after it,
   buried under a 128px textarea — read as "no name field at all". Order
   only: the DOM is untouched, so tab order still follows the visual one. */
.woocommerce #review_form .comment-form{display:flex; flex-direction:column}
.woocommerce #review_form .comment-form-rating{order:1}
.woocommerce #review_form .comment-form-author{order:2}
.woocommerce #review_form .comment-form-email{order:3}
.woocommerce #review_form .comment-form-comment{order:4}
.woocommerce #review_form .comment-form-cookies-consent{order:5}
.woocommerce #review_form .form-submit{order:6}

.woocommerce #review_form .comment-form-rating label,
.woocommerce #review_form .comment-form label{
  display:block; font-size:var(--wp--preset--font-size--xs); font-weight:600;
  color:var(--wp--preset--color--ink); margin-bottom:6px;
}
.woocommerce #review_form .comment-form textarea,
.woocommerce #review_form .comment-form input[type="text"],
.woocommerce #review_form .comment-form input[type="email"]{
  width:100%; padding:.8125rem var(--wp--preset--spacing--40);
  border:1px solid var(--wp--preset--color--salt); border-radius:2px;
  background:var(--wp--preset--color--paper-pure); font:inherit;
  font-size:var(--wp--preset--font-size--sm); color:var(--wp--preset--color--ink);
}
.woocommerce #review_form .comment-form textarea:focus,
.woocommerce #review_form .comment-form input[type="text"]:focus,
.woocommerce #review_form .comment-form input[type="email"]:focus{
  border-color:var(--wp--preset--color--ink); outline:none;
  box-shadow:inset 0 0 0 1px var(--wp--preset--color--ink);
}
/* Five radios as stars (inc/single-product.php), printed 5→1 so the
   highlight is a following-sibling selector, then reversed visually.
   Scoped and placed AFTER .comment-form label: that rule is (1,2,1) too, so
   an unscoped .rate label simply lost and the stars came out 13px. */
.woocommerce #review_form .rate{display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px}
.woocommerce #review_form .rate input{position:absolute; width:1px; height:1px; opacity:0}
.woocommerce #review_form .rate label{
  cursor:pointer; font-size:1.75rem; line-height:1; margin:0;
  color:var(--wp--preset--color--salt); transition:color .12s var(--ease);
}
.woocommerce #review_form .rate input:checked ~ label,
.woocommerce #review_form .rate label:hover,
.woocommerce #review_form .rate label:hover ~ label{color:var(--wp--preset--color--ink)}
.woocommerce #review_form .rate input:focus-visible + label{outline:2px solid var(--wp--preset--color--ink); outline-offset:2px}
.woocommerce #review_form .comment-form > p{margin:0 0 var(--wp--preset--spacing--40)}
.woocommerce #review_form .comment-form textarea{min-height:8rem; resize:vertical}

/* ------------------------------------------------------------
   CONSENT BANNER — Complianz, brand-skinned (T62)

   Complianz injects the banner after load, so this lives in main.css
   (deferred) rather than critical. All colour/spacing from theme.json,
   same as the rest of this sheet. Scoped to Complianz's own container id
   so these rules win over the plugin's low-specificity class styles
   without !important.

   No dark patterns: Accept and Deny are the SAME button — identical
   fill, size, and position. "Preferences" is the only quieter control,
   and it opens choices rather than declining them, so a plain link is
   honest, not a nudge. Reject is exactly as easy as accept.
   ------------------------------------------------------------ */
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  background:var(--wp--preset--color--paper-pure);
  color:var(--wp--preset--color--ink-soft);
  border:1px solid var(--wp--preset--color--salt);
  border-radius:4px;
  box-shadow:var(--wp--preset--shadow--lift);
  padding:var(--wp--preset--spacing--50);
  font-size:var(--wp--preset--font-size--sm);
  line-height:1.55;
}
#cmplz-cookiebanner-container .cmplz-title{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--lg);
  color:var(--wp--preset--color--ink);
  margin:0 0 var(--wp--preset--spacing--30);
}
#cmplz-cookiebanner-container .cmplz-body,
#cmplz-cookiebanner-container .cmplz-message{
  color:var(--wp--preset--color--ink-soft);
}
/* Policy / cookie-statement links inside the copy. */
#cmplz-cookiebanner-container .cmplz-links a,
#cmplz-cookiebanner-container .cmplz-message a{
  color:var(--wp--preset--color--ink);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Buttons ---------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-buttons{
  display:flex; flex-wrap:wrap; gap:var(--wp--preset--spacing--30);
  margin-top:var(--wp--preset--spacing--40);
}
/* Accept, Deny, Save — one identical ink-filled control. Equal weight is
   the whole point: the visitor is never steered toward accepting. */
#cmplz-cookiebanner-container .cmplz-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  min-width:9rem;
  border-radius:2px;
  font-size:var(--wp--preset--font-size--sm); font-weight:600;
  letter-spacing:.01em; text-decoration:none;
  background:var(--wp--preset--color--ink);
  color:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--ink);
  transition:background-color .15s var(--ease), color .15s var(--ease);
}
#cmplz-cookiebanner-container .cmplz-btn:hover{
  background:var(--wp--preset--color--ink-soft);
  border-color:var(--wp--preset--color--ink-soft);
}
/* "Preferences" / "Manage options": a quiet text control, not a decline
   path, so a link reading is honest. Kept clearly visible, not hidden. */
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-manage-options{
  background:transparent;
  color:var(--wp--preset--color--ink-soft);
  border-color:transparent;
  min-width:0;
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:500;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-manage-options:hover{
  background:transparent;
  color:var(--wp--preset--color--ink);
}

/* Category toggles ------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-categories{
  margin-top:var(--wp--preset--spacing--40);
}
#cmplz-cookiebanner-container .cmplz-category{
  border-top:var(--hair);
  padding:var(--wp--preset--spacing--30) 0;
}
/* Broad, selector-drift-proof fallback: colours native checkboxes the
   plugin renders for each category, whatever wrapper markup surrounds them.
   herb = the theme's success/"on" accent. */
#cmplz-cookiebanner-container input[type="checkbox"]{
  accent-color:var(--wp--preset--color--herb);
}

/* Focus — matches the theme's damask focus ring. */
#cmplz-cookiebanner-container .cmplz-btn:focus-visible,
#cmplz-cookiebanner-container a:focus-visible,
#cmplz-cookiebanner-container input:focus-visible{
  outline:2px solid var(--wp--preset--color--damask);
  outline-offset:2px;
}

/* The persistent "manage consent" revoke tab Complianz leaves on the page. */
.cmplz-manage-consent .cmplz-btn,
#cmplz-manage-consent .cmplz-manage-consent{
  background:var(--wp--preset--color--ink);
  color:var(--wp--preset--color--paper);
  border-radius:2px 2px 0 0;
  font-size:var(--wp--preset--font-size--xs);
  font-weight:600;
}

@media(max-width:600px){
  #cmplz-cookiebanner-container .cmplz-buttons{flex-direction:column}
  #cmplz-cookiebanner-container .cmplz-btn{width:100%}
  #cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences,
  #cmplz-cookiebanner-container .cmplz-btn.cmplz-manage-options{width:auto}
}