/* ============================================================
   dumgarden.cz — vizuální identita
   ------------------------------------------------------------
   Styl velkých nábytkářských řetězců: výrazná červená jako akcent
   na ceny a slevy, jinak bílá a šedá, husté rozvržení, velké
   cenové bloky s přeškrtnutou původní cenou a procentním štítkem.

   Nacita se AZ ZA shop.css (a za inline <style> v _layout.twig),
   takze prepisuje puvodni tema. Odebranim odkazu z _layout.twig
   se eshop vrati k predchozimu vzhledu.
   ============================================================ */

:root {
    --dg-red:      #e2001a;   /* hlavni akcent — ceny, CTA, navigace */
    --dg-red-dark: #b80015;
    --dg-ink:      #1a1a1a;   /* text */
    --dg-grey:     #6b7280;   /* doplnkovy text */
    --dg-line:     #e3e3e3;
    --dg-bg:       #f4f4f4;   /* pozadi stranky */
    --dg-soft:     #fafafa;   /* plochy karet a obrazku */
    --dg-green:    #158a3c;   /* skladem */
    --dg-yellow:   #ffcc00;   /* hvezdicky hodnoceni */

    /* prepsani promennych puvodniho tematu */
    --primary: var(--dg-red);
    --primary-dark: var(--dg-red-dark);
    --secondary: var(--dg-ink);
    --accent: var(--dg-red);
    --accent-dark: var(--dg-red-dark);
    --bg: var(--dg-bg);
    --bg-light: var(--dg-soft);
    --border: var(--dg-line);
    --text: var(--dg-ink);
    --text-muted: var(--dg-grey);
    --red: var(--dg-red);
    --green: var(--dg-green);
    --kh-yellow: var(--dg-red);
    --kh-yellow-2: var(--dg-red-dark);
    --kh-ink: var(--dg-ink);
    --kh-line: var(--dg-line);
}

body { background: var(--dg-bg); color: var(--dg-ink); }

