.page-product {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #ffffff;
  color: #000000;
}

/* ===================== LAYOUT ===================== */

/* Asymmetric side padding: the extra weight on the right keeps the info
   column off the viewport edge without pushing the gallery inwards. */
.pdp {
  box-sizing: border-box;
  width: 100%;
  max-width: 1700px;
  margin: 0 auto;
  padding: 40px 48px 100px 32px;
}

/* Image column takes 60%, info column 40%. Written as fr rather than
   percentages so the 40px gap comes out of the tracks instead of overflowing. */
.pdp__top {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  gap: 40px;
  align-items: start;
}

/* Breathing room on the inside edge so text stops well short of the
   container padding rather than running up against it. */
.pdp__info {
  padding-right: 32px;
}

/* The lower sections stay in a readable measure instead of stretching the
   full 1700px alongside the wide product block. */
.reviews {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* ===================== GALLERY ===================== */

/* Thumbnail rail on the left, large main image on the right. */
.pdp__gallery {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  position: sticky;
  top: 100px;
}

/* Tall hero so the image column always outruns the info column. contain +
   white plate means nothing is cropped or stretched at any width. */
.pdp__mainimage {
  position: relative;
  width: 100%;
  height: 800px;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
}

.pdp__mainimage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: opacity 180ms ease;
}

.pdp__new-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  background: #ffffff;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.pdp__thumbs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Matches the hero height, so a long gallery scrolls inside the rail
     rather than pushing the layout taller. */
  max-height: 800px;
  overflow-y: auto;
  scrollbar-width: none;
}

.pdp__thumbs::-webkit-scrollbar { display: none; }

.pdp__thumb {
  width: 90px;
  height: 90px;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 2px solid transparent;
  background: #f2f2f2;
  background-size: cover;
  background-position: center top;
  padding: 0;
  cursor: pointer;
  transition: border-color 200ms ease, transform 200ms ease;
}

.pdp__thumb:hover {
  transform: translateY(-2px);
}

.pdp__thumb.is-active {
  border-color: #000;
}

/* ===================== INFO ===================== */

.pdp__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 600;
  margin-bottom: 18px;
}

.pdp__dot {
  color: rgba(0, 0, 0, 0.3);
}

.pdp__title {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

.pdp__rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 16px;
}

.pdp__rating-value {
  font-size: 14px;
  font-weight: 800;
  color: #000;
}

.pdp__rating-count {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 600;
}

.pdp__rating-empty {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 600;
}

.pdp__price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pdp__price {
  font-size: 22px;
  font-weight: 800;
}

.pdp__price-compare {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.4);
  text-decoration: line-through;
}

.pdp__discount-badge {
  display: inline-block;
  background: #eafaf0;
  color: #1a9850;
  font-size: 13px;
  font-weight: 800;
  padding: 3px 11px;
  border-radius: 999px;
}

.pdp__savings {
  display: inline-block;
  background: #eafaf0;
  color: #1a9850;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 10px;
  margin: 0 0 22px;
}

.pdp__desc {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.62);
  margin: 0 0 28px;
  max-width: 460px;
}

.pdp__field {
  margin-bottom: 24px;
}

.pdp__field-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

/* size pills */

.size-row {
  display: flex;
  gap: 10px;
}

.size-pill {
  min-width: 56px;
  padding: 10px 0;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.size-pill:hover {
  border-color: rgba(0, 0, 0, 0.4);
}

.size-pill.is-active {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* quantity stepper */

.qty-row {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  padding: 4px;
}

.qty-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease;
}

.qty-btn:hover {
  background: #f2f2f2;
}

.qty-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: transparent;
}

.qty-btn.is-maxed {
  opacity: 0.45;
}

.qty-value {
  width: 40px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}

.qty-message {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #d9720a;
  margin-top: 8px;
  min-height: 16px;
}

/* stock display */

.stock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1a9850;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 24px;
}

.stock-row.is-low {
  color: #d9720a;
}

/* order button */

.btn-order {
  display: block;
  width: 100%;
  background: #000;
  color: #fff;
  border: none;
  padding: 17px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 200ms ease, transform 200ms ease;
  margin-bottom: 32px;
}

.btn-order:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.btn-order:disabled {
  background: #ccc;
  color: #888;
  cursor: not-allowed;
  transform: none;
}

.btn-order:disabled:hover {
  opacity: 1;
  transform: none;
}

