/* ==========================================================================
   KATALÓG - karty produktov, mriežka, filtre, detail produktu
   ==========================================================================
   Všetko, čo sa týka zobrazenia ponuky: karta produktu, mriežka výpisu,
   bočný panel s filtrami a stránka detailu produktu.
   Zodpovedá komponentom v resources/views/components/catalog/.
   Načítava sa v resources/views/layouts/app.blade.php. Poradie je dôležité:
   base.css definuje premenné, ktoré používajú všetky ostatné moduly, a
   responzívne pravidlá sa vpisujú do hlavičky stránky až za všetky tieto
   súbory, aby prebili predvolené hodnoty. Skladá ich
   App\Services\VzhladService::cssObchodu() z hodnôt v Nastaveniach.
   ========================================================================== */

/* --------------------------------------------------------------------------
   6. PRODUCT CARDS AND GRID
   -------------------------------------------------------------------------- */
.product-grid {
    display: grid;
    /* auto-fill s minmax: počet stĺpcov sa prispôsobí šírke bez media queries
       a bez pevných zlomových bodov. */
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-4);
}

.product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg);
    transition: box-shadow .15s ease, transform .15s ease;
}

.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.product-card .thumb {
    /* Pevný pomer strán udrží mriežku upravenú bez ohľadu na proporcie obrázkov
       a zabráni poskakovaniu rozloženia počas ich načítavania. */
    aspect-ratio: 1 / 1;
    background: var(--color-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-card .thumb img { width: 100%; height: 100%; object-fit: contain; }

.product-card .thumb .placeholder {
    color: var(--color-text-muted);
    font-size: 13px;
    padding: var(--space-4);
    text-align: center;
}

.product-card .body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-3);
    gap: var(--space-2);
}

.product-card .brand {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-text-muted);
}

.product-card .name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    /* Obmedzené na dva riadky, aby mali kartičky v riadku rovnakú výšku. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card .price-row {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.price { font-size: 17px; font-weight: 700; }
.price-before { font-size: 13px; color: var(--color-text-muted); text-decoration: line-through; }

.stock-in { font-size: 12px; color: var(--color-success); font-weight: 600; }
.stock-out { font-size: 12px; color: var(--color-text-muted); }

.sale-badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    padding: 2px 6px;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.card-wrap { position: relative; }

/* --------------------------------------------------------------------------
   6b. DLAŽDICA PRODUKTU - SPOLOČNÝ OBJEKT (karta uopmQTCi, 28. 9. 2026)
   --------------------------------------------------------------------------
   Značky: components/catalog/dlazdica.blade.php (vykresľujú ju product-card
   aj hit-card). Podľa grafiky: biela karta s tenkým okrajom, obrázok, kód
   sivým, názov, Skladom zelene, cena červeno, „s DPH“, červené tlačidlo
   Do košíka s ikonou. Zmena tu platí na úvode, vo výpisoch aj v hľadaní.
   -------------------------------------------------------------------------- */
.product-card.dl {
    --dl-cervena: #E4202A;
    --dl-zelena: #76B82A;
    height: 100%;
    padding: 20px;
    border: 1px solid #DDDDDD;
    border-radius: 8px;
    background: #FFFFFF;
}

.product-card.dl:hover {
    transform: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.dl .dl-obrazok {
    background: #FFFFFF;
}

.dl .dl-telo {
    padding: 14px 0 0;
    gap: 0;
}

.dl-kod {
    font-size: 12px;
    color: #BBBBBB;
}

.dl .dl-nazov {
    /* Vždy výška troch riadkov - dostupnosť, cena a tlačidlo sú potom
       v susedných dlaždiciach na rovnakej úrovni. */
    min-height: 3.6em;
    margin: 2px 0 10px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    color: #111111;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.dl-dostupnost {
    font-size: 18px;
    font-weight: 700;
    color: #7F7F7F;
}

.dl-dostupnost.je-skladom {
    color: var(--dl-zelena);
}

.dl-cena {
    margin-top: 8px;
    font-size: 26px;   /* o 4 px menšie (Vojto 2. 10. 2026) */
    font-weight: 700;
    line-height: 1.1;
    color: #000000;   /* čierna (Vojto 2. 10. 2026), predtým --dl-cervena */
}

.dl-dph {
    font-size: 13px;
    color: #7F7F7F;
}

/* Bežná cena pri akcii - prečiarknutá nad cenou, písmo ako „s DPH“. Riadok
   je vždy (bez akcie neviditeľný), aby boli ceny a tlačidlá vedľa seba
   v jednej línii. */
.dl-cena-pred {
    display: block;
    margin-top: 5px;
    text-decoration: line-through;
}

.dl .je-prazdny {
    visibility: hidden;
}

/* Medzi skladom a cenou len 5 px (Vojto 4. 10. 2026) - zástupný riadok
   prečiarknutej ceny sa už nevyhradzuje. */
.dl .dl-cena-pred.je-prazdny {
    display: none;
}

.dl .dl-dostupnost + .dl-cena,
.dl .dl-dostupnost + .dl-cena-pred.je-prazdny + .dl-cena {
    margin-top: 5px;
}

.dl-cena-pred + .dl-cena {
    margin-top: 0;
}

.dl-kosik {
    margin: 16px 0 0;
}

.dl-tlacidlo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 6px;
    background: var(--farba-tlacidla, var(--dl-cervena));   /* Farebnosť → Farba tlačidla */
    /* Písmo: Nastavenia → Písma → Text tlačidla (pisma.css, eZ4Su0qy). */
    cursor: pointer;
}

