/* shop catalogue, filters, product cards and headings
   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. */

.pet-aquarium-calc-action a:hover { background: var(--pet-primary-hover); transform: translateY(-2px); }
.pet-aquarium-terrarium-note { background: var(--pet-accent-soft); border-radius: 12px; color: var(--pet-accent-text); font-size: 1rem; font-weight: 700; line-height: 1.45; margin: .75rem 0 0; padding: .7rem .85rem; }
.pet-services-page { padding-bottom: clamp(2rem, 5vw, 4rem); }
.pet-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.pet-section-cta { align-items: center; background: var(--pet-primary-soft); border-radius: 28px; display: flex; gap: 2rem; justify-content: space-between; margin: 4rem 0; padding: 2rem clamp(2rem, 5vw, 5rem); }
.pet-section-cta h2 { font-size: clamp(1.8rem, 4vw, 3.4rem); letter-spacing: -.04em; margin: 0; }
.pet-section-cta p { margin: .4rem 0 0; }
/* Single column, not 1fr 1fr: the heading needs its full width to fit one
   line (below), which a half-width column can't give it at any reasonable
   font size. */
.pet-shop-heading { align-items: end; display: grid; gap: 2rem; grid-template-columns: 1fr; padding: clamp(3rem, 7vw, 6rem) 0 1rem; }
/* Lower ceiling/floor than the max-width:640px version this replaces: even
   at full column width, this phrase needs a smaller size than other page
   titles to fit one line without wrapping. */
.pet-shop-heading h2 { font-size: clamp(.85rem, 4vw, 3.5rem); letter-spacing: -.05em; line-height: .98; margin: 0; white-space: nowrap; }
.pet-shop-heading-copy { line-height: 1.6; margin: 0; max-width: 420px; }
.pet-shop-heading-copy p { margin: 0; }
/* A caution, not an error: the warm accent pair carries it. --pet-accent-text
   on --pet-accent-soft measures 4.91. */
.pet-shop-policy { background: var(--pet-accent-soft); border-radius: 8px; color: var(--pet-accent-text); font-size: .88rem; font-weight: 800; line-height: 1.4; margin-top: .8rem !important; padding: .65rem .8rem; }
.pet-shop-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.pet-shop-card { background: var(--pet-surface-muted); border-radius: 22px; overflow: hidden; position: relative; transition: background .2s, transform .2s, box-shadow .2s; }
.pet-shop-card-link { color: inherit; display: grid; gap: 1rem; min-height: 100%; text-decoration: none; }
.pet-shop-card:hover { background: var(--pet-primary-soft); transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in srgb, var(--pet-shadow-color) 14%, transparent); }
.pet-shop-card-image img { display: block; width: 100%; height: 170px; object-fit: cover; }
.pet-shop-card-body { padding: 1.7rem; display: grid; gap: 1rem; }
.pet-shop-card-mark { color: var(--pet-accent-text); font-size: .8rem; font-weight: 800; letter-spacing: .1em; }
.pet-shop-card h2 { font-size: 1.45rem; margin: 0; }
.pet-shop-card p { line-height: 1.55; margin: 0 0 1.2rem; }
.pet-shop-card-cta { color: var(--pet-primary); display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 800; }
.pet-shop-path { background: var(--pet-surface-muted); border-radius: var(--pet-radius-lg); display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; margin: 2rem 0 1rem; padding: 2rem; }
.pet-shop-path h2 { font-size: 1.25rem; margin: 0 0 1rem; }
.pet-shop-filters h2 { color: var(--pet-text); font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; margin: 0; white-space: nowrap; }
.pet-shop-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.pet-shop-chip, .pet-filter-chip { border: 1px solid var(--pet-primary); border-radius: 999px; color: var(--pet-primary); display: inline-block; font-size: .9rem; font-weight: 700; padding: .65rem .9rem; text-decoration: none; }
.pet-shop-chip:hover, .pet-filter-chip { background: var(--pet-primary-soft); }
/* A filter chip already rests on --pet-primary-soft, so its hover has to be
   a different step rather than the same tint again: it fills. */
.pet-filter-chip:hover { background: var(--pet-primary); color: var(--pet-surface); }
.pet-product-section, .pet-legacy-catalog, .pet-product-category { scroll-margin-top: 2rem; }

