/* =============================================================================
   66-tabs.css — THE PRODUCT RECORD
   -----------------------------------------------------------------------------
   Description / Additional information / Reviews, plus the review form.

   Three problems were being solved here, and they are different problems:

   1  THE RAIL.  The coherence pass had already moved the tab row off its
      lavender-ish chunky UI and onto the site's chrome voice — 0.72rem, 0.14em,
      uppercase, an accent underline. This builds on exactly that: it keeps the
      voice, adds the hero's 01/02/03 HUD numerals, and gives the row the
      right-hand counterweight every header band on this site has ("PRODUCT
      RECORD"). Nothing about the accent underline changes.

   2  THE PANELS.  Every panel was one column of text running the full 1392px
      of the container — a 160-character measure with a 500px dead field beside
      it. Each panel is now a two-track composition: a sticky micro-kicker rail
      naming what you are looking at, and a content column set to a measure a
      person can actually read. The raw imported description, which is one
      <p> of 【label】value lines separated by <br><br>, is set in two columns
      with a hairline rule between them, so the band fills honestly.

   3  THE EMPTY STATE.  No product in this catalogue has a review, so the
      reviews panel is not an edge case — it is what every single visitor sees.
      It is now a two-column composition in its own right: on the left the
      absence, stated in the display serif under five unfilled stars; on the
      right the invitation, as a panel-plane form with the fields paired and the
      cookie-consent row (whose label was landing UNDER its checkbox) repaired.

   ── A NOTE ON THE GENERATED COPY ─────────────────────────────────────────────
   The rail labels and the one supporting sentence in the empty state are set
   as `content:` strings because this workstream owns CSS only. They are
   editorial copy and belong in PHP; when this template is next opened they
   should be promoted into markup so they are translatable and selectable. They
   are deliberately generic — nothing here names a product, a price or a claim.

   Loads after main.css, and after 93-coherence.css sets the tab voice, so the
   rail rules carry the specificity needed to sit on top of both. It carries its
   own media queries.
   ========================================================================== */

.single-product-page .product-tabs {
  --tabs-hair:    color-mix(in srgb, var(--ink) 11%, transparent);
  --tabs-hair-2:  color-mix(in srgb, var(--ink) 20%, transparent);
  --tabs-legend:  var(--color-text-muted);
  --tabs-rail-w:  14rem;
  --tabs-gutter:  clamp(28px, 4vw, 72px);
  --tabs-ease:    cubic-bezier(0.2, 0.75, 0.2, 1);

  position: relative;
  min-width: 0;
  margin-top: clamp(48px, 5vw, 84px);
  margin-bottom: clamp(64px, 7vw, 112px);
}


/* =============================================================================
   1. THE RAIL — chrome, not UI
   -----------------------------------------------------------------------------
   No padded pills, no filled active state. A row of HUD labels over one
   hairline, each numbered the way the hero numbers its chapters. The active
   underline is drawn as an inset shadow rather than a border with a negative
   margin, so the row can scroll horizontally on a phone without clipping it.
   ========================================================================== */

.single-product-page .product-tabs .tabs-nav {
  display: flex;
  align-items: flex-end;
  gap: clamp(24px, 3.4vw, 54px);
  counter-reset: tab;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--tabs-hair);
}

.single-product-page .product-tabs .tabs-nav .tab-btn {
  counter-increment: tab;
  display: inline-flex;
  align-items: baseline;
  gap: 11px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0 16px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color 0.4s var(--tabs-ease), box-shadow 0.4s var(--tabs-ease);
}

/* The chapter numeral. Same gesture as "01 · THE LEAF BEGINS" in the hero. */
.single-product-page .product-tabs .tabs-nav .tab-btn::before {
  content: counter(tab, decimal-leading-zero);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
  transition: color 0.4s var(--tabs-ease);
}

.single-product-page .product-tabs .tabs-nav .tab-btn:hover {
  color: var(--color-text-light);
  background: none;
  box-shadow: inset 0 -1px 0 var(--tabs-hair-2);
}

.single-product-page .product-tabs .tabs-nav .tab-btn.active {
  color: var(--color-dark);
  background: none;
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

.single-product-page .product-tabs .tabs-nav .tab-btn.active::before {
  color: var(--color-accent);
}

.single-product-page .product-tabs .tabs-nav .tab-btn:focus-visible {
  outline: 2px solid rgba(var(--color-primary-rgb), 0.65);
  outline-offset: 5px;
  border-radius: 2px;
}

/* The review count rides with its label rather than reading as a badge. */
.single-product-page .product-tabs .tabs-nav .tab-count {
  margin-left: 0;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
}

.single-product-page .product-tabs .tabs-nav .tab-btn.active .tab-count {
  color: color-mix(in srgb, var(--color-accent) 70%, transparent);
}

/* The right-hand counterweight. Every header band on this site balances its
   left-hand lockup with something on the right; an empty right half has been a
   repeated rejection. */
.single-product-page .product-tabs .tabs-nav::after {
  content: "PRODUCT RECORD";
  margin-left: auto;
  padding: 0 0 16px 24px;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-muted) 68%, transparent);
  white-space: nowrap;
}


