/* ═══════════════════════════════════════════════════════════
   The Dog Line — Mobile Menu Stylesheet
   ════════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Palette — The Dog Line brand */
  --clr-bg: #ffffff;
  --clr-surface: #f4f6fb;
  --clr-primary: #233872;
  --clr-primary-6: rgba(35, 56, 114, 0.07);
  --clr-secondary: #3d5490;
  --clr-accent: #ffd357;
  --clr-accent-dk: #e6bc2e;
  --clr-text: #1a1a2e;
  --clr-muted: #6b7280;
  --clr-divider: #e5e9f2;
  --clr-danger: #c0603a;
  --clr-sage: #52896c;

  /* Typography */
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --font-heading: "Plus Jakarta Sans", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 20px;
  --sp-xl: 24px;

  /* Layout */
  --header-h: 64px;
  --drawer-w: min(100vw, 420px);
  --row-h: 56px;
  --row-h-sm: 48px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Transitions */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 350ms;
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset & Base ───────────────────────────────────────────── */
/* Alpine.js: hide elements until hydrated */
[x-cloak] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

ul {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font);
}

/* Utility: screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Site Header (Premium Glassmorphism) ────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px -2px rgba(35, 56, 114, 0.05);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.site-header__top {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 52px 1fr 96px;
  align-items: center;
  padding: 0 var(--sp-lg);
  gap: 0;
}

.site-header__bottom {
  padding: 0 var(--sp-lg) 12px var(--sp-lg);
  max-height: 100px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1);
  transform-origin: top;
  opacity: 1;
}

/* ── Scroll Animations (Header Shrink & Button Swap) ── */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 30px -4px rgba(35, 56, 114, 0.1);
}

.site-header.is-scrolled .site-header__top {
  height: calc(var(--header-h) - 8px);
}

.site-header.is-scrolled .site-header__bottom {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

/* The compact icon that appears in the top row */
.header-call-icon {
  width: 0;
  padding: 0;
  opacity: 0;
  margin-right: -8px; /* Hide completely */
  transform: scale(0.5);
  pointer-events: none;
  background: #1e3a8a;
  color: #fff;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1);
}

.site-header.is-scrolled .header-call-icon {
  width: 42px; /* matches .icon-btn */
  padding: auto;
  opacity: 1;
  margin-right: 0;
  transform: scale(1);
  pointer-events: auto;
}
.site-header.is-scrolled .header-call-icon:hover {
  background: #233872;
  color: #fff;
}

.btn-call-expert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #1e3a8a; /* Almost black */
  color: #ffffff;
  padding: 12px;
  border-radius: 16px; /* rounded-2xl */
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition:
    transform 0.2s,
    background 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-call-expert:active {
  transform: scale(0.98);
  color: #1e3a8a;
  border: 1px solid #1e3a8a;
  background-color: transparent;
}

.site-header a,
.site-header button {
  -webkit-tap-highlight-color: transparent;
}

/* ── Logo: centered in header via grid ── */
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: center; /* centers in grid col 2 */
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.logo:active {
  transform: scale(0.96);
}

.logo-img {
  height: 36px; /* Optimized height for mobile header to prevent edge clipping */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  flex-shrink: 0; /* Prevent the image from being squished */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06)); /* Premium subtle pop */
}

.logo-fallback {
  display: flex;
  align-items: center;
  gap: 6px;
}

.logo-paw {
  font-size: 22px;
  line-height: 1;
}

.logo-text {
  font-size: 19px; /* Scaled slightly for better mobile fit alongside image */
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #111827, #4b5563);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  /* line-height: 1.1; */
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Degrade gracefully on tiny screens */
}

/* Subtle orange dot after the logo text for a modern tech feel */
.logo-text::after {
  content: ".";
  color: #e05d36;
  -webkit-text-fill-color: #e05d36;
}

/* ── Hamburger (Modernized Touch Area) ── */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  background: rgba(35, 56, 114, 0.04); /* Soft container */
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hamburger:hover,
.hamburger:focus-visible {
  background: rgba(35, 56, 114, 0.08);
  transform: translateY(-1px);
}

.hamburger:active {
  transform: scale(0.92);
}

.bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--clr-primary);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 200ms ease,
    background 300ms ease;
}

/* Morph to ✕ */
.hamburger.is-open .bar-top {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-open .bar-mid {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.is-open .bar-bot {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Header Actions (Premium Buttons) ── */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px; /* Slightly more breathing room */
  flex-shrink: 0;
}

.icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%; /* Perfect circle */
  background: transparent;
  color: #4b5563;
  /* box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.03),
    inset 0 2px 0 rgba(255, 255, 255, 0.7); */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.icon-btn:hover,
.icon-btn:focus-visible {
  background: #ffffff;
  color: var(--clr-primary);
  transform: translateY(-2px);
}

.icon-btn:active {
  background: #ffffff;
  color: var(--clr-primary);
  transform: translateY(-2px);
}

/* Dynamic Gradient Cart Badge */
.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1e3a8a;
  background: linear-gradient(
    135deg,
    #e05d36,
    #b91c1c
  ); /* Premium vibrant red */
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 10px; /* Pill shape */
  border: 2px solid #ffffff; /* Knockout outline */
  box-shadow: 0 2px 6px rgba(224, 93, 54, 0.3);
  letter-spacing: -0.02em;
}

/* ── Backdrop ─────────────────────────────────────────────── */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  pointer-events: none;
  transition:
    background var(--dur-base) ease,
    backdrop-filter var(--dur-base) ease;
}

.backdrop.is-visible {
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(2px);
  pointer-events: all;
}

/* ── Drawer ───────────────────────────────────────────────── */
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 300;
  width: var(--drawer-w);
  background: var(--clr-bg);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
  overflow: hidden; /* Prevent shell from scrolling */
  min-height: 0; /* CRITICAL: Fix for flexbox scrolling on small-screen Safari */
}

.drawer.is-open {
  transform: translateX(0);
  box-shadow: 6px 0 40px rgba(0, 0, 0, 0.14);
}

/* ── Drawer Header ── */
.drawer-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--sp-lg);
  /* border-bottom: 1px solid var(--clr-divider); */
  background: var(--clr-bg);
}

.close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--clr-secondary);
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-divider);
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition:
    background var(--dur-fast),
    color var(--dur-fast),
    transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow var(--dur-fast);
}

.close-btn:hover,
.close-btn:focus-visible {
  background: #fff;
  border-color: rgba(35, 56, 114, 0.2);
  color: var(--clr-text);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transform: rotate(90deg);
}

.close-btn:active {
  transform: scale(0.88) rotate(90deg);
  background: var(--clr-accent);
}

/* ── Search Bar ── */
.drawer-search {
  flex-shrink: 0;
  padding: var(--sp-sm) var(--sp-lg);
  border-bottom: 1px solid var(--clr-divider);
  position: relative; /* Fixes absolute positioning context for recent searches */
  z-index: 100; /* Extremely high z-index to break out of any sibling scroll contexts */
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: var(--clr-muted);
  pointer-events: none;
  flex-shrink: 0;
}

.search-input {
  width: 100%;
  height: 44px;
  padding: 0 42px; /* Pad right for clear button */
  background: var(--clr-surface);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 15px;
  color: var(--clr-text);
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
/* Hide the native browser "X" clear button on iOS/Safari/Chrome */
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-results-button,
.search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.search-input::placeholder {
  color: var(--clr-muted);
}

.search-input:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(35, 56, 114, 0.12);
}

.search-clear {
  position: absolute;
  right: 12px;
  color: var(--clr-muted);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(35, 56, 114, 0.05);
  transition: all 0.2s;
}
.search-clear:hover {
  background: rgba(35, 56, 114, 0.1);
  color: var(--clr-text);
  transform: scale(1.1);
}