.dl-tlacidlo:hover {
    background: var(--farba-tlacidla-prechod, var(--dl-cervena));
}

/* Ikona košíka zo sady Frontendu, prefarbená maskou na farbu textu
   tlačidla (Nastavenia → Písma → Text tlačidla). */
.dl-tlacidlo-ikona {
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: url("/ikony/frontend-nakupny-kosik-prazdny.svg") center / contain no-repeat;
    mask: url("/ikony/frontend-nakupny-kosik-prazdny.svg") center / contain no-repeat;
}

/* Nedostupný produkt: Detaily s ikonou oka zo sady Frontendu. */
.dl-tlacidlo--detaily {
    text-decoration: none;
}

.dl-tlacidlo--detaily .dl-tlacidlo-ikona {
    -webkit-mask-image: url("/ikony/frontend-oko.svg");
    mask-image: url("/ikony/frontend-oko.svg");
}

/* --------------------------------------------------------------------------
   7. FILTERS SIDEBAR
   -------------------------------------------------------------------------- */
.filters {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--color-bg);
    /* Prilepené, aby filtre zostali viditeľné pri posúvaní dlhého výpisu.
       Zastavia sa pod hlavičkou e-shopu - tá je prilepená tiež a ležala by
       cez ne. Boli tu natvrdo napísané 130 px, čo bol odhad jej výšky;
       --vyska-hlavicky drží skutočnú nameranú hodnotu (viď base.css). */
    position: sticky;
    top: calc(var(--vyska-hlavicky) + var(--space-4));
    max-height: calc(100vh - var(--vyska-hlavicky) - var(--space-6));
    overflow-y: auto;
}

.filter-group { margin-bottom: var(--space-5); }
.filter-group:last-child { margin-bottom: 0; }

.filter-group > h3 {
    /* Písmo H3 z Backend → Nastavenia → Písma (pisma.css). */
    margin-bottom: var(--space-2);
}

.filter-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 3px 0;
    font-size: 14px;
    cursor: pointer;
}

.filter-option input { margin: 0; cursor: pointer; }
.filter-option .count { margin-left: auto; }

.price-range { display: flex; align-items: center; gap: var(--space-2); }
.price-range input { width: 100%; }

/* --------------------------------------------------------------------------
   8. PRODUCT DETAIL
   -------------------------------------------------------------------------- */
.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-7);
}

.gallery-main {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }

.gallery-thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }

.gallery-thumbs img {
    width: 64px; height: 64px;
    object-fit: cover;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
}

.variant-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0; }

.variant-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.variant-row .variant-name { font-weight: 600; }
.variant-row form { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
.variant-row input[type="number"] { width: 68px; padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border); border-radius: var(--radius); }

.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table th, .spec-table td {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.spec-table th { width: 40%; color: var(--color-text-muted); font-weight: 600; }

/* --------------------------------------------------------------------------
   ZNAČKY (Trello XxiKNngl, 28. 9. 2026)
   --------------------------------------------------------------------------
   Vzor: nadpis tenkým písmom, 8 kariet v rade s tenkým okrajom, logo
   v strede, pod ním názov značky. Značky: catalog/znacky.blade.php.
   -------------------------------------------------------------------------- */
.zn-nadpis {
    /* Písmo H1 z Backend → Nastavenia → Písma (pisma.css). */
    margin: 0 0 20px;
}

.zn-mriezka {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zn-karta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    background: #FFFFFF;
    color: #333333;
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}

.zn-karta:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    text-decoration: none;
}

.zn-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
}

.zn-logo img {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
}

.zn .zn-nazov {
    /* Písmo „Názov značky“ z Backend → Nastavenia → Písma (trieda
       .pismo-znacka v pisma.css, Trello XxiKNngl). */
    margin: 0;
    line-height: 1.2;
    text-align: center;
}

/* Značky na úvodnej stránke (Trello uopmQTCi): pod Výberom produktov,
   tlačidlo vo Farbe tlačidla z Nastavenia → Farebnosť. */
.zn-uvod {
    margin-bottom: var(--space-7, 48px);
}

.zn-uvod-tlacidlo {
    margin-top: 20px;
    text-align: center;
}

.zn-uvod .zn-uvod-vsetky {
    padding: 12px 20px;
    border-radius: 6px;
    background: var(--farba-tlacidla, var(--color-primary));
}

