*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--gradient-page-shell);
  color: var(--color-text-strong);
  font-family: "Nunito Sans", sans-serif;
}

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

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

button,
input,
summary {
  font: inherit;
}

button {
  cursor: pointer;
}

.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;
}

.shell {
  /* Cap content at 1920px and center it, while the element itself stays
     full-width so section backgrounds remain full-bleed. ≤2000px viewports keep
     the original 40px side padding; beyond that the padding grows symmetrically
     to hold the 1920px content column. */
  padding-left: max(40px, calc((100% - 1920px) / 2));
  padding-right: max(40px, calc((100% - 1920px) / 2));
}

.site-shell {
  min-height: 100vh;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg-page);
  box-shadow: var(--shadow-400);
  transform: translateY(0);
  will-change: transform;
  transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.is-hidden {
  transform: translateY(calc(-100% - 8px));
}

.desktop-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  padding-top: 40px;
  padding-bottom: 12px;
}

.mobile-header {
  display: none;
}

.nav-main {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr) auto;
  align-items: center;
  gap: 104px;
  padding-bottom: 0;
}

.brand {
  min-width: 0;
}

.brand img {
  width: min(100%, 285px);
  height: auto;
  aspect-ratio: 285 / 42;
}

.brand--mobile img {
  width: min(100%, 163px);
  height: auto;
  aspect-ratio: 163 / 24;
}

.search-form,
.search-field,
.nav-actions,
.nav-categories,
.mobile-topbar,
.mobile-actions,
.hero-actions,
.hero-controls,
.hero-dots,
.section-head,
.product-actions,
.footer-bottom,
.brands-list,
.newsletter-form,
.cta-section {
  display: flex;
  align-items: center;
}

.search-form {
  gap: var(--space-400);
  width: 100%;
  max-width: none;
}

.search-field {
  flex: 1;
  gap: var(--space-300);
  min-height: 48px;
  padding: 0 var(--space-400);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-300);
}

.search-field img,
.newsletter-input img,
.search-field .icon-svg,
.newsletter-input .icon-svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.search-field input,
.newsletter-input input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-strong);
  outline: none;
  font-size: 16px;
  line-height: 22px;
}

.search-field input::placeholder,
.newsletter-input input::placeholder {
  color: var(--color-text-placeholder);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-200);
  min-height: 48px;
  padding: 0 var(--space-500);
  border-radius: var(--radius-300);
  border: 1px solid transparent;
  box-shadow: var(--shadow-100);
  font-family: "Nunito Sans", sans-serif;
  font-variation-settings: "YTLC" 500, "wdth" 100;
  font-size: var(--type-button-lg-size);
  font-weight: 500;
  line-height: var(--type-button-lg-line);
  letter-spacing: var(--type-button-lg-track);
  text-transform: none;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.search-form > .button {
  flex: 0 0 auto;
  min-width: 66px;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-400);
}

.button img {
  width: auto;
  height: auto;
  max-width: 20px;
  max-height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
}

.icon-svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: currentColor;
  display: inline-block;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-svg--xs {
  width: 14px;
  height: 14px;
}

.icon-svg--sm {
  width: 16px;
  height: 16px;
}

.icon-svg--md {
  width: 20px;
  height: 20px;
}

.icon-svg--lg {
  width: 28px;
  height: 28px;
}

.icon-svg--menu {
  width: 24px;
  height: 24px;
}

.button--primary {
  background: var(--color-bg-fill-brand);
  color: var(--color-text-adaptive);
}

.button--secondary {
  background: var(--color-bg-surface);
  border-color: var(--color-border-base);
  color: var(--color-text-strong);
}

.button--magic {
  background: var(--color-bg-fill-magic);
  color: var(--color-text-adaptive);
}

.button--success {
  background: var(--color-bg-fill-success);
  color: var(--color-text-strong);
}

.button--ghost {
  background: var(--overlay-surface);
  border-color: var(--overlay-white-85);
  color: var(--color-text-adaptive);
}

.button--small {
  min-height: 40px;
}

.nav-actions {
  gap: var(--space-500);
  justify-self: end;
}

.nav-actions .button--secondary {
  min-width: 102px;
}

.nav-actions .button--secondary img {
  width: auto;
  max-width: 20px;
  height: auto;
  max-height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
}

.cart-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-200);
  min-height: 48px;
  padding-right: 2px;
}

.cart-button img {
  width: auto;
  max-width: 20px;
  height: auto;
  max-height: 20px;
  object-fit: contain;
}

.cart-button .icon-svg,
.nav-actions .button--secondary .icon-svg,
.icon-button .icon-svg,
.mobile-menu-button .icon-svg,
.all-trigger .icon-svg,
.icon-close .icon-svg,
.sidebar-item summary .icon-svg,
.section-link .icon-svg {
  flex: 0 0 auto;
}

.cart-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-page);
  font-size: 14px;
  line-height: 20px;
}

.nav-divider {
  height: 1px;
  background: var(--color-border-strong);
}

.nav-categories {
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding-top: 0;
  gap: 20px;
}

.all-trigger,
.nav-category {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  padding: 0 0 8px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--color-text-strong);
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-sm-size);
  line-height: var(--type-heading-sm-line);
  letter-spacing: var(--type-heading-sm-track);
  text-transform: uppercase;
  transition: color 160ms ease, border-color 160ms ease;
}

.all-trigger span {
  color: var(--color-text-subtle);
}

.all-trigger .icon-svg {
  color: var(--color-bg-fill-magic);
}

.nav-category:hover,
.nav-category:focus-visible,
.nav-category.is-active {
  border-color: var(--color-border-focus);
}

.nav-category--sale {
  color: var(--color-text-magic);
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  padding-top: var(--space-600);
  padding-bottom: var(--space-600);
  background: var(--color-bg-page);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-10px) scale(0.992);
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0ms linear 360ms;
  box-shadow: var(--shadow-400);
}

.mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0ms linear 0ms;
}

.mega-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  gap: 24px 64px;
  align-items: start;
}

.mega-columns > * {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 260ms ease,
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mega-menu.is-open .mega-columns > * {
  opacity: 1;
  transform: translateY(0);
}

.mega-menu.is-open .mega-columns > *:nth-child(1) {
  transition-delay: 40ms;
}

.mega-menu.is-open .mega-columns > *:nth-child(2) {
  transition-delay: 80ms;
}

.mega-menu.is-open .mega-columns > *:nth-child(3) {
  transition-delay: 120ms;
}

.mega-menu.is-open .mega-columns > *:nth-child(4) {
  transition-delay: 160ms;
}

.mega-columns-primary,
.mega-featured {
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
}

.mega-column-page-track {
  position: relative;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mega-columns-primary.is-transitioning .mega-column-page-track {
  opacity: 0.35;
  transform: translateY(6px);
}

.mega-column-page {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 64px;
  min-height: 312px;
  opacity: 0;
  transform: translateY(6px);
}

.mega-column-page.is-active {
  display: grid;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mega-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
}

.mega-column a {
  transition: color 160ms ease, transform 160ms ease;
}

.mega-column a:hover,
.mega-column a:focus-visible {
  color: var(--color-text-brand);
  transform: translateX(2px);
}

.mega-title {
  margin: 0;
  padding-bottom: var(--space-300);
  border-bottom: 1px solid var(--color-border-base);
}

.mega-title--muted {
  color: var(--color-text-subtle);
}

.mega-column a,
.sidebar-item a,
.sidebar-item summary {
  font-size: var(--type-button-lg-size);
  font-weight: 500;
  line-height: var(--type-button-lg-line);
  letter-spacing: var(--type-button-lg-track);
  color: var(--color-text-base);
}

.mega-column a:hover,
.sidebar-item a:hover,
.sidebar-item summary:hover {
  color: var(--color-text-brand);
}

.mega-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-400);
}

.mega-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--space-300);
  margin-top: auto;
  padding-top: var(--space-400);
}

.mega-pagination--category {
  align-self: flex-start;
}

.mega-pagination-pages {
  display: inline-flex;
  align-items: center;
  gap: var(--space-200);
}

.mega-pagination-button,
.mega-pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-300);
  background: transparent;
  color: var(--color-text-subtle);
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.mega-pagination-button:hover,
.mega-pagination-button:focus-visible,
.mega-pagination-page:hover,
.mega-pagination-page:focus-visible {
  background: var(--overlay-brand-8);
  color: var(--color-text-brand);
  transform: translateY(-1px);
}

.mega-pagination-button .icon-svg {
  width: 18px;
  height: 18px;
}

.mega-pagination-button--next .icon-svg {
  transform: rotate(0deg);
}

.mega-pagination-button:not(.mega-pagination-button--next) .icon-svg {
  transform: rotate(180deg);
}

.mega-pagination-page.is-active {
  background: var(--overlay-brand-8);
  color: var(--color-text-base);
}

.mega-featured-card {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-400);
  background: var(--color-bg-surface);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.mega-featured-card:hover,
.mega-featured-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-400);
}

.mega-featured-media {
  position: relative;
  background: var(--color-bg-surface);
  aspect-ratio: 1 / 0.84;
}

.mega-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega-featured-body {
  padding: var(--space-300);
}

.mega-featured-body p,
.mega-featured-body span {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.mega-featured-body span {
  color: var(--color-text-subtle);
}

.sidebar-overlay,
.mobile-sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 240ms ease;
}

.sidebar-overlay.is-open,
.mobile-sidebar-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-sidebar-overlay {
  overflow-y: auto;
}

.sidebar-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-hero);
}

.sidebar-panel,
.mobile-sidebar-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 400px;
  max-width: calc(100vw - 24px);
  min-height: 100vh;
  max-height: 100dvh;
  background: var(--color-bg-surface);
  border-right: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-400);
  transform: translateX(-32px);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  overflow-x: hidden;
}

.mobile-sidebar-panel {
  width: 440px;
  transform: translateX(32px);
  max-height: 100dvh;
  overflow-y: auto;
}

.sidebar-overlay.is-open .sidebar-panel,
.mobile-sidebar-overlay.is-open .mobile-sidebar-panel {
  transform: translateX(0);
}

.sidebar-head,
.sidebar-body,
.sidebar-foot {
  position: relative;
  z-index: 1;
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 64px 24px 24px;
}

.sidebar-account {
  display: flex;
  align-items: center;
  gap: var(--space-500);
  padding: 14px 16px;
  border-radius: var(--radius-400);
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.sidebar-account:hover,
.sidebar-account:focus-visible {
  background: var(--overlay-brand-8);
  box-shadow: var(--shadow-100);
  transform: translateY(-1px);
}

.sidebar-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-brand-soft);
  border-radius: var(--radius-full);
  background: var(--gradient-page-shell);
  color: var(--color-text-adaptive);
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  padding-top: 1px; /* optical center for cap-height typefaces */
  flex-shrink: 0;
}

.sidebar-avatar--nav {
  width: 48px;
  height: 48px;
  font-size: 14px;
  border-width: 1px;
  padding-top: 1px;
}
.nav-account-button {
  padding-left: var(--space-300);
}
.nav-account-button .sidebar-avatar--nav {
  margin-right: 2px;
}

.nav-account-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-300);
}
.nav-account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.nav-account-avatar:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(36, 64, 131, 0.18);
}
.nav-account-avatar:focus-visible {
  outline: 2px solid var(--color-border-brand);
  outline-offset: 2px;
}

.sidebar-name,
.sidebar-title {
  margin: 0;
}

.sidebar-title {
  color: var(--color-text-brand);
}

.sidebar-meta {
  margin: 0;
  color: var(--color-text-subtle);
}

.icon-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
}

.icon-close img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.sidebar-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-600);
  padding: 0 24px 24px;
  overflow-y: auto;
}

.sidebar-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.sidebar-item {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.sidebar-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-400);
  min-height: 44px;
  padding: var(--space-400);
  list-style: none;
  border-radius: var(--radius-300);
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.sidebar-item summary:hover,
.sidebar-item summary:focus-visible {
  background: var(--overlay-brand-6);
}

.sidebar-item summary::-webkit-details-marker {
  display: none;
}

.sidebar-item[open] {
  border-color: var(--overlay-brand-18);
  background: var(--overlay-brand-3);
  box-shadow: inset 0 0 0 1px var(--overlay-brand-8);
}

.sidebar-item[open] summary {
  color: var(--color-text-brand);
}

.sidebar-level-one {
  color: var(--color-text-strong);
}

.sidebar-level-one .icon-svg {
  flex: 0 0 auto;
}

.sidebar-level-one span {
  flex: 1;
}

.sidebar-level-two-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  padding: 0 var(--space-300) var(--space-300);
}

.sidebar-subitem {
  border-radius: var(--radius-300);
  background: transparent;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.sidebar-subitem[open] {
  background: var(--overlay-brand-4);
  box-shadow: inset 0 0 0 1px var(--overlay-brand-6);
}

.sidebar-level-two {
  min-height: 40px;
  padding: 10px 12px;
  color: var(--color-text-base);
}

/* The sub-category label is a link to its own category page; the chevron
   beside it still expands the sub-list. The link fills the row so the whole
   label navigates, leaving only the chevron for toggling. */
.sidebar-level-two-link {
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.sidebar-level-two:hover,
.sidebar-level-two:focus-visible {
  background: var(--overlay-brand-5);
  color: var(--color-text-brand);
}

.sidebar-subitem[open] > .sidebar-level-two {
  color: var(--color-text-brand);
}

.sidebar-level-two .icon-svg {
  transition: transform 180ms ease, color 180ms ease;
}

.sidebar-subitem[open] .sidebar-level-two .icon-svg {
  transform: rotate(90deg);
}

.sidebar-level-three-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  padding: 0 var(--space-400) var(--space-400) calc(var(--space-500) + 10px);
}

.sidebar-level-three {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-200);
  color: var(--color-text-subtle);
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.sidebar-level-three:hover,
.sidebar-level-three:focus-visible {
  background: var(--overlay-brand-6);
  color: var(--color-text-brand);
  transform: translateX(2px);
}

.sidebar-direct {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 12px;
  border-radius: var(--radius-300);
  color: var(--color-text-magic);
  transition:
    background-color 180ms ease,
    transform 180ms ease;
}

.sidebar-direct:hover,
.sidebar-direct:focus-visible {
  background: var(--overlay-magic-8);
  transform: translateX(2px);
}

.sidebar-item > summary .icon-svg {
  transition: transform 180ms ease, color 180ms ease;
}

.sidebar-item[open] > summary .icon-svg {
  transform: rotate(90deg);
}

.sidebar-foot {
  padding: 24px;
}

.sidebar-logo {
  display: block;
  width: auto;
  min-width: 0;
  max-width: min(100%, 285px);
  max-height: 42px;
  height: auto;
  object-fit: contain;
  aspect-ratio: 285 / 42;
}

.sidebar-logo--mobile {
  width: auto;
  min-width: 0;
  max-width: min(100%, 163px);
  max-height: 24px;
  height: auto;
  object-fit: contain;
  aspect-ratio: 163 / 24;
}

.mobile-header {
  padding-top: var(--space-600);
  padding-bottom: var(--space-600);
}

.mobile-topbar {
  justify-content: space-between;
}

.mobile-actions {
  gap: var(--space-300);
}

.icon-button,
.mobile-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-100);
  /* iOS Safari applies a default `color: -apple-system-blue` to <button>
     and <a> elements, which propagates into SVGs via currentColor. Lock
     the color to the brand black and disable the iOS chrome so the icons
     render the same on iPhone as they do everywhere else. */
  color: var(--color-text-strong);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.icon-button img,
.mobile-menu-button img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.mobile-search {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 220ms ease,
    opacity 180ms ease,
    margin-top 220ms ease;
}

.mobile-search.is-open {
  max-height: 64px;
  margin-top: var(--space-500);
  opacity: 1;
}

.hero-section {
  --trust-bar-height: 121px;
  background: var(--color-bg-page);
  position: relative;
  padding-bottom: 0;
}

.hero {
  position: relative;
  min-height: max(640px, calc(100vh - 183px));
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
  background-image: var(--desktop);
  background-size: cover;
  background-position: var(--pos, center top);
}

.hero-slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(24, 27, 31, 0.66) 0%, rgba(24, 27, 31, 0.34) 34%, rgba(24, 27, 31, 0.12) 58%, rgba(24, 27, 31, 0.06) 100%),
    linear-gradient(180deg, rgba(24, 27, 31, 0.14) 0%, rgba(24, 27, 31, 0.26) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 780px;
  padding-top: 118px;
  /* Horizontal padding/centering comes from .shell so the hero content aligns
     to the same 1600px column as the rest of the page. */
  color: var(--color-text-adaptive);
}

.hero-content .eyebrow {
  margin-bottom: 22px;
}

.hero-content .type-heading-2xl {
  max-width: 560px;
}

.eyebrow--light {
  color: var(--color-text-adaptive);
}

.hero-copy,
.cta-card p:last-of-type,
.newsletter-copy p,
.footer-brand p {
  margin: 22px 0 0;
  max-width: 520px;
}

.hero-copy {
  color: var(--color-text-adaptive);
  max-width: 430px;
}

.hero-actions {
  gap: var(--space-500);
  margin-top: var(--space-600);
}

.hero-controls {
  position: absolute;
  right: 0;
  bottom: calc(var(--trust-bar-height) + 28px);
  z-index: 3;
  width: 100%;
  justify-content: flex-end;
  gap: var(--space-500);
  padding-right: 40px;
}

.hero-dot,
.hero-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.hero-dots {
  gap: 6px;
}

.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--overlay-white-72);
  transition: transform 160ms ease, background-color 160ms ease;
}

.hero-dot.is-active {
  width: 11px;
  height: 11px;
  background: white;
}

.hero-dot img {
  display: none;
}

.hero-pause {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  color: var(--overlay-white-72);
  opacity: 0.72;
  transition:
    opacity 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.hero-pause:hover,
.hero-pause:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.hero-pause.is-paused {
  opacity: 1;
  color: var(--color-text-adaptive);
  background: var(--overlay-white-12);
}

.hero-pause-icon {
  position: relative;
  width: 26px;
  height: 26px;
  border: 2px solid currentColor;
  border-radius: var(--radius-full);
}

.hero-bar,
.hero-pause-play {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.hero-bar {
  width: 2px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
}

.hero-bar--left {
  left: 40%;
}

.hero-bar--right {
  left: 60%;
}

.hero-pause-play {
  left: 50%;
  opacity: 0;
  transition: opacity 160ms ease;
}

.hero-pause-play::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -3px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}

.hero-pause.is-paused .hero-bar {
  opacity: 0;
}

.hero-pause.is-paused .hero-pause-play {
  opacity: 1;
}

.trust-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  /* Items and dividers as flex children with space-between: every gap is equal,
     so each divider sits centered between its two items and the outer items
     reach the content margins. */
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  min-height: 121px;
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-top: 32px;
  padding-bottom: 32px;
  /* Below 2000px, hold the items in a tighter column so they don't stretch to
     the edges. The 8% term keeps the side margin proportional as the window
     narrows (rather than collapsing to the 40px floor), so the inset stays
     consistent down to tablet widths; the 1600px term caps the column near the
     top of the range. At 2000px+ this opens to the full 1920 width (media query
     below), where spanning to the margins looks good. Overrides .shell padding. */
  padding-left: max(40px, 8%, calc((100% - 1600px) / 2));
  padding-right: max(40px, 8%, calc((100% - 1600px) / 2));
  background: var(--overlay-ink-78);
}
@media (min-width: 2000px) {
  .trust-bar {
    padding-left: max(40px, calc((100% - 1920px) / 2));
    padding-right: max(40px, calc((100% - 1920px) / 2));
  }
}
.trust-divider {
  flex: 0 0 1px;
  align-self: stretch;
  background: var(--overlay-brand-90);
}

.trust-item {
  /* Holds the content block; the block stays centered to itself via
     .trust-content. space-between on the bar spreads the items to the margins. */
  display: flex;
  justify-content: center;
  align-items: start;
  min-height: 57px;
}
.trust-content {
  display: grid;
  justify-items: center;
  gap: 11px;
  text-align: center;
}

.trust-stars,
.trust-icon {
  height: 30px;
}

.trust-stars {
  display: flex;
  gap: 3px;
  align-items: center;
}

.trust-stars-icon {
  width: 18px;
  height: 18px;
  color: var(--color-bg-fill-success);
}

.trust-icon {
  width: 30px;
  height: 30px;
  color: var(--color-bg-fill-success);
}

.trust-item p {
  margin: 0;
  color: var(--color-text-adaptive);
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 600;
  font-size: var(--type-heading-xs-size);
  line-height: var(--type-heading-xs-line);
  letter-spacing: 1px;
  text-transform: uppercase;
  max-width: 260px;
}

.section {
  padding-top: 64px;
  padding-bottom: 64px;
  background: var(--color-bg-page);
}

.section--featured {
  background: var(--color-bg-surface-subtle);
}

.section--light-band {
  background: var(--color-bg-fill-strong);
}

.section--shop {
  background: var(--color-bg-fill-strong);
}

.hero-section + .section {
  padding-top: 54px;
}

.section-head {
  justify-content: space-between;
  margin-bottom: 24px;
}

.section-title {
  color: var(--color-text-magic);
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-200);
  color: var(--color-text-brand);
  font-family: "Nunito Sans", sans-serif;
  font-variation-settings: "YTLC" 500, "wdth" 100;
  font-size: 16px;
  line-height: 24px;
  margin-top: 0;
  font-weight: 500;
  letter-spacing: 0;
}

.section-link img,
.section-link .icon-svg {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.product-grid {
  display: grid;
  gap: var(--space-400);
}

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

.product-grid--arrivals {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.product-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  transition: transform 180ms ease, box-shadow 180ms ease;
  /* Inline-size container so .product-price-stack can switch its row
     position and child alignment based on the card's own width. At
     wide enough card widths the price-stack stays inline beside the
     copy on the same row (default flex behavior). When the card is
     narrow the @container rule below forces the stack onto its own
     full-width row beneath the copy and left-aligns the children so
     they line up with the SKU / title / specs above. */
  container-type: inline-size;
}

@container (max-width: 700px) {
  .product-grid--arrivals .product-price-stack,
  .product-grid--featured .product-price-stack,
  .catalog-grid:not(.catalog-grid--list) .product-price-stack,
  .dashboard-saved-grid .product-price-stack,
  .pdp-related-grid .product-price-stack {
    flex-basis: 100%;
    align-items: flex-start;
  }
}

.product-card-block-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  cursor: pointer;
}

.product-card-block-link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.product-actions {
  position: relative;
  z-index: 2;
}

.product-grid--featured .product-card {
  min-height: 528px;
}

/* FEATURED grid cascade: 3 → 2 → 1 columns gradually so cards
   stay reasonably proportioned instead of jumping straight to full-width. */
@media (max-width: 960px) {
  .product-grid--featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .product-grid--featured {
    grid-template-columns: 1fr;
  }
}

/* ── Global product card height (desktop) ──
   Every product card across the site uses the same fixed 450px desktop
   height so cards equalize across rows, tabs, and grids. The image
   inside flexes to absorb per-card slack. The catalog LIST view is
   excluded because it uses a totally different horizontal layout. */
.product-grid--arrivals .product-card,
.product-grid--featured .product-card,
.catalog-grid:not(.catalog-grid--list) .product-card,
.dashboard-saved-grid .product-card,
.pdp-related-grid .product-card {
  height: 450px;
  min-height: 450px;
}

.product-card:hover,
.product-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-400);
}

.product-card--compact .product-media {
  aspect-ratio: auto;
  height: 247px;
  padding: 16px 0 0 16px;
}

.product-card--sale .product-media {
  height: 320px;
  padding: 0;
}

.product-card--sale .product-media img {
  object-fit: cover;
}

/* OFFERS tab cards: when both compact + sale modifiers are present
   (used in the home page tabs), match the arrivals media height so the
   cards line up perfectly with the NEW ARRIVALS row. */
.product-card--compact.product-card--sale .product-media {
  height: 247px;
}

/* ── Global product card flex structure (desktop) ──
   Every product card grid (except catalog list view) uses the same
   internal layout: card is a flex column; image flexes to absorb
   slack; body and actions hug their content. This makes the
   "price → buttons" gap consistent across cards regardless of how
   long any individual product's copy is. */
.product-grid--arrivals .product-card,
.product-grid--featured .product-card,
.catalog-grid:not(.catalog-grid--list) .product-card,
.dashboard-saved-grid .product-card,
.pdp-related-grid .product-card {
  display: flex;
  flex-direction: column;
}

.product-grid--arrivals .product-media,
.product-grid--arrivals .product-card--compact .product-media,
.product-grid--arrivals .product-card--sale .product-media,
.product-grid--arrivals .product-card--compact.product-card--sale .product-media,
.product-grid--featured .product-media,
.catalog-grid:not(.catalog-grid--list) .product-media,
.catalog-grid:not(.catalog-grid--list) .product-card--compact .product-media,
.catalog-grid:not(.catalog-grid--list) .product-card--sale .product-media,
.catalog-grid:not(.catalog-grid--list) .product-card--compact.product-card--sale .product-media,
.dashboard-saved-grid .product-media,
.dashboard-saved-grid .dashboard-saved-card .product-media,
.pdp-related-grid .product-media {
  flex: 1 1 auto;
  height: auto;
  min-height: 180px;
  padding: 0;
}

.product-grid--arrivals .product-body,
.product-grid--featured .product-body,
.catalog-grid:not(.catalog-grid--list) .product-body,
.dashboard-saved-grid .product-body,
.pdp-related-grid .product-body {
  flex: 0 0 auto;
}

