:root {
  --bg: #fff9f4;
  --bg-soft: #fff1e8;
  --card: rgba(255, 255, 255, 0.92);
  --text: #2c211b;
  --muted: #725f55;
  --orange: #ff7a28;
  --orange-dark: #e95f12;
  --pink: #ff6aa2;
  --yellow: #ffd76a;
  --green: #60b783;
  --border: rgba(255, 122, 40, 0.18);
  --shadow: 0 24px 70px rgba(91, 48, 16, 0.14);
  --radius: 26px;
  --container: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 214, 106, 0.36), transparent 32%),
    radial-gradient(circle at 90% 8%, rgba(255, 106, 162, 0.22), transparent 34%),
    linear-gradient(135deg, #fff9f4 0%, #fff1e8 50%, #fffaf5 100%);
  line-height: 1.6;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -3;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 122, 40, 0.15), transparent 25%),
    radial-gradient(circle at 70% 70%, rgba(255, 106, 162, 0.14), transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(96, 183, 131, 0.12), transparent 22%);
  animation: bgFlow 16s ease-in-out infinite alternate;
}

@keyframes bgFlow {
  0% { transform: translate3d(-1%, -1%, 0) scale(1); }
  100% { transform: translate3d(2%, 1%, 0) scale(1.08); }
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

sup {
  font-size: 0.55em;
  line-height: 0;
  vertical-align: super;
}

.container {
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}

.section-pad {
  padding: 88px 0;
}

.soft-bg {
  background: rgba(255, 255, 255, 0.42);
  border-top: 1px solid rgba(255, 122, 40, 0.08);
  border-bottom: 1px solid rgba(255, 122, 40, 0.08);
}

.animated-bg {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.float-icon {
  position: absolute;
  opacity: 0.18;
  filter: blur(0.1px);
  animation: floaty 11s ease-in-out infinite;
}

.float-icon {
  width: 48px;
  height: 48px;
}

.paw-1 { left: 7%; top: 25%; animation-delay: 0s; }
.paw-2 { left: 78%; top: 28%; animation-delay: 1.8s; }
.paw-3 { left: 18%; top: 78%; animation-delay: 3.1s; }
.pet-1 { left: 88%; top: 62%; animation-delay: 0.9s; }
.pet-2 { left: 4%; top: 58%; animation-delay: 2.6s; }
.treat-1 { left: 63%; top: 82%; animation-delay: 4s; }
.heart-1 { left: 48%; top: 18%; animation-delay: 1.1s; }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-7deg); }
  50% { transform: translateY(-26px) rotate(9deg); }
}

.top-bar {
  background: linear-gradient(90deg, var(--orange), var(--pink));
  color: white;
  font-size: 14px;
}

.top-bar-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 42px;
}

.top-bar a {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 249, 244, 0.82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 122, 40, 0.12);
}

.nav-wrap {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-right: auto;
}

.brand img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 15px;
  background: white;
  box-shadow: 0 10px 28px rgba(91, 48, 16, 0.12);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  font-weight: 750;
  color: #4b3b32;
}

.nav-links a {
  transition: 0.2s ease;
}

.nav-links a:hover {
  color: var(--orange);
}

.nav-cta {
  padding: 11px 18px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(255, 122, 40, 0.25);
}

.menu-toggle {
  display: none;
  border: 0;
  background: white;
  color: var(--text);
  border-radius: 14px;
  padding: 10px 13px;
  font-size: 22px;
  box-shadow: 0 10px 28px rgba(91, 48, 16, 0.10);
}

.hero {
  padding-top: 96px;
}

.hero-grid,
.split-grid,
.page-hero-grid,
.product-detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}

.hero-copy h1,
.page-hero h1,
.product-info-panel h1,
.coming-soon-card h1 {
  margin: 0;
  font-size: clamp(44px, 7vw, 78px);
  line-height: 0.94;
  letter-spacing: -0.065em;
}

.hero-text,
.page-hero p,
.product-subtitle,
.section-heading p,
.split-grid p,
.coming-soon-card p {
  color: var(--muted);
  font-size: 18px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--orange-dark);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
}

.eyebrow.light {
  color: white;
  opacity: 0.9;
}

.hero-actions,
.page-actions,
.card-actions,
.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 21px;
  border-radius: 999px;
  font-weight: 900;
  border: 2px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  color: white;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  box-shadow: 0 14px 34px rgba(255, 122, 40, 0.24);
}

.btn-secondary {
  color: var(--orange-dark);
  background: white;
  border-color: rgba(255, 122, 40, 0.22);
  box-shadow: 0 12px 30px rgba(91, 48, 16, 0.08);
}

.btn-outline {
  color: var(--text);
  background: transparent;
  border-color: rgba(255, 122, 40, 0.32);
}

.btn-light {
  background: white;
  color: var(--orange-dark);
}

.btn-outline-light {
  color: white;
  border-color: rgba(255,255,255,0.7);
}

.btn-small {
  min-height: 40px;
  padding: 9px 14px;
  font-size: 14px;
}

.disabled-btn,
.disabled-btn:hover {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.full-btn {
  width: 100%;
  margin-top: 12px;
}

.hero-card {
  padding: 18px;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.hero-card img {
  border-radius: 26px;
}

.hero-float {
  animation: heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(0.2deg); }
  50% { transform: translateY(-10px) rotate(-0.2deg); }
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.trust-row span,
.mini-tag,
.status-pill,
.coming-pill,
.filter-chips a {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 122, 40, 0.16);
  color: #62483a;
}

.section-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 42px;
}

.section-heading.align-left {
  text-align: left;
  margin-left: 0;
}

.section-heading h2,
.split-grid h2,
.page-card h2,
.info-card h2,
.info-card h3,
.product-info-panel h1 + p,
.coming-soon-card h1 {
  margin-top: 0;
}

.section-heading h2,
.split-grid h2,
.page-card h2,
.info-card h2 {
  font-size: clamp(32px, 4.8vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.055em;
  margin-bottom: 14px;
}

.category-grid,
.shop-grid,
.faq-grid,
.steps-grid,
.product-tabs-grid {
  display: grid;
  gap: 22px;
}

.category-grid {
  grid-template-columns: repeat(4, 1fr);
}

.shop-grid {
  grid-template-columns: repeat(4, 1fr);
}

.category-card,
.shop-card,
.info-card,
.page-card,
.step-card,
.faq-item,
.empty-category,
.product-info-panel,
.coming-soon-card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 18px 54px rgba(91, 48, 16, 0.10);
  border-radius: var(--radius);
}

.category-card {
  display: block;
  padding: 26px;
  min-height: 260px;
  transition: 0.22s ease;
}

.category-card:hover,
.shop-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.category-icon {
  font-size: 40px;
}

.category-card h3,
.shop-card h3,
.step-card h3,
.faq-item h3,
.empty-category h3 {
  margin: 14px 0 8px;
  font-size: 22px;
  letter-spacing: -0.035em;
}

.category-card p,
.shop-card p,
.step-card p,
.faq-item p,
.empty-category p,
.info-card p {
  color: var(--muted);
}

.category-card strong {
  color: var(--orange-dark);
}

.shop-card {
  overflow: hidden;
}

.product-image {
  min-height: 190px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 215, 106, 0.34), transparent 35%),
    linear-gradient(135deg, #fff, #fff0e6);
  display: grid;
  place-items: center;
  font-size: 60px;
  border-bottom: 1px solid var(--border);
}

.product-placeholder {
  padding: 24px;
}

.placeholder-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.placeholder-icon {
  line-height: 1;
}

.placeholder-stack strong {
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.placeholder-stack small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.product-placeholder-large .placeholder-icon {
  
}

.product-placeholder-large .placeholder-stack strong {
  font-size: 32px;
}

.large-placeholder {
  min-height: 280px;
}

.shop-card-body {
  padding: 22px;
}

.price-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 18px 0;
  padding: 13px;
  border-radius: 18px;
  background: rgba(255, 241, 232, 0.72);
}

.price-row strong {
  color: var(--orange-dark);
}

.price-row span,
.small-note,
.table-note {
  color: var(--muted);
  font-size: 14px;
}

.mini-list,
.check-list {
  padding-left: 0;
  list-style: none;
}

.mini-list li,
.check-list li {
  position: relative;
  padding-left: 26px;
  margin: 8px 0;
  color: var(--muted);
}

.mini-list li::before,
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 950;
}

.info-card,
.page-card {
  padding: 30px;
}

.notice-box {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--border);
  margin-top: 24px;
}

.notice-box span {
  color: var(--muted);
}

.comparison-wrap {
  overflow-x: auto;
  background: white;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 18px 54px rgba(91, 48, 16, 0.10);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.large-table {
  min-width: 960px;
}

.comparison-table th,
.comparison-table td {
  padding: 18px;
  border-bottom: 1px solid rgba(255, 122, 40, 0.12);
  text-align: left;
  vertical-align: top;
}

.comparison-table th {
  background: rgba(255, 241, 232, 0.75);
  color: var(--orange-dark);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.comparison-table tr:last-child td {
  border-bottom: 0;
}

.highlight-row td {
  background: rgba(255, 245, 218, 0.72);
}

.center-actions {
  text-align: center;
  margin-top: 28px;
}

.steps-grid {
  grid-template-columns: repeat(5, 1fr);
}

.step-card {
  padding: 23px;
}

.step-card span {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  color: white;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  font-weight: 950;
}

.marketplace-section,
.order-section {
  color: white;
  background: linear-gradient(135deg, var(--orange), var(--pink));
}

.order-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 40px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 24px 70px rgba(122, 49, 0, 0.20);
}

.order-card p {
  color: rgba(255,255,255,0.88);
}

.marketplace-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.coming-pill {
  background: rgba(255,255,255,0.18);
  color: white;
  border-color: rgba(255,255,255,0.3);
}

.faq-grid {
  grid-template-columns: repeat(3, 1fr);
}

.faq-item {
  padding: 24px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 34px;
  align-items: start;
}

.contact-list {
  display: grid;
  gap: 14px;
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border-radius: 22px;
  background: white;
  border: 1px solid var(--border);
  box-shadow: 0 14px 38px rgba(91, 48, 16, 0.08);
}

.contact-item span {
  color: var(--muted);
  font-weight: 800;
}

.contact-item strong {
  font-size: 18px;
}

.contact-item.muted {
  opacity: 0.75;
}

.page-hero {
  padding-top: 70px;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-chips a:hover {
  background: var(--orange);
  color: white;
}

.product-list-grid {
  grid-template-columns: 1fr;
}

.featured-product {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
}

.empty-category {
  padding: 34px;
  display: grid;
  gap: 10px;
}

.empty-category span {
  font-size: 50px;
}

.product-detail-layout {
  align-items: start;
}

.product-gallery,
.product-info-panel {
  min-width: 0;
}

.main-product-photo {
  min-height: 520px;
  border-radius: 30px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: 110px;
}

.thumb-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.thumb-row span {
  padding: 14px;
  border-radius: 16px;
  text-align: center;
  color: var(--muted);
  background: white;
  border: 1px solid var(--border);
  font-weight: 800;
  font-size: 13px;
}

.product-info-panel {
  padding: 34px;
}

.product-subtitle {
  font-size: 18px;
}

.product-price-box {
  margin: 26px 0;
  padding: 20px;
  border-radius: 22px;
  background: rgba(255, 241, 232, 0.75);
  display: flex;
  flex-direction: column;
}

.product-price-box span,
.product-meta-grid span {
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.product-price-box strong {
  font-size: 34px;
  color: var(--orange-dark);
  letter-spacing: -0.04em;
}

.product-meta-grid,
.checkout-preview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.product-meta-grid div,
.checkout-preview div {
  padding: 15px;
  border-radius: 18px;
  background: white;
  border: 1px solid var(--border);
}

.product-meta-grid strong,
.checkout-preview strong {
  display: block;
}

.product-actions {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.product-tabs-grid {
  grid-template-columns: repeat(3, 1fr);
}

.coming-soon-page {
  min-height: 62vh;
  display: grid;
  place-items: center;
}

.coming-soon-card {
  text-align: center;
  max-width: 820px;
  padding: 56px;
}

.big-icon {
  font-size: 74px;
}

.checkout-preview {
  text-align: left;
  margin: 26px 0;
}

.site-footer {
  background: #2c211b;
  color: white;
  padding: 56px 0 26px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 950;
}

.footer-brand img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.footer-text,
.footer-bottom p {
  color: rgba(255,255,255,0.68);
}

.site-footer h3 {
  margin: 0 0 14px;
}

.site-footer a,
.site-footer span {
  display: block;
  color: rgba(255,255,255,0.78);
  margin: 9px 0;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 34px;
  padding-top: 20px;
}

.reveal,
.reveal-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-card {
  transition-delay: 0.05s;
}

.reveal.is-visible,
.reveal-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1050px) {
  .nav-links {
    position: absolute;
    top: 78px;
    left: 20px;
    right: 20px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 10px;
    box-shadow: var(--shadow);
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-links a {
    padding: 12px 14px;
    border-radius: 14px;
  }

  .nav-links a:hover {
    background: rgba(255, 122, 40, 0.08);
  }

  .menu-toggle {
    display: inline-flex;
  }

  .nav-cta {
    display: none;
  }

  .category-grid,
  .shop-grid,
  .steps-grid,
  .faq-grid,
  .product-tabs-grid,
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-grid,
  .split-grid,
  .page-hero-grid,
  .product-detail-layout,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .featured-product {
    grid-template-columns: 1fr;
  }

  .main-product-photo {
    min-height: 360px;
  }
}

@media (max-width: 680px) {
  .container {
    width: min(100% - 26px, var(--container));
  }

  .section-pad {
    padding: 58px 0;
  }

  .top-bar-wrap,
  .order-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .brand span {
    font-size: 18px;
  }

  .brand img {
    width: 48px;
    height: 48px;
  }

  .hero {
    padding-top: 54px;
  }

  .hero-copy h1,
  .page-hero h1,
  .product-info-panel h1,
  .coming-soon-card h1 {
    font-size: 43px;
  }

  .hero-actions,
  .page-actions,
  .card-actions,
  .order-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .category-grid,
  .shop-grid,
  .steps-grid,
  .faq-grid,
  .product-tabs-grid,
  .footer-grid,
  .product-meta-grid,
  .checkout-preview,
  .thumb-row {
    grid-template-columns: 1fr;
  }

  .category-card {
    min-height: auto;
  }

  .order-card,
  .coming-soon-card,
  .product-info-panel,
  .info-card,
  .page-card {
    padding: 24px;
  }

  .comparison-table {
    min-width: 680px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal,
  .reveal-card {
    opacity: 1;
    transform: none;
  }
}






.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 122, 40, 0.14);
  box-shadow: 0 10px 24px rgba(91, 48, 16, 0.07);
}

.lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #62483a;
  font-size: 12px;
  font-weight: 950;
  transition: 0.2s ease;
}

.lang-link:hover,
.lang-link.active {
  color: white;
  background: linear-gradient(135deg, var(--orange), var(--pink));
}

@media (max-width: 1050px) {
  .language-switcher {
    margin-left: auto;
  }
}

@media (max-width: 680px) {
  .language-switcher {
    order: 3;
    width: 100%;
    justify-content: center;
    margin: 0 0 10px;
  }

  .nav-wrap {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 10px 0;
  }

  .nav-links {
    top: 122px;
  }
}

.simple-checkout-card {
  background: linear-gradient(135deg, var(--orange), var(--pink));
  color: white;
}

.simple-checkout-card p {
  color: rgba(255, 255, 255, 0.9);
}


/* CSS-only decorative icons. No emoji characters are used. */
.line-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.88), transparent 24%),
    linear-gradient(135deg, rgba(255, 122, 40, 0.18), rgba(255, 106, 162, 0.16));
  border: 2px solid rgba(255, 122, 40, 0.35);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,0.45);
}

.line-icon::before,
.line-icon::after {
  content: "";
  position: absolute;
}

.icon-litter::before {
  left: 10px;
  right: 10px;
  bottom: 9px;
  height: 18px;
  border-radius: 6px 6px 9px 9px;
  background: rgba(255, 122, 40, 0.28);
  border: 2px solid rgba(233, 95, 18, 0.42);
}

.icon-litter::after {
  left: 13px;
  right: 13px;
  top: 10px;
  height: 13px;
  border-radius: 6px 6px 4px 4px;
  background: rgba(255, 255, 255, 0.78);
  border: 2px solid rgba(233, 95, 18, 0.36);
}

.icon-cat::before {
  left: 10px;
  top: 13px;
  width: 20px;
  height: 17px;
  border-radius: 12px 12px 10px 10px;
  background: rgba(255, 122, 40, 0.26);
  border: 2px solid rgba(233, 95, 18, 0.40);
  box-shadow:
    -3px -7px 0 -2px rgba(255, 122, 40, 0.32),
    13px -7px 0 -2px rgba(255, 122, 40, 0.32);
}

.icon-cat::after {
  left: 16px;
  top: 21px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(44, 33, 27, 0.62);
  box-shadow: 9px 0 0 rgba(44, 33, 27, 0.62);
}

.icon-dog::before {
  left: 9px;
  top: 14px;
  width: 22px;
  height: 17px;
  border-radius: 12px;
  background: rgba(255, 106, 162, 0.22);
  border: 2px solid rgba(255, 106, 162, 0.42);
  box-shadow:
    -7px 2px 0 -2px rgba(255, 106, 162, 0.28),
    17px 2px 0 -2px rgba(255, 106, 162, 0.28);
}

.icon-dog::after {
  left: 18px;
  top: 22px;
  width: 7px;
  height: 5px;
  border-radius: 999px;
  background: rgba(44, 33, 27, 0.55);
}

.icon-paw::before {
  left: 16px;
  top: 20px;
  width: 13px;
  height: 12px;
  border-radius: 55% 55% 65% 65%;
  background: rgba(255, 122, 40, 0.34);
}

.icon-paw::after {
  left: 11px;
  top: 10px;
  width: 7px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 122, 40, 0.32);
  box-shadow:
    8px -3px 0 rgba(255, 122, 40, 0.32),
    17px 0 0 rgba(255, 122, 40, 0.32),
    4px 9px 0 rgba(255, 122, 40, 0.32);
}

.icon-card::before {
  left: 8px;
  top: 13px;
  width: 28px;
  height: 19px;
  border-radius: 7px;
  background: rgba(255, 122, 40, 0.24);
  border: 2px solid rgba(233, 95, 18, 0.42);
}

.icon-card::after {
  left: 12px;
  top: 19px;
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: rgba(233, 95, 18, 0.42);
}

.paw-mark {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 122, 40, 0.22) 0 18%, transparent 19%),
    radial-gradient(circle at 25% 28%, rgba(255, 122, 40, 0.20) 0 11%, transparent 12%),
    radial-gradient(circle at 47% 18%, rgba(255, 122, 40, 0.20) 0 11%, transparent 12%),
    radial-gradient(circle at 70% 28%, rgba(255, 122, 40, 0.20) 0 11%, transparent 12%);
}

.orb {
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(255, 106, 162, 0.18) 42%, rgba(255, 122, 40, 0.10) 72%);
  border: 1px solid rgba(255, 122, 40, 0.18);
}

.bone-shape {
  width: 58px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 215, 106, 0.24), rgba(255, 122, 40, 0.14));
  border: 1px solid rgba(255, 122, 40, 0.15);
}

.heart-shape {
  width: 46px;
  height: 46px;
  transform: rotate(45deg);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 106, 162, 0.18), rgba(255, 122, 40, 0.14));
}

.category-icon.line-icon {
  font-size: 0;
  margin-bottom: 12px;
}

.product-image .line-icon {
  width: 72px;
  height: 72px;
}

.placeholder-icon.line-icon {
  width: 72px;
  height: 72px;
}

.big-icon.line-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 12px;
}

.empty-category .line-icon {
  width: 58px;
  height: 58px;
}


/* V1.16 - clearer cat/dog styled decorations and icons */

.float-icon.cat-float,
.float-icon.dog-float {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.85), transparent 20%),
    linear-gradient(135deg, rgba(255, 122, 40, 0.16), rgba(255, 106, 162, 0.16));
  border: 1px solid rgba(255, 122, 40, 0.18);
  box-shadow: 0 12px 30px rgba(91, 48, 16, 0.08);
}

.float-icon.cat-float::before,
.float-icon.cat-float::after,
.float-icon.dog-float::before,
.float-icon.dog-float::after {
  content: "";
  position: absolute;
}

.float-icon.cat-float::before {
  left: 15px;
  top: 18px;
  width: 24px;
  height: 18px;
  border-radius: 12px 12px 10px 10px;
  background: rgba(255, 122, 40, 0.24);
  border: 2px solid rgba(233, 95, 18, 0.34);
  clip-path: polygon(0 22%, 20% 0, 35% 20%, 65% 20%, 80% 0, 100% 22%, 100% 100%, 0 100%);
}

.float-icon.cat-float::after {
  left: 22px;
  top: 28px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(67, 47, 36, 0.55);
  box-shadow:
    8px 0 0 rgba(67, 47, 36, 0.55),
    3px 8px 0 -1px rgba(233, 95, 18, 0.34);
}

.float-icon.dog-float::before {
  left: 14px;
  top: 17px;
  width: 26px;
  height: 20px;
  border-radius: 12px 12px 10px 10px;
  background: rgba(255, 106, 162, 0.18);
  border: 2px solid rgba(220, 92, 145, 0.34);
}

.float-icon.dog-float::after {
  left: 18px;
  top: 15px;
  width: 18px;
  height: 10px;
  border-radius: 10px;
  box-shadow:
    -7px 3px 0 0 rgba(255, 106, 162, 0.16),
    15px 3px 0 0 rgba(255, 106, 162, 0.16),
    3px 12px 0 -2px rgba(67, 47, 36, 0.48);
}

.cat-float-1 { animation-duration: 11s; }
.cat-float-2 { animation-duration: 13s; }

.paw-4 { animation-duration: 12s; }

.line-icon.icon-cat {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.88), transparent 24%),
    linear-gradient(135deg, rgba(255, 122, 40, 0.18), rgba(255, 106, 162, 0.14));
}

.line-icon.icon-cat::before {
  left: 9px;
  top: 10px;
  width: 22px;
  height: 19px;
  background: rgba(255, 122, 40, 0.18);
  border: 2px solid rgba(233, 95, 18, 0.40);
  border-radius: 11px 11px 10px 10px;
  clip-path: polygon(0 26%, 18% 0, 34% 22%, 66% 22%, 82% 0, 100% 26%, 100% 100%, 0 100%);
}

.line-icon.icon-cat::after {
  left: 15px;
  top: 19px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(67, 47, 36, 0.62);
  box-shadow:
    8px 0 0 rgba(67, 47, 36, 0.62),
    3px 8px 0 -1px rgba(233, 95, 18, 0.40),
    -5px 6px 0 -3px rgba(233, 95, 18, 0.38),
    13px 6px 0 -3px rgba(233, 95, 18, 0.38);
}

.line-icon.icon-dog {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.88), transparent 24%),
    linear-gradient(135deg, rgba(255, 106, 162, 0.14), rgba(255, 122, 40, 0.16));
}

.line-icon.icon-dog::before {
  left: 9px;
  top: 11px;
  width: 22px;
  height: 18px;
  background: rgba(255, 106, 162, 0.16);
  border: 2px solid rgba(220, 92, 145, 0.38);
  border-radius: 11px;
}

.line-icon.icon-dog::after {
  left: 11px;
  top: 10px;
  width: 18px;
  height: 10px;
  border-radius: 10px;
  box-shadow:
    -6px 3px 0 0 rgba(255, 106, 162, 0.24),
    14px 3px 0 0 rgba(255, 106, 162, 0.24),
    5px 12px 0 -2px rgba(67, 47, 36, 0.55),
    3px 18px 0 -6px rgba(67, 47, 36, 0.55);
}

.product-image.placeholder-image .line-icon,
.empty-category .line-icon,
.category-icon.line-icon,
.placeholder-icon.line-icon,
.big-icon.line-icon {
  transform: translateZ(0);
}

.trust-row span {
  position: relative;
  padding-left: 14px;
}

.trust-row span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  transform: translateY(-50%);
}


/* V1.17 - cleaner dog icon */
.float-icon.dog-float {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.86), transparent 20%),
    linear-gradient(135deg, rgba(255, 106, 162, 0.10), rgba(255, 182, 193, 0.12));
  border: 1px solid rgba(220, 92, 145, 0.18);
  box-shadow: 0 12px 30px rgba(91, 48, 16, 0.08);
}

.float-icon.dog-float::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 16px;
  width: 24px;
  height: 20px;
  border-radius: 11px 11px 12px 12px;
  background: rgba(255, 106, 162, 0.14);
  border: 2px solid rgba(220, 92, 145, 0.34);
  box-shadow:
    -7px 2px 0 -2px rgba(255, 106, 162, 0.22),
    17px 2px 0 -2px rgba(255, 106, 162, 0.22);
}

.float-icon.dog-float::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 26px;
  width: 10px;
  height: 7px;
  border-radius: 999px 999px 12px 12px;
  background: rgba(67, 47, 36, 0.55);
  box-shadow:
    -2px -6px 0 -2px rgba(67, 47, 36, 0.56),
    6px -6px 0 -2px rgba(67, 47, 36, 0.56),
    2px 7px 0 -4px rgba(220, 92, 145, 0.36);
}

.line-icon.icon-dog {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.90), transparent 24%),
    linear-gradient(135deg, rgba(255, 106, 162, 0.10), rgba(255, 182, 193, 0.12));
  border-color: rgba(220, 92, 145, 0.28);
}

.line-icon.icon-dog::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 22px;
  height: 19px;
  border-radius: 10px 10px 12px 12px;
  background: rgba(255, 106, 162, 0.12);
  border: 2px solid rgba(220, 92, 145, 0.38);
  box-shadow:
    -6px 2px 0 -2px rgba(255, 106, 162, 0.24),
    14px 2px 0 -2px rgba(255, 106, 162, 0.24);
}

.line-icon.icon-dog::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 20px;
  width: 9px;
  height: 6px;
  border-radius: 999px 999px 10px 10px;
  background: rgba(67, 47, 36, 0.58);
  box-shadow:
    -2px -6px 0 -2px rgba(67, 47, 36, 0.58),
    6px -6px 0 -2px rgba(67, 47, 36, 0.58),
    2px 7px 0 -4px rgba(220, 92, 145, 0.38);
}


/* V1.19 - visible animated CSS line icons in background */
.animated-bg {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.animated-bg .float-icon {
  position: absolute;
  width: 62px;
  height: 62px;
  opacity: 0.23;
  filter: blur(0.1px);
  animation: bgIconFloat 13s ease-in-out infinite;
}

.bg-paw-1 { left: 7%; top: 24%; animation-delay: 0s; }
.bg-paw-2 { left: 76%; top: 22%; animation-delay: 2.2s; }
.bg-paw-3 { left: 18%; top: 80%; animation-delay: 4.1s; }
.bg-cat-1 { left: 87%; top: 58%; animation-delay: 1.3s; }
.bg-dog-1 { left: 4%; top: 60%; animation-delay: 3.3s; }
.bg-bone-1 { left: 64%; top: 82%; animation-delay: 5.1s; }
.bg-heart-1 { left: 48%; top: 16%; animation-delay: 2.8s; }

@keyframes bgIconFloat {
  0%, 100% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-24px) rotate(8deg);
  }
}

.bg-paw {
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 122, 40, 0.26) 0 14%, transparent 15%),
    radial-gradient(circle at 24% 28%, rgba(255, 122, 40, 0.23) 0 9%, transparent 10%),
    radial-gradient(circle at 43% 19%, rgba(255, 122, 40, 0.23) 0 9%, transparent 10%),
    radial-gradient(circle at 64% 21%, rgba(255, 122, 40, 0.23) 0 9%, transparent 10%),
    radial-gradient(circle at 79% 32%, rgba(255, 122, 40, 0.23) 0 8%, transparent 9%);
  border: 1px solid rgba(255, 122, 40, 0.14);
}

.bg-cat,
.bg-dog,
.bg-bone,
.bg-heart {
  border-radius: 22px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.76), transparent 22%),
    linear-gradient(135deg, rgba(255, 122, 40, 0.12), rgba(255, 106, 162, 0.13));
  border: 1px solid rgba(255, 122, 40, 0.15);
  box-shadow: 0 14px 32px rgba(91, 48, 16, 0.06);
}