/* ---------- the two product actions ----------
   Side by side and equally weighted, with Buy Now carrying the solid
   fill so the primary path stays obvious without making Add to Cart
   look secondary enough to miss. */

.pdp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}

.pdp-actions .btn-order {
  margin-bottom: 0;
}

.btn-order--ghost {
  background: #fff;
  color: #000;
  border: 1.5px solid #000;
}

.btn-order--ghost:hover {
  background: #f4f2ef;
}

.btn-order--ghost:disabled {
  background: #f4f4f4;
  border-color: #ddd;
}

/* Reserves its line whether or not there is a message, so confirming an
   add never nudges the page. */
.pdp-actions__note {
  min-height: 20px;
  margin: 0 0 24px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1a7f4b;
}

@media (max-width: 480px) {
  .pdp-actions { grid-template-columns: 1fr; }
}

/* ===================== CUSTOMER REVIEWS ===================== */

.reviews {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.reviews__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.reviews__title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  margin: 0 0 10px;
}

.reviews__summary {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- shared star-rating component (compact title row + reviews summary) ---------- */

.star-rating {
  position: relative;
  display: inline-block;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 2px;
  white-space: nowrap;
}

.star-rating--sm {
  font-size: 15px;
  letter-spacing: 1.5px;
}

.star-rating--xs {
  font-size: 12px;
  letter-spacing: 1px;
}

.star-rating__track {
  color: rgba(0, 0, 0, 0.15);
}

.star-rating__fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: #d9a441;
  white-space: nowrap;
}

.reviews__summary-text {
  font-size: 13.5px;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 600;
}

.reviews__write-btn {
  width: auto;
  margin-bottom: 0;
  padding: 14px 26px;
  flex-shrink: 0;
}

/* ---------- review form ---------- */

.review-form {
  background: #f9f9f9;
  border-radius: 18px;
  padding: 28px;
  margin-bottom: 36px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 300ms ease, opacity 250ms ease, padding 300ms ease, margin 300ms ease;
}

.review-form[hidden] {
  display: block;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.review-form.is-open {
  max-height: 900px;
  opacity: 1;
}

.review-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.review-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.review-form__row .review-form__field { margin-bottom: 0; }

.review-form__field label {
  font-size: 13px;
  font-weight: 700;
}

.review-form__field input,
.review-form__field textarea {
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 12px 15px;
  font-size: 14px;
  font-family: inherit;
  color: #000;
  background: #fff;
  resize: vertical;
  transition: border-color 200ms ease;
}

.review-form__field input:focus,
.review-form__field textarea:focus {
  outline: none;
  border-color: #000;
}

.review-form__count {
  align-self: flex-end;
  font-size: 11.5px;
  color: rgba(0, 0, 0, 0.4);
}

.review-form__field input[type="file"] {
  padding: 10px 12px;
  font-size: 13px;
}

.review-form__photo-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.review-form__photo-preview:empty {
  display: none;
}

.review-form__photo-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.review-form__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.review-form__submit {
  width: auto;
  margin-bottom: 0;
  padding: 14px 28px;
}

.review-form__submit.is-loading {
  color: transparent;
  pointer-events: none;
  position: relative;
}

.review-form__submit.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: review-spin 700ms linear infinite;
}

@keyframes review-spin {
  to { transform: rotate(360deg); }
}

.review-form__cancel {
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.55);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.review-form__cancel:hover {
  color: #000;
}

.review-form__success {
  display: block;
  background: #eafaf0;
  color: #1a9850;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 4px;
}

/* ---------- star picker ---------- */

.review-stars {
  display: flex;
  gap: 6px;
}

.review-stars__btn {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  padding: 0;
  transition: color 150ms ease, transform 150ms ease;
}

.review-stars__btn:hover {
  transform: scale(1.1);
}

.review-stars__btn.is-selected,
.review-stars__btn.is-hover {
  color: #d9a441;
}

/* ---------- review cards ---------- */

.review-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 22px 24px;
}

.review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.review-card__name {
  font-size: 14.5px;
  font-weight: 800;
}

.review-card__date {
  font-size: 12.5px;
  color: rgba(0, 0, 0, 0.45);
}

.review-card__stars {
  color: #d9a441;
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.review-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.65);
  margin: 0;
}

.review-card__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.review-card__photo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: opacity 150ms ease;
}

.review-card__photo:hover {
  opacity: 0.85;
}