/* The ?q= banner assets/catalog.js builds when the shop is opened through a
   search link (and only then): it reports what is being shown and offers the
   way back to the full catalogue. Styled as a state of the page rather than a
   control, because nothing on the page sets it -- it arrives in the URL. */
.pet-catalog-query {
  align-items: center;
  background: var(--pet-surface-muted);
  border: 1px solid var(--pet-border);
  border-radius: var(--pet-radius-lg);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  justify-content: space-between;
  margin: 0 0 1.5rem;
  padding: .8rem 1.1rem;
}
.pet-catalog-query a {
  font-weight: 700;
  white-space: nowrap;
}
.pet-shop-filters { display: flex; flex-direction: column; gap: .9rem; padding: 2rem 0 1rem; }
.pet-shop-filters > div { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-start; }
/* Second level of "Быстрые переходы": one row per nested bucket (aquatics,
   reptiles), each listing the subcategories that actually rendered a block.
   Stacks the rows instead of inheriting the wrapping single-line flex above --
   the (0,2,0) selector is deliberate, it has to outrank both `.pet-shop-filters
   > div` here and its narrow-viewport override in 60-legal.css. */
.pet-shop-filters > .pet-shop-subfilters { flex-direction: column; gap: .75rem; }
.pet-shop-subfilter-group { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }
/* catalog.js sets .hidden on a row whose whole category is filtered to zero.
   The UA's own [hidden] rule is display:none, but an author `display: flex`
   above beats it, so the row has to be hidden here explicitly or it would stay
   on screen pointing at collapsed blocks. */
.pet-shop-subfilter-group[hidden] { display: none; }
/* wpautop() runs over the saved post_content and wraps a run of inline
   children -- here the row label plus its chips -- in a <p>, which would
   otherwise become the group's single flex child and collapse the row into one
   line of running text. display: contents hands the chips back to the flex
   container. Exactly the same fix, for exactly the same reason, as
   .pet-shop-global-filters > p above. */
.pet-shop-subfilter-group > p { display: contents; margin: 0; }
/* Names the parent bucket the row belongs to. Uppercase/letter-spacing match
   .pet-breadcrumbs' eyebrow treatment; both are no-ops in Hebrew, and the row
   itself mirrors with the page's own dir="rtl" because it is plain flex with
   no physical margins. */
