/* section heroes, feature and info grids, aquarium calculator
   Part of the split style.css. inc/enqueue.php enqueues each file as
   its own <link>, in filename order -- they are NOT concatenated, so a
   comment or a rule cut across the join does not heal at the seam. It
   breaks both files, and the browser drops everything it cannot parse
   without saying so. Keep every construct whole inside one file.
   Source order is still the cascade, so moving a rule between files
   can change which one wins. */

/* min-height: 0 overrides the generic .pet-hero-art rule's min-height:520px
   (a more specific selector only overrides the properties it sets -- it
   doesn't clear ones it leaves unmentioned), which otherwise wins over this
   rule's own height and forces the box to 520px regardless, leaving bare
   background below the shorter img.

   THE SAME OMISSION COST THE HERO PHOTOGRAPH, and it is worth writing down
   because the note above states the rule and the code below it broke the
   rule. This pair used to say `max-height: 340px` on the box and
   `width: 100%; height: auto` on the img, on the stated reasoning that the
   img was in flow and so gave the box its height. It was not: 20-hero.css's
   `.pet-hero-art img` (0-1-1) also declares `position: absolute; inset: 0`,
   and neither of those two properties is named here, so they survived every
   override. An out-of-flow child contributes no height, so the box measured
   0px with `overflow: hidden` over it, and the img -- which painted
   perfectly, 528x601 at 1280px, `complete: true` -- was clipped away
   entirely. Measured in headless Chrome on 2026-08-29 over the real page:
   .pet-pets-page .pet-hero-art height 0. Russian, Hebrew and English alike,
   and invisible to every check in the gate, because the markup, the file,
   the srcset and the decode were all correct.

   The fix gives the box a real height instead of a cap, so the generic
   absolute/inset/100% rule fills it as it was written to, and switches the
   fit to contain: sergei.webp is a 720x820 portrait of the owner with a
   dachshund and two trophies, and cover-cropping it into a landscape box
   takes the trophies and part of the head off -- the same reason
   .pet-hero-art-contain exists for the square studio photos. A fixed height
   also reserves the space in CSS rather than from the img's own aspect
   ratio, so there is no layout shift to get wrong at one column. */
.pet-pets-page .pet-section-hero .pet-hero-art { border-radius: 28px; overflow: hidden; background: var(--pet-surface-muted); min-height: 0; height: 340px; }
.pet-pets-page .pet-section-hero .pet-hero-art img { object-fit: contain; }
/* nowrap across every hero family, with the scale set by the longest real
   title rather than by taste: "Аквариумы и террариумы на заказ" (30 chars)
   is the worst case and used to break across two lines. One rule for all of
   them keeps page headings visually consistent instead of each section
   picking its own size. */
.pet-section-hero h1 { font-size: clamp(1.55rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -.055em; line-height: 1.05; margin: 0 0 1.5rem; white-space: nowrap; }
/* Pet-category titles ("Наши породы", "Аквариумные рыбы") are short enough
   to always fit one line at this component's full-width layout -- unlike
   .pet-shop-category-hero's longer titles, which keep the wrapping default. */
.pet-pet-detail-hero h1 { white-space: nowrap; }
/* Shop-category titles range from one long word ("Аквариумистика") to a
   4-word phrase ("Аксессуары и сопутствующие товары") -- nowrap would force
   the long phrase down to an illegibly tiny size just to fit one line, so
   this only guarantees words never split mid-word (h1's global
   overflow-wrap: break-word was doing that whenever a single long word
   didn't fit at the current size); the mobile font-size floor below keeps
   the longest realistic single word under the available width so it still
   reads as one line in practice. */
.pet-shop-category-hero h1 { overflow-wrap: normal; word-break: normal; }
.pet-section-hero > p:not(.pet-eyebrow) { font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.55; margin: 0 0 2rem; max-width: 620px; }
.pet-info-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 1rem 0; }
@media (max-width: 960px) {
  .pet-pets-page .pet-section-hero { grid-template-columns: 1fr; }
}
.pet-info-card { border: 1px solid var(--pet-border); border-radius: 22px; min-height: 230px; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; }
.pet-info-card:hover { border-color: var(--pet-primary); box-shadow: var(--pet-shadow); transform: translateY(-4px); }
.pet-info-card-link { color: var(--pet-text); display: flex; flex-direction: column; height: 100%; padding: 1.7rem; text-decoration: none; }
.pet-info-card.has-image .pet-info-card-link { padding: 0; }
/* contain, not cover: these are studio cut-outs of whole animals, and any
   cover-crop in this short wide box cut part of the subject off -- heads
   with the default centre anchor, feet/tails/fins once anchored to the
   top. Fitting the whole photo keeps every animal intact; the background
   fills the leftover side bands and matches the photos' own plain
   backdrops. Same reasoning as .pet-hero-art-contain. */