.review-list__empty {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
  padding: 12px 0;
}

@media (max-width: 640px) {
  .reviews { margin-top: 48px; padding-top: 36px; }
  .review-form { padding: 20px; }
  .review-form__row { grid-template-columns: 1fr; gap: 16px; }
  .reviews__write-btn { width: 100%; }
  .review-form__actions { flex-direction: column; align-items: stretch; }
  .review-form__submit { width: 100%; }
  .review-form__cancel { text-align: center; padding: 10px 0; }
}

/* ===================== PDP CONTENT BLOCKS ===================== */

.pdp__tax-note {
  font-size: 12.5px;
  color: rgba(0, 0, 0, 0.45);
  margin: -14px 0 22px;
}

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

.pdp__field-head .pdp__field-label {
  margin-bottom: 0;
}

.size-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 180ms ease;
}

.size-guide-btn:hover { color: #000; }

/* ---------- styles ---------- */

.style-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Selectable, mirroring the size pills — the chosen style travels with the
   cart line through to checkout. Keeps its existing resting appearance. */
.style-pill {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  background: #f5f5f5;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  color: #000;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.style-pill:hover {
  border-color: rgba(0, 0, 0, 0.35);
}

.style-pill.is-active {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* ---------- feature cards ---------- */

/* Sits between the size selector and the quantity stepper. auto-fit keeps
   four cards on one row in the info column and wraps cleanly if the admin
   adds more or the column narrows. */

/* The tinted panel widens past the info column by --feature-bleed and pads
   itself back by the same amount. Because those cancel, the content box is
   exactly as wide as before, so the grid resolves to the same number of
   columns and every icon and label stays on the line it was already on —
   only the background extends. Kept below the container's own side padding
   at every breakpoint so it can never push the page sideways. */
.pdp {
  --feature-bleed: 20px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 20px 10px;
  margin: 0 calc(-1 * var(--feature-bleed)) 26px;
  padding: 22px var(--feature-bleed);
  background: #d3d3d3;
  border-radius: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #f5f5f5;
  color: #000;
}

.feature-card__title {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}

.feature-card__desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.5);
}

/* ---------- key highlights ---------- */

.pdp-panel {
  margin-top: 28px;
}

.pdp-panel__title {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 16px;
}

.highlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}

.highlight {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.highlight__label {
  font-size: 12.5px;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 600;
}

.highlight__value {
  font-size: 14.5px;
  font-weight: 700;
}

/* ---------- accordions ---------- */

.pdp-accordion {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 4px;
}

.pdp-accordion:last-of-type {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.pdp-accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}

.pdp-accordion__head::-webkit-details-marker { display: none; }

.pdp-accordion__title {
  display: block;
  font-size: 15px;
  font-weight: 800;
}

.pdp-accordion__sub {
  display: block;
  font-size: 12.5px;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 3px;
}

.pdp-accordion__chevron {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(0, 0, 0, 0.45);
  border-bottom: 2px solid rgba(0, 0, 0, 0.45);
  transform: rotate(45deg);
  transition: transform 220ms ease;
}

.pdp-accordion[open] .pdp-accordion__chevron {
  transform: rotate(-135deg);
}

.pdp-accordion__body {
  padding: 0 0 24px;
}

.pdp-prose {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.65);
  margin: 0 0 14px;
}

.pdp-prose__heading {
  font-size: 13.5px;
  font-weight: 800;
  margin: 18px 0 8px;
}

.pdp-prose__list {
  margin: 0 0 14px;
  padding-left: 20px;
}

.pdp-prose__list li {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.65);
  margin-bottom: 4px;
}

/* ---------- rating breakdown ---------- */

.rating-breakdown {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 340px;
  margin: 0 0 32px;
}

.rating-breakdown__row {
  display: grid;
  grid-template-columns: 34px 1fr 28px;
  align-items: center;
  gap: 10px;
}

.rating-breakdown__label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
}

.rating-breakdown__bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.rating-breakdown__fill {
  display: block;
  height: 100%;
  background: #d9a441;
}

.rating-breakdown__count {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  text-align: right;
}

/* ===================== SIZE GUIDE MODAL ===================== */

.size-guide {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.size-guide[hidden] { display: none; }

.size-guide__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  animation: sg-fade 200ms ease;
}

.size-guide__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
  animation: sg-rise 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes sg-fade { from { opacity: 0; } }
@keyframes sg-rise {
  from { opacity: 0; transform: translateY(14px); }
}

