/* remaining detail layouts and reduced-motion
   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-account-page .woocommerce-password-hint {
  color: var(--pet-muted);
  display: block;
  font-size: .88rem;
  line-height: 1.55;
  margin-top: .55rem;
}
/* The Google button above the login/register cards (pet-town-core's
   social-login.php widens miniOrange's own button beyond its 200px
   default so the longer "log in or register" wording fits) carries an
   inline `width: <n>px !important` from the plugin itself, which does
   not shrink for narrow viewports and pushed the page into horizontal
   scroll at mobile widths -- checked by rendering the account page in a
   390px-wide iframe. max-width still clamps a used width even against an
   `!important` width on the same element (a different stage of the CSS
   box calculation, not a specificity fight), so no !important is needed
   here -- but two things have to be added around that clamp, both found
   by re-rendering the same iframe rather than by reading the rule:

   min-width, because .woocommerce is a grid and this block is a grid
   item, whose min-width:auto resolves to min-content -- the button's own
   inline width -- and that beats max-width, so the block kept overflowing
   the column until min-width:0 let the clamp apply at all.

   white-space, because the plugin also sets overflow:hidden and
   text-overflow:ellipsis on the button, so a clamped width does not wrap
   the label, it cuts it -- and the word that falls off the end is
   "Google". Wrapping onto a second line (height:auto so the button grows
   with it) keeps the whole label readable at any width.

   The 8px in the calc() is the button's own inline margin-left, also
   !important, which would otherwise push the clamped button that far
   past the block it sits in. */
.pet-account-page .mo-openid-app-icons {
  max-width: 100%;
  min-width: 0;
}
.pet-account-page .mo-openid-app-icons a.mo_btn {
  box-sizing: border-box;
  height: auto;
  max-width: calc(100% - 8px);
  white-space: normal;
}
/* Both anchors the announcement bar sends visitors to (#customer_login for
   its login link, #pet-register for its register one) are inside the
   two-column wrapper, while that Google button sits above the wrapper --
   so either jump scrolled the button off the top of the screen and the
   visitor arrived at a form with no sign of the Google option that covers
   both flows. Measured on a rendered guest page: the button block is 95px
   tall, so this offset clears it with air to spare. Side-by-side columns
   only -- below WooCommerce's 768px breakpoint the columns stack and the
   register form sits a screen below the button, which no scroll offset
   can hold on screen at the same time. */
@media (min-width: 769px) {
  .pet-account-page #customer_login,
  .pet-account-page #pet-register {
    scroll-margin-top: 9rem;
  }
  /* Side by side, the button above the columns is already in view from the
     register side, so the second copy printed inside the register column
     (form-login.php) would just be the same button twice on one screen. */
  .pet-account-page .pet-account-social-repeat {
    display: none;
  }
}
/* Stacked, that copy is the only one anywhere near this form -- the first is
   a screen up, above the login card. min-width for the same reason the icon
   block above needs it: the register column is a grid container too, so this
   wrapper is a grid item whose min-width:auto is the button's own inline
   width, and it hung past the column edge at 390px until this was set. */
.pet-account-page .pet-account-social-repeat {
  margin-bottom: 1rem;
  max-width: 100%;
  min-width: 0;
}
/* Same min-width:auto trap one level out: .woocommerce is a grid and the
   login/register wrapper is one of its items, so the widest thing inside the
   register column -- that repeated button, at its inline width -- was setting
   the column's min-content and widening both columns past the page gutter at
   390px. Measured with the copy in place; without it the columns never got
   near their gutter, which is why this only surfaces now. */
.pet-account-page #customer_login,
.pet-account-page #customer_login > .u-column1,
.pet-account-page #customer_login > .u-column2 {
  min-width: 0;
}
.pet-pet-detail-layout,
.pet-shop-category-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  margin: 1rem auto 0;
  max-width: 1180px;
}
.pet-pet-detail-layout-full {
  grid-template-columns: 1fr;
  max-width: 760px;
}
.pet-pet-detail-layout article,
.pet-pet-detail-layout aside,
.pet-shop-category-layout article,
.pet-shop-category-layout aside,
.pet-quick-order,
.pet-checkout-trust {
  background: var(--pet-surface);
  border: 1px solid var(--pet-border);
  border-radius: var(--pet-radius-lg);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--pet-shadow-color) 6%, transparent);
  padding: 1.25rem;
}
.pet-pet-detail-layout h2,
.pet-shop-category-layout h2,
.pet-quick-order h2,
.pet-checkout-trust h2 {
  color: var(--pet-text);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  margin: 0 0 .65rem;
}
.pet-pet-detail-layout p,
.pet-shop-category-layout p,
.pet-pet-detail-layout li,
.pet-shop-category-layout li,
.pet-checkout-trust p {
  /* --pet-text-secondary rather than --pet-muted across this whole group:
     one of these panels (.pet-checkout-trust article) sits on
     --pet-surface-muted, where --pet-muted measures 4.36, and the rest lose
     nothing by moving up from 4.93 to 6.28 on white. */
  color: var(--pet-text-secondary);
  font-weight: 700;
  line-height: 1.65;
}
/* .pet-pet-detail-steps was here until 2026-08-29. It styled the "how we
   help" list /pets/dogs/ folded into its article; that list and the six
   asides' copy of it were removed when the block became the single
   #how-we-help section on /{lang}/pets/, so nothing emits the class any
   more. .pet-pet-detail-layout ol is kept: the layout still holds ordered
   lists on other pet pages' article bodies. */