.product-grid--arrivals .product-actions,
.product-grid--featured .product-actions,
.catalog-grid:not(.catalog-grid--list) .product-actions,
.dashboard-saved-grid .product-actions,
.pdp-related-grid .product-actions {
  margin-top: 0;
}

.product-media {
  position: relative;
  aspect-ratio: auto;
  height: 320px;
  padding: 0;
  background: var(--overlay-teal-6);
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-media--contain img {
  object-fit: contain;
}

.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 6px;
  border: 1px solid var(--color-border-success-soft);
  border-radius: var(--radius-300);
  background: var(--color-bg-fill-success-soft);
  color: var(--color-text-success);
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 600;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--sale {
  background: var(--color-bg-fill-critical-soft);
  border-color: var(--color-border-critical-soft);
  color: var(--color-text-critical);
}

.product-body {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 16px;
  padding: 16px 16px 0;
}

.product-copy {
  flex: 1 1 200px;
  padding-right: 16px;
}

.product-sku {
  margin: 0 0 8px;
  color: var(--color-text-placeholder);
}

.product-copy h3 {
  margin: 0 0 8px;
  max-width: 265px;
}

.product-card--compact .product-copy h3 {
  max-width: none;
}

.product-meta {
  margin: 0;
  color: var(--color-text-subtle);
}

.product-price {
  margin: 0;
  white-space: nowrap;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  padding-bottom: 2px;
}

.product-price-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.product-price-was {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: 14px;
  line-height: 20px;
  text-decoration: line-through;
}

.product-price--sale {
  color: var(--color-bg-fill-critical);
}

.product-actions {
  gap: 16px;
  padding: 16px;
  margin-top: auto;
}

.product-actions .button {
  flex: 1 1 120px;
  white-space: nowrap;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 24px;
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 16px;
  min-height: 196px;
  border-radius: var(--radius-400);
  background: var(--overlay-white-2);
  text-align: center;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.category-card:hover,
.category-card:focus-visible {
  transform: translateY(-4px);
  background: var(--overlay-white-50);
  box-shadow: var(--shadow-400);
}

.category-card img {
  width: auto;
  max-width: 100%;
  height: 78px;
  object-fit: contain;
}

.category-card h3 {
  margin: 0 0 var(--space-100);
}

.category-card p {
  margin: 0;
  color: var(--color-text-subtle);
  max-width: 117px;
}

.section--arrivals {
  background: var(--color-bg-fill-strong);
  padding-bottom: 0;
}

.tab-row {
  display: flex;
  align-items: center;
  width: 400px;
  max-width: 100%;
  height: 48px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.tab {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--color-text-strong);
}

.tab.is-active {
  color: var(--color-text-magic);
}

.tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-text-strong);
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
}

.cta-section {
  display: flex;
  gap: 12px;
  align-items: stretch;
  position: relative;
  z-index: 2;
  margin-top: 72px;
  margin-bottom: 0;
  transform: translateY(68px);
}

.cta-card {
  flex: 1 1 0;
  padding: 24px;
  min-height: 253px;
  border-radius: var(--radius-400);
  color: var(--color-text-adaptive);
}

.cta-card--gradient {
  background: var(--gradient-page-shell);
}

.cta-card--dark {
  background: var(--color-bg-ink);
}

.cta-card h2 {
  margin-top: 21px;
  max-width: 626px;
}

.cta-card .button {
  margin-top: 21px;
  align-self: flex-start;
}

.cta-card--gradient .button {
  min-width: 261px;
}

.cta-card--dark .button {
  min-width: 168px;
}

.brands-section {
  padding-top: 136px;
  padding-bottom: 40px;
  text-align: center;
}

.brands-label {
  color: var(--color-text-placeholder);
}

.brands-list {
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 30px;
  color: var(--color-text-adaptive);
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-sm-size);
  line-height: var(--type-heading-sm-line);
  letter-spacing: var(--type-heading-sm-track);
  text-transform: uppercase;
}

.brands-list span + span {
  position: relative;
}

.brands-list span + span::before {
  content: "";
  position: absolute;
  top: 0;
  left: -16px;
  width: 1px;
  height: 20px;
  background: var(--overlay-white-45);
}

.newsletter-section {
  padding-top: 56px;
  padding-bottom: 56px;
}

.newsletter-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  min-height: 194px;
  padding: var(--space-900) var(--space-1000);
  border-radius: var(--radius-400);
  background: var(--color-bg-page);
  align-items: center;
}

.newsletter-copy h2 {
  color: var(--color-text-brand);
}

.newsletter-copy p {
  margin-top: 12px;
  color: var(--color-text-strong);
}

.newsletter-form {
  gap: 12px;
  justify-self: end;
  width: min(100%, 673px);
}

.newsletter-form .button {
  min-width: 148px;
}

.newsletter-input {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-300);
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
}

.site-footer {
  margin-top: 0;
  background: var(--color-bg-fill-strong);
  padding-top: 64px;
  padding-bottom: 64px;
  position: relative;
  overflow: hidden;
}

/* Subtle cog watermark */
.site-footer::before {
  content: "";
  position: absolute;
  width: 680px;
  height: 680px;
  right: -120px;
  bottom: -180px;
  background: url("./assets/branding/bh-usa-cog-1.svg") no-repeat center / contain;
  opacity: 0.03;
  pointer-events: none;
}

.footer-main {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 48px 64px;
}

.footer-brand {
  flex: 0 0 auto;
  width: min(380px, 100%);
}

.footer-brand img {
  width: 260px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.footer-brand p {
  margin-top: 20px;
  color: var(--color-text-strong);
  font-size: 14px;
  line-height: 20px;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  font-size: 12px;
  line-height: 16px;
}

/* Social icons row */
.footer-social {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-text-subtle);
  transition: color 0.2s ease;
}

.footer-social a:hover {
  color: var(--color-text-magic);
}

.footer-social svg {
  width: 22px;
  height: 22px;
}

/* Equalize visual weight — X has thin strokes so it reads lighter;
   YouTube's filled rect reads heaviest. Nudge sizes to balance. */
.footer-social a[aria-label="X"] svg {
  width: 24px;
  height: 24px;
}

.footer-social a[aria-label="YouTube"] svg {
  width: 21px;
  height: 21px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 24px 36px;
  flex: 0 1 auto;
  margin-left: auto;
}

.footer-links h3 {
  margin-bottom: 12px;
  color: var(--color-text-brand);
}

.footer-links a {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 18px;
  transition: color 0.15s ease;
}

.footer-links a:hover {
  color: var(--color-text-magic);
}

.footer-rule {
  height: 1px;
  margin-top: 32px;
  margin-bottom: 24px;
  background: var(--color-bg-fill-brand-soft);
  background-clip: content-box;
}

.footer-bottom {
  justify-content: space-between;
  gap: 24px;
  font-size: 12px;
  line-height: 16px;
}

.footer-bottom a:hover {
  color: var(--color-text-magic);
}

.catalog-page {
  background: var(--color-bg-page);
  --catalog-filter-top: 212px;
}

@media (max-width: 767px) {
  .catalog-page {
    padding-bottom: 96px;
  }
}

.catalog-main {
  background: var(--color-bg-page);
}

.catalog-breadcrumb {
  padding-top: 16px;
  padding-bottom: 20px;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-subtle);
  font-size: 12px;
  line-height: 16px;
}

.breadcrumb-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: color 160ms ease;
}

.breadcrumb-list a:hover,
.breadcrumb-list a:focus-visible {
  color: var(--color-text-magic);
}

.breadcrumb-list li {
  display: inline-flex;
  align-items: center;
}

.breadcrumb-list li + li::before {
  content: "/";
  margin: 0 8px 0 0;
  color: var(--color-text-subtle);
}

.catalog-content {
  padding-top: 0;
  padding-bottom: 80px;
}

.catalog-layout {
  position: relative;
  display: grid;
  grid-template-columns: 341px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.catalog-filter-backdrop {
  display: none;
}

.catalog-filters {
  position: sticky;
  top: var(--catalog-filter-top);
  z-index: 5;
  align-self: start;
  height: calc(100vh - var(--catalog-filter-top) - 24px);
  min-height: 560px;
  transition: top 560ms cubic-bezier(0.16, 1, 0.3, 1), height 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.catalog-filters-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  box-shadow: var(--shadow-100);
  overflow: hidden;
}

.catalog-filters-head,
.catalog-filter-summary,
.catalog-filter-option,
.catalog-toolbar,
.catalog-sort,
.catalog-view-toggle,
.catalog-pagination,
.catalog-page-numbers,
.catalog-price-range {
  display: flex;
  align-items: center;
}

.catalog-filters-head,
.catalog-filter-summary,
.catalog-filter-option {
  justify-content: space-between;
}

.catalog-filters-head p,
.catalog-filter-summary span {
  margin: 0;
}

.catalog-filters-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 24px 24px 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-icon-light) transparent;
}

.catalog-filters-scroll::-webkit-scrollbar {
  width: 8px;
}

.catalog-filters-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.catalog-filters-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--color-icon-light);
  background-clip: padding-box;
}

.catalog-filters-scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-icon-light) 80%, white 20%);
  background-clip: padding-box;
}

.catalog-filters-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.catalog-link-button,
.catalog-show-more {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-brand);
}

.catalog-filter-close {
  display: none;
  padding: 0;
  border: 0;
  background: transparent;
}

.catalog-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.catalog-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 22px;
  padding: 0 4px;
  border: 1px solid var(--color-border-success-soft);
  border-radius: var(--radius-300);
  background: var(--color-bg-fill-success-soft);
  color: var(--color-bg-fill-success);
  font-size: 14px;
  line-height: 20px;
}

/* ── Store Availability Filter ── */
.catalog-store-filter {
  padding-top: 16px;
  padding-bottom: 20px;
  margin-bottom: 8px;
}

.catalog-store-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--color-bg-fill-brand) 6%, white);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.catalog-store-toggle:hover {
  border-color: var(--color-border-brand-soft);
}

.catalog-store-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-text-brand);
  flex-shrink: 0;
}

.catalog-store-toggle-label {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-text-strong);
}

.catalog-store-toggle-count {
  font-size: 13px;
  color: var(--color-text-subtle);
  font-weight: 400;
}

.catalog-filter-group {
  border-top: 1px solid var(--color-border-base);
  padding-top: 20px;
  margin-top: 8px;
}

.catalog-filter-summary {
  gap: 16px;
  list-style: none;
  cursor: pointer;
}

.catalog-filter-summary::-webkit-details-marker {
  display: none;
}

.catalog-filter-summary .icon-svg {
  transition: transform 180ms ease;
}

.catalog-filter-group[open] .catalog-filter-summary .icon-svg {
  transform: rotate(90deg);
}

.catalog-filter-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
  padding-bottom: 12px;
}

.catalog-filter-option {
  gap: 8px;
  color: var(--color-text-base);
  font-size: 16px;
  line-height: 20px;
  min-height: 28px;
}

.catalog-filter-option input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-text-brand);
}

.catalog-filter-option span {
  flex: 1;
}

.catalog-filter-option em {
  font-style: normal;
  color: var(--color-text-subtle);
}

.catalog-filter-option--selected {
  color: var(--color-text-brand);
}

.catalog-price-range {
  gap: 8px;
  padding-top: 20px;
}

.catalog-filter-group--price {
  padding-bottom: 20px;
}

.catalog-filter-group--price .catalog-price-range {
  padding-bottom: 16px;
}

.catalog-price-input {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  flex: 1 1 0;
  padding: 0 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  color: var(--color-text-subtle);
}

.catalog-price-input input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 16px;
  line-height: 22px;
}

.catalog-range-divider {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-text-subtle);
}

.catalog-apply-button {
  width: 100%;
  min-height: 40px;
}

.catalog-filters-footer {
  position: sticky;
  bottom: 0;
  padding: 16px 24px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-bg-surface) 24%);
  border-top: 1px solid var(--overlay-border-base-72);
}

.catalog-products {
  min-width: 0;
}

.catalog-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}

.catalog-toolbar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.catalog-heading-row {
  display: flex;
  align-items: end;
  justify-content: flex-start;
  gap: 24px;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.catalog-heading h1,
.catalog-heading p {
  margin: 0;
}

.catalog-heading h1 {
  color: var(--color-text-magic);
}

.catalog-heading p {
  margin-top: 12px;
  color: var(--color-text-subtle);
}

.catalog-toolbar {
  gap: 16px;
  justify-self: end;
}

.catalog-mobile-filter-button {
  display: none;
}

.catalog-sort {
  display: inline-flex;
  align-items: stretch;
  position: relative;
  gap: 0;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  box-shadow: var(--shadow-100);
  overflow: hidden;
}

.catalog-sort > span {
  display: none;
}

.catalog-sort select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 48px;
  min-width: 220px;
  padding: 0 44px 0 16px;
  border: none;
  background: transparent;
  color: var(--color-text-strong);
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.catalog-sort::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.catalog-view-toggle--mobile {
  display: none;
}

.catalog-view-toggle--desktop {
  display: inline-flex;
}

.catalog-view-toggle {
  gap: 0;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  overflow: hidden;
  box-shadow: var(--shadow-100);
}

.catalog-view-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 48px;
  padding: 0;
  border: 0;
  background: var(--color-bg-surface);
  color: var(--color-text-subtle);
}

.catalog-view-button + .catalog-view-button {
  border-left: 1px solid var(--color-border-base);
}

.catalog-view-button.is-active {
  background: var(--color-bg-fill-brand);
  color: var(--color-text-adaptive);
}

.catalog-view-icon {
  width: 20px;
  height: 20px;
}

.catalog-view-icon--mobile {
  display: none;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1365px) {
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.catalog-grid.catalog-grid--list .product-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
}

.catalog-grid.catalog-grid--list .product-media {
  flex: 0 0 152px;
  width: 152px;
  height: 120px;
  min-height: 120px;
}

.catalog-grid.catalog-grid--list .catalog-card .product-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 28px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 18px 24px;
}

.catalog-grid.catalog-grid--list .product-copy {
  align-self: center;
  width: 100%;
  padding-right: 0;
}

.catalog-grid.catalog-grid--list .product-copy h3,
.catalog-grid.catalog-grid--list .product-meta {
  max-width: 100%;
}

.catalog-grid.catalog-grid--list .product-copy h3 {
  margin-bottom: 4px;
}

.catalog-grid.catalog-grid--list .product-copy .product-sku--copy {
  display: none;
}

.catalog-grid.catalog-grid--list .product-price-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  justify-self: end;
  text-align: right;
  margin-top: 0;
  gap: 4px;
  min-width: 144px;
}

.catalog-grid.catalog-grid--list .product-price-stack .product-sku {
  display: block;
  margin: 0;
}

.catalog-grid.catalog-grid--list .product-price {
  line-height: 1;
  margin: 0;
}

.catalog-grid.catalog-grid--list .catalog-card .product-actions {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 0 0 144px;
  width: 144px;
  margin-top: 0;
  padding: 0 16px 0 12px;
  align-self: center;
  border-left: none;
}

.catalog-grid.catalog-grid--list .product-actions .button {
  width: 100%;
  min-height: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.catalog-card {
  min-height: 0;
}

.catalog-card .product-body {
  padding: 16px 16px 0;
}

.catalog-card .product-sku {
  color: var(--color-text-placeholder);
}

.product-sku--price {
  display: none;
}

.catalog-card .product-meta {
  max-width: none;
}

.catalog-card .product-price,
.catalog-card .product-price-stack {
  align-self: auto;
}

.catalog-card .product-price-stack {
  margin-left: 0;
}

.catalog-pagination {
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
/* When pagination is the last thing in a section before the footer, guarantee
   breathing room so it never butts up against the footer. Use PADDING, not
   margin — a trailing margin collapses out through <main> and exposes the dark
   body gradient behind the page. Padding keeps the gap inside main's light bg.
   Pages that follow pagination with another block (e.g. catalog's help-cta)
   are unaffected. */
.catalog-pagination:last-child {
  padding-bottom: var(--space-1000);
}

.catalog-page-button,
.catalog-page-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-300);
  background: transparent;
  color: var(--color-text-subtle);
}

.catalog-page-button .icon-svg {
  width: 16px;
  height: 16px;
}

.catalog-page-button:not(:disabled):hover,
.catalog-page-number:hover,
.catalog-page-number.is-active {
  background: var(--overlay-brand-8);
  color: var(--color-text-base);
}

.catalog-page-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.catalog-page-jump {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--color-text-subtle);
}

.catalog-page-jump input {
  width: 56px;
  height: 48px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  color: var(--color-text-strong);
  font-size: 16px;
  line-height: 22px;
  text-align: center;
}

.catalog-page-jump span {
  white-space: nowrap;
}

.catalog-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-text-subtle);
  font-size: 14px;
  line-height: 20px;
}

.catalog-newsletter-band {
  background: var(--gradient-page-shell);
}

.catalog-newsletter-band .newsletter-section {
  padding-top: 56px;
}

.dashboard-page {
  background: var(--color-bg-page);
  --catalog-filter-top: 247px;
}

.dashboard-main {
  padding-top: 64px;
}

.dashboard-shell {
  padding-bottom: 64px;
}

.dashboard-directory-mobile {
  display: none;
  margin-bottom: 24px;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-100);
  overflow: hidden;
}

.dashboard-directory-mobile summary {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  justify-content: space-between;
  min-height: 56px;
  padding: 16px 24px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid var(--color-border-base);
}

.dashboard-directory-mobile summary span {
  margin-right: auto;
}

.dashboard-directory-mobile summary::-webkit-details-marker {
  display: none;
}

.dashboard-directory-mobile summary::after {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  transition: transform 160ms ease;
}

.dashboard-directory-mobile[open] summary::after {
  transform: rotate(90deg);
}

.dashboard-directory-mobile-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 560px;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 341px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.dashboard-directory {
  position: sticky;
  top: var(--catalog-filter-top);
  align-self: start;
  height: calc(100vh - var(--catalog-filter-top) - 24px);
  min-height: 560px;
  transition: top 560ms cubic-bezier(0.16, 1, 0.3, 1), height 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dashboard-directory-card {
  height: 100%;
  min-width: 0;
}

.dashboard-profile {
  color: inherit;
  text-decoration: none;
}

.dashboard-profile-copy {
  min-width: 0;
}

.dashboard-tier-pill {
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: 4px;
  min-height: 22px;
  padding: 4px 6px 4px 4px;
  border: 1px solid var(--color-border-bronze-tint);
  border-radius: var(--radius-300);
  background: var(--color-bg-fill-bronze-tint);
  color: var(--color-text-magic);
}

.dashboard-tier-pill .type-heading-xs {
  line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.dashboard-tier-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-text-magic);
}

.dashboard-directory-scroll {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dashboard-directory-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dashboard-directory-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--color-border-base);
  padding-top: 20px;
  margin-top: 8px;
}

.dashboard-directory-group:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.dashboard-directory-label {
  margin: 0;
  color: var(--color-text-strong);
}

.dashboard-directory-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 20px;
  border-radius: var(--radius-300);
  color: var(--color-text-base);
  text-decoration: none;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.dashboard-directory-link span:nth-child(2) {
  margin-right: auto;
}

.dashboard-directory-link .icon-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-icon-subtle);
}

.dashboard-directory-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-300);
  background: var(--color-bg-fill-brand);
  color: var(--color-text-adaptive);
  font-size: var(--type-body-xs-size);
  line-height: 14px;
  font-weight: 700;
}

.dashboard-new-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-300);
  background: var(--color-bg-fill-magic);
  color: var(--color-text-adaptive);
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-body-xs-size);
  font-weight: 400;
  line-height: 1;
}

.dashboard-new-badge span {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.dashboard-directory-link:hover,
.dashboard-directory-link:focus-visible {
  background: var(--overlay-brand-8);
  color: var(--color-text-brand);
  transform: translateY(-1px);
}

.dashboard-directory-link.is-active {
  background: var(--color-bg-fill-strong);
  color: var(--color-text-brand);
}

.dashboard-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dashboard-welcome {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding: 0;
}

.dashboard-welcome h1,
.dashboard-date {
  margin: 0;
}

.dashboard-date {
  color: var(--color-text-subtle);
}

.dashboard-card,
.dashboard-stat-card,
.dashboard-benefit-card {
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-100);
}

.dashboard-tier-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dashboard-tier-card-inner {
  padding: 24px 24px 16px;
  border-radius: var(--radius-400);
  background: var(--gradient-page-shell);
  box-shadow: var(--shadow-400);
  color: var(--color-text-adaptive);
  overflow: hidden;
}

.dashboard-tier-card-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.dashboard-tier-eyebrow,
.dashboard-tier-metric-label,
.dashboard-card-eyebrow {
  margin: 0 0 6px;
  color: inherit;
  opacity: 0.8;
}

.dashboard-tier-card h2 {
  margin: 0;
  background: linear-gradient(146.8deg, rgb(235, 156, 62) 0%, rgb(196, 106, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dashboard-tier-metrics {
  display: flex;
  gap: 40px;
  align-items: flex-end;
}

.dashboard-tier-metric-value {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 125, "wght" 700;
  font-size: var(--type-heading-xl-size);
  line-height: var(--type-heading-xl-line);
  letter-spacing: var(--type-heading-xl-track);
}

.dashboard-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--color-text-subtle);
}

.dashboard-progress-copy .type-label-md {
  color: var(--color-text-base);
}

.dashboard-progress-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.dashboard-progress-track {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
}

.dashboard-progress-fill {
  flex-shrink: 0;
  height: 100%;
  border-radius: 999px 0 0 999px;
  background: var(--color-text-magic);
}

.dashboard-progress-remaining {
  flex: 1;
  height: 100%;
  background: var(--color-bg-fill-strong);
}

.dashboard-benefits,
.dashboard-stats {
  display: grid;
  gap: 12px;
}

.dashboard-benefits {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.dashboard-benefit-card {
  padding: 24px;
  color: var(--color-text-subtle);
}

.dashboard-benefit-card--active {
  background: linear-gradient(152.6deg, rgb(235, 156, 62) 0%, rgb(196, 106, 0) 100%);
  border: 2px solid #c46a00;
  color: var(--color-text-adaptive);
}

.dashboard-benefit-card--active .dashboard-benefit-tier-label {
  color: var(--color-text-strong);
}

.dashboard-benefit-card--silver {
  background: #e7ecf6;
  border-color: var(--color-border-brand-soft);
  opacity: 0.56;
}

.dashboard-benefit-card--gold {
  background: #fff8f6;
  border-color: #ad8b00;
  opacity: 0.56;
}

.dashboard-benefit-card--gold .dashboard-benefit-tier-label {
  color: #ad8b00;
}

.dashboard-benefit-card--silver .dashboard-benefit-percent,
.dashboard-benefit-card--gold .dashboard-benefit-percent {
  color: var(--color-text-strong);
}

.dashboard-benefit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dashboard-benefit-tier-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dashboard-benefit-icon {
  flex-shrink: 0;
  /* Optical alignment: the diamond renders a touch low relative to the label */
  position: relative;
  top: -2px;
}

.dashboard-current-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 6px;
  border: 1px solid var(--color-border-bronze-tint);
  border-radius: var(--radius-300);
  background: var(--color-bg-fill-bronze-tint);
  color: var(--color-text-magic);
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 600;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.dashboard-current-badge span {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.dashboard-unlock-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px !important;
  color: var(--color-text-magic);
}

.dashboard-benefit-percent {
  margin: 4px 0 0;
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 125, "wght" 900;
  font-size: var(--type-heading-2xl-size);
  line-height: var(--type-heading-2xl-line);
  letter-spacing: var(--type-heading-2xl-track);
  text-transform: uppercase;
}

.dashboard-benefit-card .type-heading-xl,
.dashboard-benefit-card .type-body-sm {
  margin: 6px 0 0;
}

.dashboard-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.dashboard-stat-card {
  padding: 24px;
  min-width: 0;
}

.dashboard-stat-card--success .dashboard-stat-value {
  color: var(--color-text-success);
}

.dashboard-stat-value {
  margin: 6px 0 0;
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 125, "wght" 700;
  font-size: var(--type-heading-xl-size);
  line-height: var(--type-heading-xl-line);
  letter-spacing: var(--type-heading-xl-track);
}

.dashboard-card {
  padding: 24px;
}

.dashboard-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.dashboard-card-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dashboard-card-title-wrap h2 {
  margin: 0;
  color: var(--color-text-strong);
}

.dashboard-helper {
  margin: 0;
}

.dashboard-card-title-wrap .icon-svg {
  color: var(--color-text-strong);
  width: 20px;
  height: 20px;
}

.dashboard-helper {
  color: var(--color-text-subtle);
}

.dashboard-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  border-radius: var(--radius-400);
  background: var(--color-bg-fill-info-subtle);
}

.dashboard-note .icon-svg {
  flex-shrink: 0;
  color: var(--color-text-brand);
}

.dashboard-note strong {
  font-weight: 700;
  color: var(--color-text-brand);
}

.dashboard-quick-form {
  display: grid;
  grid-template-columns: 206px minmax(0, 1fr) 89px auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 24px;
}

.dashboard-quick-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dashboard-quick-field label {
  color: var(--color-text-subtle);
}

.dashboard-quick-field input {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  color: var(--color-text-strong);
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-body-md-size);
  outline: 0;
  width: 100%;
}

.dashboard-quick-field input:focus {
  border-color: var(--color-border-focus);
}

.dashboard-quick-table-container {
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  overflow: hidden;
  margin-bottom: 0;
  position: relative;
}