.zn-uvod .zn-uvod-vsetky:hover {
    background: var(--farba-tlacidla-prechod, var(--color-primary));
}

@media (max-width: 1279px) { .zn-mriezka { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .zn-mriezka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .zn-mriezka { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 479px)  { .zn-mriezka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   KATEGÓRIE NA ÚVODNEJ STRÁNKE (Trello uopmQTCi, 28. 9. 2026)
   --------------------------------------------------------------------------
   Dlaždica: obrázok kategórie (Backend → Kategórie → Obrázok) cez
   celú plochu, stmavený, dole biely názov a tlačidlo „Zobraziť obsah“ (.btn -
   farba a písmo z Nastavení). 4 v rade. Šablóna: components/home/kategorie.
   -------------------------------------------------------------------------- */
.kt {
    margin-bottom: var(--space-7, 48px);
}

.kt-nadpis {
    /* Písmo H2 z Backend → Nastavenia → Písma (pisma.css). */
    margin: 0 0 20px;
}

.kt-mriezka {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kt-dlazdica {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    aspect-ratio: 4 / 5;
    padding: 20px 16px 30px;
    overflow: hidden;
    border-radius: 8px;
    background: #333333;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
}

.kt-dlazdica img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Stmavenie, aby bol biely názov čitateľný na každom obrázku. */
.kt-dlazdica::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.kt-dlazdica:hover {
    text-decoration: none;
}

.kt-dlazdica:hover img {
    transform: scale(1.04);
}

.kt-nazov,
.kt-dlazdica .btn {
    position: relative;
    z-index: 1;
}

.kt-nazov {
    /* Písmo textu z Nastavení, len väčšie a biele na tmavom obrázku. */
    font-size: 22px;
    line-height: 1.2;
    color: #FFFFFF;
}

.kt-dlazdica:hover .btn {
    background: var(--farba-tlacidla-prechod, var(--color-primary-dark));
}

@media (max-width: 1023px) { .kt-mriezka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .kt-mriezka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* --------------------------------------------------------------------------
   DETAIL KATEGÓRIE (Trello WuUtVLkZ, 29. 9. 2026)
   --------------------------------------------------------------------------
   Predloha toolzonesk.markdevelo.sk/kategoria/rucne-naradie/kluce - zatiaľ
   vyskladané, doladí sa spolu so zadávateľom. Šablóna catalog/kategoria.
   -------------------------------------------------------------------------- */
.kd {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin-bottom: var(--space-7, 48px);
}

/* Ľavý sivý stĺpec s filtrami. */
.kd-filtre {
    background: #F2F2F2;
    border: 1px solid #E5E5E5;
    border-top: 0;
}

.kd-blok {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid #E0E0E0;
}

.kd-blok-nadpis {
    font-size: 19px;
    font-weight: 700;
    color: #6E6E6E;
}

/* Stĺpec filtrov prilepený na spodnú hranu hlavičky a „Zoradiť produkty“
   na úrovni nadpisu H1 kategórie (Vojto 1. 10. 2026) - ako v detaile
   produktu. Len pri dvoch stĺpcoch. */
@media (min-width: 1024px) {
    .kd-filtre {
        margin-top: -32px;
    }

    .kd-filtre .kd-blok:first-child {
        padding-top: 84px;
    }
}

.kd-select {
    height: 38px;
    padding: 0 14px;
    border: 1px solid #D8D8D8;
    border-radius: 6px;
    background: #FFFFFF;
    font: inherit;
    font-size: 15px;
}

/* Filter parametra typu Select s vyhľadávaním (Produkty → Filtre, 7. 10. 2026):
   pole na hľadanie nad selectom, oba na celú šírku stĺpca. */
.kd-rozbal-obsah .kd-select,
.kd-select-hladat {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.kd-select-hladat {
    height: 38px;
    margin-bottom: 8px;
    padding: 0 14px;
    border: 1px solid #D8D8D8;
    border-radius: 6px;
    font: inherit;
    font-size: 15px;
}

.kd-rozbal-obsah .kd-select[size] {
    height: auto;
    padding: 4px 8px;
}

/* Posuvník ceny: dva range inputy nad sebou, výber medzi nimi v Hlavnej farbe. */
.kd-posuvnik {
    position: relative;
    height: 26px;
}

.kd-posuvnik-draha {
    position: absolute;
    top: 50%;
    left: 12px;
    right: 12px;
    height: 3px;
    border-radius: 2px;
    background: #D8D8D8;
    transform: translateY(-50%);
}

.kd-posuvnik-vyber {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--farba-hlavna, #E4202A);
}

.kd-posuvnik input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.kd-posuvnik input[type="range"]::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    border: 1px solid #D0D0D0;
    border-radius: 50%;
    background: #FFFFFF;
    pointer-events: auto;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.kd-posuvnik input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: 1px solid #D0D0D0;
    border-radius: 50%;
    background: #FFFFFF;
    pointer-events: auto;
    cursor: pointer;
}

.kd-posuvnik input[type="range"]::-webkit-slider-runnable-track { background: none; }
.kd-posuvnik input[type="range"]::-moz-range-track { background: none; }

.kd-ceny {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.kd-cena {
    display: flex;
    width: 100px;
    height: 40px;
    overflow: hidden;
    border: 1px solid #D8D8D8;
    border-radius: 6px;
    background: #FFFFFF;
}

.kd-cena input {
    flex: 1;
    min-width: 0;
    padding: 0 10px;
    border: 0;
    font: inherit;
    font-size: 15px;
    -moz-appearance: textfield;
}

.kd-cena input::-webkit-outer-spin-button,
.kd-cena input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.kd-cena span {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-left: 1px solid #D8D8D8;
    background: #F2F2F2;
    font-size: 14px;
}

.kd-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #6E6E6E;
    cursor: pointer;
}

.kd-radio input {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: #000000;
}

/* Filtre parametrov (Vojto 3. 10. 2026): prvých 5 hodnôt, ostatné po
   „Zobraziť viac“; počet produktov sivo na konci. */
.kd-hodnota .kd-pocet {
    margin-left: auto;
    font-size: 13px;
    color: #9A9A9A;
}

.kd-hodnota.je-skryta {
    display: none;
}

[data-kd-parameter].je-otvoreny .kd-hodnota.je-skryta {
    display: flex;
}

.kd-viac-hodnot {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    color: #000000;
    text-decoration: underline;
    cursor: pointer;
}

/* Aktívne filtre (Vojto 5. 10. 2026): ružová oblasť nad filtrami, červené
   tlačidlo Zrušiť všetky filtre, pod ním zapnuté filtre s ikonou Zrušiť. */
.kd-aktivne {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: #F8B8B8;
    border-bottom: 1px solid #E0E0E0;
}

.kd-aktivne-zrusit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 6px;
    background: #D6001C;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s;
}

.kd-aktivne-zrusit:hover {
    background: #B00017;
    color: #FFFFFF;
}

.kd-aktivne-zoznam {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kd-aktivne-zoznam li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px 6px 12px;
    border-radius: 6px;
    background: #FFFFFF;
    font-size: 14px;
    line-height: 1.3;
    color: #000000;
}

.kd-aktivne-zoznam a {
    display: flex;
    flex: none;
}

.kd-aktivne-zoznam img {
    width: 20px;
    height: 20px;
    transition: transform .15s;
}

.kd-aktivne-zoznam a:hover img {
    transform: scale(1.12);
}

/* Parametre na filtrovanie zbalené na hlavičku so šípkou (Vojto 5. 10. 2026):
   sipka-dole = zbalené, sipka-hore = rozbalené (Frontend/Ikony). */
.kd-rozbal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.kd-rozbal img {
    flex: none;
    width: 14px;
    height: 14px;
    opacity: .55;
}

.kd-rozbal-hore,
.kd-rozbalovaci.je-rozbaleny .kd-rozbal-dole {
    display: none;
}

.kd-rozbalovaci.je-rozbaleny .kd-rozbal-hore {
    display: block;
}

.kd-rozbal-obsah {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.kd-rozbalovaci.je-rozbaleny .kd-rozbal-obsah {
    display: flex;
}

/* Filter Značka (Vojto 5. 10. 2026): logá 3 v riadku; zvolené logo prekryje
   biela 50 % a zelená fajka (Ikony/oznacenie.svg). */
.kd-znacky {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.kd-znacka {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 6px;
    border: 1px solid #D8D8D8;
    border-radius: 6px;
    background: #FFFFFF;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s;
}

.kd-znacka:hover {
    border-color: #9A9A9A;
}

.kd-znacka input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.kd-znacka img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.kd-znacka-nazov {
    font-size: 12px;
    line-height: 1.2;
    color: #000000;
    text-align: center;
    overflow-wrap: anywhere;
}

.kd-znacka:has(input:checked)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .5);
}

.kd-znacka:has(input:checked)::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
    background: #80BA3A;
    -webkit-mask: url('/ikony/oznacenie.svg') center / contain no-repeat;
    mask: url('/ikony/oznacenie.svg') center / contain no-repeat;
}

.kd-znacka:has(input:focus-visible) {
    outline: 2px solid #000000;
    outline-offset: 2px;
}

.kd-znacka.je-skryta {
    display: none;
}

[data-kd-parameter].je-otvoreny .kd-znacka.je-skryta {
    display: flex;
}

/* Hlavička: nadpis H1 (Písma), cesta s ikonou domu, Späť vpravo. */
.kd-hlavicka {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin: 40px 0 30px;
}

.kd-nadpis {
    margin: 0;
    line-height: 1.15;
}

.kd-cesta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 14px;
    color: #BBBBBB;
}

.kd-cesta img {
    width: 18px;
    height: 18px;
    opacity: 0.45;
}

.kd-cesta a {
    color: #BBBBBB;
    text-decoration: none;
}

.kd-cesta a:hover {
    text-decoration: underline;
}

.kd .kd-spat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    border-radius: 6px;
    flex: none;
}

.kd-spat span {
    font-size: 26px;
    line-height: 1;
}

/* Popis kategórie pod hlavičkou (písmo z Nastavenia → Písma). */
.kd-popis {
    margin: -10px 0 30px;
}

.kd-popis > :first-child { margin-top: 0; }
.kd-popis > :last-child { margin-bottom: 0; }

/* Podkategórie: ikona + názov, 4 v rade. */
.kd-podkategorie {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.kd-podkategoria {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 68px;
    padding: 8px 10px;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    color: #000000;
    font-size: 15px;   /* o 2 px menšie (Vojto 1. 10. 2026) */
    line-height: 1.2;
    text-decoration: none;
}

.kd-podkategoria:hover {
    border-color: #7F7F7F;
    text-decoration: none;
}

.kd-podkategoria img {
    flex: none;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.kd .kd-produkty {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

/* Stránkovanie (predloha Vojto 1. 10. 2026): štvorčeky 40 px s okrúhlymi
   rohmi, svetlosivé #F2F2F2 s bielym tučným číslom, aktuálna strana
   v Hlavnej farbe; výpustka sivá; vpravo „Zobraziť viac“ sivé tlačidlo. */
.kd-strankovanie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

.kd-strany {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kd .kd-strany a,
.kd .kd-strany span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 7px;
    background: #F2F2F2;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.kd .kd-strany a:hover {
    background: #E3E3E3;
    color: #7F7F7F;
}

.kd .kd-strany .je-aktivna {
    background: var(--farba-hlavna, #E4202A);
    color: #FFFFFF;
}

.kd-strany .kd-vypustka {
    padding: 0 18px;
    font-size: 18px;
    font-weight: 700;
    color: #CCCCCC;
}

.kd .kd-viac {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    border-radius: 7px;
    background: #EEEEEE;
    color: #6E6E6E;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

.kd .kd-viac:hover {
    background: #E0E0E0;
    color: #000000;
    text-decoration: none;
}

.kd-viac.je-nacitava {
    opacity: 0.5;
    pointer-events: none;
}

@media (max-width: 1279px) {
    .kd .kd-produkty,
    .kd-podkategorie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
    .kd { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .kd-hlavicka { margin-top: 10px; }
}

.kd-filtre-otvor,
.kd-filtre-zavriet,
.kd-filtre-pozadie {
    display: none;
}

/* MOBILNÁ VERZIA DETAILU KATEGÓRIE (layouty Vojto 1. 10. 2026): tlačidlo
   Použiť filtre, filtre ako panel sprava, podkategórie a produkty po
   jednom na riadok, stránkovanie - čísla v riadku, Zobraziť viac pod nimi. */
@media (max-width: 767px) {
    .kd-hlavicka { margin: 20px 0 20px; }
    .kd .kd-spat { display: none; }

    .kd-filtre-otvor {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        height: 50px;
        margin: 0 0 20px;
        border: 0;
        border-radius: 10px;
        background: var(--farba-tlacidla, #E30014);
        font-size: 20px;
        font-weight: 700;
        color: #FFFFFF;
        cursor: pointer;
    }

    .kd-filtre-otvor svg {
        width: 22px;
        height: 22px;
    }

    .kd .kd-filtre {
        position: fixed;
        top: var(--vyska-hlavicky, 110px);
        right: 0;
        bottom: 60px;
        z-index: 48;
        width: calc(100% - 40px);
        margin: 0;
        padding-top: 50px;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 0;
        border-radius: 16px 0 0 16px;
        background: #FFFFFF;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

    .kd .kd-filtre.je-otvoreny {
        transform: none;
        visibility: visible;
        transition: transform 0.25s ease, visibility 0s;
    }

    .kd .kd-filtre .kd-blok:first-child {
        padding-top: 20px;
    }

    .kd-filtre-zavriet {
        position: absolute;
        top: 16px;
        left: 20px;
        display: block;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23E30014' stroke-width='3.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
        cursor: pointer;
    }

    .kd-filtre-pozadie {
        position: fixed;
        inset: 0;
        z-index: 47;
        display: block;
        background: rgba(0, 0, 0, 0.45);
    }

    .kd-filtre-pozadie[hidden] { display: none; }

    body.kd-filtre-otvorene { overflow: hidden; }

    .kd .kd-produkty,
    .kd-podkategorie { grid-template-columns: minmax(0, 1fr); }

    .kd-podkategorie { gap: 12px; margin-bottom: 30px; }

    .kd-podkategoria {
        height: 64px;
        padding: 8px 16px;
        border-radius: 10px;
        font-size: 17px;
    }

    .kd .kd-produkty { gap: 20px; }

    .kd .kd-produkty .dl .dl-nazov {
        min-height: 0;
        font-size: 26px;
        line-height: 1.25;
    }

    .kd .kd-produkty .dl-cena { font-size: 24px; }

    .kd-strankovanie {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .kd-strany {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 6px;
        max-width: 100%;
    }

    .kd .kd-strany a,
    .kd .kd-strany span {
        min-width: 36px;
        height: 36px;
        padding: 0 6px;
        font-size: 16px;
    }

    .kd-strany .kd-vypustka { padding: 0 4px; font-size: 16px; }

    .kd .kd-viac { height: 40px; }
}

/* --------------------------------------------------------------------------
   DETAIL PRODUKTU (Trello kizDf3Rm, 29. 9. 2026)
   --------------------------------------------------------------------------
   Predloha toolzonesk.markdevelo.sk/produkt/... - zatiaľ vyskladané, doladí
   sa so zadávateľom. Šablóna catalog/product.
   -------------------------------------------------------------------------- */
.pd {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin-bottom: var(--space-7, 48px);
}

/* Ľavý sivý stĺpec - rovnaký ako filtre detailu kategórie. */
.pd-bok {
    background: #F2F2F2;
    border: 1px solid #E5E5E5;
    border-top: 0;
}

.pd-blok {
    padding: 20px;
    border-bottom: 1px solid #E0E0E0;
}

.pd-blok:last-child {
    border-bottom: 0;
}

/* Ľavý stĺpec prilepený na spodnú hranu hlavičky, nadpis „Neviete si
   vybrať?“ na úrovni hornej hrany obrázka (Vojto 1. 10. 2026): obsah
   stránky začína 32 px pod hlavičkou (.site-main), galéria ďalších 40 px
   nižšie -> stĺpec o 32 px vyššie, prvý blok 72 px zhora. Len pri dvoch
   stĺpcoch (na užšej šírke je stĺpec pod obsahom). */
@media (min-width: 1024px) {
    .pd-bok {
        margin-top: -32px;
    }

    .pd-bok > .pd-blok:first-child {
        padding-top: 72px;
    }
}

.pd .pd-bok-nadpis {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #000000;
}

.pd-bok-podnadpis {
    margin: 2px 0 20px;
    font-size: 15px;
    color: #6E6E6E;
}

.pd-otazka {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pd-otazka input[type="text"],
.pd-otazka input[type="email"],
.pd-otazka input[type="tel"],
.pd-otazka textarea {
    width: 100%;
    padding: 12px 18px;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    background: #FFFFFF;
    font: inherit;
    font-size: 15px;
}

.pd-otazka textarea {
    min-height: 120px;
    resize: vertical;
}

.pd-suhlas {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.2;
    color: #6E6E6E;
}

.pd-suhlas input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #000000;
}

.pd .pd-tlacidlo {
    align-self: center;
    height: 46px;
    padding: 0 20px;
    border-radius: 6px;
}

.pd-naposledy {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 16px 0 0;
    padding: 0 0 0 10px;
    list-style: none;
}

.pd-naposledy a {
    display: flex;
    flex-direction: column;
    color: #000000;
    text-decoration: none;
}

.pd-naposledy-kod {
    font-size: 13px;
    color: #7F7F7F;
}

.pd-naposledy-nazov {
    font-size: 15px;
    line-height: 1.2;
}

.pd-naposledy a:hover .pd-naposledy-nazov {
    text-decoration: underline;
}

.pd-naposledy-cena {
    margin-top: 4px;
    font-size: 22px;
    font-weight: 700;
    color: #E4202A;
}

.pd-naposledy-dph {
    font-size: 12px;
}

.pd-zdielanie {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pd-zdielat {
    padding: 8px 14px;
    border-radius: 3px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.pd-zdielat:hover { filter: brightness(0.9); text-decoration: none; }
.pd-zdielat--whatsapp { background: #25D366; }
.pd-zdielat--email { background: #EA4335; }
.pd-zdielat--facebook { background: #3B5998; }
.pd-zdielat--linkedin { background: #0077B5; }
.pd-zdielat--x { background: #000000; }

/* Horná časť: galéria vľavo, informácie vpravo. */
.pd-hore {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.pd-galeria {
    padding: 20px;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
}

.pd-galeria-hlavny {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

.pd-galeria-hlavny img {
    /* Aj menší obrázok vyplní plochu galérie (pomer strán ostáva). */
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pd-sipka {
    position: absolute;
    top: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 30px;
    line-height: 1;
    color: #555555;
    transform: translateY(-50%);
    cursor: pointer;
}

.pd-sipka--vlavo { left: 0; }
.pd-sipka--vpravo { right: 0; }

.pd-galeria-nahlady {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.pd-galeria-nahlady img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.pd-galeria-nahlady img.je-aktivny {
    border-color: #CCCCCC;
}

/* Logo značky vpravo hore, v úrovni kódu (Vojto 4. 10. 2026). */
.pd-info {
    position: relative;
}

.pd-info > .pd-znacka {
    /* .pd-info > - prebije position: relative z .fe-upravitelne (úpravy na frontende). */
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 116px;
    height: 58px;
    padding: 6px 10px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    background: #FFFFFF;
}

.pd-znacka img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pd-znacka ~ .pd-kody {
    padding-right: 130px;
}

.pd-kody {
    font-size: 16px;
    line-height: 1.2;
    color: #555555;
}

.pd-nazov {
    /* Písmo H1 z Backend → Nastavenia → Písma (pisma.css), veľkosť o 10 px
       menšia než H1 (Vojto 4. 10. 2026) - mení sa spolu s nastavením. */
    font-size: calc(var(--pismo-h1-velkost, 28px) - 10px);
    margin: 30px 0 12px;
    line-height: 1.1;
}

.pd-cesta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 14px;
    color: #BBBBBB;
}

.pd-cesta a {
    color: #BBBBBB;
    text-decoration: none;
}

.pd-cesta a:hover {
    text-decoration: underline;
}

.pd-cena-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 24px 0;
    padding: 20px 20px 20px 30px;
    border-radius: 6px;
    background: #F2F2F2;
}

.pd-cena {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.05;
    color: #E4202A;
}

.pd-cena-pred {
    font-size: 16px;
    color: #7F7F7F;
    text-decoration: line-through;
}

.pd-cena-pred span {
    text-decoration: none;
    color: #E4202A;
}

.pd-dph {
    font-size: 14px;
}

.pd-poznamka {
    font-size: 11px;
}

.pd .pd-kosik {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 20px;
    border-radius: 6px;
}

.pd-vlastnosti {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pd-vlastnosti li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 17px;
}

.pd-vlastnosti img {
    flex: none;
    width: 32px;
    height: 32px;
}

.pd-vlastnosti p {
    margin: 4px 0 0;
    line-height: 1.2;
    color: #555555;
}

.pd-vlastnosti strong {
    color: #000000;
}

.pd-vlastnost-nadpis {
    font-size: 19px;
}

.pd-sklad {
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: #E4202A;
}

.pd-sklad.je-skladom {
    color: #6BAE2A;
}

/* Popis a parametre vedľa seba, oddelené zvislou čiarou. */
.pd-detaily {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: 60px;
}

.pd-popis {
    padding-right: 20px;
}

.pd-parametre {
    padding-left: 20px;
    border-left: 1px solid #CCCCCC;
}

.pd .pd-sekcia-nadpis {
    margin: 0 0 20px;
    font-size: 32px;
    font-weight: 700;
    color: #000000;
}

.pd-parametre dl {
    margin: 0;
}

.pd-parametre dl > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0;
    font-size: 17px;
}

.pd-parametre dt {
    color: #6E6E6E;
}

.pd-parametre dd {
    margin: 0;
    text-align: right;
    color: #555555;
}

/* Katalóg (Vojto 1. 10. 2026): strana katalógu ako odkaz na katalóg. */
.pd-katalog {
    margin-top: 50px;
}

.pd-katalog-odkaz {
    display: inline-block;
    max-width: 100%;
}

.pd-katalog-strana {
    display: block;
    width: 400px;
    max-width: 100%;
    height: auto;
    border: 1px solid #CCCCCC;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.15s ease;
}

.pd-katalog-odkaz:hover .pd-katalog-strana {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.pd-katalog-text {
    text-decoration: underline;
}

/* Listovací katalóg vložený v detaile (Vojto 6. 10. 2026) - dvojstrana na
   šírku obsahu; na mobile jedna strana. */
.pd-katalog-okno {
    display: block;
    width: 100%;
    aspect-ratio: 1.42;
    max-height: 90vh;
    border: 0;
    border-radius: 8px;
    background: #3E4245;
}

@media (max-width: 767px) {
    .pd-katalog-okno {
        aspect-ratio: 0.62;
    }
}

.pd-suvisiace {
    margin-top: 50px;
}

.pd .pd-suvisiace-mriezka {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 1279px) {
    .pd .pd-suvisiace-mriezka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
    .pd { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .pd-bok { order: 2; }
    .pd-hore,
    .pd-detaily { grid-template-columns: minmax(0, 1fr); }
    .pd-parametre { margin-top: 30px; padding-left: 0; border-left: 0; }
}

.pd-naposledy-obrazok {
    display: none;
}

/* MOBILNÁ VERZIA DETAILU PRODUKTU (layout Vojto 1. 10. 2026): názov, cesta,
   galéria, kódy, cenový box na stred, dostupnosť; popis, parametre,
   súvisiace po jednom; sivý blok (otázka, naposledy prezerané, zdieľanie)
   ako zaoblená karta na konci. */
@media (max-width: 767px) {
    .pd-hore {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .pd-info {
        display: contents;
    }

    .pd-nazov { order: 1; margin-top: 0; }

    .pd { margin-top: -12px; }
    .pd-hore { margin-top: 0; }

    /* Náhľady galérie po štyroch v riadku. */
    .pd-galeria { padding: 12px; }

    .pd-galeria-nahlady {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
    }

    .pd-galeria-nahlady img {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }
    /* Kód a logo značky pod názvom - logo vpravo v úrovni kódu (Vojto
       4. 10. 2026); záporný spodný okraj loga ho posadí vedľa kódu. */
    .pd-info > .pd-znacka { position: relative; order: 2; align-self: flex-end; width: 100px; height: 50px; margin-bottom: -50px; }
    .pd-kody { order: 2; margin-bottom: 16px; }
    .pd-znacka ~ .pd-kody { min-height: 50px; padding-right: 112px; }
    .pd-cesta { order: 3; margin-bottom: 20px; }
    .pd-galeria { order: 4; margin-bottom: 16px; }
    .pd-cena-box { order: 5; }
    .pd-vlastnosti { order: 6; }

    .pd-cena-box {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
    }

    .pd-cena-box .pd-cena {
        font-size: 40px;
    }

    .pd .pd-suvisiace-mriezka {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .pd .pd-suvisiace-mriezka .dl .dl-nazov {
        min-height: 0;
        font-size: 26px;
        line-height: 1.25;
    }

    .pd .pd-suvisiace-mriezka .dl-cena { font-size: 24px; }

    .pd-bok {
        margin-top: 10px;
        border: 1px solid #DDDDDD;
        border-radius: 10px;
        overflow: hidden;
    }

    .pd-naposledy-obrazok {
        display: block;
        width: 70px;
        height: 70px;
        margin-bottom: 6px;
        padding: 4px;
        border: 1px solid #DDDDDD;
        border-radius: 8px;
        background: #FFFFFF;
        object-fit: contain;
    }

    .pd-naposledy-cena {
        text-align: center;
    }
}

/* Zľavový kupón v košíku a pokladni (Trello iPdG1ysJ, 1. 10. 2026). */
.ks-kupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ks-kupon-odstranit {
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.ks-kupon-hlaska {
    margin: 10px 0 0;
    font-size: 14px;
}

.ks-kupon-hlaska--chyba { color: #EA001C; }
.ks-kupon-hlaska--ok { color: #3C8C1E; }

.ks-suhrn-riadok--zlava,
.pk-suhrn-zlava {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #3C8C1E;
}

.pk-suhrn-zlava {
    margin-top: 10px;
}

/* Lightbox detailu produktu (Vojto 4. 10. 2026) - originály v pôvodnej
   veľkosti (väčšie sa zmenšia na obrazovku), šípky, počítadlo, krížik. */
html.lb-otvoreny {
    overflow: hidden;
}

.lb {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 80px;
    background: rgba(0, 0, 0, 0.88);
}

.lb[hidden] {
    display: none;
}

.lb-obrazok {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #FFFFFF;
    cursor: default;
}

.lb-zavriet {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: url("/icons/zrusit.svg") center / contain no-repeat;
    cursor: pointer;
}

.lb-sipka {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    font-size: 40px;
    line-height: 48px;
    color: #FFFFFF;
    transform: translateY(-50%);
    cursor: pointer;
}

.lb-sipka:hover {
    background: rgba(255, 255, 255, 0.3);
}

.lb-sipka--vlavo { left: 16px; }
.lb-sipka--vpravo { right: 16px; }

.lb-pocet {
    position: absolute;
    bottom: 18px;
    left: 50%;
    font-size: 14px;
    color: #FFFFFF;
    transform: translateX(-50%);
}

.lb--jeden .lb-sipka,
.lb--jeden .lb-pocet {
    display: none;
}

@media (max-width: 767px) {
    .lb {
        padding: 60px 10px;
    }

    .lb-sipka {
        top: auto;
        bottom: 10px;
        width: 44px;
        height: 44px;
        line-height: 40px;
        transform: none;
    }
}


/* Vyhľadať vo výsledkoch (Vojto 6. 10. 2026) - pole v stĺpci filtrov
   s lupou vpravo, rovnaký rámik ako výber Zoradiť. */
.kd-hladat {
    position: relative;
}

.kd-hladat input {
    width: 100%;
    height: 38px;
    padding: 0 40px 0 14px;
    border: 1px solid #D8D8D8;
    border-radius: 6px;
    background: #FFFFFF;
    font: inherit;
    font-size: 15px;
    box-sizing: border-box;
}

.kd-hladat button {
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: none;
    color: #7F7F7F;
    cursor: pointer;
}

.kd-hladat button svg {
    width: 16px;
    height: 16px;
}

.kd-pocet-vysledkov {
    margin: 6px 0 0;
    font-size: 14px;
    color: #7F7F7F;
}

/* Logo značky na dlaždici (Vojto 6. 10. 2026) - vpravo hore nad obrázkom,
   rámik ako na veľkom detaile (.pd-znacka), len menší. */
.dl .dl-obrazok {
    position: relative;
}

.dl-znacka {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 38px;
    padding: 4px 6px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    background: #FFFFFF;
}

.dl-znacka img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}