/* ZHONGYA hotfix 2026-09-30 ------------------------------------------------ */

/* 1. Checkout: the dark "YOUR ORDER" bar stretched over the whole billing form
   on phones / tablets, because #customer_details keeps its 2-row desktop grid
   placement while the form collapses to one column. */
@media (max-width: 1020px) {
  body.zy-storefront form.checkout #customer_details {
    grid-column: 1;
    grid-row: auto;
  }

  body.zy-storefront form.checkout #order_review_heading {
    grid-column: 1;
    grid-row: auto;
    align-self: start;
    height: auto;
  }

  body.zy-storefront form.checkout #order_review {
    grid-column: 1;
    grid-row: auto;
  }
}

/* 2. Account registration: the injected "Confirm password" and verification
   code fields are plain inputs (no .input-text), so they missed the field
   styling used by the rest of the form. */
.zy-auth .zy-auth__field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid #d9d0c7;
  border-radius: 0;
  background: #fff;
  color: #14201e;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.3;
  box-shadow: none;
}

.zy-auth .zy-auth__field input:not([type="checkbox"]):not([type="radio"]):focus {
  border-color: #14201e;
  outline: 2px solid rgba(20, 32, 30, 0.12);
  outline-offset: 0;
}

.zy-auth .zyst-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.zy-auth .zyst-code-row input {
  letter-spacing: 0.24em;
  text-align: left;
}

.zy-auth .zyst-code-row button {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid #111c19;
  border-radius: 0;
  background: #fff;
  color: #111c19;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.zy-auth .zyst-code-row button:hover:not(:disabled),
.zy-auth .zyst-code-row button:focus-visible {
  background: #111c19;
  color: #fff;
}

.zy-auth .zyst-code-row button:disabled {
  opacity: 0.55;
  cursor: default;
}

.zy-auth [data-zyst-code-status] {
  color: #626e69;
  font-size: 12px;
  line-height: 1.5;
}

/* 3. Product page: extra attributes (Model / Material / Type / Brand ...) as
   square buttons, same look as the Size buttons. */
.zy-product-option-block--attr .zy-size-buttons button {
  width: auto;
  min-width: 74px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 1.2;
}

@media (max-width: 860px) {
  .zy-product-option-block--attr .zy-size-buttons button {
    min-width: 58px;
    height: 44px;
    padding: 0 12px;
  }
}

/* 4. CheckoutWC side cart, matched to the storefront (square buttons, dark
   green, cream summary, serif product names). */
html.zy-side-cart-on .zyst-cart-drawer {
  display: none !important;
}

#cfw-side-cart,
#cfw-side-cart-container {
  --zy-ink: #14201e;
  --zy-dark: #10201c;
  --zy-line: #eee7df;
  --zy-cream: #fbf8f4;
}

#cfw-side-cart-container {
  font-family: Figtree, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--zy-ink);
}

#cfw-side-cart .cfw-side-cart-contents-header {
  border-bottom: 1px solid var(--zy-line);
}

#cfw-side-cart .cfw-side-cart-quantity {
  background: var(--zy-dark);
  color: #fff;
}

#cfw-side-cart .cfw-cart-item-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.35;
}

#cfw-side-cart .cfw-cart-table {
  border-color: var(--zy-line);
}

#cfw-side-cart .cfw-primary-btn,
#cfw-side-cart .cfw-secondary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

#cfw-side-cart .cfw-primary-btn {
  border: 1px solid var(--zy-dark);
}

#cfw-side-cart .cfw-secondary-btn {
  border: 1px solid var(--zy-dark);
  background: #fff;
  color: var(--zy-dark);
}

#cfw-side-cart .cfw-secondary-btn:hover,
#cfw-side-cart .cfw-secondary-btn:focus-visible {
  background: var(--zy-dark);
  color: #fff;
}

#cfw-side-cart .cfw-side-cart-free-shipping-progress-indicator {
  background: var(--zy-dark);
}

#cfw-side-cart .cfw-side-cart-free-shipping-progress {
  background: var(--zy-line);
}