/* ── Recent Searches (Flush Chips) ── */
.recent-chips {
  padding-bottom: 0; /* Tighten gap when Quick Chips are also showing */
}
/* Alpine.js custom slide transitions */
.slide-down-enter {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.slide-down-enter-start {
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.slide-down-enter-end {
  opacity: 1;
  transform: translateY(0);
  max-height: 100px;
}
.slide-down-leave {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-down-leave-start {
  opacity: 1;
  transform: translateY(0);
  max-height: 100px;
}
.slide-down-leave-end {
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.recent-chips__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-muted);
  display: flex;
  align-items: center;
  scroll-margin-left: 20px;
}
.quick-chip--recent {
  background: var(--clr-surface);
  border: 1px solid var(--clr-divider);
  color: var(--clr-text);
}
.quick-chip--recent:hover {
  background: #fff;
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}
.quick-chip--recent svg {
  color: var(--clr-muted);
  transition: color 0.2s;
}
.quick-chip--recent:hover svg {
  color: var(--clr-primary);
}
.quick-chip--clear {
  background: transparent;
  color: var(--clr-muted);
  text-decoration: underline;
  padding: 8px 12px;
}
.quick-chip--clear:hover {
  color: var(--clr-primary);
}

/* ── Search Empty State ── */
.search-empty {
  padding: 40px var(--sp-lg);
  text-align: center;
  animation: fadeIn 0.3s ease;
}
.search-empty__icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.8;
  animation: floatIcon 3s ease-in-out infinite;
}
@keyframes floatIcon {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.search-empty__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: var(--clr-text);
  margin-bottom: 8px;
}
.search-empty__text {
  font-size: 14px;
  color: var(--clr-muted);
  line-height: 1.5;
  margin-bottom: 24px;
}
.search-empty__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
  text-decoration: none;
}
.btn--primary {
  background: var(--clr-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(35, 56, 114, 0.2);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(35, 56, 114, 0.3);
}
.btn--primary:active {
  transform: translateY(0) scale(0.98);
}
.btn--outline {
  background: transparent;
  color: var(--clr-text);
  border: 1px solid var(--clr-divider);
}
.btn--outline:hover {
  background: var(--clr-surface);
}

/* ── Scrollable Content ── */
.drawer > .nav-list,
.drawer > .nav-divider,
.drawer > .nav-list.nav-list--secondary {
  flex-shrink: 0;
}

/* (overflow-y already set on main .drawer rule above) */
.drawer {
  scroll-behavior: smooth;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  scrollbar-width: thin;
  scrollbar-color: rgba(35, 56, 114, 0.25);
}

/* Custom scrollbar */
.drawer::-webkit-scrollbar {
  width: 6px;
}
.drawer::-webkit-scrollbar-track {
  background: transparent;
}
.drawer::-webkit-scrollbar-thumb {
  background: #1e3a8a;
  border-radius: var(--radius-full);
}

/* ── Nav List ── */
.nav-list {
  padding: var(--sp-sm) 0;
}
.nav-list > li {
  transition:
    opacity 300ms ease,
    filter 300ms ease;
}

/* Dim inactive rows when any submenu is expanded */
/* Gives immediate visual focus to the opened category */
.nav-list:has(.is-expanded) > li:not(:has(.is-expanded)) {
  opacity: 0.35;
  filter: grayscale(40%);
  /* Don't disable pointer events so user can tap another row to switch */
}

/* ── Staggered entry animation ─────────────────────────────── */
.drawer.is-open .nav-list > li {
  animation: navSlideIn 320ms var(--ease-out) both;
}
.drawer.is-open .nav-list > li:nth-child(1) {
  animation-delay: 60ms;
}
.drawer.is-open .nav-list > li:nth-child(2) {
  animation-delay: 95ms;
}
.drawer.is-open .nav-list > li:nth-child(3) {
  animation-delay: 130ms;
}
.drawer.is-open .nav-list > li:nth-child(4) {
  animation-delay: 165ms;
}
.drawer.is-open .nav-list > li:nth-child(5) {
  animation-delay: 195ms;
}
.drawer.is-open .nav-list > li:nth-child(6) {
  animation-delay: 225ms;
}

@keyframes navSlideIn {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Ticker ──────────────────────────────────────────────────── */
.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(135deg, #1a2e60, #233872);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-lg);
  padding: 7px var(--sp-lg);
  animation: tickerScroll 28s linear infinite;
}

.ticker-wrap:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes tickerScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.ticker-item {
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

.ticker-sep {
  color: rgba(255, 211, 87, 0.6);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Quick Chips — horizontal scroll strip ── */
.quick-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 10px 32px 6px 20px; /* Safe padding for Webkit */
  flex-shrink: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.quick-chips::-webkit-scrollbar {
  display: none;
}

.quick-chips > * {
  scroll-margin-left: 20px;
}

/* Right-fade indicates more chips — scroll discovery affordance */
.quick-chips {
  mask-image: linear-gradient(to right, black 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 72%, transparent 100%);
}

.quick-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  text-decoration: none;
  border: 1.5px solid transparent;
  flex-shrink: 0;
  scroll-snap-align: start;
  transition:
    background var(--dur-fast),
    transform var(--dur-fast),
    box-shadow var(--dur-fast);
}
.quick-chip:hover {
  transform: translateY(-2px);
}
.quick-chip:active {
  transform: scale(0.95);
}

.quick-chip--fire {
  background: rgba(255, 87, 34, 0.1);
  color: #c94a12;
  border-color: rgba(255, 87, 34, 0.22);
}
.quick-chip--fire:hover {
  background: rgba(255, 87, 34, 0.18);
  box-shadow: 0 4px 14px rgba(255, 87, 34, 0.22);
}

.quick-chip--star {
  background: rgba(255, 193, 7, 0.12);
  color: #9a6e00;
  border-color: rgba(255, 193, 7, 0.28);
}
.quick-chip--star:hover {
  background: rgba(255, 193, 7, 0.22);
  box-shadow: 0 4px 14px rgba(255, 193, 7, 0.22);
}

.quick-chip--new {
  background: rgba(76, 175, 80, 0.1);
  color: #2e6e32;
  border-color: rgba(76, 175, 80, 0.24);
}
.quick-chip--new:hover {
  background: rgba(76, 175, 80, 0.18);
  box-shadow: 0 4px 14px rgba(76, 175, 80, 0.2);
}

.quick-chip--brand {
  background: rgba(35, 56, 114, 0.08);
  color: var(--clr-primary);
  border-color: rgba(35, 56, 114, 0.18);
}
.quick-chip--brand:hover {
  background: rgba(35, 56, 114, 0.16);
  box-shadow: 0 4px 14px rgba(35, 56, 114, 0.16);
}

/* Small Dog chip — warm brown */
.quick-chip--small {
  background: rgba(121, 85, 72, 0.1);
  color: #5d4037;
  border-color: rgba(121, 85, 72, 0.22);
}
.quick-chip--small:hover {
  background: rgba(121, 85, 72, 0.18);
  box-shadow: 0 4px 14px rgba(121, 85, 72, 0.2);
}

/* Large Dog chip — slate blue */
.quick-chip--large {
  background: rgba(55, 71, 119, 0.1);
  color: #37474f;
  border-color: rgba(55, 71, 119, 0.2);
}
.quick-chip--large:hover {
  background: rgba(55, 71, 119, 0.18);
  box-shadow: 0 4px 14px rgba(55, 71, 119, 0.18);
}

/* ── Per-category nav accent colours ────────────────────────── */
/* Each category gets a coloured left border + icon background on expand */
.nav-cat--fence.is-expanded,
.nav-cat--fence:hover {
  border-left-color: #1565c0;
}
.nav-cat--fence.is-expanded .nav-icon {
  color: #1565c0;
}

.nav-cat--training.is-expanded,
.nav-cat--training:hover {
  border-left-color: #6a1b9a;
}
.nav-cat--training.is-expanded .nav-icon {
  color: #6a1b9a;
}

.nav-cat--bark.is-expanded,
.nav-cat--bark:hover {
  border-left-color: #bf360c;
}
.nav-cat--bark.is-expanded .nav-icon {
  color: #bf360c;
}

.nav-cat--danger.is-expanded,
.nav-cat--danger:hover {
  border-left-color: #f57f17;
}
.nav-cat--danger.is-expanded .nav-icon {
  color: #b71c1c;
}

.nav-cat--shop.is-expanded,
.nav-cat--shop:hover {
  border-left-color: #2e7d32;
}
.nav-cat--shop.is-expanded .nav-icon {
  color: #2e7d32;
}

.nav-cat--blog.is-expanded,
.nav-cat--blog:hover {
  border-left-color: #e65100;
}
.nav-cat--blog.is-expanded .nav-icon {
  color: #e65100;
}

/* ── Community Rating Strip ──────────────────────────────────── */
.rating-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--sp-md) var(--sp-lg) 0;
  padding: 10px 14px;
  background: linear-gradient(
    135deg,
    rgba(255, 211, 87, 0.12) 0%,
    rgba(35, 56, 114, 0.06) 100%
  );
  border: 1px solid rgba(255, 211, 87, 0.3);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.rating-stars {
  font-size: 15px;
  color: #f9a825;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(249, 168, 37, 0.4);
}

.rating-text {
  flex: 1;
  font-size: 12px;
  color: var(--clr-muted);
  line-height: 1.4;
}

.rating-text strong {
  color: var(--clr-primary);
  font-weight: var(--fw-bold);
}

.rating-paw {
  font-size: 20px;
  flex-shrink: 0;
  animation: pawWiggle 3s ease-in-out infinite;
}

@keyframes pawWiggle {
  0%,
  80%,
  100% {
    transform: rotate(0deg);
  }
  85% {
    transform: rotate(-15deg);
  }
  92% {
    transform: rotate(10deg);
  }
}

/* ── Nav Row (shared) ── */
.nav-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  width: 100%;
  min-height: var(--row-h);
  padding: 0 var(--sp-lg);
  font-size: 17px;
  font-weight: var(--fw-semibold);
  color: var(--clr-text);
  letter-spacing: 0.01em;
  border-left: 3px solid transparent;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    color var(--dur-fast),
    transform var(--dur-fast);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-row:hover,
.nav-row:focus-visible {
  background: var(--clr-surface);
}

.nav-row:active {
  background: var(--clr-primary-6);
  transform: scale(0.99);
}

.nav-row.is-expanded,
.nav-row[aria-current="page"] {
  background: var(--clr-primary-6);
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}

/* Link variant */
.nav-row--link {
  text-decoration: none;
}

/* Deals highlight row */
.nav-row--deals:hover,
.nav-row--deals:focus-visible {
  background: rgba(232, 166, 52, 0.06);
}

/* Small variant */
.nav-row--sm {
  min-height: var(--row-h-sm);
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--clr-secondary);
}

.nav-row--sm:hover {
  color: var(--clr-text);
}

/* ── Nav Icon ── */
.nav-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  width: 26px;
  text-align: center;
}

/* ── Nav Label ── */
.nav-label {
  flex: 1;
}

/* ── Nav Meta ── */
.nav-meta {
  font-size: 12px;
  font-weight: var(--fw-regular);
  color: var(--clr-muted);
  white-space: nowrap;
}

/* ── Chevron ── */
.nav-chevron {
  color: var(--clr-muted);
  flex-shrink: 0;
  transition:
    transform 200ms var(--ease-out),
    color 200ms;
}

.nav-chevron.rotated {
  transform: rotate(180deg);
}

.is-expanded .nav-chevron,
.nav-row--expandable.is-expanded .nav-chevron {
  color: var(--clr-primary);
}

.nav-chevron--sm {
  margin-left: auto;
}

/* ── Deal Badge ── */
.badge-deal {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--clr-accent);
  color: var(--clr-primary);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(255, 211, 87, 0.45);
  animation: dealPulse 2.6s ease infinite;
}

@keyframes dealPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 211, 87, 0.6);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(255, 211, 87, 0);
  }
}

/* ═══════════════════════════════════════════════════════════
   SUBMENU  — authoritative single source
   ═══════════════════════════════════════════════════════════ */

/* ── Accordion open/close transitions ── */
.accordion-enter {
  transition:
    opacity 280ms ease,
    transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-enter-start {
  opacity: 0;
  transform: translateY(-6px);
}
.accordion-enter-end {
  opacity: 1;
  transform: translateY(0);
}
.accordion-leave {
  transition:
    opacity 200ms ease,
    transform 200ms ease;
}
.accordion-leave-start {
  opacity: 1;
  transform: translateY(0);
}
.accordion-leave-end {
  opacity: 0;
  transform: translateY(-4px);
}

/* ── Submenu container (top-level Shop expand area) ── */
.submenu-container {
  background: #f7f8fc;
  padding: 6px 0 8px;
  border-top: 1px solid var(--clr-divider);
}

/* ── Nested accordion (Dog Fences, Training Collars, etc.) ── */
.nested-accordion {
  margin: 3px 12px;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(35, 56, 114, 0.09);
  box-shadow: 0 1px 6px rgba(35, 56, 114, 0.05);
}
.nested-accordion + .nested-accordion {
  margin-top: 6px;
}

.nested-accordion-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--clr-text);
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}
.nested-accordion-header:hover {
  background: rgba(35, 56, 114, 0.03);
}
.nested-accordion-header.is-expanded {
  background: rgba(35, 56, 114, 0.04);
  border-left-color: var(--clr-primary);
  color: var(--clr-primary);
}
.nested-accordion-header .nav-icon {
  font-size: 18px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(35, 56, 114, 0.06);
  flex-shrink: 0;
}
.nested-accordion-title {
  flex: 1;
}
.nested-accordion-header .nav-chevron {
  color: var(--clr-muted);
  flex-shrink: 0;
  transition:
    transform 220ms var(--ease-out),
    color 150ms;
}
.nested-accordion-header.is-expanded .nav-chevron {
  transform: rotate(90deg);
  color: var(--clr-primary);
}