/* =============================================================================
   2. THE PANEL FRAME — a naming rail and a measured column
   ========================================================================== */

.single-product-page .product-tabs .tab-content.active {
  display: grid;
  grid-template-columns: minmax(0, var(--tabs-rail-w)) minmax(0, 1fr);
  column-gap: var(--tabs-gutter);
  align-items: start;
  padding: clamp(38px, 4vw, 60px) 0 clamp(48px, 5.5vw, 88px);
}

/* The rail: the hero's micro-kicker — a 34x1px rule, then 0.7rem uppercase at
   0.16em — naming the panel you are in. Sticky, so it stays with a long read. */
.single-product-page .product-tabs .tab-content::before {
  content: "";
  position: sticky;
  top: 168px;
  align-self: start;
  padding-top: 17px;
  background-image: linear-gradient(to right, var(--tabs-hair-2), var(--tabs-hair-2));
  background-size: 34px 1px;
  background-position: 0 0;
  background-repeat: no-repeat;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tabs-legend);
}

.single-product-page .product-tabs .tab-content[data-tab-content="description"]::before {
  content: "As supplied by the workshop";
}
.single-product-page .product-tabs .tab-content[data-tab-content="additional"]::before {
  content: "Measured facts";
}
.single-product-page .product-tabs .tab-content[data-tab-content="reviews"]::before {
  content: "Owner notes";
}

.single-product-page .product-tabs .sp-tab-body {
  min-width: 0;
  padding: 0;
}


/* =============================================================================
   3. DESCRIPTION — the imported sheet, set as two columns
   -----------------------------------------------------------------------------
   The source description is one paragraph of "【Label】Value" lines separated by
   <br><br>. The doubled break is what separates one field from the next line of
   a field that wrapped, so it is kept; the leading is what was wrong. Two
   columns divided by a hairline give it a ~50-character measure and let the
   band fill its width instead of trailing 500px of dead field.
   ========================================================================== */

.single-product-page .product-tabs .tab-content[data-tab-content="description"] .sp-tab-body {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-text-light);
}

.single-product-page .product-tabs .product__description,
.single-product-page .product-tabs .sp-tab-body > .rte {
  columns: 2;
  column-gap: clamp(34px, 4vw, 76px);
  column-rule: 1px solid var(--tabs-hair);
  orphans: 3;
  widows: 3;
}

.single-product-page .product-tabs .product__description > p,
.single-product-page .product-tabs .sp-tab-body > p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  letter-spacing: 0.004em;
  color: var(--color-text-light);
}

/* A hand-written description keeps its paragraph rhythm and a reading measure;
   it is prose, not a sheet, so it does not get the two columns above. */
.single-product-page .product-tabs .sp-tab-body > p:not(:last-child) {
  margin-bottom: 1.15em;
}
.single-product-page .product-tabs .sp-tab-body > h2,
.single-product-page .product-tabs .sp-tab-body > h3,
.single-product-page .product-tabs .sp-tab-body > h4 {
  margin: 2em 0 0.7em;
  font-family: var(--font-heading);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--color-dark);
}
.single-product-page .product-tabs .sp-tab-body > h2:first-child,
.single-product-page .product-tabs .sp-tab-body > h3:first-child { margin-top: 0; }

.single-product-page .product-tabs .sp-tab-body > ul,
.single-product-page .product-tabs .sp-tab-body > ol {
  max-width: 44rem;
  margin: 1.2em 0;
  padding-left: 1.15em;
}
.single-product-page .product-tabs .sp-tab-body li {
  margin-bottom: 0.5em;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--color-text-light);
}

.single-product-page .product-tabs .sp-tab-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ctl-r, 6px);
}


/* =============================================================================
   4. ADDITIONAL INFORMATION — a spec sheet, not a striped table
   -----------------------------------------------------------------------------
   The label column was a filled grey block with 700-weight body copy in it —
   the one piece of chunky UI left on the page. It becomes the same object as
   the provenance plate in the buy column: a numeral, a micro-cap label, a
   hairline, and the value taken to the RIGHT edge so the row resolves both
   sides of a 1130px column instead of stranding the value mid-line.
   ========================================================================== */