.bg-cat::before,
.bg-cat::after,
.bg-dog::before,
.bg-dog::after,
.bg-bone::before,
.bg-bone::after,
.bg-heart::before,
.bg-heart::after {
  content: "";
  position: absolute;
}

.bg-cat::before {
  left: 17px;
  top: 18px;
  width: 28px;
  height: 24px;
  border-radius: 14px 14px 12px 12px;
  background: rgba(255, 122, 40, 0.16);
  border: 2px solid rgba(233, 95, 18, 0.25);
  clip-path: polygon(0 26%, 18% 0, 34% 22%, 66% 22%, 82% 0, 100% 26%, 100% 100%, 0 100%);
}

.bg-cat::after {
  left: 25px;
  top: 30px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(67, 47, 36, 0.36);
  box-shadow:
    9px 0 0 rgba(67, 47, 36, 0.36),
    4px 9px 0 -1px rgba(233, 95, 18, 0.26);
}

.bg-dog::before {
  left: 17px;
  top: 19px;
  width: 28px;
  height: 22px;
  border-radius: 13px 13px 14px 14px;
  background: rgba(255, 106, 162, 0.13);
  border: 2px solid rgba(220, 92, 145, 0.24);
  box-shadow:
    -8px 3px 0 -2px rgba(255, 106, 162, 0.17),
    18px 3px 0 -2px rgba(255, 106, 162, 0.17);
}

.bg-dog::after {
  left: 26px;
  top: 31px;
  width: 10px;
  height: 7px;
  border-radius: 999px 999px 12px 12px;
  background: rgba(67, 47, 36, 0.34);
  box-shadow:
    -2px -7px 0 -2px rgba(67, 47, 36, 0.33),
    7px -7px 0 -2px rgba(67, 47, 36, 0.33),
    2px 8px 0 -4px rgba(220, 92, 145, 0.27);
}

.bg-bone {
  width: 78px !important;
  height: 44px !important;
  border-radius: 999px;
}

.bg-bone::before {
  left: 18px;
  right: 18px;
  top: 16px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 122, 40, 0.16);
  border: 1px solid rgba(233, 95, 18, 0.20);
}

.bg-bone::after {
  left: 9px;
  top: 11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 122, 40, 0.12);
  box-shadow:
    38px 0 0 rgba(255, 122, 40, 0.12),
    0 12px 0 -5px rgba(255, 122, 40, 0.12),
    38px 12px 0 -5px rgba(255, 122, 40, 0.12);
}

.bg-heart {
  transform: rotate(45deg);
  border-radius: 18px;
}

.bg-heart::before,
.bg-heart::after {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 106, 162, 0.12);
}

.bg-heart::before {
  left: -8px;
  top: 9px;
}

.bg-heart::after {
  left: 9px;
  top: -8px;
}

@media (max-width: 680px) {
  .animated-bg .float-icon {
    width: 46px;
    height: 46px;
    opacity: 0.16;
  }

  .bg-bone {
    width: 58px !important;
    height: 34px !important;
  }

  .bg-paw-2,
  .bg-heart-1 {
    display: none;
  }
}


/* V1.20 - darker floating CSS background icons */
.animated-bg .float-icon {
  opacity: 0.36;
}

.bg-paw {
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 122, 40, 0.42) 0 14%, transparent 15%),
    radial-gradient(circle at 24% 28%, rgba(255, 122, 40, 0.38) 0 9%, transparent 10%),
    radial-gradient(circle at 43% 19%, rgba(255, 122, 40, 0.38) 0 9%, transparent 10%),
    radial-gradient(circle at 64% 21%, rgba(255, 122, 40, 0.38) 0 9%, transparent 10%),
    radial-gradient(circle at 79% 32%, rgba(255, 122, 40, 0.38) 0 8%, transparent 9%);
  border: 1px solid rgba(255, 122, 40, 0.28);
}

.bg-cat,
.bg-dog,
.bg-bone,
.bg-heart {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.82), transparent 22%),
    linear-gradient(135deg, rgba(255, 122, 40, 0.22), rgba(255, 106, 162, 0.22));
  border: 1px solid rgba(255, 122, 40, 0.28);
  box-shadow: 0 14px 32px rgba(91, 48, 16, 0.10);
}

.bg-cat::before {
  background: rgba(255, 122, 40, 0.28);
  border-color: rgba(233, 95, 18, 0.42);
}

.bg-cat::after {
  background: rgba(67, 47, 36, 0.52);
  box-shadow:
    9px 0 0 rgba(67, 47, 36, 0.52),
    4px 9px 0 -1px rgba(233, 95, 18, 0.42);
}

.bg-dog::before {
  background: rgba(255, 106, 162, 0.24);
  border-color: rgba(220, 92, 145, 0.42);
  box-shadow:
    -8px 3px 0 -2px rgba(255, 106, 162, 0.30),
    18px 3px 0 -2px rgba(255, 106, 162, 0.30);
}

.bg-dog::after {
  background: rgba(67, 47, 36, 0.50);
  box-shadow:
    -2px -7px 0 -2px rgba(67, 47, 36, 0.48),
    7px -7px 0 -2px rgba(67, 47, 36, 0.48),
    2px 8px 0 -4px rgba(220, 92, 145, 0.42);
}

.bg-bone::before {
  background: rgba(255, 122, 40, 0.28);
  border-color: rgba(233, 95, 18, 0.34);
}

.bg-bone::after {
  background: rgba(255, 122, 40, 0.24);
  box-shadow:
    38px 0 0 rgba(255, 122, 40, 0.24),
    0 12px 0 -5px rgba(255, 122, 40, 0.24),
    38px 12px 0 -5px rgba(255, 122, 40, 0.24);
}

.bg-heart::before,
.bg-heart::after {
  background: rgba(255, 106, 162, 0.24);
}

@media (max-width: 680px) {
  .animated-bg .float-icon {
    opacity: 0.24;
  }
}


/* V1.21 - cart icon for Cart Coming Soon page */
.icon-cart::before {
  left: 9px;
  top: 16px;
  width: 27px;
  height: 16px;
  border-radius: 5px 5px 8px 8px;
  background: rgba(255, 122, 40, 0.24);
  border: 2px solid rgba(233, 95, 18, 0.42);
}

.icon-cart::after {
  left: 14px;
  top: 33px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(233, 95, 18, 0.48);
  box-shadow: 15px 0 0 rgba(233, 95, 18, 0.48);
}









/* V1.26 - one right-side Cart Soon button with icon */
.cart-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.cart-cta .nav-cart-icon {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.cart-cta .nav-cart-icon::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 17px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 4px 4px 6px 6px;
  opacity: 0.95;
}

.cart-cta .nav-cart-icon::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 9px 0 0 currentColor;
}

@media (max-width: 1050px) {
  .cart-cta {
    display: inline-flex !important;
    padding: 10px 14px;
    font-size: 13px;
  }
}


/* V1.27 - fixed Product Categories CSS icons */
.category-card .category-icon.line-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 18px;
  display: inline-block;
  position: relative;
  overflow: visible;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.88), transparent 24%),
    linear-gradient(135deg, rgba(255, 122, 40, 0.18), rgba(255, 106, 162, 0.14));
  border: 2px solid rgba(255, 122, 40, 0.28);
  box-shadow:
    inset 0 0 0 7px rgba(255, 255, 255, 0.44),
    0 10px 22px rgba(91, 48, 16, 0.08);
}

.category-card .category-icon.line-icon::before,
.category-card .category-icon.line-icon::after {
  content: "";
  position: absolute;
  box-shadow: none;
  clip-path: none;
}

/* Tofu Cat Litter: clean product bag / litter box icon */
.category-card .category-icon.icon-litter::before {
  left: 14px;
  top: 15px;
  width: 26px;
  height: 25px;
  border-radius: 8px 8px 10px 10px;
  background: rgba(255, 122, 40, 0.22);
  border: 2px solid rgba(233, 95, 18, 0.40);
}

.category-card .category-icon.icon-litter::after {
  left: 20px;
  top: 10px;
  width: 14px;
  height: 10px;
  border-radius: 8px 8px 3px 3px;
  background: rgba(255, 255, 255, 0.78);
  border: 2px solid rgba(233, 95, 18, 0.32);
}

/* Cat Treats: stable cat face icon */
.category-card .category-icon.icon-cat::before {
  left: 14px;
  top: 16px;
  width: 26px;
  height: 22px;
  border-radius: 14px 14px 12px 12px;
  background: rgba(255, 122, 40, 0.20);
  border: 2px solid rgba(233, 95, 18, 0.38);
}

.category-card .category-icon.icon-cat::after {
  left: 18px;
  top: 11px;
  width: 8px;
  height: 9px;
  border-radius: 2px 8px 4px 4px;
  background: rgba(255, 122, 40, 0.22);
  border-left: 2px solid rgba(233, 95, 18, 0.26);
  border-top: 2px solid rgba(233, 95, 18, 0.26);
  transform: rotate(-18deg);
  box-shadow:
    18px 5px 0 -1px rgba(255, 122, 40, 0.22),
    7px 18px 0 -3px rgba(67, 47, 36, 0.58),
    16px 18px 0 -3px rgba(67, 47, 36, 0.58),
    12px 25px 0 -4px rgba(233, 95, 18, 0.48);
}

/* Dog Treats: simplified rounded dog face icon */
.category-card .category-icon.icon-dog::before {
  left: 14px;
  top: 16px;
  width: 26px;
  height: 22px;
  border-radius: 13px 13px 14px 14px;
  background: rgba(255, 106, 162, 0.17);
  border: 2px solid rgba(220, 92, 145, 0.34);
  box-shadow:
    -7px 3px 0 -2px rgba(255, 106, 162, 0.25),
    17px 3px 0 -2px rgba(255, 106, 162, 0.25);
}

.category-card .category-icon.icon-dog::after {
  left: 22px;
  top: 27px;
  width: 10px;
  height: 7px;
  border-radius: 999px 999px 12px 12px;
  background: rgba(67, 47, 36, 0.55);
  box-shadow:
    -3px -7px 0 -2px rgba(67, 47, 36, 0.52),
    7px -7px 0 -2px rgba(67, 47, 36, 0.52);
}

/* Pet Supplies: clean paw icon */
.category-card .category-icon.icon-paw::before {
  left: 20px;
  top: 27px;
  width: 15px;
  height: 13px;
  border-radius: 55% 55% 65% 65%;
  background: rgba(255, 122, 40, 0.32);
}

.category-card .category-icon.icon-paw::after {
  left: 14px;
  top: 15px;
  width: 8px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 122, 40, 0.30);
  box-shadow:
    10px -4px 0 rgba(255, 122, 40, 0.30),
    21px 0 0 rgba(255, 122, 40, 0.30),
    6px 12px 0 -1px rgba(255, 122, 40, 0.30);
}

@media (max-width: 680px) {
  .category-card .category-icon.line-icon {
    width: 50px;
    height: 50px;
  }
}


/* V1.28 - stable SVG line icons for Home Product Categories */
.category-card .category-icon.line-icon {
  width: 58px !important;
  height: 58px !important;
  display: inline-block !important;
  position: relative !important;
  margin-bottom: 14px !important;
  border-radius: 18px !important;
  background-color: rgba(255, 255, 255, 0.78) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 38px 38px !important;
  border: 2px solid rgba(255, 122, 40, 0.22) !important;
  box-shadow:
    inset 0 0 0 7px rgba(255, 241, 232, 0.72),
    0 10px 22px rgba(91, 48, 16, 0.08) !important;
  overflow: hidden !important;
}

.category-card .category-icon.line-icon::before,
.category-card .category-icon.line-icon::after {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
}

.category-card .category-icon.icon-litter {
  background-image: url("assets/icon-litter.svg") !important;
}

.category-card .category-icon.icon-cat {
  background-image: url("assets/icon-cat.svg") !important;
}

.category-card .category-icon.icon-dog {
  background-image: url("assets/icon-dog.svg") !important;
}

.category-card .category-icon.icon-paw {
  background-image: url("assets/icon-paw.svg") !important;
}

@media (max-width: 680px) {
  .category-card .category-icon.line-icon {
    width: 54px !important;
    height: 54px !important;
    background-size: 36px 36px !important;
  }
}





/* V1.34 - final stable SVG icons for product/category cards */
.stable-card-icon,
.stable-product-icon {
  display: inline-block;
  flex: 0 0 auto;
  position: relative;
  border-radius: 18px;
  background-color: rgba(255, 255, 255, 0.82);
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid rgba(255, 122, 40, 0.22);
  box-shadow:
    inset 0 0 0 7px rgba(255, 241, 232, 0.72),
    0 10px 22px rgba(91, 48, 16, 0.08);
  overflow: hidden;
}

.stable-card-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  background-size: 38px 38px;
}

.stable-product-icon {
  width: 78px;
  height: 78px;
  background-size: 52px 52px;
}

.placeholder-stack .stable-product-icon {
  width: 76px;
  height: 76px;
  margin-bottom: 4px;
}

.empty-category .stable-product-icon {
  width: 64px;
  height: 64px;
  background-size: 42px 42px;
}

.icon-litter-svg {
  background-image: url("assets/icon-litter.svg");
}

.icon-cat-svg {
  background-image: url("assets/icon-cat.svg");
}

.icon-dog-svg {
  background-image: url("assets/icon-dog.svg");
}

.icon-paw-svg {
  background-image: url("assets/icon-paw.svg");
}

@media (max-width: 680px) {
  .stable-card-icon {
    width: 54px;
    height: 54px;
    background-size: 36px 36px;
  }

  .stable-product-icon {
    width: 70px;
    height: 70px;
    background-size: 48px 48px;
  }
}


/* V1.39 - Shopee-style mobile horizontal scroll cards */
.mobile-scroll-hint {
  display: none;
}

@media (max-width: 680px) {
  #categories .category-grid,
  #featured-products .shop-grid {
    display: flex !important;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 6px 2px 18px;
    margin-inline: -2px;
    -webkit-overflow-scrolling: touch;
  }

  #categories .category-grid::-webkit-scrollbar,
  #featured-products .shop-grid::-webkit-scrollbar {
    height: 6px;
  }

  #categories .category-grid::-webkit-scrollbar-track,
  #featured-products .shop-grid::-webkit-scrollbar-track {
    background: rgba(255, 122, 40, 0.08);
    border-radius: 999px;
  }

  #categories .category-grid::-webkit-scrollbar-thumb,
  #featured-products .shop-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--orange), var(--pink));
    border-radius: 999px;
  }

  #categories .category-card,
  #featured-products .shop-card {
    min-width: 78%;
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  #featured-products .product-image {
    min-height: 170px;
  }

  .mobile-scroll-hint {
    display: block;
    margin: -24px auto 24px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
  }
}

@media (max-width: 420px) {
  #categories .category-card,
  #featured-products .shop-card {
    min-width: 84%;
    flex-basis: 84%;
  }
}


/* V1.40 - Products page mobile-only horizontal category browse */
.product-mobile-browse {
  display: none;
}

@media (max-width: 680px) {
  .product-mobile-browse {
    display: block;
  }

  .product-mobile-browse .section-heading {
    margin-bottom: 18px;
  }

  .product-mobile-browse .product-page-hint {
    display: block;
    margin: -8px 0 14px;
    text-align: left;
  }

  .product-mobile-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 6px 2px 18px;
    -webkit-overflow-scrolling: touch;
  }

  .product-mobile-scroll::-webkit-scrollbar {
    height: 6px;
  }

  .product-mobile-scroll::-webkit-scrollbar-track {
    background: rgba(255, 122, 40, 0.08);
    border-radius: 999px;
  }

  .product-mobile-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--orange), var(--pink));
    border-radius: 999px;
  }

  .product-mobile-scroll .category-card {
    min-width: 78%;
    flex: 0 0 78%;
    scroll-snap-align: start;
    min-height: 255px;
  }
}

@media (max-width: 420px) {
  .product-mobile-scroll .category-card {
    min-width: 84%;
    flex-basis: 84%;
  }
}


/* V1.41 - Marketplace links */
.marketplace-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.marketplace-link-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--orange-dark);
  background: rgba(255, 241, 232, 0.9);
  border: 1px solid rgba(255, 122, 40, 0.24);
  font-weight: 900;
  font-size: 14px;
}

.marketplace-link-row a:hover {
  color: white;
  background: linear-gradient(135deg, var(--orange), var(--pink));
}

.marketplace-link-pill {
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.marketplace-link-pill:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.30);
}

.site-footer .marketplace-link-row {
  margin-top: 0;
}


/* V1.42 - Real product images for Tofu Cat Litter Milk Scent */
.real-card-image {
  min-height: 245px;
  background: #fff7ef;
  overflow: hidden;
}

.card-product-photo {
  width: 100%;
  height: 100%;
  min-height: 245px;
  object-fit: cover;
  display: block;
}

.real-product-photo {
  min-height: 520px;
  background: #fff7ef;
  overflow: hidden;
  padding: 0;
}

.real-product-photo img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
}

.product-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.product-photo-grid img {
  width: 100%;
  aspect-ratio: 1 / 1.22;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255, 122, 40, 0.16);
  box-shadow: 0 10px 24px rgba(91, 48, 16, 0.08);
  background: #fff7ef;
}

@media (max-width: 680px) {
  .real-card-image { min-height: 240px; }
  .card-product-photo { min-height: 240px; }
  .real-product-photo { min-height: 420px; }
  .real-product-photo img { min-height: 420px; }
  .product-photo-grid {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .product-photo-grid img {
    min-width: 46%;
    flex: 0 0 46%;
    scroll-snap-align: start;
  }
}





/* V1.44 - Product detail title smaller and stays inside the card */
.product-detail-hero .product-info-panel {
  overflow: hidden !important;
}

.product-detail-hero .product-info-panel h1 {
  max-width: 100% !important;
  font-size: clamp(24px, 2.25vw, 38px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  margin-bottom: 12px !important;
}

.product-detail-hero .product-subtitle {
  max-width: 100% !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.product-tabs-grid .info-card {
  overflow: hidden !important;
}

.product-tabs-grid .info-card h2 {
  max-width: 100% !important;
  font-size: clamp(18px, 1.3vw, 22px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  margin-bottom: 12px !important;
}

.product-tabs-grid .info-card p,
.product-tabs-grid .info-card li {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.product-price-box strong {
  font-size: clamp(26px, 2.5vw, 36px) !important;
}

@media (max-width: 680px) {
  .product-detail-hero .product-info-panel h1 {
    font-size: clamp(17px, 4.7vw, 22px) !important;
    letter-spacing: -0.015em !important;
  }

  .product-detail-hero .product-subtitle {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .product-tabs-grid .info-card h2 {
    font-size: 18px !important;
  }

  .product-tabs-grid .info-card p,
  .product-tabs-grid .info-card li {
    font-size: 14px !important;
  }

  .product-price-box strong {
    font-size: 28px !important;
  }
}

@media (max-width: 390px) {
  .product-detail-hero .product-info-panel h1 {
    font-size: 16px !important;
  }
}


/* V1.45 - Product image full view and no-crop thumbnails */
.product-gallery img {
  cursor: zoom-in;
}

.product-photo-grid img {
  object-fit: contain !important;
  background: #fff7ef;
  padding: 6px;
}

.real-product-photo img {
  object-fit: contain !important;
  background: #fff7ef;
}

.product-image-hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(35, 24, 18, 0.76);
  backdrop-filter: blur(10px);
}

.image-lightbox.is-open {
  display: flex;
}

.image-lightbox img {
  max-width: min(96vw, 980px);
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 22px;
  background: #fff7ef;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
}

.image-lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.20);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 680px) {
  .product-photo-grid img {
    object-fit: contain !important;
    padding: 5px;
  }

  .image-lightbox {
    padding: 12px;
  }

  .image-lightbox img {
    max-width: 96vw;
    max-height: 86vh;
    border-radius: 16px;
  }

  .image-lightbox-close {
    top: 12px;
    right: 12px;
  }
}


/* V1.49 - Cat Strip Feeder product image */
.single-product-photo img {
  object-fit: contain !important;
  background: #fff7ef;
}

@media (max-width: 680px) {
  .single-product-photo img {
    object-fit: contain !important;
  }
}


/* V1.51 - Cat Strip Feeder full gallery */
.product-photo-grid img {
  object-fit: contain !important;
  background: #fff7ef;
  padding: 4px;
}


/* V1.54 - Pet Grooming Brush product images */
.product-photo-grid img {
  object-fit: contain !important;
  background: #fff7ef;
  padding: 4px;
}


/* V1.55 - Make Tofu Cat Litter product-card image look more balanced on Products page */
.tofu-card-photo {
  object-fit: contain !important;
  padding: 12px;
  background: #fff7ef;
}


/* V1.57 - Correct Home Featured Products, aligned buttons, and one-line copyright */
.featured-products-grid {
  align-items: stretch;
}

.featured-home-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.featured-home-card .shop-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.featured-home-card .mini-list {
  margin-top: auto;
}

.featured-home-card .card-actions {
  margin-top: 18px;
  align-items: stretch;
}

.featured-home-card .card-actions .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-bottom {
  display: block !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  padding: 18px 0 !important;
}

.footer-bottom span {
  display: inline-block !important;
  white-space: nowrap !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.footer-bottom p,
.footer-bottom small {
  display: inline !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

@media (max-width: 520px) {
  .footer-bottom {
    font-size: 11px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


/* V1.58 - Force copyright to one straight line */
.container.footer-bottom {
  display: block !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  padding: 18px 12px !important;
}

.container.footer-bottom span {
  display: inline-block !important;
  white-space: nowrap !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.container.footer-bottom p,
.container.footer-bottom small {
  display: inline !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

@media (max-width: 520px) {
  .container.footer-bottom {
    font-size: 11px !important;
  }
}


/* V1.60 - Use new square tofu card image and keep product cards neatly aligned */
.featured-products-grid {
  align-items: stretch;
}

.featured-home-card .product-image,
.products-grid .product-image,
.shop-card .product-image.real-card-image {
  aspect-ratio: 1 / 1;
  min-height: auto !important;
}

.featured-home-card .card-product-photo,
.products-grid .card-product-photo,
.shop-card .product-image.real-card-image .card-product-photo {
  min-height: auto !important;
  height: 100% !important;
}

.featured-home-card h3,
.products-grid .shop-card h3 {
  min-height: 2.6em;
}

.featured-home-card p,
.products-grid .shop-card p {
  min-height: 3.4em;
}

.featured-home-card .card-actions,
.products-grid .card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.featured-home-card .card-actions .btn,
.products-grid .card-actions .btn {
  width: 100%;
}

@media (max-width: 680px) {
  .featured-home-card h3,
  .products-grid .shop-card h3,
  .featured-home-card p,
  .products-grid .shop-card p {
    min-height: 0;
  }

  .featured-home-card .card-actions,
  .products-grid .card-actions {
    grid-template-columns: 1fr;
  }
}


/* V1.61 - Center text neatly inside featured/product card buttons */
.featured-home-card .card-actions .btn,
.products-grid .card-actions .btn,
.shop-card .card-actions .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.featured-home-card .card-actions .btn span,
.products-grid .card-actions .btn span,
.shop-card .card-actions .btn span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
}


/* V1.64 - Home WhatsApp order button cleanup */
.featured-home-card .card-actions:has(.btn:only-child),
.shop-card .card-actions:has(.btn:only-child) {
  display: block;
}

.featured-home-card .card-actions .btn:only-child,
.shop-card .card-actions .btn:only-child {
  width: 100%;
}


/* V1.65 - Header official website label and nav cleanup */
.brand .brand-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.05;
}

.brand .brand-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.brand .brand-stack small {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 680px) {
  .brand .brand-title {
    font-size: 18px;
  }

  .brand .brand-stack small {
    font-size: 9.5px;
  }
}


/* V1.66 - Pet Supplies arrows + auto slide, keeping V1.65 card size */
#pet-supplies .container {
  position: relative;
}

#pet-supplies .pet-carousel-track {
  scroll-behavior: smooth;
}

#pet-supplies .pet-carousel-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

#pet-supplies .pet-carousel-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 122, 40, 0.22);
  background: #fff7ef;
  color: var(--orange-dark);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(91, 48, 16, 0.10);
}

#pet-supplies .pet-carousel-btn:hover {
  background: linear-gradient(135deg, var(--orange), var(--pink));
  color: #fff;
}

@media (max-width: 760px) {
  #pet-supplies .pet-carousel-track {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: hidden;
    gap: 18px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
  }

  #pet-supplies .pet-carousel-track .shop-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
}


/* V1.67 - Pet Supplies show one product at a time */
#pet-supplies .pet-carousel-track {
  display: flex !important;
  grid-template-columns: none !important;
  width: min(430px, 100%) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
  gap: 0 !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

#pet-supplies .pet-carousel-track .shop-card {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  scroll-snap-align: start;
}

#pet-supplies .pet-carousel-controls {
  margin-top: 18px !important;
}

@media (max-width: 680px) {
  #pet-supplies .pet-carousel-track {
    width: 100% !important;
  }
}


/* V1.68 - Pet Supplies slider keeps V1.65 full-width card length */
#pet-supplies .pet-carousel-track {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  overflow: hidden !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

#pet-supplies .pet-carousel-track .shop-card {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  scroll-snap-align: start;
}

#pet-supplies .pet-carousel-track .featured-product {
  display: grid !important;
  grid-template-columns: 0.85fr 1.15fr !important;
}

@media (max-width: 760px) {
  #pet-supplies .pet-carousel-track .featured-product {
    grid-template-columns: 1fr !important;
  }
}


/* V1.69 - Pet Supplies arrows beside image + rounder box corners */
#pet-supplies .pet-carousel-shell {
  position: relative;
}

#pet-supplies .pet-carousel-track {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  overflow: hidden !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

#pet-supplies .pet-carousel-track .shop-card {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  scroll-snap-align: start;
}

#pet-supplies .pet-carousel-track .featured-product {
  display: grid !important;
  grid-template-columns: 0.85fr 1.15fr !important;
}

#pet-supplies .pet-carousel-controls {
  position: absolute;
  inset: 0;
  margin: 0 !important;
  pointer-events: none;
}

#pet-supplies .pet-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  pointer-events: auto;
  z-index: 3;
}

#pet-supplies .pet-carousel-prev {
  left: 14px;
}

#pet-supplies .pet-carousel-next {
  left: calc(42.5% - 58px);
}

@media (max-width: 760px) {
  #pet-supplies .pet-carousel-track .featured-product {
    grid-template-columns: 1fr !important;
  }

  #pet-supplies .pet-carousel-prev {
    left: 12px;
  }

  #pet-supplies .pet-carousel-next {
    left: auto;
    right: 12px;
  }
}

/* Rounder corners for boxes/cards */
.shop-card,
.info-card,
.page-card,
.product-info-panel,
.product-price-box,
.notice-box,
.comparison-wrap,
.empty-category,
.faq-item,
.contact-card,
.reveal-card,
.real-card-image,
.product-image,
.product-photo-grid img,
.main-product-photo,
.thumb-row span {
  border-radius: 22px !important;
}

.shop-card,
.info-card,
.page-card,
.product-info-panel,
.product-price-box,
.notice-box,
.comparison-wrap,
.empty-category,
.faq-item,
.contact-card,
.reveal-card {
  overflow: hidden;
}

.product-image,
.real-card-image,
.main-product-photo {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.featured-product .shop-card-body {
  border-radius: 0 22px 22px 0;
}

@media (max-width: 760px) {
  .featured-product .shop-card-body {
    border-radius: 0 0 22px 22px;
  }
}


/* V1.70 - Pet Supplies arrows outside the box, plain arrow only */
#pet-supplies .pet-carousel-shell {
  position: relative;
  overflow: visible !important;
}

#pet-supplies .pet-carousel-controls {
  position: absolute;
  inset: 0;
  margin: 0 !important;
  pointer-events: none;
  overflow: visible !important;
}

#pet-supplies .pet-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--orange-dark);
  font-size: 40px !important;
  font-weight: 900;
  line-height: 1;
  pointer-events: auto;
  z-index: 5;
}

#pet-supplies .pet-carousel-prev {
  left: -24px !important;
}

#pet-supplies .pet-carousel-next {
  left: auto !important;
  right: -24px !important;
}

#pet-supplies .pet-carousel-btn:hover {
  background: transparent !important;
  color: var(--orange);
  filter: none !important;
}