/* Keep the chat launcher out of the way while the cart is open. */
body.cfw-side-cart-open .zy-live-chat-mobile {
  display: none !important;
}

.zy-product-option-block--attr .zy-size-buttons button.is-unavailable,
.zy-product-option-block--size .zy-size-buttons button.is-unavailable {
  color: #8c8780;
  background: #fff;
  border-color: #e4ddd4;
  border-style: dashed;
  text-decoration: none;
  transform: none;
  cursor: pointer;
}

.zy-product-option-block--attr .zy-size-buttons button.is-unavailable:hover,
.zy-product-option-block--attr .zy-size-buttons button.is-unavailable:focus-visible,
.zy-product-option-block--size .zy-size-buttons button.is-unavailable:hover,
.zy-product-option-block--size .zy-size-buttons button.is-unavailable:focus-visible {
  color: #111;
  background: #fff;
  border-color: #13221d;
  transform: none;
}

/* Long option labels such as "38x16x12cm" overflowed the fixed-width Size buttons. */
.zy-size-buttons button {
  width: auto;
  min-width: 74px;
  padding: 0 14px;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .zy-size-buttons button {
    width: auto;
    min-width: 58px;
    padding: 0 12px;
    font-size: 14px;
  }
}

/* Checkout fields were inline: WooCommerce layout CSS is not on this template,
   so the label sat beside a ~220px input and overlapped the control on phones
   and tablets. Stack each label above a full-width field. */
body.zy-storefront .zy-checkout-template form.checkout .form-row {
  display: block;
  clear: both;
  width: 100%;
}

body.zy-storefront .zy-checkout-template form.checkout .form-row > label {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0 0 6px;
}

body.zy-storefront .zy-checkout-template form.checkout .form-row .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

body.zy-storefront .zy-checkout-template form.checkout .form-row input.input-text,
body.zy-storefront .zy-checkout-template form.checkout .form-row textarea,
body.zy-storefront .zy-checkout-template form.checkout .form-row select {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.zy-storefront .zy-checkout-template form.checkout .form-row label.checkbox,
body.zy-storefront .zy-checkout-template form.checkout .form-row label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: auto;
}

/* Desktop keeps two columns. Size the heading row to the title only, so the
   order summary sits under it instead of leaving a blank band beside billing. */
@media (min-width: 1021px) {
  body.zy-storefront form.checkout {
    grid-template-rows: auto minmax(0, 1fr);
  }

  body.zy-storefront form.checkout #order_review_heading,
  body.zy-storefront form.checkout #order_review {
    align-self: start;
    height: auto;
  }
}

/* 5. Mobile checkout: the theme clones #place_order into a fixed
   .zy-checkout-sticky-submit. On a phone that bar sits over the billing
   address (between street and country in the first screen). Keep the
   in-flow button in the order review; hide the clone and its backdrop
   through tablet widths. Desktop never shows the clone. */
@media (max-width: 1020px) {
  body .zy-checkout-sticky-submit {
    display: none !important;
  }

  body.zy-storefront:has(.zy-checkout-sticky-submit)::after {
    content: none !important;
    display: none !important;
  }

  body.zy-storefront:has(.zy-checkout-template) {
    padding-bottom: 0 !important;
  }

  body.zy-storefront .zy-checkout-template .zy-checkout-shell {
    padding-bottom: 36px !important;
  }
}

/* 6. "Ship to a different address?" stays unchecked via the PHP filter, but
   this checkout leaves .shipping_address displayed. Follow the checkbox. */
body:has(#ship-to-different-address-checkbox:not(:checked)) .shipping_address {
  display: none !important;
}

body:has(#ship-to-different-address-checkbox:checked) .shipping_address {
  display: block !important;
}

/* 7. Phones: the fixed "GET 10% OFF" tab and the chat bubble cover the
   register form (privacy / send-code row) and can cover checkout fields.
   Move the tab into the page footer instead of a fixed overlay, and on
   account screens park the chat launcher in the header band, clear of
   the form buttons. */
