/* Purpose: Single product (PDP) page styles — Figma 243:66. Gallery, summary (badges, price, swatches, chips,
   qty, CTAs, accordions), Full Specifications tabs + grid + dimension diagram, You May Also Like.
   BEM, mobile-first, design tokens. JS hooks (.js-*) are never styled. */

.pdp { background: var(--color-bg); }

/* ---------------- Breadcrumb ---------------- */
.pdp__crumbs-wrap { padding-top: var(--space-5); }
.pdp__crumbs {
  font-family: var(--font-body); font-size: 12px; color: var(--color-text-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.pdp__crumbs a { color: var(--color-text-muted); }
.pdp__crumbs a:hover { color: var(--color-gold); }
.pdp__crumbs .pdp__crumb-sep { color: #b9b6ad; }
.pdp__crumbs > :last-child,
.pdp__crumbs .breadcrumb_last { color: var(--color-gold-light); font-weight: var(--weight-medium); }

/* ---------------- Main: gallery + summary ---------------- */
.pdp__main {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding-top: var(--space-8); padding-bottom: var(--space-12);
}

/* ----- Gallery ----- */
.pdp__gallery { display: flex; gap: var(--space-3); flex-direction: column-reverse; }
/* Mobile: prev/next arrows slide a single horizontal strip (no visible scrollbar). */
.pdp__thumbs-col { display: flex; align-items: center; gap: var(--space-2); }
.pdp__thumbs {
  display: flex; gap: var(--space-2); flex-wrap: nowrap; flex: 1 1 auto;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth; scrollbar-width: none;
}
.pdp__thumbs::-webkit-scrollbar { display: none; }
.pdp__thumb-nav {
  flex: 0 0 auto; width: 34px; height: 64px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border); background: #fff; color: var(--color-primary); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.pdp__thumb-nav:hover { background: var(--color-primary); color: #fff; }
.pdp__thumb-nav[hidden] { display: none; }
/* Mobile: rotate the up/down chevrons to point left/right. */
.pdp__thumb-nav svg { transform: rotate(-90deg); }
.pdp__thumb {
  width: 64px; height: 64px; padding: 0; border: 1px solid var(--color-border);
  background: var(--color-bg-alt); cursor: pointer; overflow: hidden; flex: 0 0 auto;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp__thumb.is-active { border: 2px solid var(--color-primary); }
.pdp__thumb:hover { border-color: var(--color-gold); }

.pdp__stage { position: relative; background: var(--color-bg-alt); overflow: hidden; }
/* Main image shown at its natural aspect ratio (no crop). Stage height follows the image. */
.pdp__stage .pdp__main-img { width: 100%; height: auto; display: block; }

.pdp__badges { position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column; gap: var(--space-2); }
.pdp__badge {
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: 12px; line-height: 20px;
  text-transform: uppercase; padding: 4px 12px; white-space: nowrap;
}
.pdp__badge--stock { background: var(--color-primary); color: var(--color-gold-light); }
.pdp__badge--off   { background: var(--color-red); color: #fff; }

.pdp__share-wrap { position: absolute; top: 16px; right: 16px; z-index: 3; }
.pdp__share {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: #fff; border: 1px solid rgba(11, 30, 56, 0.1); color: var(--color-primary);
  cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.pdp__share:hover,
.pdp__share-wrap.is-open .pdp__share { background: var(--color-primary); color: #fff; }

/* Share popover — Facebook / X / LinkedIn / Pinterest / WhatsApp */
.pdp__share-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid rgba(11, 30, 56, 0.1); padding: 6px;
  box-shadow: var(--shadow-md); z-index: 4;
}
.pdp__share-menu[hidden] { display: none; }
.pdp__share-link {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--color-primary); text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.pdp__share-link svg { width: 18px; height: 18px; }
.pdp__share-link:hover { background: var(--color-primary); color: #fff; }

/* ----- Summary ----- */
.pdp__summary { display: flex; flex-direction: column; gap: var(--space-4); max-width: 524px; }

.pdp__sku {
  font-family: var(--font-body); font-weight: var(--weight-medium); font-size: 16px; line-height: 24px;
  color: #7a7870; text-transform: uppercase; margin: 0;
}
.pdp__eyebrow {
  font-family: var(--font-body); font-weight: var(--weight-regular); font-size: 16px; line-height: 24px;
  color: var(--color-gold); text-transform: uppercase; margin: 0;
}
.pdp__title {
  font-family: var(--font-display); font-weight: var(--weight-light); font-size: 36px; line-height: 44px;
  color: var(--color-primary); margin: 0; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "pnum" 1;
}
.pdp__rating { display: flex; align-items: center; gap: var(--space-2); }
.pdp__stars { color: var(--color-gold); font-size: 13px; letter-spacing: 1px; line-height: 1; }
.pdp__rating-text { font-family: var(--font-body); font-size: 12px; color: #7a7870; line-height: 19px; }

/* Price */
.pdp__price { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
.pdp__price-now {
  font-family: var(--font-display); font-weight: var(--weight-light); font-size: 36px; line-height: 44px;
  color: var(--color-red); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "pnum" 1;
}
.pdp__price-now .amount { color: inherit; }
.pdp__price-was {
  font-family: var(--font-display); font-weight: var(--weight-light); font-size: 24px; line-height: 32px;
  color: #7a7870; text-decoration: line-through; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "pnum" 1;
}
.pdp__save {
  background: var(--color-red); color: #fff; font-family: var(--font-body); font-weight: var(--weight-semibold);
  font-size: 12px; line-height: 20px; text-transform: uppercase; padding: 4px 8px; white-space: nowrap;
}
/* When not on sale, WC renders a single .amount inside .pdp__price-now via wc_price. Keep navy if no sale. */
.pdp__price:not(:has(.pdp__price-was)) .pdp__price-now { color: var(--color-primary); }

/* Financing note (shared helper) sits here; component CSS already styles .finance-note. */
.pdp .finance-note { margin: 0; }

/* Short description (product-authored, e.g. numbered list) */
.pdp__desc { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: 16px; line-height: 24px; color: #7a7870; }
.pdp__desc p { margin: 0; }
.pdp__desc ol, .pdp__desc ul { margin: 0; padding-left: 1.2em; }

/* Options: colour swatches + size chips */
.pdp__opts { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.pdp__opt { display: flex; flex-direction: column; gap: var(--space-3); }
.pdp__opt-label {
  font-family: var(--font-body); font-weight: var(--weight-medium); font-size: 14px; line-height: 17.6px;
  color: var(--color-text); text-transform: uppercase; letter-spacing: 0.5px;
}
.pdp__opt-label strong { font-weight: var(--weight-medium); }
.pdp__select { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pdp__swatches { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pdp__swatch {
  width: 34px; height: 34px; border-radius: 50%; background: var(--swatch, #ccc);
  border: 1px solid #ddd; cursor: pointer; padding: 0; flex: 0 0 auto;
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.pdp__swatch.is-active { border: 2px solid var(--color-gold); box-shadow: 0 0 0 2px #fff inset; }

.pdp__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pdp__chip {
  border: 1px solid #e7e8eb; background: #fff; cursor: pointer; padding: 4px 8px;
  font-family: var(--font-body); font-size: 12px; line-height: 20px; color: var(--color-text);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.pdp__chip:hover { border-color: var(--color-primary); }
.pdp__chip.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Actions: qty + add to cart + wishlist */
.pdp__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
/* Mobile: quantity on its own line at its natural width; Add to Cart + wishlist share the next line.
   Grid lets qty span the row (own line) while justify-self keeps the box compact. */
@media (max-width: 599px) {
  .pdp__actions { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .pdp__qty { grid-column: 1 / -1; justify-self: start; }
  .pdp__add { grid-column: 1; }
  .pdp__wish { grid-column: 2; }
}
.pdp__qty { display: inline-flex; align-items: stretch; height: 50px; border: 1px solid rgba(11, 30, 56, 0.1); }
.pdp__qty button {
  width: 36px; background: #fafaf6; border: none; cursor: pointer; color: var(--color-text);
  font-size: 18px; line-height: 1; display: grid; place-items: center;
}
.pdp__qty button:hover { background: #f0efe8; }
.pdp__qty .qty {
  width: 44px; height: 100%; text-align: center; border: none; border-left: 1px solid rgba(11, 30, 56, 0.1);
  border-right: 1px solid rgba(11, 30, 56, 0.1); background: #fff;
  font-family: var(--font-body); font-weight: var(--weight-medium); font-size: 16px; color: var(--color-text);
  -moz-appearance: textfield; appearance: textfield;
}
.pdp__qty .qty::-webkit-outer-spin-button,
.pdp__qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* hide WC's default qty label */
.pdp__actions .quantity > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.pdp__add {
  flex: 1 1 auto; min-width: 200px; height: 50px; background: var(--color-primary); color: #fff; border: none;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: 16px; line-height: 24px;
  text-transform: uppercase; transition: background var(--duration-fast) var(--ease-out);
}
.pdp__add:hover { background: var(--color-gold); color: var(--color-primary); }
.pdp__add .icon { width: 18px; height: 18px; }
.pdp__add[disabled], .pdp__add.disabled, .pdp__add.wc-variation-selection-needed { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.pdp__add[disabled]:hover, .pdp__add.disabled:hover { background: var(--color-primary); color: #fff; }

.pdp__wish {
  width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center;
  background: #fff; border: 1px solid rgba(11, 30, 56, 0.1); color: var(--color-primary); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.pdp__wish:hover, .pdp__wish.woosw-added { background: var(--color-primary); color: #fff; }
.pdp__wish .icon { width: 18px; height: 18px; }
/* The woosw plugin injects its own heart via a pseudo-element on top of our SVG — suppress it (double heart). */
.pdp__wish .woosw-btn-icon::before, .pdp__wish .woosw-btn-icon::after { content: none !important; display: none !important; }

.pdp__buynow {
  width: 100%; height: 50px; background: #fff; border: 1px solid var(--color-primary); color: var(--color-primary);
  cursor: pointer; font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: 16px;
  line-height: 24px; text-transform: uppercase; margin-top: var(--space-4);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.pdp__buynow:hover { background: var(--color-primary); color: #fff; }

/* WC variation runtime bits we don't want shown raw */
.pdp__form .single_variation_wrap > .single_variation { display: none; }
.pdp__form .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled .pdp__add { opacity: 0.45; cursor: not-allowed; }

/* Additional information (visible attributes, label → value) */
.pdp__addinfo { border-top: 1px solid #e7e8eb; border-bottom: 1px solid #e7e8eb; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
/* .pdp__addinfo prefix outranks the global h2[class] mobile rule (28px) that was enlarging this heading. */
.pdp__addinfo .pdp__addinfo-title {
  font-family: var(--font-body); font-weight: var(--weight-medium); font-size: 16px; line-height: 24px;
  color: var(--color-text); text-transform: uppercase; margin: 0;
}
.pdp__addinfo-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.pdp__addinfo-label, .pdp__addinfo-value {
  font-family: var(--font-body); font-weight: var(--weight-medium); font-size: 16px; line-height: 22px; color: #7a7870;
}
.pdp__addinfo-value { text-align: right; }

/* ---------------- You May Also Like ---------------- */
.pdp__related { padding: var(--space-10) 0 var(--space-16); }
.pdp__related-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.pdp__related-title {
  font-family: var(--font-display); font-weight: var(--weight-light); font-size: 40px; line-height: 1.1;
  color: var(--color-primary); margin: 0;
}
.pdp__related-title span { color: var(--color-gold); font-style: italic; }
.pdp__related-all {
  display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-primary);
  padding: 12px 16px; font-family: var(--font-body); font-weight: var(--weight-medium); font-size: 14px;
  color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.02em;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.pdp__related-all:hover { background: var(--color-primary); color: #fff; }
.pdp__related-all .icon { width: 14px; height: 14px; }
/* Related products render as a drag/swipe carousel (.pcarousel__track, shared with home + category
   Recently Viewed) — layout/sizing come from components.css; no grid here. */

/* ================= Breakpoints ================= */
@media (min-width: 768px) {
  .pdp__spec-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .pdp__main { flex-direction: row; gap: var(--space-12); align-items: flex-start; padding-top: var(--space-12); }
  .pdp__gallery { flex-direction: column-reverse; gap: var(--space-4); flex: 0 0 600px; width: 600px; min-width: 0; max-width: 600px; align-items: stretch; position: sticky; top: var(--space-6); }
  /* Desktop: horizontal thumb strip below the full-width main image; arrows step left/right. */
  .pdp__thumbs-col { flex-direction: row; align-items: center; width: 100%; }
  .pdp__thumbs { flex-direction: row; flex-wrap: nowrap; width: auto; max-height: none; overflow-x: auto; overflow-y: hidden; }
  .pdp__thumb { width: 88px; height: 88px; }
  .pdp__thumb-nav { width: 36px; height: 88px; }   /* svg keeps base rotate(-90deg) → chevrons point left/right */
  .pdp__stage { width: 100%; }
  .pdp__summary { flex: 1 1 auto; max-width: 524px; }
  .pdp__spec-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   YITH Product Add-Ons — restyled to theme typography/colours
   (markup: .wapo-addon-title / select.yith-wapo-option-value / tr.wapo-total-order)
   ============================================================ */
/* Top gap matches the 16px spacing used between the variation attributes (Color ↔ Size). */
.pdp .yith-wapo-addon { margin: var(--space-4) 0 var(--space-5); border: 0; }

.pdp .wapo-addon-title {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 17.6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
}

.pdp select.yith-wapo-option-value {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-primary);
  /* Custom chevron so we can inset it from the right edge (native arrow can't be positioned). */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230b1e38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 12px 44px 12px 16px;
  width: 100%;
  max-width: 460px;
  height: auto;
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out);
}
.pdp select.yith-wapo-option-value:hover { border-color: var(--color-primary); }
/* No focus outline on click — subtle border colour change instead. */
.pdp select.yith-wapo-option-value:focus,
.pdp select.yith-wapo-option-value:focus-visible { outline: none; border-color: var(--color-primary); }

/* Order total — highlighted bar so the customer notices it (YITH renders it as a table). */
.pdp table.only_final,
.pdp table.wapo-total {
  width: 100%;
  max-width: 460px;
  border-collapse: collapse;
  margin: 0 0 var(--space-5);
  background: var(--color-gold-12);
  border: 1px solid var(--color-gold-30);
}
.pdp .wapo-total-order th,
.pdp .wapo-total-order td { border: 0; padding: 12px 16px; vertical-align: middle; }
.pdp .wapo-total-order th {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-align: left;
  white-space: nowrap;
}
.pdp .wapo-total-order td { text-align: right; }
/* Match the product price's numerals exactly: Cormorant, light, lining figures. */
.pdp #wapo-total-order-price,
.pdp #wapo-total-order-price .amount {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: 26px;
  line-height: 1;
  color: var(--color-primary);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "pnum" 1;
}

/* ============================================================
   PDP — Customer Reviews (list + write-a-review form)
   Mobile first; two columns from 1024px. Rating input is a
   reversed radio group, so `~` fills the stars to its left.
   ============================================================ */
.pdp-reviews__head { margin-bottom: 28px; }
.pdp-reviews__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
}
.pdp-reviews__stars {
  color: var(--color-gold);
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1;
}
.pdp-reviews__summary-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
}

.pdp-reviews__body { display: grid; gap: 40px; }
.pdp-reviews__body--single { grid-template-columns: 1fr; }

/* ---- list ---- */
.pdp-reviews__list { list-style: none; margin: 0; padding: 0; }
.pdp-reviews__item { margin: 0 0 20px; }
.pdp-reviews__item:last-child { margin-bottom: 0; }
.pdp-reviews__card {
  background: var(--color-cream-soft, #fafaf6);
  border: 1px solid var(--color-border);
  padding: 20px;
}
.pdp-reviews__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.pdp-reviews__author { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pdp-reviews__name {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  color: var(--color-primary);
}
.pdp-reviews__verified {
  font-family: var(--font-eyebrow, var(--font-body));
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-success);
}
.pdp-reviews__date { font-family: var(--font-body); font-size: 13px; color: var(--color-text-muted); }
.pdp-reviews__item-rating { margin: 8px 0 0; }
.pdp-reviews__text { margin-top: 10px; }
.pdp-reviews__text p { font-family: var(--font-body); font-size: 15px; line-height: var(--leading-normal); color: var(--color-text); margin: 0 0 8px; }
.pdp-reviews__text p:last-child { margin-bottom: 0; }
.pdp-reviews__pending { margin: 10px 0 0; font-size: 13px; color: var(--color-warning); }
.pdp-reviews__empty { font-family: var(--font-body); font-size: 15px; color: var(--color-text-muted); margin: 0; }
.pdp-reviews__pagination ul { list-style: none; display: flex; gap: 8px; padding: 0; margin: 20px 0 0; }

/* ---- form ---- */
.pdp-reviews__form-title {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: 26px;
  color: var(--color-primary);
  margin: 0 0 6px;
}
.pdp-reviews__notes { font-family: var(--font-body); font-size: 13px; color: var(--color-text-muted); margin: 0 0 18px; }
.pdp-reviews__row { margin: 0 0 16px; }
.pdp-reviews__label {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.pdp-reviews__input,
.pdp-reviews__textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  background: #fafaf6;
  border: 1px solid #dcdad0;
  border-radius: 0;
  padding: 14px 16px;
  line-height: 1.5;
  box-shadow: none;
  transition: border-color var(--duration-base) var(--ease-out);
}
.pdp-reviews__input:focus,
.pdp-reviews__textarea:focus { border-color: var(--color-gold); outline: none; }
.pdp-reviews__textarea { resize: vertical; min-height: 140px; }

.pdp-reviews__rating-field { border: 0; padding: 0; margin: 0 0 16px; }
.pdp-reviews__rating-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.pdp-reviews__rating-input {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.pdp-reviews__rating-star {
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: #d8d4c6;
  transition: color var(--duration-fast) var(--ease-out);
}
.pdp-reviews__rating-star:hover,
.pdp-reviews__rating-star:hover ~ .pdp-reviews__rating-star,
.pdp-reviews__rating-input:checked ~ .pdp-reviews__rating-star { color: var(--color-gold); }
.pdp-reviews__rating-input:focus-visible + .pdp-reviews__rating-star { outline: 2px solid var(--color-gold); outline-offset: 3px; }

.pdp-reviews__submit { margin-top: 4px; }

@media (min-width: 1024px) {
  .pdp-reviews__body { grid-template-columns: 1.15fr 1fr; gap: 56px; }
}

/* Reviews — overrides that must beat WooCommerce's own form/button styling. */
/* WooCommerce ships `.woocommerce #respond input#submit` (an ID selector), so the theme button has to
   match on specificity — hence #respond + #submit rather than the plain .btn--gold class. */
.pdp-reviews #respond input#submit.pdp-reviews__submit {
  background: var(--color-gold);
  color: var(--color-primary);
  border: 0;
  border-radius: 0;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  text-transform: uppercase;
  line-height: 1.4;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}
.pdp-reviews #respond input#submit.pdp-reviews__submit:hover { background: var(--color-gold-light); }

/* Cookie-consent row WordPress injects into comment_form(). */
.pdp-reviews .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
}
.pdp-reviews .comment-form-cookies-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--color-gold);
}
.pdp-reviews .comment-form-cookies-consent label {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin: 0;
}

@media (min-width: 1024px) {
}

/* ============================================================
   PDP — Description / Reviews tabs
   A tab is only rendered when it has content, so the bar can
   legitimately hold a single tab.
   ============================================================ */
.pdp__tabs {
  padding: 48px 0;
  border-top: 1px solid var(--color-border);
}
.pdp__tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 32px;
}
.pdp__tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.pdp__tab:hover { color: var(--color-primary); }
.pdp__tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-gold);
}
.pdp__tab:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

.pdp__panel.is-hidden { display: none; }
.pdp__panel-desc p,
.pdp__panel-desc li {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: var(--leading-normal);
  color: var(--color-text);
}
.pdp__panel-desc > *:first-child { margin-top: 0; }
.pdp__panel-desc > *:last-child { margin-bottom: 0; }
/* Product descriptions were imported with raw tables — keep them from breaking the page width. */
.pdp__panel-desc table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.pdp__panel-desc th,
.pdp__panel-desc td { border: 1px solid var(--color-border); padding: 8px 12px; text-align: left; }
.pdp__panel-desc img { max-width: 100%; height: auto; }

@media (min-width: 1024px) {
  .pdp__tabs { padding: 72px 0; }
  .pdp__tab { padding: 14px 24px; font-size: 14px; }
}

/* Variation description — WooCommerce injects this after a variation is picked, with no spacing of its own,
   so it collided with the chips above and the Add-to-Cart row below. Match the short-description type. */
.pdp .woocommerce-variation-description {
  margin: 14px 0 18px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: #7a7870;
}
.pdp .woocommerce-variation-description p { margin: 0; }
.pdp .woocommerce-variation-description p + p { margin-top: 8px; }
.pdp .woocommerce-variation-price { margin: 0 0 14px; }
.pdp .woocommerce-variation-availability { margin: 0 0 14px; }