.size-guide__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.size-guide__title {
  font-size: 21px;
  font-weight: 800;
  margin: 0;
}

.size-guide__close {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: #f2f2f2;
  color: #000;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease;
}

.size-guide__close:hover { background: #e4e4e4; }

.size-guide__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 26px;
}

/* Fit callout — a soft tinted panel like the reference, in GALVEN's
   neutral palette rather than the reference's blue. */
.size-guide__fit {
  background: linear-gradient(90deg, #f4f4f4 0%, rgba(244, 244, 244, 0) 100%);
  border-left: 3px solid #000;
  border-radius: 4px 10px 10px 4px;
  padding: 14px 22px 14px 16px;
}

.size-guide__fit--plain {
  background: none;
  border-left: none;
  padding: 0;
}

.size-guide__fit strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.size-guide__fit span {
  display: block;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 3px;
}

.size-guide__units {
  display: inline-flex;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  overflow: hidden;
}

.size-guide__unit {
  border: none;
  background: #fff;
  padding: 9px 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.size-guide__unit.is-active {
  background: #000;
  color: #fff;
}

.size-guide__scroll {
  flex: 1;
  overflow: auto;
  padding: 0 26px 26px;
}

.size-guide__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.size-guide__table th {
  position: sticky;
  top: 0;
  background: #f5f5f5;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.6);
  padding: 12px 8px;
  white-space: nowrap;
}

.size-guide__table th:first-child { border-radius: 10px 0 0 10px; }
.size-guide__table th:last-child { border-radius: 0 10px 10px 0; }

.size-guide__table td {
  text-align: center;
  font-size: 13.5px;
  padding: 14px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Rows are reference data, not choices — no pointer, no hover, no
   selected state. Sizes are picked with the pills on the page itself. */
.size-guide__row { cursor: default; }

.size-guide__size {
  font-weight: 800;
}

/* ===================== RESPONSIVE ===================== */

/* Laptop — keep the 60/40 split, ease the hero down so it still fits above
   the fold on shorter screens. Side padding stays asymmetric, just tighter. */
@media (max-width: 1440px) {
  .pdp { padding-left: 24px; padding-right: 40px; }
  .pdp__info { padding-right: 28px; }
  .pdp__mainimage { height: 700px; }
  .pdp__thumbs { max-height: 700px; }
}

@media (max-width: 1200px) {
  .pdp { padding-left: 20px; padding-right: 32px; }
  .pdp__info { padding-right: 22px; }
  .pdp__top { gap: 32px; }
  .pdp__mainimage { height: 620px; }
  .pdp__thumbs { max-height: 620px; }
  .pdp__gallery { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; }
  .pdp__thumb { width: 80px; height: 80px; }
}

/* Tablet */
@media (max-width: 1024px) {
  /* Container side padding tightens from here down, so the panel's bleed
     tightens with it and always stays inside the page gutter. */
  .pdp { --feature-bleed: 12px; }
  .pdp__info { padding-right: 14px; }
  .pdp__top { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: 26px; }
  .pdp__mainimage { height: 540px; }
  .pdp__thumbs { max-height: 540px; }
  .pdp__gallery { grid-template-columns: 72px minmax(0, 1fr); }
  .pdp__thumb { width: 72px; height: 72px; }
}

@media (max-width: 800px) {
  .pdp { padding: 28px 20px 72px; }
  /* One column — the info block spans the full width, so the inside-edge
     inset would just knock it out of alignment with the image. */
  .pdp__info { padding-right: 0; }
  .pdp__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  /* Below the two-column break the gallery stops being sticky and the
     thumbnail rail lies flat under the main image. */
  .pdp__gallery {
    position: static;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pdp__thumbs {
    flex-direction: row;
    order: 2;
    max-height: none;
    overflow-x: auto;
  }
  .pdp__mainimage { order: 1; height: min(72vh, 560px); }
  .highlight-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .size-guide { padding: 0; }
  .size-guide__panel { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; }
  .size-guide__head,
  .size-guide__meta { padding-left: 18px; padding-right: 18px; }
  .size-guide__scroll { padding: 0 18px 18px; }
}

@media (max-width: 480px) {
  .pdp { padding-left: 16px; padding-right: 16px; }
  .pdp__mainimage { height: min(64vh, 440px); border-radius: 16px; }
  .pdp__thumb { width: 64px; height: 64px; }
}