/**
 * Template 2026-001 — Detail produktu: v2 „Sticky rail + horizontální nahledy"
 *
 * Krok 160: implementace podle mockupu `Produktovka PA-9.dc.html`.
 *
 * Rozdíly proti default variantě:
 *  - Grid 1fr / 380px (default: 58% / 1fr, thumbs LEVÁ vertical)
 *  - Title band FULL-WIDTH nad grid (breadcrumb + NOVINKA + H1 + kód/hodnocení + dostupnost)
 *  - Left col = gallery: main image 4:3 nahoře, thumbs POD ním horizontálně (dřív LEVÁ vertikálně)
 *  - Right col = STICKY buy rail (border + radius + padding + #fafafa background)
 *  - Popis + Parametry side-by-side pod hlavním blokem (H2 + žlutý underline)
 *  - Podobné produkty grid repeat(4, 1fr) s karty
 *
 * Barvy: #ffd400 (primary), #263238 (text), #8a8a8a (muted), #2e8b45 (in-stock green),
 *        #f2b600 (star), #fafafa (rail bg), #eee (borders).
 *
 * Přebijí jádrová pravidla ze `sablona.css` sekce G (řádky 3122+).
 * Selektory jsou scoped na `#detail_zbozi` a příbuzné section IDs které jádrový
 * `inc/detail.php` a `inc/detail_zbozi.php` renderují. Body class není potřeba —
 * CSS se načítá z `komponenty.json` (viz LayoutRenderer) přes @import po sablona.css.
 */

/* Krok 188: marker pro JS aby detekoval aktivní variantu v2. */
#detail_zbozi { --tpl-detail-variant: "v2"; }

/* ================================================================
   1. HLAVNÍ GRID: 1fr (levý sloupec) + 1fr (rail vyplní pravou půl).
   Přebíjí sablona.css:3128. Šířku a centrování řeší parent
   `.tpl-content-inner` (max-width přes --tpl-max-width).

   Krok 169: gap 24px (menší horizontální mezera), align-items: start
   zajistí že fotky i rail začínají na stejné vertikální úrovni.
   ================================================================ */
div#detail_zbozi {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100%;
    align-items: start !important;
}

/* .detail_flex používá `display: contents` — necháváme (přebíjíme jen aby se dala pochytit). */
div#detail_zbozi div.detail_flex {
    display: contents;
}

/* ================================================================
   2. TITLE BAND — full-width nad grid
   Přebíjíme sablona.css:3141 (h1 v pravém sloupci).
   ================================================================ */
div#detail_zbozi h1 {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.15 !important;
    color: var(--tpl-text);
    letter-spacing: -0.01em;
}

/* Kód produktu, výrobce, hodnocení — do title bandu. */
#detail_zbozi tr.zbozi_kod,
#detail_zbozi tr.zbozi_kod td {
    display: inline-block;
    background: transparent !important;
    border: 0 !important;
    padding: 0 20px 0 0 !important;
    font-size: 13px;
    color: #8a8a8a;
}
#detail_zbozi span.zbozi_kod_detail {
    color: var(--tpl-text);
    font-weight: 700;
}

/* ================================================================
   3. LEVÝ SLOUPEC — GALLERY: main image nahoře, thumbs POD ním HORIZONTÁLNĚ
   Přebíjíme sablona.css:3277 (left = fotky, grid-template-columns: 82px 1fr,
   thumbs VLEVO). Nyní: single column, thumbs POD.
   ================================================================ */
/* Krok 186: skrýt .priznaky_detail (obsahuje jen `.doprava_zdarma_detail` badge
   který jádrové sablona.css:3153 už schovává přes display:none). Wrapper měl
   height 0 ale zabíral slot v flex column → flex gap se aplikoval → image byl
   14px pod wrapper top → karta u produktů s .priznaky_detail vypadala 14px výše
   než u produktů bez něj. `display: none` na wrapper ho vyřadí z flex layoutu —
   image začíná na wrapper top nezávisle na produktu. */
div#detail_zbozi div.zbozi_prilohy_2 .priznaky_detail {
    display: none !important;
}

div#detail_zbozi div.zbozi_prilohy_2 {
    grid-column: 1 !important;
    grid-row: 2 !important;         /* Krok 169: exact row 2 (bez span), align s rail */
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    position: static !important;   /* zrušit sticky z jádra — sticky bude na pravém railu */
    top: auto !important;
    width: 100%;                    /* Krok 170: fotky vyplní celý levý sloupec */
    max-width: 100%;
    align-self: start !important;
    justify-self: stretch !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Hlavní obrázek — 4:3 aspect + border + radius.
   Krok 166: 100% svého parenta (`.zbozi_prilohy_2` už má width 66% sloupce). */
