.product-grid {
  --product-grid-card-shadow: 0 0 8px rgba(27, 54, 95, 0.12);
  width: 100%;
  box-sizing: border-box;
  padding: var(--_spacing---spacing-xl) var(--_spacing---container-padding)
    var(--_spacing---stacked-component-md);
  background-color: var(--_theme---bg-primary);
  max-width: var(--_spacing---container-lg);
  margin: 0 auto;
}

.product-grid--flush-top {
  padding-top: 0;
}

.product-grid__layout {
  display: flex;
  width: 100%;
  margin: 0 auto;
  align-items: flex-start;
  gap: 3.8vw;
}

.product-grid__layout--mobile {
  flex-direction: column;
  gap: var(--_spacing---spacing-lg);
}

.product-grid__filters {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: clamp(225px, calc(7 * 100% / 38), 280px);
  /* overflow-x: auto clips range-thumb box-shadows at the sidebar edges */
  overflow-x: visible;
  overflow-y: visible;
  overflow-wrap: break-word;
}

.product-grid__filters--mobile {
  width: 100%;
  min-width: auto;
  display: none;
}

.product-grid__filters--modal {
  flex: 1 1 auto;
  max-width: none;
  width: 100%;
  min-width: 0;
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.product-grid__filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.product-grid__filters-header--modal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  padding: var(--_spacing---spacing-sm) var(--_spacing---container-padding);
  border-bottom: 1px solid var(--neutral-300);
}

.product-grid__filters-heading--modal-title {
  margin: 0;
  color: var(--primary-600);
  font-family: "Gelasio Custom", serif;
  font-size: var(--_typography---text-h4);
  font-weight: var(--_typography---font-weight-regular);
  line-height: var(--_typography---line-height-heading);
}

.product-grid__filters-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-grid__filters-heading {
  margin: 0;
  color: var(--primary-600);
  font-family: "Gelasio Custom", serif;
  font-size: var(--_typography---text-h5);
  font-weight: var(--_typography---font-weight-semibold-heading);
  line-height: var(--_typography---line-height-heading);
}

.product-grid__filters--sort-mobile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--_spacing---spacing-md);
  padding-bottom: var(--_spacing---spacing-xl);
}

.product-grid__clear-button {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--primary-600);
  cursor: pointer;
  font-family: var(--_typography---font-body);
  font-size: var(--_typography---text-paragraph-sm);
  font-weight: var(--_typography---font-weight-bold);
}

.product-grid__close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--primary-600);
  cursor: pointer;
}

.product-grid__modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(27, 54, 95, 0.12);
}

.product-grid__modal-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding-top: var(--_spacing---spacing-xl);
  padding-right: var(--_spacing---container-padding);
  padding-bottom: calc(var(--_spacing---spacing-xl) + 145px);
  padding-left: var(--_spacing---container-padding);
  background-color: var(--white);
}

.product-grid__filters-sections {
  margin-top: var(--_spacing---spacing-md);
}

.product-grid__filters-sections--modal {
  flex: 1;
}

.product-grid__filters-footer {
  display: flex;
  gap: var(--_spacing---spacing-md);
}

.product-grid__filters-footer--modal {
  position: sticky;
  bottom: 0px;
  margin-top: auto;
  z-index: 1000;
  padding: var(--_spacing---spacing-md) var(--_spacing---container-padding);
  border-top: 1px solid var(--neutral-300);
  background: var(--white);
}

.product-grid__filter-section {
  border-top: 1px solid var(--neutral-300);
}

.product-grid__filter-section:last-child {
  border-bottom: 1px solid var(--neutral-300);
}

.product-grid__filter-section-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--_spacing---spacing-xs);
  padding: var(--_spacing---spacing-sm) 0;
  border: none;
  background: transparent;
  color: var(--primary-600);
  cursor: pointer;
  text-align: left;
  font-family: "Public Sans Custom", sans-serif;
  font-size: var(--_typography---text-paragraph-md);
  font-weight: 650;
  line-height: var(--_typography---line-height-heading);
  @media (max-width: 768px) {
    padding: var(--_spacing---spacing-md) 0;
    font-size: var(--_typography---text-paragraph-md);
  }
}


