/* Fazonetka – responzivní tabulky PÁNSKÉ V6
   Vychází z funkční V5.
   CSS je stejné; JS omezuje spuštění pouze na 12 ověřovaných pánských produktů.
*/


/* Fazonetka – responzivní tabulky V4
   Bezpečnější verze:
   - upravuje JEN tabulky, které se na mobilu skutečně nevejdou
   - měření funguje i uvnitř zavřeného accordionu díky skryté měřicí kopii
   - žádné nucené dělení 40/60 u běžných dvousloupcových tabulek
*/

@media (max-width: 767px) {

    /* Spotřeba materiálu – pouze pokud ji JS označí jako přetékající */
    .fz-table-consumption-original {
        display: none !important;
    }

    .fz-table-consumption-cards {
        display: block;
        width: 100%;
        margin: 12px 0 22px;
    }

    .fz-product-info-panel:not(.is-active) > .fz-table-consumption-cards {
        display: none !important;
    }

    .fz-product-info-panel.is-active > .fz-table-consumption-cards {
        display: block !important;
    }

    .fz-consumption-card {
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 14px;
        padding: 15px 14px;
        border: 1px solid #d7e9ed;
        border-radius: 10px;
        background: #fff;
    }

    .fz-consumption-card:last-child {
        margin-bottom: 0;
    }

    .fz-consumption-card-title {
        margin: 0 0 6px !important;
        font-size: 18px !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
    }

    .fz-consumption-card-subtitle {
        margin: 0 0 12px !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        font-weight: 600 !important;
    }

    .fz-consumption-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px;
        align-items: baseline;
        padding: 7px 0;
        border-bottom: 1px solid #edf2f3;
    }

    .fz-consumption-row:last-child {
        border-bottom: 0;
    }

    .fz-consumption-size,
    .fz-consumption-value {
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    .fz-consumption-value {
        white-space: nowrap;
        text-align: right;
        font-weight: 700;
    }

    .fz-consumption-note {
        margin: 12px 0 0 !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    /* Tabulky s obrázky/nákresy, které byly opravdu širší než mobil */
    .fz-table-mobile-fit {
        width: calc(100% - 36px) !important;
        max-width: calc(100% - 36px) !important;
        min-width: 0 !important;
        height: auto !important;
        margin-left: 18px !important;
        margin-right: 18px !important;
        table-layout: auto !important;
        box-sizing: border-box !important;
    }

    .fz-table-mobile-fit th,
    .fz-table-mobile-fit td {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
    }

    .fz-table-mobile-fit img {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }

    /* Běžná textová tabulka, která je jen o trochu širší:
       necháme její přirozené proporce, pouze ji stáhneme do šířky */
    .fz-table-mobile-safe-fit {
        width: calc(100% - 36px) !important;
        max-width: calc(100% - 36px) !important;
        min-width: 0 !important;
        height: auto !important;
        margin-left: 18px !important;
        margin-right: 18px !important;
        table-layout: auto !important;
        box-sizing: border-box !important;
    }

    .fz-table-mobile-safe-fit th,
    .fz-table-mobile-safe-fit td {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        box-sizing: border-box !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    /* Opravdu široké čistě textové tabulky (3+ sloupců) */
    .fz-table-mobile-stack,
    .fz-table-mobile-stack tbody,
    .fz-table-mobile-stack thead,
    .fz-table-mobile-stack tfoot {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .fz-table-mobile-stack tr {
        display: block !important;
        width: 100% !important;
        margin: 0 0 14px !important;
        border: 1px solid #d7e9ed !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    .fz-table-mobile-stack th,
    .fz-table-mobile-stack td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        box-sizing: border-box !important;
        padding: 10px 12px !important;
        border-left: 0 !important;
        border-right: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .fz-table-mobile-stack th + th,
    .fz-table-mobile-stack th + td,
    .fz-table-mobile-stack td + td {
        border-top: 1px solid #edf2f3 !important;
    }
}


/* V5 – doladění šířky mobilních karet spotřeby
   Problém ve V4: wrapper měl 100% šířku uvnitř panelu, který už má
   vlastní boční odsazení. Na některých mobilech tak pravý okraj karty
   a hodnoty v cm končily těsně mimo viewport.
*/
@media (max-width: 767px) {
    .fz-table-consumption-cards {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 12px 18px 22px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .fz-product-info-panel.is-active > .fz-table-consumption-cards {
        display: block !important;
        width: auto !important;
        margin-left: 18px !important;
        margin-right: 18px !important;
    }

    .fz-consumption-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .fz-consumption-card-title,
    .fz-consumption-card-subtitle {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .fz-consumption-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
    }

    .fz-consumption-size {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .fz-consumption-value {
        max-width: 88px !important;
        white-space: nowrap !important;
        text-align: right !important;
    }
}