/* legal and cancellation pages, breakpoints for the above
   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-event-card p { line-height: 1.6; margin: 0; }
.pet-event-meta { border-top: 1px solid var(--pet-border); display: flex; flex-wrap: wrap; font-size: .75rem; font-weight: 800; gap: .5rem 1rem; justify-content: space-between; margin-top: auto; padding-top: 1.2rem; }
.pet-event-action { margin-top: auto; padding-top: 1rem; }
/* Tighter than before (.7rem 1rem): these read as chips, not primary
   buttons, and the extra bulk pushed event cards taller than their content
   needed. min-height keeps the tap target usable on touch. */
.pet-event-action a { align-items: center; background: var(--pet-primary); border-radius: 999px; color: var(--pet-surface); display: flex; font-size: .82rem; font-weight: 800; justify-content: space-between; min-height: 40px; padding: .42rem .85rem; text-decoration: none; transition: background .2s, transform .2s; }
.pet-event-action a:hover { background: var(--pet-primary-hover); transform: translateY(-2px); }
.pet-event-action a b { display: inline-block; margin-inline-start: .25rem; }
[dir="rtl"] .pet-event-action a b { transform: rotate(180deg); }
.pet-event-empty-note { background: var(--pet-accent-soft); border-radius: 18px; font-weight: 700; line-height: 1.55; margin: 1.25rem 0 0; padding: 1.2rem 1.4rem; }
.pet-event-faq-section { padding: clamp(3rem, 7vw, 6rem) 0 1rem; }
.pet-event-faq-section > h2 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.05em; margin: 0 0 1.5rem; }
.pet-event-faq { border-top: 1px solid var(--pet-border-strong); padding: 1rem 0; }
.pet-event-faq:last-child { border-bottom: 1px solid var(--pet-border-strong); }
.pet-event-faq summary { cursor: pointer; font-size: 1.05rem; font-weight: 800; }
.pet-event-faq p { line-height: 1.6; margin: .8rem 0 0; max-width: 760px; }
/* Flush left, not centred: the hero above it (eyebrow, h1, lead, CTA) is
   left-aligned, so an auto-centred column below made the page look like two
   unrelated layouts stacked. max-width stays -- long legal text still needs
   a readable measure. */
.pet-legal-content { margin: 2rem 0 5rem; max-width: 860px; padding-inline-start: clamp(2.25rem, 5vw, 4.5rem); }
.pet-legal-block { border-bottom: 1px solid var(--pet-border); padding: 1.5rem 0; }
.pet-legal-block h2 { font-size: 1.35rem; margin: 0 0 .6rem; }
.pet-legal-block p { line-height: 1.7; margin: 0 0 .75rem; }
.pet-legal-block p:last-child { margin-bottom: 0; }
.pet-legal-block ul { line-height: 1.7; margin: .2rem 0 0; padding-inline-start: 1.4rem; }
.pet-legal-block li + li { margin-top: .45rem; }

/* 1280px used to be the threshold, but even at 1440-1500px the 3-column
   single-row header (nav | logo | cart/account/language) is too tight for
   all 5 nav links plus the logo to fit without the nav column clipping its
   last item(s) -- confirmed empirically (1600px: fits clean; 1440px: last
   link still clipped). Raised to 1560px.
   This used to switch the header to a stacked 2-row layout (logo centred
   above, nav below) instead of what follows now -- a hamburger. That meant
   the header's own grid changed shape at this breakpoint (1 row of 3
   columns -> 2 rows of 2), so the logo visibly jumped to a different
   position exactly at 1560px: reported by the owner as the header "shifting"
   at 125% browser zoom (which crosses this width on an ordinary desktop
   monitor) and on tablets. The grid itself no longer changes at any width
   now -- same minmax(0,1fr) / max-content / minmax(0,1fr) columns as
   desktop, always -- so the logo's position is continuous across this
   breakpoint; only the middle-column's *content* (full nav vs. a small
   hamburger button) changes, which does not move the logo at all. */