.product-grid__filter-section-icon {
  transition: transform 0.25s linear;
}

.product-grid__filter-section-icon--closed {
  transform: rotate(-90deg);
}

/* Accordion: `max-height` is set inline to measured height (see ProductGridFilters). */
.product-grid__filter-section-body {
  overflow: hidden;
  transition: max-height 0.25s linear;
}

@supports (overflow: clip) and (overflow-clip-margin: 8px) {
  .product-grid__filter-section-body {
    /* `clip` + `overflow-clip-margin` keep max-height clipping but let the price range
       thumb box-shadows paint a few pixels outside the body (no extra slider padding). */
    overflow: clip;
    overflow-clip-margin: 8px;
  }
}

.product-grid__filter-section-body:not(.product-grid__filter-section-body--open) {
  pointer-events: none;
}

.product-grid__filter-section-content {
  padding: 8px 0px 24px;
}

@media (prefers-reduced-motion: reduce) {
  .product-grid__filter-section-body {
    transition: none;
  }

  .product-grid__filter-section-icon {
    transition: none;
  }
}

.product-grid__options {
  display: flex;
  flex-direction: column;
}

.product-grid__options--compact {
  gap: var(--_spacing---spacing-sm);
}

.product-grid__options--default {
  gap: var(--_spacing---spacing-sm);
}

.product-grid__options--spacious {
  gap: var(--_spacing---spacing-md);
}

.product-grid__options .checkbox--disabled,
.product-grid__options .checkbox--disabled .checkbox__label {
  opacity: 0.45;
  color: var(--grey-500);
}

.product-grid__options .checkbox--disabled .checkbox__indicator {
  border-color: var(--neutral-300);
  background-color: var(--neutral-100, #f2f2f2);
}

.product-grid__filter-subheading {
  color: var(--primary-600);
  font-size: var(--_typography---text-eyebrow-sm);
  font-weight: var(--_typography---font-weight-extrabold);
  line-height: var(--_typography---line-height-heading);
  letter-spacing: var(--_typography---letter-spacing-wide);
  text-transform: uppercase;
}

.product-grid__filter-subheading--secondary {
  font-weight: var(--_typography---font-weight-extrabold);
}

/* ── Loading skeleton (shared base) ──
   Shimmer base used by both the card placeholders (ProductCardSkeleton, sized in
   ProductCard.css) and the filter-sidebar placeholders below. */

@keyframes product-grid-skeleton-shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}

.product-grid__skeleton {
  border-radius: 4px;
  /* neutral-200/300 (not 100): the grid sits on a neutral-100 page background,
     so a 100-based gradient would be invisible on the transparent sidebar. */
  background: linear-gradient(
    90deg,
    var(--neutral-200, #ede9e4) 25%,
    var(--neutral-300, #d7d2cd) 50%,
    var(--neutral-200, #ede9e4) 75%
  );
  background-size: 800px 100%;
  animation: product-grid-skeleton-shimmer 1.4s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
  .product-grid__skeleton {
    animation: none;
  }
}

/* Filter-sidebar placeholders: reuse the real section structure (section
   border-top, toggle padding, content padding) so the skeleton reserves the
   expanded sidebar height and the facets don't shift it on arrival. */

.product-grid__filter-section-toggle--skeleton {
  cursor: default;
}

.product-grid__skeleton-filter-title {
  display: block;
  width: 45%;
  height: var(--_typography---text-paragraph-md);
}

.product-grid__skeleton-filter-chevron {
  flex: none;
  width: 16px;
  height: 16px;
}

.product-grid__skeleton-filter-option {
  display: block;
  width: 80%;
  height: 20px;
}

.product-grid__skeleton-filter-option:nth-child(2n) {
  width: 65%;
}

.product-grid__skeleton-filter-slider {
  display: block;
  width: 100%;
  height: 40px;
}

.product-grid__results {
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.product-grid__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--_spacing---spacing-lg);
}

.product-grid__toolbar--mobile {
  flex-direction: column;
  align-items: stretch;
}

.product-grid__toolbar-content {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--_spacing---spacing-sm);
}

.product-grid__results-count {
  color: var(--primary-600);
  font-family: "Public Sans Custom", sans-serif;
  font-size: var(--_typography---text-paragraph-sm);
  font-weight: var(--_typography---font-weight-bold);
  line-height: var(--_typography---line-height-normal);
}

.product-grid__results-count-label {
  font-weight: var(--_typography---font-weight-medium);
}

/** Keeps toolbar layout stable before first catalog response (avoid sort jumping). */
.product-grid__results-count--pending {
  opacity: 0;
  pointer-events: none;
}

.product-grid__sort-label {
  display: flex;
  align-items: center;
  gap: var(--_spacing---spacing-xxs);
  color: var(--primary-600);
  font-family: var(--_typography---font-body);
  font-size: var(--_typography---text-paragraph-sm);
  font-weight: var(--_typography---font-weight-bold);
  line-height: var(--_typography---line-height-normal);
}

.product-grid__sort-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
}

