/* ==========================================================================
   PDP — Specifications section (string_set_specs)

   Visual language ported from the approved ECOM-first PDP mockup: the table is
   a card (hairline border, --pdp-radius, card surface), with hairline rules
   between rows and the ink ramp doing the label-vs-value hierarchy.

   SHARED, not per-brand. Every colour delegates to pdp-tokens.css, whose
   brand-coloured roles resolve through --brand-* — so EB comes out red-accented
   and Music Man gold with no second copy of this file. site_asset() finds it via
   the shared fallback.

   LIGHT MODE ONLY. Dark mode is a deliberate post-launch item — do not add a
   colour-scheme media query or a theme-attribute override here.

   ONE card. There used to be a second panel beside it listing the set's
   lightest and heaviest string, which restated the `Gauge` row of this table —
   so the two-column grid went with it rather than leaving a 3fr card next to an
   empty 2fr track. The card holds roughly the width it had as that 3fr track
   (~690px of --pdp-maxw), so the section reads the same minus one panel.

   The table scrolls inside its own .pdp__scroller so a wide row can never push
   the page sideways.

   Per-variant: the shell pre-renders one block per SKU and reveals the active
   one, so hidden sibling blocks are in the DOM. Nothing here sets `display` on
   the .pdp__section wrapper, which is what lets [hidden] keep working.
   ========================================================================== */

.pdp-specs__title {
    /* .pdp__section owns the vertical rhythm — no margin-top here. */
    margin: 0 0 var(--pdp-gap);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--pdp-ink);
}

/* --- Card + scroll container ---
   The only element allowed to scroll horizontally (overflow-x and overscroll
   containment come from .pdp__scroller in pdp-tokens.css). It doubles as the
   card surface, so the first and last rows clip to the rounded corners.

   max-width, not a grid track: full-bleed across --pdp-maxw would strand the
   values a long way from their labels, and 44rem is the width this card already
   had as the 3fr half of the old two-panel grid. Below that it is simply fluid,
   which is what the stacked mobile layout was. */

.pdp-specs__scroll {
    -webkit-overflow-scrolling: touch;
    max-width: 44rem;
    background: var(--pdp-card);
    border: 1px solid var(--pdp-line);
    border-radius: var(--pdp-radius);
}

/* Deliberately the focus hue, not the brand accent: the scroller is keyboard
   focusable so the ring must not read as a selected state. */
.pdp-specs__scroll:focus-visible {
    outline: 2px solid var(--pdp-focus);
    outline-offset: 2px;
}

/* --- Table --- */

.pdp-specs__table {
    width: 100%;
    min-width: 18rem;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--pdp-ink);
}

/* NO caption rules, and no thead rules: the section is a single captionless,
   headerless attribute table. The band that used to sit here said "Set details"
   (a repeat of the <h2>, and a lie on single-string SKUs) and the <thead>
   belonged to the deleted gauge sub-table. The scroller is named by the <h2>. */

.pdp-specs__row .pdp-specs__label,
.pdp-specs__row .pdp-specs__value {
    border-bottom: 1px solid var(--pdp-line);
}

/* The card's own border closes the table off. */
.pdp-specs__row:last-child .pdp-specs__label,
.pdp-specs__row:last-child .pdp-specs__value {
    border-bottom: 0;
}

/* No caption band, so the first row sits against the card's rounded top edge and
   takes the band's breathing room back. */
.pdp-specs__table > tbody > .pdp-specs__row:first-child .pdp-specs__label,
.pdp-specs__table > tbody > .pdp-specs__row:first-child .pdp-specs__value {
    padding-top: 14px;
}

.pdp-specs__label {
    width: 42%;
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--pdp-ink-3);
    white-space: nowrap;
}

.pdp-specs__value {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}

.pdp-specs__value-text {
    display: block;
    font-weight: 600;
    color: var(--pdp-ink);
}

/* Lookup-table description — the "why" behind the value. */
.pdp-specs__note {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--pdp-ink-3);
}

/* --- Breakpoints --- */

@media (max-width: 30rem) {
    .pdp-specs__label {
        width: 45%;
        white-space: normal;
    }

    .pdp-specs__label,
    .pdp-specs__value {
        padding-inline: 10px;
    }
}