.pet-pet-detail-layout ol,
.pet-shop-category-layout ul {
  display: grid;
  gap: .65rem;
  margin: 0 0 1rem;
  padding-inline-start: 1.15rem;
}
/* .pet-pet-detail-layout p { color: var(--pet-muted) } has higher
   specificity (element+class) than a lone .pet-return-notice class, so the
   scoped selector + !important is needed regardless of which color this
   resolves to. Softened from an alarming dark red to a plain muted tone
   once the copy itself changed from a blunt "no returns" refusal to a
   neutral "read the terms before buying" notice -- red no longer matches
   the tone.

   Two selectors since 2026-08-29 (WP4): /pets/dogs/ has no aside at all --
   its layout is the full-width variant -- so the notice it gained there sits
   directly in the article, where `aside .pet-return-notice` cannot reach it
   and `.pet-pet-detail-layout p` would have coloured it like body text. The
   second selector is 0-2-0 against that rule's 0-1-1, so it wins on
   specificity; the !important stays for the aside half, which is 0-1-1
   against 0-1-1 and would otherwise be decided by source order alone. */
aside .pet-return-notice,
.pet-pet-detail-layout .pet-return-notice {
  color: var(--pet-muted) !important;
  font-size: .85rem;
  font-weight: 700;
  margin: 0 0 1rem;
}
.pet-quick-order {
  background: var(--pet-surface-muted);
  margin-top: .9rem;
}
.pet-quick-order > div {
  margin-bottom: .8rem;
}
.pet-quick-order p {
  color: var(--pet-text-secondary);
  font-size: .9rem;
  font-weight: 750;
  margin: 0;
}
.pet-quick-order form {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pet-quick-order label {
  color: var(--pet-text);
  display: grid;
  font-size: .82rem;
  font-weight: 900;
  gap: .35rem;
}
.pet-quick-order input:not([type="checkbox"]) {
  background: var(--pet-surface);
  /* An input's edge owes 3:1; what this replaces measured 1.73 on white. */
  border: 1px solid var(--pet-border-input);
  border-radius: 14px;
  color: var(--pet-text);
  min-height: 46px;
  padding: .75rem .85rem;
}
.pet-quick-order .pet-form-consent,
.pet-quick-order button {
  grid-column: 1 / -1;
}
.pet-quick-order button {
  background: var(--pet-primary);
  border: 0;
  border-radius: 999px;
  color: var(--pet-surface);
  cursor: pointer;
  font-weight: 900;
  min-height: 48px;
  padding: .75rem 1.1rem;
}
.pet-honeypot {
  display: none !important;
}
.pet-checkout-trust {
  margin: 0 0 1.2rem;
}
.pet-checkout-trust > div {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pet-checkout-trust article {
  background: var(--pet-surface-muted);
  border: 1px solid var(--pet-border);
  border-radius: 18px;
  padding: 1rem;
}
.pet-checkout-trust strong {
  color: var(--pet-text);
  display: block;
  font-weight: 900;
  margin-bottom: .25rem;
}
.pet-checkout-trust p {
  font-size: .86rem;
  margin: 0;
}

@media (max-width: 980px) {
  .pet-features-grid { grid-template-columns: 1fr; }
  .pet-account-page .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; }
  .pet-account-page .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; }
  .pet-account-page .woocommerce-MyAccount-navigation li { flex: 1 1 140px; }
  .pet-pet-detail-layout,
  .pet-shop-category-layout,
  .pet-checkout-trust > div { grid-template-columns: 1fr; }
  .pet-specialty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pet-specialty-grid-links article { flex-basis: calc((100% - 1rem) / 2); }
  .pet-breed-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pet-pet-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pet-category-tile img { height: 150px; }
  .pet-category-tile:has(img) { min-height: 0; }
  .pet-pdp-image-wrap { min-height: 260px; }
  .pet-not-found { padding-inline: 12px; }
  .pet-quick-order form { grid-template-columns: 1fr; }
  .pet-specialty-grid { grid-template-columns: 1fr; }
  .pet-specialty-grid-links article { flex-basis: 100%; }
  /* Both nav buttons share the row evenly once the card is this narrow --
     "Далее" as a small pill at the far edge is a target the thumb misses. */
  .pet-tank-nav-button { flex: 1 1 0; padding-inline: .8rem; }
  .pet-breed-gallery { grid-template-columns: 1fr; }
  .pet-pet-gallery-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}