.product-grid__sort-select {
  border: none;
  outline: none;
  background-color: transparent;
  padding-right: calc(12px + var(--_spacing---spacing-xxs));
  color: var(--primary-600);
  cursor: pointer;
  font-family: var(--_typography---font-body);
  font-size: var(--_typography---text-paragraph-sm);
  font-weight: var(--_typography---font-weight-medium);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Size to the selected option instead of the widest <option> (Chrome 123+, Safari 17.4+) */
  field-sizing: content;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.product-grid__sort-select:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}

.product-grid__sort-select-wrap:has(.product-grid__sort-select:focus-visible) {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}

.product-grid__sort-select-wrap .product-grid__sort-select:focus-visible {
  outline: none;
}

.product-grid__sort-select-icon {
  position: absolute;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--primary-600);
  transition: transform 0.25s linear;
}

.product-grid__sort-select:open + .product-grid__sort-select-icon,
.product-grid__sort-select-wrap--open .product-grid__sort-select-icon {
  transform: rotate(180deg);
}

.product-grid__sort-trigger {
  text-align: left;
}

.product-grid__sort-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.product-grid__sort-trigger:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}

.product-grid__sort-select-wrap:has(.product-grid__sort-trigger:focus-visible) {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}

.product-grid__sort-select-wrap .product-grid__sort-trigger:focus-visible {
  outline: none;
}

.product-grid__sort-listbox {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  width: max-content;
  min-width: 100%;
  max-height: min(280px, 40vh);
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--neutral-300);
  border-radius: var(--_spacing---radius-md);
  background-color: var(--white);
  box-shadow: var(--product-grid-card-shadow);
}

.product-grid__sort-option {
  padding: var(--_spacing---spacing-xs) var(--_spacing---spacing-sm);
  color: var(--primary-600);
  font-family: var(--_typography---font-body);
  font-size: var(--_typography---text-paragraph-sm);
  font-weight: var(--_typography---font-weight-medium);
  line-height: var(--_typography---line-height-normal);
  white-space: nowrap;
  cursor: pointer;
}

.product-grid__sort-option:hover,
.product-grid__sort-option--active {
  background-color: var(--primary-100);
}

.product-grid__sort-option--selected {
  font-weight: var(--_typography---font-weight-bold);
}

.product-grid__sort-select-wrap--field {
  width: 100%;
}

.product-grid__sort-select-wrap--field .product-grid__sort-select-icon {
  right: var(--_spacing---spacing-md);
}

.product-grid__sort-select-wrap--field .product-grid__sort-listbox {
  right: auto;
  left: 0;
  width: 100%;
}

