.c-breadcrumb {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: var(--space-5) var(--gutter) 0;
  color: var(--color-text-muted);
  font-size: var(--text-micro);
  font-weight: 500;
}

.c-breadcrumb a { color: var(--color-text-muted) !important; }
.c-breadcrumb__current { color: var(--color-ink); font-weight: 700; }

.c-product {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: var(--space-6) var(--gutter) clamp(var(--space-16), 8vw, var(--space-20));
  align-items: start;
}

@media (min-width: 64rem) {
  .c-product { grid-template-columns: 1.05fr 1fr; }
}

/* Sticky only in the two-column layout. Stacked (one column, below
   64rem) the gallery sits in its own grid row above the purchase panel,
   and Chrome lets a sticky grid item travel the height of the whole grid
   rather than just its row — so on a phone the photo and its thumbnails
   slid down over the variant options and Add to Cart button, covering
   them by up to ~1000px. There is nothing beside it to stay level with
   when it's stacked, so sticky simply doesn't apply there. */
@media (min-width: 64rem) {
  .c-product__gallery {
    position: sticky;
    top: calc(var(--header-height) + 1.5rem);
  }
}

/* Photo is set per-instance via an inline background-image style (see
   product-main.php) rather than a wp:image — this is a JS-swapped
   gallery (main image mirrors the active thumb), so a plain CSS
   background that always covers the box is simpler than keeping an
   <img>'s src, width/height and object-fit in sync on every click. */
.c-product__main-image {
  aspect-ratio: 1;
  background: linear-gradient(150deg, var(--color-tan-300), var(--color-tan-500)) center / cover no-repeat;
  margin-bottom: var(--space-4);
}

.c-product__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.c-product__thumb {
  border: 2px solid var(--color-border-opt, var(--color-border-input));
  background-color: var(--color-white);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: 4 / 5;
  cursor: pointer;
  padding: 0;
}

.c-product__thumb.is-active { border-color: var(--color-accent); }

.c-product__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-h2);
  line-height: 1.03;
}

.c-product__rating {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.c-product__stars { color: var(--color-accent-text); letter-spacing: .125rem; }
.c-product__rating a { color: var(--color-text-tertiary) !important; font-weight: 600; font-size: var(--text-small); }

.c-product__desc {
  max-width: 32rem;
  margin-bottom: var(--space-8);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.65;
}

.c-product__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.c-product__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.125rem;
}

.c-product__was-price {
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-size: 1.125rem;
}

.c-product__save-badge {
  background: var(--color-badge-bg);
  color: var(--color-accent-text) !important;
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
}

.c-product__group-label {
  margin-bottom: var(--space-3);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.c-product__sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.c-product__size {
  text-align: center;
  padding: var(--space-4) var(--space-2);
  background: var(--color-white);
  border: 2px solid var(--color-border-opt, var(--color-border-input));
  cursor: pointer;
  font-family: var(--font-body);
}

.c-product__size.is-active { background: var(--color-badge-bg); border-color: var(--color-accent); }
.c-product__size-label { font-weight: 800; font-size: var(--text-small); }
.c-product__size-sub { margin-top: .125rem; font-size: var(--text-micro); opacity: .8; }

.c-product__plans {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.c-product__plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border: 2px solid var(--color-border-opt, var(--color-border-input));
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
}

.c-product__plan.is-active { background: var(--color-badge-bg); border-color: var(--color-accent); }

.c-product__plan-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.c-product__plan-dot {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border-social);
}

.c-product__plan.is-active .c-product__plan-dot {
  border-color: var(--color-accent);
  background: radial-gradient(circle, var(--color-accent) 0 42%, transparent 46%);
}

.c-product__plan-label { font-weight: 700; font-size: var(--text-small); }
.c-product__plan-tag { font-weight: 800; font-size: var(--text-micro); color: var(--color-accent-text); }

/* flex-wrap — the Add to Cart button carries the price in its label
   ("Add to Cart — $19.20"), and its inline flex:1 can't shrink below that
   min-content plus 2.1rem of padding either side. Next to the quantity
   stepper that overran a 320px viewport, so the button drops to its own
   line when there isn't room beside the stepper. */
.c-product__qty-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}

.c-product__qty-row .c-button {
  min-width: min(100%, 12rem);
}

.c-qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border-input);
  background: var(--color-white);
}

.c-qty-stepper button {
  width: 2.875rem;
  height: 3.375rem;
  border: 0;
  background: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--color-text-tertiary);
}

.c-qty-stepper__value {
  width: 2.5rem;
  text-align: center;
  font-weight: 800;
  font-size: var(--text-body);
}

.c-product__buy-now {
  display: block;
  text-align: center;
  margin-bottom: var(--space-8);
}

.c-product__trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-block: 1px solid var(--color-border-muted);
  margin-bottom: var(--space-8);
}

.c-product__trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  color: var(--color-text-tertiary);
}

.c-product__trust-item svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.c-product__trust-item span { font-size: var(--text-micro); font-weight: 700; line-height: 1.3; }

.c-product__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.c-product__point {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
}

.c-product__point-check {
  display: inline-grid;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  margin-top: .0625rem;
  border-radius: var(--radius-pill);
  background: var(--color-badge-bg);
  color: var(--color-accent-text);
}

.c-product__point-check svg { width: .875rem; height: .875rem; stroke: currentColor; stroke-width: 3; fill: none; }

.c-reviews {
  display: grid;
  gap: clamp(var(--space-7, 1.75rem), 3vw, var(--space-10));
}

.c-reviews__header {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-width: var(--container-text-sm);
  margin-inline: auto;
  text-align: center;
}

.c-reviews__header > *,
.c-reviews-rating > * {
  margin-block: 0 !important;
}

.c-reviews__header h2 {
  font-size: var(--text-h2);
  line-height: 1.02;
}

.c-reviews-rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: .65rem var(--space-4);
  border: 1px solid var(--color-border-header);
  background: var(--color-surface-raised);
}

.c-reviews-rating__stars {
  color: var(--color-accent-text);
  font-size: var(--text-small);
  letter-spacing: .12rem;
  line-height: 1;
}

.c-reviews-rating__text {
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.3;
}

.c-review-grid {
  display: grid;
  align-items: stretch;
  gap: var(--grid-gap);
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.c-review-grid > * {
  height: 100%;
  margin-block: 0 !important;
}

@media (min-width: 56rem) {
  .c-review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.c-review-card {
  display: flex;
  flex-direction: column;
  min-height: 16rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-header);
  border-top: 3px solid var(--color-accent);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  box-shadow: var(--shadow-sm);
}

.c-review-card__stars {
  margin-bottom: var(--space-4);
  color: var(--color-accent-text);
  font-size: var(--text-small);
  letter-spacing: .125rem;
  line-height: 1;
}

.c-review-card__title {
  margin-bottom: var(--space-3);
  font-size: clamp(1.25rem, .4vw + 1.1rem, 1.4375rem);
  line-height: 1.15;
}

.c-review-card__quote {
  flex: 1;
  max-width: none;
  margin-bottom: var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.65;
}

.c-review-card__name {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-muted);
  font-weight: 800;
  font-size: var(--text-small);
  color: var(--color-ink);
}

.c-review-card__name::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  vertical-align: .08em;
}