/**
 * Standard product carousel (Best Sellers) — values from /specs/standard-product-carousel.spec.md
 * standard product carousel DOM.
 */

.standard-product-carousel-section {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: rgb(0, 0, 0);
}

/* Theme: relative my-10 opacity-0 — scroll fade handled in JS */
.standard-product-carousel {
  position: relative;
  margin-block: calc(var(--spacing) * 10);
  opacity: 0;
}

/* Header: mb-6 flex items-center justify-between */
.standard-product-carousel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(var(--spacing) * 6);
}

/* Tab row: scrollbar-hidden gap-5 px-5 md:gap-10 */
.standard-product-carousel__tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--spacing) * 5);
  padding-inline: calc(var(--spacing) * 5);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.standard-product-carousel__tabs::-webkit-scrollbar {
  display: none;
}

@media (min-width: 48rem) {
  .standard-product-carousel__tabs {
    gap: calc(var(--spacing) * 10);
  }
}

/* Mono tab — font-mono border-b-2 pattern from spec */
.standard-product-carousel__tab {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(0, 0, 0);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.3s cubic-bezier(0.37, 0, 0.63, 1);
}

.standard-product-carousel__tab.is-active {
  border-bottom-color: rgb(0, 0, 0);
}

@media (min-width: 48rem) {
  .standard-product-carousel__tab {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (hover: hover) {
  .standard-product-carousel__tab:hover {
    border-bottom-color: rgb(0, 0, 0);
  }
}

/* Nav: mr-10 hidden gap-2.5 md:flex */
.standard-product-carousel__nav {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--spacing) * 2.5);
  margin-right: calc(var(--spacing) * 10);
}

@media (min-width: 48rem) {
  .standard-product-carousel--has-nav .standard-product-carousel__nav {
    display: flex;
  }
}

.standard-product-carousel__nav[hidden] {
  display: none !important;
}

/* Circular nav — btn btn-icon-black size-10 */
.standard-product-carousel__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
  padding: 0;
  border: 1px solid var(--color-black);
  border-radius: 9999px;
  background: transparent;
  color: rgb(33, 33, 33);
  cursor: pointer;
  transition:
    background-color 0.2s var(--ease-sine-in-out),
    color 0.2s var(--ease-sine-in-out),
    border-color 0.2s var(--ease-sine-in-out),
    opacity 0.2s var(--ease-sine-out);
}

.standard-product-carousel__nav-icon {
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
}

@media (hover: hover) {
  .standard-product-carousel__nav-btn:hover {
    background-color: var(--color-black);
    color: var(--color-white);
  }
}

.standard-product-carousel__nav-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* Stage: relative z-0 select-none */
.standard-product-carousel__stage {
  position: relative;
  z-index: 0;
  user-select: none;
}

.standard-product-carousel__track {
  position: relative;
  overflow: hidden;
}

.standard-product-carousel__list {
  display: flex;
}

.standard-product-carousel__slide {
  height: auto;
}

/* Product card — group relative flex h-full flex-col rounded-2xl bg-white */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-2xl);
  background-color: var(--color-white);
  transition: all 0.3s var(--ease-in-out);
}

@media (max-width: 39.99rem) {
  .product-card--search:not(.product-card--collection) {
    min-height: calc(var(--spacing) * 86);
  }
}

/* Badge row — above media so COMING SOON / NEW stay visible */
.product-card__badge-row {
  position: absolute;
  top: calc(var(--spacing) * 2.5);
  right: calc(var(--spacing) * 2.5);
  left: calc(var(--spacing) * 2.5);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

@media (min-width: 48rem) {
  .product-card__badge-row {
    top: calc(var(--spacing) * 5);
    right: calc(var(--spacing) * 5);
    left: calc(var(--spacing) * 5);
  }
}

.product-card__badge {
  padding: calc(var(--spacing) * 2);
  border-radius: 9999px;
  background-color: var(--color-natural-white);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgb(0, 0, 0);
}

.product-card__badge--soft-red {
  background-color: #f8d4d6;
  color: #c2182b;
}

.product-card__badge--soft-chocolate {
  background-color: #e8d4c6;
  color: #5c2e1f;
}

.product-card__badge--soft-spearmint {
  background-color: #d4efe6;
  color: #2f7a5c;
}

/* Title-row chip — Variety Pack BEST VALUE (filled, not an image overlay) */
.product-card__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  min-width: 0;
}

