/**
 * p-product.css — split out of template.css.
 *
 * Loaded by templates/tires/includes/head.php only when the active page class is
 * one of: page-product. Every rule here is scoped to one of those classes, so the file is
 * inert anywhere else — it was previously shipped to every request for nothing.
 */

/* ---- pages/product-detail.css ---- */
/* ============================================================
   PRODUCT DETAIL PAGE — product-detail.css
   Scope: .page-product — all rules prefixed
   Depends on: copper.css (tokens), styles.css (components)
   Lines: ~260
   ============================================================ */

/* ---- BREADCRUMB STRIP ---- */
.page-product .pdp-breadcrumb-strip {
    background: var(--brand-bg-surface);
    border-bottom: 1px solid var(--brand-border);
    padding-block: var(--space-3);
}

/* ---- MAIN PRODUCT LAYOUT ---- */
.page-product .pdp-layout {
    display: grid;
    /* minmax(0, 1fr) clamps each track to the column width instead of 1fr's implicit
       auto minimum, which let Swiper's own slide sizing push the track (and the whole
       grid) wider without limit. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
    padding-block: var(--space-8);
}

@media (max-width: 991.98px) {
    .page-product .pdp-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }
}

/* ---- GALLERY (LEFT COLUMN) ----
   Structural sizing (Swiper wrapper/slide layout, thumb width, active-state class)
   comes from the stock .product-gallery-main / .product-gallery-thumbs rules in
   media/com_j2commerce/css/site/j2commerce.css — the markup carries both class sets.
   These rules only add the tires look on top of that stock contract. */
.page-product .gallery-col {
    position: sticky;
    top: 90px;
    min-width: 0;
}

.page-product .gallery-main {
    aspect-ratio: 1 / 1;
    background: var(--brand-bg-elevated);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-3);
    min-width: 0;
}

/* Fill the aspect-ratio square set above instead of fighting it with Swiper's own
   sizing pass. */
.page-product .gallery-main .swiper-wrapper,
.page-product .gallery-main .swiper-slide {
    height: 100%;
}

.page-product .gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.page-product .gallery-main:hover img {
    transform: scale(1.04);
}

/* Thumbnail strip stays a Swiper (display:flex via j2commerce.css); a CSS grid here
   fought Swiper's own slide-width pass and was the source of the runaway growth loop.
   The 4-across look comes from `slidesPerView: 4` in view_images.php's Swiper init. */
.page-product .gallery-thumbs {
    min-width: 0;
}

.page-product .gallery-thumb {
    background: var(--brand-bg-elevated);
    border: 2px solid var(--brand-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.page-product .gallery-thumb img {
    border-radius: var(--radius-md);
}

.page-product .gallery-thumb:hover {
    border-color: var(--brand-primary-light);
}

.page-product .gallery-thumb.active,
.page-product .gallery-thumb.swiper-slide-thumb-active {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-glow-primary);
}

/* ---- PRODUCT INFO (RIGHT COLUMN) ---- */
.page-product .pdp-brand {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-primary-light);
    font-weight: var(--weight-semibold);
    font-family: var(--font-heading);
    margin-bottom: var(--space-2);
}

.page-product .pdp-title {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    color: var(--brand-text);
    margin-bottom: var(--space-3);
}

@media (max-width: 767.98px) {
    .page-product .pdp-title {
        font-size: var(--text-3xl);
    }
}

/* ---- RATING ROW ---- */
.page-product .pdp-rating {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.page-product .pdp-stars {
    color: var(--color-star);
    font-size: var(--text-md);
    letter-spacing: 1px;
}

.page-product .pdp-review-count {
    font-size: var(--text-sm);
    color: var(--brand-primary-light);
    text-decoration: underline;
    cursor: pointer;
}

/* ---- PRICE BLOCK ---- */
.page-product .pdp-price-block {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.page-product .pdp-price-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-text-secondary);
    font-family: var(--font-heading);
    margin-bottom: var(--space-2);
}

.page-product .pdp-price-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.page-product .pdp-price-wholesale {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    color: var(--brand-text);
    line-height: 1;
}

.page-product .pdp-price-retail {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: var(--brand-text-secondary);
    text-decoration: line-through;
}

.page-product .badge-gold {
    background: var(--brand-secondary);
    color: var(--brand-text-on-light);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-xs);
    align-self: center;
}

.page-product .pdp-price-note {
    font-size: var(--text-xs);
    color: var(--brand-text-secondary);
    margin-top: var(--space-2);
}

/* ---- SIZE SELECTOR ---- */
.page-product .pdp-section-label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-product .size-chips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.page-product .size-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    background: var(--brand-bg-card);
    border: 2px solid var(--brand-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-heading);
}

.page-product .size-chip:hover {
    border-color: var(--brand-primary-light);
    background: var(--brand-bg-elevated);
}