div#detail_zbozi div.zbozi_prilohy_jpg_2 {
    grid-column: auto !important;
    grid-row: auto !important;
    /* 1:1 (dřív 4:3): produktová fota jsou zpravidla čtvercová — ve 4:3 boxu plavala
       s bílými pruhy po stranách. Čtverec = foto vyplní box bez pruhů. */
    aspect-ratio: 1 / 1;
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    overflow: hidden;
    background: var(--tpl-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    order: 1;
}
div#detail_zbozi div.zbozi_prilohy_jpg_2 img,
div#detail_zbozi div.zbozi_prilohy_jpg_2 img#img_velky {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    box-sizing: border-box;
}

/* Nahledy — HORIZONTÁLNĚ POD hlavním obrázkem.
   Krok 166: 100% svého parenta (`.zbozi_prilohy_2` už má width 66% sloupce). */
div#detail_zbozi div.zbozi_prilohy_nahledy {
    grid-column: auto !important;
    grid-row: auto !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    order: 2;
    flex-wrap: wrap;
}
div#detail_zbozi div.zbozi_prilohy_nahledy img.img_zbozi {
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(25% - 9px);
    object-fit: contain;
    border-radius: var(--tpl-border-radius) !important;
    border: 2px solid var(--tpl-card-border) !important;
    padding: 8px !important;
    background: var(--tpl-card-bg);
    transition: border-color 0.15s;
}
div#detail_zbozi div.zbozi_prilohy_nahledy img.img_zbozi:hover,
div#detail_zbozi div.zbozi_prilohy_nahledy img.img_zbozi.aktivni {
    border-color: var(--tpl-cta-bg) !important;
}
/* Single-photo: náhledová lišta obsahuje jen `<!-- pocet priloh: 1 -->` (žádný img)
   → :empty matchuje → skryjeme ji, aby pod hlavním obrázkem nezůstala mrtvá 14px
   mezera (flex gap z .zbozi_prilohy_2). U více fotek se lišta zobrazí normálně. */
div#detail_zbozi div.zbozi_prilohy_nahledy:empty {
    display: none !important;
}

/* Krátký popis pod obrázkem (řádek "Souřadnicovač PA-9 mapuje ..."). */
#detail_zbozi > p.kratky_popis,
div.zbozi_prilohy_2 > div.tpl-popis-card {
    grid-column: 1 !important;
    order: 3 !important;
    max-width: 620px;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 15px;
    line-height: 1.65;
    color: var(--tpl-text);
}
div.tpl-popis-card > p.kratky_popis {
    padding: 0 !important;
    color: var(--tpl-text);
}

/* ================================================================
   4. PRAVÝ SLOUPEC — STICKY BUY RAIL
   Přebíjí sablona.css:3361 `.detail_right` grid pozici + přidává sticky+card.
   ================================================================ */
div#detail_zbozi div.detail_right {
    grid-column: 2 !important;
    grid-row: 2 !important;          /* Krok 169: exact row 2 (bez span), align s fotkami */
    position: sticky;
    top: 16px;
    align-self: start !important;
    justify-self: stretch !important;  /* Krok 170: rail vyplní celý pravý sloupec */
    width: 100%;
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    padding: 22px;
    background: var(--tpl-card-bg);
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    box-sizing: border-box;
    margin-top: 0 !important;        /* Krok 186: bez posunu — image začíná na wrapper top (viz .priznaky_detail:empty fix níže) */
    padding-top: 22px !important;
}

/* Cena — velká 32px weight 900. */
#detail_zbozi div.detail_right .cena_zbozi,
#detail_zbozi div.detail_right .cena_zbozi_s_dph,
#detail_zbozi div.detail_right span.cena {
    font-size: 32px !important;
    font-weight: 900 !important;
    color: var(--tpl-text) !important;
    line-height: 1 !important;
    display: inline-block;
    margin: 0;
}
#detail_zbozi div.detail_right .cena_zbozi_bez_dph {
    font-size: 12px;
    color: #8a8a8a;
    font-weight: 400;
    display: block;
    margin-top: 4px;
}