/* ── Inner submenu panel ── */
.submenu {
  background: #ffffff;
  padding: 0 0 4px;
  border-top: 1px solid rgba(35, 56, 114, 0.07);
  overflow: visible;
}
.submenu::-webkit-scrollbar {
  display: none;
}

/* ── Group card ── */
.submenu-group {
  background: #ffffff;
  margin: 8px 10px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(35, 56, 114, 0.08);
  box-shadow: 0 1px 4px rgba(35, 56, 114, 0.05);
}
.submenu-group:first-child {
  margin-top: 10px;
}
.submenu-group:last-child {
  margin-bottom: 6px;
}

/* ── Group heading: clean Supertails-style label ── */
.submenu-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-muted);
  background: #f7f8fc;
  border-bottom: 1px solid rgba(35, 56, 114, 0.07);
  margin: 0;
}
/* Coloured left dot */
.submenu-heading::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-primary);
  flex-shrink: 0;
  opacity: 0.55;
}

/* Dot color per category on nested accordion headings */
.nested-accordion:nth-child(1) .nested-accordion-header.is-expanded .nav-icon {
  background: rgba(21, 101, 192, 0.12);
}
.nested-accordion:nth-child(1) .nested-accordion-header.is-expanded {
  border-left-color: #1565c0;
  color: #1565c0;
}
.nested-accordion:nth-child(1) .submenu-heading::before {
  background: #1565c0;
  opacity: 0.7;
}

.nested-accordion:nth-child(2) .nested-accordion-header.is-expanded .nav-icon {
  background: rgba(106, 27, 154, 0.12);
}
.nested-accordion:nth-child(2) .nested-accordion-header.is-expanded {
  border-left-color: #6a1b9a;
  color: #6a1b9a;
}
.nested-accordion:nth-child(2) .submenu-heading::before {
  background: #6a1b9a;
  opacity: 0.7;
}

.nested-accordion:nth-child(3) .nested-accordion-header.is-expanded .nav-icon {
  background: rgba(191, 54, 12, 0.12);
}
.nested-accordion:nth-child(3) .nested-accordion-header.is-expanded {
  border-left-color: #bf360c;
  color: #bf360c;
}
.nested-accordion:nth-child(3) .submenu-heading::before {
  background: #bf360c;
  opacity: 0.7;
}

.nested-accordion:nth-child(4) .nested-accordion-header.is-expanded .nav-icon {
  background: rgba(245, 127, 23, 0.14);
}
.nested-accordion:nth-child(4) .nested-accordion-header.is-expanded {
  border-left-color: #f57f17;
  color: #f57f17;
}
.nested-accordion:nth-child(4) .submenu-heading::before {
  background: #f57f17;
  opacity: 0.7;
}

.nested-accordion:nth-child(5) .nested-accordion-header.is-expanded .nav-icon {
  background: rgba(46, 125, 50, 0.12);
}
.nested-accordion:nth-child(5) .nested-accordion-header.is-expanded {
  border-left-color: #2e7d32;
  color: #2e7d32;
}
.nested-accordion:nth-child(5) .submenu-heading::before {
  background: #2e7d32;
  opacity: 0.7;
}

/* ── Submenu items ── */
.submenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 14px 0 16px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--clr-text);
  width: 100%;
  text-align: left;
  border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(35, 56, 114, 0.05);
  text-decoration: none;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    padding-left 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* Leading dot bullet */
.submenu-item::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid rgba(35, 56, 114, 0.2);
  flex-shrink: 0;
  transition:
    background 160ms,
    border-color 160ms,
    transform 160ms;
}

/* Trailing arrow */
.submenu-item::after {
  content: "›";
  font-size: 20px;
  line-height: 1;
  color: rgba(35, 56, 114, 0.2);
  margin-left: auto;
  flex-shrink: 0;
  transition:
    color 160ms,
    transform 160ms;
}

/* Remove bottom border from last item in each group */
.submenu-group ul li:last-child .submenu-item {
  border-bottom: none;
}

/* Hover / focus */
.submenu-item:hover,
.submenu-item:focus-visible {
  background: rgba(35, 56, 114, 0.04);
  border-left-color: var(--clr-primary);
  color: var(--clr-primary);
  padding-left: 20px;
}
.submenu-item:hover::before {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  transform: scale(1.3);
}
.submenu-item:hover::after {
  color: var(--clr-primary);
  transform: translateX(2px);
}

.submenu-item:active {
  transform: scale(0.985);
  opacity: 0.85;
}

/* Per-category hover accent via nth-child */
.nested-accordion:nth-child(1) .submenu-item:hover,
.nested-accordion:nth-child(1) .submenu-item:focus-visible {
  border-left-color: #1565c0;
  color: #1565c0;
  background: rgba(21, 101, 192, 0.05);
}
.nested-accordion:nth-child(1) .submenu-item:hover::before {
  background: #1565c0;
  border-color: #1565c0;
}
.nested-accordion:nth-child(1) .submenu-item:hover::after {
  color: #1565c0;
}

.nested-accordion:nth-child(2) .submenu-item:hover,
.nested-accordion:nth-child(2) .submenu-item:focus-visible {
  border-left-color: #6a1b9a;
  color: #6a1b9a;
  background: rgba(106, 27, 154, 0.05);
}
.nested-accordion:nth-child(2) .submenu-item:hover::before {
  background: #6a1b9a;
  border-color: #6a1b9a;
}
.nested-accordion:nth-child(2) .submenu-item:hover::after {
  color: #6a1b9a;
}

.nested-accordion:nth-child(3) .submenu-item:hover,
.nested-accordion:nth-child(3) .submenu-item:focus-visible {
  border-left-color: #bf360c;
  color: #bf360c;
  background: rgba(191, 54, 12, 0.05);
}
.nested-accordion:nth-child(3) .submenu-item:hover::before {
  background: #bf360c;
  border-color: #bf360c;
}
.nested-accordion:nth-child(3) .submenu-item:hover::after {
  color: #bf360c;
}

.nested-accordion:nth-child(4) .submenu-item:hover,
.nested-accordion:nth-child(4) .submenu-item:focus-visible {
  border-left-color: #f57f17;
  color: #f57f17;
  background: rgba(245, 127, 23, 0.07);
}
.nested-accordion:nth-child(4) .submenu-item:hover::before {
  background: #f57f17;
  border-color: #f57f17;
}
.nested-accordion:nth-child(4) .submenu-item:hover::after {
  color: #f57f17;
}

.nested-accordion:nth-child(5) .submenu-item:hover,
.nested-accordion:nth-child(5) .submenu-item:focus-visible {
  border-left-color: #2e7d32;
  color: #2e7d32;
  background: rgba(46, 125, 50, 0.05);
}
.nested-accordion:nth-child(5) .submenu-item:hover::before {
  background: #2e7d32;
  border-color: #2e7d32;
}
.nested-accordion:nth-child(5) .submenu-item:hover::after {
  color: #2e7d32;
}

/* ── Read-more link (inside a group) ── */
.submenu-item--readmore {
  justify-content: center;
  border-left: none;
  border-bottom: none;
  border-top: 1px dashed rgba(35, 56, 114, 0.12);
  background: rgba(35, 56, 114, 0.03);
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-primary);
  min-height: 42px;
  padding-left: 16px;
  letter-spacing: 0.03em;
}
.submenu-item--readmore::before {
  display: none;
}
.submenu-item--readmore::after {
  color: var(--clr-primary);
  opacity: 0.6;
}
.submenu-item--readmore:hover {
  background: rgba(35, 56, 114, 0.07);
  padding-left: 16px;
  border-left: none;
}
.submenu-item--readmore:hover::after {
  transform: translateX(3px);
}

/* ── "View All" bottom CTA pill ── */
.submenu-view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 2px;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  color: #ffffff;
  background: var(--clr-primary);
  box-shadow: 0 6px 20px rgba(35, 56, 114, 0.22);
  transition:
    transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 220ms ease,
    filter 220ms ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep on View All */
.submenu-view-all::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: skewX(-20deg);
  pointer-events: none;
  animation: viewAllShimmer 3.5s ease-in-out infinite;
}
@keyframes viewAllShimmer {
  0% {
    left: -60%;
  }
  60% {
    left: 130%;
  }
  100% {
    left: 130%;
  }
}

/* Arrow in "View All" */
.submenu-view-all__arrow {
  font-size: 18px;
  line-height: 1;
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.submenu-view-all:hover .submenu-view-all__arrow {
  transform: translateX(4px);
}

.submenu-view-all:hover,
.submenu-view-all:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 10px 28px rgba(35, 56, 114, 0.3);
}
.submenu-view-all:active {
  transform: scale(0.97);
  box-shadow: 0 4px 12px rgba(35, 56, 114, 0.2);
}

