/**
 * Unified sticky header: brand row + categories in one column; sticks for full page scroll.
 */

html {
  scroll-padding-top: var(
    --roots-scroll-offset,
    calc(var(--roots-sticky-nav-h, 68px) + var(--roots-scroll-gap, 16px))
  );
}

/* —— App header: brand row, then category nav —— */
.roots-bar-main > .roots-app-header {
  position: sticky;
  top: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: var(--roots-nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.roots-app-header__bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--roots-space-12);
  width: 100%;
  padding: var(--roots-space-12) var(--roots-space-16);
  box-sizing: border-box;
  direction: ltr;
  border-bottom: 1px solid var(--roots-badge-border);
  flex-shrink: 0;
}

/* Categories live inside header — one sticky unit, no overlap */
.roots-app-header > .roots-nav,
.roots-app-header > .roots-sticky-nav,
.roots-app-header > .wcg-category-grid,
.roots-app-header > .wcg-category-grid.roots-sticky-nav,
.roots-app-header > .wp-block-wc-category-grid-category-grid,
.roots-sticky-nav,
.roots-menu .roots-nav,
.roots-bar-main > .wcg-category-grid.roots-sticky-nav,
.roots-bar-main > .wcg-category-grid {
  position: relative;
  top: auto;
  z-index: auto;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: var(--roots-nav-shell-min-height);
  background: var(--roots-nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Hide leftover duplicate grids at main level once header owns categories */
.roots-bar-main:has(.roots-app-header .wcg-category-grid) > .wcg-category-grid,
.roots-bar-main:has(.roots-app-header .wp-block-wc-category-grid-category-grid) > .wp-block-wc-category-grid-category-grid,
.roots-bar-main:has(.roots-app-header .roots-nav) > .wcg-category-grid,
.roots-bar-main:has(.roots-app-header .roots-nav) > .wp-block-wc-category-grid-category-grid {
  display: none !important;
}

/* Category nav shell — vertical rhythm only; horizontal bleed is breakpoint-specific below */
.roots-bar-main > .roots-nav,
.roots-bar-main > .wp-block-wc-category-grid-category-grid,
.roots-bar-main > .wcg-category-grid,
.roots-menu .roots-nav,
.roots-app-header > .roots-nav,
.roots-app-header > .wcg-category-grid,
.roots-app-header > .wp-block-wc-category-grid-category-grid {
  box-sizing: border-box;
  padding-block: var(--roots-chip-grid-pad-block, 16px);
  padding-inline: 0;
}

.roots-app-header > .roots-nav,
.roots-app-header > .wcg-category-grid,
.roots-app-header > .wp-block-wc-category-grid-category-grid {
  border-bottom: none;
}

.roots-bar-main .wcg-category-grid__inner {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.roots-app-header__brand {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--roots-text-primary);
  font: 800 clamp(0.6875rem, 3.4vw, 0.9375rem) / 1.2 var(--roots-font-family);
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Luxury capsule light / dark switch */
.roots-theme-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.roots-theme-pill:focus-visible {
  outline: 2px solid var(--roots-text-primary);
  outline-offset: 4px;
  border-radius: var(--roots-radius-pill);
}

.roots-theme-pill__track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--roots-pill-width, 4.625rem);
  height: var(--roots-pill-height, 2rem);
  padding: 0.25rem;
  box-sizing: border-box;
  direction: ltr;
  border: 1px solid var(--roots-pill-track-border);
  border-radius: var(--roots-radius-pill);
  background: var(--roots-pill-track-bg);
  box-shadow: var(--roots-pill-track-shadow);
  transition:
    background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.roots-theme-pill__thumb {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  z-index: 2;
  width: var(--roots-pill-thumb-size, 1.5rem);
  height: var(--roots-pill-thumb-size, 1.5rem);
  border-radius: 50%;
  background: var(--roots-pill-thumb-bg);
  box-shadow: var(--roots-pill-thumb-shadow);
  transform: translateY(-50%);
  transition:
    right 0.32s cubic-bezier(0.34, 1.2, 0.64, 1),
    left 0.32s cubic-bezier(0.34, 1.2, 0.64, 1),
    background 0.32s ease,
    box-shadow 0.32s ease;
}

html[data-roots-theme="dark"] .roots-theme-pill__thumb {
  right: auto;
  left: 0.25rem;
}

.roots-theme-pill__icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50%;
  height: 100%;
  pointer-events: none;
  opacity: var(--roots-pill-icon-dim, 0.38);
  transition: opacity 0.28s ease, color 0.28s ease;
}

.roots-theme-pill__icon--moon {
  color: var(--roots-pill-icon-moon);
}

.roots-theme-pill__icon--sun {
  color: var(--roots-pill-icon-sun);
}

.roots-theme-pill__icon svg {
  display: block;
  width: 0.9375rem;
  height: 0.9375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.roots-theme-pill__icon--moon svg {
  fill: currentColor;
  fill-opacity: 0.12;
}

html:not([data-roots-theme="dark"]) .roots-theme-pill__icon--sun {
  opacity: 1;
}

html[data-roots-theme="dark"] .roots-theme-pill__icon--moon {
  opacity: 1;
}

@keyframes roots-pill-sun-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

html:not([data-roots-theme="dark"]) .roots-theme-pill__icon--sun svg {
  transform-origin: center;
  animation: roots-pill-sun-spin 14s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-roots-theme="dark"]) .roots-theme-pill__icon--sun svg {
    animation: none;
  }
}