.product-grid__sort-select-wrap--field .product-grid__sort-trigger {
  field-sizing: fixed;
  width: 100%;
  max-width: 100%;
  font-size: var(--_typography---text-paragraph-md);
  font-weight: var(--_typography---font-weight-semibold-heading);
  line-height: 1.25;
  border: 1px solid var(--primary-600);
  border-radius: var(--_spacing---radius-md);
  padding: var(--_spacing---spacing-xs)
    calc(var(--_spacing---spacing-md) + 12px + var(--_spacing---spacing-xxs))
    var(--_spacing---spacing-xs) var(--_spacing---spacing-md);
  background-color: var(--white);
}

.product-grid__filters--sort-mobile .product-grid__sort-select {
  field-sizing: fixed;
  width: 100%;
  max-width: 100%;
  font-size: var(--_typography---text-paragraph-md);
  font-weight: var(--_typography---font-weight-semibold-heading);
  line-height: 1.25;
  border: 1px solid var(--primary-600);
  border-radius: var(--_spacing---radius-md);
  padding: var(--_spacing---spacing-xs)
    calc(var(--_spacing---spacing-md) + 12px + var(--_spacing---spacing-xxs))
    var(--_spacing---spacing-xs) var(--_spacing---spacing-md);
  background-color: var(--white);
}

.product-grid__status-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--_spacing---spacing-lg);
}

.product-grid__status-chips {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_spacing---spacing-xxs);
  min-width: 0;
}

.product-grid__status-clear-all {
  flex-shrink: 0;
  align-self: center;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: var(--_spacing---spacing-xxs);
}

.product-grid__status-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--_spacing---spacing-xs) var(--_spacing---spacing-sm);
  border: 1px solid var(--neutral-300);
  border-radius: 999px;
  background-color: var(--white);
  color: var(--primary-600);
  font-size: var(--_typography---text-tag);
  font-weight: var(--_typography---font-weight-bold);
  line-height: 1;
}

.product-grid__filter-chip {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: var(--_spacing---btn-gap-lg);
  max-width: 100%;
  padding: 6px 12px 6px 12px;
  border: 1px solid var(--neutral-300);
  border-radius: 999px;
  background-color: var(--white);
  color: var(--primary-600);
  font-size: var(--_typography---text-tag);
  font-weight: var(--_typography---font-weight-semibold);
  line-height: var(--_typography---line-height-heading);
}

.product-grid__filter-chip:hover {
  background-color: var(--alpha-dark-100);
}

.product-grid__filter-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-grid__filter-chip-dismiss {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--primary-600);
  cursor: pointer;
}

.product-grid__filter-chip-dismiss:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}

.product-grid__filter-chip-dismiss-icon {
  display: block;
}

.product-grid__empty-state {
  border: 1px solid var(--neutral-300);
  border-radius: var(--_spacing---radius-md);
  background-color: var(--white);
  padding: var(--_spacing---spacing-xl) var(--_spacing---spacing-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--_spacing---spacing-md);
}

.product-grid__empty-state--mobile {
  padding: var(--_spacing---spacing-xl) var(--_spacing---spacing-md);
}

.product-grid__empty-state-title {
  margin-bottom: var(--_spacing---spacing-xxs);
  color: var(--primary-600);
  font-family: var(--_typography---font-heading);
  font-size: var(--_typography---text-h4);
  font-weight: var(--_typography---font-weight-semibold);
  line-height: var(--_typography---line-height-heading);
}

.product-grid__empty-state-text {
  margin-bottom: var(--_spacing---spacing-sm);
  color: var(--grey-500);
  font-family: var(--_typography---font-body);
  font-size: var(--_typography---text-paragraph-sm);
  font-weight: var(--_typography---font-weight-medium);
  line-height: var(--_typography---line-height-normal);
}

.product-grid__cards {
  display: grid;
  gap: 24px;
  transition: opacity 0.25s ease;
  opacity: 1;
}

.product-grid__cards--updating {
  opacity: 0.6;
}

/* Grid + Webflow host: force cards to respect the track width (avoids min-content blowout). */
.product-grid__cards .product-grid__card {
  min-width: 0;
  max-width: 100%;
}

