/* Renéra · Product detail page (PDP) — bespoke WooCommerce single-product styles.
   --------------------------------------------------------------------------
   Ported from the Claude Design "Product page" project (product-styles.css).
   Extends the global brand language (design-system.css + chrome.css). Loaded
   only on is_product() by reneranutrition_enqueue_product_page() with chrome.css
   as a dependency. Uses var(--renera-*) tokens exclusively — never hard-coded hex. */

/* =========================================
   Breadcrumb
   ========================================= */
.rn-crumbs {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--renera-font-mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renera-mute);
  padding: 22px 0 0;
}
.rn-crumbs a { color: var(--renera-mute); text-decoration: none; }
.rn-crumbs a:hover { color: var(--renera-olive-700); }
.rn-crumbs .sep { opacity: 0.45; }
.rn-crumbs .cur { color: var(--renera-olive-700); }

/* =========================================
   PDP grid
   ========================================= */
.rn-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 80px;
  padding: 56px 0 96px;
  align-items: start;
}

/* ───── Gallery ───── */
.rn-gallery {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 20px;
  position: sticky; top: calc(var(--rn-announce-h, 48px) + 100px);
  align-self: start;
}
/* Single real product image — no thumbnail rail, main image spans the column. */
.rn-gallery--single { grid-template-columns: 1fr; }
.rn-gallery__thumbs {
  display: flex; flex-direction: column; gap: 12px;
}
.rn-gallery__thumb {
  position: relative; cursor: pointer;
  width: 88px; height: 88px;
  border-radius: var(--renera-r-md);
  background: var(--renera-paper);
  border: 1px solid var(--renera-clay-300);
  overflow: hidden;
  transition: border-color var(--renera-dur-fast) var(--renera-ease);
  padding: 0;
}
/* Product pack-shot thumbs show the FULL product (contain); editorial photos
   (lifestyle/ingredient) fill the tile (cover) — matches the design. */
.rn-gallery__thumb img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  padding: 8%;
}
.rn-gallery__thumb img.is-cover { object-fit: cover; padding: 0; }
.rn-gallery__thumb.is-on {
  border-color: var(--renera-olive-700);
  box-shadow: 0 0 0 2px var(--renera-sand-300), 0 0 0 3px var(--renera-olive-700);
}
.rn-gallery__main {
  position: relative;
  border-radius: var(--renera-r-xl);
  overflow: hidden;
  background: var(--renera-clay-100);
  border: 1px solid var(--renera-clay-300);
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
}
/* Product pack-shot is shown in full (contain) with a padded inset; editorial
   photos fill the frame (cover) — the design's per-image treatment. */
