/* Approved visual references; original artwork and catalog remain untouched. */
@media (max-width:767px) {
  body[data-page="home"] header .top {
    padding-block:5px 9px;
    row-gap:5px;
    grid-template-rows:minmax(58px,auto) 44px;
  }
  body[data-page="home"] header .natural-logo .brand-wordmark {
    font-size:clamp(22px,6vw,29px);
    line-height:1.05;
  }
  body[data-page="home"] header .natural-logo .paw svg { width:27px; height:27px; }
  body[data-page="home"] header .natural-logo small { font-size:9px; line-height:1.3; }
  body[data-page="home"] header .search { border-radius:11px; min-width:0; }
  body[data-page="home"] header .search input { font-size:16px; min-width:0; }
  body[data-page="home"] header .search .push-offers-control {
    display:flex; flex:0 0 44px; align-items:center; padding:0; margin:0;
  }
  body[data-page="home"] header .search .push-header-toggle {
    display:grid; place-items:center; width:44px; min-width:44px; height:44px;
    padding:0; border:0; border-inline-start:1px solid #e7dfc9; border-radius:0;
    color:#123b29; background:transparent;
  }
  body[data-page="home"] header .search .push-header-toggle span {
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
  body[data-page="home"] .home-category-section { padding:10px 10px 8px; }
  body[data-page="home"] .home-category-rail { gap:8px; padding-block:2px 6px; }
  body[data-page="home"] .home-category-rail > .home-category-bubble {
    flex:0 0 clamp(52px,calc((100vw - 64px)/6),64px)!important;
    gap:5px;
  }
  body[data-page="home"] .home-category-rail > .home-category-bubble > img {
    width:clamp(46px,12.8vw,58px)!important;
    height:clamp(46px,12.8vw,58px)!important;
  }
  body[data-page="home"] .home-category-rail > .home-category-bubble > strong {
    font-size:.75rem; line-height:1.3;
  }
  body[data-page="home"] .home-promo-wrap-products { margin:0 10px 9px; }
  body[data-page="home"] .delivery-notice-home {
    margin:0 10px 8px; padding:9px 11px; border:1px solid #e8dec5;
    border-radius:12px; background:#f6f0df; font-size:.8125rem; line-height:1.45;
  }
  body[data-page="home"] .home-product-section {
    padding:10px 10px 12px; background:#fcfaf4; border-bottom:1px solid #e9e2d2;
  }
  body[data-page="home"] .home-product-section .title { margin-bottom:8px; align-items:center; }
  body[data-page="home"] .home-product-section .title h2 { font-size:1.0625rem; }
  body[data-page="home"] .products.home-product-grid {
    grid-auto-columns:clamp(124px,29vw,156px); gap:10px;
  }
  body[data-page="home"] .home-product-grid > .product { padding:7px; border-radius:11px; background:#fff; }
  body[data-page="home"] .home-product-grid > .product .product-image {
    height:clamp(104px,27vw,136px); margin-bottom:3px;
  }
  body[data-page="home"] .home-product-grid > .product h3 { font-size:.8125rem; line-height:1.4; }
  body[data-page="home"] .home-product-grid > .product .product-brand-link { font-size:.75rem; }
  body[data-page="home"] .home-product-grid > .product > .btn { font-size:.8125rem; padding-inline:5px; }
  body[data-page="home"] .home-brands-showcase { padding:10px 10px 12px; background:#fcfaf4; }
  body[data-page="home"] .home-brands-heading { margin-bottom:8px; }
  body[data-page="home"] .home-brands-heading h2 { font-size:1.0625rem; }
  body[data-page="home"] .home-brands-heading p { font-size:.75rem; margin-block:3px; }
  body[data-page="home"] .home-brands-grid { gap:8px; padding-bottom:4px; scrollbar-width:none; }
  body[data-page="home"] .home-brands-grid::-webkit-scrollbar { display:none; }
  body[data-page="home"] .home-brand-card { flex:0 0 95px; min-height:56px; padding:7px; border-radius:10px; }
  body[data-page="home"] .home-brand-card img { max-height:34px; }
}

/* Retain every link, expandable department, account and real contact action. */
#siteDrawer { width:min(420px,calc(100vw - 22px)); max-width:calc(100vw - 22px); background:#fcf9f0; }
#siteDrawer .drawer-head {
  min-height:102px; padding:16px 18px; background:#0c3327; color:#e0c17d;
  border-bottom:1px solid #c8ad69;
}
#siteDrawer .drawer-head .brand-wordmark { font-size:31px; line-height:1.1; color:#e0c17d; }
#siteDrawer .drawer-head small { color:#f6efd9; font-size:13px; }
#siteDrawer .drawer-head [data-close-drawer] {
  width:44px; height:44px; border:1px solid #a48c50; border-radius:11px;
  color:#eddaa6; background:transparent;
}
#siteDrawer .drawer-account { margin:10px 10px 8px; padding:10px 12px; border:1px solid #e7dfcd; border-radius:13px; background:#fffdf8; }
#siteDrawer .drawer-body { padding-inline:10px; }
#siteDrawer .drawer-links > a,
#siteDrawer .drawer-accordion-btn,
#siteDrawer .drawer-quick-links > a {
  min-height:46px; padding:7px 10px; gap:10px; border-radius:8px;
  border-bottom:1px solid #e9e1d0; font-size:16px; color:#182b20;
}
#siteDrawer .drawer-links > a[aria-current="page"] { background:#eee1bd; color:#243b25; box-shadow:inset -3px 0 #b99a54; }
#siteDrawer .drawer-accordion-btn > img { width:35px; height:35px; border-radius:50%; object-fit:cover; }
#siteDrawer .drawer-links h2,
#siteDrawer .drawer-contact-area > h2 { color:#8c7139; font-size:13px; }
#siteDrawer .drawer-feature-mark { background:#a88a43; color:#fff; border-radius:12px; }
#siteDrawer .drawer-contact-area { padding:9px 12px 10px; background:#f3ecd9; border-top:1px solid #e3d5b7; }
#siteDrawer .drawer-contact-actions { gap:8px; }
#siteDrawer .drawer-contact-actions > a { min-height:52px; min-width:0; border-radius:10px; background:#fffdf8; border:1px solid #ece4d3; }
#siteDrawer .drawer-contact-actions b { font-size:13px; line-height:1.4; }
#siteDrawer .drawer-contact-actions small { font-size:12px; }
#siteDrawer .drawer-contact-location { min-height:44px; font-size:14px; }
#siteDrawer .drawer-share-action { min-height:44px; font-size:14px; }
#siteDrawer .drawer-languages { gap:7px; padding-top:7px; }
#siteDrawer .drawer-languages button { min-height:44px; border-radius:9px; font-size:14px; }
#siteDrawer .drawer-languages button[aria-pressed="true"] { background:#123b29; color:#fff; border-color:#123b29; }
@media (prefers-reduced-motion:reduce) {
  #siteDrawer, #siteDrawer .drawer-sub-menu { transition:none; }
}