/* Per-category gradient on View All */
.nav-cat--fence ~ .submenu .submenu-view-all {
  background: linear-gradient(110deg, #1565c0, #1e88e5);
  box-shadow: 0 6px 20px rgba(21, 101, 192, 0.28);
}
.nav-cat--training ~ .submenu .submenu-view-all {
  background: linear-gradient(110deg, #6a1b9a, #9c27b0);
  box-shadow: 0 6px 20px rgba(106, 27, 154, 0.28);
}
.nav-cat--bark ~ .submenu .submenu-view-all {
  background: linear-gradient(110deg, #bf360c, #ef6c00);
  box-shadow: 0 6px 20px rgba(191, 54, 12, 0.28);
}
.nav-cat--danger ~ .submenu .submenu-view-all {
  background: linear-gradient(110deg, #f57f17, #fbc02d);
  box-shadow: 0 6px 20px rgba(245, 127, 23, 0.28);
}
.nav-cat--shop ~ .submenu .submenu-view-all {
  background: linear-gradient(110deg, #2e7d32, #43a047);
  box-shadow: 0 6px 20px rgba(46, 125, 50, 0.28);
}
.nav-cat--blog ~ .submenu .submenu-view-all {
  background: linear-gradient(110deg, #e65100, #fb8c00);
  box-shadow: 0 6px 20px rgba(230, 81, 0, 0.28);
}

/* ── Deal Badge ── */
.badge-deal {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--clr-accent);
  color: var(--clr-primary);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(255, 211, 87, 0.45);
  animation: dealPulse 2.6s ease infinite;
}
@keyframes dealPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 211, 87, 0.6);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(255, 211, 87, 0);
  }
}

/* ── Nav Icon pill ── */
.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  border-radius: 10px;
  background: rgba(35, 56, 114, 0.06);
  flex-shrink: 0;
  transition:
    background var(--dur-fast),
    transform var(--dur-fast);
  line-height: 1;
}

/* Emoji pill tints per category */
.nav-cat--fence .nav-icon {
  background: rgba(21, 101, 192, 0.09);
}
.nav-cat--training .nav-icon {
  background: rgba(106, 27, 154, 0.09);
}
.nav-cat--bark .nav-icon {
  background: rgba(191, 54, 12, 0.09);
}
.nav-cat--danger .nav-icon {
  background: rgba(245, 127, 23, 0.12);
}
.nav-cat--shop .nav-icon {
  background: rgba(46, 125, 50, 0.09);
}
.nav-cat--blog .nav-icon {
  background: rgba(230, 81, 0, 0.09);
}

.nav-row:hover .nav-icon,
.is-expanded .nav-icon {
  transform: scale(1.1);
}

.nav-cat--fence.is-expanded .nav-icon {
  background: rgba(21, 101, 192, 0.17);
}
.nav-cat--training.is-expanded .nav-icon {
  background: rgba(106, 27, 154, 0.17);
}
.nav-cat--bark.is-expanded .nav-icon {
  background: rgba(191, 54, 12, 0.17);
}
.nav-cat--danger.is-expanded .nav-icon {
  background: rgba(245, 127, 23, 0.25);
}
.nav-cat--shop.is-expanded .nav-icon {
  background: rgba(46, 125, 50, 0.17);
}
.nav-cat--blog.is-expanded .nav-icon {
  background: rgba(230, 81, 0, 0.17);
}

/* ── Nav Count badge ── */
.nav-count {
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  color: var(--clr-muted);
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-divider);
  border-radius: var(--radius-full);
  padding: 2px 7px;
  min-width: 26px;
  text-align: center;
  line-height: 1.5;
  flex-shrink: 0;
  margin-right: 2px;
  transition:
    background var(--dur-fast),
    color var(--dur-fast);
}
.nav-cat--fence.is-expanded .nav-count {
  background: rgba(21, 101, 192, 0.1);
  color: #1565c0;
  border-color: rgba(21, 101, 192, 0.25);
}
.nav-cat--training.is-expanded .nav-count {
  background: rgba(106, 27, 154, 0.1);
  color: #6a1b9a;
  border-color: rgba(106, 27, 154, 0.25);
}
.nav-cat--bark.is-expanded .nav-count {
  background: rgba(191, 54, 12, 0.1);
  color: #bf360c;
  border-color: rgba(191, 54, 12, 0.25);
}
.nav-cat--danger.is-expanded .nav-count {
  background: rgba(245, 127, 23, 0.15);
  color: #f57f17;
  border-color: rgba(245, 127, 23, 0.3);
}
.nav-cat--shop.is-expanded .nav-count {
  background: rgba(46, 125, 50, 0.1);
  color: #2e7d32;
  border-color: rgba(46, 125, 50, 0.25);
}
.nav-cat--blog.is-expanded .nav-count {
  background: rgba(230, 81, 0, 0.1);
  color: #e65100;
  border-color: rgba(230, 81, 0, 0.25);
}

/* ── Nav Row upgrades ── */
.nav-row {
  min-height: 62px;
  gap: 12px;
  position: relative;
  background: transparent;
}

/* Sliding left accent bar */
.nav-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 0;
  border-radius: 0 4px 4px 0;
  transition:
    width 180ms var(--ease-out),
    background 180ms;
}
.nav-row:hover::before,
.nav-row.is-expanded::before {
  width: 4px;
}

.nav-cat--fence .nav-row.is-expanded::before,
.nav-cat--fence .nav-row:hover::before {
  background: #1565c0;
}
.nav-cat--training .nav-row.is-expanded::before,
.nav-cat--training .nav-row:hover::before {
  background: #6a1b9a;
}
.nav-cat--bark .nav-row.is-expanded::before,
.nav-cat--bark .nav-row:hover::before {
  background: #bf360c;
}
.nav-cat--danger .nav-row.is-expanded::before,
.nav-cat--danger .nav-row:hover::before {
  background: #f57f17;
}
.nav-cat--shop .nav-row.is-expanded::before,
.nav-cat--shop .nav-row:hover::before {
  background: #2e7d32;
}
.nav-cat--blog .nav-row.is-expanded::before,
.nav-cat--blog .nav-row:hover::before {
  background: #e65100;
}

/* Expanded gradient wash */
.nav-row.is-expanded {
  background: linear-gradient(
    100deg,
    rgba(35, 56, 114, 0.04) 0%,
    transparent 70%
  );
}
.nav-cat--fence .nav-row.is-expanded {
  background: linear-gradient(
    100deg,
    rgba(21, 101, 192, 0.07) 0%,
    transparent 70%
  );
}
.nav-cat--training .nav-row.is-expanded {
  background: linear-gradient(
    100deg,
    rgba(106, 27, 154, 0.07) 0%,
    transparent 70%
  );
}
.nav-cat--bark .nav-row.is-expanded {
  background: linear-gradient(
    100deg,
    rgba(191, 54, 12, 0.07) 0%,
    transparent 70%
  );
}
.nav-cat--danger .nav-row.is-expanded {
  background: linear-gradient(
    100deg,
    rgba(245, 127, 23, 0.08) 0%,
    transparent 70%
  );
}
.nav-cat--shop .nav-row.is-expanded {
  background: linear-gradient(
    100deg,
    rgba(46, 125, 50, 0.07) 0%,
    transparent 70%
  );
}
.nav-cat--blog .nav-row.is-expanded {
  background: linear-gradient(
    100deg,
    rgba(230, 81, 0, 0.07) 0%,
    transparent 70%
  );
}

/* Per-category border + label on expand */
.nav-cat--fence.is-expanded,
.nav-cat--fence:hover {
  border-left-color: #1565c0;
}
.nav-cat--training.is-expanded,
.nav-cat--training:hover {
  border-left-color: #6a1b9a;
}
.nav-cat--bark.is-expanded,
.nav-cat--bark:hover {
  border-left-color: #bf360c;
}
.nav-cat--danger.is-expanded,
.nav-cat--danger:hover {
  border-left-color: #f57f17;
}
.nav-cat--shop.is-expanded,
.nav-cat--shop:hover {
  border-left-color: #2e7d32;
}
.nav-cat--blog.is-expanded,
.nav-cat--blog:hover {
  border-left-color: #e65100;
}

/* Nav Label colors */
.nav-label {
  font-size: 15.5px;
  font-weight: var(--fw-semibold);
  color: var(--clr-text);
  flex: 1;
  text-align: left;
  transition: color var(--dur-fast);
}
.nav-row:hover .nav-label,
.is-expanded .nav-label {
  color: var(--clr-primary);
}
.nav-cat--fence.is-expanded .nav-label {
  color: #1565c0;
}
.nav-cat--training.is-expanded .nav-label {
  color: #6a1b9a;
}
.nav-cat--bark.is-expanded .nav-label {
  color: #bf360c;
}
.nav-cat--danger.is-expanded .nav-label {
  color: #f57f17;
}
.nav-cat--shop.is-expanded .nav-label {
  color: #2e7d32;
}
.nav-cat--blog.is-expanded .nav-label {
  color: #e65100;
}

/* Chevron */
.nav-chevron {
  transition:
    transform 220ms var(--ease-out),
    color 220ms;
  color: var(--clr-muted);
  flex-shrink: 0;
}
.nav-chevron.rotated {
  transform: rotate(180deg);
}
.is-expanded .nav-chevron,
.nav-row--expandable.is-expanded .nav-chevron {
  color: var(--clr-primary);
}

/* ── Tag ── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}
.tag--new {
  background: var(--clr-sage);
  color: #fff;
}

/* ── Nav Divider ── */
.nav-divider {
  height: 1px;
  margin: var(--sp-sm) var(--sp-lg);
  background: var(--clr-divider);
  flex-shrink: 0;
}

/* ── Secondary Nav Links — 2-col premium cards ── */
.drawer > .nav-list.nav-list--secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px 24px;
  margin-top: 16px;
}
.drawer > .nav-list.nav-list--secondary li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer .nav-list--secondary .nav-row--link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(35, 56, 114, 0.03);
  padding: 16px 10px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  width: 100%;
}
.drawer .nav-list--secondary .nav-row--link::before {
  display: none;
}

.drawer .nav-list--secondary .nav-row--link .nav-icon {
  width: 46px;
  height: 46px;
  background: #f3f4f6;
  border-radius: 14px;
  font-size: 22px;
  margin: 0 0 12px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 2px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer .nav-list--secondary .nav-row--link .nav-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #374151;
  margin: 0;
  letter-spacing: -0.01em;
}
.drawer .nav-list--secondary .nav-row--link:hover,
.drawer .nav-list--secondary .nav-row--link:active {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px -8px rgba(35, 56, 114, 0.15);
  border-color: rgba(35, 56, 114, 0.15);
}
.drawer .nav-list--secondary .nav-row--link:hover .nav-icon,
.drawer .nav-list--secondary .nav-row--link:active .nav-icon {
  background: var(--clr-primary);
  color: #ffffff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 14px rgba(35, 56, 114, 0.2);
}

/* Specific item colors */
.nav-row--contact .nav-icon {
  background: rgba(37, 99, 235, 0.1) !important;
  color: #2563eb !important;
}
.nav-row--contact:hover .nav-icon {
  background: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.3) !important;
}

.nav-row--videos .nav-icon {
  background: rgba(249, 115, 22, 0.1) !important;
  color: #f97316 !important;
}
.nav-row--videos:hover .nav-icon {
  background: #f97316 !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(249, 115, 22, 0.3) !important;
}

/* ── Drawer Footer ── */
.drawer-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px var(--sp-lg) calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--clr-bg);
  border-top: 1px solid var(--clr-divider);
}