.product-card__title-row .product-card__title {
  margin: 0;
  min-width: 0;
}

.product-card__badge--title-pill {
  flex-shrink: 0;
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  border: 0;
  border-radius: 9999px;
  background-color: var(--color-black);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-natural-white);
}

/* Image — relative z-10 aspect-square */
.product-card__media {
  position: relative;
  z-index: 10;
  aspect-ratio: 1 / 1;
}

.product-card__image-link {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
  color: inherit;
  text-decoration: none;
}

.product-card__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.product-card__image--blank {
  background-color: #ffffff;
  object-fit: unset;
}

/* Quick-add overlay — hidden (no hover reveal) */
.product-card__quick-add {
  display: none;
}

/* Body — mt-auto flex flex-col gap-2.5 p-2.5 sm:p-4 */
.product-card__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2.5);
  margin-top: auto;
  padding: calc(var(--spacing) * 2.5);
}

@media (min-width: 40rem) {
  .product-card__body {
    padding: calc(var(--spacing) * 4);
  }
}

.product-card__info-link {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Title — font-sans text-xs uppercase md:text-sm */
.product-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 16px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgb(0, 0, 0);
}

@media (min-width: 48rem) {
  .product-card__title {
    font-size: var(--text-sm);
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Color — min-h-[1.5em] text-xs md:text-sm */
.product-card__color {
  min-height: 1.5em;
  font-size: var(--text-xs);
  line-height: 20px;
  letter-spacing: var(--tracking-wider);
  color: rgb(0, 0, 0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .product-card__color {
    font-size: var(--text-sm);
  }
}

/* Price — inline below color on < xl; footer price on xl+ */
.product-card__price {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 16px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgb(0, 0, 0);
}

.product-card__price--inline {
  display: flex;
}

.product-card__price--footer {
  display: none;
  font-size: var(--text-sm);
  line-height: 20px;
}

@media (min-width: 80rem) {
  .product-card__price--inline {
    display: none;
  }

  .product-card__price--footer {
    display: flex;
  }
}

/* Footer — swatch left, price right on xl */
.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 39.99rem) {
  .product-card__footer {
    margin-bottom: calc(var(--spacing) * 1);
  }
}

/* Static carousel swatches (Best Sellers) */
.product-card__swatches {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 1);
  min-width: 0;
}

/* Swatch controls — gap-2 between swatch list and overflow link */
.product-card__swatch-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--spacing) * 2);
}

.product-card__swatch-list {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
}

.product-card__swatch-more {
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: 500;
  color: inherit;
  text-decoration: underline;
  white-space: nowrap;
}

/* Mobile Add to Cart — h-10, rounded-b-2xl, md:hidden (search grid only) */
.product-card__atc {
  display: flex;
  width: 100%;
  height: calc(var(--spacing) * 10);
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 1);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4) calc(var(--spacing) * 2)
    calc(var(--spacing) * 3);
  border: 0;
  border-top: 1px solid var(--color-natural-white-60);
  border-bottom-right-radius: var(--radius-2xl);
  border-bottom-left-radius: var(--radius-2xl);
  background-color: rgb(255 255 255 / 95%);
  backdrop-filter: blur(2px);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 16px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(0, 0, 0);
  cursor: pointer;
  transition: background-color 0.15s var(--ease-in-out);
}

.product-card__atc-icon {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
  flex-shrink: 0;
}

@media (min-width: 48rem) {
  .product-card__atc {
    display: none;
  }
}

/* Swatch — size-5 lg:size-6 inset-ring-light-charcoal; white border + black ring when active */
.product-card__swatch {
  display: block;
  flex-shrink: 0;
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
  padding: 0;
  border: 0;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px var(--color-light-charcoal);
  cursor: pointer;
  transition: all 0.2s var(--ease-in-out);
}

.product-card__swatch.is-active {
  border: 3px solid var(--color-white);
  box-shadow:
    inset 0 0 0 1px var(--color-light-charcoal),
    0 0 0 1px var(--color-black);
}

@media (min-width: 64rem) {
  .product-card__swatch {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .product-card__swatch.is-active {
    border-width: 2px;
  }
}