/**
 * pdp-manual.css — the user-manual download link(s) in the PDP buy box.
 *
 * Loaded by resources/views/shared/catalog/pdp/_manual.blade.php, and ONLY when
 * a document actually resolved — a PDP with no manual pulls no stylesheet.
 *
 * Declares no palette of its own: every colour is a --pdp-* token from
 * pdp-tokens.css, which the shell links first. Brand colours arrive through
 * those tokens (--pdp-accent-ink delegates to --brand-link). Light mode only,
 * like the rest of the PDP.
 *
 * Styled as a quiet secondary link, not a button: the buy box already has one
 * primary CTA and a second filled control would compete with Add to Cart for the
 * same glance.
 */

.pdp__manual {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pdp-gap-sm);
    margin: var(--pdp-gap-sm) 0 0;
}

/* Hidden variant blocks: product-detail.js toggles the `hidden` attribute on
   every [data-pdp-variant-scope] element, and `display: flex` above would
   otherwise beat the UA's `[hidden] { display: none }`. */
.pdp__manual[hidden] {
    display: none;
}

.pdp__manual-link {
    display: inline-flex;
    align-items: center;
    gap: var(--pdp-gap-xs);
    padding: 6px 10px;
    border: 1px solid var(--pdp-line-2);
    border-radius: var(--pdp-radius-sm);
    background: var(--pdp-card);
    color: var(--pdp-accent-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.pdp__manual-link:hover,
.pdp__manual-link:focus-visible {
    border-color: var(--pdp-accent);
    color: var(--pdp-accent-ink-hover);
    background: var(--pdp-accent-soft);
    text-decoration: underline;
}

/* Deliberately not the brand colour — the focus ring has to read as a system
   affordance, per pdp-tokens.css. */
.pdp__manual-link:focus-visible {
    outline: 2px solid var(--pdp-focus);
    outline-offset: 2px;
}

.pdp__manual-icon {
    flex: none;
    color: var(--pdp-ink-2);
}

.pdp__manual-text {
    /* A long manual name must not blow the buy-box column open. */
    overflow-wrap: anywhere;
}

.pdp__manual-meta {
    color: var(--pdp-ink-3);
    font-size: 12px; /* was 11.5px; 12px floor — WAVE "very small text" (2026-09-22) */
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}