.single-product-page .product-tabs .sp-info-table {
  counter-reset: fact;
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  font-family: var(--font-primary);
  font-size: 1rem;
}

.single-product-page .product-tabs .sp-info-table tr {
  counter-increment: fact;
  border-bottom: 1px solid var(--tabs-hair);
}
.single-product-page .product-tabs .sp-info-table tr:first-child {
  border-top: 1px solid var(--tabs-hair-2);
}
.single-product-page .product-tabs .sp-info-table tr:last-child { border-bottom: 1px solid var(--tabs-hair-2); }

.single-product-page .product-tabs .sp-info-table td {
  padding: 21px 0;
  vertical-align: baseline;
  background: none;
  border: 0;
}

.single-product-page .product-tabs .sp-info-table td:first-child {
  /* The label track takes the larger share on purpose: it caps how wide the
     value block can grow, so a 68-character imported SKU wraps into a tidy
     right-aligned block instead of running the full 680px of the row. */
  width: 55%;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tabs-legend);
}

.single-product-page .product-tabs .sp-info-table td:first-child::before {
  content: counter(fact, decimal-leading-zero);
  display: inline-block;
  width: 2.9rem;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text-muted) 68%, transparent);
}

.single-product-page .product-tabs .sp-info-table td:last-child {
  padding-left: 24px;
  text-align: right;
  font-size: 0.95rem;
  line-height: 1.6;
  letter-spacing: 0.004em;
  color: var(--color-dark);
  font-variant-numeric: tabular-nums;
  hyphens: none;
  /* An imported SKU is a 68-character slug; it wraps rather than overflows. */
  overflow-wrap: anywhere;
}

.single-product-page .product-tabs .sp-info-table .availability-in,
.single-product-page .product-tabs .sp-info-table .availability-out {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}


/* =============================================================================
   5. REVIEWS — the state every visitor lands in
   -----------------------------------------------------------------------------
   Left: the absence, said properly. Right: the invitation, on the panel plane.
   Both halves full; all four edges resolved.
   ========================================================================== */

.single-product-page .product-tabs .woocommerce-Reviews {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  column-gap: clamp(32px, 4.4vw, 80px);
  /* The statement is a quarter of the height of the form beside it. Top-aligned
     it left a ~530px hole under it — the exact dead pocket this project keeps
     getting rejected for. Centred, the two halves read as one lockup and the
     space above and below the statement is deliberate. */
  align-items: center;
}

.single-product-page .product-tabs .woocommerce-Reviews > #comments { grid-column: 1; min-width: 0; }
.single-product-page .product-tabs .woocommerce-Reviews > #review_form_wrapper { grid-column: 2; min-width: 0; }
.single-product-page .product-tabs .woocommerce-Reviews > .clear { display: none; }

/* The panel is already named by the rail and counted by the tab, so the H2 is
   duplicated chrome. It stays in the document for assistive tech. */
.single-product-page .product-tabs .woocommerce-Reviews-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* --- The empty state --------------------------------------------------------
   WooCommerce ships "There are no reviews yet." as a notice, and the control
   layer quite rightly gives every notice a panel and a coloured leading edge.
   Here that is wrong: this is not a notice, it is the panel's content. It sheds
   the box and is set as a display line under five unfilled stars. */

.single-product-page .product-tabs .woocommerce-Reviews .woocommerce-noreviews {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 2.7vw, 2.75rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: var(--color-dark);
  text-wrap: balance;
}

.single-product-page .product-tabs .woocommerce-Reviews .woocommerce-noreviews::before {
  content: "\2605\2605\2605\2605\2605";
  display: block;
  margin-bottom: 24px;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.44em;
  color: color-mix(in srgb, var(--ink) 15%, transparent);
}

.single-product-page .product-tabs .woocommerce-Reviews .woocommerce-noreviews::after {
  content: "Nothing has been written about this piece yet. If you have lived with it — how it handles, how it wears, whether it was worth it — yours will be the first note on the record.";
  display: block;
  max-width: 30rem;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--tabs-hair);
  font-family: var(--font-primary);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.004em;
  color: var(--color-text-light);
  text-wrap: pretty;
}


/* --- The invitation ---------------------------------------------------------
   The control layer's three planes are panel / page / field. A form gets the
   panel plane; the fields sit above it. */

.single-product-page .product-tabs .woocommerce-Reviews #review_form_wrapper #respond,
.single-product-page .product-tabs .woocommerce-Reviews .comment-respond {
  margin: 0;
  padding: clamp(26px, 2.7vw, 42px);
  border: 1px solid var(--ctl-panel-edge, color-mix(in srgb, var(--ink) 11%, transparent));
  border-radius: var(--ctl-r, 6px);
  background: var(--ctl-panel-face, color-mix(in srgb, var(--night-2) 62%, transparent));
}