@media (max-width: 1560px) {
  .pet-site-header { padding-left: 16px !important; padding-right: 16px !important; }
  .pet-nav-hamburger { display: flex; }
  /* Collapsed by default; assets/nav-hamburger.js toggles .pet-nav-is-open
     on <body> when the hamburger button is pressed. */
  .pet-primary-nav { display: none; }
  body.pet-nav-is-open .pet-primary-nav {
    background: var(--pet-surface);
    border-bottom: 1px solid var(--pet-border);
    box-shadow: 0 18px 34px color-mix(in srgb, var(--pet-shadow-color) 14%, transparent);
    box-sizing: border-box;
    display: block;
    left: 0;
    /* A raw percentage in max-height needs its ancestor chain to have an
       explicit (not auto) height to resolve at all -- .pet-site-header's
       height comes from its own content, so "100%" here was invalid and the
       whole calc() with it. 80vh is a plain viewport-relative cap instead:
       generous enough for the full nav on an ordinary phone/tablet screen,
       and overflow-y below still scrolls the rest on anything shorter. */
    max-height: 80vh;
    overflow-y: auto;
    padding: .5rem 16px 1rem;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 50;
  }
  body.pet-nav-is-open .pet-primary-nav > ul { align-items: stretch; flex-direction: column; gap: 2px; width: 100%; }
  /* border-box on both, or the .7rem of side padding is added outside the
     100% and every open-menu row overhangs the drawer by 22px. */
  body.pet-nav-is-open .pet-primary-nav a,
  body.pet-nav-is-open .pet-nav-dropdown-toggle { box-sizing: border-box; font-size: 1rem; padding: .8rem .7rem; width: 100%; }
  body.pet-nav-is-open .pet-nav-dropdown-toggle { justify-content: space-between; }
  /* The Shop/Pets dropdown menus used to stay nav-dropdown.js's own
     position: fixed panel here too (computed from the toggle's rect, same
     as desktop), on the assumption that reusing it as a "panel on a panel"
     would read fine since both share the same cream/white card look. Wrong
     -- confirmed by an actual phone screenshot: the floating panel landed
     wherever the toggle's on-screen position happened to put it, which
     inside an already-scrolled hamburger panel meant overlapping the
     button that opened it and spilling past the panel's own edge, not
     sitting under it like a mobile accordion should. Forcing it static
     turns it into exactly that -- an inline expand/collapse in normal
     document flow, in the same spot every time regardless of where the
     toggle scrolled to. This only touches submenus reached through the
     hamburger; nav-dropdown.js's own position:fixed placement is untouched
     for the desktop hover/click case above 1560px. */
  body.pet-nav-is-open .pet-nav-dropdown-menu {
    background: var(--pet-surface);
    border-radius: 12px;
    box-shadow: none;
    /* border-box, or the .3rem padding is added outside the 100% and the
       submenu card overhangs the drawer it is nested inside. */
    box-sizing: border-box;
    left: auto !important;
    margin: .25rem 0 .4rem;
    padding: .3rem;
    position: static !important;
    top: auto !important;
    width: 100%;
  }
  /* The nested sub-dropdown ("Аквариумистика"'s own 13 specialty groups)
     is the same component one level deeper -- same fix, plus a left
     indent so it visibly reads as nested under its own parent row rather
     than looking like a sibling of the top-level Shop/Pets items. */
  body.pet-nav-is-open .pet-nav-subdropdown-menu { padding-inline-start: 1rem; }
  /* Accordion geometry -- the missing half of the position:static fix above,
     from the owner's 2026-08-24 iPhone screenshot of /ru/: the "Магазин"
     submenu rendered as a wide card to the RIGHT of a narrow toggle chip,
     clipped at the viewport edge, with the hero bleeding through. static
     only puts a menu back into normal flow; the flow inside every
     .pet-nav-dropdown <li> is still 10-header.css's desktop display:flex
     ROW, so the in-flow menu sat BESIDE its own toggle. Three desktop rules
     conspired, each overridden here and only here:
     - .pet-primary-nav's max-width: clamp(320px, 44vw, 640px) (10-header.css)
       was never lifted, so the drawer panel itself capped at 320px on a
       phone and never reached its own left:0/right:0 -- that is the gap the
       page showed through;
     - .pet-nav-dropdown's display:flex row: flex-wrap lets every
       width:100% child take its own line instead, which is the accordion --
       toggle row, then menu row; in a nested row the link and the round
       sub-toggle share the first line and the submenu wraps under them;
     - the drawer's own `a, .pet-nav-dropdown-toggle { width: 100% }` above
       also matches the 32px round .pet-nav-subdropdown-toggle and blew it
       up into a full-width pill; its fixed size is restored at higher
       specificity.
     white-space: normal because a full-width row on a 320-390px phone is
     still narrower than the longest category label ("Аксессуары и
     сопутствующие товары"), and the desktop nav's nowrap clipped it.
     Everything is scoped under .pet-primary-nav so the language switcher in
     .pet-header-end keeps its floating dropdown, and under
     body.pet-nav-is-open so nothing here can leak into the desktop nav. */
  body.pet-nav-is-open .pet-primary-nav { max-width: none; }
  body.pet-nav-is-open .pet-primary-nav .pet-nav-dropdown { flex-wrap: wrap; }
  body.pet-nav-is-open .pet-primary-nav .pet-nav-dropdown-menu { flex-basis: 100%; }
  body.pet-nav-is-open .pet-primary-nav a,
  body.pet-nav-is-open .pet-primary-nav .pet-nav-dropdown-toggle { white-space: normal; }
  body.pet-nav-is-open .pet-primary-nav .pet-nav-subdropdown-toggle { flex: 0 0 auto; width: 32px; }
  /* The same auto / minmax(0,1fr) / auto shape the 560px block below already
     used, applied across the whole hamburger band instead of only at the
     bottom of it. The columns it replaces -- minmax(0,1fr) max-content
     minmax(0,1fr), inherited from the desktop layout -- handed the two end
     columns a fixed half-share of whatever the fixed-width logo did not
     claim, and .pet-header-end is flex-wrap: nowrap with every child
     flex: 0 0 auto, so once cart + dashboard + account + language needed more
     than that share it did not wrap or shrink: it overflowed its own track,
     and justify-self: end sends that overflow inward, straight across the
     centred wordmark. Measured on iPhone-landscape viewports with an admin
     logged in (the case the owner screenshotted): at 844x390 .pet-header-end
     was 410.8px wide in a 212.5px column and started at x=417 inside a
     wordmark spanning 228.5-615.5, so the cart badge sat on the "T", the
     dashboard pill ran through the logo's tail and the avatar landed on its
     right. With auto end columns the hamburger and the control
     cluster take exactly what they need and the logo column absorbs the rest,
     so the row shrinks instead of collapsing on top of itself. */
  .pet-site-header > .wp-block-group { column-gap: clamp(6px, 1.5vw, 16px); grid-template-columns: auto minmax(0, 1fr) auto; }
  /* Was clamp(1.25rem, 3vw, 2.5rem) all the way down to 781px -- 25px of air
     between the icons and the language switcher on a viewport that had none
     to spare. Unchanged at the top of the band, a third of it at phone
     landscape widths. */
  .pet-header-end { gap: clamp(.5rem, 1.6vw, 2.5rem); }
  /* Was a flat 387x84 from 1560px down to 781px: 46% of an 844px landscape
     viewport spent on the logo alone, which is what left the control cluster
     nothing to fit in. Fluid instead, and identical to the old fixed pair at
     the top of the band (7vw and 30vw both hit their caps above ~1290px), so
     nothing moves on a desktop. max-width caps it at its own grid track as
     well, so if the controls ever do need more room than a viewport has, the
     logo gives way rather than being painted over. */
  .pet-wordmark { height: clamp(48px, 7vw, 84px); max-width: 100%; width: min(30vw, 387px); }
  /* Same collapse, same band, in the footer: .pet-wordmark is the footer's
     first column too, and the copyright line is white-space: nowrap
     (30-footer.css) inside the middle minmax(0,1fr) column, so it overflowed
     that column on both sides and painted over the wordmark on one side and
     the last-updated stamp on the other -- the second thing the owner
     screenshotted, measured at 844x390, 852x393 and 932x430 alike. The
     wordmark shrinks with the rule above; letting the copyright wrap when it
     genuinely does not fit is the other half. It still sits on one line
     wherever there is room for one, because this only permits a wrap. */
  .pet-footer-bottom > :nth-child(2) { white-space: normal; }
  /* Smaller than the header's copy of the same logo, and only here. The
     footer row has to seat three things across one line, not two, so at
     844px the header's 253px logo left the credit line a 277px column and
     four wrapped lines; 169px leaves it 362px and two. The header does not
     have that problem and keeps the larger mark. */
  .pet-footer-bottom .pet-wordmark { height: clamp(40px, 4.6vw, 60px); width: min(20vw, 200px); }
}

