/* ============================================================
   EFESTO - Prodotti Page Styles
   ============================================================ */

/* Pagina prodotti: scroll deterministico.
   - overflow-anchor:none -> il browser non ri-aggiusta lo scroll quando i
     pannelli cambiano altezza.
   - scroll-behavior:auto -> nessuno scroll "smooth" incidentale (es. il focus
     dei bottoni) che, con lo smooth globale, causava scroll fantasma.
   Gli scroll volutamente smooth (tab prodotti, àncore) restano tali perché
   passano behavior:'smooth' esplicitamente via JS. */
html {
    overflow-anchor: none;
    scroll-behavior: auto;
}

/* Product Navigation Tabs — sticky */
.product-tabs-wrap {
    position: sticky;
    top: 56px;
    z-index: 100;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--grey-100);
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-lg);
}

.product-tabs {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

.product-tab {
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .7em 1.5em;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--grey-500);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    transition: color .3s ease, background .3s ease;
}

/* Border trace animation — 4 edges drawn sequentially via gradients */
.product-tab::before,
.product-tab::after {
    content: '';
    position: absolute;
    border-radius: inherit;
}

/* Top + Right borders */
.product-tab::before {
    top: 0; left: 0; right: 0; bottom: 0;
    border-top: 1.5px solid var(--green);
    border-right: 1.5px solid var(--green);
    clip-path: inset(0 100% 100% 0);
    transition: clip-path .35s cubic-bezier(.4, 0, .2, 1);
}

/* Bottom + Left borders */
.product-tab::after {
    top: 0; left: 0; right: 0; bottom: 0;
    border-bottom: 1.5px solid var(--green);
    border-left: 1.5px solid var(--green);
    clip-path: inset(100% 0 0 100%);
    transition: clip-path .35s cubic-bezier(.4, 0, .2, 1) .15s;
}

.product-tab:hover::before,
.product-tab.active::before {
    clip-path: inset(0 0 0 0);
}

.product-tab:hover::after,
.product-tab.active::after {
    clip-path: inset(0 0 0 0);
}

/* Reverse animation on mouse leave */
.product-tab:not(:hover):not(.active)::before {
    clip-path: inset(0 100% 100% 0);
    transition: clip-path .3s cubic-bezier(.4, 0, .2, 1) .1s;
}

.product-tab:not(:hover):not(.active)::after {
    clip-path: inset(100% 0 0 100%);
    transition: clip-path .3s cubic-bezier(.4, 0, .2, 1);
}

.product-tab:hover,
.product-tab.active {
    color: var(--green);
    background: var(--green-pale);
}

/* Product Detail Section */
.product-detail {
    padding: var(--space-xl) 0 var(--space-2xl);
    position: relative;
}

.product-detail + .product-detail {
    border-top: none;
}

.product-detail:nth-child(even) {
    background: var(--off-white);
}

.product-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-lg);
    align-items: center;
    position: relative;
}

.product-detail:nth-child(even) .product-grid {
    grid-template-columns: 1fr 1.15fr;
}

.product-detail:nth-child(even) .product-img {
    order: 2;
}

.product-detail:nth-child(even) .product-info {
    order: 1;
}

.product-img {
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--cream);
    aspect-ratio: 4/3;
    position: relative;
}

.product-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease-out);
}

.product-img:hover img {
    transform: scale(1.03);
}

/* Linea decorativa verticale accanto all'immagine */
.product-img::before {
    content: '';
    position: absolute;
    top: var(--space-md);
    bottom: var(--space-md);
    width: 2px;
    background: var(--green);
    z-index: 1;
}

.product-detail:nth-child(odd) .product-img::before {
    right: -1.5rem;
}

.product-detail:nth-child(even) .product-img::before {
    left: -1.5rem;
}

.product-info {
    position: relative;
}

.product-info .sys-tag {
    margin-bottom: var(--space-sm);
}

.product-info h2 {
    margin-bottom: var(--space-sm);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.product-info > p {
    font-size: .9rem;
    line-height: 1.8;
    margin-bottom: var(--space-md);
}

/* Product Features */
.product-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    background: var(--off-white);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--green);
}