.product-grid__filter-section-toggle svg {
  color: currentColor;
}

.product-grid__button--full-width {
  width: 100%;
  flex: 1;
  min-width: 160px;
}

.product-grid__button--primary {
  padding: var(--_spacing---btn-padding-v-lg) var(--_spacing---btn-padding-h-md);
  border: none;
  background-color: var(--primary-600);
  color: var(--white);
  font-weight: var(--_typography---font-weight-bold);
  font-size: var(--_typography---text-btn-lg);
  line-height: var(--_typography---line-height-tight);
  min-width: 100px;
  min-height: 48px;
}

.product-grid__button--secondary {
  padding: var(--_spacing---btn-padding-v-lg) var(--_spacing---btn-padding-h-md);
  border: 1px solid var(--_theme---btn-border-secondary);
  background-color: var(--_theme---btn-bg-secondary);
  color: var(--_theme---btn-text-secondary);
  font-weight: var(--_typography---font-weight-bold);
  font-size: var(--_typography---text-btn-lg);
  line-height: var(--_typography---line-height-tight);
  min-width: 100px;
  min-height: 48px;
}

.checkbox {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}

.checkbox--default {
  margin-bottom: 0;
}

.checkbox--with-description {
  align-items: flex-start;
}

.checkbox--compare {
  width: auto;
  gap: 4px;
  padding: 4px 8px 4px 4px;
  border-radius: 100px;
  background: var(--background-primary, #ffffff);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
}

.checkbox--disabled {
  cursor: not-allowed;
}

.checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.checkbox__control {
  position: relative;
  flex-shrink: 0;
  margin-top: 0;
}

.checkbox--with-description .checkbox__control {
  margin-top: 1px;
}

.checkbox__indicator {
  position: relative;
  z-index: 1;
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid var(--primary-600);
  border-radius: var(--radius-md, 4px);
  background: var(--white);
  box-sizing: border-box;
  color: var(--white);
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

.checkbox--compare .checkbox__indicator {
  width: 18px;
  height: 18px;
  border-radius: 100px;
}

.checkbox__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.1);
  transform-origin: center;
  transition:
    opacity 0.15s ease,
    transform 0.25s ease,
    color 0.15s ease;
  pointer-events: none;
}

.checkbox__icon svg {
  display: block;
  width: 12px;
  height: 12px;
}

.checkbox__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.checkbox__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-600);
  font-family: "Public Sans Custom", sans-serif;
  font-size: var(--_typography---text-input-md, 16px);
  font-weight: var(--_typography---font-weight-semibold-heading);
  line-height: 1.25;
}

.checkbox--compare .checkbox__label {
  font-size: var(--_typography---text-input-sm, 14px);
  line-height: 1.25;
}

.checkbox__description {
  color: var(--grey-500);
  font-family: "Public Sans Custom", sans-serif;
  font-size: var(--_typography---text-input-sm, 14px);
  font-weight: var(--_typography---font-weight-medium);
  line-height: var(--_typography---line-height-tight);
}

@media (max-width: 768px) {
  .checkbox__description {
    font-size: var(--_typography---text-input-xs, 12px);
  }
}

.checkbox__swatch {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
}

.checkbox__swatch-shell {
  display: flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--_theme---border);
  border-radius: 1000px;
  box-sizing: border-box;
  background: transparent;
}

.checkbox__swatch-image {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  object-fit: cover;
  box-sizing: border-box;
}

.checkbox--checked .checkbox__indicator,
.checkbox--mixed .checkbox__indicator {
  border-color: var(--primary-600);
  background: var(--primary-600);
}

.checkbox--checked .checkbox__swatch-shell,
.checkbox--mixed .checkbox__swatch-shell {
  border: 2px solid var(--_theme---btn-border-secondary-hover);
}

.checkbox--checked .checkbox__icon--check,
.checkbox--mixed .checkbox__icon--mixed {
  opacity: 1;
  transform: scale(1);
}