.dashboard-table-wrap {
  position: relative;
  overflow-x: auto;
}

.dashboard-table-scroll-hint {
  position: sticky;
  right: 0;
  top: 0;
  bottom: 0;
  float: right;
  width: 52px;
  height: 100%;
  margin-left: -52px;
  background: linear-gradient(to right, transparent, var(--color-bg-surface) 80%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  flex-shrink: 0;
  z-index: 2;
}

.dashboard-table-wrap.is-overflowing .dashboard-table-scroll-hint {
  opacity: 1;
}

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
}

.dashboard-table thead tr {
  background: var(--color-bg-fill-strong);
  border-bottom: 1px solid var(--color-border-base);
}

.dashboard-table th,
.dashboard-table td {
  padding: 12px 0;
  text-align: left;
  vertical-align: middle;
}

.dashboard-table td {
  padding-top: 24px;
  padding-bottom: 24px;
}

.dashboard-table th:first-child,
.dashboard-table td:first-child {
  padding-left: 24px;
}

.dashboard-table td:not(:first-child),
.dashboard-table th:not(:first-child) {
  padding-left: 24px;
}

.dashboard-table th:last-child,
.dashboard-table td:last-child {
  width: 36px;
  padding-right: 24px;
}

.dashboard-table tbody tr + tr td {
  border-top: 1px solid var(--color-border-base);
}

.dashboard-table th:nth-child(2),
.dashboard-table td:nth-child(2),
.dashboard-table th:nth-child(3),
.dashboard-table td:nth-child(3),
.dashboard-table th:nth-child(5),
.dashboard-table td:nth-child(5) {
  width: 150px;
}

.dashboard-table th:nth-child(4),
.dashboard-table td:nth-child(4) {
  width: 80px;
}

.dashboard-table th {
  color: var(--color-text-strong);
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 600;
  font-size: var(--type-heading-xs-size);
  line-height: var(--type-heading-xs-line);
  letter-spacing: var(--type-heading-xs-track);
  text-transform: uppercase;
}

.dashboard-table-title,
.dashboard-table-meta {
  margin: 0;
}

.dashboard-table-meta {
  color: var(--color-text-subtle);
}

.dashboard-table-price {
  margin: 0;
  font-weight: 700;
  color: var(--color-text-strong);
}

.dashboard-table-save {
  margin: 2px 0 0;
  font-weight: 700;
  color: var(--color-text-success);
}

.dashboard-table-retail {
  margin: 0;
  color: var(--color-text-subtle);
  text-decoration: line-through;
  text-decoration: line-through;
}

.dashboard-table-total {
  margin: 0;
  font-weight: 700;
}

.dashboard-table-qty {
  width: 64px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-body-md-size);
  color: var(--color-text-base);
  background: var(--color-bg-surface);
  text-align: center;
  outline: 0;
}

.dashboard-table-qty:focus {
  border-color: var(--color-border-focus);
}

.dashboard-table-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-icon-subtle);
  border-radius: var(--radius-200);
  padding: 0;
}

.dashboard-table-remove:hover {
  background: var(--color-bg-fill-strong);
  color: var(--color-text-base);
}

.dashboard-qty-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-page);
}

.dashboard-order-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 24px;
  background: var(--color-bg-fill-strong);
  border-top: 1px solid var(--color-border-base);
}

.dashboard-savings-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 6px;
  border: 1px solid var(--color-border-success-soft);
  border-radius: var(--radius-300);
  background: var(--color-bg-fill-success-soft);
  color: var(--color-text-success);
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 600;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.dashboard-order-total {
  text-align: right;
}

.dashboard-order-total p {
  margin: 0;
}

.dashboard-subtotal-label {
  color: var(--color-text-subtle);
}

.dashboard-order-total-value {
  margin-top: 4px;
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 125, "wght" 700;
  font-size: var(--type-heading-xl-size);
  line-height: var(--type-heading-xl-line);
  text-transform: uppercase;
  color: var(--color-text-strong);
}

.dashboard-order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.dashboard-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-300);
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 600;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Global text-box trim for all uppercase inline tags — ensures cap-height centering */
.badge span,
.dashboard-savings-tag span,
.dashboard-status-pill span,
.dashboard-tier-pill .type-heading-xs,
.dashboard-new-badge span,
.dashboard-current-badge span {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.dashboard-status-pill--processing {
  background: var(--color-bg-fill-bronze-tint);
  border-color: var(--color-border-bronze-tint);
  color: var(--color-text-magic);
}

.dashboard-status-pill--transit {
  background: var(--color-bg-fill-info-subtle);
  border-color: var(--color-border-brand-soft);
  color: var(--color-text-info);
}

.dashboard-status-pill--delivered,
.dashboard-status-pill--approved {
  background: var(--color-bg-fill-success-soft);
  border-color: var(--color-border-success-soft);
  color: var(--color-text-success);
}
.dashboard-status-pill--review {
  background: var(--color-bg-fill-warning-soft);
  border-color: rgba(217, 119, 6, 0.35);
  color: var(--color-text-warning);
}
.dashboard-status-pill--denied {
  background: var(--color-bg-fill-critical-soft);
  border-color: var(--color-border-critical-soft);
  color: var(--color-text-critical);
}

.dashboard-order-number {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--color-text-brand);
}

.dashboard-order-meta {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-subtle);
}

.dashboard-order-amount {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.dashboard-table--orders th:nth-child(2),
.dashboard-table--orders td:nth-child(2),
.dashboard-table--orders th:nth-child(3),
.dashboard-table--orders td:nth-child(3),
.dashboard-table--orders th:nth-child(4),
.dashboard-table--orders td:nth-child(4) {
  width: auto;
}

.dashboard-table--orders th:nth-child(5),
.dashboard-table--orders td:nth-child(5) {
  width: 84px;
}

.dashboard-table--orders th:last-child,
.dashboard-table--orders td:last-child {
  width: 110px;
  text-align: right;
}

.dashboard-table--orders td:last-child .button {
  min-width: 0;
  width: 100%;
  justify-content: center;
}

.dashboard-saved-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-saved-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Card stays at the global 450px desktop height — do NOT use flex:1 here.
   flex:1 sets flex-basis:0 which would override height:450px and let the
   card grow to fill the row-stretched .dashboard-saved-item parent. */
.dashboard-saved-card {
  flex: 0 0 auto;
}

.dashboard-saved-card .product-media {
  flex: 1 1 auto;
  height: auto;
  min-height: 180px;
}

.dashboard-saved-card .product-media img {
  object-fit: cover;
}

.dashboard-saved-card .product-copy h3 {
  max-width: none;
}

.dashboard-saved-card .product-price {
  padding-bottom: 0;
}

/* Saved cards: always stack buttons vertically — cards are too narrow for side-by-side */
.dashboard-saved-card .product-actions {
  flex-direction: column;
  gap: 8px;
}

.dashboard-saved-card .product-actions .button {
  width: 100%;
  flex: 0 0 auto;
  min-height: 40px;
  height: 40px;
}

.dashboard-saved-remove-btn {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-subtle);
  cursor: pointer;
  border-radius: var(--radius-200);
  transition: color 160ms ease, background 160ms ease;
}

.dashboard-saved-remove-btn:hover,
.dashboard-saved-remove-btn:focus-visible {
  color: var(--color-text-strong);
  background: var(--color-bg-fill-strong);
}

/* === Saved Products — View More === */
.dashboard-saved-item--extra {
  display: none;
}

.dashboard-saved-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.dashboard-account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-account-grid > div {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dashboard-account-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dashboard-account-label {
  margin: 0;
  color: var(--color-text-subtle);
}

.dashboard-account-grid .type-body-lg,
.dashboard-account-grid .type-body-md,
.dashboard-account-grid .type-body-sm {
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.dashboard-account-value--discount {
  font-weight: 700;
  color: var(--color-text-success);
}

.dashboard-account-tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--color-border-bronze-tint);
  border-radius: var(--radius-300);
  background: var(--color-bg-fill-bronze-tint);
  color: var(--color-text-magic);
}

@media (max-width: 1100px) {
  .nav-main {
    gap: 24px;
    grid-template-columns: 240px minmax(0, 1fr) auto;
  }

  .nav-categories {
    gap: 28px;
  }

  /* keep FEATURED at 3 columns down to ~960px so cards
     get narrower instead of jumping straight to a single column */
  .product-grid--arrivals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .newsletter-card {
    grid-template-columns: 1fr;
    display: grid;
  }

  .newsletter-form {
    justify-self: start;
    width: auto;
  }

  .footer-main {
    gap: 48px 40px;
  }

  .footer-links {
    gap: 24px;
  }

  .catalog-layout {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .catalog-grid {
    grid-template-columns: 1fr;
  }

  .catalog-topbar {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
  }

  .catalog-toolbar-row {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    flex-wrap: nowrap;
  }

  .catalog-heading-row {
    grid-column: 1;
    grid-row: 1;
    align-items: start;
    justify-content: flex-start;
    gap: 20px;
  }

  .dashboard-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .dashboard-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Active (bronze) card spans full width; silver/gold sit side by side */
  .dashboard-benefit-card--active {
    grid-column: 1 / -1;
  }

  .dashboard-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Keep account grid 3-col down to 1100px — plenty of space */
  .dashboard-account-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-saved-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-quick-form {
    grid-template-columns: 1fr 1fr 89px auto;
  }
}

@media (max-width: 900px) {
  /* Quick Order: stack Product Name field first at narrow sidebar widths */
  .dashboard-quick-form {
    grid-template-columns: 1fr 84px auto;
  }

  .dashboard-quick-field--product {
    grid-column: 1 / -1;
    order: -1;
  }

  /* Account grid 2-col before layout collapses at 768px */
  .dashboard-account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Account: last column spans full width alone */
  .dashboard-account-grid > div:last-child {
    grid-column: 1 / -1;
  }

  /* Saved products: 2-col so cards aren't too narrow with sidebar visible */
  .dashboard-saved-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Stat value: scale down so it fits narrow 3-col cards when sidebar visible */
  .dashboard-stat-value {
    font-size: clamp(16px, 3vw, 28px);
    line-height: 1.1;
  }

  /* Footer: stack brand above link columns at 900px */
  .footer-main {
    display: grid;
    grid-template-columns: 1fr;
  }

  .footer-brand {
    width: 100%;
  }

  .footer-social {
    gap: 16px;
  }

  .footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 32px;
    margin-left: 0;
  }
}

@media (max-width: 1024px) {
  .desktop-header {
    display: none;
  }

  .mobile-header {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .catalog-view-toggle--desktop,
  .catalog-view-toggle--mobile {
    display: none;
  }
}

@media (max-width: 767px) {
  .shell {
    padding-left: 24px;
    padding-right: 24px;
  }

  .catalog-breadcrumb {
    padding-top: 8px;
    padding-bottom: 16px;
  }

  .catalog-content {
    padding-bottom: 48px;
  }

  .catalog-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .catalog-filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 145;
    background: var(--overlay-ink-42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 220ms ease;
  }

  .catalog-filter-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .catalog-filters {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: 90dvh;
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .catalog-filters.is-open {
    transform: translateY(0);
  }

  .catalog-filters-card {
    border-radius: var(--radius-400) var(--radius-400) 0 0;
    height: auto;
    max-height: 90dvh;
  }

  .catalog-filters-scroll {
    padding-top: 20px;
    max-height: calc(90dvh - 64px);
  }

  .catalog-filter-close,
  .catalog-mobile-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .catalog-topbar {
    grid-template-columns: 1fr;
    align-items: start;
    margin-bottom: 88px; /* space for floating toolbar */
    gap: 20px;
  }

  .catalog-heading h1 {
    font-size: 42px;
    line-height: 40px;
  }

  /* Floating pill toolbar — Filters + Sort By */
  .catalog-toolbar-row {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 140;
    display: flex;
    width: auto;
    gap: 0;
    order: 0;
    grid-column: auto;
    align-items: stretch;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-300);
    box-shadow: var(--shadow-400);
    overflow: hidden;
    white-space: nowrap;
  }

  .catalog-mobile-filter-button {
    flex: 0 0 auto;
    width: auto;
    min-height: 48px;
    padding: 0 20px;
    gap: 8px;
    background: none;
    border: none;
    border-right: 1px solid var(--color-border-base);
    border-radius: 0;
    box-shadow: none;
    font-family: "Anybody", sans-serif;
    font-variation-settings: "wdth" 100, "wght" 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-strong);
  }

  .catalog-mobile-filter-button:hover {
    background: var(--color-bg-fill-strong);
  }

  .catalog-sort {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    min-width: 0;
    position: relative;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
  }

  .catalog-sort > span {
    display: none;
  }

  .catalog-sort select {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    min-width: 140px;
    min-height: 48px;
    padding: 0 40px 0 20px;
    border: none;
    background: transparent;
    font-family: "Anybody", sans-serif;
    font-variation-settings: "wdth" 100, "wght" 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-strong);
    cursor: pointer;
  }

  /* Custom chevron for select */
  .catalog-sort::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
  }

  .catalog-heading-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
  }

  .catalog-view-toggle--desktop {
    display: none;
  }

  .catalog-view-toggle--mobile {
    display: inline-flex;
  }

  .catalog-view-toggle {
    margin-left: 0;
    flex: 0 0 auto;
  }

  .catalog-view-toggle--mobile .catalog-view-button[data-catalog-view="list"] {
    order: 1;
  }

  .catalog-view-toggle--mobile .catalog-view-button[data-catalog-view="grid"] {
    order: 2;
  }

  .catalog-view-icon--desktop {
    display: none;
  }

  .catalog-view-icon--mobile {
    display: block;
  }

  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .catalog-heading h1 {
    max-width: 100%;
  }

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

  .catalog-grid .product-card,
  .catalog-grid.catalog-grid--list .product-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }

  .catalog-grid .product-media,
  .catalog-grid.catalog-grid--list .product-media {
    width: 100%;
    flex: 0 0 auto;
    height: 320px;
    min-height: 0;
  }

  .catalog-grid .product-body,
  .catalog-grid.catalog-grid--list .product-body,
  .catalog-grid.catalog-grid--list .catalog-card .product-body {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 16px;
    padding: 16px 16px 0;
  }

  .catalog-grid .product-copy,
  .catalog-grid.catalog-grid--list .product-copy {
    flex: 1 1 200px;
    min-width: 0;
    padding-right: 16px;
  }

  .catalog-grid .product-copy h3,
  .catalog-grid .product-meta,
  .catalog-grid.catalog-grid--list .product-copy h3,
  .catalog-grid.catalog-grid--list .product-meta {
    max-width: 100%;
  }

  .catalog-grid .product-price,
  .catalog-grid .product-price-stack,
  .catalog-grid.catalog-grid--list .product-price,
  .catalog-grid.catalog-grid--list .product-price-stack {
    width: auto;
    justify-self: auto;
    align-items: flex-end;
    text-align: right;
    min-width: 0;
  }

  .catalog-grid .product-copy .product-sku--copy,
  .catalog-grid.catalog-grid--list .product-copy .product-sku--copy {
    display: block;
  }

  .catalog-grid .product-price-stack .product-sku--price,
  .catalog-grid.catalog-grid--list .product-price-stack .product-sku--price {
    display: none;
  }

  .catalog-grid .product-price {
    font-size: 18px;
    line-height: 22px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .catalog-grid .product-actions,
  .catalog-grid.catalog-grid--list .product-actions,
  .catalog-grid.catalog-grid--list .catalog-card .product-actions {
    width: 100%;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    border-left: 0;
    padding: 16px;
  }

  .catalog-grid .product-actions .button {
    width: 100%;
    min-height: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .catalog-pagination {
    flex-wrap: wrap;
    gap: 8px;
  }

  .hero-section {
    --trust-bar-height: 184px;
  }

  /* Tall mobile hero: 3-line headline + longer copy + 2 stacked CTAs, and a
     trust bar that wraps to ~242px. Content is top-anchored, trust bar is
     bottom-anchored, so this min-height is what keeps the bottom CTA clear of
     the trust bar across the whole mobile range (the headline/copy are
     width-capped, so content height is ~constant from 360–767px). */
  .hero {
    min-height: 840px;
  }

  .hero-slide {
    background-image: var(--mobile);
    /* Mobile-only crop: shift toward the right side of the photo so the product
       (boat/PWC, which sits center-right in every slide) stays in view. Falls
       back to the desktop --pos, then center top. */
    background-position: var(--pos-m, var(--pos, center top));
  }

  /* Darken the left-to-right overlay a bit on mobile so the headline/copy stay
     legible over the brighter parts of the photos. Vertical gradient unchanged. */
  .hero-overlay {
    background:
      linear-gradient(90deg, rgba(24, 27, 31, 0.82) 0%, rgba(24, 27, 31, 0.54) 38%, rgba(24, 27, 31, 0.32) 66%, rgba(24, 27, 31, 0.20) 100%),
      linear-gradient(180deg, rgba(24, 27, 31, 0.14) 0%, rgba(24, 27, 31, 0.26) 100%);
  }

  .hero-content {
    min-height: 840px;
    justify-content: start;
    padding-top: 64px;
    padding-bottom: 272px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .type-heading-2xl {
    max-width: 260px;
    font-size: 36px;
    line-height: 34px;
  }

  .hero-copy {
    margin-top: 16px;
    max-width: 240px;
    font-size: 14px;
    line-height: 20px;
  }

  .hero-actions {
    margin-top: 24px;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Content-width, left-aligned stacked CTAs on mobile. max-width caps a long
     label (e.g. the sling product name) to the container so it wraps inside the
     button instead of overflowing the viewport, without forcing full width. */
  .hero-actions .button {
    width: auto;
    max-width: 100%;
  }

  .hero-controls {
    top: 24px;
    right: 24px;
    bottom: auto;
    width: auto;
    gap: 0;
    padding-right: 0;
  }

  .hero-pause {
    display: none;
  }

  .trust-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 0;
    left: 0;
    right: 0;
    padding-top: 24px;
    padding-bottom: 24px;
    min-height: 184px;
  }

  /* Dividers are a desktop-only treatment; the 2x2 mobile grid omits them. */
  .trust-divider {
    display: none;
  }

  .trust-item {
    padding-inline: 12px;
  }

  .trust-item:nth-of-type(3),
  .trust-item:nth-of-type(4) {
    border-top: 0;
    padding-top: 0;
  }

  .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .hero-section + .section {
    padding-top: 40px;
  }

  .section-head {
    align-items: flex-start;
  }

  .section-head .section-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .type-heading-xl.section-title {
    font-size: 24px;
    line-height: 24px;
  }

  .tab-row {
    width: 100%;
    margin-bottom: 24px;
  }

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

  .section--shop {
    background: var(--color-bg-fill-strong);
  }

  .scroll-row {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 180px;
    overflow-x: auto;
    overflow-y: visible;
    gap: 12px;
    padding-top: 8px;
    padding-bottom: 24px;
    scroll-snap-type: x proximity;
  }

  .scroll-row > * {
    width: 180px;
    min-width: 180px;
    scroll-snap-align: start;
  }

  .category-card img {
    height: 64px;
  }

  .scroll-row::-webkit-scrollbar {
    height: 4px;
  }

  .scroll-row::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: var(--overlay-brand-80);
  }

  /* ── Mobile product card — values taken from Figma ──
     Desktop card: 517×504 (image 328, body 176)
     Mobile card:  223×504 (image 180, body 324)
     Spec: Frame 82 padding 16; copy→price gap 16; body→actions gap 16;
           copy inner gap 8; actions buttons stacked gap 8.
     The card has a fixed total height. The IMAGE absorbs any slack
     (flex: 1), and every other block HUGS its content (flex: 0 0 auto).
     This makes NEW ARRIVALS and OFFERS cards visually identical in
     height regardless of whether a product has a "was" sale price. */
  /* The mobile .scroll-row is a CSS grid (grid-auto-flow: column) which
     stretches every column to the tallest row item by default. That
     means every card in the row is automatically the same height —
     we do NOT force a fixed card height. Inside each card, body and
     actions hug their content and .product-media (flex: 1 1 auto)
     absorbs all leftover vertical space, so shorter-copy cards get a
     taller image and longer-copy cards get a shorter image while the
     overall row height stays uniform. */
  /* Mobile rules apply to every product card grid except the catalog
     list view. Cards drop their fixed desktop 450px height and become
     auto-height; image flexes; copy stack uses 8/16 gap structure. */
  .product-grid--arrivals .product-card,
  .product-grid--featured .product-card,
  .catalog-grid:not(.catalog-grid--list) .product-card,
  .dashboard-saved-grid .product-card,
  .pdp-related-grid .product-card {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
  }

  .product-grid--arrivals .product-card:hover,
  .product-grid--arrivals .product-card:focus-within,
  .product-grid--featured .product-card:hover,
  .product-grid--featured .product-card:focus-within,
  .catalog-grid:not(.catalog-grid--list) .product-card:hover,
  .catalog-grid:not(.catalog-grid--list) .product-card:focus-within,
  .dashboard-saved-grid .product-card:hover,
  .dashboard-saved-grid .product-card:focus-within,
  .pdp-related-grid .product-card:hover,
  .pdp-related-grid .product-card:focus-within {
    z-index: 2;
  }

  /* Image FILLS the leftover vertical space. Explicitly override every
     product-card modifier combination (--compact, --sale, and the
     combined --compact.--sale) because those rules at the top of the
     file set fixed heights (247px / 320px) that would otherwise win
     on specificity and defeat the flex:1 fill behavior. */
  .product-grid--arrivals .product-media,
  .product-grid--arrivals .product-card--compact .product-media,
  .product-grid--arrivals .product-card--sale .product-media,
  .product-grid--arrivals .product-card--compact.product-card--sale .product-media,
  .product-grid--featured .product-media,
  .catalog-grid:not(.catalog-grid--list) .product-media,
  .catalog-grid:not(.catalog-grid--list) .product-card--compact .product-media,
  .catalog-grid:not(.catalog-grid--list) .product-card--sale .product-media,
  .catalog-grid:not(.catalog-grid--list) .product-card--compact.product-card--sale .product-media,
  .dashboard-saved-grid .product-media,
  .dashboard-saved-grid .dashboard-saved-card .product-media,
  .pdp-related-grid .product-media {
    flex: 1 1 auto;
    height: auto;
    min-height: 180px;
    padding: 0;
  }

  /* White content area HUGS content. Contains copy + price with 16 gap. */
  .product-grid--arrivals .product-body,
  .product-grid--featured .product-body,
  .catalog-grid:not(.catalog-grid--list) .product-body,
  .dashboard-saved-grid .product-body,
  .pdp-related-grid .product-body {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px 16px 0;
    width: 100%;
  }

  .product-grid--arrivals .product-copy,
  .product-grid--featured .product-copy,
  .catalog-grid:not(.catalog-grid--list) .product-copy,
  .dashboard-saved-grid .product-copy,
  .pdp-related-grid .product-copy {
    flex: 0 0 auto;
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .product-grid--arrivals .product-copy h3,
  .product-grid--arrivals .product-copy .product-sku,
  .product-grid--arrivals .product-copy .product-meta,
  .product-grid--featured .product-copy h3,
  .product-grid--featured .product-copy .product-sku,
  .product-grid--featured .product-copy .product-meta,
  .catalog-grid:not(.catalog-grid--list) .product-copy h3,
  .catalog-grid:not(.catalog-grid--list) .product-copy .product-sku,
  .catalog-grid:not(.catalog-grid--list) .product-copy .product-meta,
  .dashboard-saved-grid .product-copy h3,
  .dashboard-saved-grid .product-copy .product-sku,
  .dashboard-saved-grid .product-copy .product-meta,
  .pdp-related-grid .product-copy h3,
  .pdp-related-grid .product-copy .product-sku,
  .pdp-related-grid .product-copy .product-meta {
    margin: 0;
    max-width: 100%;
  }

  .product-grid--arrivals .product-price,
  .product-grid--arrivals .product-price-stack,
  .product-grid--featured .product-price,
  .product-grid--featured .product-price-stack,
  .catalog-grid:not(.catalog-grid--list) .product-price,
  .catalog-grid:not(.catalog-grid--list) .product-price-stack,
  .dashboard-saved-grid .product-price,
  .dashboard-saved-grid .product-price-stack,
  .pdp-related-grid .product-price,
  .pdp-related-grid .product-price-stack {
    align-items: flex-start;
    width: 100%;
  }

  .product-grid--arrivals .product-price,
  .product-grid--featured .product-price,
  .catalog-grid:not(.catalog-grid--list) .product-price,
  .dashboard-saved-grid .product-price,
  .pdp-related-grid .product-price {
    max-width: 100%;
    white-space: normal;
    font-size: 18px;
    line-height: 22px;
    overflow-wrap: anywhere;
  }

  .product-grid--arrivals .product-price-stack,
  .product-grid--featured .product-price-stack,
  .catalog-grid:not(.catalog-grid--list) .product-price-stack,
  .dashboard-saved-grid .product-price-stack,
  .pdp-related-grid .product-price-stack {
    flex: 0 0 auto;
    gap: 0;
    margin: 0;
  }

  /* Actions HUG. Own padding mirrors Figma Frame 142 position. */
  .product-grid--arrivals .product-actions,
  .product-grid--featured .product-actions,
  .catalog-grid:not(.catalog-grid--list) .product-actions,
  .dashboard-saved-grid .product-actions,
  .pdp-related-grid .product-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    margin: 0;
  }

  .product-grid--arrivals .product-actions .button,
  .product-grid--featured .product-actions .button,
  .catalog-grid:not(.catalog-grid--list) .product-actions .button,
  .dashboard-saved-grid .product-actions .button,
  .pdp-related-grid .product-actions .button {
    width: 100%;
  }

  .product-actions {
    flex-direction: column;
    gap: 8px;
  }

  .product-actions .button {
    min-width: 0;
    width: 100%;
    min-height: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding-inline: 12px;
  }

  .cta-section {
    flex-direction: column;
    gap: 16px;
    margin-top: 180px;
    margin-bottom: 16px;
    transform: translateY(0);
  }

  .section--arrivals {
    /* Two stacked layers: a vertical gradient (light → dark) on top, and the
       site's horizontal page-shell gradient underneath. The top layer fades
       to transparent at the bottom so the section's bottom edge dissolves
       seamlessly into the body gradient that the brands-section sits on —
       no hard line between sections. */
    background:
      linear-gradient(
        180deg,
        var(--color-bg-fill-strong) 0%,
        var(--color-bg-fill-strong) 64%,
        var(--color-bg-ink-deep) 70%,
        transparent 100%
      ),
      var(--gradient-page-shell);
    padding-bottom: 64px;
  }

  .cta-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: auto;
    padding: 24px 24px 32px;
  }

  .cta-card h2 {
    margin-top: 0;
    max-width: 100%;
    font-size: 24px;
    line-height: 24px;
  }

  .cta-card p:last-of-type {
    margin-top: 0;
    max-width: 100%;
  }

  .cta-card .button {
    margin-top: 0;
    align-self: flex-start;
  }

  .brands-section {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .newsletter-card {
    padding: 24px;
    gap: 24px;
  }

  .newsletter-form {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .newsletter-form .newsletter-input,
  .newsletter-form .button {
    width: 100%;
    min-width: 0;
  }

  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }

  .footer-brand img {
    width: 220px;
    height: auto;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: start;
  }

  .mobile-sidebar-panel {
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    border-radius: 0;
  }

  .mobile-sidebar-panel .sidebar-head {
    padding-left: 32px;
    padding-right: 32px;
  }

  .mobile-sidebar-panel .sidebar-body,
  .mobile-sidebar-panel .sidebar-foot {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* === Dashboard Mobile Directory Overlay === */
.dashboard-directory-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

.dashboard-directory-overlay.is-open {
  pointer-events: auto;
}

.dashboard-directory-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-ink-42);
  opacity: 0;
  transition: opacity 220ms ease;
}

.dashboard-directory-overlay.is-open .dashboard-directory-overlay-backdrop {
  opacity: 1;
}

.dashboard-directory-overlay-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  max-width: 100vw;
  max-height: 90dvh;
  background: var(--color-bg-surface);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-400) var(--radius-400) 0 0;
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
}