.rn-gallery__main img {
  width: 100%; height: 100%; object-fit: contain; padding: 8% 12%;
}
.rn-gallery__main img.is-cover { object-fit: cover; padding: 0; }
.rn-gallery__badge {
  position: absolute; top: 22px; left: 22px;
  background: var(--renera-paper);
  border: 1px solid var(--renera-clay-300);
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renera-olive-700);
  padding: 8px 14px; border-radius: var(--renera-r-pill);
  display: inline-flex; align-items: center; gap: 8px;
}
.rn-gallery__badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--renera-olive-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--renera-olive-500) 18%, transparent);
}
.rn-gallery__nav {
  position: absolute; bottom: 22px; right: 22px;
  display: flex; gap: 10px;
}
.rn-gallery__nav button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--renera-clay-300);
  background: color-mix(in srgb, var(--renera-sand-300) 92%, transparent);
  backdrop-filter: blur(6px);
  color: var(--renera-olive-700);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--renera-dur-fast) var(--renera-ease),
              color var(--renera-dur-fast) var(--renera-ease);
}
.rn-gallery__nav button:hover {
  background: var(--renera-olive-700);
  color: var(--renera-sand-200);
}
.rn-gallery__corner {
  position: absolute; top: 18px; right: 18px;
  width: 92px; height: 92px; opacity: 0.32;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* ───── Buy box ───── */
.rn-buy { display: flex; flex-direction: column; gap: 28px; padding-top: 4px; }
.rn-buy__title {
  font-family: var(--renera-font-serif);
  font-weight: 400; letter-spacing: -0.015em;
  font-size: 56px; line-height: 1.04; color: var(--renera-ink);
  margin: 0; text-wrap: balance;
}
.rn-buy__title em { color: var(--renera-olive-700); font-style: italic; }
/* Product name as the headline — the full WooCommerce title is long, so it uses
   the same Recoleta serif as the tagline but at a size that reads as a name, not
   a banner. */
.rn-buy__title--name {
  font-size: 44px; line-height: 1.08; letter-spacing: -0.015em;
}
/* "with Marine Collagen Peptides & …, 12 Packets" — the descriptor tail of the
   WooCommerce title, shown small beneath the name as a subtitle. */
.rn-buy__name-sub {
  font-family: var(--renera-font-sans);
  font-size: 14px; line-height: 1.5;
  color: var(--renera-mute);
  margin: -14px 0 0;
}
/* "When science meets nature." — scene-setting tagline above the name, not the
   product name itself. Atmospheric italic serif in brand olive. */
.rn-buy__tagline {
  font-family: var(--renera-font-serif);
  font-style: italic; font-weight: 400;
  font-size: 21px; line-height: 1.25;
  color: var(--renera-olive-500);
  margin: 0;
}
.rn-buy__tagline em { color: var(--renera-olive-700); font-style: italic; }
.rn-buy__sub {
  font-family: var(--renera-font-serif); font-style: italic; font-weight: 400;
  font-size: 19px; line-height: 1.45; color: var(--renera-olive-700);
  margin: 0; text-wrap: pretty;
}
.rn-stars {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--renera-font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--renera-mute);
}
.rn-stars__icons { display: inline-flex; gap: 2px; color: var(--renera-olive-500); }
.rn-stars__num   { color: var(--renera-ink); font-weight: 500; }

.rn-divider {
  height: 1px; background: var(--renera-clay-300);
  border: 0; margin: 0;
}

/* ───── Qty + Add to cart row ───── */
.rn-buy-row {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  align-items: stretch;
  margin: 0;
}
.rn-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--renera-olive-700);
  border-radius: var(--renera-r-sm);
  background: transparent;
  height: 56px;
  overflow: hidden;
}
.rn-qty button {
  width: 44px; height: 100%; background: transparent;
  border: 0; cursor: pointer;
  color: var(--renera-olive-700);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--renera-dur-fast) var(--renera-ease);
}
.rn-qty button:hover { background: var(--renera-sand-200); }
.rn-qty input {
  width: 36px; height: 100%;
  border: 0; outline: none; background: transparent;
  text-align: center;
  font-family: var(--renera-font-mono); font-size: 14px;
  color: var(--renera-olive-700);
  -moz-appearance: textfield;
}
.rn-qty input::-webkit-inner-spin-button,
.rn-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.rn-buy-row .rn-btn { width: 100%; height: 56px; }

/* ───── Inline shipping note ───── */
.rn-ship-note {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--renera-font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--renera-mute);
}
.rn-ship-note .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--renera-olive-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--renera-olive-500) 16%, transparent);
}

/* ───── Bullet benefits list ───── */
.rn-bullets {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.rn-bullets li {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--renera-font-sans);
  font-size: 14px; line-height: 1.55; color: var(--renera-ink);
}
.rn-bullets svg {
  flex: 0 0 18px; margin-top: 2px;
  color: var(--renera-olive-500);
}

/* ───── Trust strip (3 badges below buy) ───── */
.rn-trust-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--renera-clay-300);
}
.rn-trust-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.rn-trust-tile__icon {
  width: 40px; height: 40px; border-radius: 22%;
  background: var(--renera-sand-200);
  border: 1px solid var(--renera-clay-300);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--renera-olive-700);
}
.rn-trust-tile__label {
  font-family: var(--renera-font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--renera-ink); line-height: 1.4;
}

/* =========================================
   Trust badges row (3 cards)
   ========================================= */
.rn-badges {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding: 64px 0;
  border-top: 1px solid var(--renera-clay-300);
  border-bottom: 1px solid var(--renera-clay-300);
}
.rn-badges__item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 16px;
  padding: 0 16px;
}
.rn-badges__icon {
  width: 64px; height: 64px; border-radius: 22%;
  background: var(--renera-paper);
  border: 1px solid var(--renera-clay-300);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--renera-olive-700);
}
.rn-badges__title {
  font-family: var(--renera-font-serif);
  font-size: 19px; line-height: 1.25;
  color: var(--renera-ink);
  margin: 0;
  text-wrap: balance;
}