.checkbox:not(.checkbox--checked):not(.checkbox--mixed):not(.checkbox--disabled):not(.checkbox--compare):hover .checkbox__indicator {
  border-color: var(--primary-600);
}

.checkbox:not(.checkbox--checked):not(.checkbox--mixed):not(.checkbox--disabled):not(.checkbox--compare):hover .checkbox__icon--check {
  opacity: 0.3;
  color: var(--primary-600);
  transform: scale(1);
}

.checkbox:not(.checkbox--checked):not(.checkbox--mixed):not(.checkbox--disabled):hover .checkbox__swatch-shell {
  border-color: var(--_theme---btn-border-secondary);
}

.checkbox--invalid:not(.checkbox--checked):not(.checkbox--mixed) .checkbox__indicator {
  border-color: var(--error-300);
}

.checkbox__input:focus-visible + .checkbox__control .checkbox__indicator {
  box-shadow: none;
}

.checkbox__input:focus-visible + .checkbox__control::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 0;
  border: 3px solid var(--surface-primary);
  border-radius: calc(var(--radius-md, 4px) + 3px);
  box-shadow: 0 0 0 3px rgba(134, 172, 222, 0.6);
  pointer-events: none;
}

.checkbox--compare .checkbox__input:focus-visible + .checkbox__control::before {
  border-radius: 100px;
}

.checkbox--disabled .checkbox__indicator {
  border-color: var(--neutral-300);
  background: var(--light-grey-100);
}

.checkbox--disabled.checkbox--checked .checkbox__indicator,
.checkbox--disabled.checkbox--mixed .checkbox__indicator {
  border-color: var(--neutral-300);
  background: var(--neutral-300);
}

.checkbox--disabled .checkbox__label,
.checkbox--disabled .checkbox__description {
  color: var(--neutral-400);
}

.custom-slider {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 8px;
}

.custom-slider__track-area {
  position: relative;
  width: 100%;
  height: 16px;
  box-sizing: border-box;
  padding: 0 8px;
  cursor: pointer;
  touch-action: none;
}

.custom-slider--disabled .custom-slider__track-area {
  cursor: not-allowed;
}

.custom-slider__rail {
  position: relative;
  width: 100%;
  height: 100%;
}

.custom-slider__track,
.custom-slider__range {
  position: absolute;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  transform: translateY(-50%);
}

.custom-slider__track {
  left: 0;
  right: 0;
  background: #d7d2cd;
}

.custom-slider__range {
  background: #1b365f;
}

.custom-slider__input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.custom-slider__input:disabled {
  cursor: not-allowed;
}

.custom-slider__thumb {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 16px;
  height: 16px;
  border: 1px solid #1b365f;
  border-radius: 50%;
  background: #ffffff;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.custom-slider__thumb--hover {
  box-shadow: 0 0 0 4px rgba(134, 172, 222, 0.6);
}

.custom-slider__thumb--pressed {
  box-shadow: 0 0 0 7px rgba(134, 172, 222, 0.6);
}

.custom-slider__thumb--disabled {
  border-color: #d7d2cd;
  background: #f7f5f3;
}

.custom-slider__input--lower:focus-visible + .custom-slider__thumb,
.custom-slider__input--upper:focus-visible + .custom-slider__thumb {
  box-shadow: 0 0 0 3px rgba(134, 172, 222, 0.6);
}

.custom-slider--disabled .custom-slider__track,
.custom-slider--disabled .custom-slider__range {
  background: #d7d2cd;
}

.custom-slider__values {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: #1b365f;
  font-family: "Public Sans Custom", sans-serif;
  font-size: var(--_typography---text-input-md, 16px);
  font-weight: 550;
  line-height: 20px;
}

.custom-slider--disabled .custom-slider__values {
  color: #a39f9b;
}

.product-grid__card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--neutral-300);
  border-radius: var(--_spacing---radius-lg);
  background-color: var(--white);
  box-shadow: none;
  transition: box-shadow 0.2s ease;
}