/* Přidat divider nad blok ceny. */
#detail_zbozi div.detail_right .cena_zbozi_s_dph,
#detail_zbozi div.detail_right div.zbozi_cena_bez_priplatku,
#detail_zbozi div.detail_right div.cena_zbozi_wrapper {
    border-top: 1px solid #ececec;
    padding-top: 18px;
    margin-top: 4px;
}

/* Krok 187: přeuspořádat form.form_polozka — možnosti (příplatky) POD tlačítko
   Koupit. Původní pořadí bylo: příplatky, stepper+koupit, ceny. Nové: stepper+
   koupit, ceny, příplatky. Přes CSS `order` na flex column.
   Také odstraníme border-top z table.zbozi_priplatky (nadřazený "div s možnostmi"). */
#detail_zbozi div.detail_right form.form_polozka {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
}
#detail_zbozi div.detail_right form.form_polozka div.tlacitka-pocet {
    order: 1;   /* Krok 193: stepper + Koupit zpět nahoru */
}
#detail_zbozi div.detail_right form.form_polozka div.zbozi_priplatky {
    order: 2;   /* možnosti pod tlačítkem */
}
#detail_zbozi div.detail_right form.form_polozka table.zbozi_tabulka {
    order: 3;   /* cena dole */
}
#detail_zbozi div.detail_right form.form_polozka div.zbozi_priplatky,
#detail_zbozi div.detail_right form.form_polozka table.zbozi_priplatky,
#detail_zbozi div.detail_right form.form_polozka table.zbozi_priplatky > tbody {
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Krok 189: krátký popis dole v .detail_right (přímý sourozenec form.form_polozka).
   Form má order 1 z jádrových stylů, popis by defaultně (order 0) skončil NAD ním. */
#detail_zbozi div.detail_right > div.tpl-popis-card {
    order: 999;
    margin-top: 16px;
}

/* Krok 165: Řada [stepper] [ks] [Přidat do košíku] na 1 řádek.
   Jádro obaluje vše do `.tlacitka-pocet` s `flex-wrap: wrap` → tlačítko
   se zalamovalo pod. Nyní nowrap + tlačítko flex: 1 vyplní volný prostor
   napravo od "ks". Krok 165: tlačítko je class `.button_konverzni` (ne
   `.zbozi_koupit`) — přebít zelený jádrový styling na žlutý pill. */
#detail_zbozi div.detail_right div.tlacitka-pocet {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0;
    margin: 0 !important;
    width: 100%;
}
#detail_zbozi div.detail_right div.tlacitka-pocet input.zmenit_pocet,
#detail_zbozi div.detail_right div.tlacitka-pocet input.zmenit_pocet_minus,
#detail_zbozi div.detail_right div.tlacitka-pocet input.zmenit_pocet_plus {
    width: 40px !important;
    height: 48px !important;
    border: 2px solid #e0e0e0 !important;
    background: var(--tpl-surface-2) !important;
    font-size: 18px !important;
    flex: 0 0 auto !important;
}
#detail_zbozi div.detail_right div.tlacitka-pocet input#pocet,
#detail_zbozi div.detail_right div.tlacitka-pocet input[name="pocet"] {
    width: 44px !important;
    height: 48px !important;
    flex: 0 0 auto !important;
    font-size: 16px !important;
}
#detail_zbozi div.detail_right div.tlacitka-pocet span.jednotka {
    flex: 0 0 auto !important;
    margin: 0 12px !important;
    align-self: center;
    color: #8a8a8a;
    font-size: 13px;
}

/* Žluté KOUPIT tlačítko — jádrový class `.button_konverzni`, přebít
   zelený var(--tpl-cta-bg) styling a shadow. */
#detail_zbozi div.detail_right input.button_konverzni,
#detail_zbozi div.detail_right input[type="submit"].button_konverzni,
#detail_zbozi div.detail_right div.tlacitka-pocet input.button_konverzni,
#detail_zbozi div.detail_right .detail_tlacitko_nakup,
#detail_zbozi div.detail_right form.form_polozka input[type="submit"] {
    background: var(--tpl-cta-bg) !important;
    color: var(--tpl-cta-text) !important;
    border: 0 !important;
    border-radius: 30px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 0 20px !important;
    height: 48px !important;
    line-height: 48px !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background 0.15s;
    text-transform: none;
    letter-spacing: 0;
    flex: 1 1 auto !important;
    margin: 0 0 0 12px !important;
    min-width: 140px;
    text-shadow: none;
    transform: none !important;
    white-space: nowrap;
}
#detail_zbozi div.detail_right input.button_konverzni:hover,
#detail_zbozi div.detail_right input[type="submit"].button_konverzni:hover,
#detail_zbozi div.detail_right .detail_tlacitko_nakup:hover {
    background: var(--tpl-cta-bg-hover) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Info řádky (Doručení, Vrácení) — pravý rail. */