/* ── Promo Banner (Free Shipping) ── */
.promo-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 12px;
  background: #1e40af;
  color: #fff;
  text-decoration: none;
  transition: transform 100ms ease;
}
.promo-banner:active {
  transform: scale(0.98);
}
.promo-banner__icon {
  flex-shrink: 0;
  color: #fff;
}
.promo-banner__text {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}
.promo-banner__text strong {
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  display: block;
  margin-bottom: 1px;
}
.promo-banner__arrow {
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Trust Strip (Unified Coral Gradient) ── */
.trust-strip {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  background: linear-gradient(to right, #fb923c, #f43f5e);
  border-radius: 12px;
  padding: 16px 0;
}
.trust-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  color: #ffffff;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.trust-strip__item:last-child {
  border-right: none;
}
.trust-strip__emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 6px;
}
.trust-strip__emoji svg {
  width: 22px;
  height: 22px;
}
.trust-strip__title {
  font-size: 10.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
}

/* ── Expert CTA (Talk to an Expert) ── */
.expert-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #1e293b;
  color: #fff;
  text-decoration: none;
  transition: transform 100ms ease;
}
.expert-cta:active {
  transform: scale(0.98);
}
.expert-cta__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #fff;
}
.expert-cta__icon svg {
  width: 20px;
  height: 20px;
}
.expert-cta__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.expert-cta__label {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
}
.expert-cta__number {
  font-size: 18.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}
.expert-cta__badge {
  font-size: 11px;
  font-weight: 700;
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.1);
  border-radius: 99px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.expert-cta__pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  animation: expertPulse 2s infinite;
}
@keyframes expertPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.4);
  }
}

/* ── Drawer overscroll ── */
.drawer {
  overscroll-behavior: contain;
}

/* ── Focus ring override ── */
.drawer *:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: -2px;
}

/* ── Demo Page ── */
.demo-page {
  padding-top: calc(var(--header-h) + 24px);
  max-width: 640px;
  margin: 0 auto;
  padding-left: var(--sp-lg);
  padding-right: var(--sp-lg);
}
.demo-hero {
  text-align: center;
  padding: 60px 0 40px;
}
.demo-hero__badge {
  display: inline-block;
  background: var(--clr-accent);
  color: var(--clr-primary);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}
.demo-hero__title {
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--clr-text);
  margin-bottom: 16px;
}
.demo-hero__sub {
  font-size: 16px;
  color: var(--clr-muted);
  max-width: 400px;
  margin: 0 auto 28px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  transition: all var(--dur-fast);
  text-decoration: none;
}
.btn--primary {
  background: var(--clr-primary);
  color: #fff;
  box-shadow: 0 4px 16px rgba(35, 56, 114, 0.25);
}
.btn--primary:hover {
  background: var(--clr-secondary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(35, 56, 114, 0.3);
}
.btn--lg {
  height: 52px;
  padding: 0 32px;
  font-size: 16px;
  border-radius: 14px;
}
.demo-hint {
  text-align: center;
  font-size: 13px;
  color: var(--clr-muted);
  margin-top: 40px;
}
.search-no-results {
  padding: 16px var(--sp-lg);
  font-size: 14px;
  color: var(--clr-muted);
  text-align: center;
}

/* ── Breed chips ── */
.breed-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg) var(--sp-md);
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 var(--sp-md);
  background: var(--clr-bg);
  border: 1.5px solid var(--clr-divider);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--clr-secondary);
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    color var(--dur-fast),
    transform var(--dur-fast);
  white-space: nowrap;
}
.chip:hover,
.chip:focus-visible {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: #fff;
}
.chip:active {
  transform: scale(0.95);
}

/* ═══════════════════════════════════════════
   BLOG HUB — Compact Premium Strip
   ═══════════════════════════════════════════ */

.blog-hub {
  margin: 4px 14px 14px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.9),
    rgba(118, 75, 162, 0.9)
  );
  padding: 13px 14px 13px;
  box-shadow: 0 8px 24px rgba(6, 78, 59, 0.2);
  position: relative;
}

/* Add a subtle glassy glow overlay */
.blog-hub::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at top right,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 60%
  );
  pointer-events: none;
}

/* ── Header row ── */
.blog-hub__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.blog-hub__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9px;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.blog-hub__titles {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.blog-hub__eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85); /* Lightened for contrast */
}

.blog-hub__name {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* "Updated weekly" live badge */
.blog-hub__live {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  color: #10b981; /* Emerald green */
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-full);
  padding: 2px 7px 2px 5px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.blog-hub__live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
  animation: livePulse 2s ease-out infinite;
  flex-shrink: 0;
}

@keyframes livePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  }
  70% {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* ── Category chips — horizontal scroll ── */
.blog-hub__cats {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-bottom: 11px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  position: relative;
  z-index: 1;
}
.blog-hub__cats::-webkit-scrollbar {
  display: none;
}
/* Right-fade indicates more chips — scroll discovery affordance */
.blog-hub__cats {
  mask-image: linear-gradient(to right, black 68%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 68%, transparent 100%);
  padding-right: 28px;
}

.blog-hub__cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 16px;
  font-size: 11.5px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.blog-hub__cat:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}
.blog-hub__cat:active {
  transform: scale(0.95);
}

/* ── Read All CTA ── */
.blog-hub__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  background: #ffffff;
  color: #141414;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition:
    background 160ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.blog-hub__cta:hover {
  background: #f8fafc; /* Very light slate */
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.blog-hub__cta:active {
  transform: scale(0.98);
}

.blog-hub__cta-arrow {
  font-size: 15px;
  transition: transform 180ms ease;
}
.blog-hub__cta:hover .blog-hub__cta-arrow {
  transform: translateX(3px);
}

/* ═══════════════════════════════════════════════════════════
   STICKY CART BAR — Always-visible "Add to Bowl" CTA
   ═══════════════════════════════════════════════════════════ */

.sticky-cart-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--clr-divider);
  box-shadow: 0 -4px 20px rgba(35, 56, 114, 0.08);
  flex-shrink: 0;
}

.sticky-cart-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  background: linear-gradient(110deg, var(--clr-primary), var(--clr-secondary));
  color: #fff;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(35, 56, 114, 0.28);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

/* Shimmer sweep */
.sticky-cart-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );
  transform: skewX(-20deg);
  pointer-events: none;
  animation: cartBtnShimmer 3s ease-in-out infinite;
}
@keyframes cartBtnShimmer {
  0% {
    left: -60%;
  }
  60% {
    left: 130%;
  }
  100% {
    left: 130%;
  }
}

.sticky-cart-btn:hover,
.sticky-cart-btn:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow: 0 6px 22px rgba(35, 56, 114, 0.36);
}
.sticky-cart-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(35, 56, 114, 0.2);
}

.sticky-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  background: var(--clr-accent);
  color: var(--clr-primary);
  font-size: 12px;
  font-weight: 800;
  border-radius: var(--radius-full);
  margin-left: 2px;
}

/* Give drawer-footer a little bottom margin so it doesn't get hidden by sticky bar */
.drawer-footer {
  margin-bottom: 0;
  padding-bottom: 12px;
}

/* ── Bowl button in header — match style ── */
.bowl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  background: var(--clr-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  white-space: nowrap;
  transition:
    background 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
  box-shadow: 0 2px 8px rgba(35, 56, 114, 0.2);
}
.bowl-btn:hover,
.bowl-btn:focus-visible {
  background: var(--clr-secondary);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(35, 56, 114, 0.28);
}
.bowl-btn:active {
  transform: scale(0.95);
}
.bowl-btn-text {
  display: none;
}
@media (min-width: 360px) {
  .bowl-btn-text {
    display: inline;
  }
}
.bowl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--clr-accent);
  color: var(--clr-primary);
  font-size: 10px;
  font-weight: 800;
  border-radius: var(--radius-full);
}

/* ═══════════════════════════════════════════════════════════
   SLIDE PANEL NAVIGATION — Supertails-style
   ═══════════════════════════════════════════════════════════ */

/* Clip the drawer when a panel is open so the slide-in is clean */
.drawer.has-panel {
  overflow: hidden;
}

/* Removed duplicate panel code to prevent conflicts */

.panel-header__title {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Panel scrollable content ── */
.panel-content {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow-y: auto;
  padding: 10px 12px 100px !important; /* Generous bottom padding for full scroll clearance */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(35, 56, 114, 0.25);
}

.panel-content::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 6px;
}
.panel-content::-webkit-scrollbar-track {
  background: rgba(30, 58, 138, 0.08); /* Light permanent track */
  border-radius: 10px;
}
.panel-content::-webkit-scrollbar-thumb {
  background: #1e3a8a;
  border-radius: 10px;
}

/* Wider submenu groups inside panel (no side margins from nested accordion context) */
.panel-content .submenu-group {
  margin: 6px 0;
  border-radius: 12px;
}
.panel-content .submenu-group:first-child {
  margin-top: 4px;
}
.panel-content .submenu-view-all {
  margin: 10px 0 6px;
  border-radius: 12px;
}

/* Panel items — same as submenu-item but bark-colour accent */
.panel-item:hover,
.panel-item:focus-visible {
  border-left-color: #bf360c;
  color: #bf360c;
  background: rgba(191, 54, 12, 0.05);
}
.panel-item:hover::before {
  background: #bf360c;
  border-color: #bf360c;
}
.panel-item:hover::after {
  color: #bf360c;
}

/* Bark Collars heading dot in panel */
.panel-content .submenu-heading::before {
  background: #bf360c;
  opacity: 0.7;
}

/* ── Panel trigger row styling ──
   Bark Collars row looks like a nav link (right chevron), not an accordion toggle */
.nested-accordion--panel-trigger {
  border-color: rgba(191, 54, 12, 0.12);
}
.nested-accordion-header--panel:hover {
  background: rgba(191, 54, 12, 0.04);
}
.nested-accordion-header--panel .nav-icon {
  background: rgba(191, 54, 12, 0.09);
}
/* Chevron stays pointing right (no rotate — it's a navigation cue, not a toggle) */
.nested-accordion-header--panel .nav-chevron {
  transform: none !important;
  color: var(--clr-muted);
}

/* ═══════════════════════════════════════════════════════════
   MULTI-LEVEL SLIDE PANEL NAVIGATION SYSTEM
   Architecture: Drawer Shell → L1 Shop Panel → L2 Category Panels
   ═══════════════════════════════════════════════════════════ */

/* ── Nav row as panel trigger (Shop button at root level) ── */
.nav-row--panel-trigger {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--sp-lg);
  min-height: 52px;
  background: transparent;
  border: none;
  color: var(--clr-text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease;
}
.nav-row--panel-trigger:hover,
.nav-row--panel-trigger:focus-visible {
  background: var(--clr-surface);
}
.nav-row--panel-trigger .nav-chevron {
  margin-left: auto;
  color: var(--clr-muted);
}

/* ── Category Row (inside L1 Shop panel) ── */
.category-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  margin: 3px 0;
  border: none;
  border-radius: 12px;
  color: var(--clr-text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 150ms ease,
    transform 100ms ease;
  text-align: left;
}
.category-row:hover,
.category-row:focus-visible {
  background: #efefef;
}
.category-row:active {
  transform: scale(0.98);
}

