/* Featured product: gallery + buy box for a variable WooCommerce product. */
.cp-spotlight {
  padding-block: var(--cp-space-2xl);
  background: var(--cp-ink);
  color: var(--cp-sheet);
}

.cp-spotlight__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.cp-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Capped so the stacked gallery does not become a full-bleed photo on a tablet. */
  max-width: 36rem;
  gap: var(--cp-space-sm);
  align-items: start;
}

.cp-gallery__main {
  grid-column: 1;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--cp-ink-soft);
}

.cp-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 240ms var(--cp-ease);
}

.cp-gallery__main img[data-loading='true'] {
  opacity: 0.35;
}

/* Stacked under the photo at 390px; a left-hand filmstrip from 601px up. */
.cp-gallery__thumbs {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--cp-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-gallery__thumbs button {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  background: var(--cp-ink-soft);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--cp-duration) var(--cp-ease), border-color var(--cp-duration) var(--cp-ease);
}

.cp-gallery__thumbs button:hover,
.cp-gallery__thumbs button[aria-pressed='true'] {
  opacity: 1;
}

.cp-gallery__thumbs button[aria-pressed='true'] {
  border-color: var(--cp-amber);
}

.cp-gallery__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp-buy {
  display: grid;
  gap: var(--cp-space-md);
  justify-items: start;
}

.cp-buy__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.cp-buy__title {
  font-size: var(--cp-display-md);
}

.cp-buy__price {
  margin-top: calc(var(--cp-space-xs) * -1);
  font-size: var(--cp-text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cp-buy__lead {
  max-width: 32rem;
  color: var(--cp-sheet-body);
}

.cp-variants {
  display: grid;
  gap: var(--cp-space-xs);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.cp-variants legend {
  margin-bottom: var(--cp-space-xs);
  padding: 0;
  color: var(--cp-sheet-body);
  font-size: var(--cp-text-sm);
  font-weight: 600;
}

.cp-variant {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--cp-space-sm);
  padding: var(--cp-space-sm);
  border: 1px solid var(--cp-line-dark);
  cursor: pointer;
  transition: border-color var(--cp-duration) var(--cp-ease), background-color var(--cp-duration) var(--cp-ease);
}

.cp-variant:hover {
  border-color: var(--cp-sheet-edge);
}

.cp-variant:has(input:checked) {
  border-color: var(--cp-amber);
  background: color-mix(in srgb, var(--cp-amber) 8%, transparent);
}

.cp-variant:has(input:focus-visible) {
  outline: 3px solid var(--cp-amber);
  outline-offset: 2px;
}

.cp-variant input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: 2px solid color-mix(in srgb, var(--cp-sheet) 50%, transparent);
  border-radius: var(--cp-radius-circle);
  appearance: none;
  cursor: pointer;
}

.cp-variant input:checked {
  border-color: var(--cp-amber);
  background: var(--cp-amber);
  box-shadow: inset 0 0 0 3px var(--cp-ink);
}

.cp-variant input:focus-visible {
  outline: none;
}

.cp-variant__body {
  display: grid;
  gap: 0.125rem;
}

.cp-variant__name {
  font-weight: 600;
}

.cp-variant__text {
  color: color-mix(in srgb, var(--cp-sheet) 64%, transparent);
  font-size: var(--cp-text-sm);
}

/* Wraps under the label at 390px, sits in the third column from 601px up. */
.cp-variant__price {
  grid-column: 2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cp-buy__actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--cp-space-xs);
  width: 100%;
}

.cp-stepper {
  display: flex;
  border: 1px solid var(--cp-line-dark);
}

.cp-stepper button,
.cp-stepper input {
  width: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--cp-sheet);
  font: 600 var(--cp-text-lg) / 1 var(--cp-font-body);
  text-align: center;
}

.cp-stepper button {
  cursor: pointer;
}

.cp-stepper button:hover {
  background: color-mix(in srgb, var(--cp-sheet) 8%, transparent);
}

.cp-stepper input {
  width: 2.25rem;
  font-size: var(--cp-text-md);
  appearance: textfield;
}

.cp-stepper input::-webkit-inner-spin-button,
.cp-stepper input::-webkit-outer-spin-button {
  appearance: none;
}

.cp-buy__submit {
  width: 100%;
}

.cp-buy__submit:hover {
  background: var(--cp-sheet);
  box-shadow: 4px 4px 0 var(--cp-amber);
}

.cp-buy__submit[data-added='true'] {
  background: var(--cp-sheet);
}

.cp-buy__facts {
  display: grid;
  gap: var(--cp-space-xs);
  margin: 0;
  padding: 0;
  color: var(--cp-sheet-body);
  font-size: var(--cp-text-sm);
  list-style: none;
}

.cp-buy__facts li {
  display: flex;
  align-items: center;
  gap: var(--cp-space-xs);
}

.cp-buy__facts li::before {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--cp-amber);
}

/* ------------------------------------------------------------------ *
 * Wider screens. 601px and 1081px are the exact complements of the
 * 600px / 1080px max-width queries these replace.
 * ------------------------------------------------------------------ */
@media (min-width: 601px) {
  .cp-gallery {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }

  .cp-gallery__main {
    grid-column: 2;
  }

  .cp-gallery__thumbs {
    grid-row: 1;
    /* `none` is the initial value: the filmstrip goes back to one thumb per row. */
    grid-template-columns: none;
  }

  .cp-variant {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .cp-variant__price {
    grid-column: auto;
  }
}

@media (min-width: 1081px) {
  .cp-spotlight__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .cp-gallery {
    max-width: none;
  }
}