.pet-shop-subfilter-label { color: var(--pet-muted); flex: 0 0 auto; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
/* Visibly subordinate to the top-level chips: same pill, one step smaller and
   unfilled until hover. .pet-filter-chip is still on these elements (catalog.js
   smooth-scrolls by that class), so these rules only need to win on the shared
   properties -- equal specificity, later in the file. */
.pet-filter-subchip { background: transparent; border-color: var(--pet-border-input); font-size: .82rem; font-weight: 700; padding: .45rem .75rem; }
.pet-filter-subchip:hover, .pet-filter-subchip:focus-visible { background: var(--pet-primary-soft); border-color: var(--pet-primary); }
.pet-shop-card a span { display: inline-block; margin-left: .4rem; }
[dir="rtl"] .pet-shop-card a span { margin-left: 0; margin-right: .4rem; transform: rotate(180deg); }
.pet-product-section { padding: clamp(3rem, 7vw, 6rem) 0 0; }
.pet-product-heading { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.pet-product-heading h2 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.05em; margin: 0; }
/* "↑ Наверх" (the sitewide footer shortcode, reused here) sits immediately
   left of the item count, as part of the same right-aligned row --
   justify-content: flex-end on the container keeps the two adjacent,
   unlike an earlier margin-inline-end: auto attempt (on a different row)
   that pinned it to the row's own left edge with a large gap instead. The
   shortcode's own color is tuned for the dark footer background;
   overridden here for this page's light background. */
.pet-product-heading-row { display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: flex-end; }
.pet-product-heading-row .pet-back-to-top { color: var(--pet-primary); }
.pet-product-heading-row > span { border: 1px solid var(--pet-border-strong); border-radius: 999px; color: var(--pet-text-secondary); flex: 0 0 auto; font-size: .7rem; font-weight: 800; letter-spacing: .12em; padding: .5rem .8rem; white-space: nowrap; }
/* Per-category brand/stock/sort -- independent of the global filters at the
   top of the page, narrows just this one section's own product grid. Sits
   flush right with its own "Label: value ▾" dropdown widgets, not native
   <select> elements, to match the reference pattern the client asked to
   match. */
.pet-category-local-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.pet-shop-global-filters { justify-content: flex-start; }
.pet-shop-global-filters > p { display: contents; margin: 0; }
.pet-reset-filters { align-items: center; color: var(--pet-primary); display: inline-flex; font-size: .8rem; font-weight: 800; min-height: 40px; padding: .4rem .2rem; text-decoration: underline; text-underline-offset: .18em; }
.pet-reset-filters:hover { color: var(--pet-primary-hover); }
.pet-category-local-filters .pet-back-to-top { color: var(--pet-primary); }
.pet-local-dropdown { position: relative; }
.pet-local-dropdown-toggle { align-items: center; background: var(--pet-surface); border: 1px solid var(--pet-border-input); border-radius: 10px; color: var(--pet-text); cursor: pointer; display: flex; font-family: inherit; font-size: .8rem; font-weight: 700; gap: .4rem; min-height: 40px; padding: .4rem .7rem; white-space: nowrap; }
.pet-local-dropdown-toggle::after { color: var(--pet-muted); content: "⌄"; font-size: .9rem; line-height: 1; }
.pet-local-dropdown-toggle:hover, .pet-local-dropdown.is-open .pet-local-dropdown-toggle { border-color: var(--pet-primary); }
/* The panel is position: fixed, so it is measured against the viewport and
   not against the page: it cannot be reached by scrolling the document, and
   whatever does not fit on screen simply is not on screen. With three stock
   options that never mattered. The brand list is over eighty entries long,
   which on a 390px phone is roughly four screens of menu -- the reader saw
   the first handful, could not scroll to the rest, and the ones below the
   fold were unreachable by any means.

   So the panel scrolls itself. max-height is set inline by catalog.js from
   the space actually left below (or above) the toggle, because that is a
   viewport measurement CSS cannot make; the 60vh here is the floor it falls
   back to before that runs and if it never does. overscroll-behavior keeps a
   flick that reaches the end of the list from carrying on into the page
   behind, which would scroll the toggle -- and therefore the fixed panel's
   anchor -- out from under the reader's thumb.

   max-width matters for the same screen: several brand labels carry the
   "— нужен каталог" suffix, and a 190px minimum plus a long label would
   otherwise push the panel off the side.

   box-sizing is stated because this theme has no global border-box reset (see
   00-base.css, which sets it per element where it is needed). Without it the
   .4rem padding and the 1px border are added *outside* the max-height the
   script measured, and the panel overshoots the edge it was fitted to by
   ~15px -- which, on a flipped panel, is 15px off the top of the screen. */
.pet-local-dropdown-menu { background: var(--pet-surface); border: 1px solid var(--pet-border); border-radius: 12px; box-shadow: 0 16px 34px color-mix(in srgb, var(--pet-shadow-color) 14%, transparent); box-sizing: border-box; list-style: none; margin: 0; max-height: 60vh; max-width: calc(100vw - 20px); min-width: 190px; overflow-y: auto; overscroll-behavior: contain; padding: .4rem; position: fixed; z-index: 40; }
.pet-local-dropdown-menu li { margin: 0; }
/* border-box for the same reason the panel above states it: the .7rem of
   side padding would otherwise be added outside the 100% and every option
   would be 22px wider than the menu that scrolls it. */
.pet-local-dropdown-menu button { background: transparent; border: 0; border-radius: 8px; box-sizing: border-box; color: var(--pet-text); cursor: pointer; display: block; font-family: inherit; font-size: .84rem; padding: .55rem .7rem; text-align: start; width: 100%; }
.pet-local-dropdown-menu button:hover { background: var(--pet-surface-muted); }
.pet-local-dropdown-menu button.is-current { color: var(--pet-primary); font-weight: 800; }
.pet-product-category { scroll-margin-top: 2rem; padding-top: 2.5rem; }
.pet-product-category + .pet-product-category { border-top: 1px solid var(--pet-border); margin-top: 3rem; }
.pet-product-category.is-empty-filter-result { padding-top: .8rem; }
.pet-product-category.is-empty-filter-result + .pet-product-category.is-empty-filter-result { border-top: 0; margin-top: .45rem; }
.pet-product-category.is-empty-filter-result .pet-product-category-heading { margin-bottom: 0; }
.pet-product-category.is-empty-filter-result .pet-category-local-filters,
.pet-product-category.is-empty-filter-result [data-catalog-grid] { display: none; }
.pet-catalog-category-section.is-empty-filter-result { padding-top: 1.25rem; }
.pet-catalog-category-section.is-empty-filter-result .pet-category-description,
.pet-catalog-category-section.is-empty-filter-result .pet-product-category { display: none; }
.pet-catalog-category-section.is-empty-filter-result > .pet-product-heading { margin-bottom: 0; }
.pet-catalog-category-section.is-empty-filter-result > .pet-product-heading .pet-category-local-filters,
.pet-catalog-category-section.is-empty-filter-result > [data-catalog-grid] { display: none; }
/* Shown by catalog.js only when every category has collapsed to zero matches.
   The explicit [hidden] rule is not redundant: this element is display:block
   below, and a later display declaration beats the UA sheet's [hidden] rule. */
.pet-catalog-no-results { background: var(--pet-surface-muted); border-radius: 12px; color: var(--pet-text); display: block; font-size: .92rem; margin-top: 1rem; padding: .9rem 1.1rem; }
.pet-catalog-no-results[hidden] { display: none; }
.pet-product-category-heading { align-items: baseline; display: flex; gap: 1rem; margin-bottom: 1.2rem; }
.pet-product-category-heading span { color: var(--pet-accent-text); font-size: .8rem; font-weight: 800; letter-spacing: .12em; }
.pet-product-category-heading h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -.03em; margin: 0; }
.pet-product-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
.pet-product-card { background: var(--pet-surface); border: 1px solid var(--pet-border); border-radius: 18px; display: flex; flex-direction: column; min-height: 190px; padding: 1.3rem; }
.pet-product-card h3 { font-size: 1.05rem; margin: 0; }
.pet-product-sku { color: var(--pet-muted); font-size: .72rem; font-weight: 800; letter-spacing: .05em; margin: 0 0 .55rem; text-transform: uppercase; }
/* The price is the fact the card exists to state, not a call to action, so
   it takes the strongest reading colour rather than the action colour --
   which is now the same green as every button on the page. */