/* Anchor targets clear the stuck category bar + gap */
.roots-section,
.roots-section__head,
.roots-section__bar,
.roots-footer {
  scroll-margin-top: var(
    --roots-scroll-offset,
    calc(var(--roots-sticky-nav-h, 68px) + var(--roots-scroll-gap, 16px))
  );
}

.roots-nav__bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--roots-space-8);
  width: 100%;
  direction: rtl;
}

.roots-nav__bar .roots-nav__chips,
.roots-nav__bar .wcg-category-grid__list {
  flex: 1 1 auto;
  min-width: 0;
}

/*
 * Horizontally scrollable category nav (all breakpoints)
 *
 * <nav class="roots-nav roots-sticky-nav" aria-label="…">
 *   <div class="roots-nav__bar roots-nav-scroll-host">
 *     <div class="roots-nav__chips roots-category-grid" role="list">
 *       <button type="button" class="roots-chip">…</button>
 *     </div>
 *   </div>
 * </nav>
 */

.roots-category-grid,
.roots-nav__chips,
.roots-nav__bar .roots-nav__chips,
.roots-nav__bar .wcg-category-grid__list,
.roots-bar-main .roots-nav__chips,
.roots-bar-main .wcg-category-grid__list {
  display: flex !important;
  flex-flow: row nowrap !important;
  flex-wrap: nowrap !important;
  gap: var(--roots-chip-grid-gap, 8px);
  width: 100%;
  max-width: none;
  height: auto;
  min-height: var(--roots-nav-chip-track-min-height);
  margin: 0;
  padding-inline: var(--roots-nav-scroll-pad-inline, 16px);
  padding-block: 0;
  scroll-padding-inline: var(--roots-nav-scroll-pad-inline, 16px);
  box-sizing: border-box;
  list-style: none;
  justify-content: flex-start;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  direction: rtl;
  grid-template-columns: unset !important;
}

.roots-category-grid > .roots-chip,
.roots-nav__chips > .roots-chip,
.roots-bar-main .wcg-category-grid__item {
  flex: 0 0 var(--roots-chip-width, 150px) !important;
  flex-shrink: 0 !important;
  width: var(--roots-chip-width, 150px) !important;
  min-width: var(--roots-chip-width, 150px) !important;
  max-width: var(--roots-chip-width, 150px) !important;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roots-nav__chips::-webkit-scrollbar,
.roots-nav__bar .roots-nav__chips::-webkit-scrollbar,
.roots-nav__bar .wcg-category-grid__list::-webkit-scrollbar,
.roots-bar-main .wcg-category-grid__list::-webkit-scrollbar {
  display: none;
}

.roots-nav__bar,
.roots-nav-scroll-host {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: auto;
  min-height: var(--roots-nav-chip-track-min-height);
  overflow-x: hidden;
  overflow-y: visible;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding-block: var(--roots-nav-scroll-pad-block, 8px);
  padding-inline: 0;
  box-sizing: border-box;
}

.roots-nav-scroll-host > .roots-nav__chips,
.roots-nav-scroll-host > .wcg-category-grid__list,
.roots-nav-scroll-host > .roots-category-grid,
.roots-nav__bar > .roots-nav__chips,
.roots-nav__bar > .wcg-category-grid__list {
  position: relative;
  z-index: 1;
}

/*
 * RTL edge fades (physical left/right) — toggled by JS:
 * .has-fade-left  → more content off the left edge
 * .has-fade-right → more content off the right edge (appears after scrolling left)
 *
 * Overlays span the host’s horizontal padding zone (--roots-nav-scroll-pad-inline).
 * Initial (at visual right / menu start): left fade only; right padding stays clear.
 * Middle scroll: both fades
 * End (at visual left): right fade only
 */
.roots-nav-scroll-host::before,
.roots-nav-scroll-host::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--roots-nav-scroll-pad-inline, 16px);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}

