/* Important shared card declarations outrank the older department layers. */
@layer product-card-standard;

body[data-admin-gate] > :not(#app):not(#adminLoadingScreen):not(script):not(link):not(style) {
  display: none !important;
}

/* ==========================================================================
   CityPaws desktop category dropdowns
   Scoped only to the categories navigation; mobile drawer remains untouched.
   ========================================================================== */
@media (min-width: 1024px) {
  header.main-header #categoriesNav {
    display: flex !important;
    flex-wrap: wrap;
    position: relative;
    z-index: 31;
    overflow: visible !important;
  }

  header.main-header #categoriesNav .desktop-category-item {
    position: relative;
    overflow: visible;
  }
  header.main-header #categoriesNav .desktop-category-item.is-open {
    z-index: 2;
  }

  header.main-header #categoriesNav .desktop-category-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }

  header.main-header #categoriesNav .desktop-category-trigger:focus-visible,
  header.main-header #categoriesNav .desktop-submenu a:focus-visible {
    outline: 2px solid #bd913d;
    outline-offset: 3px;
    border-radius: 6px;
  }

  header.main-header #categoriesNav .desktop-category-arrow {
    flex: 0 0 auto;
    color: #bd913d;
    transition: transform .18s ease;
  }

  header.main-header #categoriesNav .desktop-category-item.is-open > .desktop-category-trigger {
    color: #0d3b2b;
  }

  header.main-header #categoriesNav .desktop-category-item.is-open > .desktop-category-trigger .desktop-category-arrow {
    transform: rotate(180deg);
  }

  header.main-header #categoriesNav .desktop-submenu {
    box-sizing: border-box;
    position: absolute;
    z-index: 1000;
    top: calc(100% + 1px);
    left: 0;
    width: min(560px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: min(70vh, 640px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 16px;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    background: #fff;
    color: #173b2b;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .1);
    direction: rtl;
    text-align: right;
    isolation: isolate;
  }

  header.main-header #categoriesNav .desktop-submenu[hidden] {
    display: none !important;
  }

  header.main-header #categoriesNav .desktop-submenu-head {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 2px 2px 13px;
    border-bottom: 1px solid #eee9df;
  }

  header.main-header #categoriesNav .desktop-submenu-head img {
    box-sizing: border-box;
    display: block;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid #eee9df;
    border-radius: 50%;
    background: #f5f5f0;
    object-fit: cover;
  }

  header.main-header #categoriesNav .desktop-submenu-head h2 {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    color: #173b2b;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
  }

  header.main-header #categoriesNav .desktop-submenu-head a.desktop-submenu-all {
    display: inline-flex;
    min-height: 36px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid #e7e4d9;
    border-radius: 8px;
    background: #fff;
    color: #173b2b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease;
  }

  header.main-header #categoriesNav .desktop-submenu-head a.desktop-submenu-all:hover {
    border-color: #e5e1d3;
    background: #F5F5F0;
  }

  header.main-header #categoriesNav .desktop-submenu-links {
    display: grid;
    background: #fff;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 8px;
    padding-top: 10px;
  }

  header.main-header #categoriesNav .desktop-submenu-links a {
    box-sizing: border-box;
    display: flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #173b2b;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease;
  }

  header.main-header #categoriesNav .desktop-submenu-links a span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  header.main-header #categoriesNav .desktop-submenu-links small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #6b756f;
  }

  header.main-header #categoriesNav .desktop-submenu-links a span:last-child {
    flex: 0 0 auto;
    color: #bd913d;
    font-size: 18px;
    line-height: 1;
    transition: transform .16s ease;
  }

  header.main-header #categoriesNav .desktop-submenu-links a:hover {
    border-color: #eeede6;
    background: #F5F5F0;
  }

  header.main-header #categoriesNav .desktop-submenu-links a:hover span:last-child {
    transform: translateX(-2px);
  }
}

/* Final mobile-only PDP type and fitting overrides. Desktop product typography
   remains governed by its established >=1024px rules above. */
@media (max-width: 767px) {
  body[data-page='product'] .page:has(.detail),
  body[data-page='product'] .detail,
  body[data-page='product'] .detail-info {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-page='product'] .detail-info h1 {
    max-width: 100% !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  body[data-page='product'] .detail-info > .price {
    max-width: 100% !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    flex-wrap: wrap !important;
    overflow-wrap: anywhere !important;
  }

  body[data-page='product'] .detail .sizes {
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
  }

  body[data-page='product'] .detail .sizes [data-size] {
    min-height: 36px !important;
    padding: 5px 10px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body[data-page='product'] .detail-info .purchase {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  body[data-page='product'] .purchase .qty {
    flex: 0 0 auto !important;
    align-self: stretch !important;
  }

  body[data-page='product'] .detail-info .purchase > .btn.gold {
    flex: 1 1 9rem !important;
    min-width: min(100%, 9rem) !important;
    max-width: 100% !important;
    align-self: stretch !important;
    min-height: 46px !important;
    height: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
  }

  body[data-page='product'] .pdp-description .pdp-section-body p,
  body[data-page='product'] :is(.pdp-section-body, .detail-description-extra) p {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  body[data-page='product'] .detail-info > :is(.pdp-subtitle, .detail-category),
  body[data-page='product'] .detail-info :is(.pdp-description, .pdp-accordions, .pdp-trust-strip) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

}

@media (max-width: 1023px) {
  header.main-header #categoriesNav .desktop-category-item {
    display: contents;
  }
  header.main-header #categoriesNav .desktop-category-arrow {
    display: none;
  }
  header.main-header #categoriesNav .desktop-submenu {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  header.main-header #categoriesNav .desktop-category-arrow,
  header.main-header #categoriesNav .desktop-submenu-head a.desktop-submenu-all,
  header.main-header #categoriesNav .desktop-submenu-links a,
  header.main-header #categoriesNav .desktop-submenu-links a span:last-child {
    transition: none !important;
  }
}
body[data-admin-gate] #app {
  padding: 0 !important;
  max-width: none !important;
}
body[data-admin-gate] #app > .push-optin-banner { display: none !important; }
/* Auth is a dedicated storefront surface; employee authentication is untouched. */
body[data-page="login"] > :not(#app):not(script):not(link):not(style) {
  display: none !important;
}
body[data-page="login"] #app {
  padding: 0 !important;
  max-width: none !important;
}
body[data-page="login"] .account-admin-shortcut {
  text-align: center;
  padding: 12px 16px 24px;
  margin: 0;
  font-size: 12px;
}
/* ==========================================================================
   UNIFIED CATALOG FILTER COMPONENT — all category/search/brand/offers drawers.
   First important layer: legacy field styles cannot change shell geometry.
   Taxonomy/facet content stays category-specific; this owns the shared shell.
   ========================================================================== */
/* Homepage master: only the homepage; catalog cards retain their approved theme. */
@layer homepage-master {
  body[data-page="home"] .home-promo-wrap-products,
  body[data-page="home"] .home-promo-product:not(.hero-slider-slide) {
    display: none !important;
  }
  body[data-page="home"] .home-hero-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 440px !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  body[data-page="home"] #app > .home-hero-carousel {
    position: relative !important;
    display: block !important;
    width: min(100%, 1280px) !important;
    aspect-ratio: 3 / 1 !important;
    height: auto !important;
    max-height: 440px !important;
    min-height: 0 !important;
    margin: 0 auto 8px !important;
    overflow: hidden !important;
    isolation: isolate;
    border-radius: 16px !important;
    background: #0d3b2b !important;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-slide {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .45s ease, visibility .45s ease;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-slide.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body[data-page="home"] .home-hero-carousel .hero-artwork {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: inherit !important;
  }
  body[data-page="home"] .home-hero-carousel .hero-artwork img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 440px !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
  body[data-page="home"] .home-hero-primary-link {
    position: absolute;
    z-index: 2;
    inset: 0;
  }
  body[data-page="home"] .home-hero-carousel .desktop-hero-shop {
    z-index: 3 !important;
  }
  body[data-page="home"] .home-hero-italian {
    background: #f6edd8 !important;
  }
  body[data-page="home"] .home-hero-italian > a {
    display: block;
    width: 100%;
    height: 100%;
  }
  body[data-page="home"] .home-hero-italian img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 440px !important;
    object-position: center !important;
    object-fit: contain;
    object-position: center;
  }
  body[data-page="home"] .home-hero-arrow {
    position: absolute;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #ece5d8;
    border-radius: 50%;
    background: #fffefa;
    color: #0d3b2b;
    box-shadow: 0 3px 12px #092e202b;
    cursor: pointer;
  }
  body[data-page="home"] .home-hero-arrow {
    top: 50%;
    transform: translateY(-50%);
  }
  body[data-page="home"] .home-hero-arrow-left { left: 12px; }
  body[data-page="home"] .home-hero-arrow-right { right: 12px; }
  body[data-page="home"] .home-hero-dots {
    position: absolute;
    z-index: 5;
    bottom: 10px;
    left: 50%;
    display: flex;
    gap: 9px;
    transform: translateX(-50%);
  }
  body[data-page="home"] .home-hero-dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 1.5px solid #fff;
    border-radius: 50%;
    background: #0d3b2b;
    box-shadow: 0 1px 4px #0007;
    cursor: pointer;
  }
  body[data-page="home"] .home-hero-dot[aria-current="true"] {
    border-color: #e5c46e;
    background: #e5c46e;
  }
  body[data-page="home"] :is(.home-hero-arrow, .home-hero-dot):focus-visible {
    outline: 3px solid #bd913d;
    outline-offset: 2px;
  }
  body[data-page="home"] .home-hero-video {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
  body[data-page="home"] .home-hero-video[hidden] { display: none; }

  body[data-page="home"] .home-category-section {
    border: 0 !important;
    background: #fffaf0 !important;
  }
  body[data-page="home"] .home-category-rail {
    gap: 12px !important;
    justify-content: center;
  }
  body[data-page="home"] .home-category-rail > .home-category-bubble {
    flex: 0 0 84px !important;
    gap: 7px !important;
    color: #0d3b2b !important;
  }
  body[data-page="home"] .home-category-rail > .home-category-bubble img {
    width: 74px !important;
    height: 74px !important;
    max-width: none !important;
    border: 3px solid #fffefa !important;
    border-radius: 50% !important;
    background: #fffefa !important;
    box-shadow: 0 5px 12px #173b2b21 !important;
    object-fit: cover !important;
  }
  body[data-page="home"] .home-category-rail > .home-category-bubble strong {
    font-weight: 800 !important;
    color: #0d3b2b !important;
  }
  body[data-page="home"] .home-product-section {
    background: #fffaf0 !important;
    border: 0 !important;
  }
  body[data-page="home"] .home-product-section .title h2 {
    color: #0d3b2b !important;
    font-weight: 800 !important;
  }
  body[data-page="home"] .home-product-section .title {
    padding-bottom: 9px !important;
    border-bottom: 1px solid #d6b771 !important;
  }
  body[data-page="home"] .products.home-product-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    grid-template-rows: 1fr !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  body[data-page="home"] .home-product-grid > .product {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 0 0 calc((100% - 36px) / 4) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 10px !important;
    border: 1px solid #ece5d8 !important;
    border-radius: 15px !important;
    background: #fffdfa !important;
    box-shadow: 0 4px 14px #173b2b0f !important;
    text-align: center !important;
  }
  body[data-page="home"] .home-product-grid > .product :is(.product-card-media, .product-card-media-wrap) {
    width: 100% !important;
    height: 165px !important;
    min-height: 0 !important;
    max-height: 165px !important;
    max-width: none !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    background: transparent !important;
  }
  body[data-page="home"] .home-product-grid > .product img.product-image {
    display: block;
    width: 100% !important;
    height: 165px !important;
    max-height: 165px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
    background: transparent !important;
    filter: none !important;
    transform: none !important;
  }
  body[data-page="home"] .home-product-grid > .product h3 {
    min-height: 2.6em !important;
    margin: 3px 0 !important;
    color: #173b2b !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }
  body[data-page="home"] .home-product-grid > .product :is(.product-brand-link, .card-size, .product-weight) {
    color: #6b726c !important;
    font-size: 12px !important;
    text-align: center !important;
  }
  body[data-page="home"] .home-product-grid > .product .price {
    min-height: 0 !important;
    margin: 3px 0 6px !important;
    color: #0d3b2b !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }
  body[data-page="home"] .home-product-grid > .product .price.sale {
    color: #c52634 !important;
  }
  body[data-page="home"] .home-product-grid > .product .price :is(del, s, .old, .old-price) {
    color: #999 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
  }
  body[data-page="home"] .home-product-grid > .product > .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 39px !important;
    margin-top: auto !important;
    padding: 7px 8px !important;
    border-radius: 8px !important;
    background: #0d3b2b !important;
    color: #fffefa !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }
  body[data-page="home"] .home-add-icon {
    display: inline-block;
    flex: 0 0 19px;
  }

  body[data-page="home"] .home-brands-showcase {
    border: 0 !important;
    background: #fffaf0 !important;
  }
  body[data-page="home"] .home-brands-heading h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #0d3b2b !important;
    font-weight: 800 !important;
    text-align: center !important;
  }
  body[data-page="home"] .home-brands-heading h2::before,
  body[data-page="home"] .home-brands-heading h2::after {
    flex: 1 1 auto;
    height: 1px;
    background: #d6b771;
    content: "";
  }
  body[data-page="home"] .home-brands-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(130px, 1fr) !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    overflow-x: auto !important;
  }
  body[data-page="home"] .home-brand-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: 8px !important;
    border: 0 !important;
    border-inline-end: 1px solid #d5b363 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-page="home"] .home-brand-card img {
    width: 100% !important;
    max-width: 138px !important;
    height: 54px !important;
    object-fit: contain !important;
  }
  body[data-page="home"] .home-hero-managed :is(a, picture, img) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  body[data-page="home"] .home-brand-wordmark-italian {
    font-size: 18px !important;
    font-style: italic;
    font-weight: 800 !important;
    letter-spacing: -.055em;
    color: #163d2b !important;
  }
  body[data-page="home"] .home-brand-wordmark-best {
    color: #9b7237 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.15;
    text-align: center;
  }
  body[data-page="admin"] .ad-hero-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    color: #173b2b;
    font-weight: 700;
    cursor: pointer;
  }
  body[data-page="admin"] .ad-hero-toggle input {
    position: relative;
    width: 46px;
    height: 26px;
    margin: 0;
    appearance: none;
    border: 1px solid #9ca9a2;
    border-radius: 20px;
    background: #d5dad5;
    cursor: pointer;
  }
  body[data-page="admin"] .ad-hero-toggle input::after {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px #0003;
    content: "";
    transition: transform .2s ease;
  }
  body[data-page="admin"] .ad-hero-toggle input:checked { background: #0d3b2b; }
  body[data-page="admin"] .ad-hero-toggle input:checked::after { transform: translateX(-20px); }
  html[dir="ltr"] body[data-page="admin"] .ad-hero-toggle input:checked::after { transform: translateX(20px); }
  body[data-page="admin"] .ad-hero-toggle input:focus-visible { outline: 3px solid #bd913d; outline-offset: 3px; }
  @media (min-width: 768px) and (max-width: 1023px) {
    body[data-page="home"] .home-product-grid > .product {
      flex-basis: calc((100% - 24px) / 3) !important;
    }
  }
  @media (min-width: 1024px) {
    body[data-page="home"] :is(#hotOffers, #newArrivals) .products {
      display: grid !important;
      grid-auto-flow: row !important;
      grid-auto-columns: auto !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      grid-template-rows: none !important;
      gap: 16px !important;
      padding: 8px 0 16px !important;
      overflow: visible !important;
    }
    body[data-page="home"] :is(#hotOffers, #newArrivals) .products > .product {
      padding: 14px !important;
      text-align: center !important;
    }
    body[data-page="home"] :is(#hotOffers, #newArrivals) .product :is(.product-card-media, .product-card-media-wrap) {
      height: 170px !important;
      max-height: 170px !important;
    }
    body[data-page="home"] :is(#hotOffers, #newArrivals) .product .product-image {
      height: 170px !important;
      max-height: 170px !important;
      object-fit: contain !important;
      mix-blend-mode: multiply !important;
    }
  }
  @media (max-width: 767px) {
    body[data-page="home"] .home-hero-slide img {
      max-height: 240px !important;
      aspect-ratio: 16 / 9 !important;
    }
    body[data-page="home"] #app > .home-hero-carousel {
      width: 100% !important;
      height: auto !important;
      max-height: 240px !important;
      aspect-ratio: 16 / 9 !important;
      border-radius: 0 !important;
      margin: 0 0 6px !important;
    }
    body[data-page="home"] .home-hero-carousel .hero-artwork img {
      object-fit: contain !important;
      object-position: center !important;
      max-height: 240px !important;
      aspect-ratio: 16 / 9 !important;
    }
    body[data-page="home"] .home-hero-italian img {
      max-height: 240px !important;
      aspect-ratio: 16 / 9 !important;
    }
    body[data-page="home"] .home-hero-carousel .desktop-hero-shop { display: none !important; }
    body[data-page="home"] .home-hero-arrow { width: 36px; height: 36px; }
    body[data-page="home"] .home-hero-arrow-left { left: 7px; }
    body[data-page="home"] .home-hero-arrow-right { right: 7px; }
    body[data-page="home"] .home-hero-italian img { object-fit: contain; }
    body[data-page="home"] .home-category-rail {
      justify-content: flex-start;
      gap: 7px !important;
    }
    body[data-page="home"] .home-category-rail > .home-category-bubble {
      flex: 0 0 54px !important;
      gap: 5px !important;
    }
    body[data-page="home"] .home-category-rail > .home-category-bubble img {
      width: 54px !important;
      height: 54px !important;
    }
    body[data-page="home"] .home-category-rail > .home-category-bubble strong {
      font-size: 11.5px !important;
      white-space: nowrap;
    }
    body[data-page="home"] .products.home-product-grid {
      grid-auto-columns: calc((100% - 12px) / 2) !important;
      gap: 12px !important;
    }
    body[data-page="home"] .home-product-grid > .product {
      padding: 8px !important;
    }
    body[data-page="home"] .home-product-grid > .product :is(.product-card-media, .product-card-media-wrap) {
      height: 135px !important;
      max-height: 135px !important;
    }
    body[data-page="home"] .home-product-grid > .product img.product-image {
      height: 135px !important;
      max-height: 135px !important;
    }
    body[data-page="home"] .home-product-grid > .product h3 { font-size: 14px !important; }
    body[data-page="home"] .home-brands-grid {
      grid-auto-columns: calc(100% / 5) !important;
    }
    body[data-page="home"] .home-brand-card { padding: 4px !important; }
    body[data-page="home"] .home-brand-card img { height: 39px !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    body[data-page="home"] .home-hero-carousel .home-hero-slide,
    body[data-page="admin"] .ad-hero-toggle input::after { transition: none !important; }
  }
}

/* Homepage hero composition: stable shared frame, complete foreground artwork,
   and a softly filled forest backdrop. Kept in homepage-master so the legacy
   important layer remains the single authority for homepage geometry. */
@layer homepage-master {
  body[data-page="home"] #app > .home-hero-carousel {
    box-sizing: border-box !important;
    width: min(100%, 1240px) !important;
    height: 400px !important;
    min-height: 0 !important;
    max-height: 400px !important;
    aspect-ratio: auto !important;
    margin: 0 auto 12px !important;
    overflow: hidden !important;
    border: 1px solid rgb(207 164 73 / 48%) !important;
    border-radius: 20px !important;
    background: #103b2c !important;
    touch-action: pan-y pinch-zoom;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-slide {
    box-sizing: border-box !important;
    background: #103b2c !important;
    touch-action: pan-y pinch-zoom;
  }
  body[data-page="home"] .home-hero-carousel :is(img, picture) {
    -webkit-user-drag: none;
    user-select: none;
  }
  body[data-page="home"] .home-hero-carousel .hero-slide-backdrop {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #103b2c !important;
    pointer-events: none !important;
  }
  body[data-page="home"] .home-hero-carousel .hero-slide-backdrop :is(picture, img) {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: blur(18px) brightness(.62) saturate(.9) !important;
    transform: scale(1.06) !important;
  }
  body[data-page="home"] .home-hero-carousel .hero-artwork {
    z-index: 1 !important;
    inset: 0 0 90px !important;
    height: auto !important;
    background: transparent !important;
    pointer-events: none !important;
  }
  body[data-page="home"] .home-hero-carousel .hero-artwork :is(picture, img) {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    filter: none !important;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-primary-link {
    z-index: 2 !important;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-italian {
    background: transparent !important;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-media,
  body[data-page="home"] .home-hero-carousel .home-hero-italian > a {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 0 90px !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-italian .home-hero-media img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-managed > a {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 0 90px !important;
    width: 100% !important;
    height: auto !important;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-managed > a :is(picture, img) {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
  body[data-page="home"] .home-hero-carousel .hero-slide-copy {
    box-sizing: border-box !important;
    position: absolute !important;
    z-index: 4 !important;
    inset: auto 0 0 !important;
    display: flex !important;
    min-width: 0 !important;
    min-height: 90px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 8px 24px 31px !important;
    overflow: hidden !important;
    border-top: 1px solid rgb(207 164 73 / 55%) !important;
    background: linear-gradient(100deg, rgb(7 39 27 / 94%), rgb(15 58 41 / 95%)) !important;
    color: #fff8e8 !important;
    direction: rtl;
    text-align: right;
  }
  body[data-page="home"] .home-hero-carousel .hero-slide-copy :is(h2, p) {
    min-width: 0 !important;
    margin: 0 !important;
    color: #fff8e8 !important;
    text-shadow: 0 1px 8px rgb(0 0 0 / 28%);
  }
  body[data-page="home"] .home-hero-carousel .hero-slide-copy > :is(div, section) {
    min-width: 0 !important;
    flex: 1;
  }
  body[data-page="home"] .home-hero-carousel .hero-slide-title {
    font-size: clamp(17px, 2vw, 24px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-wrap: balance;
  }
  body[data-page="home"] .home-hero-carousel .hero-slide-subtitle {
    margin-top: 3px !important;
    color: #f4ead2 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }
  body[data-page="home"] .home-hero-carousel .hero-copy-paw {
    flex: 0 0 auto !important;
    display: inline-flex;
    vertical-align: middle;
    color: #cfa449 !important;
  }
  body[data-page="home"] .home-hero-carousel .hero-slide-cta {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 8px 17px !important;
    border: 1px solid #e3bd66 !important;
    border-radius: 999px !important;
    background: #cfa449 !important;
    color: #173b2b !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }
  body[data-page="home"] .home-hero-carousel [data-baked-copy="true"] .hero-slide-copy .hero-slide-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-delivery {
    background:
      radial-gradient(ellipse at 50% 44%, rgb(207 164 73 / 18%), transparent 40%),
      linear-gradient(135deg, #183f2e, #082c20 72%) !important;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-delivery .hero-delivery-art {
    box-sizing: border-box !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 0 90px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(18px, 5vw, 64px) !important;
    overflow: hidden !important;
    color: #d9b45b !important;
    background: transparent !important;
  }
  body[data-page="home"] .home-hero-carousel .hero-delivery-art img {
    display: block !important;
    width: clamp(92px, 15vw, 170px) !important;
    height: clamp(92px, 15vw, 170px) !important;
    max-height: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 18px rgb(0 0 0 / 25%)) !important;
  }
  body[data-page="home"] .home-hero-carousel .hero-delivery-truck {
    display: block !important;
    width: clamp(120px, 22vw, 250px) !important;
    height: auto !important;
    max-height: 74% !important;
    color: #e3bd66 !important;
    filter: drop-shadow(0 12px 16px rgb(0 0 0 / 24%)) !important;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-arrow {
    z-index: 6 !important;
    top: calc(50% - 45px) !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-color: rgb(207 164 73 / 65%) !important;
    background: rgb(255 250 239 / 96%) !important;
    color: #103b2c !important;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-dots {
    z-index: 7 !important;
    bottom: 3px !important;
    left: 50% !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    transform: translateX(-50%) !important;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-dot {
    position: relative !important;
    display: grid !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-dot::after {
    display: block;
    width: 10px;
    height: 10px;
    border: 1px solid #fff4dc;
    border-radius: 999px;
    background: #315846;
    box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
    content: "";
    transition: transform .2s ease, opacity .2s ease;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-dot[aria-current="true"]::after {
    border-color: #cfa449;
    background: #cfa449;
    transform: scaleX(2.2);
  }
  body[data-page="home"] .home-hero-carousel :is(
    .home-hero-arrow, .home-hero-dot,
    .hero-slide-cta
  ):focus-visible {
    outline: 3px solid #e3bd66 !important;
    outline-offset: 2px !important;
  }
  html[dir="ltr"] body[data-page="home"] .home-hero-carousel .hero-slide-copy {
    direction: ltr;
    text-align: left;
  }
  html[dir="ltr"] body[data-page="home"] .home-hero-carousel .hero-slide-copy {
    flex-direction: row;
  }

  @media (min-width: 1024px) {
    body[data-page="home"] #app > .home-hero-carousel {
      width: min(100%, 1240px) !important;
      height: 400px !important;
      max-height: 400px !important;
    }
    body[data-page="home"] .home-hero-carousel .home-hero-italian .hero-slide-title {
      font-size: 21px !important;
    }
  }
  @media (max-width: 767px) {
    body[data-page="home"] #app > .home-hero-carousel {
      width: calc(100% - 24px) !important;
      height: auto !important;
      max-height: 240px !important;
      aspect-ratio: 16 / 9 !important;
      margin: 0 12px 8px !important;
      border-radius: 16px !important;
    }
    body[data-page="home"] .home-hero-carousel .hero-artwork {
      inset: 0 0 86px !important;
    }
    body[data-page="home"] .home-hero-carousel .home-hero-media,
    body[data-page="home"] .home-hero-carousel .home-hero-italian > a,
    body[data-page="home"] .home-hero-carousel .home-hero-managed > a {
      inset: 0 0 86px !important;
    }
    body[data-page="home"] .home-hero-carousel .hero-slide-copy {
      min-height: 86px !important;
      gap: 7px !important;
      padding: 6px 10px 30px !important;
    }
    body[data-page="home"] .home-hero-carousel .hero-slide-title {
      font-size: 16px !important;
      line-height: 1.15 !important;
    }
    body[data-page="home"] .home-hero-carousel .home-hero-italian .hero-slide-title {
      font-size: 16px !important;
    }
    body[data-page="home"] .home-hero-carousel .hero-slide-subtitle {
      margin-top: 2px !important;
      font-size: 11.5px !important;
      line-height: 1.25 !important;
    }
    body[data-page="home"] .home-hero-carousel .hero-slide-cta {
      min-width: 44px !important;
      min-height: 44px !important;
      gap: 4px !important;
      padding: 7px 10px !important;
      font-size: 12px !important;
    }
    body[data-page="home"] .home-hero-carousel .hero-copy-paw {
      display: none !important;
    }
    body[data-page="home"] .home-hero-carousel .home-hero-arrow {
      top: calc(50% - 43px) !important;
      width: 44px !important;
      height: 44px !important;
    }
    body[data-page="home"] .home-hero-carousel .home-hero-arrow-left { left: 5px !important; }
    body[data-page="home"] .home-hero-carousel .home-hero-arrow-right { right: 5px !important; }
    body[data-page="home"] .home-hero-carousel .hero-delivery-art {
      inset: 0 0 86px !important;
      gap: 16px !important;
    }
    body[data-page="home"] .home-hero-carousel .hero-delivery-art img {
      width: clamp(70px, 24vw, 100px) !important;
      height: clamp(70px, 24vw, 100px) !important;
    }
    body[data-page="home"] .home-hero-carousel .hero-delivery-truck {
      width: clamp(100px, 34vw, 150px) !important;
    }
    body[data-page="home"] .home-hero-carousel[dir="ltr"] .hero-slide-copy {
      min-height: 104px !important;
    }
    body[data-page="home"] .home-hero-carousel[dir="ltr"] :is(.hero-artwork, .home-hero-media, .hero-delivery-art) {
      bottom: 104px !important;
    }
    body[data-page="home"] .home-hero-carousel[dir="ltr"] .home-hero-arrow {
      top: calc(50% - 52px) !important;
    }
  }
  body[data-page="home"] .home-hero-carousel[data-mode="video"] .hero-slide-copy {
    display: none !important;
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    body[data-page="home"] #app > .home-hero-carousel {
      width: min(100%, 1240px) !important;
      height: 400px !important;
      max-height: 400px !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    body[data-page="home"] .home-hero-carousel .home-hero-slide,
    body[data-page="home"] .home-hero-carousel .home-hero-dot::after {
      transition: none !important;
    }
  }
}

@layer catalog-filter-component {
  #catalogFilters.filters {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #173b2b !important;
    background: #fffefa !important;
    flex-direction: column !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    overscroll-behavior: contain !important;
    direction: rtl !important;
    text-align: start;
  }
  html[dir="ltr"] #catalogFilters.filters { direction: ltr !important; }
  #catalogFilters.filters:is(.open, [open]) { display: flex !important; }
  #catalogFilters:not(.open):not([open]) { display: none !important; }
  #catalogFilters button:focus-visible {
    outline: 3px solid #d4af37;
    outline-offset: -3px;
  }
  #catalogFilters .catalog-filter-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    min-height: 56px !important;
    padding: 12px 18px !important;
    border-bottom: 1px solid #e6dec9 !important;
    background: #fdfaf3 !important;
  }
  #catalogFilters .catalog-filter-header h2 {
    margin: 0 !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #092e20 !important;
  }
  #catalogFilters .catalog-filter-header button[data-close-filters] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid #e2d7c0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #173b2b !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }
  #catalogFilters .catalog-filter-body {
    box-sizing: border-box;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px 18px !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch !important;
  }
  #catalogFilters [data-catalog-brands] {
    max-height: 180px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 6px 0 14px !important;
    padding: 8px !important;
    border: 1px solid #e8dfcd !important;
    border-radius: 10px !important;
    background: #faf6ee !important;
    text-align: start !important;
  }
  #catalogFilters [data-catalog-brands] label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 32px !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }
  #catalogFilters [data-catalog-brands] label[hidden] { display: none !important; }
  #catalogFilters .catalog-filter-actions {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 12px 18px max(14px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #e6dec9 !important;
    background: #fdfaf3 !important;
  }
  #catalogFilters .catalog-filter-actions button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    position: static !important;
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    min-height: 44px !important;
    padding: 8px;
    border-radius: 10px !important;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4;
    white-space: normal;
    cursor: pointer !important;
  }
  #catalogFilters [data-apply-filters] {
    background: #092e20 !important;
    color: #fff !important;
    border: 1px solid #092e20 !important;
  }
  #catalogFilters [data-reset-catalog] {
    background: #fff !important;
    color: #745b2b !important;
    border: 1px solid #d4af37 !important;
  }
  @media (max-width: 1023px) {
    #catalogFilters.filters {
      position: fixed !important;
      z-index: 100000 !important;
      inset: auto 0 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 86dvh !important;
      max-height: 86dvh !important;
      border-radius: 20px 20px 0 0 !important;
      box-shadow: 0 -10px 40px rgb(0 0 0 / 28%) !important;
    }
    #catalogFilters::backdrop {
      background: rgb(9 46 32 / 45%) !important;
      backdrop-filter: blur(3px) !important;
    }
  }
  @media (min-width: 1024px) {
    #catalogFilters.filters.open {
      position: fixed !important;
      z-index: 100000 !important;
      inset: 0 0 0 auto !important;
      display: flex !important;
      width: min(390px, 90vw) !important;
      max-width: 90vw !important;
      height: 100dvh !important;
      max-height: 100dvh !important;
      border-radius: 0 !important;
      border-left: 1px solid #e6dec9 !important;
      box-shadow: -10px 0 45px rgb(0 0 0 / 20%) !important;
      animation: catalogFilterSlideRight 0.25s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }
    /* Hebrew/Arabic open from the right; mirror the component for English.
       Keyframes cannot be nested under an html selector. */
    html[dir="ltr"] #catalogFilters.filters.open {
      inset: 0 auto 0 0 !important;
      border-left: 0 !important;
      border-right: 1px solid #e6dec9 !important;
      box-shadow: 10px 0 45px rgb(0 0 0 / 20%) !important;
      animation-name: catalogFilterSlideLeft !important;
    }
    @keyframes catalogFilterSlideRight {
      from { transform: translateX(100%); }
      to { transform: translateX(0); }
    }
    @keyframes catalogFilterSlideLeft {
      from { transform: translateX(-100%); }
      to { transform: translateX(0); }
    }
    .catalog:has(> #catalogFilters.open)::before {
      position: fixed !important;
      z-index: 99999 !important;
      inset: 0 !important;
      display: block !important;
      background: rgb(9 46 32 / 40%) !important;
      backdrop-filter: blur(2px) !important;
      content: "" !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #catalogFilters.filters.open,
    html[dir="ltr"] #catalogFilters.filters.open { animation: none !important; }
  }
}

/* Offers use the approved banner artwork verbatim and the shared compact
   2 / 3 / 4-column catalog rhythm without touching category-card styling. */
body[data-page="offers"] .category-hero-frame--original-artwork {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 0 14px;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 12px;
  background: transparent;
}
body[data-page="offers"] .category-hero-frame--original-artwork::before { display: none; }
body[data-page="offers"] .category-hero-frame--original-artwork .category-banner-artwork {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
body[data-page="offers"] .category-hero-frame--original-artwork h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
body[data-page="offers"] .category-hero-frame--original-artwork .category-banner-all {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
body[data-page="offers"] .category-hero-frame--original-artwork .category-banner-all:focus-visible {
  outline: 3px solid #d4af37;
  outline-offset: -4px;
}
body[data-page="offers"] .catalog { display: block !important; width: 100%; }
body[data-page="offers"] .catalog-content { min-width: 0; width: 100%; }
body[data-page="offers"] #results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 9px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 6px 2px 10px;
}
body[data-page="offers"] #results > .product {
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  width: 100%;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid #e7e0d1;
  border-radius: 14px;
  background: #fffefa;
  color: #1a202c;
  box-shadow: 0 3px 12px rgb(25 59 38 / 6%);
  text-align: center;
}
body[data-page="offers"] #results > .product > :is(.product-card-media-wrap, .product-card-media) {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: clamp(138px, 43vw, 195px);
  min-height: 0;
  max-height: 195px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body[data-page="offers"] #results .product-image { width: 100%; height: 100%; object-fit: contain; }
body[data-page="offers"] #results h3 {
  display: -webkit-box;
  min-height: 2.6em;
  max-height: 2.6em;
  margin: 2px 0;
  overflow: hidden;
  color: #1a202c;
  font-size: 13px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body[data-page="offers"] #results .offer-conditions {
  width: 100%;
  padding: 6px 7px;
  border-radius: 8px;
  background: #f8f3e7;
  color: #51462f;
  text-align: start;
}
body[data-page="offers"] #results .offer-conditions p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
body[data-page="offers"] #results .offer-conditions p + p { margin-top: 3px; }
body[data-page="offers"] .offers-filter-body { display: grid; gap: 15px; }
body[data-page="offers"] .offers-filter-field,
body[data-page="offers"] .offers-price-range label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: #3e463c;
  font-size: .92rem;
  font-weight: 650;
}
body[data-page="offers"] .offers-filter-field select,
body[data-page="offers"] .offers-price-range input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #d9ceb9;
  border-radius: 9px;
  background: #fffefa;
  color: #1a202c;
  font: inherit;
}
body[data-page="offers"] .offers-price-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) {
  body[data-page="offers"] #results { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1024px) {
  body[data-page="offers"] #results { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 8px 0; }
}
@media (max-width: 767px) {
  body[data-page="offers"] .offers-price-range { grid-template-columns: 1fr; }
}
.filters .pet-filter-field,
.filters [data-context-filters],
.filters .catalog-filter-body {
  min-width: 0;
}

.filters .pet-filter-field select,
.filters .catalog-department-controls select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  font-size: 1rem;
  line-height: 1.4;
  padding-inline-end: 2rem;
}
.filters .catalog-availability {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-block: 1rem;
}
.push-offers-control[hidden] { display: none !important; }
.catalog-department-controls { display: grid; gap: .65rem; margin-block: 1rem; padding: .8rem; border: 1px solid #d7ded5; border-radius: .75rem; min-width: 0; }
.catalog-department-controls select { width: 100%; min-width: 0; padding: .55rem; font: inherit; }
.home-local-seo {
  max-width: 72rem;
  margin: 1rem auto;
  padding-inline: 1rem;
  font-size: .875rem;
  line-height: 1.65;
  text-align: center;
}
body.catalog-filters-open { overflow: hidden; }
.push-header-toggle { color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 20px; padding: 5px 10px; font: inherit; cursor: pointer; }
.push-offers-control { display: flex; justify-content: center; padding: 4px 12px 8px; }
.push-offers-control .push-header-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; min-height: 40px; padding: 6px 16px; color: #0c3327; background: #f6e8bd; border-color: #d4af37; font-size: .875rem; font-weight: 700; line-height: 1.4; }
.push-offers-control svg { flex-shrink: 0; }
.push-offers-control [data-subscribed="true"] { color: #166534; background: #edf6ed; border-color: #8ab595; }
.push-offers-control [aria-busy="true"] { cursor: progress; opacity: .7; }
body[data-page="admin"] .push-offers-control { display: none; }
.push-preferences { margin: 16px auto; padding: 16px; max-width: 1100px; box-sizing: border-box; background: #faf7f2; color: #1b3b2b; border: 1px solid #e6dec9; border-radius: 16px; }
.push-preferences h2 { font-size: 1.1rem; margin: 0 0 12px; }
.push-preferences button { font: inherit; min-height: 44px; max-width: 100%; padding: 8px 14px; border-radius: 12px; border: 1px solid #d4af37; background: #1b3b2b; color: #fff; cursor: pointer; white-space: normal; }
.push-preferences button:focus-visible, .push-header-toggle:focus-visible { outline: 3px solid #d4af37; outline-offset: 2px; }
.push-preferences p { overflow-wrap: anywhere; font-size: .9375rem; }
.push-optin-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: min(1100px, calc(100% - 24px)); margin: 12px auto 18px; padding: 12px 16px; box-sizing: border-box; color: #0c3327; background: #faf7f2; border: 1px solid #d4af37; border-radius: 16px; box-shadow: 0 5px 18px rgb(27 59 43 / 8%); }
.push-optin-bell { font-size: 1.5rem; line-height: 1; }
.push-optin-banner p { min-width: 0; margin: 0; font-weight: 700; line-height: 1.45; }
.push-optin-actions { display: flex; align-items: center; gap: 8px; }
.push-optin-actions button { min-height: 44px; padding: 8px 16px; font: inherit; font-weight: 700; color: #0c3327; background: #d4af37; border: 1px solid #b18c20; border-radius: 12px; cursor: pointer; }
.push-optin-actions [data-push-dismiss] { width: 44px; padding: 4px; font-size: 1.35rem; background: transparent; border-color: transparent; }
.push-optin-actions button:focus-visible { outline: 3px solid #0c3327; outline-offset: 2px; }
.push-success-toast { position: fixed; z-index: 160; inset-inline: 16px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); width: fit-content; max-width: min(420px, calc(100% - 32px)); margin-inline: auto; padding: 12px 18px; color: #fff; background: #0c3327; border: 1px solid #d4af37; border-radius: 14px; box-shadow: 0 8px 24px rgb(0 0 0 / 20%); text-align: center; }
@media (min-width: 768px) { .push-success-toast { bottom: 24px; } }
@media (max-width: 520px) { .push-optin-banner { grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; margin: 10px auto 14px; padding: 11px 12px; } .push-optin-actions { grid-column: 1 / -1; justify-content: flex-end; } .push-optin-actions [data-push-enable] { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .push-optin-banner, .push-success-toast { scroll-behavior: auto; } }
.mix-bundle {
  --bundle-ink: #173c2b;
  --bundle-paper: #fffdf8;
  --bundle-line: #e7dfd0;
  --bundle-gold: #bd913d;
  box-sizing: border-box;
  width: min(100%, 52rem);
  margin: 1rem auto;
  padding: 1rem;
  color: var(--bundle-ink);
  background: var(--bundle-paper);
  border: 1px solid var(--bundle-line);
  border-radius: 1rem;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.mix-bundle *,
.mix-bundle *::before,
.mix-bundle *::after { box-sizing: border-box; }
.mix-bundle__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-block-end: 1rem; }
.mix-bundle__header h2 { margin: 0; font-size: 1.35em; line-height: 1.25; }
.mix-bundle__header p { margin: .25rem 0 0; color: #766f5d; }
.mix-bundle__counter { flex: 0 0 auto; padding: .45rem .75rem; color: var(--bundle-ink); background: #f6edda; border: 1px solid #e6d8b8; border-radius: 2rem; white-space: nowrap; }
.mix-bundle__options { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.mix-bundle__option { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; min-width: 0; padding: .65rem; background: #fff; border: 1px solid var(--bundle-line); border-radius: .8rem; }
.mix-bundle__image { display: block; width: 4.25rem; height: 4.25rem; object-fit: contain; border-radius: .55rem; background: #f3efe5; }
.mix-bundle__details { display: grid; min-width: 0; gap: .12rem; }
.mix-bundle__title { font-weight: 700; }
.mix-bundle__weight, .mix-bundle__unit-price { color: #766f5d; font-size: .9em; }
.mix-bundle__unit-price > span { font-size: .9em; }
.mix-bundle__stepper { display: grid; grid-template-columns: minmax(2.75rem, auto) minmax(1.5rem, auto) minmax(2.75rem, auto); align-items: center; gap: .25rem; }
.mix-bundle__stepper button { min-width: 2.75rem; min-height: 2.75rem; padding: .35rem; color: var(--bundle-ink); background: #f7f2e8; border: 1px solid #d9cba9; border-radius: .65rem; font: inherit; font-size: 1.15em; font-weight: 700; cursor: pointer; }
.mix-bundle__stepper button:disabled { opacity: .45; cursor: not-allowed; }
.mix-bundle__stepper output { min-width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.mix-bundle__sticky { position: sticky; z-index: 2; bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; margin: 1rem -.35rem -.35rem; padding: .8rem; background: var(--bundle-paper); border: 1px solid var(--bundle-line); border-radius: .9rem; box-shadow: 0 -.4rem 1.2rem rgb(23 60 43 / 9%); }
.mix-bundle__summary { display: grid; min-width: 0; gap: .1rem; }
.mix-bundle__summary-label { font-size: .8em; color: #766f5d; font-weight: 700; }
.mix-bundle__summary [data-bundle-summary-text] { min-width: 0; }
.mix-bundle__remaining { color: #766f5d; font-size: .85em; }
.mix-bundle__total { color: var(--bundle-ink); font-size: 1.1em; }
.mix-bundle__add { min-width: 9rem; min-height: 3rem; max-width: 100%; padding: .65rem 1rem; color: #fffdf8; background: var(--bundle-ink); border: 1px solid var(--bundle-ink); border-radius: .7rem; font: inherit; font-weight: 700; cursor: pointer; }
.mix-bundle__add:disabled { color: #766f5d; background: #eee9df; border-color: #ded7ca; cursor: not-allowed; }
.mix-bundle__error { margin: .5rem 0; padding: .65rem; color: #7c2d22; background: #fbefea; border-radius: .55rem; }
.mix-bundle button:focus-visible { outline: .2rem solid var(--bundle-gold); outline-offset: .15rem; }
@media (max-width: 36rem) {
  .mix-bundle { padding: .75rem; }
  .mix-bundle__option { grid-template-columns: 3.5rem minmax(0, 1fr); gap: .6rem; }
  .mix-bundle__image { width: 3.5rem; height: 3.5rem; }
  .mix-bundle__stepper { grid-column: 1 / -1; justify-self: end; }
  .mix-bundle__sticky { grid-template-columns: minmax(0, 1fr); }
  .mix-bundle__add { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .mix-bundle, .mix-bundle * { scroll-behavior: auto; } }

:root {
  --green: #092e20;
  --gold: #bd913d;
  --cream: #fbf6ec;
  --line: #e8dfd0;
  --red: #ee273a;
  --cp-olive: var(--green);
  --cp-olive-soft: #153a29;
  --cp-gold: var(--gold);
  --cp-gold-soft: #d8b25c;
  --cp-cream: var(--cream);
  --cp-paper: #fffdf8;
  --cp-muted: #766f5d;
  --cp-border: var(--line);
  --cp-space-1: 4px;
  --cp-space-2: 8px;
  --cp-space-3: 12px;
  --cp-space-4: 16px;
  --cp-space-5: 24px;
  --cp-space-6: 32px;
  --cp-radius-sm: 8px;
  --cp-radius-md: 12px;
  --cp-radius-lg: 16px;
  --cp-shadow-card: 0 3px 12px #193b2610;
  --cp-shadow-panel: 0 8px 24px #193b2614;
  --cp-border-width: 1px;
  --cp-button-height: 42px;
  --cp-container: 1200px;
  --cp-grid-gap: 16px;
  --cp-font-body: 500;
  --cp-font-title: 600;
  --cp-font-heading: 700;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #e8dfcc;
  color: var(--green);
  font-family: Arial, sans-serif;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  touch-action: manipulation;
}
button,
a {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  border: 0;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
header,
main,
footer {
  min-width: 0;
  width: 100%;
  max-width: min(100%, 1280px);
  margin: auto;
  background: var(--cream);
}
header {
  border-radius: 22px 22px 0 0;
  margin-top: 18px;
  position: relative;
  z-index: 5;
}
.top {
  padding: 22px 34px 15px;
  display: flex;
  align-items: center;
  gap: 40px;
  direction: ltr;
}
.logo {
  display: flex;
  align-items: center;
  font-size: 34px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: -1.5px;
}
.logo span:not(.paw) {
  color: #a97528;
}
.paw {
  font-size: 42px;
  margin-right: 7px;
}
.logo small {
  display: block;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0;
  margin-top: 2px;
}
.search {
  display: flex;
  flex: 1;
  direction: rtl;
  border: 1px solid var(--line);
  border-radius: 25px;
  overflow: hidden;
  height: 42px;
  background: #fffaf1;
}
.search input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 10px 18px;
  outline: 0;
}
.search button {
  background: var(--green);
  color: white;
  width: 45px;
  font-size: 28px;
}
.header-actions {
  min-width: 0;
  max-width: 100%;
}
.langs {
  text-align: right;
  font-size: 11px;
  margin-bottom: 14px;
}
.langs button {
  background: none;
  font-size: 11px;
  padding: 0 4px;
}
.action-row {
  display: flex;
  justify-content: space-between;
  direction: rtl;
}
.action-row a {
  text-align: center;
  font-size: 26px;
  position: relative;
}
.action-row small {
  display: block;
  font-size: 11px;
}
.cart-link b {
  position: absolute;
  right: -4px;
  top: -4px;
  background: var(--red);
  color: white;
  font-size: 11px;
  border-radius: 50%;
  padding: 3px 5px;
}
header nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 15px;
  border-top: 1px solid var(--line);
  font-weight: bold;
  font-size: 13px;
  direction: ltr;
}
header nav a {
  display: flex;
  align-items: center;
  gap: 5px;
}
header nav a:last-child {
  color: var(--red);
}
header nav img {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  object-fit: cover;
}
.menu {
  display: none;
}
main {
  min-height: 60vh;
}
.hero {
  position: relative;
  direction: ltr;
  aspect-ratio: 860/340;
  background: image-set(url('/media/image?src=assets%2Fhero.webp&w=768&v=6e676e10831f4a9b') 1x,url('/media/image?src=assets%2Fhero.webp&w=860&v=6e676e10831f4a9b') 2x) center/cover;
}
.hero .hit {
  position: absolute;
  left: 10%;
  top: 59%;
  width: 18%;
  height: 12%;
  border-radius: 10px;
}
.mobile-hero {
  display: none;
}
.benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 18px 25px;
  margin: -3px 30px 0;
  position: relative;
  border-radius: 20px;
  background: #f9f0df;
  box-shadow: 0 5px 20px #583b1610;
}
.benefits div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.benefits i {
  font-style: normal;
  font-size: 32px;
}
.benefits strong {
  display: block;
  font-size: 13px;
}
.benefits small {
  font-size: 12px;
}
.section {
  padding: 25px 40px 10px;
}
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
  margin-bottom: 17px;
}
.title h2 {
  margin: 0;
  font-size: 27px;
}
.title a {
  font-size: 13px;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
  direction: ltr;
}
.category-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  background: #fffaf2;
  transition: transform 0.2s;
}
.category-card:hover {
  transform: translateY(-4px);
}
.category-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.category-card strong {
  display: block;
  padding: 12px 4px;
  font-size: 16px;
}
.products {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
  direction: ltr;
}
.product {
  padding: 12px;
  background: #fffdf7;
  border: 1px solid var(--line);
  border-radius: 11px;
  position: relative;
  display: flex;
  flex-direction: column;
  color: #15251d;
}
.product .product-image {
  height: 150px;
  width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  margin-bottom: 12px;
}
.product h3 {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  min-height: 36px;
  margin: 0 0 5px;
}
.product .badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 8px;
  color: white;
  background: var(--red);
  border-radius: 7px;
  font-size: 13px;
  font-weight: bold;
}
.product .badge.new {
  background: #49a977;
}
.product-origin {
  display: inline-flex;
  margin: 0.35rem 0;
  padding: 0.2rem 0.45rem;
  border-radius: 1rem;
  color: #1b3b2b;
  background: #f8f4e8;
  font-size: 0.7rem;
  font-weight: 600;
}
.heart {
  position: absolute;
  top: 9px;
  right: 9px;
  font-size: 25px;
  background: transparent;
  color: var(--green);
  z-index: 1;
}
.heart.liked {
  color: var(--red);
}
.price {
  font-size: 20px;
  font-weight: 800;
  margin: 6px 0 11px;
  direction: ltr;
}
.price.sale {
  color: #c91924;
}
.price del {
  font-size: 12px;
  color: #6c6a62;
  margin-left: 7px;
  font-weight: 400;
}
.btn {
  background: var(--green);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  padding: 12px 20px;
  font-weight: bold;
  gap: 10px;
}
.btn.gold {
  background: linear-gradient(120deg, #c5a052, #a77b29);
  color: white;
}
.product .btn {
  width: 100%;
  margin-top: auto;
  padding: 10px;
  font-size: 13px;
}
.banner {
  margin: 25px 0 0;
  display: block;
}
.banner img {
  width: 100%;
  display: block;
}
.brands {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}
.brand {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font-size: 22px;
  font-weight: 800;
  direction: ltr;
  color: #155ac4;
}
.brand:nth-child(3n + 1) {
  color: #d9162f;
}
footer {
  padding: 30px 40px;
  text-align: center;
  border-top: 1px solid var(--line);
  font-size: 13px;
  border-radius: 0 0 20px 20px;
  margin-bottom: 20px;
}
footer .logo {
  justify-content: center;
  font-size: 25px;
}
footer small {
  color: #887e6d;
}
.admin-link {
  display: block;
  margin-top: 16px;
  font-size: 12px;
  text-decoration: underline;
}
.bottom {
  display: none;
}
#toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: white;
  box-shadow: 0 4px 20px #0003;
  border-radius: 12px;
  padding: 15px 25px;
  z-index: 30;
  display: none;
}
.page {
  padding: 25px 40px;
}
.crumb {
  font-size: 12px;
  color: var(--cp-muted);
  margin-bottom: 20px;
}
.catalog {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 25px;
  direction: ltr;
}
.filters label {
  display: block;
  margin: 12px 0;
  font-size: 14px;
}
.filters h3 {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  font-size: 15px;
}
.filters input[type='search'],
.filters select {
  width: 100%;
}
.catalog-content {
  direction: inherit;
}
.catalog-hero {
  background: image-set(url('/media/image?src=assets%2Fcat-hero.webp&w=475&v=c973d7c3828c4d53') 1x,url('/media/image?src=assets%2Fcat-hero.webp&w=475&v=c973d7c3828c4d53') 2x) center/cover;
  aspect-ratio: 475/115;
  position: relative;
  border-radius: 12px;
}
.catalog-hero.other {
  background: var(--green);
  aspect-ratio: auto;
  padding: 35px;
  color: var(--cream);
}
.catalog-hero.other img {
  width: 100px;
  border-radius: 50%;
  float: left;
}
.catalog-hero.other h1 {
  margin: 10px 0;
}
.catalog .products {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
  gap: 10px;
}
.controls select {
  border: 1px solid var(--line);
  padding: 8px;
  background: #fff;
  border-radius: 7px;
}
.detail {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  direction: ltr;
}
.gallery {
  background: white;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery img {
  width: 100%;
  height: 470px;
  object-fit: contain;
}
.detail-info {
  direction: rtl;
}
.detail-info h1 {
  font-size: 30px;
  direction: ltr;
}
.detail-info .price {
  font-size: 35px;
  text-align: right;
}
.sizes {
  display: flex;
  gap: 10px;
  margin: 24px 0;
  direction: ltr;
}
.sizes button {
  padding: 12px 20px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
}
.sizes button.active {
  background: var(--green);
  color: white;
}
.purchase {
  display: flex;
  gap: 12px;
}
.qty {
  display: inline-flex;
  direction: ltr;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  align-items: center;
}
.qty button {
  padding: 12px;
  background: transparent;
}
.qty span {
  padding: 0 12px;
}
.detail-info .purchase > .btn {
  flex: 1;
}
.detail-perks {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin: 30px 0;
}
.detail-perks b {
  display: block;
  font-size: 32px;
  margin-bottom: 8px;
}
details {
  border-top: 1px solid var(--line);
  padding: 20px 0;
}
summary {
  cursor: pointer;
  font-weight: bold;
}
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 30px;
}
.cart-item {
  display: flex;
  align-items: center;
  gap: 22px;
  background: white;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 12px;
}
.cart-item img {
  width: 85px;
  height: 115px;
  object-fit: contain;
}
.cart-item h3 {
  direction: ltr;
  font-size: 17px;
}
.cart-item .info {
  flex: 1;
}
.remove {
  background: none;
  font-size: 23px;
  color: #666;
}
.summary-box {
  background: white;
  padding: 25px;
  border-radius: 15px;
  height: fit-content;
}
.summary-box p {
  display: flex;
  justify-content: space-between;
}
.summary-box input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.summary-box .btn {
  width: 100%;
  margin-top: 14px;
}
.empty {
  text-align: center;
  padding: 70px 20px;
}
.empty i {
  display: block;
  font-size: 60px;
  font-style: normal;
}

/* Keep catalog connection errors readable and emphatic. */
.catalog-status p[role="status"],
.catalog-status [data-retry-catalog] {
  font-weight: 700 !important;
}
.field {
  display: block;
  margin-bottom: 16px;
}
.field input,
.field select {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 7px;
}
.notice {
  padding: 12px 16px;
  border: 1px solid #dbc48c;
  background: #fff4d9;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.stat {
  background: white;
  padding: 25px;
  border-radius: 12px;
}
.stat b {
  display: block;
  font-size: 30px;
  margin-top: 12px;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  margin-top: 25px;
}
.admin-table th,
.admin-table td {
  padding: 15px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}
.admin-table input {
  width: 80px;
  padding: 8px;
}
.filter-toggle {
  display: none;
}
.mobile-search {
  display: none;
}
@media (min-width: 1400px) {
  body {
    padding: 0 25px;
  }
  .hero {
    aspect-ratio: 860/340;
  }
}
/*
 * Approved category artwork: bound desktop banner height without cropping artwork.
 * Contain positioning matches the existing hotspot ResizeObservers.
 */
@media (min-width: 1024px) {
  body[data-page="category"][data-category="dogs"] {
    --dogs-hero-height: 280px !important;
  }
  body[data-page="category"][data-category="dogs"] #app .dogs-approved-hero,
  body[data-page="category"][data-category="cats"] .cats-approved-hero,
  body[data-page="category"][data-category="birds"] .birds-approved-hero {
    box-sizing: border-box;
    width: 100% !important;
    height: 280px !important;
    max-height: none !important;
    max-width: 100% !important;
  }

  body[data-page="category"][data-category="dogs"] #app .dogs-approved-hero img,
  body[data-page="category"][data-category="cats"] .cats-approved-hero img,
  body[data-page="category"][data-category="birds"] .birds-approved-hero img {
    display: block;
    width: 100% !important;
    height: 280px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}
@media (max-width: 900px) {
  .top {
    gap: 20px;
    padding: 20px;
  }
  .header-actions {
    min-width: 200px;
  }
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  header nav {
    gap: 18px;
  }
  .products {
    grid-template-columns: repeat(3, 1fr);
  }
  .catalog {
    grid-template-columns: 170px 1fr;
  }
  .catalog .products {
    grid-template-columns: repeat(2, 1fr);
  }
  .cart-layout {
    grid-template-columns: 1fr 300px;
  }
}
@media (max-width: 600px) {
  body {
    background: var(--cream);
    padding-bottom: 70px;
  }
  header {
    margin: 0;
    border-radius: 0;
    background: var(--green);
    color: #fff;
  }
  .top {
    height: 110px;
    padding: 16px;
    justify-content: center;
    position: relative;
  }
  .logo {
    font-size: 32px;
    color: var(--gold);
    letter-spacing: -1px;
  }
  .logo small {
    color: #fff;
    font-size: 14px;
  }
  .paw {
    font-size: 33px;
  }
  .top .search,
  .langs,
  .action-row a:not(.cart-link) {
    display: none;
  }
  .header-actions {
    min-width: 0;
    position: absolute;
    right: 19px;
    top: 38px;
  }
  .cart-link {
    font-size: 25px !important;
  }
  .cart-link small {
    display: none;
  }
  .cart-link b {
    background: var(--gold);
    color: var(--green);
  }
  .menu {
    display: block;
    position: absolute;
    left: 17px;
    top: 36px;
    background: none;
    color: #fff;
    font-size: 28px;
  }
  header nav {
    display: none;
    direction: rtl;
    flex-wrap: wrap;
    border-color: #34503d;
  }
  header nav.open {
    display: flex;
  }
  header nav img {
    width: 24px;
    height: 24px;
  }
  main {
    width: 100%;
  }
  .hero {
    display: none;
  }
  .mobile-hero {
    display: block;
    aspect-ratio: 755/297;
    background: image-set(url('/media/image?src=assets%2Fmobile-hero.webp&w=755&v=1c519234a87a99f6') 1x,url('/media/image?src=assets%2Fmobile-hero.webp&w=755&v=1c519234a87a99f6') 2x) center/cover;
    position: relative;
  }
  .mobile-search {
    display: flex;
    margin: -12px 15px 0;
    position: relative;
    z-index: 2;
    background: white;
  }
  .benefits {
    grid-template-columns: repeat(3, 1fr);
    margin: 12px 0 0;
    padding: 16px 6px;
    border-radius: 0;
    background: var(--cream);
    box-shadow: none;
  }
  .benefits div {
    display: block;
    text-align: center;
    border-left: 1px solid var(--line);
  }
  .benefits div:last-child {
    display: none;
  }
  .benefits i {
    font-size: 27px;
  }
  .benefits strong {
    font-size: 12px;
    margin-top: 4px;
  }
  .benefits small {
    font-size: 11px;
  }
  .section {
    padding: 20px 15px 5px;
  }
  .title h2 {
    font-size: 23px;
  }
  .title a {
    font-size: 12px;
  }
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    direction: ltr;
  }
  .category-card {
    border-radius: 14px;
    background: #f4f0e6;
  }
  .category-card strong {
    padding: 10px 2px;
    font-size: 17px;
  }
  .category-card img {
    aspect-ratio: 1.1;
    object-fit: cover;
  }
  .category-card:nth-last-child(-n + 2) {
    display: none;
  }
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .product {
    padding: 11px;
    border-radius: 12px;
  }
  .product .product-image {
    height: 145px;
  }
  .product h3 {
    font-size: 14px;
  }
  .product .badge {
    font-size: 12px;
  }
  .price {
    font-size: 21px;
  }
  .product .btn {
    background: linear-gradient(130deg, #c39b4a, #a67b2f);
  }
  .banner {
    margin: 20px 0;
  }
  .banner img {
    height: 100px;
    object-fit: cover;
  }
  .brands {
    gap: 8px;
  }
  .brand {
    padding: 15px;
    font-size: 18px;
  }
  .bottom {
    position: fixed;
    display: flex;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: space-around;
    z-index: 20;
    background: var(--cream);
    border-top: 1px solid var(--line);
    padding: 9px 3px 10px;
    box-shadow: 0 -3px 18px #173b2210;
  }
  .bottom a {
    font-size: 27px;
    min-width: 55px;
    text-align: center;
    line-height: 1;
  }
  .bottom a small {
    display: block;
    font-size: 12px;
    line-height: 1.5;
  }
  .bottom a.active {
    color: var(--gold);
  }
  footer {
    border-radius: 0;
    margin-bottom: 0;
    padding: 25px 15px;
  }
  #toast {
    bottom: 85px;
    width: max-content;
    max-width: 90%;
    font-size: 14px;
  }
  .page {
    padding: 20px 15px;
  }
  .catalog {
    display: block;
  }
  .filter-toggle {
    display: inline-block;
    padding: 9px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 7px;
  }
  .catalog-hero {
    aspect-ratio: 475/170;
    background-position: left;
  }
  .catalog-hero.other {
    padding: 20px;
  }
  .catalog .products {
    grid-template-columns: repeat(2, 1fr);
  }
  .detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .gallery img {
    height: 330px;
  }
  .detail-info h1 {
    font-size: 25px;
  }
  .detail-info .price {
    font-size: 32px;
  }
  .sizes {
    justify-content: space-between;
    gap: 5px;
  }
  .sizes button {
    padding: 12px 18px;
  }
  .cart-layout {
    display: block;
  }
  .cart-item {
    padding: 13px;
    gap: 14px;
  }
  .summary-box {
    margin-top: 20px;
  }
  .admin-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .stat {
    padding: 12px;
    font-size: 12px;
  }
  .stat b {
    font-size: 23px;
  }
  .admin-table td,
  .admin-table th {
    padding: 9px;
    font-size: 12px;
  }
  .admin-table input {
    width: 58px;
  }
  .crumb {
    margin-bottom: 14px;
  }
}
.paw svg {
  fill: var(--green);
}
@media (max-width: 600px) {
  .paw svg {
    fill: var(--gold);
  }
}
/* Reference 2: compact shop sections and weight selectors */
.card-size {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  direction: rtl;
  margin: 5px 0;
}
.card-size select {
  max-width: 95px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  color: var(--green);
  font-weight: bold;
}
.product h3 {
  min-height: 38px;
}
.variant-note {
  font-size: 11px;
  color: var(--cp-muted);
  display: block;
  margin: 8px 0 16px;
}
.zoom-image {
  background: white;
  display: block;
  width: 100%;
  padding: 15px;
  border-radius: 15px;
  color: #7d705e;
}
.zoom-image span {
  display: block;
  font-size: 12px;
  margin-top: 8px;
}
.image-dialog {
  border: 0;
  border-radius: 15px;
  padding: 25px;
  max-width: 96vw;
  max-height: 94dvh;
  background: white;
}
.image-dialog::backdrop {
  background: #082318c9;
}
.image-dialog img {
  max-height: 80dvh;
  max-width: 85vw;
  object-fit: contain;
  display: block;
}
.close-dialog {
  position: absolute;
  right: 8px;
  top: 4px;
  font-size: 30px;
  background: white;
  color: var(--green);
  border-radius: 50%;
}
.animal-hero.dogs {
  background-image: image-set(url('/media/image?src=assets%2Fdogs-hero.png&w=339&v=c23b87a2105839c6') 1x,url('/media/image?src=assets%2Fdogs-hero.png&w=339&v=c23b87a2105839c6') 2x);
  aspect-ratio: 339/238;
  background-position: center;
}
.animal-hero.cats {
  background-image: image-set(url('/media/image?src=assets%2Fcats-hero-mobile.png&w=355&v=ee096d6ee47d44fc') 1x,url('/media/image?src=assets%2Fcats-hero-mobile.png&w=355&v=ee096d6ee47d44fc') 2x);
  aspect-ratio: 355/232;
  background-position: center;
}
.animal-hero-link {
  position: absolute;
  inset: 70% 3% 4% 50%;
}
.offers-hero {
  background-image: image-set(url('/media/image?src=assets%2Foffers-hero.png&w=340&v=84daa2af8b96d7fc') 1x,url('/media/image?src=assets%2Foffers-hero.png&w=340&v=84daa2af8b96d7fc') 2x);
  aspect-ratio: 340/155;
}
.subcategories {
  display: flex;
  justify-content: space-around;
  background: white;
  margin-top: 12px;
  border-radius: 14px;
  padding: 14px 5px;
  direction: ltr;
}
.subcategories button {
  background: none;
  color: #172d20;
  font-size: 13px;
  padding: 4px;
  border-radius: 10px;
}
.subcategories button.active {
  color: #a97e2a;
}
.subcategories span {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #f5eee2;
  color: #a77732;
  font-size: 28px;
}
.compact-brands {
  background: white;
  margin-top: 12px;
  padding: 18px;
  border-radius: 12px;
}
.compact-brands > div {
  display: flex;
  gap: 12px;
  margin-top: 15px;
  justify-content: space-between;
  direction: ltr;
}
.compact-brands a {
  font-size: 16px;
  font-weight: 800;
  color: #1956b2;
}
.compact-brands a:first-child {
  color: #de1322;
}
@media (min-width: 601px) {
  .animal-hero {
    max-height: 330px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: var(--green);
  }
  .subcategories {
    margin-top: 18px;
  }
  .compact-brands {
    display: none;
  }
}
@media (max-width: 600px) {
  .top {
    height: 118px;
  }
  .top .logo {
    font-family: Georgia, serif;
    font-size: 31px;
    display: block;
    text-align: center;
    line-height: 1;
  }
  .top .logo > div {
    display: block;
  }
  .top .paw {
    display: block;
    height: 38px;
    margin: 0;
  }
  .paw svg {
    width: 35px;
    height: 35px;
  }
  .top .logo small {
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
  }
  .mobile-hero {
    background-image: image-set(url('/media/image?src=assets%2Fmobile-hero-new.png&w=353&v=4ebe5b4cda0023f5') 1x,url('/media/image?src=assets%2Fmobile-hero-new.png&w=353&v=4ebe5b4cda0023f5') 2x);
    aspect-ratio: 353/285;
  }
  .mobile-search {
    margin: -2px 15px 0;
    border-radius: 25px;
    height: 44px;
  }
  .mobile-search button {
    background: white;
    color: var(--green);
    order: 2;
  }
  .mobile-search input {
    font-size: 13px;
  }
  .category-grid {
    background: white;
    border-radius: 20px;
    padding: 16px 9px;
    border: 1px solid var(--line);
    gap: 14px 8px;
  }
  .category-card {
    border: 0;
    background: white;
    overflow: visible;
    border-radius: 0;
  }
  .category-card img {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1;
    display: block;
    margin: auto;
  }
  .category-card strong {
    font-size: 15px;
    padding: 6px 0 0;
  }
  .section:has(.category-grid) {
    padding-top: 6px;
  }
  .section:has(.category-grid) .title {
    display: none;
  }
  .products {
    gap: 9px;
  }
  .product .product-image {
    height: 165px;
    margin-bottom: 6px;
  }
  .product h3 {
    font-size: 14px;
    min-height: 36px;
    line-height: 1.25;
  }
  .card-size {
    font-size: 11px;
    margin: 4px 0;
  }
  .card-size select {
    font-size: 12px;
    padding: 6px;
  }
  .price {
    margin: 6px 0 9px;
    font-size: 21px;
  }
  .product .heart {
    font-size: 23px;
  }
  .catalog .page {
    padding: 0;
  }
  .catalog-hero {
    border-radius: 0;
  }
  .catalog .crumb {
    display: none;
  }
  .animal-hero.dogs {
    aspect-ratio: 339/238;
  }
  .animal-hero.cats {
    aspect-ratio: 355/232;
  }
  .catalog .controls {
    margin: 14px 0;
  }
  .gallery img {
    height: 350px;
    object-fit: contain;
  }
  .zoom-image {
    padding: 5px;
  }
  .sizes {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .sizes button {
    flex: 1;
    min-width: 62px;
  }
  .detail-info h1 {
    margin-top: 16px;
  }
  .detail-info .purchase .btn {
    font-size: 16px;
  }
  .bottom {
    background: var(--green);
    color: white;
    border-top: 0;
    padding-top: 12px;
  }
  .bottom a.active {
    color: var(--gold);
  }
  body[data-page='home'] .bottom {
    background: var(--cream);
    color: var(--green);
  }
  body[data-page='home'] .bottom a.active {
    background: var(--gold);
    color: var(--green);
    border-radius: 8px;
    padding: 3px 10px;
  }
  body[data-page='product'] .bottom,
  body[data-page='cart'] .bottom {
    background: var(--cream);
    color: var(--green);
  }
  body[data-page='brands'] .brands {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  body[data-page='brands'] .brand {
    min-height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body[data-page='brands'] .page {
    background: white;
    border-radius: 18px;
  }
}
.mobile-page-title {
  display: none;
}
.subcategories span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
  border-radius: 50%;
}
@media (max-width: 600px) {
  body:not([data-page='home']) .top {
    height: 74px;
  }
  body:not([data-page='home']) .top .logo {
    display: none;
  }
  body:not([data-page='home']) .mobile-page-title {
    display: block;
    font-size: 23px;
    font-weight: bold;
  }
  body:not([data-page='home']) .header-actions {
    top: 23px;
  }
  body:not([data-page='home']) .menu {
    top: 20px;
    font-size: 0;
  }
  body:not([data-page='home']) .menu:after {
    content: '‹';
    font-size: 32px;
  }
  body[data-page='category'] .crumb {
    display: none;
  }
  body[data-page='category'] .page {
    padding-top: 0;
  }
  .compact-brands a {
    font-size: 14px;
  }
  .sizes {
    margin: 18px 0 8px;
  }
  .gallery {
    position: relative;
  }
  .gallery img {
    width: 100%;
    height: 350px;
  }
  .zoom-image span {
    margin-top: 3px;
  }
  .image-dialog img {
    height: auto;
    width: auto;
  }
  body[data-page='offers'] .catalog-hero {
    margin: 0 -15px;
    width: calc(100% + 30px);
    border-radius: 0;
  }
}
/* Original supplied brand artwork and newly rendered hero photography. */
header .top {
  background: #043023;
  border-radius: 22px 22px 0 0;
  color: #fff;
  padding: 10px 30px;
  gap: 32px;
  min-height: 140px;
}
header .header-logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}
header .header-logo img {
  display: block;
  width: 205px;
  height: auto;
  object-fit: contain;
  max-width: 100%;
}
header .top .search {
  background: #fffdf5;
  color: var(--green);
}
header .top .langs button {
  color: #fff;
}
header nav {
  background: var(--cream);
}
.hero-new {
  display: grid;
  grid-template-columns: 31% 69%;
  background: #092d1d;
  aspect-ratio: auto;
  direction: ltr;
  min-height: 490px;
}
.hero-copy {
  padding: 60px 15px 45px 38px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: #f5eddb;
}
.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 1.6px;
  color: #d9b772;
  margin: 0 0 15px;
}
.hero-copy h1 {
  font-size: 44px;
  line-height: 1.03;
  margin: 0 0 20px;
  letter-spacing: -1px;
}
.hero-subtitle {
  font-size: 19px;
  line-height: 1.5;
  margin: 0 0 25px;
  direction: rtl;
  text-align: left;
}
.hero-copy .btn {
  font-size: 16px;
  padding: 13px 22px;
}
.hero-photo {
  position: relative;
  min-width: 0;
  align-self: stretch;
}
.hero-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-script {
  position: absolute;
  top: 1%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: Georgia, serif;
  font-style: italic;
  color: #f9f0d6;
  font-size: 25px;
  line-height: 1.12;
  text-shadow: 0 2px 10px #00180d;
  margin: 14px 0;
  pointer-events: none;
}
.hero-script span {
  color: #dbb560;
  font-style: normal;
  font-size: 34px;
  vertical-align: middle;
}
.hero-tagline {
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  color: white;
  text-align: center;
  font-size: 18px;
  text-shadow: 0 2px 8px #00190d;
  margin: 8px 0;
  pointer-events: none;
}
.mobile-hero-new {
  background: none;
  position: relative;
  aspect-ratio: 3/2;
}
.mobile-hero-new > img {
  width: 100%;
  height: auto;
  display: block;
}
.mobile-hero-new .hero-script {
  font-size: 18px;
  top: 0;
  margin-top: 10px;
}
.mobile-hero-new .hero-script span {
  font-size: 24px;
}
.mobile-hero-new .hero-tagline {
  font-size: 15px;
  bottom: 2%;
  margin: 4px 0;
}
.mobile-hero-new {
  display: none;
}
@media (min-width: 601px) and (max-width: 1000px) {
  .hero-new {
    min-height: 360px;
  }
  .hero-copy {
    padding: 30px 15px 30px 25px;
  }
  .hero-copy h1 {
    font-size: 33px;
  }
  .hero-subtitle {
    font-size: 15px;
  }
  .hero-script {
    font-size: 19px;
  }
  header .top {
    gap: 18px;
    padding: 10px 20px;
  }
  header .header-logo img {
    width: 165px;
  }
}
@media (max-width: 600px) {
  header .top {
    height: 151px;
    min-height: 151px;
    border-radius: 0;
    padding: 3px 10px;
    gap: 0;
    background: #043023;
  }
  header .top .header-logo {
    display: block;
    line-height: 0;
    width: 216px;
  }
  header .header-logo img {
    width: 216px;
    height: 143px;
    object-fit: contain;
  }
  header .header-actions {
    top: 64px;
    right: 16px;
  }
  header .menu {
    top: 61px;
    left: 15px;
  }
  .hero-new {
    display: none;
  }
  .mobile-hero-new {
    display: block;
    aspect-ratio: 3/2;
  }
  .mobile-hero-new img {
    height: auto;
    object-fit: contain;
  }
  .mobile-search {
    margin: 0 15px;
    box-shadow: 0 3px 12px #092d1d12;
  }
  body:not([data-page='home']) header .top {
    min-height: 74px;
    height: 74px;
  }
  body:not([data-page='home']) header .header-logo {
    display: none;
  }
  body:not([data-page='home']) header .header-actions {
    top: 23px;
  }
  body:not([data-page='home']) header .menu {
    top: 20px;
  }
  .hero-subtitle {
    direction: rtl;
  }
  header nav.open {
    background: #043023;
  }
}
@media (min-width: 601px) {
  .hero-new {
    height: clamp(360px, 40vw, 500px);
    min-height: 0;
  }
  .hero-photo {
    overflow: hidden;
    height: 100%;
  }
  .hero-photo > img {
    object-fit: cover;
    object-position: center 58%;
  }
}
/* Version 4: natural header, Hebrew typography and right-to-left shopping. */
body,
button,
input,
select {
  font-family: Heebo, Arial, sans-serif;
}
body {
  font-weight: 400;
  color: #102e20;
}
.product h3 {
  font-weight: 600;
  line-height: 1.42;
  font-size: 14px;
}
.price {
  font-weight: 800;
}
.title h2 {
  font-weight: 800;
  letter-spacing: -0.5px;
}
h1,
h2,
h3 {
  font-family: Heebo, Arial, sans-serif;
}
html[dir='rtl'] header nav,
html[dir='rtl'] .category-grid,
html[dir='rtl'] .products,
html[dir='rtl'] .title {
  direction: rtl;
}
html[dir='rtl'] .catalog {
  direction: rtl;
  grid-template-columns: 210px minmax(0, 1fr);
}
html[dir='rtl'] .catalog .filters,
html[dir='rtl'] .catalog-content {
  direction: rtl;
}
html[dir='ltr'] .catalog {
  direction: ltr;
}
html[dir='rtl'] .detail {
  direction: rtl;
}
html[dir='rtl'] .detail-info {
  direction: rtl;
}
html[dir='ltr'] .detail-info {
  direction: ltr;
}
.product h3 {
  direction: ltr;
  text-align: start;
}
.header-actions .action-row a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.header-actions svg {
  width: 25px;
  height: 25px;
}
.menu {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: none;
  padding: 8px;
  color: var(--green);
}
header .top {
  direction: rtl;
  background: var(--cream);
  color: var(--green);
  border-radius: 20px 20px 0 0;
  min-height: 112px;
  padding: 15px 25px;
  gap: 25px;
}
.natural-logo {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  line-height: 1 !important;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 27px;
  color: #b38a39;
  letter-spacing: -0.6px;
}
.natural-logo > div {
  display: block;
}
.natural-logo .paw {
  margin: 0;
  display: block;
  height: 34px;
}
.natural-logo .paw svg {
  fill: #b38a39;
  width: 38px;
  height: 34px;
}
.natural-logo small {
  font-family: Heebo, Arial, sans-serif;
  letter-spacing: 0;
  color: var(--green);
  font-weight: 500;
  font-size: 12px;
  text-align: center;
  margin-top: 7px;
}
.header-actions {
  min-width: 0;
  max-width: 100%;
}
.action-row {
  gap: 18px;
}
.install-header {
  background: none;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-weight: 600;
  font-size: 12px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  max-width: 132px;
}
.install-header svg {
  flex-shrink: 0;
}
.header-actions .cart-link b {
  right: -7px;
  top: -8px;
}
.hero-new {
  display: block;
  position: relative;
  background: var(--green);
  height: auto !important;
  min-height: 0;
  aspect-ratio: 3/1.5;
  overflow: hidden;
}
.hero-copy {
  display: none;
}
.hero-photo {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.hero-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
}
.hero-script {
  top: 0;
  left: 48%;
  right: 8%;
  font-size: 30px;
  text-align: right;
  font-family: Georgia, serif;
  font-style: italic;
  line-height: 1.25;
}
.hero-tagline {
  bottom: 1%;
  font-size: 21px;
  font-weight: 600;
}
.mobile-hero-new {
  display: none;
}
.menu:after {
  content: none !important;
}
.bottom svg {
  height: 25px;
  width: 25px;
}
.bottom a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.product .product-image {
  object-fit: contain;
  image-rendering: auto;
}
.category-card img {
  object-fit: cover;
}
.category-card strong {
  font-weight: 700;
}
.site-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  height: 100dvh;
  max-height: 100dvh;
  width: min(74vw, 340px);
  max-width: calc(100vw - 48px);
  background: var(--cream);
  color: var(--green);
  border: 0;
  border-radius: 0;
  padding: 0;
  direction: rtl;
  overflow-y: auto;
  box-shadow: -10px 0 40px #0002;
}
.site-drawer::backdrop {
  background: #001c15a0;
  backdrop-filter: blur(3px);
}
.drawer-head {
  background: var(--green);
  color: #dfb969;
  padding: 26px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-head strong {
  font-family: Georgia, serif;
  font-size: 26px;
}
.drawer-head small {
  display: block;
  color: white;
  font-size: 12px;
  margin-top: 8px;
}
.drawer-head button {
  background: none;
  color: #fff;
  padding: 5px;
}
.drawer-account {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 20px;
  background: white;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.drawer-account small {
  display: block;
  margin-top: 5px;
  color: #8a816d;
  font-size: 12px;
}
.drawer-links {
  padding: 0 20px;
}
.drawer-links > a,
.drawer-links > button.drawer-app-entry {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  font-weight: 600;
}
.drawer-links img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 50%;
}
.drawer-arrow {
  margin-inline-start: auto;
  color: #9b8d74;
  font-size: 22px;
}
.drawer-languages {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 15px 20px 25px;
}
.drawer-languages button {
  background: white;
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
}
.floating-actions {
  position: fixed;
  bottom: 25px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 25;
}
.floating-actions > a,
.floating-actions > button {
  width: 53px;
  height: 53px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 5px 18px #102e2030;
}
.floating-actions > button {
  background: var(--green);
  border: 1px solid #d5b770;
}
.floating-actions > a {
  background: #25a763;
}
.floating-actions svg {
  width: 27px;
  height: 27px;
}
.chat-panel {
  position: fixed;
  bottom: 155px;
  left: auto;
  inset-inline-end: 24px;
  width: 350px;
  max-width: calc(100vw - 30px);
  max-height: calc(100dvh - 180px);
  background: #fffdf7;
  box-shadow: 0 15px 70px #00291d40;
  z-index: 26;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  direction: rtl;
}
.chat-panel[hidden] {
  display: none !important;
}
.chat-header {
  background: var(--green);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
}
.chat-header strong {
  font-size: 19px;
  color: #e0bb6c;
  font-family: Georgia, serif;
}
.chat-header small {
  display: block;
  font-size: 12px;
  margin-top: 5px;
}
.chat-header button {
  background: none;
  color: white;
  padding: 0;
}
.chat-messages {
  min-height: 120px;
  max-height: 270px;
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-bubble {
  background: #f0ebdf;
  border-radius: 12px 12px 0 12px;
  margin: 0;
  padding: 12px;
  font-size: 13px;
  line-height: 1.65;
  align-self: flex-start;
  max-width: 92%;
  white-space: pre-line;
}
.user-bubble {
  align-self: flex-end;
  background: #153c2a;
  color: white;
  border-radius: 12px 12px 12px 0;
}
.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 16px 14px;
}
.chat-suggestions button {
  background: white;
  border: 1px solid #dcccaa;
  color: var(--green);
  border-radius: 20px;
  padding: 7px 10px;
  font-size: 11px;
}
.chat-panel form {
  display: flex;
  border-top: 1px solid var(--line);
  background: white;
}
.chat-panel input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 15px;
  font-size: 13px;
  outline: 0;
}
.chat-panel form button {
  background: none;
  color: var(--green);
  font-size: 24px;
  width: 45px;
}
.chat-category-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-category-links a,
.chat-wa-link {
  padding: 7px 10px;
  background: var(--green);
  color: white;
  border-radius: 8px;
  font-size: 12px;
}
.install-dialog {
  border: 0;
  border-radius: 18px;
  padding: 28px;
  max-width: 420px;
  width: calc(100% - 35px);
  color: var(--green);
  direction: rtl;
}
.install-dialog::backdrop {
  background: #001c15a0;
}
.install-dialog h2 {
  margin-top: 10px;
  font-size: 24px;
}
.install-dialog p {
  line-height: 1.9;
  font-size: 15px;
}
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 50px 20px;
}
.login-card {
  width: 100%;
  max-width: 440px;
  padding: 35px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 12px 45px #153b2210;
}
.login-card h1 {
  font-size: 27px;
  margin: 15px 0;
}
.login-symbol {
  font-size: 50px;
  color: var(--gold);
}
.login-card p {
  font-size: 15px;
  line-height: 1.6;
}
.login-card .btn {
  width: 100%;
  margin: 20px 0 10px;
}
.login-card small {
  display: block;
  color: #8b8069;
  font-size: 12px;
  line-height: 1.7;
  margin-top: 22px;
}
.browse-link {
  display: block;
  padding: 10px;
  text-decoration: underline;
  font-size: 14px;
}
html[dir='ltr'] .site-drawer,
html[dir='ltr'] .chat-panel {
  direction: ltr;
}
html[dir='ltr'] .hero-script {
  direction: ltr;
}
html[dir='rtl'] .account-list a {
  text-align: right;
}
@media (max-width: 950px) and (min-width: 601px) {
  header .top {
    gap: 15px;
    padding: 15px;
  }
  .natural-logo {
    min-width: 150px;
    font-size: 23px;
  }
  .header-actions {
    min-width: 130px;
  }
  .install-header {
    display: none;
  }
  header nav {
    gap: 18px;
    font-size: 12px;
  }
  .hero-script {
    font-size: 26px;
  }
}
@media (max-width: 600px) {
  header .top {
    height: 115px;
    min-height: 115px;
    position: relative;
    background: #062b1c;
    border-radius: 0;
    padding: 9px 10px;
    color: white;
    display: flex;
    justify-content: center;
    gap: 0;
  }
  header .top .natural-logo {
    display: flex !important;
    min-width: 0;
    width: 156px;
    font-size: 25px;
    color: #d5ab58;
    gap: 2px;
    margin-inline-end: 30px;
  }
  .natural-logo .paw {
    height: 31px;
  }
  .natural-logo .paw svg {
    width: 34px;
    height: 31px;
    fill: #d5ab58;
  }
  .natural-logo small {
    color: white;
    font-size: 10px;
    line-height: 1.6;
    margin-top: 4px;
  }
  .header-actions {
    min-width: 0;
    width: 94px;
  }
  .header-actions .action-row {
    display: flex;
    justify-content: space-between;
    gap: 3px;
    direction: rtl;
  }
  .header-actions .action-row a {
    display: flex !important;
    font-size: 20px;
    gap: 0;
  }
  .header-actions .action-row small {
    display: none;
  }
  .header-actions svg {
    width: 24px;
    height: 24px;
  }
  .header-actions .cart-link b {
    font-size: 9px;
    top: -9px;
    right: -5px;
    padding: 2px 4px;
  }
  .menu {
    display: flex !important;
    padding: 8px;
    color: #fff;
    font-size: inherit !important;
  }
  .menu svg {
    width: 25px;
    height: 25px;
  }
  .install-header {
    display: none;
  }
  header nav {
    display: none !important;
  }
  .hero-new {
    display: none !important;
  }
  .mobile-hero-new {
    display: block;
    position: relative;
    aspect-ratio: 1.29;
    background: var(--green);
  }
  .mobile-hero-new > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center 57%;
    display: block;
  }
  .mobile-hero-new .hero-script {
    top: 0;
    left: 43%;
    right: 5%;
    font-size: 18px;
    line-height: 1.3;
    text-align: right;
    margin: 6px 0;
  }
  .mobile-hero-new .hero-tagline {
    bottom: 1%;
    font-size: 14px;
    font-weight: 600;
    margin: 6px 0;
  }
  .mobile-hero-new .hero-script span {
    font-size: 24px;
  }
  .mobile-search {
    margin: -1px 15px 0;
    height: 46px;
    box-shadow: none;
  }
  .section {
    padding-top: 18px;
  }
  .category-grid {
    gap: 15px 8px;
  }
  .category-card img {
    width: 77px;
    height: 77px;
  }
  .category-card strong {
    font-size: 15px;
    font-weight: 700;
  }
  .category-card:nth-last-child(-n + 2) {
    display: block;
  }
  .products {
    gap: 10px;
  }
  .product h3 {
    font-size: 14px;
    min-height: 40px;
    max-height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .product .product-image {
    height: 165px;
  }
  .price {
    font-size: 21px;
  }
  .price del {
    font-size: 12px;
  }
  .product .btn {
    font-size: 13px;
    padding: 10px;
  }
  .title h2 {
    font-size: 23px;
  }
  .card-size select {
    font-family: Heebo, Arial, sans-serif;
    font-size: 12px;
  }
  .floating-actions {
    bottom: 85px;
    left: 13px;
    gap: 9px;
  }
  .floating-actions > a,
  .floating-actions > button {
    height: 47px;
    width: 47px;
  }
  .chat-panel {
    bottom: 195px;
    left: auto;
    inset-inline-end: 13px;
    max-height: calc(100dvh - 220px);
    width: 340px;
  }
  .chat-messages {
    max-height: 190px;
    min-height: 95px;
  }
  .bottom a {
    font-size: inherit;
    gap: 3px;
  }
  .bottom a small {
    font-family: Heebo, Arial, sans-serif;
    font-size: 12px;
  }
  .bottom svg {
    width: 24px;
    height: 24px;
  }
  .bottom {
    padding: 10px 4px 12px;
  }
  .bottom a.active {
    background: none !important;
    padding: 0 !important;
  }
  .login-card {
    padding: 27px;
  }
  .login-card h1 {
    font-size: 24px;
  }
  .catalog {
    display: block !important;
  }
  .detail {
    direction: rtl;
  }
  .detail-info .price {
    text-align: right;
  }
  footer {
    padding-bottom: 25px;
  }
}
@media (max-width: 350px) {
  .category-card img {
    width: 65px;
    height: 65px;
  }
  .category-card strong {
    font-size: 13px;
  }
}
.animal-hero.dogs {
  background-image:
    linear-gradient(to left, #052c1df0 0%, #052c1d99 33%, transparent 66%), image-set(url('/media/image?src=assets%2Fdogs.webp&w=768&v=18076dac2bf30d33') 1x,url('/media/image?src=assets%2Fdogs.webp&w=1254&v=18076dac2bf30d33') 2x);
  background-size:
    100% 100%,
    auto 100%;
  background-repeat: no-repeat;
  background-position:
    center,
    left center;
}
.animal-hero.cats {
  background-image:
    linear-gradient(to left, #052c1df0 0%, #052c1d99 33%, transparent 66%), image-set(url('/media/image?src=assets%2Fcats.webp&w=768&v=45796a348ce0be27') 1x,url('/media/image?src=assets%2Fcats.webp&w=1254&v=45796a348ce0be27') 2x);
  background-size: cover;
  background-position: center;
}
.offers-hero {
  background-image:
    linear-gradient(to left, #052c1df0 0%, #052c1d88 38%, transparent 66%), image-set(url('/media/image?src=assets%2Fdogs.webp&w=768&v=18076dac2bf30d33') 1x,url('/media/image?src=assets%2Fdogs.webp&w=1254&v=18076dac2bf30d33') 2x);
  background-position: center 40%;
  background-size: cover;
}
.animal-hero-copy {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  max-width: 55%;
  color: white;
}
.animal-hero-copy > span {
  font-size: 15px;
}
.animal-hero-copy h1 {
  font-size: 35px;
  line-height: 1.15;
  margin: 6px 0 10px;
  font-weight: 800;
}
.animal-hero-copy p {
  font-size: 14px;
  color: #ede4d0;
  margin: 0 0 17px;
}
.animal-hero-copy .btn {
  padding: 10px 17px;
  font-size: 13px;
}
.subcategories button {
  font-family: Heebo, Arial, sans-serif;
}
.account .banner img {
  content: image-set(url('/media/image?src=assets%2Fhero-garden-v9.png&w=768&v=b7f38d7b6e091eb9') 1x,url('/media/image?src=assets%2Fhero-garden-v9.png&w=1536&v=b7f38d7b6e091eb9') 2x);
}
@media (max-width: 600px) {
  .animal-hero-copy h1 {
    font-size: 32px;
  }
  .animal-hero-copy > span {
    font-size: 13px;
  }
  .animal-hero-copy p {
    font-size: 12px;
  }
  .animal-hero-copy .btn {
    padding: 10px 15px;
    font-size: 12px;
  }
}
.login-symbol svg {
  width: 50px;
  height: 50px;
}
.natural-logo small {
  line-height: 1.6;
}
/* Readability update: larger imagery, clear search and a gold paw in the hero. */
body {
  font-size: 16px;
  line-height: 1.55;
}
.search {
  height: 58px;
  border-radius: 30px;
  border: 1px solid #dfd7c5;
  box-shadow: 0 4px 16px #0a2e2010;
}
.search input {
  font-size: 18px;
  padding: 14px 20px;
}
.search button {
  width: 60px;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  padding: 0;
}
.search button svg {
  width: 28px;
  height: 28px;
}
.hero-script {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.16;
  left: 45%;
  right: 7%;
  margin-top: 18px;
}
.hero-script > span.hero-paw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: 8px;
  color: #dbb562;
  vertical-align: middle;
}
.hero-paw svg {
  width: 42px;
  height: 42px;
  fill: currentColor;
  filter: drop-shadow(0 2px 5px #05190a70);
}
.hero-tagline {
  font-size: 26px;
  line-height: 1.4;
  font-weight: 600;
  margin-bottom: 13px;
}
.drawer-links > a,
.drawer-links > button.drawer-app-entry {
  gap: 15px;
  padding: 12px 0;
  font-size: 20px;
  line-height: 1.4;
}
.drawer-links img {
  width: 68px;
  height: 68px;
  border-radius: 14px;
  flex-shrink: 0;
}
.drawer-links > a > svg {
  width: 27px;
  height: 27px;
}
.drawer-arrow {
  font-size: 28px;
}
.drawer-head strong {
  font-size: 31px;
}
.drawer-head small {
  font-size: 15px;
}
.drawer-account b {
  font-size: 18px;
}
.drawer-account small {
  font-size: 14px;
}
.drawer-languages button {
  font-size: 15px;
  padding: 10px 14px;
}
.drawer-account {
  margin: 20px;
  padding: 18px;
}
.title h2 {
  font-size: 29px;
  line-height: 1.35;
}
.title > a {
  font-size: 15px;
}
.product h3 {
  font-size: 16px;
  line-height: 1.4;
  min-height: 45px;
}
.card-size {
  font-size: 14px;
}
.card-size select {
  font-size: 14px;
}
.price {
  font-size: 23px;
}
.product .btn {
  font-size: 15px;
  padding: 12px;
}
.category-card strong {
  font-size: 18px;
}
.controls {
  font-size: 16px;
}
.controls select {
  font-size: 15px;
}
.filters {
  font-size: 16px;
}
.filters label {
  font-size: 16px;
}
.filters h3 {
  font-size: 18px;
}
.variant-note {
  font-size: 13px;
}
.detail-info > p {
  font-size: 17px;
  line-height: 1.7;
}
.detail-info h1 {
  font-size: 32px;
  line-height: 1.25;
}
.detail-perks {
  font-size: 16px;
}
.detail-info summary {
  font-size: 19px;
}
.detail-info details > p {
  font-size: 16px;
  line-height: 1.8;
}
.components-section {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin-top: 6px;
}
.components-section h2 {
  font-size: 23px;
  margin: 0 0 16px;
  font-weight: 700;
}
.components-wrap {
  border: 1px solid #dfdfd0;
  border-radius: 12px;
  overflow: hidden;
  background: #fffdf7;
}
.components-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.components-table th,
.components-table td {
  padding: 14px 17px;
  text-align: start;
  border-bottom: 1px solid #e9e6d9;
  line-height: 1.6;
}
.components-table th {
  background: #edf2e7;
  color: #27462f;
  font-size: 16px;
  font-weight: 700;
}
.components-table th:last-child {
  width: 48%;
}
.components-table tbody tr:last-child td {
  border-bottom: 0;
}
.components-table tbody tr:nth-child(even) {
  background: #fafbf5;
}
.components-empty {
  color: #77816d;
  font-size: 15px;
  text-align: center !important;
  padding: 24px 17px !important;
}
@media (max-width: 950px) and (min-width: 601px) {
  .hero-script {
    font-size: 32px;
  }
  .hero-paw svg {
    width: 33px;
    height: 33px;
  }
  .hero-tagline {
    font-size: 23px;
  }
  .search input {
    font-size: 17px;
  }
  .search {
    height: 54px;
  }
}
@media (max-width: 600px) {
  .mobile-search {
    height: 58px;
    margin: -1px 12px 0;
    max-width: calc(100% - 24px);
    background: #fff;
    border: 1px solid #d8d2be;
    box-shadow: 0 5px 16px #0a2e2012;
  }
  .mobile-search input {
    font-size: 17px;
    padding: 15px 14px;
  }
  .mobile-search button {
    width: 56px;
    min-width: 56px;
    background: #fff;
    color: var(--green);
  }
  .mobile-search button svg {
    width: 28px;
    height: 28px;
  }
  .mobile-hero-new .hero-script {
    font-size: 26px;
    left: 40%;
    right: 5%;
    line-height: 1.1;
    margin-top: 8px;
  }
  .mobile-hero-new .hero-script .hero-paw {
    margin-inline-start: 5px;
  }
  .mobile-hero-new .hero-paw svg {
    width: 29px;
    height: 29px;
  }
  .mobile-hero-new .hero-tagline {
    font-size: 19px;
    bottom: 1%;
    margin: 7px 0;
    line-height: 1.3;
  }
  .drawer-links img {
    width: 63px;
    height: 63px;
    border-radius: 13px;
  }
  .drawer-links > a,
  .drawer-links > button.drawer-app-entry {
    font-size: 19px;
    gap: 14px;
    padding: 11px 0;
  }
  .drawer-head strong {
    font-size: 29px;
  }
  .drawer-head small {
    font-size: 14px;
  }
  .drawer-account b {
    font-size: 17px;
  }
  .drawer-account small {
    font-size: 14px;
  }
  .drawer-links {
    padding: 0 18px;
  }
  .drawer-account {
    margin: 18px;
  }
  .title h2 {
    font-size: 25px;
  }
  .title > a {
    font-size: 14px;
  }
  .product h3 {
    font-size: 16px;
    line-height: 1.42;
    min-height: 46px;
    max-height: 46px;
  }
  .price {
    font-size: 23px;
  }
  .price del {
    font-size: 13px;
  }
  .card-size {
    font-size: 13px;
  }
  .card-size select {
    font-size: 14px;
    padding: 7px 8px;
  }
  .product .btn {
    font-size: 14px;
    padding: 11px 8px;
  }
  .category-card strong {
    font-size: 17px;
  }
  .controls {
    font-size: 15px;
  }
  .controls select,
  .filter-toggle {
    font-size: 14px;
  }
  .variant-note {
    font-size: 12px;
  }
  .detail-info h1 {
    font-size: 28px;
  }
  .detail-info > p {
    font-size: 16px;
  }
  .components-section h2 {
    font-size: 22px;
  }
  .components-table {
    font-size: 15px;
  }
  .components-table th {
    font-size: 15px;
  }
  .components-table td,
  .components-table th {
    padding: 12px 13px;
  }
  .components-empty {
    font-size: 14px;
  }
  header nav img {
    width: 27px;
    height: 27px;
  }
}
@media (max-width: 350px) {
  .mobile-hero-new .hero-script {
    font-size: 22px;
  }
  .mobile-hero-new .hero-tagline {
    font-size: 17px;
  }
  .mobile-search input {
    font-size: 16px;
  }
  .drawer-links img {
    width: 58px;
    height: 58px;
  }
  .product h3 {
    font-size: 15px;
  }
  .category-card strong {
    font-size: 15px;
  }
}
/* Unified black CityPaws wordmark, with a light backing where needed. */
.natural-logo .brand-wordmark {
  display: inline-block;
  color: #111 !important;
  font-family: Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.2;
}
.drawer-head .brand-wordmark {
  display: inline-block;
  color: #111;
  background: #f8f1df;
  padding: 4px 12px;
  border-radius: 7px;
  letter-spacing: -0.7px;
}
.natural-logo small {
  display: block;
}
@media (max-width: 600px) {
  .natural-logo .brand-wordmark {
    color: #111 !important;
    background: #f8f1df;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: 25px;
    line-height: 1.2;
    letter-spacing: -0.6px;
  }
  .natural-logo small {
    margin-top: 5px;
  }
}
@media (max-width: 350px) {
  .natural-logo .brand-wordmark {
    font-size: 22px;
    padding: 2px 7px;
  }
}
footer .brand-wordmark {
  color: #111 !important;
  font-family: Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.7px;
}

/* Garden identity: gold wordmark and gentle paw motifs. */
body,
button,
input,
select,
textarea {
  font-family: Heebo, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}
.natural-logo .brand-wordmark,
.drawer-head .brand-wordmark,
footer .brand-wordmark {
  color: #e2bd6b !important;
  background: #052c1d !important;
  padding: 3px 10px;
  border-radius: 7px;
  font-family: Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.7px;
}
.drawer-head .brand-wordmark {
  padding: 4px 12px;
}
body:not([data-page='admin']) main {
  background-color: transparent;
  background-image: none;
}
body:not([data-page='admin']) main > .section {
  background: transparent;
}
body:not([data-page='admin']) {
  isolation: isolate;
  background-color: #fbf6ec;
}
.citypaws-paw-watermark {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
  opacity: .055;
}
body:not([data-page='admin']) > :is(main, footer) {
  position: relative;
  z-index: 1;
}
body:not([data-page='admin']):not([data-admin-gate]):not([data-page='login']) .citypaws-paw-watermark {
  display: block;
}
.citypaws-paw-pair {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #174b3d;
  animation: citypaws-watermark-drift 18s ease-in-out infinite;
}
.citypaws-paw-pair svg {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  fill: currentColor;
}
.citypaws-paw-pair svg + svg {
  width: 26px;
  height: 26px;
  transform: rotate(18deg);
}
.citypaws-paw-pair--one { top: 18%; left: 12%; }
.citypaws-paw-pair--two { top: 54%; right: 9%; animation-delay: -6s; }
.citypaws-paw-pair--three { top: 82%; left: 38%; animation-delay: -12s; }
@keyframes citypaws-watermark-drift {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  20%, 80% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(16px, -24px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .citypaws-paw-pair {
    animation: none !important;
  }
}
@media (max-width: 767px) {
  .hero-new {
    aspect-ratio: 3/2 !important;
  }
  .hero-photo {
    height: 100% !important;
  }
}

/* Keep storefront rails scrollable inside the viewport instead of widening the page. */
html,
body,
#root,
#app,
main {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

#root,
#app,
main {
  min-width: 0;
}

body[data-page='home'] #hotOffers .products.home-product-grid,
body[data-page='home'] #newArrivals .products.home-product-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 12px 16px !important;
  gap: 12px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box !important;
}

body[data-page='home'] #hotOffers .products.home-product-grid > .product,
body[data-page='home'] #newArrivals .products.home-product-grid > .product {
  flex: 0 0 170px !important;
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
  scroll-snap-align: start;
  box-sizing: border-box;
}

.hero-photo > img {
  object-fit: contain !important;
  object-position: center !important;
}
.hero-script {
  left: 58%;
  right: 4%;
  top: 6%;
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1.13;
  text-align: center;
  font-weight: 500;
}
.hero-tagline {
  left: 61%;
  right: 5%;
  top: 27%;
  bottom: auto;
  font-size: clamp(16px, 1.8vw, 23px);
  line-height: 1.5;
  text-align: center;
}
.hero-script .hero-paw svg {
  width: 32px;
  height: 32px;
}
.hero-tagline {
  color: #faf4e5;
}
.category-card strong {
  font-weight: 700;
}
.category-grid {
  background: transparent;
}
@media (max-width: 600px) {
  .mobile-hero-new {
    aspect-ratio: 3/2 !important;
  }
  .mobile-hero-new > img {
    object-fit: contain !important;
    object-position: center !important;
  }
  .mobile-hero-new .hero-script {
    left: 58%;
    right: 3%;
    top: 5%;
    font-size: clamp(18px, 5.2vw, 29px);
    line-height: 1.13;
    text-align: center;
    margin: 0;
  }
  .mobile-hero-new .hero-paw svg {
    width: 20px;
    height: 20px;
  }
  .mobile-hero-new .hero-tagline {
    left: 62%;
    right: 4%;
    top: 32%;
    bottom: auto;
    font-size: clamp(11px, 3vw, 16px);
    line-height: 1.45;
    text-align: center;
    margin: 0;
  }
  .natural-logo .brand-wordmark {
    color: #e2bd6b !important;
    background: #052c1d !important;
  }
  .mobile-search {
    position: relative;
    margin-top: -9px;
    z-index: 2;
  }
  body:not([data-page='admin']) main {
    background-size: 100% 620px;
  }
  .title h2 {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.4;
  }
}

/* Open circular categories on the cream page, matching the reference. */
.section:has(.category-grid) {
  background: transparent !important;
  padding-top: 8px;
}
.category-grid {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 20px 0 26px;
  gap: 24px 16px;
}
.category-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible;
  display: block !important;
}
.category-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  object-fit: cover;
  margin: auto;
  max-width: 150px;
}
.category-card strong {
  background: transparent;
  padding: 10px 0 0;
  color: #092e20;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}
@media (max-width: 600px) {
  .section:has(.category-grid) {
    padding: 10px 14px 8px;
  }
  .category-grid {
    grid-template-columns: repeat(15, minmax(0, 1fr));
    gap: 22px 8px;
    padding: 24px 0;
  }
  .category-card:nth-child(-n + 3) {
    grid-column: span 5;
  }
  .category-card:nth-child(n + 4) {
    grid-column: span 3;
  }
  .category-card:nth-child(-n + 3) img {
    width: 90%;
    max-width: 125px;
  }
  .category-card:nth-child(n + 4) img {
    width: 100%;
    max-width: 90px;
  }
  .category-card strong {
    font-size: clamp(12px, 3.3vw, 17px);
    padding-top: 8px;
    line-height: 1.4;
  }
  .category-card:nth-child(-n + 3) strong {
    font-size: clamp(17px, 4.4vw, 22px);
  }
}

/* Frame the supplied artwork, excluding its baked-in mock header and search bar. */
.hero-new:has(img[src='assets/hero-reference-v12.png']),
.mobile-hero-new:has(img[src='assets/hero-reference-v12.png']) {
  aspect-ratio: auto !important;
  overflow: hidden;
  position: relative;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-photo:has(img[src='assets/hero-reference-v12.png']) {
  position: relative;
  inset: auto;
  overflow: hidden;
  height: 100%;
  width: auto;
  aspect-ratio: 1234/887;
  flex: 0 1 auto;
}
.hero-new img[src='assets/hero-reference-v12.png'],
.mobile-hero-new img[src='assets/hero-reference-v12.png'] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: auto !important;
  max-width: none;
  object-fit: initial !important;
  transform: translateY(-10.29%);
}
.hero-new:has(img[src='assets/hero-reference-v12.png']) .hero-script,
.hero-new:has(img[src='assets/hero-reference-v12.png']) .hero-tagline,
.mobile-hero-new:has(img[src='assets/hero-reference-v12.png']) .hero-script,
.mobile-hero-new:has(img[src='assets/hero-reference-v12.png']) .hero-tagline {
  display: none !important;
}
@media (max-width: 767px) {
  .category-grid {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding: 12px 2px 24px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    direction: rtl !important;
  }
  .category-card {
    flex: 0 0 calc((100% - 60px) / 6);
    min-width: 104px;
    background: #f3eddf !important;
    border-radius: 15px !important;
    padding: 14px 9px 17px;
    scroll-snap-align: start;
  }
  .category-card img {
    width: 100% !important;
    max-width: 160px !important;
  }
  .category-card strong {
    font-size: 18px !important;
    padding-top: 11px;
  }
  .section:has(.category-grid) .title {
    display: none !important;
  }
  @media (max-width: 600px) {
    .section:has(.category-grid) {
      padding: 4px 8px 0;
    }
    .category-grid {
      gap: 7px;
      padding: 16px 0 20px;
    }
    .category-card {
      flex: 0 0 calc((100% - 35px) / 6);
      min-width: 0;
      padding: 6px 3px 10px;
      border-radius: 9px !important;
    }
    .category-card img {
      width: 100% !important;
      max-width: none !important;
    }
    .category-card strong,
    .category-card:nth-child(-n + 3) strong {
      font-size: clamp(10px, 2.6vw, 15px) !important;
      line-height: 1.4;
      padding-top: 7px;
      white-space: nowrap;
    }
    .mobile-search {
      width: calc(100% - 38px);
      max-width: none;
      margin: -10px 19px 0;
      height: 58px;
    }
    .mobile-search input {
      font-size: 16px;
    }
    .hero-reference .hero-copy {
      display: none;
    }
    .natural-logo .brand-wordmark {
      background: transparent !important;
      padding: 0 !important;
    }
    .header-logo .brand-wordmark {
      font-size: 28px;
    }
    .natural-logo small {
      font-size: 12px;
    }
  }
}

/* Cats: garden hero and four photographed food/accessory cards. */
body[data-page='category'][data-category='cats'] .catalog-content {
  min-width: 0;
}
.animal-hero.cats {
  background-image: image-set(url('/media/image?src=assets%2Fcat-hero-v13.png&w=768&v=4c1eef5171237f96') 1x,url('/media/image?src=assets%2Fcat-hero-v13.png&w=1536&v=4c1eef5171237f96') 2x);
  background-position: center;
  background-size: cover;
  height: auto !important;
  aspect-ratio: 16/9;
  border-radius: 18px;
  overflow: hidden;
}
.animal-hero.cats .animal-hero-copy {
  right: 6%;
  top: 44%;
  max-width: 43%;
  width: 43%;
  text-align: center;
}
.animal-hero.cats .animal-hero-copy > span {
  font-size: clamp(18px, 2.3vw, 30px);
  font-weight: 500;
}
.animal-hero.cats .animal-hero-copy h1 {
  font-size: clamp(42px, 6.5vw, 85px);
  margin: 8px 0 15px;
  line-height: 1.15;
  color: #fff8e5;
}
.animal-hero.cats .animal-hero-copy h1:after {
  content: '';
  display: block;
  width: 80%;
  height: 3px;
  background: #d8af57;
  margin: 12px auto;
  border-radius: 50%;
}
.animal-hero.cats .animal-hero-copy p {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: clamp(15px, 2vw, 26px);
  line-height: 1.3;
  color: #faf4e4;
}
.animal-hero.cats .animal-hero-copy .btn {
  font-size: clamp(15px, 1.7vw, 21px);
  padding: 13px 26px;
  border-radius: 25px;
  margin-top: 5px;
  color: #092e20;
  background: linear-gradient(120deg, #e7c66f, #bf903d);
}
.cat-sections {
  padding: 30px 6px 28px;
  background: transparent;
}
.cat-sections-heading {
  text-align: center;
  margin-bottom: 24px;
}
.cat-sections-heading h2 {
  font-size: 32px;
  margin: 0;
  color: #052c1d;
}
.cat-sections-heading p {
  font-size: 19px;
  color: #657365;
  margin: 4px 0 0;
}
.cat-subgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  direction: ltr;
}
.cat-subcard {
  background: #f3eddd;
  border: 1px solid #fff9ec;
  border-radius: 22px;
  padding: 0 0 18px;
  overflow: hidden;
  color: #052c1d;
  box-shadow: 0 5px 16px #483b1c08;
  transition: transform 0.2s;
}
.cat-subcard:hover {
  transform: translateY(-3px);
}
.cat-subcard.active {
  outline: 2px solid #bb9648;
  outline-offset: 2px;
}
.cat-subphoto {
  display: block;
  width: 100%;
  aspect-ratio: 347/330;
  background-image: image-set(url('/media/image?src=assets%2Fcat-subcategories-v13.png&w=768&v=76f79375386a248f') 1x,url('/media/image?src=assets%2Fcat-subcategories-v13.png&w=1536&v=76f79375386a248f') 2x);
  background-size: 442.65% 310.3%;
  border-radius: 20px;
  background-position-y: 56.34%;
}
.cat-subphoto-0 {
  background-position-x: 3.78%;
}
.cat-subphoto-1 {
  background-position-x: 35.24%;
}
.cat-subphoto-2 {
  background-position-x: 65.85%;
}
.cat-subphoto-3 {
  background-position-x: 96.3%;
}
.cat-subcard strong {
  display: block;
  font-size: 21px;
  line-height: 1.4;
  padding: 15px 5px 10px;
  font-weight: 700;
}
.cat-subarrow {
  display: flex;
  width: 43px;
  height: 43px;
  border: 2px solid #bf9645;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: auto;
}
.cat-subcard:focus-visible {
  outline: 3px solid var(--green);
}
#results {
  scroll-margin-top: 24px;
}
@media (max-width: 600px) {
  .animal-hero.cats {
    border-radius: 13px;
    aspect-ratio: 16/9;
  }
  .animal-hero.cats .animal-hero-copy {
    right: 4%;
    top: 44%;
    width: 46%;
    max-width: 46%;
  }
  .animal-hero.cats .animal-hero-copy > span {
    font-size: 15px;
  }
  .animal-hero.cats .animal-hero-copy h1 {
    font-size: 32px;
    margin: 4px 0 7px;
  }
  .animal-hero.cats .animal-hero-copy h1:after {
    margin: 7px auto;
    height: 2px;
  }
  .animal-hero.cats .animal-hero-copy p {
    font-size: 12px;
    margin: 0 0 8px;
  }
  .animal-hero.cats .animal-hero-copy .btn {
    font-size: 12px;
    padding: 8px 13px;
  }
  .cat-sections {
    padding: 24px 0;
  }
  .cat-sections-heading {
    margin-bottom: 18px;
  }
  .cat-sections-heading h2 {
    font-size: 26px;
  }
  .cat-sections-heading p {
    font-size: 16px;
  }
  .cat-subgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .cat-subcard {
    border-radius: 18px;
    padding-bottom: 14px;
  }
  .cat-subphoto {
    border-radius: 16px;
  }
  .cat-subcard strong {
    font-size: 18px;
    padding: 11px 3px 8px;
  }
  .cat-subarrow {
    width: 35px;
    height: 35px;
    font-size: 23px;
  }
}

/* Compact cats layout across phone, tablet and desktop. */
.animal-hero.cats {
  background-position: center 40%;
}
.animal-hero.cats .animal-hero-copy {
  top: 47%;
  right: 6%;
  width: 43%;
  max-width: 43%;
}
.animal-hero.cats .animal-hero-copy > span {
  font-size: 22px;
}
.animal-hero.cats .animal-hero-copy h1 {
  font-size: 54px;
  margin: 5px 0 9px;
}
.animal-hero.cats .animal-hero-copy p {
  font-size: 19px;
  margin-bottom: 13px;
}
.animal-hero.cats .animal-hero-copy .btn {
  font-size: 16px;
  padding: 10px 21px;
}
.cat-sections {
  padding: 22px 4px 24px;
}
.cat-sections-heading {
  margin-bottom: 16px;
}
.cat-sections-heading h2 {
  font-size: 26px;
}
.cat-sections-heading p {
  font-size: 16px;
}
.cat-subgrid {
  max-width: 800px;
  margin: auto;
  gap: 13px;
}
.cat-subcard {
  padding: 8px 8px 12px;
  border-radius: 16px;
}
.cat-subphoto {
  border-radius: 12px;
  max-width: 160px;
  margin: auto;
}
.cat-subcard strong {
  font-size: 17px;
  padding: 10px 0 8px;
}
.cat-subarrow {
  width: 32px;
  height: 32px;
  font-size: 22px;
}
@media (min-width: 601px) and (max-width: 950px) {
  .animal-hero.cats .animal-hero-copy h1 {
    font-size: 43px;
  }
  .animal-hero.cats .animal-hero-copy > span {
    font-size: 19px;
  }
  .animal-hero.cats .animal-hero-copy p {
    font-size: 16px;
  }
  .cat-subcard strong {
    font-size: 16px;
  }
}
@media (max-width: 600px) {
  .animal-hero.cats {
    height: auto !important;
    aspect-ratio: 16/9;
    background-position: center;
    background-size: cover;
    border-radius: 12px;
  }
  .animal-hero.cats .animal-hero-copy {
    top: 46%;
    right: 4%;
    width: 46%;
    max-width: 46%;
  }
  .animal-hero.cats .animal-hero-copy > span {
    font-size: clamp(13px, 3.6vw, 17px);
  }
  .animal-hero.cats .animal-hero-copy h1 {
    font-size: clamp(25px, 8vw, 37px);
    margin: 3px 0 6px;
  }
  .animal-hero.cats .animal-hero-copy p {
    font-size: clamp(10px, 2.8vw, 14px);
    margin: 0 0 8px;
  }
  .animal-hero.cats .animal-hero-copy .btn {
    font-size: 12px;
    padding: 8px 12px;
  }
  .cat-sections {
    padding: 18px 0;
  }
  .cat-sections-heading {
    margin-bottom: 13px;
  }
  .cat-sections-heading h2 {
    font-size: 22px;
  }
  .cat-sections-heading p {
    font-size: 14px;
  }
  .cat-subgrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }
  .cat-subcard {
    border-radius: 11px;
    padding: 5px 4px 9px;
  }
  .cat-subphoto {
    border-radius: 8px;
    width: 100%;
    max-width: none;
  }
  .cat-subcard strong {
    font-size: clamp(12px, 3.1vw, 16px);
    line-height: 1.35;
    padding: 8px 0 6px;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cat-subarrow {
    width: 26px;
    height: 26px;
    font-size: 19px;
    border-width: 1px;
  }
  .cat-subcard.active {
    outline-width: 1px;
    outline-offset: 1px;
  }
}

/* Natural foliage frames the cats section without blocking controls. */
.cat-sections {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cat-sections:before,
.cat-sections:after {
  content: '';
  position: absolute;
  top: 0;
  width: 170px;
  height: 220px;
  background: image-set(url('/media/image?src=assets%2Fcat-leaves-v15.png&w=768&v=03e5a882ed515aaa') 1x,url('/media/image?src=assets%2Fcat-leaves-v15.png&w=1254&v=03e5a882ed515aaa') 2x) top left/contain no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
.cat-sections:before {
  left: -28px;
}
.cat-sections:after {
  right: -28px;
  transform: scaleX(-1);
}
.cat-sections-heading,
.cat-subgrid {
  position: relative;
  z-index: 1;
}
.cat-sections-heading h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.cat-sections-heading h2:before,
.cat-sections-heading h2:after {
  content: '';
  width: 65px;
  height: 2px;
  background: #c7a255;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .cat-sections:before,
  .cat-sections:after {
    width: 70px;
    height: 115px;
    opacity: 0.75;
  }
  .cat-sections:before {
    left: -19px;
  }
  .cat-sections:after {
    right: -19px;
  }
  .cat-sections-heading h2 {
    gap: 9px;
  }
  .cat-sections-heading h2:before,
  .cat-sections-heading h2:after {
    width: 22px;
    height: 1px;
  }
}

/* Preserve the supplied dogs banner at its natural proportions. */
.dog-reference-hero {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto 18px;
  border-radius: 16px;
  overflow: hidden;
  background: #052c1d;
}
.dog-reference-hero > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.dog-reference-shop {
  position: absolute;
  left: 69.2%;
  top: 49.1%;
  width: 21%;
  height: 9.5%;
  border-radius: 24px;
  background: transparent;
  min-height: 32px;
}
.dog-reference-shop:hover {
  box-shadow: 0 0 0 2px #fff6d1;
}
.dog-reference-shop:focus-visible {
  outline: 3px solid #fff6d1;
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .dog-reference-hero {
    max-width: none;
    border-radius: 12px;
    margin-bottom: 16px;
  }
  .dog-reference-shop {
    min-height: 28px;
  }
}

/* Scoped dogs category/brand panels only. */
.dog-panel-subcategories {
  position: relative;
  padding: 18px 0 20px;
  background: transparent;
}
.dog-panel-subgrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 13px;
  direction: rtl;
}
.dog-panel-subcard {
  background: transparent;
  padding: 0;
  color: #092e20;
}
.dog-panel-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  max-width: 116px;
  margin: 0 auto 8px;
  background-image: image-set(url('/media/image?src=assets%2Fdogs-panels-reference-v17.png&w=768&v=c6b25886223cfe07') 1x,url('/media/image?src=assets%2Fdogs-panels-reference-v17.png&w=889&v=c6b25886223cfe07') 2x);
  background-size: 766.38% 1324.14%;
  background-position-y: 38.1%;
  border: 2px solid #fff8ed;
}
.dog-panel-photo-0 {
  background-position-x: 94.44%;
}
.dog-panel-photo-1 {
  background-position-x: 76.71%;
}
.dog-panel-photo-2 {
  background-position-x: 58.86%;
}
.dog-panel-photo-3 {
  background-position-x: 41.4%;
}
.dog-panel-photo-4 {
  background-position-x: 23.8%;
}
.dog-panel-photo-5 {
  background-position-x: 6.08%;
}
.dog-panel-subcard strong {
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  display: block;
  max-width: 145px;
  margin: auto;
}
.dog-panel-subcard.active strong {
  color: #ad8437;
}
.dog-panel-brands {
  background: #f8f3e7;
  border: 1px solid #fffaf2;
  border-radius: 18px;
  padding: 14px 16px 16px;
  margin: 0 0 18px;
  box-shadow: 0 3px 12px #3c2e1408;
}
.dog-panel-brands h2 {
  font-size: 23px;
  line-height: 1.4;
  margin: 0 0 12px;
  text-align: start;
  display: flex;
  align-items: center;
  gap: 9px;
}
.dog-panel-brands h2 span {
  color: #c59d4d;
}
.dog-panel-brands > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  direction: ltr;
}
.dog-panel-brands a {
  background: #fff;
  border-radius: 13px;
  padding: 6px;
  box-shadow: 0 3px 9px #49371107;
}
.dog-panel-brandlogo {
  display: block;
  width: 100%;
  aspect-ratio: 194/78;
  border-radius: 9px;
  background-image: image-set(url('/media/image?src=assets%2Fdogs-panels-reference-v17.png&w=768&v=c6b25886223cfe07') 1x,url('/media/image?src=assets%2Fdogs-panels-reference-v17.png&w=889&v=c6b25886223cfe07') 2x);
  background-size: 458.25% 1969.23%;
  background-position-y: 53.22%;
}
.dog-panel-brandlogo-0 {
  background-position-x: 6.04%;
}
.dog-panel-brandlogo-1 {
  background-position-x: 36.5%;
}
.dog-panel-brandlogo-2 {
  background-position-x: 65.76%;
}
.dog-panel-brandlogo-3 {
  background-position-x: 96.26%;
}
@media (max-width: 600px) {
  .dog-panel-subcategories {
    padding: 14px 0 17px;
  }
  .dog-panel-subgrid {
    gap: 6px;
  }
  .dog-panel-photo {
    margin-bottom: 6px;
    border-width: 1px;
  }
  .dog-panel-subcard strong {
    font-size: clamp(10px, 2.65vw, 14px);
    line-height: 1.4;
  }
  .dog-panel-brands {
    padding: 10px 9px 12px;
    border-radius: 15px;
    margin-bottom: 14px;
  }
  .dog-panel-brands h2 {
    font-size: 19px;
    margin-bottom: 9px;
  }
  .dog-panel-brands > div {
    gap: 7px;
  }
  .dog-panel-brands a {
    border-radius: 9px;
    padding: 4px;
  }
}

.dog-panel-subcategories {
  isolation: isolate;
  overflow: hidden;
}
.dog-panel-subcategories:before,
.dog-panel-subcategories:after {
  content: '';
  position: absolute;
  top: 0;
  width: 85px;
  height: 120px;
  background: image-set(url('/media/image?src=assets%2Fcat-leaves-v15.png&w=768&v=03e5a882ed515aaa') 1x,url('/media/image?src=assets%2Fcat-leaves-v15.png&w=1254&v=03e5a882ed515aaa') 2x) top left/contain no-repeat;
  pointer-events: none;
  z-index: -1;
  opacity: 0.8;
}
.dog-panel-subcategories:before {
  left: -30px;
}
.dog-panel-subcategories:after {
  right: -30px;
  transform: scaleX(-1);
}
.dog-panel-brands h2 svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
}
@media (max-width: 600px) {
  .dog-panel-subcategories:before,
  .dog-panel-subcategories:after {
    width: 50px;
    height: 90px;
  }
  .dog-panel-subcategories:before {
    left: -24px;
  }
  .dog-panel-subcategories:after {
    right: -24px;
  }
}

/* Rodents use the same product cards as dogs, with scoped hero/section imagery. */
.rodent-reference-hero {
  position: relative;
  aspect-ratio: 889/359;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 15px;
  overflow: hidden;
  border-radius: 15px;
  background: #fbf6ec;
}
.rodent-reference-hero > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-6.58%);
}
.rodent-subcategories {
  padding: 17px 0 20px;
  background: transparent;
}
.rodent-subphoto {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  max-width: 116px;
  margin: 0 auto 8px;
  border-radius: 50%;
  border: 2px solid #fff9ed;
  background-image: image-set(url('/media/image?src=assets%2Frodents-reference-v18.png&w=768&v=27629a3fbb33eef9') 1x,url('/media/image?src=assets%2Frodents-reference-v18.png&w=889&v=27629a3fbb33eef9') 2x);
  background-size: 846.67% 1462.86%;
  background-position-y: 33.05%;
}
.rodent-subphoto-0 {
  background-position-x: 4.34%;
}
.rodent-subphoto-1 {
  background-position-x: 22.8%;
}
.rodent-subphoto-2 {
  background-position-x: 40.6%;
}
.rodent-subphoto-3 {
  background-position-x: 58.4%;
}
.rodent-subphoto-4 {
  background-position-x: 76.2%;
}
.rodent-subphoto-5 {
  background-position-x: 94.8%;
}
@media (max-width: 600px) {
  .rodent-reference-hero {
    max-width: none;
    border-radius: 12px;
    margin-bottom: 12px;
  }
  .rodent-subcategories {
    padding: 13px 0 17px;
  }
  .rodent-subphoto {
    margin-bottom: 6px;
    border-width: 1px;
  }
}

/* Hebrew flow and reference filter/sort/count toolbar. */
html[lang='he'] body {
  direction: rtl;
  text-align: right;
}
html[lang='he'] .top,
html[lang='he'] header nav,
html[lang='he'] .title,
html[lang='he'] .products,
html[lang='he'] .cat-subgrid,
html[lang='he'] .dog-panel-brands > div,
html[lang='he'] .brands,
html[lang='he'] .sizes,
html[lang='he'] .account-list,
html[lang='he'] .ad-main {
  direction: rtl;
}
html[lang='he'] .product h3,
html[lang='he'] .detail-info h1 {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}
html[lang='he'] .product .price {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}
html[lang='he'] .detail,
html[lang='he'] .catalog {
  direction: rtl;
}
html[lang='he'] .card-size {
  direction: rtl;
}
html[lang='he'] .header-actions,
html[lang='he'] .controls {
  direction: rtl;
}
.controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 10px 0 12px;
  padding: 12px 16px;
  border-block: 1px solid #e6dec9;
  border-inline: 0;
  background: #faf7f2;
  border-radius: 0;
  direction: inherit;
}
.catalog-count {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-items: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 650;
  color: #092e20;
}
.catalog-count svg {
  width: 18px;
  height: 18px;
  color: #bd913d;
  flex: 0 0 auto;
}
.catalog-tools {
  display: contents;
}
.catalog-sort {
  display: inline-flex;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  min-width: 64px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid #d9ceb9;
  border-radius: 9px;
  background: #fffdf7;
  color: #092e20;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.catalog-sort:focus-within {
  outline: 3px solid #bd913d;
  outline-offset: 2px;
}
.catalog-sort select {
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  cursor: pointer;
}
.controls .filter-toggle {
  display: inline-flex;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 68px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid #a77e2e;
  border-radius: 9px;
  background: #bd913d;
  color: #092e20;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.controls .filter-toggle:hover {
  background: #c9a04e;
}
.controls .filter-toggle:focus-visible {
  outline: 3px solid #092e20;
  outline-offset: 2px;
}
.catalog-content .controls .filter-toggle svg {
  flex: 0 0 auto;
}
body:not([data-page='category'][data-category='dogs']) .catalog {
  grid-template-columns: minmax(0, 1fr) !important;
}
.catalog-content {
  min-width: 0;
}
.natural-logo,
.brand-wordmark {
  unicode-bidi: isolate;
}
.brand-wordmark {
  direction: ltr;
}
.product .price del {
  margin-inline-start: 7px;
  margin-left: 0;
}
@media (max-width: 600px) {
  .controls {
    margin-block: 7px 10px;
    padding: 5px 6px;
    gap: 5px;
    border-radius: 10px;
  }
  .catalog-count {
    font-size: 13px;
    gap: 5px;
  }
  .catalog-count svg {
    width: 17px;
    height: 17px;
  }
  .catalog-sort {
    min-width: 60px;
    padding-inline: 8px;
    gap: 5px;
  }
  .controls .filter-toggle {
    min-width: 62px;
    padding-inline: 8px;
    gap: 5px;
  }
}
@media (max-width: 380px) {
  .controls {
    grid-template-columns: minmax(0, 1fr) minmax(58px, auto) minmax(0, 1fr);
    gap: 4px;
  }
  .catalog-sort {
    gap: 4px;
  }
  .catalog-sort select {
    width: 78px;
    max-width: 78px;
    padding-inline: 4px;
  }
  .catalog-content .controls .catalog-count {
    font-size: 12px;
    max-width: 88px;
    white-space: normal;
    line-height: 1.15;
  }
  .catalog-content .controls #resultCount {
    white-space: normal;
  }
  .catalog-content .controls .catalog-count svg {
    display: none;
  }
  .controls .filter-toggle {
    padding-inline: 7px;
  }
}

/* One category layout and a persistent CityPaws header. */
.uniform-category-branches {
  padding: 17px 0 20px;
}
.uniform-branch-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  max-width: 116px;
  margin: 0 auto 8px;
  border: 2px solid #fff8ed;
  border-radius: 50%;
  background-size: 300% 200%;
  background-repeat: no-repeat;
}
.uniform-brand-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
  font-weight: 700;
  font-size: 20px;
  direction: ltr;
}
.catalog-hero.other {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 35px;
  background: linear-gradient(120deg, #052c1d, #134633);
}
.catalog-hero.other img {
  position: absolute;
  left: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 145px;
  height: 145px;
  object-fit: cover;
  float: none;
  border: 2px solid #d1ad58;
}
.catalog-hero.other h1,
.catalog-hero.other p {
  max-width: 65%;
  position: relative;
}
.catalog-hero.other h1 {
  font-size: 36px;
}
.catalog-hero.other p {
  font-size: 17px;
}
.catalog .product {
  align-self: stretch;
}
.product h3 {
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nav-home-link {
  font-weight: 700;
  color: #a77d30;
}
.mobile-page-title {
  display: none !important;
}
@media (max-width: 600px) {
  .uniform-category-branches {
    padding: 14px 0 17px;
  }
  .uniform-branch-photo {
    margin-bottom: 6px;
    border-width: 1px;
  }
  .uniform-brand-name {
    font-size: 15px;
    min-height: 38px;
  }
  .catalog-hero.other {
    min-height: 155px;
    padding: 20px;
  }
  .catalog-hero.other img {
    width: 110px;
    height: 110px;
    left: 5%;
  }
  .catalog-hero.other h1 {
    font-size: 28px;
  }
  .catalog-hero.other p {
    font-size: 13px;
    max-width: 60%;
  }
  .catalog .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.uniform-brand-name {
  aspect-ratio: 194/78;
  min-height: 0;
}
.product .card-size select {
  min-width: 0;
  max-width: 100%;
}

/* Reserve initial loading space; contain margins without moving loaded artwork. */
#app {
  display: flow-root;
}
#app[aria-busy='true'] {
  min-height: 100svh;
}

/* Shared category presentation: keep each supplied artwork's own proportions. */
body[data-page='category'] .page {
  max-width: calc(var(--cp-container) + 80px);
  margin-inline: auto;
  padding: var(--cp-space-5) clamp(16px, 3.2vw, 40px);
}
body[data-page='category'] .catalog {
  gap: 0;
}
body[data-page='category'] .catalog-content {
  min-width: 0;
}
body[data-page='category'] .catalog-content > .page-heading {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.35;
  margin: 0 0 var(--cp-space-4);
}
body[data-page='category'] .category-hero-frame {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  margin: 0 auto var(--cp-space-4);
  overflow: hidden;
  border: var(--cp-border-width) solid var(--cp-border);
  border-radius: var(--cp-radius-md);
  background: var(--cp-cream);
}
body[data-page='category']
  .category-hero-frame
  > :is(
    .dog-reference-hero,
    .animal-hero,
    .bird-reference-hero,
    .rodent-reference-hero,
    .fish-photo-hero,
    .reptile-photo-hero,
    .aquarium-photo-hero,
    .health-reference-hero,
    .catalog-hero.other
  ) {
  margin: 0;
  border: 0;
  border-radius: 0;
}
body[data-page='category'] .uniform-category-branches,
body[data-page='category'] .bird-subcategories,
body[data-page='category'] .rodent-subcategories,
body[data-page='category'] .dog-panel-subcategories,
body[data-page='category'] .cat-sections {
  padding-block: var(--cp-space-4);
}
body[data-page='category'] .dog-panel-subgrid,
body[data-page='category'] .cat-subgrid {
  gap: var(--cp-space-3);
}
body[data-page='category'] .dog-panel-subcard,
body[data-page='category'] .cat-subcard {
  font-weight: var(--cp-font-title);
}
body[data-page='category'] .dog-panel-subcard strong,
body[data-page='category'] .cat-subcard strong {
  font-weight: var(--cp-font-title);
}
body[data-page='category'] .catalog .products {
  gap: var(--cp-grid-gap);
}
body[data-page='category'] .catalog .product {
  border-radius: var(--cp-radius-md);
  box-shadow: var(--cp-shadow-card);
}
body:not([data-page='admin']) {
  font-weight: var(--cp-font-body);
}
body:not([data-page='admin']) h1,
body:not([data-page='admin']) h2,
body:not([data-page='admin']) h3 {
  font-weight: var(--cp-font-heading);
}
body:not([data-page='admin']) .title h2 {
  font-weight: var(--cp-font-heading);
}
body:not([data-page='admin']) .product h3 {
  font-weight: var(--cp-font-title);
}
body:not([data-page='admin']) .btn {
  min-height: var(--cp-button-height);
  font-weight: var(--cp-font-title);
}
/* Birds: supplied garden hero and circles; product cards remain shared. */
.bird-reference-hero {
  position: relative;
  aspect-ratio: 889/328;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 15px;
  overflow: hidden;
  border-radius: 15px;
  background: #fbf6ec;
}
.bird-reference-hero > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-6.77%);
}
.bird-subcategories {
  padding: 17px 0 20px;
}
.bird-subphoto {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  max-width: 116px;
  margin: 0 auto 8px;
  border: 2px solid #fff8ed;
  border-radius: 50%;
  background-image: image-set(url('/media/image?src=assets%2Fbirds-reference-v21.png&w=768&v=503e881ba1ae8a4e') 1x,url('/media/image?src=assets%2Fbirds-reference-v21.png&w=889&v=503e881ba1ae8a4e') 2x);
  background-size: 854.8% 1476.9%;
  background-position-y: 31.42%;
}
.bird-subphoto-0 {
  background-position-x: 4.72%;
}
.bird-subphoto-1 {
  background-position-x: 22.8%;
}
.bird-subphoto-2 {
  background-position-x: 40.89%;
}
.bird-subphoto-3 {
  background-position-x: 58.98%;
}
.bird-subphoto-4 {
  background-position-x: 77.07%;
}
.bird-subphoto-5 {
  background-position-x: 95.16%;
}
@media (max-width: 600px) {
  .bird-reference-hero {
    max-width: none;
    border-radius: 12px;
    margin-bottom: 12px;
  }
  .bird-subcategories {
    padding: 13px 0 17px;
  }
  .bird-subphoto {
    margin-bottom: 6px;
    border-width: 1px;
  }
}
.support-launcher {
  position: fixed;
  bottom: 26px;
  left: auto;
  inset-inline-end: 22px;
  width: 60px;
  height: 60px;
  background: #153c2b;
  color: #fff;
  border: 2px solid #c9b37b;
  border-radius: 50%;
  box-shadow: 0 5px 20px #0a23152b;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 51;
}
.support-launcher > svg {
  width: 31px;
  height: 31px;
}
.support-launcher.is-open > svg {
  display: none;
}
.support-launcher.is-open:after {
  content: '×';
  font-size: 43px;
  line-height: 1;
  font-weight: 300;
}
.support-choice-panel {
  position: fixed !important;
  bottom: 100px !important;
  left: auto;
  inset-inline-end: 22px !important;
  width: 340px;
  max-width: calc(100vw - 32px);
  gap: 7px !important;
  border: 1px solid #e4dac4;
  border-radius: 22px;
  background: #fffdf6;
  padding: 18px;
  box-shadow: 0 14px 45px #0924172b;
  z-index: 50;
  direction: rtl;
}
.support-choice-panel[hidden],
.support-launcher[hidden] {
  display: none !important;
}
.support-panel-heading {
  font-size: 17px;
  padding: 0 8px 8px;
  color: #193b29;
}
.support-choice-panel > #chatToggle,
.support-choice-panel > #waFloat {
  height: auto;
  width: 100%;
  border: 0;
  box-shadow: none;
  background: transparent;
  color: #213c2d;
  border-radius: 13px;
  padding: 10px 7px;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  text-align: right;
}
.support-choice-panel > #chatToggle > svg,
.support-choice-panel > #waFloat > svg {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  padding: 13px;
  border-radius: 14px;
  background: #153c2b;
  color: #e4d19a;
}
.support-choice-panel > #waFloat > svg {
  background: #248b53;
  color: #fff;
}
.support-choice-panel > #chatToggle:hover,
.support-choice-panel > #waFloat:hover {
  background: #f4efe3;
}
.categories-page-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.categories-page-grid a {
  background: #f5eedf;
  border: 1px solid #e1d7c3;
  border-radius: 16px;
  padding: 15px;
  text-align: center;
}
.categories-page-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  max-width: 150px;
}
.categories-page-grid strong {
  display: block;
  font-size: 20px;
  padding-top: 10px;
}
body[data-page='admin'] .support-launcher,
body[data-page='admin'] .support-choice-panel {
  display: none !important;
}
@media (max-width: 767px) {
  .support-launcher {
    /* The measured nav height already includes its safe-area padding. */
    bottom: calc(var(--bottom-nav-height, calc(75px + env(safe-area-inset-bottom, 0px))) + 16px);
    inset-inline-end: 16px;
    z-index: 19;
  }
}
@media (max-width: 600px) {
  body {
    padding-bottom: var(--bottom-nav-height, calc(74.75px + env(safe-area-inset-bottom, 0px)));
  }
  .bottom {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    grid-auto-flow: column;
    align-items: stretch;
    position: fixed;
    inset: auto 0 0;
    z-index: 20;
    background: var(--cream);
    color: var(--green);
    border-top: 1px solid #e2dacb;
    direction: rtl;
    padding: 5px max(6px, env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom));
    box-shadow: 0 -3px 18px #173b2210;
  }
  .bottom a,
  .bottom .bottom-install {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 4px 2px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--green);
    text-align: center;
    line-height: 1.15;
  }
  .bottom .bottom-install {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
  }
  .bottom [hidden] {
    display: none;
  }
  .bottom svg {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    stroke-width: 1.9;
  }
  .bottom a small,
  .bottom .bottom-install small {
    display: block;
    max-width: 100%;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .bottom a.active {
    color: var(--green);
  }
  .bottom a:focus-visible,
  .bottom .bottom-install:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -3px;
  }
  .support-launcher {
    width: 56px;
    height: 56px;
  }
  .support-choice-panel {
    bottom: 155px !important;
    inset-inline-end: 17px !important;
    width: 320px;
    padding: 14px;
    border-radius: 20px;
  }
  .support-choice-panel b {
    font-size: 17px;
  }
  .support-choice-panel small {
    font-size: 13px;
  }
  .categories-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .categories-page-grid a {
    padding: 12px;
  }
  .categories-page-grid strong {
    font-size: 18px;
  }
}
/* Store information and policies. Keep these pages compact and readable while
   leaving the storefront shell, footer, and native disclosure behavior intact. */
.store-info-page {
  max-width: 900px;
  margin: auto;
  min-height: 0;
  padding-block: 22px 38px;
}
.store-info-page .crumb {
  margin-bottom: 16px;
  line-height: 1.6;
  text-align: start;
}
.store-info-page:dir(rtl) .crumb {
  direction: rtl;
}
.store-info-page:dir(ltr) .crumb {
  direction: ltr;
}
.store-info-page h1 {
  font-size: clamp(25px, 3vw, 30px);
  line-height: 1.3;
  margin: 0 0 18px;
}
.store-info-page .info-page-content {
  color: var(--green);
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.store-info-page .info-page-content h2 {
  margin: 26px 0 10px;
  color: var(--green);
  font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.45;
}
.store-info-page .info-page-content h2:first-child {
  margin-top: 0;
}
.store-info-page .info-page-content p {
  margin: 0 0 16px;
  font-size: inherit;
  line-height: inherit;
}
.store-info-page .info-page-content ul,
.store-info-page .info-page-content ol {
  margin: 0 0 20px;
  padding-inline-start: 1.6em;
}
.store-info-page .info-page-content li {
  margin-block: 6px;
  padding-inline-start: 3px;
}
.store-info-page .info-page-content ol {
  list-style: decimal;
}
.store-info-page .info-page-content a,
.store-info-page .info-contact-links a {
  color: #87631f;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.store-info-page .info-page-content a:focus-visible,
.store-info-page .info-contact-links a:focus-visible,
.store-info-page .info-form-actions a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}
.store-info-page details {
  padding: 16px 0;
  border-bottom: 1px solid #e3d8bf;
}
.store-info-page summary {
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
}
.store-info-page .info-whatsapp {
  margin: 25px 0 15px;
}
.info-cancellation-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  margin: 20px 0 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffaf1;
  box-shadow: var(--cp-shadow-card);
}
.info-cancellation-form .field {
  min-width: 0;
  margin: 0;
  color: var(--green);
  font-size: 15px;
  font-weight: 600;
}
.info-cancellation-form .field input,
.info-cancellation-form .field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 7px;
  padding: 11px 13px;
  border: 1px solid #d9cfbd;
  border-radius: 8px;
  background: var(--cp-paper);
  color: var(--green);
  font: inherit;
  font-weight: 400;
  line-height: 1.5;
}
.info-cancellation-form .field textarea {
  min-height: 112px;
  resize: vertical;
}
.info-cancellation-form .field input::placeholder,
.info-cancellation-form .field textarea::placeholder {
  color: #766f5d;
  opacity: 0.85;
}
.info-cancellation-form .field input:focus-visible,
.info-cancellation-form .field textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--gold);
}
.info-cancellation-form .field:has(textarea),
.info-cancellation-form .info-cancellation-notice,
.info-cancellation-form .info-form-actions,
.info-cancellation-form #cancellationStatus {
  grid-column: 1 / -1;
}
.info-cancellation-notice {
  margin: 0;
  color: #5c6458;
  font-size: 14px;
  line-height: 1.6;
}
.info-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2px;
}
.info-form-actions button,
.info-form-actions a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--green);
  color: var(--cream);
  font: inherit;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
}
.info-form-actions button:hover,
.info-form-actions a:hover {
  background: #153a29;
}
.info-form-actions button:focus-visible,
.info-form-actions a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.info-form-actions #cancellationWhatsAppLink {
  background: #f4ead3;
  border-color: #d9c596;
  color: var(--green);
}
.info-form-actions #cancellationWhatsAppLink[hidden] {
  display: none;
}
.info-cancellation-form #cancellationStatus {
  min-height: 1.5em;
  margin: 0;
  color: var(--green);
  font-size: 14px;
  line-height: 1.6;
}
.info-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 20px;
}
.info-home {
  display: block;
  text-decoration: underline;
  font-size: 16px;
}
@media (max-width: 600px) {
  .store-info-page {
    padding-block: 16px 28px;
  }
  .store-info-page .crumb {
    margin-bottom: 12px;
  }
  .store-info-page h1 {
    font-size: 25px;
    margin-bottom: 14px;
  }
  .store-info-page .info-page-content {
    font-size: 16px;
    line-height: 1.75;
  }
  .store-info-page .info-page-content h2 {
    margin-top: 22px;
    font-size: 19px;
  }
  .store-info-page summary {
    font-size: 18px;
  }
  .info-cancellation-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
  }
  .info-cancellation-form .field:has(textarea),
  .info-cancellation-form .info-form-actions,
  .info-cancellation-form #cancellationStatus {
    grid-column: auto;
  }
  .info-form-actions {
    align-items: stretch;
  }
  .info-form-actions button,
  .info-form-actions a {
    width: 100%;
  }
  .info-contact-links {
    gap: 10px 16px;
  }
}

.dog-panel-photo-6 {
  background-position-x: 94.44%;
}
.filters select {
  font: inherit;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: #fffdf7;
  color: var(--green);
}

/* Health category reference, isolated from the shared cards and header. */
.health-reference-hero {
  position: relative;
  aspect-ratio: 877/396;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 15px;
  overflow: hidden;
  border-radius: 15px;
  background: #fbf6ec;
}
.health-reference-hero > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-7.422%);
}
.health-subphoto {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  max-width: 116px;
  margin: 0 auto 8px;
  border: 2px solid #fff8ed;
  border-radius: 50%;
  background-image: image-set(url('/media/image?src=assets%2Fhealth-reference-v24.png&w=768&v=360f0ec9c27bf990') 1x,url('/media/image?src=assets%2Fhealth-reference-v24.png&w=877&v=360f0ec9c27bf990') 2x);
  background-size: 843.27% 1476.92%;
  background-position-y: 37.29%;
}
.health-subphoto-0 {
  background-position-x: 95.73%;
}
.health-subphoto-1 {
  background-position-x: 76.07%;
}
.health-subphoto-2 {
  background-position-x: 57.83%;
}
.health-subphoto-3 {
  background-position-x: 39.72%;
}
.health-subphoto-4 {
  background-position-x: 21.73%;
}
.health-subphoto-5 {
  background-position-x: 3.75%;
}
.health-brands > div {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  direction: ltr;
}
.health-brands .health-brand {
  display: block;
  aspect-ratio: 110/60;
  border-radius: 12px;
  background-image: image-set(url('/media/image?src=assets%2Fhealth-reference-v24.png&w=768&v=360f0ec9c27bf990') 1x,url('/media/image?src=assets%2Fhealth-reference-v24.png&w=877&v=360f0ec9c27bf990') 2x);
  background-size: 797.27% 2560%;
  background-position-y: 52.03%;
  border: 1px solid #fff;
  min-width: 0;
}
.health-brand-0 {
  background-position-x: 5.87%;
}
.health-brand-1 {
  background-position-x: 20.86%;
}
.health-brand-2 {
  background-position-x: 35.2%;
}
.health-brand-3 {
  background-position-x: 50.85%;
}
.health-brand-4 {
  background-position-x: 66.23%;
}
.health-brand-5 {
  background-position-x: 83.31%;
}
@media (max-width: 600px) {
  .health-reference-hero {
    border-radius: 12px;
    margin-bottom: 12px;
  }
  .health-subphoto {
    border-width: 1px;
    margin-bottom: 6px;
  }
  .health-brands > div {
    gap: 7px;
  }
  .health-brand {
    border-radius: 8px;
  }
  .health-brands {
    padding-inline: 10px;
  }
}

.health-brand .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Editable homepage brand showcase; styles scoped to this section only. */
.home-brands-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #fffaf0 0%, #f8f1df 100%);
  padding: 32px 38px 38px;
  margin: 26px 0 0;
  direction: rtl;
  color: #173b2b;
}
.home-brands-inner {
  position: relative;
  z-index: 1;
  max-width: 850px;
  margin: 0 auto;
}
.home-brands-heading {
  text-align: center;
  margin-bottom: 25px;
}
.home-brands-emblem {
  display: block;
  color: #b9984b;
  width: 43px;
  height: 43px;
  margin: 0 auto 9px;
}
.home-brands-emblem svg,
.home-brands-paw svg {
  width: 100%;
  height: 100%;
}
.home-brands-heading h2 {
  font-family: Heebo, Arial, sans-serif;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.3;
  font-weight: 800;
  color: #173b2b;
  margin: 0;
}
.home-brands-rule {
  display: block;
  width: 66px;
  height: 3px;
  border-radius: 3px;
  background: #b9984b;
  margin: 12px auto 15px;
}
.home-brands-heading p {
  max-width: 570px;
  margin: 0 auto;
  line-height: 1.55;
  font-size: clamp(15px, 1.9vw, 20px);
  font-weight: 400;
  color: #36543b;
}
.home-brands-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 13px;
}
.home-brand-card {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: span 2;
  height: 110px;
  min-width: 0;
  padding: 16px 22px;
  background: #fffdf8;
  border: 1px solid #dacba9;
  border-radius: 18px;
  box-shadow: 0 4px 12px #7e632012;
  transition:
    box-shadow 0.18s,
    border-color 0.18s,
    transform 0.18s;
}
.home-brand-card.featured-brand {
  grid-column: span 3;
}
.home-brand-card:last-child {
  grid-column: 3 / span 2;
}
.home-brand-card img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 230px;
  object-fit: contain;
  object-position: center;
}
.home-brand-alfa img {
  background: #173b2b;
  border-radius: 7px;
  padding: 5px;
}
.home-brand-hills img {
  max-width: 92px;
}
.home-brand-card:hover {
  border-color: #b9984b;
  box-shadow: 0 6px 18px #6b531a20;
  transform: translateY(-2px);
}
.home-brand-card:focus-visible {
  outline: 3px solid #b9984b;
  outline-offset: 3px;
}
.home-brands-leaf {
  position: absolute;
  z-index: 0;
  width: 180px;
  height: 260px;
  background: image-set(url('/media/image?src=assets%2Fcat-leaves-v15.png&w=768&v=03e5a882ed515aaa') 1x,url('/media/image?src=assets%2Fcat-leaves-v15.png&w=1254&v=03e5a882ed515aaa') 2x) no-repeat left top/contain;
  opacity: 0.68;
  pointer-events: none;
}
.home-brands-leaf.leaf-start {
  left: -67px;
  top: 6px;
  transform: rotate(-18deg);
}
.home-brands-leaf.leaf-end {
  right: -65px;
  top: 120px;
  transform: scaleX(-1) rotate(-24deg);
}
.home-brands-paw {
  position: absolute;
  width: 46px;
  height: 46px;
  color: #b9984b;
  opacity: 0.12;
  pointer-events: none;
}
.home-brands-paw.paw-a {
  left: 12%;
  top: 100px;
  transform: rotate(-22deg);
}
.home-brands-paw.paw-b {
  right: 10%;
  top: 78px;
  transform: rotate(18deg);
}
.home-brands-paw.paw-c {
  left: 8%;
  bottom: 25px;
  transform: rotate(-20deg);
}
.home-brands-paw.paw-d {
  right: 7%;
  bottom: 35px;
  transform: rotate(22deg);
}
@media (max-width: 600px) {
  .home-brands-showcase {
    padding: 26px 17px 30px;
    margin-top: 22px;
  }
  .home-brands-heading {
    margin-bottom: 23px;
  }
  .home-brands-heading p {
    max-width: 320px;
  }
  .home-brands-grid {
    gap: 9px;
  }
  .home-brand-card {
    height: 85px;
    padding: 13px 10px;
    border-radius: 14px;
  }
  .home-brand-card img {
    max-width: 180px;
  }
  .home-brand-hills img {
    max-width: 65px;
  }
  .home-brands-leaf {
    width: 130px;
    height: 210px;
    opacity: 0.58;
  }
  .home-brands-leaf.leaf-start {
    left: -60px;
    top: 10px;
  }
  .home-brands-leaf.leaf-end {
    right: -68px;
    top: 100px;
  }
  .home-brands-paw {
    width: 34px;
    height: 34px;
  }
  .home-brands-paw.paw-a {
    left: 8%;
    top: 90px;
  }
  .home-brands-paw.paw-b {
    right: 8%;
    top: 76px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-brand-card {
    transition: none;
  }
  .home-brand-card:hover {
    transform: none;
  }
}

/* Compact navigation and consistent storefront typography. */
body:not([data-page='admin']) {
  font-family: Heebo, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
/* Header presentation is consolidated in the unified storefront header below. */
header nav {
  padding-block: 10px;
  font-size: 16px;
  font-weight: 700;
  gap: 18px;
  flex-wrap: wrap;
  background: #062b1c;
  color: #f7f0df;
}
body:not([data-page='admin']) header nav a:last-child {
  color: #e2c47c;
}
.site-drawer {
  display: block;
  padding: 0;
  background: #fbf7ee;
  border-inline-start: 1px solid #d9cbaa;
  box-shadow: -14px 0 45px #092e2024;
  font-family: Heebo, Arial, sans-serif;
}
.site-drawer:not([open]) {
  display: none;
}
.drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 17px 18px;
  min-height: 76px;
  background: #092e20;
  gap: 12px;
}
.drawer-head strong {
  font-family: Georgia, serif;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.drawer-head small {
  font-size: 11px;
  margin-top: 4px;
  line-height: 1.4;
}
.drawer-head button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #d8c17b38;
  border-radius: 9px;
  padding: 5px;
}
.drawer-body {
  padding: 13px 14px 18px;
}
.drawer-account {
  margin: 0 0 13px;
  padding: 11px 12px;
  gap: 10px;
  border: 1px solid #e4dccb;
  border-radius: 11px;
  background: #fffdf8;
}
.drawer-account > svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.drawer-account b {
  font-size: 14px;
  font-weight: 600;
}
.drawer-account small {
  font-size: 11px;
  line-height: 1.4;
  margin-top: 2px;
}
.drawer-links {
  padding: 0;
}
.drawer-links h2 {
  font-size: 11px;
  font-weight: 600;
  color: #827b68;
  margin: 13px 9px 5px;
}
.drawer-links > a,
.drawer-links > button.drawer-app-entry {
  min-height: 45px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  padding: 5px 9px;
  gap: 10px;
  border: 0;
  border-radius: 9px;
  margin-bottom: 3px;
}
.drawer-links > button.drawer-app-entry {
  width: 100%;
  border: 0;
  color: inherit;
  background: transparent;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}
.drawer-links img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid #e5dac1;
  flex-shrink: 0;
}
.drawer-links > a > svg {
  width: 22px;
  height: 22px;
  margin-inline: 6px;
}
.drawer-arrow {
  margin-inline-start: auto;
  font-size: 20px;
  color: #9c8758;
}
.drawer-links > a[aria-current='page'] {
  background: #eae8d8;
  color: #123e2a;
  font-weight: 700;
  box-shadow: inset -3px 0 #bb963f;
}
.drawer-links > a:hover,
.drawer-links > button.drawer-app-entry:hover,
.drawer-quick-links a:hover {
  background: #f0eadb;
}
.drawer-quick-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding-top: 7px;
  margin-top: 7px;
  border-top: 1px solid #e7ddc8;
}
.drawer-quick-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 9px;
  font-size: 16px;
  font-weight: 500;
  min-height: 38px;
}
.drawer-quick-links svg {
  width: 20px;
  height: 20px;
  margin-inline: 7px;
  color: #a1843c;
}
.drawer-bottom {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e7ddc8;
}
.drawer-phone {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #173b2b;
}
.drawer-languages {
  margin: 12px 0 0;
  gap: 6px;
}
.drawer-languages button {
  padding: 6px 9px;
  font-size: 11px;
  border-radius: 6px;
}
.drawer-languages button[aria-pressed='true'] {
  background: #153b2b;
  border-color: #153b2b;
  color: white;
}
body:not([data-page='admin']) .product {
  border-radius: 15px;
  padding: 14px;
  border-color: #e2dac8;
  box-shadow: 0 3px 12px #57421707;
}
body:not([data-page='admin']) .product .product-image {
  height: 210px;
  margin-bottom: 10px;
  object-fit: contain;
}
body:not([data-page='admin']) .product h3 {
  font-size: 16px;
  line-height: 1.45;
  height: 47px;
  min-height: 47px;
  max-height: 47px;
  margin: 0 0 7px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body:not([data-page='admin']) .product .card-size {
  font-size: 13px;
  gap: 8px;
  margin: 4px 0 8px;
}
body:not([data-page='admin']) .product .card-size select {
  font-size: 13px;
  height: 35px;
  max-width: 110px;
  padding: 5px 8px;
}
body:not([data-page='admin']) .product .price {
  font-size: 24px;
  line-height: 1.25;
  min-height: 36px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 3px 0 9px;
}
body:not([data-page='admin']) .product .price del {
  font-size: 13px;
  font-weight: 400;
}
body:not([data-page='admin']) .product .btn {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  min-height: 42px;
  border-radius: 9px;
  padding: 10px 8px;
}
body:not([data-page='admin']) .product .heart {
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 26px;
}
body:not([data-page='admin']) .product .badge {
  font-size: 12px;
  line-height: 1.3;
  padding: 5px 7px;
  border-radius: 7px;
  top: 11px;
  left: 11px;
}
.category-card strong {
  font-family: Heebo, Arial, sans-serif;
  font-weight: 600;
  line-height: 1.4;
}
.title h2 {
  font-family: Heebo, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.3px;
}
@media (max-width: 900px) and (min-width: 601px) {
  body:not([data-page='admin']) header .top {
    grid-template-columns: 44px minmax(118px, max-content) minmax(155px, 1fr) auto;
    gap: 6px;
    padding-inline: 12px;
  }
  body:not([data-page='admin']) header .action-row {
    gap: 0;
  }
  body:not([data-page='admin']) header .action-row a {
    min-width: 44px;
    width: 44px;
  }
  .header-actions .action-row small {
    display: none;
  }
}
@media (max-width: 600px) {
  body:not([data-page='admin']) .products {
    gap: 11px;
  }
  body:not([data-page='admin']) .product {
    padding: 11px;
    border-radius: 13px;
  }
  body:not([data-page='admin']) .product .product-image {
    height: clamp(145px, 42vw, 195px);
    margin-bottom: 8px;
  }
  body:not([data-page='admin']) .product h3 {
    font-size: 14px;
    line-height: 1.45;
    height: 41px;
    min-height: 41px;
    max-height: 41px;
    margin-bottom: 6px;
  }
  body:not([data-page='admin']) .product .price {
    font-size: 21px;
    gap: 6px;
    min-height: 31px;
    margin: 2px 0 8px;
  }
  body:not([data-page='admin']) .product .price del {
    font-size: 11px;
  }
  body:not([data-page='admin']) .product .card-size {
    font-size: 12px;
    margin: 3px 0 6px;
  }
  body:not([data-page='admin']) .product .card-size select {
    font-size: 12px;
    height: 32px;
    max-width: 82px;
    padding: 4px 6px;
  }
  body:not([data-page='admin']) .product .btn {
    font-size: 13px;
    min-height: 39px;
    padding: 9px 5px;
  }
  body:not([data-page='admin']) .product .heart {
    width: 27px;
    height: 27px;
    font-size: 24px;
    top: 8px;
    right: 8px;
  }
  body:not([data-page='admin']) .product .badge {
    font-size: 11px;
    top: 9px;
    left: 9px;
    padding: 4px 6px;
  }
  .category-card strong {
    font-size: 15px;
  }
  .title h2 {
    font-size: 23px;
  }
}
/* Browser-local account pages. Keep layout and state rules together rather
   than overriding the original block links much later in the stylesheet. */
.account {
  max-width: 650px;
  margin: auto;
}
.account-head {
  background: var(--green);
  color: white;
  border-radius: 15px;
  padding: 18px 22px;
  text-align: center;
}
.account-list {
  margin-top: 20px;
}
body[data-page='account'] .account-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}
.account-list button {
  display: block;
  width: 100%;
  text-align: right;
  background: white;
  padding: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
}
/* Page scope also wins over the legacy RTL link alignment. */
body[data-page='account'] .account-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 82px;
  width: 100%;
  text-align: center;
  background: #fffdf7;
  padding: 12px 8px;
  border: 1px solid #e8dfcc;
  border-radius: 13px;
  color: #163b2c;
  font-size: 15px;
  line-height: 1.4;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease;
}
body[data-page='account'] .account-list a:hover {
  background: #fffaf0;
  border-color: #cbb474;
  transform: translateY(-2px);
}
body[data-page='account'] .account-head h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  color: #fff8e9;
  font-size: clamp(20px, 2.5vw, 26px);
  line-height: 1.3;
}
body[data-page='account'] .account-head h2 .account-icon {
  width: 28px;
  height: 28px;
  color: #dfc17d;
}
body[data-page='account'] .account-head h2 span {
  min-width: 0;
  overflow-wrap: anywhere;
}
body[data-page='account'] .account-head > p {
  margin: 0;
  color: #e5dcc6;
  font-size: 13px;
  line-height: 1.5;
}
body[data-page='account'] .account-contact-details {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
}
body[data-page='account'] .account-contact {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 7px;
  min-width: 0;
  max-width: 100%;
}
body[data-page='account'] .account-contact-label {
  color: #e4d6ad;
  font-size: 11px;
  font-weight: 650;
}
body[data-page='account'] .account-contact bdi {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
body[data-page='account'] .account-head .account-icon {
  width: 25px;
  height: 25px;
  flex: none;
}
body[data-page='account'] .account-list .account-icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: #99732d;
}
body[data-page='account'] .account-list a span {
  min-width: 0;
  font-weight: 650;
}
body[data-page='account'] .account {
  width: min(100%, 1120px);
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(20px, 4vw, 42px);
  --account-ink: #163b2c;
  --account-paper: #fffdf7;
  --account-line: #e8dfcc;
}
body[data-page='account'] .account > h1 {
  margin: 0 0 20px;
  color: var(--account-ink);
  text-align: center;
  font-size: clamp(25px, 3vw, 34px);
}
body[data-page='account'] .account-head {
  display: flex;
  min-height: 132px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 0 16px;
  background: #123d2c;
}
body[data-page='account'] .account-contact {
  color: #fff8e9;
}
body[data-page='account'] .account-contact-label {
  color: #e2c783;
}
body[data-page='account'] .account-contact bdi {
  font-weight: 600;
}
body[data-page='account'] .account-list a {
  box-shadow: none;
  font-weight: 650;
}
body[data-page='account'] .account-signin {
  margin: -5px 0 18px;
  color: var(--cp-muted);
  text-align: center;
  font-size: 13px;
}
body[data-page='account'] .account-signin a,
body[data-page='account'] .account-orders-link,
body[data-page='account'] .account-detail-panel > a {
  color: #315d44;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body[data-page='account'] .account-orders {
  margin: 0 0 16px;
  padding: 18px;
  border: 1px solid var(--account-line);
  border-radius: 15px;
  background: var(--account-paper);
}
body[data-page='account'] .account-orders > h2 {
  margin: 0 0 12px;
  color: var(--account-ink);
  font-size: 20px;
}
body[data-page='account'] .account-orders > p {
  margin: 0 0 12px;
}
body[data-page='account'] .account-orders-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
}
body[data-page='account'] .account-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 16px;
}
body[data-page='account'] .account-detail-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--account-line);
  border-radius: 15px;
  background: var(--account-paper);
}
body[data-page='account'] .account-detail-panel h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--account-ink);
  font-size: 17px;
}
body[data-page='account'] .account-detail-panel h2 .account-icon {
  width: 21px;
  height: 21px;
  color: #997630;
}
body[data-page='account'] .account-detail-panel p {
  margin: 0 0 12px;
}
body[data-page='account'] .account-detail-panel dl {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}
body[data-page='account'] .account-detail-panel dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
body[data-page='account'] .account-detail-panel dt {
  color: var(--cp-muted);
}
body[data-page='account'] .account-detail-panel dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  text-align: end;
}
body[data-page='account'] .account-orders .customer-order {
  border-bottom-color: var(--account-line);
}
body[data-page='account'] .account-orders .customer-order > summary {
  gap: 8px 12px;
  padding: 13px 2px;
}
.account-orders .customer-order-thumbnails {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}
.account-orders .customer-order-thumbnails img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.account-orders .customer-order-status {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 999px;
  background: #edf2e7;
  color: #315d44;
  font-size: 12px;
  white-space: nowrap;
}
.account-orders .customer-order-items {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.account-orders .customer-order-items li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--account-line, var(--line));
}
.account-orders .customer-order-items img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.account-orders .customer-order-image-placeholder {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f5efdf;
  color: #315d44;
}
.account-orders .customer-order-item-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  body[data-page='account'] .account {
    /* The shared page shell already reserves the fixed bottom navigation. */
    padding: 18px 14px 24px;
  }
  body[data-page='account'] .account-head {
    min-height: 118px;
    padding: 15px 12px;
  }
  body[data-page='account'] .account-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  body[data-page='account'] .account-details-grid {
    grid-template-columns: 1fr;
  }
  body[data-page='account'] .account-orders {
    padding: 14px;
  }
  body[data-page='account'] .account-orders .customer-order > summary {
    gap: 8px;
  }
  body[data-page='account'] .account-authenticated .account-contact-details {
    margin-top: 8px;
    gap: 4px 12px;
  }
  body[data-page='account'] .account-list {
    border-radius: 15px;
    overflow: visible;
  }
}
/* Intentional: hidden must beat both flex links and block form fields. */
.account [hidden] {
  display: none !important;
}
.login-card form .field {
  text-align: start;
}
.login-card form .btn {
  width: 100%;
}

/* Language selection now lives with the three shopping actions. */
@media (max-width: 600px) {
  body[data-page='home'] .mobile-search,
  body[data-page='home'] .mobile-hero-search {
    display: none;
  }
  header #categoriesNav:not(.open) {
    display: none;
  }
  .site-drawer {
    max-height: 100dvh;
    overscroll-behavior: contain;
  }
  .drawer-head > button {
    width: 44px;
    height: 44px;
  }
  #siteDrawer .drawer-account {
    min-height: 58px;
  }
  #siteDrawer .drawer-links > a,
  #siteDrawer .drawer-links > button.drawer-app-entry {
    min-height: 46px;
  }
  #siteDrawer .drawer-accordion-btn {
    min-height: 54px;
  }
  #siteDrawer .drawer-languages button {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
  }
  #siteDrawer .drawer-bottom {
    padding-top: 14px;
  }
  #siteDrawer .drawer-languages {
    justify-content: stretch;
    gap: 8px;
    margin: 12px 0 0;
  }
  #siteDrawer .drawer-languages button {
    flex: 1;
    padding: 8px 5px;
    border-radius: 9px;
  }
  body:not([data-page='admin']) .category-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    gap: var(--cp-space-3);
    padding: 12px 4px 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    direction: rtl;
  }
  body[data-page='home'] .category-grid {
    padding-bottom: 0;
  }
  .category-grid::-webkit-scrollbar,
  .dog-panel-subgrid::-webkit-scrollbar {
    display: none !important;
  }
  body:not([data-page='admin']) .category-card {
    flex: 0 0 86px !important;
    min-width: 86px !important;
    padding: 4px 0 6px !important;
    scroll-snap-align: start;
    text-align: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  body:not([data-page='admin']) .category-card img,
  body:not([data-page='admin']) .category-card:nth-child(n) img {
    width: 74px !important;
    height: 74px !important;
    max-width: 74px !important;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #e8dfcd;
    box-shadow: 0 3px 8px #0000000b;
  }
  body:not([data-page='admin']) .category-card strong,
  body:not([data-page='admin']) .category-card:nth-child(n) strong {
    font-size: 13px !important;
    line-height: 1.4 !important;
    padding: 6px 0 0 !important;
    white-space: normal !important;
    min-height: 28px;
  }
  .dog-panel-subgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cp-space-3);
    overflow: visible;
    padding: 3px 2px 8px;
    direction: rtl;
  }
  .dog-panel-subcard {
    min-width: 0;
    scroll-snap-align: none;
  }
  .dog-panel-subcard strong {
    font-size: 14px;
    line-height: 1.4;
  }
  .dog-panel-photo,
  .rodent-subphoto,
  .bird-subphoto,
  .health-subphoto,
  .uniform-branch-photo {
    width: 70px;
    height: 70px;
    max-width: 70px;
    margin-inline: auto;
    border-radius: 50%;
  }
  body:not([data-page='admin']):not([data-page='product']) .products {
    display: grid !important;
    gap: 10px !important;
    grid-auto-rows: auto;
    align-items: stretch;
    padding-bottom: 15px;
  }
  body:not([data-page='admin']) .product {
    padding: 11px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    min-width: 0;
    overflow: visible !important;
  }
  body:not([data-page='admin']) .product > a {
    display: block;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body:not([data-page='admin']) .product .product-image {
    height: 140px !important;
    width: 100% !important;
    object-fit: contain !important;
    margin-bottom: 8px !important;
    display: block;
  }
  body:not([data-page='admin']) .product h3 {
    font-size: 13px !important;
    line-height: 1.35 !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 0 6px !important;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body:not([data-page='admin']) .product .card-size {
    font-size: 11px !important;
    margin: 3px 0 5px !important;
    gap: 5px !important;
  }
  body:not([data-page='admin']) .product .card-size select {
    height: 29px !important;
    font-size: 12px !important;
    max-width: 75px !important;
    padding: 4px 5px !important;
  }
  body:not([data-page='admin']) .product .price {
    font-size: 18px !important;
    line-height: 1.3 !important;
    min-height: 25px !important;
    margin: 4px 0 8px !important;
    gap: 5px !important;
  }
  .product .price del {
    font-size: 10px !important;
  }
  body:not([data-page='admin']) .product .btn {
    margin-top: auto !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    padding: 9px 5px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
    white-space: normal;
  }
  html {
    scroll-padding-block-end: calc(92px + env(safe-area-inset-bottom));
  }
  .support-launcher {
    width: 44px;
    height: 44px;
  }
  .support-launcher > svg {
    width: 24px;
    height: 24px;
  }
  .support-choice-panel {
    bottom: calc(
      var(--bottom-nav-height, calc(75px + env(safe-area-inset-bottom, 0px))) + 72px
    ) !important;
    left: auto;
    inset-inline-end: 12px !important;
    width: 320px !important;
    height: auto !important;
    max-width: calc(100vw - 24px) !important;
  }
}

.aquarium-photo-hero {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 15px;
  overflow: hidden;
  border-radius: 15px;
  background: #fbf6ec;
}
.aquarium-photo-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672/941;
  object-fit: contain;
}
@media (max-width: 600px) {
  .aquarium-photo-hero {
    border-radius: 12px;
    margin-bottom: 12px;
  }
}

/* Approved reptile category banner. */
.reptile-photo-hero {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 15px;
  overflow: hidden;
  border-radius: 15px;
  background: #fbf6ec;
}
.reptile-photo-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672/941;
  object-fit: contain;
}
@media (max-width: 600px) {
  .reptile-photo-hero {
    border-radius: 12px;
    margin-bottom: 12px;
  }
}

/* Fish hero and independent clickable subcategory thumbnails. */
.fish-photo-hero {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 1536/506;
  margin: 0 auto 15px;
  overflow: hidden;
  border-radius: 15px;
  background: #fbf6ec;
}
.fish-photo-hero > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
.fish-branch-photo {
  position: relative;
  overflow: hidden;
  background: none;
  border-color: #d1ad58;
}
.fish-branch-photo > img {
  position: absolute;
  width: 650.84746%;
  height: auto;
  max-width: none;
  top: -243.22034%;
  left: calc(var(--fish-x) * -100% / 236);
  display: block;
}
@media (max-width: 600px) {
  .fish-photo-hero {
    border-radius: 12px;
    margin-bottom: 12px;
  }
}

/* Accessible category accordions and balanced multilingual drawer header. */
#siteDrawer .drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: #052c1d;
  color: #fbf6ec;
}
#siteDrawer .drawer-head > a {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: start;
}
#siteDrawer .drawer-head .brand-wordmark {
  font-size: 29px;
  line-height: 1.15;
  padding: 0;
  white-space: nowrap;
  direction: ltr;
}
#siteDrawer .drawer-head small {
  font-size: 12px;
  line-height: 1.5;
  color: #f1e9d6;
  white-space: normal;
}
#siteDrawer .drawer-head > button {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #bda05566;
  border-radius: 10px;
  color: #fbf6ec;
  background: transparent;
}
.drawer-accordion-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--green);
  text-align: start;
  cursor: pointer;
}
#siteDrawer .drawer-accordion-btn img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}
.accordion-arrow {
  margin-inline-start: auto;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  font-size: 25px;
  line-height: 1;
  color: var(--gold);
  transition: transform 0.22s ease;
  transform: rotate(0deg);
}
[dir='ltr'] .accordion-arrow {
  transform: rotate(180deg);
}
.drawer-accordion-btn.is-open .accordion-arrow {
  transform: rotate(-90deg);
}
.drawer-sub-menu {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.25s ease,
    opacity 0.2s ease;
}
.drawer-sub-menu.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.drawer-sub-menu > div {
  overflow: hidden;
  min-height: 0;
  background: #f4eee2;
  border-radius: 10px;
}
.drawer-sub-item {
  display: block;
  padding: 11px 14px;
  font-size: 16px;
  line-height: 1.5;
  color: #173b2b;
  text-decoration: none;
  border-bottom: 1px dashed #e2d7c0;
}
.drawer-sub-item:last-child {
  border-bottom: 0;
}
.drawer-sub-item.all-link {
  font-weight: 700;
  color: #80601f;
}
.drawer-sub-item:hover {
  background: #eae1cf;
}
.drawer-accordion-btn:focus-visible,
.drawer-sub-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
#results {
  animation: catalog-reveal 0.18s ease;
}
.catalog-empty p {
  font-size: 15px;
  line-height: 1.6;
}
.catalog-empty .btn {
  margin-top: 12px;
}
@keyframes catalog-reveal {
  from {
    opacity: 0.65;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .drawer-sub-menu,
  .accordion-arrow {
    transition: none;
  }
  #results {
    animation: none;
  }
}

/* Phase 1: retain the CityPaws identity; clarify header and drawer only. */
header .header-phones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 20px;
  min-width: 0;
}
header .header-phones .header-phone {
  direction: rtl;
}
header .header-phones .header-phone span {
  direction: ltr;
  unicode-bidi: isolate;
}
header .header-logo.natural-logo > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: normal;
  overflow: visible;
}
header .header-logo.natural-logo .brand-wordmark {
  display: block;
}
@media (min-width: 601px) {
  body:not([data-page='admin']) header .top {
    height: auto !important;
    min-height: 96px !important;
  }
  body:not([data-page='admin']) header .natural-logo {
    gap: 3px;
  }
  body:not([data-page='admin']) header .natural-logo small {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    margin-top: 4px;
    color: #f1ebd8;
    white-space: nowrap;
  }
  header #categoriesNav {
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 24px;
    padding: 10px 24px;
    background: var(--cream);
    border-block: 1px solid var(--line);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
  }
  header #categoriesNav a {
    min-height: 36px;
    justify-content: center;
    padding: 4px 2px;
    border-bottom: 2px solid transparent;
    color: var(--green);
  }
  header #categoriesNav a:hover,
  header #categoriesNav a[aria-current='page'] {
    border-bottom-color: var(--gold);
    color: #80601f;
  }
  header #categoriesNav a:last-child {
    color: #a43830;
  }
}
#siteDrawer.site-drawer {
  inset: 0 0 0 auto;
  margin: 0;
  direction: rtl;
  text-align: start;
  transform: translateX(0);
  --drawer-offset: 100%;
}
html[dir='ltr'] #siteDrawer {
  inset: 0 auto 0 0;
  direction: ltr;
  --drawer-offset: -100%;
  box-shadow: 14px 0 45px #092e2024;
}
/* Keep the chevron glyph from being mirrored a second time by Unicode bidi. */
#siteDrawer .drawer-arrow,
#siteDrawer .accordion-arrow {
  direction: ltr;
  unicode-bidi: isolate;
  margin-left: 0;
  margin-right: auto;
}
html[dir='ltr'] #siteDrawer .drawer-arrow,
html[dir='ltr'] #siteDrawer .accordion-arrow {
  margin-left: auto;
  margin-right: 0;
}
html[dir='ltr'] #siteDrawer .drawer-arrow {
  transform: rotate(180deg);
}
@media (min-width: 601px) and (max-width: 1024px) {
  header #categoriesNav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    column-gap: 20px;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  header #categoriesNav a {
    flex: none;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}
body:has(#siteDrawer[open]) {
  overflow: hidden;
}
#siteDrawer .drawer-links a[aria-current='page'],
#siteDrawer .drawer-quick-links a[aria-current='page'] {
  background: #eee4d1;
  color: var(--green);
  font-weight: 700;
  border-inline-start: 3px solid var(--gold);
}
#siteDrawer[open] {
  animation: citypaws-drawer-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#siteDrawer[open].is-closing {
  animation: citypaws-drawer-out 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes citypaws-drawer-in {
  from {
    transform: translateX(var(--drawer-offset));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes citypaws-drawer-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--drawer-offset));
  }
}
html[dir='ltr'] #siteDrawer .drawer-head > a {
  align-items: flex-start;
}
@media (prefers-reduced-motion: reduce) {
  #siteDrawer[open] {
    animation: none;
  }
  #siteDrawer .drawer-sub-menu,
  #siteDrawer .accordion-arrow {
    transition: none;
  }
}

/* Phase 2: homepage product shelves, promotion, and compact brand rail only. */
body[data-page='home'] .home-product-section {
  padding: clamp(16px, 2vw, 24px) clamp(16px, 3.2vw, 42px) 12px;
}
body[data-page='home'] .home-product-section .title {
  gap: 16px;
  margin-bottom: 13px;
}
body[data-page='home'] .home-product-section .title h2 {
  color: var(--green);
}
body[data-page='home'] .home-product-section .title a {
  color: #80601f;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #d8c391;
  text-underline-offset: 4px;
}
body[data-page='home'] .products.home-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
body[data-page='home'] .home-product-grid > .product {
  min-width: 0;
  min-height: 100%;
  padding: 14px;
  border-color: #e6ddcc;
  border-radius: 13px;
  background: #fffdf8;
  box-shadow: 0 3px 12px #193b2610;
}
body[data-page='home'] .home-product-grid > .product .product-image {
  height: clamp(145px, 16vw, 190px);
  flex: 0 0 auto;
  object-fit: contain;
}
body[data-page='home'] .home-product-grid > .product h3 {
  min-height: 2.7em;
}
body[data-page='home'] #newArrivals .home-product-grid:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
  border-radius: 10px;
}
body[data-page='home'] .home-empty {
  padding: 28px 20px;
  border: 1px dashed #d8c9a8;
  border-radius: 13px;
  background: #f7f0e2;
  color: #6e674f;
  text-align: center;
  line-height: 1.7;
}

body[data-page='home'] .home-promo {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 232px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #bd913d;
  border-radius: 14px;
  background: #092e20;
  color: var(--green);
  box-shadow: 0 9px 24px #173b2214;
  direction: ltr;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}
body[data-page='home'] .home-promo:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px #173b221b;
}
body[data-page='home'] .home-promo-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 43%;
  max-width: 470px;
  min-height: 232px;
  overflow: hidden;
  margin: 0;
  background: #153829;
}
body[data-page='home'] .home-promo-picture {
  display: block;
  position: absolute;
  z-index: 2;
  inset: 0;
}
body[data-page='home'] .home-promo-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body[data-page='home'] .home-promo-fallback-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  overflow: hidden;
  background: #092e20;
}
body[data-page='home'] .home-promo.has-owner-video:not(.has-promo-poster) .home-promo-fallback-art {
  display: flex;
}
body[data-page='home'] .home-promo.has-owner-image .home-promo-fallback-art,
body[data-page='home'] .home-promo.has-promo-poster .home-promo-fallback-art {
  display: none;
}
body[data-page='home'] .home-promo-video {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease;
}
body[data-page='home'] .home-promo-video.is-ready {
  opacity: 1;
}
body[data-page='home'] .home-promo-poster {
  transition: opacity 0.2s ease;
}
body[data-page='home'] .home-promo-media:has(.home-promo-video.is-ready) .home-promo-poster {
  opacity: 0;
}
body[data-page='home'] .home-promo-media.promo-media-failed .home-promo-picture {
  display: none;
}
body[data-page='home'] .home-promo-video.video-failed {
  display: none;
}
body[data-page='home'] .home-promo-media.promo-media-failed .home-promo-fallback-art {
  display: flex;
}
body[data-page='home'] .home-promo-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 232px;
  padding: 24px clamp(20px, 4vw, 52px);
  background: linear-gradient(110deg, #f5efdf, #f2ead8);
  color: var(--green);
  direction: inherit;
  text-align: start;
}
html[dir='rtl'] body[data-page='home'] .home-promo-copy {
  direction: rtl;
  text-align: right;
}
body[data-page='home'] .home-promo-brand {
  color: #fff7e4;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1;
}
body[data-page='home'] .home-promo-brand strong {
  color: #d3aa55;
  font-weight: 800;
}
body[data-page='home'] .home-promo-caption {
  min-width: 0;
  color: #153a29;
  font-size: clamp(21px, 2.5vw, 31px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.035em;
}
body[data-page='home'] .home-promo-description {
  max-width: 42ch;
  color: #6b6657;
  font-size: 14px;
  line-height: 1.55;
}
body[data-page='home'] .home-promo-cta {
  position: static;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 10px;
  min-height: 44px;
  margin-top: 4px;
  padding: 8px 15px;
  border: 1px solid #d4af37;
  border-radius: 999px;
  background: #d4af37;
  color: #1b3b2b;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
body[data-page='home'] .home-promo-cta::after {
  position: absolute;
  inset: 0;
  content: '';
  cursor: pointer;
}
body[data-page='home'] .home-promo-cta > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1em;
  block-size: 1em;
  font-family: Georgia, serif;
  line-height: 1;
}
body[data-page='home'] .home-promo-cta:hover {
  border-color: #1b3b2b;
  background: #d4af37;
  color: #1b3b2b;
}
body[data-page='home'] .home-promo-cta:focus-visible {
  outline: 3px solid #1b3b2b;
  outline-offset: 3px;
}
body[data-page='home'] .home-promo-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(calc(100% - 48px), 1120px);
  margin: 14px auto 16px;
  padding-inline: 0;
}
body[data-page='home'] .home-promo-wrap + #newArrivals.home-product-section {
  padding-top: 0;
}
body[data-page='home'] .home-promo-toggle {
  position: static;
  align-self: flex-start;
  margin-inline-start: 12px;
  padding: 6px 11px;
  border: 1px solid #c5a052;
  border-radius: 6px;
  background: #153a29;
  color: var(--cream);
  font-size: 11px;
  cursor: pointer;
}
body[data-page='home'] .home-promo-toggle:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
body[data-page='home'] .home-promo-toggle[hidden] {
  display: none;
}
body[data-page='home'] .home-brands-showcase {
  direction: inherit;
  margin: 24px clamp(16px, 3.2vw, 42px) 32px;
  padding: 24px clamp(16px, 2.5vw, 32px) 22px;
  border: 1px solid #e6ddcc;
  border-radius: 16px;
  background: #f7f0e2;
}
body[data-page='home'] .home-brands-inner {
  min-width: 0;
}
body[data-page='home'] .home-brands-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
body[data-page='home'] .home-brands-heading h2 {
  margin: 0;
  font-size: 24px;
}
body[data-page='home'] .home-brands-heading p {
  margin: 0;
  color: #766b53;
  font-size: 13px;
  line-height: 1.6;
}
body[data-page='home'] .home-brands-grid {
  display: flex;
  gap: 12px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 2px 2px 12px;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  scrollbar-color: #aa925e #e8deca;
}
body[data-page='home'] .home-brands-grid::-webkit-scrollbar {
  height: 8px;
}
body[data-page='home'] .home-brands-grid::-webkit-scrollbar-track {
  border-radius: 8px;
  background: #e8deca;
}
body[data-page='home'] .home-brands-grid::-webkit-scrollbar-thumb {
  border: 2px solid #e8deca;
  border-radius: 8px;
  background: #aa925e;
}
body[data-page='home'] .home-brand-card {
  display: flex;
  flex: 0 0 clamp(132px, 16vw, 182px);
  align-items: center;
  justify-content: center;
  min-height: 104px;
  padding: 16px;
  border: 1px solid #e4dac6;
  border-radius: 11px;
  background: #fffdf8;
  scroll-snap-align: start;
}
body[data-page='home'] .home-brand-card img {
  display: block;
  width: 100%;
  height: 66px;
  object-fit: contain;
}
body[data-page='home'] .home-brand-card:focus-visible,
body[data-page='home'] .home-brands-grid:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width: 1024px) and (min-width: 601px) {
  body[data-page='home'] .products.home-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body[data-page='home'] #newArrivals .products.home-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    overflow: visible;
  }
}
@media (max-width: 600px) {
  body[data-page='home'] .home-product-section {
    padding: 12px 15px 8px;
  }
  body[data-page='home'] .home-product-section .title {
    margin-bottom: 10px;
  }
  body[data-page='home'] .home-product-section .title h2 {
    font-size: 22px;
  }
  body[data-page='home'] .products.home-product-grid,
  body[data-page='home'] :is(#hotOffers, #newArrivals) .products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    overflow: visible;
    gap: 11px;
    padding: 2px 1px 12px;
  }
  body[data-page='home'] .home-product-grid > .product {
    min-width: 0;
    min-height: 100%;
    padding: 10px;
  }
  body[data-page='home'] .home-product-grid > .product .product-image {
    height: 140px;
    margin-bottom: 8px;
  }
  body[data-page='home'] .home-product-grid > .product h3 {
    min-height: 2.7em;
    font-size: 13px;
  }
  body[data-page='home'] .home-product-grid > .product .price {
    font-size: 18px;
  }
  body[data-page='home'] .home-product-grid > .product .btn {
    padding: 9px 6px;
    font-size: 12px;
  }
  body[data-page='home'] .home-promo-wrap {
    width: calc(100% - 30px);
    margin: 12px auto 16px;
    padding: 0;
  }
  body[data-page='home'] .home-brands-showcase {
    margin: 20px 15px 26px;
    padding: 18px 14px 15px;
  }
  body[data-page='home'] .home-brands-heading {
    display: block;
    margin-bottom: 12px;
  }
  body[data-page='home'] .home-brands-heading h2 {
    font-size: 21px;
  }
  body[data-page='home'] .home-brands-heading p {
    margin-top: 4px;
    font-size: 12px;
  }
  body[data-page='home'] .home-brand-card {
    flex-basis: 138px;
    min-height: 88px;
    padding: 13px;
  }
  body[data-page='home'] .home-brand-card img {
    height: 58px;
  }
}
@media (max-width: 900px) and (min-width: 601px) {
  body[data-page='home'] .home-promo-media {
    width: 43%;
    min-height: 188px;
  }
  body[data-page='home'] .home-promo,
  body[data-page='home'] .home-promo-copy {
    min-height: 210px;
  }
  body[data-page='home'] .home-promo-copy {
    padding: 18px 22px;
    gap: 6px;
  }
  body[data-page='home'] .home-promo-caption {
    font-size: 23px;
  }
  body[data-page='home'] .home-promo-description {
    font-size: 12px;
  }
}
@media (max-width: 600px) {
  body[data-page='home'] .home-promo {
    min-height: 0;
    flex-direction: column;
    border-radius: 15px;
  }
  body[data-page='home'] .home-promo-copy {
    min-height: 0;
    padding: 17px 18px 19px;
    gap: 7px;
  }
  body[data-page='home'] .home-promo-caption {
    font-size: 23px;
  }
  body[data-page='home'] .home-promo-description {
    font-size: 13px;
  }
  body[data-page='home'] .home-promo-cta {
    min-height: 44px;
    font-size: 12px;
    margin-top: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page='home'] .home-promo {
    transition: none;
  }
}
body[data-page='home'] .home-product-section .badge:empty {
  display: none;
}

/* The default product promotion keeps the supplied 1983:793 artwork intact.
   Copy stays entirely in its olive field; the product packs remain physically right. */
body[data-page='home'] .home-promo-wrap.home-promo-wrap-products {
  width: 100%;
  max-width: 1232px;
  margin-inline: auto;
}
body[data-page='home'] .home-promo-product {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  aspect-ratio: 1983 / 793;
  border: 0;
  border-radius: var(--cp-radius-md, 12px);
  background: #29351d;
  box-shadow: 0 8px 22px #27351b16;
  direction: ltr;
}
body[data-page='home'] .home-promo-product-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body[data-page='home'] .home-promo-product-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 3.5%;
  display: flex;
  width: 32%;
  max-width: 32%;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, 0.9vw, 11px);
  transform: translateY(-50%);
  color: #fff5d9;
  text-align: start;
  font-family: 'Tajawal', 'Montserrat', sans-serif;
}
body[data-page='home'] .home-promo-product-title {
  max-width: 18ch;
  margin: 0;
  color: #fff5d9;
  font-family: inherit;
  font-size: clamp(19px, 2.35vw, 34px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
body[data-page='home'] .home-promo-product-copy:lang(en),
body[data-page='home'] .home-promo-product-copy :lang(en) {
  font-family: 'Montserrat', 'Tajawal', sans-serif;
}
body[data-page='home'] .home-promo-product-description {
  max-width: 34ch;
  margin: 0;
  color: #f2ead1;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}
body[data-page='home'] .home-promo-product-brands {
  margin: 0;
  color: #e6ca83;
  font-size: clamp(10px, 0.98vw, 14px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.015em;
  text-wrap: balance;
}
body[data-page='home'] .home-promo-product-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid #d4af58;
  border-radius: 999px;
  background: #d4af58;
  color: #26341f;
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 3px 10px rgb(19 29 16 / 16%);
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}
body[data-page='home'] .home-promo-product-cta:hover {
  background: #e2c575;
  box-shadow: 0 5px 14px rgb(19 29 16 / 22%);
  transform: translateY(-1px);
}
body[data-page='home'] .home-promo-product-cta:focus-visible {
  outline: 3px solid #fff5d9;
  outline-offset: 3px;
}
@media (max-width: 600px) {
  body[data-page='home'] .home-promo-wrap {
    width: calc(100% - 30px);
  }
  body[data-page='home'] .home-promo-product {
    border-radius: 10px;
  }
  body[data-page='home'] .home-promo-product-copy {
    left: 3.5%;
    width: 32%;
    max-width: 32%;
    gap: 5px;
  }
  body[data-page='home'] .home-promo-product-title {
    font-size: clamp(15px, 4.7vw, 19px);
    line-height: 1.12;
    letter-spacing: -0.015em;
  }
  body[data-page='home'] .home-promo-product-description {
    font-size: clamp(10px, 2.65vw, 12px);
    line-height: 1.28;
  }
  body[data-page='home'] .home-promo-product-brands {
    font-size: clamp(8px, 2.5vw, 10px);
    line-height: 1.25;
  }
  body[data-page='home'] .home-promo-product-cta {
    min-height: 44px;
    padding: 6px 11px;
    font-size: clamp(10px, 2.8vw, 12px);
  }
}
@media (max-width: 380px) {
  body[data-page='home'] .home-promo-product-copy {
    width: 32%;
    max-width: 32%;
    gap: 4px;
  }
  body[data-page='home'] .home-promo-product-title {
    font-size: clamp(14px, 4.5vw, 17px);
  }
  body[data-page='home'] .home-promo-product-description {
    font-size: 10px;
    line-height: 1.22;
  }
  body[data-page='home'] .home-promo-product-cta {
    min-height: 44px;
    padding: 5px 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page='home'] .home-promo-product-cta {
    transition: none;
  }
}
img.drawer-products-logo {
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  object-fit: contain;
}
img.drawer-italian-flag {
  display: block;
  flex: 0 0 32px;
  width: 32px;
  height: 24px;
  max-width: none;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgb(27 59 43 / 15%);
}
/* Homepage image fallbacks keep the existing product and brand image footprints. */
body[data-page='home'] .home-product-grid .product-image.hidden,
body[data-page='home'] .home-brand-card img.hidden {
  display: none;
}
body[data-page='home'] .home-product-grid > .product > a > .home-image-unavailable,
body[data-page='home'] .home-brand-card > .home-image-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 10px;
  color: var(--cp-olive);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  direction: inherit;
}
body[data-page='home'] .home-product-grid > .product > a > .home-image-unavailable {
  height: 180px;
  flex: 0 0 180px;
  margin-bottom: 7px;
}
body[data-page='home'] .home-brand-card > .home-image-unavailable {
  width: 100%;
  min-height: 66px;
}
@media (max-width: 600px) {
  body[data-page='home'] .home-product-grid > .product > a > .home-image-unavailable {
    height: 140px;
    flex-basis: 140px;
    margin-bottom: 8px;
  }
  body[data-page='home'] .home-brand-card > .home-image-unavailable {
    min-height: 58px;
  }
}
/* Localization only: follow the selected reading direction without changing dimensions. */
/* Catalog reliability and keyboard access. Existing hero/card dimensions stay intact. */
.catalog-status {
  max-width: 760px;
  margin: auto;
  min-height: 260px;
  line-height: 1.8;
}
.page-heading {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4;
  margin: 0 0 16px;
}
#app > .page-heading {
  width: calc(100% - 32px);
  max-width: 1200px;
  margin: 12px auto 0;
}
.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  transform: translateY(calc(-100% - 16px));
  z-index: 100;
  background: var(--green);
  color: #fff;
  padding: 12px 18px;
  border-radius: 7px;
}
.skip-link:focus {
  transform: none;
}
#app:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

html[lang='ar'] body {
  direction: rtl;
  text-align: right;
}
html[dir='ltr'] body:not([data-page='admin']) header .top,
html[dir='ltr'] body:not([data-page='admin']) header .action-row,
html[dir='ltr'] body:not([data-page='admin']) .category-grid {
  direction: ltr !important;
}
html[dir='ltr'] header nav,
html[dir='ltr'] .search,
html[dir='ltr'] .filters,
html[dir='ltr'] .catalog-content,
html[dir='ltr'] .card-size,
html[dir='ltr'] .bottom,
html[dir='ltr'] .support-choice-panel,
html[dir='ltr'] .chat-panel,
html[dir='ltr'] .dog-panel-subgrid {
  direction: ltr;
}
html[dir='ltr'] .filters,
html[dir='ltr'] .support-choice-panel > #chatToggle,
html[dir='ltr'] .support-choice-panel > #waFloat,
html[dir='ltr'] .detail-info .price {
  text-align: left;
}
.product h3[dir='auto'],
.detail-info h1[dir='auto'],
.cart-item h3[dir='auto'] {
  unicode-bidi: plaintext;
}

/* Phase 2.2: storefront layout refinement. */
body:not([data-page='admin']) header {
  margin-top: 0;
  border-radius: 0;
}
body:not([data-page='admin']) header .top {
  border-radius: 0;
}
body:not([data-page='admin']) .gallery .zoom-image {
  padding: 0;
}
body:not([data-page='admin']) .detail-info h1 {
  margin-top: 0;
  margin-bottom: 12px;
}

@media (min-width: 601px) {
  body:not([data-page='admin']) .hero-new:has(img[src='assets/hero.webp']) {
    width: calc(100% - clamp(32px, 4vw, 64px));
    max-width: var(--cp-hero-max-width, 1060px);
    height: auto !important;
    min-height: 0;
    aspect-ratio: 860 / 340 !important;
    margin: 20px auto 0;
    overflow: hidden;
    border-radius: 12px;
    background: var(--cream);
  }
  body:not([data-page='admin']) .hero-photo:has(img[src='assets/hero.webp']) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    max-width: 100%;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 12px;
  }
  body:not([data-page='admin']) .hero-photo:has(img[src='assets/hero.webp']) > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center;
  }
  body:not([data-page='admin']) .product {
    height: 100%;
    min-width: 0;
  }
  body:not([data-page='admin']) .product .product-image {
    height: 180px;
    flex: 0 0 180px;
    margin-bottom: 7px;
  }
  body:not([data-page='admin']) .product h3 {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.4;
  }
  body:not([data-page='admin']) .product .card-size {
    margin: 2px 0 4px;
  }
  body:not([data-page='admin']) .product .card-size select {
    height: 32px;
  }
  body:not([data-page='admin']) .product .price {
    min-height: 31px;
    margin: 2px 0 6px;
    font-size: 22px;
  }
  body:not([data-page='home']) .catalog .products,
  body[data-page='home'] .products.home-product-grid {
    align-items: stretch;
  }
  body[data-page='home'] .home-product-grid > .product .product-image {
    height: 180px;
    flex-basis: 180px;
  }
}

@media (max-width: 600px) {
  body:not([data-page='admin']) .hero-new:has(img[src='assets/hero-reference-v12.png']) {
    width: calc(100% - 24px);
    height: auto !important;
    min-height: 0;
    margin: 8px auto 0;
    border-radius: 10px;
  }
  body:not([data-page='admin'])
    .mobile-hero-new:not(.hero-editorial):has(img[src='assets/hero-reference-v12.png']) {
    display: block;
    width: 100%;
    height: auto !important;
    aspect-ratio: 1234/887 !important;
    margin: 0;
    border-radius: 0;
  }
  body:not([data-page='admin']) .hero-photo:has(img[src='assets/hero-reference-v12.png']) {
    width: 100%;
    height: auto;
    flex: 0 0 100%;
    aspect-ratio: 1234/887;
  }
  body:not([data-page='admin']) .mobile-hero-new > .hero-artwork {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1234/887;
    margin-inline: auto;
    top: auto;
    transform: none;
  }
  body:not([data-page='admin'])
    .mobile-hero-new
    > .hero-artwork
    > img[src='assets/hero-reference-v12.png'] {
    left: 0;
    width: 100% !important;
    transform: translateY(-10.29%);
  }
  body[data-page='home'] .mobile-search {
    margin-top: 4px;
  }
  body:not([data-page='admin']) .detail {
    gap: 12px;
  }
  /* Reserve the same logical edge used by the floating support control. */
  body[data-page='product'] .purchase {
    padding-inline-end: 64px;
  }
  body:not([data-page='admin']) .gallery {
    align-self: stretch;
    width: 100%;
    min-width: 0;
    padding: 8px;
  }
  body:not([data-page='admin']) .gallery img {
    height: 330px;
    max-height: 330px;
  }
  body:not([data-page='admin']) .sizes {
    gap: 7px;
    margin: 14px 0 8px;
  }
  body:not([data-page='admin']) .sizes button {
    min-height: 42px;
    padding: 9px 13px;
  }
  body:not([data-page='admin']) .detail-perks {
    margin: 17px 0;
  }
  body:not([data-page='admin']) .detail-info details {
    padding: 13px 0;
  }
}

@media (min-width: 601px) {
  body:not([data-page='admin']) .detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(22px, 3vw, 38px);
  }
  body:not([data-page='admin']) .gallery {
    align-self: start;
    min-width: 0;
    padding: 16px;
  }
  body:not([data-page='admin']) .gallery img {
    width: 100%;
    height: 360px;
    max-height: 380px;
    object-fit: contain;
  }
  body:not([data-page='admin']) .detail-perks {
    margin: 22px 0;
  }
  body:not([data-page='admin']) .detail-info details {
    padding: 15px 0;
  }
}

.account .field select {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cp-paper);
  color: var(--green);
  font: inherit;
}
.account-orders {
  display: grid;
  gap: 8px;
  margin-block: 20px;
}
.account-orders .customer-order {
  min-width: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.account-orders .customer-order > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 12px;
  min-height: 44px;
  padding: 8px 2px;
  color: var(--green);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.account-orders .customer-order-number {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.account-orders .customer-order > summary time {
  white-space: normal;
}
.account-orders .customer-order > summary::marker {
  color: #a88436;
}
.account-orders .customer-order > summary [data-view-details],
.account-orders .customer-order > summary .customer-order-view,
.account-orders .customer-order > summary .view-details {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 3px 9px;
  border: 1px solid #d8c79e;
  border-radius: 7px;
  color: #6d5320;
  font-weight: 700;
  white-space: normal;
}
.account-orders .customer-order > :not(summary) {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.account-orders .customer-order-details {
  padding: 0 2px 8px;
  color: #625f53;
  font-size: 13px;
  line-height: 1.55;
}
.account-orders .customer-order-details p {
  margin: 4px 0;
}
.account-orders .customer-order-details a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-top: 3px;
  color: #315c3d;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.order-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.order-success h1,
.order-success p {
  margin: 0;
}
.order-success .order-number {
  font-size: 24px;
  font-weight: 700;
}
.order-success #whatsappOrderLink {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}
@media (max-width: 600px) {
}

/* Short desktop viewports: compact the homepage category row, not product cards. */
@media (min-width: 1001px) and (max-height: 900px) {
  body[data-page='home'] .section:has(.category-grid) {
    padding-block: 0;
  }
  body[data-page='home'] .section:has(.category-grid) .title {
    margin-bottom: 0;
  }
  body[data-page='home'] .category-grid {
    gap: 2px;
    padding-block: 0 !important;
  }
  body[data-page='home'] .category-card {
    padding: 4px 4px 6px !important;
  }
  body[data-page='home'] .category-card img {
    display: block;
    width: clamp(80px, 10vh, 96px) !important;
    height: clamp(80px, 10vh, 96px) !important;
    max-width: clamp(80px, 10vh, 96px) !important;
    aspect-ratio: 1;
    margin-inline: auto;
    object-fit: contain;
  }
  body[data-page='home'] .category-card strong {
    padding: 2px;
    font-size: 15px !important;
  }
}

/* Category artwork stays proportional; the wide, fixed frame uses only blurred art as its side-fill. */
body:not([data-page='admin']) .category-hero-frame {
  display: grid;
  place-items: center;
  width: 100%;
  height: 380px;
  min-height: 0;
  max-width: none;
  margin: 0 0 16px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: #123b29;
}
body:not([data-page='admin'])
  .category-hero-frame
  > :is(
    .dog-reference-hero,
    .bird-reference-hero,
    .rodent-reference-hero,
    .fish-photo-hero,
    .reptile-photo-hero,
    .aquarium-photo-hero,
    .health-reference-hero
  ) {
  width: min(100%, 900px);
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}
body:not([data-page='admin']) .category-hero-frame > :is(.animal-hero, .catalog-hero) {
  position: relative;
  width: 100%;
  height: 100% !important;
  min-height: 0;
  max-width: none;
  max-height: none;
  aspect-ratio: auto !important;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
}
body:not([data-page='admin']) .category-hero-frame > .animal-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: none;
}
body:not([data-page='admin']) .category-hero-frame > .animal-hero > .animal-hero-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 0;
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;
  flex: 1 1 0;
  object-fit: contain;
  object-position: center;
}
body:not([data-page='admin']) .category-hero-frame > .animal-hero > .animal-hero-backdrop {
  position: absolute;
  top: -14px;
  left: -14px;
  z-index: 0;
  width: calc(100% + 28px);
  max-width: none;
  height: calc(100% - 72px);
  object-fit: cover;
  filter: blur(16px);
  opacity: 0.46;
  transform: scale(1.04);
  pointer-events: none;
}
body:not([data-page='admin']) .category-hero-frame > .offers-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 86px;
  z-index: 0;
  background: var(--category-art) center/cover no-repeat;
}
body:not([data-page='admin']) .category-hero-frame > .offers-hero {
  --category-art:
    linear-gradient(90deg, #052c1df0 0%, #052c1d88 38%, transparent 66%), image-set(url('/media/image?src=assets%2Fdogs.webp&w=768&v=18076dac2bf30d33') 1x,url('/media/image?src=assets%2Fdogs.webp&w=1254&v=18076dac2bf30d33') 2x);
  background: none;
}
body:not([data-page='admin']) .category-hero-frame .animal-hero-copy {
  position: relative;
  inset: auto;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 32%);
  grid-template-areas: 'eyebrow action' 'title action' 'body action';
  align-content: center;
  align-items: center;
  gap: 0 24px;
  width: 100%;
  max-width: none;
  min-height: 86px;
  flex: none;
  padding: 8px clamp(16px, 3vw, 38px);
  transform: none;
  background: #123b29;
  color: #fff8e9;
  text-align: start;
}
body:not([data-page='admin']) .category-hero-frame > .offers-hero .animal-hero-copy {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'eyebrow' 'title' 'body';
  justify-items: center;
  text-align: center;
}
body:not([data-page='admin']) .category-hero-frame .animal-hero-copy > span {
  grid-area: eyebrow;
  color: #e4c77f;
  font-size: 12px;
  line-height: 1.35;
}
body:not([data-page='admin']) .category-hero-frame .animal-hero-copy h1 {
  grid-area: title;
  margin: 1px 0;
  color: #fff8e9;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.13;
}
body:not([data-page='admin']) .category-hero-frame .animal-hero-copy h1:after {
  display: none;
}
body:not([data-page='admin']) .category-hero-frame .animal-hero-copy p {
  grid-area: body;
  margin: 0;
  color: #efe8d8;
  font-size: 12px;
  line-height: 1.4;
}
body:not([data-page='admin']) .category-hero-frame .animal-hero-copy .btn {
  grid-area: action;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid #e4c77f;
  border-radius: 9px;
  background: #d1a94f;
  color: #163423;
  font-size: clamp(15px, 1.7vw, 19px);
  white-space: normal;
}
body:not([data-page='admin']) .category-hero-frame > .catalog-hero.other {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px clamp(18px, 4vw, 48px);
  background: linear-gradient(110deg, #123b29, #254a34);
  color: #fff8e9;
}
body:not([data-page='admin']) .category-hero-frame > .catalog-hero.other h1,
body:not([data-page='admin']) .category-hero-frame > .catalog-hero.other p {
  max-width: 70%;
  color: inherit;
}
body:not([data-page='admin']) .category-hero-frame > .catalog-hero.other h1 {
  margin-block: 8px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
}
body:not([data-page='admin']) .category-hero-frame > .catalog-hero.other .btn {
  align-self: flex-start;
  min-width: min(100%, 220px);
  min-height: 48px;
  margin-top: 16px;
}
body:not([data-page='admin']) .products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  overflow: visible;
  scroll-snap-type: none;
}
body[data-page='brands'] .brands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 16px;
}
body[data-page='brands'] .brand {
  display: flex;
  min-width: 0;
  min-height: 116px;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 1px solid #e8dfd0;
  border-radius: 14px;
  background: #fffdf8;
  box-shadow: 0 4px 16px #193b260d;
}
body[data-page='brands'] .brand img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: 72px;
  object-fit: contain;
}
@media (min-width: 600px) and (max-width: 1024px) {
  body:not([data-page='admin']) .products,
  body[data-page='home'] .products.home-product-grid,
  body[data-page='home'] #newArrivals .products.home-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 599px) {
  body:not([data-page='admin']) .products,
  body[data-page='home'] .products.home-product-grid,
  body[data-page='home'] #newArrivals .products.home-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) and (min-width: 600px) {
  body:not([data-page='admin']) .category-hero-frame {
    height: 320px;
  }
  body:not([data-page='admin']) .category-hero-frame > .animal-hero > .animal-hero-backdrop {
    height: calc(100% - 64px);
  }
  body:not([data-page='admin']) .category-hero-frame > .offers-hero::before {
    inset-block-end: 78px;
  }
  body:not([data-page='admin']) .category-hero-frame .animal-hero-copy {
    min-height: 78px;
    padding-inline: 20px;
    column-gap: 16px;
  }
  body:not([data-page='admin']) .category-hero-frame .animal-hero-copy .btn {
    min-height: 50px;
  }
}
@media (max-width: 599px) {
  body:not([data-page='admin']) .category-hero-frame {
    height: 240px;
    margin-bottom: 12px;
    border-radius: 0;
  }
  body:not([data-page='admin']) .category-hero-frame > :is(.animal-hero, .catalog-hero) {
    border-radius: 0;
  }
  body:not([data-page='admin']) .category-hero-frame > .animal-hero > .animal-hero-backdrop {
    height: calc(100% - 62px);
  }
  body:not([data-page='admin']) .category-hero-frame > .offers-hero::before {
    inset-block-end: 76px;
    background-position: center 44%;
  }
  body:not([data-page='admin']) .category-hero-frame .animal-hero-copy {
    grid-template-columns: minmax(0, 1fr) minmax(128px, 39%);
    min-height: 76px;
    gap: 0 10px;
    padding: 6px 12px;
  }
  body:not([data-page='admin']) .category-hero-frame .animal-hero-copy > span {
    font-size: 10px;
  }
  body:not([data-page='admin']) .category-hero-frame .animal-hero-copy h1 {
    font-size: clamp(20px, 6vw, 27px);
  }
  body:not([data-page='admin']) .category-hero-frame .animal-hero-copy p {
    font-size: 10px;
  }
  body:not([data-page='admin']) .category-hero-frame .animal-hero-copy .btn {
    min-height: 48px;
    padding: 6px 8px;
    font-size: 13px;
  }
  body:not([data-page='admin']) .products {
    gap: 10px;
  }
  body[data-page='brands'] .brands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  body[data-page='brands'] .brand {
    min-height: 88px;
    padding: 12px;
  }
  body[data-page='brands'] .brand img {
    height: 58px;
  }
}

/* Preserve the approved phone rail's priority over legacy phone grid rules. */
@media (max-width: 767px) {
  body[data-page='product'] .products,
  .detail ~ .section .products,
  .related-products .products {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 8px 4px 18px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    align-items: stretch;
  }
  body[data-page='product'] .products .product,
  .detail ~ .section .products .product,
  .related-products .products .product {
    flex: 0 0 175px !important;
    min-width: 175px !important;
    max-width: 185px !important;
    scroll-snap-align: start !important;
    margin-bottom: 0 !important;
  }
}
@media (min-width: 768px) {
  body[data-page='product'] .products,
  .detail ~ .section .products,
  .related-products .products {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 8px 4px 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    align-items: stretch;
  }
  body[data-page='product'] .products .product,
  .detail ~ .section .products .product,
  .related-products .products .product {
    flex-basis: 190px;
    min-width: 190px;
    max-width: 190px;
    flex-grow: 0;
    flex-shrink: 0;
    scroll-snap-align: start;
    margin-bottom: 0;
  }
}
/* Installation action stays labelled on compact headers as well as desktop. */
.install-btn,
a.install-btn,
button.install-btn {
  background: #bd913d !important;
  color: #092e20 !important;
  border: 1px solid #a87d2b !important;
  border-radius: 8px !important;
  padding: 3px 6px;
  font-weight: 700 !important;
  font-size: 12px;
  display: inline-flex;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}
.install-btn svg {
  fill: #092e20 !important;
  stroke: #092e20 !important;
  flex-shrink: 0;
}
.gallery img,
.detail .gallery img {
  width: 100% !important;
  max-height: 380px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}
/* Legacy sibling only: never hide the current artwork banner inside its frame. */
.catalog-content > .animal-hero.dogs {
  display: none !important;
}
body:not([data-page='admin']) .category-hero-frame > .animal-hero.dogs > .animal-hero-backdrop {
  height: 100%;
}
.dog-artwork-shop {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.dog-artwork-shop:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -5px;
}
/* Shared storefront add-to-cart treatment; preserve sizing and disabled states. */
body:not([data-page='admin']) .product .btn,
body:not([data-page='admin']) .detail .btn.gold {
  background: var(--gold);
  color: #092e20;
  font-weight: 700;
  transition:
    filter 0.2s ease,
    box-shadow 0.2s ease;
}
body:not([data-page='admin']) .product .btn:hover:not(:disabled),
body:not([data-page='admin']) .detail .btn.gold:hover:not(:disabled) {
  filter: brightness(0.95);
  box-shadow: 0 4px 12px rgba(189, 145, 61, 0.3);
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-page='admin']) .product .btn,
  body:not([data-page='admin']) .detail .btn.gold {
    transition: none;
  }
}

/* Installation remains a small drawer action; never promote it into the header. */
body[data-page='home'] #app > .page-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Unified CityPaws storefront header */
body:not([data-page='admin']) header {
  background: #062b1c;
  border-radius: 0;
}
.delivery-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin: 0;
  margin-inline: calc(50% - 50vw);
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid #b89448;
  background: #d4a745;
  color: #062319;
  text-align: center;
}
.delivery-strip-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(100%, 1240px);
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: normal;
  transition: opacity 160ms ease;
}
.delivery-strip-message svg {
  flex: 0 0 21px;
}
.delivery-strip-message span {
  min-width: 0;
}
.delivery-strip.is-changing .delivery-strip-message {
  opacity: 0;
}
.delivery-strip:focus-visible {
  outline: 2px solid #0e382b;
  outline-offset: -3px;
}
.product-delivery-trust {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 10px;
  color: #0e382b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.commerce-discount,
.commerce-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0;
  color: #1b3b2b;
}
.commerce-total {
  border-top: 1px solid #e6dec9;
  padding-top: 10px;
}
.commerce-discount {
  font-weight: 700;
}
.campaign-badge {
  background: #1b3b2b;
  color: #fff8df;
  border: 1px solid #d4af37;
  font-weight: 700;
  max-width: calc(100% - 56px);
}
.product-delivery-trust svg {
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .delivery-strip-message {
    transition: none;
  }
}
@media (max-width: 600px) {
  .delivery-strip {
    padding-inline: 8px;
  }
  .delivery-strip-message {
    font-size: 11.5px;
  }
}
body:not([data-page='admin']) header .top {
  display: grid;
  grid-template-columns: 44px minmax(128px, max-content) minmax(160px, 1fr) auto;
  grid-template-areas: 'menu brand search actions';
  align-items: center;
  gap: clamp(5px, 1vw, 14px);
  min-height: 84px;
  height: auto;
  padding: 10px clamp(10px, 2vw, 28px);
  direction: inherit;
  background: #062b1c;
  color: #f7f0df;
  border-radius: 0;
}
body:not([data-page='admin']) header .natural-logo {
  grid-area: brand;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
  max-width: 230px;
  gap: 7px;
  margin: 0;
  color: #d6b66d;
}
body:not([data-page='admin']) header .natural-logo .paw {
  display: block;
  height: auto;
  line-height: 0;
  margin: 0;
  flex: 0 0 auto;
}
body:not([data-page='admin']) header .natural-logo .paw svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}
body:not([data-page='admin']) header .natural-logo .brand-wordmark {
  font-size: clamp(23px, 2vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.7px;
  color: #d6b66d;
}
body:not([data-page='admin']) header .natural-logo small {
  display: block;
  font-size: 10px;
  line-height: 1.25;
  margin-top: 3px;
  color: #f1ebd8;
  white-space: nowrap;
}
body:not([data-page='admin']) header .mobile-page-title {
  display: none;
}
body:not([data-page='admin']) header .top > .search {
  grid-area: search;
  display: flex;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  border: 1px solid #d7bb78;
  border-radius: 10px;
  background: #fffdf5;
  box-shadow: none;
}
body:not([data-page='admin']) header .top > .search input {
  min-width: 0;
  padding: 10px 14px;
  font-size: 16px;
  color: var(--green);
}
body:not([data-page='admin']) header .top > .search input::placeholder {
  color: #7e796c;
  opacity: 1;
}
body:not([data-page='admin']) header .top > .search button {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  background: var(--green);
  color: #f7e8c5;
}
body:not([data-page='admin']) header .header-actions {
  grid-area: actions;
  position: static;
  min-width: 0;
  width: auto;
  margin: 0;
}
body:not([data-page='admin']) header .header-actions .langs {
  display: none;
}
body:not([data-page='admin']) header .action-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: auto;
}
body:not([data-page='admin']) header .action-row a {
  display: flex;
  width: 56px;
  min-width: 56px;
  min-height: 50px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px;
  color: #f7f0df;
}
body:not([data-page='admin']) header .action-row a small {
  font-size: 12px;
  line-height: 1.1;
}
body:not([data-page='admin']) header .action-row svg {
  width: 22px;
  height: 22px;
}
body:not([data-page='admin']) header .menu {
  grid-area: menu;
  display: flex;
  position: static;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px;
  color: #f7f0df;
  background: transparent;
}
body:not([data-page='admin']) header .menu svg {
  width: 24px;
  height: 24px;
}
body:not([data-page='admin']) header .cart-link b {
  top: 0;
  inset-inline-end: 2px;
  right: auto;
}
body:not([data-page='admin']) header .header-language {
  position: relative;
  flex: 0 0 48px;
}
body:not([data-page='admin']) header [data-header-language-toggle] {
  display: flex;
  width: 48px;
  min-width: 44px;
  height: 50px;
  min-height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f7f0df;
}
body:not([data-page='admin']) header [data-header-language-toggle] svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
body:not([data-page='admin']) header .header-language-code {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
body:not([data-page='admin']) header [data-header-language-toggle]:focus-visible {
  outline: 2px solid #d9b86b;
  outline-offset: 2px;
}
body:not([data-page='admin']) header .header-language-options {
  position: absolute;
  z-index: 30;
  inset-block-start: calc(100% + 7px);
  inset-inline-end: 0;
  display: grid;
  min-width: 164px;
  gap: 3px;
  padding: 6px;
  border: 1px solid #d7c99f;
  border-radius: 11px;
  background: #fbf6ec;
  color: #123b29;
  box-shadow: 0 10px 26px #041d1540;
}
body:not([data-page='admin']) header .header-language-options[hidden] {
  display: none;
}
body:not([data-page='admin']) header .header-language-options button {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  text-align: start;
}
body:not([data-page='admin']) header .header-language-options button:hover,
body:not([data-page='admin']) header .header-language-options button[aria-pressed='true'] {
  background: #eae3d0;
  color: #123b29;
}
html[dir='ltr'] body:not([data-page='admin']) header .top > .search {
  direction: ltr;
}
html[dir='rtl'] body:not([data-page='admin']) header .top > .search {
  direction: rtl;
}

@media (max-width: 900px) and (min-width: 601px) {
  body:not([data-page='admin']) header .top {
    grid-template-columns: 44px minmax(118px, max-content) minmax(150px, 1fr) auto;
    gap: 6px;
    padding-inline: 12px;
  }
  body:not([data-page='admin']) header .natural-logo {
    max-width: 180px;
  }
  body:not([data-page='admin']) header .natural-logo .paw svg {
    width: 26px;
    height: 26px;
  }
  body:not([data-page='admin']) header .natural-logo small {
    font-size: 9px;
  }
  body:not([data-page='admin']) header .action-row {
    gap: 0;
  }
  body:not([data-page='admin']) header .action-row a {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  body:not([data-page='admin']) header .action-row small {
    display: none;
  }
  body:not([data-page='admin']) header [data-header-language-toggle] {
    height: 44px;
  }
}
@media (max-width: 600px) {
  body:not([data-page='admin']) header .top {
    grid-template-columns: 44px minmax(0, 1fr) 176px;
    grid-template-rows: minmax(56px, auto) 44px;
    grid-template-areas: 'menu brand actions' 'search search search';
    gap: 4px 0;
    min-height: 0;
    padding: 4px 8px 8px;
  }
  body:not([data-page='admin']) header .natural-logo {
    width: 100%;
    max-width: none;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    line-height: 1;
  }
  body:not([data-page='admin']) header .natural-logo .paw svg {
    width: 24px;
    height: 24px;
  }
  body:not([data-page='admin']) header .natural-logo .brand-wordmark {
    font-size: 24px;
    letter-spacing: -0.7px;
  }
  body:not([data-page='admin']) header .natural-logo small {
    font-size: 9px;
    white-space: normal;
  }
  body:not([data-page='admin']) header .header-actions {
    width: 176px;
    min-width: 176px;
  }
  body:not([data-page='admin']) header .action-row {
    width: 176px;
    justify-content: space-between;
    gap: 0;
  }
  body:not([data-page='admin']) header .action-row a {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }
  body:not([data-page='admin']) header .action-row a[href='#login'] {
    display: flex;
  }
  body:not([data-page='admin']) header .action-row small {
    display: none;
  }
  body:not([data-page='admin']) header .action-row svg {
    width: 21px;
    height: 21px;
  }
  body:not([data-page='admin']) header .header-language {
    flex-basis: 44px;
  }
  body:not([data-page='admin']) header [data-header-language-toggle] {
    width: 44px;
    height: 44px;
  }
  body:not([data-page='admin']) header .menu {
    width: 44px;
    height: 44px;
  }
  body:not([data-page='admin']) header .top > .search {
    grid-area: search;
    width: 100%;
    height: 44px;
    min-height: 44px;
  }
  body:not([data-page='admin']) header .top > .search input {
    padding-inline: 12px;
    font-size: 14px;
  }
}
@media (max-width: 360px) {
  body:not([data-page='admin']) header .top {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: minmax(56px, auto) 44px 44px;
    grid-template-areas: 'menu brand' 'actions actions' 'search search';
  }
  body:not([data-page='admin']) header .header-actions {
    justify-self: center;
  }
}

/* Storefront drawer: pinned utility footer with an independently scrollable menu. */
#siteDrawer.site-drawer {
  display: flex;
  flex-direction: column;
  width: min(86vw, 370px);
  max-width: calc(100vw - 20px);
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: contain;
}
#siteDrawer:not([open]) {
  display: none;
}
#drawerContent {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
#siteDrawer .drawer-head {
  position: relative;
  top: auto;
  z-index: 1;
  flex: 0 0 auto;
}
#siteDrawer .drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #c2ad78 transparent;
}
#siteDrawer .drawer-contact-area {
  flex: 0 0 auto;
  min-width: 0;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom, 0px));
  color: #173b2b;
  background: #f8f2e5;
  border-top: 1px solid #e4d8bb;
  box-shadow: 0 -5px 16px rgb(25 59 38 / 5%);
}
#siteDrawer .drawer-contact-area > h2 {
  margin: 0 2px 7px;
  color: #74613a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .045em;
}
#siteDrawer .drawer-contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
#siteDrawer .drawer-contact-actions > a {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 46px;
  gap: 7px;
  padding: 6px 8px;
  color: #173b2b;
  background: #fffdf8;
  border: 1px solid #e4d8bb;
  border-radius: 10px;
  transition: background-color .16s ease, border-color .16s ease;
}
#siteDrawer .drawer-contact-whatsapp {
  border-color: #d2bd84;
  background: #f4ecd6;
}
#siteDrawer .drawer-contact-actions > a > span:last-child {
  display: grid;
  min-width: 0;
  gap: 1px;
}
#siteDrawer .drawer-contact-actions b {
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.25;
}
#siteDrawer .drawer-contact-actions small {
  color: #776f5d;
  font-size: 10px;
  line-height: 1.25;
}
#siteDrawer .drawer-contact-icon,
#siteDrawer .drawer-location-pin {
  display: grid;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  place-items: center;
  color: #8b6e2d;
}
#siteDrawer .drawer-contact-icon svg,
#siteDrawer .drawer-location-pin svg {
  width: 19px;
  height: 19px;
}
#siteDrawer .drawer-contact-location {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 38px;
  gap: 5px;
  margin-top: 4px;
  padding: 3px 5px;
  color: #5f5a4d;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
#siteDrawer .drawer-contact-location:hover,
#siteDrawer .drawer-contact-actions > a:hover {
  background-color: #eee5d2;
  border-color: #cbb77e;
}
#siteDrawer .drawer-bottom {
  margin: 0;
  padding: 6px 0 0;
  border-top: 1px solid #e4d8bb;
}
#siteDrawer .drawer-languages {
  margin: 6px 0 0;
}
#siteDrawer .drawer-bottom > .drawer-share-action {
  min-height: 38px;
  padding-block: 4px;
  font-size: 13px;
}
#siteDrawer .drawer-links > .drawer-feature-link {
  min-height: 48px;
  margin-bottom: 5px;
  padding-inline: 10px;
  border: 1px solid #e7d9b8;
  background: #fffaf0;
  font-weight: 700;
}
#siteDrawer .drawer-links > .drawer-hot-deals {
  color: #173b2b;
  background: #f3e8c9;
  border-color: #d9c184;
}
#siteDrawer .drawer-links > .drawer-hot-deals > svg {
  color: #a47b2b;
}
#siteDrawer .drawer-links > .drawer-all-brands > svg {
  color: #6d7558;
}
#siteDrawer .drawer-feature-mark {
  margin-inline-start: auto;
  padding: 2px 7px;
  color: #fffaf0;
  background: #8c6b2e;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.5;
}
#siteDrawer .drawer-links > .drawer-feature-link[aria-current='page'] {
  border-inline-start: 3px solid #a78336;
}
body:not([data-page='admin']) header .menu {
  border: 1px solid rgb(224 199 133 / 58%);
  border-radius: 11px;
  color: #f7f0df;
  background: #17432f;
  box-shadow: 0 2px 7px rgb(0 0 0 / 16%);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
body:not([data-page='admin']) header .menu:hover,
body:not([data-page='admin']) header .menu[aria-expanded='true'] {
  color: #fff8e7;
  background: #24583c;
  border-color: #d8b25c;
}
body:not([data-page='admin']) header .menu:focus-visible {
  outline: 3px solid #d8b25c;
  outline-offset: 3px;
}
#siteDrawer :is(a, button):focus-visible {
  outline: 3px solid #a78336;
  outline-offset: 2px;
}
@media (max-width: 600px) {
  #siteDrawer .drawer-contact-area {
    padding-inline: 11px;
  }
  #siteDrawer .drawer-contact-actions {
    gap: 5px;
  }
  #siteDrawer .drawer-contact-actions > a {
    gap: 5px;
    padding-inline: 6px;
  }
}
@media (max-height: 430px) {
  #siteDrawer .drawer-head {
    min-height: 54px;
    padding-block: 7px;
  }
  #siteDrawer .drawer-head strong {
    font-size: 22px;
  }
  #siteDrawer .drawer-contact-area {
    padding-block: 6px;
  }
  #siteDrawer .drawer-contact-area > h2 {
    margin-bottom: 4px;
  }
  #siteDrawer .drawer-contact-actions > a {
    min-height: 40px;
  }
  #siteDrawer .drawer-contact-location {
    min-height: 29px;
    margin-top: 1px;
  }
  #siteDrawer .drawer-languages {
    margin-top: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #siteDrawer .drawer-contact-actions > a,
  body:not([data-page='admin']) header .menu {
    transition: none;
  }
}

/* Chat, PWA identity, footer mark, and native share fallback. */
.chat-panel {
  position: fixed;
  inset-inline-end: 24px;
  inset-inline-start: auto;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  width: 440px;
  max-width: calc(100vw - 32px);
  height: min(680px, calc(100dvh - 120px));
  max-height: none;
  min-height: 0;
  overflow: hidden;
  background: var(--cp-paper);
  border: 1px solid var(--cp-border);
  border-radius: 18px;
  box-shadow: 0 15px 55px #00291d38;
  direction: inherit;
}
.chat-panel[hidden] {
  display: none;
}
.chat-panel .chat-header {
  flex: 0 0 auto;
}
.chat-panel .chat-messages {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.chat-panel .chat-suggestions {
  flex: 0 0 auto;
  gap: 8px;
  padding: 8px 16px 12px;
}
.chat-panel .chat-suggestions button {
  min-height: 44px;
  padding: 9px 13px;
  font-size: 13px;
  line-height: 1.35;
}
.chat-panel form {
  flex: 0 0 auto;
  min-height: 58px;
  align-items: center;
}
.chat-panel form input {
  min-height: 52px;
  padding: 12px 15px;
  font-size: 16px;
  line-height: 1.35;
}
.chat-panel form button {
  flex: 0 0 48px;
  width: 48px;
  min-height: 48px;
}
.support-choice-panel b {
  display: block;
  font-size: 18px;
  font-weight: 700;
}
.support-choice-panel small {
  display: block;
  margin-top: 3px;
  color: #636b61;
  font-size: 14px;
}
.chat-product-list {
  display: grid;
  gap: 9px;
  width: 100%;
}
.chat-product-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid #e7dcc6;
  border-radius: 12px;
  background: #fffaf0;
  color: var(--green);
  line-height: 1.45;
}
.chat-product-card strong {
  font-size: 14px;
  line-height: 1.45;
}
.chat-product-card a {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-product-card button {
  align-self: flex-start;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: var(--cream);
  color: var(--green);
  font: inherit;
  font-weight: 600;
}
.chat-product-card span {
  color: #8a6825;
  font-weight: 700;
  font-size: 14px;
}
.chat-product-card small,
.chat-facts p {
  color: #625d4f;
  font-size: 14px;
  line-height: 1.55;
}
.chat-facts p {
  margin: 5px 0;
  white-space: pre-line;
}
.pwa-app-icon {
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 11px;
}
#siteDrawer .drawer-head {
  gap: 10px;
  padding: 12px 15px;
}
#siteDrawer .drawer-body {
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
}
#siteDrawer .drawer-links h2 {
  margin: 10px 8px 4px;
}
#siteDrawer .drawer-bottom {
  margin-top: 10px;
  padding-top: 9px;
}
#siteDrawer .drawer-languages {
  margin-top: 9px;
}
#siteDrawer .drawer-links > button.drawer-app-entry .pwa-app-icon {
  display: block;
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  object-fit: contain;
}
#siteDrawer .drawer-links > button.drawer-app-entry .pwa-app-label {
  display: block;
  min-width: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
#siteDrawer .drawer-bottom > .drawer-share-action {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--green);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
}
#siteDrawer .drawer-bottom > .drawer-share-action:hover,
#siteDrawer .drawer-bottom > .drawer-share-action:focus-visible {
  background: #f0eadb;
}
#siteDrawer .drawer-bottom > .drawer-share-action:focus-visible,
#siteDrawer .drawer-links > button.drawer-app-entry:focus-visible {
  outline: 3px solid #83621f;
  outline-offset: 2px;
}
#siteDrawer .drawer-bottom > .drawer-share-action svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-inline: 7px;
}
.bottom .bottom-install .pwa-app-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  object-fit: contain;
}
.bottom .bottom-install .pwa-app-label {
  color: inherit;
  font-size: 12px;
  font-weight: 600;
}
dialog.share-dialog {
  width: min(460px, calc(100vw - 32px));
  max-width: 460px;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 30px;
  overflow: auto;
  border: 1px solid #d9c99f;
  border-radius: 18px;
  background: var(--cream);
  color: var(--green);
  box-shadow: 0 18px 60px #102e2033;
  direction: inherit;
}
dialog.share-dialog::backdrop {
  background: #092e20a8;
  backdrop-filter: blur(2px);
}
.share-dialog h2 {
  margin: 0 46px 12px 0;
  color: var(--green);
  font-size: 23px;
}
.share-dialog p {
  margin: 0 0 18px;
  color: #625d4f;
  line-height: 1.65;
}
.share-copy-input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid #d9c99f;
  border-radius: 9px;
  background: #fffdf7;
  color: var(--green);
  font-size: 16px;
  direction: ltr;
  text-align: left;
}
.share-dialog .share-copy-button,
.share-dialog .close-dialog {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 9px;
  font: inherit;
  font-weight: 700;
}

/* Account access is a compact action, not a fifth card in the guest grid. */
body[data-page='account'] .account-signin {
  margin: 15px 2px 0;
  color: #6f7568;
  font-size: 13px;
  line-height: 1.6;
}
body[data-page='account'] .account-signin a {
  color: #8e6a25;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.share-dialog .share-copy-button {
  width: 100%;
  padding: 10px 16px;
  background: var(--gold);
  color: #092e20;
}
.share-dialog .close-dialog {
  top: 12px;
  right: 12px;
  width: 44px;
  padding: 0;
  border: 1px solid #e5dbc5;
  background: #fffdf7;
  color: var(--green);
  font-size: 24px;
}
@media (max-width: 600px) {
  .chat-panel {
    inset-inline: 0;
    inset-inline-end: 0;
    inset-inline-start: 0;
    top: calc(var(--chat-viewport-top, 0px) + 8px);
    bottom: calc(
      100dvh - var(--chat-viewport-top, 0px) - var(--chat-viewport-height, 100dvh) +
        var(--bottom-nav-height, calc(74.75px + env(safe-area-inset-bottom, 0px))) + 8px
    );
    width: auto;
    max-width: none;
    height: auto;
    max-height: calc(
      var(--chat-viewport-height, 100dvh) -
        var(--bottom-nav-height, calc(74.75px + env(safe-area-inset-bottom, 0px))) - 24px
    );
    min-height: 0;
    margin-inline: 8px;
    border-radius: 16px;
  }
  .chat-panel .chat-messages {
    padding: 12px;
  }
  .chat-panel .chat-suggestions {
    padding: 6px 12px 10px;
    gap: 7px;
  }
  .chat-panel .chat-suggestions button {
    padding: 8px 10px;
  }
  .chat-panel form {
    min-height: 56px;
  }
  .chat-panel form input {
    min-height: 50px;
    padding: 10px 12px;
    font-size: 16px;
  }
  .support-choice-panel b {
    font-size: 17px;
  }
  .support-choice-panel small {
    font-size: 13px;
  }
  dialog.share-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    padding: 26px 18px 18px;
  }
}
@media (max-height: 400px) and (max-width: 600px) {
  .chat-panel .chat-header {
    padding: 10px 14px;
  }
  .chat-panel .chat-header strong {
    font-size: 17px;
  }
  .chat-panel .chat-header small {
    margin-top: 2px;
  }
  .chat-panel .chat-messages {
    padding-block: 7px;
  }
  .chat-panel .chat-suggestions {
    padding-block: 4px 7px;
  }
  .chat-panel form {
    min-height: 54px;
  }
  .chat-panel form input {
    min-height: 48px;
    padding-block: 8px;
  }
}

/* Cart: compact product rows with the order summary on the logical inline end. */
body[data-page='cart'] .cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 350px);
  align-items: start;
  gap: clamp(16px, 2.5vw, 30px);
  direction: inherit;
}
body[data-page='cart'] .cart-layout > div {
  min-width: 0;
}
body[data-page='cart'] .cart-item {
  min-width: 0;
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid #e8dfd0;
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 3px 12px #193b260a;
}
body[data-page='cart'] .cart-item > a {
  display: block;
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
}
body[data-page='cart'] .cart-item img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
}
body[data-page='cart'] .cart-item .info {
  flex: 1;
  min-width: 0;
}
body[data-page='cart'] .cart-item h3 {
  margin: 0 0 3px;
  font-size: 15px;
  line-height: 1.35;
}
body[data-page='cart'] .cart-item .cart-weight {
  display: block;
  color: #766f5d;
  font-size: 12px;
  line-height: 1.4;
}
body[data-page='cart'] .cart-item .price {
  margin: 4px 0 6px;
  font-size: 16px;
  line-height: 1.25;
}
body[data-page='cart'] .cart-item .qty {
  min-height: 30px;
  width: max-content;
}
body[data-page='cart'] .cart-item .qty button {
  min-width: 30px;
  padding: 5px 8px;
}
body[data-page='cart'] .cart-item .qty span {
  min-width: 30px;
  padding: 0 6px;
  text-align: center;
}
body[data-page='cart'] .cart-item .remove {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #766f5d;
  font-size: 19px;
}
body[data-page='cart'] .cart-item .remove svg {
  display: block;
  width: 20px;
  height: 20px;
}
body[data-page='cart'] .cart-item .remove:hover {
  background: #f7eee5;
  color: #a04439;
}
body[data-page='cart'] .summary-box {
  position: sticky;
  top: 16px;
  border: 1px solid #e8dfd0;
  border-radius: 14px;
  background: #fffdf8;
  box-shadow: 0 8px 24px #193b2610;
}
@media (max-width: 760px) {
  body[data-page='cart'] .cart-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-page='cart'] .summary-box {
    position: static;
  }
}
@media (max-width: 420px) {
  body[data-page='cart'] .cart-item {
    gap: 10px;
    padding: 10px;
  }
  body[data-page='cart'] .cart-item > a,
  body[data-page='cart'] .cart-item img {
    flex-basis: 72px;
    width: 72px;
    height: 72px;
  }
  body[data-page='cart'] .cart-item h3 {
    font-size: 14px;
  }
  body[data-page='cart'] .cart-item .remove {
    width: 30px;
    height: 30px;
  }
}

/* Customer sign-in: one quiet paper surface around the real Clerk flow. */
body[data-page='login'] .login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 32px 20px;
}
body[data-page='login'] .login-card {
  width: min(100%, 400px);
  max-width: 400px;
  padding: 26px 28px 18px;
  border: 1px solid #e8dfd0;
  border-radius: 16px;
  background: #fffdf8;
  color: #102e20;
  text-align: center;
  box-shadow: 0 8px 28px rgba(21, 59, 34, 0.07);
}
body[data-page='login'] .login-logo {
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  border: 2px solid #bd913d;
  border-radius: 50%;
  object-fit: contain;
}
body[data-page='login'] .login-card h1 {
  margin: 0 0 7px;
  color: #102e20;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.4;
}
body[data-page='login'] .login-card > p {
  margin: 0 auto 17px;
  max-width: 34ch;
  color: #766f5d;
  font-size: 14px;
  line-height: 1.65;
}
body[data-page='login'] .login-card .customer-auth-host {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
}
body[data-page='login'] .login-card .customer-auth-host .cl-rootBox,
body[data-page='login'] .login-card .customer-auth-host .cl-cardBox,
body[data-page='login'] .login-card .customer-auth-host .cl-card,
body[data-page='login'] .login-card .customer-auth-host .cl-form,
body[data-page='login'] .login-card .customer-auth-host .cl-formField,
body[data-page='login'] .login-card .customer-auth-host .cl-formFieldInput,
body[data-page='login'] .login-card .customer-auth-host .cl-formButtonPrimary,
body[data-page='login'] .login-card .customer-auth-host .cl-socialButtons,
body[data-page='login'] .login-card .customer-auth-host .cl-socialButtonsBlockButton,
body[data-page='login'] .login-card .customer-auth-host .cl-alternativeMethodsBlockButton {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
body[data-page='login'] .login-card .customer-auth-host .cl-socialButtonsBlockButton,
body[data-page='login'] .login-card .customer-auth-host .cl-alternativeMethodsBlockButton {
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-page='login'] .login-card .browse-link {
  display: inline-flex;
  justify-content: center;
  margin-top: 9px;
  padding: 8px 12px;
  border-radius: 7px;
  color: #72551f;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body[data-page='login'] .login-card .browse-link:hover {
  background: #fbf6ec;
  color: #092e20;
}
html[dir='rtl'] body[data-page='login'] .login-card {
  direction: rtl;
}
html[dir='ltr'] body[data-page='login'] .login-card {
  direction: ltr;
}
@media (max-width: 600px) {
  body[data-page='login'] .login-page {
    min-height: 60vh;
    padding: 24px 15px 32px;
  }
  body[data-page='login'] .login-card {
    padding: 24px 22px 16px;
  }
}

/* Compact, shared category and offer listings: real department artwork + content. */
body:is([data-page='category'], [data-page='offers'], [data-page='product']) .crumb {
  display: block;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body:is([data-page='category'], [data-page='offers']) .catalog-content,
body:is([data-page='category'], [data-page='offers']) .catalog {
  min-width: 0;
}
body:is([data-page='category'], [data-page='offers']) .category-hero-frame {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(82px, 9vw, 112px);
  min-height: 0;
  margin: 0 0 8px;
  padding: 10px 16px;
  overflow: hidden;
  border: 1px solid #d9ceb9;
  border-radius: 10px;
  background: #173b2b;
}
body:is([data-page='category'], [data-page='offers']) .category-banner-artwork {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 28%;
}
body[data-page='category'] .category-hero-frame {
  height: clamp(220px, 24vw, 300px);
  max-height: 300px;
}
body:is([data-page='category'], [data-page='offers']) .category-hero-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #102d22a8, #102d227a 48%, #102d22a8);
  pointer-events: none;
}
body:is([data-page='category'], [data-page='offers']) .category-hero-frame h1 {
  position: relative;
  z-index: 2;
  max-width: 100%;
  padding: 0.12em 0.42em;
  margin: 0;
  border-radius: 0.28em;
  background: rgba(0, 0, 0, 0.28);
  color: #fff8e8;
  font-size: clamp(21px, 2.8vw, 30px);
  font-weight: 800;
  line-height: 1.18;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1px 8px #082318a8;
  overflow-wrap: anywhere;
}
body[data-page='category'] .category-hero-frame[data-theme='birds']::before,
body[data-page='category'] .category-hero-frame[data-theme='accessories']::before,
body[data-page='category'] .category-hero-frame[data-theme='small']::before {
  background: linear-gradient(90deg, #102d2299, #102d225e 48%, #102d2299);
}
body[data-page='category'] .category-hero-frame--original-artwork {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0 0 16px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: transparent;
}
body[data-page='category'] .category-hero-frame--original-artwork::before {
  display: none;
}
body[data-page='category'] .category-hero-frame--original-artwork .category-banner-artwork {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
body[data-page='category'] .category-hero-frame--original-artwork h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body[data-page='category'] .category-hero-frame--original-artwork .category-banner-all {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
body[data-page='category'] .category-hero-frame--original-artwork .category-banner-all:focus-visible {
  outline: 3px solid #bd913d;
  outline-offset: -5px;
}
body:is([data-page='category'], [data-page='offers']) .catalog-load-status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 52px;
  padding: 14px 8px;
  color: var(--green);
  font-weight: 600;
  text-align: center;
}
.catalog-load-status .btn {
  min-height: 44px;
}
.catalog-initial-loading {
  grid-column: 1/-1;
  text-align: center;
  padding: 18px;
}
body:is([data-page='category'], [data-page='offers']) .uniform-category-branches,
body:is([data-page='category'], [data-page='offers']) .dog-panel-subcategories,
body:is([data-page='category'], [data-page='offers']) .bird-subcategories {
  min-width: 0;
  margin: 0;
  padding: 0 0 4px;
}
body:is([data-page='category'], [data-page='offers']) .uniform-category-branches .dog-panel-subgrid,
body:is([data-page='category'], [data-page='offers']) .dog-panel-subcategories .dog-panel-subgrid,
body:is([data-page='category'], [data-page='offers']) .bird-subcategories .dog-panel-subgrid,
body:is([data-page='category'], [data-page='offers']) .health-subcategories .dog-panel-subgrid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 1px;
  direction: inherit;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  justify-content: safe center;
}
body:is([data-page='category'], [data-page='offers'])
  .uniform-category-branches
  .dog-panel-subgrid::-webkit-scrollbar,
body:is([data-page='category'], [data-page='offers'])
  .dog-panel-subcategories
  .dog-panel-subgrid::-webkit-scrollbar,
body:is([data-page='category'], [data-page='offers'])
  .bird-subcategories
  .dog-panel-subgrid::-webkit-scrollbar,
body:is([data-page='category'], [data-page='offers'])
  .health-subcategories
  .dog-panel-subgrid::-webkit-scrollbar {
  display: none;
}
body[data-page='category']
  .department-page
  :is(
    .uniform-category-branches,
    .dog-panel-subcategories,
    .bird-subcategories,
    .health-subcategories
  ) {
  --category-circle-size: 60px;
}
body:is([data-page='category'], [data-page='offers']) .uniform-category-branches .dog-panel-subcard,
body:is([data-page='category'], [data-page='offers']) .dog-panel-subcategories .dog-panel-subcard,
body:is([data-page='category'], [data-page='offers']) .bird-subcategories .dog-panel-subcard,
body:is([data-page='category'], [data-page='offers']) .health-subcategories .dog-panel-subcard {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  min-width: 0;
  min-height: 0;
  padding: 5px 10px;
  overflow: visible;
  border: 1px solid #e4dac5;
  border-radius: 999px;
  background: #fffaf0;
  color: #1b3b2b;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  scroll-snap-align: start;
  transform: none;
  transition:
    color 0.16s ease,
    opacity 0.16s ease;
}
body[data-page='category']
  .department-page
  :is(
    .uniform-category-branches,
    .dog-panel-subcategories,
    .bird-subcategories,
    .health-subcategories
  )
  .dog-panel-subcard {
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  min-height: 0;
  justify-content: flex-start;
  gap: 10px;
  padding: 5px 10px;
}
body:is([data-page='category'], [data-page='offers'])
  .uniform-category-branches
  .dog-panel-subcard:hover,
body:is([data-page='category'], [data-page='offers'])
  .dog-panel-subcategories
  .dog-panel-subcard:hover,
body:is([data-page='category'], [data-page='offers']) .bird-subcategories .dog-panel-subcard:hover,
body:is([data-page='category'], [data-page='offers'])
  .health-subcategories
  .dog-panel-subcard:hover {
  border-color: #d5c59f;
  background: #f7f0e2;
  color: #1b3b2b;
  transform: none;
}
body:is([data-page='category'], [data-page='offers'])
  .uniform-category-branches
  .dog-panel-subcard:focus-visible,
body:is([data-page='category'], [data-page='offers'])
  .dog-panel-subcategories
  .dog-panel-subcard:focus-visible,
body:is([data-page='category'], [data-page='offers'])
  .bird-subcategories
  .dog-panel-subcard:focus-visible,
body:is([data-page='category'], [data-page='offers'])
  .health-subcategories
  .dog-panel-subcard:focus-visible {
  outline: 3px solid #bd9b54;
  outline-offset: 2px;
}
body:is([data-page='category'], [data-page='offers'])
  .uniform-category-branches
  .dog-panel-subcard
  .uniform-branch-photo,
body:is([data-page='category'], [data-page='offers'])
  .uniform-category-branches
  .dog-panel-subcard
  .health-subphoto,
body:is([data-page='category'], [data-page='offers'])
  .uniform-category-branches
  .dog-panel-subcard
  .bird-subphoto,
body:is([data-page='category'], [data-page='offers']) .dog-panel-subcategories .dog-panel-photo,
body:is([data-page='category'], [data-page='offers']) .bird-subcategories .bird-subphoto,
body:is([data-page='category'], [data-page='offers']) .health-subcategories .health-subphoto,
body:is([data-page='category'], [data-page='offers'])
  .uniform-category-branches
  .branch-card-arrow {
  display: none;
}
body:is([data-page='category'], [data-page='offers'])
  .uniform-category-branches
  .dog-panel-subcard
  .branch-card-icon,
body:is([data-page='category'], [data-page='offers'])
  .dog-panel-subcategories
  .dog-panel-subcard
  .branch-card-icon,
body:is([data-page='category'], [data-page='offers'])
  .bird-subcategories
  .dog-panel-subcard
  .branch-card-icon,
body:is([data-page='category'], [data-page='offers'])
  .health-subcategories
  .dog-panel-subcard
  .branch-card-icon {
  display: inline-flex;
  position: relative;
  flex: 0 0 var(--category-circle-size, 60px);
  align-items: center;
  justify-content: center;
  width: var(--category-circle-size, 60px);
  height: var(--category-circle-size, 60px);
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border: 2px solid #d4af37;
  border-radius: 50%;
  background: #fbf6ec;
  color: #1b3b2b;
  transition: box-shadow 0.16s ease;
}
body:is([data-page='category'], [data-page='offers'])
  .uniform-category-branches
  .dog-panel-subcard:hover
  .branch-card-icon,
body:is([data-page='category'], [data-page='offers'])
  .dog-panel-subcategories
  .dog-panel-subcard:hover
  .branch-card-icon,
body:is([data-page='category'], [data-page='offers'])
  .bird-subcategories
  .dog-panel-subcard:hover
  .branch-card-icon,
body:is([data-page='category'], [data-page='offers'])
  .health-subcategories
  .dog-panel-subcard:hover
  .branch-card-icon {
  box-shadow: 0 2px 8px #1b3b2b20;
}
body:is([data-page='category'], [data-page='offers'])
  .uniform-category-branches
  .branch-card-icon
  svg,
body:is([data-page='category'], [data-page='offers'])
  .dog-panel-subcategories
  .branch-card-icon
  svg,
body:is([data-page='category'], [data-page='offers']) .bird-subcategories .branch-card-icon svg,
body:is([data-page='category'], [data-page='offers']) .health-subcategories .branch-card-icon svg {
  width: 28px;
  height: 28px;
}
body[data-page='category']
  .department-page
  :is(
    .uniform-category-branches,
    .dog-panel-subcategories,
    .bird-subcategories,
    .health-subcategories
  )
  .branch-card-icon
  svg {
  width: 38px;
  height: 38px;
}
body:is([data-page='category'], [data-page='offers'])
  .uniform-category-branches
  .branch-card-icon
  .branch-thumb,
body:is([data-page='category'], [data-page='offers'])
  .dog-panel-subcategories
  .branch-card-icon
  .branch-thumb,
body:is([data-page='category'], [data-page='offers'])
  .bird-subcategories
  .branch-card-icon
  .branch-thumb,
body:is([data-page='category'], [data-page='offers'])
  .health-subcategories
  .branch-card-icon
  .branch-thumb {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  padding: 0;
  border-radius: 50%;
  background: #fbf6ec;
  image-rendering: -webkit-optimize-contrast;
}
body[data-page='category']
  .department-page
  :is(
    .uniform-category-branches,
    .dog-panel-subcategories,
    .bird-subcategories,
    .health-subcategories
  )
  .branch-card-icon
  .branch-thumb {
  box-sizing: border-box;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
  padding: 0;
}
body:is([data-page='category'], [data-page='offers'])
  .uniform-category-branches
  .dog-panel-subcard
  strong,
body:is([data-page='category'], [data-page='offers'])
  .dog-panel-subcategories
  .dog-panel-subcard
  strong,
body:is([data-page='category'], [data-page='offers']) .bird-subcategories .dog-panel-subcard strong,
body:is([data-page='category'], [data-page='offers'])
  .health-subcategories
  .dog-panel-subcard
  strong {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: #173b2b;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: start;
  overflow-wrap: normal;
  white-space: nowrap;
}
body[data-page='category']
  .department-page
  :is(
    .uniform-category-branches,
    .dog-panel-subcategories,
    .bird-subcategories,
    .health-subcategories
  )
  .dog-panel-subcard
  strong {
  max-width: none;
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap;
  overflow-wrap: normal;
}
body[data-page='category'] .department-page {
  background-color: #f8f4e9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='156' viewBox='0 0 176 156'%3E%3Cg fill='%237b7953' fill-opacity='.075'%3E%3Cg transform='translate(24 30) rotate(-24)'%3E%3Cellipse cx='0' cy='8' rx='7' ry='9'/%3E%3Cellipse cx='-8' cy='-5' rx='3.2' ry='4.4'/%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='4.4'/%3E%3Cellipse cx='8' cy='-5' rx='3.2' ry='4.4'/%3E%3C/g%3E%3Cg transform='translate(140 112) rotate(20)'%3E%3Cellipse cx='0' cy='8' rx='7' ry='9'/%3E%3Cellipse cx='-8' cy='-5' rx='3.2' ry='4.4'/%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='4.4'/%3E%3Cellipse cx='8' cy='-5' rx='3.2' ry='4.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}
body[data-page='category'] .department-page .crumb {
  margin: 0 0 6px;
  padding-block: 0;
  font-size: 12px;
}
body[data-page='category'] .department-page .catalog-content > .page-heading {
  margin: 0 auto 8px;
  padding: 4px 12px 8px;
  color: #123b29;
  font-size: clamp(25px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.18;
  text-align: center;
  background: linear-gradient(180deg, #f3eddc 0%, #fbf6ec 100%);
  border-bottom: 1px solid #c7a452;
}
body[data-page='category'] .department-page .uniform-category-branches,
body[data-page='category'] .department-page .dog-panel-subcategories,
body[data-page='category'] .department-page .bird-subcategories,
body[data-page='category'] .department-page .health-subcategories {
  margin-block: 0;
}
body[data-page='category'] .department-page .branch-card-icon {
  border-width: 2px;
}
body[data-page='category'] .department-page .controls.category-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 6px;
  padding: 4px 0;
  border: 0;
  background: transparent;
}
body[data-page='category'] .department-page .controls.category-controls .catalog-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
body[data-page='category'] .department-page .controls.category-controls .filter-toggle,
body[data-page='category'] .department-page .controls.category-controls .catalog-sort {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  height: 48px;
}
body[data-page='category'] .department-page .controls.category-controls .filter-toggle {
  min-width: 44px;
  padding-inline: 10px;
  border: 1px solid #a8873e;
  border-radius: 9px;
  background: #bd9a4c;
  color: #173b2b;
  font-size: 14px;
  font-weight: 700;
}
body[data-page='category'] .department-page .controls.category-controls > .catalog-count {
  flex: 0 0 auto;
  margin-inline-start: auto;
  gap: 5px;
  font-size: 13px;
}
body[data-page='category'] .department-page .controls.category-controls > .catalog-count svg {
  width: 16px;
  height: 16px;
}
body[data-page='category'] .department-page .controls.category-controls .catalog-sort {
  min-width: 48px;
  gap: 4px;
  padding-inline: 8px;
  border-color: #d8c9a8;
  border-radius: 9px;
  background: #fffaf0;
  font-size: 13px;
  white-space: nowrap;
}
body[data-page='category'] .department-page .controls.category-controls .catalog-sort svg {
  width: 17px;
  height: 17px;
}
body[data-page='category'] .department-page .catalog-sort select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 16px;
}
body[data-page='category'] .department-page .catalog-brand-strip {
  margin-top: 0;
  margin-bottom: 6px;
}
body[data-page='category'] .department-page #results {
  margin-top: 0;
}
.catalog-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 8px;
}
.catalog-filter-chip,
.catalog-clear-filters {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid #d9c996;
  border-radius: 999px;
  background: #fffaf0;
  color: #294832;
  font-size: 12px;
  line-height: 1.3;
}
.catalog-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.catalog-filter-chip span {
  color: #94752f;
  font-size: 16px;
}
.catalog-clear-filters {
  border-color: transparent;
  background: transparent;
  color: #7d5d1e;
  text-decoration: underline;
}
body[data-page='category'] .department-page #results > .product {
  border-color: #e2dac8;
  box-shadow: 0 2px 10px #1734240b;
}
body:is([data-page='category'], [data-page='offers'])
  .uniform-category-branches
  .dog-panel-subcard.active,
body:is([data-page='category'], [data-page='offers'])
  .uniform-category-branches
  .dog-panel-subcard[aria-pressed='true'],
body:is([data-page='category'], [data-page='offers'])
  .dog-panel-subcategories
  .dog-panel-subcard.active,
body:is([data-page='category'], [data-page='offers'])
  .dog-panel-subcategories
  .dog-panel-subcard[aria-pressed='true'],
body:is([data-page='category'], [data-page='offers']) .bird-subcategories .dog-panel-subcard.active,
body:is([data-page='category'], [data-page='offers'])
  .bird-subcategories
  .dog-panel-subcard[aria-pressed='true'],
body:is([data-page='category'], [data-page='offers'])
  .health-subcategories
  .dog-panel-subcard.active,
body:is([data-page='category'], [data-page='offers'])
  .health-subcategories
  .dog-panel-subcard[aria-pressed='true'] {
  border-color: #a78643;
  background: #ead9af;
  color: #173b2b;
  box-shadow: 0 1px 4px #604a1c1c;
}
body:is([data-page='category'], [data-page='offers'])
  .uniform-category-branches
  .dog-panel-subcard.active
  .branch-card-icon,
body:is([data-page='category'], [data-page='offers'])
  .uniform-category-branches
  .dog-panel-subcard[aria-pressed='true']
  .branch-card-icon,
body:is([data-page='category'], [data-page='offers'])
  .dog-panel-subcategories
  .dog-panel-subcard.active
  .branch-card-icon,
body:is([data-page='category'], [data-page='offers'])
  .dog-panel-subcategories
  .dog-panel-subcard[aria-pressed='true']
  .branch-card-icon,
body:is([data-page='category'], [data-page='offers'])
  .bird-subcategories
  .dog-panel-subcard.active
  .branch-card-icon,
body:is([data-page='category'], [data-page='offers'])
  .bird-subcategories
  .dog-panel-subcard[aria-pressed='true']
  .branch-card-icon,
body:is([data-page='category'], [data-page='offers'])
  .health-subcategories
  .dog-panel-subcard.active
  .branch-card-icon,
body:is([data-page='category'], [data-page='offers'])
  .health-subcategories
  .dog-panel-subcard[aria-pressed='true']
  .branch-card-icon {
  border-color: #1b3b2b;
  box-shadow: 0 0 0 2px #d4af3760;
}
@media (max-width: 700px) {
  body[data-page='category']
    .department-page
    :is(
      .uniform-category-branches,
      .dog-panel-subcategories,
      .bird-subcategories,
      .health-subcategories
    ) {
    --category-circle-size: 60px;
  }
  body[data-page='category']
    .department-page
    :is(
      .uniform-category-branches,
      .dog-panel-subcategories,
      .bird-subcategories,
      .health-subcategories
    )
    .dog-panel-subgrid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 3px 10px;
  }
  body[data-page='category']
    .department-page
    :is(
      .uniform-category-branches,
      .dog-panel-subcategories,
      .bird-subcategories,
      .health-subcategories
    )
    .dog-panel-subcard {
    flex-basis: auto;
    width: max-content;
  }
  body[data-page='category']
    .department-page
    :is(
      .uniform-category-branches,
      .dog-panel-subcategories,
      .bird-subcategories,
      .health-subcategories
    )
    .dog-panel-subcard
    strong {
    font-size: 14px;
  }
}
@media (max-width: 380px) {
  body[data-page='category'] .department-page {
    padding-inline: 8px;
  }
}
body:is([data-page='category'], [data-page='offers']) .cat-sections {
  padding: 4px 0 8px;
}
body:is([data-page='category'], [data-page='offers']) .cat-sections-heading {
  margin: 0 0 6px;
}
body:is([data-page='category'], [data-page='offers']) .cat-sections-heading h2 {
  font-size: 16px;
}
body:is([data-page='category'], [data-page='offers']) .cat-sections-heading p {
  display: none;
}
body:is([data-page='category'], [data-page='offers']) .cat-subgrid {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 1px 7px;
  direction: inherit;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
body:is([data-page='category'], [data-page='offers']) .cat-subcard {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #d9ceb9;
  border-radius: 999px;
  background: #f6f0e3;
  color: #173b2b;
  box-shadow: none;
  font-size: 13px;
  white-space: nowrap;
  scroll-snap-align: start;
  outline: 0;
  transform: none;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}
body:is([data-page='category'], [data-page='offers']) .cat-subphoto,
body:is([data-page='category'], [data-page='offers']) .cat-subarrow {
  display: none;
}
body:is([data-page='category'], [data-page='offers']) .cat-subcard strong {
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
body:is([data-page='category'], [data-page='offers']) .cat-subcard.active,
body:is([data-page='category'], [data-page='offers']) .cat-subcard[aria-pressed='true'] {
  border-color: #a78643;
  background: #e9d7a9;
  color: #2c4432;
}
body:is([data-page='category'], [data-page='offers']) .catalog-brand-strip {
  min-width: 0;
  margin: 2px 0 10px;
}
body:is([data-page='category'], [data-page='offers']) .catalog-brand-strip h2 {
  margin: 0 0 7px;
  font-size: 14px;
  font-weight: 700;
}
body:is([data-page='category'], [data-page='offers']) .catalog-brand-row {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 1px 1px 7px;
  scrollbar-width: thin;
}
body:is([data-page='category'], [data-page='offers']) .catalog-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf1;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  direction: ltr;
}
body:is([data-page='category'], [data-page='offers']) .catalog-brand[aria-pressed='true'],
.italian-brand-strip .catalog-brand[aria-current='page'] {
  border-color: var(--gold);
  background: #f2e5ca;
}
.italian-brand-strip .catalog-brand {
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  font-size: 1rem;
}
body:is([data-page='category'], [data-page='offers']) .catalog-brand img {
  display: block;
  width: auto;
  max-width: 116px;
  height: 25px;
  object-fit: contain;
}
body:is([data-page='category'], [data-page='offers']) #results {
  min-width: 0;
}
body:is([data-page='category'], [data-page='offers']) .catalog-search {
  margin: 0 0 12px;
}
body[data-page='product'] .gallery {
  display: block;
  min-width: 0;
}
body[data-page='product'] .gallery-slides {
  display: flex;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pan-y pinch-zoom;
  direction: ltr;
}
body[data-page='product'] .gallery-slides::-webkit-scrollbar {
  display: none;
}
body[data-page='product'] .gallery-slide {
  position: relative;
  display: block;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  pointer-events: auto;
}
body[data-page='product'] .gallery-slide > img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
body[data-page='product'] .gallery-slide > span {
  pointer-events: none;
}
body[data-page='product'] .zoom-image {
  width: 100%;
}
body[data-page='product'] .gallery-thumbnails {
  width: 100%;
  min-width: 0;
}
body[data-page='product'] .zoom-image img {
  object-fit: contain;
}
body[data-page='product'] .gallery-thumbnails {
  display: flex;
  gap: 8px;
  max-width: 100%;
  margin-top: 10px;
  overflow-x: auto;
  padding: 2px 1px 5px;
}
body[data-page='product'] .gallery-thumbnails button {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf1;
}
body[data-page='product'] .gallery-thumbnails button[aria-pressed='true'] {
  border-color: var(--gold);
}
body[data-page='product'] .gallery-thumbnails img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body[data-page='product'] .detail-info .detail-category {
  display: inline-block;
  margin: 2px 0 8px;
  color: #806127;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body[data-page='product'] .detail-info .detail-description {
  margin: 4px 0 12px;
  line-height: 1.65;
}
body[data-page='product'] .detail-info .detail-stock {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #526c47;
}
body[data-page='product'] .detail-info .detail-discount {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 5px;
  background: #f2e7d0;
  color: #77581f;
  font-size: 12px;
  font-weight: 700;
}
body[data-page='product'] .detail-info .detail-favorite {
  width: 100%;
  margin: 10px 0;
  background: transparent;
  color: var(--green);
  border: 1px solid var(--line);
}
body[data-page='product'] .components-section {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
body[data-page='product'] .components-section summary {
  padding: 12px 2px;
  font-weight: 700;
  cursor: pointer;
}
body[data-page='product'] .components-section .components-wrap {
  max-width: 100%;
  overflow-x: auto;
}
@media (min-width: 600px) and (max-width: 1024px) {
  body:is([data-page='category'], [data-page='offers']) .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 599px) {
  body[data-page='category'] .department-page .controls.category-controls,
  body[data-page='category'] .department-page .controls.category-controls .catalog-tools {
    gap: 8px;
  }
  body[data-page='category'] .department-page .controls.category-controls .sort-caption {
    display: none;
  }
  body:is([data-page='category'], [data-page='offers']) .category-hero-frame {
    height: 78px;
    margin-bottom: 6px;
    padding: 6px 10px;
    border-radius: 8px;
  }
  body[data-page='category'] .category-hero-frame {
    height: clamp(140px, 35vw, 180px);
    max-height: 180px;
  }
  body[data-page='category'] .category-hero-frame.category-hero-frame--original-artwork {
    height: auto;
    max-height: none;
    margin: 0 0 12px;
    padding: 0;
    border-radius: 0;
  }
  body:is([data-page='category'], [data-page='offers']) .category-hero-frame h1 {
    font-size: clamp(19px, 5.5vw, 24px);
    line-height: 1.12;
  }
  body:is([data-page='category'], [data-page='offers']) .catalog-brand-strip {
    margin-bottom: 6px;
  }
  body:is([data-page='category'], [data-page='offers']) .catalog-brand {
    min-width: 84px;
    min-height: 44px;
    padding: 5px 9px;
    font-size: 12px;
  }
  body:is([data-page='category'], [data-page='offers']) .catalog-brand img {
    max-width: 98px;
    height: 22px;
  }
  body[data-page='product'] .gallery-thumbnails button {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
  }
}

/* Checkout owns its layout instead of inheriting the narrow account-form rules. */
.page.checkout-page {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding: 26px 32px 36px;
}
.checkout-heading {
  margin-bottom: 16px;
}
.checkout-heading h1 {
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.15;
  margin: 4px 0 0;
  letter-spacing: -0.5px;
}
.checkout-kicker {
  color: #9a762f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.checkout-page .checkout-layout {
  display: grid;
  width: 100%;
  max-width: none;
  margin: 0;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.8fr);
  gap: 16px;
  align-items: start;
}
.checkout-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.checkout-panel,
.checkout-summary {
  border: 1px solid #dcd7bd;
  border-radius: 13px;
  background: #fffdf7;
  box-shadow: 0 3px 12px #263a270a;
  padding: 17px;
}
.checkout-panel h2,
.checkout-summary h2 {
  font-size: 18px;
  margin: 0 0 12px;
  line-height: 1.35;
}
.checkout-panel h2 .checkout-step,
.checkout-summary h2 .checkout-step {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-inline-end: 8px;
  border: 1px solid #d8c783;
  border-radius: 50%;
  background: #f4efd9;
  color: #59623b;
  font-size: 13px;
  font-weight: 700;
  vertical-align: middle;
}
.checkout-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 0;
}
.checkout-field-wide {
  grid-column: 1/-1;
}
.checkout-page .field {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.checkout-page .field:last-child {
  margin-bottom: 0;
}
.checkout-page .field input,
.checkout-page .field select,
.checkout-page .field textarea {
  box-sizing: border-box;
  width: 100%;
  margin-top: 5px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d9cfbb;
  border-radius: 9px;
  background: #fffaf0;
  color: #173424;
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
}
.checkout-page .field input:focus,
.checkout-page .field select:focus,
.checkout-page .field textarea:focus {
  border-color: #ad8b43;
  outline: 3px solid #d9bd7950;
  outline-offset: 1px;
}
.checkout-page .field select {
  cursor: pointer;
}
.checkout-page .field textarea {
  min-height: 44px;
  height: 44px;
  resize: vertical;
}
.checkout-page .field textarea:focus {
  height: 80px;
}
.checkout-payment {
  padding-bottom: 15px;
}
.checkout-page .payment-help {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-inline-start: 3px solid #b5944b;
  border-radius: 4px 8px 8px 4px;
  background: #f5efdf;
  color: #5e594b;
  font-size: 12px;
  line-height: 1.6;
}
.checkout-summary {
  position: sticky;
  top: 14px;
  background: #f7f0e2;
}
.checkout-summary h2 {
  margin-bottom: 10px;
}
.checkout-item-count {
  margin: -3px 0 7px;
  color: #66634f;
  font-size: 13px;
}
.checkout-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 0 9px;
  border-bottom: 1px solid #ded2b9;
  font-size: 14px;
}
.checkout-subtotal strong {
  font-size: 19px;
  direction: ltr;
  white-space: nowrap;
}
.checkout-items {
  margin-top: 10px;
  border-bottom: 1px solid #ded2b9;
}
.checkout-items > summary {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #364332;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.checkout-items > summary::-webkit-details-marker {
  display: none;
}
.checkout-items > summary::after {
  content: '';
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid #8c7844;
  border-bottom: 2px solid #8c7844;
  transform: rotate(45deg);
  margin-inline-end: 3px;
  margin-top: -4px;
}
.checkout-items[open] > summary::after {
  transform: rotate(225deg);
  margin-top: 4px;
}
.checkout-items-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0 0 11px;
  list-style: none;
}
.checkout-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}
.checkout-item-image-link {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e1dac4;
  border-radius: 8px;
  background: #fffdf7;
}
.checkout-item-image-link img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.checkout-item > div {
  display: grid;
  min-width: 0;
  gap: 3px;
  flex: 1 1 auto;
}
.checkout-item > div > * {
  overflow-wrap: anywhere;
}
.checkout-item small {
  color: #686650;
  font-size: 12px;
}
.checkout-item strong {
  flex: 0 0 auto;
  font-size: 13px;
  white-space: nowrap;
  direction: ltr;
}
.checkout-store-note {
  font-size: 12px;
  line-height: 1.7;
  color: #5f5b4e;
  margin: 10px 0 12px;
}
.checkout-submit {
  width: 100%;
  min-height: 46px;
  font-size: 15px;
}
.delivery-notice {
  border: 1px solid #d9c89e;
  border-radius: 10px;
  background: #fbf4e4;
  color: #263d2d;
  padding: 13px 15px;
  line-height: 1.5;
}
.delivery-notice p {
  margin: 0;
}
.delivery-notice-main {
  font-size: 14px;
  font-weight: 700;
}
.delivery-notice .delivery-notice-local {
  font-size: 13px;
  font-weight: 600;
  margin-top: 3px;
  color: #85662b;
}
.delivery-notice .delivery-notice-note {
  font-size: 12px;
  color: #6d6758;
  margin-top: 7px;
}
.delivery-notice-home {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 20px;
  margin: 17px 40px 6px;
  padding: 13px 18px;
  background: #f7f0e2;
}
.delivery-notice-home .delivery-notice-note {
  grid-column: 1/-1;
  border-top: 1px solid #e5d9bd;
  padding-top: 6px;
}
@media (max-width: 900px) {
  .page.checkout-page {
    padding: 22px 20px 30px;
  }
  .checkout-page .checkout-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .checkout-summary {
    position: static;
  }
  .checkout-summary h2 {
    margin-bottom: 9px;
  }
  .checkout-panel,
  .checkout-summary {
    padding: 16px;
  }
}
@media (max-width: 760px) {
  .delivery-notice-home {
    margin: 12px 15px 4px;
    grid-template-columns: 1fr;
    padding: 12px 14px;
  }
  .delivery-notice-home .delivery-notice-note {
    grid-column: auto;
  }
}
@media (max-width: 430px) {
  .page.checkout-page {
    padding: 18px 12px 26px;
  }
  .checkout-heading {
    margin-bottom: 12px;
  }
  .checkout-heading h1 {
    font-size: clamp(25px, 7vw, 30px);
  }
  .checkout-page .checkout-layout {
    gap: 10px;
  }
  .checkout-form {
    gap: 10px;
  }
  .checkout-panel,
  .checkout-summary {
    padding: 14px;
    border-radius: 12px;
  }
  .checkout-fields {
    column-gap: 9px;
  }
  .checkout-panel h2,
  .checkout-summary h2 {
    font-size: 17px;
  }
}
img[src*='citypaws-logo-circle'],
img[src*='citypaws-emblem-v8'],
.startup-logo,
.pwa-app-icon{
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.pwa-app-icon {
  aspect-ratio: 1;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  body:not([data-page='admin']) .chat-panel {
    z-index: 26;
  }
}

/* Preserve the existing compact footer composition on tablet widths. */
@media (min-width: 768px) {
  body:not([data-page='admin']) .support-launcher.is-over-footer,
  body:not([data-page='admin']) .support-launcher.is-over-purchase {
    visibility: hidden;
    pointer-events: none;
  }
}

/* Tablet and desktop storefront refinements. Keep all presentation changes
   above the phone breakpoint so existing small-screen behavior stays intact. */
@media (min-width: 768px) {
  body[data-page='home'] main {
    padding-inline: 24px;
  }

  body[data-page='home'] .section:has(.category-grid) {
    padding-top: 2px;
  }

  body[data-page='home'] .section:has(.category-grid) .title {
    margin-bottom: 2px;
  }

  body[data-page='home'] .section:has(.category-grid) .title h2 {
    line-height: 1.25;
  }

  body[data-page='home'] .hero-new {
    --cp-hero-max-width: 960px;
    position: relative;
    width: min(100%, 960px);
    height: auto;
    min-height: 0;
    margin-inline: auto;
    overflow: visible;
    aspect-ratio: auto;
    background: transparent;
  }

  body[data-page='home'] .hero-photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-width: 0;
  }

  body[data-page='home'] .hero-photo > img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  body[data-page='home'] .category-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 14px 12px;
    width: min(100%, 1120px);
    margin-inline: auto;
    padding: 0 0 22px;
    overflow: visible;
    direction: inherit;
  }

  body[data-page='home'] .category-card {
    min-width: 0;
    padding: 0;
    text-align: center;
    scroll-snap-align: none;
  }

  body[data-page='home'] .category-grid .category-card img {
    display: block;
    width: clamp(88px, 7vw, 100px);
    height: auto;
    max-width: 100px;
    margin-inline: auto;
    object-fit: cover;
  }

  body[data-page='home'] .category-grid .category-card strong {
    display: block;
    padding: 8px 2px 0;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.35;
  }

  body:not([data-page='admin']) .products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  body:not([data-page='admin']) .product .product-image {
    width: 100%;
    height: clamp(130px, 13vw, 165px);
    object-fit: contain;
  }

  body:not([data-page='admin']) .product h3 {
    display: -webkit-box;
    min-height: 2.6em;
    overflow: hidden;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page='account'] .account-authenticated {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
    gap: 12px 18px;
  }

  body[data-page='account'] .account-authenticated > h1,
  body[data-page='account'] .account-authenticated > .account-head,
  body[data-page='account'] .account-authenticated > .account-list {
    grid-column: 1 / -1;
  }

  body[data-page='account'] .account-authenticated > h1 {
    margin-bottom: 4px;
  }

  body[data-page='account'] .account-authenticated > .account-head {
    min-height: 108px;
    margin-bottom: 2px;
  }

  body[data-page='account'] .account-authenticated > .account-list {
    margin-bottom: 2px;
  }

  body[data-page='account'] .account-authenticated > .account-orders {
    grid-column: 1;
    align-self: stretch;
    margin: 0;
  }

  body[data-page='account'] .account-authenticated > .account-details-grid {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0;
  }

  body[data-page='account'] .account-authenticated > .notice,
  body[data-page='account'] .account-authenticated > [data-customer-logout] {
    grid-column: 1 / -1;
  }

  body[data-page='account'] .account-authenticated > [data-customer-logout] {
    justify-self: end;
  }

  body[data-page='favorites'] #results .catalog-empty {
    width: min(100%, 640px);
    margin: 12px auto;
    padding: 30px clamp(22px, 4vw, 40px);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    background: #f7f0e2;
  }

  body[data-page='favorites'] #results .catalog-empty h2 {
    margin: 0 auto 10px;
    color: var(--cp-olive);
    line-height: 1.35;
  }

  body[data-page='favorites'] #results .catalog-empty p {
    max-width: 48ch;
    margin-inline: auto;
    color: var(--cp-muted);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body:not([data-page='admin']) .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page='home'] .products.home-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body[data-page='home'] .category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body[data-page='home'] main {
    width: min(100%, 1280px);
    max-width: 1280px;
    margin-inline: auto;
    box-sizing: border-box;
  }

  body[data-page='category'] .page,
  body[data-page='search'] .page,
  body[data-page='favorites'] .page {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding: 24px;
    box-sizing: border-box;
  }

  body[data-page='account'] .account {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding: 24px;
    box-sizing: border-box;
  }

  body[data-page='product'] .page:has(.detail) {
    width: min(100%, 1100px);
    max-width: 1100px;
    margin-inline: auto;
    padding: 24px 0;
    box-sizing: border-box;
  }

  body[data-page='product'] .detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    direction: ltr;
  }

  html[dir='rtl'] body[data-page='product'] .detail-info {
    direction: rtl;
  }

  html[dir='ltr'] body[data-page='product'] .detail-info {
    direction: ltr;
  }

  body[data-page='product'] .detail .sizes {
    gap: 8px;
    margin: 16px 0;
  }

  body[data-page='product'] .detail .sizes button {
    padding: 9px 14px;
  }

  body[data-page='product'] .detail .qty button {
    padding: 8px;
  }

  body[data-page='product'] .detail .purchase > .btn {
    padding: 10px 14px;
  }

  .chat-panel {
    width: 380px;
    max-width: calc(100vw - 32px);
    height: min(520px, calc(100dvh - 120px));
    bottom: 24px;
    border-radius: 16px;
  }

  #siteDrawer {
    max-width: 340px;
  }

  body[data-page='home'] :is(.home-brands-grid, .home-product-grid) {
    gap: 16px;
  }
  body[data-page='home'] .home-brand-card {
    flex-basis: calc((100% - 64px) / 5);
    min-width: 0;
  }
  body:not([data-page='admin']) .chat-panel {
    inset-inline: auto;
    right: 24px;
    left: auto;
    bottom: 24px;
  }
}

/* Section headings stay centered independently of the language direction. */
@media (min-width: 768px) {
}

/* Tablet footer gives the identity room and keeps contacts on their own row. */
@media (min-width: 768px) and (max-width: 1023px) {
}

/* Desktop footer: centered identity, navigation, then a compact contact row. */
@media (min-width: 1024px) {
}

.mobile-hero-new > .desktop-hero-shop {
  display: none;
}

.hero-artwork > picture {
  display: contents;
}

/* Restore the approved landscape composition from before the editorial/video
   hero experiment. Only the products promotion uses ambient media and copy. */
@media (min-width: 768px) {
  body[data-page='home'] .mobile-hero-new:has(.hero-artwork) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1280px;
    height: auto;
    aspect-ratio: 3;
    min-height: 0;
    margin: 0 auto;
    overflow: hidden;
    isolation: isolate;
    border-radius: 14px;
    background: var(--green);
  }
  body[data-page='home'] .mobile-hero-new > .hero-artwork {
    position: relative;
    height: auto;
    width: 100%;
    aspect-ratio: 3;
    flex: 1 1 auto;
    overflow: hidden;
    border-radius: 10px;
  }
  body[data-page='home'] .mobile-hero-new > .hero-artwork img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    transform: none;
  }
  body[data-page='home'] .desktop-hero-shop {
    display: inline-flex;
    position: absolute;
    left: 69%;
    transform: translateX(-50%);
    bottom: 7%;
    min-height: 44px;
    max-width: 26%;
    padding: 8px 16px;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.25;
    align-items: center;
    justify-content: center;
    color: #092e20;
    font-weight: 700;
    text-align: center;
  }
}

/* A quiet, premium split: the existing artwork remains whole and independent
   of the live, localized copy and its single shopping action. */
body[data-page='home']:has(.hero-editorial) .hero-new {
  display: none !important;
}

body[data-page='home'] .mobile-hero-new.hero-editorial {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: relative;
  width: min(100% - 24px, 1280px);
  height: auto !important;
  min-height: 0;
  margin: 10px auto 0;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: auto !important;
  border: 1px solid #e9dfcb;
  border-radius: 18px;
  background: linear-gradient(120deg, #0c3023, #194b36);
  box-shadow: 0 14px 36px rgb(49 52 35 / 9%);
}

body[data-page='home'] .mobile-hero-new.hero-editorial > .hero-artwork {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1234 / 887;
  overflow: hidden;
  border-radius: 0;
  background: #174d37;
}

body[data-page='home'] .mobile-hero-new.hero-editorial .hero-artwork img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none;
  object-fit: initial !important;
  transform: translateY(-10.29%);
}

body[data-page='home'] .hero-editorial-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 18px clamp(18px, 5vw, 30px) 20px;
  color: #faf7f2;
  text-align: start;
  font-family: 'Heebo', 'Tajawal', sans-serif;
}

body[data-page='home'] .hero-editorial-brand {
  margin: 0;
  color: #e5c47d;
  font-family: 'Montserrat', 'Heebo', sans-serif;
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.25;
}

body[data-page='home'] .hero-editorial-content h1 {
  max-width: 18ch;
  margin: 0;
  color: #faf7f2;
  font-family: 'Heebo', 'Tajawal', sans-serif;
  font-size: clamp(1.65rem, 5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.22;
}

body[data-page='home'] .hero-editorial[lang='ar'] .hero-editorial-content h1,
body[data-page='home'] .hero-editorial[lang='ar'] .hero-editorial-subtitle {
  font-family: 'Tajawal', 'Heebo', sans-serif;
}

body[data-page='home'] .hero-editorial[lang='en'] .hero-editorial-content h1,
body[data-page='home'] .hero-editorial[lang='en'] .hero-editorial-subtitle {
  font-family: 'Montserrat', 'Heebo', sans-serif;
}

body[data-page='home'] .hero-editorial-subtitle {
  max-width: 42ch;
  margin: 0;
  color: #e2eadd;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.55;
}

body[data-page='home'] .hero-brand-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

body[data-page='home'] .hero-brand-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 5px 12px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 999px;
  background: rgb(255 255 255 / 12%);
  color: #f5f5f5;
  font-family: 'Montserrat', 'Heebo', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

body[data-page='home'] .hero-editorial-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 46px;
  margin-top: 2px;
  padding: 10px 19px;
  border: 1px solid #c2a364;
  border-radius: 7px;
  background: #c8a761;
  color: #183c2c;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition:
    transform 160ms ease,
    opacity 160ms ease;
}

body[data-page='home'] .hero-editorial-cta:hover {
  transform: translateY(-2px);
}

body[data-page='home'] .hero-editorial-cta svg {
  flex: 0 0 auto;
}

body[data-page='home'] .hero-editorial[dir='rtl'] .hero-editorial-cta svg {
  transform: rotate(180deg);
}

@media (min-width: 768px) {
  body[data-page='home'] .mobile-hero-new.hero-editorial {
    flex-direction: row-reverse;
    align-items: center;
    min-height: 0;
    padding: 14px;
    gap: clamp(12px, 2.2vw, 28px);
  }

  body[data-page='home'] .mobile-hero-new.hero-editorial > .hero-artwork {
    flex: 1.2 1 0;
    width: auto;
    min-width: 0;
  }

  body[data-page='home'] .hero-editorial-content {
    flex: 1 1 0;
    min-width: 0;
    gap: 8px;
    padding: 10px 12px;
  }
}

@media (min-width: 1024px) {
  body[data-page='home'] .mobile-hero-new.hero-editorial {
    min-height: 320px;
    padding: 20px;
    gap: clamp(12px, 2.6vw, 38px);
  }

  body[data-page='home'] .mobile-hero-new.hero-editorial > .hero-artwork {
    flex: 1.45 1 0;
    aspect-ratio: 3 / 1;
    border-radius: 11px;
  }

  body[data-page='home'] .mobile-hero-new.hero-editorial .hero-artwork img {
    transform: none;
  }

  body[data-page='home'] .hero-editorial-content {
    flex: 1 1 0;
    min-width: 0;
    gap: 11px;
    padding: 12px clamp(10px, 2vw, 26px);
  }

  body[data-page='home'] .hero-editorial-content h1 {
    font-size: clamp(1.9rem, 2.2vw, 2.2rem);
  }
}

@media (max-width: 380px) {
  body[data-page='home'] .hero-editorial-content {
    gap: 7px;
    padding: 15px 16px 17px;
  }

  body[data-page='home'] .hero-editorial-content h1 {
    font-size: 1.5rem;
  }

  body[data-page='home'] .hero-editorial-subtitle {
    font-size: 0.91rem;
  }
}

/* Shared media layer: real text and controls always remain above the media. */
.ambient-banner {
  --banner-overlay: 0.38;
  position: relative;
  isolation: isolate;
}
.ambient-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(3 24 16 / var(--banner-overlay)), rgb(3 24 16 / 8%));
}
.ambient-banner[dir='rtl']::after {
  background: linear-gradient(270deg, rgb(3 24 16 / var(--banner-overlay)), rgb(3 24 16 / 8%));
}
.ambient-banner video,
.ambient-banner .ambient-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ambient-banner video {
  opacity: 0;
  transition: opacity 250ms ease;
}
.ambient-banner.ambient-playing video {
  opacity: 1;
}
.ambient-banner .hero-editorial-content,
.ambient-banner .home-promo-copy,
.ambient-banner .home-promo-product-copy {
  position: relative;
  z-index: 2;
}
.ambient-banner .home-promo-product-copy {
  position: absolute;
}
.ambient-toggle {
  position: absolute;
  z-index: 3;
  inset-inline-end: 12px;
  bottom: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #d4af37;
  border-radius: 999px;
  background: #103a2c;
  color: #faf7f2;
  font: inherit;
  cursor: pointer;
}
.ambient-toggle:focus-visible {
  outline: 3px solid #f4d48a;
  outline-offset: 3px;
}
body[data-page='home'] .hero-editorial.has-custom-hero-media .hero-artwork img {
  position: absolute;
  inset: 0;
  height: 100% !important;
  object-fit: cover !important;
  transform: none;
}
/* The artwork remains undistorted. Copy is layered on a protective gradient,
   rather than baking language, brand tags or a button into a media file. */
body[data-page='home'] .hero-editorial {
  padding: 0;
  min-height: 430px;
}
body[data-page='home'] .hero-editorial > .hero-artwork {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
body[data-page='home'] .hero-editorial .hero-editorial-content {
  flex: 0 1 48%;
  margin-inline-end: auto;
  padding: 28px;
  background: linear-gradient(90deg, #0b3023ed, #0b3023cc, transparent);
}
body[data-page='home'] .hero-editorial[dir='rtl'] .hero-editorial-content {
  background: linear-gradient(270deg, #0b3023ed, #0b3023cc, transparent);
}
body[data-page='home'] .hero-editorial .hero-artwork picture img {
  left: auto;
  right: 0;
  width: 65% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none;
}
body[data-page='home'] .hero-editorial[dir='rtl'] .hero-artwork picture img {
  left: 0;
  right: auto;
}
@media (max-width: 1023px) {
  body[data-page='home'] .hero-editorial {
    min-height: 0;
  }
  body[data-page='home'] .hero-editorial .hero-editorial-content {
    width: 100%;
    padding: 210px 22px 24px;
    background: linear-gradient(0deg, #0b3023 53%, #0b3023d9 65%, transparent 85%);
  }
  body[data-page='home'] .hero-editorial[dir='rtl'] .hero-editorial-content {
    background: linear-gradient(0deg, #0b3023 53%, #0b3023d9 65%, transparent 85%);
  }
  body[data-page='home'] .hero-editorial > .hero-artwork {
    height: 280px;
  }
  body[data-page='home'] .hero-editorial .hero-artwork picture img {
    width: 100% !important;
    height: auto !important;
    object-fit: initial !important;
    transform: translateY(-10.29%);
  }
  body[data-page='home'] .hero-editorial.has-custom-hero-media .hero-artwork picture img {
    height: 100% !important;
    object-fit: cover !important;
    transform: none;
  }
  body[data-page='home'] .hero-editorial .ambient-toggle {
    top: 12px;
    bottom: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-banner video {
    transition: none;
  }
}

/* CityPaws product-pack promo: keep all refinements isolated from the main hero. */
body[data-page='home'] .home-promo-product {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  aspect-ratio: auto;
  overflow: hidden;
  background: #29351d;
}
/* Reserve the artwork's normal height, but let enlarged text grow the flex row. */
body[data-page='home'] .home-promo-product::before {
  content: '';
  flex: 0 0 0;
  padding-top: calc(100% * 793 / 1983);
  pointer-events: none;
}
body[data-page='home'] .home-promo-product > picture {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
body[data-page='home'] .home-promo-product-image {
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
body[data-page='home'] .home-promo-product-copy {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  flex: 0 0 36.25%;
  width: 36.25%;
  max-width: 36.25%;
  min-width: 0;
  margin: 0 auto 0 1.5%;
  transform: none;
  gap: clamp(0.4375rem, 0.85vw, 0.6875rem);
  align-items: center;
  text-align: center;
  overflow-wrap: anywhere;
}
body[data-page='home'] .home-promo-product-copy:lang(ar),
body[data-page='home'] .home-promo-product-copy:lang(he) {
  direction: rtl;
}
body[data-page='home'] .home-promo-product-identity {
  max-width: 100%;
  margin: 0;
  color: #d8b85e;
  font-family: 'Montserrat', 'Tajawal', sans-serif;
  font-size: clamp(1.75rem, 2.35vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.015em;
  line-height: 1.25;
}
body[data-page='home'] .home-promo-product-copy[dir='rtl'] .home-promo-product-identity {
  text-align: center;
}
body[data-page='home'] .home-promo-product-title {
  max-width: 16ch;
  font-size: clamp(2.75rem, 4vw, 3.125rem);
  line-height: 1.04;
}
body[data-page='home'] ul.home-promo-product-brands {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.125rem;
  max-width: 100%;
  padding: 0;
  color: #f4e8d0;
  font-size: clamp(1.125rem, 1.55vw, 1.25rem);
  font-weight: 650;
  line-height: 1.16;
  letter-spacing: 0.005em;
  list-style: none;
  direction: ltr;
  text-wrap: wrap;
}
body[data-page='home'] ul.home-promo-product-brands li {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, max-content));
  flex: 0 0 auto;
  align-items: center;
  align-self: center;
  min-width: 0;
  max-width: 100%;
  color: inherit;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: normal;
}
body[data-page='home'] ul.home-promo-product-brands li:nth-child(2) {
  grid-template-columns: repeat(3, minmax(0, max-content));
}
body[data-page='home'] ul.home-promo-product-brands li span {
  min-width: 0;
  overflow-wrap: anywhere;
}
body[data-page='home'] ul.home-promo-product-brands li span + span::before {
  margin: 0 0.38em;
  color: #d4af58;
  content: '·';
  font-weight: 700;
}
body[data-page='home'] .home-promo-product-cta {
  min-width: 0;
  min-height: max(44px, 3.375rem);
  gap: 0.375rem;
  padding: 0.625rem 1.1875rem;
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  flex-wrap: wrap;
  white-space: normal;
  scroll-margin-block: 1rem calc(var(--bottom-nav-height, 75px) + 1rem);
}

@media (min-width: 601px) and (max-width: 1023px) {
  body[data-page='home'] .home-promo-product-copy {
    gap: clamp(0.25rem, 0.7vw, 0.4375rem);
  }
  body[data-page='home'] .home-promo-product-identity {
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  }
  body[data-page='home'] .home-promo-product-title {
    max-width: 15ch;
    font-size: clamp(1.375rem, 3vw, 1.875rem);
    line-height: 1.08;
  }
  body[data-page='home'] ul.home-promo-product-brands {
    gap: 0.0625rem;
    font-size: clamp(0.75rem, 1.45vw, 0.9375rem);
    line-height: 1.12;
  }
  body[data-page='home'] .home-promo-product-cta {
    min-height: max(44px, 2.875rem);
    padding: 0.4375rem 0.8125rem;
    font-size: clamp(0.9375rem, 1.7vw, 1.0625rem);
  }
}

@media (min-width: 601px) and (max-width: 767px) {
  body[data-page='home'] ul.home-promo-product-brands li:nth-child(2) {
    grid-template-columns: repeat(2, max-content);
  }
  body[data-page='home'] ul.home-promo-product-brands li:nth-child(2) span:first-child {
    grid-column: 1 / -1;
  }
  body[data-page='home'] ul.home-promo-product-brands li:nth-child(2) span:nth-child(2)::before {
    content: none;
  }
}

@media (max-width: 768px) {
  body[data-page='home'] .home-promo-product {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    aspect-ratio: auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #29351d;
  }
  body[data-page='home'] .home-promo-product > picture {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
  }
  body[data-page='home'] .home-promo-product-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
  }
  body[data-page='home'] .home-promo-product > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
  }
  body[data-page='home'] .home-promo-product .ambient-toggle {
    top: auto;
    bottom: 10px;
    right: 10px;
    left: auto;
  }
  body[data-page='home'] .home-promo-product-copy {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: flex;
    flex: 0 0 46.5%;
    width: 46.5%;
    max-width: 46.5%;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.125rem, 0.5vw, 0.25rem);
    min-width: 0;
    margin: 0 auto 0 10px;
    padding: 0;
    transform: none;
    background: transparent;
    text-align: left;
  }
  body[data-page='home'] .home-promo-product-identity,
  body[data-page='home'] .home-promo-product-copy[dir='rtl'] .home-promo-product-identity {
    font-size: 1rem;
    line-height: 1.25;
    text-align: left;
  }
  body[data-page='home'] .home-promo-product-title {
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.08;
  }
  body[data-page='home'] .home-promo-product-description {
    max-width: 100%;
    font-size: clamp(0.6875rem, 2.2vw, 0.9375rem);
    line-height: 1.25;
  }
  body[data-page='home'] ul.home-promo-product-brands {
    width: 100%;
    max-width: 100%;
    gap: 0.125rem;
    font-size: 0.6875rem;
    line-height: 1.12;
    align-items: stretch;
  }
  body[data-page='home'] ul.home-promo-product-brands li {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, max-content));
    justify-content: start;
    column-gap: 0;
    row-gap: 0.125rem;
  }
  body[data-page='home'] ul.home-promo-product-brands li:nth-child(2) {
    grid-template-columns: repeat(2, minmax(0, max-content));
  }
  body[data-page='home'] ul.home-promo-product-brands li:nth-child(1) span:nth-child(3)::before,
  body[data-page='home'] ul.home-promo-product-brands li:nth-child(2) span:nth-child(2)::before {
    content: '·';
  }
  body[data-page='home'] ul.home-promo-product-brands li:nth-child(2) span:first-child {
    grid-column: auto;
  }
  body[data-page='home'] .home-promo-product-cta {
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    min-height: max(44px, 2.75rem);
    gap: 0.25rem;
    padding: 0.375rem clamp(0.5rem, 1.8vw, 0.875rem);
    font-size: 0.75rem;
    white-space: normal;
    margin-left: 0;
    margin-right: auto;
  }
}

@media (max-width: 380px) {
  body[data-page='home'] .home-promo-product-copy {
    gap: 0.125rem;
  }
  body[data-page='home'] .home-promo-product-title {
    font-size: 1rem;
  }
  body[data-page='home'] .home-promo-product-cta {
    min-height: max(44px, 2.75rem);
    padding: 0.3125rem 0.5rem;
    font-size: 0.75rem;
  }
}

@media (min-width: 381px) and (max-width: 768px) {
  body[data-page='home'] .home-promo-product-identity,
  body[data-page='home'] .home-promo-product-copy[dir='rtl'] .home-promo-product-identity,
  body[data-page='home'] .home-promo-product-title {
    font-size: clamp(1.125rem, 2.4vw, 1.625rem);
  }
  body[data-page='home'] ul.home-promo-product-brands {
    font-size: clamp(0.75rem, 1.7vw, 1rem);
  }
  body[data-page='home'] .home-promo-product-cta {
    font-size: clamp(0.8125rem, 1.7vw, 1rem);
  }
}

/* CityPaws cart drawer: scoped to the native modal and shared merchandising block. */
dialog.cp-cart-dialog,
.cp-cart-merchandising {
  --cp-olive: var(--green, #092e20);
  --cp-gold: var(--gold, #bd913d);
  --cp-cream: var(--cream, #fbf6ec);
  --cp-paper: #fffdf8;
  --cp-muted: #766f5d;
  --cp-border: var(--line, #e8dfd0);
}
dialog.cp-cart-dialog {
  position: fixed;
  inset-block: 16px;
  inset-inline: auto 16px;
  margin: 0;
  padding: 0;
  width: min(340px, calc(100vw - 32px));
  height: min(860px, calc(100dvh - 32px));
  max-width: none;
  max-height: none;
  overflow: hidden;
  border: 1px solid #d8c9a9;
  border-radius: 18px;
  background: var(--cp-paper);
  color: var(--cp-olive);
  box-shadow: 0 18px 60px #092e2038;
  overscroll-behavior: contain;
  direction: inherit;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .72, .24, 1);
}
dialog.cp-cart-dialog:not([open]) {
  display: none;
}
dialog.cp-cart-dialog::backdrop {
  background: #092e20a8;
  backdrop-filter: blur(2px);
}
dialog.cp-cart-dialog[open] {
  animation: cp-cart-enter 220ms cubic-bezier(.2, .72, .24, 1) both;
}
@keyframes cp-cart-enter {
  from {
    opacity: 0;
    transform: translateX(1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.cp-cart-dialog .cp-cart-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: var(--cp-paper);
}
.cp-cart-dialog .cp-cart-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 0;
  padding: max(16px, env(safe-area-inset-top)) 20px 14px;
  border-bottom: 1px solid var(--cp-border);
  background: #f8f0df;
}
.cp-cart-dialog .cp-cart-header h2 {
  min-width: 0;
  margin: 0;
  color: var(--cp-olive);
  font-size: clamp(1.2rem, 4vw, 1.55rem);
  line-height: 1.2;
  font-weight: 700;
}
.cp-cart-dialog .cp-cart-header button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #d8c9a9;
  border-radius: 999px;
  background: var(--cp-paper);
  color: var(--cp-olive);
  font-size: 1.45rem;
  line-height: 1;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.cp-cart-dialog .cp-cart-header button:hover {
  transform: translateY(-1px);
  border-color: var(--cp-gold);
  background: #fff8e9;
}
.cp-cart-dialog :where(button, a):focus-visible {
  outline: 3px solid var(--cp-gold);
  outline-offset: 3px;
}
.cp-cart-dialog .cp-cart-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 20px;
  scrollbar-color: #bd913d #f1eadc;
  scrollbar-width: thin;
}
.cp-cart-dialog .cart-item {
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0 0 10px;
  padding: 11px;
  border: 1px solid #ece3d3;
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 2px 8px #193b2609;
}
.cp-cart-dialog .cart-item img {
  flex: 0 0 62px;
  width: 62px;
  height: 76px;
  object-fit: contain;
}
.cp-cart-dialog .cart-item .info {
  min-width: 0;
}
.cp-cart-dialog .cart-item h3 {
  margin: 0 0 5px;
  color: var(--cp-olive);
  font-size: 0.9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.cp-cart-dialog .cart-item .qty {
  min-height: 36px;
  border-color: #dfd3be;
  background: #fbf6ec;
}
.cp-cart-dialog .cart-item .qty button {
  min-width: 36px;
  min-height: 36px;
  padding: 4px 8px;
  border-radius: 6px;
  background: transparent;
  color: var(--cp-olive);
}
.cp-cart-dialog .cart-item .qty span {
  min-width: 26px;
  padding-inline: 5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cp-cart-dialog .cart-item .remove {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 40px;
  padding: 4px;
  border-radius: 8px;
  color: #735b38;
  font-size: 1.25rem;
  transition: color 160ms ease, background-color 160ms ease;
}
.cp-cart-dialog .cart-item .remove:hover {
  background: #f6ead8;
  color: #8f392b;
}
.cp-cart-dialog .cp-cart-footer {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: 14px 18px max(16px, env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--cp-border);
  background: #f8f0df;
  box-shadow: 0 -5px 16px #193b2608;
}

@media (max-width: 600px) {
  dialog.cp-cart-dialog {
    inset-block-start: max(12px, env(safe-area-inset-top));
    inset-inline-end: 0;
    width: min(340px, calc(100vw - 16px));
    height: min(860px, calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom))));
    border: 1px solid #d8c9a9;
    border-radius: 18px;
    box-shadow: 0 18px 60px #092e2038;
  }
  .cp-cart-dialog .cp-cart-header {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .cp-cart-dialog .cp-cart-body {
    padding-block: 13px 16px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .cp-cart-dialog .cp-cart-footer {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
}
@media (max-width: 340px) {
  dialog.cp-cart-dialog {
    inset-block-start: max(12px, env(safe-area-inset-top));
    inset-inline-end: 0;
    width: min(340px, calc(100vw - 16px));
    height: min(860px, calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom))));
  }
  .cp-cart-dialog .cp-cart-header {
    gap: 8px;
    padding-inline: 12px;
  }
  .cp-cart-dialog .cp-cart-body {
    padding-inline: 10px;
  }
  .cp-cart-dialog .cart-item {
    gap: 8px;
    padding: 8px;
  }
  .cp-cart-dialog .cart-item img {
    flex-basis: 48px;
    width: 48px;
    height: 62px;
  }
  .cp-cart-dialog .cart-item h3 {
    font-size: 0.82rem;
  }
  .cp-cart-dialog .cart-item .remove {
    min-width: 36px;
    min-height: 40px;
  }
}
/* Shared cart merchandising is also rendered in the regular cart summary. */
.cp-cart-merchandising {
  min-width: 0;
  max-width: 100%;
  margin-block-start: 16px;
  padding: 15px;
  border: 1px solid #e7dcc8;
  border-radius: 14px;
  background: #f8f2e6;
  color: var(--cp-olive);
}
.cp-cart-merchandising .cp-cart-progress {
  min-width: 0;
  padding-block-end: 14px;
  border-block-end: 1px solid #e5dac5;
}
.cp-cart-merchandising .cp-cart-progress p[role='status'] {
  margin: 0 0 10px;
  color: #425743;
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.cp-cart-merchandising .cp-cart-progress-track[role='progressbar'] {
  width: 100%;
  height: 9px;
  overflow: hidden;
  border: 1px solid #d7c7a8;
  border-radius: 999px;
  background: #e8dfcc;
}
.cp-cart-merchandising .cp-cart-progress-fill {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #31573d, #bd913d);
  transition: inline-size 240ms ease;
}
.cp-cart-progress.is-free-shipping .cp-cart-progress-fill {
  background: #1b3b2b;
}
.cp-cart-merchandising .cp-cart-recommendations {
  min-width: 0;
  padding-block-start: 14px;
}
.cp-cart-merchandising .cp-cart-recommendations h3 {
  margin: 0 0 10px;
  color: var(--cp-olive);
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.cp-cart-merchandising .cp-cross-sell-list {
  display: grid;
  gap: 9px;
  min-width: 0;
}
.cp-cart-merchandising article.cp-cross-sell-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(44px, 34%);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #e8decc;
  border-radius: 11px;
  background: #fffdf8;
  transition: border-color 160ms ease, transform 160ms ease;
}
.cp-cart-merchandising article.cp-cross-sell-card:hover {
  transform: translateY(-1px);
  border-color: #c9ae72;
}
.cp-cart-merchandising .cp-cross-sell-card > a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: inherit;
  overflow-wrap: anywhere;
}
.cp-cart-merchandising .cp-cross-sell-card > a:focus-visible,
.cp-cart-merchandising .cp-cross-sell-card > button:focus-visible {
  outline: 3px solid var(--cp-gold);
  outline-offset: 3px;
}
.cp-cart-merchandising .cp-cross-sell-card img {
  display: block;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.cp-cart-merchandising .cp-cross-sell-card > a > span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--cp-olive);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.cp-cart-merchandising .cp-cross-sell-card > a > span[dir='auto'] {
  unicode-bidi: plaintext;
}
.cp-cart-merchandising .cp-cross-sell-card > a > span small {
  display: block;
  margin-block-start: 4px;
  color: var(--cp-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.cp-cart-merchandising .cp-cross-sell-card button[data-cross-sell-add] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  padding: 7px;
  border: 1px solid var(--cp-olive);
  border-radius: 9px;
  background: var(--cp-olive);
  color: var(--cp-cream);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.cp-cart-merchandising .cp-cross-sell-card button[data-cross-sell-add]:hover {
  transform: translateY(-1px);
  border-color: #735522;
  background: #735522;
}
.cp-cart-merchandising :where(a, button):focus-visible {
  outline: 3px solid var(--cp-gold);
  outline-offset: 3px;
}

/* Match the drawer's actual footer structure: subtotal paragraph, divider and links. */
.cp-cart-dialog .cp-cart-footer p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--cp-olive);
  font-size: 0.95rem;
  line-height: 1.4;
}
.cp-cart-dialog .cp-cart-footer p strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.cp-cart-dialog .cp-cart-footer p strong:last-child {
  flex: 0 0 auto;
  direction: ltr;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.cp-cart-dialog .cp-cart-footer hr {
  height: 0;
  margin: 0 0 12px;
  border: 0;
  border-block-start: 1px solid #e5dac5;
}
.cp-cart-dialog .cp-cart-footer a.btn.gold {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid #765522;
  border-radius: 10px;
  background: linear-gradient(120deg, #c5a052, #a77b29);
  color: #fffdf8;
  text-align: center;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  transition: transform 160ms ease, filter 160ms ease;
}
.cp-cart-dialog .cp-cart-footer a.btn.gold:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.cp-cart-dialog .cp-cart-footer a[data-full-cart] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-block-start: 5px;
  padding: 7px 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--cp-olive);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
  transition: background-color 160ms ease, color 160ms ease;
}
.cp-cart-dialog .cp-cart-footer a[data-full-cart]:hover {
  background: #eee3cf;
  color: #735522;
}

@media (max-width: 340px) {
  .cp-cart-merchandising {
    padding: 10px;
  }
  .cp-cart-merchandising article.cp-cross-sell-card {
    grid-template-columns: minmax(0, 1fr) minmax(44px, 31%);
    gap: 6px;
    padding: 7px;
  }
  .cp-cart-merchandising .cp-cross-sell-card > a {
    gap: 6px;
  }
  .cp-cart-merchandising .cp-cross-sell-card img {
    flex-basis: 46px;
    width: 46px;
    height: 50px;
  }
  .cp-cart-merchandising .cp-cross-sell-card > a > span {
    font-size: 0.76rem;
  }
  .cp-cart-merchandising .cp-cross-sell-card button[data-cross-sell-add] {
    padding: 6px 4px;
    font-size: 0.72rem;
  }
  .cp-cart-dialog .cp-cart-footer {
    padding-inline: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cp-cart-merchandising *,
  .cp-cart-merchandising *::before,
  .cp-cart-merchandising *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.brand-hub {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  margin: 0 0 18px;
  padding: 20px 24px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-md);
  background: var(--cp-paper);
  color: var(--cp-olive);
  direction: inherit;
}
.brand-hub-mark {
  display: grid;
  flex: 0 0 112px;
  min-height: 72px;
  place-items: center;
  padding: 8px;
  border-inline-end: 1px solid var(--cp-border);
}
.brand-hub-mark img {
  display: block;
  width: 100%;
  max-width: 112px;
  max-height: 72px;
  object-fit: contain;
}
.brand-hub-copy {
  min-width: 0;
}
.brand-hub-copy h1 {
  margin: 0 0 6px;
  color: var(--cp-olive);
  font-size: clamp(21px, 3vw, 30px);
  line-height: 1.2;
}
.brand-hub-copy p {
  margin: 0;
  color: var(--cp-muted);
  font-size: 14px;
  line-height: 1.65;
}
@media (max-width: 600px) {
  .brand-hub {
    gap: 12px;
    margin-bottom: 14px;
    padding: 15px;
  }
  .brand-hub-mark {
    flex-basis: 76px;
    min-height: 56px;
    padding: 5px;
  }
  .brand-hub-mark img {
    max-width: 76px;
    max-height: 56px;
  }
  .brand-hub-copy p {
    font-size: 13px;
  }
}

/* Storefront product-card image controls; keep the image's existing sizing rules intact. */
body:not([data-page='admin']) .product-card-media {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  touch-action: pan-y pinch-zoom;
}
body:not([data-page='admin']) button.product-card-media[data-card-flip] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
body:not([data-page='admin']) button.product-card-media[data-card-flip]:focus-visible {
  outline: 2px solid var(--gold, #a47a36);
  outline-offset: 3px;
  z-index: 1;
}
body:not([data-page='admin']) .product-card-media > .product-image {
  display: block;
}
body:not([data-page='admin']) .product-card-dots {
  position: absolute;
  inset-inline: 0;
  bottom: 7px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  flex-wrap: wrap;
  max-width: calc(100% - 12px);
  max-height: 22px;
  margin-inline: auto;
  overflow: hidden;
}
body:not([data-page='admin']) .product-card-dots > span[data-card-dot] {
  display: block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border: 1px solid rgba(55, 48, 37, 0.42);
  border-radius: 50%;
  background: rgba(255, 253, 247, 0.78);
  box-shadow: 0 1px 3px rgba(35, 29, 19, 0.18);
}
body:not([data-page='admin']) .product-card-dots > span[data-card-dot][aria-current='true'] {
  border-color: #66512c;
  background: #66512c;
}

/* Product card refinements: preserve the existing media footprint and grid sizing. */
body:not([data-page='admin']) .product-brand-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  color: #1b5a3d;
  text-decoration: underline;
  text-decoration-color: rgb(189 145 61 / 62%);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
body:not([data-page='admin']) .product-brand-link:hover {
  color: #092e20;
  text-decoration-color: #bd913d;
}
body:not([data-page='admin']) .product-brand-link:focus-visible {
  border-radius: 3px;
}
body:not([data-page='admin']) .inquiry-price-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.2em 0.35em;
  max-width: 100%;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  color: #173c2b;
  background: #f6edda;
  border: 1px solid #dfc98f;
  border-radius: 999px;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
body:not([data-page='admin']) .inquiry-price-link:hover {
  background: #f1e4c5;
  border-color: #bd913d;
}
body:not([data-page='admin']) .product-card-media-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}
body:not([data-page='admin']) .product-card-media-wrap > .product-card-media {
  display: block;
  width: 100%;
  min-width: 0;
}
body:not([data-page='admin']) .product-card-cycle {
  position: absolute;
  z-index: 2;
  left: 6px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  color: #173c2b;
  background: rgb(255 253 248 / 94%);
  border: 1px solid rgb(189 145 61 / 68%);
  border-radius: 50%;
  box-shadow: 0 2px 7px rgb(23 60 43 / 16%);
  cursor: pointer;
  touch-action: manipulation;
}
body:not([data-page='admin']) .product-card-cycle::before {
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  transform: translateX(-2px) rotate(45deg);
}
body:not([data-page='admin']) .product-card-cycle:hover {
  color: #092e20;
  background: #f6edda;
  border-color: #bd913d;
}
body:not([data-page='admin']) .product-card-cycle:focus-visible {
  outline: 3px solid #bd913d;
  outline-offset: 2px;
}
body:not([data-page='admin']) .product-card-media-wrap .product-card-dots {
  pointer-events: none;
  padding-inline-start: 50px;
  max-width: calc(100% - 58px);
}

/* Storefront polish: square packshot stage, without cropping product photography. */
body:not([data-page='admin']) .product-card-media {
  aspect-ratio: 1 / 1;
}
body:not([data-page='admin']) .product-card-media-wrap {
  aspect-ratio: 1 / 1;
}
body:not([data-page='admin']) .product-card-media-wrap > .product-card-media {
  height: 100%;
  aspect-ratio: 1 / 1;
}
body:not([data-page='admin']) .product-card-media > .product-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain;
}

/* Keep secondary product metadata comfortably readable against the storefront paper. */
body:not([data-page='admin']) .product .size-label,
body:not([data-page='admin']) .product select,
body:not([data-page='admin']) .product-brand-link,
body:not([data-page='admin']) .detail-category,
body:not([data-page='admin']) .detail-info .sizes,
body:not([data-page='admin']) .product-origin {
  color: #334155;
}

/* Cart confirmation feedback is brief and remains clear with motion disabled. */
.cart-feedback-pulse {
  position: relative;
  animation: cart-feedback-pulse 520ms ease-out;
  transform-origin: center;
}
@keyframes cart-feedback-pulse {
  0% { transform: scale(1); }
  38% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.cart-added-indicator {
  position: absolute;
  inset-block-start: -5px;
  inset-inline-end: -7px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  color: #092e20;
  background: #d4af37;
  border: 2px solid #fffdf7;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
#toast.cart-feedback-toast {
  z-index: 70;
  bottom: 24px;
  width: max-content;
  max-width: min(420px, calc(100% - 24px));
  padding: 12px 16px;
  color: #fffdf7;
  background: #092e20;
  border: 1px solid #d4af37;
  box-shadow: 0 8px 24px rgb(9 46 32 / 28%);
  line-height: 1.45;
  text-align: center;
}
#toast.cart-feedback-toast a {
  display: inline-block;
  margin-inline-start: .4em;
  color: #f3d66e;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Mobile product purchase dock; the native bottom navigation keeps its own clear lane. */
.pdp-sticky-buy {
  display: none;
}
.pdp-sticky-buy[hidden] {
  display: none !important;
}
@media (max-width: 768px) {
  .pdp-sticky-buy {
    position: fixed;
    inset-inline: 10px;
    bottom: calc(var(--bottom-nav-height, 75px) + 8px);
    z-index: 50;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 10px 9px 13px;
    color: #fffdf7;
    background: #092e20;
    border: 1px solid rgb(212 175 55 / 72%);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgb(9 46 32 / 24%);
    animation: pdp-sticky-enter 220ms ease-out both;
  }
  .pdp-sticky-buy[hidden] {
    display: none !important;
  }
  .pdp-sticky-buy > div {
    display: grid;
    min-width: 0;
    gap: 2px;
  }
  .pdp-sticky-buy .pdp-sticky-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #fffdf7;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pdp-sticky-buy .pdp-sticky-price {
    color: #d4af37;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
  }
  .pdp-sticky-buy > .btn.gold {
    min-width: 88px;
    min-height: 44px;
    padding: 8px 12px;
    color: #092e20;
    background: #d4af37;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
  }
  body.has-pdp-sticky .detail-info {
    padding-bottom: calc(82px + var(--bottom-nav-height, 75px));
  }
  #toast.cart-feedback-toast {
    bottom: calc(var(--bottom-nav-height, 75px) + 82px + env(safe-area-inset-bottom, 0px));
  }
}
@keyframes pdp-sticky-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cart-feedback-pulse,
  .pdp-sticky-buy {
    animation: none !important;
  }
}

/* Product-detail carousel: preserve the established image dimensions and native touch scrolling. */
body[data-page='product'] .gallery,
body[data-page='product'] .gallery-slides {
  max-width: 100%;
  min-width: 0;
}
body[data-page='product'] .gallery-slides {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  touch-action: pan-x pan-y pinch-zoom;
  direction: ltr;
}
body[data-page='product'] .gallery-slides.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
}
body[data-page='product'] .gallery-slides.is-dragging > .gallery-slide {
  cursor: grabbing;
}
body[data-page='product'] .gallery-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
body[data-page='product'] .gallery-slide > img,
body[data-page='product'] .gallery-slide > span {
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body[data-page='product'] .gallery-slides {
    scroll-behavior: auto;
  }
}

/* Storefront selection contrast: preserve established pill and chip geometry. */
body:is([data-page='category'], [data-page='offers']) .cat-subcard:not(.active):not([aria-pressed='true']) {
  color: #334155;
}
body:is([data-page='category'], [data-page='offers']) .cat-subcard.active,
body:is([data-page='category'], [data-page='offers']) .cat-subcard[aria-pressed='true'] {
  border-color: #0f382a;
  background: #0f382a;
  color: #fff;
}
body:is([data-page='category'], [data-page='offers'])
  :is(.uniform-category-branches, .dog-panel-subcategories, .bird-subcategories, .health-subcategories)
  .dog-panel-subcard:not(.active):not([aria-pressed='true']),
body:is([data-page='category'], [data-page='offers'])
  :is(.uniform-category-branches, .dog-panel-subcategories, .bird-subcategories, .health-subcategories)
  .dog-panel-subcard:not(.active):not([aria-pressed='true']) strong {
  color: #334155;
}
body:is([data-page='category'], [data-page='offers'])
  :is(.uniform-category-branches, .dog-panel-subcategories, .bird-subcategories, .health-subcategories)
  .dog-panel-subcard:is(.active, [aria-pressed='true']) {
  border-color: #0f382a;
  background: #0f382a;
  color: #fff;
}
body:is([data-page='category'], [data-page='offers'])
  :is(.uniform-category-branches, .dog-panel-subcategories, .bird-subcategories, .health-subcategories)
  .dog-panel-subcard:is(.active, [aria-pressed='true']) strong {
  color: #fff;
}
body[data-page='product'] .detail .sizes button:not(.active) {
  color: #334155;
}
body[data-page='product'] .detail .sizes button.active {
  border-color: #0f382a;
  background: #0f382a;
  color: #fff;
}

.catalog-quick-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0 0 1rem;
  padding: .75rem .9rem;
  color: #183c2c;
  background: #f6f0e2;
  border: 1px solid #e3d7bd;
  border-radius: 14px;
}
.catalog-quick-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding-inline-end: .55rem;
  border-inline-end: 1px solid #dfd2b6;
}
.catalog-quick-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 40px;
  max-width: 100%;
  padding: .45rem .8rem;
  color: #284536;
  background: #fffdf7;
  border: 1px solid #d8ccb1;
  border-radius: 999px;
  font: inherit;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.catalog-quick-chip:hover { border-color: #54735b; }
.catalog-quick-chip.is-active,
.catalog-quick-chip[aria-pressed='true'] {
  color: #fffdf7;
  background: #1b4933;
  border-color: #1b4933;
}
.catalog-quick-brand {
  margin-inline-start: auto;
  color: #5a4313;
  background: #f3e5bf;
  border-color: #d7bd7e;
}
.catalog-quick-brand span { font-size: 1.25rem; line-height: .8; }
.catalog-quick-chip:focus-visible { outline: 3px solid #b68b35; outline-offset: 2px; }
.catalog-brand-loading,
.catalog-brand-empty { margin: .6rem 0; color: #6c675a; font-size: .92rem; }
@media (max-width: 600px) {
  .catalog-quick-filters { align-items: stretch; gap: .45rem; padding: .65rem; }
  .catalog-quick-filter-group { flex: 1 1 auto; gap: .3rem; padding-inline-end: .35rem; }
  .catalog-quick-chip { min-height: 44px; padding-inline: .65rem; font-size: .82rem; }
  .catalog-quick-brand { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-quick-chip { transition: none; }
}
body[data-page='category'] .department-page .controls.category-controls .filter-toggle,
body[data-page='category'] .department-page .controls.category-controls .catalog-sort select {
  min-height: 44px;
}
/* The native select covers the label's inner box: 48px minus its two borders
   leaves a real 46px target, rather than a 44px label with a 42px select. */
.catalog-content .controls .catalog-sort,
.catalog-content .controls .filter-toggle {
  box-sizing: border-box;
  min-width: 48px;
  min-height: 48px;
  height: 48px;
}
.catalog-content .controls .catalog-sort select {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
}
body[data-page='category'] .department-page .controls.category-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
body[data-page='category'] .department-page .controls.category-controls .catalog-tools {
  display: contents;
}
body[data-page='category'] .department-page .controls.category-controls .filter-toggle {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
body[data-page='category'] .department-page .controls.category-controls .catalog-sort {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
body[data-page='category'] .department-page .controls.category-controls > .catalog-count {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  margin: 0;
}
body[data-page='category'] .department-page .controls.category-controls .sort-caption {
  display: inline;
}
.catalog-active-filters button,
.catalog-quick-filters button {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding-block: 6px;
}
.bottom a,
.bottom button {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 54px;
  padding-inline: 4px;
  touch-action: manipulation;
}
.account-admin-shortcut { margin: 1rem auto; padding-inline: 1rem; text-align: center; }
.admin-access-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .45rem .85rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #0f382a;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}
.admin-access-link:hover { background: #f1f5f3; }
.admin-access-link:focus-visible { outline: 3px solid #b68b35; outline-offset: 3px; }

/* Compact category tiles: real department art, readable names and live count badges. */
body:not([data-page='admin']) .category-tile-grid {
  display: grid !important; /* Supersedes the legacy homepage flex rail. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
  width: 100%;
  min-width: 0;
  overflow: visible;
  padding: 8px 0 16px;
  direction: inherit;
}
body:not([data-page='admin']) .category-tile-grid > .category-card,
body:not([data-page='admin']) .categories-page-grid.category-tile-grid > a {
  grid-column: auto !important;
  grid-row: auto !important;
  display: grid;
  grid-template-columns: minmax(54px, 72px) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: 12px;
  min-width: 0;
  min-height: 92px;
  padding: 9px 11px;
  overflow: hidden;
  color: #17392c;
  background: #fffdf7;
  border: 1px solid #e5ddcb;
  border-radius: 13px;
  text-align: start;
  box-shadow: 0 2px 8px rgb(20 53 37 / 5%);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
body:not([data-page='admin']) .categories-page > h1 {
  text-align: center;
}
body:not([data-page='admin']) .categories-page-grid.category-tile-grid > a > strong {
  grid-row: 1 / 3;
  align-self: center;
  justify-self: stretch;
  text-align: center;
}
body:not([data-page='admin']) .category-tile-grid > a:hover {
  transform: translateY(-2px);
  border-color: #aebcae;
  box-shadow: 0 5px 14px rgb(20 53 37 / 9%);
}
body:not([data-page='admin']) .category-tile-grid > a > img {
  grid-row: 1 / 3;
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  max-width: none !important;
  margin: 0;
  object-fit: cover;
  border: 0;
  border-radius: 9px;
  background: #f2eee2;
  box-shadow: none;
}
body:not([data-page='admin']) .category-tile-grid > a > strong {
  display: block;
  align-self: end;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #17392c;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 800;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}
.category-count-badge {
  display: inline-flex;
  align-self: start;
  justify-self: start;
  min-height: 19px;
  margin-top: 5px;
  padding: 2px 7px;
  color: #526558;
  background: #f0f2ea;
  border: 1px solid #e5e8dc;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.category-count-badge:empty { display: none; }
@media (min-width: 1000px) {
  body[data-page='home'] .category-tile-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body[data-page='categories'] .category-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 999px) {
  body:not([data-page='admin']) .category-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  body:not([data-page='admin']) .category-tile-grid > a { grid-template-columns: 58px minmax(0, 1fr); min-height: 78px; padding: 8px; column-gap: 9px; }
}
@media (max-width: 600px) {
  body:not([data-page='admin']) .category-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 4px 0 12px;
    overflow: visible;
  }
  body:not([data-page='admin']) .category-tile-grid > a {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 78px;
    padding: 8px;
    column-gap: 9px;
    border-radius: 11px;
  }
  body:not([data-page='admin']) .category-tile-grid > a > strong { font-size: 14px; }
  body:not([data-page='admin']) .categories-page-grid .category-count-badge { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-page='admin']) .category-tile-grid > a { transition: none; }
}

/* Keep storefront product grids and product rails evenly separated at every breakpoint. */
body:not([data-page='admin']) .products .product {
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}
body:not([data-page='admin']) .catalog .products,
body:not([data-page='admin']) .section .products,
body:not([data-page='admin']) .products {
  gap: 16px !important;
}

@media (max-width: 767px) {
  body[data-page='product'] .products,
  .detail ~ .section .products,
  .related-products .products {
    gap: 16px !important;
  }
}

/* Homepage browse rail and independently scrolling product shelves. */
body[data-page='home'] .home-category-section {
  margin: 0;
  padding: 15px clamp(14px, 3vw, 38px) 17px;
  border-bottom: 1px solid #e2e8f0;
  background: #f7f8f4;
}
body[data-page='home'] .home-category-rail {
  display: flex;
  flex-wrap: nowrap;
  direction: inherit;
  align-items: flex-start;
  gap: clamp(17px, 3.2vw, 38px);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body[data-page='home'] .home-category-rail::-webkit-scrollbar,
body[data-page='home'] .products.home-product-grid::-webkit-scrollbar {
  display: none;
}
body[data-page='home'] .home-category-rail > .home-category-bubble {
  display: flex;
  flex: 0 0 82px !important;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0 !important;
  padding: 0 !important;
  color: var(--green);
  text-align: center;
  text-decoration: none;
  scroll-snap-align: start;
}
body[data-page='home'] .home-category-rail > .home-category-bubble > img {
  display: block;
  width: 68px !important;
  height: 68px !important;
  min-width: 0;
  max-width: 72px;
  border: 1.5px solid #e2e8f0;
  border-radius: 50%;
  background: #fffdf8;
  object-fit: cover;
  box-shadow: 0 2px 8px #193b260d;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
body[data-page='home'] .home-category-rail > .home-category-bubble > strong {
  max-width: 100%;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
}
body[data-page='home'] .home-category-bubble:hover img {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px #193b2618;
}
body[data-page='home'] .home-category-bubble:focus-visible,
body[data-page='home'] .home-category-rail:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 8px;
}
body[data-page='home'] .home-product-section {
  margin: 0;
  padding: 19px clamp(15px, 3vw, 38px) 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #fbfbf7;
}
body[data-page='home'] #newArrivals.home-product-section {
  background: #f3f6f1;
}
body[data-page='home'] .home-product-section .title {
  margin-bottom: 13px;
}
body[data-page='home'] .products.home-product-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 64px) / 5);
  grid-template-columns: none;
  align-items: stretch;
  gap: 13px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body[data-page='home'] .home-product-grid > .product {
  min-width: 0;
  min-height: 0;
  padding: 11px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: #fffdf9;
  box-shadow: 0 2px 8px #193b260b;
  scroll-snap-align: start;
}
body[data-page='home'] .home-product-grid > .product .product-image {
  height: clamp(130px, 15vw, 174px);
  flex: 0 0 auto;
  margin-bottom: 6px;
  object-fit: contain;
}
body[data-page='home'] .home-product-grid > .product h3 {
  min-height: 2.35em;
  margin: 3px 0;
}
body[data-page='home'] .home-product-grid > .product .product-brand-link,
body[data-page='home'] .home-product-grid > .product .card-size {
  margin-top: 2px;
  margin-bottom: 3px;
}
body[data-page='home'] .home-product-grid > .product .price {
  min-height: 0;
  margin: 2px 0 7px;
  line-height: 1.2;
}
body[data-page='home'] .home-product-grid > .product > .btn {
  min-height: 44px !important;
}
body[data-page='home'] .home-product-grid:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 9px;
}
@media (min-width: 768px) {
  body[data-page='home'] .home-category-section {
    padding-block: 17px 19px;
  }
  body[data-page='home'] .home-category-rail > .home-category-bubble {
    flex-basis: 90px !important;
  }
  body[data-page='home'] .home-category-rail > .home-category-bubble > img {
    width: 72px !important;
    height: 72px !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  body[data-page='home'] .products.home-product-grid {
    grid-auto-columns: calc((100% - 32px) / 3);
  }
}
@media (min-width: 1025px) {
  body[data-page='home'] .products.home-product-grid {
    grid-auto-columns: calc((100% - 64px) / 5);
  }
}
@media (max-width: 767px) {
  body[data-page='home'] .home-category-section {
    padding: 12px 13px 14px;
  }
  body[data-page='home'] .home-category-rail {
    gap: 14px;
  }
  body[data-page='home'] .home-category-rail > .home-category-bubble {
    flex-basis: 74px !important;
  }
  body[data-page='home'] .home-category-rail > .home-category-bubble > img {
    width: 66px !important;
    height: 66px !important;
  }
  body[data-page='home'] .home-category-rail > .home-category-bubble > strong {
    font-size: 14px;
  }
  body[data-page='home'] .home-product-section {
    padding: 15px 13px 14px;
  }
  body[data-page='home'] .products.home-product-grid {
    grid-auto-columns: calc((100% - 32px) / 2.2);
    gap: 16px;
  }
  body[data-page='home'] .home-product-grid > .product {
    padding: 9px;
  }
  body[data-page='home'] .home-product-grid > .product .product-image {
    height: clamp(116px, 34vw, 145px);
    margin-bottom: 4px;
  }
  body[data-page='home'] .home-product-grid > .product h3 {
    min-height: 2.4em;
    font-size: 13px;
  }
  body[data-page='home'] .home-product-grid > .product .price {
    font-size: 18px;
  }
  body[data-page='home'] .home-product-grid > .product > .btn {
    min-height: 44px !important;
    padding: 8px 5px;
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page='home'] .home-category-bubble img {
    transition: none;
  }
}
/* Supersede the older ID-specific arrivals grid at phone/tablet widths. */
body[data-page='home'] #newArrivals .products.home-product-grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  overflow-x: auto;
  overflow-y: hidden;
}
body[data-page='home'] .home-product-grid .product-card-media {
  touch-action: pan-x pan-y pinch-zoom;
}

/* Phone-only home rhythm. Artwork sources, fit and proportions are untouched. */
@media (max-width: 767px) {
  body[data-page='home'] > header .push-offers-control {
    margin-block: 0;
    padding-block: 2px 6px;
  }
  body[data-page='home'] > header .push-header-toggle {
    min-height: 44px;
    padding: 6px 14px;
    font-size: .8125rem;
    line-height: 1.2;
  }
  body[data-page='home'] .home-category-section {
    margin-block: 0;
    padding-block: 10px 12px;
  }
  body[data-page='home'] .home-promo-wrap-products {
    margin-block: 0 10px;
  }
  body[data-page='home'] .delivery-notice-home {
    margin: 0 12px 8px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: .8125rem;
    line-height: 1.45;
  }
  body[data-page='home'] .delivery-notice-home p {
    margin-block: 2px;
  }
  body[data-page='home'] .home-product-section {
    margin-block: 0;
    padding-block: 14px;
  }
  body[data-page='home'] .home-product-section .title {
    gap: 12px;
    margin-bottom: 10px;
    align-items: center;
  }
  body[data-page='home'] .home-product-section .title h2 {
    font-size: clamp(1rem, 4.5vw, 1.25rem);
    line-height: 1.35;
  }
  body[data-page='home'] .home-product-section .title a {
    flex-shrink: 0;
    font-size: .8125rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  body[data-page='home'] .home-brands-showcase {
    margin-block: 0;
    padding-block: 14px;
  }
  body[data-page='home'] .home-brands-heading h2 {
    font-size: 1.125rem;
  }
  body[data-page='home'] .home-brands-heading p {
    font-size: .8125rem;
    margin-block: 4px 10px;
  }
  body[data-page='home'] .push-optin-banner {
    margin-block: 12px;
  }
  /* Reserve a real slot beside, not over, the five navigation destinations.
     The launcher stays viewport-fixed and cannot cover a product or category. */
  body[data-page='home'] > nav.bottom {
    box-sizing: border-box;
    position: fixed;
    display: grid;
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    inset-inline: 0;
    bottom: 0;
    min-height: calc(72px + env(safe-area-inset-bottom, 0px));
    gap: 0;
    padding-block: 8px calc(8px + env(safe-area-inset-bottom, 0px));
    padding-inline-start: 4px;
    padding-inline-end: 60px;
    background: var(--cream);
    z-index: 50;
  }
  body[data-page='home'] > nav.bottom a {
    min-width: 0;
    min-height: 48px;
    padding: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
  }
  body[data-page='home'] > nav.bottom a small {
    font-size: .6875rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  body[data-page='home'] .support-launcher {
    left: auto;
    right: auto;
    inset-inline-start: auto;
    inset-inline-end: 8px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
    z-index: 52;
  }
  body[data-page='home'] .support-launcher > svg {
    width: 24px;
    height: 24px;
  }
}

/* Approved phone catalog: two equal-width, content-led cards per row. */
@media (max-width: 767px) {
  body:not([data-page='admin']) .products,
  body[data-page='home'] .products.home-product-grid,
  body:not([data-page='admin']) .catalog .products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    align-items: stretch;
    gap: 10px !important;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    padding: 2px 1px 8px;
    scroll-snap-type: none;
  }
  body:not([data-page='admin']) .products > .product {
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 9px;
    overflow: visible;
  }
  body:not([data-page='admin']) .products > .product > a:has(> h3) {
    min-width: 0;
  }
  body:not([data-page='admin']) .products > .product h3 {
    display: -webkit-box;
    min-width: 0;
    min-height: 0;
    max-height: 2.6em;
    margin: 2px 0 5px;
    overflow: hidden;
    line-height: 1.3;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  body:not([data-page='admin']) .products > .product .card-size,
  body:not([data-page='admin']) .products > .product .sizes {
    min-width: 0;
    max-width: 100%;
  }
  body:not([data-page='admin']) .products > .product .card-size select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 40px;
  }
  body:not([data-page='admin']) .products > .product > .price {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  body:not([data-page='admin']) .products > .product > .btn {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: auto;
    margin-top: auto;
    padding: 8px 5px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body[data-page='home'] .products.home-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
  }
  body[data-page='category'] .department-page .catalog-content > .page-heading {
    margin-bottom: 5px;
    padding: 4px 10px 7px;
  }
  body:is([data-page='category'], [data-page='offers']) .cat-subcard {
    min-height: 36px;
    padding: 6px 11px;
    font-size: 12px;
  }
  body:is([data-page='category'], [data-page='offers']) .cat-subcard strong {
    font-size: 12px;
  }
}

/* Storefront drawer palette and category tree; existing accordion handlers remain authoritative. */
body:not([data-page='admin']) #siteDrawer.site-drawer {
  color: #203b2b;
  background: #fbf9f5;
  border-inline-end: 1px solid #e9e2d7;
  box-shadow: -12px 0 34px rgb(28 39 30 / 12%);
  width: min(90vw, 380px);
  max-width: 90vw;
}
body:not([data-page='admin']) #siteDrawer[dir='ltr'].site-drawer {
  box-shadow: 12px 0 34px rgb(28 39 30 / 12%);
}
body:not([data-page='admin']) #siteDrawer::backdrop {
  background: rgb(0 0 0 / 45%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
@media (min-width: 768px) and (max-width: 1024px) {
  body:not([data-page='admin']) #siteDrawer.site-drawer {
    width: 400px;
    max-width: calc(100vw - 20px);
  }
}
@media (min-width: 1025px) {
  body:not([data-page='admin']) #siteDrawer.site-drawer {
    width: 420px;
    max-width: calc(100vw - 20px);
  }
}
body:not([data-page='admin']) #siteDrawer .drawer-body,
body:not([data-page='admin']) #siteDrawer .drawer-links {
  background: #fbf9f5;
}
body:not([data-page='admin']) #siteDrawer .drawer-accordion-group {
  margin-block: 2px;
}
body:not([data-page='admin']) #siteDrawer .drawer-accordion-btn {
  position: relative;
  gap: 10px;
  min-height: 54px;
  padding: 6px 8px;
  color: #203b2b;
  border: 1px solid #e2d8c1;
  border-radius: 10px;
  background: #fffdf7;
  font-size: 14px;
  text-align: start;
}
body:not([data-page='admin']) #siteDrawer .drawer-accordion-btn img {
  order: -1;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid #d8c692;
  background: #f3eddf;
  object-fit: cover;
}
body:not([data-page='admin']) #siteDrawer .drawer-accordion-btn.is-open {
  border-color: #b89a50;
  background: #f2ead6;
}
body:not([data-page='admin']) #siteDrawer .drawer-sub-menu > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 5px 0 8px;
  padding: 8px;
  border: 1px solid #e4dac3;
  border-radius: 10px;
  background: #f4eee2;
}
body:not([data-page='admin']) #siteDrawer .drawer-sub-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 36px;
  padding: 6px 10px;
  color: #294532;
  border: 1px solid #ded1ae;
  border-radius: 999px;
  background: #fffdf7;
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
body:not([data-page='admin']) #siteDrawer .drawer-sub-menu[inert] > div {
  margin: 0;
  padding-block: 0;
  border-width: 0;
}
body:not([data-page='admin']) #siteDrawer .drawer-sub-item.all-link {
  color: #fffdf7;
  border-color: #314b36;
  background: #314b36;
}
body:not([data-page='admin']) #siteDrawer .drawer-sub-item:hover,
body:not([data-page='admin']) #siteDrawer .drawer-sub-item[aria-current='page'] {
  color: #273d2e;
  border-color: #b99a4b;
  background: #ead9ab;
}
body:not([data-page='admin']) #siteDrawer .drawer-contact-area {
  background: #f4f0e8;
  border-color: #d8c692;
}
body:not([data-page='admin']) #siteDrawer .drawer-contact-whatsapp {
  background: #fbf6ec;
}
body:not([data-page='admin']) #siteDrawer .drawer-accordion-btn:focus-visible,
body:not([data-page='admin']) #siteDrawer .drawer-sub-item:focus-visible {
  outline: 2px solid #b99a4b;
  outline-offset: 1px;
}
body:not([data-page='admin']) #waFloat {
  display: none !important;
}

/* Storefront drawer reference: one continuous scroll surface, with no pinned
   header or footer and no nested scrolling regions. */
body:not([data-page='admin']) #siteDrawer #drawerContent {
  display: block;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #c9b98f transparent;
  background: #fbf8f0;
}
body:not([data-page='admin']) #siteDrawer .drawer-head {
  position: static;
  inset: auto;
  z-index: auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 10px 14px;
  color: #23412f;
  background: #fbf8f0;
  border-bottom: 1px solid #ebe4d5;
}
body:not([data-page='admin']) #siteDrawer .drawer-head > a {
  display: grid;
  grid-template-columns: auto 25px;
  grid-template-areas: 'word paw' 'tag tag';
  direction: ltr;
  flex: 0 1 auto;
  align-items: center;
  justify-content: end;
  gap: 2px 5px;
  color: #23412f;
  text-align: end;
}
body:not([data-page='admin']) #siteDrawer .drawer-head .brand-wordmark {
  grid-area: word;
  color: #23412f !important;
  background: transparent !important;
  padding: 0;
  border-radius: 0;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.7px;
  line-height: 1.1;
}
body:not([data-page='admin']) #siteDrawer .drawer-paw {
  grid-area: paw;
  display: inline-flex;
  width: 21px;
  height: 21px;
  color: #b99243;
}
body:not([data-page='admin']) #siteDrawer .drawer-paw svg {
  width: 100%;
  height: 100%;
}
body:not([data-page='admin']) #siteDrawer .drawer-head small {
  grid-area: tag;
  flex-basis: 100%;
  margin: 2px 0 0;
  text-align: center;
  color: #777461;
  font-size: 11px;
  line-height: 1.2;
}
body:not([data-page='admin']) #siteDrawer .drawer-head > button {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid #e5ddcd;
  border-radius: 10px;
  color: #395340;
  background: transparent;
}
body:not([data-page='admin']) #siteDrawer .drawer-head > button svg {
  width: 19px;
  height: 19px;
}
body:not([data-page='admin']) #siteDrawer .drawer-body {
  display: block;
  min-height: 0;
  padding: 10px 12px 5px;
  overflow: visible;
}
body:not([data-page='admin']) #siteDrawer .drawer-account {
  min-height: 56px;
  margin: 0 0 8px;
  padding: 8px 10px;
  background: #fffdf8;
  border-color: #e7deca;
  border-radius: 11px;
}
body:not([data-page='admin']) #siteDrawer .drawer-account b {
  font-size: 14px;
}
body:not([data-page='admin']) #siteDrawer .drawer-account small {
  color: #777461;
  font-size: 11px;
}
body:not([data-page='admin']) #siteDrawer .drawer-links,
body:not([data-page='admin']) #siteDrawer .drawer-additional-links {
  padding: 0;
}
body:not([data-page='admin']) #siteDrawer .drawer-links h2,
body:not([data-page='admin']) #siteDrawer .drawer-extras > h2 {
  margin: 10px 8px 5px;
  color: #676b56;
  font-size: 12px;
  font-weight: 700;
}
body:not([data-page='admin']) #siteDrawer .drawer-links > a,
body:not([data-page='admin']) #siteDrawer .drawer-additional-links > a {
  min-height: 39px;
  margin-bottom: 3px;
  padding: 5px 8px;
  border: 1px solid #eee5d3;
  border-radius: 10px;
  background: #fffdf8;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
body:not([data-page='admin']) #siteDrawer .drawer-links > .drawer-feature-link {
  min-height: 39px;
  margin-bottom: 3px;
  padding: 5px 8px;
  border: 1px solid #eee5d3;
  background: #fffdf8;
  font-size: 14px;
}
body:not([data-page='admin']) #siteDrawer .drawer-links > .drawer-hot-deals {
  background: #f7ecd2;
  border-color: #e8d8b2;
}
body:not([data-page='admin']) #siteDrawer .drawer-links > .drawer-new-products {
  background: #f2f0e5;
}
body:not([data-page='admin']) #siteDrawer .drawer-links > a > svg,
body:not([data-page='admin']) #siteDrawer .drawer-additional-links > a > svg {
  width: 19px;
  height: 19px;
}
body:not([data-page='admin']) #siteDrawer .drawer-feature-mark {
  display: none;
}
body:not([data-page='admin']) #siteDrawer .drawer-accordion-group {
  margin-block: 3px;
}
body:not([data-page='admin']) #siteDrawer .drawer-accordion-btn {
  min-height: 45px;
  padding: 3px 8px;
  gap: 9px;
  border: 1px solid #eee3cf;
  border-radius: 10px;
  background: #fffdf8;
  font-size: 14px;
}
body:not([data-page='admin']) #siteDrawer .drawer-accordion-btn img {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: #f2eddf;
}
body:not([data-page='admin']) #siteDrawer .drawer-accordion-btn.is-open {
  background: #f3eddd;
}
body:not([data-page='admin']) #siteDrawer .drawer-sub-menu > div {
  margin: 4px 0 6px;
  padding: 7px;
}
body:not([data-page='admin']) #siteDrawer .drawer-sub-item {
  min-height: 32px;
  padding: 5px 9px;
  font-size: 12px;
}
body:not([data-page='admin']) #siteDrawer .drawer-extras {
  margin-top: 8px;
  padding-top: 5px;
  border-top: 1px solid #e8dfcd;
}
body:not([data-page='admin']) #siteDrawer .drawer-additional-links > a {
  min-height: 37px;
  margin-bottom: 3px;
}
body:not([data-page='admin']) #siteDrawer .drawer-additional-links > .drawer-accordion-group {
  margin-block: 3px;
}
body:not([data-page='admin']) #siteDrawer .drawer-additional-links > button.drawer-app-entry {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 37px;
  margin: 3px 0;
  padding: 5px 8px;
  gap: 9px;
  color: inherit;
  background: #fffdf8;
  border: 1px solid #eee5d3;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  text-align: start;
}
body:not([data-page='admin']) #siteDrawer .drawer-extra-actions {
  margin-top: 3px;
}
body:not([data-page='admin']) #siteDrawer .drawer-extra-actions .drawer-share-action {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 4px 8px;
  color: #5d6655;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  text-align: start;
}
body:not([data-page='admin']) #siteDrawer .drawer-extra-actions .drawer-share-action svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}
body:not([data-page='admin']) #siteDrawer .drawer-contact-area {
  position: static;
  inset: auto;
  max-height: none;
  min-height: 0;
  margin: 8px 12px 0;
  padding: 10px 0 calc(12px + env(safe-area-inset-bottom));
  overflow: visible;
  background: transparent;
  border: 0;
  border-top: 1px solid #e8dfcd;
  box-shadow: none;
}
body:not([data-page='admin']) #siteDrawer .drawer-contact-area > h2 {
  margin: 0 0 7px;
  color: #555f4d;
  font-size: 12px;
}
body:not([data-page='admin']) #siteDrawer .drawer-contact-whatsapp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  margin-bottom: 7px;
  padding: 7px 11px;
  color: #fffdf7;
  background: #188454;
  border: 1px solid #14764a;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}
body:not([data-page='admin']) #siteDrawer .drawer-contact-whatsapp .drawer-contact-icon {
  color: inherit;
}
body:not([data-page='admin']) #siteDrawer .drawer-contact-whatsapp .drawer-contact-icon svg {
  width: 21px;
  height: 21px;
}
body:not([data-page='admin']) #siteDrawer .drawer-contact-chevron {
  font-size: 21px;
  line-height: 1;
}
body:not([data-page='admin']) #siteDrawer .drawer-contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
body:not([data-page='admin']) #siteDrawer .drawer-contact-actions > a {
  display: flex;
  align-items: center;
  min-height: 36px;
  min-width: 0;
  margin: 0;
  gap: 5px;
  padding: 5px 7px;
  color: #415344;
  background: #fffdf8;
  border: 1px solid #e7deca;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
body:not([data-page='admin']) #siteDrawer .drawer-contact-actions bdi {
  font-size: 11px;
}
body:not([data-page='admin']) #siteDrawer .drawer-contact-call small {
  display: none;
}
body:not([data-page='admin']) #siteDrawer .drawer-contact-icon,
body:not([data-page='admin']) #siteDrawer .drawer-location-pin {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: #9a7c3c;
}
body:not([data-page='admin']) #siteDrawer .drawer-contact-icon svg,
body:not([data-page='admin']) #siteDrawer .drawer-location-pin svg {
  width: 17px;
  height: 17px;
}
body:not([data-page='admin']) #siteDrawer .drawer-bottom {
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid #e8dfcd;
}
body:not([data-page='admin']) #siteDrawer .drawer-languages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
}
body:not([data-page='admin']) #siteDrawer .drawer-languages button {
  min-height: 33px;
  padding: 5px 12px;
  color: #435342;
  background: #fffdf8;
  border: 1px solid #e3dac6;
  border-radius: 9px;
  font-size: 12px;
}
body:not([data-page='admin']) #siteDrawer .drawer-languages button[aria-pressed='true'] {
  color: #fffdf8;
  background: #31543b;
  border-color: #31543b;
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-page='admin']) #siteDrawer *,
  body:not([data-page='admin']) #siteDrawer *::before,
  body:not([data-page='admin']) #siteDrawer *::after {
    scroll-behavior: auto;
    transition-duration: .01ms !important;
  }
}
@media (max-height: 500px) {
  body:not([data-page='admin']) #siteDrawer .drawer-head { padding-block: 4px; }
  body:not([data-page='admin']) #siteDrawer .drawer-body { min-height: 0; }
  body:not([data-page='admin']) #siteDrawer .drawer-contact-area {
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding-block: 6px;
  }
  body:not([data-page='admin']) #siteDrawer .drawer-contact-area h2 { margin-block: 0 4px; }
}

/* The whole drawer, from its brand row through language selection, is one scroll. */
body:not([data-page='admin']) #siteDrawer #drawerContent {
  display: block;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 0;
  box-sizing: border-box;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body:not([data-page='admin']) #siteDrawer .drawer-body {
  display: block;
  flex: none;
  min-height: 0;
  overflow: visible;
}
body:not([data-page='admin']) #siteDrawer .drawer-contact-area {
  position: static;
  inset: auto;
  flex: none;
  min-height: 0;
  max-height: none;
  overflow: visible;
  box-shadow: none;
}
body:not([data-page='admin']) #siteDrawer .drawer-additional-links > a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 20px;
  align-items: center;
  min-width: 0;
  text-align: start;
}
body:not([data-page='admin']) #siteDrawer .drawer-additional-links > a > svg {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  margin: 0;
}
body:not([data-page='admin']) #siteDrawer .drawer-additional-links > a > span:not(.drawer-arrow) {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
body:not([data-page='admin']) #siteDrawer .drawer-additional-links > a > .drawer-arrow {
  display: grid;
  grid-column: 3;
  grid-row: 1;
  width: 20px;
  height: 24px;
  place-items: center;
  justify-self: center;
  margin: 0;
}

/* Explicit icon / label / chevron tracks prevent multilingual labels and
   optional HOT badges from colliding with the navigation affordance. */
body:not([data-page='admin']) #siteDrawer .drawer-links > a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 20px;
  align-items: center;
  min-width: 0;
  text-align: start;
}
body:not([data-page='admin']) #siteDrawer .drawer-links > a > svg {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  flex: none;
  margin: 0;
}
body:not([data-page='admin']) #siteDrawer .drawer-links > a > span:not(.drawer-arrow) {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}
body:not([data-page='admin']) #siteDrawer .drawer-links > a > .drawer-arrow,
body:not([data-page='admin']) #siteDrawer .drawer-quick-links .drawer-arrow {
  display: grid;
  grid-column: 3;
  grid-row: 1;
  width: 20px;
  height: 24px;
  place-items: center;
  justify-self: center;
  margin: 0;
  line-height: 1;
}
body:not([data-page='admin']) #siteDrawer .drawer-feature-mark {
  flex: 0 0 auto;
  margin-inline-start: auto;
  white-space: nowrap;
}
body:not([data-page='admin']) #siteDrawer .drawer-account {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  align-items: center;
  min-width: 0;
}
body:not([data-page='admin']) #siteDrawer .drawer-account > svg {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
}
body:not([data-page='admin']) #siteDrawer .drawer-account > div {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
body:not([data-page='admin']) #siteDrawer .drawer-account > .drawer-arrow {
  grid-column: 3;
  grid-row: 1;
}
body:not([data-page='admin']) #siteDrawer .drawer-quick-links > a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 20px;
  align-items: center;
  min-width: 0;
}
body:not([data-page='admin']) #siteDrawer .drawer-quick-links > a > svg {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  margin: 0;
}
body:not([data-page='admin']) #siteDrawer .drawer-quick-links > a > span:not(.drawer-arrow) {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
body:not([data-page='admin']) #siteDrawer .drawer-accordion-btn {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  align-items: center;
  min-width: 0;
  text-align: start;
}
body:not([data-page='admin']) #siteDrawer .drawer-accordion-btn > img {
  grid-column: 1;
  grid-row: 1;
}
body:not([data-page='admin']) #siteDrawer .drawer-accordion-btn > span:not(.accordion-arrow) {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
body:not([data-page='admin']) #siteDrawer .drawer-accordion-btn > .accordion-arrow {
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
  margin: 0;
}

/* Product cards: responsive grids stay distinct from swipeable product rails. */
body:not([data-page='admin']) .products {
  align-items: stretch;
  gap: 20px !important;
}
body:not([data-page='admin']) .products > .product {
  box-sizing: border-box;
  min-width: 0;
  padding: 14px;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
body:not([data-page='admin']) .product-card-media,
body:not([data-page='admin']) .product-card-media-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f8f9fa;
}
body:not([data-page='admin']) .product-card-media-wrap > .product-card-media {
  height: 100%;
}
body:not([data-page='admin']) .product-card-media > .product-image {
  width: 100%;
  height: 100% !important;
  aspect-ratio: 1 / 1;
  margin: 0 !important;
  object-fit: contain;
  background: #f8f9fa;
}
body:not([data-page='admin']) .products > .product > a:has(> h3) {
  min-width: 0;
}
body:not([data-page='admin']) .products > .product h3 {
  display: -webkit-box;
  min-width: 0;
  min-height: 2.6em;
  height: auto;
  max-height: 2.6em;
  margin: 5px 0 2px;
  overflow: hidden;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body:not([data-page='admin']) .products > .product .product-brand-link {
  min-height: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body:not([data-page='admin']) .products > .product .card-size {
  min-width: 0;
  max-width: 100%;
  margin: 4px 0;
}
body:not([data-page='admin']) .products > .product .card-size select {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  height: 36px;
}
body:not([data-page='admin']) .products > .product > .price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 7px;
  min-width: 0;
  min-height: 0;
  margin: 4px 0 7px;
  line-height: 1.2;
}
body:not([data-page='admin']) .products > .product > .btn {
  flex: 0 0 auto;
  min-height: 40px;
  height: 40px;
  margin-top: auto;
  padding: 7px 8px;
}
body:not([data-page='admin']) .home-product-grid,
body:not([data-page='admin']) .related-products .products {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
body[data-page='home'] #hotOffers .products.home-product-grid,
body[data-page='home'] #newArrivals .products.home-product-grid {
  display: flex !important;
  grid-template-columns: none !important;
  grid-auto-flow: initial !important;
  grid-auto-columns: initial !important;
}
body:not([data-page='admin']) .home-product-grid > .product,
body:not([data-page='admin']) .related-products .products > .product {
  flex: 0 0 220px;
  width: 220px;
  max-width: 240px;
  scroll-snap-align: start;
}
@media (hover: hover) and (min-width: 1024px) {
  body:not([data-page='admin']) .products > .product:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  }
}
@media (min-width: 1024px) {
  body:not([data-page='admin']) .products:not(.home-product-grid):not(.related-products .products) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body:not([data-page='admin']) .products:not(.home-product-grid):not(.related-products .products) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px !important;
  }
}
@media (max-width: 767px) {
  body:not([data-page='admin']) .products:not(.home-product-grid):not(.related-products .products) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
    padding: 0 12px;
    overflow: visible;
    scroll-snap-type: none;
  }
  body:not([data-page='admin']) .home-product-grid,
  body:not([data-page='admin']) .related-products .products {
    gap: 12px !important;
    padding: 2px 12px 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  body:not([data-page='admin']) .home-product-grid > .product,
  body:not([data-page='admin']) .related-products .products > .product {
    flex: 0 0 175px;
    width: 175px;
    min-width: 170px;
    max-width: 185px;
    padding: 10px;
  }
  body:not([data-page='admin']) .products > .product h3 {
    min-height: 2.6em;
    max-height: 2.6em;
    margin: 4px 0 2px;
    font-size: 14px;
    line-height: 1.3;
  }
  body:not([data-page='admin']) .products > .product .card-size select {
    min-height: 32px;
    height: 32px;
    font-size: 12px;
    padding: 4px 7px;
  }
  body:not([data-page='admin']) .products > .product > .price {
    font-size: clamp(16px, 4.5vw, 20px);
    margin: 3px 0 6px;
  }
  body:not([data-page='admin']) .products > .product > .btn {
    min-height: 36px;
    height: 36px;
    padding: 5px 6px;
    font-size: 12px;
    line-height: 1.2;
  }
  body[data-page='home'] #hotOffers .home-product-grid > .product > .btn,
  body[data-page='home'] #newArrivals .home-product-grid > .product > .btn {
    min-height: 36px !important;
    height: 36px !important;
  }
}

/* Compact phone cards override the older home/catalog presentation rules. */
@media (max-width: 767px) {
  body:not([data-page='admin']):not([data-page='category'][data-category='dogs'], [data-page='category'][data-category='cats']) #app .products > .product {
    display: flex;
    flex-direction: column;
    gap: 4px !important;
    padding: 8px 10px !important;
  }
  body:not([data-page='admin']):not([data-page='category'][data-category='dogs'], [data-page='category'][data-category='cats']) #app .products > .product > .product-card-media,
  body:not([data-page='admin']):not([data-page='category'][data-category='dogs'], [data-page='category'][data-category='cats']) #app .products > .product > .product-card-media-wrap {
    width: 100%;
    max-width: 140px !important;
    height: auto;
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
  }
  body:not([data-page='admin']):not([data-page='category'][data-category='dogs'], [data-page='category'][data-category='cats']) #app .products > .product h3 {
    display: -webkit-box;
    min-height: 30px !important;
    max-height: 31.2px !important;
    margin: 4px 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body:not([data-page='admin']):not([data-page='category'][data-category='dogs'], [data-page='category'][data-category='cats']) #app .products > .product .product-brand-link {
    min-height: 0;
    margin: 0 0 2px !important;
    font-size: 11px !important;
    line-height: 1.15;
  }
  body:not([data-page='admin']):where(:not([data-page='category'][data-category='cats'])) #app .products > .product .card-size {
    margin: 0 !important;
    gap: 4px;
    font-size: 11px;
  }
  body:not([data-page='admin']):where(:not([data-page='category'][data-category='cats'])) #app .products > .product .card-size select {
    min-height: 28px !important;
    height: 28px !important;
    padding: 1px 6px !important;
    font-size: 11px !important;
  }
  body:not([data-page='admin']):where(:not([data-page='category'][data-category='cats'])) #app .products > .product > .price {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0;
    line-height: 1.15;
  }
  body:not([data-page='admin']):where(:not([data-page='category'][data-category='cats'])) #app .products > .product > a.inquiry-price-link {
    min-height: 28px !important;
    padding: 3px 6px;
    font-size: 11px;
  }
  body:not([data-page='admin']):not([data-page='category'][data-category='dogs'], [data-page='category'][data-category='cats']) #app .products > .product > .btn {
    min-height: 32px !important;
    height: 32px !important;
    margin-top: 0 !important;
    padding: 4px 0 !important;
    font-size: 12px !important;
  }
  body[data-page='home'] #app #hotOffers .products.home-product-grid > .product {
    flex: 0 0 155px !important;
    width: 155px !important;
    min-width: 155px !important;
    max-width: 155px !important;
  }
}

/* Universal storefront packshot canvas: current and future product cards.
 * Important declarations live in one layer so old, unlayered category overrides
 * cannot reintroduce grey/white media rectangles. Admin/original files stay intact.
 * Multiply is display-only blending, not true removal of embedded backgrounds.
 */
@layer storefront-product-canvas {
  body:not([data-page='admin']) :is(.product, .product-card) {
    background: var(--cream, #fbf6ec) !important;
    background-color: var(--cream, #fbf6ec) !important;
    isolation: isolate;
  }

  body:not([data-page='admin']) :is(.product-card-media, .product-card-media-wrap, .product-image) {
    background: transparent !important;
    background-color: transparent !important;
  }

  body:not([data-page='admin']) :is(img.product-image, .product-card-media img, .product img) {
    mix-blend-mode: multiply !important;
    /* Photographs opt into natural resampling; never sharpen printed text as pixel art. */
    image-rendering: var(--product-image-rendering, crisp-edges) !important;
  }

  body:not([data-page='admin']) :is(.product-card-media, .product-card-media-wrap) {
    margin-bottom: 2px !important;
    padding-bottom: 0 !important;
  }

  body:not([data-page='admin']) .product > .badge:empty {
    display: none !important;
  }
  body:not([data-page='admin']) .product > .heart {
    inset-inline: auto !important;
    left: 10px !important;
    right: auto !important;
  }
  body:not([data-page='admin']) .product > :is(.badge.new, .badge.is-offer) {
    inset-inline: auto !important;
    top: 12px !important;
    left: auto !important;
    right: 10px !important;
    width: max-content !important;
    max-width: calc(100% - 62px) !important;
  }
  body:not([data-page='admin']) .product > .badge.is-offer {
    background: #c43d32 !important;
    color: #fff !important;
  }
  body:not([data-page='admin']) .product > .badge.new:not(.is-offer) {
    background: #49a977 !important;
    color: #fff !important;
  }
}

/* Shared category presentation excludes Dogs/Cats; the explicit responsive
   geometry repair at the end is intentionally shared by ALL categories. */
@layer category-master-blueprint {
  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) {
    --category-master-ink: #1a202c;
    --category-master-paper: #fffefa;
    --category-master-ground: #f8f7f1;
    --category-master-line: #e7e0d1;
    --category-master-muted: #766f5d;
    --category-master-gold: #bd913d;
    --category-master-gold-soft: #f6edd5;
    --font-weight-card-spec: 700;
    --product-image-rendering: auto;
    background: var(--category-master-ground);
    color: var(--category-master-ink);
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) .page {
    box-sizing: border-box;
    width: 100%;
    max-width: 1540px;
    margin-inline: auto;
    padding: 18px clamp(12px, 2.6vw, 36px) 48px;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) main#app {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1350px !important;
    margin-inline: auto !important;
    padding: 0 !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #app > .department-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 12px 48px !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) .catalog {
    display: block !important;
    width: 100% !important;
    margin: 8px auto 0;
    padding: 0;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) .catalog-content {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto;
    direction: rtl;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) .catalog-quick-filters {
    display: none !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) .controls.category-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 8px 0 10px !important;
    padding: 8px 0 !important;
    border-block: 1px solid var(--category-master-line);
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) .catalog-tools {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) .controls .filter-toggle,
  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) .catalog-sort select {
    min-height: 40px;
    padding: 6px 11px;
    border: 1px solid var(--category-master-line);
    border-radius: 10px;
    background: var(--category-master-paper);
    color: var(--category-master-ink);
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) .controls .filter-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    background: #bd913d !important;
    color: #fff !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]):not([data-category="italian-products"]) .catalog-brand-strip {
    display: none !important;
  }

  /* #results is the product grid; .catalog-content remains its full-width wrapper. */
  body[data-page="category"]:where(:not([data-category="dogs"]):not([data-category="cats"])) #results {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
    gap: 9px !important;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 6px 2px 10px !important;
  }

  body[data-page="category"]:where(:not([data-category="dogs"]):not([data-category="cats"])) #results > .product {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    padding: 7px !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
    border: 1px solid var(--category-master-line) !important;
    border-radius: 14px !important;
    background: var(--category-master-paper);
    color: #243d31;
    box-shadow: 0 3px 12px rgb(25 59 38 / 6%);
  }

  body[data-page="category"]:where(:not([data-category="dogs"]):not([data-category="cats"])) #results > .product > :is(.product-card-media-wrap, .product-card-media) {
    box-sizing: border-box !important;
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    min-width: 0 !important;
    height: 195px !important;
    min-height: 0 !important;
    max-height: 195px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
    overflow: hidden !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #results > .product > .product-card-media-wrap > .product-card-media {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-page="category"]:where(:not([data-category="dogs"]):not([data-category="cats"])) #results > .product :is(.product-image, .product-card-media img) {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #results > .product :is(h3, .product-title) {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: calc(var(--line-height-card-title, 1.3) * 2em) !important;
    max-height: calc(var(--line-height-card-title, 1.3) * 2em) !important;
    margin: 2px 0 !important;
    text-align: center !important;
    color: var(--category-master-ink) !important;
    font-size: var(--font-size-card-title, 13px) !important;
    font-weight: var(--font-weight-card-title, 600) !important;
    line-height: var(--line-height-card-title, 1.3) !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #results > .product .product-brand-link {
    color: #4a5568 !important;
    font-size: var(--font-size-card-brand, 11px) !important;
    font-weight: var(--font-weight-card-brand, 400) !important;
    text-align: center !important;
    margin: 0 !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #results > .product .product-weight,
  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #results > .product .card-size {
    margin: 0 !important;
    font-size: var(--font-size-card-spec, 12px) !important;
    color: var(--category-master-muted) !important;
    font-weight: 700 !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #results > .product .price {
    display: flex !important;
    justify-content: center !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin: 2px 0 3px !important;
    color: var(--category-master-ink) !important;
    font-size: var(--font-size-card-price-regular, 15px) !important;
    font-weight: var(--font-weight-card-price-regular, 700) !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #results > .product .price.sale {
    color: #d32f2f !important;
    font-size: var(--font-size-card-price-sale, 16px) !important;
    font-weight: var(--font-weight-card-price-sale, 700) !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #results > .product :is(del, s, .old-price, .old) {
    color: #858b91 !important;
    font-size: var(--font-size-card-price-old, 11px) !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #results > .product :is(.btn, .inquiry-link, .btn-inquiry, button[data-add-to-cart], [data-add-to-cart]) {
    display: inline-flex !important;
    width: 100% !important;
    min-height: 38px !important;
    align-items: center;
    justify-content: center;
    margin-top: auto !important;
    padding: 9px 5px !important;
    border: 1px solid #a77b29 !important;
    border-radius: 8px !important;
    background: #bd913d !important;
    color: #fffefa !important;
    font-size: var(--font-size-card-btn-add, 13px) !important;
    font-weight: var(--font-weight-card-btn-add, 600) !important;
    text-align: center !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #results > .product .heart {
    z-index: 1;
  }

  /* Horizontal taxonomy pills and branch strip; preserve real taxonomy controls. */
  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) :is(.dogs-category-pills, .birds-category-pills, .uniform-category-pills, .category-pills, .branch-strip) {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: 9px;
    margin: 4px auto 12px;
    padding: 6px 0 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) :is(.dogs-category-pills, .birds-category-pills, .uniform-category-pills, .category-pills, .branch-strip)::-webkit-scrollbar {
    display: none;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) :is(.dogs-category-pills, .birds-category-pills, .uniform-category-pills, .category-pills, .branch-strip) :is(button, .branch-card) {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 13px;
    border: 1px solid var(--category-master-line);
    border-radius: 999px;
    background: var(--category-master-paper);
    color: var(--category-master-ink);
    font-weight: 600;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) :is(.dogs-category-pills, .birds-category-pills, .uniform-category-pills, .category-pills, .branch-strip) :is(button.is-current, .branch-card.is-current, .branch-card[aria-pressed="true"]) {
    border-color: #c69b3d;
    background: var(--category-master-gold-soft);
    color: #543e11;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) .uniform-category-branches {
    min-width: 0;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) .uniform-category-branches .dog-panel-subgrid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 9px !important;
    overflow-x: auto !important;
    padding: 6px 0 10px !important;
    scrollbar-width: none !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) .uniform-category-branches .dog-panel-subgrid .dog-panel-subcard {
    box-sizing: border-box;
    display: flex;
    width: auto !important;
    flex: 0 0 auto !important;
    min-height: 44px;
    align-items: center;
    padding: 6px 12px !important;
    gap: 6px !important;
    border: 1px solid var(--category-master-line) !important;
    border-radius: 999px !important;
    background: transparent;
    color: var(--category-master-ink);
    text-align: right;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) .uniform-category-branches .dog-panel-subcard :is(.branch-card-icon, .dog-panel-subcard-icon, img, svg) {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    object-fit: contain !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #catalogFilters :is(.storefront-taxonomy-branches .dog-panel-subgrid, .storefront-taxonomy-branches .branch-strip) {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #catalogFilters .storefront-taxonomy-branches .dog-panel-subcard {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 2px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--category-master-line) !important;
  }

  /* Drawer copies retain native controls, but not the large thumbnail geometry
     of a catalog branch tile. Keep one bounded icon and its real SVG fallback. */
  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #catalogFilters .storefront-taxonomy-branches .branch-card-icon {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 32px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    overflow: hidden !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #catalogFilters .storefront-taxonomy-branches .branch-card-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #catalogFilters .storefront-taxonomy-branches .branch-thumb {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #catalogFilters .storefront-taxonomy-branches .branch-card-icon:has(> .branch-thumb) > svg {
    visibility: hidden !important;
  }

  body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #catalogFilters .storefront-brand-search {
    width: 100% !important;
    min-height: 40px !important;
    margin: 8px 0 !important;
    padding: 8px 10px !important;
  }

  @media (min-width: 1024px) {
    body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) main#app {
      padding: 0 20px !important;
    }

    body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #app > .department-page {
      padding: 0 0 48px !important;
    }

    body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #results > .product :is(h3, .product-title) {
      margin: 2px 0 !important;
    }

    body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #results > .product :is(.btn, .inquiry-link, .btn-inquiry, button[data-add-to-cart], [data-add-to-cart]) {
      min-height: 40px !important;
      padding: 7px 8px !important;
    }

  }

  @media (max-width: 600px) {
    body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #results > .product :is(h3, .product-title) {
      margin: 0 0 6px !important;
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #app > .department-page {
      padding-inline: clamp(12px, 2.6vw, 36px) !important;
    }
    body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #results > .product :is(h3, .product-title) {
      margin: 2px 0 !important;
    }
    body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) #results > .product :is(.btn, .inquiry-link, .btn-inquiry, button[data-add-to-cart], [data-add-to-cart]) {
      min-height: 40px !important;
    }
  }

  @media (max-width: 1023px) {
    body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) .page {
      padding: 18px clamp(12px, 2.6vw, 36px) 48px;
    }

  }

  @media (max-width: 767px) {
    body[data-page="category"]:not([data-category="dogs"]):not([data-category="cats"]) .page {
      padding: 18px 12px 48px;
    }
  }

  /* Responsive geometry shared by every category, including Dogs/Cats.
     Their artwork, taxonomy, typography and purchase behavior remain unchanged.
     Base exclusions use :where() so these rules win within this layer without
     increasing selector specificity or relying on unlayered !important patches. */
  @media (max-width: 767px) {
    body[data-page="category"] #results {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 9px !important;
      padding: 6px 2px 10px !important;
    }
    body[data-page="category"] #results > .product {
      padding: 8px !important;
      gap: 4px !important;
      height: auto !important;
      min-height: 0 !important;
    }
    body[data-page="category"] #results > .product > :is(.product-card-media-wrap, .product-card-media) {
      flex: 0 0 auto !important;
      width: 100% !important;
      min-width: 0 !important;
      aspect-ratio: auto !important;
      height: 125px !important;
      min-height: 0 !important;
      max-height: 125px !important;
      padding: 0 !important;
      margin: 0 auto 4px auto !important;
    }
    body[data-page="category"] #results > .product :is(.product-image, .product-card-media img) {
      height: 120px !important;
      max-height: 120px !important;
      width: 100% !important;
      object-fit: contain !important;
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    body[data-page="category"] #results {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 14px !important;
      padding: 8px !important;
    }
    body[data-page="category"] #results > .product {
      padding: 10px !important;
    }
    body[data-page="category"] #results > .product > :is(.product-card-media-wrap, .product-card-media) {
      flex: 0 0 auto !important;
      min-width: 0 !important;
      aspect-ratio: auto !important;
      height: 160px !important;
      min-height: 0 !important;
      max-height: 160px !important;
    }
    body[data-page="category"] #results > .product :is(.product-image, .product-card-media img) {
      height: 150px !important;
      max-height: 150px !important;
    }
  }

  @media (min-width: 1024px) {
    body[data-page="category"] #results {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 16px !important;
      padding: 10px 0 !important;
    }
    body[data-page="category"] #results > .product {
      padding: 12px !important;
      gap: 6px !important;
    }
    body[data-page="category"] #results > .product > :is(.product-card-media-wrap, .product-card-media) {
      flex: 0 0 175px !important;
      height: 175px !important;
      min-height: 0 !important;
      max-height: 175px !important;
      min-width: 0 !important;
      aspect-ratio: auto !important;
    }
    body[data-page="category"] #results > .product :is(.product-image, .product-card-media img) {
      height: 165px !important;
      max-height: 165px !important;
    }
  }
}

/* Shared storefront footer: preserve its real links, contacts and authentication. */
@layer footer-refine {
}

/* Checkout wizard: one pane at a time, independent of viewport width. */
body[data-page="checkout"] #orderForm.checkout-layout {
  display: block;
  max-width: 760px;
  margin-inline: auto;
}
body[data-page="checkout"] .checkout-step-pane {
  display: grid;
  gap: 14px;
  min-width: 0;
  outline: none;
}
body[data-page="checkout"] #orderForm .checkout-step-pane[hidden] {
  display: none !important;
}
body[data-page="checkout"] .checkout-step-actions {
  display: flex;
  gap: 12px;
}
body[data-page="checkout"] .checkout-step-actions .btn {
  flex: 1;
  min-height: 46px;
}
body[data-page="checkout"] .checkout-step-back {
  margin-block-end: 10px;
}

/* Storefront-only sticky glass header and cart feedback. */
/* An overflow-x:hidden body creates a non-scrolling sticky ancestor.
   Clip horizontal overflow without taking scrolling away from the viewport.
   Inline modal scroll locks still take precedence over these normal rules. */
body:not([data-page="admin"]):not([data-page="login"]):not([data-page="register"]):not([data-page="forgot-password"]):not([data-admin-gate]) {
  overflow-x: clip;
  overflow-y: visible;
}
@keyframes badgeBouncePulse {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.4) rotate(-8deg); }
  60% { transform: scale(.9) rotate(6deg); }
  80% { transform: scale(1.15) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes badgeOpacityPulse {
  0%, 100% { opacity: 1; }
  45% { opacity: .62; }
}

#count.cart-badge.badge-pop,
#count.badge-pop {
  transform-origin: center;
  animation: badgeBouncePulse 450ms cubic-bezier(.175, .885, .32, 1.275);
}

body:not([data-page="admin"]):not([data-page="login"]):not([data-page="register"]):not([data-page="forgot-password"]):not([data-admin-gate]) > header.main-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .3s, backdrop-filter .3s, -webkit-backdrop-filter .3s, box-shadow .3s, border-color .3s;
}

body:not([data-page="admin"]):not([data-page="login"]):not([data-page="register"]):not([data-page="forgot-password"]):not([data-admin-gate]) > header.main-header.header-scrolled {
  background: rgba(6, 35, 25, .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(189, 145, 61, .3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

/* Keep the header's content surfaces transparent so the glass reads through. */
body:not([data-page="admin"]):not([data-page="login"]):not([data-page="register"]):not([data-page="forgot-password"]):not([data-admin-gate]) > header.main-header.header-scrolled > :is(.header-utility, .top, #categoriesNav) {
  background-color: transparent;
}
/* Only primary navigation labels: dropdown panels keep their own dark text. */
body > header.main-header.header-scrolled > #categoriesNav > a,
body > header.main-header.header-scrolled > #categoriesNav > .nav-item > .nav-link {
  color: #fff8e7 !important;
}
body > header.main-header.header-scrolled > #categoriesNav > a:is(:hover, :focus-visible),
body > header.main-header.header-scrolled > #categoriesNav > .nav-item > .nav-link:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, .1) !important;
}

@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  body:not([data-page="admin"]):not([data-page="login"]):not([data-page="register"]):not([data-page="forgot-password"]):not([data-admin-gate]) > header.main-header.header-scrolled {
    background: #0d3b2b;
  }
}

@media (prefers-reduced-motion: reduce) {
  #count.cart-badge.badge-pop,
  #count.badge-pop {
    animation: badgeOpacityPulse 450ms ease;
  }

  body:not([data-page="admin"]):not([data-page="login"]):not([data-page="register"]):not([data-page="forgot-password"]):not([data-admin-gate]) > header.main-header {
    transition: none;
  }
}

@layer homepage-master {
/* Homepage hero + spacing pass. Keep this final block after the accumulated
   storefront overrides above; the foreground art remains fully contained. */
body[data-page="home"] #app > .home-hero-carousel {
  box-sizing: border-box !important;
  width: min(100%, 1360px) !important;
  height: 450px !important;
  min-height: 0 !important;
  max-height: 460px !important;
  aspect-ratio: auto !important;
  margin: 0 auto 8px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: #103b2c !important;
}

body[data-page="home"] .home-hero-carousel .hero-artwork,
body[data-page="home"] .home-hero-carousel .home-hero-media,
body[data-page="home"] .home-hero-carousel .home-hero-italian > a,
body[data-page="home"] .home-hero-carousel .home-hero-managed > a,
body[data-page="home"] .home-hero-carousel .hero-delivery-art {
  inset: 0 !important;
}

body[data-page="home"] .home-hero-carousel .hero-artwork {
  height: 100% !important;
}

body[data-page="home"] .home-hero-carousel .hero-artwork :is(picture, img),
body[data-page="home"] .home-hero-carousel .home-hero-media img,
body[data-page="home"] .home-hero-carousel .home-hero-italian > a img,
body[data-page="home"] .home-hero-carousel .home-hero-managed > a :is(picture, img) {
  object-fit: contain !important;
  object-position: center !important;
}

body[data-page="home"] .home-hero-carousel .hero-slide-copy {
  min-height: 138px !important;
  padding: 18px 32px 38px !important;
  border-top: 0 !important;
  background: linear-gradient(
    to top,
    rgb(5 31 22 / 94%) 0%,
    rgb(5 31 22 / 78%) 48%,
    rgb(5 31 22 / 28%) 82%,
    transparent 100%
  ) !important;
  backdrop-filter: none !important;
}

body[data-page="home"] .home-hero-carousel .hero-slide-title {
  font-size: clamp(20px, 2.1vw, 28px) !important;
}

body[data-page="home"] .home-hero-carousel .hero-slide-subtitle {
  font-size: 15px !important;
}

body[data-page="home"] .home-hero-carousel .home-hero-arrow {
  top: 50% !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgb(255 248 232 / 66%) !important;
  background: rgb(255 250 239 / 64%) !important;
  color: #103b2c !important;
  box-shadow: 0 5px 18px rgb(5 31 22 / 25%) !important;
  backdrop-filter: blur(12px);
  transform: translateY(-50%) !important;
}

body[data-page="home"] .home-hero-carousel .home-hero-arrow-left { left: 16px !important; }
body[data-page="home"] .home-hero-carousel .home-hero-arrow-right { right: 16px !important; }

body[data-page="home"] .home-hero-carousel .home-hero-dots {
  bottom: 4px !important;
}

body[data-page="home"] .home-hero-carousel .home-hero-dot::after {
  border-color: rgb(255 248 232 / 90%) !important;
  background: rgb(255 248 232 / 62%) !important;
}

body[data-page="home"] .home-hero-carousel .home-hero-dot[aria-current="true"]::after {
  width: 16px !important;
  border-color: #e3bd66 !important;
  background: #e3bd66 !important;
  transform: none !important;
}

body[data-page="home"] .home-category-section,
body[data-page="home"] .home-category-rail {
  margin-block: 0 !important;
}

body[data-page="home"] .home-product-section,
body[data-page="home"] .home-discovery-pills,
body[data-page="home"] .home-discovery-needs,
body[data-page="home"] .home-discovery-brands,
body[data-page="home"] .home-discovery-delivery,
body[data-page="home"] .home-brands-showcase {
  margin-block-start: 0 !important;
  margin-block-end: 12px !important;
}

@media (min-width: 1024px) {
  body[data-page="home"] .home-category-section {
    display: none !important;
  }

  body[data-page="home"] .home-product-section {
    box-sizing: border-box;
    width: min(100%, 1360px);
    margin-inline: auto;
    padding-inline: 0 !important;
  }

  /* Desktop merchandising stays one bounded rail; the catalog owns grids. */
  body[data-page="home"] :is(#hotOffers, #newArrivals) .products.home-product-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    grid-auto-flow: initial !important;
    grid-auto-columns: initial !important;
    align-items: stretch;
    gap: 16px !important;
    width: 100%;
    min-width: 0;
    padding: 2px 2px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: thin;
  }

  body[data-page="home"] .home-product-grid > .product {
    flex: 0 0 calc((100% - 48px) / 4) !important;
    width: auto !important;
    min-width: 220px !important;
    max-width: none !important;
    scroll-snap-align: start;
  }
  body[data-page="home"] .home-product-grid > .product .product-weight {
    margin-block: 2px !important;
  }
}

@media (max-width: 1023px) {
  body[data-page="home"] .home-category-section {
    display: block !important;
  }

  body[data-page="home"] .home-category-rail {
    display: flex !important;
    overflow-x: auto !important;
  }
}

@media (max-width: 768px) {
  body[data-page="home"] #app > .home-hero-carousel {
    width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    aspect-ratio: auto !important;
    margin: 0 0 6px !important;
    border-radius: 12px !important;
  }

  /* Mobile art is intentionally cover-fitted in the requested 200px stage.
     Baked text belongs to the original image; extra captions stay hidden. */
  body[data-page="home"] #app .home-hero-carousel .home-hero-slide {
    position: relative !important;
    display: none !important;
    inset: auto !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    border-radius: 12px !important;
    aspect-ratio: auto !important;
  }
  body[data-page="home"] #app .home-hero-carousel .home-hero-slide.is-active {
    display: block !important;
  }
  body[data-page="home"] #app .home-hero-carousel .hero-slide-backdrop {
    display: none !important;
  }
  body[data-page="home"] #app .home-hero-carousel :is(
    .hero-artwork, .home-hero-media, .home-hero-italian > a,
    .home-hero-managed > a, .hero-delivery-art, picture
  ) {
    position: relative !important;
    display: block !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body[data-page="home"] #app .home-hero-carousel .home-hero-slide img {
    position: relative !important;
    display: block !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 200px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    filter: none !important;
  }

  body[data-page="home"] .home-hero-carousel .hero-artwork,
  body[data-page="home"] .home-hero-carousel .home-hero-media,
  body[data-page="home"] .home-hero-carousel .home-hero-italian > a,
  body[data-page="home"] .home-hero-carousel .home-hero-managed > a,
  body[data-page="home"] .home-hero-carousel .hero-delivery-art {
    inset: 0 !important;
  }

  body[data-page="home"] .home-hero-carousel[dir="ltr"] :is(
    .hero-artwork, .home-hero-media, .home-hero-italian > a,
    .home-hero-managed > a, .hero-delivery-art
  ) {
    inset: 0 !important;
  }

  body[data-page="home"] .home-hero-carousel .hero-slide-copy {
    display: none !important;
    position: relative !important;
    min-height: 0 !important;
    gap: 8px !important;
    padding: 8px 12px 30px !important;
    background: linear-gradient(
      to top,
      rgb(5 31 22 / 96%) 0%,
      rgb(5 31 22 / 82%) 58%,
      rgb(5 31 22 / 30%) 100%
    ) !important;
  }

  body[data-page="home"] .home-hero-carousel .home-hero-arrow {
    top: 50% !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    background: rgb(255 250 239 / 54%) !important;
    transform: translateY(-50%) !important;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-arrow::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
  }
  body[data-page="home"] .home-hero-carousel .home-hero-arrow svg {
    width: 16px !important;
    height: 16px !important;
  }
  body[data-page="home"] #app .home-hero-carousel :is(.desktop-hero-shop, .hero-slide-cta) {
    display: none !important;
  }
  body[data-page="home"] #app .home-category-rail > .home-category-bubble {
    flex: 0 0 80px !important;
    gap: 5px !important;
  }
  body[data-page="home"] #app .home-category-rail > .home-category-bubble img {
    box-sizing: border-box !important;
    width: 72px !important;
    height: 72px !important;
    border: 2px solid #e3d1a4 !important;
    box-shadow: 0 3px 9px rgb(23 59 43 / 12%) !important;
  }
  body[data-page="home"] #app .home-category-rail > .home-category-bubble strong {
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  body[data-page="home"] .home-hero-carousel .home-hero-arrow-left { left: 8px !important; }
  body[data-page="home"] .home-hero-carousel .home-hero-arrow-right { right: 8px !important; }

  body[data-page="home"] .home-category-section {
    padding-block: 4px 6px !important;
    margin-block-end: 6px !important;
  }

  body[data-page="home"] .home-product-section,
  body[data-page="home"] .home-discovery-pills,
  body[data-page="home"] .home-discovery-needs,
  body[data-page="home"] .home-discovery-brands,
  body[data-page="home"] .home-discovery-delivery,
  body[data-page="home"] .home-brands-showcase {
    margin-block-end: 10px !important;
  }

  body[data-page="home"] .home-product-section {
    padding: 6px 12px 8px !important;
  }

  body[data-page="home"] .products.home-product-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: 12px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
  }

  body[data-page="home"] :is(#hotOffers, #newArrivals) .products.home-product-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: 12px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body[data-page="home"] .home-product-grid > .product {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 calc((100% - 12px) / 2) !important;
  }

  body[data-page="home"] #app :is(#hotOffers, #newArrivals) .home-product-grid > .product {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 calc((100% - 12px) / 2) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .home-hero-carousel .home-hero-arrow {
    backdrop-filter: none;
  }
}
}

/* Store help is a compact desktop card; mobile visitors use the fixed
   five-action navigation instead of a floating control. */
@media (min-width: 768px) {
  body:not([data-page='admin']) .support-launcher {
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    left: 24px !important;
    right: auto !important;
    bottom: 24px !important;
    width: 60px;
    height: 60px;
    color: #fff;
    background: rgba(6, 35, 25, 0.92);
    border: 1px solid rgba(207, 164, 73, 0.85);
    box-shadow: 0 10px 28px rgba(6, 35, 25, 0.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
      transform 180ms ease,
      box-shadow 180ms ease,
      background-color 180ms ease;
  }

  body:not([data-page='admin']) .support-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 32px rgba(6, 35, 25, 0.3);
  }

  body:not([data-page='admin']) .support-launcher:not(.is-open)::before {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    width: 10px;
    height: 10px;
    border: 2px solid #fdfbf7;
    border-radius: 50%;
    background: #27ae60;
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.55);
    content: '';
    animation: supportLauncherPulse 1.9s ease-out infinite;
  }

  body:not([data-page='admin']) .support-choice-panel {
    position: fixed !important;
    inset: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: 98px !important;
    left: 24px !important;
    width: min(380px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    gap: 10px !important;
    padding: 18px !important;
    overflow: hidden;
    border: 1px solid rgba(189, 145, 61, 0.28);
    border-radius: 20px;
    background: rgba(255, 253, 248, 0.98);
    box-shadow: 0 18px 48px rgba(6, 35, 25, 0.2);
    color: #062319;
    direction: rtl;
  }

  body:not([data-page='admin']) .support-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  body:not([data-page='admin']) .support-panel-brand {
    display: grid;
    gap: 6px;
  }

  body:not([data-page='admin']) .support-panel-heading {
    padding: 0;
    color: #062319;
    font-size: 18px;
    font-weight: 800;
  }

  body:not([data-page='admin']) .support-panel-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #647166;
    font-size: 12px;
  }

  body:not([data-page='admin']) .support-panel-status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27ae60;
  }

  body:not([data-page='admin']) #supportPanelClose {
    display: inline-grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #e5e1d8;
    border-radius: 12px;
    background: #fff;
    color: #284637;
    cursor: pointer;
  }

  body:not([data-page='admin']) #supportPanelClose:hover {
    background: #f4f1e9;
  }

  body:not([data-page='admin']) .support-panel-intro {
    margin: 0;
    color: #5f6a62;
    font-size: 13px;
    line-height: 1.6;
  }

  body:not([data-page='admin']) .support-choice-panel > #waFloat {
    display: flex !important;
    min-height: 52px;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #126b43 !important;
    border-radius: 13px;
    background: #126b43 !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 750;
    text-decoration: none;
  }

  body:not([data-page='admin']) .support-choice-panel > #waFloat[hidden] {
    display: none !important;
  }

  body:not([data-page='admin']) .support-choice-panel > #waFloat > svg {
    width: 23px !important;
    height: 23px !important;
    padding: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: currentColor !important;
  }

  body:not([data-page='admin']) .support-choice-panel > #supportCallLink {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #d8d8cf;
    border-radius: 13px;
    background: #fff;
    color: #183d2d;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }

  body:not([data-page='admin']) #supportCallNumber {
    color: #6d766f;
    font-size: 12px;
    font-weight: 500;
  }

  body:not([data-page='admin']) .support-choice-panel > #chatToggle {
    min-height: 48px;
    border-top: 1px solid #eee9dd !important;
    border-radius: 0;
    color: #4d5b51;
    font-size: 13px;
  }

  body:not([data-page='admin']) .support-choice-panel > #chatToggle > svg {
    width: 38px !important;
    height: 38px !important;
    padding: 8px !important;
  }

  body:not([data-page='admin']) .support-launcher:focus-visible,
  body:not([data-page='admin']) #supportPanelClose:focus-visible,
  body:not([data-page='admin']) .support-choice-panel > a:focus-visible,
  body:not([data-page='admin']) .support-choice-panel > #chatToggle:focus-visible {
    outline: 3px solid #bd913d;
    outline-offset: 3px;
  }
}

@keyframes supportLauncherPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.55);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(39, 174, 96, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
  }
}

@media (max-width: 767px) {
  body:not([data-page='admin']) {
    padding-bottom: var(--bottom-nav-height, calc(74.75px + env(safe-area-inset-bottom, 0px)));
  }

  body:not([data-page='admin']) > nav.bottom {
    display: grid !important;
    position: fixed;
    inset: auto 0 0;
    z-index: 20;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: initial;
    align-items: stretch;
    padding: 5px max(6px, env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid #e2dacb;
    background: var(--cream);
    color: var(--green);
    direction: rtl;
    box-shadow: 0 -3px 18px #173b2210;
  }

  body:not([data-page='admin']) > nav.bottom > a {
    display: flex;
    min-width: 0;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    padding: 4px 2px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--green);
    text-align: center;
    line-height: 1.15;
  }

  body:not([data-page='admin']) > nav.bottom > a svg {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  body:not([data-page='admin']) > nav.bottom > a small {
    display: block;
    max-width: 100%;
    font-size: 12.5px;
    font-weight: 600;
    white-space: normal;
  }

  body:not([data-page='admin']) > nav.bottom > a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -3px;
  }

  body:not([data-page='admin']) .support-launcher,
  body:not([data-page='admin']) .support-choice-panel {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not([data-page='admin']) .support-launcher:not(.is-open)::before {
    animation: none;
    box-shadow: none;
  }
  body:not([data-page='admin']) .support-launcher {
    transition: none;
  }
}

@layer product-card-standard {
/* One typography and spacing scale for every storefront product card. */
body:not([data-page='admin']) #app #results > article.product,
body:not([data-page='admin'])[data-page='category'][data-category] #app #results > article.product,
body:not([data-page='admin'])[data-page='offers'] #app #results > article.product,
body:not([data-page='admin'])[data-page='home'] #app :is(
  .products > article.product,
  #hotOffers .products > article.product,
  #newArrivals .products > article.product
),
body:not([data-page='admin']) #app .related-products .products > article.product {
  box-sizing: border-box !important;
  padding: 16px !important;
  border-radius: 16px !important;
  background: #fff !important;
}

body:not([data-page='admin']) #app #results > article.product h3,
body:not([data-page='admin'])[data-page='category'][data-category] #app #results > article.product h3,
body:not([data-page='admin'])[data-page='offers'] #app #results > article.product h3,
body:not([data-page='admin'])[data-page='home'] #app :is(
  .products > article.product h3,
  #hotOffers .products > article.product h3,
  #newArrivals .products > article.product h3
),
body:not([data-page='admin']) #app .related-products .products > article.product h3 {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 0 2px !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body:not([data-page='admin']) #app #results > article.product .product-brand-link,
body:not([data-page='admin'])[data-page='category'][data-category] #app #results > article.product .product-brand-link,
body:not([data-page='admin'])[data-page='offers'] #app #results > article.product .product-brand-link,
body:not([data-page='admin'])[data-page='home'] #app :is(
  .products > article.product .product-brand-link,
  #hotOffers .products > article.product .product-brand-link,
  #newArrivals .products > article.product .product-brand-link
),
body:not([data-page='admin']) #app .related-products .products > article.product .product-brand-link,
body:not([data-page='admin']) #app #results > article.product .product-origin,
body:not([data-page='admin'])[data-page='category'][data-category] #app #results > article.product .product-origin,
body:not([data-page='admin'])[data-page='home'] #app :is(
  .products > article.product .product-origin,
  #hotOffers .products > article.product .product-origin,
  #newArrivals .products > article.product .product-origin
) {
  margin-bottom: 2px !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

body:not([data-page='admin']) #app #results > article.product .product-weight,
body:not([data-page='admin'])[data-page='category'][data-category] #app #results > article.product .product-weight,
body:not([data-page='admin'])[data-page='offers'] #app #results > article.product .product-weight,
body:not([data-page='admin'])[data-page='home'] #app :is(
  .products > article.product .product-weight,
  #hotOffers .products > article.product .product-weight,
  #newArrivals .products > article.product .product-weight
),
body:not([data-page='admin']) #app #results > article.product .size-label,
body:not([data-page='admin'])[data-page='category'][data-category] #app #results > article.product .size-label,
body:not([data-page='admin'])[data-page='home'] #app :is(
  .products > article.product .size-label,
  #hotOffers .products > article.product .size-label,
  #newArrivals .products > article.product .size-label
),
body:not([data-page='admin']) #app #results > article.product .card-size,
body:not([data-page='admin'])[data-page='category'][data-category] #app #results > article.product .card-size,
body:not([data-page='admin'])[data-page='offers'] #app #results > article.product .card-size,
body:not([data-page='admin'])[data-page='home'] #app :is(
  .products > article.product .card-size,
  #hotOffers .products > article.product .card-size,
  #newArrivals .products > article.product .card-size
) {
  color: #9ca3af !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

body:not([data-page='admin']) #app #results > article.product .card-size select,
body:not([data-page='admin'])[data-page='category'][data-category] #app #results > article.product .card-size select,
body:not([data-page='admin'])[data-page='offers'] #app #results > article.product .card-size select,
body:not([data-page='admin'])[data-page='home'] #app :is(
  .products > article.product .card-size select,
  #hotOffers .products > article.product .card-size select,
  #newArrivals .products > article.product .card-size select
) {
  color: #9ca3af !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

body:not([data-page='admin']) #app #results > article.product > .price,
body:not([data-page='admin'])[data-page='category'][data-category] #app #results > article.product > .price,
body:not([data-page='admin'])[data-page='offers'] #app #results > article.product > .price,
body:not([data-page='admin'])[data-page='home'] #app :is(
  .products > article.product > .price,
  #hotOffers .products > article.product > .price,
  #newArrivals .products > article.product > .price
),
body:not([data-page='admin']) #app .related-products .products > article.product > .price {
  color: #062319 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

body:not([data-page='admin']) #app #results > article.product > .btn,
body:not([data-page='admin'])[data-page='category'][data-category] #app #results > article.product > .btn:not(.inquiry-link):not([href*='wa.me']),
body:not([data-page='admin'])[data-page='offers'] #app #results > article.product > .btn,
body:not([data-page='admin'])[data-page='home'] #app :is(
  .products > article.product > .btn,
  #hotOffers .products > article.product > .btn,
  #newArrivals .products > article.product > .btn
),
body:not([data-page='admin']) #app .related-products .products > article.product > .btn {
  height: 40px !important;
  min-height: 40px !important;
  padding-block: 0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

@media (max-width: 767px) {
  body:not([data-page='admin']) #app #results > article.product,
  body:not([data-page='admin'])[data-page='category'][data-category] #app #results > article.product,
  body:not([data-page='admin'])[data-page='offers'] #app #results > article.product,
  body:not([data-page='admin'])[data-page='home'] #app :is(
    .products > article.product,
    #hotOffers .products > article.product,
    #newArrivals .products > article.product
  ),
  body:not([data-page='admin']) #app .related-products .products > article.product {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  body:not([data-page='admin']) #app #results > article.product h3,
  body:not([data-page='admin'])[data-page='category'][data-category] #app #results > article.product h3,
  body:not([data-page='admin'])[data-page='offers'] #app #results > article.product h3,
  body:not([data-page='admin'])[data-page='home'] #app :is(
    .products > article.product h3,
    #hotOffers .products > article.product h3,
    #newArrivals .products > article.product h3
  ),
  body:not([data-page='admin']) #app .related-products .products > article.product h3 {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  body:not([data-page='admin']) #app #results > article.product .product-brand-link,
  body:not([data-page='admin'])[data-page='category'][data-category] #app #results > article.product .product-brand-link,
  body:not([data-page='admin'])[data-page='offers'] #app #results > article.product .product-brand-link,
  body:not([data-page='admin'])[data-page='home'] #app :is(
    .products > article.product .product-brand-link,
    #hotOffers .products > article.product .product-brand-link,
    #newArrivals .products > article.product .product-brand-link
  ),
  body:not([data-page='admin']) #app .related-products .products > article.product .product-brand-link,
  body:not([data-page='admin']) #app #results > article.product .product-origin,
  body:not([data-page='admin'])[data-page='category'][data-category] #app #results > article.product .product-origin,
  body:not([data-page='admin'])[data-page='home'] #app :is(
    .products > article.product .product-origin,
    #hotOffers .products > article.product .product-origin,
    #newArrivals .products > article.product .product-origin
  ) {
    font-size: 11px !important;
  }

  body:not([data-page='admin']) #app #results > article.product > .price,
  body:not([data-page='admin'])[data-page='category'][data-category] #app #results > article.product > .price,
  body:not([data-page='admin'])[data-page='offers'] #app #results > article.product > .price,
  body:not([data-page='admin'])[data-page='home'] #app :is(
    .products > article.product > .price,
    #hotOffers .products > article.product > .price,
    #newArrivals .products > article.product > .price
  ),
  body:not([data-page='admin']) #app .related-products .products > article.product > .price {
    font-size: 16px !important;
  }

  body:not([data-page='admin']) #app #results > article.product > .btn,
  body:not([data-page='admin'])[data-page='category'][data-category] #app #results > article.product > .btn:not(.inquiry-link):not([href*='wa.me']),
  body:not([data-page='admin'])[data-page='offers'] #app #results > article.product > .btn,
  body:not([data-page='admin'])[data-page='home'] #app :is(
    .products > article.product > .btn,
    #hotOffers .products > article.product > .btn,
    #newArrivals .products > article.product > .btn
  ),
  body:not([data-page='admin']) #app .related-products .products > article.product > .btn {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
  }
}
}

/* Product details: image-first on phones, without changing catalog card geometry. */
@layer pdp-cart {
  body[data-page='product'] .pdp-gallery-stage {
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr) !important;
    background: #fff !important;
  }
  body[data-page='product'] .gallery :is(.gallery-slides, .zoom-image, .gallery-slide) {
    height: 100% !important;
    min-height: 0 !important;
  }
  body[data-page='product'] .gallery .zoom-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  body[data-page='product'] .gallery-thumbnails.gallery-pagination {
    justify-content: center !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  body[data-page='product'] .gallery-thumbnails.gallery-pagination button {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-page='product'] .gallery-pagination button::after {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #d7d4ca !important;
  }
  body[data-page='product'] .gallery-pagination button[aria-pressed='true']::after {
    width: 20px !important;
    background: #bd913d !important;
  }
  body[data-page='product'] .detail-info > .crumb {
    padding: 0 !important;
    margin: 0 0 12px !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere !important;
  }
  body[data-page='product'] .detail-info h1 {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 10px !important;
    color: #062319 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }
  body[data-page='product'] .detail-info > .price {
    margin: 14px 0 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
  }
  body[data-page='product'] .detail-info > .sizes {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: fit-content !important;
    max-width: 100% !important;
    gap: 8px !important;
    margin: 14px 0 !important;
  }
  body[data-page='product'] .detail .sizes [data-size] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 6px 16px !important;
    border: 1.5px solid #cbd5cc !important;
    border-radius: 20px !important;
    background: #fff !important;
    color: #062319 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  body[data-page='product'] .detail .sizes [data-size][aria-pressed='true'] {
    border-color: #062319 !important;
    background: #edf4ef !important;
    color: #062319 !important;
  }
  body[data-page='product'] .detail-info .purchase {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  body[data-page='product'] .purchase .qty {
    flex: 0 0 auto !important;
    height: 48px !important;
  }
  body[data-page='product'] .detail-info .purchase > .btn.gold {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    white-space: normal !important;
  }
  body[data-page='product'] .pdp-trust-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 14px 0 !important;
  }
  body[data-page='product'] .pdp-trust-item {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-height: 80px !important;
    height: 100% !important;
    gap: 7px !important;
    padding-inline: 3px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }
  body[data-page='product'] .pdp-trust-item span {
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  body[data-page='product'] :is(.pdp-section-body, .detail-description-extra) p {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: pre-line !important;
    -webkit-line-clamp: unset !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
  }
  body[data-page='product'] .pdp-image-unavailable {
    color: #6b7280 !important;
    text-align: center !important;
  }
  @media (min-width: 1024px) {
    body[data-page='product'] #app {
      overflow-x: clip !important;
      overflow-y: visible !important;
    }

    body[data-page='product'] .detail .gallery {
      position: relative !important;
      top: auto !important;
      align-self: start !important;
      width: 100% !important;
      max-width: 520px !important;
    }
    body[data-page='product'] .detail-info h1 {
      margin-bottom: 14px !important;
      font-size: 30px !important;
      font-weight: 700 !important;
      line-height: 1.3 !important;
    }
    body[data-page='product'] .detail-info > .crumb {
      margin-bottom: 12px !important;
      color: #6b7280 !important;
      font-size: 14px !important;
    }
    body[data-page='product'] .detail-info > .price {
      margin: 0 0 18px !important;
      color: #b91c1c !important;
      font-size: 32px !important;
      font-weight: 800 !important;
    }
    body[data-page='product'] .detail .sizes [data-size] {
      padding: 8px 18px !important;
      border-radius: 20px !important;
      font-size: 14px !important;
    }
    body[data-page='product'] .purchase .qty {
      height: 48px !important;
      font-size: 16px !important;
    }
    body[data-page='product'] .purchase .qty :is(button, span) {
      font-size: 16px !important;
      font-weight: 700 !important;
    }
    body[data-page='product'] .detail-info .purchase > .btn.gold {
      height: 48px !important;
      min-height: 48px !important;
      font-size: 16px !important;
      font-weight: 700 !important;
    }
    body[data-page='product'] .detail-info .pdp-description > summary {
      margin-bottom: 12px !important;
      font-size: 20px !important;
      font-weight: 700 !important;
    }
    body[data-page='product'] :is(.pdp-section-body, .detail-description-extra) p {
      color: #374151 !important;
      font-size: 15px !important;
      line-height: 1.75 !important;
    }
    body[data-page='product'] .pdp-trust-item {
      font-size: 12px !important;
    }
  }
  @media (max-width: 767px) {
    body[data-page='product'] .detail-info > .crumb {
      margin-bottom: 4px !important;
      color: #6b7280 !important;
      font-size: 13px !important;
      font-weight: 500 !important;
    }
    body[data-page='product'] .detail-info h1 {
      margin-bottom: 8px !important;
      color: #062319 !important;
      font-size: 20px !important;
      font-weight: 700 !important;
      line-height: 1.35 !important;
    }
    body[data-page='product'] .detail-info > .price {
      margin: 0 0 12px !important;
      color: #b91c1c !important;
      font-size: 24px !important;
      font-weight: 800 !important;
    }
    body[data-page='product'] .detail .sizes [data-size] {
      font-size: 13px !important;
      font-weight: 600 !important;
    }
    body[data-page='product'] .detail-info .purchase > .btn.gold {
      font-size: 15px !important;
      font-weight: 700 !important;
    }
    body[data-page='product'] .purchase .qty span {
      font-size: 15px !important;
      font-weight: 600 !important;
    }
    body[data-page='product'] .detail-info .pdp-description > summary {
      font-size: 16px !important;
      font-weight: 700 !important;
    }
    body[data-page='product'] .pdp-description .pdp-section-body p {
      color: #374151 !important;
      font-size: 14px !important;
      line-height: 1.65 !important;
    }
  }
}

/* Final mobile-only PDP type and fitting overrides. Desktop typography stays
   governed by the established >=1024px rules. */
@media (max-width: 767px) {
  body[data-page='product'] .page:has(.detail),
  body[data-page='product'] .detail,
  body[data-page='product'] .detail-info {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-page='product'] .detail-info h1 {
    max-width: 100% !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  body[data-page='product'] .detail-info > .price {
    max-width: 100% !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    flex-wrap: wrap !important;
    overflow-wrap: anywhere !important;
  }

  body[data-page='product'] .detail .sizes {
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
  }

  body[data-page='product'] .detail .sizes [data-size] {
    min-height: 36px !important;
    padding: 5px 10px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body[data-page='product'] .detail-info .purchase {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  body[data-page='product'] .purchase .qty {
    flex: 0 0 auto !important;
    align-self: stretch !important;
  }

  body[data-page='product'] .detail-info .purchase > .btn.gold {
    flex: 1 1 9rem !important;
    min-width: min(100%, 9rem) !important;
    max-width: 100% !important;
    align-self: stretch !important;
    min-height: 46px !important;
    height: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
  }

  body[data-page='product'] .pdp-description .pdp-section-body p,
  body[data-page='product'] :is(.pdp-section-body, .detail-description-extra) p {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  body[data-page='product'] .detail-info > :is(.pdp-subtitle, .detail-category),
  body[data-page='product'] .detail-info :is(.pdp-description, .pdp-accordions, .pdp-trust-strip) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  html:has(body[data-page='product']) {
    overflow-x: clip;
  }
}


@layer pdp-cart {
  /* Own the desktop layout inside this layer: unlayered important rules
     cannot override pdp-cart's important declarations. Phone stays unchanged. */
  @media (min-width: 1024px) {
    html:is([lang], [dir]) body[data-page="product"] .detail {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      gap: 24px !important;
      direction: ltr !important;
    }
    body[data-page="product"] .gallery {
      grid-column: 1 !important;
      grid-row: 1 !important;
      width: 100% !important;
      max-width: none !important;
    }
    body[data-page="product"] .detail-info {
      grid-column: 2 !important;
      grid-row: 1 !important;
      direction: rtl !important;
    }
    html[dir="ltr"] body[data-page="product"] .detail-info {
      direction: ltr !important;
    }
    body[data-page="product"] .pdp-gallery-stage {
      min-height: 0 !important;
      height: clamp(360px, 34vw, 440px) !important;
      padding: 16px !important;
    }
    body[data-page="product"] .gallery .zoom-image {
      min-height: 0 !important;
    }
    body[data-page="product"] .gallery .zoom-image img {
      max-height: 392px !important;
    }
    body[data-page="product"] .crumb {
      padding-block: 0 8px !important;
    }
    body[data-page="product"] .detail-info h1 {
      font-size: clamp(24px, 2vw, 30px) !important;
      line-height: 1.3 !important;
    }
    body[data-page="product"] .detail-info .price {
      margin: 10px 0 !important;
      font-size: 30px !important;
    }
    body[data-page="product"] .sizes {
      margin: 12px 0 !important;
    }
    body[data-page="product"] .purchase {
      margin: 12px 0 !important;
    }
    body[data-page="product"] .pdp-trust-strip {
      margin: 14px 0 !important;
      padding: 10px 4px !important;
    }
  }

}

/* A missing approved image falls back to the real category heading, not a spacer. */
body[data-page="category"][data-category="cats"] #app .cats-approved-hero.cats-hero-unavailable {
  height: auto !important;
  min-height: 0 !important;
  padding: 16px 20px !important;
}
body[data-page="category"][data-category="cats"] .cats-hero-unavailable :is(img, .cats-hero-hotspot) {
  display: none !important;
}
body[data-page="category"][data-category="cats"] .cats-hero-unavailable h1 {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* Keep desktop navigation compact without changing approved phone chrome. */
@media (min-width: 1024px) {
  body:not([data-page='admin']) header .top {
    min-height: 80px !important;
    padding-block: 10px !important;
  }
  body:not([data-page='admin']) header .header-actions {
    width: auto !important;
    min-width: 0 !important;
  }
  header .action-row .push-offers-control { padding: 0; }
  header .action-row .push-header-toggle {
    width: 44px; height: 44px; min-height: 44px; padding: 0;
    border-radius: 12px;
  }
  header .action-row .push-header-toggle span {
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  body:not([data-page='admin']) .support-choice-panel {
    max-height: calc(100dvh - 130px) !important;
    overflow-y: auto !important;
  }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  body[data-page='home'] .home-product-grid > .product {
    transition: transform 160ms ease, box-shadow 160ms ease;
  }
  body[data-page='home'] .home-product-grid > .product:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgb(6 35 25 / 10%);
  }
}

@media (min-width: 1024px) {
  body:not([data-page='admin']) > header.main-header.header-scrolled .top {
    min-height: 64px !important;
    padding-block: 6px !important;
  }
}

/* Desktop cards use their space for the packshot, not separated text rows. */
@layer homepage-master {
  @media (min-width: 1024px) {
    body[data-page='home'] #app .home-product-grid > .product {
      gap: 5px !important;
      padding: 12px !important;
    }
    body[data-page='home'] #app .home-product-grid > .product > :is(.product-card-media,.product-card-media-wrap) {
      height: 210px !important; min-height: 210px !important;
      max-height: 210px !important; flex-basis: 210px !important;
      margin-bottom: 3px !important;
    }
    body[data-page='home'] #app .home-product-grid > .product :is(.product-brand-link,.product-weight) {
      margin-block: 0 !important; line-height: 1.35 !important;
    }
  }
}
@layer product-card-standard {
  @media (min-width: 1024px) {
    body[data-page]:not([data-page='admin']) #app :is(#results,.products) > article.product {
      gap: 5px !important; padding: 12px !important;
    }
    body[data-page]:not([data-page='admin']) #app :is(#results,.products) > article.product :is(.product-brand-link,.product-weight) {
      margin-block: 0 !important; line-height: 1.35 !important;
    }
    body[data-page]:not([data-page='admin']) #app :is(#results,.products) > article.product .btn {
      min-height: 44px !important; border-radius: 10px !important;
      font: inherit; font-size: 14px !important; font-weight: 700 !important;
    }
  }
}
/* Keep embedded art intact; provide a legible, real touch control below it. */
@media (max-width: 767px) {
  body[data-page='category'] :is(.cats-approved-hero,.dogs-approved-hero) > :is(.cats-hero-hotspot,.dogs-hero-hotspot) {
    position: static !important; display: block;
    width: calc(100% - 24px) !important; height: auto !important;
    min-height: 44px !important; margin: 8px 12px !important;
    padding: 10px 16px !important; border: 1px solid #b18a3e;
    border-radius: 10px; background: #14563c; color: #fffdf8;
    font: inherit; font-size: 15px; font-weight: 700;
  }
  body[data-page='category'] :is(.cats-hero-hotspot,.dogs-hero-hotspot)::after {
    content: attr(aria-label);
  }
}
.home-discovery-brand-row .brand-logo-fallback {
  display: grid; place-items: center; min-height: 70px;
  padding: 8px; color: #173b2b; font-size: 18px; font-weight: 700;
}
.home-discovery-brand-row img[hidden] { display: none !important; }

/* Single geometry authority across catalog, home and related products.
   Important declarations in this nested layer beat legacy important rules in
   the parent layer, regardless of category specificity (including 120px caps).
   Origin labels remain outside the square, never a second media cell. */
@layer product-card-standard.geometry {
  body:not([data-page='admin']) #app article.product {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }
  body:not([data-page='admin']) #app article.product h3 {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 1.3 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
  body:not([data-page='admin']) #app article.product > .btn {
    margin-top: auto !important;
    flex-shrink: 0 !important;
  }
  body:not([data-page='admin']) #app :is(.home-product-grid, .related-products .products) {
    align-items: stretch !important;
  }
  /* Flex rails have an intrinsic cross-size: a percentage height prevents
     stretching when metadata differs. Auto fills the shared row instead. */
  body:not([data-page='admin']) #app :is(.home-product-grid, .related-products .products) > article.product {
    height: auto !important;
    align-self: stretch !important;
  }
  body:not([data-page='admin']) #app article.product > :is(.product-card-media, .product-card-media-wrap) {
    flex: 0 0 auto !important;
  }
  body:not([data-page='admin']) #app article.product .product-card-media {
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 2px !important;
    background: #fff !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
  }
  body:not([data-page='admin']) #app article.product > .product-card-media-wrap {
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
  }
  body:not([data-page='admin']) #app article.product .product-card-media-wrap > .product-card-media {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
  }
  body:not([data-page='admin']) #app article.product .product-card-media > img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 180px !important;
    max-height: min(180px, 100%) !important;
    min-height: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    clip-path: none !important;
  }
  @media (max-width: 768px) {
    body:not([data-page='admin']) #app article.product .product-card-media > img {
      height: 160px !important;
      max-height: min(160px, 100%) !important;
    }
  }
  body:not([data-page='admin']) #app article.product .product-card-cycle {
    display: none !important;
  }
  body:not([data-page='admin']) #app article.product > .product-origin {
    position: static !important;
    align-self: flex-start !important;
    width: auto !important;
    margin: 0 !important;
    padding: 3px 7px !important;
    line-height: 1.25 !important;
    font-size: 11px !important;
  }
  body:not([data-page='admin']) #app article.product .price.inquiry-price-link {
    display: none !important;
  }
  @media (min-width:1024px) {
    body:not([data-page='admin']) #app article.product > :is(.product-card-media,.product-card-media-wrap) {
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      aspect-ratio: 1 / 1 !important;
      flex: 0 0 auto !important;
    }
    body:not([data-page='admin']) #app article.product {
      gap: 5px !important;
      padding: 10px !important;
    }
  }
}
@layer pdp-cart {
  body[data-page='product'] #app .detail-info > .price[hidden] {
    display: none !important;
  }
  body[data-page='product'] #app .gallery .zoom-image img {
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    mix-blend-mode: normal !important;
    filter: none !important;
  }
}

/* Selected usability fixes from the audit; preserve existing brand and layout. */
@layer product-card-standard {
  body:not([data-page='admin']) #app article.product > .btn {
    min-height: 44px !important;
    height: auto !important;
  }
  body:not([data-page='admin']) #app article.product > .btn:active {
    background: #0b3e2a !important;
    color: white !important;
  }
  body:not([data-page='admin']) #app article.product :is(a,button):focus-visible {
    outline: 3px solid #b18a3e !important;
    outline-offset: 3px;
  }
}

@layer product-card-standard {
  body:not([data-page='admin']) #app article.product .product-image-load-failed {
    opacity: 0 !important;
  }
  body:not([data-page='admin']) #app article.product .product-image-unavailable {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    box-sizing: border-box;
    text-align: center;
    background: #f8f4eb;
    color: #536258;
    font-size: 13px;
    line-height: 1.5;
    pointer-events: none;
  }
}

article.product {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
}

.product-card-media {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

article.product h3 {
  height: 38px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.product .btn {
  margin-top: auto !important;
}

/* Mobile Pet Category Bubbles Polish */
.home-category-rail {
  display: flex !important;
  gap: 12px !important;
  overflow-x: auto !important;
  padding: 8px 16px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.home-category-rail::-webkit-scrollbar {
  display: none !important;
}

.home-category-bubble {
  flex: 0 0 72px !important;
  text-align: center !important;
}

.home-category-bubble img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin: 0 auto 6px !important;
}

/* Keep all card metadata grouped; the CTA alone stays anchored at the bottom. */
@layer product-card-standard {
  body:not([data-page='admin']) #app article.product {
    justify-content: flex-start !important;
    gap: 4px !important;
  }

  body:not([data-page='admin']) #app article.product h3 {
    margin-block: 2px 0 !important;
  }

  body:not([data-page='admin']) #app article.product :is(.product-brand-link, .card-size, .product-weight) {
    margin-block: 0 !important;
    line-height: 1.35 !important;
  }

  body:not([data-page='admin']) #app article.product .price {
    margin-block: 2px 4px !important;
  }
}

/* Desktop hero retains the original composition; 768px uses mobile framing. */
@layer homepage-master {
  @media (min-width: 769px) {
    body[data-page='home'] #app > .home-hero-carousel {
      width: min(100%, 1240px) !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      aspect-ratio: 3 / 1 !important;
      margin: 0 auto 12px !important;
    }

    body[data-page='home'] .home-hero-carousel .home-hero-slide img {
      max-height: none !important;
      object-fit: contain !important;
      object-position: center !important;
    }
  }
}

/* Direct WhatsApp is separate from the desktop support chooser, and shares its
   configured URL. Placement is raised only when real purchase UI intersects. */
.mobile-direct-whatsapp { display: none; }
.mobile-direct-whatsapp[hidden] { display: none !important; }
@media (max-width: 768px) {
  body:not([data-page='admin']):not([data-admin-gate]) > .mobile-direct-whatsapp:not([hidden]) {
    box-sizing: border-box;
    position: fixed;
    z-index: 9999;
    left: 16px;
    right: auto;
    bottom: 75px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    max-width: calc(100vw - 32px);
    padding: 7px 12px 7px 8px;
    border: 1px solid #d6e5d8;
    border-radius: 24px;
    background: #fffdf7;
    color: #174b3d;
    box-shadow: 0 3px 14px rgb(17 57 40 / 16%);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
  }
  .mobile-direct-whatsapp svg {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    padding: 4px;
    border-radius: 50%;
    background: #168249;
    color: #fffdf7;
  }
  .mobile-direct-whatsapp:focus-visible {
    outline: 3px solid #bd913d;
    outline-offset: 3px;
  }
  body[data-page='product'] .pdp-sticky-buy .btn.gold {
    white-space: normal;
    max-width: 62vw;
    font-size: 13px;
    line-height: 1.3;
  }
}

/* Fit every desktop department link on one row without clipping fly-out menus. */
@media (min-width: 1024px) {
  header.main-header #categoriesNav {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px clamp(4px, .6vw, 9px) !important;
    padding: 8px clamp(8px, 1vw, 14px) !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  header.main-header #categoriesNav > :is(a, .desktop-category-item) {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  header.main-header #categoriesNav .desktop-category-trigger {
    gap: 4px !important;
    padding-inline: 2px !important;
    font-size: clamp(13px, .97vw, 14px) !important;
    white-space: nowrap !important;
  }
}
/* =======================================================
   تعديلات إلغاء نزول الهيدر وتصغير المساحات لمتجر سيتي باوس
   ======================================================= */

/* 1. منع الهيدر من النزول مع التمرير (تثبيته بالأعلى فقط) */
header, 
.site-header, 
.header-container,
.main-header,
.top-nav {
  position: relative !important;
  top: auto !important;
}

/* 2. تصغير حجم وارتفاع بنر الهيرو وتقليص الفراغ تحته */
.hero-slider, 
.hero-banner, 
.carousel-container,
.swiper,
.banner-section {
  margin-bottom: 8px !important;
  padding-bottom: 0 !important;
}

/* 3. تقليل الفراغات حول دوائر أقسام الحيوانات */
.categories-circles, 
.home-category-bubbles,
.animal-categories,
.categories-row {
  padding-top: 4px !important;
  padding-bottom: 6px !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

/* 4. تقليص المساحات الفارغة بين الأزرار الملونة والبنرات */
.promo-buttons-container,
.quick-tags,
.badges-container {
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  gap: 6px !important;
}

/* 5. رفع عنوان العروض والمبكرة للأعلى لملء الفراغ الأبيض */
.section-title, 
.hot-deals-header,
.deals-title {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  padding-top: 0 !important;
}

/* 6. تصغير الهوامش العامة للمحتوى بالكامل */
main, 
.main-content, 
.container {
  padding-top: 2px !important;
  padding-bottom: 65px !important; /* مساحة تكفي للشريط السفلي دون فراغ إضافي */
}