.pet-info-image { background: var(--pet-surface); display: block; height: 180px; object-fit: contain; width: 100%; }
.pet-info-body { display: flex; flex: 1; flex-direction: column; padding: 1.4rem 1.7rem 1.7rem; }
.pet-info-number { color: var(--pet-accent-text); font-size: 1.4rem; }
.pet-info-card h2 { font-size: 1.3rem; margin: 2.5rem 0 .6rem; }
.pet-info-card.has-image h2 { margin: .7rem 0 .6rem; }
.pet-info-card p { line-height: 1.6; margin: 0; }
.pet-pets-page { padding-bottom: 0; }
/* Four columns at desktop rather than the generic grid's five. The seven
   direction cards each carry a sentence about what its child page actually
   offers, and at 220px they wrapped into ten-line columns; the WP3 mockup
   draws the same grid four wide with room for the text. min() keeps the
   track from exceeding the container on a phone, where .pet-section-page is
   calc(100vw - 48px) and a fixed 260px minimum would overflow. */
.pet-pets-page .pet-info-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pet-pets-page .pet-info-card-link p { min-height: 4.8em; }
/* A tertiary call to action -- the third level below a filled primary and
   an outlined secondary -- so it is a plain link in the primary green with
   no box of its own. */
.pet-info-cta { color: var(--pet-primary); display: block; font-size: .85rem; font-weight: 800; margin-top: auto; padding-top: 1.2rem; }
.pet-info-cta b { display: inline-block; margin-inline-start: .3rem; }
[dir="rtl"] .pet-info-cta b { transform: rotate(180deg); }
/* "Как мы помогаем" -- the one instance of this block on the site.
   scripts/update-section-pages.php renders it on /{lang}/pets/ and nowhere
   else; the six single-species pet pages and /pets/dogs/ used to each print
   their own copy of the same three steps, and now carry a one-sentence
   summary linking to #how-we-help here (.pet-help-reference, 80-pets.css).

   The step numbers are a CSS counter and not digits in the markup, so the
   numbering follows the DOM in both directions and Hebrew needs no override.
   scroll-margin-top is not decoration: six pages link straight at this
   section's id, and without it the heading lands flush against the top of
   the viewport under the header. */
.pet-help-steps { margin: 2.5rem 0 0; scroll-margin-top: 6rem; }
.pet-help-steps h2 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing: -.02em; margin: 0 0 1.4rem; }
.pet-help-steps-list { counter-reset: pet-help-step; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); list-style: none; margin: 0; padding: 0; }
.pet-help-steps-list li { align-items: center; background: var(--pet-primary-soft); border-radius: 22px; counter-increment: pet-help-step; display: flex; gap: 1rem; line-height: 1.55; padding: 1.4rem 1.6rem; }
.pet-help-steps-list li::before { align-items: center; background: var(--pet-primary); border-radius: 999px; color: var(--pet-surface); content: counter(pet-help-step); display: flex; flex: 0 0 auto; font-weight: 800; height: 40px; justify-content: center; width: 40px; }
/* The compact help CTA that closes the hub. /pets/ is a selector page, so
   the WP3 brief gives it a WhatsApp button and one link into the contact
   form the footer already renders -- deliberately not a second large form. */
.pet-help-cta { align-items: center; background: var(--pet-surface-muted); border-radius: 28px; display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; margin: 1rem 0 3rem; padding: clamp(1.6rem, 3vw, 2.4rem); }
.pet-help-cta-text { flex: 1 1 320px; }
.pet-help-cta h2 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin: 0 0 .5rem; }
.pet-help-cta p { line-height: 1.6; margin: 0; max-width: 52ch; }
/* The "Аквариумы и террариумы на заказ" content (process/price/calculator)
   used to sit behind a <details> accordion toggle with a tall icon column
   above it (summary: 128px icon + text, min-height 280px). With only this
   one item left on the page, an expand/collapse toggle had nothing left to
   collapse in favour of, so it's a plain always-visible, full-width
   section now -- dropping the icon/index/intro/toggle summary roughly
   halves its height and removes the old .pet-service-grid 2-column cap on
   its width. scroll-margin-top keeps the #service-aquarium anchor jump
   from landing flush against the viewport edge. */