/* Physical right — hidden at RTL start; appears after scrolling left */
.roots-nav-scroll-host::before {
  right: 0;
  background: linear-gradient(
    to left,
    var(--roots-nav-fade-solid, var(--roots-nav-fade-base, var(--roots-nav-bg))) 0%,
    var(--roots-nav-fade-solid, var(--roots-nav-fade-base, var(--roots-nav-bg))) 28%,
    transparent 100%
  );
}

/* Physical left — visible at RTL start to hint more categories */
.roots-nav-scroll-host::after {
  left: 0;
  background: linear-gradient(
    to right,
    var(--roots-nav-fade-solid, var(--roots-nav-fade-base, var(--roots-nav-bg))) 0%,
    var(--roots-nav-fade-solid, var(--roots-nav-fade-base, var(--roots-nav-bg))) 28%,
    transparent 100%
  );
}

.roots-nav-scroll-host.has-fade-right::before {
  opacity: 1;
}

.roots-nav-scroll-host.has-fade-left::after {
  opacity: 1;
}

/* Mask the scroll row — fade width matches host padding zone */
.roots-nav-scroll-host.has-fade-left:not(.has-fade-right) > .roots-nav__chips,
.roots-nav-scroll-host.has-fade-left:not(.has-fade-right) > .wcg-category-grid__list,
.roots-nav-scroll-host.has-fade-left:not(.has-fade-right) > .roots-category-grid,
.roots-nav__bar.has-fade-left:not(.has-fade-right) > .roots-nav__chips,
.roots-nav__bar.has-fade-left:not(.has-fade-right) > .wcg-category-grid__list {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--roots-nav-scroll-pad-inline, 16px)
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--roots-nav-scroll-pad-inline, 16px)
  );
}

.roots-nav-scroll-host.has-fade-right:not(.has-fade-left) > .roots-nav__chips,
.roots-nav-scroll-host.has-fade-right:not(.has-fade-left) > .wcg-category-grid__list,
.roots-nav-scroll-host.has-fade-right:not(.has-fade-left) > .roots-category-grid,
.roots-nav__bar.has-fade-right:not(.has-fade-left) > .roots-nav__chips,
.roots-nav__bar.has-fade-right:not(.has-fade-left) > .wcg-category-grid__list {
  -webkit-mask-image: linear-gradient(
    to left,
    transparent 0,
    #000 var(--roots-nav-scroll-pad-inline, 16px)
  );
  mask-image: linear-gradient(
    to left,
    transparent 0,
    #000 var(--roots-nav-scroll-pad-inline, 16px)
  );
}

.roots-nav-scroll-host.has-fade-left.has-fade-right > .roots-nav__chips,
.roots-nav-scroll-host.has-fade-left.has-fade-right > .wcg-category-grid__list,
.roots-nav-scroll-host.has-fade-left.has-fade-right > .roots-category-grid,
.roots-nav__bar.has-fade-left.has-fade-right > .roots-nav__chips,
.roots-nav__bar.has-fade-left.has-fade-right > .wcg-category-grid__list {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--roots-nav-scroll-pad-inline, 16px),
    #000 calc(100% - var(--roots-nav-scroll-pad-inline, 16px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--roots-nav-scroll-pad-inline, 16px),
    #000 calc(100% - var(--roots-nav-scroll-pad-inline, 16px)),
    transparent 100%
  );
}