@media (max-width: 767px) {
  main.client-page {
    position: relative;
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  }

  body .zy-offer-tab {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    left: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    min-width: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
    max-width: 46vw;
    padding: 0 8px !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    z-index: 5;
  }

  body .zy-offer-tab:hover,
  body .zy-offer-tab:active {
    transform: none !important;
  }

  body .zy-live-chat-mobile,
  body .zy-whatsapp-float {
    right: 12px !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    width: 46px !important;
    height: 46px !important;
  }

  body.zy-storefront:has(.zy-auth) .zy-live-chat-mobile,
  body.zy-storefront:has(.zy-auth) .zy-whatsapp-float,
  body.zy-storefront:has(.zy-account-shell) .zy-live-chat-mobile,
  body.zy-storefront:has(.zy-account-shell) .zy-whatsapp-float {
    top: 8px !important;
    bottom: auto !important;
    right: 52px !important;
    width: 34px !important;
    height: 34px !important;
  }

  body .zy-live-chat-mobile svg,
  body .zy-whatsapp-float svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Chatway injects its own launcher; lift that too when it is on the page. */
  body iframe[src*="chatway"],
  body iframe[title*="chatway" i],
  body #chatway-widget,
  body .chatway-widget,
  body [class*="chatway-launcher"],
  body [id*="chatway-launcher"] {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.zy-storefront .zy-auth,
  body.zy-storefront .zy-account-shell {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  body.zy-storefront .zy-checkout-template .zy-checkout-shell {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* 8. Header: nearly full width, larger wordmark and action icons.
   Mobile / tablet (the hamburger header, max-width 1120px) is unchanged. */
@media (min-width: 1121px) {
  .zy-header,
  .zy-collection-page .zy-header.zy-header--native,
  .zy-header.zy-header--native {
    padding-left: 22px;
    padding-right: 22px;
    gap: 18px;
    min-height: 78px;
  }

  .zy-header .zy-logo img,
  .zy-header .zy-logo__mark,
  .zy-header .zy-logo__img {
    width: 186px;
  }

  .zy-header .zy-actions {
    gap: 6px;
    min-width: 132px;
  }

  .zy-header .zy-actions a {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }

  .zy-header .zy-action-icon {
    width: 23px;
    height: 23px;
  }
}

/* The 1260–1480 nav is already tight. Keep the larger logo, tighten the links. */
@media (min-width: 1260px) and (max-width: 1500px) {
  .zy-header .zy-nav,
  .zy-header .zy-actions {
    gap: 8px;
  }

  .zy-header .zy-nav a {
    font-size: 10px;
    letter-spacing: 0.035em;
  }
}

/* 9. Variation swatches follow the same unavailable treatment as size / model. */
.zy-product-detail .zy-swatch-button.is-unavailable {
  opacity: 0.38;
  filter: grayscale(0.85);
  box-shadow: none;
  transform: none;
}

.zy-product-detail .zy-swatch-button.is-unavailable::after {
  border-color: transparent;
}

.zy-product-detail .zy-swatch-button.is-unavailable:hover,
.zy-product-detail .zy-swatch-button.is-unavailable:focus-visible {
  opacity: 0.5;
  transform: none;
}

/* 10. "Shop all" was a full-height empty card in the dogs row (and the same
   class anywhere else). Make it a text link under the row, aligned to the end.
   Desktop dogs row becomes 3 product columns so that link is not a hole in
   the grid. Tablet / phone column counts stay as the theme set them. */
.zy-dogs-grid .zy-shop-all-tile,
.zy-product-grid .zy-shop-all-tile {
  display: inline-flex;
  grid-column: 1 / -1;
  justify-self: end;
  align-self: center;
  place-items: center end;
  min-height: 0;
  height: auto;
  margin: 2px 0 0;
  padding: 8px 0 0;
  background: transparent;
  color: #1c2530;
  font-family: Figtree, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-align: right;
  text-decoration: none;
  text-transform: uppercase;
}

.zy-dogs-grid .zy-shop-all-tile:hover,
.zy-dogs-grid .zy-shop-all-tile:focus-visible,
.zy-product-grid .zy-shop-all-tile:hover,
.zy-product-grid .zy-shop-all-tile:focus-visible {
  color: #245e9f;
  background: transparent;
}

@media (min-width: 1021px) {
  .zy-dogs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Search results have no filter column. */
body.zy-search-results .zy-collection-products__layout {
  grid-template-columns: minmax(0, 1fr);
}

/* Hidden by the catalog pager. Repeated here so a full last row never
   leaves a blank card if the kit stylesheet is late. */
.zy-product.is-page-hidden {
  display: none !important;
}

/* 11. Large desktops, toned back. <=1599 keeps the theme boxes.
   From 1600 the container grows with the viewport and stops at the
   2560 size (1970px, about 77vw). Three-up cards stop at 470px
   (360px at 1920). No zoom and no transform scale. Side cart and
   chat are not scaled. */
@media (min-width: 1600px) {
  :root {
    --zy-s: clamp(0, (100vw - 1600px) / 960px, 1);
    --zy-wide: min(1970px, 77vw);
    --zy-card: clamp(360px, calc(305px + (100vw - 1600px) * 0.171875), 470px);
    --zy-gap: 18px;
  }

  .client-wrap,
  .zy-home-wrap,
  .zy-picks__stage,
  .zy-review-notes__inner,
  .zy-mega,
  .zy-collection-rail,
  .zy-shop-carousel .zy-collection-rail {
    width: min(calc(100% - 48px), var(--zy-wide));
  }

  .zy-hero h1,
  .zy-page-hero h1,
  .zy-about-hero h1 {
    max-width: 16em;
    font-size: calc(42px + 10px * var(--zy-s));
  }

  .zy-dogs-strip h2 {
    width: min(100%, calc(var(--zy-card) * 3 + var(--zy-gap) * 2));
    margin-inline: auto;
    font-size: calc(34px + 12px * var(--zy-s));
  }

  .zy-featured-head h2 {
    max-width: 16em;
    font-size: calc(42px + 10px * var(--zy-s));
  }

  .zy-collection-title h1 {
    font-size: calc(38px + 10px * var(--zy-s));
  }

  .zy-product-detail-template .zy-pdp-title {
    font-size: calc(28px + 8px * var(--zy-s));
  }

  .zy-product-detail-template .zy-pdp-title__sub {
    font-size: calc(14px + 1px * var(--zy-s));
  }

  .zy-product-grid .zy-product h3,
  .zy-collection-products .zy-product h3,
  .zy-dogs-grid .zy-product h3,
  .zy-product__buy strong,
  .zy-collection-products .zy-product__buy strong,
  .zy-dogs-grid .zy-product__buy strong {
    font-size: calc(16px + 6px * var(--zy-s));
  }

  .zy-product-options,
  .zy-product p {
    font-size: calc(11px + 1px * var(--zy-s));
  }

  .zy-dogs-grid,
  .zy-product-grid,
  .zy-collection-products .zy-product-grid {
    gap: 18px var(--zy-gap);
  }

  .zy-dogs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, calc(var(--zy-card) * 3 + var(--zy-gap) * 2));
    margin-inline: auto;
  }

  .zy-collection-products__layout:not(.zy-filters-hidden) {
    width: min(100%, calc(218px + 34px + var(--zy-card) * 3 + var(--zy-gap) * 2));
    margin-inline: auto;
    grid-template-columns: 218px minmax(0, 1fr);
    gap: 34px;
  }

  .zy-collection-products__layout.zy-filters-hidden,
  body.zy-search-results .zy-collection-products__layout {
    width: min(100%, calc(var(--zy-card) * 3 + var(--zy-gap) * 2));
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .zy-collection-products__layout.zy-view-2:not(.zy-filters-hidden) {
    width: min(100%, calc(218px + 34px + var(--zy-card) * 2 + var(--zy-gap)));
  }

  .zy-collection-products__layout.zy-view-2 .zy-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zy-collection-products__layout.zy-view-4 {
    width: min(100%, var(--zy-wide));
  }

  .zy-collection-products__layout.zy-view-4 .zy-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .zy-product-detail {
    width: min(100%, calc(1240px + 320px * var(--zy-s)));
    margin-inline: auto;
    grid-template-columns: minmax(0, 1.02fr) minmax(300px, 0.78fr);
    gap: 42px;
  }

  .zy-dogs-strip,
  .zy-featured-collection,
  .zy-collection-products {
    background: #f4f5f7;
  }

  .zy-dogs-grid .zy-product,
  .zy-product-grid .zy-product,
  .zy-collection-products .zy-product {
    background: #fff;
    box-shadow: 0 8px 22px rgba(17, 28, 25, 0.07);
  }
}

/* One chat entry on small screens once the official tawk bubble is up.
   The greeting card and the desktop attention grabber sit in their own
   hosts; the round launcher is #min-widget and stays. */
@media (max-width: 860px) {
  html.zy-tawk-live .zy-live-chat-mobile {
    display: none !important;
  }

  #message-preview,
  #chat-bubble {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* 12. Desktop nav stays one row from the first pixel above the mobile
   header (1121). The kit's measure() adds a hamburger below
   header.clientWidth 1260; these rules keep the links in the bar and
   tighten only that band so 1280 and the QA widths (1440, 1920) are
   unchanged. */
@media (min-width: 1121px) {
  .zy-header .zy-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  .zy-header .zy-mobile-menu {
    display: none !important;
  }

  .zy-header .zy-nav a,
  .zy-header .zy-nav__item {
    white-space: nowrap;
  }
}

@media (min-width: 1121px) and (max-width: 1279.98px) {
  .zy-header,
  .zy-collection-page .zy-header.zy-header--native,
  .zy-header.zy-header--native {
    --zy-t: clamp(0, (100vw - 1121px) / 159px, 1);
    padding-left: calc(12px + 10px * var(--zy-t));
    padding-right: calc(12px + 10px * var(--zy-t));
    gap: calc(10px + 8px * var(--zy-t));
    min-height: calc(68px + 10px * var(--zy-t));
  }

  .zy-header .zy-logo,
  .zy-header .zy-logo img,
  .zy-header .zy-logo__mark,
  .zy-header .zy-logo__img {
    width: calc(148px + 38px * var(--zy-t));
  }

  .zy-header .zy-nav,
  .zy-header .zy-actions {
    gap: calc(5px + 3px * var(--zy-t));
  }

  .zy-header .zy-nav a {
    font-size: calc(9.4px + 0.6px * var(--zy-t));
    letter-spacing: calc(0.02em + 0.015em * var(--zy-t));
  }

  .zy-header .zy-actions {
    min-width: 0;
  }

  .zy-header .zy-actions a {
    flex-basis: calc(30px + 6px * var(--zy-t));
    width: calc(30px + 6px * var(--zy-t));
    height: calc(30px + 6px * var(--zy-t));
  }

  .zy-header .zy-action-icon {
    width: calc(20px + 3px * var(--zy-t));
    height: calc(20px + 3px * var(--zy-t));
  }
}

/* 13. Header on large screens. Grows from the 1600 floor
   (logo 186 / nav 11 / icon 23 / bar 78) to the 2560 cap
   (logo 250 / nav 14 / icon 28 / bar 95) and then stops.
   1920 lands on nav 12px and icon ~25px. <=1599 is unchanged. */
@media (min-width: 1600px) {
  .zy-header,
  .zy-collection-page .zy-header.zy-header--native,
  .zy-header.zy-header--native {
    padding-left: calc(22px + 6px * var(--zy-s));
    padding-right: calc(22px + 6px * var(--zy-s));
    gap: calc(18px + 4px * var(--zy-s));
    min-height: calc(78px + 16px * var(--zy-s));
  }

  .zy-header .zy-logo,
  .zy-header .zy-logo img,
  .zy-header .zy-logo__mark,
  .zy-header .zy-logo__img {
    width: calc(186px + 56px * var(--zy-s));
    height: auto;
  }

  .zy-header .zy-nav a {
    font-size: calc(11px + 3px * var(--zy-s));
    letter-spacing: 0.06em;
  }

  .zy-header .zy-nav {
    gap: calc(16px + 4px * var(--zy-s));
  }

  .zy-header .zy-actions {
    gap: calc(6px + 2px * var(--zy-s));
    min-width: calc(132px + 16px * var(--zy-s));
  }

  .zy-header .zy-actions a {
    flex-basis: calc(36px + 6px * var(--zy-s));
    width: calc(36px + 6px * var(--zy-s));
    height: calc(36px + 6px * var(--zy-s));
  }

  .zy-header .zy-action-icon {
    width: calc(23px + 5px * var(--zy-s));
    height: calc(23px + 5px * var(--zy-s));
  }

  .zy-header .zy-actions [data-csk-cart-count] {
    min-width: calc(15px + 2px * var(--zy-s));
    height: calc(15px + 2px * var(--zy-s));
    font-size: calc(9px + 1px * var(--zy-s));
  }

  .zy-header .zy-mega,
  .zy-header--native .zy-mega,
  .zy-header .zy-nav__item::after,
  .zy-header--native .zy-nav__item::after {
    top: calc(78px + 16px * var(--zy-s));
  }

  .zy-header .zy-nav__item::before {
    top: calc(62px + 16px * var(--zy-s));
  }
}

/* 14. Footer columns and the newsletter copy start at opacity 0
   (.zy-reveal) until an IntersectionObserver clears a 12% threshold on a
   root shrunk 10% from the bottom. Missing that threshold leaves the
   black and grey blocks blank even though the markup is the real footer. */
.zy-footer .zy-reveal,
.zy-js .zy-footer .zy-reveal,
.zy-footer__newsletter > div {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* 0930j: catalog remainder occupies exactly one normal grid cell. */
[data-zy-collection-layout] .zy-product-grid > .zy-catalog-remainder {
  display: flex;
  grid-column: auto;
  justify-self: stretch;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 20px 10px;
  background: #f1f2f3;
  color: #1c2530;
  text-align: center;
  font-size: 14px;
}
[data-zy-collection-layout] .zy-product-grid > .zy-catalog-remainder:hover {
  background: #e8ebee;
}
/* Four actual DOGS products; the fourth is hidden only in its three-column band. */
@media (min-width: 1021px) {
  .zy-dogs-grid > [data-zy-product]:nth-of-type(n+4) { display: none; }
}

/* 0930j: wide home sections share the same outer edges; preserve <=1599. */
@media (min-width: 1600px) {
  .zy-dogs-strip .zy-dogs-grid,
  .zy-dogs-strip h2 {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 860px) {
  html.zy-tawk-live body .zy-live-chat-mobile { display: none !important; }
  html.zy-tawk-live #min-widget iframe { pointer-events: auto !important; }
}

/* 0930l: product PICKS fills its home container and keeps one slide in reserve.
   Rail-relative offsets also make the kit's native next/previous snap accurate. */
.zy-picks .zy-picks__stage {
  width: 100%;
  min-width: 0;
  --zy-edge-fade: 0px;
}
.zy-picks .zy-picks__stage::before,
.zy-picks .zy-picks__stage::after { display: none; }
.zy-picks .zy-picks__rail {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px 0 32px;
  gap: 16px;
  scroll-padding: 0;
  justify-content: flex-start;
}
.zy-picks .zy-pick-card { flex: 0 0 calc((100% - 48px) / 4); }
.zy-picks .zy-picks-arrow--prev { left: -20px; }
.zy-picks .zy-picks-arrow--next { right: -20px; }
@media (max-width: 1120px) {
  .zy-picks .zy-pick-card { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 600px) {
  .zy-picks .zy-pick-card { flex-basis: 86%; }
}
/* Horizontal slides should show immediately, including a narrow next-card peek. */
.zy-js .zy-picks .zy-pick-card.zy-reveal {
  opacity: 1;
  transform: none;
}

/* 0930m: preserve the full PICKS product artwork, including corner branding. */
.zy-picks .zy-pick-card__media { aspect-ratio: 1 / 1; }
.zy-picks .zy-pick-card__media img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transform: none;
}
.zy-picks .zy-pick-card:hover .zy-pick-card__media img {
  transform: none;
}
/* Mobile uses the official green tawk launcher even while its script loads. */
@media (max-width: 860px) {
  body .zy-live-chat-mobile { display: none !important; }
}