.pet-product-price { color: var(--pet-text); font-size: 1.5rem; font-weight: 800; margin: .5rem 0; }
.pet-stock { color: var(--pet-success); font-size: .85rem; }
.pet-product-card a { border-top: 1px solid var(--pet-border); color: var(--pet-primary); font-size: .85rem; font-weight: 800; margin-top: auto; padding-top: .8rem; text-decoration: none; }
.pet-product-actions { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; margin-top: auto; }
.pet-product-actions a { border-top: 1px solid var(--pet-border); color: var(--pet-primary); font-size: .78rem; font-weight: 800; padding-top: .75rem; text-decoration: none; }
.pet-catalog-pagination { display: flex; justify-content: center; padding: 1.5rem 0 0; }
.pet-catalog-pagination button { background: var(--pet-primary); border: 0; border-radius: 999px; color: var(--pet-surface); cursor: pointer; font-size: .9rem; font-weight: 800; min-height: 48px; padding: .65rem 1.3rem; }
.pet-catalog-pagination button:hover { background: var(--pet-primary-hover); }
/* Inside a --pet-primary fill, so the warm tone here has to be the soft one:
   --pet-accent measures 2.55 against that ground, --pet-accent-soft 6.08. */
.pet-catalog-pagination button span { color: var(--pet-accent-soft); margin-inline-start: .35rem; }
[data-product-card][hidden], [data-catalog-section][hidden], .pet-catalog-pagination[hidden] { display: none !important; }
[hidden] { display: none !important; }
.pet-product-detail { color: var(--pet-text); margin: clamp(2rem, 5vw, 5rem) auto; max-width: 1180px; width: calc(100vw - 48px); }
.pet-product-back { color: var(--pet-primary); display: inline-block; font-weight: 800; margin-bottom: 1.5rem; text-decoration: none; }
.pet-product-detail-card { align-items: center; background: var(--pet-primary-soft); border-radius: 28px; display: grid; gap: clamp(2rem, 6vw, 6rem); grid-template-columns: 1fr 1fr; overflow: hidden; padding: clamp(1.5rem, 4vw, 4rem); }
/* Same defect as the grid card above, on the product page's own picture: no
   border-box reset means `width: 100%` and `padding: 1rem` add, and the image
   overhangs its half of the grid by 32px. `.pet-product-detail-card` has
   `overflow: hidden`, so it was clipped rather than visible. The calc keeps
   the picture band at exactly the height it has been rendering. */