#pet-supplies .pet-carousel-btn:focus,
#pet-supplies .pet-carousel-btn:active {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  #pet-supplies .pet-carousel-prev {
    left: -10px !important;
  }

  #pet-supplies .pet-carousel-next {
    right: -10px !important;
  }

  #pet-supplies .pet-carousel-btn {
    font-size: 34px !important;
  }
}


/* V1.71 - Mobile table scroll and Pet Supplies swipe fix */
@media (max-width: 760px) {
  /* Home page Simple Cat Litter Comparison + Comparison page tables */
  .comparison-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }

  .comparison-wrap table,
  .comparison-table,
  .large-table {
    min-width: 720px !important;
    width: 720px !important;
  }

  .comparison-wrap::-webkit-scrollbar {
    height: 6px;
  }

  .comparison-wrap::-webkit-scrollbar-track {
    background: rgba(255, 122, 40, 0.08);
    border-radius: 999px;
  }

  .comparison-wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 122, 40, 0.28);
    border-radius: 999px;
  }

  /* Product page Pet Supplies: hide arrows on phone and allow swipe */
  #pet-supplies .pet-carousel-controls {
    display: none !important;
  }

  #pet-supplies .pet-carousel-shell {
    overflow: hidden !important;
  }

  #pet-supplies .pet-carousel-track {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    scrollbar-width: none;
  }

  #pet-supplies .pet-carousel-track::-webkit-scrollbar {
    display: none;
  }

  #pet-supplies .pet-carousel-track .shop-card {
    scroll-snap-align: start !important;
  }
}


/* V1.75 - Tofu Cat Litter bundle price and shipping table */
.bundle-info-card {
  overflow: hidden;
}

.bundle-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 12px;
}

.bundle-price-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.bundle-price-table th,
.bundle-price-table td {
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 122, 40, 0.12);
  vertical-align: top;
}

.bundle-price-table th {
  background: rgba(255, 241, 232, 0.92);
  color: var(--dark);
  font-weight: 900;
}

.bundle-price-table td:nth-child(2) {
  color: var(--orange-dark);
  font-weight: 900;
}

.bundle-price-table tr:last-child td {
  border-bottom: none;
}

.bundle-note-list {
  margin-top: 16px;
}

.bundle-note-list li {
  color: var(--muted);
}

@media (max-width: 680px) {
  .bundle-price-table {
    min-width: 560px;
  }
}


/* V1.76 - Tofu Cat Litter top pack selector */
.pack-selector-card {
  margin: 22px 0 18px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(255, 247, 239, 0.82);
}

.pack-selector-card h2 {
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.2;
  margin-bottom: 14px;
}

.pack-option-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.pack-option-btn {
  appearance: none;
  border: 1px solid rgba(255, 122, 40, 0.18);
  background: #fff;
  color: var(--dark);
  border-radius: 16px;
  padding: 12px 8px;
  cursor: pointer;
  display: grid;
  gap: 5px;
  text-align: center;
  box-shadow: none;
}

.pack-option-btn span {
  font-weight: 900;
  font-size: 13px;
}

.pack-option-btn strong {
  color: var(--orange-dark);
  font-size: 15px;
}

.pack-option-btn.active {
  border-color: rgba(255, 122, 40, 0.68);
  background: linear-gradient(180deg, #fff9f3, #fff0e6);
  box-shadow: 0 10px 22px rgba(91, 48, 16, 0.10);
}

.pack-summary {
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 122, 40, 0.12);
  background: #fff;
}

.pack-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 122, 40, 0.10);
}

.pack-summary-row:last-child {
  border-bottom: 0;
}

.pack-summary-row span {
  color: var(--muted);
  font-size: 14px;
}

.pack-summary-row strong {
  color: var(--orange-dark);
  font-size: 16px;
}

.pack-total-row {
  background: rgba(255, 241, 232, 0.78);
}

.pack-total-row span,
.pack-total-row strong {
  font-weight: 900;
}

.pack-note-list {
  margin-top: 13px;
}

.pack-note-list li {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 680px) {
  .pack-option-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pack-summary-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}


/* V1.78 - Shipping WhatsApp note for Pet Supplies detail pages */
.shipping-whatsapp-note {
  margin: 18px 0 4px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 122, 40, 0.16);
  background: rgba(255, 247, 239, 0.88);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
}


/* V1.79 - Clearer shipping WhatsApp note and remove repeated detail notes */
.shipping-whatsapp-note {
  margin: 18px 0 18px !important;
  padding: 15px 17px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 122, 40, 0.22) !important;
  background: rgba(255, 241, 232, 0.92) !important;
  color: var(--dark) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  display: grid !important;
  gap: 4px !important;
}

.shipping-whatsapp-note strong {
  color: var(--orange-dark) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.shipping-whatsapp-note span {
  color: var(--muted) !important;
  font-weight: 700 !important;
}


/* V1.80 - Cache fix fallback for Tofu Cat Litter pack selector */
.pack-selector-card {
  margin: 22px 0 18px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  border: 1px solid var(--border) !important;
  background: rgba(255, 247, 239, 0.82) !important;
}

.pack-selector-card h2 {
  font-size: clamp(18px, 1.45vw, 23px) !important;
  line-height: 1.2 !important;
  margin-bottom: 14px !important;
}

.pack-option-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}

.pack-option-btn {
  appearance: none !important;
  border: 1px solid rgba(255, 122, 40, 0.18) !important;
  background: #fff !important;
  color: var(--dark) !important;
  border-radius: 16px !important;
  padding: 12px 8px !important;
  cursor: pointer !important;
  display: grid !important;
  gap: 5px !important;
  text-align: center !important;
  box-shadow: none !important;
  width: 100% !important;
}

.pack-option-btn span {
  font-weight: 900 !important;
  font-size: 13px !important;
}

.pack-option-btn strong {
  color: var(--orange-dark) !important;
  font-size: 15px !important;
}

.pack-option-btn.active {
  border-color: rgba(255, 122, 40, 0.68) !important;
  background: linear-gradient(180deg, #fff9f3, #fff0e6) !important;
  box-shadow: 0 10px 22px rgba(91, 48, 16, 0.10) !important;
}

.pack-summary {
  margin-top: 14px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 122, 40, 0.12) !important;
  background: #fff !important;
}

.pack-summary-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(255, 122, 40, 0.10) !important;
}

.pack-summary-row:last-child {
  border-bottom: 0 !important;
}

.pack-summary-row span {
  color: var(--muted) !important;
  font-size: 14px !important;
}

.pack-summary-row strong {
  color: var(--orange-dark) !important;
  font-size: 16px !important;
}

.pack-total-row {
  background: rgba(255, 241, 232, 0.78) !important;
}

.pack-total-row span,
.pack-total-row strong {
  font-weight: 900 !important;
}

.pack-note-list {
  margin-top: 13px !important;
}

.pack-note-list li {
  color: var(--muted) !important;
  font-size: 14px !important;
}

@media (max-width: 680px) {
  .pack-option-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .pack-summary-row {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
}


/* V1.82 - New cat litter products / unified card details */
.cat-litter-grid {
  align-items: stretch;
}
.shipping-ribbon {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 11px;
  background: linear-gradient(135deg, #ff7a28, #ffb36f);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 18px rgba(91, 48, 16, 0.18);
}
.product-image.real-card-image {
  position: relative;
}
.free-shipping-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(255, 122, 40, 0.14);
  color: var(--orange-dark);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.product-disabled-link {
  pointer-events: none;
  opacity: 0.72;
}
.product-info-panel {
  position: relative;
}
@media (max-width: 760px) {
  .product-mascot-deco {
    width: 56px;
    height: 56px;
    top: 10px;
    right: 12px;
    opacity: 0.86;
  }
  .shipping-ribbon {
    top: 10px;
    right: 10px;
    font-size: 11px;
  }
}


/* V1.83 - Smooth pack selector, UGREEN-inspired interaction while keeping Gi² Paws style */
.product-mascot-deco {
  display: none !important;
}

.pack-selector-card {
  background: rgba(255, 248, 242, 0.88) !important;
  border: 1px solid rgba(255, 122, 40, 0.13) !important;
  box-shadow: 0 18px 40px rgba(91, 48, 16, 0.07) !important;
}

.pack-option-grid {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 7px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 122, 40, 0.12) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.pack-option-grid::-webkit-scrollbar {
  display: none !important;
}

.pack-option-indicator {
  position: absolute !important;
  top: 7px !important;
  bottom: 7px !important;
  left: 0 !important;
  width: 0;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #fff8f0 0%, #ffe9d9 100%) !important;
  border: 1px solid rgba(255, 122, 40, 0.28) !important;
  box-shadow: 0 12px 26px rgba(255, 122, 40, 0.16) !important;
  transform: translateX(7px);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), width 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.pack-option-btn {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 0 118px !important;
  min-height: 78px !important;
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--dark) !important;
  border-radius: 18px !important;
  padding: 12px 10px !important;
  cursor: pointer !important;
  display: grid !important;
  gap: 5px !important;
  place-items: center !important;
  text-align: center !important;
  box-shadow: none !important;
  width: auto !important;
  transition: transform 220ms ease, opacity 220ms ease, color 220ms ease !important;
}

.pack-option-btn:hover,
.pack-option-btn.active {
  transform: translateY(-1px) !important;
}

.pack-option-btn span {
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
}

.pack-option-btn strong {
  color: var(--orange-dark) !important;
  font-size: 15px !important;
}

.pack-option-btn:not(.active) {
  opacity: 0.72 !important;
}

.pack-option-btn.active {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.free-shipping-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  background: rgba(42, 157, 91, 0.11) !important;
  color: #21844f !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

.pack-summary {
  transition: transform 260ms ease, opacity 260ms ease !important;
}

.pack-summary-animate {
  animation: packSummaryFade 260ms ease both;
}

@keyframes packSummaryFade {
  from { opacity: 0.65; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 680px) {
  .pack-option-grid {
    display: flex !important;
    grid-template-columns: none !important;
  }

  .pack-option-btn {
    flex: 0 0 120px !important;
  }
}


/* V1.84 - Home hero, carousels, product detail overflow, lightbox arrows */

/* Home: show Available now sooner while keeping banner more visible */
.hero.section-pad {
  padding-top: 52px !important;
  padding-bottom: 34px !important;
}

.hero-grid {
  gap: 42px !important;
  align-items: center !important;
}

.hero-copy h1 {
  font-size: clamp(42px, 5.5vw, 68px) !important;
  line-height: 0.98 !important;
}

.hero-text {
  font-size: 17px !important;
  line-height: 1.55 !important;
}

.hero-card {
  padding: 12px !important;
  border-radius: 36px !important;
  max-width: 660px !important;
  margin-left: auto !important;
}

.hero-card img {
  width: 100% !important;
  display: block !important;
  border-radius: 28px !important;
  transform: scale(1.035) !important;
  transform-origin: center !important;
}

#featured-products.section-pad {
  padding-top: 42px !important;
}

/* Home Featured and Product Cat Litter carousel */
.featured-carousel-shell,
.cat-carousel-shell {
  position: relative !important;
}

#featured-products .featured-carousel-track,
#cat-litter .cat-carousel-track {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
}

#featured-products .featured-carousel-track .shop-card,
#cat-litter .cat-carousel-track .shop-card {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  scroll-snap-align: start !important;
}

#featured-products .featured-home-card,
#cat-litter .cat-carousel-track .featured-product {
  display: grid !important;
  grid-template-columns: 0.92fr 1.08fr !important;
  align-items: stretch !important;
}

.featured-carousel-controls,
.cat-carousel-controls {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.featured-carousel-btn,
.cat-carousel-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 122, 40, 0.22) !important;
  background: rgba(255, 247, 239, 0.94) !important;
  color: var(--orange-dark) !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 12px 28px rgba(91, 48, 16, 0.14) !important;
  pointer-events: auto !important;
  z-index: 8 !important;
}

.featured-carousel-prev,
.cat-carousel-prev {
  left: -22px !important;
}

.featured-carousel-next,
.cat-carousel-next {
  right: -22px !important;
}

.featured-carousel-btn:hover,
.cat-carousel-btn:hover {
  background: linear-gradient(135deg, var(--orange), var(--pink)) !important;
  color: #fff !important;
}

/* Product Highlight */
.home-highlight-product {
  align-items: center !important;
}

.highlight-product-image {
  min-height: 420px !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  background: #fff7ef !important;
}

/* Product detail: allow long names to wrap instead of being clipped */
.product-detail-hero .product-info-panel {
  overflow: visible !important;
}

.product-detail-hero .product-info-panel h1 {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  font-size: clamp(23px, 2.1vw, 34px) !important;
  line-height: 1.13 !important;
  letter-spacing: -0.025em !important;
}

.product-tabs-grid .info-card h2 {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* Product detail: pack selector must stay inside card */
.pack-selector-card {
  padding: 16px !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.pack-option-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
  overflow: visible !important;
  max-width: 100% !important;
  padding: 6px !important;
}

.pack-option-btn {
  flex: none !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 70px !important;
  padding: 9px 6px !important;
  gap: 4px !important;
}

.pack-option-btn span {
  font-size: clamp(10px, 1vw, 12px) !important;
  line-height: 1.1 !important;
}

.pack-option-btn strong {
  font-size: clamp(12px, 1.1vw, 14px) !important;
  line-height: 1.1 !important;
}

.free-shipping-badge {
  font-size: 9px !important;
  padding: 3px 6px !important;
}

.pack-summary-row {
  padding: 10px 12px !important;
}

.pack-note-list {
  padding-left: 20px !important;
}

/* Product image lightbox next / previous arrows */
.image-lightbox-nav {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 50px !important;
  height: 50px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--orange), var(--pink)) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24) !important;
  font-size: 34px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 1001 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.image-lightbox-prev {
  left: 18px !important;
}

.image-lightbox-next {
  right: 18px !important;
}

/* Disabled Coming Soon links */
.product-disabled-link,
.footer-disabled-link {
  cursor: default !important;
}

.footer-disabled-link {
  display: block !important;
  color: inherit !important;
  opacity: 0.72 !important;
  margin: 8px 0 !important;
}

.shop-card h3 {
  overflow-wrap: anywhere !important;
}

@media (max-width: 900px) {
  .hero.section-pad {
    padding-top: 40px !important;
    padding-bottom: 28px !important;
  }

  .hero-grid {
    gap: 28px !important;
  }

  #featured-products .featured-home-card,
  #cat-litter .cat-carousel-track .featured-product {
    grid-template-columns: 1fr !important;
  }

  .featured-carousel-prev,
  .cat-carousel-prev {
    left: 8px !important;
  }

  .featured-carousel-next,
  .cat-carousel-next {
    right: 8px !important;
  }
}

@media (max-width: 680px) {
  .hero-copy h1 {
    font-size: clamp(38px, 12vw, 54px) !important;
  }

  .hero-card img {
    transform: scale(1.02) !important;
  }

  .featured-carousel-btn,
  .cat-carousel-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 26px !important;
  }

  #featured-products .featured-carousel-track,
  #cat-litter .cat-carousel-track {
    overflow-x: hidden !important;
  }

  .product-detail-hero .product-info-panel h1 {
    font-size: clamp(20px, 5.2vw, 25px) !important;
    line-height: 1.15 !important;
  }

  .pack-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pack-option-btn {
    min-height: 66px !important;
  }

  .image-lightbox-nav {
    width: 42px !important;
    height: 42px !important;
    font-size: 30px !important;
  }

  .image-lightbox-prev {
    left: 8px !important;
  }

  .image-lightbox-next {
    right: 8px !important;
  }
}


/* V1.85 - Unified product frames and arrow-only controls */

/* Home Available Now + Product Page cards: thicker rounded frame, soft Japanese-style product box */
#featured-products .shop-card,
.product-list-grid .shop-card,
#cat-litter .shop-card,
#pet-supplies .shop-card {
  border: 2px solid rgba(151, 103, 72, 0.24) !important;
  border-radius: 32px !important;
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(255, 246, 238, 0.96)) !important;
  box-shadow:
    0 0 0 7px rgba(255, 248, 239, 0.72),
    0 18px 46px rgba(91, 48, 16, 0.10) !important;
  overflow: hidden !important;
}

#featured-products .shop-card:hover,
.product-list-grid .shop-card:hover,
#cat-litter .shop-card:hover,
#pet-supplies .shop-card:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 0 0 7px rgba(255, 248, 239, 0.82),
    0 24px 58px rgba(91, 48, 16, 0.14) !important;
}

#featured-products .product-image,
.product-list-grid .product-image,
#cat-litter .product-image,
#pet-supplies .product-image {
  border-bottom: 1px solid rgba(151, 103, 72, 0.16) !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 219, 151, 0.28), transparent 32%),
    linear-gradient(145deg, #fffdf8, #fff3e8) !important;
}

#featured-products .shop-card-body,
.product-list-grid .shop-card-body,
#cat-litter .shop-card-body,
#pet-supplies .shop-card-body {
  background: rgba(255, 252, 247, 0.72) !important;
}

/* Keep cards visually consistent inside sliders */
#featured-products .featured-carousel-track .shop-card,
#cat-litter .cat-carousel-track .shop-card,
#pet-supplies .pet-carousel-track .shop-card {
  margin: 8px auto !important;
}

/* Arrow-only style: no circle frame, no rounded background, same visual language across website */
.featured-carousel-btn,
.cat-carousel-btn,
#pet-supplies .pet-carousel-btn,
.image-lightbox-nav,
.image-lightbox-close {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--orange-dark) !important;
  padding: 4px 10px !important;
  text-shadow: 0 3px 12px rgba(91, 48, 16, 0.16) !important;
}

.featured-carousel-btn,
.cat-carousel-btn,
#pet-supplies .pet-carousel-btn,
.image-lightbox-nav {
  font-size: 46px !important;
  line-height: 0.85 !important;
  font-weight: 900 !important;
}

.image-lightbox-close {
  top: 14px !important;
  right: 18px !important;
  font-size: 42px !important;
  line-height: 0.9 !important;
  font-weight: 700 !important;
}

.featured-carousel-btn:hover,
.cat-carousel-btn:hover,
#pet-supplies .pet-carousel-btn:hover,
.image-lightbox-nav:hover,
.image-lightbox-close:hover {
  background: transparent !important;
  color: var(--pink) !important;
  transform: translateY(-50%) scale(1.06) !important;
}

.image-lightbox-close:hover {
  transform: scale(1.06) !important;
}

#pet-supplies .pet-carousel-btn:hover {
  background: transparent !important;
  color: var(--pink) !important;
}

/* Align all slider arrows at the visual middle of the product card */
.featured-carousel-btn,
.cat-carousel-btn,
#pet-supplies .pet-carousel-btn {
  top: 50% !important;
}

.featured-carousel-prev,
.cat-carousel-prev {
  left: -28px !important;
}

.featured-carousel-next,
.cat-carousel-next {
  right: -28px !important;
}

#pet-supplies .pet-carousel-prev {
  left: -28px !important;
}

#pet-supplies .pet-carousel-next {
  left: auto !important;
  right: -28px !important;
}

/* Lightbox arrows stay clean and outside the photo area */
.image-lightbox-prev {
  left: 18px !important;
}

.image-lightbox-next {
  right: 18px !important;
}

@media (max-width: 900px) {
  .featured-carousel-prev,
  .cat-carousel-prev,
  #pet-supplies .pet-carousel-prev {
    left: 0 !important;
  }

  .featured-carousel-next,
  .cat-carousel-next,
  #pet-supplies .pet-carousel-next {
    right: 0 !important;
  }
}

@media (max-width: 680px) {
  #featured-products .shop-card,
  .product-list-grid .shop-card,
  #cat-litter .shop-card,
  #pet-supplies .shop-card {
    border-radius: 26px !important;
    box-shadow:
      0 0 0 5px rgba(255, 248, 239, 0.72),
      0 14px 32px rgba(91, 48, 16, 0.10) !important;
  }

  .featured-carousel-btn,
  .cat-carousel-btn,
  #pet-supplies .pet-carousel-btn,
  .image-lightbox-nav {
    font-size: 38px !important;
    padding: 4px 8px !important;
  }

  .image-lightbox-close {
    top: 10px !important;
    right: 12px !important;
    font-size: 36px !important;
  }
}


/* V1.86 - Real wood-colour rounded product frames */

/*
  This section intentionally overrides the earlier soft frame.
  Goal: visible wood-colour rounded frame around each product card,
  without changing product content, images, prices, links or layout.
*/

/* Main product card frame */
#featured-products .shop-card,
#cat-litter .shop-card,
#pet-supplies .shop-card,
.product-list-grid .shop-card {
  position: relative !important;
  border: 0 !important;
  border-radius: 36px !important;
  padding: 8px !important;
  background:
    linear-gradient(135deg, #8a5a2b 0%, #c49155 22%, #f0c786 46%, #a46a35 70%, #7a4b24 100%) !important;
  box-shadow:
    0 20px 46px rgba(91, 48, 16, 0.18),
    inset 0 1px 0 rgba(255, 246, 225, 0.72),
    inset 0 -2px 0 rgba(86, 48, 20, 0.18) !important;
  overflow: hidden !important;
}

/* Subtle wood grain line texture on the outer frame */
#featured-products .shop-card::before,
#cat-litter .shop-card::before,
#pet-supplies .shop-card::before,
.product-list-grid .shop-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: 36px !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.10) 0,
      rgba(255, 255, 255, 0.10) 2px,
      rgba(95, 54, 22, 0.08) 3px,
      rgba(95, 54, 22, 0.08) 6px
    ),
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(80,42,16,0.08)) !important;
  mix-blend-mode: soft-light !important;
}

/* Inner cream panel inside the wooden frame */
#featured-products .shop-card > *,
#cat-litter .shop-card > *,
#pet-supplies .shop-card > *,
.product-list-grid .shop-card > * {
  position: relative !important;
  z-index: 2 !important;
}

#featured-products .product-image,
#cat-litter .product-image,
#pet-supplies .product-image,
.product-list-grid .product-image {
  border-radius: 28px 28px 0 0 !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 226, 166, 0.30), transparent 32%),
    linear-gradient(145deg, #fffdf7 0%, #fff4e7 100%) !important;
  overflow: hidden !important;
}

/* Body panel must also be rounded at bottom, so the whole card looks framed */
#featured-products .shop-card-body,
#cat-litter .shop-card-body,
#pet-supplies .shop-card-body,
.product-list-grid .shop-card-body {
  border-radius: 0 0 28px 28px !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 247, 238, 0.98)) !important;
  border-top: 1px solid rgba(130, 83, 42, 0.16) !important;
  overflow: hidden !important;
}

/* When product card is horizontal, keep the inner left/right corners rounded properly */
#featured-products .featured-product .product-image,
#cat-litter .featured-product .product-image,
#pet-supplies .featured-product .product-image,
.product-list-grid .featured-product .product-image {
  border-radius: 28px 0 0 28px !important;
  border-right: 1px solid rgba(130, 83, 42, 0.15) !important;
  border-bottom: 0 !important;
}

#featured-products .featured-product .shop-card-body,
#cat-litter .featured-product .shop-card-body,
#pet-supplies .featured-product .shop-card-body,
.product-list-grid .featured-product .shop-card-body {
  border-radius: 0 28px 28px 0 !important;
  border-top: 0 !important;
}

/* Hover still gentle, no ugly jump */
#featured-products .shop-card:hover,
#cat-litter .shop-card:hover,
#pet-supplies .shop-card:hover,
.product-list-grid .shop-card:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 24px 54px rgba(91, 48, 16, 0.22),
    inset 0 1px 0 rgba(255, 246, 225, 0.76),
    inset 0 -2px 0 rgba(86, 48, 20, 0.20) !important;
}

/* Keep slider cards centered with enough breathing room so the wooden frame is visible */
#featured-products .featured-carousel-track .shop-card,
#cat-litter .cat-carousel-track .shop-card,
#pet-supplies .pet-carousel-track .shop-card {
  margin: 10px auto 18px !important;
}

/* Product page card width still follows slider/card layout but frame remains visible */
#cat-litter .cat-carousel-track,
#featured-products .featured-carousel-track {
  padding: 8px 4px 18px !important;
}

/* Mobile: same wood frame, slightly thinner so it does not feel bulky */
@media (max-width: 900px) {
  #featured-products .featured-product .product-image,
  #cat-litter .featured-product .product-image,
  #pet-supplies .featured-product .product-image,
  .product-list-grid .featured-product .product-image {
    border-radius: 26px 26px 0 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(130, 83, 42, 0.15) !important;
  }

  #featured-products .featured-product .shop-card-body,
  #cat-litter .featured-product .shop-card-body,
  #pet-supplies .featured-product .shop-card-body,
  .product-list-grid .featured-product .shop-card-body {
    border-radius: 0 0 26px 26px !important;
  }
}

@media (max-width: 680px) {
  #featured-products .shop-card,
  #cat-litter .shop-card,
  #pet-supplies .shop-card,
  .product-list-grid .shop-card {
    border-radius: 30px !important;
    padding: 6px !important;
  }

  #featured-products .shop-card::before,
  #cat-litter .shop-card::before,
  #pet-supplies .shop-card::before,
  .product-list-grid .shop-card::before {
    border-radius: 30px !important;
  }

  #featured-products .product-image,
  #cat-litter .product-image,
  #pet-supplies .product-image,
  .product-list-grid .product-image {
    border-radius: 24px 24px 0 0 !important;
  }

  #featured-products .shop-card-body,
  #cat-litter .shop-card-body,
  #pet-supplies .shop-card-body,
  .product-list-grid .shop-card-body {
    border-radius: 0 0 24px 24px !important;
  }
}


/* V1.87 - Real structural wood frame fix
   This fixes V1.86 where the frame looked pasted on because product image/body were still direct panels.
   Product cards now have a real outer wooden frame and a separate rounded inner content panel. */

#featured-products .shop-card.wood-framed-card,
#cat-litter .shop-card.wood-framed-card,
#pet-supplies .shop-card.wood-framed-card,
.product-list-grid .shop-card.wood-framed-card {
  display: block !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 38px !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 239, 201, 0.55), transparent 30%),
    linear-gradient(135deg, #a86f37 0%, #d4a36a 22%, #f3cf98 44%, #c08243 68%, #8b5528 100%) !important;
  box-shadow:
    0 20px 48px rgba(91, 48, 16, 0.20),
    inset 0 2px 0 rgba(255, 243, 216, 0.78),
    inset 0 -3px 0 rgba(84, 44, 17, 0.24) !important;
}

/* Keep visible wood grain only on the wooden frame */
#featured-products .shop-card.wood-framed-card::before,
#cat-litter .shop-card.wood-framed-card::before,
#pet-supplies .shop-card.wood-framed-card::before,
.product-list-grid .shop-card.wood-framed-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 38px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    repeating-linear-gradient(
      8deg,
      rgba(255, 246, 221, 0.22) 0,
      rgba(255, 246, 221, 0.22) 2px,
      rgba(104, 58, 24, 0.10) 3px,
      rgba(104, 58, 24, 0.10) 7px
    ),
    linear-gradient(180deg, rgba(255,255,255,0.20), rgba(77,43,19,0.10)) !important;
  mix-blend-mode: soft-light !important;
}

#featured-products .shop-card.wood-framed-card > .wood-card-inner,
#cat-litter .shop-card.wood-framed-card > .wood-card-inner,
#pet-supplies .shop-card.wood-framed-card > .wood-card-inner,
.product-list-grid .shop-card.wood-framed-card > .wood-card-inner {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 0.92fr 1.08fr !important;
  min-height: 100% !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: linear-gradient(180deg, #fffdf8 0%, #fff6ec 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(117, 73, 34, 0.16),
    inset 0 12px 26px rgba(255, 255, 255, 0.38) !important;
}

/* The image and detail now sit inside the inner rounded panel, not directly against the frame */
#featured-products .wood-framed-card .wood-card-inner > .product-image,
#cat-litter .wood-framed-card .wood-card-inner > .product-image,
#pet-supplies .wood-framed-card .wood-card-inner > .product-image,
.product-list-grid .wood-framed-card .wood-card-inner > .product-image {
  border-radius: 0 !important;
  border: 0 !important;
  border-right: 1px solid rgba(130, 83, 42, 0.16) !important;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 225, 162, 0.25), transparent 34%),
    linear-gradient(145deg, #fffdf8, #fff2e5) !important;
}