/* The 781-1280px product-detail-page-only squeeze rules that used to live
   here are gone -- that whole range is inside the 1560px hamburger
   breakpoint now (see above), where .pet-primary-nav is display:none
   regardless of what font-size a rule here gave it. */
@media (max-width: 780px) {
  .pet-site-header { padding-left: 16px !important; padding-right: 16px !important; }
  /* No grid-column/-row placement here any more -- the header keeps the same
     3-column (hamburger | logo | cart/account/language) row all the way
     down to this width, same reasoning as the 1560px breakpoint above (see
     its comment): a layout that changes shape at a breakpoint moves the
     logo, one that only shrinks does not. */
  .pet-header-end { gap: 8px; }
  .pet-wordmark { height: 55px; width: min(40vw, 220px); }
  .pet-site-header .wp-block-site-logo { display: none; }
  .pet-site-header .wp-block-site-title { font-size: 1.15rem !important; white-space: nowrap; }
  .pet-site-header .wp-block-site-title + p { font-size: 9px !important; }
  .pet-header-actions { gap: 8px; }
  /* Icon only below this width -- the button stays, its word does not. The
     dashboard shortcut is the owner's own and is never removed; what is
     removed is 130px of label text (the Russian one measured 174.4px wide as a
     pill, against 44px for the icon alone), which is the single
     largest item in the header on a phone and the difference between the
     control cluster fitting beside the logo and overrunning it. Measured
     before this change: the pill overlapped the wordmark at every width from
     390 to 932 with an admin logged in. The link keeps its own localized
     aria-label, so its accessible name is unchanged and nothing here is
     hidden from a screen reader; it now matches the cart and the account
     avatar, which have always been icon-only. Above 780px the label is back,
     because the row has room for it there. */
  .pet-header-dashboard { padding: 0; width: 44px; }
  .pet-header-dashboard-label { display: none; }
  .pet-home { width: calc(100vw - 24px); padding: 0 12px; }
  .pet-hero { grid-template-columns: 1fr; }
  .pet-hero { border-radius: 22px; }
  .pet-hero-copy { padding: 32px 24px; }
  /* Font size deliberately not overridden here -- see .pet-hero h1. */
  .pet-hero h1 { overflow-wrap: anywhere; }
  .pet-hero-art { min-height: 300px; }
  .pet-button { height: 52px; padding: 0 1.25rem; }
  .pet-photo-band { grid-template-columns: 1fr; }
  .pet-photo-band img { height: 240px; }
  .pet-photo-band > div { padding: 1.5rem 2rem 2rem; }
  .pet-features-grid { grid-template-columns: 1fr; }
  .pet-home-about-grid { grid-template-columns: 1fr; }
  .pet-home-categories { grid-template-columns: 1fr; }
  .pet-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pet-review-grid { grid-auto-rows: auto; grid-template-columns: 1fr; }
  .pet-review-invite { align-items: center; grid-template-columns: 1fr; }
  .pet-review-score { justify-self: center; min-width: 0; width: auto; }
  .pet-review-button { justify-self: center; width: auto; }
  .pet-contact-panel { grid-template-columns: 1fr; }
  .pet-contact-copy > p { white-space: normal; }
  .pet-contact-visual { min-height: 420px; }
  /* Only the loaded iframe needs the full height -- the collapsed button
     keeps its own compact size so it does not reserve a 250px hole. */
  .pet-map iframe { min-height: 250px; }
  .pet-footer-bottom { gap: 1rem; grid-template-columns: 1fr; }
  .pet-footer-bottom > *, .pet-footer-bottom > :first-child, .pet-footer-bottom > :last-child { justify-self: center; }
  .pet-footer-bottom > :nth-child(2) { white-space: normal; }
    /* One column here, so the explicit placement from the wide layout has to
       go -- columns 2 and 3 do not exist at this width. */
    .pet-footer-bottom .pet-footer-legal, .pet-footer-bottom > :last-child { grid-column: 1; }
  .pet-contact-links { gap: 10px; }
  .pet-contact-link { height: 48px; width: 48px; }
  .pet-section-page { width: calc(100vw - 24px); }
  .pet-section-hero { border-radius: 22px; padding: 2rem; }
  .pet-section-hero h1 { font-size: clamp(1.55rem, 4.6vw, 3.6rem); }
  /* No per-family override any more: every hero now shares the one nowrap
     scale set above, sized for the longest title on the site ("Аксессуары и
     сопутствующие товары", 32 chars). A larger size here would push that
     heading off-screen, since nowrap removes the escape hatch of wrapping. */
  .pet-info-grid { grid-template-columns: 1fr; }
  .pet-info-card { min-height: 0; }
  .pet-pets-page .pet-info-card-link p { min-height: 0; }
  .pet-section-cta { align-items: flex-start; flex-direction: column; margin: 2rem 0; }
  .pet-shop-heading { align-items: start; grid-template-columns: 1fr; padding-top: 3rem; }
  .pet-shop-grid { grid-template-columns: 1fr; }
  .pet-shop-path { grid-template-columns: 1fr; }
  .pet-shop-filters { align-items: flex-start; flex-direction: column; }
  .pet-shop-filters > div { justify-content: flex-start; }
  .pet-product-grid { grid-template-columns: 1fr; }
  .pet-product-detail { width: calc(100vw - 24px); }
  .pet-product-detail-card { grid-template-columns: 1fr; }
  .pet-sample-catalog > summary { align-items: flex-start; flex-wrap: wrap; padding: 1.25rem; }
  .pet-sample-catalog > summary small { flex: 1 1 100%; margin-inline-start: 0; }
  .pet-sample-catalog-content { padding: 0 1.25rem 1.25rem; }
  .pet-legacy-product-grid { grid-template-columns: 1fr; }
  .pet-event-grid { grid-template-columns: 1fr; }
  .pet-event-agenda > header { align-items: flex-start; flex-direction: column; }
  .pet-whatsapp-float { bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--pet-whatsapp-lift, 0px)); font-size: 0; height: 58px; justify-content: center; min-height: 58px; padding: 0; right: max(16px, env(safe-area-inset-right)); width: 58px; }
  .pet-whatsapp-float span { display: none; }
  .pet-whatsapp-float svg { height: 30px; width: 30px; }
  .pet-whatsapp-float-rtl { left: max(16px, env(safe-area-inset-left)); right: auto; }
  /* Was 80px, reserved so the floating WhatsApp button doesn't cover the
     last bit of page content -- but every one of these is always
     immediately followed by the dark .pet-footer, so that reserved space
     just showed up as a visible gap of bare page background before the
     footer started (reported repeatedly on different page types). The
     button overlapping the last line for one scroll position is the
     smaller cost. */
  .pet-section-page,
  .pet-pets-page,
  .pet-events-page,
  .pet-product-detail { padding-bottom: 0; }
  .pet-cookie-banner { align-items: flex-start; bottom: 12px; flex-wrap: wrap; left: 12px; max-width: calc(100vw - 24px); right: 12px; }
  .pet-cookie-banner p { flex: 1 1 100%; }
}