.category-row__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 18px;
}

.category-row__label {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}

.category-row__chevron {
  color: var(--clr-muted);
  flex-shrink: 0;
}

/* ── Panel View All link ── */
.panel-view-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  margin: 12px 0 4px;
  border-radius: 12px;
  background: var(--clr-surface, #f5f5f7);
  color: var(--clr-primary, #233872);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(35, 56, 114, 0.08);
  transition:
    background 150ms ease,
    transform 100ms ease;
  -webkit-tap-highlight-color: transparent;
}
.panel-view-all:hover {
  background: rgba(35, 56, 114, 0.04);
}
.panel-view-all:active {
  transform: scale(0.98);
}

/* ── Panel Layer — Base (all panels share this) ── */
.panel-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important; /* Changed from 100dvh to 100% to fill drawer-body correctly */
  display: flex;
  flex-direction: column;
  /* Default: hidden off-screen RIGHT */
  transform: translateX(100%);
  transition:
    transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 300ms;
  will-change: transform;
  pointer-events: none;
  visibility: hidden;
}

.panel-layer--open {
  transform: translateX(0);
  pointer-events: all;
  visibility: visible;
  transition:
    transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s;
}

/* L1: Shop categories — z above drawer shell */
.panel-layer--l1 {
  z-index: 310;
}

/* L2: Category detail — z above L1 */
.panel-layer--l2 {
  z-index: 320;
}

/* ── Panel Header (Upgraded Premium UX) ── */
.panel-header {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.03);
}

.panel-header__title {
  position: absolute;
  /* left: 50%; */
  right: 0%;
  transform: translateX(-50%);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 800;
  color: var(--clr-text, #1a1a2e);
  margin: 0;
  pointer-events: none;
  white-space: nowrap;
}

.panel-back-btn {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 44px;
  height: 44px;
  padding: 0 8px 0 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--clr-primary, #233872);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 150ms ease,
    transform 150ms ease;
  margin-left: -8px;
}
.panel-back-btn:active {
  opacity: 0.6;
  transform: scale(0.96);
}

/* ── L3 Panel Layers ── */
.panel-layer--l3 {
  z-index: 330;
}

/* L3 Card Grid (e.g. Bark Collar Types) */
.panel-content--grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  align-items: start !important;
  align-content: start !important;
  gap: 16px 12px !important;
  padding: 16px 16px 120px !important; /* Extra bottom clearance for grid panels */
}

.l3-product-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  /* background: #ffffff !important; */
  /* border-radius: 20px !important; */
  /* padding: 8px !important;  */
  text-decoration: none !important;
  /* border: 1px solid rgba(0, 0, 0, 0.03) !important; */
  /* box-shadow: 0 2px 8px rgba(35, 56, 114, 0.04) !important; */
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  -webkit-tap-highlight-color: transparent !important;
  height: auto !important; /* Wrap content only */
  width: 100% !important;
}
.l3-product-card:active {
  transform: scale(0.96) !important;
}
.l3-product-img {
  width: 100% !important;
  aspect-ratio: 1.1 / 1 !important; /* Slightly wider than tall like reference */
  object-fit: cover !important;
  margin-bottom: 16px !important; /* Less gap between image and text */
  /* padding: 8px !important; */
  background: #eef3fc !important;
  border-radius: 20px !important;
  flex-shrink: 0 !important;
}
.l3-product-position {
  object-position: bottom;
}
.l3-product-title {
  font-family: var(--font) !important;
  font-size: 12.5px !important; /* Slightly smaller for compact feel */
  font-weight: 700 !important;
  color: var(--clr-primary, #233872) !important;
  text-align: center !important;
  line-height: 1.2 !important;
  padding: 0 4px 4px !important;
  letter-spacing: 0.3px;
}

/* L3 List Row (e.g. Dog Size) */
.panel-content--list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 12px 16px !important;
}

.l3-list-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 12px !important;
  padding: 16px 12px !important;
  background: var(--clr-surface, #f8f8f8) !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  transition:
    transform 100ms ease,
    background 150ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
.l3-list-row:active {
  transform: scale(0.98);
}
.l3-list-img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
  background: #ffffff;
  padding: 6px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.02),
    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  mix-blend-mode: darken;
}
.l3-list-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.l3-list-title {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-text);
}
.l3-list-desc {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-muted, #6b7280);
}

/* ── Panel Scrollable Content ── */
.panel-content {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 13px 10px !important;
  padding-bottom: calc(50% + env(safe-area-inset-bottom)) !important;
}
.panel-content::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 6px;
}
.panel-content::-webkit-scrollbar-track {
  background: rgba(30, 58, 138, 0.08); /* Light permanent track */
  border-radius: 10px;
}
.panel-content::-webkit-scrollbar-thumb {
  background: #1e3a8a;
  border-radius: 99px;
}

/* ── Submenu heading dot color override (via CSS var) ── */
.panel-content .submenu-heading::before {
  background: var(--dot-color, var(--clr-primary));
  opacity: 1;
}

/* ── Drawer: clip panels when any is open ── */
.drawer.has-panel {
  overflow: hidden;
}

/* ── Drawer Layout Wrappers ── */
.drawer-sticky-top {
  flex-shrink: 0;
  position: relative;
  z-index: 400;
  background: var(--clr-bg);
}

.drawer-body {
  position: relative;
  flex: 1;
  background: var(--clr-surface);
  height: 100dvh; /* Restoration of fixed height to stabilize panels */
}

.drawer-root-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: calc(150px + env(safe-area-inset-bottom));
  scrollbar-width: thin;
  scrollbar-color: rgba(35, 56, 114, 0.25);
}

.drawer-root-scroll::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 6px;
}
.drawer-root-scroll::-webkit-scrollbar-track {
  background: rgba(30, 58, 138, 0.08); /* Light permanent track */
  border-radius: 10px;
}
.drawer-root-scroll::-webkit-scrollbar-thumb {
  background: #1e3a8a;
  border-radius: var(--radius-full);
}

/* Global Search Overlay */
.search-results-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 500 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  background:
    radial-gradient(
      circle at 0% 35%,
      rgba(254, 236, 219, 0.8) 0%,
      rgba(255, 255, 255, 0) 55%
    ),
    linear-gradient(180deg, #f8faff 0%, #e6f0fa 100%) !important;
}

/* Search Result Item Overrides */
.search-result-item {
  margin: 8px 12px !important;
  width: auto !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid var(--clr-divider) !important;
}
.search-result-item.l3-list-row {
  flex-direction: row !important;
  text-align: left !important;
  justify-content: flex-start !important;
  padding: 12px !important;
}
.search-result-item.l3-list-row .l3-list-img {
  width: 48px !important;
  height: 48px !important;
}
.search-result-item.category-row {
  padding: 16px !important;
}

/* ── Premium Search Result Cards (new style) ── */
.search-result-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin: 0 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  text-decoration: none;
  color: #1e293b;
  font-size: 14.5px;
  font-weight: 500;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.search-result-card + .search-result-card {
  margin-top: 6px;
}
.search-result-card:hover {
  background: #f8faff;
  border-color: #e0e7ff;
}
.search-result-card:active {
  transform: scale(0.98);
  background: #eef2ff;
}
.search-result-card__label {
  flex: 1;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Search results container spacing */
#search-results-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 12px;
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM DOG SITE L0 DRAWER OVERRIDES
   Matching the reference dog site styling for primary drawer UX
   ═══════════════════════════════════════════════════════════ */

/* 1. Quick Chips Pastel Colors */
.quick-chip--fire {
  background: #ffe4e6 !important;
  color: #e11d48 !important;
  border-color: rgba(225, 29, 72, 0.1) !important;
}
.quick-chip--star {
  background: #fef9c3 !important;
  color: #b45309 !important;
  border-color: rgba(180, 83, 9, 0.1) !important;
}
.quick-chip--new {
  background: #dcfce7 !important;
  color: #15803d !important;
  border-color: rgba(21, 128, 61, 0.1) !important;
}
.quick-chip--brand {
  background: #f3e8ff !important;
  color: #7e22ce !important;
  border-color: rgba(126, 34, 206, 0.1) !important;
}
.quick-chip--small {
  background: #ffedd5 !important;
  color: #c2410c !important;
  border-color: rgba(194, 65, 12, 0.1) !important;
}
.quick-chip--large {
  background: #e0e7ff !important;
  color: #4338ca !important;
  border-color: rgba(67, 56, 202, 0.1) !important;
}

/* 2. Primary Nav Rows Structure */
.nav-row {
  min-height: 64px !important;
  gap: 16px !important;
  padding: 8px 12px !important;
  border-radius: 16px !important;
  transition: background 150ms ease !important;
}
.nav-row:hover,
.nav-row:active {
  background: rgba(0, 0, 0, 0.02) !important;
}

/* 3. Primary Nav Icon Container - Vibrant Colors */
.drawer > .nav-list .nav-row--home .nav-icon {
  background: #eff6ff !important;
  color: #2563eb !important;
}
.drawer > .nav-list .nav-row--shop .nav-icon {
  background: #dcfce7 !important;
  color: #16a34a !important;
}
.drawer > .nav-list .nav-row--videos .nav-icon {
  background: #ffedd5 !important;
  color: #ea580c !important;
}
.drawer > .nav-list .nav-row--blog .nav-icon {
  background: #f3e8ff !important;
  color: #9333ea !important;
}
.drawer > .nav-list .nav-row--contact .nav-icon {
  background: #fce7f3 !important;
  color: #e11d48 !important;
}

/* Base structural rules for the L0 icons */
.drawer > .nav-list .nav-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.02),
    inset 0 0 0 1px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease !important;
}
.drawer > .nav-list .nav-row:hover .nav-icon {
  transform: scale(1.05) !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(0, 0, 0, 0.02) !important;
}
.drawer > .nav-list .nav-row--home:hover .nav-icon {
  background: #dbeafe !important;
}
.drawer > .nav-list .nav-row--shop:hover .nav-icon {
  background: #bbf7d0 !important;
}
.drawer > .nav-list .nav-row--videos:hover .nav-icon {
  background: #fed7aa !important;
}
.drawer > .nav-list .nav-row--blog:hover .nav-icon {
  background: #e9d5ff !important;
}
.drawer > .nav-list .nav-row--contact:hover .nav-icon {
  background: #fbcfe8 !important;
}

.drawer > .nav-list .nav-icon svg {
  width: 22px;
  height: 22px;
}