/* =========================================
   Comparison table
   ========================================= */
.rn-compare {
  background: var(--renera-paper);
  border: 1px solid var(--renera-clay-300);
  border-radius: var(--renera-r-lg);
  overflow: hidden;
}
.rn-compare table {
  width: 100%; border-collapse: collapse;
  font-family: var(--renera-font-sans); font-size: 14px;
  color: var(--renera-ink);
}
.rn-compare thead th {
  text-align: left;
  padding: 24px 28px;
  background: var(--renera-sand-300);
  border-bottom: 1px solid var(--renera-clay-300);
}
.rn-compare thead th .colhead-eyebrow {
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renera-mute);
  display: block; margin-bottom: 8px;
}
.rn-compare thead th .colhead-title {
  font-family: var(--renera-font-serif);
  font-size: 22px; font-weight: 400; letter-spacing: -0.01em;
  color: var(--renera-ink);
  display: flex; align-items: center; gap: 10px;
}
.rn-compare thead th.is-feature {
  background: var(--renera-olive-700); color: var(--renera-sand-200);
}
.rn-compare thead th.is-feature .colhead-eyebrow { color: color-mix(in srgb, var(--renera-sand-300) 65%, transparent); }
.rn-compare thead th.is-feature .colhead-title { color: var(--renera-sand-200); }

.rn-compare tbody td {
  padding: 18px 28px; border-bottom: 1px solid var(--renera-clay-300);
  vertical-align: middle;
}
.rn-compare tbody tr:last-child td { border-bottom: 0; }
.rn-compare tbody td.feature-name {
  font-family: var(--renera-font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--renera-mute);
  width: 30%;
}
.rn-compare tbody td.is-feature {
  background: color-mix(in srgb, var(--renera-olive-700) 4%, transparent);
  font-weight: 500;
  color: var(--renera-olive-700);
}
.rn-compare tbody td.other { color: var(--renera-mute); }
.rn-compare .compare-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500;
}
.rn-compare .compare-check svg { color: var(--renera-olive-500); }
.rn-compare .compare-x svg { color: var(--renera-clay-500); }

/* =========================================
   Sticky buy bar (appears after scrolling past hero)
   ========================================= */
.rn-stickybuy {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: color-mix(in srgb, var(--renera-sand-300) 95%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--renera-clay-300);
  z-index: 45;
  transform: translateY(100%);
  transition: transform var(--renera-dur-base) var(--renera-ease);
}
.rn-stickybuy.is-on { transform: translateY(0); }
.rn-stickybuy__row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 28px; align-items: center;
  padding: 14px 0;
}
.rn-stickybuy__thumb {
  width: 56px; height: 56px; border-radius: var(--renera-r-md);
  border: 1px solid var(--renera-clay-300);
  background: var(--renera-paper);
  flex: 0 0 auto; overflow: hidden;
}
/* Product image rule: sticky thumb shows the full product, not cropped. */
.rn-stickybuy__thumb img {
  width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block;
}
.rn-stickybuy__title {
  font-family: var(--renera-font-serif); font-size: 18px;
  letter-spacing: -0.01em; color: var(--renera-ink);
  margin: 0; line-height: 1.2;
}
.rn-stickybuy__sub {
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renera-mute); margin-top: 4px;
}
.rn-stickybuy__price {
  font-family: var(--renera-font-serif);
  font-size: 22px; letter-spacing: -0.01em;
  color: var(--renera-ink);
}
.rn-stickybuy__price small {
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--renera-mute);
  display: block; margin-top: 4px;
  text-decoration: line-through;
}
.rn-stickybuy .cart { margin: 0; }
.rn-stickybuy .rn-qty { display: none; }

/* =========================================
   Spec strip — 3 stats above ritual
   ========================================= */
