/* Product detail pages (pre-made, custom, accessories) — scoped .page-product */

.page-product .progress { height: 8px; border-radius: 0; }
.page-product .progress-bar[data-width="0"] { width: 0; }
.page-product .progress-bar[data-width="2"] { width: 2%; }
.page-product .progress-bar[data-width="4"] { width: 4%; }
.page-product .progress-bar[data-width="13"] { width: 13%; }
.page-product .progress-bar[data-width="81"] { width: 81%; }

.page-product .pdp-title {}
.page-product del.base-price { line-height: 1; }
.page-product .pdp-price-save { line-height: 1; font-size: var(--text-xs); font-weight: 600; color: var(--brand-secondary); }
.page-product .upsell-card { transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.page-product .upsell-card:hover { border-style: solid; background: var(--brand-bg); }
.page-product .upsell-card .link-arrow { color: var(--brand-secondary); }

.page-product .nav-tabs { border-bottom-color: var(--brand-border); gap: .25rem; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.page-product .nav-tabs .nav-link {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
    color: var(--brand-text-secondary);
    border: 0;
    background: transparent;
    border-radius: 0;
}
.page-product .nav-tabs .nav-link:hover { color: var(--brand-primary); border-color: transparent; }
.page-product .nav-tabs .nav-link.active {
    color: var(--brand-text);
    box-shadow: inset 0 -3px 0 var(--brand-primary);
}
.page-product .tab-content { background: transparent; border: 0; border-radius: 0; }
.page-product .tab-content .table th { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-text); }

.page-product .config-summary .summary-preview img { object-fit: contain; background: var(--brand-bg); }
.page-product .list-group-numbered > .list-group-item::before { font-family: var(--font-display); font-weight: 800; color: var(--brand-primary); margin-right: .5rem; }

/* Product option labels (app_bootstrap5 view_options.php) and the app_infiniteoptions
   add-on group label share the Bootstrap `.form-label` class — brand the heading font and
   drop a step below the 1rem body/control size. Colour itself comes from colors.css's
   `.form-label { color: var(--brand-text); }`, which flips with the theme: #282828 on
   #FFFFFF ≈ 14.9:1 in light, #FFFFFF on #1C1D20 ≈ 17.4:1 in dark — both keep 1.4.3
   Contrast comfortably clear at this size. */
.page-product .options .option .form-label,
.page-product .j2c-addon-group__label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
}

@media (max-width: 991.98px) {
    .page-product .config-summary { position: static; }
}

/* WCAG 2.2 SC 1.4.3 Contrast (Minimum): core's price partial renders the current
   price at Bootstrap's computed secondary text colour, which measures 4.24:1 on the
   #1C1D20 ink surface (needs 4.5:1 at 16px regular). Override with --brand-border-strong
   (#8A9099) -- already shipped for UI component edges, 5.24:1 here -- so no new token. */
.page-product .fs-6 > .j2commerce-product-price {
    color: var(--brand-border-strong);
}