#detail_zbozi div.detail_right .doprava_zdarma_detail,
#detail_zbozi div.detail_right .doruceni_info,
#detail_zbozi div.detail_right .vraceni_info {
    font-size: 12.5px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

/* Krok 164: tabulka volitelných možností (priplatky) — grid auto-fit.
   `repeat(auto-fit, minmax(140px, 1fr))` = 2 sloupce vedle sebe když
   se label+input vejdou do 140+ px, jinak 1 sloupec s inputem na celou
   šířku. `tr` jako flex column: label nad, input pod. */
#detail_zbozi div.detail_right table.zbozi_priplatky {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 12px 10px !important;
    width: 100% !important;
    border-collapse: collapse;
    margin: 0 !important;
}
#detail_zbozi div.detail_right table.zbozi_priplatky tbody {
    display: contents !important;
}
#detail_zbozi div.detail_right table.zbozi_priplatky tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
#detail_zbozi div.detail_right table.zbozi_priplatky td {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    width: auto !important;
}
#detail_zbozi div.detail_right table.zbozi_priplatky td.nazev_priplatku {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--tpl-text) !important;
    line-height: 1.3;
}
#detail_zbozi div.detail_right table.zbozi_priplatky select.priplatek_select,
#detail_zbozi div.detail_right table.zbozi_priplatky input[type="text"],
#detail_zbozi div.detail_right table.zbozi_priplatky input[type="number"],
#detail_zbozi div.detail_right table.zbozi_priplatky textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    border: 1px solid #ddd !important;
    border-radius: var(--tpl-border-radius) !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: var(--tpl-card-bg) !important;
    color: var(--tpl-text) !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}
#detail_zbozi div.detail_right table.zbozi_priplatky select.priplatek_select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px !important;
    background: var(--tpl-card-bg) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238a8a8a" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') right 10px center/12px 12px no-repeat !important;
    cursor: pointer;
}
/* Skrýt info tooltip trigger cell aby nezabíral místo v gridu. */
#detail_zbozi div.detail_right table.zbozi_priplatky td.info_priplatek,
#detail_zbozi div.detail_right table.zbozi_priplatky tr.info_priplatek {
    display: none !important;
}

/* ================================================================
   5. POPIS PRODUKTU + PARAMETRY — 2 sloupce pod hlavním blokem
   H2 s žlutým underline.
   ================================================================ */
#detail_zbozi div.zbozi_popis,
#detail_zbozi div.zbozi_text,
#detail_zbozi div.zbozi_dily {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    margin-top: 56px !important;
    padding: 0 !important;
}

#detail_zbozi div.zbozi_popis h2,
#detail_zbozi div.zbozi_text h2,
#detail_zbozi div.zbozi_dily h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 0 0 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 3px solid var(--tpl-cta-bg) !important;
    display: inline-block !important;
    color: var(--tpl-text) !important;
}

#detail_zbozi div.zbozi_popis {
    font-size: 15px;
    line-height: 1.75;
    color: var(--tpl-text);
}
#detail_zbozi div.zbozi_popis p {
    margin: 0 0 16px;
}
#detail_zbozi div.zbozi_popis ul {
    margin: 0;
    padding-left: 20px;
}
#detail_zbozi div.zbozi_popis li {
    margin-bottom: 8px;
}

/* Parametry — tabulka s alternating rows. */
#detail_zbozi div.zbozi_dily {
    border: 1px solid var(--tpl-card-border) !important;
    border-radius: var(--tpl-border-radius) !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: var(--tpl-card-bg);
}
#detail_zbozi div.zbozi_dily h2 {
    margin: 20px 20px 18px !important;
}
#detail_zbozi div.zbozi_text_parametry {
    display: flex !important;
    border-bottom: 1px solid #f0f0f0;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent;
}
#detail_zbozi div.zbozi_text_parametry:nth-child(even) {
    background: var(--tpl-surface-2);
}
#detail_zbozi div.zbozi_text_parametry:last-child {
    border-bottom: 0;
}
#detail_zbozi div.zbozi_text_parametry div.zbozi_ikona,
#detail_zbozi div.zbozi_text_parametry .parametr_nazev {
    width: 46%;
    padding: 13px 18px !important;
    font-size: 14px !important;
    color: #8a8a8a !important;
    background: transparent !important;
}
#detail_zbozi div.zbozi_text_parametry div.zbozi_ikona_popis,
#detail_zbozi div.zbozi_text_parametry .parametr_hodnota {
    flex: 1;
    padding: 13px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tpl-text) !important;
}