.rn-spec-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--renera-clay-300);
  border-radius: var(--renera-r-lg);
  background: var(--renera-paper);
  overflow: hidden;
}
.rn-spec-strip__cell {
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 8px;
  border-right: 1px solid var(--renera-clay-300);
}
.rn-spec-strip__cell:last-child { border-right: 0; }
.rn-spec-strip__num {
  font-family: var(--renera-font-serif); font-weight: 400;
  font-size: 52px; line-height: 1; letter-spacing: -0.02em;
  color: var(--renera-olive-700);
}
.rn-spec-strip__num em {
  font-style: italic; font-size: 28px; color: var(--renera-olive-500);
  margin-left: 4px;
}
.rn-spec-strip__label {
  font-family: var(--renera-font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--renera-mute);
}
.rn-spec-strip__note {
  font-family: var(--renera-font-sans);
  font-size: 13px; line-height: 1.55;
  color: var(--renera-ink);
  margin-top: 6px;
}

/* =========================================
   Price block (buy box)
   ========================================= */
.rn-price {
  display: flex; align-items: baseline; gap: 16px;
}
.rn-price__now {
  font-family: var(--renera-font-serif); font-weight: 400;
  font-size: 44px; line-height: 1; letter-spacing: -0.02em;
  color: var(--renera-ink);
}
.rn-price__was {
  font-family: var(--renera-font-mono);
  font-size: 15px; letter-spacing: 0.04em;
  text-decoration: line-through;
  color: var(--renera-mute);
}
.rn-price__badge {
  font-family: var(--renera-font-mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--renera-olive-700); color: var(--renera-sand-200);
  padding: 5px 11px; border-radius: var(--renera-r-pill);
  align-self: center;
}
.rn-stock {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--renera-font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--renera-olive-700);
  margin-top: -10px;
}
.rn-stock.is-out { color: var(--renera-mute); }
.rn-stock .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--renera-olive-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--renera-olive-500) 18%, transparent);
}
.rn-amazon-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: -12px;
  font-family: var(--renera-font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--renera-mute); text-decoration: none;
  align-self: flex-start;
  transition: color var(--renera-dur-fast) var(--renera-ease);
}
.rn-amazon-link:hover { color: var(--renera-olive-700); }
.rn-amazon-link svg { opacity: 0.7; }

/* =========================================
   Product story — editorial olive split
   ========================================= */
/* Unify the "When science meets nature" eyebrow: the leading hairline defaults
   to a dimmer shade (0.4) than the text (0.7). Match them so the whole eyebrow
   reads as one color. Scoped to this section so other invert eyebrows (incl. the
   footer on this same page) keep their default two-tone treatment. */
.rn-section--olive .rn-eyebrow--invert::before {
  background: color-mix(in srgb, var(--renera-sand-300) 70%, transparent);
}
.rn-story-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 96px; align-items: center; padding: 128px 0;
}
.rn-story-media {
  position: relative;
}
/* Content image rule: shown in full (contain), never cover-cropped. */
.rn-story-media img.rn-story-photo {
  width: 100%; height: 540px; object-fit: contain;
  background: var(--renera-olive-900, var(--renera-olive-700));
  border-radius: var(--renera-r-lg);
  border: 1px solid color-mix(in srgb, var(--renera-sand-300) 15%, transparent);
}
.rn-story-media .rn-story-frame {
  position: absolute; top: -28px; left: -28px; width: 96px; height: 96px;
  opacity: 0.5; filter: brightness(2.5) saturate(0.3);
  pointer-events: none;
}

/* =========================================
   WPFront Scroll-Top button ("Component 186") — its custom uploaded PNG isn't
   synced to this env so it renders as a broken image in the corner. The plugin
   prints the container on wp_footer (not gated by an enqueued handle), so we hide
   it here. Keeps the PDP chrome consistent with the rest of the site.
   ========================================= */
#wpfront-scroll-top-container { display: none !important; }

/* =========================================
   WooCommerce native form hygiene — keep WC's own markup invisible where we
   supply our own styling, and surface validation notices in brand style.
   ========================================= */