.pet-product-detail-card > img { background: var(--pet-surface); border-radius: 20px; box-sizing: border-box; height: calc(min(520px, 60vw) + 2rem); object-fit: contain; padding: 1rem; width: 100%; }
.pet-product-detail-card h1 { font-size: clamp(2.2rem, 5vw, 4.8rem); letter-spacing: -.055em; line-height: 1; margin: 0 0 1rem; }
.pet-product-description { line-height: 1.7; max-width: 620px; }
.pet-product-detail-price { color: var(--pet-text); font-size: 1.4rem; font-weight: 800; margin: 1.5rem 0; }
.pet-sample-catalog { background: var(--pet-surface-muted); border: 1px solid var(--pet-border); border-radius: var(--pet-radius-lg); margin-top: clamp(3rem, 7vw, 6rem); overflow: hidden; scroll-margin-top: 2rem; }
.pet-sample-catalog > summary { align-items: center; cursor: pointer; display: flex; gap: 1rem; justify-content: space-between; list-style: none; min-height: 88px; padding: 1.5rem 2rem; }
.pet-sample-catalog > summary::-webkit-details-marker { display: none; }
.pet-sample-catalog > summary::after { color: var(--pet-primary); content: "+"; font-size: 2rem; font-weight: 600; line-height: 1; }
.pet-sample-catalog[open] > summary::after { content: "−"; }
.pet-sample-catalog > summary span { font-size: clamp(1.35rem, 2.5vw, 2rem); font-weight: 800; letter-spacing: -.03em; }
.pet-sample-catalog > summary small { color: var(--pet-text-secondary); font-size: .8rem; font-weight: 700; margin-inline-start: auto; }
.pet-sample-catalog-content { border-top: 1px solid var(--pet-border); padding: 0 2rem 2rem; }
.pet-legacy-catalog { padding: clamp(4rem, 8vw, 7rem) 0 0; }
.pet-legacy-product-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, 1fr); }
.pet-legacy-product-card { background: var(--pet-surface); border: 1px solid var(--pet-border); border-radius: 22px; display: flex; flex-direction: column; overflow: hidden; }
/* box-sizing, and the height carries the padding with it, added 2026-08-27.

   This theme has no global border-box reset (see 00-base.css, which states it
   per element), so `width: 100%` plus `padding: 1rem` ADD: every product card
   image on the shop grid and the aquaristic page drew 32px wider than the
   card that holds it. Measured in headless Chrome by
   tools/storefront-audit/browser-check.js: 428px inside a 398px card on
   desktop and 396px inside 366px on a phone, on all 946 aquaristic cards, in
   all three languages. `.pet-legacy-product-card` has `overflow: hidden`, so
   the spill was clipped and nothing looked wrong -- which is exactly how the
   same defect stayed alive in `.pet-fish-card-photo` (80-pets.css) until it
   was measured, and this is the base rule that one was overriding.

   The height goes 260 -> 292 (260 + 2 x 1rem) so the picture band is drawn at
   precisely the size it has been drawing at all along. The fix is the
   overflow and nothing else: no card moves. */