.product-detail:nth-child(even) .product-features {
    background: var(--white);
}

.product-feature {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .82rem;
    color: var(--grey-500);
}

.product-feature svg {
    width: 16px;
    height: 16px;
    stroke: var(--green);
    fill: none;
    stroke-width: 2.5;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Specs Table */
.specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-md);
}

.specs-table th,
.specs-table td {
    padding: .8em 1em;
    text-align: left;
    font-size: .85rem;
    border-bottom: 1px solid var(--grey-100);
}

.specs-table th {
    font-weight: 600;
    color: var(--grey-700);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.specs-table td {
    color: var(--grey-500);
}

/* ============================================================
   SPECS PANEL — "Scopri di piu" expandable technical details
   ============================================================ */

/* CTA Button Group */
.product-cta-group {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--space-md);
}

/* 3D Viewer button — placeholder disabled */
.btn-3d {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    opacity: .45;
    cursor: not-allowed;
    position: relative;
}

.btn-3d svg {
    flex-shrink: 0;
}

.btn-3d::after {
    content: 'COMING SOON';
    position: absolute;
    top: -8px;
    right: -10px;
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--white);
    background: var(--green);
    padding: .2em .5em;
    border-radius: 3px;
    line-height: 1;
}

/* Scopri di piu button — toggle state */
.btn-scopri[aria-expanded="true"] {
    border-color: var(--green);
    color: var(--green);
    background: var(--green-pale);
}

.btn-scopri[aria-expanded="true"]::after {
    content: '\2191' !important;
}

/* Panel Container — collapsed by default.
   Usa il trick grid-template-rows 0fr -> 1fr: l'altezza si anima da sola
   in base al contenuto reale (anche immagini che caricano dopo), senza
   calcoli JS di max-height -> niente tagli né scatti. */
.specs-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
    transition: grid-template-rows var(--med) var(--ease),
                opacity var(--fast) var(--ease),
                margin-top var(--fast) var(--ease);
}

.specs-panel > .specs-panel-inner {
    overflow: hidden;
    min-height: 0;
    transition: padding var(--med) var(--ease);
}

/* Da chiuso azzeriamo anche padding e bordo verticali dell'inner, altrimenti
   restano ~34px residui (0fr = minmax(auto,0fr) non comprime il padding). */
.specs-panel:not(.open) > .specs-panel-inner {
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
}

.specs-panel.open {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: var(--space-xl);
}

/* Inner wrapper — provides visual container */
.specs-panel-inner {
    background: var(--white);
    border: 1px solid var(--grey-100);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    position: relative;
}

/* Green accent line at top */
.specs-panel-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--space-lg);
    right: var(--space-lg);
    height: 3px;
    background: var(--green);
    border-radius: 0 0 2px 2px;
}

/* Panel Header */
.specs-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--grey-100);
}

.specs-header .section-label {
    margin-bottom: var(--space-xs);
}

.specs-header h3 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    color: var(--grey-800);
}

.specs-header h3 em {
    color: var(--green);
}

/* ---- Catalog Product — render left, text center, components right ---- */
.catalog-product {
    padding: var(--space-lg) 0;
}

.catalog-product + .catalog-product {
    border-top: 2px solid var(--green);
}

/* Product title bar */
.catalog-product-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.catalog-product-title h4 {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    color: var(--grey-800);
    margin: 0;
}

/* Layout — 3 columns: render | text | components */
.catalog-product-layout {
    display: grid;
    grid-template-columns: 5fr 6fr 4fr;
    gap: var(--space-lg);
    align-items: stretch;
}

/* Render — left column, height driven by components column */
.catalog-product-render {
    position: relative;
    background: transparent;
    border-radius: var(--radius-md);
    border: 1px solid var(--grey-100);
    min-height: 0;
    overflow: hidden;
}

.catalog-product-render img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--space-sm);
}

/* Description — center column, vertically centered */
.catalog-product-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
}

.catalog-product-desc p {
    font-size: .85rem;
    line-height: 1.85;
    color: var(--grey-500);
}