.product-grid__card:hover,
.product-grid__card:focus-within {
  box-shadow: 0 0 18px 0 var(--alpha-dark-200, rgba(0, 0, 0, 0.18));
}

.product-grid__card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  text-decoration: none;
}

.product-grid__card-link:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: -2px;
}

.product-grid__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.product-grid__card-image-section {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  min-height: 0;
  padding: var(--_spacing---spacing-xs);
  overflow: hidden;
  background-color: var(--product-card);
}

.product-grid__compare-button {
  position: absolute;
  top: var(--_spacing---spacing-xs);
  right: var(--_spacing---spacing-xs);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--_spacing---spacing-xxs) 4px 4px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--_spacing---radius-full);
  background-color: var(--white);
  color: var(--primary-600);
  cursor: pointer;
  font-family: var(--_typography---font-body);
  font-size: var(--_typography---text-label);
  font-weight: var(--_typography---font-weight-semibold-heading);
  line-height: var(--_typography---line-height-tight);
}

.product-grid__compare-indicator {
  width: 18px;
  height: 18px;
  border: 1px solid var(--primary-600);
  border-radius: var(--_spacing---radius-full);
  background-color: var(--white);
}

.product-grid__compare-indicator--checked {
  background-color: var(--primary-600);
  box-shadow: inset 0 0 0 3px var(--white);
}

.product-grid__image {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Nested selector + flex: Webflow/global img rules often restore min-width:auto on flex items,
   which uses the bitmap’s intrinsic width and widens the image section past the card. */
.product-grid__card-image-section .product-grid__image {
  flex-shrink: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
}

.product-grid__card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--_spacing---spacing-xs);
  padding: var(--_spacing---card-padding-sm);
}

.product-grid__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--_spacing---spacing-sm);
}

.product-grid__card-title-group {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-grid__series {
  color: var(--primary-600);
  font-family: var(--_typography---font-body);
  font-size: var(--_typography---text-card-eyebrow);
  font-weight: var(--_typography---font-weight-bold);
  line-height: var(--_typography---line-height-heading);
}

.product-grid__name {
  margin: 0;
  color: var(--primary-600);
  font-family: var(--_typography---font-heading);
  font-size: var(--_typography---text-card-product-name);
  font-weight: var(--_typography---font-weight-semibold);
  line-height: var(--_typography---line-height-heading);
}

.product-grid__rating {
  display: flex;
  align-items: center;
  gap: 1px;
  color: var(--primary-600);
  white-space: nowrap;
  font-family: var(--_typography---font-body);
  font-size: var(--_typography---text-paragraph-xs);
  font-weight: var(--_typography---font-weight-medium);
  line-height: var(--_typography---line-height-normal);
}

.product-grid__rating-icon,
.product-grid__price-icon {
  color: currentColor;
}

.product-grid__seating-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_spacing---spacing-xxs);
  color: var(--primary-600);
  font-family: var(--_typography---font-body);
  font-size: var(--_typography---text-paragraph-sm);
  line-height: var(--_typography---line-height-normal);
}

.product-grid__seating-label {
  font-weight: var(--_typography---font-weight-bold);
  line-height: var(--_typography---line-height-normal);
}

.product-grid__seating-value {
  font-weight: var(--_typography---font-weight-medium);
}

.product-grid__seating-divider {
  color: var(--neutral-300);
}

.product-grid__badge-section {
  padding-top: var(--_spacing---spacing-xs);
  border-top: 1px solid var(--neutral-300);
}

.product-grid__badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_spacing---btn-gap-sm);
}

.product-grid__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--_spacing---btn-gap-sm) 8px;
  border-radius: var(--_spacing---radius-full);
  font-family: var(--_typography---font-body);
  font-size: var(--_typography---text-card-badge);
  font-weight: var(--_typography---font-weight-bold);
  line-height: var(--_typography---line-height-tight);
}

.product-grid__badge--default {
  background-color: #eef1f5;
  color: var(--primary-600);
}

.product-grid__badge--sun-cooler {
  background-color: #FBF9E3;
  color: #5F591B;
}