.rn-buy form.cart { margin: 0; display: contents; }
.rn-buy .woocommerce-variation-add-to-cart,
.rn-buy .quantity.hidden { display: none; }
.rn-buy .single_add_to_cart_button.disabled,
.rn-buy .single_add_to_cart_button:disabled { opacity: 0.5; cursor: not-allowed; }

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 1080px) {
  .rn-pdp { grid-template-columns: 1fr; gap: 48px; }
  .rn-gallery { position: static; grid-template-columns: 1fr; }
  /* Main image first, thumbnail rail beneath it as a horizontal row. */
  .rn-gallery__main { order: 1; }
  .rn-gallery__thumbs { order: 2; flex-direction: row; flex-wrap: wrap; }
  .rn-gallery__thumb { width: 72px; height: 72px; }
  .rn-buy__title { font-size: 40px; }
  .rn-buy__title--name { font-size: 27px; }
  .rn-badges, .rn-spec-strip { grid-template-columns: 1fr; }
  .rn-spec-strip__cell { border-right: 0; border-bottom: 1px solid var(--renera-clay-300); }
  .rn-spec-strip__cell:last-child { border-bottom: 0; }
  /* Without a min-width the table crushes its columns instead of scrolling —
     the "Other Brands" column disappeared entirely at phone widths. */
  .rn-compare { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rn-compare table { min-width: 640px; }
  /* One row: name | price | button (thumb + flavor sub are hidden here). */
  .rn-stickybuy__row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; }
  .rn-stickybuy__thumb, .rn-stickybuy__sub { display: none; }
  .rn-stickybuy__title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rn-story-grid { grid-template-columns: 1fr; gap: 44px; padding: 72px 0; }
  .rn-story-media img.rn-story-photo { height: 360px; }
}

/* ── Phone tuning ─────────────────────────────────────────────── */
/* Mirrors "Products Mobile.html" (Product page (2) mock) — the dedicated
   phone-width pass: tighter gallery/type scale, comparison-table-as-cards,
   and a stripped-down price+button sticky bar. */