@media (max-width: 1400px) {
  .pet-whatsapp-float {
    align-items: center;
    border-radius: 50%;
    font-size: 0;
    height: 58px;
    justify-content: center;
    min-height: 58px;
    padding: 0;
    width: 58px;
  }
  .pet-whatsapp-float span {
    display: none;
  }
  .pet-section-page,
  .pet-pets-page,
  .pet-events-page,
  .pet-product-detail,
  .pet-contact-panel {
    padding-bottom: 80px;
  }
}

@media (max-width: 560px) {
  /* No grid stacking here any more, same reasoning as the 1560px and 780px
     breakpoints above -- the header keeps its one-row 3-column shape
     (hamburger | logo | cart/account/language) all the way down, so the
     logo's position never jumps at this width either.
     auto/minmax(0,1fr)/auto: the two end columns get exactly what their
     content needs rather than a forced share of a 1fr split, and the middle
     (logo) column absorbs whatever is left -- .pet-wordmark's own width
     below caps it so it never claims more than a reasonable share either. */
  .pet-site-header > .wp-block-group { column-gap: 6px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .pet-wordmark { height: 34px; width: min(22vw, 100px); }
  .pet-header-cart, .pet-header-account { height: 32px; width: 32px; }
  /* Square, matching the 32px cart circle beside it -- the label is already
     display: none from the 780px block above, so the horizontal padding it
     was sized for had nothing left to pad. */
  .pet-header-dashboard { height: 32px; padding: 0; width: 32px; }
  .pet-header-cart svg { height: 15px; width: 15px; }
  /* 10-header.css's -7px/-7px badge offset was sized for the 44px desktop
     cart circle; left as-is on this 32px mobile one, it oversteps far enough
     to sit on top of whatever comes next in the row -- the dashboard button,
     when a manage_options admin is logged in on a phone (reported by the
     owner from a live screenshot at ~390px). A smaller offset keeps the
     badge reading as "attached to the corner" without colliding with its
     neighbour. */
  .pet-header-cart-count { right: -4px; top: -4px; }
  .pet-header-actions { gap: 4px; }
  /* flex-wrap: wrap, not the wider layout's nowrap -- a phone narrow enough
     that cart + account + language genuinely cannot all fit on the header's
     one row now drops the language switcher to a second line, right-aligned
     under the icons, instead of the previous nowrap forcing it to overflow
     silently past the edge of the screen (confirmed by screenshot at
     375px: the switcher was rendering entirely off-screen, not merely
     clipped -- a real, easy-to-miss bug since nothing scrolls to reveal
     it). Wrapping to a visible second row is worse-looking than fitting on
     one, but strictly better than a control a visitor cannot reach at all. */
  .pet-header-end { display: flex !important; flex-wrap: wrap !important; gap: 4px; justify-content: flex-end; }
  /* "English"/"Русский"/"עברית" at full size was the main thing forcing
     that wrap on most phones -- language stays a real word (not just a
     flag/code, which would need its own translation-adjacent judgement
     call), just smaller, so the wrap is the exception, not the rule. */
  .pet-language-toggle { font-size: .74rem; padding: .4rem .5rem; }
  .pet-quick-actions { display: grid; grid-template-columns: 1fr; }
  .pet-category-grid { grid-template-columns: 1fr; }
  .pet-category-tile { min-height: 130px; }
  .pet-form-row { grid-template-columns: 1fr; }
  .pet-contact-form form { grid-template-columns: 1fr; }
  .pet-contact-meta-row { align-items: flex-start; grid-template-columns: 1fr; gap: .6rem; }
  .pet-contact-links { justify-content: center; }
  .pet-form-actions { align-items: stretch; flex-direction: column; }
  .pet-form-actions button { align-self: flex-start; }
  .pet-service-plain { grid-template-columns: 1fr; }
}

/* Phone held sideways. Width is handled by the blocks above; this one is
   about the other axis, which nothing else in this file looks at: an iPhone
   in landscape has 390-430 CSS pixels of height in total, and a logged-in
   administrator loses another 32 of them to the WordPress admin bar. The
   header's 20px/20px band around an 84px logo came to 124px of that, a third
   of the screen before a single line of content. Only the band and the logo
   shrink -- every control keeps the size it has at this width, so nothing
   here makes a tap target smaller. Placed after the 560px block on purpose:
   source order is the cascade, and a 480x320 landscape phone matches both.
   Kept off the desktop by max-height, which a full-screen desktop window
   does not match. */
@media (max-height: 480px) and (orientation: landscape) {
  .pet-site-header { padding-block: 10px; }
  .pet-wordmark { height: clamp(40px, 13vh, 62px); }
}

body:has(.pet-commerce-page) .wp-block-post-content { box-sizing: border-box; margin-inline: 24px !important; max-width: none !important; width: calc(100% - 48px) !important; }
.pet-commerce-page { box-sizing: border-box; margin: 0 auto; max-width: 1280px !important; padding: 1rem 0 100px; width: 100%; }
body:has(.pet-commerce-page) .wp-block-post-title { color: var(--pet-text); font-size: clamp(2.6rem, 6vw, 5.5rem); letter-spacing: -.055em; line-height: .95; margin-bottom: 1rem; }
.pet-shipping-progress { background: var(--pet-surface-muted); border: 1px solid var(--pet-border); border-radius: 22px; display: grid; gap: 1rem; margin: 0 0 2rem; padding: 1.3rem 1.5rem; }
.pet-shipping-progress > div { align-items: baseline; display: flex; flex-wrap: wrap; gap: .45rem 1.2rem; justify-content: space-between; }
.pet-shipping-progress strong { color: var(--pet-text); font-size: 1rem; }
/* --pet-text-secondary rather than --pet-muted: this panel's ground is
   --pet-surface-muted, where --pet-muted measures 4.36 and misses 4.5. */
.pet-shipping-progress span { color: var(--pet-text-secondary); font-size: .9rem; font-weight: 700; }
.pet-shipping-progress progress { appearance: none; background: var(--pet-border); border: 0; border-radius: 999px; height: 9px; overflow: hidden; width: 100%; }
.pet-shipping-progress progress::-webkit-progress-bar { background: var(--pet-border); }
.pet-shipping-progress progress::-webkit-progress-value { background: var(--pet-primary); border-radius: 999px; }
.pet-shipping-progress progress::-moz-progress-bar { background: var(--pet-primary); border-radius: 999px; }
.pet-commerce-page .wc-block-components-sidebar-layout { align-items: start; display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
.pet-commerce-page .wc-block-components-main { padding-inline-end: 0; width: auto; }
.pet-commerce-page .wc-block-components-sidebar { width: auto; }
.pet-commerce-page .wc-block-components-sidebar { background: var(--pet-surface-muted); border-radius: var(--pet-radius-lg); padding: 1.4rem; top: 110px; }
.pet-commerce-page .wc-block-components-totals-wrapper { border-color: var(--pet-border-strong); }
.pet-commerce-page .wc-block-cart-items { border-collapse: separate; border-spacing: 0 12px; }
.pet-commerce-page .wc-block-cart-items__row { background: var(--pet-surface); box-shadow: 0 10px 28px color-mix(in srgb, var(--pet-shadow-color) 8%, transparent); }
.pet-commerce-page .wc-block-cart-item__image { padding: 1rem; }
.pet-commerce-page .wc-block-cart-item__image img { border-radius: 14px; }
.pet-commerce-page .wc-block-components-button,
.pet-commerce-page .wc-block-components-checkout-place-order-button { background: var(--pet-primary); border: 0; border-radius: 999px; color: var(--pet-surface); font-weight: 800; min-height: 52px; transition: background .2s, transform .2s; }
.pet-commerce-page .wc-block-components-button:hover,
.pet-commerce-page .wc-block-components-checkout-place-order-button:hover { background: var(--pet-primary-hover); color: var(--pet-surface); transform: translateY(-2px); }
.pet-commerce-page .wc-block-components-text-input input,
.pet-commerce-page .wc-block-components-combobox-control input,
/* An input's edge is the boundary of an interface component and owes 3:1;
   the value it carried measured 1.9 on white. --pet-border-input is 3.79. */
.pet-commerce-page .wc-block-components-textarea { border-color: var(--pet-border-input); border-radius: 12px; }
.pet-commerce-page .wc-block-components-checkout-step { background: var(--pet-surface); border: 1px solid var(--pet-border); border-radius: 20px; margin-bottom: 1rem; padding: 1.3rem; }
.pet-commerce-page .wc-block-components-checkout-step__heading { margin-top: 0; }
.pet-product-detail-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.pet-product-actions .pet-product-buy { background: var(--pet-primary); color: var(--pet-surface); }
.pet-product-actions .pet-product-buy:hover { background: var(--pet-primary-hover); color: var(--pet-surface); }

/* Product detail page: a focused Pet Town version of the marketplace PDP pattern. */
.pet-pdp { color: var(--pet-text); margin: 0 auto; max-width: 1240px; padding: clamp(1.25rem, 3vw, 2.75rem) 24px 96px; }
.pet-pdp-breadcrumbs { align-items: center; color: var(--pet-muted); display: flex; flex-wrap: wrap; font-size: .82rem; gap: .55rem; margin-bottom: 1.4rem; }
.pet-pdp-breadcrumbs a { color: var(--pet-primary); font-weight: 800; text-decoration: none; }
.pet-pdp-breadcrumbs a:hover { color: var(--pet-primary-hover); }
.pet-pdp-hero { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1.06fr) minmax(320px, .94fr); }
/* align-self so the frame is as tall as the picture and no taller. The hero
   is a two-column grid and a grid item stretches to its row by default, so
   the frame took its height from the purchase column beside it -- title,
   price, delivery, quick-order form -- while the image inside keeps the fixed
   height below. Measured on /ru/product/local/pt-aq-0054/: a 948px frame
   around a 560px image, i.e. ~190px of the frame's own gradient showing above
   the photo and ~190px below, which is what the owner reported as extra
   background. */
.pet-pdp-gallery { align-self: start; display: grid; gap: 1rem; grid-template-columns: 76px minmax(0, 1fr); min-width: 0; }
.pet-pdp-thumbnails { display: flex; flex-direction: column; gap: .7rem; }
.pet-pdp-thumb { background: var(--pet-surface); border: 1px solid var(--pet-border-input); border-radius: 13px; cursor: pointer; padding: .25rem; }
.pet-pdp-thumb.is-active { border-color: var(--pet-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pet-primary) 18%, transparent); }
.pet-pdp-thumb img { border-radius: 9px; display: block; height: 66px; object-fit: contain; width: 66px; }
.pet-pdp-image-wrap { align-items: center; background: linear-gradient(135deg, var(--pet-surface-muted), var(--pet-primary-soft)); border-radius: var(--pet-radius-lg); display: flex; min-height: 430px; overflow: hidden; }
.pet-pdp-image { display: block; height: min(560px, 48vw); max-height: 560px; object-fit: contain; width: 100%; }
.pet-pdp-image-empty { align-items: center; color: var(--pet-text-secondary); display: flex; font-size: 2rem; font-weight: 800; justify-content: center; }
.pet-pdp-purchase { align-self: center; max-width: 560px; }
.pet-pdp-purchase .pet-eyebrow { margin-bottom: .7rem; }
.pet-pdp-purchase h1 { font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.055em; line-height: 1.02; margin: 0 0 .8rem; }
.pet-pdp-sku { color: var(--pet-muted); font-size: .82rem; font-weight: 800; letter-spacing: .06em; margin: 0; text-transform: uppercase; }
.pet-pdp-translation-pending { background: var(--pet-accent-soft); border-radius: 10px; color: var(--pet-text); font-size: .85rem; margin: .5rem 0 0; padding: .5rem .75rem; }
.pet-pdp-status { align-items: center; color: var(--pet-success); display: flex; font-size: .88rem; font-weight: 800; gap: .45rem; margin-top: 1.25rem; }
.pet-pdp-status span { background: var(--pet-success); border-radius: 50%; height: 8px; width: 8px; }