#featured-products .wood-framed-card .wood-card-inner > .shop-card-body,
#cat-litter .wood-framed-card .wood-card-inner > .shop-card-body,
#pet-supplies .wood-framed-card .wood-card-inner > .shop-card-body,
.product-list-grid .wood-framed-card .wood-card-inner > .shop-card-body {
  border-radius: 0 !important;
  border: 0 !important;
  background: rgba(255, 253, 248, 0.92) !important;
}

/* Remove the previous V1.85/V1.86 fake frame visual on wrapped cards */
#featured-products .shop-card.wood-framed-card > .product-image,
#cat-litter .shop-card.wood-framed-card > .product-image,
#pet-supplies .shop-card.wood-framed-card > .product-image,
.product-list-grid .shop-card.wood-framed-card > .product-image,
#featured-products .shop-card.wood-framed-card > .shop-card-body,
#cat-litter .shop-card.wood-framed-card > .shop-card-body,
#pet-supplies .shop-card.wood-framed-card > .shop-card-body,
.product-list-grid .shop-card.wood-framed-card > .shop-card-body {
  border-radius: 0 !important;
}

/* Slider card breathing room so the wood frame is not cut by the carousel mask */
#featured-products .featured-carousel-track,
#cat-litter .cat-carousel-track,
#pet-supplies .pet-carousel-track {
  padding: 12px 10px 24px !important;
  box-sizing: border-box !important;
}

#featured-products .featured-carousel-track .shop-card.wood-framed-card,
#cat-litter .cat-carousel-track .shop-card.wood-framed-card,
#pet-supplies .pet-carousel-track .shop-card.wood-framed-card {
  margin: 0 auto !important;
  max-width: calc(100% - 8px) !important;
}

/* Gentle hover only */
#featured-products .shop-card.wood-framed-card:hover,
#cat-litter .shop-card.wood-framed-card:hover,
#pet-supplies .shop-card.wood-framed-card:hover,
.product-list-grid .shop-card.wood-framed-card:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 24px 56px rgba(91, 48, 16, 0.24),
    inset 0 2px 0 rgba(255, 243, 216, 0.82),
    inset 0 -3px 0 rgba(84, 44, 17, 0.25) !important;
}

@media (max-width: 900px) {
  #featured-products .shop-card.wood-framed-card > .wood-card-inner,
  #cat-litter .shop-card.wood-framed-card > .wood-card-inner,
  #pet-supplies .shop-card.wood-framed-card > .wood-card-inner,
  .product-list-grid .shop-card.wood-framed-card > .wood-card-inner {
    grid-template-columns: 1fr !important;
    border-radius: 26px !important;
  }

  #featured-products .wood-framed-card .wood-card-inner > .product-image,
  #cat-litter .wood-framed-card .wood-card-inner > .product-image,
  #pet-supplies .wood-framed-card .wood-card-inner > .product-image,
  .product-list-grid .wood-framed-card .wood-card-inner > .product-image {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(130, 83, 42, 0.16) !important;
  }
}

@media (max-width: 680px) {
  #featured-products .shop-card.wood-framed-card,
  #cat-litter .shop-card.wood-framed-card,
  #pet-supplies .shop-card.wood-framed-card,
  .product-list-grid .shop-card.wood-framed-card {
    padding: 8px !important;
    border-radius: 32px !important;
  }

  #featured-products .shop-card.wood-framed-card::before,
  #cat-litter .shop-card.wood-framed-card::before,
  #pet-supplies .shop-card.wood-framed-card::before,
  .product-list-grid .shop-card.wood-framed-card::before {
    border-radius: 32px !important;
  }

  #featured-products .shop-card.wood-framed-card > .wood-card-inner,
  #cat-litter .shop-card.wood-framed-card > .wood-card-inner,
  #pet-supplies .shop-card.wood-framed-card > .wood-card-inner,
  .product-list-grid .shop-card.wood-framed-card > .wood-card-inner {
    border-radius: 24px !important;
  }
}


/* V1.87 home Available Now card structural wrapper fix */
#featured-products .shop-card.featured-home-card.wood-framed-card > .wood-card-inner {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: linear-gradient(180deg, #fffdf8 0%, #fff6ec 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(117, 73, 34, 0.16),
    inset 0 12px 26px rgba(255, 255, 255, 0.38) !important;
}

#featured-products .shop-card.featured-home-card.wood-framed-card .wood-card-inner > .product-image {
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(130, 83, 42, 0.16) !important;
}

#featured-products .shop-card.featured-home-card.wood-framed-card .wood-card-inner > .shop-card-body {
  flex: 1 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: rgba(255, 253, 248, 0.92) !important;
}


/* V1.88 - Revert unintended Home Page overall enlargement
   Keep only the requested product-frame work from V1.87.
   Do not enlarge the whole Home hero / title / text / general spacing. */

.hero.section-pad {
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

.hero-grid {
  gap: 34px !important;
  align-items: center !important;
}

.hero-copy h1 {
  font-size: clamp(40px, 5vw, 62px) !important;
  line-height: 1.02 !important;
}

.hero-text {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* Keep banner image normal; only very slight visual presence, not full Home enlargement */
.hero-card {
  padding: 18px !important;
  border-radius: 34px !important;
  max-width: 600px !important;
  margin-left: auto !important;
}

.hero-card img {
  width: 100% !important;
  display: block !important;
  border-radius: 26px !important;
  transform: none !important;
}

#featured-products.section-pad {
  padding-top: 70px !important;
}

/* Prevent Home Available Now section from feeling oversized */
#featured-products .featured-carousel-track {
  padding-top: 6px !important;
}

#featured-products .shop-card.wood-framed-card {
  max-width: 100% !important;
}

@media (max-width: 900px) {
  .hero.section-pad {
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }

  .hero-grid {
    gap: 26px !important;
  }

  .hero-card {
    max-width: 100% !important;
  }
}

@media (max-width: 680px) {
  .hero-copy h1 {
    font-size: clamp(34px, 10vw, 46px) !important;
    line-height: 1.04 !important;
  }

  .hero-text {
    font-size: 15px !important;
  }

  .hero.section-pad {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
}


/* V1.89 - Fix Home Available Now product card size
   Kelvin meant the Available Now product card was too large, not the Home hero.
   Keep slider + wood frame, but make Home Available Now use normal product-card size. */

#featured-products .featured-carousel-shell {
  max-width: min(440px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#featured-products .featured-carousel-track {
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 0 22px !important;
  overflow: hidden !important;
}

#featured-products .featured-carousel-track .shop-card,
#featured-products .featured-carousel-track .shop-card.wood-framed-card,
#featured-products .featured-carousel-track .featured-home-card {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Home Available Now must stay as a normal vertical product card, not a huge horizontal feature block */
#featured-products .featured-home-card,
#featured-products .shop-card.featured-home-card,
#featured-products .shop-card.featured-home-card.wood-framed-card,
#featured-products .featured-carousel-track .featured-home-card,
#featured-products .shop-card.featured-home-card.wood-framed-card > .wood-card-inner {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
}

#featured-products .shop-card.featured-home-card.wood-framed-card > .wood-card-inner {
  width: 100% !important;
  min-height: 100% !important;
}

/* Home Available Now image/detail should stack top-bottom */
#featured-products .shop-card.featured-home-card.wood-framed-card .wood-card-inner > .product-image,
#featured-products .featured-home-card .product-image {
  width: 100% !important;
  min-height: 250px !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(130, 83, 42, 0.16) !important;
  border-radius: 0 !important;
}

#featured-products .shop-card.featured-home-card.wood-framed-card .wood-card-inner > .shop-card-body,
#featured-products .featured-home-card .shop-card-body {
  width: 100% !important;
  border-radius: 0 !important;
}

/* Keep Home arrows outside the smaller card, not at far page edges */
#featured-products .featured-carousel-prev {
  left: -46px !important;
}

#featured-products .featured-carousel-next {
  right: -46px !important;
}

@media (max-width: 680px) {
  #featured-products .featured-carousel-shell {
    max-width: 100% !important;
  }

  #featured-products .featured-carousel-prev {
    left: 4px !important;
  }

  #featured-products .featured-carousel-next {
    right: 4px !important;
  }

  #featured-products .featured-home-card .product-image,
  #featured-products .shop-card.featured-home-card.wood-framed-card .wood-card-inner > .product-image {
    min-height: 220px !important;
  }
}


/* V1.90 - Home Available Now horizontal rectangle card fix
   Only fix Home Page Available Now product card back to horizontal rectangle.
   Keep wood rounded frame and existing slider. Do not touch product data or other pages. */

#featured-products .featured-carousel-shell {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#featured-products .featured-carousel-track {
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 10px 24px !important;
  overflow: hidden !important;
}

#featured-products .featured-carousel-track .shop-card,
#featured-products .featured-carousel-track .shop-card.wood-framed-card,
#featured-products .featured-carousel-track .featured-home-card {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: calc(100% - 8px) !important;
  margin: 0 auto !important;
}

/* Home Available Now product must be a horizontal rectangle */
#featured-products .featured-home-card,
#featured-products .shop-card.featured-home-card,
#featured-products .shop-card.featured-home-card.wood-framed-card {
  display: block !important;
}

#featured-products .shop-card.featured-home-card.wood-framed-card > .wood-card-inner {
  display: grid !important;
  grid-template-columns: 0.92fr 1.08fr !important;
  flex-direction: initial !important;
  width: 100% !important;
  min-height: 100% !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}

/* Image left, detail right */
#featured-products .shop-card.featured-home-card.wood-framed-card .wood-card-inner > .product-image,
#featured-products .featured-home-card .product-image {
  width: 100% !important;
  min-height: 320px !important;
  border-right: 1px solid rgba(130, 83, 42, 0.16) !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
}

#featured-products .shop-card.featured-home-card.wood-framed-card .wood-card-inner > .shop-card-body,
#featured-products .featured-home-card .shop-card-body {
  width: 100% !important;
  border-radius: 0 !important;
}

/* Keep arrows at the sides of the horizontal card */
#featured-products .featured-carousel-prev {
  left: -28px !important;
}

#featured-products .featured-carousel-next {
  right: -28px !important;
}

@media (max-width: 900px) {
  #featured-products .shop-card.featured-home-card.wood-framed-card > .wood-card-inner {
    grid-template-columns: 1fr !important;
  }

  #featured-products .shop-card.featured-home-card.wood-framed-card .wood-card-inner > .product-image,
  #featured-products .featured-home-card .product-image {
    min-height: 240px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(130, 83, 42, 0.16) !important;
  }

  #featured-products .featured-carousel-prev {
    left: 0 !important;
  }

  #featured-products .featured-carousel-next {
    right: 0 !important;
  }
}


/* V1.91 - Home Available Now carousel clipping + label width fix
   Only touches Home Page Available Now carousel viewport and Available Now label.
   Keeps horizontal product card, wood rounded frame, and existing product data. */

/* Stop the next slide from showing on the right side */
#featured-products .featured-carousel-shell {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
  border-radius: 42px !important;
  position: relative !important;
}

#featured-products .featured-carousel-track {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  gap: 0 !important;
  scroll-padding: 0 !important;
  box-sizing: border-box !important;
}

#featured-products .featured-carousel-track .shop-card,
#featured-products .featured-carousel-track .shop-card.wood-framed-card,
#featured-products .featured-carousel-track .featured-home-card {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  scroll-snap-align: start !important;
}

/* Keep the card horizontal; do not turn it vertical */
#featured-products .shop-card.featured-home-card.wood-framed-card > .wood-card-inner {
  display: grid !important;
  grid-template-columns: 0.92fr 1.08fr !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Available Now label should be medium/auto width, not stretched */
#featured-products .featured-home-card .mini-tag,
#featured-products .shop-card.featured-home-card .mini-tag,
#featured-products .wood-framed-card .mini-tag {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  min-width: 0 !important;
  align-self: flex-start !important;
  justify-content: center !important;
  padding: 8px 15px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Put arrow-only controls inside the carousel mask so they remain visible but no next card leaks out */
#featured-products .featured-carousel-prev {
  left: 6px !important;
}

#featured-products .featured-carousel-next {
  right: 6px !important;
}

@media (max-width: 900px) {
  #featured-products .shop-card.featured-home-card.wood-framed-card > .wood-card-inner {
    grid-template-columns: 1fr !important;
  }
}


/* V1.92 - Very light wood-colour product frame
   Only lighten the wooden product frame colour.
   Keep V1.91 carousel clipping, horizontal Available Now card, label size, products, links, SEO and layout unchanged. */

#featured-products .shop-card.wood-framed-card,
#cat-litter .shop-card.wood-framed-card,
#pet-supplies .shop-card.wood-framed-card,
.product-list-grid .shop-card.wood-framed-card {
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 250, 238, 0.92), transparent 34%),
    linear-gradient(135deg, #d8b98e 0%, #efd9b7 26%, #fff1d7 48%, #e7c99f 72%, #cfac7e 100%) !important;
  box-shadow:
    0 16px 34px rgba(91, 48, 16, 0.10),
    inset 0 2px 0 rgba(255, 255, 247, 0.90),
    inset 0 -2px 0 rgba(160, 110, 63, 0.10) !important;
}

#featured-products .shop-card.wood-framed-card::before,
#cat-litter .shop-card.wood-framed-card::before,
#pet-supplies .shop-card.wood-framed-card::before,
.product-list-grid .shop-card.wood-framed-card::before {
  background:
    repeating-linear-gradient(
      8deg,
      rgba(255, 255, 250, 0.28) 0,
      rgba(255, 255, 250, 0.28) 2px,
      rgba(153, 103, 56, 0.045) 3px,
      rgba(153, 103, 56, 0.045) 8px
    ),
    linear-gradient(180deg, rgba(255,255,255,0.32), rgba(180,130,80,0.045)) !important;
  opacity: 0.55 !important;
  mix-blend-mode: normal !important;
}

