/* ==========================================================
   Blueprint Specifications Experience
   Desktop structure + mobile tab composition
   ========================================================== */

/* ----------------------------------------------------------
   Shared panel structure
---------------------------------------------------------- */

.product-specifications__panels {
    display: grid;
    gap: var(--space-xl);
}

.specification-panel {
    min-width: 0;
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border);
}

.specification-panel:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.specification-panel__header {
    max-width: 680px;
    margin-bottom: var(--space-lg);
}

.specification-panel__eyebrow {
    display: inline-block;
    margin-bottom: .55rem;
    color: var(--color-primary);
    font-size: .72rem;
    font-weight: var(--fw-bold);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.specification-panel__title {
    margin: 0 0 .7rem;
    color: var(--color-text);
    font-size: clamp(1.45rem, 2.4vw, 2.1rem);
    letter-spacing: -.025em;
    line-height: 1.08;
}

.specification-panel__description {
    max-width: 58ch;
    margin: 0;
    color: var(--color-text-light);
    font-size: .94rem;
    line-height: 1.7;
}

.specification-panel__list {
    margin: 0;
    border-top: 1px solid var(--color-border);
}

.specification-panel__row {
    display: grid;
    grid-template-columns:
        minmax(140px, .45fr)
        minmax(0, 1fr);
    align-items: center;
    gap: var(--space-lg);
    padding-block: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.specification-panel__row dt {
    color: var(--color-text-light);
    font-size: .74rem;
    font-weight: var(--fw-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.specification-panel__row dd {
    margin: 0;
    color: var(--color-text);
    font-weight: var(--fw-semibold);
    text-align: right;
}

/*
 * The care panel uses the full available width inside the
 * existing specification card.
 */

.specification-panel--care {
    padding-top: .25rem;
}

/*
 * The existing CSS used pseudo-elements for care icons.
 * The new PHP supplies real consistent SVG icons.
 */

.care-card::before {
    display: none !important;
}

.care-card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.35rem;
    border-radius: 50%;
    background: rgba(181, 138, 96, .13);
    color: var(--color-primary);
}

/* ----------------------------------------------------------
   Mobile tab system
---------------------------------------------------------- */

.mobile-specification-tabs {
    display: none;
}

@media (max-width: 760px) {
    .product-specifications__layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .product-specifications__main {
        padding: 0;
        overflow: hidden;
        border-radius: 24px;
        background: var(--color-surface);
    }

    .mobile-specification-tabs {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(106px, 1fr);
        gap: .5rem;
        width: 100%;
        padding: .75rem;
        overflow-x: auto;
        border-bottom: 1px solid var(--color-border);
        background: rgba(255, 255, 255, .86);
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-specification-tabs::-webkit-scrollbar {
        display: none;
    }

    .mobile-specification-tab {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: .42rem;
        min-height: 76px;
        min-width: 0;
        padding: .55rem .5rem;
        border: 1px solid transparent;
        border-radius: 16px;
        background: transparent;
        color: var(--color-text-light);
        font: inherit;
        font-size: .68rem;
        font-weight: var(--fw-semibold);
        line-height: 1.2;
        scroll-snap-align: start;
        cursor: pointer;
        transition:
            color .2s ease,
            border-color .2s ease,
            background-color .2s ease,
            box-shadow .2s ease;
    }

    .mobile-specification-tab__icon {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--color-background);
        color: var(--color-text-light);
        transition:
            color .2s ease,
            background-color .2s ease;
    }

    .mobile-specification-tab.is-active {
        border-color: rgba(181, 138, 96, .25);
        background: rgba(181, 138, 96, .1);
        color: var(--color-text);
        box-shadow: 0 7px 20px rgba(45, 40, 34, .06);
    }

    .mobile-specification-tab.is-active
    .mobile-specification-tab__icon {
        background: var(--color-primary);
        color: #fff;
    }

    .mobile-specification-tab:focus-visible {
        outline: 3px solid rgba(181, 138, 96, .25);
        outline-offset: 2px;
    }

    .product-specifications__panels {
        display: block;
    }

    .specification-panel {
        min-height: 390px;
        padding: 1.35rem 1rem 1.25rem;
        border: 0;
        scroll-margin-top:
            calc(
                var(--header-height, 70px)
                + 20px
            );
    }

    .specification-panel[hidden] {
        display: none !important;
    }

    .specification-panel__header {
        margin-bottom: 1.2rem;
    }

    .specification-panel__title {
        font-size: 1.55rem;
    }

    .specification-panel__description {
        font-size: .88rem;
        line-height: 1.6;
    }

    .specification-panel__row {
        grid-template-columns:
            minmax(100px, .45fr)
            minmax(0, 1fr);
        gap: 1rem;
        padding-block: .9rem;
    }

    .specification-panel__row dt {
        font-size: .66rem;
    }

    .specification-panel__row dd {
        font-size: .86rem;
        line-height: 1.45;
    }

    /*
     * Care cards remain a swipe rail inside the Care tab.
     */

    .specification-panel--care {
        min-height: 430px;
    }

    .specification-panel--care
    .product-specifications__care-grid {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(84%, 1fr);
        gap: .9rem;
        width: 100%;
        padding: .1rem .1rem .8rem;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: inline mandatory;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .specification-panel--care
    .product-specifications__care-grid::-webkit-scrollbar {
        display: none;
    }

    .specification-panel--care
    .product-specifications__care-grid > * {
        min-width: 0;
        scroll-snap-align: start;
    }

    .care-card {
        min-height: 250px;
    }

    /*
     * Included items and warranty become a compact horizontal
     * support rail instead of two vertically stacked cards.
     */

    .product-specifications__sidebar {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(88%, 1fr);
        gap: 1rem;
        width: 100%;
        padding-bottom: .75rem;
        overflow-x: auto;
        scroll-snap-type: inline mandatory;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .product-specifications__sidebar::-webkit-scrollbar {
        display: none;
    }

    .product-specifications__sidebar > * {
        min-width: 0;
        scroll-snap-align: start;
    }

    .specification-card {
        min-height: 290px;
        padding: 1.35rem;
        border-radius: 22px;
    }
}

@media (max-width: 420px) {
    .mobile-specification-tabs {
        grid-auto-columns: 98px;
    }

    .mobile-specification-tab {
        min-height: 72px;
        font-size: .62rem;
    }

    .specification-panel {
        padding-inline: .9rem;
    }

    .specification-panel__row {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .specification-panel__row dd {
        text-align: left;
    }

    .specification-panel--care
    .product-specifications__care-grid {
        grid-auto-columns: minmax(90%, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-specification-tab,
    .mobile-specification-tab__icon {
        transition: none;
    }
}