.product-grid__badge--smart-tub-system {
  background-color: #FBEFE3;
  color: #5F3D1B;
}

.product-grid__badge--fluidix-jets {
  background-color: var(--primary-100);
  color: var(--text-primary, #1B365F);
}

.product-grid__badge--energy-efficient {
  background-color: #E3FBE3;
  color: #1B5F1B;
}

.product-grid__badge--low-profile {
  background-color: #EDE7FB;
  color: #321F5F;
}

.product-grid__card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--_spacing---spacing-xs);
  margin-top: auto;
  padding-top: var(--_spacing---spacing-xs);
  border-top: 1px solid var(--neutral-300);
}

.product-grid__price-row {
  display: flex;
  align-items: center;
  gap: var(--_spacing---spacing-xxs);
  color: var(--primary-600);
}

.product-grid__price {
  font-family: var(--_typography---font-body);
  font-size: var(--_typography---text-card-price);
  font-weight: var(--_typography---font-weight-semibold);
  line-height: var(--_typography---line-height-heading);
}

.product-grid__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--_spacing---btn-gap-sm);
  box-sizing: border-box;
  border: 0;
  border-radius: var(--_spacing---radius-full);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: var(--_typography---font-body);
  font-size: var(--_typography---text-paragraph-sm);
  white-space: nowrap;
}

.product-grid__card-action {
  z-index: 2;
}

.product-grid__button--primary-small {
  padding: var(--_spacing---btn-padding-v-sm) var(--_spacing---btn-padding-h-md);
  border: none;
  background-color: var(--primary-600);
  color: var(--white);
  font-weight: var(--_typography---font-weight-bold);
  font-size: var(--_typography---text-btn-sm);
  line-height: var(--_typography---line-height-tight);
  height: 36px;
  min-width: 100px;
  min-height: 36px;
  text-decoration: none;
}

/* ── Loading skeleton ──
   Reuses the card's structural classes; only the inner blocks differ. Block
   heights approximate the real line-heights so a skeleton card ≈ a real card.
   The shimmer base (`.product-grid__skeleton` + keyframes) lives in
   ProductGrid.css, the shared grid stylesheet. */

.product-grid__card--skeleton {
  pointer-events: none;
}

/* Placeholder cards don't react to hover/focus. */
.product-grid__card--skeleton:hover,
.product-grid__card--skeleton:focus-within {
  box-shadow: none;
}

.product-grid__skeleton-image {
  width: 100%;
  height: 100%;
  border-radius: var(--_spacing---radius-md);
}

/* Heights = font-size × line-height (not bare font-size) so each block reserves
   the same line-box as the real text — keeps total card height ≈ a real card. */
.product-grid__skeleton-line {
  display: block;
  height: 1em;
}

.product-grid__skeleton-line--eyebrow {
  width: 40%;
  height: calc(
    var(--_typography---text-card-eyebrow) *
      var(--_typography---line-height-heading)
  );
}

.product-grid__skeleton-line--title {
  width: 70%;
  height: calc(
    var(--_typography---text-card-product-name) *
      var(--_typography---line-height-heading)
  );
}

.product-grid__skeleton-line--seating {
  width: 85%;
  height: calc(
    var(--_typography---text-paragraph-sm) *
      var(--_typography---line-height-normal)
  );
}

.product-grid__skeleton-line--price {
  width: 30%;
  height: calc(
    var(--_typography---text-card-price) *
      var(--_typography---line-height-heading)
  );
}

/* Match the real badge box: font-size + vertical padding (2 × btn-gap-sm). */
.product-grid__skeleton-badge {
  display: inline-block;
  width: 84px;
  height: calc(
    var(--_typography---text-card-badge) + (2 * var(--_spacing---btn-gap-sm))
  );
  border-radius: var(--_spacing---radius-full);
}

.product-grid__skeleton-button {
  display: inline-block;
  width: 100px;
  height: 36px;
  border-radius: var(--_spacing---radius-full);
}