.dashboard-directory-overlay.is-open .dashboard-directory-overlay-panel {
  transform: translateY(0);
}

.dashboard-directory-overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border-base);
  flex-shrink: 0;
}

.dashboard-directory-overlay-head p {
  margin: 0;
}

.dashboard-directory-overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dashboard-directory-mobile-trigger {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  color: var(--color-text-strong);
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  gap: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-400);
  transition: transform 160ms ease, box-shadow 160ms ease;
  white-space: nowrap;
}

.dashboard-directory-mobile-trigger:hover,
.dashboard-directory-mobile-trigger:focus-visible {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.dashboard-directory-mobile-trigger-chevron {
  display: none;
}

/* === Hide old details-based mobile toggle === */
.dashboard-directory-mobile {
  display: none !important;
}

@media (max-width: 767px) {
  .dashboard-main {
    padding-top: 16px;
  }

  .dashboard-shell {
    padding-bottom: 40px;
  }

  .dashboard-directory-mobile-trigger {
    display: flex;
  }

  /* Add bottom padding to dashboard so FAB doesn't cover content */
  .dashboard-shell {
    padding-bottom: 96px;
  }

  .dashboard-directory-overlay {
    display: block;
  }

  .dashboard-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dashboard-directory {
    display: none;
  }

  .dashboard-content {
    gap: 16px;
  }

  .dashboard-welcome {
    display: block;
  }

  .dashboard-welcome h1 {
    max-width: none;
    font-size: 32px;
    line-height: 32px;
  }

  .dashboard-date {
    margin-top: 6px;
  }

  .dashboard-tier-card-inner,
  .dashboard-card,
  .dashboard-benefit-card,
  .dashboard-stat-card {
    padding: 16px;
  }

  .dashboard-tier-card-top {
    flex-direction: row;
    align-items: start;
    gap: 16px;
  }

  .dashboard-card-head,
  .dashboard-order-subtotal {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-tier-card-inner {
    min-height: 0;
  }

  .dashboard-tier-metrics {
    justify-content: flex-end;
    gap: 20px;
    flex-shrink: 0;
  }

  .dashboard-tier-metric-label {
    white-space: nowrap;
  }

  .dashboard-tier-metric-value {
    font-size: 18px;
    line-height: 20px;
  }

  .dashboard-tier-card h2 {
    font-size: 36px;
    line-height: 36px;
  }

  .dashboard-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .dashboard-benefit-card--active {
    grid-column: 1 / -1;
  }

  .dashboard-benefit-percent {
    font-size: 36px;
    line-height: 36px;
  }

  .dashboard-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .dashboard-stat-card {
    padding: 12px;
  }

  .dashboard-stat-card .dashboard-card-eyebrow,
  .dashboard-stat-card .dashboard-stat-value {
    margin: 0;
  }

  /* Progress copy: stack label on top of amount on mobile */
  .dashboard-progress-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .dashboard-quick-form {
    grid-template-columns: 1fr 84px auto;
    align-items: end;
  }

  .dashboard-quick-field--product {
    grid-column: 1 / -1;
    order: -1;
  }

  .dashboard-qty-field {
    max-width: none;
  }

  .dashboard-order-actions {
    margin-top: 16px;
  }

  .dashboard-order-actions .button {
    flex: 1;
  }

  .dashboard-table {
    min-width: 540px;
  }

  .dashboard-saved-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Stat value: scale down at mobile viewport widths */
  .dashboard-stat-value {
    font-size: clamp(16px, 4.5vw, 28px);
    line-height: 1;
  }

  .dashboard-account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-account-grid > div {
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .dashboard-benefits {
    grid-template-columns: 1fr;
  }

  .dashboard-benefit-card--active {
    grid-column: auto;
  }

  /* Stats: 2-col with savings spanning full width for breathing room */
  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .dashboard-stats .dashboard-stat-card:last-child {
    grid-column: 1 / -1;
  }

  .dashboard-quick-form {
    grid-template-columns: 1fr 72px auto;
  }

  .dashboard-saved-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-account-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .catalog-view-toggle--mobile {
    display: none;
  }

  .mobile-topbar {
    gap: var(--space-400);
  }

  .brand--mobile {
    flex: 1 1 auto;
    min-width: 0;
  }

  .brand--mobile img {
    width: min(100%, 148px);
  }

  .mobile-actions {
    flex: 0 0 auto;
    gap: var(--space-300);
  }

  /* catalog-toolbar-row is fixed/floating at 767px — no override needed at 430px */

  /* catalog-sort and filter button inherit floating pill styles from 767px */

  .catalog-heading-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .catalog-view-toggle {
    margin-left: auto;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-welcome h1 {
    font-size: 28px;
    line-height: 28px;
  }

  .dashboard-tier-metrics {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .dashboard-tier-card h2 {
    font-size: 28px;
    line-height: 28px;
  }

  .dashboard-benefits {
    grid-template-columns: 1fr;
  }

  .dashboard-benefit-card--active {
    grid-column: auto;
  }

  /* Stats inherit 2-col from 560px breakpoint at this size */
  .dashboard-stat-value {
    font-size: 26px;
    line-height: 1;
  }

  .dashboard-quick-form {
    grid-template-columns: 1fr;
  }

  .dashboard-quick-field--product {
    order: 0;
    grid-column: auto;
  }

  .dashboard-saved-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-account-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-note {
    padding: 10px;
  }
}

@media (max-width: 400px) {
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  /* The headline (3 lines) + longer copy + 2 stacked CTAs is tall, and the
     trust bar wraps to ~242px at this width. Content is top-anchored and the
     trust bar is bottom-anchored, so the hero min-height is what creates the
     clearance between the last CTA and the trust bar. */
  .hero,
  .hero-content {
    min-height: 840px;
  }

  /* Reserve room for the actual (wrapped) trust bar height plus breathing room
     so the bottom CTA never sits behind it. */
  .hero-content {
    padding-bottom: 272px;
  }
}

/* Ensure no horizontal overflow at any width */
.dashboard-page {
  overflow-x: hidden;
}

.dashboard-content,
.dashboard-shell {
  min-width: 0;
}

/* ── Sub-360px hero trust bar ─────────────────────────────────────────────── */
/* Below 360px the trust bar exits the hero overlay and flows directly below  */
/* as a solid dark band so it never overlaps hero content.                    */
@media (max-width: 359px) {
  .hero-section {
    --trust-bar-height: 0px;
  }

  /* The hero-slide elements are position:absolute, so .hero needs an
     explicit min-height. Tune it to the natural content height of the
     tallest slide (5-line headline + copy + 2 stacked CTAs + padding)
     so the hero hugs the content and there's no dead zone of background
     image between the bottom CTA and the trust bar (which flows below). */
  .hero {
    min-height: 560px;
  }

  .hero-content {
    min-height: 0;
    padding-bottom: 56px;
  }

  .trust-bar {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--color-bg-ink);
  }
}

/* ═══════════════════════════════════════════════════════════
   CHECKOUT
   ═══════════════════════════════════════════════════════════ */

/* ── Page base ── */
.checkout-page {
  background: var(--color-bg-page);
}

/* ── Sticky header wrapper (nav + mobile tray stick together) ── */
.checkout-sticky-top {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ── Checkout header ── */
.checkout-header {
  background: var(--color-bg-page);
  box-shadow: var(--shadow-400);
}

.checkout-nav-desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 40px 24px;
  min-height: 72px;
}

.checkout-nav-mobile {
  display: none;
  flex-direction: column;
  gap: var(--space-300);
  padding-top: var(--space-600);
  padding-bottom: var(--space-600);
}

.checkout-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-400) var(--space-600);
}

.checkout-nav-row--center {
  justify-content: center;
}

.checkout-logo img {
  width: 168px;
  height: auto;
  display: block;
}

.checkout-secure {
  display: flex;
  align-items: center;
  gap: var(--space-200);
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-sm-size);
  line-height: 1;
  letter-spacing: var(--type-heading-sm-track);
  text-transform: uppercase;
  color: var(--color-text-brand);
}

.checkout-secure .icon-svg {
  flex-shrink: 0;
  position: relative;
  top: -2px;
}

.checkout-edit-cart {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-button-lg-size);
  font-weight: 500;
  letter-spacing: var(--type-button-lg-track);
  color: var(--color-text-strong);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.checkout-edit-cart > span:not(.checkout-counter) {
  white-space: nowrap;
}

.checkout-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--space-200);
  background: var(--color-bg-fill-strong);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  color: var(--color-text-strong);
}

/* ── Mobile cart tray ── */
.mobile-cart-tray {
  display: none;
  background: var(--color-bg-surface-subtle);
  border: 1px solid var(--color-border-base);
  border-top: none;
  border-radius: 0 0 var(--radius-400) var(--radius-400);
  box-shadow: var(--shadow-400);
}

.cart-tray-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-500);
  cursor: pointer;
  user-select: none;
}

.cart-tray-bar-left {
  display: flex;
  align-items: center;
  gap: var(--space-300);
}

.cart-tray-title {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-sm-size);
  line-height: var(--type-heading-sm-line);
  letter-spacing: var(--type-heading-sm-track);
  text-transform: uppercase;
  color: var(--color-text-strong);
}

.cart-tray-total {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-sm-size);
  line-height: var(--type-heading-sm-line);
  letter-spacing: var(--type-heading-sm-track);
  text-transform: uppercase;
  color: var(--color-text-brand);
}

.cart-tray-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-icon-base);
  transition: transform 200ms ease;
}

.mobile-cart-tray.is-expanded .cart-tray-arrow {
  transform: rotate(180deg);
}

.cart-tray-body {
  display: none;
  padding: var(--space-500);
  border-top: 1px solid var(--color-border-base);
}

.mobile-cart-tray.is-expanded .cart-tray-body {
  display: block;
}

/* ── Checkout main layout ── */
.checkout-main {
  display: grid;
  grid-template-columns: 1fr 376px;
  gap: var(--space-600);
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--space-800) var(--space-1000);
  align-items: start;
}

.checkout-main.is-confirming {
  grid-template-columns: 1fr;
  max-width: 600px;
  padding-top: var(--space-1100);
  padding-bottom: var(--space-1100);
}

.checkout-main.is-confirming .checkout-cart-col {
  display: none;
}

.checkout-steps-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
  min-width: 0;
}

.checkout-step-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
}

.checkout-step-panel[hidden] {
  display: none;
}

/* ── Progress stepper ── */
.checkout-stepper {
  display: flex;
  width: 100%;
}

.co-step {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-400);
  position: relative;
  isolation: isolate;
}

.co-step-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 2;
}

.co-step-line {
  flex: 1 0 0;
  height: 2px;
  background: var(--color-border-base);
}

.co-step-line--active {
  background: var(--color-bg-fill-brand);
}

.co-step-line--invis {
  background: transparent;
}

.co-step-node {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.co-step-node--incomplete {
  background: rgba(105, 105, 105, 0.02);
  border: 2px solid var(--color-border-base);
}

.co-step-node--incomplete::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-border-base);
}

.co-step-node--current {
  background: white;
  border: 2px solid var(--color-bg-fill-brand);
  z-index: 2;
}

.co-step-node--current::before {
  content: "";
  position: absolute;
  inset: -13px;
  border: 4px solid var(--color-bg-fill-brand);
  border-radius: var(--radius-full);
  opacity: 0.2;
  pointer-events: none;
}

.co-step-node--complete {
  background: var(--color-bg-fill-brand);
  border: 2px solid var(--color-bg-fill-brand);
  color: white;
}

/* Complete node uses an inline SVG icon — no ::after needed */

.co-step-label {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-sm-size);
  line-height: var(--type-heading-sm-line);
  letter-spacing: var(--type-heading-sm-track);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-placeholder);
  margin: 0;
  z-index: 1;
}

.co-step-label--active {
  color: var(--color-text-brand);
}

/* ── Form panel card ── */
.co-panel {
  background: white;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  padding: var(--space-600);
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
}

.co-panel-heading {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 125, "wght" 700;
  font-size: var(--type-heading-xl-size);
  line-height: var(--type-heading-xl-line);
  letter-spacing: -0.05px;
  text-transform: uppercase;
  color: var(--color-text-strong);
  margin: 0;
}

.co-panel-subtext {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  color: var(--color-text-subtle);
  margin: 0;
}

/* Panel header groups heading + subtext with tight gap */
.co-panel-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

/* Shared form action row used by .co-panel forms */
.co-actions {
  display: flex;
  gap: var(--space-400);
  flex-wrap: wrap;
  margin-top: var(--space-200);
  padding-top: var(--space-500);
  border-top: 1px solid var(--color-border-subtle);
}
@media (max-width: 600px) {
  .co-actions .button {
    flex: 1 1 100%;
  }
}

/* Collapsed/expanded co-panels for progressive flow (dealer-program) */
.co-panel.is-collapsed {
  background: var(--color-bg-page);
  opacity: 0.65;
  gap: 0;
  padding: var(--space-500) var(--space-600);
}
.co-panel.is-collapsed > *:not(.co-panel-header) {
  display: none;
}

/* ── Form elements ── */
.co-section-label {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-sm-size);
  line-height: var(--type-heading-sm-line);
  letter-spacing: var(--type-heading-sm-track);
  text-transform: uppercase;
  color: var(--color-text-placeholder);
  margin: 0;
}

.co-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.co-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-400);
}

.co-form-row--3col {
  grid-template-columns: 2fr 1fr 1fr;
}
.co-form-row--3col-equal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .co-form-row,
  .co-form-row--3col,
  .co-form-row--3col-equal {
    grid-template-columns: 1fr;
  }
}

/* Side-by-side sub-forms inside a co-panel (used for split lookup forms
   like start-return.html: Online order vs. Retail purchase) */
.co-subform {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}
.co-subform > h3 {
  margin: 0 0 var(--space-200);
}

/* Numbered ordered list inside a co-panel (steps / how-it-works) */
.co-numbered-list {
  margin: 0;
  padding-left: var(--space-600);
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  color: var(--color-text-base);
  line-height: 1.65;
}
.co-numbered-list li::marker {
  color: var(--color-text-subtle);
  font-weight: 700;
}

.co-label {
  display: block;
  font-family: "Nunito Sans", sans-serif;
  font-variation-settings: "YTLC" 500, "wdth" 100;
  font-size: var(--type-body-md-size);
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.42px;
  color: var(--color-text-base);
}

.co-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-400);
  background: white;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-300);
  font-family: "Nunito Sans", sans-serif;
  font-variation-settings: "YTLC" 500, "wdth" 100;
  font-size: var(--type-body-lg-size);
  line-height: 22px;
  color: var(--color-text-strong);
  -webkit-appearance: none;
  appearance: none;
}

.co-input::placeholder {
  color: var(--color-text-placeholder);
}

.co-input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px rgba(36, 64, 131, 0.12);
}

textarea.co-input {
  height: auto;
  min-height: 140px;
  padding: var(--space-400);
  resize: vertical;
  line-height: 1.5;
  font-family: "Nunito Sans", sans-serif;
}

select.co-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23353b42' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-400) center;
  background-size: 18px 18px;
  padding-right: var(--space-1000);
  cursor: pointer;
}

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

.co-input-wrap .co-input {
  padding-right: 44px;
}

.co-input-eye {
  position: absolute;
  right: 12px;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-icon-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.co-helper {
  display: flex;
  align-items: center;
  gap: var(--space-200);
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  color: var(--color-text-subtle);
}

.co-helper--success {
  color: var(--color-text-success);
}

/* ── Shipping method cards ── */
.shipping-methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}

.shipping-method-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-400);
  padding: var(--space-500) var(--space-600);
  background: white;
  border: 2px solid var(--color-border-base);
  border-radius: var(--radius-400);
  cursor: pointer;
  transition: border-color 160ms ease;
}

.shipping-method-card input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-bg-fill-brand);
  cursor: pointer;
}

.shipping-method-card.is-selected {
  border-color: var(--color-bg-fill-brand);
}

.shipping-method-info {
  flex: 1;
}

.shipping-method-name {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-sm-size);
  line-height: var(--type-heading-sm-line);
  letter-spacing: var(--type-heading-sm-track);
  text-transform: uppercase;
  color: var(--color-text-strong);
  margin: 0;
}

.shipping-method-detail {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  color: var(--color-text-subtle);
  margin: var(--space-100) 0 0;
}

.shipping-method-price {
  margin: 0 0 0 auto;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-text-strong);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Card brand badges (payment step) ── */
.card-brands {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-200);
  font-family: "Nunito Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-text-strong);
  background: white;
}

/* ── Checkbox row ── */
.co-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  cursor: pointer;
}

.co-checkbox-row input[type="checkbox"],
.co-checkbox-row input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--color-bg-fill-brand);
  cursor: pointer;
}

/* ── Account features list ── */
.account-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-800);
  padding-bottom: var(--space-600);
}

.account-feature {
  display: flex;
  align-items: center;
  gap: var(--space-400);
  flex: 1 0 calc(50% - 20px);
  min-width: 260px;
}

.account-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: white;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  box-shadow: var(--shadow-100);
  flex-shrink: 0;
  color: var(--color-text-base);
}

.account-feature-name {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-sm-size);
  line-height: var(--type-heading-sm-line);
  letter-spacing: var(--type-heading-sm-track);
  text-transform: uppercase;
  color: var(--color-text-base);
  margin: 0;
}

.account-feature-desc {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  color: var(--color-text-subtle);
  margin: 2px 0 0;
}

.account-info-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-300);
  padding: var(--space-400);
  background: var(--color-bg-fill-info-subtle);
  border-radius: var(--radius-400);
}

.account-info-banner p {
  flex: 1;
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  color: var(--color-text-strong);
  margin: 0;
}

/* ── Review blocks (stage 4) ── */
.review-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
}

.review-block {
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  overflow: hidden;
}

.review-block-header {
  display: flex;
  align-items: center;
  gap: var(--space-400);
  padding: var(--space-400) var(--space-600);
  background: var(--color-bg-fill-strong);
  border-bottom: 1px solid var(--color-border-base);
}

.review-block-label {
  flex: 1;
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 600;
  font-size: var(--type-heading-xs-size);
  line-height: var(--type-heading-xs-line);
  letter-spacing: var(--type-heading-xs-track);
  text-transform: uppercase;
  color: var(--color-text-strong);
  margin: 0;
}

.review-block-edit {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-body-lg-size);
  font-weight: 600;
  line-height: 24px;
  color: var(--color-text-brand);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.review-block-body {
  padding: var(--space-600);
  background: white;
}

.review-data {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  margin: 0;
}

.review-data--strong {
  color: var(--color-text-strong);
}

.review-data--subtle {
  color: var(--color-text-subtle);
  margin-top: var(--space-200);
}

.review-data--bold b {
  font-weight: 700;
}

.review-data-group + .review-data-group {
  margin-top: var(--space-600);
}

.review-data-group p {
  margin: 0;
}

.review-data-group .review-data--strong + .review-data--subtle {
  margin-top: var(--space-200);
}

/* ── Review items list ── */
.review-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
}

.review-item {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: var(--space-400);
}

.review-item-img {
  width: 46px;
  height: 46px;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  object-fit: cover;
  flex-shrink: 0;
}

.review-item-info {
  flex: 1;
  min-width: 0;
}

.review-item-title {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-body-md-size);
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.42px;
  color: var(--color-text-base);
  margin: 0;
}

.review-item-sku {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 600;
  font-size: var(--type-heading-xs-size);
  line-height: var(--type-heading-xs-line);
  letter-spacing: var(--type-heading-xs-track);
  text-transform: uppercase;
  color: var(--color-text-placeholder);
  margin: var(--space-300) 0 0;
}

.review-item-price {
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-text-strong);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Cart panel (desktop right col) ── */
.checkout-cart-col {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
}

.cart-panel {
  background: white;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  padding: var(--space-600);
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
  box-shadow: var(--shadow-400);
}

.cart-panel-title {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-sm-size);
  line-height: var(--type-heading-sm-line);
  letter-spacing: var(--type-heading-sm-track);
  text-transform: uppercase;
  color: var(--color-text-strong);
  margin: 0;
}

.cart-divider {
  height: 1px;
  background: var(--color-border-base);
  border: none;
  margin: 0;
}

.cart-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
}

.cart-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-400);
}

.cart-item-thumb {
  width: 60px;
  height: 60px;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  object-fit: cover;
  flex-shrink: 0;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-family: "Nunito Sans", sans-serif;
  font-variation-settings: "YTLC" 500, "wdth" 100;
  font-size: var(--type-body-md-size);
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.42px;
  color: var(--color-text-base);
  margin: 0;
}

.cart-item-meta {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 600;
  font-size: var(--type-heading-xs-size);
  line-height: var(--type-heading-xs-line);
  letter-spacing: var(--type-heading-xs-track);
  text-transform: uppercase;
  color: var(--color-text-placeholder);
  margin: var(--space-300) 0 0;
}

.cart-item-price {
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-text-strong);
  white-space: nowrap;
  flex-shrink: 0;
}

.cart-qty-row {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  margin-top: var(--space-400);
}

.cart-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: white;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  font-size: 16px;
  color: var(--color-text-base);
  cursor: pointer;
  flex-shrink: 0;
}

.cart-qty-val {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-body-md-size);
  font-weight: 500;
  color: var(--color-text-strong);
  min-width: 20px;
  text-align: center;
}

/* ── Promo code ── */
.promo-row {
  display: flex;
  gap: var(--space-300);
}

.promo-row .co-input {
  flex: 1;
  min-width: 0;
}

.promo-row .button {
  flex-shrink: 0;
  min-width: 80px;
  min-height: 48px;
}

/* ── Cart totals ── */
.cart-totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}

.cart-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-total-label {
  font-family: "Nunito Sans", sans-serif;
  font-variation-settings: "YTLC" 500, "wdth" 100;
  font-size: var(--type-body-md-size);
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.42px;
  color: var(--color-text-subtle);
}

.cart-total-value {
  font-family: "Nunito Sans", sans-serif;
  font-variation-settings: "YTLC" 500, "wdth" 100;
  font-size: var(--type-body-md-size);
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.42px;
  color: var(--color-text-base);
}

.cart-grand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-grand-label {
  font-family: "Nunito Sans", sans-serif;
  font-variation-settings: "YTLC" 500, "wdth" 100;
  font-size: var(--type-body-lg-size);
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.48px;
  color: var(--color-text-base);
}

.cart-grand-value {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.02px;
  color: var(--color-text-brand);
}

