/* ==========================================================================
   PDP — "What's in this pack" section

   The individual single-string SKUs that make up a pack, sourced from the
   OpenPro BOM. Visual language ported from the approved ECOM-first PDP mockup:
   one card (hairline border, --pdp-radius, card surface) whose <caption> is the
   header band, hairline rules between rows, the ink ramp for hierarchy, and
   monospace on the SKU so a column of part numbers lines up.

   SHARED, not per-brand. Every colour delegates to pdp-tokens.css, whose
   brand-coloured roles resolve through --brand-* — so the row link is EB Red on
   ernieball.com and gold-brown on music-man.com from one 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.

   The table scrolls inside its own .pdp__scroller so a long string name 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-pack__title {
    /* .pdp__section owns the vertical rhythm — no margin-top here. */
    margin: 0 0 var(--pdp-gap-xs);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--pdp-ink);
}

.pdp-pack__intro {
    margin: 0 0 var(--pdp-gap);
    font-size: 13px;
    line-height: 1.5;
    color: var(--pdp-ink-3);
}

/* The pack's own SKU, called out the way the mockup calls out a part number. */
.pdp-pack__pack-sku {
    padding: 1px 5px;
    border: 1px solid var(--pdp-line);
    border-radius: 4px;
    background: var(--pdp-bg-alt);
    font-family: var(--pdp-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    color: var(--pdp-ink-2);
}

/* --- 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 caption band clips to the rounded corners. */

.pdp-pack__scroll {
    -webkit-overflow-scrolling: touch;
    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-pack__scroll:focus-visible {
    outline: 2px solid var(--pdp-focus);
    outline-offset: 2px;
}

/* --- Table --- */

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

/* Three columns instead of four: less content to fit, so the table starts
   scrolling later on a narrow phone. */
.pdp-pack__table--no-availability {
    min-width: 26rem;
}

/* The caption is the card's header band, and it is what the scroll container's
   aria-labelledby points at — so it stays visible, never sr-only. */
.pdp-pack__caption {
    padding: 11px 14px;
    border-bottom: 1px solid var(--pdp-line);
    background: var(--pdp-bg-alt);
    text-align: left;
}

.pdp-pack__caption-label {
    font-size: 12px; /* was 10.5px; 12px floor — WAVE "very small text" (2026-09-22) */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pdp-ink-3);
}

.pdp-pack__col {
    padding: 9px 14px;
    border-bottom: 1px solid var(--pdp-line);
    text-align: left;
    font-size: 12px; /* was 10.5px; 12px floor — WAVE "very small text" (2026-09-22) */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: var(--pdp-ink-3);
}

.pdp-pack__gauge,
.pdp-pack__wire,
.pdp-pack__single,
.pdp-pack__availability {
    padding: 11px 14px;
    border-bottom: 1px solid var(--pdp-line);
    text-align: left;
    vertical-align: top;
}

/* The card's own border closes the table off. */
.pdp-pack__row:last-child .pdp-pack__gauge,
.pdp-pack__row:last-child .pdp-pack__wire,
.pdp-pack__row:last-child .pdp-pack__single,
.pdp-pack__row:last-child .pdp-pack__availability {
    border-bottom: 0;
}

/* --- Gauge (row header) --- */

.pdp-pack__gauge {
    width: 1%;
    white-space: nowrap;
}

.pdp-pack__gauge-value {
    /* inline-block, not block, so the quantity marker sits beside the gauge it
       qualifies. This is now load-bearing rather than incidental: the "String N"
       line that used to follow was removed, so nothing else forces the break and
       display:block here would drop the marker onto its own line. */
    display: inline-block;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--pdp-ink);
}

/* "x3" on a course-doubled set — 12-strings, mandolins, banjos.

   One BOM part can be several strings, and repeating the row was rejected: these
   rows are interactive, so three identical rows would mean three identical link
   destinations. The marker sits inline with the gauge because it qualifies THAT
   number, and it is absent entirely below a quantity of 2, which is ~95% of
   parts. The glyph is aria-hidden; .pdp-pack__sr carries "3 included". */
.pdp-pack__qty {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: var(--pdp-radius-sm);
    background: var(--pdp-bg-alt);
    font-size: 12px; /* was 11px; 12px floor — WAVE "very small text" (2026-09-22) */
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    color: var(--pdp-ink-3);
    vertical-align: 1px;
}

/* --- Wire type ---
   The swatch is decorative shorthand for plain vs wound (aria-hidden), so the
   written label carries the meaning on its own. */

.pdp-pack__wire {
    white-space: nowrap;
}

.pdp-pack__wire-label {
    display: inline-flex;
    align-items: center;
    gap: var(--pdp-gap-sm);
    font-size: 12.5px;
    color: var(--pdp-ink-2);
}

.pdp-pack__wire-swatch {
    flex: none;
    width: 30px;
    height: 9px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 5px;
}