.pet-legacy-product-card > img { background: var(--pet-surface-muted); box-sizing: border-box; display: block; height: 292px; object-fit: contain; padding: 1rem; width: 100%; }
.pet-legacy-product-body { display: flex; flex: 1; flex-direction: column; padding: 1.3rem; }
.pet-legacy-product-body h3 { font-size: 1.1rem; margin: 0; }
.pet-legacy-variant-badge { background: var(--pet-surface-muted); border-radius: 999px; color: var(--pet-text-secondary); display: inline-block; font-size: .72rem; font-weight: 800; margin: .5rem 0 0; padding: .25rem .65rem; width: fit-content; }
.pet-legacy-price { color: var(--pet-text); font-weight: 800; margin: .6rem 0 1rem; }
.pet-legacy-product-body details { border-top: 1px solid var(--pet-border); margin-bottom: 1rem; padding-top: .8rem; }
.pet-legacy-product-body summary { cursor: pointer; font-size: .85rem; font-weight: 800; }
.pet-legacy-product-body details p { font-size: .88rem; line-height: 1.55; overflow-wrap: anywhere; }
/* The bare "read more" link at the foot of a card: a rule for an <a> that
   carries no styling of its own. `:not(.pet-button)` is not decoration --
   this selector is 0-1-1, so it outranks every 0-1-0 class a button brings
   with it, and it sets four properties a button also sets. Measured
   2026-08-27 in headless Chrome on the fish price list, where the GloFish
   card's `.pet-button.pet-button-primary` action landed in exactly this
   position: this rule's `color: var(--pet-primary)` beat
   `.pet-button-primary`'s `color: var(--pet-surface)`, so the label was drawn
   in the same dark green as the pill behind it and the button read as an
   empty green blob in all three languages; its `padding-top: .8rem` was
   added to `.pet-button`'s `padding: 0 1.5rem` and pushed the words out of
   the middle; and its `border-top` drew a line across the pill.

   Loading later does not help a button here -- specificity is settled before
   source order, which AGENTS.md records having been learned twice already.
   Excluding buttons is the fix that covers the next one as well as this one;
   the sibling rule below shows the older answer, a per-component selector
   raised to 0-2-1, and every other card in the shop uses that link class, so
   nothing on any page changes shape from this. */
.pet-legacy-product-body > a:not(.pet-button) { border-top: 1px solid var(--pet-border); color: var(--pet-primary); font-size: .85rem; font-weight: 800; margin-top: auto; padding-top: .8rem; text-decoration: none; }
.pet-legacy-product-body > .pet-product-card-link { align-items: center; background: var(--pet-primary); border: 0; border-radius: 999px; color: var(--pet-surface); display: flex; justify-content: space-between; margin-top: auto; padding: .8rem 1rem; transition: background .2s, transform .2s; }
.pet-legacy-product-body > .pet-product-card-link:hover { background: var(--pet-primary-hover); color: var(--pet-surface); transform: translateY(-2px); }
/* The card link's arrow glyph, mirrored for Hebrew the same way the five
   other arrow glyphs already are (.pet-shop-card a span above, .pet-info-cta,
   .pet-event-action, .pet-specialty-card-cta, .pet-breadcrumbs). Found on the
   2026-08-24 RTL pass: every arrow rotated except this one, so a Hebrew card
   pointed away from its own destination. inline-block because a span only
   honours transform as a box. */
[dir="rtl"] .pet-product-card-link [aria-hidden="true"] { display: inline-block; transform: rotate(180deg); }
.pet-local-product-card .pet-product-price { margin-bottom: 1rem; }
.pet-local-product-card details { margin-top: 0; }
.pet-events-page { padding-bottom: 0; }
.pet-event-agenda { padding: clamp(3rem, 7vw, 6rem) 0 1rem; }
.pet-event-agenda > header { align-items: end; display: flex; gap: 2rem; justify-content: space-between; }
.pet-event-agenda > header h2 { font-size: clamp(2.2rem, 5vw, 4.5rem); letter-spacing: -.05em; line-height: .98; margin: 0; }
.pet-event-agenda > header p:last-child { line-height: 1.6; margin: 1rem 0 0; max-width: 620px; }
#pet-event-results { align-items: center; background: var(--pet-accent); border-radius: 50%; color: var(--pet-text); display: inline-flex; flex: 0 0 auto; font-size: 1.2rem; font-weight: 800; height: 58px; justify-content: center; width: 58px; }
.pet-event-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2rem 0 0; }
.pet-event-card { background: var(--pet-surface); border: 1px solid var(--pet-border); border-radius: var(--pet-radius-lg); display: flex; flex-direction: column; overflow: hidden; position: relative; scroll-margin-top: 2rem; }
/* The card slot is 3:2 and so is the artwork (*-event.webp, master-class.webp),
   so nothing is cropped at display time. It used to be square art in this wide
   slot, and `cover` answered that by cutting about 40% off the height -- which
   is what beheaded the doberman and clipped the top fish. The fix belongs in
   the asset, not here: the subject is trimmed and re-centred on a 3:2 canvas
   with its own margin, which is why this needs no padding of its own. */