/* ── Horni linka: tmava, servisni sdeleni ────────────────── */
.kh-topline { background: var(--dg-ink); color: #fff; font-size: 11.5px; }
.kh-topline a { color: #fff; opacity: .8; }
.kh-topline a:hover { opacity: 1; }
.kh-topline-inner { min-height: 32px; align-items: center; }
.kh-contact::before {
    content: "Výdej na prodejně  ·  14 dní na vrácení  ·  Dodání 7–10 pracovních dní";
    margin-right: 18px;
}
.kh-langs .kh-lang { color: #fff; }
.kh-langs .kh-lang.is-active { background: rgba(255,255,255,.2); }

/* ── Hlavicka: bila, logo vlevo, velke hledani ───────────── */
.kh-head { background: #fff; border-bottom: 1px solid var(--dg-line); }
.kh-head-inner { min-height: 82px; gap: 28px; }

/* Logo: cerveny ctverec s domeckem a listem + slovni znacka.
   Postaveno v CSS, zadny obrazek — skaluje se a nezatezuje nacitani. */
.brand { display: flex; align-items: center; text-decoration: none; }
/* Nove PNG logo (pruhledne pozadi) misto drivejsiho CSS loga */
.brand .brand-logo { display: block; width: 300px; max-width: 300px; height: auto; }
.brand::before, .brand::after { content: none; }

/* ── Vyhledavani ─────────────────────────────────────────── */
.kh-search input {
    border: 2px solid var(--dg-ink); border-right: 0;
    border-radius: 4px 0 0 4px; height: 46px; background: #fff; font-size: 14px;
}
.kh-search button {
    background: var(--dg-ink); color: #fff; border: 0;
    border-radius: 0 4px 4px 0; height: 46px; padding: 0 24px; font-weight: 700;
}
.kh-search button:hover { background: var(--dg-red); }

/* ── Kosik ───────────────────────────────────────────────── */
.kh-cart {
    background: var(--dg-red); color: #fff;
    border-radius: 4px; padding: 12px 18px; font-weight: 700;
}
.kh-cart:hover { background: var(--dg-red-dark); color: #fff; }
.kh-cart #cart-badge {
    background: #fff; color: var(--dg-red);
    border-radius: 50%; padding: 2px 8px; margin-left: 5px; font-weight: 800;
}

/* ── Hlavni navigace: cerveny pruh ───────────────────────── */
.kh-nav { background: var(--dg-red); border: 0; }
.kh-nav-inner { min-height: 46px; gap: 0; }
.kh-nav a {
    color: #fff; font-size: 15.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .3px;
    padding: 15px 18px; border: 0;
}
.kh-nav a:hover, .kh-nav a.is-active { background: var(--dg-red-dark); color: #fff; }
.kh-nav .hamburger {
    background: var(--dg-red-dark); color: #fff; border: 0;
    border-radius: 0; padding: 13px 18px; font-weight: 700;
}

/* ── Mega-menu (najeti na korenovou kategorii, jako Chomik) ──
   Panel je pozicovan vuci .kh-nav (sticky = containing block), takze unika
   oriznuti overflow-x:auto na .kh-nav-inner. Jen desktop — mobil ma drawer. */
.nav-item { display: inline-flex; }
.nav-item > a { height: 100%; }
.mega { display: none; }
@media (min-width: 861px) {
    .mega {
        position: absolute; left: 0; right: 0; top: 100%;
        background: #fff; color: var(--dg-ink);
        border-bottom: 3px solid var(--dg-red);
        box-shadow: 0 24px 50px rgba(0,0,0,.18);
        z-index: 60;
    }
    .nav-item.has-mega:hover .mega,
    .nav-item.has-mega:focus-within .mega { display: block; }
    .mega-inner {
        columns: 5 220px; column-gap: 34px;
        padding: 26px 8px 30px; max-height: 72vh; overflow-y: auto;
    }
    .mega-col { break-inside: avoid; margin: 0 0 20px; }
    .mega-head {
        display: block; color: var(--dg-ink) !important;
        font-size: 13.5px !important; font-weight: 800 !important;
        text-transform: uppercase; letter-spacing: .03em;
        padding: 0 0 7px !important; height: auto !important;
        border-bottom: 2px solid var(--dg-line); margin-bottom: 7px;
        white-space: normal !important;
    }
    .mega-head:hover { color: var(--dg-red) !important; background: transparent !important; }
    .mega-col ul { list-style: none; margin: 0; padding: 0; }
    .mega-col li a {
        display: block; color: #3f4753 !important; font-size: 13px !important;
        font-weight: 500 !important; text-transform: none !important;
        padding: 4px 0 !important; height: auto !important; letter-spacing: 0 !important;
        white-space: normal !important; line-height: 1.35;
    }
    .mega-col li a:hover { color: var(--dg-red) !important; background: transparent !important; }
    .mega-col .mega-more { font-weight: 700 !important; color: var(--dg-red) !important; }
}

/* ── Pruh sluzeb pod hlavickou ───────────────────────────── */
.mk-benefits {
    max-width: 1400px; margin: 0 auto 14px; padding: 16px 0;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: #fff; border-bottom: 1px solid var(--dg-line);
}
.mk-benefits > div {
    display: flex; gap: 13px; align-items: center;
    border-right: 1px solid var(--dg-line); padding: 0 26px; font-size: 25px;
}
.mk-benefits > div:last-child { border-right: 0; }
.mk-benefits b, .mk-benefits small { display: block; }
.mk-benefits b { font-size: 15px; color: var(--dg-ink); }
.mk-benefits small { font-size: 13px; color: var(--dg-grey); }

/* ── Tlacitka ────────────────────────────────────────────── */
.btn, button.btn, a.btn { border-radius: 4px; font-weight: 700; }
.btn-primary, .btn-add, .btn-buy {
    background: var(--dg-red); border-color: var(--dg-red); color: #fff;
}
.btn-primary:hover, .btn-add:hover, .btn-buy:hover {
    background: var(--dg-red-dark); border-color: var(--dg-red-dark); color: #fff;
}
.btn-secondary, .btn-outline, .btn-fast-full {
    background: #fff; border: 2px solid var(--dg-ink); color: var(--dg-ink);
}
.btn-secondary:hover, .btn-outline:hover, .btn-fast-full:hover {
    background: var(--dg-ink); color: #fff;
}

/* ── Produktova karta ────────────────────────────────────── */
.card {
    border: 1px solid var(--dg-line); border-radius: 4px;
    background: #fff; transition: box-shadow .15s, border-color .15s;
}
.card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10); border-color: #c9c9c9; transform: none; }
.card-img { background: #fff; }
.card-title { color: var(--dg-ink); font-weight: 600; font-size: 14px; }

/* cena: prehskrtnuta puvodni nad, velka cervena pod */
.card-price { color: var(--dg-red); font-weight: 800; }
.card-price .price-orig {
    display: block; color: var(--dg-grey); font-size: .5em;
    font-weight: 500; margin: 0 0 2px;
}
.card-price .price-sale { color: var(--dg-red); }
.card-price small { color: var(--dg-grey); font-weight: 500; }
.card-stock.in { color: var(--dg-green); font-weight: 700; }
.card-stock.out { color: var(--dg-grey); }

/* stitky */
.badge { border-radius: 3px; font-weight: 800; }
.badge-akce { background: var(--dg-red); color: #fff; }
.badge-top  { background: var(--dg-ink); color: #fff; }
.badge-new  { background: var(--dg-green); color: #fff; }
.badge-ship { background: var(--dg-ink); color: #fff; }
.badge-bonus{ background: #0057b8; color: #fff; }

/* ── Vypis kategorie: filtry a razeni ────────────────────── */
.sidebar { background: #fff; border: 1px solid var(--dg-line); border-radius: 4px; }
.sidebar .cat-tree a { color: var(--dg-ink); }
.sidebar .cat-tree li.is-active > a { color: var(--dg-red); font-weight: 700; }
.count-pill { border-color: var(--dg-line); background: #fff; border-radius: 4px; }
.count-pill strong { color: var(--dg-red); }
.select-pill { background: #fff; border: 1px solid var(--dg-line); border-radius: 4px; }
.select-pill select { color: var(--dg-ink); font-weight: 700; }
.view-pill { border-radius: 4px; }
.view-pill.is-active { background: var(--dg-ink); border-color: var(--dg-ink); color: #fff; }
.page-btn { border-radius: 4px; }
.page-btn.is-active { background: var(--dg-red); border-color: var(--dg-red); color: #fff; }

/* ── Detail produktu ─────────────────────────────────────── */
.product-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -.4px; }
.product-head .sku { color: var(--dg-grey); }
.info .price strong, .info .price .price-sale { color: var(--dg-red); }
.info .price .price-orig { color: var(--dg-grey); }
.product-short {
    background: #fff; border: 1px solid var(--dg-line); border-radius: 4px;
}
.product-short p { font-family: inherit; color: #444; font-size: 15px; }
.gallery-main, .gallery-main img, .thumbs img { border-radius: 4px; }
@media (min-width: 780px) {
    .product-detail .info { border-radius: 4px; border-color: var(--dg-line); }
}

/* ── Nadpisy ─────────────────────────────────────────────── */
h1, h2, h3 { color: var(--dg-ink); letter-spacing: -.3px; }

/* ── Paticka: tmava ──────────────────────────────────────── */
.kh-footer, footer.kh-footer {
    background: var(--dg-ink); border-top: 0; color: #d5d5d5;
}
.kh-footer a, .kh-footer p { color: #b6b6b6; }
.kh-footer a:hover { color: #fff; }
.kh-footer h3, .kh-footer b { color: #fff; }
.kh-footer .phone, .kh-footer strong { color: var(--dg-red); }

/* ── Mobil ───────────────────────────────────────────────── */
@media (max-width: 800px) {
    .brand .brand-logo { width: 200px; max-width: 200px; }
    .kh-contact::before { content: "14 dní na vrácení"; }
    .mk-benefits { grid-template-columns: 1fr 1fr; }
    .mk-benefits > div { padding: 12px 14px; }
    .mk-benefits > div:nth-child(2) { border-right: 0; }
    .kh-nav a { padding: 12px 12px; font-size: 12px; }
}

/* ── Detail produktu: nazev nahore, vetsi obrazek, nakup vpravo ──────
   Puvodne byla mrizka "gallery | info" pul na pul — nazev se lamal do
   uzkeho sloupce a na obrazek zbyla polovina sirky. Nove ma nazev vlastni
   radek pres celou sirku, galerie dostane vic mista nez nakupni box
   a kratky popis lezi na sirku pod obrazkem. */
.product-detail {
    grid-template-areas: "head" "gallery" "info" "short" "description";
}
.product-detail .product-head  { grid-area: head; }
.product-detail .product-short { grid-area: short; }

.product-head { margin: 0 0 4px; }
.product-head h1 {
    font-size: 34px; line-height: 1.12; margin: 0 0 6px;
    letter-spacing: -.8px; color: var(--dg-ink);
}
.product-head .sku { margin: 0; color: #4b5563; font-size: 14px; }
.product-head .sku strong { color: var(--dg-ink); letter-spacing: .02em; }
/* Checkout: uzsi formularova cast, sirsi shrnuti objednavky */
.checkout-grid { grid-template-columns: 1fr 500px; }
@media (max-width: 1000px) { .checkout-grid { grid-template-columns: 1fr; } }
/* dostupnost pod polozkou ve shrnuti */
.sum-items .sum-avail { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--dg-green); }

/* druhy radek dostupnosti (doba doruceni u zbozi od dodavatele) */
.avail-delivery { display: block; margin-top: 7px; font-size: 13px; color: var(--dg-grey); }

.product-short {
    background: #fff;
    border-radius: 12px;
    padding: 18px 22px;
    margin-top: 4px;
}
.product-short p {
    margin: 0;
    font-family: inherit;
    font-size: 16px; line-height: 1.6; color: #4a5f5b;
}

@media (min-width: 780px) {
    .product-detail {
        /* obrazek dostane vic mista nez nakupni box */
        grid-template-columns: 1.55fr 1fr;
        grid-template-areas:
            "head    head"
            "gallery info"
            "short   short"
            "params  params"
            "description description";
        align-items: start;
    }
    .product-head h1 { font-size: 40px; }

    /* nakupni box drzi u obrazku a scrolluje s nim */
    .product-detail .info {
        position: sticky; top: 18px;
        background: #fff; border: 1px solid var(--dg-line);
        border-radius: 14px; padding: 22px;
    }
}

/* vetsi hlavni obrazek */
.gallery-main img { border-radius: 12px; }
.gallery-main { background: #f7f7f1; border-radius: 12px; }
.thumbs img { border-radius: 8px; }

/* Detail produktu nema postranni panel s kategoriemi — bral 340 px z sirky
   a obrazek pak zbyval maly. Ve vypisu kategorie panel zustava. */
main.container:has(.product-detail) { display: block !important; }
main.container:has(.product-detail) > .sidebar { display: none; }

@media (min-width: 780px) {
    /* jeste vic mista pro obrazek */
    .product-detail { grid-template-columns: 1.75fr 1fr; }
    /* vetsi nahledy vedle hlavniho obrazku */
    .gallery { grid-template-columns: 96px 1fr !important; }
    .gallery-main img { width: 100%; height: auto; }
}

/* ============================================================
   Výpis kategorie à la xxxlutz
   ------------------------------------------------------------
   Žádný stálý levý sloupec: strom kategorií + parametrické filtry
   žijí ve vysouvacím šuplíku (tlačítko „Všechny filtry"). Pod
   nadpisem dlaždice přímých podkategorií, pak přilepená lišta
   nástrojů a mřížka 4 sloupců s cenami xxxlutz stylu.
   ============================================================ */

/* ── Sidebar se na výpisu mění v šuplík přes celou výšku okna ── */
main.container:has(.catalog) { display: block; }
main.container:has(.catalog) > .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(380px, 92vw);
    z-index: 1200; margin: 0; border: 0; border-radius: 0;
    overflow-y: auto; box-shadow: 20px 0 50px rgba(0,0,0,.25);
    transform: translateX(-105%); transition: transform .22s ease;
}
body.dg-filters-open main.container:has(.catalog) > .sidebar { transform: translateX(0); }
.dg-filter-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1150; }
body.dg-filters-open .dg-filter-backdrop { display: block; }

.sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; background: var(--dg-ink); z-index: 5;
}
.sidebar-head h3 { margin: 0; padding: 16px 18px; background: transparent; color: #fff; font-size: 17px; }
.sidebar-close {
    border: 0; background: transparent; color: #fff; font-size: 26px; line-height: 1;
    width: 44px; height: 44px; margin-right: 8px; cursor: pointer; border-radius: 4px;
}
.sidebar-close:hover { background: rgba(255,255,255,.15); }

/* ── Dlaždice podkategorií ───────────────────────────────── */
.dg-subcats { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 16px; }
.dg-subcat {
    display: inline-flex; align-items: center; gap: 10px; background: #fff;
    border: 1px solid var(--dg-line); border-radius: 999px; padding: 8px 16px;
    font-weight: 700; font-size: 13.5px; color: var(--dg-ink);
    transition: border-color .15s, box-shadow .15s;
}
.dg-subcat:hover { border-color: var(--dg-ink); box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.dg-subcat img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--dg-soft); margin: -4px 0 -4px -8px; }
.dg-subcat small { color: var(--dg-grey); font-weight: 600; font-size: 12px; }

/* ── Lišta nástrojů — drží pod hlavní navigací ───────────── */
.dg-filterbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--dg-line); border-radius: 4px;
    padding: 10px 14px; margin: 0 0 18px; position: sticky; top: 46px; z-index: 40;
}
.dg-filter-btn {
    display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px;
    border: 2px solid var(--dg-ink); background: #fff; border-radius: 4px;
    font: inherit; font-weight: 800; font-size: 14px; color: var(--dg-ink); cursor: pointer;
}
.dg-filter-btn:hover { background: var(--dg-ink); color: #fff; }
.dg-filter-btn b {
    background: var(--dg-red); color: #fff; border-radius: 999px; min-width: 20px; height: 20px;
    display: inline-grid; place-content: center; font-size: 12px; padding: 0 5px;
}
.dg-count { margin-left: auto; color: var(--dg-grey); font-weight: 600; font-size: 13.5px; }
.dg-count strong { color: var(--dg-ink); }
.dg-filterbar .select-pill { height: 44px; box-shadow: none; border-radius: 4px; border-color: var(--dg-line); }
.dg-filterbar .view-toggle { height: 44px; box-shadow: none; border-radius: 4px; border-color: var(--dg-line); }
.dg-filterbar .view-pill { width: 44px; }
@media (max-width: 860px) { .dg-filterbar { position: static; } }

.catalog-head { margin: 0 0 10px; }
.catalog-title h1 { font-size: 32px; font-weight: 800; letter-spacing: -.6px; }

/* ── Mřížka: 4 sloupce jako xxxlutz, postupně méně ───────── */
.catalog .grid:not(.list-view) { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
@media (max-width: 1240px) { .catalog .grid:not(.list-view) { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 960px)  { .catalog .grid:not(.list-view) { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 540px)  { .catalog .grid:not(.list-view) { grid-template-columns: 1fr; } }

/* ── Karta: cena xxxlutz stylem ──────────────────────────────
   Přeškrtnutá původní nad velkou cenou; běžná cena tmavá,
   zlevněná červená. Skladem je vidět i v mřížce. */
.card-price { color: var(--dg-ink); font-size: 25px; letter-spacing: -.5px; margin: 10px 0; }
.card-price .price-orig { display: block; font-size: 13px; font-weight: 600; color: var(--dg-grey); margin: 0 0 1px; }
.card-price .price-sale { color: var(--dg-red); }
.card-price small { display: block; font-size: 11px; font-weight: 500; margin-top: 2px; }
.grid .card-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; margin: 0 0 8px; }

/* ── Srdíčko oblíbených na obrázku vpravo nahoře ─────────── */
.grid:not(.list-view) .card-fav {
    display: inline-flex; position: absolute; top: 10px; right: 10px; z-index: 4;
    width: 38px; height: 38px; border-radius: 50%; background: #fff;
    border: 1px solid var(--dg-line); align-items: center; justify-content: center;
    color: var(--dg-ink); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12); padding: 0;
}
.grid:not(.list-view) .card-fav span { display: none; }
.card-fav:hover { color: var(--dg-red); border-color: var(--dg-red); }
.card-fav.is-fav { color: var(--dg-red); }
.card-fav.is-fav svg { fill: var(--dg-red); }
/* štítky nesmí podlézt srdíčko */
.card-badges { right: 56px; }

/* ============================================================
   Homepage: hero banner + dlaždice kategorií (dle grafického návrhu)
   ============================================================ */
.dg-hero {
    position: relative; overflow: hidden; border-radius: 8px;
    min-height: 460px; margin: 0 0 20px; background: #f6f6f4;
    display: flex; align-items: center;
}
.dg-hero-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: right center;
}
/* světlý přechod zleva, aby texty byly čitelné */
.dg-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, #f6f6f4 0%, rgba(246,246,244,.96) 32%, rgba(246,246,244,.6) 50%, rgba(246,246,244,0) 68%);
}
.dg-hero-inner { position: relative; z-index: 2; padding: 46px 26px 46px 54px; max-width: 560px; }
.dg-hero-eyebrow {
    color: var(--dg-red); font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; font-size: 15px; margin: 0 0 8px;
}
.dg-hero h1 {
    font-size: 56px; line-height: 1.04; font-weight: 800;
    letter-spacing: -1.8px; margin: 0 0 18px; color: var(--dg-ink); max-width: 420px;
}
.dg-hero-line { width: 64px; height: 4px; background: var(--dg-red); margin: 0 0 18px; }
.dg-hero-sub { font-size: 17px; line-height: 1.55; color: #3c3c3c; margin: 0 0 26px; max-width: 340px; }
.dg-hero-cta { font-size: 16px; padding: 15px 28px; display: inline-flex; align-items: center; gap: 11px; }
.dg-hero-usps { display: flex; gap: 40px; margin-top: 38px; }
.dg-hero-usps > div { display: grid; justify-items: center; text-align: center; gap: 3px; color: var(--dg-red); }
.dg-hero-usps b { font-size: 13.5px; color: var(--dg-ink); margin-top: 4px; }
.dg-hero-usps small { font-size: 12px; color: var(--dg-grey); }
.dg-hero-card {
    position: absolute; right: 28px; bottom: 28px; z-index: 2;
    background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.16);
    padding: 15px 20px; display: flex; gap: 13px; align-items: center; color: var(--dg-red);
}
.dg-hero-card b { display: block; font-size: 14.5px; color: var(--dg-ink); }
.dg-hero-card small { display: block; font-size: 12.5px; color: var(--dg-grey); margin-top: 2px; }

/* pás dlaždic kategorií */
.dg-cats {
    background: #fff; border: 1px solid var(--dg-line); border-radius: 8px;
    padding: 24px; margin: 0 0 30px;
    display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 20px;
}
.dg-cat { display: block; }
.dg-cat-img {
    display: flex; aspect-ratio: 1/1; background: var(--dg-soft);
    border-radius: 6px; overflow: hidden; align-items: center; justify-content: center;
}
.dg-cat-img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform .2s ease; }
.dg-cat:hover .dg-cat-img img { transform: scale(1.05); }
.dg-cat-name {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 12px; font-weight: 700; font-size: 14.5px; color: var(--dg-ink);
}
.dg-cat-name b { color: var(--dg-red); font-size: 17px; line-height: 1; }
.dg-cat:hover .dg-cat-name { color: var(--dg-red); }

@media (max-width: 1100px) {
    .dg-hero h1 { font-size: 44px; }
    .dg-cats { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 800px) {
    .dg-hero { min-height: 0; display: block; }
    .dg-hero::before { background: rgba(246,246,244,.9); }
    .dg-hero-inner { padding: 30px 22px; }
    .dg-hero h1 { font-size: 34px; letter-spacing: -1px; }
    .dg-hero-usps { gap: 20px; flex-wrap: wrap; }
    .dg-hero-card { position: static; margin: 0 22px 24px; }
    .dg-cats { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 16px; gap: 14px; }
}

/* --- Dalsi varianty (Alza-styl prepinac, kazda varianta = vlastni stranka) --- */
.variant-box { margin: 14px 0; }
.variant-title { font-size: 13px; font-weight: 700; color: var(--kh-muted, #6b7280); margin-bottom: 6px; }
.variant-list { display: flex; flex-direction: column; gap: 6px; }
.variant-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--kh-line, #e5e7eb); border-radius: 10px; text-decoration: none; color: inherit; background: #fff; transition: border-color .15s, box-shadow .15s; }
a.variant-item:hover { border-color: var(--dg-green, #16a34a); box-shadow: 0 2px 8px rgba(17,24,39,.08); }
.variant-item.is-current { border: 2px solid var(--dg-green, #16a34a); background: #f0fdf4; cursor: default; }
.variant-thumb { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: #fff; flex: none; }
.variant-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.variant-label { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.variant-stock { font-size: 12px; font-weight: 600; }
.variant-stock.vs-in { color: var(--dg-green, #16a34a); }
.variant-stock.vs-out { color: #b45309; }
.variant-price { font-size: 14px; font-weight: 700; white-space: nowrap; }
.variant-meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.variant-sku { font-size: 11px; color: var(--kh-muted, #6b7280); white-space: nowrap; }
.variant-list { max-height: 340px; overflow-y: auto; padding-right: 4px; }