#featured-products .shop-card.wood-framed-card > .wood-card-inner,
#cat-litter .shop-card.wood-framed-card > .wood-card-inner,
#pet-supplies .shop-card.wood-framed-card > .wood-card-inner,
.product-list-grid .shop-card.wood-framed-card > .wood-card-inner {
  background: linear-gradient(180deg, #fffdf8 0%, #fff8ef 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(178, 128, 78, 0.10),
    inset 0 12px 24px rgba(255, 255, 255, 0.42) !important;
}

#featured-products .wood-framed-card .wood-card-inner > .product-image,
#cat-litter .wood-framed-card .wood-card-inner > .product-image,
#pet-supplies .wood-framed-card .wood-card-inner > .product-image,
.product-list-grid .wood-framed-card .wood-card-inner > .product-image {
  border-color: rgba(178, 128, 78, 0.10) !important;
}

#featured-products .wood-framed-card .wood-card-inner > .shop-card-body,
#cat-litter .wood-framed-card .wood-card-inner > .shop-card-body,
#pet-supplies .wood-framed-card .wood-card-inner > .shop-card-body,
.product-list-grid .wood-framed-card .wood-card-inner > .shop-card-body {
  background: rgba(255, 253, 248, 0.96) !important;
}

#featured-products .shop-card.wood-framed-card:hover,
#cat-litter .shop-card.wood-framed-card:hover,
#pet-supplies .shop-card.wood-framed-card:hover,
.product-list-grid .shop-card.wood-framed-card:hover {
  box-shadow:
    0 18px 40px rgba(91, 48, 16, 0.12),
    inset 0 2px 0 rgba(255, 255, 247, 0.92),
    inset 0 -2px 0 rgba(160, 110, 63, 0.12) !important;
}


/* V1.93 - Remove product frames
   Remove the wooden outer product frame from Home Page Available Now and Product Page cards.
   Keep the current horizontal Available Now layout, carousel clipping fix, label size, arrows, and content unchanged. */

#featured-products .shop-card.wood-framed-card,
#cat-litter .shop-card.wood-framed-card,
#pet-supplies .shop-card.wood-framed-card,
.product-list-grid .shop-card.wood-framed-card {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 28px !important;
}

#featured-products .shop-card.wood-framed-card::before,
#cat-litter .shop-card.wood-framed-card::before,
#pet-supplies .shop-card.wood-framed-card::before,
.product-list-grid .shop-card.wood-framed-card::before {
  display: none !important;
  content: none !important;
}

#featured-products .shop-card.wood-framed-card > .wood-card-inner,
#cat-litter .shop-card.wood-framed-card > .wood-card-inner,
#pet-supplies .shop-card.wood-framed-card > .wood-card-inner,
.product-list-grid .shop-card.wood-framed-card > .wood-card-inner {
  background: #fffaf4 !important;
  border: 1px solid rgba(255, 122, 40, 0.12) !important;
  border-radius: 28px !important;
  box-shadow: 0 12px 28px rgba(91, 48, 16, 0.08) !important;
  overflow: hidden !important;
}

#featured-products .wood-framed-card .wood-card-inner > .product-image,
#cat-litter .wood-framed-card .wood-card-inner > .product-image,
#pet-supplies .wood-framed-card .wood-card-inner > .product-image,
.product-list-grid .wood-framed-card .wood-card-inner > .product-image {
  border-color: rgba(255, 122, 40, 0.10) !important;
}

#featured-products .wood-framed-card .wood-card-inner > .shop-card-body,
#cat-litter .wood-framed-card .wood-card-inner > .shop-card-body,
#pet-supplies .wood-framed-card .wood-card-inner > .shop-card-body,
.product-list-grid .wood-framed-card .wood-card-inner > .shop-card-body {
  background: #fffdfa !important;
}

#featured-products .shop-card.wood-framed-card:hover,
#cat-litter .shop-card.wood-framed-card:hover,
#pet-supplies .shop-card.wood-framed-card:hover,
.product-list-grid .shop-card.wood-framed-card:hover {
  box-shadow: none !important;
}

#featured-products .shop-card.wood-framed-card:hover > .wood-card-inner,
#cat-litter .shop-card.wood-framed-card:hover > .wood-card-inner,
#pet-supplies .shop-card.wood-framed-card:hover > .wood-card-inner,
.product-list-grid .shop-card.wood-framed-card:hover > .wood-card-inner {
  box-shadow: 0 14px 32px rgba(91, 48, 16, 0.10) !important;
}
:root {
  --jp-cream: #f7f1e6;
  --jp-paper: #fffaf0;
  --jp-ink: #2f352b;
  --jp-moss: #6f8060;
  --jp-bamboo: #a8b58a;
  --jp-wood: #b08a65;
  --jp-soft: #e9eadf;
  --jp-accent: #d9825b;
}

body {
  background:
    radial-gradient(circle at top left, rgba(168, 181, 138, 0.22), transparent 35%),
    linear-gradient(135deg, #f7f1e6 0%, #fffaf0 50%, #eef0df 100%);
  color: var(--jp-ink);
}:root {
  --forest: #1f5135;
  --leaf: #7ca982;
  --sage: #dce8d5;
  --cream: #f7f3e8;
  --earth: #b98b5d;
  --text: #26352a;
  --white: #ffffff;
}

body {
  background:
    radial-gradient(circle at top left, rgba(124, 169, 130, 0.25), transparent 35%),
    linear-gradient(180deg, #f7f3e8 0%, #edf5e8 100%);
  color: var(--text);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
}

header,
nav {
  background: rgba(247, 243, 232, 0.9);
  backdrop-filter: blur(10px);
}

h1, h2, h3 {
  color: var(--forest);
  letter-spacing: -0.03em;
}

.hero {
  padding: 90px 24px;
  border-radius: 28px;
  background:
    linear-gradient(rgba(31, 81, 53, 0.35), rgba(31, 81, 53, 0.25)),
    url("assets/hero-pets-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  text-align: center;
  margin: 32px auto;
}




button,
.btn,
a.button {
  background: var(--forest);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  transition: transform 0.2s ease, background 0.2s ease;
}

button:hover,
.btn:hover,
a.button:hover {
  background: #173d28;
  transform: translateY(-2px);
}

.card,
.product,
.item,
article {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(31, 81, 53, 0.12);
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(31, 81, 53, 0.08);
  padding: 24px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover,
.product:hover,
.item:hover,
article:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(31, 81, 53, 0.14);
}

img {
  max-width: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.product img,
.item img {
  background: transparent;
  border: none;
  box-shadow: none;
}

section {
  padding: 64px 24px;
}


.hero-copy {
  max-width: 760px;
  transform: translate(-35px, -10px);
}

.hero .eyebrow {
  color: #f26a2e;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero h1 {
  color: #ffffff;
  font-size: clamp(52px, 6vw, 92px);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 26px;
}

.hero-text {
  max-width: 720px;
  color: #5b524c;
  font-size: 22px;
  line-height: 1.7;
  font-weight: 500;
  margin-bottom: 28px;
}

.hero-extra {
  max-width: 680px;
  color: #ffffff;
  font-size: 21px;
  line-height: 1.7;
  font-weight: 600;
  margin-bottom: 34px;
}

.hero-actions {
  margin-top: 24px;
}

.btn-primary {
  background: #174d32;
  color: #ffffff;
  padding: 18px 36px;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 800;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 14px 30px rgba(23, 77, 50, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(23, 77, 50, 0.32);
}

@media (max-width: 768px) {
  .hero-copy {
    transform: none;
    max-width: 100%;
  }

  .hero h1 {
    font-size: 44px;
  }

  .hero-text,
  .hero-extra {
    font-size: 18px;
  }
}/* ===== FINAL HERO RESET ===== */

.hero.section-pad.reveal {
  position: relative !important;
  overflow: hidden !important;
  min-height: 720px !important;
  padding: 90px 70px !important;
  margin: 32px auto !important;
  border-radius: 28px !important;
  color: white !important;
  text-align: left !important;

  background:
  linear-gradient(
    90deg,
    rgba(255, 248, 238, 0.25) 0%,
    rgba(255, 248, 238, 0.08) 38%,
    rgba(255, 248, 238, 0.00) 100%
  ),
  url("assets/hero-pets-bg.png") !important;
}

/* Stop hero from using old 2-column layout */
.hero .container.hero-grid {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Text group */
.hero-copy {
  width: 100% !important;
  max-width: 720px !important;
  margin-left: 35px !important;
  margin-right: auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  text-align: left !important;
  transform: none !important;
}

/* Hide old image/banner inside hero */
.hero img,
.hero-picture,
.hero-image,
.hero-banner,
.hero-card,
.hero-media,
.hero-visual,
.hero-preview {
  display: none !important;
}

/* Hide old small category buttons */
.trust-row {
  display: none !important;
}

/* Text styles */
.hero .eyebrow {
  color: #f26a2e !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  text-align: left !important;
}

.hero h1 {
  color: #ffffff !important;
  font-size: clamp(54px, 6vw, 90px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-bottom: 26px !important;
  text-align: left !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.18) !important;
}

.hero-text,
.hero-extra {
  max-width: 660px !important;
  font-size: 21px !important;
  line-height: 1.7 !important;
  text-align: left !important;
}

.hero-text {
  color: #4d4a42 !important;
  font-weight: 500 !important;
  margin-bottom: 24px !important;
}

.hero-extra {
  color: #ffffff !important;
  font-weight: 700 !important;
  margin-bottom: 32px !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Button */
.hero-actions {
  margin-top: 28px !important;
  text-align: left !important;
}

.hero-actions .btn-primary {
  display: inline-block !important;
  background: #174d32 !important;
  color: white !important;
  padding: 16px 34px !important;
  border-radius: 999px !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 14px 30px rgba(23, 77, 50, 0.25) !important;
}

/* Mobile */
@media (max-width: 768px) {
  .hero.section-pad.reveal {
    min-height: 620px !important;
    padding: 70px 24px !important;
    background-position: center right !important;
  }

  .hero-copy {
    margin-left: 0 !important;
    max-width: 100% !important;
  }

  .hero h1 {
    font-size: 44px !important;
  }

  .hero-text,
  .hero-extra {
    font-size: 18px !important;
  }
}





.hero-copy {
  max-width: 1000px !important;
  margin-left: -2px !important;
  transform: translateY(-50px) !important;
}

.hero h1 {
  font-size: clamp(50px, 4.8vw, 80px) !important;
  margin-bottom: -5px !important;
}

.hero-text,
.hero-extra {
  font-size: 20px !important;
  line-height: 1.65 !important;
}

.hero-actions {
  margin-top: 24px !important;
  margin-left: 150px !important;
}
.hero-text {
  color: #4d4a42 !important;
}
.hero-extra {
  color: #4d4a42 !important;
}
/* ===== Clean Products Page Layout ===== */

.products-page,
.shop-section,
.product-section {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 48px 24px !important;
}

/* Categories area */
.category-sidebar,
.categories,
.category-tabs {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto 28px auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  position: static !important;
}

.category-sidebar h3,
.categories h3,
.category-tabs h3 {
  color: #174d32 !important;
  font-size: 20px !important;
  margin-bottom: 14px !important;
}

/* Category buttons */
.category-filter {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 140px !important;
  margin: 0 8px 10px 0 !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  background: #f7f3e8 !important;
  color: #174d32 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border: 1px solid rgba(23, 77, 50, 0.12) !important;
  box-shadow: none !important;
  transform: none !important;
}

.category-filter.active,
.category-filter:hover {
  background: #174d32 !important;
  color: white !important;
}

.category-filter span {
  display: none !important;
}

/* Product card spacing */
.shop-card,
.featured-product,
.wood-framed-card {
  max-width: 1000px !important;
  margin: 0 auto 28px auto !important;
  border-radius: 28px !important;
}

/* Product card inner layout */
.wood-card-inner {
  display: grid !important;
  grid-template-columns: 46% 54% !important;
  gap: 28px !important;
  align-items: center !important;
  padding: 24px !important;
}

/* Product image */
.product-image,
.real-card-image {
  height: 360px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

.card-product-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Product text */
.shop-card-body h3 {
  font-size: 26px !important;
  line-height: 1.35 !important;
  color: #174d32 !important;
  margin-bottom: 16px !important;
}

.shop-card-body p {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #5b524c !important;
}

.mini-list li {
  font-size: 16px !important;
  margin-bottom: 10px !important;
}

/* Buttons */
.card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 22px !important;
}

.card-actions .btn {
  padding: 13px 22px !important;
  font-size: 15px !important;
  border-radius: 999px !important;
}

/* Mobile */
@media (max-width: 800px) {
  .wood-card-inner {
    grid-template-columns: 1fr !important;
  }

  .product-image,
  .real-card-image {
    height: 280px !important;
  }

  .category-filter {
    min-width: auto !important;
    width: 100% !important;
  }
}.products-with-sidebar {
  display: block !important;
}

.products-main {
  display: block !important;
}

.product-category-section {
  display: none;
}

.product-category-section.active {
  display: block;
}

.product-category-section.active .shop-card {
  display: grid !important;
}

.gp-product-section {
  display: none !important;
}

.gp-product-section.active {
  display: block !important;
}
  

.gp-product-section {
  display: none !important;
}

.gp-product-section.active {
  display: block !important;
}

.gp-product-section.active .shop-card {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* ===== Fix Products Page Layout ===== */

.products-with-sidebar {
  display: grid !important;
  grid-template-columns: 240px minmax(0, 1fr) !important;
  gap: 36px !important;
  align-items: start !important;
  max-width: 1280px !important;
  margin: 48px auto !important;
  padding: 0 32px !important;
}

.category-sidebar {
  position: sticky !important;
  top: 110px !important;
  align-self: start !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

.category-sidebar h3 {
  color: #174d32 !important;
  font-size: 24px !important;
  margin-bottom: 18px !important;
}

.gp-category-btn {
  display: block !important;
  width: 100% !important;
  margin-bottom: 12px !important;
  padding: 14px 18px !important;
  border: none !important;
  border-radius: 999px !important;
  background: #f7f3e8 !important;
  color: #174d32 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-align: center !important;
  cursor: pointer !important;
}

.gp-category-btn.active,
.gp-category-btn:hover {
  background: #174d32 !important;
  color: #ffffff !important;
}

.products-main {
  min-width: 0 !important;
  width: 100% !important;
}

.gp-product-section {
  display: none !important;
}

.gp-product-section.active {
  display: block !important;
}

/* important: let the inside layout control the card */
.gp-product-section.active .shop-card {
  display: block !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 0 32px 0 !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.products-with-sidebar .wood-card-inner {
  display: grid !important;
  grid-template-columns: 45% 55% !important;
  gap: 28px !important;
  align-items: center !important;
  padding: 28px !important;
}

.products-with-sidebar .product-image {
  width: 100% !important;
  height: 330px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
}

.products-with-sidebar .card-product-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.products-with-sidebar .shop-card-body {
  padding: 0 !important;
  min-width: 0 !important;
}

.products-with-sidebar .shop-card-body h3 {
  font-size: 28px !important;
  line-height: 1.35 !important;
  margin-bottom: 16px !important;
}

.products-with-sidebar .shop-card-body p {
  font-size: 18px !important;
  line-height: 1.65 !important;
}

.products-with-sidebar .mini-list li {
  font-size: 17px !important;
}

/* stop reveal animation from moving product cards */
.products-with-sidebar .reveal-card {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (max-width: 900px) {
  .products-with-sidebar {
    grid-template-columns: 1fr !important;
    padding: 0 20px !important;
  }

  .category-sidebar {
    position: static !important;
  }

  .products-with-sidebar .wood-card-inner {
    grid-template-columns: 1fr !important;
  }

  .products-with-sidebar .product-image {
    height: 280px !important;
  }
}
.products-with-sidebar {
  align-items: start !important;
}

.category-sidebar {
  align-self: start !important;
  position: sticky !important;
  top: 110px !important;
}

.products-main {
  min-height: 560px !important;
}

.gp-product-section {
  min-height: 560px !important;
}

.coming-soon-box {
  min-height: 420px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 48px !important;
  border-radius: 28px !important;
}
/* ===== Keep product categories layout stable ===== */

.products-with-sidebar {
  width: min(1280px, calc(100% - 64px)) !important;
  max-width: 1280px !important;
  margin: 70px auto !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 48px !important;
  align-items: start !important;
}

.category-sidebar {
  width: 260px !important;
  min-width: 260px !important;
  align-self: start !important;
  justify-self: start !important;
  position: sticky !important;
  top: 110px !important;
}

.products-main {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 560px !important;
}

.gp-product-section {
  width: 100% !important;
  min-height: 560px !important;
}

.gp-product-section.active {
  display: block !important;
}

/* make coming soon area take normal right-side space */
.coming-soon-box {
  width: 100% !important;
  min-height: 420px !important;
  padding: 56px !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 18px 54px rgba(91, 48, 16, 0.08) !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.coming-soon-box h2 {
  color: #174d32 !important;
  font-size: 36px !important;
  margin-bottom: 12px !important;
}

.coming-soon-box p {
  font-size: 18px !important;
  color: #5b524c !important;
}

/* mobile */
@media (max-width: 900px) {
  .products-with-sidebar {
    width: min(100% - 32px, 680px) !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .category-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    position: static !important;
  }

  .coming-soon-box {
    min-height: 300px !important;
    padding: 32px !important;
  }
}
/* ===== Fixed category sidebar, scrollable products ===== */

.products-with-sidebar {
  align-items: start !important;
}

/* 左边 categories 固定在上面 */
.category-sidebar {
  position: sticky !important;
  top: 110px !important;
  align-self: start !important;
  height: fit-content !important;
}

/* 右边产品区域自己 scroll */
.products-main {
  max-height: calc(100vh - 150px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 14px !important;
  scroll-behavior: smooth !important;
}

/* 右边 scrollbar 美化 */
.products-main::-webkit-scrollbar {
  width: 8px;
}

.products-main::-webkit-scrollbar-track {
  background: rgba(23, 77, 50, 0.08);
  border-radius: 999px;
}

.products-main::-webkit-scrollbar-thumb {
  background: #174d32;
  border-radius: 999px;
}

/* 避免产品卡贴太紧 */
.products-main .shop-card {
  margin-bottom: 28px !important;
}

/* 手机版不要右边单独 scroll，正常上下滑 */
@media (max-width: 900px) {
  .category-sidebar {
    position: static !important;
  }

  .products-main {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }
}.page-hero,
.page-hero.section-pad,
section.page-hero {
  padding-top: 35px !important;
  padding-bottom: 20px !important;
}

/* ===== Make product cards smaller ===== */

.products-with-sidebar {
  grid-template-columns: 230px minmax(0, 1fr) !important;
  gap: 36px !important;
  max-width: 1180px !important;
}

.gp-product-section.active .shop-card {
  max-width: 880px !important;
  margin-bottom: 22px !important;
  border-radius: 24px !important;
}

.products-with-sidebar .wood-card-inner {
  grid-template-columns: 42% 58% !important;
  gap: 24px !important;
  padding: 22px !important;
}

.products-with-sidebar .product-image {
  height: 250px !important;
  border-radius: 18px !important;
}

.products-with-sidebar .shop-card-body h3 {
  font-size: 16px !important;
  line-height: 1.28 !important;
  margin-bottom: 0px !important;
}

.products-with-sidebar .shop-card-body p {
  font-size: 12px !important;
  line-height: 1.55 !important;
  margin-bottom: 12px !important;
}

.products-with-sidebar .mini-list {
  margin: 12px 0 !important;
}

.products-with-sidebar .mini-list li {
  font-size: 12px !important;
  margin: 3px 0 !important;
}

.products-with-sidebar .mini-tag {
  font-size: 12px !important;
  padding: 7px 12px !important;
}

.products-with-sidebar .card-actions {
  margin-top: 16px !important;
  gap: 10px !important;
}

.products-with-sidebar .btn-small {
  min-height: 38px !important;
  padding: 9px 15px !important;
  font-size: 12px !important;
}

/* ===== Fix product image crop ===== */

.products-with-sidebar .product-image {
  height: 310px !important;
  padding: 12px !important;
  background: #fffaf5 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.products-with-sidebar .card-product-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
/* ===== Fix categories being cut off ===== */

.products-with-sidebar {
  width: min(1320px, calc(100% - 80px)) !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: 230px minmax(0, 1fr) !important;
  gap: 34px !important;
}

.category-sidebar {
  transform: none !important;
  width: 230px !important;
  min-width: 230px !important;
}

.category-sidebar h3 {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
/* Hide duplicate top product categories card */
.page-hero .page-card,
.page-hero .filter-chips {
  display: none !important;
}
/* Reduce products hero gap */
.page-hero,
.page-hero.section-pad {
  padding-top: 36px !important;
  padding-bottom: 28px !important;
}

.page-hero-grid {
  display: block !important;
}

.page-hero h1 {
  font-size: 58px !important;
  margin-bottom: 18px !important;
}

.page-actions {
  margin-top: 18px !important;
}
/* Hide duplicate Cat Litter heading above product list */
.products-with-sidebar {
  margin-top: 28px !important;
}

.products-with-sidebar {
  position: relative !important;
}

.products-with-sidebar::before {
  display: none !important;
}

.page-hero .page-card,
.page-hero .filter-chips {
  display: none !important;
}

.page-hero,
.page-hero.section-pad {
  padding-top: 36px !important;
  padding-bottom: 28px !important;
}

.page-hero-grid {
  display: block !important;
}

.products-with-sidebar {
  margin-top: 20px !important;
}
/* ===== Make product panel wider ===== */

.products-with-sidebar {
  width: min(1500px, calc(100% - 56px)) !important;
  max-width: 1500px !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 28px !important;
}

.category-sidebar {
  width: 220px !important;
  min-width: 220px !important;
  transform: none !important;
}

.products-main {
  width: 100% !important;
  min-width: 0 !important;
}

.gp-product-section.active .shop-card {
  width: 100% !important;
  max-width: 1120px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.products-with-sidebar .wood-card-inner {
  grid-template-columns: 44% 56% !important;
  gap: 26px !important;
}

/* ===== Reduce side margins on products layout ===== */

.products-with-sidebar {
  width: calc(100% - 24px) !important;
  max-width: 1500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: 200px minmax(0, 1fr) !important;
  gap: 24px !important;
}

.category-sidebar {
  width: 220px !important;
  min-width: 220px !important;
  transform: none !important;
}

.gp-product-section.active .shop-card {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.products-with-sidebar .wood-card-inner {
  grid-template-columns: 43% 57% !important;
  gap: 24px !important;
}
/* ===== Top categories + 2-column product layout ===== */

.products-with-sidebar {
  width: min(1320px, calc(100% - 48px)) !important;
  max-width: 1320px !important;
  margin: 28px auto 64px !important;
  padding: 0 !important;
  display: block !important;
}

.category-sidebar {
  display: none !important;
}

.category-topbar {
  margin-bottom: 28px !important;
}

.category-topbar h3 {
  color: #174d32 !important;
  font-size: 26px !important;
  margin-bottom: 16px !important;
}

.category-button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.gp-category-btn {
  width: auto !important;
  min-width: 150px !important;
  padding: 13px 22px !important;
  border: none !important;
  border-radius: 999px !important;
  background: #f7f3e8 !important;
  color: #174d32 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.gp-category-btn.active,
.gp-category-btn:hover {
  background: #174d32 !important;
  color: #ffffff !important;
}

.products-main {
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

.gp-product-section {
  display: none !important;
}

.gp-product-section.active {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.gp-product-section.active .shop-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
}

.products-with-sidebar .wood-card-inner {
  display: block !important;
  padding: 22px !important;
}

.products-with-sidebar .product-image {
  height: 240px !important;
  padding: 12px !important;
  background: #fffaf5 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  margin-bottom: 18px !important;
}

.products-with-sidebar .card-product-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

.products-with-sidebar .shop-card-body {
  padding: 0 !important;
}

.products-with-sidebar .shop-card-body h3 {
  font-size: 22px !important;
  line-height: 1.35 !important;
  margin-bottom: 12px !important;
}

.products-with-sidebar .shop-card-body p {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.products-with-sidebar .mini-list li {
  font-size: 14px !important;
  margin: 6px 0 !important;
}

.products-with-sidebar .card-actions {
  margin-top: 16px !important;
  gap: 10px !important;
}

.products-with-sidebar .btn-small {
  min-height: 38px !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
}

.coming-soon-box {
  grid-column: 1 / -1 !important;
  min-height: 300px !important;
  padding: 48px !important;
}

@media (max-width: 900px) {
  .gp-product-section.active {
    grid-template-columns: 1fr !important;
  }

  .category-button-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .gp-category-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* ===== Reduce product page vertical gaps ===== */

/* 上面 Shop Products 这一块不要太高 */
.page-hero,
.page-hero.section-pad {
  padding-top: 15px !important;
  padding-bottom: 100px !important;
}

/* Shop Products 标题下面按钮距离 */
.page-actions {
  margin-top: 20px !important;
}

/* Categories 整块往上靠 */
.products-with-sidebar {
  margin-top: -60px !important;
  margin-bottom: 50px !important;
}

/* Categories 标题和按钮距离 */
.category-topbar {
  margin-bottom: 18px !important;
}

.category-topbar h3 {
  margin-bottom: 12px !important;
}

/* Categories 按钮和产品卡之间距离 */
.products-main {
  margin-top: -70px !important;
}
/* ===== Fix product page content being covered ===== */

.page-hero,
.page-hero.section-pad {
  padding-top: 95px !important;
  padding-bottom: 22px !important;
}

.products-with-sidebar {
  margin-top: 12px !important;
}

.site-header {
  z-index: 999 !important;
}

/* 如果你之前做了右边产品内部 scroll，先取消，避免内容被切掉 */
.products-main {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}
/* ===== Fix categories being covered ===== */

/* 不要让 categories 用移动方式 */
.category-topbar,
.products-with-sidebar {
  transform: none !important;
  position: relative !important;
  top: auto !important;
  z-index: 5 !important;
}

/* 缩小上面 Shop Products 区域 */
.page-hero,
.page-hero.section-pad {
  padding-top: 35px !important;
  padding-bottom: 18px !important;
  margin-bottom: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Products section 自然接上来 */
.products-with-sidebar {
  margin-top: 18px !important;
  margin-bottom: 60px !important;
}

/* Categories 自己的 spacing */
.category-topbar {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  padding-top: 0 !important;
}

.category-topbar h3 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* 产品卡不要被拉上去 */
.products-main {
  margin-top: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
/* ===== Products page hero background ===== */

/* ===== Products page hero background - richer color ===== */

.page-hero,
.page-hero.section-pad {
  min-height: 420px !important;
  padding-top: 70px !important;
  padding-bottom: 150px !important;

  background:
    linear-gradient(
      90deg,
      rgba(224, 239, 207, 0.20) 0%,
      rgba(255, 248, 238, 0.12) 38%,
      rgba(255, 248, 238, 0.00) 100%
    ),
    url("assets/product-hero-pets.png") !important;

  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
}

.page-hero-grid {
  display: block !important;
}

.page-hero .page-card,
.page-hero .filter-chips {
  display: none !important;
}

.page-hero h1 {
  max-width: 620px !important;
  color: #174d32 !important;
  font-size: clamp(56px, 6vw, 88px) !important;
  line-height: 0.95 !important;
  margin-bottom: 20px !important;
}

.page-hero .eyebrow {
  color: #6b5b50 !important;
}

.page-actions {
  margin-top: 24px !important;
}

/* ===== FINAL PRODUCTS PAGE LAYOUT ===== */

/* Keep products area clean and wide */
.products-with-sidebar {
  width: min(1320px, calc(100% - 48px)) !important;
  max-width: 1320px !important;
  margin: 28px auto 70px !important;
  padding: 0 !important;
  display: block !important;
}

/* Hide old left sidebar style if still exists */
.category-sidebar {
  display: none !important;
}

/* Top categories */
.category-topbar {
  margin: 0 0 24px !important;
  padding: 0 !important;
}

.category-topbar h3 {
  color: #174d32 !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
  margin: 0 0 14px !important;
  font-weight: 900 !important;
}

.category-button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}

/* Category buttons */
.gp-category-btn {
  width: auto !important;
  min-width: 150px !important;
  padding: 13px 24px !important;
  border: 1px solid rgba(23, 77, 50, 0.1) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #174d32 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: 0 10px 24px rgba(23, 77, 50, 0.06) !important;
  transition: 0.2s ease !important;
}

.gp-category-btn:hover,
.gp-category-btn.active {
  background: #174d32 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(23, 77, 50, 0.16) !important;
}

/* Product content */
.products-main {
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide inactive categories */
.gp-product-section {
  display: none !important;
}

/* 2-column product grid */
.gp-product-section.active {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

/* Product card */
.gp-product-section.active .shop-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}

/* Product card inside layout */
.products-with-sidebar .wood-card-inner {
  display: block !important;
  padding: 22px !important;
}

/* Product image: full image, no crop */
.products-with-sidebar .product-image {
  width: 100% !important;
  height: 250px !important;
  min-height: 0 !important;
  padding: 14px !important;
  margin-bottom: 18px !important;
  border-radius: 22px !important;
  background: #fffaf5 !important;
  overflow: hidden !important;
}

.products-with-sidebar .card-product-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Product text */
.products-with-sidebar .shop-card-body {
  padding: 0 !important;
}

.products-with-sidebar .mini-tag {
  font-size: 12px !important;
  padding: 7px 12px !important;
  margin-bottom: 12px !important;
}

.products-with-sidebar .shop-card-body h3 {
  color: #174d32 !important;
  font-size: 22px !important;
  line-height: 1.35 !important;
  margin: 12px 0 12px !important;
}

.products-with-sidebar .shop-card-body p {
  color: #5b524c !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
}

.products-with-sidebar .mini-list {
  margin: 12px 0 !important;
  padding-left: 0 !important;
}

.products-with-sidebar .mini-list li {
  font-size: 14px !important;
  margin: 6px 0 !important;
}

/* Product buttons */
.products-with-sidebar .card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

.products-with-sidebar .btn-small {
  min-height: 38px !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  border-radius: 999px !important;
}

/* Coming soon card takes full width */
.gp-product-section.active .coming-soon-box {
  grid-column: 1 / -1 !important;
  min-height: 280px !important;
  padding: 48px !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 18px 54px rgba(91, 48, 16, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.coming-soon-box h2 {
  color: #174d32 !important;
  font-size: 38px !important;
  margin-bottom: 12px !important;
}

.coming-soon-box p {
  color: #5b524c !important;
  font-size: 18px !important;
}

/* Reduce gap after hero but keep hero size/color */
.page-hero,
.page-hero.section-pad {
  margin-bottom: 0 !important;
}

.products-with-sidebar {
  margin-top: 22px !important;
}

/* Mobile */
@media (max-width: 900px) {
  .products-with-sidebar {
    width: min(100% - 28px, 680px) !important;
    margin-top: 20px !important;
  }

  .category-button-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .gp-category-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .gp-product-section.active {
    grid-template-columns: 1fr !important;
  }

  .products-with-sidebar .product-image {
    height: 230px !important;
  }
}
/* ===== FINAL: Products one-per-row layout ===== */

/* Products area */
.products-with-sidebar {
  width: min(1200px, calc(100% - 48px)) !important;
  max-width: 1200px !important;
  margin: 24px auto 70px !important;
  padding: 0 !important;
  display: block !important;
}

/* Hide old left sidebar if it still exists */
.category-sidebar {
  display: none !important;
}

/* Categories on top */
.category-topbar {
  margin: 0 0 22px !important;
  padding: 0 !important;
}

.category-topbar h3 {
  color: #174d32 !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  margin: 0 0 14px !important;
}

.category-button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.gp-category-btn {
  width: auto !important;
  min-width: 145px !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(23, 77, 50, 0.12) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #174d32 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 24px rgba(23, 77, 50, 0.06) !important;
}

.gp-category-btn.active,
.gp-category-btn:hover {
  background: #174d32 !important;
  color: white !important;
}

/* No inner scroll, normal page scroll */
.products-main {
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide inactive categories */
.gp-product-section {
  display: none !important;
}

/* Active category: one product per row */
.gp-product-section.active {
  display: block !important;
}

/* Product card one by one */
.gp-product-section.active .shop-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 26px 0 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}

/* Product inside layout: image left, text right */
.products-with-sidebar .wood-card-inner {
  display: grid !important;
  grid-template-columns: 42% 58% !important;
  gap: 28px !important;
  align-items: center !important;
  padding: 24px !important;
}

/* Product image: no crop */
.products-with-sidebar .product-image {
  width: 100% !important;
  height: 280px !important;
  min-height: 0 !important;
  padding: 14px !important;
  margin: 0 !important;
  border-radius: 22px !important;
  background: #fffaf5 !important;
  overflow: hidden !important;
}

.products-with-sidebar .card-product-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Product text */
.products-with-sidebar .shop-card-body {
  padding: 0 !important;
}

.products-with-sidebar .mini-tag {
  font-size: 12px !important;
  padding: 7px 12px !important;
}

.products-with-sidebar .shop-card-body h3 {
  color: #174d32 !important;
  font-size: 25px !important;
  line-height: 1.35 !important;
  margin: 14px 0 12px !important;
}

.products-with-sidebar .shop-card-body p {
  color: #5b524c !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin-bottom: 12px !important;
}

.products-with-sidebar .mini-list {
  margin: 12px 0 !important;
}

.products-with-sidebar .mini-list li {
  font-size: 15px !important;
  margin: 7px 0 !important;
}

.products-with-sidebar .card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.products-with-sidebar .btn-small {
  min-height: 40px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  border-radius: 999px !important;
}

/* Coming soon one full row */
.gp-product-section.active .coming-soon-box {
  width: 100% !important;
  min-height: 280px !important;
  padding: 48px !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 18px 54px rgba(91, 48, 16, 0.08) !important;
}

/* Mobile */
@media (max-width: 900px) {
  .products-with-sidebar {
    width: min(100% - 28px, 680px) !important;
  }

  .category-button-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .gp-category-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .products-with-sidebar .wood-card-inner {
    grid-template-columns: 1fr !important;
  }

  .products-with-sidebar .product-image {
    height: 240px !important;
  }
}
/* ===== FINAL FIX: remove product hero gap ===== */

/* 1. Hide old carousel arrows */
.cat-carousel-controls,
.pet-carousel-controls,
.cat-carousel-btn,
.pet-carousel-btn,
.cat-carousel-prev,
.cat-carousel-next,
.pet-carousel-prev,
.pet-carousel-next {
  display: none !important;
}

/* 2. Make product hero compact, keep background image color */
.page-hero,
.page-hero.section-pad {
  min-height: 450px !important;
  padding-top: 48px !important;
  padding-bottom: 32px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* 3. Make hero content not create extra space */
.page-hero-grid {
  display: block !important;
}

.page-hero .container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.page-hero h1 {
  margin-bottom: 16px !important;
}

.page-actions {
  margin-top: 16px !important;
}

/* 4. Bring categories naturally closer */
.products-with-sidebar {
  margin-top: 22px !important;
  margin-bottom: 70px !important;
  transform: none !important;
  position: relative !important;
  top: auto !important;
}

/* 5. Categories spacing */
.category-topbar {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  transform: none !important;
  position: relative !important;
  top: auto !important;
}

.category-topbar h3 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* 6. Product area no hidden scroll */
.products-main {
  margin-top: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}
/* ===== Remove old carousel gap on Products page ===== */

.cat-carousel-shell,
.cat-carousel-track,
.cat-carousel-controls,
.cat-carousel-btn,
.pet-carousel-shell,
.pet-carousel-track,
.pet-carousel-controls,
.pet-carousel-btn {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Keep categories close to hero without touching hero size */
.products-with-sidebar {
  margin-top: 20px !important;
  padding-top: 0 !important;
}

.cat-carousel-controls,
.cat-carousel-btn,
.cat-carousel-prev,
.cat-carousel-next,
.pet-carousel-controls,
.pet-carousel-btn,
.pet-carousel-prev,
.pet-carousel-next {
  display: none !important;
}

/* ===== PRODUCT PAGE FINAL TUNING PANEL ===== */

:root {
  /* Hero 文字位置 */
  --product-hero-x: -100px;      /* 负数往左，正数往右 */
  --product-hero-y: -100px;      /* 负数往上，正数往下 */

  /* Hero 文字大小 */
  --product-hero-title-size: 70px;
  --product-hero-text-size: 14px;

  /* Products 整体宽度 */
  --products-width: 1300px;

  /* Product 卡片 */
  --product-image-height: 450px;
  --product-title-size: 35px;
  --product-text-size: 20px;

  /* Categories */
  --category-title-size: 30px;
  --category-button-size: 20px;
}

/* ===== Hero text tuning ===== */

.page-hero-grid {
  display: block !important;
  transform: translate(var(--product-hero-x), var(--product-hero-y)) !important;
}

.page-hero h1 {
  font-size: var(--product-hero-title-size) !important;
  line-height: 1 !important;
  margin-bottom: 16px !important;
}

.page-hero p {
  font-size: var(--product-hero-text-size) !important;
  line-height: 1.65 !important;
  max-width: 620px !important;
}

.page-actions {
  margin-top: 18px !important;
}

/* ===== Product area tuning ===== */

.products-with-sidebar {
  width: min(var(--products-width), calc(100% - 48px)) !important;
  max-width: var(--products-width) !important;
  margin: 15px auto 70px !important;
  padding: 0 !important;
  display: block !important;
}

/* Categories top */
.category-topbar {
  margin-bottom: -10px !important;
  margin-top: 30px !important;
  --category-title-size: 40px;
}

.category-topbar h3 {
  font-size: var(--category-title-size) !important;
  color: #174d32 !important;
  font-weight: 500 !important;
  margin-bottom: 30px !important;
}

.category-button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

.gp-category-btn {
  font-size: var(--category-button-size) !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
}

/* Product cards: 一行一个 */
.gp-product-section.active {
  display: block !important;
}

.gp-product-section.active .shop-card {
  width: 100% !important;
  margin-bottom: 26px !important;
  border-radius: 28px !important;
}

/* Product card inside */
.products-with-sidebar .wood-card-inner {
  display: grid !important;
  grid-template-columns: 42% 58% !important;
  gap: 28px !important;
  align-items: center !important;
  padding: 20px !important;
}

/* Product image */
.products-with-sidebar .product-image {
  height: var(--product-image-height) !important;
  padding: 40px !important;
  border-radius: 22px !important;
  background: #fffaf5 !important;
  overflow: hidden !important;
}

.products-with-sidebar .card-product-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Product text */
.products-with-sidebar .shop-card-body h3 {
  font-size: var(--product-title-size) !important;
  line-height: 1.35 !important;
  color: #174d32 !important;
  margin: 12px 0 !important;
}

.products-with-sidebar .shop-card-body p {
  font-size: var(--product-text-size) !important;
  line-height: 1.65 !important;
  color: #5b524c !important;
}

.products-with-sidebar .mini-list li {
  font-size: 15px !important;
  margin: 7px 0 !important;
}

.products-with-sidebar .btn-small {
  font-size: 15px !important;
  padding: 5px 10px !important;
}

/* Mobile */
@media (max-width: 900px) {
  .products-with-sidebar .wood-card-inner {
    grid-template-columns: 1fr !important;
  }

  .products-with-sidebar .product-image {
    height: 240px !important;
  }

  .page-hero h1 {
    font-size: 44px !important;
  }
}
/* ===== Replace product hero buttons with text ===== */

.page-hero .page-actions .btn,
.page-hero .page-actions a {
  display: none !important;
}

.page-hero .page-actions::before {
  content: "Carefully selected pet essentials for happier paws, cleaner homes, and easier daily care.";
  display: block;
  max-width: 620px;
  color: #4d4a42;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 600;
}
/* ===== Hide product hero buttons and replace with text ===== */

.page-actions {
  display: block !important;
  margin-top: 18px !important;
}

/* hide WhatsApp / comparison buttons */
.page-actions a[href*="wa.me"],
.page-actions a[href*="whatsapp"],
.page-actions a[href*="comparison"],
.page-actions a[href*="#comparison"],
.page-actions .btn-primary,
.page-actions .btn-secondary {
  display: none !important;
}

/* add new text */
.page-actions::before {
  content: "Carefully selected pet essentials for happier paws, cleaner homes, and easier daily care.";
  display: block !important;
  max-width: 620px !important;
  color: #4d4a42 !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  font-weight: 600 !important;
}

.product-hero-note {
  display: block !important;
  margin-top: 18px !important;
  max-width: 620px !important;
}

.product-hero-note p {
  margin: 0 !important;
  color: #4d4a42 !important;
  font-size: 22px !important;
  line-height: 1.65 !important;
  font-weight: 600 !important;
}
.product-hero-note {
  transform: translate(-140px, 0px) !important;
}
/* Product hero small label */
.page-hero .eyebrow {
  color: #f26a2e !important;
  transform: translate(10px, 0px) !important;
}
.category-topbar h3 {
  color: #f26a2e !important;
}
/* ===== FINAL THEME: Nature Green + Pink Orange Gradient ===== */

:root {
  --forest: #174d32;
  --forest-soft: #2f7a4f;
  --leaf: #7ca982;
  --leaf-light: #d8ebc8;
  --cream-green: #f4f8e9;
  --warm-cream: #fff8ee;
  --warm-orange: #ff7a28;
  --soft-pink: #ff6aa2;
  --text-deep: #26352a;
  --text-muted-green: #5b6858;
}

/* Whole website background */
body {
  background:
    radial-gradient(circle at 8% 12%, rgba(23, 77, 50, 0.25), transparent 28%),
    radial-gradient(circle at 18% 75%, rgba(124, 169, 130, 0.32), transparent 32%),
    radial-gradient(circle at 88% 10%, rgba(255, 106, 162, 0.22), transparent 30%),
    radial-gradient(circle at 82% 82%, rgba(255, 122, 40, 0.18), transparent 32%),
    linear-gradient(
      135deg,
      #fff8ee 0%,
      #e5f1d5 38%,
      #f3f7df 68%,
      #fff0e7 100%
    ) !important;
  color: var(--text-deep) !important;
}

/* Soft moving background layer */
body::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(23, 77, 50, 0.18), transparent 26%),
    radial-gradient(circle at 70% 18%, rgba(255, 106, 162, 0.15), transparent 26%),
    radial-gradient(circle at 55% 82%, rgba(255, 122, 40, 0.14), transparent 28%) !important;
}

/* Header */
.site-header {
  background: rgba(255, 248, 238, 0.86) !important;
  border-bottom: 1px solid rgba(23, 77, 50, 0.12) !important;
  backdrop-filter: blur(18px) !important;
}

/* Headings */
h1,
h2,
h3 {
  color: var(--forest) !important;
}

/* Small labels */
.eyebrow,
.page-hero .eyebrow,
.category-topbar h3 {
  color: var(--warm-orange) !important;
}

/* Main text */
p,
.shop-card p,
.category-card p,
.info-card p,
.empty-category p {
  color: var(--text-muted-green) !important;
}

/* Cards */
.shop-card,
.category-card,
.info-card,
.page-card,
.empty-category,
.coming-soon-box,
.product-info-panel {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(23, 77, 50, 0.13) !important;
  box-shadow: 0 20px 55px rgba(23, 77, 50, 0.09) !important;
}

/* Product image panels */
.products-with-sidebar .product-image,
.product-image {
  background:
    radial-gradient(circle at 30% 20%, rgba(124, 169, 130, 0.22), transparent 36%),
    linear-gradient(135deg, #fffaf3, #eaf4dc) !important;
}

/* Primary buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--forest), var(--forest-soft)) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(23, 77, 50, 0.24) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #103824, #24663f) !important;
}

/* Secondary buttons */
.btn-secondary {
  color: var(--warm-orange) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 122, 40, 0.24) !important;
}

/* Category buttons */
.gp-category-btn {
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--forest) !important;
  border: 1px solid rgba(23, 77, 50, 0.14) !important;
  box-shadow: 0 10px 24px rgba(23, 77, 50, 0.06) !important;
}

.gp-category-btn.active,
.gp-category-btn:hover {
  background: linear-gradient(135deg, var(--forest), var(--forest-soft)) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(23, 77, 50, 0.18) !important;
}

/* Mini tags */
.mini-tag,
.status-pill,
.coming-pill {
  background: rgba(216, 235, 200, 0.75) !important;
  color: var(--forest) !important;
  border-color: rgba(23, 77, 50, 0.12) !important;
}

/* Price / important text */
.price-row strong,
.product-price-box strong {
  color: var(--forest) !important;
}

/* Footer */
.site-footer {
  background: linear-gradient(135deg, #173d28, #2c211b) !important;
  color: #ffffff !important;
}

/* Links hover */
.nav-links a:hover,
.site-footer a:hover {
  color: var(--warm-orange) !important;
}
/* ===== HOME CTA BANNERS: Softer Nature Green Theme ===== */

/* 这几个 class 是常见 CTA / contact / marketplace section，先一起覆盖 */
.cta-section,
.contact-section,
.marketplace-section,
.online-store-section,
.contact-banner,
.store-banner,
.home-cta,
section:has(.cta-card) {
  background:
    radial-gradient(circle at 18% 18%, rgba(23, 77, 50, 0.18), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(255, 106, 162, 0.12), transparent 28%),
    radial-gradient(circle at 82% 80%, rgba(255, 122, 40, 0.10), transparent 30%),
    linear-gradient(135deg, #eef7df 0%, #fff8ee 58%, #ffece5 100%) !important;
}

/* Banner 里面的白色/透明面板 */
.cta-card,
.contact-card,
.marketplace-card,
.store-card,
.online-store-card {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(23, 77, 50, 0.12) !important;
  box-shadow: 0 20px 55px rgba(23, 77, 50, 0.10) !important;
  backdrop-filter: blur(12px) !important;
}

/* 小标题，例如 READY TO ASK / MARKETPLACE */
.cta-card .eyebrow,
.contact-card .eyebrow,
.marketplace-card .eyebrow,
.store-card .eyebrow {
  color: #f26a2e !important;
}

/* Banner 标题 */
.cta-card h2,
.contact-card h2,
.marketplace-card h2,
.store-card h2 {
  color: #174d32 !important;
}

/* Banner 文字 */
.cta-card p,
.contact-card p,
.marketplace-card p,
.store-card p {
  color: #5b6858 !important;
}

/* Banner 按钮 */
.cta-card .btn-primary,
.contact-card .btn-primary,
.marketplace-card .btn-primary,
.store-card .btn-primary {
  background: linear-gradient(135deg, #174d32, #2f7a4f) !important;
  color: white !important;
}

.cta-card .btn-secondary,
.contact-card .btn-secondary,
.marketplace-card .btn-secondary,
.store-card .btn-secondary {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #174d32 !important;
  border: 1px solid rgba(23, 77, 50, 0.14) !important;
}
/* ===== HOME CONTACT CTA: Softer Green Theme ===== */

/* ===== Home CTA / Marketplace banners only ===== */

.home-cta,
.marketplace-section,
.online-store-section,
.contact-section {
  background:
    radial-gradient(circle at 18% 18%, rgba(23, 77, 50, 0.18), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(255, 106, 162, 0.10), transparent 28%),
    radial-gradient(circle at 82% 80%, rgba(255, 122, 40, 0.10), transparent 30%),
    linear-gradient(135deg, #eef7df 0%, #fff8ee 58%, #ffece5 100%) !important;
}

.home-cta article,
.marketplace-section article,
.online-store-section article,
.contact-section article,
.home-cta .container,
.marketplace-section .container,
.online-store-section .container,
.contact-section .container {
  background: transparent !important;
}

.home-cta .cta-card,
.marketplace-section .cta-card,
.online-store-section .cta-card,
.contact-section .cta-card,
.home-cta .contact-card,
.marketplace-section .contact-card,
.online-store-section .contact-card,
.contact-section .contact-card {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(23, 77, 50, 0.12) !important;
  box-shadow: 0 20px 55px rgba(23, 77, 50, 0.10) !important;
}


/* ===== Home Product Highlight Image Tuning - Strong Version ===== */

section:has(.product-highlight) img,
section:has([href*="product-tofu-cat-litter"]) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

section:has([href*="product-tofu-cat-litter"]) .product-image,
section:has([href*="product-tofu-cat-litter"]) figure,
section:has([href*="product-tofu-cat-litter"]) .image-card {
  height: 360px !important;
  border-radius: 26px !important;
  overflow: hidden !important;
}
/* ===== Home Product Highlight Image Box ===== */

.home-highlight-image-box {
  width: 500px !important;
  height: 500px !important;
  padding: 14px !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(23, 77, 50, 0.12) !important;
  box-shadow: 0 20px 55px rgba(23, 77, 50, 0.10) !important;
  overflow: hidden !important;
}

.home-highlight-image-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 20px !important;
}
/* ===== FINAL FOOTER: Soft Nature Green Footer ===== */

.site-footer,
footer {
  background:
    radial-gradient(circle at 15% 20%, rgba(124, 169, 130, 0.28), transparent 32%),
    radial-gradient(circle at 85% 20%, rgba(255, 122, 40, 0.10), transparent 30%),
    linear-gradient(135deg, #dceecb 0%, #eaf5dd 48%, #fff1e8 100%) !important;
  color: #174d32 !important;
  border-top: 1px solid rgba(23, 77, 50, 0.12) !important;
}

/* Footer titles */
.site-footer h2,
.site-footer h3,
.site-footer h4,
footer h2,
footer h3,
footer h4 {
  color: #174d32 !important;
  font-weight: 900 !important;
}

/* Footer normal text */
.site-footer p,
.site-footer li,
.site-footer small,
footer p,
footer li,
footer small {
  color: #4f604d !important;
}

/* Footer links */
.site-footer a,
footer a {
  color: #174d32 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.site-footer a:hover,
footer a:hover {
  color: #f26a2e !important;
}

/* Footer logo / brand text */
.site-footer .brand-name,
.site-footer strong,
footer .brand-name,
footer strong {
  color: #174d32 !important;
}

/* Footer divider line */
.site-footer hr,
footer hr {
  border-color: rgba(23, 77, 50, 0.16) !important;
}

/* Copyright line */
.site-footer .copyright,
.site-footer .footer-bottom,
footer .copyright,
footer .footer-bottom {
  color: #4f604d !important;
  border-top: 1px solid rgba(23, 77, 50, 0.14) !important;
}
/* ===== FOOTER TEXT POSITION + COLOR TUNING ===== */

/* 整个 footer 内容移动 */
.site-footer .container,
footer .container {
  transform: translate(0px, 0px) !important;
}

/* 左边 Gi² Paws 那组 */
.site-footer .footer-brand,
footer .footer-brand {
  transform: translate(0px, -10px) !important;
}

/* 中间 Shop 那组 */
.site-footer .footer-column:nth-child(2),
footer .footer-column:nth-child(2) {
  transform: translate(0px, 0px) !important;
}

/* 中间 Support 那组 */
.site-footer .footer-column:nth-child(3),
footer .footer-column:nth-child(3) {
  transform: translate(0px, 0px) !important;
}

/* 右边 Contact Us 那组 */
.site-footer .footer-column:nth-child(4),
footer .footer-column:nth-child(4) {
  transform: translate(0px, 0px) !important;
}

/* Footer 标题颜色：Shop / Support / Contact Us */
.site-footer h3,
.site-footer h4,
footer h3,
footer h4 {
  color: #f26a2e !important;
}

/* Footer 普通文字颜色 */
.site-footer p,
.site-footer li,
.site-footer small,
footer p,
footer li,
footer small {
  color: #4f604d !important;
}

/* Footer 链接颜色 */
.site-footer a,
footer a {
  color: #355d3b !important;
}

/* Hover 颜色 */
.site-footer a:hover,
footer a:hover {
  color: #f26a2e !important;
}
/* ===== Footer brand + copyright color ===== */

/* 小 logo 旁边 Gi² Paws */
.site-footer .footer-brand h3,
.site-footer .footer-brand h2,
.site-footer .footer-brand strong,
footer .footer-brand h3,
footer .footer-brand h2,
footer .footer-brand strong {
  color: #174d32 !important;
}

/* 小 logo 下面那段介绍文字 */
.site-footer .footer-brand p,
footer .footer-brand p {
  color: #4f604d !important;
}

/* All rights reserved 那行 */
.site-footer .footer-bottom,
.site-footer .footer-bottom p,
.site-footer .copyright,
.site-footer small,
footer .footer-bottom,
footer .footer-bottom p,
footer .copyright,
footer small {
  color: #4f604d !important;
}
.footer-bottom span {
  color: #174d32 !important;
}
/* Footer 小 logo 旁边的 Gi² Paws */
.footer-brand span {
  color: #174d32 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
}

/* Gi² Paws 里面的 2 */
.footer-brand sup {
  color: #174d32 !important;
}

/* logo 下面那段介绍文字 */
.footer-text {
  color: #4f604d !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* 整组 logo + 文字移动 */
.footer-brand,
.footer-text {
  transform: translate(0px, 0px) !important;
}
.footer-brand img {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain !important;
  border-radius: 14px !important;
}

/* ===== PRODUCT PAGE CLEAN FINAL FIX ===== */

/* 整个 products 区域：去掉大白框感觉 */
.products-with-sidebar {
  width: min(1180px, calc(100% - 56px)) !important;
  max-width: 1180px !important;
  margin: 24px auto 72px !important;
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Categories 不要像大面板，只保留标题和按钮 */
.category-topbar {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 22px !important;
}

/* Categories 标题 */
.category-topbar h3 {
  color: #f26a2e !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  margin: 0 0 16px !important;
  letter-spacing: -0.02em !important;
}

/* Category buttons */
.category-button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.gp-category-btn {
  min-width: 140px !important;
  padding: 11px 20px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #174d32 !important;
  border: 1px solid rgba(23, 77, 50, 0.12) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 22px rgba(23, 77, 50, 0.06) !important;
}

.gp-category-btn.active,
.gp-category-btn:hover {
  background: #174d32 !important;
  color: #ffffff !important;
}

/* Product section */
.products-main {
  margin: 0 !important;
  padding: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* 一次只显示一个 category */
.gp-product-section {
  display: none !important;
}

.gp-product-section.active {
  display: block !important;
}

/* Product card 一行一个 */
.gp-product-section.active .shop-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 26px !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(23, 77, 50, 0.12) !important;
  box-shadow: 0 20px 50px rgba(23, 77, 50, 0.08) !important;
}

/* Product card 里面：图片左，文字右 */
.products-with-sidebar .wood-card-inner {
  display: grid !important;
  grid-template-columns: 42% 58% !important;
  gap: 28px !important;
  align-items: center !important;
  padding: 24px !important;
}

/* 图片框 */
.products-with-sidebar .product-image {
  height: 270px !important;
  padding: 14px !important;
  margin: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(124, 169, 130, 0.18), transparent 36%),
    linear-gradient(135deg, #fffaf3, #eaf4dc) !important;
  overflow: hidden !important;
}

/* 图片不要被裁掉 */
.products-with-sidebar .card-product-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Product 文字 */
.products-with-sidebar .shop-card-body h3 {
  color: #174d32 !important;
  font-size: 26px !important;
  line-height: 1.35 !important;
  margin: 12px 0 !important;
}

.products-with-sidebar .shop-card-body p {
  color: #5b6858 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin-bottom: 12px !important;
}

.products-with-sidebar .mini-list li {
  color: #5b6858 !important;
  font-size: 15px !important;
  margin: 7px 0 !important;
}

/* 按钮 */
.products-with-sidebar .card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.products-with-sidebar .btn-small {
  font-size: 14px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
}

/* Coming soon card */
.gp-product-section.active .coming-soon-box {
  width: 100% !important;
  min-height: 260px !important;
  padding: 42px !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(23, 77, 50, 0.12) !important;
  box-shadow: 0 20px 50px rgba(23, 77, 50, 0.08) !important;
}

/* Mobile */
@media (max-width: 900px) {
  .products-with-sidebar {
    width: min(100% - 28px, 680px) !important;
  }

  .category-button-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .gp-category-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .products-with-sidebar .wood-card-inner {
    grid-template-columns: 1fr !important;
  }

  .products-with-sidebar .product-image {
    height: 240px !important;
  }
}
/* ===== Product outer frame tuning ===== */

/* 外面那一整块区域 */
.products-area {
  width: min(1280px, calc(100% - 80px)) !important;
  margin: 28px auto 80px !important;
  padding: 34px !important;

  border-radius: 42px !important;
  background:
    radial-gradient(circle at 12% 15%, rgba(124, 169, 130, 0.18), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(255, 122, 40, 0.08), transparent 30%),
    rgba(255, 255, 255, 0.42) !important;

  border: 1px solid rgba(23, 77, 50, 0.10) !important;
  box-shadow: 0 24px 70px rgba(23, 77, 50, 0.08) !important;
  overflow: hidden !important;
}

/* 里面 categories + product cards */
.products-with-sidebar {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* ===== Fix product outer frame center position ===== */

.products-area {
  box-sizing: border-box !important;
  width: min(1280px, calc(100% - 80px)) !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 34px !important;
  border-radius: 42px !important;
}

.products-with-sidebar {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ===== Fix: stop home WhatsApp banner CSS affecting product page ===== */

.products-area,
.products-area section,
.products-with-sidebar,
.products-main,
.gp-product-section,
.category-topbar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* keep only product cards styled */
.products-with-sidebar .shop-card {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(23, 77, 50, 0.12) !important;
  box-shadow: 0 20px 50px rgba(23, 77, 50, 0.08) !important;
  border-radius: 26px !important;
}
/* ===== PRODUCT PAGE CLEAN CATEGORIES + PRODUCT LIST ===== */

:root {
  /* Categories 整体 */
  --product-section-width: 1180px;
  --category-top-gap: 18px;
  --category-bottom-gap: 28px;

  /* Categories 标题 */
  --category-title-color: #f26a2e;
  --category-title-size: 32px;
  --category-title-x: 0px;
  --category-title-y: 0px;

  /* Category buttons */
  --category-btn-size: 15px;
  --category-btn-width: 145px;
  --category-btn-height: 46px;
  --category-btn-gap: 12px;

  /* Product cards */
  --product-card-radius: 28px;
  --product-card-gap: 26px;
  --product-image-height: 270px;
  --product-title-size: 26px;
  --product-text-size: 16px;
}

/* 外层产品区域，不要奇怪背景线 */
.products-area {
  width: (var(--product-section-width), calc(100% - 56px)) !important;
  max-width: var(--product-section-width) !important;
  margin: var(--category-top-gap) auto 72px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Products wrapper */
.products-with-sidebar {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 不用左边 sidebar */
.category-sidebar {
  display: none !important;
}

/* Categories 上方区域 */
.category-topbar {
  margin: 0 0 var(--category-bottom-gap) !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Categories 标题 */
.category-topbar h3 {
  color: var(--category-title-color) !important;
  font-size: var(--category-title-size) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 16px !important;
  transform: translate(var(--category-title-x), var(--category-title-y)) !important;
}

/* Buttons row */
.category-button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--category-btn-gap) !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Category buttons */
.gp-category-btn {
  min-width: var(--category-btn-width) !important;
  height: var(--category-btn-height) !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(23, 77, 50, 0.12) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #174d32 !important;
  font-size: var(--category-btn-size) !important;
  font-weight: 900 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: 0 8px 22px rgba(23, 77, 50, 0.06) !important;
  transition: 0.2s ease !important;
}

.gp-category-btn.active,
.gp-category-btn:hover {
  background: #174d32 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(23, 77, 50, 0.18) !important;
}

/* Products main */
.products-main {
  width: 100% !important;
  margin: auto !important;
  padding: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Category sections */
.gp-product-section {
  display: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.gp-product-section.active {
  display: block !important;
}

/* Product card: 一行一个 */
.gp-product-section.active .shop-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 var(--product-card-gap) !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  border-radius: var(--product-card-radius) !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(23, 77, 50, 0.12) !important;
  box-shadow: 0 20px 50px rgba(23, 77, 50, 0.08) !important;
}

/* Product inside layout */
.products-with-sidebar .wood-card-inner {
  display: grid !important;
  grid-template-columns: 42% 58% !important;
  gap: 28px !important;
  align-items: center !important;
  padding: 24px !important;
}

/* Product image box */
.products-with-sidebar .product-image {
  width: 100% !important;
  height: var(--product-image-height) !important;
  padding: 14px !important;
  margin: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(124, 169, 130, 0.18), transparent 36%),
    linear-gradient(135deg, #fffaf3, #eaf4dc) !important;
  overflow: hidden !important;
}

.products-with-sidebar .card-product-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Product text */
.products-with-sidebar .shop-card-body h3 {
  color: #174d32 !important;
  font-size: var(--product-title-size) !important;
  line-height: 1.35 !important;
  margin: 12px 0 !important;
}

.products-with-sidebar .shop-card-body p {
  color: #5b6858 !important;
  font-size: var(--product-text-size) !important;
  line-height: 1.65 !important;
  margin-bottom: 12px !important;
}

.products-with-sidebar .mini-list li {
  color: #5b6858 !important;
  font-size: 15px !important;
  margin: 7px 0 !important;
}

.products-with-sidebar .card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.products-with-sidebar .btn-small {
  font-size: 14px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
}

/* Coming soon card */
.gp-product-section.active .coming-soon-box {
  width: 100% !important;
  min-height: 260px !important;
  padding: 42px !important;
  border-radius: var(--product-card-radius) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(23, 77, 50, 0.12) !important;
  box-shadow: 0 20px 50px rgba(23, 77, 50, 0.08) !important;
}

/* Mobile */
@media (max-width: 900px) {
  .products-area {
    width: min(100% - 28px, 680px) !important;
  }

  .category-button-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .gp-category-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .products-with-sidebar .wood-card-inner {
    grid-template-columns: 1fr !important;
  }

  .products-with-sidebar .product-image {
    height: 240px !important;
  }
}
/* ===== PRODUCT PAGE CATEGORY SIZE + COLOR VALUES ===== */

:root {
  /* 整个 product 内容宽度 */
  --product-section-width: 1180px;

  /* Categories 整组位置 */
  --category-top-gap: 25px;
  --category-bottom-gap: 28px;

  /* Categories 标题 */
  --category-title-color: #f26a2e;
  --category-title-size: 34px;
  --category-title-x: 0px;
  --category-title-y: 0px;

  /* Category 按钮 */
  --category-btn-width: 145px;
  --category-btn-height: 46px;
  --category-btn-size: 15px;
  --category-btn-gap: 12px;

  /* Product card */
  --product-card-radius: 28px;
  --product-card-gap: 26px;
  --product-image-height: 270px;
  --product-title-size: 26px;
  --product-text-size: 16px;
}

/* ===== PRODUCT PAGE CATEGORIES DIRECT FIX ===== */

/* Product 整体宽度和位置 */
.products-area {
  width: min(1180px, calc(100% - 56px)) !important;
  max-width: 1180px !important;
  margin: 18px auto 72px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 外层不要背景 */
.products-with-sidebar {
  width: 75% !important;
  margin: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Categories 整组 */
.category-topbar {
  margin-top: 50px !important;
  margin-bottom: -30px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Categories 标题 */
.category-topbar h3 {
  color: #f26a2e !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  transform: translate(600px, 0px) !important;
}

/* 按钮排列 */
.category-button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Category 按钮 */
.gp-category-btn {
  min-width: 145px !important;
  height: 46px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(23, 77, 50, 0.12) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #174d32 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: 0 8px 22px rgba(23, 77, 50, 0.06) !important;
  
}

.gp-category-btn.active,
.gp-category-btn:hover {
  background: #174d32 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(23, 77, 50, 0.18) !important;

  
}/* Move category buttons directly */
.gp-category-btn {
  position: relative !important;
  left: 350px !important; /* 正数往右，负数往左 */
  top: 0px !important;   /* 正数往下，负数往上 */
}

/* ===== PRODUCT CARD + IMAGE SIZE TUNING ===== */

/* Product card 框框大小 */
.gp-product-section.active .shop-card {
  width: 100% !important;
  max-width: none !important;
  margin-bottom: 24px !important;
  border-radius: 26px !important;
}

/* Product card 里面的空间 */
.products-with-sidebar .wood-card-inner {
  display: grid !important;
  grid-template-columns: 40% 60% !important; /* 左边图片 / 右边文字 */
  gap: 24px !important;
  padding: 22px !important;
  align-items: center !important;
}

/* 图片框大小 */
.products-with-sidebar .product-image {
  height: 250px !important;
  padding: 150px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

/* 图片本身，不裁切 */
.products-with-sidebar .card-product-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
/* ===== FORCE PRODUCT IMAGE SIZE ===== */

/* 图片外面的框 */
.products-area img[src*="assets/products"],
.products-with-sidebar img[src*="assets/products"] {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* 图片框大小 */
.products-area .product-image,
.products-area .real-card-image,
.products-area .wood-card-inner > div:first-child,
.products-with-sidebar .product-image,
.products-with-sidebar .real-card-image,
.products-with-sidebar .wood-card-inner > div:first-child {
  height: 500px !important;
  min-height: 400px !important;
  max-height: 600px !important;
  padding: 20px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}
/* ===== PRODUCT PAGE CARD TEXT + BUTTON TUNING ===== */

/* Product title */
.products-with-sidebar .shop-card-body h3 {
  color: #174d32 !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  line-height: 2.35 !important;
  margin: 12px 0 !important;
}

/* Product description */
.products-with-sidebar .shop-card-body p {
  color: #5b6858 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  margin-bottom: 12px !important;
}

/* Product info list: Price, Size, Scent, Stock */
.products-with-sidebar .mini-list li {
  color: #4f604d !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin: 7px 0 !important;
}

/* Available Now tag */
.products-with-sidebar .mini-tag {
  color: #174d32 !important;
  background: rgba(216, 235, 200, 0.85) !important;
  border: 1px solid rgba(23, 77, 50, 0.12) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  padding: 7px 12px !important;
}

/* View Details button */
.products-with-sidebar .card-actions .btn-primary {
  background: linear-gradient(135deg, #174d32, #2f7a4f) !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 26px rgba(23, 77, 50, 0.18) !important;
}

/* WhatsApp button */
.products-with-sidebar .card-actions .btn-secondary {
  background: #25d366 !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 26px rgba(37, 211, 102, 0.22) !important;
}

/* Button hover */
.products-with-sidebar .card-actions .btn-primary:hover,
.products-with-sidebar .card-actions .btn-secondary:hover {
  transform: translateY(-2px) !important;
  filter: brightness(0.96) !important;
}

/* Button row spacing */
.products-with-sidebar .card-actions {
  gap: 10px !important;
  margin-top: 18px !important;
}
/* ===== HOME PAGE CONTACT CTA SOFT GREEN FIX ===== */

.home-page section:has([href*="wa.me"]),
.home-page section:has([href*="mailto"]) {
  background:
    radial-gradient(circle at 18% 18%, rgba(23, 77, 50, 0.16), transparent 32%),
    radial-gradient(circle at 85% 20%, rgba(255, 122, 40, 0.07), transparent 30%),
    radial-gradient(circle at 88% 82%, rgba(255, 106, 162, 0.06), transparent 32%),
    linear-gradient(135deg, #eaf5dd 0%, #fff8ee 62%, #fff1e8 100%) !important;
}

/* 里面那张玻璃卡 */
.home-page section:has([href*="wa.me"]) .container,
.home-page section:has([href*="mailto"]) .container {
  background: transparent !important;
}

.home-page section:has([href*="wa.me"]) article,
.home-page section:has([href*="mailto"]) article,
.home-page section:has([href*="wa.me"]) .cta-card,
.home-page section:has([href*="mailto"]) .cta-card,
.home-page section:has([href*="wa.me"]) .contact-card,
.home-page section:has([href*="mailto"]) .contact-card {
  background: rgba(255, 255, 255, 0.68) !important;
  border: 1px solid rgba(23, 77, 50, 0.12) !important;
  box-shadow: 0 20px 55px rgba(23, 77, 50, 0.09) !important;
  backdrop-filter: blur(12px) !important;
}

/* READY TO ASK? */
.home-page section:has([href*="wa.me"]) .eyebrow,
.home-page section:has([href*="mailto"]) .eyebrow {
  color: #f26a2e !important;
}

/* Contact Gi² Paws today */
.home-page section:has([href*="wa.me"]) h2,
.home-page section:has([href*="mailto"]) h2 {
  color: #174d32 !important;
}

/* description text */
.home-page section:has([href*="wa.me"]) p,
.home-page section:has([href*="mailto"]) p {
  color: #5b6858 !important;
}

/* Move footer description text */
.footer-text {
  position: relative !important;
  left: 0px !important;  /* 正数往右，负数往左 */
  top: -30px !important;   /* 正数往下，负数往上 */
}
/* ===== HOME HERO IMAGE: brighter and more colorful ===== */

.home-page .hero,
.home-page .banner,
.home-page .intro {
  background:
    linear-gradient(
      90deg,
      rgba(255, 248, 238, 0.62) 0%,
      rgba(255, 248, 238, 0.24) 42%,
      rgba(255, 248, 238, 0.04) 100%
    ),
    url("assets/hero-pets-bg.png") !important;

  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  .home-page .hero,
.home-page .banner,
.home-page .intro {
  filter: saturate(1.28) contrast(1.08) brightness(1.08) !important;
}
}
/* ===== Home hero image position fix ===== */

.hero.section-pad.reveal {
  background:
    linear-gradient(
      90deg,
      rgba(224, 239, 207, 0.45) 0%,
      rgba(255, 248, 238, 0.12) 38%,
      rgba(255, 248, 238, 0.00) 100%
    ),
    url("assets/hero-pets-bg.png") !important;

  background-size: cover !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
}

/* HOME HERO show full image */
.hero.section-pad.reveal {
  min-height: 620px !important;

  background:
    linear-gradient(
      90deg,
      rgba(224, 239, 207, 0.35) 0%,
      rgba(255, 248, 238, 0.10) 38%,
      rgba(255, 248, 238, 0.00) 100%
    ),
    url("assets/hero-pets-bg.png") !important;

  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ===== HOME HERO FULL SCREEN FIX ===== */

.hero.section-pad.reveal {
  width: 100vw !important;
  max-width: 100vw !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  border-radius: 0 !important;
  overflow: hidden !important;

  min-height: 720px !important;
  padding: 90px 70px !important;
  box-sizing: border-box !important;

  background:
    linear-gradient(
      90deg,
      rgba(224, 239, 207, 0.40) 0%,
      rgba(255, 248, 238, 0.12) 38%,
      rgba(255, 248, 238, 0.00) 100%
    ),
    url("assets/hero-pets-bg.png") !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* ===== COMPARISON PAGE HERO ONLY ===== */

.comparison-page .page-hero,
.comparison-page .hero {
  width: 100vw !important;
  max-width: 100vw !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  border-radius: 0 !important;
  overflow: hidden !important;

  min-height: 500px !important;
  padding: 90px 70px !important;
  box-sizing: border-box !important;

  background:
    linear-gradient(
      90deg,
      rgba(224, 239, 207, 0.35) 0%,
      rgba(255, 248, 238, 0.12) 38%,
      rgba(255, 248, 238, 0.00) 100%
    ),
    url("assets/comparison-hero-pets.png") !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* ===== COMPARISON HERO TEXT TUNING ===== */

/* 整组 hero 文字移动 */
.comparison-page .page-hero .hero-copy,
.comparison-page .hero .hero-copy,
.comparison-page .page-hero-grid,
.comparison-page .hero-grid {
  transform: translate(-10%, -120px) !important;
}

/* 小字：例如 COMPARISON / PRODUCT COMPARISON */
.comparison-page .page-hero .eyebrow,
.comparison-page .hero .eyebrow {
  color: #f26a2e !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  margin-bottom: 14px !important;
}

/* 大标题 */
.comparison-page .page-hero h1,
.comparison-page .hero h1 {
  color: #174d32 !important;
  font-size: 60px !important;
  font-weight: 900 !important;
  line-height: 0.98 !important;
  max-width: 680px !important;
  margin-bottom: 18px !important;
}

/* 描述文字 */
.comparison-page .page-hero p,
.comparison-page .hero p {
  color: #4f604d !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
  max-width: 620px !important;
}

body.products-page .page-hero,
body.products-page .page-hero.section-pad {
  min-height: 600px !important;
  padding-top: 110px !important;
  padding-bottom: 110px !important;
}

/* ===== PRODUCT PAGE HERO HEIGHT ===== */

body.products-page .page-hero,
body.products-page .page-hero.section-pad {
  min-height: 520px !important;
  padding-top: 95px !important;
  padding-bottom: 95px !important;
}
/* Hide EN / 中文 / BM buttons */
.language-switcher,
.lang-link {
  display: none !important;
}
/* Hide Cart Soon / cart nav button */
.cart-cta,
.nav-cart-icon,
a[href*="cart"],
a[href*="Cart"] {
  display: none !important;
}
/* ===== Home Product Highlight Floating Image ===== */

.home-highlight-image-box,
#featured-products .product-image,
#featured-products .real-card-image {
  animation: productFloat 4.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes productFloat {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-12px) rotate(-1deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}.site-header {
  background: rgba(255, 248, 238, 0.35) !important;
  border-bottom: 1px solid rgba(23, 77, 50, 0.08) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
}

.nav-links,
.nav-links a {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ===== Remove white box behind nav links ===== */

.nav-links,
.nav-menu,
.main-nav,
.site-nav,
.header-nav,
.site-header nav ul,
.site-header nav li,
.site-header nav a {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 如果是 nav 中间那组 links 自己有 padding 背景 */
.site-header .nav-links {
  background: transparent !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* 保留文字本身 */
.site-header nav a {
  color: #3f372f !important;
  font-weight: 800 !important;
}
/* ===== MOBILE FIX START ===== */

@media (max-width: 768px) {

  /* Header mobile */
  .site-header {
    padding: 10px 16px !important;
  }

  .header-inner,
  .nav-wrap {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .brand,
  .site-brand {
    max-width: 100% !important;
  }

  .nav-links,
  .site-nav,
  .main-nav {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    background: transparent !important;
  }

  .nav-links a,
  .site-nav a,
  .main-nav a {
    font-size: 13px !important;
    padding: 4px 6px !important;
  }

  /* Home hero mobile */
  .home-page .hero.section-pad.reveal,
  .hero.section-pad.reveal {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 620px !important;

    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding: 70px 22px 40px !important;
    border-radius: 0 !important;

    background-size: cover !important;
    background-position: center right !important;
  }

  .hero-copy,
  .hero-grid,
  .page-hero-grid {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .hero h1,
  .hero.section-pad.reveal h1 {
    font-size: 44px !important;
    line-height: 1 !important;
    max-width: 100% !important;
  }

  .hero p,
  .hero-text {
    font-size: 15px !important;
    line-height: 1.6 !important;
    max-width: 95% !important;
  }

  .hero-actions,
  .page-actions {
    justify-content: flex-start !important;
  }

  .btn,
  .btn-primary,
  .btn-secondary {
    font-size: 14px !important;
    padding: 11px 18px !important;
  }

  /* Product / comparison hero mobile */
  body.products-page .page-hero,
  body.comparison-page .page-hero,
  body.products-page .page-hero.section-pad,
  body.comparison-page .page-hero.section-pad {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 520px !important;

    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding: 70px 22px 40px !important;
    border-radius: 0 !important;

    background-size: cover !important;
    background-position: center right !important;
  }

  body.products-page .page-hero h1,
  body.comparison-page .page-hero h1 {
    font-size: 42px !important;
    line-height: 1 !important;
  }

  body.products-page .page-hero p,
  body.comparison-page .page-hero p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* Product page mobile */
  .products-area {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin: 20px auto 60px !important;
  }

  .category-topbar h3 {
    font-size: 30px !important;
  }

  .category-button-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .gp-category-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    font-size: 14px !important;
  }

  .products-with-sidebar .wood-card-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 18px !important;
  }

  .products-with-sidebar .product-image {
    height: 230px !important;
  }

  .products-with-sidebar .shop-card-body h3 {
    font-size: 22px !important;
  }

  .products-with-sidebar .shop-card-body p {
    font-size: 15px !important;
  }

  .products-with-sidebar .mini-list li {
    font-size: 14px !important;
  }

  .products-with-sidebar .card-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .products-with-sidebar .card-actions a {
    width: 100% !important;
    text-align: center !important;
  }

  /* Home cards / sections */
  .section-pad {
    padding: 56px 20px !important;
  }

  .container {
    width: min(100% - 24px, 680px) !important;
  }

  .grid,
  .shop-grid,
  .feature-grid,
  .category-grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer mobile */
  .site-footer .container,
  footer .container {
    width: calc(100% - 32px) !important;
  }

  .footer-grid,
  .footer-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    text-align: left !important;
  }

  .footer-brand,
  .footer-text,
  .footer-column,
  .footer-bottom {
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }

  .footer-bottom {
    text-align: center !important;
  }
}

/* Extra small phones */
@media (max-width: 480px) {
  .hero h1,
  .hero.section-pad.reveal h1,
  body.products-page .page-hero h1,
  body.comparison-page .page-hero h1 {
    font-size: 36px !important;
  }

  .hero.section-pad.reveal {
    min-height: 580px !important;
    padding-top: 58px !important;
  }

  .category-button-row {
    grid-template-columns: 1fr !important;
  }

  .products-with-sidebar .product-image {
    height: 210px !important;
  }
}

/* ===== MOBILE FIX END ===== */

/* ===== MOBILE NAV FIX ONLY ===== */
@media (max-width: 768px) {
  .site-header {
    position: sticky !important;
    top: 0 !important;
    background: rgba(255, 248, 238, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    padding: 8px 0 !important;
  }

  .nav-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .brand img {
    width: 42px !important;
    height: 42px !important;
  }

  .brand span {
    font-size: 18px !important;
  }

  .nav-links {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 6px 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  .nav-links a {
    font-size: 13px !important;
    padding: 4px 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }
}/* ===== STEP 1: MOBILE NAVBAR FIX ===== */

@media (max-width: 768px) {
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: rgba(255, 248, 238, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(23, 77, 50, 0.08) !important;
    padding: 10px 0 !important;
  }

  .site-header .nav-wrap {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
  }

  .brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .brand img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }

  .brand-title {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .brand-stack small {
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
  }

  .menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;

    background: #ffffff !important;
    color: #174d32 !important;
    border: 1px solid rgba(23, 77, 50, 0.1) !important;
    box-shadow: 0 10px 24px rgba(23, 77, 50, 0.08) !important;

    font-size: 26px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
  }

  /* Mobile 默认隐藏 menu */
  .nav-links {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 0 !important;
    right: 0 !important;

    background: rgba(255, 248, 238, 0.96) !important;
    border: 1px solid rgba(23, 77, 50, 0.1) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 45px rgba(23, 77, 50, 0.12) !important;

    padding: 14px !important;
    z-index: 99999 !important;
  }

  /* 按 hamburger 后才打开 */
  .site-header.nav-open .nav-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .nav-links a {
    display: block !important;
    width: 100% !important;

    padding: 12px 14px !important;
    border-radius: 14px !important;

    background: transparent !important;
    color: #174d32 !important;
    box-shadow: none !important;
    border: none !important;

    font-size: 15px !important;
    font-weight: 900 !important;
    text-align: left !important;
  }

  .nav-links a:hover {
    background: rgba(216, 235, 200, 0.65) !important;
    color: #174d32 !important;
  }

  .language-switcher,
  .cart-cta {
    display: none !important;
  }
}
/* ===== STEP 2: HOME MOBILE HERO FIX ===== */

@media (max-width: 768px) {
  body.home-page .hero.section-pad.reveal,
  .home-page .hero.section-pad.reveal {
    width: 100vw !important;
    max-width: 100vw !important;

    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    border-radius: 0 !important;
    min-height: 350px !important;

    padding: 62px 20px 36px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: flex-start !important;

    background:
      linear-gradient(
        180deg,
        rgba(255, 248, 238, 0.78) 0%,
        rgba(255, 248, 238, 0.58) 38%,
        rgba(255, 248, 238, 0.18) 100%
      ),
      url("assets/hero-pets-bg.png") !important;

    background-size: cover !important;
    background-position: 64% center !important;
    background-repeat: no-repeat !important;
  }

  body.home-page .hero-copy,
  .home-page .hero-copy {
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body.home-page .hero .eyebrow,
  .home-page .hero .eyebrow {
    color: #f26a2e !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.18em !important;
    margin: 0 0 12px !important;
  }

  body.home-page .hero h1,
  .home-page .hero h1 {
    color: #ffffff !important;
    font-size: 40px !important;
    line-height: 0.98 !important;
    margin: 0 0 16px !important;
    max-width: 340px !important;
    text-shadow: 0 4px 18px rgba(23, 77, 50, 0.28) !important;
  }

  body.home-page .hero-text,
  body.home-page .hero p,
  .home-page .hero-text,
  .home-page .hero p {
    color: #3f3a33 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    font-weight: 650 !important;
    max-width: 200px !important;
    margin-bottom: 14px !important;
  }

  body.home-page .hero-actions,
  .home-page .hero-actions {
    margin-top: 10px !important;
    justify-content: flex-start !important;
  }

  body.home-page .hero-actions .btn,
  .home-page .hero-actions .btn {
    width: 150px !important;
    min-width: 50px !important;
    padding: 14px 26px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
    text-align: center !important;
  }
}/* ===== HOME MOBILE SHOP BUTTON TUNING ===== */

@media (max-width: 768px) {
  body.home-page .hero-actions,
  .home-page .hero-actions {
    margin-top: 14px !important;
    transform: translate(-160px, 0px) !important;
  }

  body.home-page .hero-actions .btn,
  .home-page .hero-actions .btn,
  body.home-page .hero-actions .btn-primary,
  .home-page .hero-actions .btn-primary {
    min-width: 0px !important;
    width: 2 !important;
    padding: 11px 22px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
  }
}/* ===== HOME MOBILE HERO WHOLE CONTENT MOVE ===== */

@media (max-width: 768px) {
  body.home-page .hero-copy,
  .home-page .hero-copy {
    transform: translate(0px, -50px) !important;
  }
}/* ===== HOME MOBILE HERO IMAGE ONLY ===== */

@media (max-width: 768px) {
  body.home-page .hero.section-pad.reveal,
  .home-page .hero.section-pad.reveal {
    background:
      linear-gradient(
        180deg,
        rgba(255, 248, 238, 0.78) 0%,
        rgba(255, 248, 238, 0.48) 38%,
        rgba(255, 248, 238, 0.08) 100%
      ),
      url("assets/hero-pets-mobile.png") !important;

    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }
}/* ===== HOME PAGE PRODUCT HIGHLIGHT MOBILE ===== */
@media (max-width: 768px) {

  .highlight-section,
  .product-highlight-section,
  .featured-highlight {
    padding: 48px 22px !important;
  }

  .highlight-section .container,
  .product-highlight-section .container,
  .featured-highlight .container {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    align-items: stretch !important;
  }

  .highlight-copy,
  .highlight-content,
  .featured-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  .highlight-copy h2,
  .highlight-content h2,
  .featured-copy h2 {
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin: 0 0 14px 0 !important;
    word-break: break-word !important;
  }

  .highlight-copy p,
  .highlight-content p,
  .featured-copy p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
  }

  .highlight-copy .eyebrow,
  .highlight-content .eyebrow,
  .featured-copy .eyebrow {
    font-size: 12px !important;
    letter-spacing: 2px !important;
    margin-bottom: 10px !important;
  }

  .highlight-price-box,
  .price-box,
  .highlight-note-box {
    width: 100% !important;
    padding: 18px 18px !important;
    border-radius: 18px !important;
    margin: 0 0 16px 0 !important;
    box-sizing: border-box !important;
  }

  .highlight-price-box strong,
  .price-box strong,
  .highlight-note-box strong {
    font-size: 16px !important;
  }

  .highlight-price-box p,
  .price-box p,
  .highlight-note-box p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin: 10px 0 0 0 !important;
  }

  .highlight-copy .btn,
  .highlight-content .btn,
  .featured-copy .btn {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 16px !important;
    padding: 14px 26px !important;
    border-radius: 999px !important;
    width: auto !important;
    min-width: 160px !important;
  }

  .highlight-image,
  .highlight-media,
  .featured-media {
    width: 100% !important;
    max-width: 100% !important;
    order: -1 !important;
  }

  .highlight-image img,
  .highlight-media img,
  .featured-media img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 20px !important;
    object-fit: cover !important;
  }
}/* ===== HOME PRODUCT HIGHLIGHT MOBILE TUNING PANEL ===== */

@media (max-width: 768px) {
  :root {
    /* 整个 Product Highlight section */
    --hl-section-padding-top: 52px;
    --hl-section-padding-side: 20px;
    --hl-section-padding-bottom: 52px;

    /* 整组内容移动 */
    --hl-content-x: 0px;
    --hl-content-y: -35px;

    /* 小标题 PRODUCT HIGHLIGHT */
    --hl-eyebrow-color: #f26a2e;
    --hl-eyebrow-size: 12px;
    --hl-eyebrow-x: 0px;
    --hl-eyebrow-y: 0px;

    /* 大标题 */
    --hl-title-color: #174d32;
    --hl-title-size: 27px;
    --hl-title-x: 0px;
    --hl-title-y: 0px;

    /* 描述文字 */
    --hl-text-color: #5b6858;
    --hl-text-size: 15px;
    --hl-text-x: 0px;
    --hl-text-y: -10px;

    /* 价钱框 */
    --hl-notice-bg: rgba(255, 255, 255, 0.82);
    --hl-notice-border: rgba(23, 77, 50, 0.12);
    --hl-notice-radius: 18px;
    --hl-notice-padding: 10px;
    --hl-notice-x: 0px;
    --hl-notice-y: 245px;

    /* 价钱文字 */
    --hl-price-color: #174d32;
    --hl-price-size: 16px;

    /* 价钱框里面说明 */
    --hl-notice-text-color: #5b6858;
    --hl-notice-text-size: 14px;

    /* View Details 按钮 */
    --hl-button-bg: #174d32;
    --hl-button-color: #ffffff;
    --hl-button-size: 15px;
    --hl-button-padding-y: 12px;
    --hl-button-padding-x: 24px;
    --hl-button-min-width: 150px;
    --hl-button-x: -50px;
    --hl-button-y: 235px;

    /* 图片框 */
    --hl-image-height: 260px;
    --hl-image-radius: 22px;
    --hl-image-padding: 5px;
    --hl-image-x: 0px;
    --hl-image-y: -240px;
  }

  #tofu-litter {
    padding:
      var(--hl-section-padding-top)
      var(--hl-section-padding-side)
      var(--hl-section-padding-bottom) !important;
  }

  #tofu-litter .home-highlight-product {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 !important;
    transform: translate(var(--hl-content-x), var(--hl-content-y)) !important;
  }

  #tofu-litter .home-highlight-product > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
  }

  #tofu-litter .eyebrow {
    color: var(--hl-eyebrow-color) !important;
    font-size: var(--hl-eyebrow-size) !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 12px !important;
    transform: translate(var(--hl-eyebrow-x), var(--hl-eyebrow-y)) !important;
  }

  #tofu-litter h2 {
    color: var(--hl-title-color) !important;
    font-size: var(--hl-title-size) !important;
    line-height: 1.12 !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    transform: translate(var(--hl-title-x), var(--hl-title-y)) !important;
  }

  #tofu-litter p {
    color: var(--hl-text-color) !important;
    font-size: var(--hl-text-size) !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
    margin-bottom: 18px !important;
    transform: translate(var(--hl-text-x), var(--hl-text-y)) !important;
  }

  #tofu-litter .notice-box {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: var(--hl-notice-padding) !important;
    border-radius: var(--hl-notice-radius) !important;
    margin: 0 0 18px !important;
    background: var(--hl-notice-bg) !important;
    border: 1px solid var(--hl-notice-border) !important;
    transform: translate(var(--hl-notice-x), var(--hl-notice-y)) !important;
  }

  #tofu-litter .notice-box strong {
    display: block !important;
    color: var(--hl-price-color) !important;
    font-size: var(--hl-price-size) !important;
    margin-bottom: 8px !important;
  }

  #tofu-litter .notice-box span {
    display: block !important;
    color: var(--hl-notice-text-color) !important;
    font-size: var(--hl-notice-text-size) !important;
    line-height: 1.6 !important;
  }

  #tofu-litter .hero-actions {
    margin-top: 8px !important;
    transform: translate(var(--hl-button-x), var(--hl-button-y)) !important;
  }

  #tofu-litter .hero-actions .btn {
    background: var(--hl-button-bg) !important;
    color: var(--hl-button-color) !important;
    font-size: var(--hl-button-size) !important;
    padding: var(--hl-button-padding-y) var(--hl-button-padding-x) !important;
    min-width: var(--hl-button-min-width) !important;
    border-radius: 999px !important;
  }

  #tofu-litter .home-highlight-image-box {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--hl-image-height) !important;
    padding: var(--hl-image-padding) !important;
    border-radius: var(--hl-image-radius) !important;
    order: 2 !important;
    animation: none !important;
    transform: translate(var(--hl-image-x), var(--hl-image-y)) !important;
  }

  #tofu-litter .home-highlight-image-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}/* ===== MOBILE HOW TO ORDER SIMPLE CONTROL ===== */
@media (max-width: 768px) {
  #order {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    margin-top: 0 !important;
  }

  #order .eyebrow {
    color: #f26a2e !important;
    font-size: 12px !important;
  }

  #order h2 {
    color: #174d32 !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  #order p {
    color: #5b6858 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  #order .info-card,
  #order .step-card,
  #order article {
    padding: 10px !important;
    border-radius: 20px !important;
  }
}/* ===== MOBILE HOW TO ORDER SIMPLE FIX ===== */
@media (max-width: 768px) {

  /* 整个 How to Order 区域 */
  #order {
    padding-top: 20px !important;      /* 数字越小，整块越往上 */
    padding-bottom: 35px !important;
    margin-top: -80px !important;      /* 负数往上，正数往下 */
  }

  /* How to Order 里面的 container */
  #order .container {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* 标题 */
  #order h2 {
    font-size: 28px !important;
    line-height: 1.15 !important;
    color: #174d32 !important;
    margin-bottom: 14px !important;
  }

  /* 小标题 */
  #order .eyebrow {
    font-size: 12px !important;
    color: #f26a2e !important;
    margin-bottom: 8px !important;
  }

  /* 普通文字 */
  #order p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #5b6858 !important;
  }

  /* 格子排列 */
  #order .grid,
  #order .steps-grid,
  #order .order-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;              /* 格子之间距离 */
  }

  /* 格子大小 */
  #order article,
  #order .info-card,
  #order .step-card,
  #order .card {
    width: 100% !important;
    padding: 10px !important;          /* 格子里面空间，越小格子越小 */
    border-radius: 18px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 格子标题 */
  #order article h3,
  #order .info-card h3,
  #order .step-card h3,
  #order .card h3 {
    font-size: 18px !important;
    color: #f26a2e !important;
    margin-bottom: 1px !important;
  }

  /* 格子文字 */
  #order article p,
  #order .info-card p,
  #order .step-card p,
  #order .card p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #5b6858 !important;
  }
}/* ===== MOBILE HOW TO ORDER CARD HEIGHT CONTROL ===== */
@media (max-width: 768px) {
  #order article,
  #order .info-card,
  #order .step-card,
  #order .card {
    min-height: 100px !important;  /* 格子高度 */
    padding: 14px !important;      /* 格子里面空间 */
    box-sizing: border-box !important;
  }

  #order article h3,
  #order .info-card h3,
  #order .step-card h3,
  #order .card h3 {
    font-size: 17px !important;
    margin-bottom: 6px !important;
  }

  #order article p,
  #order .info-card p,
  #order .step-card p,
  #order .card p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
  }
}/* ===== MOBILE HOW TO ORDER NUMBER CONTROL ===== */
@media (max-width: 768px) {
  #order .step-number,
  #order .step-badge,
  #order .step-icon,
  #order .order-number,
  #order article > span:first-child,
  #order .info-card > span:first-child,
  #order .step-card > span:first-child {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;

    font-size: 15px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    background: #174d32 !important;

    border-radius: 999px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-bottom: 0px !important;
  }
}/* ===== MOBILE MARKETPLACE SIMPLE CONTROL ===== */
@media (max-width: 768px) {

  /* 整个 Marketplace 区域位置 */
  .marketplace-section,
  .online-store-section {
    padding-top: 25px !important;      /* 上面空间 */
    padding-bottom: 35px !important;   /* 下面空间 */
    margin-top: -20px !important;      /* 负数往上，正数往下 */
  }

  /* Marketplace container */
  .marketplace-section .container,
  .online-store-section .container {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* Marketplace 整个卡片 */
  .marketplace-section article,
  .online-store-section article,
  .marketplace-card,
  .online-store-card {
    width: 100% !important;
    min-height: 220px !important;      /* 卡片高度 */
    padding: 22px !important;          /* 卡片里面空间 */
    border-radius: 24px !important;    /* 圆角 */
    box-sizing: border-box !important;

    background: rgba(255, 255, 255, 0.74) !important;
    border: 1px solid rgba(23, 77, 50, 0.12) !important;
    box-shadow: 0 18px 45px rgba(23, 77, 50, 0.08) !important;
  }

  /* 小字 MARKETPLACE */
  .marketplace-section .eyebrow,
  .online-store-section .eyebrow {
    color: #f26a2e !important;
    font-size: 14px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 5px !important;
  }

  /* 标题 */
  .marketplace-section h2,
  .online-store-section h2 {
    color: #174d32 !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
  }

  /* 说明文字 */
  .marketplace-section p,
  .online-store-section p {
    color: #5b6858 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }

  /* 按钮 */
  .marketplace-section .btn,
  .online-store-section .btn {
    font-size: 14px !important;
    padding: 11px 20px !important;
    border-radius: 999px !important;
    min-width: 145px !important;
  }
}/* ===== MOBILE MARKETPLACE TEXT MOVE ===== */
@media (max-width: 768px) {

  /* 小字 MARKETPLACE 移动 */
  .marketplace-section .eyebrow,
  .online-store-section .eyebrow {
    position: relative !important;
    left: 0px !important;   /* 正数往右，负数往左 */
    top: 20px !important;    /* 正数往下，负数往上 */
  }

  /* 标题移动 */
  .marketplace-section h2,
  .online-store-section h2 {
    position: relative !important;
    left: 0px !important;
    top: 35px !important;
  }

  /* 说明文字移动 */
  .marketplace-section p,
  .online-store-section p {
    position: relative !important;
    left: 0px !important;
    top: 40px !important;
  }

  /* 按钮移动 */
  .marketplace-section .btn,
  .online-store-section .btn {
    position: relative !important;
    left: 0px !important;
    top: -20px !important;
  }
}/* ===== MOBILE MARKETPLACE BUTTON MOVE FIX ===== */
@media (max-width: 768px) {
  .marketplace-section .hero-actions,
  .online-store-section .hero-actions,
  .marketplace-section .card-actions,
  .online-store-section .card-actions,
  .marketplace-section .actions,
  .online-store-section .actions {
    position: relative !important;
    left: 0px !important;   /* 正数往右，负数往左 */
    top: 0px !important;    /* 正数往下，负数往上 */
    margin-top: 14px !important;
  }

  .marketplace-section a,
  .online-store-section a {
    position: relative !important;
  }
}/* ===== MOBILE MARKETPLACE BUTTONS SIMPLE CONTROL ===== */
@media (max-width: 768px) {

  /* 整组按钮移动 */
  .marketplace-buttons {
    position: relative !important;
    left: -70px !important;   /* 正数往右，负数往左 */
    top: 30px !important;    /* 正数往下，负数往上 */

    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
    margin-top: 14px !important;
  }

  /* 每个按钮大小和颜色 */
  .marketplace-link-pill {
    min-width: 50px !important;
    height: 42px !important;
    padding: 0 18px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 12px !important;
    font-weight: 900 !important;

    border-radius: 999px !important;
    background: #174d32 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 12px 28px rgba(23, 77, 50, 0.16) !important;
  }

  /* Lazada Coming Soon 颜色 */
  .marketplace-link-pill.product-disabled-link {
    background: rgba(255, 255, 255, 0.85) !important;
    color: #f26a2e !important;
    border: 1px solid rgba(242, 106, 46, 0.18) !important;
  }
}@media (max-width: 768px) {
  .marketplace-link-pill.product-disabled-link {
    min-width: 50px !important;
    height: 42px !important;
    font-size: 12px !important;

    background: rgba(255, 255, 255, 0.85) !important;
    color: #f26a2e !important;
    border: 1px solid rgba(242, 106, 46, 0.18) !important;

    position: relative !important;
    left: 140px !important;  /* 正数往右，负数往左 */
    top: -50px !important;   /* 正数往下，负数往上 */
  }
}/* ===== FIX HOME MOBILE DROPDOWN MENU BOX ===== */
@media (max-width: 768px) {
  .site-header {
    z-index: 99999 !important;
    overflow: visible !important;
  }

  .site-header .nav-wrap {
    position: relative !important;
    overflow: visible !important;
  }

  /* menu 没打开时隐藏 */
  .site-header .nav-links {
    display: none !important;
  }

  /* menu 打开时出现白色盒子 */
  .site-header.nav-open nav.nav-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;

    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    padding: 14px !important;

    background: #fff8ee !important;
    border: 1px solid rgba(23, 77, 50, 0.12) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 45px rgba(23, 77, 50, 0.18) !important;

    z-index: 999999 !important;
  }

  .site-header.nav-open nav.nav-links a {
    display: block !important;
    width: 100% !important;

    padding: 12px 14px !important;
    margin: 0 !important;

    background: transparent !important;
    color: #174d32 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 14px !important;

    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  .site-header.nav-open nav.nav-links a:hover {
    background: rgba(216, 235, 200, 0.7) !important;
  }
}/* ===== PRODUCT PAGE MOBILE HERO ONLY ===== */
@media (max-width: 768px) {

  .product-mobile-hero {
    width: 100vw !important;
    max-width: 100vw !important;

    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding: 60px 20px 38px !important;
    min-height: 520px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;

    background:
      linear-gradient(
        180deg,
        rgba(255, 248, 238, 0.86) 0%,
        rgba(255, 248, 238, 0.58) 42%,
        rgba(255, 248, 238, 0.12) 100%
      ),
      url("assets/product-hero-pets.png") !important;

    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }

  .product-mobile-hero .page-hero-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .product-mobile-hero .page-hero-grid > div:first-child {
    width: 100% !important;
    max-width: 330px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .product-mobile-hero .eyebrow {
    color: #f26a2e !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 10px !important;
  }

  .product-mobile-hero h1 {
    color: #174d32 !important;
    font-size: 42px !important;
    line-height: 1 !important;
    margin: 0 0 14px !important;
  }

  .product-mobile-hero .product-hero-note {
    margin: 0 !important;
    padding: 0 !important;
  }

  .product-mobile-hero .product-hero-note p {
    color: #4f604d !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }

  .product-mobile-hero .page-card {
    display: none !important;
  }
}/* ===== PRODUCT MOBILE HERO IMAGE FIX ===== */
@media (max-width: 768px) {
  .product-mobile-hero {
    background:
      linear-gradient(
        180deg,
        rgba(255, 248, 238, 0.82) 0%,
        rgba(255, 248, 238, 0.45) 45%,
        rgba(255, 248, 238, 0.05) 100%
      ),
      url("assets/products-hero-mobile.png") !important;

    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }
}/* ===== PRODUCT MOBILE HERO BACKGROUND FORCE FIX ===== */
@media (max-width: 768px) {
  .product-mobile-hero {
    background-image:
      linear-gradient(
        180deg,
        rgba(255, 248, 238, 0.82) 0%,
        rgba(255, 248, 238, 0.45) 45%,
        rgba(255, 248, 238, 0.05) 100%
      ),
      url("assets/products-hero-mobile.png") !important;

    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }

  .product-mobile-hero::before,
  .product-mobile-hero::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }@media (max-width: 768px) {
  section.product-mobile-hero.page-hero.section-pad.reveal {
    background:
      linear-gradient(
        180deg,
        rgba(255, 248, 238, 0.82) 0%,
        rgba(255, 248, 238, 0.45) 45%,
        rgba(255, 248, 238, 0.05) 100%
      ),
      url("assets/products-hero-mobile.png") !important;

    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }
}
}/* ===== PRODUCT MOBILE HERO FINAL ===== */
/* ===== PRODUCT MOBILE HERO HEIGHT CUT ===== */
@media (max-width: 768px) {
  section.product-mobile-hero.page-hero.section-pad.reveal {
    min-height: 400px !important;   /* hero 高度，越小越短 */
    padding: 55px 22px 30px !important;
    background-position: center bottom !important;
    background-size: cover !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;

    background:
      linear-gradient(
        180deg,
        rgba(255, 248, 238, 0.82) 0%,
        rgba(255, 248, 238, 0.45) 45%,
        rgba(255, 248, 238, 0.05) 100%
      ),
      url("assets/products-hero-mobile.png") !important;

    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }

  section.product-mobile-hero.page-hero.section-pad.reveal::before,
  section.product-mobile-hero.page-hero.section-pad.reveal::after {
    display: none !important;
    content: none !important;
  }
}/* ===== PRODUCT MOBILE HERO TEXT CONTROL ===== */
@media (max-width: 768px) {

  /* 整组文字移动 */
  section.product-mobile-hero.page-hero.section-pad.reveal .page-hero-grid > div:first-child {
    position: relative !important;
    left: 0px !important;   /* 正数往右，负数往左 */
    top: 0px !important;    /* 正数往下，负数往上 */

    width: 70% !important;
    max-width: 280px !important;
  }

  /* 小字 PRODUCTS */
  section.product-mobile-hero.page-hero.section-pad.reveal .eyebrow {
    color: #f26a2e !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 10px !important;
  }

  /* Shop Products */
  section.product-mobile-hero.page-hero.section-pad.reveal h1 {
    color: #174d32 !important;
    font-size: 42px !important;
    line-height: 1 !important;
    margin-bottom: 14px !important;
  }

  /* 下面那两行说明 */
  section.product-mobile-hero.page-hero.section-pad.reveal .product-hero-note p {
    color: #4f604d !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }

  /* 右边 Product categories box 手机隐藏 */
  section.product-mobile-hero.page-hero.section-pad.reveal .page-card {
    display: none !important;
  }
}/* ===== PRODUCT MOBILE HERO TEXT CONTROL ===== */
@media (max-width: 768px) {

  /* 整组文字移动 */
  section.product-mobile-hero.page-hero.section-pad.reveal .page-hero-grid > div:first-child {
    position: relative !important;
    left: 0px !important;   /* 正数往右，负数往左 */
    top: 0px !important;    /* 正数往下，负数往上 */

    width: 70% !important;
    max-width: 280px !important;
  }

  /* 小字 PRODUCTS */
  section.product-mobile-hero.page-hero.section-pad.reveal .eyebrow {
    color: #f26a2e !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 10px !important;
  }

  /* Shop Products */
  section.product-mobile-hero.page-hero.section-pad.reveal h1 {
    color: #174d32 !important;
    font-size: 42px !important;
    line-height: 1 !important;
    margin-bottom: 14px !important;
  }

  /* 下面那两行说明 */
  section.product-mobile-hero.page-hero.section-pad.reveal .product-hero-note p {
    color: #4f604d !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }

  /* 右边 Product categories box 手机隐藏 */
  section.product-mobile-hero.page-hero.section-pad.reveal .page-card {
    display: none !important;
  }
}/* ===== PRODUCT MOBILE HERO TEXT SEPARATE CONTROL ===== */
@media (max-width: 768px) {

  /* 1. 小字 Products */
  section.product-mobile-hero.page-hero.section-pad.reveal .eyebrow {
    position: relative !important;
    left: 0px !important;   /* 正数往右，负数往左 */
    top: -140px !important;    /* 正数往下，负数往上 */

    color: #f26a2e !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 10px !important;
  }

  /* 2. 大标题 Shop Products */
  section.product-mobile-hero.page-hero.section-pad.reveal h1 {
    position: relative !important;
    left: 5px !important;
    top: -150px !important;

    color: #174d32 !important;
    font-size: 40px !important;
    line-height: 1 !important;
    margin-bottom: 10px !important;
  }

  /* 3. 下面两行说明文字 */
  section.product-mobile-hero.page-hero.section-pad.reveal .product-hero-note {
    position: relative !important;
    left: 150px !important;
    top: -150px !important;
  }

  section.product-mobile-hero.page-hero.section-pad.reveal .product-hero-note p {
    color: #4f604d !important;
    font-size: 10px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }

  /* 右边 Product categories box 手机隐藏 */
  section.product-mobile-hero.page-hero.section-pad.reveal .page-card {
    display: none !important;
  }
}/* ===== PRODUCT MOBILE CATEGORIES - DESKTOP STYLE ===== */
@media (max-width: 768px) {

  /* 整个 mobile browse 区域 */
  .mobile-category-browse,
  .mobile-browse,
  .category-mobile-section {
    padding: 42px 22px 28px !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* 把 MOBILE BROWSE 小字隐藏 */
  .mobile-category-browse .eyebrow,
  .mobile-browse .eyebrow,
  .category-mobile-section .eyebrow {
    display: none !important;
  }

  /* 标题改成 Categories 感觉 */
  .mobile-category-browse h2,
  .mobile-browse h2,
  .category-mobile-section h2 {
    color: #f26a2e !important;
    font-size: 30px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    margin: 0 0 18px !important;
  }

  /* 说明文字隐藏 */
  .mobile-category-browse p,
  .mobile-browse p,
  .category-mobile-section p {
    display: none !important;
  }

  /* Swipe left or right 隐藏 */
  .mobile-category-browse strong,
  .mobile-browse strong,
  .category-mobile-section strong {
    display: none !important;
  }

  /* carousel 变成普通按钮横排 */
  .mobile-category-browse .category-carousel,
  .mobile-browse .category-carousel,
  .category-mobile-section .category-carousel,
  .mobile-category-browse .shop-grid,
  .mobile-browse .shop-grid,
  .category-mobile-section .shop-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 每个 category card 变 pill button */
  .mobile-category-browse article,
  .mobile-browse article,
  .category-mobile-section article,
  .mobile-category-browse .shop-card,
  .mobile-browse .shop-card,
  .category-mobile-section .shop-card {
    width: auto !important;
    min-width: 138px !important;
    height: 44px !important;

    padding: 0 18px !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid rgba(23, 77, 50, 0.12) !important;
    box-shadow: 0 8px 22px rgba(23, 77, 50, 0.06) !important;
  }

  /* 第一个 Cat Litter active */
  .mobile-category-browse article:first-of-type,
  .mobile-browse article:first-of-type,
  .category-mobile-section article:first-of-type,
  .mobile-category-browse .shop-card:first-of-type,
  .mobile-browse .shop-card:first-of-type,
  .category-mobile-section .shop-card:first-of-type {
    background: #174d32 !important;
  }

  /* 隐藏 icon */
  .mobile-category-browse article span,
  .mobile-browse article span,
  .category-mobile-section article span,
  .mobile-category-browse .shop-card span,
  .mobile-browse .shop-card span,
  .category-mobile-section .shop-card span {
    display: none !important;
  }

  /* category 名字 */
  .mobile-category-browse h3,
  .mobile-browse h3,
  .category-mobile-section h3 {
    color: #174d32 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .mobile-category-browse article:first-of-type h3,
  .mobile-browse article:first-of-type h3,
  .category-mobile-section article:first-of-type h3,
  .mobile-category-browse .shop-card:first-of-type h3,
  .mobile-browse .shop-card:first-of-type h3,
  .category-mobile-section .shop-card:first-of-type h3 {
    color: #ffffff !important;
  }

  /* 隐藏 description 和 view link */
  .mobile-category-browse article p,
  .mobile-category-browse article a,
  .mobile-browse article p,
  .mobile-browse article a,
  .category-mobile-section article p,
  .category-mobile-section article a {
    display: none !important;
  }

  /* 隐藏底部橙粉 scrollbar */
  .mobile-category-browse::after,
  .mobile-browse::after,
  .category-mobile-section::after {
    display: none !important;
  }
}/* ===== HIDE EXTRA MOBILE BROWSE SECTION ===== */
@media (max-width: 768px) {
  .mobile-category-browse,
  .mobile-browse,
  .category-mobile-section,
  #mobile-browse,
  #mobile-categories {
    display: none !important;
  }
}/* ===== HIDE EXTRA PRODUCT MOBILE BROWSE SECTION ===== */
@media (max-width: 768px) {
  .product-mobile-browse {
    display: none !important;
  }
}/* ===== PRODUCT MOBILE REAL CATEGORIES BUTTONS ===== */
@media (max-width: 768px) {

  /* 整个 Categories 区域 */
  .category-topbar {
    padding: 32px 20px 20px !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }

  /* Categories 标题 */
  .category-topbar h3 {
    color: #f26a2e !important;
    font-size: 30px !important;
    line-height: 1.1 !important;
    margin: 0 0 16px !important;

    position: relative !important;
    left: 0px !important;  /* 正数往右，负数往左 */
    top: 0px !important;   /* 正数往下，负数往上 */
  }

  /* 按钮整组 */
  .category-button-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;

    position: relative !important;
    left: 0px !important;
    top: 0px !important;
  }

  /* 每个按钮 */
  .gp-category-btn {
    min-width: 145px !important;
    height: 42px !important;
    padding: 0 18px !important;

    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 900 !important;

    background: rgba(255, 255, 255, 0.86) !important;
    color: #174d32 !important;
    border: 1px solid rgba(23, 77, 50, 0.12) !important;
  }

  .gp-category-btn.active {
    background: #174d32 !important;
    color: #ffffff !important;
  }
}/* ===== PRODUCT MOBILE REAL CATEGORIES FINAL START ===== */
@media (max-width: 768px) {

  /* 整个 Categories 区域 */
  .category-topbar {
    padding: 34px 22px 18px !important;
    margin-top: -10px !important;
    margin-bottom: 18px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Categories 标题 */
  .category-topbar h3 {
    color: #f26a2e !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;

    margin: 0 0 16px !important;

    position: relative !important;
    left: 0px !important;
    top: 0px !important;
  }

  /* 按钮整组 */
  .category-button-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;

    position: relative !important;
    left: 0px !important;
    top: 0px !important;
  }

  /* 每个按钮 */
  .gp-category-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;

    padding: 0 12px !important;
    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.9) !important;
    color: #174d32 !important;
    border: 1px solid rgba(23, 77, 50, 0.12) !important;

    font-size: 14px !important;
    font-weight: 900 !important;
    text-align: center !important;

    box-shadow: 0 8px 22px rgba(23, 77, 50, 0.06) !important;
  }

  .gp-category-btn.active {
    background: #174d32 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(23, 77, 50, 0.18) !important;
  }
}
/* ===== PRODUCT MOBILE REAL CATEGORIES FINAL END ===== */

/* ===== PRODUCT MOBILE CATEGORIES POSITION FIX ===== */
@media (max-width: 768px) {

  html,
  body {
    overflow-x: hidden !important;
  }

  /* 整个 product 内容区域拉回手机宽度 */
  .products-area {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 32px 20px 50px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .products-with-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  /* Categories 整块 */
  .category-topbar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
  }

  .category-topbar h3 {
    color: #f26a2e !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    margin: 0 0 16px !important;

    position: relative !important;
    left: 0px !important;
    top: 0px !important;
  }

  /* 按钮整组 */
  .category-button-row {
    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
  }

  /* 每个按钮 */
  .gp-category-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;

    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    padding: 0 12px !important;
    border-radius: 999px !important;

    font-size: 14px !important;
    font-weight: 900 !important;

    background: rgba(255, 255, 255, 0.9) !important;
    color: #174d32 !important;
    border: 1px solid rgba(23, 77, 50, 0.12) !important;
    box-shadow: 0 8px 22px rgba(23, 77, 50, 0.06) !important;
  }

  .gp-category-btn.active {
    background: #174d32 !important;
    color: #ffffff !important;
  }
}/* =====================================================
   PRODUCT PAGE MOBILE: SLIDING CATEGORIES + PRODUCTS
   ===================================================== */
@media (max-width: 768px) {

  /* 整个 products 区域 */
  .products-area {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 28px 0 56px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .products-with-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* =========================
     Categories title
     ========================= */

  .category-topbar {
    padding: 0 20px 18px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .category-topbar h3 {
    color: #f26a2e !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    margin: 0 0 16px !important;

    position: relative !important;
    left: -590px !important;  /* 标题左右移动 */
    top: -10px !important;   /* 标题上下移动 */
  }

  /* =========================
     Sliding category buttons
     ========================= */

  .category-button-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;

    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 0 0 8px !important;
    margin: 0 !important;

    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;

    position: relative !important;
    left: 0px !important;  /* 按钮整组左右移动 */
    top: 0px !important;   /* 按钮整组上下移动 */
  }

  .category-button-row::-webkit-scrollbar {
    height: 4px !important;
  }

  .category-button-row::-webkit-scrollbar-track {
    background: rgba(23, 77, 50, 0.08) !important;
    border-radius: 999px !important;
  }

  .category-button-row::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #ff7a2f, #ff5fa2) !important;
    border-radius: 999px !important;
  }

  .gp-category-btn {
    flex: 0 0 auto !important;
    min-width: 135px !important;
    height: 42px !important;

    padding: 0 18px !important;
    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.9) !important;
    color: #174d32 !important;
    border: 1px solid rgba(23, 77, 50, 0.12) !important;

    font-size: 14px !important;
    font-weight: 900 !important;
    text-align: center !important;

    box-shadow: 0 8px 22px rgba(23, 77, 50, 0.06) !important;
    scroll-snap-align: start !important;

    position: static !important;
    transform: none !important;
  }

  .gp-category-btn.active,
  .gp-category-btn:hover {
    background: #174d32 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(23, 77, 50, 0.18) !important;
  }

  /* =========================
     Product cards sliding
     ========================= */

  .products-main {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .gp-product-section {
    display: none !important;
  }

  .gp-product-section.active {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 0 20px 18px !important;
    margin: 0 !important;

    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .gp-product-section.active::-webkit-scrollbar {
    height: 5px !important;
  }

  .gp-product-section.active::-webkit-scrollbar-track {
    background: rgba(23, 77, 50, 0.08) !important;
    border-radius: 999px !important;
  }

  .gp-product-section.active::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #ff7a2f, #ff5fa2) !important;
    border-radius: 999px !important;
  }

  /* 每张 product card */
  .gp-product-section.active .shop-card {
    flex: 0 0 86% !important;
    width: 86% !important;
    max-width: 100% !important;

    margin: 0 !important;
    border-radius: 26px !important;
    overflow: hidden !important;

    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(23, 77, 50, 0.12) !important;
    box-shadow: 0 18px 44px rgba(23, 77, 50, 0.10) !important;

    scroll-snap-align: center !important;
  }

  /* card 内容变上下排 */
  .products-with-sidebar .wood-card-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;

    padding: 1px !important;
    align-items: stretch !important;
  }

  /* 图片框 */
  .products-with-sidebar .product-image,
  .products-with-sidebar .real-card-image {
    width: 100% !important;
    height: 500px !important;

    padding: 12px !important;
    border-radius: 20px !important;
    overflow: hidden !important;

    background:
      radial-gradient(circle at 28% 18%, rgba(124, 169, 130, 0.18), transparent 36%),
      linear-gradient(135deg, #fffaf3, #eaf4dc) !important;
  }

  .products-with-sidebar .card-product-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* 文字 */
  .products-with-sidebar .shop-card-body h3 {
    color: #174d32 !important;
    font-size: 21px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    margin: 8px 0 10px !important;
  }

  .products-with-sidebar .shop-card-body p {
    color: #5b6858 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 10px !important;
  }

  .products-with-sidebar .mini-list {
    margin: 10px 0 0 !important;
    padding: 0 !important;
  }

  .products-with-sidebar .mini-list li {
    color: #4f604d !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin: 5px 0 !important;
  }

  .products-with-sidebar .mini-tag {
    color: #174d32 !important;
    background: rgba(216, 235, 200, 0.88) !important;
    border: 1px solid rgba(23, 77, 50, 0.12) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
  }

  /* 按钮 */
  .products-with-sidebar .card-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    margin-top: 14px !important;
  }

  .products-with-sidebar .card-actions a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .products-with-sidebar .btn-small,
  .products-with-sidebar .card-actions .btn {
    font-size: 13px !important;
    padding: 11px 14px !important;
    border-radius: 999px !important;
  }

  .products-with-sidebar .card-actions .btn-primary {
    background: #174d32 !important;
    color: #ffffff !important;
  }

  .products-with-sidebar .card-actions .btn-secondary {
    background: #2f7a4f !important;
    color: #ffffff !important;
  }

  /* Coming soon sections */
  .gp-product-section.active .coming-soon-box {
    flex: 0 0 86% !important;
    width: 86% !important;
    min-height: 220px !important;

    padding: 24px !important;
    border-radius: 26px !important;

    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(23, 77, 50, 0.12) !important;
    box-shadow: 0 18px 44px rgba(23, 77, 50, 0.10) !important;

    scroll-snap-align: center !important;
  }
}/* ===== PRODUCT MOBILE CATEGORY SLIDE BUTTON SIZE ===== */
@media (max-width: 768px) {

  .category-button-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 0 20px 10px 20px !important;
    margin: 0 -20px !important;

    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .gp-category-btn {
    flex: 0 0 135px !important;  /* 按钮宽度 */
    width: 135px !important;
    min-width: 135px !important;

    height: 42px !important;     /* 按钮高度 */
    padding: 0 14px !important;

    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 900 !important;

    scroll-snap-align: start !important;
  }
}/* ===== FIX MOBILE CATEGORY SLIDER CUTTING ===== */
@media (max-width: 768px) {

  .products-area,
  .products-with-sidebar,
  .category-topbar {
    overflow: visible !important;
  }

  .category-topbar {
    padding: 28px 20px 18px !important;
  }

  .category-button-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;

    padding: 0 32px 12px 0 !important;
    margin: 0 !important;

    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .gp-category-btn {
    flex: 0 0 128px !important;
    width: 128px !important;
    min-width: 128px !important;
    height: 42px !important;
    font-size: 14px !important;
  }
}/* ===== PRODUCT MOBILE CATEGORY SLIDER FULL WIDTH FIX ===== */
@media (max-width: 768px) {

  .category-topbar {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding: 26px 0 16px !important;
    overflow: visible !important;
  }

  .category-topbar h3 {
    text-align: center !important;
    margin-bottom: 14px !important;
  }

  .category-button-row {
    width: 100vw !important;
    max-width: 100vw !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 0 20px 12px !important;
    margin: 0 !important;

    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .gp-category-btn {
    flex: 0 0 128px !important;
    width: 128px !important;
    min-width: 128px !important;

    height: 42px !important;
    font-size: 14px !important;

    scroll-snap-align: start !important;
  }
}/* ===== FIX MOBILE CATEGORY BUTTON TOP CUT ===== */
@media (max-width: 768px) {

  .category-topbar {
    overflow: visible !important;
    padding-top: 34px !important;
    padding-bottom: 16px !important;
  }

  .category-button-row {
    overflow-x: auto !important;
    overflow-y: visible !important;

    padding-top: 8px !important;      /* 给按钮上面空间，不会被切 */
    padding-bottom: 12px !important;
    margin-top: -4px !important;

    align-items: center !important;
  }

  .gp-category-btn {
    height: 42px !important;
    min-height: 42px !important;

    border-radius: 999px !important;
    line-height: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;
  }

  .gp-category-btn.active {
    border-radius: 999px !important;
  }
}/* ===== PRODUCT MOBILE IMAGE BOX HEIGHT FIX ===== */
@media (max-width: 768px) {
  .products-with-sidebar .product-image,
  .products-with-sidebar .real-card-image {
    height: 170px !important;      /* 这里控制图片框高度 */
    min-height: 170px !important;
    max-height: 170px !important;

    padding: 10px !important;
    border-radius: 18px !important;
  }

  .products-with-sidebar .card-product-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}/* ===== PRODUCT MOBILE IMAGE AREA FORCE HEIGHT ===== */
@media (max-width: 768px) {

  /* 产品卡里面左边图片整个区域 */
  .gp-product-section.active .shop-card .wood-card-inner > div:first-child,
  .gp-product-section.active .shop-card .product-image,
  .gp-product-section.active .shop-card .real-card-image,
  .gp-product-section.active .shop-card .shop-card-media,
  .gp-product-section.active .shop-card figure {
    height: 330px !important;
    min-height: 0px !important;
    max-height: 500px !important;

    padding: 10px !important;
    margin: 0 !important;

    border-radius: 50px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* 图片本身 */
  .gp-product-section.active .shop-card img,
  .gp-product-section.active .shop-card .card-product-photo {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }
}/* ===== PRODUCT PAGE MOBILE SOFT GRADIENT BACKGROUND ===== */
@media (max-width: 768px) {

  /* product page main background */
  body {
    background:
      radial-gradient(circle at 12% 18%, rgba(124, 169, 130, 0.18), transparent 34%),
      radial-gradient(circle at 88% 12%, rgba(255, 122, 40, 0.08), transparent 28%),
      radial-gradient(circle at 92% 78%, rgba(255, 106, 162, 0.07), transparent 30%),
      linear-gradient(135deg, #edf6df 0%, #fff8ee 58%, #ffece5 100%) !important;
  }

  /* product listing area */
  .products-area {
    background:
      radial-gradient(circle at 10% 0%, rgba(124, 169, 130, 0.16), transparent 34%),
      radial-gradient(circle at 95% 25%, rgba(255, 122, 40, 0.07), transparent 28%),
      radial-gradient(circle at 90% 88%, rgba(255, 106, 162, 0.06), transparent 30%),
      linear-gradient(135deg, #edf6df 0%, #fff9ef 55%, #fff0e8 100%) !important;
  }

  .products-with-sidebar,
  .products-main,
  .category-topbar {
    background: transparent !important;
  }
}/* ===== MOBILE NAV DROPDOWN GLOBAL FIX ===== */
@media (max-width: 768px) {
  .site-header {
    z-index: 99999 !important;
    overflow: visible !important;
  }

  .site-header .nav-wrap {
    position: relative !important;
    overflow: visible !important;
  }

  .site-header .nav-links {
    display: none !important;
  }

  .site-header.nav-open nav.nav-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;

    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    padding: 14px !important;

    background: #fff8ee !important;
    border: 1px solid rgba(23, 77, 50, 0.12) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 45px rgba(23, 77, 50, 0.18) !important;

    z-index: 999999 !important;
  }

  .site-header.nav-open nav.nav-links a {
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;

    color: #174d32 !important;
    background: transparent !important;
    border-radius: 14px !important;

    font-size: 15px !important;
    font-weight: 900 !important;
    text-align: left !important;
  }
}/* ===== PRODUCT DETAIL MOBILE MAIN PHOTO FIX ===== */
@media (max-width: 768px) {
  .product-detail-page .product-gallery {
    width: calc(100% - 0px) !important;
    margin: 23px auto 18px !important;
  }

  .product-detail-page .main-product-photo,
  .product-detail-page .real-product-photo {
    height: 250px !important;        /* 大图框高度 */
    padding: 0 !important;           /* 里面空白 */
    border-radius: 24px !important;  /* 圆角 */
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.9) !important;
  }

  .product-detail-page .main-product-photo img,
  .product-detail-page .real-product-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;    /* cover = 填满框 */
    object-position: center !important;
    display: block !important;
  }
}/* ===== PRODUCT DETAIL MAIN IMAGE BOX REAL FIX ===== */
@media (max-width: 768px) {
  .product-detail-page .product-gallery .main-product-photo.real-product-photo {
    height: 400px !important;
    min-height: 0px !important;
    max-height: 1000px !important;

    aspect-ratio: auto !important;
    padding: 0 !important;
    margin: 20px !important;

    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .product-detail-page .product-gallery .main-product-photo.real-product-photo img {
    width: 100% !important;
    height: 100% !important;

    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}/* ===== PRODUCT DETAIL MAIN IMAGE BOX WIDTH + HEIGHT ===== */
@media (max-width: 768px) {
  .product-detail-page .product-gallery .main-product-photo.real-product-photo {
    width: 100% !important;        /* 大图框宽度 */
    max-width: 500% !important;
    height: 380px !important;     /* 大图框高度 */

    margin-left: auto !important;
    margin-right: auto !important;

    aspect-ratio: auto !important;
    padding: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .product-detail-page .product-gallery .main-product-photo.real-product-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}/* ===== FIX PACK SELECTOR DOUBLE HIGHLIGHT ON MOBILE ===== */
@media (max-width: 768px) {

  .product-detail-page .pack-option-btn {
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(23, 77, 50, 0.12) !important;
    color: #174d32 !important;
    box-shadow: none !important;
  }

  /* 取消手机 hover/focus 停留造成的假 highlight */
  .product-detail-page .pack-option-btn:hover,
  .product-detail-page .pack-option-btn:focus,
  .product-detail-page .pack-option-btn:focus-visible {
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(23, 77, 50, 0.12) !important;
    color: #174d32 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* 只有真正 active 的那个才亮 */
  .product-detail-page .pack-option-btn.active {
    background: #fff8ee !important;
    border: 2px solid #f26a2e !important;
    color: #174d32 !important;
    box-shadow: 0 10px 26px rgba(242, 106, 46, 0.16) !important;
  }

  /* 如果 indicator 也造成双 highlight，先隐藏 */
  .product-detail-page .pack-option-indicator {
    display: none !important;
  }
}/* ===== CENTER PRODUCT DETAIL ACTION BUTTON TEXT ===== */
.product-detail-page .product-actions .btn,
.product-detail-page .product-actions a.btn,
.product-detail-page .product-actions span.btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
  width: 100% !important;
}/* ===== CENTER COMPARISON CTA BUTTON TEXT ===== */
.product-detail-page a[href*="comparison"],
.product-detail-page .btn[href*="comparison"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
}
/* ===== COMPARISON MOBILE HERO ONLY ===== */
@media (max-width: 768px) {
  section.comparison-mobile-hero.page-hero.section-pad.reveal {
    min-height: 400px !important;
    padding: 70px 22px 38px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;

    background:
      linear-gradient(
        180deg,
        rgba(255, 248, 238, 0.84) 0%,
        rgba(255, 248, 238, 0.48) 45%,
        rgba(255, 248, 238, 0.08) 100%
      ),
      url("assets/comparison-hero-mobile.png") !important;

    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }

  section.comparison-mobile-hero.page-hero.section-pad.reveal .eyebrow {
    color: #f26a2e !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;

    position: relative !important;
    left: 0px !important;
    top: 30px !important;
  }

  section.comparison-mobile-hero.page-hero.section-pad.reveal h1 {
    color: #174d32 !important;
    font-size: 42px !important;
    line-height: 1 !important;
    max-width: 500px !important;

    position: relative !important;
    left: 5px !important;
    top: 20px !important;
  }

  section.comparison-mobile-hero.page-hero.section-pad.reveal p {
    color: #4f604d !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    max-width: 310px !important;

    position: relative !important;
    left: 10px !important;
    top: 10px !important;
  }
}/* ===== HOME PRODUCT HIGHLIGHT VIEW DETAILS BUTTON MOVE ===== */
@media (max-width: 768px) {
  #tofu-litter .hero-actions {
    position: relative !important;
    left: -10px !important;  /* 正数往右，负数往左 */
    top: 0px !important;
  }
}