/* ── Place order button disabled state ── */
.button--primary:disabled {
  background: var(--color-bg-fill-strong);
  color: var(--color-text-placeholder);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Cart need-help section ── */
.cart-help {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.cart-help-title {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-sm-size);
  line-height: var(--type-heading-sm-line);
  letter-spacing: var(--type-heading-sm-track);
  text-transform: uppercase;
  color: var(--color-text-strong);
  margin: 0;
}

.cart-help-text {
  font-family: "Nunito Sans", sans-serif;
  font-variation-settings: "YTLC" 500, "wdth" 100;
  font-size: var(--type-body-md-size);
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.42px;
  color: var(--color-text-base);
  margin: 0;
}

.cart-help-link {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 600;
  font-size: var(--type-body-lg-size);
  line-height: 24px;
  color: var(--color-text-magic);
  text-decoration: underline;
  cursor: pointer;
}

/* ── Checkout nav/action buttons ── */
/* .checkout-actions base styles moved to v18 block below */

.button--plain {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-strong);
  box-shadow: none;
}

.button--plain:hover,
.button--plain:focus-visible {
  background: var(--color-bg-fill-strong);
  box-shadow: none;
  transform: none;
}

/* ── Confirmation (stage 5) ── */
.checkout-confirm-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1000);
  width: 100%;
  text-align: center;
  padding-bottom: var(--space-1100);
}

.confirm-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.confirm-success-icon {
  width: 93px;
  height: 93px;
  color: var(--color-text-success);
}

.confirm-order-number {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 600;
  font-size: var(--type-heading-xs-size);
  line-height: var(--type-heading-xs-line);
  letter-spacing: var(--type-heading-xs-track);
  text-transform: uppercase;
  color: var(--color-text-placeholder);
  margin: 0;
}

.confirm-email-note {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  color: var(--color-text-strong);
  margin: 0;
}

.confirm-account-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-300);
  padding: var(--space-400);
  background: var(--color-bg-fill-info-subtle);
  border-radius: var(--radius-400);
  text-align: left;
  width: 100%;
}

.confirm-account-banner-msg {
  flex: 1;
}

.confirm-account-banner-title {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-body-lg-size);
  font-weight: 700;
  line-height: 22px;
  color: var(--color-text-brand);
  margin: 0 0 var(--space-300);
}

.confirm-account-banner-text {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  color: var(--color-text-strong);
  margin: 0;
}

.confirm-order-card {
  width: 100%;
  background: white;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  padding: var(--space-500);
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
  text-align: left;
}

.confirm-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  width: 100%;
}

.confirm-actions .button {
  width: 100%;
}

/* ── Responsive (≤ 767px) ── */
@media (max-width: 767px) {
  .checkout-nav-desktop {
    display: none;
  }

  .checkout-nav-mobile {
    display: flex;
  }

  .mobile-cart-tray {
    display: block;
  }

  .mobile-cart-tray[hidden] {
    display: none;
  }

  .checkout-main {
    grid-template-columns: 1fr;
    padding: var(--space-700) var(--space-600);
    gap: var(--space-700);
  }

  .checkout-main.is-confirming {
    padding: var(--space-700) var(--space-600);
  }

  .checkout-cart-col {
    display: none;
  }

  .co-form-row {
    grid-template-columns: 1fr;
  }

  .co-form-row--3col {
    grid-template-columns: 1fr 1fr;
  }

  .account-feature {
    flex: 1 0 100%;
    min-width: 0;
  }

  .checkout-confirm-wrap {
    gap: var(--space-900);
  }
}

/* ═══════════════════════════════════════════════════
   CHECKOUT — NEW COMPONENT STYLES (v18)
   ═══════════════════════════════════════════════════ */

/* ── Checkout logo proportional scaling ── */
.checkout-logo img {
  width: min(100%, 168px);
  height: auto;
  aspect-ratio: 285 / 42;
  object-fit: contain;
}

/* ── Step node as button (back-navigation) ── */
button.co-step-node {
  /* Reset only problematic browser defaults — do NOT reset background/border
     so state classes (.co-step-node--complete etc.) remain in full control */
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

button.co-step-node--complete {
  cursor: pointer;
}

button.co-step-node--complete:hover .co-step-node-circle {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: #fff;
}

/* ── Qty input (number field, no spinner) ── */
.cart-qty-val {
  width: 40px;
  text-align: center;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
  padding: 0;
  -moz-appearance: textfield;
}
.cart-qty-val::-webkit-outer-spin-button,
.cart-qty-val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cart-qty-val:focus {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Textarea form control ── */
.co-textarea {
  resize: vertical;
  min-height: 96px;
  height: auto;
  /* Override the 48px height + 0-vertical-padding from .co-input */
  padding-top: var(--space-400);
  padding-bottom: var(--space-400);
  line-height: 1.5;
}

/* ── Optional label tag ── */
.co-label-optional {
  font-weight: var(--font-regular);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-left: var(--space-100);
}

/* ── Checkout actions row (Continue + Back on same row) ── */
.checkout-actions {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-400);
  flex-wrap: wrap;
}

.checkout-actions .button--primary,
.checkout-actions .button--cta,
.checkout-actions .button--ghost,
.checkout-actions .button--secondary,
.checkout-actions .button--plain {
  flex: 0 0 auto;
}

/* ── Card brand logos (payment step) ── */
.card-brands {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: var(--space-500);
}

.card-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 28px;
  padding: 4px 5px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.card-brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Amex logo SVG already includes the blue card background */
.card-brand-logo--amex {
  background: #016FD0;
}

/* ── Review account row (Name + Email side-by-side) ── */
.review-account-row {
  display: flex;
  gap: var(--space-600);
  flex-wrap: wrap;
}

.review-account-row .review-data-group {
  flex: 1 1 160px;
}

/* ── Billing address expand/collapse ── */
.billing-address-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
}

.billing-address-fields[hidden] {
  display: none;
}

/* ── Account feature text (overflow guard) ── */
.account-feature-text {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Amber feature icons ── */
.account-feature-icon--amber {
  color: var(--color-text-magic, #c46a00);
}

/* ── General overflow guards for flex children ── */
.account-info-banner p,
.review-data-group,
.cart-item-name,
.cart-item-meta {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Floating cart FAB (mobile only) ── */
.cart-fab {
  display: none; /* hidden on desktop */
}

/* ── Cart bottom drawer ── */
.cart-drawer-backdrop {
  display: none;
}

.cart-drawer {
  display: none;
}

/* ═══════════════════════════════════════════════════
   CHECKOUT — MID-VIEWPORT (≤ 960px): collapse form rows
   ═══════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .co-form-row {
    grid-template-columns: 1fr;
  }

  .co-form-row--3col {
    grid-template-columns: 1fr 1fr;
  }

  /* Let account features wrap to 1-col at mid viewport */
  .account-feature {
    flex: 1 0 100%;
    min-width: 0;
  }
}

/* ═══════════════════════════════════════════════════
   CHECKOUT — MOBILE OVERRIDES (v18)
   ═══════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Extra bottom padding on mobile so FAB doesn't overlap last button */
  .checkout-steps-col {
    padding-bottom: 80px;
  }

  /* Checkout actions stack on mobile */
  .checkout-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .checkout-actions .button--primary,
  .checkout-actions .button--cta,
  .checkout-actions .button--ghost,
  .checkout-actions .button--secondary,
  .checkout-actions .button--plain {
    flex: 1 1 auto;
    width: 100%;
  }

  /* Review account row stacks on mobile */
  .review-account-row {
    flex-direction: column;
    gap: var(--space-400);
  }

  /* Prevent flex children from growing in column direction — eliminates huge gaps */
  .review-account-row .review-data-group {
    flex: 0 0 auto;
  }

  /* ── Floating cart FAB — matches catalog toolbar style ── */
  .cart-fab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-300);
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: var(--color-bg-surface);
    color: var(--color-text-strong);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-300);
    padding: 0 var(--space-500);
    min-height: 48px;
    gap: var(--space-400);
    font-family: "Anybody", sans-serif;
    font-variation-settings: "wdth" 100, "wght" 600;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--shadow-400);
  }

  .cart-fab[hidden] {
    display: none;
  }

  .cart-fab-label {
    color: var(--color-text-strong);
  }

  .cart-fab-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-fill-brand);
    color: white;
    border-radius: var(--radius-full);
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
  }

  .cart-fab-price {
    color: var(--color-text-brand);
    font-weight: 700;
  }

  /* Cart icon + counter grouped together — separated from price with a divider (see below) */
  .cart-fab-icon-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    border-left: 1px solid var(--color-border-base);
    padding-left: var(--space-400);
    margin-left: var(--space-100);
  }

  /* Price section also gets a left divider to separate from the label */
  .cart-fab-price {
    border-left: 1px solid var(--color-border-base);
    padding-left: var(--space-400);
    margin-left: var(--space-100);
  }

  .cart-fab-arrow {
    /* Down arrow rotated 180deg = pointing UP by default */
    transform: rotate(180deg);
    transition: transform 0.2s ease;
    color: var(--color-text-subtle);
  }

  /* Rotate back to 0deg (pointing DOWN) when drawer is open */
  .cart-fab[aria-expanded="true"] .cart-fab-arrow {
    transform: rotate(0deg);
  }

  /* ── Cart bottom drawer backdrop ── */
  .cart-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 300;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }

  .cart-drawer-backdrop[hidden] {
    display: none;
  }

  .cart-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Cart bottom drawer panel ── */
  .cart-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 400;
    background: var(--color-surface-primary, #fff);
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
    max-height: 80vh;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
    pointer-events: none;
  }

  .cart-drawer[hidden] {
    display: none;
  }

  .cart-drawer.is-open {
    transform: translateY(0);
    pointer-events: auto;
  }

  .cart-drawer-handle {
    width: 40px;
    height: 4px;
    border-radius: 9999px;
    background: var(--color-border-default);
    margin: var(--space-300) auto var(--space-100);
    flex-shrink: 0;
  }

  .cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-300) var(--space-600) var(--space-400);
    border-bottom: 1px solid var(--color-border-default);
    flex-shrink: 0;
  }

  .cart-drawer-title {
    /* Brand typography — matches other section labels */
    font-family: "Anybody", sans-serif;
    font-variation-settings: "wdth" 87.5, "wght" 700;
    font-size: var(--type-heading-sm-size);
    line-height: var(--type-heading-sm-line);
    letter-spacing: var(--type-heading-sm-track);
    text-transform: uppercase;
    color: var(--color-text-base);
    margin: 0;
  }

  .cart-drawer-close {
    background: none;
    border: none;
    padding: var(--space-100);
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
  }

  .cart-drawer-close:hover {
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
  }

  .cart-drawer-body {
    overflow-y: auto;
    padding: var(--space-500) var(--space-600);
    flex: 1;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Narrow mobile (≤490px) ── */
@media (max-width: 490px) {
  /* Hide "Edit Cart" label text — show icon + count only */
  .checkout-edit-cart > span:not(.checkout-counter) {
    display: none;
  }

  /* Keep the checkout nav items from overflowing */
  .checkout-nav-bar,
  .checkout-nav-row {
    gap: var(--space-300);
  }

  /* Mobile auth/checkout nav: shrink the logo a touch and force the
     "Create account" button to stay on a single line so it doesn't
     wrap to two lines next to the logo. */
  .checkout-nav-mobile .checkout-logo img {
    width: 140px;
  }

  .checkout-nav-row .button--plain {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE (PDP)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb (light bg) ── */
.pdp-breadcrumb {
  padding-top: 16px;
  padding-bottom: 20px;
  background: var(--color-bg-page);
}

/* ── Product Hero ── */
.pdp-hero {
  padding-top: var(--space-600);
  padding-bottom: var(--space-1100);
  background: var(--color-bg-page);
}

.pdp-hero-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-900);
  align-items: start;
}

.pdp-hero-layout > * {
  min-width: 0;
}

.pdp-info {
  min-width: 0;
}

.pdp-title {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ── Gallery ── */
.pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  position: sticky;
  top: 200px;
}

.pdp-gallery-main {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-500);
  overflow: hidden;
}

.pdp-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-gallery-thumbs {
  display: flex;
  gap: var(--space-300);
}

.pdp-thumb {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-200);
  background: var(--color-bg-surface);
  border: 2px solid var(--color-border-base);
  border-radius: var(--radius-400);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 160ms ease;
}

.pdp-thumb:hover {
  border-color: var(--color-border-strong);
}

.pdp-thumb.is-active {
  border-color: var(--color-text-brand);
}

.pdp-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ── Product Info ── */
.pdp-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
}

.pdp-info-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-500);
}

.pdp-title {
  color: var(--color-text-strong);
  flex: 1;
  min-width: 0;
}

.pdp-save-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-200);
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-subtle);
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 160ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.pdp-save-link:hover {
  color: var(--color-text-brand);
}

/* Save heart icon stack — line + fill, fade between */
.pdp-save-link .pdp-save-icon {
  position: relative;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 160ms ease, color 160ms ease;
}

.pdp-save-link .pdp-save-icon--fill {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transform: scale(0.6);
  color: var(--color-text-critical);
}

.pdp-save-link .pdp-save-icon-wrap {
  position: relative;
  display: inline-flex;
}

.pdp-save-link[aria-pressed="true"] {
  color: var(--color-text-critical);
}

.pdp-save-link[aria-pressed="true"] .pdp-save-icon--line {
  opacity: 0;
  transform: scale(0.6);
}

.pdp-save-link[aria-pressed="true"] .pdp-save-icon--fill {
  opacity: 1;
  transform: scale(1);
}

.pdp-save-link.is-bursting .pdp-save-icon--fill {
  animation: pdp-save-burst 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pdp-save-burst {
  0%   { transform: scale(0.6); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.pdp-meta {
  display: flex;
  align-items: center;
  gap: var(--space-500);
}

.pdp-sku {
  color: var(--color-text-placeholder);
}

.pdp-upc {
  color: var(--color-text-placeholder);
}

.pdp-price {
  font-family: "Nunito Sans", sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 36px;
  letter-spacing: -0.02px;
  color: var(--color-text-strong);
  margin: 0;
}

.pdp-price-row {
  display: flex;
  align-items: center;
  gap: var(--space-500);
}

.pdp-price-row .pdp-price {
  flex: 1;
}

.pdp-price-row .pdp-add-to-cart {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ── Status ── */
.pdp-status {
  display: flex;
  align-items: center;
  gap: var(--space-400);
}

.pdp-status .badge {
  position: static;
}

.pdp-status-label {
  color: var(--color-text-subtle);
}

/* ── Fulfillment Picker ── */
.pdp-fulfillment {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  overflow: hidden;
}

.pdp-fulfillment-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-300);
  padding: var(--space-400) var(--space-500);
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--color-bg-fill-base);
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.pdp-fulfillment-option + .pdp-fulfillment-option {
  border-top: 1px solid var(--color-border-base);
}

.pdp-fulfillment-option.is-selected {
  background: color-mix(in srgb, var(--color-bg-fill-brand) 6%, white);
  border-color: transparent;
  z-index: 1;
}

.pdp-fulfillment-option.is-selected + .pdp-fulfillment-option {
  border-top-color: transparent;
}

.pdp-fulfillment-option:hover:not(.is-selected) {
  background: var(--color-bg-fill-strong);
}

.pdp-fulfillment-option input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--color-text-brand);
  flex-shrink: 0;
}

.pdp-fulfillment-icon {
  width: 22px;
  height: 22px;
  color: var(--color-text-brand);
  flex-shrink: 0;
  margin-top: 1px;
}

.pdp-fulfillment-text {
  flex: 1;
  min-width: 0;
}

.pdp-fulfillment-title {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text-strong);
  margin: 0;
}

.pdp-fulfillment-title .pdp-fulfillment-free {
  font-weight: 700;
  color: var(--color-bg-fill-success);
}

.pdp-fulfillment-detail {
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-subtle);
  margin: 2px 0 0;
}

.pdp-fulfillment-stock-inline {
  font-weight: 700;
  color: var(--color-bg-fill-success);
}

.pdp-fulfillment-stock-inline .icon-svg {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 2px;
}

/* ── Shipping & Returns Box ── */
.pdp-shipping-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-600);
  padding: var(--space-500) 0 0;
  background: none;
  border-radius: 0;
}

.pdp-shipping-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-300);
  flex: 1;
  min-width: 0;
}

.pdp-shipping-row > .icon-svg {
  flex-shrink: 0;
  position: relative;
  top: 2px;
}

.pdp-shipping-icon {
  width: 24px;
  height: 24px;
  color: var(--color-bg-fill-magic);
}

.pdp-shipping-row > div {
  flex: 1;
}

.pdp-shipping-title {
  margin: 0;
  color: var(--color-text-strong);
}

.pdp-shipping-est {
  margin: var(--space-100) 0 0;
  color: var(--color-text-subtle);
}

.pdp-shipping-divider {
  display: none;
}

.pdp-shipping-separator {
  width: 1px;
  align-self: stretch;
  background: var(--color-border-subtle);
  flex-shrink: 0;
}

.pdp-policy-btn {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-brand);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 2px;
}

.pdp-policy-btn:hover {
  text-decoration: underline;
}

.pdp-return-policy {
  margin-top: var(--space-400);
  padding: var(--space-400);
  background: var(--color-bg-surface);
  border-radius: var(--radius-300);
  border: 1px solid var(--color-border-subtle);
  /* Return policy spans full width below the row */
  flex-basis: 100%;
}

.pdp-shipping-box {
  flex-wrap: wrap;
}

.pdp-return-policy p {
  margin: 0 0 var(--space-300);
  color: var(--color-text-base);
}

.pdp-return-policy p:last-child {
  margin-bottom: 0;
}

/* ── Summary ── */
.pdp-summary {
  color: var(--color-text-base);
  margin: 0;
}

/* ── Highlights ── */
.pdp-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.pdp-highlights li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-300);
}

.pdp-highlights .icon-svg {
  flex-shrink: 0;
  color: var(--color-text-success);
  position: relative;
  top: 2px;
}

.pdp-add-to-cart {
  min-height: 52px;
  font-size: 16px;
  gap: var(--space-300);
}

/* ── Description (visually rich layout) ── */
.pdp-description-compact {
  padding: 0;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-500);
  position: relative;
  overflow: hidden;
}

.pdp-description-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: stretch;
  min-height: 480px;
}

.pdp-description-media {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-fill-strong);
}

.pdp-description-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-description-content {
  padding: var(--space-900);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pdp-description-compact .section-title {
  margin-bottom: var(--space-600);
}

.pdp-description-body {
  max-width: 640px;
}

.pdp-description-body p {
  margin: 0 0 var(--space-400);
  color: var(--color-text-base);
  break-inside: avoid;
}

.pdp-description-body p:last-child {
  margin-bottom: 0;
}

.pdp-description-note {
  color: var(--color-text-subtle);
  font-style: italic;
  margin-top: var(--space-400);
  break-inside: avoid;
}

/* ── Product Details Band ── */
.pdp-details-band {
  background: var(--overlay-teal-6);
}

/* ── Nested Sub-Spec Dropdowns ── */
.pdp-spec-nested {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pdp-sub-spec {
  border-top: 1px solid var(--color-border-subtle);
}

.pdp-sub-spec:first-child {
  border-top: none;
}

.pdp-sub-spec-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-400) 0;
  cursor: pointer;
  list-style: none;
}

.pdp-sub-spec-summary > span {
  font-weight: 700;
  color: var(--color-text-strong);
  transition: color 160ms ease, transform 160ms ease;
  display: inline-block;
}

.pdp-sub-spec-summary:hover > span,
.pdp-sub-spec-summary:focus-visible > span {
  color: var(--color-text-brand);
  transform: translateX(2px);
}

.pdp-sub-spec-summary::-webkit-details-marker {
  display: none;
}

.pdp-sub-spec-summary::marker {
  display: none;
  content: "";
}

.pdp-sub-spec-summary:hover .pdp-spec-chevron,
.pdp-sub-spec-summary:focus-visible .pdp-spec-chevron {
  color: var(--color-text-brand);
}

.pdp-sub-spec[open] .pdp-spec-chevron {
  transform: rotate(180deg);
}

.pdp-sub-spec .pdp-spec-table {
  margin-bottom: var(--space-400);
}

/* ── Overview List ── */
.pdp-overview-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.pdp-overview-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-300);
  color: var(--color-text-base);
}

.pdp-overview-list li::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-brand);
  flex-shrink: 0;
  margin-top: 7px;
}

/* ── Guides List ── */
.pdp-guides-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.pdp-guide-link {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  padding: var(--space-400);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  background: var(--color-bg-surface);
  color: var(--color-text-strong);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.pdp-guide-link:hover {
  border-color: var(--color-text-brand);
  background: rgba(36, 64, 131, 0.04);
}

.pdp-guide-link > .icon-svg:first-child {
  color: var(--color-text-brand);
  flex-shrink: 0;
}

.pdp-guide-link span {
  flex: 1;
}

.pdp-guide-dl {
  color: var(--color-text-subtle);
  flex-shrink: 0;
}

/* ── Specifications Accordion ── */
.pdp-specs-list {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-500);
  overflow: hidden;
}

.pdp-spec-group {
  border-top: 1px solid var(--color-border-subtle);
}

.pdp-spec-group:first-child {
  border-top: none;
}

.pdp-spec-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-500) var(--space-600);
  cursor: pointer;
  list-style: none;
  transition: background-color 160ms ease;
}

.pdp-spec-summary::-webkit-details-marker {
  display: none;
}

.pdp-spec-summary::marker {
  display: none;
  content: "";
}

.pdp-spec-summary:hover {
  background: rgba(36, 64, 131, 0.04);
}

.pdp-spec-label {
  display: flex;
  align-items: center;
  gap: var(--space-300);
}

.pdp-spec-label > .icon-svg {
  color: var(--color-text-brand);
  flex-shrink: 0;
}

.pdp-spec-chevron {
  flex-shrink: 0;
  color: var(--color-text-subtle);
  transition: transform 200ms ease;
}

.pdp-spec-group[open] .pdp-spec-chevron {
  transform: rotate(180deg);
}

.pdp-spec-content {
  padding: 0 var(--space-600) var(--space-600);
}

.pdp-spec-table {
  width: 100%;
  border-collapse: collapse;
}

.pdp-spec-table tr {
  border-bottom: 1px solid var(--color-border-subtle);
}

.pdp-spec-table tr:last-child {
  border-bottom: none;
}

.pdp-spec-table th,
.pdp-spec-table td {
  padding: var(--space-400) 0;
  text-align: left;
  vertical-align: top;
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.pdp-spec-table th {
  width: 40%;
  color: var(--color-text-subtle);
  font-weight: 400;
  padding-right: var(--space-600);
}

.pdp-spec-table td {
  color: var(--color-text-strong);
  font-weight: 500;
}

/* ── Image Lightbox ── */
.pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-lightbox[hidden] {
  display: none;
}

.pdp-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.pdp-lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-lightbox-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-500);
  background: var(--color-bg-surface);
}

.pdp-lightbox-close {
  position: absolute;
  top: -40px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.pdp-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ── Mobile Sticky Bar (full-width floating bar with even gutters) ── */
.pdp-sticky-bar {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 150;
  transform: translateY(calc(100% + 32px));
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
  display: none;
}

.pdp-sticky-bar.is-visible {
  transform: translateY(0);
}

.pdp-sticky-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-400);
  padding: 10px 12px 10px 20px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  box-shadow: var(--shadow-400);
  width: 100%;
}

.pdp-sticky-bar-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.pdp-sticky-bar .button {
  flex-shrink: 0;
}

.pdp-sticky-bar-name {
  margin: 0;
  color: var(--color-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdp-sticky-bar-price {
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-strong);
  line-height: 20px;
}

/* ── PDP "You May Also Like" grid ──
   Uses canonical .product-card / .catalog-card component (same as catalog page).
   White media bg is an exception only for these cards (product images here are
   shot on white). */
.pdp-related-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.pdp-related-grid .product-media {
  background: #FFFFFF;
}

@media (max-width: 1185px) {
  .pdp-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .pdp-related-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Responsive: 1185px and below — stack shipping box, allow gallery to shrink ── */
@media (max-width: 1185px) {
  /* Make thumb strip horizontally scrollable so it never forces overflow */
  .pdp-gallery-thumbs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .pdp-thumb {
    flex-shrink: 0;
  }

  .pdp-shipping-box {
    flex-direction: column;
    gap: var(--space-400);
  }

  .pdp-shipping-separator {
    width: 100%;
    height: 1px;
  }
}

/* ── Responsive: 900px and below — stack hero & description to single column ── */
@media (max-width: 900px) {
  .pdp-hero-layout {
    grid-template-columns: 1fr;
    gap: var(--space-700);
  }

  .pdp-gallery {
    position: static;
  }

  .pdp-gallery-main {
    max-width: 640px;
  }

  .pdp-description-layout {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .pdp-description-media {
    aspect-ratio: 16 / 9;
  }
}

/* ── Responsive: Mobile (767px) ── */
@media (max-width: 767px) {
  .pdp-description-content {
    padding: var(--space-600);
  }

  .pdp-hero {
    padding-top: var(--space-400);
    padding-bottom: var(--space-900);
  }

  .pdp-gallery-main {
    aspect-ratio: 1 / 1;
  }

  .pdp-thumb {
    width: 64px;
    height: 64px;
  }

  .pdp-price {
    font-size: 28px;
    line-height: 32px;
  }

  .pdp-price-row {
    flex-direction: column;
    align-items: stretch;
  }

  .pdp-price-row .pdp-add-to-cart {
    width: 100%;
  }

  .pdp-info-top {
    flex-direction: column;
    gap: var(--space-300);
  }

  .pdp-description-content {
    padding: var(--space-600);
  }

  .pdp-shipping-box {
    flex-direction: column;
    gap: var(--space-400);
  }

  .pdp-shipping-separator {
    width: 100%;
    height: 1px;
  }

  .pdp-sticky-bar {
    display: block;
  }

  /* Spec table stacks on mobile */
  .pdp-spec-table th,
  .pdp-spec-table td {
    display: block;
    width: 100%;
  }

  .pdp-spec-table th {
    padding-bottom: var(--space-100);
  }

  .pdp-spec-table td {
    padding-top: 0;
    padding-bottom: var(--space-400);
  }

  .pdp-spec-content {
    padding: 0 var(--space-500) var(--space-500);
  }

  .pdp-spec-summary {
    padding: var(--space-400) var(--space-500);
  }
}

/* ── Responsive: Narrow viewport (≤614px) — prevent crop / overflow ── */
@media (max-width: 614px) {
  .pdp-title {
    font-size: 32px;
    line-height: 36px;
  }

  .pdp-description-content {
    padding: var(--space-500);
  }

  .pdp-specs-list,
  .pdp-description-compact {
    overflow: hidden;
  }

  .pdp-spec-summary {
    padding: var(--space-400);
  }

  .pdp-spec-content {
    padding: 0 var(--space-400) var(--space-400);
  }

  .pdp-spec-label {
    min-width: 0;
    flex: 1;
  }

  .pdp-spec-label > span,
  .pdp-sub-spec-summary > span {
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-width: 0;
  }

  .pdp-shipping-row > div {
    min-width: 0;
  }

  .pdp-shipping-est,
  .pdp-shipping-title {
    overflow-wrap: break-word;
  }
}

/* ── Responsive: Small Mobile (560px) ── */
@media (max-width: 560px) {
  .pdp-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-200);
  }
}

/* ============================================================
   FOOTER PAGES — shared systems for content / form / tool pages
   ============================================================ */

/* ── Page header (used on every footer page) ── */
.page-header {
  position: relative;
  background: var(--gradient-page-shell);
  color: #ffffff;
  padding: var(--space-1000) 0 var(--space-900);
  border-bottom: 1px solid var(--color-bg-ink);
  overflow: hidden;
}
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 360px at 20% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
    radial-gradient(700px 320px at 90% 100%, rgba(196, 106, 0, 0.10), transparent 65%);
  pointer-events: none;
}
.page-header > .shell {
  position: relative;
}
.page-header-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  max-width: 880px;
}
/* Breadcrumb eyebrow removed globally per audit */
.page-header-eyebrow {
  display: none !important;
}
.page-header h1 {
  color: #ffffff;
  margin: 0;
}
.page-header-lede {
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
  max-width: 720px;
}

