/**
 * 2026-003 Atelier – detail produktu (sekce detail, jadro linkuje samo). Navrh 04-Detail-desktop / -mobil, 09.02.
 * Markup: jadrovy #detail_zbozi prestaveny js/detail.js (.at-gal*, .at-panel-*, .at-stepper, .at-acc ...), varianty
 * J-A1 miniatury + tlacitka (.tpl-varianty--miniatury), priplatky radio (.tpl-volby-radio), sekce/detail.latte.
 */
.at-detail { display: flex; flex-direction: column; }
.at-detail > .tpl-detail-cesty { order: -1; margin: 0 0 16px; font-size: 13px; color: var(--tpl-text-light); }
.at-detail .cesta_kategorie { display: none; }
.at-detail .cesta_kategorie:first-child { display: block; }
.at-detail .cesta_kategorie a { color: var(--tpl-text-light); text-decoration: underline; text-underline-offset: 3px; }
.at-detail .tpl-detail-popis,
.at-detail [class^="priznak_"],
.at-detail .tpl-detail-znacka { display: none; }
.at-skryt,
.at-detail [hidden] { display: none; }

/* --- mrizka: galerie (80 | foto) | panel 480 --- */
#detail_zbozi .detail_flex { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 32px; align-items: start; }
#detail_zbozi > h1 { margin: 0 0 16px; }
#detail_zbozi .at-gal-jadro { display: none; }