@media (max-width: 600px) {
  .rn-pdp { padding: 18px 0 36px; gap: 28px; }
  .rn-gallery__thumb { width: 58px; height: 58px; }
  .rn-gallery__main { aspect-ratio: 1 / 1; }
  .rn-gallery__nav { bottom: 14px; right: 14px; }
  .rn-buy { gap: 20px; }
  .rn-buy__title--name { font-size: 30px; }
  .rn-buy__tagline { font-size: 18px; }
  .rn-buy__sub { font-size: 17px; }
  .rn-price__now { font-size: 36px; }
  .rn-buy-row { grid-template-columns: 1fr; }
  .rn-buy-row .rn-qty { justify-self: start; }
  .rn-badges { padding: 40px 0; gap: 32px; }
  .rn-story-grid { padding: 56px 0; gap: 32px; }
  .rn-story-media img.rn-story-photo { height: 300px; }

  /* Comparison table → stacked cards. A horizontally-scrolling table crushes
     the "Other Brands" column at phone widths; each row becomes a labeled
     card instead (one per feature, Renéra/Others prefixed inline). */
  .rn-compare { overflow-x: visible; border: 0; background: transparent; border-radius: 0; }
  .rn-compare table { min-width: 0; }
  .rn-compare table, .rn-compare tbody, .rn-compare tr, .rn-compare td { display: block; width: auto; }
  .rn-compare thead { display: none; }
  .rn-compare tr {
    background: var(--renera-paper);
    border: 1px solid var(--renera-clay-300);
    border-radius: var(--renera-r-md);
    margin-bottom: 14px;
    overflow: hidden;
  }
  .rn-compare tr:last-child { margin-bottom: 0; }
  .rn-compare td {
    border: 0 !important;
    border-bottom: 1px solid var(--renera-clay-300) !important;
    padding: 13px 18px !important;
  }
  .rn-compare td:last-child { border-bottom: 0 !important; }
  .rn-compare td.feature-name {
    background: var(--renera-sand-300);
    font-size: 11px; color: var(--renera-olive-700); width: auto;
  }
  .rn-compare td.is-feature,
  .rn-compare td.other { position: relative; padding-left: 108px !important; }
  .rn-compare td.is-feature::before,
  .rn-compare td.other::before {
    position: absolute; left: 18px; top: 13px;
    font-family: var(--renera-font-mono); font-size: 9px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--renera-mute);
    width: 80px;
  }
  .rn-compare td.is-feature::before { content: "Renéra"; color: var(--renera-olive-500); }
  .rn-compare td.other::before { content: "Others"; }

  /* Sticky buy bar → price + full-width button only; name/thumb dropped for
     a cleaner phone bar (mirrors the mock's native mobile buy bar). The
     __info wrapper (title+sub) must be hidden too, not just its children —
     display:none on the children alone left an empty grid cell that pushed
     the price/button out of the intended 2-column row. */
  .rn-stickybuy__row { grid-template-columns: auto 1fr; gap: 14px; padding: 12px 0; }
  .rn-stickybuy__info { display: none; }
  .rn-stickybuy__price { font-size: 17px; }
  .rn-stickybuy .rn-btn { height: 48px; padding: 0 16px; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   Customer reviews — brand skin over WooCommerce's native
   single-product-reviews.php markup (#reviews / .commentlist /
   #review_form). Structure + behaviour stay 100% native WC (star
   rating, verified-buyer gating, comment moderation); only the
   presentation is tokenised here. Renders only when comments are
   open or reviews exist (see single-product.php).
   ═══════════════════════════════════════════════════════════════ */
.rn-reviews { max-width: 760px; }
.rn-reviews .woocommerce-Reviews-title {
  font-family: var(--renera-font-serif); font-size: var(--renera-fs-lg);
  color: var(--renera-ink); margin: 0 0 28px;
}
.rn-reviews .woocommerce-Reviews-title span { font-style: italic; }
.rn-reviews .commentlist { list-style: none; margin: 0 0 40px; padding: 0; }
.rn-reviews .commentlist li.review { padding: 22px 0; border-bottom: 1px solid var(--renera-clay-300); }
.rn-reviews .commentlist li.review:first-child { padding-top: 0; }
.rn-reviews .comment_container { display: flex; gap: 16px; align-items: flex-start; }
.rn-reviews img.avatar {
  width: 46px; height: 46px; border-radius: var(--renera-r-pill);
  border: 1px solid var(--renera-clay-300); margin: 0;
}
.rn-reviews .comment-text { flex: 1; }
.rn-reviews .meta { font-size: var(--renera-fs-sm); color: var(--renera-mute); margin: 6px 0 10px; }
.rn-reviews .meta strong { color: var(--renera-ink); font-weight: 600; }
.rn-reviews .description p { color: var(--renera-ink-soft); line-height: var(--renera-lh-normal); margin: 0; }
.rn-reviews .star-rating { color: var(--renera-olive-500); font-size: 14px; }
.rn-reviews .woocommerce-noreviews {
  color: var(--renera-mute); font-style: italic; margin: 0 0 32px;
}

/* Review form */
.rn-reviews #review_form_wrapper { border-top: 1px solid var(--renera-clay-300); padding-top: 32px; }
.rn-reviews .comment-reply-title {
  font-family: var(--renera-font-serif); font-size: var(--renera-fs-md);
  color: var(--renera-ink); display: block; margin-bottom: 18px;
}
.rn-reviews .comment-form-rating label { display: block; margin-bottom: 6px; font-size: var(--renera-fs-sm); color: var(--renera-ink); }
.rn-reviews .comment-form p { margin: 0 0 16px; }
.rn-reviews .comment-form label { font-size: var(--renera-fs-sm); color: var(--renera-ink); }
.rn-reviews .comment-form input[type="text"],
.rn-reviews .comment-form input[type="email"],
.rn-reviews .comment-form textarea {
  width: 100%; margin-top: 6px; padding: 12px 14px;
  border: 1px solid var(--renera-clay-300); border-radius: var(--renera-r-md);
  background: var(--renera-paper); color: var(--renera-ink);
  font-family: var(--renera-font-sans); font-size: var(--renera-fs-base);
}
.rn-reviews .comment-form input:focus,
.rn-reviews .comment-form textarea:focus {
  outline: none; border-color: var(--renera-olive-500);
}
.rn-reviews .stars a { color: var(--renera-olive-500); }
.rn-reviews #submit {
  appearance: none; cursor: pointer;
  background: var(--renera-olive-700); color: var(--renera-paper);
  border: 0; border-radius: var(--renera-r-pill);
  font-family: var(--renera-font-sans); font-size: var(--renera-fs-sm);
  letter-spacing: 0.02em; padding: 13px 28px;
  transition: background var(--renera-dur-fast) var(--renera-ease);
}
.rn-reviews #submit:hover { background: var(--renera-olive-800); }