@media (max-width: 767px) {
  .page-header {
    padding: var(--space-700) 0 var(--space-600);
  }
}

/* ── Content page two-column layout (TOC + prose) ── */
.content-page main {
  background: var(--color-bg-page);
}
.content-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-900);
  padding: var(--space-900) 0 var(--space-1000);
  align-items: start;
}
.content-toc {
  position: sticky;
  /* Sit below the sticky site header with breathing room. When the header hides,
     body.header-hidden drops --toc-top so the TOC reclaims the vertical space. */
  --toc-top: 200px;
  top: var(--toc-top);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  padding: var(--space-400);
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  max-height: calc(100vh - var(--toc-top) - 24px);
  overflow-y: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: top 240ms ease, max-height 240ms ease;
}
body.header-hidden .content-toc {
  --toc-top: 24px;
}
.content-toc-label {
  margin: 0;
  padding: 0 12px;
  color: var(--color-text-strong);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.content-toc-list {
  list-style: none;
  margin: 0;
  padding: var(--space-400) 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--color-border-base);
}
.content-toc-list a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 20px;
  border-radius: var(--radius-300);
  color: var(--color-text-base);
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.content-toc-list a:hover,
.content-toc-list a:focus-visible {
  background: var(--overlay-brand-8);
  color: var(--color-text-brand);
  transform: translateY(-1px);
}
.content-toc-list a.is-active {
  background: var(--color-bg-fill-strong);
  color: var(--color-text-brand);
  font-weight: 700;
}

.content-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-800);
  min-width: 0;
}
.content-section {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-500);
  padding: var(--space-800);
  scroll-margin-top: var(--space-700);
}
.content-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-400);
  margin-bottom: var(--space-500);
  padding-bottom: var(--space-500);
  border-bottom: 1px solid var(--color-border-subtle);
}
.content-section-header h2:only-child {
  width: 100%;
}
.content-section-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-300);
  background: var(--overlay-magic-8);
  color: var(--color-text-magic);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.content-section-icon svg {
  width: 22px;
  height: 22px;
}
.content-section-header > svg {
  flex-shrink: 0;
  color: var(--color-text-magic);
}
.content-section-header h2 {
  margin: 0;
}
.content-prose > * + * {
  margin-top: var(--space-400);
}
.content-prose h3 {
  margin-top: var(--space-600);
  margin-bottom: var(--space-300);
  color: var(--color-text-strong);
}
.content-prose p {
  color: var(--color-text-base);
  line-height: 1.65;
}
.content-prose ul,
.content-prose ol {
  padding-left: var(--space-600);
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}
.content-prose li {
  color: var(--color-text-base);
  line-height: 1.65;
}
.content-prose a:not(.button) {
  color: var(--color-text-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.content-prose a.button {
  text-decoration: none;
}
.content-prose strong {
  color: var(--color-text-strong);
  font-weight: 700;
}
.content-callout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: var(--color-bg-fill-info-subtle);
  border-radius: var(--radius-400);
  margin-top: var(--space-500);
}
.content-actions {
  display: flex;
  gap: var(--space-400);
  flex-wrap: wrap;
  margin-top: var(--space-600);
}
@media (max-width: 600px) {
  .content-actions .button {
    flex: 1 1 100%;
  }
}
.content-callout svg {
  flex-shrink: 0;
  color: var(--color-text-brand);
  margin-top: 1px;
}
.content-callout p {
  margin: 0;
}
.content-callout strong {
  font-weight: 700;
  color: var(--color-text-brand);
}

@media (max-width: 1024px) {
  .content-layout {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--space-700);
  }
}

@media (max-width: 900px) {
  .content-layout {
    grid-template-columns: 1fr;
    gap: var(--space-600);
    padding: var(--space-700) 0 var(--space-800);
  }
  .content-toc {
    position: static;
    max-height: none;
  }
}

@media (max-width: 767px) {
  .content-section {
    padding: var(--space-600) var(--space-500);
  }
  .content-section-header {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-300);
  }
}

/* ── Form page (single long form, sectioned) ── */
.form-page main {
  background: var(--color-bg-page);
}
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-800);
  padding: var(--space-900) 0 var(--space-1000);
  align-items: start;
}
.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
  min-width: 0;
}
.form-aside {
  position: sticky;
  top: var(--space-700);
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
}
.form-aside-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  padding: var(--space-600);
}
.form-aside-card h3 {
  margin: 0 0 var(--space-300);
}
.form-aside-card p {
  margin: 0;
  color: var(--color-text-base);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.form-aside-card a[href^="mailto:"],
.form-aside-card a[href^="tel:"] {
  white-space: nowrap;
}
.form-aside-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}
.form-aside-card ul li {
  display: flex;
  gap: var(--space-300);
  color: var(--color-text-base);
}
.form-aside-card ul li svg {
  flex-shrink: 0;
  color: var(--color-text-magic);
  margin-top: 3px;
}
.form-section {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-500);
  padding: var(--space-700);
  scroll-margin-top: var(--space-700);
}
.form-section-head {
  margin-bottom: var(--space-600);
  padding-bottom: var(--space-500);
  border-bottom: 1px solid var(--color-border-subtle);
}
.form-section-head h2 {
  margin: 0 0 var(--space-200);
}
.form-section-head p {
  margin: 0;
  color: var(--color-text-subtle);
}
.form-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--color-bg-fill-brand);
  color: #ffffff;
  font-family: "Anybody", sans-serif;
  font-weight: 800;
  font-size: 14px;
  margin-right: var(--space-400);
  vertical-align: middle;
  box-shadow: 0 0 0 4px var(--overlay-brand-8);
}
/* Dealer-program progressive step indicator dots */
.form-step-dots {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  padding: var(--space-500) 0 var(--space-600);
  flex-wrap: wrap;
}
.form-step-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-200);
  color: var(--color-text-subtle);
  font-size: 13px;
  font-weight: 600;
}
.form-step-dot-bullet {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--color-bg-fill-strong);
  color: var(--color-text-subtle);
  border: 1px solid var(--color-border-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  font-family: "Anybody", sans-serif;
}
.form-step-dot.is-active .form-step-dot-bullet {
  background: var(--color-bg-fill-brand);
  border-color: var(--color-bg-fill-brand);
  color: #ffffff;
  box-shadow: 0 0 0 4px var(--overlay-brand-8);
}
.form-step-dot.is-active {
  color: var(--color-text-brand);
}
.form-step-dot.is-complete .form-step-dot-bullet {
  background: var(--color-bg-fill-success);
  border-color: var(--color-bg-fill-success);
  color: #ffffff;
}
.form-step-dot-line {
  width: 24px;
  height: 2px;
  background: var(--color-border-base);
  flex-shrink: 0;
}
/* Collapsed/expanded form sections for progressive flow */
.form-section[hidden] {
  display: none;
}
.form-section.is-collapsed .form-section-body {
  display: none;
}
.form-section.is-collapsed {
  background: var(--color-bg-page);
  opacity: 0.65;
}
.form-section.is-collapsed .form-section-head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.form-actions {
  display: flex;
  gap: var(--space-400);
  justify-content: flex-end;
  padding-top: var(--space-500);
  flex-wrap: wrap;
}
.form-consent {
  display: flex;
  gap: var(--space-300);
  align-items: flex-start;
  padding: var(--space-500);
  background: var(--color-bg-fill-info-subtle);
  border: 1px solid var(--color-border-brand-soft);
  border-radius: var(--radius-400);
}
.form-consent input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--color-text-brand);
  width: 16px;
  height: 16px;
}
.form-consent label {
  flex: 1;
  margin: 0;
  color: var(--color-text-base);
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .form-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-700);
  }
}

@media (max-width: 900px) {
  .form-layout {
    grid-template-columns: 1fr;
    padding: var(--space-700) 0 var(--space-800);
  }
  .form-aside {
    position: static;
    /* Move benefits + need-help cards BELOW the form on mobile */
    order: 2;
  }
  .form-stack {
    order: 1;
  }
}

@media (max-width: 767px) {
  .form-section {
    padding: var(--space-600) var(--space-500);
  }
  .form-actions {
    flex-direction: column;
  }
  .form-actions .button {
    width: 100%;
  }
  /* Compact stepper for long multi-step dealer flow */
  .checkout-stepper {
    overflow: visible;
  }
  .form-stack .checkout-stepper .co-step {
    gap: var(--space-200);
  }
  .form-stack .checkout-stepper .co-step-node {
    width: 22px;
    height: 22px;
    border-width: 1.5px;
  }
  .form-stack .checkout-stepper .co-step-node--current::before {
    inset: -8px;
    border-width: 3px;
  }
  .form-stack .checkout-stepper .co-step-node--incomplete::after {
    width: 6px;
    height: 6px;
  }
  .form-stack .checkout-stepper .co-step-node--complete .icon-svg {
    width: 12px;
    height: 12px;
  }
  /* Hide all labels except the active step on mobile to prevent jumbling */
  .form-stack .checkout-stepper .co-step-label {
    display: none;
  }
  .form-stack .checkout-stepper .co-step-label--active {
    display: block;
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.2;
  }
  .form-stack .checkout-stepper {
    margin-bottom: var(--space-700);
  }
}

/* ── Contact page split (form + sidebar tiles) ── */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-800);
  padding: var(--space-900) 0 var(--space-700);
  align-items: start;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
  position: sticky;
  top: var(--space-700);
}
.contact-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  padding: var(--space-600);
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}
.contact-card-head {
  display: flex;
  gap: var(--space-300);
  align-items: center;
}
.contact-card-icon-svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-text-brand);
}
.contact-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-300);
  background: var(--overlay-magic-8);
  color: var(--color-text-magic);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-card-head h3 {
  margin: 0;
}
.contact-card-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}
.contact-card-rows a,
.contact-card-rows p {
  margin: 0;
  color: var(--color-text-base);
  text-decoration: none;
}
.contact-card-rows a:hover {
  color: var(--color-text-brand);
}
.contact-card-meta {
  color: var(--color-text-subtle);
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-700);
  }
  .contact-info {
    position: static;
    top: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-500);
  }
}
@media (max-width: 600px) {
  .contact-info {
    grid-template-columns: 1fr;
  }
  .contact-layout {
    padding: var(--space-700) 0 var(--space-800);
  }
}

/* ── our-catalog: dual CTA row (digital + printed) ── */
.catalog-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-400);
}

/* ── Find a Dealer locator ── */
.locator-page main {
  background: var(--color-bg-page);
}
.locator-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: var(--space-700);
  padding: var(--space-700) 0 var(--space-1000);
  align-items: start;
}
.locator-sidebar {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 240px);
  min-height: 600px;
  position: sticky;
  top: var(--space-600);
  overflow: hidden;
}
.locator-search {
  padding: var(--space-500);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}
.locator-search-field {
  display: flex;
  gap: var(--space-200);
}
.locator-search-field input {
  flex: 1;
  min-width: 0;
}
.locator-filter-row {
  display: flex;
  gap: var(--space-300);
  align-items: center;
}
.locator-filter-row label {
  color: var(--color-text-subtle);
  flex-shrink: 0;
}
.locator-filter-row select {
  flex: 1;
  min-width: 0;
  padding: 8px var(--space-400);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-200);
  background: var(--color-bg-surface);
  color: var(--color-text-strong);
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
}
.locator-results-meta {
  padding: var(--space-400) var(--space-500);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-subtle);
}
.locator-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.locator-item {
  padding: var(--space-500);
  border-bottom: 1px solid var(--color-border-subtle);
  cursor: pointer;
  transition: background 160ms ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.locator-item:hover,
.locator-item.is-active {
  background: var(--overlay-teal-6);
}
.locator-item-name {
  margin: 0;
  color: var(--color-text-strong);
  font-weight: 700;
}
.locator-item-addr,
.locator-item-phone,
.locator-item-distance {
  margin: 0;
  color: var(--color-text-subtle);
}
.locator-item-phone a {
  color: var(--color-text-brand);
  text-decoration: none;
}
.locator-map {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  overflow: hidden;
  position: sticky;
  top: var(--space-600);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 240px);
  min-height: 600px;
}
.locator-map-canvas {
  flex: 1;
  position: relative;
  background: var(--color-bg-fill-strong);
  overflow: hidden;
}
.locator-map-canvas iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.locator-map-canvas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
}
.locator-map-pin {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-text-brand);
  border: 3px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 160ms ease;
}
.locator-map-pin:hover {
  transform: translate(-50%, -50%) scale(1.2);
}
.locator-map-pin.is-active {
  background: var(--color-text-critical);
  width: 22px;
  height: 22px;
}
.locator-map-overlay {
  position: absolute;
  bottom: var(--space-500);
  left: var(--space-500);
  right: var(--space-500);
  background: var(--color-bg-surface);
  border-radius: var(--radius-300);
  padding: var(--space-400);
  box-shadow: var(--shadow-300);
  display: none;
}
.locator-map-overlay.is-visible {
  display: block;
}

@media (max-width: 1024px) {
  .locator-layout {
    grid-template-columns: 320px minmax(0, 1fr);
  }
  .locator-sidebar,
  .locator-map {
    height: calc(100vh - 200px);
    min-height: 520px;
  }
}

@media (max-width: 900px) {
  .locator-layout {
    grid-template-columns: 1fr;
    padding: var(--space-600) 0 var(--space-800);
  }
  .locator-map,
  .locator-sidebar {
    position: static;
    height: auto;
    min-height: 0;
  }
  .locator-map {
    aspect-ratio: 16 / 10;
    order: -1;
  }
  .locator-sidebar {
    max-height: 600px;
  }
}

/* ── Product Guides grid ── */
.guides-page main {
  background: var(--color-bg-page);
}
.guides-toolbar {
  display: flex;
  gap: var(--space-400);
  padding: var(--space-700) 0 var(--space-500);
  align-items: center;
  flex-wrap: wrap;
}
/* When the toolbar pairs search with a narrow sort dropdown (vs wide filter pills),
   constrain the search to a sensible width and push the sort to the right edge. */
.guides-toolbar:has(.catalog-sort) {
  justify-content: space-between;
}
.guides-toolbar:has(.catalog-sort) .guides-search {
  flex: 0 1 420px;
}
.guides-search {
  flex: 1;
  min-width: 240px;
  position: relative;
}
.guides-search input {
  width: 100%;
  padding: 12px var(--space-500) 12px 44px;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  background: var(--color-bg-surface);
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  color: var(--color-text-strong);
}
.guides-search svg {
  position: absolute;
  left: var(--space-400);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  pointer-events: none;
}
.guides-filter-pills {
  display: flex;
  gap: var(--space-200);
  flex-wrap: wrap;
}
.guides-filter-pill {
  padding: 8px var(--space-400);
  border: 1px solid var(--color-border-base);
  border-radius: 999px;
  background: var(--color-bg-surface);
  color: var(--color-text-base);
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
}
.guides-filter-pill:hover {
  border-color: var(--color-text-brand);
  color: var(--color-text-brand);
}
.guides-filter-pill.is-active {
  background: var(--color-bg-fill-brand);
  border-color: var(--color-bg-fill-brand);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(36, 64, 131, 0.2);
}
.guide-card.is-hidden {
  display: none;
}
.guides-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-500);
  padding-bottom: var(--space-1000);
}
.guide-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  padding: var(--space-500);
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.guide-card:hover {
  border-color: var(--color-text-brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-300);
}
.guide-card-icon {
  width: 48px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-magic-8);
  color: var(--color-text-magic);
  border-radius: var(--radius-200);
  position: relative;
}
.guide-card-icon::after {
  content: "PDF";
  position: absolute;
  bottom: -4px;
  right: -8px;
  background: var(--color-text-critical);
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.guide-card h3 {
  margin: 0;
  color: var(--color-text-strong);
}
.guide-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--color-text-subtle);
  margin-top: auto;
}
.guide-card-actions {
  display: flex;
  gap: var(--space-300);
  padding-top: var(--space-300);
  border-top: 1px solid var(--color-border-subtle);
}
.guide-card-actions .button {
  flex: 1;
}

@media (max-width: 1024px) {
  .guides-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .guides-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Returns & Warranty mode tabs ── */
.returns-mode-tabs {
  display: inline-flex;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  margin-bottom: var(--space-600);
}
.returns-mode-tab {
  padding: 8px var(--space-500);
  border: none;
  background: none;
  border-radius: 999px;
  color: var(--color-text-base);
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
}
.returns-mode-tab.is-active {
  background: var(--color-bg-fill-brand);
  color: #ffffff;
}
.claims-table {
  width: 100%;
  border-collapse: collapse;
}
.claims-table th,
.claims-table td {
  text-align: left;
  padding: var(--space-400) var(--space-300);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-base);
}
.claims-table th {
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  font-weight: 700;
}
.claims-table td.claims-status {
  font-weight: 600;
}
.claims-status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.claims-status-pill--approved {
  background: rgba(34, 139, 89, 0.12);
  color: #228b59;
}
.claims-status-pill--review {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}
.claims-status-pill--denied {
  background: rgba(252, 68, 57, 0.12);
  color: var(--color-text-critical);
}

@media (max-width: 767px) {
  .claims-table thead {
    display: none;
  }
  .claims-table tr {
    display: block;
    padding: var(--space-400) 0;
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .claims-table td {
    display: block;
    padding: 4px 0;
    border: none;
  }
  .claims-table td::before {
    content: attr(data-label) ": ";
    color: var(--color-text-subtle);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    display: block;
  }
}

/* ── Customer dashboard tweaks (reuses dashboard-* base classes) ── */
.customer-dashboard .dashboard-tier-card,
.customer-dashboard .dashboard-benefits,
.customer-dashboard .dashboard-tier-pill {
  display: none;
}
.customer-dashboard .dashboard-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.customer-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-500);
}
.customer-account-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  padding: var(--space-600);
}
.customer-account-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-500);
  padding-bottom: var(--space-400);
  border-bottom: 1px solid var(--color-border-subtle);
}
.customer-account-card-head h3 {
  margin: 0;
}
.customer-account-card dl {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: var(--space-300) var(--space-400);
  margin: 0;
}
.customer-account-card dt {
  color: var(--color-text-subtle);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.customer-account-card dd {
  margin: 0;
  color: var(--color-text-strong);
}
.customer-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-400);
  margin-bottom: var(--space-700);
}
.customer-quick-action {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  padding: var(--space-500);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-300);
  text-decoration: none;
  color: var(--color-text-strong);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.customer-quick-action:hover {
  border-color: var(--color-text-brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-300);
}
.customer-quick-action svg {
  color: var(--color-text-brand);
}
.customer-quick-action-label {
  font-weight: 700;
}
.customer-quick-action-meta {
  color: var(--color-text-subtle);
  font-size: 13px;
}

@media (max-width: 1024px) {
  .customer-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .customer-account-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .customer-account-card dl {
    grid-template-columns: 1fr;
    gap: var(--space-200);
  }
  .customer-account-card dt {
    margin-top: var(--space-300);
  }
}

/* ── Careers list ── */
.careers-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}
.career-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  padding: var(--space-600);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-500);
  transition: border-color 160ms ease, transform 160ms ease;
}
.career-card:hover {
  border-color: var(--color-text-brand);
}
.career-card-info {
  flex: 1;
  min-width: 0;
}
.career-card-info h3 {
  margin: 0 0 6px;
}
.career-card-meta {
  display: flex;
  gap: var(--space-400);
  flex-wrap: wrap;
  color: var(--color-text-subtle);
}
.career-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.career-card-info h3 a {
  color: inherit;
  text-decoration: none;
}
.career-card-info h3 a:hover,
.career-card-info h3 a:focus-visible {
  color: var(--color-text-brand);
}
.career-card-actions {
  display: flex;
  gap: var(--space-300);
  flex-shrink: 0;
}

/* Filter row above the open-roles list */
.careers-filter {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-400);
}
@media (max-width: 720px) {
  .careers-filter { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .career-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .career-card-actions {
    width: 100%;
  }
  .career-card-actions .button {
    flex: 1;
  }
}

/* ── Contact info quick stats ── */
.contact-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-400);
}
.contact-stat-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  padding: var(--space-500);
  text-align: center;
}
.contact-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  align-items: flex-start;
  text-align: left;
}
.contact-stat-num {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 800;
  font-size: 36px;
  line-height: 1;
  color: var(--color-text-magic);
  margin: 0;
  letter-spacing: -0.01em;
}
.contact-stat-label {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* ── Auth pages (login.html, signup.html) ───────────────────────────────── */
.auth-page {
  min-height: 100vh;
}
.auth-main {
  display: flex;
  justify-content: center;
  padding: var(--space-900) var(--space-500) var(--space-1000);
}
.auth-shell {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-300);
  background: var(--color-bg-fill-strong);
  padding: 6px;
  border-radius: var(--radius-400);
  border: 1px solid var(--color-border-base);
}
.auth-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-200);
  padding: 12px var(--space-400);
  border: 0;
  border-radius: var(--radius-300);
  background: transparent;
  color: var(--color-text-subtle);
  font-family: "Nunito Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.auth-tab .icon-svg {
  width: 18px;
  height: 18px;
}
.auth-tab:hover {
  color: var(--color-text-brand);
}
.auth-tab.is-active {
  background: var(--color-bg-surface);
  color: var(--color-text-brand);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.auth-panel.is-hidden {
  display: none;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
}
.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.auth-forgot {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-brand);
  text-decoration: none;
}
.auth-forgot:hover {
  text-decoration: underline;
}
.auth-password-field {
  position: relative;
}
.auth-password-field .co-input {
  padding-right: 44px;
}
.auth-password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-200);
  color: var(--color-icon-subtle);
  cursor: pointer;
}
.auth-password-toggle:hover {
  color: var(--color-text-brand);
  background: var(--overlay-brand-8);
}
.auth-submit {
  width: 100%;
  justify-content: center;
  padding: 14px var(--space-500);
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  color: var(--color-text-subtle);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border-base);
}
.auth-sso {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-300);
}
.auth-sso-btn {
  width: 100%;
  justify-content: center;
}
.auth-footer-link {
  margin: 0;
  text-align: center;
  color: var(--color-text-subtle);
  font-size: 14px;
}
.auth-footer-link a {
  color: var(--color-text-brand);
  font-weight: 700;
  text-decoration: none;
}
.auth-footer-link a:hover {
  text-decoration: underline;
}
.auth-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-400);
  color: var(--color-text-subtle);
  font-size: 13px;
}
.auth-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.auth-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}
.auth-benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-300);
  color: var(--color-text-base);
  line-height: 1.5;
}
.auth-benefits .icon-svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-text-success, #198754);
}
@media (max-width: 600px) {
  .auth-main {
    padding: var(--space-700) var(--space-400) var(--space-800);
  }
  .auth-tab span {
    font-size: 14px;
  }
}

/* ── Auth flow tooltip override (force row layout matching dashboard tooltip) ── */
.auth-page .dashboard-note,
.auth-panel .dashboard-note {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  margin: 0;
  background: var(--color-bg-fill-info-subtle);
  border-radius: var(--radius-400);
}
.auth-page .dashboard-note > .icon-svg,
.auth-panel .dashboard-note > .icon-svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 2px;
  color: var(--color-text-brand);
}
.auth-page .dashboard-note > p,
.auth-panel .dashboard-note > p {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.5;
  color: var(--color-text-base);
}
.auth-page .dashboard-note a,
.auth-panel .dashboard-note a {
  color: var(--color-text-brand);
  font-weight: 700;
  text-decoration: underline;
}