.pet-service-plain { background: var(--pet-surface-muted); border: 1px solid var(--pet-border); border-radius: var(--pet-radius-lg); display: grid; gap: 1rem; grid-template-columns: 1.25fr .75fr; margin: clamp(1.25rem, 4vw, 2rem) 0; min-width: 0; padding: 1.25rem; scroll-margin-top: 2rem; }
.pet-service-plain > * { min-width: 0; }
/* Without an aside this block holds only the steps list and the calculator,
   both of which cap their own width -- left full-width it stretched far past
   its content and left a large empty band on the right. */
.pet-service-plain--no-aside { grid-template-columns: 1fr; max-width: 930px; }
.pet-service-plain h3 { font-size: 1.15rem; margin: 0 0 .6rem; }
.pet-service-plain ol { counter-reset: service-step; display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.pet-service-plain li { align-items: start; display: grid; font-size: 1rem; gap: .65rem; grid-template-columns: 28px minmax(0, 1fr); line-height: 1.5; }
.pet-service-plain li::before { align-items: center; background: var(--pet-primary); border-radius: 50%; color: var(--pet-surface); content: counter(service-step); counter-increment: service-step; display: inline-flex; font-size: .75rem; height: 28px; justify-content: center; width: 28px; }
.pet-service-plain aside { background: var(--pet-surface); border-radius: 16px; padding: 1rem; }
.pet-service-plain aside strong { font-size: .78rem; text-transform: uppercase; }
.pet-service-plain aside p { font-size: .82rem; line-height: 1.5; margin: .45rem 0 1rem; }
.pet-service-plain aside a { background: var(--pet-primary); border-radius: 999px; color: var(--pet-surface); display: inline-flex; font-size: .8rem; font-weight: 800; justify-content: center; padding: .65rem .9rem; text-decoration: none; }
.pet-service-plain aside a:hover { background: var(--pet-primary-hover); }
/* Real custom-build photos (moved here from the old /shop/ "Аквариумы на
   заказ"/"Террариумы на заказ" buckets) -- an independent section on its
   own, reusing the page's normal section rhythm and the /shop/ product
   grid's own 3-column default. */
.pet-service-examples-section { padding: clamp(2rem, 4vw, 3.5rem) 0 0; }
.pet-service-examples-subtitle { color: var(--pet-muted); font-size: .82rem; font-weight: 700; margin: 0 0 1.2rem; }
/* A disabled control is exempt from the contrast rules, but "exempt" is not
   the same as "unreadable": this greys the button out while keeping its
   white label at 6.28 against the fill. */
.pet-service-cta-locked { background: var(--pet-text-secondary) !important; cursor: not-allowed; pointer-events: none; }
/* ── The custom aquarium / terrarium configurator, /{lang}/custom/ ───────────
   Six steps, one visible at a time, in the owner's order: type, size (with the
   volume appearing as it is typed), construction, glass, extras, summary.

   Three things this block is holding up, none of them cosmetic:

   1. NOTHING MOVES WHEN A STEP CHANGES. .pet-tank-config-steps reserves a
      min-height, so the Back/Next row and the WhatsApp button stay exactly
      where they were while the content above them is swapped. On a phone that
      is the difference between pressing "Далее" and pressing whatever slid
      under the thumb. Every field's error line reserves its height for the
      same reason.
   2. IT MIRRORS. Every inset, margin and padding here is logical
      (inset-inline-*, margin-block-*, padding-inline-*), so the Hebrew page
      inside dir="rtl" lays itself out with no second rule: the unit moves to
      the left of the field, "Далее" moves to the left of the row, the radio
      moves to the right of its card.
   3. IT IS THE PHONE'S FIRST. The base rules are the narrow layout; the
      wider grids are added in the media query in 90-misc.css, not taken away.

   Contrast, measured rather than assumed: --pet-text-secondary is 6.28 on
   --pet-surface, 5.55 on --pet-surface-muted and 5.41 on --pet-primary-soft;
   --pet-primary is 6.39 on --pet-primary-soft; --pet-danger is 5.35 on
   --pet-surface. --pet-muted is deliberately NOT used inside the tinted
   panels: it measures 4.36 on --pet-surface-muted and would fail there. */
.pet-tank-config { background: var(--pet-surface); border: 1px solid var(--pet-border); border-radius: var(--pet-radius-lg); grid-column: 1 / -1; max-width: 890px; min-width: 0; padding: 1.1rem 1.1rem 1.25rem; }
/* This card is rendered INSIDE .pet-service-plain, which styles bare h3, ol
   and li for the numbered "Как это работает" list a few rules above --
   counter circles and all. Those selectors are element-qualified, so they
   beat a plain class here on specificity: without these four overrides the
   progress rail grows a green numbered bullet beside every step and lays its
   items out on the 28px grid that list uses. Scoped with .pet-tank-config so
   the win is by specificity rather than by source order, which a later split
   of this stylesheet could quietly reverse. */
.pet-tank-config .pet-tank-config-title { font-size: 1.2rem; margin: 0 0 .35rem; }
.pet-tank-config .pet-tank-config-progress ol { counter-reset: none; }
.pet-tank-config .pet-tank-progress-item { display: block; font-size: 1rem; gap: 0; }
.pet-tank-config .pet-tank-progress-item::before { content: none; display: none; }
.pet-tank-config-note { color: var(--pet-text-secondary); font-size: 1rem; line-height: 1.55; margin: 0 0 1rem; }
/* Shown only by the <noscript> rules in the shortcode, where the stepper is
   not running and the volume is therefore never printed. */
.pet-tank-nojs { color: var(--pet-text-secondary); display: none; font-size: .92rem; line-height: 1.5; margin: 0 0 1rem; }

/* The progress rail is navigation as well as a progress indicator: every
   entry is a real button, so a step already answered is one tap away instead
   of a walk back through the ones between. It carries the value chosen there,
   which is what lets a visitor check an earlier answer without leaving the
   step they are on. It scrolls sideways rather than wrapping, so the shape of
   the card does not change when a terrarium drops two of the six steps. */
.pet-tank-config-progress { margin: 0 0 1rem; }
.pet-tank-config-progress ol { display: flex; gap: .4rem; list-style: none; margin: 0; overflow-x: auto; padding: 0 0 .25rem; }
/* Each chip is as wide as its own words and the row scrolls, rather than
   six equal tracks that ellipsise "Конструкция" into "Констр…" on a phone.
   The chosen value is the one part allowed to be cut short: it can be a long
   word, and it is a reminder rather than the label. */
.pet-tank-progress-item { flex: 0 0 auto; min-width: 0; }
.pet-tank-progress-item[hidden] { display: none; }
/* border-box, or the .55rem of side padding and the 1px border are added
   outside the 100% and every step overhangs the progress rail. */
.pet-tank-progress-button { background: var(--pet-surface-muted); border: 1px solid transparent; box-sizing: border-box; border-radius: 12px; color: var(--pet-text-secondary); cursor: pointer; display: grid; font: inherit; gap: 0 .4rem; grid-template-columns: 1.35rem minmax(0, 1fr); padding: .45rem .55rem; text-align: start; width: 100%; }
.pet-tank-progress-index { background: var(--pet-surface); border-radius: 999px; font-size: .78rem; font-weight: 800; grid-column: 1; grid-row: 1; line-height: 1.35rem; text-align: center; }
.pet-tank-progress-name { font-size: .85rem; font-weight: 700; grid-column: 2; grid-row: 1; line-height: 1.35rem; white-space: nowrap; }
/* min-height, not :empty { display: none }. The script fills these in after
   the page has painted, so a line that collapsed while empty would grow every
   rail button a moment after load -- a measured 0.005 of layout shift, and two
   buttons left below the 40px a thumb needs. Reserving the row costs nothing
   and the summary and rail steps, which carry no value, simply keep it blank. */
.pet-tank-progress-pick { color: var(--pet-text); font-size: .8rem; grid-column: 2; grid-row: 2; max-width: 8rem; min-height: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pet-tank-progress-button[aria-current="step"] { background: var(--pet-primary-soft); border-color: var(--pet-primary); color: var(--pet-primary); }
.pet-tank-progress-button[aria-current="step"] .pet-tank-progress-index { background: var(--pet-primary); color: var(--pet-surface); }
.pet-tank-progress-button.is-done .pet-tank-progress-index { background: var(--pet-primary-soft); color: var(--pet-primary); }

/* Deliberately NOT given a min-height tall enough for every step.
   Measured at 390px the steps run 253, 491, 315, 317, 346 and 681 CSS px, so a
   reservation that stopped the card resizing would leave more than 400px of
   empty card under the first question -- a worse page in exchange for a
   metric. What actually matters is held two other ways: everything ABOVE this
   region is fixed height, so its top never moves and the visitor's eye stays
   where it was; and the Back/Next row is sticky below, so the control does not
   slide out from under the thumb on a phone. Load itself shifts nothing: the
   steps ship hidden, so the deferred script has nothing to collapse. */
.pet-tank-step-title { font-size: 1.08rem; margin: 0 0 .3rem; }
.pet-tank-step-title:focus-visible { outline: 3px solid var(--pet-focus); outline-offset: 3px; }
.pet-tank-step-hint { color: var(--pet-text-secondary); font-size: .92rem; line-height: 1.5; margin: 0 0 .9rem; }

/* Choice cards. Real radios, visually replaced but never removed from the
   accessibility tree or from the tab order: arrow keys move between them
   because they are still a radio group, which is the behaviour every
   hand-rolled version of this control loses. */
.pet-tank-choices { border: 0; display: grid; gap: .6rem; margin: 0; min-width: 0; padding: 0; }
.pet-tank-choice { cursor: pointer; display: block; position: relative; }
.pet-tank-choice input { accent-color: var(--pet-primary); block-size: 20px; inline-size: 20px; inset-block-start: .95rem; inset-inline-start: .85rem; margin: 0; position: absolute; }
.pet-tank-choice-body { background: var(--pet-surface); border: 1px solid var(--pet-border-input); border-radius: 14px; display: block; padding: .8rem .9rem; padding-inline-start: 2.6rem; transition: border-color .15s, background .15s; }
.pet-tank-choice-name { display: block; font-weight: 700; }
.pet-tank-choice-note { color: var(--pet-text-secondary); display: block; font-size: .88rem; line-height: 1.45; margin-block-start: .15rem; }
.pet-tank-choice:has(input:checked) .pet-tank-choice-body { background: var(--pet-primary-soft); border-color: var(--pet-primary); }
.pet-tank-choice input:focus-visible + .pet-tank-choice-body { outline: 3px solid var(--pet-focus); outline-offset: 2px; }
.pet-tank-choice:hover .pet-tank-choice-body { border-color: var(--pet-primary); }

/* Sizes this shop has actually built -- the two cubes are on this same page
   under "Примеры наших работ". A preset row is a recommendation, so it does
   not get to invent a size. */
.pet-tank-presets { margin: 0 0 .9rem; }
.pet-tank-presets-label { color: var(--pet-text-secondary); display: block; font-size: .85rem; font-weight: 700; margin-block-end: .4rem; }
.pet-tank-preset-row { display: flex; flex-wrap: wrap; gap: .4rem; }
/* No white-space rule here, and that is a measurement rather than an oversight.
   These pills carry a number and a unit in separate elements, which is exactly
   the shape that tears apart in the summary -- but they are flex: 0 0 auto
   items in a wrapping row, so each one is sized to its own content and has no
   width to wrap inside. Measured 2026-08-27 in all three languages at 320, 360,
   390 and 430px: every pill is 40px tall, and forcing white-space: normal
   changes neither the height nor the width by a pixel. A `nowrap` here was
   added and removed the same day for that reason -- it was a rule that could
   not affect anything, and a mutation removing it duly survived. */
.pet-tank-preset { background: var(--pet-surface); border: 1px solid var(--pet-border-input); border-radius: 999px; color: var(--pet-text); cursor: pointer; font: inherit; font-size: .92rem; min-height: 40px; padding: .3rem .85rem; }
.pet-tank-preset:hover { border-color: var(--pet-primary); color: var(--pet-primary); }
.pet-tank-preset-unit { color: var(--pet-text-secondary); }

/* Three fields in a row, because "120 × 50 × 50" is how a tank is said out
   loud and a stacked column of three numbers is not. The unit lives inside
   the field, where the eye already is while typing, rather than folded into
   the label -- and inset-inline-end puts it on the correct side of the
   Hebrew field without a second rule. */
.pet-tank-fields { display: grid; gap: .55rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pet-tank-field-label { color: var(--pet-text-secondary); display: block; font-size: .88rem; font-weight: 700; margin-block-end: .3rem; }
.pet-tank-field-input { display: block; position: relative; }
.pet-tank-field input, .pet-tank-field textarea { background: var(--pet-surface); border: 1px solid var(--pet-border-input); border-radius: 12px; box-sizing: border-box; color: var(--pet-text); font-family: inherit; font-size: 1.05rem; min-height: 48px; padding: .55rem .7rem; width: 100%; }
.pet-tank-field-input input { padding-inline-end: 2.9rem; }
/* The spinners are removed because the useful range is 10-300 in tenths: a
   pair of 1-cm arrows is 290 presses and a target smaller than a fingertip. */
.pet-tank-field input[type="number"] { -moz-appearance: textfield; }
.pet-tank-field input[type="number"]::-webkit-outer-spin-button,
.pet-tank-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pet-tank-field input:focus-visible, .pet-tank-field textarea:focus-visible { outline: 3px solid var(--pet-focus); outline-offset: 1px; }
.pet-tank-field input.is-invalid { border-color: var(--pet-danger); border-width: 2px; }
.pet-tank-field-unit { color: var(--pet-text-secondary); font-size: .9rem; inset-block-start: 50%; inset-inline-end: .75rem; pointer-events: none; position: absolute; transform: translateY(-50%); }
/* The height is reserved, not grown into: an error that appears by pushing the
   form down moves the button out from under the thumb about to press it. Two
   lines at this width, one on a wider screen (see 90-misc.css). */
.pet-tank-field-error { color: var(--pet-danger); font-size: .82rem; font-weight: 700; line-height: 1.3; margin: .3rem 0 0; min-height: 2.6em; }
.pet-tank-field-comment { margin-block-start: .9rem; }
.pet-tank-field-comment textarea { min-height: 5.5rem; resize: vertical; }

/* The volume readout. Its value paragraph is a live region that is always in
   the DOM and never hidden -- a region unhidden at the moment it has something
   to say is announced by nothing in several screen readers -- so it goes empty
   instead and :empty collapses it. The panel keeps its own reserved height, so
   a dimension being retyped does not make the block below it jump. */
.pet-tank-volume { background: var(--pet-primary-soft); border-radius: 14px; margin-block-start: .9rem; min-height: 5.6rem; padding: .75rem .9rem; }
.pet-tank-volume-value { color: var(--pet-primary); font-size: 1.25rem; font-weight: 800; line-height: 1.3; margin: 0; }
.pet-tank-volume-value:empty { display: none; }
.pet-tank-volume-note { color: var(--pet-text-secondary); font-size: .88rem; line-height: 1.45; margin: .35rem 0 0; }
.pet-tank-volume-note[hidden] { display: none; }

.pet-tank-check { align-items: flex-start; background: var(--pet-surface); border: 1px solid var(--pet-border-input); border-radius: 14px; cursor: pointer; display: flex; gap: .7rem; padding: .8rem .9rem; }
.pet-tank-check[hidden] { display: none; }
.pet-tank-check input { accent-color: var(--pet-primary); block-size: 20px; flex: 0 0 auto; inline-size: 20px; margin: .15rem 0 0; }
.pet-tank-check-name { display: block; font-weight: 700; }
.pet-tank-check-note { color: var(--pet-text-secondary); display: block; font-size: .88rem; line-height: 1.45; margin-block-start: .15rem; }
.pet-tank-check:has(input:checked) { background: var(--pet-primary-soft); border-color: var(--pet-primary); }
.pet-tank-check:has(input:focus-visible) { outline: 3px solid var(--pet-focus); outline-offset: 2px; }
.pet-tank-terrarium-note { color: var(--pet-text-secondary); font-size: .88rem; line-height: 1.5; margin: .9rem 0 0; }
.pet-tank-terrarium-note[hidden] { display: none; }

/* The summary is the message, not a description of it. The script fills
   .pet-tank-summary-message with the WhatsApp text split into one span per
   line and the newlines kept as text nodes between them, so this element's
   textContent IS what gets sent, character for character -- pre-wrap is what
   makes those newlines visible. Styling it is therefore purely a matter of
   colouring the spans; there is no second copy of the wording anywhere. */
.pet-tank-summary { background: var(--pet-surface-muted); border-radius: 16px; padding: .85rem .9rem .9rem; }
.pet-tank-summary-caption { color: var(--pet-text-secondary); font-size: .85rem; font-weight: 700; margin: 0 0 .5rem; }
.pet-tank-summary-message { background: var(--pet-surface); border-radius: 14px; color: var(--pet-text); font-size: .98rem; line-height: 1.6; overflow-wrap: break-word; padding: .8rem .9rem; white-space: pre-wrap; }
.pet-tank-summary-label { color: var(--pet-text-secondary); }
.pet-tank-summary-value { font-weight: 700; }
.pet-tank-action { margin-block-start: 1rem; }

/* Sticky, so on a phone the step's controls sit at the bottom of the screen
   however tall the step is, instead of below a fold the visitor has to go
   looking for. It settles into its natural place as soon as the card fits.
   position: sticky resolves here because nothing between this and the viewport
   sets overflow, contain, filter or transform -- body and .pet-page-shell use
   overflow-x: clip, which does not create a scrollport (the same reasoning as
   the floating category row in 85-section-jump.css).

   On the summary step it goes static: the only control left there is "Назад",
   and a bar pinned over the WhatsApp button would cover the one thing the
   visitor came to press. */
.pet-tank-config-nav { background: var(--pet-surface); border-block-start: 1px solid var(--pet-border); bottom: 0; display: flex; gap: .6rem; margin-block-start: 1rem; padding-block: .7rem; position: sticky; z-index: 2; }
.pet-tank-config.is-summary .pet-tank-config-nav { position: static; }
.pet-tank-nav-button { border-radius: 999px; cursor: pointer; font: inherit; font-weight: 800; min-height: 48px; padding: .6rem 1.4rem; }
.pet-tank-nav-button[hidden] { display: none; }
.pet-tank-nav-back { background: var(--pet-surface); border: 1px solid var(--pet-border-input); color: var(--pet-text); }
.pet-tank-nav-back:hover { border-color: var(--pet-primary); color: var(--pet-primary); }
/* margin-inline-start pushes the primary action to the end of the row, which
   is the right-hand end in Russian and English and the left-hand end in
   Hebrew, from this one declaration. */
.pet-tank-nav-next { background: var(--pet-primary); border: 1px solid var(--pet-primary); color: var(--pet-surface); margin-inline-start: auto; }
.pet-tank-nav-next:hover { background: var(--pet-primary-hover); border-color: var(--pet-primary-hover); }

/* .pet-aquarium-calc-action is kept as the CTA wrapper's class because
   assets/analytics.js identifies the WhatsApp conversion by that exact
   selector. Renaming it would silently stop the event. */
/* border-box: this is the full-width phone state of the call to action, and
   without it the 1.3rem of side padding puts the pill 42px past the panel. */
.pet-aquarium-calc-action a { align-items: center; background: var(--pet-primary); border-radius: 999px; box-sizing: border-box; color: var(--pet-surface); display: inline-flex; font-size: 1rem; font-weight: 800; justify-content: center; min-height: 48px; padding: .6rem 1.3rem; text-align: center; text-decoration: none; transition: background .2s, transform .2s; width: 100%; }

/* From here up the layout gets wider rather than the narrow one getting
   pieces taken away: the base rules above are the phone, which is where the
   owner's customers arrive from and where WhatsApp then opens. */
@media (min-width: 700px) {
  .pet-tank-config { padding: 1.4rem 1.5rem 1.5rem; }
  .pet-tank-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Six chips fit across the card at this width, so they go back to sharing
     it evenly -- a scrolling row of six short pills in 890px would look like
     something had gone wrong. */
  .pet-tank-progress-item { flex: 1 1 0; }
  /* The three numbers stop stretching once there is room: a 280px-wide box
     for a three-digit measurement reads as a text field, not a size. */
  .pet-tank-fields { gap: .75rem; grid-template-columns: repeat(3, minmax(0, 9.5rem)); justify-content: start; }
  /* One line is enough for the message at this width, so the reservation
     shrinks with it rather than leaving a band of empty card. */
  .pet-tank-field-error { min-height: 1.35em; }
  .pet-tank-volume { max-width: 32rem; }
  /* The summary is a preview of a message, and a message the full width of a
     890px card stops looking like one. It hugs the inline start, so it sits
     against the right-hand edge on the Hebrew page without a second rule. */
  .pet-tank-summary-message { max-width: 34rem; }
  .pet-aquarium-calc-action a { width: auto; }
}