/* --- Protectie la valori lungi ---------------------------------------------
   Un singur parametru fara spatii (cod produs, serie, URL) nu are unde sa se rupa,
   asa ca isi impinge containerul si trage dupa el tot layout-ul: flex/grid items au
   implicit min-width:auto, deci coloana creste peste latimea paginii si apare scroll
   orizontal pe tot documentul. min-width:0 lasa containerul sa se stranga, iar
   overflow-wrap ii da textului voie sa treaca pe rand nou. */
#public-product-info, #public-product-images { min-width: 0; }
#public-product-info h1,
#public-product-info h4,
#public-product-info p,
.key-spec-card, .key-spec-label, .key-spec-value {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.spec-dl-row > * { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

.spec-table-scroll { -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; overflow-x: auto; }
/* fit-content + min-width:100% => tabelul lat produce scroll in wrapper, nu e taiat de overflow:hidden */
.spec-table-inner { width: fit-content; min-width: 100%; max-width: none; margin: 0 auto; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.75rem; overflow: hidden; }
.spec-table { border-collapse: collapse; font-size: 0.875rem; width: 100%; table-layout: auto; }
.spec-table th, .spec-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.spec-table th { font-weight: 700; color: #1e293b; background: #f1f5f9; border-bottom: 2px solid #ea580c; }
.spec-table tbody tr:nth-child(even) { background: #ffffff; }
.spec-table tbody tr:nth-child(odd) { background: #f8fafc; }
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table td:first-child, .spec-table th:first-child { white-space: normal; min-width: 8rem; }

/* Tabel ingust (max 3 coloane): valorile lungi se rup pe randuri in loc sa lateasca tabelul.
   Fara asta, un "Model(e) disponibile: Agaria Statuario, Angelo Statuario, ..." tine tot randul
   pe o singura linie, impinge coloana de 70% peste latimea ei si striveste "Puncte Forte" de langa. */
.spec-table-fit .spec-table { width: 100%; table-layout: auto; }
.spec-table-fit .spec-table th, .spec-table-fit .spec-table td { white-space: normal; overflow-wrap: break-word; }
@media (max-width: 1024px) {
    .spec-table-fit.spec-table-scroll-mobile .spec-table-inner { width: 100% !important; }
    .spec-table-fit.spec-table-scroll-mobile .spec-table { width: 100% !important; min-width: 0 !important; }
}
@media (max-width: 640px) {
    /* tabelul incape, deci nu mai are rost sa iasa din padding-ul parintelui ca sa faca scroll */
    .spec-table-fit.spec-table-scroll-mobile {
        margin-left: 0 !important; margin-right: 0 !important;
        padding-left: 0 !important; padding-right: 0 !important;
        width: 100% !important; overflow-x: auto !important;
    }
}

.spec-dl { margin: 0; padding: 0; list-style: none; max-width: 100%; border: 1px solid #e2e8f0; border-radius: 0.75rem; overflow: hidden; background: #f8fafc; }
.spec-dl-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: 0.75rem 1.5rem; align-items: baseline; padding: 0.75rem 1rem; border-bottom: 1px solid #e2e8f0; }
.spec-dl-row:last-child { border-bottom: 0; }
.spec-dl-row:nth-child(even) { background: #ffffff; }
.spec-dl-row:nth-child(odd) { background: #f8fafc; }
.spec-dl-dt { font-weight: 700; color: #1e293b; font-size: 0.875rem; }
.spec-dl-dd { color: #475569; font-size: 0.875rem; }

/* Derulare pe mobil pentru tabele */
@media (max-width: 1024px) {
    .spec-table-scroll-mobile {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        display: block !important;
    }
    .spec-table-scroll-mobile .spec-table-inner {
        width: fit-content !important;
        min-width: 100%;
        display: block !important;
        overflow: visible !important;
    }
    .spec-table-scroll-mobile .spec-table {
        min-width: max-content !important;
        width: max-content !important;
        display: table !important;
    }
}

@media (max-width: 640px) {
    .spec-dl-row { grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; padding: 0.5rem 0.75rem; }
    .spec-table { font-size: 0.65rem !important; table-layout: auto !important; }
    .spec-table th, .spec-table td { padding: 0.4rem 0.6rem; font-size: 0.65rem !important; }
    .spec-table td:first-child, .spec-table th:first-child { min-width: 5rem; font-size: 0.65rem !important; }
    /* Iesim din spatiul parintelui, ca derularea sa prinda toata latimea */
    .spec-table-scroll-mobile {
        overflow-x: scroll !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        position: relative;
        margin-left: -2rem;
        margin-right: -2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        width: calc(100% + 4rem);
    }
    .spec-table-scroll-mobile .spec-table-inner {
        min-width: 100%;
        width: fit-content !important;
        display: block !important;
        overflow: visible !important;
        max-width: none !important;
    }
    .spec-table-scroll-mobile .spec-table {
        min-width: max-content !important;
        width: max-content !important;
        display: table !important;
        table-layout: auto !important;
    }
}

#main-product-image { transition: transform 0.3s ease; }
#product-lightbox:not(.hidden) { display: flex !important; }
.product-gallery-thumb.active { border-color: #ea580c; box-shadow: 0 0 0 2px rgba(234,88,12,0.3); }

/* Lightbox button positioning */
#product-lightbox #product-lightbox-close {
    top: 1rem !important;
    right: 1rem !important;
    left: auto !important;
    bottom: auto !important;
}
#product-lightbox #product-lightbox-prev {
    left: 2rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    right: auto !important;
}
#product-lightbox #product-lightbox-next {
    right: 2rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    left: auto !important;
}