/* Shared category catalog finish. Keep taxonomy, banners, and category controls native. */
body[data-page="category"]:not([data-category="dogs"]) #app .catalog #results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 9px;
  padding: 8px 2px 14px;
}
body[data-page="category"]:not([data-category="dogs"], [data-category="cats"]) #app #results > .product {
  box-sizing: border-box;
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  overflow: hidden;
  padding: 8px;
  border: 1px solid #e7e0d1;
  border-radius: 14px;
  background: #fffefa;
  box-shadow: 0 3px 12px rgb(35 48 37 / 6%);
  text-align: center;
}
body[data-page="category"]:not([data-category="dogs"], [data-category="cats"]) #app #results > .product > .product-card-media-wrap,
body[data-page="category"]:not([data-category="dogs"], [data-category="cats"]) #app #results > .product > .product-card-media {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 195px !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 195px !important;
  min-height: 195px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 0 3px;
  padding: 7px;
  overflow: hidden;
  border-radius: 10px;
  background: #f7f4eb;
}
body[data-page="category"]:not([data-category="dogs"], [data-category="cats"]) #app #results > .product > .product-card-media-wrap > .product-card-media {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0;
  padding: 0;
  background: transparent;
}
body[data-page="category"]:not([data-category="dogs"], [data-category="cats"]) #app #results > .product .product-image {
  position: static !important;
  inset: auto !important;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  scale: none !important;
  image-rendering: auto !important;
  opacity: 1 !important;
  filter: none !important;
}
body[data-page="category"]:not([data-category="dogs"], [data-category="cats"]) #app #results > .product > .heart {
  position: absolute;
  z-index: 2;
  top: 12px;
  inset-inline: auto !important;
  right: auto !important;
  left: 10px !important;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #e7e0d1;
  border-radius: 50%;
  background: rgb(255 254 250 / 94%);
  color: #123d2d;
}
body[data-page="category"]:not([data-category="dogs"]) #app #results > .product > .badge:not(:empty) {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  left: auto;
  width: max-content;
  max-width: calc(100% - 62px);
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f3ead2;
  color: #654d1e;
  font-size: var(--font-size-card-badge-other);
  font-weight: var(--font-weight-card-badge-other);
  line-height: var(--line-height-card-badge);
}
body[data-page="category"]:not([data-category="dogs"]) #app #results > .product > .badge:empty {
  display: none !important;
}
body[data-page="category"]:not([data-category="dogs"]) #app #results > .product:has(.price.sale) > .badge:not(:empty) {
  background: #c43d32;
  color: #fffaf4;
  font-size: var(--font-size-card-badge-discount);
  font-weight: var(--font-weight-card-badge-discount);
}
body[data-page="category"]:not([data-category="dogs"], [data-category="cats"]) #app #results > .product h3 {
  display: -webkit-box;
  min-height: calc(var(--line-height-card-title) * 2em);
  max-height: calc(var(--line-height-card-title) * 2em);
  margin: 2px 0;
  overflow: hidden;
  color: #24352c;
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-card-title);
  line-height: var(--line-height-card-title);
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body[data-page="category"]:not([data-category="dogs"], [data-category="cats"]) #app #results > .product .product-brand-link {
  display: block;
  margin: 0;
  color: #687268;
  font-size: var(--font-size-card-brand);
  font-weight: var(--font-weight-card-brand);
  line-height: var(--line-height-card-brand);
  text-align: center;
}
body[data-page="category"]:not([data-category="dogs"], [data-category="cats"]) #app #results > .product .product-weight {
  margin: 0;
  color: #687268;
  font-size: var(--font-size-card-spec);
  font-weight: var(--font-weight-card-spec);
  line-height: var(--line-height-card-spec);
  text-align: center;
}
body[data-page="category"]:not([data-category="dogs"], [data-category="cats"]) #app #results > .product .price {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 3px;
  color: #24352c;
  font-size: var(--font-size-card-price-regular);
  font-weight: var(--font-weight-card-price-regular);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-card-price);
}
body[data-page="category"]:not([data-category="dogs"], [data-category="cats"]) #app #results > .product .price.sale {
  color: #d32f2f;
  font-size: var(--font-size-card-price-sale);
  font-weight: var(--font-weight-card-price-sale);
}
body[data-page="category"]:not([data-category="dogs"], [data-category="cats"]) #app #results > .product .price del {
  color: #9ca3af;
  font-size: var(--font-size-card-price-old);
  font-weight: var(--font-weight-card-price-old);
  text-decoration: line-through;
}
body[data-page="category"]:not([data-category="dogs"], [data-category="cats"]) #app #results > .product .btn:not(.inquiry-link):not([href*="wa.me"]) {
  width: 100%;
  height: 38px;
  min-height: 38px;
  margin-top: auto;
  border: 0;
  border-radius: 10px;
  background: #bd913d;
  color: #fff;
  font-size: var(--font-size-card-btn-add);
  font-weight: var(--font-weight-card-btn-add);
  line-height: var(--line-height-card-btn-add);
}
body[data-page="category"]:not([data-category="dogs"], [data-category="cats"]) #app #results > .product :is(.inquiry-link, .btn-inquiry, a[href*="wa.me"]) {
  display: inline-flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid #b98b2c;
  border-radius: 10px;
  background: #f6edd5;
  color: #543e11;
  text-align: center;
  text-decoration: none;
}
/* Artwork keeps its own proportions; never crop category banner assets. */
body[data-page="category"] .category-banner-artwork {
  display: block;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 768px) {
  body[data-page="category"]:not([data-category="dogs"]) #app .catalog #results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 10px 2px 18px;
  }
}
@media (min-width: 1024px) {
  body[data-page="category"]:not([data-category="dogs"]) #app .catalog #results {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body[data-page="category"]:not([data-category="dogs"], [data-category="cats"]) #app #results > .product > .product-card-media-wrap,
  body[data-page="category"]:not([data-category="dogs"], [data-category="cats"]) #app #results > .product > .product-card-media {
    flex-basis: 220px !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: none !important;
    margin-bottom: 5px;
    padding: 8px;
    aspect-ratio: auto !important;
    border-radius: 11px;
  }
}
@media (max-width: 767px) {
  /* Keep the five existing destinations clear of the fixed support launcher. */
  body[data-page="category"] > nav.bottom {
    box-sizing: border-box;
    position: fixed;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 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="category"] > nav.bottom a {
    display: flex;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    padding: 2px;
  }
  body[data-page="category"] > nav.bottom a small {
    max-width: 100%;
    font-size: 11px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  body[data-page="category"] .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="category"] .support-launcher > svg { width: 24px; height: 24px; }
  body[data-page="category"] .support-choice-panel {
    bottom: calc(var(--bottom-nav-height, 75px) + 72px) !important;
    inset-inline-end: 8px !important;
    width: 320px !important;
    max-width: calc(100vw - 16px) !important;
    z-index: 53;
  }
}