.catalog-product-desc p + p {
    margin-top: var(--space-sm);
}

/* Components column — right side, stacked vertically */
.catalog-components-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 580px;
}

/* Single component card — grows to fill available space */
.catalog-comp {
    background: transparent;
    border: 1px solid var(--grey-100);
    border-radius: var(--radius-md);
    padding: var(--space-xs);
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.catalog-comp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.catalog-comp-name {
    font-family: var(--font-body);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--grey-800);
}

.catalog-comp-code {
    font-family: var(--font-body);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--white);
    background: var(--green);
    padding: .25em .6em;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.catalog-comp-img {
    border-radius: var(--radius-sm);
    padding: var(--space-xs);
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalog-comp-img img {
    width: 100%;
    max-width: 160px;
    height: auto;
    object-fit: contain;
}

/* VMC layout — same 3-column grid, renders on both sides */
.vmc-layout {
    grid-template-columns: 5fr 6fr 5fr;
}

.vmc-render-col {
    display: flex;
    flex-direction: column;
    min-height: 580px;
}

.vmc-render-col .catalog-product-render.vmc-render {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.vmc-render-col .catalog-product-render.vmc-render img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--space-sm);
}

.catalog-render-label {
    display: block;
    text-align: center;
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--grey-400);
    margin-top: var(--space-xs);
}

/* Responsive */
@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: 1fr;
    }

    .product-detail:nth-child(even) .product-grid {
        grid-template-columns: 1fr;
    }

    .product-detail:nth-child(even) .product-img {
        order: 0;
    }

    .product-detail:nth-child(even) .product-info {
        order: 0;
    }

    .product-img::before {
        display: none;
    }

    .product-features {
        grid-template-columns: 1fr;
    }

    .catalog-product-layout {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }

    /* Render del monoblocco completo: in mobile/tablet non c'è una colonna
       "fratello" che ne stira l'altezza, quindi l'immagine assoluta farebbe
       collassare il contenitore. La rimettiamo in flusso normale e visibile. */
    .catalog-product-render {
        grid-column: 1 / -1;
        position: static;
        overflow: visible;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: 0;
    }

    .catalog-product-render img {
        position: static;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 340px;
        padding: 0;
    }

    /* Colonna componenti: niente altezza minima forzata in mobile */
    .catalog-components-col {
        min-height: 0;
    }

    /* VMC: stessa logica, render in flusso verticale a dimensione piena */
    .vmc-render-col {
        min-height: 0;
    }

    .vmc-render-col .catalog-product-render.vmc-render {
        position: static;
        overflow: visible;
        display: flex;
        justify-content: center;
    }

    .vmc-render-col .catalog-product-render.vmc-render img {
        position: static;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 340px;
        padding: 0;
    }
}

@media (max-width: 768px) {
    /* Mostra solo il codice (AV, T, TP, FRG, TND, VMC, ZANZ) — etichetta lunga nascosta */
    .product-tab .pt-name {
        display: none;
    }

    .product-tabs {
        gap: .35rem;
        justify-content: space-between;
    }

    .product-tab {
        font-size: .68rem;
        padding: .55em .7em;
        flex: 0 1 auto;
        letter-spacing: .08em;
    }

    .specs-panel-inner {
        padding: var(--space-md);
    }

    .specs-panel-inner::before {
        left: var(--space-md);
        right: var(--space-md);
    }

    .product-cta-group {
        flex-direction: column;
        align-items: stretch;
    }

    .product-cta-group .btn {
        justify-content: center;
        text-align: center;
    }

    .catalog-product-layout {
        grid-template-columns: 1fr;
    }

    .catalog-product-render {
        grid-column: auto;
    }

    .catalog-product-render img {
        max-height: 380px;
    }

    .catalog-components-col {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .catalog-components-col .catalog-comp {
        flex: 1 1 120px;
    }
}

@media (max-width: 480px) {
    .specs-panel-inner {
        padding: var(--space-sm);
    }

    .catalog-product-render img,
    .vmc-render-col .catalog-product-render.vmc-render img {
        max-height: 320px;
    }
}