.pet-event-media { aspect-ratio: 3 / 2; overflow: hidden; }
.pet-event-media img { display: block; height: 100%; object-fit: cover; width: 100%; }
.pet-event-date { align-items: center; background: var(--pet-primary); border: 4px solid var(--pet-surface); border-radius: 18px; color: var(--pet-surface); display: flex; flex-direction: column; inset-block-start: 16px; inset-inline-start: 16px; justify-content: center; min-height: 92px; padding: .7rem; position: absolute; text-align: center; width: 108px; z-index: 2; }
.pet-event-date strong { font-size: 2rem; line-height: 1; }
.pet-event-date span { font-size: .7rem; font-weight: 800; letter-spacing: .06em; margin-top: .35rem; text-transform: uppercase; }
.pet-event-date.is-pending { background: var(--pet-accent); color: var(--pet-text); }
.pet-event-date.is-pending strong { font-size: .82rem; line-height: 1.15; }
.pet-event-date time { align-items: center; display: flex; flex-direction: column; justify-content: center; }
.pet-event-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.pet-event-status { align-self: flex-start; background: var(--pet-surface-muted); border-radius: 999px; color: var(--pet-text); font-size: .7rem; font-weight: 800; padding: .35rem .65rem; }
.pet-event-status-open { background: var(--pet-success-soft); color: var(--pet-success); }
.pet-event-status-full, .pet-event-status-cancelled { background: var(--pet-danger-soft); color: var(--pet-danger); }
.pet-event-card h2 { font-size: 1.35rem; margin: 1rem 0 .6rem; }

/* Legacy catalogue entries the real price list does not back. Kept findable
   rather than deleted, but marked so nobody quotes a price from them. Amber
   rather than red: this is "ask us", not "broken". */
.pet-product-unconfirmed {
  align-self: flex-start;
  background: var(--pet-accent-soft);
  border: 1px solid var(--pet-accent);
  border-radius: 999px;
  color: var(--pet-accent-text);
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0 0 .5rem;
  padding: .22rem .6rem;
}

/* What a bred-animal card says about its own picture, on /shop/ and on the
   product page alike. Two different sentences share this one rule: "the photo
   shows current stock, not this animal" and "this is a drawn species icon,
   there is no photograph yet". Both are corrections to what a product image
   normally implies, so they are quiet rather than loud -- an amber badge like
   .pet-product-unconfirmed above would read as a warning about the animal
   instead of a note about the picture.

   Whole rule kept inside this one file: assets/css/ is enqueued as ten
   separate <link>s and is never concatenated, so a declaration block split
   across the join breaks both halves silently (AGENTS.md, "The stylesheets are
   not concatenated"). */
.pet-product-image-note,
.pet-pdp-image-note {
  color: var(--pet-text-secondary);
  font-size: .78rem;
  line-height: 1.45;
  margin: 0 0 .7rem;
}

.pet-pdp-image-note {
  margin: .7rem 0 0;
  text-align: center;
}

/* Pack-shot images arrive on a baked-in white rectangle; multiply lets the
   white melt into whatever the card or section paints behind it, which reads
   as a cut-out without touching a single file. Scoped by data-source because
   bred rows carry real photographs of live animals -- multiply would darken
   the whole photo, not just a background it does not have.

   seashell is excluded for the opposite reason and it is worth stating,
   because this selector is a blacklist and therefore opts every FUTURE source
   in by default. Reef Octopus ships its HY pump renders already cut out --
   all ten masters are TrueColorAlpha with a transparent canvas, measured
   2026-08-26 -- so there is no white here for multiply to melt. What it would
   still do is darken the pump itself wherever the backdrop is not pure white:
   the related strip paints --pet-surface-muted (#EEF2EF) behind the image, so
   a dark grey pump comes out a few percent darker and slightly tinted for no
   gain at all. Nothing renders a seashell card yet (that catalogue has no
   builder); the exclusion is here now because the day one does, the defect
   would be invisible and nothing would fail. */
article[data-product-card]:not([data-source="bred"]):not([data-source="seashell"]) img { mix-blend-mode: multiply; }

/* Pre-order line on a live-animal card. Quieter than the price and set off
   from the photograph caption above it, because the two say different things:
   the caption explains the picture, this explains the wait. */
.pet-product-preorder-note { color: var(--pet-primary); font-size: .82rem; font-weight: 700; margin: .35rem 0 0; }