.pdp-pack__wire-swatch--plain {
    background: linear-gradient(180deg, #f0f0f4, #b4b4c0);
}

.pdp-pack__wire-swatch--wound {
    background: repeating-linear-gradient(90deg, #c2c2ce 0 2px, #8b8b99 2px 4px);
}

/* --- Single string: SKU, name, optional thumbnail ---
   The thumb removes itself when the CDN object is missing (most single-string
   images are not ported yet). A flex gap applies only BETWEEN items, so the row
   closes up on its own with no :empty rule and no reserved column. */

.pdp-pack__single {
    min-width: 0;
}

.pdp-pack__single-inner {
    display: flex;
    align-items: center;
    gap: var(--pdp-gap-sm);
    min-width: 0;
}

.pdp-pack__thumb {
    flex: none;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: var(--pdp-radius-sm);
    background: var(--pdp-bg-alt);
    object-fit: contain;
}

.pdp-pack__single-text {
    min-width: 0;
}

.pdp-pack__sku {
    display: block;
    font-family: var(--pdp-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--pdp-ink);
}

.pdp-pack__link,
.pdp-pack__name {
    display: block;
    max-width: 22rem;
    margin-top: 2px;
    font-size: 12px; /* was 11.5px; 12px floor — WAVE "very small text" (2026-09-22) */
    line-height: 1.4;
    color: var(--pdp-ink-3);
}

.pdp-pack__link {
    color: var(--pdp-accent-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--pdp-line-2);
    text-underline-offset: 2px;
}

.pdp-pack__link:hover,
.pdp-pack__link:focus-visible {
    color: var(--pdp-accent-ink-hover);
    text-decoration-color: currentColor;
}

/* --- Availability ---
   The whole column is data-driven and absent unless some single on the page is
   actually sellable (see the partial), so these rules idle most of the time. The
   pill is a state, not a control, so it is deliberately not styled as a button.

   No :nth-child() anywhere in this file — that is what lets the column come and
   go without every other cell shifting. */

.pdp-pack__availability {
    white-space: nowrap;
}

.pdp-pack__state {
    display: inline-block;
    padding: 4px 9px;
    border: 1px solid var(--pdp-line-2);
    border-radius: 999px;
    background: var(--pdp-bg-alt);
    font-size: 12px; /* was 10.5px; 12px floor — WAVE "very small text" (2026-09-22) */
    font-weight: 700;
    color: var(--pdp-ink-2);
}

.pdp-pack__state--in_stock {
    border-color: var(--pdp-ok);
    background: var(--pdp-ok-soft);
    color: var(--pdp-ok);
}

.pdp-pack__state--sold_out {
    border-color: var(--pdp-warn);
    background: var(--pdp-warn-soft);
    color: var(--pdp-warn);
}

/* Missing data, e.g. a component whose retail single has no SKU of its own. The
   dash is decorative (aria-hidden) and .pdp-pack__sr carries the meaning. */
.pdp-pack__unknown,
.pdp-pack__sku--unknown {
    color: var(--pdp-ink-3);
    font-weight: 400;
}

.pdp-pack__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Narrow screens ---
   Drop the decorative swatch and the thumbnail before dropping any text; the
   gauge and the SKU are the payload. */

@media (max-width: 30rem) {
    .pdp-pack__thumb,
    .pdp-pack__wire-swatch {
        display: none;
    }

    .pdp-pack__col,
    .pdp-pack__gauge,
    .pdp-pack__wire,
    .pdp-pack__single,
    .pdp-pack__availability {
        padding-inline: 10px;
    }
}

/* "Not sold separately" — a statement, not missing data.

   409 of the 464 blank positions in this catalog can NEVER be filled: the string
   is either cut in-house from a spool of bulk wire, or is a finished component
   that no single-string product uses. A dash on those rows read as broken data,
   so they say so in words instead. Italic and quiet: it is an answer, but not the
   answer anybody came to the row for. The genuinely unknown rows keep the dash. */
.pdp-pack__name--unsold {
    font-style: italic;
    color: var(--pdp-ink-3);
}

/* --- Informational BOM rows ---

   The same unsellable positions, once OpenPro can name them: part number, wire
   type, and a tag saying why there is no link. Quieter than a real SKU so the
   rows a shopper CAN act on still lead the column, but present enough to be the
   answer to "what is the fourth string in this pack".

   The placeholder shown on those rows is real artwork from the media library,
   so it needs no styling of its own: it renders through .pdp-pack__thumb exactly
   like a product shot, same 40px box, same plate, same object-fit. The earlier
   --generic rule existed to tint and inset a line-art SVG (currentColor, reduced
   opacity) and would now dim a photograph into looking like a load failure. The
   modifier stays on the element as a hook; it deliberately has no declarations. */

.pdp-pack__sku--part {
    font-weight: 600;
    color: var(--pdp-ink-3);
}

/* Real text, not a tooltip or a colour: this is the only cue that the row is
   informational, so it has to survive being read aloud. */
.pdp-pack__tag {
    display: block;
    margin-top: 2px;
    font-size: 12px; /* was 10.5px; 12px floor — WAVE "very small text" (2026-09-22) */
    font-style: italic;
    line-height: 1.4;
    color: var(--pdp-ink-3);
}

/* Explains a link that looks like a mistake and is not: in a Coated Titanium RPS
   set only the PLAIN strings are titanium, so the wound strings link to coated
   nickel wound singles. Rendered only where a set mixes the two constructions and
   at least one single is linked. */
.pdp-pack__note {
    margin: var(--pdp-gap) 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pdp-ink-3);
}