/* ================================================================
   6. PODOBNÉ PRODUKTY — grid repeat(4, 1fr)
   Přebíjí jádrové `.zbozi_ze_stejne_kategorie` layout.
   Šířku řeší parent container, ne my. Krok 161.
   ================================================================ */
div.zbozi_ze_stejne_kategorie {
    max-width: none !important;
    margin: 60px 0 0 !important;
    padding: 0 !important;
    width: 100%;
}
div.zbozi_ze_stejne_kategorie h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 0 0 22px !important;
    color: var(--tpl-text) !important;
}

/* Grid 4 sloupce. */
div.zbozi_ze_stejne_kategorie div.zbozi_stejna_kategorie_wrap,
div.zbozi_ze_stejne_kategorie {
    display: block;
}
div.zbozi_ze_stejne_kategorie > div,
div.zbozi_ze_stejne_kategorie ul {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    list-style: none;
    padding: 0;
    margin: 0;
}
div.zbozi_stejna_kategorie {
    float: none !important;
    width: auto !important;
    border: 1px solid var(--tpl-card-border) !important;
    border-radius: var(--tpl-border-radius) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    background: var(--tpl-card-bg);
    transition: box-shadow 0.15s;
}
div.zbozi_stejna_kategorie:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
div.zbozi_stejna_kategorie .zbozi_s_foto,
div.zbozi_stejna_kategorie div[class*="_foto"] {
    aspect-ratio: 1 / 1;
    background: var(--tpl-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-bottom: 1px solid #f4f4f4;
}
div.zbozi_stejna_kategorie .zbozi_s_foto img,
div.zbozi_stejna_kategorie div[class*="_foto"] img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
div.zbozi_stejna_kategorie .zbozi_s_nazev,
div.zbozi_stejna_kategorie div[class*="_nazev"] {
    padding: 16px 16px 6px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    min-height: 36px;
    color: var(--tpl-text);
}
div.zbozi_stejna_kategorie .zbozi_s_nazev a {
    color: var(--tpl-text) !important;
    text-decoration: none !important;
}
div.zbozi_stejna_kategorie .zbozi_s_cena,
div.zbozi_stejna_kategorie div[class*="_cena"] {
    padding: 0 16px 16px !important;
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    margin-top: auto;
}
div.zbozi_stejna_kategorie .zbozi_s_cena::before {
    content: "Cena s DPH";
    font-size: 11px;
    color: #9a9a9a;
    font-weight: 400;
}
div.zbozi_stejna_kategorie .zbozi_s_cena span,
div.zbozi_stejna_kategorie .zbozi_s_cena .cena {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: var(--tpl-text) !important;
}

/* Zbylé prvky (formuláře, diskuze) — schovat aby stránka byla čistá jako mockup. */
#detail_zbozi ~ div.zbozi_form_dotazy,
#detail_zbozi ~ div.zbozi_diskuze,
div.zbozi_form_dotazy,
div.zbozi_diskuze,
div.heureka_hodnoceni_zbozi {
    display: none !important;
}

/* ================================================================
   7. RESPONSIVE — mobil
   ================================================================ */
/* ================================================================
   TABLET & MOBIL — jednosloupcový layout (Krok 190)
   ≤900px = 1 sloupec (fotky nahoře, karta pod).
   ≤600px = dodatečně kompaktní stepper/options/koupit tlačítko.
   ================================================================ */
@media (max-width: 900px) {
    /* Grid → 1 sloupec, obojí grid-column: 1. */
    div#detail_zbozi {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    div#detail_zbozi div.zbozi_prilohy_2 {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-self: stretch !important;
    }
    div#detail_zbozi div.detail_right {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: 100% !important;
        position: static !important;    /* zrušit sticky rail */
        top: auto !important;
        margin-top: 0 !important;
        padding: 16px !important;
    }
    div#detail_zbozi h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }
    /* Title band — kompaktnější padding. */
    div#detail_zbozi > div:has(> h1),
    div#detail_zbozi > div.detail_flex + * h1 {
        padding-bottom: 16px !important;
        margin-bottom: 20px !important;
    }
    /* Náhledy — o něco menší. */
    div#detail_zbozi div.zbozi_prilohy_nahledy img.img_zbozi {
        max-width: calc(20% - 8px);
    }
    /* Popis + Parametry side-by-side → pod sebou. */
    #detail_zbozi div.zbozi_popis + div.zbozi_dily,
    #detail_zbozi div.zbozi_popis {
        grid-column: 1 !important;
    }
    #detail_zbozi div.zbozi_popis + div.zbozi_dily {
        margin-top: 24px !important;
    }
    #detail_zbozi div.zbozi_popis h2,
    #detail_zbozi div.zbozi_dily h2 {
        font-size: 18px !important;
    }
    /* Podobné produkty 4 → 2 sloupce. */
    div.zbozi_ze_stejne_kategorie > div,
    div.zbozi_ze_stejne_kategorie ul {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    /* Cena — menší. */
    #detail_zbozi div.detail_right .cena_zbozi,
    #detail_zbozi div.detail_right .cena_zbozi_s_dph,
    #detail_zbozi div.detail_right span.cena {
        font-size: 26px !important;
    }
}