.page-product .size-chip.active {
    border-color: var(--brand-primary);
    background: var(--brand-primary-subtle);
    box-shadow: var(--shadow-glow-primary);
}

.page-product .size-chip.out-of-stock {
    opacity: 0.45;
    cursor: not-allowed;
}

.page-product .size-chip .sc-size {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
}

.page-product .size-chip .sc-price {
    font-size: var(--text-sm);
    color: var(--brand-secondary);
    font-weight: var(--weight-semibold);
}

.page-product .size-chip .sc-stock {
    font-size: var(--text-xs);
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: 0;
}

.page-product .size-chip.active .sc-stock { color: var(--color-success-text); }
.page-product .size-chip:not(.active) .sc-stock { color: var(--brand-text-secondary); }

/* ---- QUANTITY + SET OF 4 ---- */
.page-product .pdp-qty-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.page-product .qty-stepper {
    display: flex;
    align-items: center;
    border: 2px solid var(--brand-border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--brand-bg-card);
}

.page-product .qty-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--brand-text);
    cursor: pointer;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.page-product .qty-btn:hover {
    background: var(--brand-bg-elevated);
    color: var(--brand-primary-light);
}

.page-product .qty-input {
    width: 56px;
    text-align: center;
    background: transparent;
    border: none;
    color: var(--brand-text);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* The native number spinner reserves space on the right, so the value reads
   off-centre even with text-align:center. Same treatment as .cart-qty-input. */
.page-product .qty-input::-webkit-outer-spin-button,
.page-product .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.page-product .qty-input:focus {
    outline: none;
}

.page-product .btn-set-of-4 {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--brand-secondary);
    color: var(--brand-secondary);
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    transition: all var(--transition-fast);
}

.page-product .btn-set-of-4:hover {
    background: var(--brand-secondary);
    color: var(--brand-text-on-light);
}

/* ---- CART ACTIONS ---- */
.page-product .pdp-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.page-product .pdp-wish-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
}

.page-product .pdp-notify-link {
    color: var(--brand-text-secondary);
    font-size: var(--text-sm);
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.page-product .pdp-notify-link:hover {
    color: var(--brand-secondary);
}

/* ---- FITMENT CONFIRM BOX ---- */
.page-product .fitment-confirm {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.page-product .fitment-confirm-label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-secondary);
    margin-bottom: var(--space-3);
}

.page-product .fitment-selects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

@media (max-width: 575.98px) {
    .page-product .fitment-selects {
        grid-template-columns: 1fr;
    }
}

.page-product .fitment-select {
    background: var(--brand-bg);
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    width: 100%;
}

.page-product .fitment-select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-glow-primary);
}

.page-product .fitment-result {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-success-text);
}

.page-product .fitment-result i {
    font-size: var(--text-md);
}

/* ---- STOCK + SKU META ROW ----
   justify-content:space-between does the whole job of item 8: with both children
   the SKU is pushed to the right edge, and when the store owner switches the stock
   chip off the SKU is the only child and falls back to the start edge on its own.
   No conditional class needed in the template. */
.page-product .pdp-meta-row {
    min-height: 1.5rem;
}

.page-product .product-sku {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
}

.page-product .product-sku .sku-label {
    color: var(--brand-text-secondary);
}

.page-product .product-sku .sku-value {
    color: var(--brand-text);
}

/* ---- TRUST ICONS ROW (inline) ---- */
.page-product .pdp-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--brand-border);
}

.page-product .pdp-trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-secondary);
}

.page-product .pdp-trust-item i {
    color: var(--brand-primary);
    font-size: var(--text-md);
}

/* ---- TABS SECTION ---- */
.page-product .pdp-tabs-section {
    padding-block: var(--space-10);
    border-top: 1px solid var(--brand-border);
}

.page-product .tab-nav {
    display: flex;
    /* Centred, but flex-start once the rail overflows: `center` alone would clip
       the first tab out of reach on a narrow viewport, since overflow scrolling
       cannot reveal content pushed past the start edge. */
    justify-content: center;
    gap: 0;
    border-bottom: 2px solid var(--brand-border);
    margin-bottom: var(--space-8);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.page-product .tab-nav::-webkit-scrollbar { display: none; }

.page-product .tab-nav [data-tab] {
    padding: var(--space-4) var(--space-6);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    margin-bottom: -2px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.page-product .tab-nav [data-tab]:hover {
    color: var(--brand-text);
}

.page-product .tab-nav [data-tab].active {
    color: var(--brand-primary-light);
    border-bottom-color: var(--brand-primary);
}

.page-product [data-tab-panel] {
    display: none;
}

.page-product [data-tab-panel].active {
    display: block;
}

/* Specs table */
.page-product .spec-table {
    width: 100%;
    border-collapse: collapse;
}

.page-product .spec-table tr {
    border-bottom: 1px solid var(--brand-border);
}

.page-product .spec-table tr:last-child {
    border-bottom: none;
}

.page-product .spec-table th {
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-secondary);
    background: var(--brand-bg-card);
    text-align: left;
    width: 40%;
    font-weight: var(--weight-semibold);
}

.page-product .spec-table td {
    padding: var(--space-3) var(--space-4);
    color: var(--brand-text-body);
    font-size: var(--text-base);
    background: var(--brand-bg-surface);
}

.page-product .spec-table tr:nth-child(even) th,
.page-product .spec-table tr:nth-child(even) td {
    background: var(--brand-bg-card);
}

/* Reviews tab */
.page-product .reviews-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-10);
    align-items: start;
    margin-bottom: var(--space-8);
}