.single-product-page .product-tabs .woocommerce-Reviews .comment-reply-title {
  display: block;
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: var(--color-dark);
  text-wrap: balance;
}
.single-product-page .product-tabs .woocommerce-Reviews .comment-reply-title small { display: none; }

.single-product-page .product-tabs .woocommerce-Reviews .comment-notes {
  margin: 0 0 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--tabs-hair);
  font-size: 0.78rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
}

/* Name and email are a pair; everything else owns its line. */
.single-product-page .product-tabs .woocommerce-Reviews .comment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}
.single-product-page .product-tabs .woocommerce-Reviews .comment-form > * {
  grid-column: 1 / -1;
  margin-bottom: 20px;
}
.single-product-page .product-tabs .woocommerce-Reviews .comment-form .comment-form-author { grid-column: 1 / 2; }
.single-product-page .product-tabs .woocommerce-Reviews .comment-form .comment-form-email  { grid-column: 2 / 3; }

/* Rating — the label is inside a <div>, so the control layer's
   `.comment-form > p > label` rule never reached it and it stayed 600-weight
   sentence case among a column of micro-caps. */
.single-product-page .product-tabs .woocommerce-Reviews .comment-form-rating {
  margin-bottom: 24px;
}
.single-product-page .product-tabs .woocommerce-Reviews .comment-form-rating > label {
  display: block;
  margin: 0 0 13px;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-text-light);
}
.single-product-page .product-tabs .woocommerce-Reviews p.stars {
  margin: 0;
  line-height: 1;
}
.single-product-page .product-tabs .woocommerce-Reviews p.stars a {
  font-size: 1.6rem;
  letter-spacing: 0.16em;
}
/* If the star script has not run, the raw <select> is what a visitor gets. */
.single-product-page .product-tabs .woocommerce-Reviews .comment-form-rating select {
  max-width: 20rem;
}

.single-product-page .product-tabs .woocommerce-Reviews .comment-form-comment textarea {
  min-height: 168px;
  resize: vertical;
}

/* The consent row was broken, not just plain: the control layer sets every
   `.comment-form > p > label` to display:block, which dropped this sentence
   underneath its own checkbox. It is a sentence, so it is set as one. */
.single-product-page .product-tabs .woocommerce-Reviews .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 26px;
}
.single-product-page .product-tabs .woocommerce-Reviews .comment-form-cookies-consent input {
  flex: 0 0 auto;
  margin: 3px 0 0;
}
.single-product-page .product-tabs .woocommerce-Reviews .comment-form-cookies-consent label {
  display: inline;
  margin: 0;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.004em;
  text-transform: none;
  color: var(--color-text-muted);
}

.single-product-page .product-tabs .woocommerce-Reviews .form-submit {
  margin: 0;
  padding-top: 4px;
}
.single-product-page .product-tabs .woocommerce-Reviews .form-submit input#submit {
  min-width: 15rem;
}

.single-product-page .product-tabs .woocommerce-Reviews .required-field-message,
.single-product-page .product-tabs .woocommerce-Reviews .required {
  color: color-mix(in srgb, var(--color-text-muted) 85%, transparent);
}


/* --- Reviews, once there are any -------------------------------------------
   Nothing in the catalogue has one yet, but the first one must not land on an
   unstyled <ol>. Same hairline rhythm as everything else in the record. */