@media (max-width: 600px) {
    /* Grid ještě těsnější. */
    div#detail_zbozi {
        gap: 16px !important;
    }
    /* H1 menší. */
    div#detail_zbozi h1 {
        font-size: 22px !important;
    }
    /* Rail padding minimum. */
    div#detail_zbozi div.detail_right {
        padding: 12px !important;
        border-radius: var(--tpl-border-radius) !important;
    }
    /* Options grid → 1 sloupec (auto-fit padne na 1 pokud minmax neprojde). */
    #detail_zbozi div.detail_right table.zbozi_priplatky {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    /* Stepper + koupit stack na 2 řádky. */
    #detail_zbozi div.detail_right div.tlacitka-pocet {
        flex-wrap: wrap !important;
    }
    #detail_zbozi div.detail_right div.tlacitka-pocet input.button_konverzni,
    #detail_zbozi div.detail_right input[type="submit"].button_konverzni,
    #detail_zbozi div.detail_right form.form_polozka input[type="submit"] {
        flex: 1 1 100% !important;
        margin: 8px 0 0 0 !important;
        order: 10;
    }
    #detail_zbozi div.detail_right div.tlacitka-pocet span.jednotka {
        margin-right: auto !important;   /* mezera aby stepper zůstal vlevo */
    }
    /* Náhledy 4 na řádek. */
    div#detail_zbozi div.zbozi_prilohy_nahledy img.img_zbozi {
        max-width: calc(25% - 9px);
    }
    /* Popis text menší. */
    #detail_zbozi div.zbozi_popis {
        font-size: 14px !important;
    }
    /* Podobné produkty 1 sloupec. */
    div.zbozi_ze_stejne_kategorie > div,
    div.zbozi_ze_stejne_kategorie ul {
        grid-template-columns: 1fr !important;
    }
    /* Cena ještě menší, zarovnat s bez DPH. */
    #detail_zbozi div.detail_right .cena_zbozi,
    #detail_zbozi div.detail_right .cena_zbozi_s_dph,
    #detail_zbozi div.detail_right span.cena {
        font-size: 22px !important;
    }
    /* Title band řádek 2 (kód/výrobce/hodnocení) — zabalit. */
    #detail_zbozi tr.zbozi_kod,
    #detail_zbozi tr.zbozi_kod td {
        display: block;
        padding: 2px 0 !important;
    }
}
: prazdne polozky gridu delaly obrovskou mezeru
   ----------------------------------------------------------------
   #detail_zbozi je grid s `gap: 24px`. Jadro do nej renderuje i
   presentacni <br> a prazdny placeholder #detail_zbozi_form.
   Kazdy z nich je POLOZKA GRIDU -> zabere vlastni radek a pricte
   dalsich 24 px mezery. U eshopu s malo obsahem (bez variant,
   skladovych hlasek, dodacich lhut...) tak mezi fotkou a popisem
   vznikla prazdna dira ~500 px a popis spadl az do radku 20.

   <br> uvnitr gridu nema zadny vizualni ucel -> skryvame.
   #detail_zbozi_form skryvame POUZE dokud je prazdny (:empty) —
   jakmile do nej JS vlozi obsah, pravidlo prestane platit samo.
   ================================================================ */
div#detail_zbozi > br {
    display: none !important;
}
div#detail_zbozi > div#detail_zbozi_form:empty {
    display: none !important;
}