/* 4. Primary Nav Typography */
.drawer > .nav-list .nav-label {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  letter-spacing: -0.01em !important;
}

/* 5. Nav Chevron for L0 */
.drawer > .nav-list .nav-chevron {
  color: #94a3b8 !important;
  width: 16px !important;
  height: 16px !important;
}

/* 6. Pristine White Background (Wipe away faded grays) */
.drawer-body,
.drawer-sticky-top,
.drawer .search-bar-container {
  background: #ffffff !important;
}
/* .quick-chips {
  background: #ffffff !important;
}
.nav-row {
  background: #ffffff !important;
} */

/* 7. Master Sticky Cart Bar Element Layering */
.z-master {
  z-index: 800 !important;
}

/* 8. Minimalist Header Cart CTA */
.header-cart-btn {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  color: #1e293b;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.header-cart-btn:active {
  background: rgba(0, 0, 0, 0.04);
}
.header-cart-badge {
  position: absolute;
  top: 4px;
  right: 2px;
  background: #ffc107;
  color: #000;
  font-size: 10px;
  font-weight: 800;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid #fff;
}

/* ═══════════════════════════════════════════════════════════
   OPTION A — Soft Premium Minimal Redesign System
   All rules below override defaults to deliver a clean,
   tighter, more premium navigation feel.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Nav Row: Tighter height, remove left border accent, card hover ── */
.drawer > .nav-list .nav-row {
  min-height: 56px !important;
  border-left: none !important;
  border-radius: 12px !important;
  margin: 1px 12px !important;
  padding: 0 12px !important;
  width: calc(100% - 24px) !important;
  transition:
    background 120ms ease,
    transform 120ms ease !important;
}
.drawer > .nav-list .nav-row::before {
  display: none !important;
}
.drawer > .nav-list .nav-row:hover,
.drawer > .nav-list .nav-row:focus-visible {
  background: #f4f7ff !important;
  transform: none !important;
}
.drawer > .nav-list .nav-row:active {
  background: #eef2ff !important;
  transform: scale(0.985) !important;
}

/* ── 2. Icon: Refined Rounded-Rect (all same shape, 12px radius) ── */
.drawer > .nav-list .nav-icon {
  border-radius: 12px !important;
  width: 42px !important;
  height: 42px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 120ms ease !important;
}
.drawer > .nav-list .nav-row:hover .nav-icon {
  transform: scale(1.06) !important;
}

/* ── 3. Nav Label: Inter SemiBold 15.5px ── */
.drawer > .nav-list .nav-label {
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  letter-spacing: -0.01em !important;
}
.drawer > .nav-list .nav-row:hover .nav-label {
  color: #3730a3 !important;
}

/* ── 4. Chevron: Softer, more minimal ── */
.drawer > .nav-list .nav-chevron {
  color: #cbd5e1 !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  transition:
    transform 180ms ease,
    color 120ms ease !important;
}
.drawer > .nav-list .nav-row:hover .nav-chevron {
  color: #6366f1 !important;
  transform: translateX(2px) !important;
}

/* ── 5. Icon Color System: Consistent branded pastel palette ── */
.drawer > .nav-list .nav-row--home .nav-icon {
  background: #eff0fe !important;
  color: #4f46e5 !important;
}
.drawer > .nav-list .nav-row--shop .nav-icon {
  background: #d1fae5 !important;
  color: #059669 !important;
}
.drawer > .nav-list .nav-row--videos .nav-icon {
  background: #fef3c7 !important;
  color: #d97706 !important;
}
.drawer > .nav-list .nav-row--blog .nav-icon {
  background: #f5f3ff !important;
  color: #7c3aed !important;
}
.drawer > .nav-list .nav-row--contact .nav-icon {
  background: #fff1f2 !important;
  color: #e11d48 !important;
}

/* Hover: slightly deepen bg ── */
.drawer > .nav-list .nav-row--home:hover .nav-icon {
  background: #e0e7ff !important;
}
.drawer > .nav-list .nav-row--shop:hover .nav-icon {
  background: #a7f3d0 !important;
}
.drawer > .nav-list .nav-row--videos:hover .nav-icon {
  background: #fde68a !important;
}
.drawer > .nav-list .nav-row--blog:hover .nav-icon {
  background: #ede9fe !important;
}
.drawer > .nav-list .nav-row--contact:hover .nav-icon {
  background: #ffe4e6 !important;
}

/* ── 6. L1 Panel Rows: Tactile card-style ── */
.category-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: calc(100% - 24px) !important;
  margin: 15px 12px !important;
  padding: 12px 16px !important;
  scroll-margin-top: 15px !important;
  /* background: #ffffff !important; */
  border: 1px solid #ffffff !important;
  border-radius: 14px !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  cursor: pointer !important;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    transform 120ms ease,
    box-shadow 120ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
  text-align: left !important;
}
.category-row:hover {
  background: #f8faff !important;
  border-color: #e0e7ff !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.06) !important;
}
.category-row:active {
  transform: scale(0.985) !important;
  background: #eef2ff !important;
}
.category-row__label {
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}
.category-row__chevron {
  color: var(--clr-muted) !important;
  flex-shrink: 0 !important;
  transition:
    transform 150ms ease,
    color 120ms ease !important;
}
.category-row:hover .category-row__chevron {
  color: #6366f1 !important;
  transform: translateX(2px) !important;
}

/* ── 7. Panel Content: Remove crowded padding ── */

/* ── 8. Panel Back Button: Brand accent color ── */
.panel-back-btn {
  color: #6366f1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  gap: 3px !important;
}
.panel-back-btn svg {
  stroke: #6366f1 !important;
}

/* ── 9. Panel header title: Slightly smaller, softer ── */
.panel-header__title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
}

/* ── 10. Minimal Info Strip ── */
.info-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 12px 16px !important;
  margin: 8px 12px 0 !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
}
.info-strip__item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  padding: 0 12px !important;
}
.info-strip__item svg {
  color: #94a3b8;
  flex-shrink: 0;
}
.info-strip__divider {
  width: 1px !important;
  height: 20px !important;
  background: #e2e8f0 !important;
  flex-shrink: 0 !important;
}

/* ── 11. Quick Chips: Slightly tighter, bolder fade ── */
.quick-chips {
  padding: 10px 16px 8px !important;
  mask-image: linear-gradient(to right, black 75%, transparent 98%) !important;
  -webkit-mask-image: linear-gradient(
    to right,
    black 75%,
    transparent 98%
  ) !important;
}
.quick-chip {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 7px 13px !important;
}

/* ── 12. View All link in panels: Premium UI/UX ── */
.panel-view-all {
  background: linear-gradient(
    135deg,
    rgba(35, 56, 114, 0.05),
    rgba(35, 56, 114, 0.12)
  ) !important;
  color: #233872 !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 20px !important;
  margin: 16px 16px 24px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(35, 56, 114, 0.12) !important;
  box-shadow: 0 4px 14px rgba(35, 56, 114, 0.05) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.panel-view-all span {
  display: inline-block !important;
  transition: transform 0.25s ease !important;
}
.panel-view-all:hover {
  background: linear-gradient(
    135deg,
    rgba(35, 56, 114, 0.08),
    rgba(35, 56, 114, 0.16)
  ) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(35, 56, 114, 0.08) !important;
}
.panel-view-all:hover span {
  transform: translateX(4px) !important;
}
.panel-view-all:active {
  transform: scale(0.97) translateY(0) !important;
  box-shadow: 0 2px 6px rgba(35, 56, 114, 0.05) !important;
}

/* ── 13. Divider: Lighter, thinner ── */
.nav-divider {
  background: #f1f5f9 !important;
  height: 1px !important;
  margin: 4px 16px !important;
}

/* ── 14. Premium Footer Card ── */
.drawer-footer-compact {
  margin: 0px 14px 24px !important;
  padding: 20px !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  box-shadow: 0 4px 20px rgba(35, 56, 114, 0.04) !important;
  border: 1px solid rgba(229, 233, 242, 0.9) !important;
}

.cft-trust-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.cft-trust-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
}
.cft-trust-icon {
  width: 48px !important;
  height: 42px !important;
  border-radius: 14px !important; /* Soft squircle */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.cft-icon--green {
  background: #eefdf4 !important;
}
.cft-icon--blue {
  background: #eef6ff !important;
}
.cft-icon--purple {
  background: #f5f3ff !important;
}

.cft-trust-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  text-align: center !important;
}

.cft-trust-sep {
  width: 1px !important;
  height: 36px !important;
  background: #f1f5f9 !important;
  flex-shrink: 0 !important;
}

/* Premium Action Row */
.cft-action-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important; /* Reduced for better small-screen fit */
  margin-top: 8px !important;
}

.cft-ship-tag {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #065f46 !important;
  background: #f0fdf9 !important;
  border: 1px solid #d1fae5 !important;
  border-radius: 14px !important;
  padding: 10px 10px !important; /* Slightly more breathing room */
  flex: 1 !important;
  flex-shrink: 0 !important; /* Prevent squeezing */
  min-width: 110px !important; /* Safety floor */
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.05) !important;
}
.cft-ship-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
}
.cft-ship-label {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  opacity: 0.8 !important;
  line-height: 1 !important;
}
.cft-ship-number {
  font-size: 13px !important; /* Reduced from 14px */
  font-weight: 800 !important;
  white-space: nowrap !important;
}
.cft-ship-tag:active {
  transform: scale(0.97) !important;
  background: #ecfdf5 !important;
}

.cft-call-tag {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #1e3a8a 0%, #3d5490 100%) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  color: #ffffff !important;
  flex: 1.6 !important; /* Slightly moderated from 1.8 to allow more space for sibling */
  min-width: 0 !important;
  box-shadow: 0 4px 15px rgba(35, 56, 114, 0.25) !important;
  transition: all 0.2s ease !important;
}
.cft-call-tag:active {
  transform: scale(0.97) !important;
  opacity: 0.95 !important;
}