/* galerie: nahledy 80 × 107 | fotky 3:4 pod sebou */
.at-gal { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 32px; align-items: start; min-width: 0; }
.at-gal-nahledy { position: sticky; top: calc(var(--at-sticky-top, 0px) + 24px); display: flex; flex-direction: column; gap: 10px; }
.at-gal-nahled { display: block; width: 80px; aspect-ratio: 3 / 4; padding: 0; border: 1px solid transparent; background: var(--tpl-surface-2); cursor: pointer; }
.at-gal-nahled img { display: block; width: 100%; height: 100%; object-fit: cover; }
.at-gal-nahled.is-on { border-color: var(--tpl-primary); }
.at-gal-fotky { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.at-gal-foto,
#detail_zbozi .at-gal-foto { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; margin: 0; background: var(--tpl-surface-2); }
.at-gal-foto img,
#detail_zbozi #img_velky { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; cursor: zoom-in; }
.at-gal-zoom { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: var(--tpl-surface); color: var(--tpl-text); cursor: pointer; }
.at-gal-pocitadlo { display: none; }

/* --- nakupni panel 480 (sticky top 88) --- */
#detail_zbozi .detail_right {
    position: sticky;
    top: calc(var(--at-sticky-top, 0px) + 24px);
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
.at-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.at-panel-znacka,
a.at-panel-znacka { font: 600 12px/1.4 var(--tpl-font); letter-spacing: .14em; text-transform: uppercase; color: var(--tpl-text); text-decoration: underline; text-underline-offset: 4px; }
#detail_zbozi .at-panel-srdce { margin: 0; }
.at-panel-srdce .zbozi_oblibene {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--tpl-border);
    border-radius: 50%;
    color: var(--tpl-oblibene);
    font-size: 0;
    cursor: pointer;
}
.at-panel-srdce .zbozi_oblibene svg { width: 16px; height: 16px; font-size: 16px; }
.at-panel-srdce .zbozi_oblibene_neaktivni svg path { fill: none; stroke: currentColor; stroke-width: 40px; }
.at-panel-srdce .zbozi_oblibene:hover { border-color: var(--tpl-primary); }
.at-panel-hl h1,
#prostredek .at-panel-hl h1 { margin: 8px 0 0; font-size: calc(32px - var(--tpl-head-shrink)); line-height: 1.2; }
a.at-hodnoceni { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 32px; font-size: 13px; color: var(--tpl-text); text-decoration: underline; text-underline-offset: 3px; }
.at-hvezdy { position: relative; display: inline-block; width: 80px; height: 14px; background: linear-gradient(90deg, var(--tpl-rating) var(--hodn, 0%), var(--tpl-disabled) var(--hodn, 0%)); -webkit-mask: var(--at-hvezdy-maska) repeat-x 0 0 / 16px 14px; mask: var(--at-hvezdy-maska) repeat-x 0 0 / 16px 14px; }
:root { --at-hvezdy-maska: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M7 0l1.8 4.4 4.7.4-3.6 3.1 1.1 4.6L7 10 2.9 12.5 4 7.9.4 4.8l4.7-.4z'/%3E%3C/svg%3E"); }
.at-cena { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 16px; }
.at-cena-akt { font-size: var(--tpl-detail-price-size); font-weight: 700; color: var(--tpl-text); }
.at-cena-akt--sleva { color: var(--tpl-sale-price); }
.at-cena-puv { font-size: 15px; color: var(--tpl-strike); }
.at-cena-dph { margin: 4px 0 24px; font-size: 13px; color: var(--tpl-text-light); }

#detail_zbozi .detail_right form.form_polozka { display: flex; flex-direction: column; gap: 0; margin: 0; }
#detail_zbozi .detail_right table.zbozi_tabulka { display: none; }
#detail_zbozi .datum_doruceni { display: none; }

/* varianty J-A1: barva miniatury 56 × 75, velikosti tlacitka 52 × 48 (vyprodane preskrtnute, "posledni kus") */
#detail_zbozi .zbozi_varianty { margin: 0 0 8px; padding: 0; border: 0; background: none; }
#detail_zbozi select.tpl-select-skryty { display: none; }
body.sekce_detail .at-detail > .tpl-detail-cesty { display: none; }
button.at-tab-odkaz { position: absolute; right: 0; top: -6px; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--tpl-text); font: 400 13px/1 var(--tpl-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* stepper + CTA 52 */
#detail_zbozi .tlacitka-pocet { display: flex; gap: 12px; align-items: stretch; margin: 4px 0 0; }
.at-stepper { display: flex; align-items: stretch; border: 1px solid var(--tpl-border); background: var(--tpl-surface); }
#detail_zbozi .at-stepper input.zmenit_pocet { width: 44px; min-height: 50px; padding: 0; border: 0; background: none; color: var(--tpl-text); font: 400 18px/1 var(--tpl-font); letter-spacing: 0; cursor: pointer; }
#detail_zbozi .at-stepper input#pocet { width: 44px; min-height: 50px; padding: 0; border: 0; background: none; text-align: center; font-weight: 600; -moz-appearance: textfield; }
#detail_zbozi .at-stepper input#pocet::-webkit-inner-spin-button { -webkit-appearance: none; }
#detail_zbozi .tlacitka-pocet input[type="submit"] { flex: 1 1 auto; min-height: 52px; }

/* pod formularem: dostupnost, doruceni, jistoty, splatky, sdileni, akordeony */
.at-panel-pod { margin-top: 20px; }
.at-dostupnost { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--tpl-stav-skladem); }
.at-dostupnost::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.at-dostupnost--jina { color: var(--tpl-stav-wait); }
.at-det-doruceni { margin: 0 0 16px; font-size: 14px; color: var(--tpl-text-light); }
.at-jistoty { margin: 0; padding: 16px 0; border-top: 1px solid var(--tpl-line); list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.at-jistoty li { display: flex; align-items: center; gap: 12px; }
.at-jistoty .at-ico { width: 20px; height: 20px; }
.at-det-splatky { margin: 0 0 12px; font-size: 14px; }
.at-panel-pod .at-sdilet { padding: 8px 0 20px; }
.at-acc { border-top: 1px solid var(--tpl-line); }
.at-acc-i { border-bottom: 1px solid var(--tpl-line); }
.at-acc-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    font: 600 13px/1.3 var(--tpl-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}
.at-acc-h::-webkit-details-marker { display: none; }
.at-acc-h::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -4px; transition: transform .2s; }
.at-acc-i[open] > .at-acc-h::after { transform: rotate(-135deg); margin-top: 4px; }
.at-acc-b { padding: 0 0 20px; font-size: 15px; line-height: 1.6; }
.at-acc-b p { margin: 0 0 .8em; }
.at-acc-b ul { margin: 0 0 1em; padding-left: 20px; }
.at-parametry { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 16px; margin: 16px 0 0; font-size: 14px; }
.at-parametry dt { color: var(--tpl-text-light); }
.at-parametry dd { margin: 0; }

/* --- modal tabulky velikosti (09.02): 880, zalozky podle h2, pruhovane radky, zvyrazneni vybrane velikosti --- */
.at-modal-tab { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--tpl-overlay); }
.at-modal-tab[hidden] { display: none; }
html.at-modal-otevreno { overflow: hidden; }
.at-modal-tab-box { width: 880px; max-width: 100%; max-height: calc(100vh - 48px); overflow: auto; padding: 32px 40px 40px; background: var(--tpl-surface); color: var(--tpl-text); box-shadow: var(--tpl-shadow-pop); }
.at-modal-tab-hl { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
#prostredek .at-modal-tab-hl h2 { margin: 0; font-size: 28px; }
.at-modal-tab-x { color: var(--tpl-text); }
.at-tab-zalozky { display: flex; gap: 24px; margin: 0 0 20px; border-bottom: 1px solid var(--tpl-line); }
.at-tab-zalozka { min-height: 44px; padding: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--tpl-text-light); font: 600 13px/1 var(--tpl-font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.at-tab-zalozka.is-on { color: var(--tpl-text); border-bottom-color: var(--tpl-primary); }
.at-modal-tab-obsah table { width: 100%; border-collapse: collapse; font-size: 14px; }
.at-modal-tab-obsah th,
.at-modal-tab-obsah td { padding: 12px; border: 0; border-bottom: 1px solid var(--tpl-line); text-align: left; }
.at-modal-tab-obsah th { font-weight: 600; }
.at-modal-tab-obsah tr:nth-child(even) td { background: var(--tpl-body-bg); }
.at-modal-tab-obsah tr.at-tab-on td { background: var(--tpl-secondary); font-weight: 600; }
.at-modal-tab-obsah > h2,
#prostredek .at-modal-tab-obsah h2 { font-family: var(--tpl-font); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* --- pod mrizkou: Doplnte outfit, recenze, FAQ, naposledy prohlizene --- */
.at-outfit { margin-top: var(--tpl-section-gap); }
.at-recenze-souhrn { margin-top: var(--tpl-section-gap); }
.at-recenze-hl { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.at-recenze-cislo { font-family: var(--tpl-font-head); font-weight: var(--tpl-head-weight); font-size: 56px; line-height: 1; color: var(--tpl-primary); }
.at-recenze-info { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--tpl-text-light); }
.at-recenze-rozlozeni { max-width: 360px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.at-recenze-rozlozeni li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 32px; gap: 8px; align-items: center; min-height: 22px; }
.at-recenze-bar { height: 4px; background: var(--tpl-line); }
.at-recenze-bar > span { display: block; height: 100%; background: var(--tpl-primary); }
.at-komunikace { margin-top: 24px; }
.at-faq { margin-top: var(--tpl-section-gap); }
.at-naposledy { margin-top: var(--tpl-section-gap); }
.at-naposledy-seznam { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--tpl-grid-gap); margin: 0; padding: 0; list-style: none; }
.at-naposledy-seznam a { display: flex; flex-direction: column; gap: 6px; color: var(--tpl-text); font-size: 14px; text-decoration: none; }
.at-naposledy-foto { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--tpl-surface-2); }
.at-naposledy-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.at-naposledy-nazev { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.at-naposledy-cena { font-weight: 700; }
.at-mbar { display: none; }

/* ================================================================ */
@media (max-width: 1100px) {
    #detail_zbozi .detail_flex { grid-template-columns: minmax(0, 1fr) 400px; }
    .at-gal { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
    .at-gal-nahled { width: 64px; }
}
@media (max-width: 768px) {
    .at-detail > .tpl-detail-cesty { display: none; }
    body:has(.at-detail) #in_body ol.Breadcrumb { display: none; }
    #detail_zbozi .detail_flex { display: block; }
    .at-gal { display: block; margin: 0 calc(-1 * var(--tpl-gutter)); }
    .at-gal-nahledy { display: none; }
    .at-gal-fotky { flex-direction: row; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .at-gal-fotky::-webkit-scrollbar { display: none; }
    .at-gal-foto,
    #detail_zbozi .at-gal-foto { flex: 0 0 100%; scroll-snap-align: start; }
    .at-gal-pocitadlo { position: absolute; top: 12px; right: 12px; display: block; padding: 4px 8px; background: var(--tpl-surface); font-size: 12px; font-weight: 600; }
    .at-gal-zoom { display: none; }
    #detail_zbozi .detail_right { position: static; margin-top: 20px; }
    .at-panel-hl h1,
    #prostredek .at-panel-hl h1 { font-size: calc(28px - var(--tpl-head-shrink)); }
    .at-cena-akt { font-size: 22px; }
    .tpl-varianty-osa--tlacitka .tpl-varianty-hodnoty { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 16px; }
    .at-parametry { grid-template-columns: 120px minmax(0, 1fr); }
    .at-modal-tab { padding: 0; }
    .at-modal-tab-box { width: 100%; height: 100%; max-height: none; padding: 16px; }
    .at-modal-tab-obsah { overflow-x: auto; }
    .at-modal-tab-obsah td:first-child,
    .at-modal-tab-obsah th:first-child { position: sticky; left: 0; background: var(--tpl-surface); }
    .at-naposledy-seznam { display: flex; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--tpl-gutter)); }
    .at-naposledy-seznam > li { flex: 0 0 104px; }
    .at-outfit .at-mrizka { display: flex; overflow-x: auto; gap: 12px; margin-right: calc(-1 * var(--tpl-gutter)); padding-right: var(--tpl-gutter); scrollbar-width: none; }
    .at-outfit .at-mrizka > .polozka { flex: 0 0 62%; }
    /* sticky CTA nad cookie listou */
    body.at-ma-mbar { padding-bottom: calc(72px + var(--tpl-cookie-h, 0px)); }
    .at-mbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--tpl-cookie-h, 0px);
        z-index: 90;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 64px;
        padding: 8px var(--tpl-gutter) calc(8px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--tpl-line);
        background: var(--tpl-surface);
    }
    .at-mbar-l { flex: 1 1 auto; min-width: 0; }
    .at-mbar-v { font-size: 12px; color: var(--tpl-text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .at-mbar-c { font-size: 16px; font-weight: 700; }
    .at-mbar-btn { min-height: 48px; padding: 0 18px; }
}