.single-product-page .product-tabs .woocommerce-Reviews .commentlist {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  border-top: 1px solid var(--tabs-hair-2);
}
.single-product-page .product-tabs .woocommerce-Reviews .commentlist li.review,
.single-product-page .product-tabs .woocommerce-Reviews .commentlist li.comment {
  margin: 0;
  padding: 24px 0;
  border-bottom: 1px solid var(--tabs-hair);
}
.single-product-page .product-tabs .woocommerce-Reviews .comment_container {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
}
.single-product-page .product-tabs .woocommerce-Reviews .comment_container img.avatar {
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}
.single-product-page .product-tabs .woocommerce-Reviews .comment-text {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.single-product-page .product-tabs .woocommerce-Reviews .comment-text p.meta {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.single-product-page .product-tabs .woocommerce-Reviews .comment-text .description p {
  margin: 0 0 0.8em;
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--color-text-light);
}


/* =============================================================================
   6. NARROW WIDTHS
   Part files load after every media query in main.css, so each step is
   restated here or the desktop value would hold all the way down to 320px.
   ========================================================================== */

@media (max-width: 1200px) {
  .single-product-page .product-tabs { --tabs-rail-w: 11.5rem; }
  .single-product-page .product-tabs .sp-info-table td:first-child { width: 44%; }
}

@media (max-width: 1024px) {
  /* The rail stops being a column and becomes the panel's header line. */
  .single-product-page .product-tabs .tab-content.active {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 26px;
    padding: 32px 0 56px;
  }
  .single-product-page .product-tabs .tab-content::before {
    position: static;
    padding-top: 15px;
  }
  .single-product-page .product-tabs .woocommerce-Reviews {
    column-gap: 40px;
  }
}

@media (max-width: 900px) {
  .single-product-page .product-tabs .product__description,
  .single-product-page .product-tabs .sp-tab-body > .rte {
    columns: 1;
    column-rule: none;
    max-width: 46rem;
  }
  .single-product-page .product-tabs .woocommerce-Reviews {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 44px;
  }
  .single-product-page .product-tabs .woocommerce-Reviews > #comments,
  .single-product-page .product-tabs .woocommerce-Reviews > #review_form_wrapper {
    grid-column: 1;
  }
  .single-product-page .product-tabs .woocommerce-Reviews .woocommerce-noreviews::after {
    max-width: 40rem;
  }
}

@media (max-width: 768px) {
  .single-product-page .product-tabs {
    margin-top: 44px;
    margin-bottom: 56px;
  }

  /* Three labels still fit one line at 390px once the numerals and the
     right-hand HUD stand down; the row scrolls if a translation is longer. */
  .single-product-page .product-tabs .tabs-nav {
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .single-product-page .product-tabs .tabs-nav::-webkit-scrollbar { display: none; }
  .single-product-page .product-tabs .tabs-nav::after { display: none; }
  .single-product-page .product-tabs .tabs-nav .tab-btn::before { display: none; }
  .single-product-page .product-tabs .tabs-nav .tab-btn {
    gap: 7px;
    padding-bottom: 14px;
    font-size: 0.7rem;
    letter-spacing: 0.09em;
  }

  .single-product-page .product-tabs .tab-content.active {
    row-gap: 22px;
    padding: 28px 0 48px;
  }

  .single-product-page .product-tabs .sp-info-table td { padding: 16px 0; }
  .single-product-page .product-tabs .sp-info-table td:first-child { width: 42%; }
  .single-product-page .product-tabs .sp-info-table td:first-child::before { width: 2.3rem; }
  .single-product-page .product-tabs .sp-info-table td:last-child { padding-left: 12px; }

  .single-product-page .product-tabs .woocommerce-Reviews .comment-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .single-product-page .product-tabs .woocommerce-Reviews .comment-form .comment-form-author,
  .single-product-page .product-tabs .woocommerce-Reviews .comment-form .comment-form-email {
    grid-column: 1;
  }
  .single-product-page .product-tabs .woocommerce-Reviews .form-submit input#submit {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .single-product-page .product-tabs .tab-content.active { padding: 24px 0 40px; }

  /* At 390px the three labels overrun the 360px gutter by ~13px, and a silent
     horizontal scroll would hide the Reviews tab — the one panel with anything
     to do in it. The row wraps instead. Because the active marker is an inset
     shadow on the button rather than a border shared with the rail, a tab that
     falls to the second line still carries its own underline. */
  .single-product-page .product-tabs .tabs-nav {
    flex-wrap: wrap;
    gap: 13px 24px;
    overflow: visible;
  }
  .single-product-page .product-tabs .tabs-nav .tab-btn {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    padding-bottom: 12px;
  }

  .single-product-page .product-tabs .woocommerce-Reviews .woocommerce-noreviews {
    font-size: 1.5rem;
    letter-spacing: -0.028em;
  }
  .single-product-page .product-tabs .woocommerce-Reviews .woocommerce-noreviews::before {
    font-size: 0.9rem;
    letter-spacing: 0.36em;
  }
  .single-product-page .product-tabs .woocommerce-Reviews .woocommerce-noreviews::after {
    margin-top: 22px;
    padding-top: 22px;
    font-size: 0.86rem;
    line-height: 1.75;
  }

  .single-product-page .product-tabs .sp-info-table td:last-child { font-size: 0.9rem; }
  .single-product-page .product-tabs .woocommerce-Reviews p.stars a { font-size: 1.35rem; }
}

/* The uppercase floor. Nothing in this file is allowed under 0.7rem. */
@media (max-width: 360px) {
  .single-product-page .product-tabs .tabs-nav { gap: 12px 18px; }
  .single-product-page .product-tabs .tabs-nav .tab-btn {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
  }
}