/* ── Dealer application success state ── */
.dealer-success-panel[hidden] {
  display: none !important;
}
.dealer-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-500);
  border-radius: 50%;
  background: var(--color-bg-fill-success-soft, #DCFCE7);
  color: var(--color-text-success, #15803D);
}
.dealer-success-icon .icon-svg {
  width: 32px;
  height: 32px;
}

/* ═══════════════════════════════════════════════════
   MINICART DRAWER — right-side pull-out, mirrors .sidebar-overlay
   Uses checkout cart-* component classes inside the panel
   so typography & qty steppers match the rest of the system.
   ═══════════════════════════════════════════════════ */
.minicart-overlay,
.mobile-minicart-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 240ms ease;
}

.minicart-overlay.is-open,
.mobile-minicart-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.minicart-overlay[hidden],
.mobile-minicart-overlay[hidden] {
  display: none;
}

.mobile-minicart-overlay {
  overflow-y: auto;
}

.minicart-overlay .sidebar-backdrop,
.mobile-minicart-overlay .sidebar-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-hero);
}

/* Right-anchored panel — mirror of .sidebar-panel but slides from right */
.minicart-panel,
.mobile-minicart-panel {
  position: relative;
  margin-left: auto; /* anchor to right edge */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 440px;
  max-width: calc(100vw - 24px);
  min-height: 100vh;
  max-height: 100dvh;
  background: var(--color-bg-surface);
  border-left: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-400);
  transform: translateX(32px);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  overflow-x: hidden;
}

.minicart-overlay.is-open .minicart-panel,
.mobile-minicart-overlay.is-open .mobile-minicart-panel {
  transform: translateX(0);
}

/* Header — matches .sidebar-head structure */
.minicart-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 64px 24px 24px;
  flex: 0 0 auto;
}

/* Body — uses checkout .cart-items-list inside */
.minicart-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  padding: 0 24px var(--space-600);
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
}

.minicart-body .cart-divider {
  margin: 0;
}

/* Footer pinned to bottom */
.minicart-foot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: var(--space-600) 24px 32px;
  border-top: 1px solid var(--color-border-base);
  background: var(--color-bg-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
}

.minicart-foot .button {
  width: 100%;
  justify-content: center;
}

/* Hide desktop minicart on mobile, hide mobile minicart on desktop */
@media (max-width: 767px) {
  .minicart-overlay { display: none !important; }
}
@media (min-width: 768px) {
  .mobile-minicart-overlay { display: none !important; }
}

/* Mobile minicart — full-width panel like .mobile-sidebar-panel */
@media (max-width: 767px) {
  .mobile-minicart-panel {
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    border-left: none;
    border-radius: 0;
  }
  .mobile-minicart-panel .minicart-head {
    padding: 32px 32px 20px;
  }
  .mobile-minicart-panel .minicart-body {
    padding: 0 32px var(--space-600);
  }
  .mobile-minicart-panel .minicart-foot {
    padding: var(--space-500) 32px 28px;
  }
}

/* ═══════════════════════════════════════════════════
   MOBILE TOC DRAWER — floating FAB + bottom sheet
   ═══════════════════════════════════════════════════ */
.toc-fab {
  display: none; /* hidden on desktop */
}

.toc-drawer-backdrop,
.toc-drawer {
  display: none;
}

@media (max-width: 1023px) {
  .toc-fab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-400);
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: var(--color-bg-surface);
    color: var(--color-text-strong);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-300);
    padding: 0 var(--space-500);
    min-height: 48px;
    font-family: "Anybody", sans-serif;
    font-variation-settings: "wdth" 100, "wght" 600;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--shadow-400);
  }

  .toc-fab[hidden] { display: none; }

  .toc-fab-label {
    color: var(--color-text-strong);
  }

  .toc-fab-arrow {
    transform: rotate(180deg);
    transition: transform 200ms ease;
    color: var(--color-text-subtle);
  }

  .toc-fab[aria-expanded="true"] .toc-fab-arrow {
    transform: rotate(0deg);
  }

  /* Backdrop */
  .toc-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 240ms ease, visibility 240ms ease;
  }

  .toc-drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Bottom-sheet drawer */
  .toc-drawer {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 310;
    background: var(--color-bg-surface);
    border-top-left-radius: var(--radius-500);
    border-top-right-radius: var(--radius-500);
    box-shadow: var(--shadow-400);
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .toc-drawer.is-open {
    transform: translateY(0);
  }

  .toc-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--color-border-subtle);
    flex: 0 0 auto;
  }

  .toc-drawer-label {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-strong);
  }

  .toc-drawer-head .icon-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-full);
    background: var(--color-bg-surface);
    color: var(--color-text-strong);
    cursor: pointer;
  }

  .toc-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 24px 32px;
  }

  .toc-drawer-body .content-toc-list,
  .toc-drawer-body .toc-list,
  .toc-drawer-body ol,
  .toc-drawer-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: none;
  }

  .toc-drawer-body a {
    display: block;
    padding: 12px 14px;
    border-radius: var(--radius-300);
    color: var(--color-text-strong);
    text-decoration: none;
    font-size: 15px;
    line-height: 1.4;
    transition: background 160ms ease;
  }

  .toc-drawer-body a:hover,
  .toc-drawer-body a.is-active {
    background: var(--color-bg-fill-strong);
    color: var(--color-text-brand);
  }
}

/* Hide the desktop sticky TOC on mobile so the FAB takes over */
@media (max-width: 1023px) {
  .content-toc {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════
   OUR COMPANY — contained hero (within .shell) + inline figures
   Brand-tinted grayscale photo treatment shared across the page.
   ═══════════════════════════════════════════════════ */

/* Soft navy-blue duotone applied to all photos on these pages.
   Tuned to avoid blowing out highlights: gentle brightness drop,
   light sepia + hue-rotate to push midtones blue, low saturation. */
:root {
  --photo-navy-tint: grayscale(100%) brightness(0.85) contrast(0.95) sepia(28%) hue-rotate(195deg) saturate(115%);
}

.oc-hero {
  width: 100%;
  /* Top + bottom padding matches the .shell horizontal padding (40px desktop)
     so the hero has even breathing room on all four sides. Using padding
     instead of margin prevents collapse through <main> (which would expose
     the dark body gradient as a stripe above the hero). */
  margin: 0;
  padding: 40px 0;
}

.oc-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-400);
  color: var(--color-text-subtle);
}
.oc-hero-breadcrumb a {
  color: var(--color-text-subtle);
  text-decoration: none;
}
.oc-hero-breadcrumb a:hover {
  color: var(--color-text-brand);
}
.oc-hero-breadcrumb svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.oc-hero-breadcrumb span {
  color: var(--color-text-base);
}

.oc-hero-media {
  position: relative;
  margin: 0;
  width: 100%;
  overflow: hidden;
  background: var(--color-bg-fill-strong);
  /* Viewport-fill on desktop: total page chrome above (~160px sticky
     header) + 40px hero top padding + 40px bottom padding ≈ 240px.
     Subtracting that from 100vh makes the image bottom land just above
     the matching bottom margin, so the hero perfectly fills the viewport. */
  height: calc(100vh - 240px);
  min-height: 560px;
  max-height: 820px;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-500);
  box-shadow: var(--shadow-200);
}

.oc-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: var(--photo-navy-tint);
}

/* Brand-tinted grayscale on all inline content figures on Our Company */
.content-page .content-figure img {
  filter: var(--photo-navy-tint);
}

.oc-hero-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-600);
  padding: var(--space-800);
  background: linear-gradient(180deg, rgba(8, 16, 32, 0) 22%, rgba(8, 16, 32, 0.88) 100%);
  color: var(--color-text-on-dark, #fff);
}

.oc-hero-caption-inner {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}

.oc-hero-eyebrow {
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

.oc-hero-headline {
  color: #fff;
  margin: 0;
}

.oc-hero-lede {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.55;
  max-width: 720px;
}

.oc-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-500);
  padding-top: var(--space-600);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.oc-hero-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.oc-hero-stat-value {
  color: #fff;
  margin: 0;
}

.oc-hero-stat-label {
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

/* Inline content figures (shared with other content pages if needed) */
.content-figure {
  margin: var(--space-500) 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-400);
  overflow: hidden;
  background: var(--color-bg-fill-strong);
}

.content-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.content-figure-caption {
  padding: var(--space-400) var(--space-500);
  color: var(--color-text-subtle);
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border-subtle);
  margin: 0;
  line-height: 1.55;
}

.content-figure--feature {
  border-color: var(--color-border-brand-soft);
  box-shadow: var(--shadow-200);
}

.content-figure--feature .content-figure-caption {
  background: var(--overlay-brand-8);
  color: var(--color-text-strong);
  border-top-color: var(--color-border-brand-soft);
}

/* Reset prose default margin on figures so the component margin wins */
.content-prose .content-figure {
  margin-top: var(--space-600);
  margin-bottom: var(--space-600);
}
.content-prose > .content-figure + p {
  margin-top: var(--space-500);
}

/* Our company hero — tablet */
@media (max-width: 900px) {
  .oc-hero-media {
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: none;
    min-height: 0;
  }
  .oc-hero-caption {
    gap: var(--space-500);
    padding: var(--space-600);
  }
  .oc-hero-caption-inner {
    gap: var(--space-300);
  }
  .oc-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-400);
    padding-top: var(--space-500);
  }
  .oc-hero-headline.type-heading-2xl {
    font-size: 32px;
    line-height: 36px;
  }
}

/* Our company hero — mobile */
@media (max-width: 767px) {
  .oc-hero {
    /* Match the 24px shell padding on mobile */
    margin: 0;
    padding: 24px 0;
  }
}
@media (max-width: 600px) {
  .oc-hero-media {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-400);
  }
  .oc-hero-caption {
    gap: var(--space-500);
    padding: var(--space-500);
  }
  .oc-hero-headline.type-heading-2xl {
    font-size: 26px;
    line-height: 30px;
  }
  .oc-hero-lede {
    font-size: 15px;
    line-height: 1.55;
  }
}

/* ═══════════════════════════════════════════════════
   CONTACT — contained team photo with overlay caption
   Photo sits inside the page margins as a rounded card.
   ═══════════════════════════════════════════════════ */
.contact-team {
  padding: var(--space-700) 0 var(--space-1000);
}

.contact-team-figure {
  position: relative;
  margin: 0;
  width: 100%;
  overflow: hidden;
  background: var(--color-bg-fill-strong);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-500);
  box-shadow: var(--shadow-200);
  /* Fixed desktop height matches the previous version's visual height. */
  height: 620px;
}

.contact-team-figure img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-navy-tint);
}

.contact-team-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-700);
  background: linear-gradient(180deg, rgba(8, 16, 32, 0) 30%, rgba(8, 16, 32, 0.82) 100%);
  color: var(--color-text-on-dark, #fff);
  margin: 0;
}

.contact-team-caption-inner {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.contact-team-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.88);
}

.contact-team-headline {
  margin: 0;
  color: #fff;
}

.contact-team-lede {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .contact-team-figure {
    height: 540px;
  }
}

@media (max-width: 900px) {
  .contact-team {
    padding: var(--space-500) 0 var(--space-800);
  }
  .contact-team-figure {
    height: auto;
    aspect-ratio: 4 / 5;
  }
  .contact-team-caption {
    padding: var(--space-600);
  }
  .contact-team-headline.type-heading-xl {
    font-size: 28px;
    line-height: 32px;
  }
}

@media (max-width: 600px) {
  .contact-team-figure {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-400);
  }
  .contact-team-caption {
    padding: var(--space-500);
  }
}

/* ═══════════════════════════════════════════════════
   AMBIENT MOTION — subtle scroll reveals + drift
   All effects gated on html.js-fx so they only kick in
   when JS has loaded AND the user has not opted out via
   prefers-reduced-motion (the JS sets the flag).
   Nothing here touches existing component animations.
   ═══════════════════════════════════════════════════ */

/* Base reveal: fade + small upward translate */
html.js-fx .fx-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
html.js-fx .fx-reveal.fx-reveal--in {
  opacity: 1;
  transform: none;
}

/* Stagger children inside revealed groups (e.g. stat rows, footer columns) */
html.js-fx .fx-reveal-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
html.js-fx .fx-reveal-stagger.fx-reveal--in > * {
  opacity: 1;
  transform: none;
}
html.js-fx .fx-reveal-stagger.fx-reveal--in > *:nth-child(1) { transition-delay:  40ms; }
html.js-fx .fx-reveal-stagger.fx-reveal--in > *:nth-child(2) { transition-delay: 110ms; }
html.js-fx .fx-reveal-stagger.fx-reveal--in > *:nth-child(3) { transition-delay: 180ms; }
html.js-fx .fx-reveal-stagger.fx-reveal--in > *:nth-child(4) { transition-delay: 250ms; }
html.js-fx .fx-reveal-stagger.fx-reveal--in > *:nth-child(5) { transition-delay: 320ms; }
html.js-fx .fx-reveal-stagger.fx-reveal--in > *:nth-child(6) { transition-delay: 390ms; }
html.js-fx .fx-reveal-stagger.fx-reveal--in > *:nth-child(7) { transition-delay: 460ms; }
html.js-fx .fx-reveal-stagger.fx-reveal--in > *:nth-child(8) { transition-delay: 530ms; }

/* One-shot page entrance fade so route changes feel intentional */
html.js-fx .site-shell {
  animation: fx-page-enter 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fx-page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slow ambient drift on the Our Company hero photo (ken-burns).
   Range and duration tuned to be perceptible without being distracting. */
@media (prefers-reduced-motion: no-preference) {
  html.js-fx .oc-hero-media img {
    transform-origin: 50% 55%;
    animation: fx-oc-drift 14s ease-in-out infinite alternate;
  }
}
@keyframes fx-oc-drift {
  from { transform: scale(1.08) translate3d(-2.5%, 1.5%, 0); }
  to   { transform: scale(1.22) translate3d(3%, -2%, 0); }
}

/* Same drift on the contact team photo, mirrored origin for variation */
@media (prefers-reduced-motion: no-preference) {
  html.js-fx .contact-team-figure img {
    transform-origin: 50% 45%;
    animation: fx-contact-drift 16s ease-in-out infinite alternate;
  }
}
@keyframes fx-contact-drift {
  from { transform: scale(1.08) translate3d(2.5%, -1.5%, 0); }
  to   { transform: scale(1.20) translate3d(-3%, 2%, 0); }
}

/* Tab panel card swap animation (home page New Arrivals / Offers) */
@media (prefers-reduced-motion: no-preference) {
  html.js-fx .tab-panel.fx-tab-leaving .product-card,
  html.js-fx .tab-panel.fx-tab-entering .product-card {
    will-change: transform, opacity;
  }
  html.js-fx .tab-panel.fx-tab-leaving .product-card {
    animation: fx-tab-out 240ms cubic-bezier(0.4, 0, 0.6, 1) both;
  }
  html.js-fx .tab-panel.fx-tab-entering .product-card {
    animation: fx-tab-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  html.js-fx .tab-panel.fx-tab-leaving .product-card:nth-child(1)  { animation-delay: 0ms; }
  html.js-fx .tab-panel.fx-tab-leaving .product-card:nth-child(2)  { animation-delay: 35ms; }
  html.js-fx .tab-panel.fx-tab-leaving .product-card:nth-child(3)  { animation-delay: 70ms; }
  html.js-fx .tab-panel.fx-tab-leaving .product-card:nth-child(4)  { animation-delay: 105ms; }
  html.js-fx .tab-panel.fx-tab-entering .product-card:nth-child(1) { animation-delay: 40ms; }
  html.js-fx .tab-panel.fx-tab-entering .product-card:nth-child(2) { animation-delay: 110ms; }
  html.js-fx .tab-panel.fx-tab-entering .product-card:nth-child(3) { animation-delay: 180ms; }
  html.js-fx .tab-panel.fx-tab-entering .product-card:nth-child(4) { animation-delay: 250ms; }
}
@keyframes fx-tab-out {
  from { opacity: 1; transform: translateY(0)    scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.985); }
}
@keyframes fx-tab-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Subtle counter pulse hook (added by JS when cart updates) */
@media (prefers-reduced-motion: no-preference) {
  html.js-fx .cart-counter.fx-pulse {
    animation: fx-counter-pulse 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}
@keyframes fx-counter-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ============================================================================
   DESIGN SYSTEM GUIDE (developer handoff page)
   These styles are scoped to body.ds-page so they never affect the live site.
   ============================================================================ */
body.ds-page {
  background: var(--color-bg-page);
  color: var(--color-text-strong);
  font-family: "Nunito Sans", sans-serif;
  margin: 0;
}
body.ds-page .ds-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 40px 120px;
}

/* Page header */
.ds-page-header {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: 56px;
}
.ds-page-header .ds-eyebrow {
  color: var(--color-text-magic);
  margin: 0 0 16px;
}
.ds-page-header h1 {
  margin: 0 0 16px;
  color: var(--color-text-strong);
}
.ds-page-header .ds-lede {
  margin: 0;
  max-width: 720px;
  color: var(--color-text-subtle);
  font-size: 18px;
  line-height: 28px;
}
.ds-page-header .ds-meta {
  margin: 24px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  color: var(--color-text-subtle);
  font-size: 14px;
}
.ds-page-header .ds-meta strong {
  color: var(--color-text-strong);
  margin-right: 6px;
}

/* TOC */
.ds-toc {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-500);
  padding: 24px 28px;
  margin-bottom: 64px;
  box-shadow: var(--shadow-100);
}
.ds-toc h2 {
  margin: 0 0 16px;
  color: var(--color-text-strong);
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ds-toc ol {
  list-style: decimal-leading-zero;
  padding-left: 24px;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 32px;
}
.ds-toc a {
  color: var(--color-text-brand);
  text-decoration: none;
  font-weight: 500;
}
.ds-toc a:hover { text-decoration: underline; }

/* Sections */
.ds-section {
  padding: 56px 0;
  border-top: 1px solid var(--color-border-subtle);
}
.ds-section:first-of-type { border-top: 0; padding-top: 0; }
.ds-section-header {
  margin-bottom: 32px;
}
.ds-section-header .ds-section-num {
  display: inline-block;
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-magic);
  margin-bottom: 12px;
}
.ds-section-header > h2 {
  margin: 0 0 12px;
  color: var(--color-text-strong);
}
.ds-section-header > p {
  margin: 0;
  max-width: 760px;
  color: var(--color-text-subtle);
  font-size: 16px;
  line-height: 24px;
}

.ds-subsection {
  margin-top: 48px;
}
.ds-subsection:first-child { margin-top: 0; }
.ds-subsection > h3 {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-strong);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.ds-subsection > p {
  margin: 0 0 20px;
  max-width: 760px;
  color: var(--color-text-base);
  font-size: 14px;
  line-height: 22px;
}

/* Color swatch grid */
.ds-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.ds-swatch {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  overflow: hidden;
  box-shadow: var(--shadow-100);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.ds-swatch:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-400);
}
.ds-swatch-chip {
  height: 88px;
  border-bottom: 1px solid var(--color-border-base);
}
.ds-swatch-chip--checker {
  background-image:
    linear-gradient(45deg, #d9dfe6 25%, transparent 25%),
    linear-gradient(-45deg, #d9dfe6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d9dfe6 75%),
    linear-gradient(-45deg, transparent 75%, #d9dfe6 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.ds-swatch-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ds-swatch-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-strong);
  font-family: "Nunito Sans", sans-serif;
}
.ds-swatch-token,
.ds-swatch-value {
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 11px;
  color: var(--color-text-subtle);
  word-break: break-all;
}
.ds-swatch-token { color: var(--color-text-brand); cursor: pointer; }
.ds-swatch-token:hover { text-decoration: underline; }

/* Token table */
.ds-token-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  overflow: hidden;
  box-shadow: var(--shadow-100);
}
.ds-token-table th,
.ds-token-table td {
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}
.ds-token-table th {
  background: var(--color-bg-fill-strong);
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-strong);
}
.ds-token-table tr:last-child td { border-bottom: 0; }
.ds-token-table code {
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 12px;
  color: var(--color-text-brand);
  background: var(--overlay-brand-6);
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.ds-token-table code:hover { background: var(--overlay-brand-8); }
.ds-token-table .ds-mono {
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 12px;
  color: var(--color-text-base);
}
.ds-token-table .ds-preview-bar {
  display: inline-block;
  vertical-align: middle;
  background: var(--color-text-brand);
  height: 12px;
  border-radius: 2px;
}

/* Type specimen */
.ds-type-specimen {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  padding: 24px 28px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  align-items: center;
}
.ds-type-specimen .ds-type-meta {
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 12px;
  color: var(--color-text-subtle);
  line-height: 1.7;
}
.ds-type-specimen .ds-type-meta strong {
  color: var(--color-text-strong);
  display: block;
  margin-bottom: 4px;
  font-family: "Nunito Sans", sans-serif;
}
.ds-type-specimen .ds-type-meta code {
  color: var(--color-text-brand);
}

/* Spacing visual */
.ds-spacing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.ds-space-row {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-100);
}
.ds-space-bar {
  background: var(--color-text-brand);
  height: 12px;
  border-radius: 2px;
}
.ds-space-row code {
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 11px;
  color: var(--color-text-brand);
  cursor: pointer;
}
.ds-space-row .ds-space-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-strong);
}
.ds-space-row .ds-space-px {
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* Radius preview */
.ds-radius-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}
.ds-radius-tile {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-100);
  border-radius: var(--radius-400);
}
.ds-radius-shape {
  width: 88px;
  height: 88px;
  background: var(--color-bg-fill-brand);
  border: 1px solid var(--color-border-brand-soft);
}
.ds-radius-tile code {
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 11px;
  color: var(--color-text-brand);
  cursor: pointer;
}

/* Shadow preview */
.ds-shadow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  padding: 12px;
}
.ds-shadow-tile {
  background: var(--color-bg-surface);
  border-radius: var(--radius-400);
  padding: 32px 20px;
  text-align: center;
}
.ds-shadow-tile.s-100 { box-shadow: var(--shadow-100); }
.ds-shadow-tile.s-400 { box-shadow: var(--shadow-400); }
.ds-shadow-tile code {
  display: block;
  margin-top: 12px;
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 11px;
  color: var(--color-text-brand);
}

/* Component example block */
.ds-example {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-500);
  overflow: hidden;
  box-shadow: var(--shadow-100);
  margin-bottom: 24px;
}
.ds-example-render {
  padding: 32px;
  background: var(--color-bg-page);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.ds-example-render--dark {
  background: var(--color-bg-ink);
}
.ds-example-render--block { display: block; }
.ds-example-code {
  margin: 0;
  padding: 20px 24px;
  background: #0d1218;
  color: #e6edf3;
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
  position: relative;
}
.ds-example-code .ds-copy {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: "Nunito Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ds-example-code .ds-copy:hover { background: rgba(255, 255, 255, 0.18); }
.ds-example-caption {
  padding: 14px 24px;
  background: var(--color-bg-fill-strong);
  border-top: 1px solid var(--color-border-subtle);
  font-size: 12px;
  color: var(--color-text-subtle);
}
.ds-example-caption strong { color: var(--color-text-strong); }

/* Callout */
.ds-callout {
  background: var(--color-bg-fill-info-subtle);
  border-left: 4px solid var(--color-text-brand);
  border-radius: var(--radius-300);
  padding: 16px 20px;
  margin: 16px 0 24px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-base);
}
.ds-callout strong {
  display: block;
  color: var(--color-text-strong);
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
}
.ds-callout--warn {
  background: var(--color-bg-fill-warning-soft);
  border-left-color: var(--color-text-warning);
}
.ds-callout--critical {
  background: var(--color-bg-fill-critical-soft);
  border-left-color: var(--color-text-critical);
}
.ds-callout code {
  background: rgba(255,255,255,0.6);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 12px;
  color: var(--color-text-brand);
}

/* File tree */
.ds-filetree {
  background: #0d1218;
  color: #e6edf3;
  border-radius: var(--radius-400);
  padding: 20px 24px;
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 12px;
  line-height: 1.8;
  white-space: pre;
  overflow-x: auto;
  margin: 0 0 24px;
}

/* Inline code utility */
.ds-section .ds-code,
.ds-section code.ds-code {
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 12px;
  color: var(--color-text-brand);
  background: var(--overlay-brand-6);
  padding: 1px 6px;
  border-radius: 3px;
}

/* Two-col grid for misc info */
.ds-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 800px) {
  .ds-two-col,
  .ds-toc ol,
  .ds-type-specimen { grid-template-columns: 1fr; }
}

/* Bullet list refresh */
.ds-section ul.ds-list {
  margin: 0 0 16px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-base);
}
.ds-section ul.ds-list li { margin-bottom: 6px; }
.ds-section ul.ds-list code {
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 12px;
  color: var(--color-text-brand);
  background: var(--overlay-brand-6);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Toast for copy confirm */
.ds-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--color-bg-ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-300);
  font-size: 13px;
  font-weight: 600;
  font-family: "Nunito Sans", sans-serif;
  box-shadow: var(--shadow-400);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
  pointer-events: none;
  z-index: 9999;
}
.ds-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 712px) {
  .brands-section {
    padding-top: 22px;
  }
}

/* ── Brands grid ── */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-400);
  padding: var(--space-900) 0 var(--space-1000);
}

.brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-300);
  padding: var(--space-500) var(--space-500);
  min-height: 140px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  text-align: center;
  text-decoration: none;
  color: var(--color-text-strong);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.brand-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-400);
}

.brand-card img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.brand-card-name {
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  color: var(--color-text-base);
}

.brand-card--no-logo {
  justify-content: center;
}

.brand-card--no-logo .brand-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-strong);
}

/* ── Reviews page ── */
.reviews-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-700);
  max-width: 880px;
  margin: var(--space-900) 0 0;
  padding: var(--space-700) var(--space-800);
  background: var(--color-bg-fill-info-subtle);
  border-radius: var(--radius-400);
}

.reviews-summary > p {
  margin: 0;
  color: var(--color-text-base);
  font-size: 15px;
  line-height: 1.55;
}

.reviews-count {
  margin: 0;
  color: var(--color-text-subtle);
}

@media (max-width: 720px) {
  .reviews-summary {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-600);
  }
}

.reviews-score {
  text-align: left;
  flex: 0 0 auto;
}

.reviews-score-number {
  font-family: "Nunito Sans", sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--color-text-strong);
  line-height: 1;
}

.reviews-score-stars {
  color: var(--color-text-magic);
  font-size: 20px;
  margin-top: var(--space-100);
}

.reviews-score-count {
  font-size: 13px;
  color: var(--color-text-subtle);
  margin-top: var(--space-200);
}

.reviews-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-400);
  margin-top: var(--space-700);
  margin-bottom: var(--space-500);
}

.reviews-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-200);
}

.reviews-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
  min-height: 36px;
  padding: 0 var(--space-400);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-full);
  color: var(--color-text-strong);
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.reviews-filter-chip:hover {
  border-color: var(--color-border-strong);
}

.reviews-filter-chip.is-active {
  background: var(--color-text-strong);
  border-color: var(--color-text-strong);
  color: var(--color-bg-surface);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-500);
}
@media (max-width: 720px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .reviews-summary { flex-direction: column; gap: var(--space-500); text-align: center; }
  .reviews-toolbar { flex-direction: column; align-items: stretch; }
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  padding: var(--space-600);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
}
/* The pagination JS toggles the [hidden] attribute. Author `display: flex`
   above outranks the UA stylesheet's [hidden]{display:none}, so without this
   the hidden cards stay visible and paging appears broken. */
.review-card[hidden] {
  display: none;
}

.review-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-300);
}

.review-card-name {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  color: var(--color-text-strong);
}

.review-card-date {
  font-size: 13px;
  color: var(--color-text-subtle);
}

.review-card-stars {
  color: var(--color-text-magic);
  font-size: 16px;
  letter-spacing: 1px;
}

.review-card-text {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-base);
}

@media (max-width: 767px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
  .reviews-summary {
    flex-direction: column;
    text-align: center;
  }
}


/* === 316 Stainless tooltip on PDP spec tables ============================ */
.pdp-info-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--space-200);
}
.pdp-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 1px solid var(--color-border-base);
  border-radius: 50%;
  background: var(--color-bg-fill-strong);
  font-size: 11px; font-weight: 700;
  font-family: inherit;
  color: var(--color-text-base);
  cursor: pointer; padding: 0;
  vertical-align: middle;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pdp-info-btn:hover,
.pdp-info-wrap:hover .pdp-info-btn,
.pdp-info-wrap:focus-within .pdp-info-btn {
  background: var(--color-bg-fill-brand);
  color: #ffffff;
  border-color: var(--color-bg-fill-brand);
}
.pdp-tooltip-popover {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 320px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-300);
  padding: var(--space-400) var(--space-500);
  font-size: 13px; line-height: 1.5;
  color: var(--color-text-base);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s;
}
.pdp-info-wrap:hover .pdp-tooltip-popover,
.pdp-info-wrap:focus-within .pdp-tooltip-popover {
  opacity: 1;
  visibility: visible;
}


/* === Track-order page item & detail components ============================ */
.track-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.track-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--space-500);
  align-items: center;
  padding: var(--space-500) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.track-item:last-child { border-bottom: none; }
.track-item-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-300);
  background: var(--color-bg-fill-strong);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.track-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.track-item-body { min-width: 0; }
.track-item-name { margin: 0 0 var(--space-200); color: var(--color-text-strong); }
.track-item-meta { margin: 0; color: var(--color-text-subtle); font-size: 14px; }
.track-item-price { margin: 0; font-weight: 700; color: var(--color-text-strong); white-space: nowrap; }

.track-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-500) var(--space-700);
  margin: 0;
}
.track-detail-grid > div { display: flex; flex-direction: column; gap: var(--space-200); }
.track-detail-grid dt {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-xs-size);
  line-height: var(--type-heading-xs-line);
  letter-spacing: var(--type-heading-xs-track);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin: 0;
}
.track-detail-grid dd { margin: 0; font-weight: 700; color: var(--color-text-strong); }

.track-events-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--color-text-base);
}
.track-events-table th,
.track-events-table td {
  padding: var(--space-400) var(--space-300);
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: top;
}
.track-events-table th {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-xs-size);
  letter-spacing: var(--type-heading-xs-track);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.track-events-table tr:last-child td { border-bottom: none; }
.track-events-table td:first-child { white-space: nowrap; color: var(--color-text-strong); font-weight: 600; }

@media (max-width: 720px) {
  .track-detail-grid { grid-template-columns: 1fr; gap: var(--space-400); }
  .track-item { grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-400); }
  .track-item-thumb { width: 56px; height: 56px; }
  .track-item-price { grid-column: 2; align-self: start; }
  .track-events-table { font-size: 13px; }
}


/* === Article card component (Guides index, related articles) ============ */
/* Toolbar above the grid: result count on the left, canonical .catalog-sort
   dropdown on the right. Reuses the catalog sort component — do not invent
   a new sort control for editorial pages. */
.article-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-500);
  flex-wrap: wrap;
  margin-bottom: var(--space-600);
}
.article-toolbar-count {
  margin: 0;
  color: var(--color-text-subtle);
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-600);
}
.guides-page .article-grid {
  padding-bottom: var(--space-1000);
}
@media (max-width: 1024px) {
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .article-grid { grid-template-columns: 1fr; }
}

.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.article-card:hover,
.article-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-400);
  border-color: var(--color-border-strong);
}
.article-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
}
.article-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-fill-strong);
  border-bottom: 1px solid var(--color-border-subtle);
  overflow: hidden;
}
.article-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  padding: var(--space-500) var(--space-600) var(--space-600);
}
.article-card-meta {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-xs-size);
  letter-spacing: var(--type-heading-xs-track);
  text-transform: uppercase;
  color: var(--color-text-magic);
}
.article-card-title {
  margin: 0;
  color: var(--color-text-strong);
}
.article-card:hover .article-card-title,
.article-card:focus-within .article-card-title {
  color: var(--color-text-brand);
}
.article-card-excerpt {
  margin: 0;
  color: var(--color-text-base);
  line-height: 1.55;
}


/* === Article in-prose figure (photo + caption inside guide articles) ===== */
.article-figure {
  margin: var(--space-600) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}
.article-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-400);
  background: var(--color-bg-fill-strong);
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-figure figcaption {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-subtle);
  font-style: italic;
}
.content-prose .article-figure { margin-top: var(--space-600); margin-bottom: var(--space-600); }
.content-prose .article-figure + p { margin-top: var(--space-500); }

/* Comparison table inside articles */
.article-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: var(--space-500) 0;
}
.article-compare-table th,
.article-compare-table td {
  padding: var(--space-400);
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: top;
}
.article-compare-table thead th {
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-xs-size);
  letter-spacing: var(--type-heading-xs-track);
  text-transform: uppercase;
  color: var(--color-text-magic);
  border-bottom: 2px solid var(--color-border-base);
  background: var(--color-bg-fill-strong);
}
.article-compare-table tbody th[scope="row"] {
  color: var(--color-text-strong);
  font-weight: 700;
  width: 30%;
}
.article-compare-table tr:last-child th,
.article-compare-table tr:last-child td { border-bottom: none; }


/* === Sub-grouping inside multi-step forms (Education / Work / References) */
.co-subgroup {
  border: 1px dashed var(--color-border-subtle);
  border-radius: var(--radius-300);
  padding: var(--space-500);
  margin-bottom: var(--space-400);
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}
.co-subgroup-label {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 700;
  font-size: var(--type-heading-xs-size);
  letter-spacing: var(--type-heading-xs-track);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.co-yes-no {
  display: flex;
  gap: var(--space-500);
  flex-wrap: wrap;
}
.co-yes-no .co-checkbox-row { margin: 0; gap: var(--space-200); }

/* Job application stepper success panel reuses dealer success styles */


/* === Upload-target styled label (job-application resume upload) ========== */
.co-upload-label {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  padding: var(--space-500);
  background: var(--color-bg-fill-strong);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-300);
  cursor: pointer;
  color: var(--color-text-base);
  font-weight: 600;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.co-upload-label:hover,
.co-upload-label:focus-within {
  background: var(--overlay-brand-8);
  border-color: var(--color-text-brand);
  color: var(--color-text-brand);
}
.co-upload-label svg { color: currentColor; }


/* === Returns: order list + search toolbar (Start a Return page) ========== */
.returns-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-400);
  align-items: end;
  margin-bottom: var(--space-500);
}
.returns-search {
  position: relative;
  display: flex;
  align-items: center;
}
.returns-search > svg {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--color-text-subtle);
  pointer-events: none;
}
.returns-search .co-input {
  padding-left: 42px;
  width: 100%;
}
@media (max-width: 720px) {
  .returns-toolbar { grid-template-columns: 1fr; }
}

.returns-orders {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}
.returns-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-500);
  align-items: center;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  padding: var(--space-500) var(--space-600);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.returns-order:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.returns-order--ineligible {
  background: var(--color-bg-fill-strong);
  opacity: 0.85;
}
.returns-order-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  min-width: 0;
}
.returns-order-main > .dashboard-status-pill { align-self: flex-start; }
.returns-order-num { margin: 0; color: var(--color-text-strong); }
.returns-order-meta {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-subtle);
}
.returns-order-items {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.returns-order-ineligible-note {
  margin: var(--space-200) 0 0;
  font-size: 13px;
  color: var(--color-text-warning);
}
.returns-order-ineligible-note a {
  color: var(--color-text-brand);
  font-weight: 700;
}
.returns-order-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  flex-shrink: 0;
  align-items: stretch;
  min-width: 160px;
}
.returns-order-actions .button { white-space: nowrap; }
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 720px) {
  .returns-order {
    grid-template-columns: 1fr;
  }
  .returns-order-actions {
    min-width: 0;
  }
  .returns-order-items { white-space: normal; }
}

/* Dashboard order row — action buttons in the last cell (wraps single or stacked) */
.dashboard-order-actions-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  align-items: stretch;
}

/* ── create-return: item card with checkbox + revealable qty/reason ── */
.returns-create-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
  padding: var(--space-500) var(--space-600);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  transition: border-color 160ms ease;
}
.returns-create-item.is-selected {
  border-color: var(--color-text-strong);
  background: var(--color-bg-surface);
}
.returns-create-item-row {
  display: grid;
  grid-template-columns: 16px 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-400);
  cursor: pointer;
  margin: 0;
}
.returns-create-item-row > input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--color-bg-fill-brand);
  cursor: pointer;
}
.returns-create-item-fields[hidden] {
  display: none;
}
@media (max-width: 720px) {
  .returns-create-item-row {
    grid-template-columns: 16px 46px minmax(0, 1fr);
    grid-template-areas:
      "check img info"
      ". . price";
    row-gap: var(--space-200);
  }
  .returns-create-item-row > input[type="checkbox"] { grid-area: check; }
  .returns-create-item-row > .review-item-img { grid-area: img; }
  .returns-create-item-row > .review-item-info { grid-area: info; }
  .returns-create-item-row > .review-item-price { grid-area: price; justify-self: end; }
}

/* ── create-return: confirmation step ───────────────────────────────── */
.returns-create-success-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-300);
  padding: var(--space-400) 0 var(--space-200);
}
.returns-create-success-header .dealer-success-icon {
  margin: 0 0 var(--space-300);
}
.returns-create-success-header .co-panel-subtext {
  max-width: 560px;
}
.returns-create-success-header .button {
  margin-top: var(--space-400);
}

/* ── Home: "Why BH-USA" intro section (between hero and Featured) ── */
.section--why {
  /* Tinted band matching the Shop by Category section, so it reads as its own
     block separated from the white sections around it. Even, ample 64px top and
     bottom padding (top is set on the .hero-section + .section--why rule below
     to beat the generic hero-adjacent override). */
  background: var(--color-bg-fill-strong);
  padding-bottom: 64px;
}
/* Equalize the space above and below the WHY content at 56px. The generic
   `.hero-section + .section` rule (54/40px) outranks `.section--why`, so match
   its specificity here to control the top gap. Below = 24px (white) + 32px
   (gray, from the rule next) = 56px. */
.hero-section + .section--why {
  padding-top: 64px;
}
.why-block {
  /* Stacked (mobile/tablet): cap near the balanced headline width (~545px) so
     headline and body read as one consistent-width column. On large desktop the
     two-column layout below takes over and the block fills the shell. */
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}
.why-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-600);
  align-items: start;
}
/* Large desktop: headline left (locked near its natural 545px width) and the
   paragraph fills the remaining width, so there's no large empty gutter on the
   right. Stacks below 1200px where two columns would cramp the headline. */
@media (min-width: 1200px) {
  .why-block {
    max-width: none;
  }
  .why-cols {
    /* Headline left; paragraph fills the rest to the page's right edge. The
       wider gap (double the previous) is what narrows the paragraph. */
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: 144px;
  }
}
.why-block .eyebrow {
  color: var(--color-text-magic);
}
.why-block h2 { margin: 0; text-wrap: balance; }
.why-block p { margin: 0; color: var(--color-text-base); text-wrap: pretty; }

/* ── Testimonials carousel (home + PDP) ── */
.section--testimonials {
  background: var(--color-bg-surface-subtle);
  padding-top: var(--space-1000);
  padding-bottom: var(--space-1000);
  overflow: hidden;
}
.section--testimonials .section-head {
  align-items: baseline;
  margin-bottom: var(--space-700);
}
.section--testimonials .section-head .section-title { margin: 0; }
.testimonials-meta {
  margin: 0;
  color: var(--color-text-subtle);
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.testimonial-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.testimonial-track {
  display: flex;
  gap: var(--space-600);
  width: max-content;
  animation: testimonial-scroll 90s linear infinite;
}
.testimonial-carousel:hover .testimonial-track,
.testimonial-carousel:focus-within .testimonial-track {
  animation-play-state: paused;
}
@keyframes testimonial-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc((360px + var(--space-600)) * -12), 0, 0); }
}
.testimonial-card {
  flex: 0 0 360px;
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  padding: var(--space-700);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  min-height: 240px;
}
.testimonial-stars {
  color: var(--color-text-magic);
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1;
}
.testimonial-quote {
  margin: 0;
  flex: 1;
  color: var(--color-text-strong);
  font-size: 15px;
  line-height: 1.55;
}
.testimonial-attribution {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-variation-settings: "wdth" 87.5, "wght" 600;
  font-size: var(--type-heading-xs-size);
  letter-spacing: var(--type-heading-xs-track);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-track { animation: none; }
}
@media (max-width: 720px) {
  .testimonial-card { flex-basis: 280px; min-height: 220px; padding: var(--space-600); }
  @keyframes testimonial-scroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc((280px + var(--space-600)) * -12), 0, 0); }
  }
}

/* ── Help-CTA callout (used on catalog, store-locator, brands, find-a-dealer) ── */
.help-cta-wrap {
  /* Vertical only — never reset the horizontal padding that .shell provides,
     or the callout breaks out to the page edges. */
  padding-top: var(--space-900);
  padding-bottom: var(--space-1000);
}
.help-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-500);
  padding: var(--space-700) var(--space-800);
  background: var(--color-bg-fill-info-subtle);
  border-radius: var(--radius-400);
}
.catalog-pagination + .help-cta {
  margin-top: var(--space-900);
}
.help-cta-text {
  margin: 0;
  max-width: 640px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-text-strong);
}
.help-cta-text a {
  color: var(--color-text-magic);
  font-weight: 700;
  white-space: nowrap;
}
.help-cta .button { flex-shrink: 0; }

/* ── Section-level SEO/intro paragraph (catalog category headers, guides) ── */
.section-intro {
  max-width: 760px;
  margin: var(--space-400) 0 var(--space-600);
  color: var(--color-text-base);
  line-height: 1.6;
}

/* ── product.html: small "Have questions?" CTA under product info ── */
.product-question-cta {
  margin-top: var(--space-500);
  padding-top: var(--space-500);
  border-top: 1px dashed var(--color-border-base);
  font-size: 14px;
  color: var(--color-text-subtle);
}
.product-question-cta a {
  color: var(--color-text-magic);
  font-weight: 700;
}

/* ── About page: BH-USA Values grid ── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-500);
}
.value-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  padding: var(--space-700);
  background: var(--color-bg-fill-info-subtle);
  border-radius: var(--radius-400);
}
.value-card-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-magic);
}
.value-card-icon .icon-svg {
  width: 30px;
  height: 30px;
}
.value-card h3 {
  margin: 0;
  color: var(--color-text-strong);
}
.value-card p {
  margin: 0;
  color: var(--color-text-base);
  line-height: 1.55;
}
@media (max-width: 720px) {
  .values-grid { grid-template-columns: 1fr; }
}

/* ── About page: Visit/Contact block (lives in TOC aside on desktop, at bottom of body on mobile) ── */
.content-aside-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  /* 12px horizontal padding matches the TOC link text inset (links carry their
     own 12px); top padding gives the same breathing room the links have above
     their divider so the block reads as consistent. */
  padding: var(--space-500) 12px 0;
  margin: 0;
  border-top: 1px solid var(--color-border-base);
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-base);
}
.content-aside-contact p { margin: 0; }
.content-aside-contact strong { color: var(--color-text-strong); }
.content-aside-contact a {
  color: var(--color-text-magic);
  font-weight: 700;
}
.content-aside-contact .content-toc-label {
  padding: 0;
  margin-bottom: var(--space-200);
}
.content-aside-contact--mobile {
  display: none;
  margin-top: var(--space-800);
  padding: var(--space-700);
  border-top: 0;
  background: var(--color-bg-fill-info-subtle);
  border-radius: var(--radius-400);
  font-size: 15px;
  line-height: 1.6;
}
.content-aside-contact--mobile h2 {
  margin: 0 0 var(--space-300);
  color: var(--color-text-strong);
}
@media (max-width: 900px) {
  .content-aside-contact--desktop { display: none; }
  .content-aside-contact--mobile { display: flex; }
}

/* ── Wholesale dashboard: unpaid invoices card ── */
.dashboard-invoices-total {
  color: var(--color-text-subtle);
}
.dashboard-invoice-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dashboard-invoice-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-500);
  padding: var(--space-400) 0;
}
.dashboard-invoice-row + .dashboard-invoice-row {
  border-top: 1px solid var(--color-border-base);
}
.dashboard-invoice-info {
  flex: 1;
  min-width: 220px;
}
.dashboard-invoice-info p {
  margin: 0;
}

/* ── Wholesale dashboard: Quick Order shipping confirmation ── */
.dashboard-ship-confirm {
  margin-top: var(--space-500);
}
.dashboard-ship-confirm-body p {
  margin: 0;
}
.dashboard-ship-confirm-body > p + p {
  margin-top: var(--space-200);
}
.dashboard-ship-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-300);
  margin-top: var(--space-400);
}
.dashboard-ship-confirm-success {
  margin-top: var(--space-300) !important;
  color: var(--color-text-success);
  font-weight: 700;
}

/* ── Product carousels (home FEATURED + NEW ARRIVALS/CLEARANCE) ── */
.product-carousel {
  position: relative;
}
/* Arrow pair shares a row with the section title / tabs, pushed to the right */
.carousel-nav {
  display: flex;
  gap: var(--space-300);
  margin-left: auto;
}
/* Tabs + arrows on one row; .tab-row keeps its own 400px underline */
.tab-row-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-400);
  margin-bottom: 24px;
}
.tab-row-wrap .tab-row {
  margin-bottom: 0;
}
.product-carousel .carousel-track {
  display: flex;
  gap: var(--space-400);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-top: 8px;
  padding-bottom: 8px;
}
/* Edge fades are scroll-state driven (classes set by script.js): no left fade
   until the user scrolls right, no right fade once they reach the end. Soft
   96px ramp. */
.product-carousel.is-at-start:not(.is-at-end) .carousel-track {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 96px), rgba(0, 0, 0, 0.55) calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 96px), rgba(0, 0, 0, 0.55) calc(100% - 40px), transparent 100%);
}
.product-carousel.is-at-end:not(.is-at-start) .carousel-track {
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.55) 40px, #000 96px, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.55) 40px, #000 96px, #000 100%);
}
.product-carousel:not(.is-at-start):not(.is-at-end) .carousel-track {
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.55) 40px, #000 96px, #000 calc(100% - 96px), rgba(0, 0, 0, 0.55) calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.55) 40px, #000 96px, #000 calc(100% - 96px), rgba(0, 0, 0, 0.55) calc(100% - 40px), transparent 100%);
}
.product-carousel .carousel-track::-webkit-scrollbar {
  display: none;
}
.product-carousel .carousel-track > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}
/* Cards per view: FEATURED shows 3 + a peek of the next card, ARRIVALS/CLEARANCE
   shows 4 + a peek, so it reads as scrollable at a glance. */
.product-carousel--3 .carousel-track > * {
  flex-basis: calc((100% - 3 * var(--space-400) - 72px) / 3);
  min-width: calc((100% - 3 * var(--space-400) - 72px) / 3);
}
.product-carousel--4 .carousel-track > * {
  flex-basis: calc((100% - 4 * var(--space-400) - 60px) / 4);
  min-width: calc((100% - 4 * var(--space-400) - 60px) / 4);
}
@media (max-width: 960px) {
  .product-carousel--3 .carousel-track > *,
  .product-carousel--4 .carousel-track > * {
    flex-basis: calc((100% - 2 * var(--space-400) - 48px) / 2);
    min-width: calc((100% - 2 * var(--space-400) - 48px) / 2);
  }
}
@media (max-width: 640px) {
  .product-carousel--3 .carousel-track > *,
  .product-carousel--4 .carousel-track > * {
    flex-basis: 78%;
    min-width: 78%;
  }
}
.carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-100);
  color: var(--color-text-base);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.carousel-arrow:not(:disabled):hover {
  background: var(--overlay-brand-8);
  border-color: var(--color-border-strong);
}
.carousel-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.carousel-dots {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-300);
  margin-top: var(--space-400);
}
.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  cursor: pointer;
}
.carousel-dot.is-active {
  background: var(--color-bg-fill-brand);
}

/* ── Home: product feature banner (below Shop by Category) ── */
.product-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-800);
  align-items: center;
  /* Contained card so the section reads as its own block, clearly separated
     from the testimonials band below it. */
  background: var(--color-bg-fill-info-subtle);
  border-radius: var(--radius-500);
  padding: var(--space-800);
}
.product-feature-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-400);
}
/* Height set on the IMG itself so the logo never stretches or distorts */
.product-feature-logo {
  height: 48px;
  width: auto;
}
.product-feature-copy h2 {
  margin: 0;
  text-wrap: balance;
}
.product-feature-copy p {
  margin: 0;
  color: var(--color-text-base);
}
.product-feature-media {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-400);
  background: var(--color-bg-fill-strong);
}

/* ── Dashboard: recent-order action buttons must never wrap their labels ── */
.dashboard-order-actions-cell .button {
  white-space: nowrap;
}

/* ── Wholesale dashboard: shipping-confirmation modal ── */
.dashboard-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-500);
}
/* The JS toggles the [hidden] attribute. The author display:flex above outranks
   the UA stylesheet's [hidden]{display:none}, so without this the modal would
   render permanently (same trap as .review-card[hidden]). */
.dashboard-modal-overlay[hidden] {
  display: none;
}
.dashboard-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-ink-42);
}
.dashboard-modal {
  position: relative;
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  padding: var(--space-700);
  background: var(--color-bg-surface);
  border-radius: var(--radius-500);
  box-shadow: var(--shadow-400);
}
.dashboard-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-400);
}
.dashboard-modal-head h3 {
  margin: 0;
}
.dashboard-modal-lede {
  margin: 0;
  color: var(--color-text-base);
}
.dashboard-modal-address {
  display: flex;
  gap: var(--space-400);
  align-items: flex-start;
  padding: var(--space-500);
  background: var(--color-bg-fill-strong);
  border-radius: var(--radius-300);
}
.dashboard-modal-address p {
  margin: 0;
}
.dashboard-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-300);
  margin-top: var(--space-200);
}
@media (max-width: 900px) {
  .product-feature {
    grid-template-columns: 1fr;
    padding: var(--space-600);
  }
  .product-feature-media {
    height: 240px;
  }
}

/* Locked tiers read as not-yet-unlocked: slightly grayed until hover.
   Dimming lives inside filter() because the fx-reveal system owns the
   element's opacity via inline styles. */
.dashboard-benefit-card--silver,
.dashboard-benefit-card--gold {
  filter: grayscale(0.85) opacity(0.6);
  transition: filter 160ms ease;
}
.dashboard-benefit-card--silver:hover,
.dashboard-benefit-card--gold:hover {
  filter: none;
}