@media (max-width: 767.98px) {
    .page-product .reviews-header {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

.page-product .reviews-overall {
    text-align: center;
    min-width: 160px;
}

.page-product .reviews-big-score {
    font-family: var(--font-heading);
    font-size: var(--text-6xl);
    font-weight: var(--weight-bold);
    color: var(--brand-text);
    line-height: 1;
}

.page-product .reviews-stars-lg {
    color: var(--color-star);
    font-size: var(--text-xl);
    margin-block: var(--space-2);
}

.page-product .reviews-count-note {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
}

.page-product .rating-bar-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.page-product .rating-bar-label {
    font-size: var(--text-sm);
    font-family: var(--font-heading);
    color: var(--brand-text-secondary);
    width: 20px;
    text-align: right;
}

.page-product .rating-bar-track {
    flex: 1;
    height: 8px;
    background: var(--brand-bg-elevated);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.page-product .rating-bar-fill {
    height: 100%;
    background: var(--color-star);
    border-radius: var(--radius-pill);
}

.page-product .rating-bar-count {
    font-size: var(--text-xs);
    color: var(--brand-text-secondary);
    width: 28px;
}

.page-product .review-card {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
}

.page-product .review-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.page-product .review-author-name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    text-transform: uppercase;
    color: var(--brand-text);
}

.page-product .review-meta {
    font-size: var(--text-xs);
    color: var(--brand-text-secondary);
}

.page-product .review-verified {
    font-size: var(--text-xs);
    color: var(--color-success-text);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.page-product .review-stars {
    color: var(--color-star);
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
}

.page-product .review-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--brand-text);
    margin-bottom: var(--space-2);
}

.page-product .review-body {
    color: var(--brand-text-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

/* ---- RELATED / CROSS-SELL SECTIONS ---- */
.page-product .pdp-related {
    padding-block: var(--space-12);
    border-top: 1px solid var(--brand-border);
}

@media (max-width: 575.98px) {
    .page-product .size-chips-grid {
        grid-template-columns: 1fr;
    }

    .page-product .pdp-qty-row {
        flex-direction: column;
        align-items: stretch;
    }

    .page-product .pdp-trust {
        flex-direction: column;
    }

    .page-product .tab-nav {
        justify-content: flex-start;
    }
}

/* ---- STOCK-STATUS DOT COLORS (size chips + spec table) ---- */
/* Applied to the <i> icon inside .sc-stock spans */
.page-product .sc-stock.in  i { color: var(--color-success-text); }
.page-product .sc-stock.low i { color: var(--color-warning-text); }
.page-product .sc-stock.out i { color: var(--color-danger-text); }

/* Out-of-stock .sc-stock span text color */
.page-product .sc-stock.out { color: var(--color-danger-text); }

/* Spec table stock cell text colors */
.page-product .spec-table td.stock-in  { color: var(--color-success-text); }
.page-product .spec-table td.stock-low { color: var(--color-warning-text); }
.page-product .spec-table td.stock-out { color: var(--color-danger-text); }

/* ---- DESCRIPTION TAB: FEATURE LIST + IMAGE ---- */
.page-product .pdp-features-list {
    color: var(--brand-text-body);
    line-height: var(--leading-relaxed);
    padding-left: 1.25rem;
}

.page-product .pdp-desc-img {
    border-radius: var(--radius-lg);
    border: 1px solid var(--brand-border);
}

/* ---- SPECS TAB: AVAILABLE SIZES CARD ---- */
.page-product .spec-sizes-card {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}

/* ---- FITMENT TAB: FIT CARDS ---- */
.page-product .fit-card {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.page-product .fit-card-name {
    font-family: var(--font-heading);
    text-transform: uppercase;
    color: var(--brand-text);
    margin-bottom: var(--space-2);
}

.page-product .fit-card-detail {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    margin: 0;
}

/* ---- RATING BAR FILL WIDTHS ---- */
.page-product .rating-bar-fill.lvl5 { width: 72%; }
.page-product .rating-bar-fill.lvl4 { width: 19%; }
.page-product .rating-bar-fill.lvl3 { width:  6%; }
.page-product .rating-bar-fill.lvl2 { width:  2%; }
.page-product .rating-bar-fill.lvl1 { width:  1%; }