.cft-call-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
}
.cft-call-label {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  opacity: 0.8 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
.cft-call-number {
  font-size: 13px !important; /* Reduced from 14px */
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}
.cft-dot {
  width: 7.5px !important;
  height: 7.5px !important;
  background: #4ade80 !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-shadow: 0 0 0 2.5px rgba(74, 222, 128, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════
   REFERENCE SCREENSHOT MATCH — Final Design System
   ═══════════════════════════════════════════════════════ */

/* 1. Animated Info Bar */
.info-bar {
  background: #1e3a8a !important; /* Force override old ticker gradient */
  padding: 3px 0 !important;
}
.info-bar .ticker-track {
  gap: 10px !important;
  padding: 0 !important;
  animation-duration: 12s !important; /* Make it faster natively 28s -> 12s */
}
.info-bar__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  padding: 0 8px; /* Reduce gap within items */
}
.info-bar__sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

/* 2. Nav Icons */
.drawer > .nav-list .nav-icon {
  width: 48px !important;
  height: 48px !important;
  transition: transform 130ms ease !important;
}
.drawer > .nav-list .nav-row:active .nav-icon {
  transform: scale(0.92) !important;
}

/* Nav row height + label */
.drawer > .nav-list .nav-row {
  min-height: 62px !important;
}
.drawer > .nav-list .nav-label {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}
.drawer > .nav-list .nav-row:hover .nav-label {
  color: #111827 !important;
}
.drawer > .nav-list .nav-row:hover {
  background: #f9fafb !important;
}

/* 3. Explore Section */
.explore-section {
  padding: 16px 16px 0;
}
.explore-section__title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.explore-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.explore-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: transform 120ms ease;
}
.explore-card:active {
  transform: scale(0.94);
}
.explore-card__img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  border-radius: 10px;
}
.explore-card__label {
  font-size: 11.5px;
  font-weight: 600;
  color: #374151;
  text-align: center;
  line-height: 1.3;
}

/* 4. Footer trust icon: bigger circle bubbles like reference */
.cft-trust-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cft-trust-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
}

/* ═══════════════════════════════════════════════════════
   PIXEL-ACCURATE FINAL PATCH
   ═══════════════════════════════════════════════════════ */

/* Drawer background: peachy radial glow + blueish linear fade */
.drawer-body,
.drawer-root-scroll,
.panel-layer {
  background:
    radial-gradient(
      circle at 0% 35%,
      rgba(254, 236, 219, 0.8) 0%,
      rgba(255, 255, 255, 0) 55%
    ),
    linear-gradient(180deg, #f8faff 0%, #e6f0fa 100%) !important;
}
.drawer-sticky-top {
  background: #ffffff !important;
}

/* Nav List floats on white surface over the gray bg */
.nav-list {
  /* background: #ffffff !important; */
  border-radius: 16px !important;
  margin: 0px 12px !important;
  padding: 4px 0 !important;
  overflow: hidden !important;
}
/* Each nav row sits inside the white card — no extra margin needed */
.drawer > .nav-list .nav-row {
  margin: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.drawer > .nav-list li:not(:last-child) .nav-row {
  border-bottom: 1px solid #f3f4f6 !important;
}

/* Header icon buttons: profile + bell (non-close) */
.header-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #f4f5f9;
  border: none;
  border-radius: 50%;
  color: #374151;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.header-icon-btn:active {
  background: #e5e7eb;
}

/* Cart badge: amber on white circle bg */
.header-cart-btn {
  background: #f4f5f9 !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
}
.header-cart-badge {
  background: #f59e0b !important;
  color: #000 !important;
  top: 2px !important;
  right: 2px !important;
}

/* Notification red dot */
.header-notif-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  background: #ef4444;
  border-radius: 50%;
  border: 1.5px solid #fff;
}

/* Drawer header: close button restored in header-actions */
.drawer-header .close-btn {
  display: flex !important;
}

/* Explore section: white bg card */
.explore-section {
  /* background: #ffffff; */
  border-radius: 16px;
  margin: 0px 12px !important;
  padding: 16px !important;
}

/* Footer card: white bg matching reference */
/* Scroll Fix: Ensure flex containers don't block scrolling on small screens */
.drawer-body,
.panel-layer {
  min-height: 0 !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  /* overflow: hidden !important; */
}

/* Quick chips: match reference style with soft background and colored borders */
.quick-chips {
  display: flex !important;
  gap: 8px !important;
  padding: 16px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.quick-chips::-webkit-scrollbar {
  display: none !important;
}

.quick-chip {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-radius: 50px !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
}
.quick-chip--fire {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}
.quick-chip--star {
  background: #fefce8 !important;
  border-color: #fde047 !important;
  color: #a16207 !important;
}
.quick-chip--new {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #15803d !important;
}
.quick-chip--trophy {
  background: #faf5ff !important;
  border-color: #e9d5ff !important;
  color: #7e22ce !important;
}

/* Search bar: Match mockup white pill with elegant shadow */
.search-wrap {
  background: #ffffff !important;
  border-radius: 50px !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  height: 48px !important;
}
.search-input {
  background: transparent !important;
  font-size: 13.5px !important;
  color: #1e293b !important;
}

/* ── Premium Accordion Transitions ── */
.category-row__plus-minus {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--clr-primary);
  flex-shrink: 0;
  margin-left: auto;
}
.category-row.is-expanded .category-row__plus-minus,
.nav-row.is-expanded .category-row__plus-minus {
  transform: rotate(180deg);
}
.category-row__plus-minus .vertical-line {
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.15s ease;
  transform-origin: center;
}
.category-row.is-expanded .category-row__plus-minus .vertical-line {
  transform: rotate(90deg) scale(0);
  opacity: 0;
}

/* Accordion Body Smooth Fade */
.accordion-body-wrapper {
  transition:
    opacity 0.2s ease 0.05s,
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(-4px);
}
.is-expanded + div .accordion-body-wrapper {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════
   ROOT NAV ACCORDION — Premium Expanded State
   Smooth transition + visual diff from collapsed rows
   ═══════════════════════════════════════════════════════ */

/* Base transition for ALL root nav rows */
.nav-list .nav-row.nav-row--panel-trigger {
  transition:
    background 0.18s ease,
    border-left-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease !important;
  border-left: 3px solid transparent !important;
  padding-left: 13px !important;
}

/* Expanded state — premium highlight */
.nav-list .nav-row.nav-row--panel-trigger.is-expanded {
  background: linear-gradient(110deg, #eef2ff 0%, #f5f7ff 100%) !important;
  border-left-color: #4f46e5 !important;
  box-shadow: 0 2px 12px rgba(79, 70, 229, 0.08) !important;
}

/* Label color shift when expanded */
.nav-list .nav-row.nav-row--panel-trigger.is-expanded .nav-label {
  color: #3730a3 !important;
  font-weight: 700 !important;
}

/* Chevron color shift when expanded */
.nav-list
  .nav-row.nav-row--panel-trigger.is-expanded
  .category-row__plus-minus {
  color: #4f46e5 !important;
}

/* Per-category accent colors when expanded */

/* Dog Fences — blue */
.nav-list li:nth-child(1) .nav-row.is-expanded {
  background: linear-gradient(
    110deg,
    rgba(21, 101, 192, 0.08) 0%,
    rgba(21, 101, 192, 0.02) 100%
  ) !important;
  border-left-color: #1565c0 !important;
  box-shadow: 0 2px 12px rgba(21, 101, 192, 0.08) !important;
}
.nav-list li:nth-child(1) .nav-row.is-expanded .nav-label {
  color: #1565c0 !important;
}
.nav-list li:nth-child(1) .nav-row.is-expanded .category-row__plus-minus {
  color: #1565c0 !important;
}

/* Training Collars — purple */
.nav-list li:nth-child(2) .nav-row.is-expanded {
  background: linear-gradient(
    110deg,
    rgba(106, 27, 154, 0.08) 0%,
    rgba(106, 27, 154, 0.02) 100%
  ) !important;
  border-left-color: #6a1b9a !important;
  box-shadow: 0 2px 12px rgba(106, 27, 154, 0.08) !important;
}
.nav-list li:nth-child(2) .nav-row.is-expanded .nav-label {
  color: #6a1b9a !important;
}
.nav-list li:nth-child(2) .nav-row.is-expanded .category-row__plus-minus {
  color: #6a1b9a !important;
}

/* Bark Collars — red/orange */
.nav-list li:nth-child(3) .nav-row.is-expanded {
  background: linear-gradient(
    110deg,
    rgba(191, 54, 12, 0.08) 0%,
    rgba(191, 54, 12, 0.02) 100%
  ) !important;
  border-left-color: #bf360c !important;
  box-shadow: 0 2px 12px rgba(191, 54, 12, 0.08) !important;
}
.nav-list li:nth-child(3) .nav-row.is-expanded .nav-label {
  color: #bf360c !important;
}
.nav-list li:nth-child(3) .nav-row.is-expanded .category-row__plus-minus {
  color: #bf360c !important;
}

/* Dangerous Dogs — amber */
.nav-list li:nth-child(4) .nav-row.is-expanded {
  background: linear-gradient(
    110deg,
    rgba(245, 127, 23, 0.08) 0%,
    rgba(245, 127, 23, 0.02) 100%
  ) !important;
  border-left-color: #f57f17 !important;
  box-shadow: 0 2px 12px rgba(245, 127, 23, 0.08) !important;
}
.nav-list li:nth-child(4) .nav-row.is-expanded .nav-label {
  color: #e65100 !important;
}
.nav-list li:nth-child(4) .nav-row.is-expanded .category-row__plus-minus {
  color: #f57f17 !important;
}

/* The Pet Shop — green */
.nav-list li:nth-child(5) .nav-row.is-expanded {
  background: linear-gradient(
    110deg,
    rgba(46, 125, 50, 0.08) 0%,
    rgba(46, 125, 50, 0.02) 100%
  ) !important;
  border-left-color: #2e7d32 !important;
  box-shadow: 0 2px 12px rgba(46, 125, 50, 0.08) !important;
}
.nav-list li:nth-child(5) .nav-row.is-expanded .nav-label {
  color: #2e7d32 !important;
}
.nav-list li:nth-child(5) .nav-row.is-expanded .category-row__plus-minus {
  color: #2e7d32 !important;
}

/* ═══════════════════════════════════════════════════════
   SPOTLIGHT EFFECT — Active accordion stands out
   When any item is expanded, inactive rows fade back
   ═══════════════════════════════════════════════════════ */

/* Ensure all nav-row transitions include opacity & filter */
.nav-list .nav-row.nav-row--panel-trigger,
.nav-list .nav-row.nav-row--link {
  transition:
    background 0.18s ease,
    border-left-color 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease,
    filter 0.18s ease !important;
}

/* Dim all rows when one is active */
.nav-list.has-active li .nav-row.nav-row--panel-trigger:not(.is-expanded),
.nav-list.has-active li .nav-row.nav-row--link {
  opacity: 0.38 !important;
  filter: grayscale(25%) !important;
}

/* Active row: lift it up visually */
.nav-list.has-active li .nav-row.is-expanded {
  opacity: 1 !important;
  filter: none !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07) !important;
  z-index: 1;
  position: relative;
}

/* Icon pops slightly when active */
.nav-list.has-active li .nav-row.is-expanded .category-row__icon {
  transform: scale(1.08);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}