.roots-nav-scroll-host > .roots-nav__chips,
.roots-nav-scroll-host > .wcg-category-grid__list,
.roots-nav-scroll-host > .roots-category-grid,
.roots-nav__bar > .roots-nav__chips,
.roots-nav__bar > .wcg-category-grid__list {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

html[data-roots-theme="dark"] .roots-sticky-nav,
html[data-roots-theme="dark"] .roots-menu .roots-nav,
html[data-roots-theme="dark"] .roots-bar-main > .wcg-category-grid,
html[data-roots-theme="dark"] .roots-app-header > .roots-nav,
html[data-roots-theme="dark"] .roots-app-header > .wcg-category-grid {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Category scroll items — fixed 150px track, centered label */
.roots-category-grid > .roots-chip,
.roots-nav__chips > .roots-chip,
.roots-bar-main .wcg-category-grid__list .wcg-category-grid__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: var(--roots-chip-height, 28px) !important;
  max-height: none !important;
  margin: 0 !important;
  padding: var(--roots-chip-pad-block, 6px) var(--roots-chip-pad-inline, 10px) !important;
  font-size: var(--roots-font-chip-size, 12px) !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
  background-color: var(--roots-chip-bg, var(--roots-accent-menu));
  color: var(--roots-chip-color, var(--roots-text-primary));
}

.roots-bar-main .wcg-category-grid__list > .wcg-category-grid__button {
  flex: 0 0 var(--roots-chip-width, 150px) !important;
  width: var(--roots-chip-width, 150px) !important;
  min-width: var(--roots-chip-width, 150px) !important;
  max-width: var(--roots-chip-width, 150px) !important;
}

/* Scroll-spy active chip — background/weight only; size/padding unchanged */
.roots-chip.is-active,
.roots-nav__chips > .roots-chip.is-active,
.roots-category-grid > .roots-chip.is-active,
.roots-bar-main .wcg-category-grid__list .wcg-category-grid__button.is-active {
  background-color: var(--roots-chip-active-bg, color-mix(in srgb, var(--roots-chip-bg, #ccc) 78%, #5a5a52)) !important;
  color: var(--roots-chip-active-color, var(--roots-chip-color, var(--roots-text-primary))) !important;
  font-weight: var(--roots-chip-active-weight, 400) !important;
  box-shadow: var(
    --roots-chip-active-shadow,
    inset 0 0 0 1px color-mix(in srgb, var(--roots-text-primary) 12%, transparent)
  ) !important;
}

.roots-bar-main .wcg-category-grid__list .wcg-category-grid__label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1 !important;
}

/*
 * Mobile & tablet (<1440px): viewport breakout — nav strip only.
 * Header / body keep parent padding; fades align to physical screen edges.
 */
@media (max-width: 89.9375rem) {
  .roots-menu .roots-nav,
  .roots-menu .roots-nav.roots-sticky-nav,
  .roots-bar-main > .roots-nav,
  .roots-bar-main > .wcg-category-grid,
  .roots-bar-main > .wp-block-wc-category-grid-category-grid,
  .roots-app-header > .roots-nav,
  .roots-app-header > .roots-sticky-nav,
  .roots-app-header > .wcg-category-grid,
  .roots-app-header > .wp-block-wc-category-grid-category-grid {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-block: var(--roots-chip-grid-pad-block, 16px);
    padding-inline: 0;
  }

  .roots-bar-main .wcg-category-grid__inner {
    max-width: none;
  }
}

/*
 * Desktop (≥1440px): no viewport breakout — snap to centered 1440px shell.
 * Fades align to the container left/right edges.
 */
@media (min-width: 90rem) {
  .roots-menu .roots-nav,
  .roots-menu .roots-nav.roots-sticky-nav,
  .roots-bar-main > .roots-nav,
  .roots-bar-main > .wcg-category-grid,
  .roots-bar-main > .wp-block-wc-category-grid-category-grid,
  .roots-app-header > .roots-nav,
  .roots-app-header > .roots-sticky-nav,
  .roots-app-header > .wcg-category-grid,
  .roots-app-header > .wp-block-wc-category-grid-category-grid {
    width: 100%;
    max-width: var(--roots-content-max, 1440px);
    margin-inline: auto;
    padding-block: var(--roots-chip-grid-pad-block, 16px);
    padding-inline: 0;
  }

  .roots-bar-main .wcg-category-grid__inner {
    max-width: 100%;
    margin-inline: 0;
  }

  /* Inside padded .roots-menu__inner — span full 1440px box edges */
  .roots-menu__inner > .roots-nav {
    width: calc(100% + 2 * var(--roots-space-32));
    max-width: none;
    margin-inline: calc(-1 * var(--roots-space-32));
  }
}

/*
 * Desktop (≥1024px): edge-to-edge background strip + centered 1440px inner track.
 * Fades lock to the 1440px box (scroll-host), not the viewport.
 * Mobile/tablet rules above are intentionally untouched.
 */
@media (min-width: 1024px) {
  .roots-menu .roots-nav,
  .roots-menu .roots-nav.roots-sticky-nav,
  .roots-bar-main > .roots-nav,
  .roots-bar-main > .wcg-category-grid,
  .roots-bar-main > .wcg-category-grid.roots-sticky-nav,
  .roots-bar-main > .wp-block-wc-category-grid-category-grid,
  .roots-app-header > .roots-nav,
  .roots-app-header > .roots-sticky-nav,
  .roots-app-header > .wcg-category-grid,
  .roots-app-header > .wcg-category-grid.roots-sticky-nav,
  .roots-app-header > .wp-block-wc-category-grid-category-grid {
    display: flex;
    justify-content: center;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: 0;
  }

  .roots-menu__inner > .roots-nav {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .category-menu-inner-container,
  .roots-nav__bar,
  .roots-nav-scroll-host,
  .roots-bar-main .wcg-category-grid__inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
  }

  .category-menu-inner-container:not(.is-overflowing) > .scroll-container,
  .category-menu-inner-container:not(.is-overflowing) > .roots-nav__chips,
  .category-menu-inner-container:not(.is-overflowing) > .wcg-category-grid__list,
  .category-menu-inner-container:not(.is-overflowing) > .roots-category-grid,
  .roots-nav-scroll-host:not(.is-overflowing) > .scroll-container,
  .roots-nav-scroll-host:not(.is-overflowing) > .roots-nav__chips,
  .roots-nav-scroll-host:not(.is-overflowing) > .wcg-category-grid__list,
  .roots-nav-scroll-host:not(.is-overflowing) > .roots-category-grid,
  .roots-nav__bar:not(.is-overflowing) > .scroll-container,
  .roots-nav__bar:not(.is-overflowing) > .roots-nav__chips,
  .roots-nav__bar:not(.is-overflowing) > .wcg-category-grid__list {
    justify-content: center !important;
  }

  .category-menu-inner-container:not(.is-overflowing)::before,
  .category-menu-inner-container:not(.is-overflowing)::after,
  .roots-nav-scroll-host:not(.is-overflowing)::before,
  .roots-nav-scroll-host:not(.is-overflowing)::after,
  .roots-nav__bar:not(.is-overflowing)::before,
  .roots-nav__bar:not(.is-overflowing)::after {
    opacity: 0 !important;
  }
}

.roots-theme-pill:active .roots-theme-pill__thumb {
  transform: translateY(-50%) scale(0.96);
}

/* Light mode — clean canvas system */
html:not([data-roots-theme="dark"]) body,
html:not([data-roots-theme="dark"]) .roots-bar-main {
  background: var(--roots-bg-page);
  color: var(--roots-text-body);
}

html:not([data-roots-theme="dark"]) .roots-menu {
  font-weight: 400;
  color: var(--roots-text-primary);
}

html:not([data-roots-theme="dark"]) .roots-app-header {
  background: var(--roots-nav-bg);
}

html:not([data-roots-theme="dark"]) .roots-sticky-nav,
html:not([data-roots-theme="dark"]) .roots-menu .roots-nav,
html:not([data-roots-theme="dark"]) .roots-bar-main > .wcg-category-grid,
html:not([data-roots-theme="dark"]) .roots-app-header > .roots-nav,
html:not([data-roots-theme="dark"]) .roots-app-header > .wcg-category-grid {
  border-bottom: none;
}

html:not([data-roots-theme="dark"]) .roots-card {
  background: var(--roots-surface-card);
  border: none;
  box-shadow: var(--roots-card-shadow);
}

html:not([data-roots-theme="dark"]) .roots-card__title {
  color: var(--roots-text-primary);
}

html:not([data-roots-theme="dark"]) .roots-card__desc {
  color: var(--roots-text-body);
}

html:not([data-roots-theme="dark"]) .roots-card__price,
html:not([data-roots-theme="dark"]) .roots-card__draft-price-value {
  color: var(--roots-text-primary);
}

html:not([data-roots-theme="dark"]) .roots-card__price-prefix,
html:not([data-roots-theme="dark"]) .roots-card__wine-single-label,
html:not([data-roots-theme="dark"]) .roots-card__spirit-single-label,
html:not([data-roots-theme="dark"]) .roots-card__draft-price-label {
  color: var(--roots-text-muted);
}

html:not([data-roots-theme="dark"]) .roots-section__title {
  color: var(--roots-text-primary);
}

html:not([data-roots-theme="dark"]) .roots-section__subtitle,
html:not([data-roots-theme="dark"]) .roots-footer__line {
  color: var(--roots-text-body);
}

html:not([data-roots-theme="dark"]) .roots-footer {
  background: var(--roots-footer-card-bg);
  box-shadow: var(--roots-card-shadow);
}

html:not([data-roots-theme="dark"]) .roots-sticky-nav,
html:not([data-roots-theme="dark"]) .roots-menu .roots-nav,
html:not([data-roots-theme="dark"]) .roots-bar-main > .wcg-category-grid,
html:not([data-roots-theme="dark"]) .roots-app-header > .roots-nav,
html:not([data-roots-theme="dark"]) .roots-app-header > .wcg-category-grid {
  background: var(--roots-nav-bg);
}

html:not([data-roots-theme="dark"]) .roots-section__bar {
  background-color: var(--roots-accent-menu);
}

/* Nav chips — outlined pills, dark active state */
html:not([data-roots-theme="dark"]) .roots-chip,
html:not([data-roots-theme="dark"]) .roots-nav .roots-chip,
html:not([data-roots-theme="dark"]) .roots-menu .roots-chip,
html:not([data-roots-theme="dark"]) .roots-bar-main .roots-chip,
html:not([data-roots-theme="dark"]) .roots-bar-main .wcg-category-grid__button,
html:not([data-roots-theme="dark"]) .wcg-category-grid__button,
html:not([data-roots-theme="dark"]) .wcg-category-grid__button:hover,
html:not([data-roots-theme="dark"]) .wcg-category-grid__button:focus-visible {
  --wcg-item-bg: #ffffff;
  --wcg-btn-bg: #ffffff;
  --wcg-active-bg: #1f2937;
  --wcg-item-text: #374151;
  --wcg-btn-text: #374151;
  --wcg-active-text: #ffffff;
  background-color: #ffffff !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
}

html:not([data-roots-theme="dark"]) .roots-chip.is-active,
html:not([data-roots-theme="dark"]) .roots-nav .roots-chip.is-active,
html:not([data-roots-theme="dark"]) .roots-menu .roots-chip.is-active,
html:not([data-roots-theme="dark"]) .roots-bar-main .roots-chip.is-active,
html:not([data-roots-theme="dark"]) .roots-bar-main .wcg-category-grid__button.is-active,
html:not([data-roots-theme="dark"]) .wcg-category-grid__button.is-active {
  background-color: var(--roots-chip-active-bg, #1f2937) !important;
  color: var(--roots-chip-active-color, #ffffff) !important;
  border-color: var(--roots-chip-active-bg, #1f2937) !important;
  box-shadow: none !important;
  font-weight: var(--roots-chip-active-weight, 500) !important;
}

html:not([data-roots-theme="dark"]) .roots-bar-main .wcg-category-grid__label {
  color: inherit !important;
}

html:not([data-roots-theme="dark"]) .roots-card__kosher-badge--kosher,
html:not([data-roots-theme="dark"]) .roots-card__overlay-badge--positive {
  color: var(--roots-kosher-badge-kosher-text);
  background: var(--roots-kosher-badge-kosher-bg);
  border-color: var(--roots-kosher-badge-kosher-border);
}

html:not([data-roots-theme="dark"]) .roots-card__kosher-badge--not-kosher,
html:not([data-roots-theme="dark"]) .roots-card__overlay-badge--negative {
  color: var(--roots-kosher-badge-not-text);
  background: var(--roots-kosher-badge-not-bg);
  border-color: var(--roots-kosher-badge-not-border);
}

/* Overlay pills (כשר, טבעוני, category tags) — token-driven in dark mode */
html[data-roots-theme="dark"] .roots-card__overlay-badge--neutral {
  color: var(--roots-overlay-badge-fg);
  background: var(--roots-overlay-badge-bg);
  border-color: var(--roots-overlay-badge-border);
}

html[data-roots-theme="dark"] .roots-card__kosher-badge--kosher,
html[data-roots-theme="dark"] .roots-card__overlay-badge--positive {
  color: var(--roots-kosher-badge-kosher-text);
  background: var(--roots-kosher-badge-kosher-bg);
  border-color: var(--roots-kosher-badge-kosher-border);
}

html[data-roots-theme="dark"] .roots-card__kosher-badge--not-kosher,
html[data-roots-theme="dark"] .roots-card__overlay-badge--negative {
  color: var(--roots-kosher-badge-not-text);
  background: var(--roots-kosher-badge-not-bg);
  border-color: var(--roots-kosher-badge-not-border);
}

html[data-roots-theme="dark"] .roots-card__price-prefix,
html[data-roots-theme="dark"] .roots-card__wine-single-label,
html[data-roots-theme="dark"] .roots-card__spirit-single-label {
  color: var(--roots-text-muted);
}

html[data-roots-theme="dark"] .roots-hero__rule {
  background: #fff;
}

/* Nav chips — #1E1E1E / white text (beats WC grid custom props + legacy inline) */
html[data-roots-theme="dark"] .roots-chip,
html[data-roots-theme="dark"] .roots-nav .roots-chip,
html[data-roots-theme="dark"] .roots-menu .roots-chip,
html[data-roots-theme="dark"] .roots-bar-main .roots-chip,
html[data-roots-theme="dark"] .roots-bar-main .wcg-category-grid__button,
html[data-roots-theme="dark"] .wcg-category-grid__button,
html[data-roots-theme="dark"] .wcg-category-grid__button.is-active,
html[data-roots-theme="dark"] .wcg-category-grid__button:hover,
html[data-roots-theme="dark"] .wcg-category-grid__button:focus-visible {
  --wcg-item-bg: #1e1e1e;
  --wcg-btn-bg: #1e1e1e;
  --wcg-active-bg: #1e1e1e;
  --wcg-item-text: #ffffff;
  --wcg-btn-text: #ffffff;
  --wcg-active-text: #ffffff;
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-roots-theme="dark"] .roots-chip.is-active,
html[data-roots-theme="dark"] .roots-nav .roots-chip.is-active,
html[data-roots-theme="dark"] .roots-menu .roots-chip.is-active,
html[data-roots-theme="dark"] .roots-bar-main .roots-chip.is-active,
html[data-roots-theme="dark"] .roots-bar-main .wcg-category-grid__button.is-active,
html[data-roots-theme="dark"] .wcg-category-grid__button.is-active {
  background-color: var(--roots-chip-active-bg, #2e2e2e) !important;
  box-shadow: var(--roots-chip-active-shadow, inset 0 0 0 1px rgba(255, 255, 255, 0.2)) !important;
  font-weight: var(--roots-chip-active-weight, 400) !important;
}

html[data-roots-theme="dark"] .roots-bar-main .wcg-category-grid__label {
  color: #ffffff !important;
}

html[data-roots-theme="dark"] .roots-sticky-nav,
html[data-roots-theme="dark"] .roots-menu .roots-nav,
html[data-roots-theme="dark"] .roots-bar-main > .wcg-category-grid,
html[data-roots-theme="dark"] .roots-app-header > .roots-nav,
html[data-roots-theme="dark"] .roots-app-header > .wcg-category-grid {
  background: var(--roots-nav-bg);
}

html[data-roots-theme="dark"] .roots-section__bar {
  background-color: var(--roots-accent-menu);
}