:root {
    --color-primary: #49342C;      /* kůra kmene z loga */
    --color-primary-dark: #2E1F18; /* tmavší varianta kůry */
    --color-accent: #CF9569;       /* dřevo/vnitřek kmene z loga */
    --color-accent-dark: #B67A4D;  /* tmavší varianta dřeva — pro hover stavy */
    --color-accent-light: #FAF0E6; /* světlý krém odvozený z dřeva */
    --color-green: #57C146;        /* zelené listí z loga */
    --color-green-dark: #45A035;   /* tmavší varianta listí */
    --color-dark: #070503;         /* téměř černá z textu loga */
    --color-ef-green: #008457;     /* zelená z loga ENERGOFOREST */

    /* Jednotné světle šedé pozadí pro střídavé pruhování sekcí (white/grey jako na úvodu). */
    --color-surface-alt: #f6f7f6;

    /* Výchozí barva odkazů — hnědá z kůry místo modré z Bootstrapu, ať ladí s webem.
       Explicitně obarvené odkazy (.footer-link, .btn…) si svou barvu drží dál. */
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: 73, 52, 44;
    --bs-link-hover-color: var(--color-accent-dark);
    --bs-link-hover-color-rgb: 182, 122, 77;

    /* Sjednoť i Bootstrapí .bg-light (úvod, „Jak k nám"…) na stejný odstín šedé. */
    --bs-light: #f6f7f6;
    --bs-light-rgb: 246, 247, 246;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: 'Source Sans 3', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > main {
    flex: 1;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primary);
}

/* Topbar */
.topbar {
    background-color: var(--color-primary-dark);
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
    padding: 0.4rem 0;
}

.topbar a {
    color: rgba(255,255,255,0.9) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .topbar a:hover {
        color: #fff !important;
    }
}

.topbar-sep {
    color: rgba(255,255,255,0.3);
}

/* Announcement bar — site-wide green strip pinned above the navbar.
   Green is intentional here: it's reserved for "important highlights"
   like this campaign banner. */
.announcement-bar {
    background-color: var(--color-green);
    color: #fff;
    font-size: 0.95rem;
    text-align: center;
}

.announcement-bar .container {
    min-height: 2.4rem;
}

/* Whole-strip clickable announcement. Hover gated behind (hover: hover) so a
   tap on a touch screen doesn't leave the darkened state stuck. */
.announcement-bar a.announcement-link-full {
    display: block;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

@media (hover: hover) {
    .announcement-link-full:hover {
        color: #fff;
        text-decoration: none;
    }
}

@media (hover: hover) {
    .announcement-link-full:hover {
        background-color: var(--color-green-dark);
    }
}

.announcement-arrow {
    flex-shrink: 0;
    display: block;
    transition: transform 0.2s ease;
}

@media (hover: hover) {
    .announcement-link-full:hover .announcement-arrow {
        transform: translateX(3px);
    }
}

/* Navbar */
.bg-dark-green {
    background-color: #fff !important;
    border-bottom: 5px solid var(--color-accent);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-brand {
    font-size: 2.6rem;
}

.navbar-logo {
    height: 76px;
    width: auto;
}

.navbar .nav-link {
    font-size: 1.25rem;
    padding: 0.75rem 1rem !important;
    position: relative;
    color: var(--color-dark);
    transition: color 0.3s ease;
}

.navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0.4rem;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

@media (hover: hover) {
    .navbar .nav-link:hover {
        color: var(--color-primary);
    }
}

/* Cart icon in nav — inline SVG with optional count bubble */
.navbar .nav-cart {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    margin-left: 0.5rem;
    border-radius: 50%;
    color: var(--color-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
    .navbar .nav-cart:hover {
        background-color: var(--color-accent-light);
        color: var(--color-primary-dark);
    }
}

/* Header cross-link to the ENERGOFOREST wholesale site — bare EF logo (no ring),
   text dropped so the desktop menu fits down to the 992px breakpoint. */
.navbar .nav-wholesale {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-left: 0.6rem;
    padding: 0.2rem 0.25rem !important;
    transition: transform 0.25s ease;
}

/* Scale the whole block (logo + label) as one so the text gets the same
   animation and the enlarged logo never overlaps the label below it.
   Hover gated behind (hover: hover) so touch taps don't leave a stuck glow. */
@media (hover: hover) {
    .navbar .nav-wholesale:hover {
        transform: scale(1.12);
    }
}

.navbar .nav-wholesale:focus-visible {
    transform: scale(1.12);
}

.navbar .nav-wholesale:active {
    transform: scale(0.96);
}

.navbar .nav-wholesale::after {
    display: none;
}

/* Permanent label under the EF logo */
.nav-wholesale-label {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-ef-green);
    white-space: nowrap;
}

.nav-wholesale-logo {
    height: 57px;
    width: auto;
    transition: filter 0.25s ease;
}

@media (hover: hover) {
    .navbar .nav-wholesale:hover .nav-wholesale-logo {
        filter: drop-shadow(0 3px 8px rgba(0, 132, 87, 0.45));
    }
}

.navbar .nav-wholesale:focus-visible .nav-wholesale-logo {
    filter: drop-shadow(0 3px 8px rgba(0, 132, 87, 0.45));
}

.navbar .nav-wholesale:active .nav-wholesale-logo {
    filter: drop-shadow(0 1px 3px rgba(0, 132, 87, 0.35));
}

.navbar .nav-cart::after {
    display: none;
}

.navbar .nav-cart.active {
    background-color: var(--color-accent);
    color: #fff !important;
}

.navbar .nav-cart svg {
    display: block;
}

.navbar .nav-cart .cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: var(--color-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    border: 2px solid #fff;
    box-sizing: content-box;
}

@media (hover: hover) {
    .navbar .nav-link:hover::after {
        transform: scaleX(1);
    }
}

/* ── Katalogové vyhledávání v headeru (lupa → rozbalovací pole + autocomplete) ── */
.navbar-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: auto;   /* na mobilu seskupí lupu k hamburgeru vpravo */
}

@media (min-width: 992px) {
    .navbar-search {
        order: 1;         /* na desktopu na pravý okraj headeru */
        margin-left: 0.5rem;
    }

    /* Desktopová lupa žije v navigaci hned vedle košíku — stejný kruh i odsazení. */
    .nav-search-desktop .navbar-search-toggle {
        margin-left: 0.5rem;
    }
}

/* Vodorovné menu se zapíná od 992 px (navbar-expand-lg), kde má container jen
   960 px. V tomto úzkém pásmu zmenšíme logo a odkazy, ať se celé menu vejde bez
   přetékání. Od 1200 px (container 1140 px) se vrací plná velikost. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-logo {
        height: 56px;
    }

    .navbar .nav-link {
        font-size: 1.02rem;
        padding: 0.55rem 0.5rem !important;
    }

    .navbar .nav-cart,
    .navbar-search-toggle {
        width: 40px;
        height: 40px;
    }

    .nav-wholesale-logo {
        height: 39px;
    }

    .nav-wholesale-label {
        font-size: 0.78rem;
    }
}

.navbar-search-toggle {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
    .navbar-search-toggle:hover {
        background-color: var(--color-accent-light);
        color: var(--color-primary-dark);
    }
}

/* Vyhledávací vrstva (overlay) — horní panel sjede shora, pod ním ztmavlé pozadí */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
}

.search-overlay[hidden] {
    display: none;
}

body.search-open {
    overflow: hidden;
}

.search-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.search-overlay.is-open .search-overlay-backdrop {
    opacity: 1;
}

.search-overlay-panel {
    position: relative;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    padding: 1rem 0 1.25rem;
    transform: translateY(-100%);
    transition: transform 0.28s ease;
}

.search-overlay.is-open .search-overlay-panel {
    transform: translateY(0);
}

.search-overlay-form {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.6rem;
}

.search-overlay-icon {
    flex-shrink: 0;
    color: var(--color-primary);
}

/* Skryj nativní (modré) tlačítko pro smazání textu — máme vlastní design */
.search-overlay-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-overlay-submit {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

@media (hover: hover) {
    .search-overlay-submit:hover {
        background-color: var(--color-accent-light);
    }
}

.search-overlay-input {
    flex-grow: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 1.25rem;
    padding: 0.35rem 0;
    color: var(--color-primary-dark);
}

.search-overlay-input:focus {
    outline: none;
}

.search-overlay-close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

@media (hover: hover) {
    .search-overlay-close:hover {
        background-color: var(--color-accent-light);
    }
}

.search-overlay-results {
    margin-top: 0.75rem;
    max-height: min(60vh, 480px);
    overflow-y: auto;
}

.navbar-search-group {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    padding: 0.4rem 0.6rem 0.2rem;
}

.navbar-search-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    color: var(--color-primary-dark);
    text-decoration: none;
}

.navbar-search-item:focus {
    background-color: var(--color-accent-light);
    color: var(--color-primary-dark);
}
@media (hover: hover) {
    .navbar-search-item:hover {
        background-color: var(--color-accent-light);
        color: var(--color-primary-dark);
    }
}

.navbar-search-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    background-color: #f1ede4;
}

.navbar-search-thumb-empty {
    display: inline-block;
}

.navbar-search-item-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-grow: 1;
}

.navbar-search-item-name {
    font-weight: 600;
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-search-item-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
}

.navbar-search-avail.skladem { color: #198754; }
.navbar-search-avail.naobjednavku { color: var(--color-primary); }
.navbar-search-avail.vyprodano { color: #dc3545; }

.navbar-search-price {
    margin-left: auto;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-primary);
}

.navbar-search-cat {
    justify-content: space-between;
}

.navbar-search-cat-name {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.navbar-search-cat-icon {
    flex-shrink: 0;
    color: var(--color-accent);
}

.navbar-search-cat-count {
    font-size: 0.9rem;
    color: #6c757d;
}

.navbar-search-empty {
    padding: 0.8rem 0.6rem;
    text-align: center;
    color: #6c757d;
}

/* Plovoucí košík (FAB) v pravém dolním rohu — pouze mobil/tablet (skryto na lg+).
   Na desktopu se používá košík v headeru. */
.cart-fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.cart-fab:focus-visible {
    background-color: var(--color-primary-dark);
    color: #fff;
    transform: translateY(-2px);
}
@media (hover: hover) {
    .cart-fab:hover {
        background-color: var(--color-primary-dark);
        color: #fff;
        transform: translateY(-2px);
    }
}

.cart-fab .cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background-color: var(--color-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    border: 2px solid #fff;
    box-sizing: content-box;
}

/* Plovoucí tlačítko filtru — nad plovoucím košíkem (jen mobil/tablet) */
.filter-fab {
    position: fixed;
    right: 1rem;
    bottom: 5.25rem; /* nad košíkem: 1rem + 56px košík + ~12px mezera */
    z-index: 1030;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent-dark);
    color: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.filter-fab:focus-visible {
    background-color: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
}
@media (hover: hover) {
    .filter-fab:hover {
        background-color: var(--color-primary);
        color: #fff;
        transform: translateY(-2px);
    }
}

.filter-fab .filter-fab-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background-color: var(--color-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    border: 2px solid #fff;
    box-sizing: content-box;
}

/* Filtr jako spodní vysouvací panel (bottom sheet) na mobilu/tabletu */
@media (max-width: 991.98px) {
    .filter-offcanvas.offcanvas-bottom {
        --bs-offcanvas-height: 85vh;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

    .filter-offcanvas .offcanvas-body {
        padding: 0.75rem 1rem;
    }

    .filter-offcanvas .filter-sidebar {
        box-shadow: none;
        border: 0;
    }

    .filter-offcanvas .filter-sidebar .card-body {
        padding: 0;
    }

    .filter-offcanvas-footer {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        padding: 0.75rem 1rem;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        background-color: #fff;
    }
}

/* Na mobilu/tabletu je sloupec filtru prázdný (panel je fixní) — ať nedělá mezeru nahoře */
@media (max-width: 991.98px) {
    .filter-col {
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Na desktopu se offcanvas-body vykresluje jako normální blok (zachová šířku sidebaru) */
@media (min-width: 992px) {
    .filter-offcanvas .offcanvas-body {
        display: block;
    }

    .filter-offcanvas .filter-sidebar {
        width: 100%;
    }
}

/* Horizontální stepper (− | množství | +) — pole s počtem kusů (type=text nemá
   nativní spinner). Stejný vzhled jako dlaždice katalogu; používá se na detailu
   produktu i v košíku. Třída .qty-stepper zůstává jako háček pro JS (site.js). */
.qty-stepper-h {
    display: inline-flex;
    align-items: stretch;
    gap: 0.4rem;
    width: auto;
}

.qty-stepper-h .qty-btn {
    flex: 0 0 auto;
    width: 2.6rem;
    border: 1px solid var(--color-accent);
    background-color: #fff;
    color: var(--color-primary);
    border-radius: 0.4rem;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
    .qty-stepper-h .qty-btn:hover {
        background-color: var(--color-accent-light);
        border-color: var(--color-primary);
    }
}

.qty-stepper-h .qty-btn:active {
    background-color: var(--color-accent);
    color: #fff;
}

.qty-stepper-h .qty-input {
    width: 4.5rem;
    text-align: center;
    padding-right: 0.4rem;
    padding-left: 0.4rem;
    font-size: 1.05rem;
    color: var(--color-primary);
}

/* Kompaktní varianta do tabulky košíku (/poptavka) — menší tlačítka i pole. */
.qty-stepper-h-sm {
    gap: 0.25rem;
}

.qty-stepper-h-sm .qty-btn {
    width: 1.9rem;
    font-size: 1.05rem;
}

.qty-stepper-h-sm .qty-input {
    width: 3rem;
    font-size: 0.9rem;
}

@media (max-width: 575.98px) {
    .qty-stepper-h .qty-btn {
        width: 2.3rem;
        font-size: 1.2rem;
    }

    .qty-stepper-h .qty-input {
        width: 3.8rem;
    }
}

/* Poptávkový košík — zvýrazněný vysvětlující panel "Jak funguje…".
   Světlé krémové pozadí ho odliší od ostatních bílých boxů na stránce. */
.cart-howto {
    background-color: var(--color-accent-light);
    border: 1px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 8px;
    padding: 1rem 1.15rem;
    color: var(--color-primary-dark);
}

.cart-howto-icon {
    color: var(--color-primary);
}

/* Výrazný panel pro textový dotaz (nekatalogové rozměry) — pro ~polovinu zákazníků
   stejně důležitý jako samotný košík, proto silné orámování a accent podbarvení. */
.cart-note-panel {
    background-color: var(--color-accent-light);
    border: 1px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 10px;
    padding: 1.4rem 1.5rem 1.5rem;
    scroll-margin-top: 1.5rem;
}

.cart-note-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.cart-note-panel-icon {
    color: var(--color-accent);
    margin-top: 0.1rem;
}

.cart-note-panel-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    margin: 0 0 0.3rem;
}

.cart-note-panel-sub {
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--color-primary-dark);
}

.cart-note-textarea {
    border-color: var(--color-accent);
    background-color: #fff;
    font-size: 1.02rem;
}

.cart-note-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.18rem rgba(73, 52, 44, 0.12);
}

@media (max-width: 575.98px) {
    .cart-note-panel {
        padding: 1.1rem 1rem 1.2rem;
    }

    .cart-note-panel-title {
        font-size: 1.12rem;
    }
}

/* Prázdný košík — ikona + výzva k akci místo nenápadné textové dlaždice */
.cart-empty {
    padding: 2.5rem 1rem;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    background-color: #fff;
}

.cart-empty-icon {
    color: rgba(0, 0, 0, 0.22);
    margin-bottom: 0.75rem;
}

.cart-empty-text {
    font-size: 1.05rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

/* Košík na mobilu/menším tabletu: tabulka se přeskládá do karet (žádné horizontální swipování) */
@media (max-width: 767.98px) {
    .cart-table-wrap {
        overflow: visible;
    }

    .cart-table,
    .cart-table tbody,
    .cart-table tfoot,
    .cart-table tr,
    .cart-table td {
        display: block;
        width: auto;
    }

    .cart-table thead {
        display: none;
    }

    .cart-table tbody tr {
        position: relative;
        display: grid;
        grid-template-columns: 84px 1fr;
        grid-template-areas:
            "img name"
            "img avail"
            "img unit"
            "qty sub";
        column-gap: 0.85rem;
        row-gap: 0.4rem;
        align-items: center;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 10px;
        padding: 0.85rem;
        margin-bottom: 0.75rem;
        background-color: #fff;
    }

    .cart-table tbody td {
        border: 0;
        padding: 0;
    }

    .cart-table .cart-cell-img {
        grid-area: img;
        align-self: start;
        width: auto;
    }

    .cart-table .cart-cell-img img {
        width: 84px !important;
        height: 64px !important;
    }

    .cart-table .cart-cell-name {
        grid-area: name;
        padding-right: 2rem; /* místo pro × v rohu */
    }

    .cart-table .cart-cell-avail {
        grid-area: avail;
    }

    .cart-table .cart-cell-unit {
        grid-area: unit;
        text-align: left !important;
        color: #6c757d;
    }

    .cart-table .cart-cell-qty {
        grid-area: qty;
        text-align: left !important;
    }

    .cart-table .cart-cell-qty form {
        justify-content: flex-start !important;
    }

    .cart-table .cart-cell-sub {
        grid-area: sub;
        text-align: right !important;
        font-size: 1.05rem;
    }

    .cart-table .cart-cell-label {
        display: inline !important;
        color: #6c757d;
        font-size: 0.85rem;
        margin-right: 0.25rem;
    }

    .cart-table .cart-cell-remove {
        position: absolute;
        top: 0.45rem;
        right: 0.5rem;
        text-align: right !important;
    }

    /* Souhrn pod kartami */
    .cart-table tfoot tr.cart-foot-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "label total"
            "clear clear";
        align-items: center;
        gap: 0.5rem 0.85rem;
        border-top: 2px solid rgba(0, 0, 0, 0.1);
        padding-top: 0.85rem;
    }

    .cart-table .cart-foot-label {
        grid-area: label;
        text-align: left !important;
    }

    .cart-table .cart-foot-total {
        grid-area: total;
        text-align: right !important;
    }

    .cart-table .cart-foot-clear {
        grid-area: clear;
        text-align: right;
    }
}

/* Toast po přidání do poptávkového košíku (AJAX) */
/* Cart "added to inquiry" toast. Top-right on desktop, slim top bar on mobile —
   the bottom is left free for the floating cart FAB and a future cookie bar.
   A countdown bar (.cart-toast-progress-bar) shrinks across the full width to
   signal the remaining display time. */
.cart-toast {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1080;
    width: 320px;
    max-width: calc(100vw - 2rem);
    background-color: #fff;
    color: var(--color-primary);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(73, 52, 44, 0.22);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.cart-toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cart-toast-inner {
    position: relative;
    padding: 0.8rem 1rem 0.9rem;
}

.cart-toast-close {
    position: absolute;
    top: 0.35rem;
    right: 0.4rem;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    opacity: 0.55;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

@media (hover: hover) {
    .cart-toast-close:hover {
        opacity: 1;
        background-color: rgba(73, 52, 44, 0.08);
    }
}

.cart-toast-head {
    padding-right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    color: var(--color-primary-dark);
}

.cart-toast-head-icon {
    flex: 0 0 auto;
    color: var(--color-accent);
}

.cart-toast-lines {
    list-style: none;
    margin: 0 0 0.55rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-height: 40vh;
    overflow-y: auto;
}

.cart-toast-line {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.3;
    border-radius: 5px;
    padding: 0.1rem 0.25rem;
}

.cart-toast-line-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-toast-line-qty {
    flex: 0 0 auto;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-primary-dark);
}

.cart-toast-line.is-bump {
    animation: cartToastBump 0.45s ease;
}

@keyframes cartToastBump {
    0% { background-color: var(--color-accent-light); }
    100% { background-color: transparent; }
}

.cart-toast-link {
    display: inline-block;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
}

@media (hover: hover) {
    .cart-toast-link:hover {
        text-decoration: underline;
    }
}

.cart-toast-progress {
    height: 4px;
    background-color: rgba(73, 52, 44, 0.1);
}

.cart-toast-progress-bar {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(1);
    background-color: var(--color-accent);
}

@media (max-width: 575.98px) {
    .cart-toast {
        top: 0.6rem;
        right: 0.6rem;
        left: 0.6rem;
        width: auto;
        max-width: none;
        border-radius: 10px;
    }

    .cart-toast-inner {
        padding: 0.6rem 0.75rem 0.7rem;
    }

    .cart-toast-lines {
        max-height: 32vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cart-toast-progress-bar {
        transition: none !important;
    }
}

/* Active page in nav — persistent underline + bolder text */
.navbar .nav-link.active {
    color: var(--color-primary);
    font-weight: 700;
}

.navbar .nav-link.active::after {
    transform: scaleX(1);
    height: 3px;
}

/* In the collapsed burger menu links are full-width blocks, so the underline
   would span the whole row. Shrink each link to its text width (the 1rem
   horizontal padding matches the ::after 1rem inset) so the underline sits
   under the text only. */
@media (max-width: 991.98px) {
    .navbar-collapse .navbar-nav .nav-link:not(.nav-wholesale) {
        display: inline-block;
    }

    /* In the burger menu the Velkoobchod cross-link becomes a normal last row:
       label on the left (same size as the other rows), EF logo to its right.
       No scale/glow — it must sit perfectly still like the rest of the menu. */
    .navbar-collapse .navbar-nav .nav-wholesale {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.55rem;
        margin-left: 0;
        padding: 0.75rem 1rem !important;
        transform: none !important;
        transition: none;
    }

    .navbar-collapse .navbar-nav .nav-wholesale .nav-wholesale-label {
        order: -1;
        font-size: 1.25rem;
    }

    .navbar-collapse .navbar-nav .nav-wholesale .nav-wholesale-logo {
        height: 30px;
        filter: none !important;
    }
}

/* Active state for the Kontakt pill — no extra highlight, the pill itself is already prominent */
.navbar .nav-cta .nav-link.active {
    box-shadow: none;
}

/* Dropdown toggle arrow fix - don't underline the caret */
.navbar .dropdown-toggle::after {
    transition: transform 0.3s ease;
}

.navbar .show > .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* CTA button in nav (Kontakt) — wood accent brown (matches .nav-admin) */
.nav-cta .nav-link {
    background-color: var(--color-accent);
    color: #fff !important;
    border-radius: 50px;
    padding: 0.5rem 1.5rem !important;
    margin-left: 0.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.nav-cta .nav-link::after {
    display: none;
}

@media (hover: hover) {
    .nav-cta .nav-link:hover {
        background-color: var(--color-accent-dark);
        color: #fff !important;
        transform: translateY(-2px);
    }
}

/* Admin actions in nav (Administrace + Odhlásit) — visible only when admin is signed in */
.nav-admin .nav-link {
    background-color: var(--color-accent);
    color: #fff !important;
    border-radius: 50px;
    padding: 0.5rem 1.25rem !important;
    margin-left: 0.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.nav-admin .nav-link::after {
    display: none;
}

@media (hover: hover) {
    .nav-admin .nav-link:hover {
        background-color: var(--color-accent-dark);
        color: #fff !important;
        transform: translateY(-2px);
    }
}

.nav-admin-out .nav-link,
.nav-admin-out button.nav-link {
    background-color: transparent;
    color: var(--color-accent) !important;
    border: 2px solid var(--color-accent);
    border-radius: 50px;
    padding: 0.4rem 1.15rem !important;
    margin-left: 0.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.nav-admin-out .nav-link::after,
.nav-admin-out button.nav-link::after {
    display: none;
}

@media (hover: hover) {
    .nav-admin-out .nav-link:hover,
    .nav-admin-out button.nav-link:hover {
        background-color: var(--color-accent);
        color: #fff !important;
        transform: translateY(-2px);
    }
}

.navbar .dropdown-item {
    font-size: 1.15rem;
    padding: 0.5rem 1.5rem;
    color: var(--color-dark);
    transition: background-color 0.2s ease, padding-left 0.2s ease;
}

.navbar .dropdown-item:focus {
    background-color: var(--color-accent-light);
    color: var(--color-primary-dark);
    padding-left: 2rem;
}
@media (hover: hover) {
    .navbar .dropdown-item:hover {
        background-color: var(--color-accent-light);
        color: var(--color-primary-dark);
        padding-left: 2rem;
    }
}

.navbar .dropdown-item:active {
    background-color: var(--color-accent);
    color: #fff;
}

.navbar .dropdown-menu {
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-radius: 8px;
    padding: 0.5rem 0;
    animation: dropdownFadeIn 0.25s ease;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.navbar-toggler {
    padding: 0.35rem 0.5rem;
    border: 0;                 /* zrušený rámeček okolo hamburgeru */
    line-height: 1;
}

.navbar-toggler:focus,
.navbar-toggler:focus-visible {
    box-shadow: none;
    outline: none;
}

/* Animovaný hamburger → křížek. Barva loga (var(--color-primary) = #49342C), stejná jako lupa. */
.hamburger {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 20px;
    vertical-align: middle;
}

.hamburger > span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2.4px;
    border-radius: 2px;
    background-color: var(--color-primary);
    transition: transform 0.3s ease, top 0.3s ease, height 0.3s ease, opacity 0.2s ease;
}

.hamburger > span:nth-child(1) { top: 2px; }
.hamburger > span:nth-child(2) { top: 9px; }
.hamburger > span:nth-child(3) { top: 16px; }

/* Po otočení anti-aliasing diagonálu opticky ztenčí — kompenzujeme mírně vyšší tloušťkou,
   aby měl křížek stejnou vizuální váhu jako hamburger. */
.navbar-toggler[aria-expanded="true"] .hamburger > span:nth-child(1) {
    top: 9px;
    height: 3px;
    transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .hamburger > span:nth-child(2) {
    opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .hamburger > span:nth-child(3) {
    top: 9px;
    height: 3px;
    transform: rotate(-45deg);
}

.footer-logo {
    max-height: 44px;
    width: auto;
}

.footer-logo-ef {
    max-height: 44px;
    width: auto;
    transition: opacity 0.2s ease;
}

@media (hover: hover) {
    .footer-logo-ef:hover {
        opacity: 0.7;
    }
}

footer address {
    font-style: normal;
}

.footer-text {
    color: var(--color-primary);
}

.footer-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:focus-visible {
    color: var(--color-accent-dark);
    text-decoration: underline;
}
@media (hover: hover) {
    .footer-link:hover {
        color: var(--color-accent-dark);
        text-decoration: underline;
    }
}

.footer-link--button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}

.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-social:focus-visible {
    color: var(--color-accent-dark);
    transform: translateY(-2px);
}
@media (hover: hover) {
    .footer-social:hover {
        color: var(--color-accent-dark);
        transform: translateY(-2px);
    }
}

/* Honeypot proti botům — skryté pole mimo viewport (čtečky i lidé ho ignorují) */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Faceted filter sidebar */
.facet-count {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .85em;
}

.facet-disabled {
    opacity: .45;
}

.facet-disabled .form-check-label {
    cursor: not-allowed;
}

/* In-page confirm dialog */
.ui-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(20, 30, 20, 0);
    opacity: 0;
    transition: opacity .15s ease, background-color .15s ease;
}

.ui-confirm-overlay.show {
    opacity: 1;
    background: rgba(20, 30, 20, .45);
}

.ui-confirm {
    width: 100%;
    max-width: 24rem;
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .25);
    padding: 1.5rem;
    transform: translateY(.75rem) scale(.98);
    transition: transform .15s ease;
}

.ui-confirm-overlay.show .ui-confirm {
    transform: translateY(0) scale(1);
}

.ui-confirm-msg {
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    color: var(--bs-body-color, #212529);
}

.ui-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

/* Sortable table headers */
th.sortable-col {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

@media (hover: hover) {
    th.sortable-col:hover {
        color: var(--color-accent, #4a7c2e);
    }
}

th.sortable-col .sort-indicator {
    font-size: .8em;
    color: var(--color-accent, #4a7c2e);
}

/* Created/modified info icon in admin tables */
.meta-info-icon {
    cursor: help;
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: none;
}

/* Hero */
.hero {
    position: relative;
    overflow: hidden;
    color: var(--color-primary);
    padding: 4rem 0 3rem;
    border-bottom: 4px solid var(--color-accent);
    background: linear-gradient(180deg, #fdfaf6 0%, #f5ebdf 100%);
}

/* Split hero: text block on the left, slideshow card on the right */
.hero-split-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2.75rem;
    align-items: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.hero-heading {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
    color: var(--color-primary);
}

.hero-lead {
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--color-primary-dark);
    opacity: 0.82;
    margin-bottom: 2rem;
    max-width: 40ch;
}

/* Animated rotating product keyword in the hero lead */
.hero-rotator {
    display: inline-block;
    color: var(--color-accent-dark);
    font-weight: 700;
    white-space: nowrap;
}

.hero-rotator.is-leaving {
    animation: heroRotatorOut 0.32s ease forwards;
}

.hero-rotator.is-entering {
    animation: heroRotatorIn 0.42s ease forwards;
}

@keyframes heroRotatorOut {
    to {
        opacity: 0;
        transform: translateY(-0.45em);
    }
}

@keyframes heroRotatorIn {
    from {
        opacity: 0;
        transform: translateY(0.45em);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-rotator.is-leaving,
    .hero-rotator.is-entering {
        animation: none;
    }
}

.hero-cta {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.hero-media {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(73, 52, 44, 0.12);
    box-shadow: 0 24px 55px rgba(73, 52, 44, 0.28);
}

.hero-media .hero-slideshow,
.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-slideshow img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease;
    /* Promote each slide to its own GPU layer up front so it is rasterised at
       full quality while idle. Without this Chrome rasterises the layer at low
       quality just-in-time for the opacity animation and only re-rasterises it
       sharp once the crossfade ends — the visible "doostření" / pop. */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.hero-slideshow img.active {
    opacity: 1;
}

/* Hero info bar — address · today's hours · phone · e-mail.
   Three controlled tiers: 1 row (>=1200) -> 2x2 (768-1199) -> stacked (<768).
   Separators are cell borders so they adapt per tier; overflow:hidden clips
   them inside the rounded corners. */
.hero-infobar {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 3rem;
    background: #fff;
    border: 1px solid rgba(73, 52, 44, 0.1);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(73, 52, 44, 0.09);
    overflow: hidden;
}

.hero-infobar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1.05rem 1.4rem;
    color: var(--color-primary) !important;
    text-decoration: none;
}

a.hero-infobar-item {
    transition: background-color 0.18s ease, color 0.18s ease;
}

/* Only real pointing devices — avoids "sticky hover" staying highlighted
   after a tap on touchscreens. */
@media (hover: hover) {
    a.hero-infobar-item:hover {
        background-color: rgba(207, 149, 105, 0.1);
        color: var(--color-accent-dark) !important;
    }
}

/* Tier 1 (base, <768px): single column, horizontal rules between cells */
.hero-infobar-item:not(:first-child) {
    border-top: 1px solid rgba(73, 52, 44, 0.1);
}

/* Tier 2 (768-1199px): 2x2 grid */
@media (min-width: 768px) {
    .hero-infobar {
        grid-template-columns: 1fr 1fr;
    }

    .hero-infobar-item:not(:first-child) {
        border-top: 0;
    }

    /* row separator under the bottom row (items 3 & 4) */
    .hero-infobar-item:nth-child(n+3) {
        border-top: 1px solid rgba(73, 52, 44, 0.1);
    }

    /* column separator on the right-hand cells (items 2 & 4) */
    .hero-infobar-item:nth-child(2n) {
        border-left: 1px solid rgba(73, 52, 44, 0.1);
    }
}

/* Tier 3 (>=1200px): single row spread evenly across full width */
@media (min-width: 1200px) {
    .hero-infobar {
        grid-template-columns: repeat(4, 1fr);
    }

    .hero-infobar-item:nth-child(n+3) {
        border-top: 0;
    }

    .hero-infobar-item:not(:first-child) {
        border-left: 1px solid rgba(73, 52, 44, 0.1);
    }
}

.hero-infobar-icon {
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 auto;
    color: var(--color-accent-dark);
}

.hero-infobar-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
    text-align: left;
}

.hero-infobar-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(73, 52, 44, 0.55);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.hero-infobar-value {
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
}

.hero-infobar-machinery {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(73, 52, 44, 0.7);
    white-space: nowrap;
}

.hero-infobar-chevron {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    color: var(--color-accent-dark);
    opacity: 0.7;
}

@media (max-width: 991.98px) {
    .hero-split-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-content {
        align-items: center;
        text-align: center;
    }

    .hero-lead {
        max-width: none;
    }

    /* Mobile: rotating word drops to its own line (via the d-lg-none <br>).
       Pull it tight under "U nás najdete" and push the whole find-block down
       a bit so it's clearly separated from the intro line above. */
    .hero-lead-find {
        display: inline-block;
        margin-top: 0.65em;
        line-height: 1.25;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-media {
        order: -1;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 767.98px) {
    .hero {
        padding: 3rem 0 2.5rem;
    }

    .hero-heading {
        font-size: 2.1rem;
    }

    .hero-lead {
        font-size: 1.1rem;
    }

    .hero-infobar {
        margin-top: 2.5rem;
    }

    /* Mobile: left-align icon+text so icons line up in a column, and push the
       chevron to the right edge so the row fills the width (less side gap). */
    .hero-infobar-item {
        justify-content: flex-start;
        padding: 0.95rem 1.1rem;
    }

    .hero-infobar-chevron {
        margin-left: auto;
    }
}

/* Catalog page: light section bg so cards stand out */
.catalog-section {
    background-color: var(--color-surface-alt);
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* Stálý banner pod výpisem: katalog není kompletní nabídka → výzva k poptávce na zakázku */
.catalog-custom-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background-color: var(--color-accent-light);
    border: 1px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 10px;
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
    .catalog-custom-banner:hover {
        background-color: #fff;
        box-shadow: 0 6px 18px rgba(73, 52, 44, 0.12);
        color: var(--color-primary-dark);
    }
}

.catalog-custom-banner-icon {
    color: var(--color-accent);
}

.catalog-custom-banner-text {
    flex: 1 1 auto;
    font-size: 0.95rem;
    line-height: 1.4;
}

.catalog-custom-banner-text strong {
    display: block;
    color: var(--color-primary-dark);
}

.catalog-custom-banner-arrow {
    color: var(--color-accent);
    transition: transform 0.15s ease;
}

@media (hover: hover) {
    .catalog-custom-banner:hover .catalog-custom-banner-arrow {
        transform: translateX(3px);
    }
}

@media (max-width: 575.98px) {
    .catalog-custom-banner {
        gap: 0.75rem;
        padding: 0.9rem 1rem;
    }

    .catalog-custom-banner-arrow {
        display: none;
    }
}

/* Category tree sidebar (Alza/Shoptet style) */
.category-sidebar .card-body {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

.category-tree {
    font-size: 0.95rem;
    --tree-indent: 1rem;
}

.category-tree li {
    margin: 0;
}

/* No connector lines — hierarchy reads from indentation + typography.
   Each nesting level is its own <ul>; its left padding does the indenting. */
.category-subtree {
    list-style: none;
    padding-left: var(--tree-indent);
}

/* Main (first-level) categories: emphasised. */
.category-tree-root > .category-subtree > li > .category-tree-link {
    font-weight: 600;
}

/* Subcategories: lighter weight + muted colour, so the parent → child
   relationship is obvious without any guide lines. */
.category-subtree .category-subtree .category-tree-link {
    font-weight: 400;
    color: #5f6f66;
}

@media (hover: hover) {
    .category-subtree .category-subtree .category-tree-link:hover {
        color: var(--color-primary);
    }
}

.category-tree-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    color: var(--color-dark);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    line-height: 1.3;
}

@media (hover: hover) {
    .category-tree-link:hover {
        background-color: var(--color-accent-light);
        color: var(--color-primary);
        text-decoration: none;
    }
}

.category-tree-link.active {
    background-color: var(--color-primary);
    color: #fff !important;
    font-weight: 600;
}

@media (hover: hover) {
    .category-tree-link.active:hover {
        background-color: var(--color-primary-dark);
        color: #fff !important;
    }
}

.category-tree-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-tree-count {
    flex: 0 0 auto;
    background-color: rgba(0, 0, 0, 0.08);
    color: inherit;
    font-size: 0.75rem;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    min-width: 1.5rem;
    text-align: center;
}

.category-tree-link.active .category-tree-count {
    background-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 991.98px) {
    .category-sidebar .card-body { max-height: none; }
}

/* Product card — Alza-style listing card with reserved image box,
   category label, 2-line title, 2-line desc, availability, dual price
   (incl + excl VAT) and full-width CTA. Cards fill column height. */
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
    .product-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
        border-color: var(--color-accent);
    }
}

.product-card-image-link {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 75%;            /* 4:3 reserved box */
    background-color: #fafaf9;
    overflow: hidden;
}

.product-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

@media (hover: hover) {
    .product-card:hover .product-card-image {
        transform: scale(1.04);
    }
}

.product-card-image-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.2);
    font-size: 0.8rem;
}

.product-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.85rem 1rem 1rem;
    gap: 0.35rem;
}

.product-card-category {
    font-size: 0.72rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-card-title {
    color: var(--color-primary);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

@media (hover: hover) {
    .product-card-title:hover {
        color: var(--color-primary-dark);
        text-decoration: underline;
    }
}

.product-card-desc {
    font-size: 0.82rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-spacer { flex: 1; }

.product-card-availability {
    font-size: 0.8rem;
    margin: 0;
    font-weight: 600;
}
.product-card-availability.skladem { color: #198754; }
.product-card-availability.naobjednavku { color: var(--color-primary); }
.product-card-availability.vyprodano { color: #dc3545; }

.product-card-price {
    display: flex;
    flex-direction: column;
    margin-top: 0.25rem;
}

.product-card-price-main {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.1;
}

.product-card-price-novat {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.1rem;
}

.product-card-btn {
    margin-top: 0.7rem;
}

/* Two-state catalog-tile cart control. State A = the plain "Do poptávky" button;
   once the product is in the cart we flip to State B (minus | qty | plus | cart). */
.product-card-cart {
    margin-top: 0.7rem;
}

.product-card-cart .product-card-btn {
    margin-top: 0;
    width: 100%;
}

/* Icon + label so the CTA reads clearly as "add to cart". */
.product-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.product-card-btn-icon {
    flex: 0 0 auto;
}

.product-card-cart .product-card-stepper {
    display: none;
}

.product-card-cart.is-incart .product-card-btn {
    display: none;
}

.product-card-cart.is-incart .product-card-stepper {
    display: flex;
    animation: pcs-appear 0.22s ease;
}

@keyframes pcs-appear {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.product-card-stepper {
    align-items: stretch;
    gap: 0.3rem;
}

.product-card-stepper .pcs-btn {
    flex: 0 0 auto;
    width: 2rem;
    border: 1px solid var(--color-accent);
    background-color: #fff;
    color: var(--color-primary);
    border-radius: 0.4rem;
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
    .product-card-stepper .pcs-btn:hover {
        background-color: var(--color-accent-light);
        border-color: var(--color-primary);
    }
}

.product-card-stepper .pcs-qty {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    text-align: center;
    border: 1px solid var(--color-accent);
    border-radius: 0.4rem;
    padding: 0.25rem 0.2rem;
    font-size: 0.95rem;
    color: var(--color-primary);
}

.product-card-stepper .pcs-qty:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.15rem rgba(73, 52, 44, 0.12);
}

.product-card-stepper .pcs-cart {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    border: 0;
    border-radius: 0.4rem;
    background-color: var(--color-primary);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

@media (hover: hover) {
    .product-card-stepper .pcs-cart:hover {
        background-color: #c0392b; /* red — signals "remove from inquiry" */
        color: #fff;
    }
}

/* The little × badge sits over the bag corner — tap removes the product. */
.product-card-stepper .pcs-cart-x {
    position: absolute;
    right: -0.25rem;
    bottom: -0.25rem;
    background-color: #c0392b;
    color: #fff;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 0 0 2px #fff;
}

.product-card-stepper .pcs-cart.is-pulse {
    animation: pcs-pulse 0.4s ease;
}

@keyframes pcs-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.product-card-badge-featured {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background-color: var(--color-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    z-index: 2;
}

/* "Impregnováno" badge — top-right of the product photo (thumbnails + detail). */
.product-badge-impreg {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background-color: #1f7a8c;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    z-index: 2;
}

/* Detail page wraps the main image so the badge can overlay it; the badge is
   click-through (pointer-events:none) so a click opens the lightbox like the photo. */
.product-detail-image-wrap {
    position: relative;
}

/* Připomínka pod CTA na detailu: jiný rozměr → poptávka na zakázku */
.product-detail-custom-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.9rem 0 0;
    padding: 0.7rem 0.9rem;
    background-color: var(--color-accent-light);
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--color-primary-dark);
}

.product-detail-custom-note svg {
    color: var(--color-accent);
    margin-top: 0.1rem;
}

.product-detail-custom-note a {
    font-weight: 700;
    color: var(--color-accent);
}

.product-badge-impreg-lg {
    top: 0.9rem;
    right: 0.9rem;
    font-size: 0.85rem;
    padding: 0.35rem 0.8rem;
    pointer-events: none;
}

/* Two product cards side by side on phones — trim padding/typography so the
   narrower column stays readable (grid: col-6 below the md breakpoint). */
@media (max-width: 575.98px) {
    .product-card-body {
        padding: 0.6rem 0.65rem 0.75rem;
        gap: 0.25rem;
    }

    .product-card-title {
        font-size: 0.9rem;
    }

    .product-card-desc {
        font-size: 0.78rem;
    }

    .product-card-price-main {
        font-size: 1.05rem;
    }

    .product-card-btn {
        margin-top: 0.55rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 0.85rem;
        gap: 0.3rem;
    }

    .product-card-btn-icon {
        width: 16px;
        height: 16px;
    }

    .product-card-cart {
        margin-top: 0.55rem;
    }

    /* Compact the in-cart stepper so all four controls fit a half-width tile. */
    .product-card-stepper {
        gap: 0.2rem;
    }

    .product-card-stepper .pcs-btn {
        width: 1.6rem;
        font-size: 1rem;
    }

    .product-card-stepper .pcs-qty {
        padding: 0.2rem 0.1rem;
        font-size: 0.85rem;
    }

    .product-card-stepper .pcs-cart {
        width: 2rem;
    }

    .product-card-stepper .pcs-cart-bag {
        width: 19px;
        height: 19px;
    }
}

/* Category tiles — text-only "drill-down" cards, used on /katalog and inside category pages */
.category-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 90px;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-accent);
    border-radius: 0.5rem;
    background-color: #fff;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    height: 100%;
}

@media (hover: hover) {
    .category-tile:hover {
        background-color: var(--color-accent-light);
        border-color: var(--color-primary);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.08);
        text-decoration: none;
    }
}

.category-tile-name {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
}

.category-tile-count {
    color: #6c757d;
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

/* Aktuality (news) — calendar date block on the left + content on the right */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.news-card {
    position: relative;
    display: flex;
    min-height: 195px;
    background: #fff;
    border: 1px solid #ece3d8;
    border-radius: 0.75rem;
    scroll-margin-top: 90px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(73, 52, 44, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Whole card is one click target: the title link is stretched to cover the card
   via an overlay. Interactive children (share button) sit above it with z-index. */
.news-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

@media (hover: hover) {
    .news-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(73, 52, 44, 0.13);
    }
}

.news-date {
    flex: 0 0 auto;
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.5rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(160deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
}

.news-date-day {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
}

.news-date-month {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.25rem;
}

.news-date-year {
    font-size: 0.75rem;
    opacity: 0.85;
    margin-top: 0.15rem;
}

.news-body {
    display: flex;
    flex-direction: row;
    min-width: 0;
    flex: 1 1 auto;
}

/* media-img wraps the <img> in <picture>; dissolve that box so the <img> is the
   real flex/float child and its sizing (stretch, aspect-ratio, cover) actually applies. */
.news-body picture,
.news-article picture {
    display: contents;
}

/* Optional thumbnail, inset on the right. Fixed 4:3 box: the explicit height caps
   the card so a portrait source can't inflate it; cover crops to the frame. */
.news-image {
    flex: 0 0 auto;
    align-self: center;
    width: 260px;
    height: 195px;
    object-fit: cover;
    display: block;
}

/* Fallback when a news item has no photo — keeps every card the same shape.
   Faded logo on the brand tint instead of an empty gap. */
.news-image-placeholder {
    flex: 0 0 auto;
    align-self: stretch;
    width: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-light);
    border-left: 1px solid #ece3d8;
}

.news-image-placeholder img {
    width: 55%;
    max-width: 130px;
    opacity: 0.4;
}

/* ── Reusable "no photo yet" placeholder — faded centred logo on brand tint.
   Dropped in wherever an editor-managed image is missing so layouts keep shape. ── */
.img-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-light);
    overflow: hidden;
}
/* Element-qualified to outrank container rules like `.hero-slideshow img` /
   `.strip-item img` (equal specificity, defined earlier) that would otherwise
   stretch the logo to fill via width/height:100% + object-fit:cover. */
div.img-ph > img {
    position: static;
    inset: auto;
    width: 45%;
    max-width: 150px;
    height: auto;
    object-fit: contain;
    opacity: 0.4;
}
.img-ph--fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.img-ph--band { width: 100%; aspect-ratio: 2 / 1; }
.img-ph--news {
    float: right;
    width: min(42%, 380px);
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
    margin: 0.25rem 0 1rem 1.75rem;
}
.strip-item--ph { width: 480px; }
@media (max-width: 575.98px) {
    .strip-item--ph { width: 320px; }
    .img-ph--news { float: none; width: 100%; margin: 0 0 1.25rem; }
}

.news-body-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.5rem;
    overflow: hidden;
}

.news-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.news-title {
    color: var(--color-primary-dark);
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

@media (hover: hover) {
    .news-title a:hover {
        color: var(--color-accent-dark);
        text-decoration: underline;
    }
}

.news-content {
    color: #4a423c;
    line-height: 1.6;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Decorative "continues on the article page" cue. The whole card is already a
   link (.news-card-link::after covers it), so this is aria-hidden and not
   focusable — purely a visual affordance. margin-top:auto pins it to the
   bottom of the flex text column. */
.news-more {
    margin-top: auto;
    padding-top: 0.6rem;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--color-accent-dark);
}
/* Inline SVG ikony (šipky apod.) — velikost dědí z písma, barva z currentColor.
   Nahrazují Unicode znaky (←, →, «, »…), které se na každém OS vykreslují jinak. */
.ui-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex: 0 0 auto;
}

/* Přetahování řádků v administraci (drag & drop řazení) */
.drag-handle {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

    .drag-handle:active {
        cursor: grabbing;
    }

.sort-ghost {
    opacity: .5;
    background: var(--bs-warning-bg-subtle, #fff3cd);
}

/* Rozklikávací e-mailové profily (admin → Nastavení e-mailu) */
.email-profile-toggle {
    border: 0;
    background: transparent;
}

.email-profile-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.email-profile-icon .ui-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-primary);
}

.email-profile-chevron .ui-icon {
    width: 1.15rem;
    height: 1.15rem;
    color: #6c757d;
    transition: transform 0.2s ease;
}

.email-profile-toggle[aria-expanded="true"] .email-profile-chevron .ui-icon {
    transform: rotate(180deg);
}

.news-more-arrow {
    transition: transform 0.15s ease;
    display: inline-flex;
}
@media (hover: hover) {
    .news-card:hover .news-more-arrow {
        transform: translateX(3px);
    }
}

/* Share button — native share sheet on mobile, copy-link fallback elsewhere.
   z-index keeps it clickable above the stretched card link. */
.news-share {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-accent-dark);
    background: #fff;
    border: 1px solid #e3d8c9;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
    .news-share:hover {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: #fff;
    }
}

.news-share.is-copied {
    background: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
}

/* Briefly mark the card a shared #aktualita-{id} link points to */
.news-card:target {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(207, 149, 105, 0.3), 0 10px 24px rgba(73, 52, 44, 0.13);
}

/* ── Article detail page (/aktualita/{id}) ── */
.news-article {
    max-width: 860px;
    margin: 0 auto;
}

.news-article-head {
    margin-bottom: 1.5rem;
}

.news-article-date {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-accent-dark);
    margin-bottom: 0.5rem;
}

.news-article-title {
    color: var(--color-primary-dark);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0;
}

.news-article-image {
    float: right;
    width: min(42%, 380px);
    /* height:auto defeats the img's height="…" attribute (a presentational hint);
       without it the box takes the crop's pixel height and becomes a tall strip. */
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 0.75rem;
    margin: 0.25rem 0 1rem 1.75rem;
    box-shadow: 0 4px 16px rgba(73, 52, 44, 0.1);
}

.news-article-content {
    color: #4a423c;
    font-size: 1.08rem;
    line-height: 1.75;
    white-space: pre-line;
}

.news-article-actions {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #ece3d8;
}

@media (max-width: 575.98px) {
    .news-article-title { font-size: 1.5rem; }
    .news-article-content { font-size: 1rem; }
    .news-article-image {
        float: none;
        width: 100%;
        margin: 0 0 1.25rem;
    }

    .news-date {
        width: 76px;
        padding: 0.75rem 0.4rem;
    }
    .news-date-day { font-size: 1.7rem; }
    .news-date-month { font-size: 0.8rem; }
    .news-body-text { padding: 0.9rem 1.1rem; }
    .news-title { font-size: 1.2rem; }
    .news-card { min-height: 130px; }
    .news-image { width: 120px; height: 90px; }
    .news-image-placeholder { width: 120px; }
    .news-image-placeholder img { max-width: 80px; }
    .news-content { -webkit-line-clamp: 2; }
    .news-share-label { display: none; }
}

/* Error / status-code page (/chyba/{code}) */
/* Služby — střídavé pruhy obrázek/text */
.service-band {
    padding: 3.25rem 0;
}

.service-band-alt {
    background-color: var(--color-accent-light);
}

.service-media {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(73, 52, 44, 0.18);
}

.service-media img {
    display: block;
    width: 100%;
    /* height:auto defeats the img's height="…" attribute (present on library crops)
       so aspect-ratio governs the box instead of it becoming a tall strip. */
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    transition: transform 0.4s ease;
}

@media (hover: hover) {
    .service-band:hover .service-media img {
        transform: scale(1.03);
    }
}

.service-name {
    color: var(--color-primary-dark, #2E1F18);
    font-weight: 700;
    font-size: 1.85rem;
    margin-bottom: 0.75rem;
}

.service-name::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 0.65rem;
    background-color: var(--color-accent);
    border-radius: 2px;
}

.service-short {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.85rem;
}

.service-full {
    color: #4a423d;
    line-height: 1.7;
    margin-bottom: 0;
}

.error-page {
    max-width: 640px;
    margin: 2rem auto;
}

.error-code {
    font-size: clamp(5rem, 18vw, 9rem);
    font-weight: 800;
    line-height: 1;
    color: var(--color-accent);
    text-shadow: 0 3px 0 rgba(73, 52, 44, 0.12);
    margin-bottom: 0.5rem;
}

/* Pagination — brand colours (wood accent for the active page) */
.pagination {
    --bs-pagination-color: var(--color-primary);
    --bs-pagination-hover-color: var(--color-primary-dark);
    --bs-pagination-hover-bg: var(--color-accent-light);
    --bs-pagination-focus-color: var(--color-primary-dark);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(207, 149, 105, 0.35);
    --bs-pagination-active-bg: var(--color-accent);
    --bs-pagination-active-border-color: var(--color-accent);
}

/* Breadcrumb: arrow divider instead of slash + subtle styling */
.breadcrumb {
    --bs-breadcrumb-divider: '›';
    font-size: 1.05rem;
    /* Keep links above the following .row, whose negative gutter margin would
       otherwise overlap and swallow clicks on the lower half of the links. */
    position: relative;
    z-index: 1;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #adb5bd;
    font-weight: 700;
    padding-right: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: 0.5rem;
}

.breadcrumb-item a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}

@media (hover: hover) {
    .breadcrumb-item a:hover {
        color: var(--color-primary-dark, #1f3a2c);
        text-decoration: underline;
    }
}

.breadcrumb-item.active {
    color: #2e2a26;
    font-weight: 700;
    text-decoration: none;
}

/* Alza-style category navigation tiles: white card with text on the left and a
   smaller image beside it. Responsive auto-fill grid above the product listing. */
.category-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.6rem;
}

.cat-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 64px;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--bs-border-color, #e2e6e3);
    border-radius: 0.6rem;
    background-color: #fff;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
    .cat-tile:hover {
        transform: translateY(-2px);
        border-color: var(--color-primary);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        text-decoration: none;
    }
}

.cat-tile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cat-tile-name {
    color: var(--color-primary-dark, #1f3a2c);
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.2;
}

.cat-tile-count {
    color: #6b7770;
    font-size: 0.76rem;
    margin-top: 0.2rem;
}

.cat-tile-img {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 0.4rem;
}

@media (max-width: 575.98px) {
    .category-tiles {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    .cat-tile-img { width: 40px; height: 40px; }
}

/* Service cards */
.service-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

@media (hover: hover) {
    .service-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }
}

.service-card .card-title {
    color: var(--color-primary);
    font-weight: 600;
}

/* Product tiles — photo background + gradient overlay + title */
.product-tile {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    aspect-ratio: 4 / 3;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--color-primary-dark);
}

@media (hover: hover) {
    .product-tile:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0,0,0,0.18);
        text-decoration: none;
    }
}

.product-tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

@media (hover: hover) {
    .product-tile:hover .product-tile-img {
        transform: scale(1.06);
    }
}

.product-tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem 1.25rem 1rem;
    background: linear-gradient(to top,
        rgba(0,0,0,0.82) 0%,
        rgba(0,0,0,0.55) 40%,
        rgba(0,0,0,0.10) 75%,
        rgba(0,0,0,0) 100%);
    transition: background 0.3s ease;
}

@media (hover: hover) {
    .product-tile:hover .product-tile-overlay {
        background: linear-gradient(to top,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.65) 45%,
        rgba(0,0,0,0.20) 80%,
        rgba(0,0,0,0) 100%);
    }
}

.product-tile-title {
    color: #fff;
    font-weight: 700;
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.product-tile-desc {
    color: rgba(255,255,255,0.92);
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Mobile: two tiles per row as compact cards (keep the 4/3 card shape and
   bottom gradient from the base rule; drop the description, wrap the title). */
@media (max-width: 767.98px) {
    .product-tile-overlay {
        padding: 0.7rem 0.8rem 0.65rem;
    }
    .product-tile-title {
        font-size: 0.95rem;
        line-height: 1.2;
        margin: 0;
    }
    .product-tile-desc {
        display: none;
    }
}

/* Section headings */
.section-title {
    color: var(--color-primary-dark);
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--color-accent);
}

.section-title.text-center::after {
    left: 50%;
    transform: translateX(-50%);
}

/* ── Unified page header (breadcrumb + centered title) across content pages ── */
.page-header {
    padding: 2rem 0 1.25rem;
}

/* Standalone breadcrumb (catalog pages) — left-aligned, no header band. */
.breadcrumb-trail {
    margin-bottom: 1rem;
}

.page-header .breadcrumb {
    justify-content: center;
    margin-bottom: 1.1rem;
}

.page-header .section-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* No bottom margin on the title when it's the last element (no lead following). */
.page-header .section-title:last-child {
    margin-bottom: 0;
}

.page-header-lead {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    color: var(--color-primary);
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .page-header {
        padding-top: 1.5rem;
    }
    .page-header .section-title {
        font-size: 1.6rem;
    }
    .page-header-lead {
        font-size: 1.02rem;
    }
}

/* ── Sjednocený CTA blok (výzva k akci) na konci obsahových stránek ── */
.cta-band {
    background-color: var(--color-accent-light);
    padding: 3.5rem 0;
    text-align: center;
}

.cta-band-text {
    max-width: 640px;
    margin: 0 auto 1.75rem;
    color: var(--color-primary);
    font-size: 1.15rem;
    line-height: 1.6;
}

@media (max-width: 575.98px) {
    .cta-band {
        padding: 2.5rem 0;
    }

    .cta-band-text {
        font-size: 1.02rem;
    }
}

/* ── Jednotný vzhled karet napříč webem (stejné zaoblení rohů) ── */
.card {
    border-radius: 0.75rem;
}

/* Fuel price badge */
.fuel-badge {
    background-color: var(--color-accent-light);
    border: 2px solid var(--color-accent);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    display: inline-block;
}

.fuel-badge .price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* Price tables */
.price-table thead {
    background-color: var(--color-primary);
    color: #fff;
}

.price-table thead th {
    font-weight: 600;
    border: none;
    padding: 0.75rem 1rem;
}

.price-table tbody td {
    padding: 0.65rem 1rem;
    vertical-align: middle;
}

@media (hover: hover) {
    .price-table tbody tr:hover {
        background-color: var(--color-accent-light);
    }
}

/* Photo gallery */
.gallery-item {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}

.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
}

@media (hover: hover) {
    .gallery-item:hover img {
        transform: scale(1.08);
        filter: brightness(0.85);
    }
}

.gallery-item::after {
    content: '+';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 2rem;
    font-weight: 300;
    color: rgba(255,255,255,0.95);
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.3rem;
    text-align: center;
    border: 2px solid rgba(255,255,255,0.95);
    border-radius: 50%;
    transition: transform 0.3s ease;
    pointer-events: none;
}

@media (hover: hover) {
    .gallery-item:hover::after {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Navštivte naši prodejnu — icon contact list + map */
.visit-info {
    margin: 1.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.visit-info-link {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.7rem 0.75rem;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Hover gated behind (hover: hover) so a tap on a touch screen doesn't leave
   the highlight stuck until the user taps elsewhere. */
@media (hover: hover) {
    a.visit-info-link:hover {
        background-color: var(--color-accent-light);
        transform: translateX(2px);
    }

    a.visit-info-link:hover .visit-info-icon {
        background-color: var(--color-accent);
        color: #fff;
    }
}

.visit-info-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--color-accent-light);
    color: var(--color-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.visit-info-icon svg {
    width: 23px;
    height: 23px;
}

.visit-info-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-top: 0.1rem;
}

.visit-info-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent-dark);
}

.visit-info-value {
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--color-dark);
}

.visit-info-note {
    font-size: 0.85rem;
    font-style: italic;
    color: #6c757d;
}

/* Map stretches to match the contact column height (the row is align-items:
   stretch), so it flexes with the number of opening-hours rows. min-height is
   just a floor for when the list is short or the columns stack on mobile. */
.visit-map {
    height: 100%;
    min-height: 380px;
}

.visit-map iframe {
    width: 100%;
    height: 100%;
    min-height: 380px;
}

/* Visit-us gallery — horizontal strip with arrows, infinite loop */
.visit-strip {
    position: relative;
    padding: 0 2.5rem;
}

.strip-track {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.25) transparent;
    padding: 0.25rem 0;
}

.strip-track::-webkit-scrollbar {
    height: 6px;
}

.strip-track::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.25);
    border-radius: 3px;
}

.strip-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    height: 320px;
    /* override .gallery-item img defaults from earlier rule */
}

/* media-img wraps the <img> in a <picture>; make it fill the strip height so the img's height:100% resolves. */
.strip-item picture {
    display: block;
    height: 100%;
}

.strip-item img {
    width: auto;
    height: 100%;
    object-fit: cover;
    display: block;
}

.strip-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255,255,255,0.95);
    color: var(--color-primary);
    font-size: 1.75rem;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.20);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.strip-arrow .ui-icon {
    width: 55%;
    height: 55%;
}

@media (hover: hover) {
    .strip-arrow:hover {
        background-color: var(--color-primary);
        color: #fff;
        transform: translateY(-50%) scale(1.08);
    }
}

.strip-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}

@media (hover: hover) {
    .strip-arrow:disabled:hover {
        background-color: rgba(255,255,255,0.95);
        color: var(--color-primary);
        transform: translateY(-50%);
    }
}

.strip-prev { left: 0; }
.strip-next { right: 0; }

@media (max-width: 767.98px) {
    /* free scroll on touch devices — no magnet snap */
    .strip-track {
        scroll-snap-type: none;
    }
}

@media (max-width: 575px) {
    .visit-strip { padding: 0 1.5rem; }
    .strip-item { height: 220px; }
    .strip-arrow { width: 38px; height: 38px; font-size: 1.4rem; }
}

/* Gallery lightbox */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: lightboxFadeIn 0.25s ease;
}

.lightbox-overlay img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.lightbox-caption {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1.1rem;
    background: rgba(0,0,0,0.5);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
}

.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    background: none;
    border: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

@media (hover: hover) {
    .lightbox-close:hover {
        opacity: 1;
    }
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    background: rgba(0,0,0,0.35);
    border: none;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 10;
}

.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

@media (hover: hover) {
    .lightbox-prev:hover,
    .lightbox-next:hover {
        opacity: 1;
        background: rgba(0,0,0,0.6);
    }
}

@keyframes lightboxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Stats */
.stat-card {
    text-align: center;
    padding: 2rem 1rem;
}

.stat-card .stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.stat-card .stat-label {
    color: #6c757d;
    font-size: 0.9rem;
}

@media (max-width: 575.98px) {
    .stat-card {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        text-align: left;
    }
    .stat-card .stat-value {
        font-size: 1.6rem;
    }
    .stat-card .stat-label {
        font-size: 0.85rem;
    }
}

/* News */
.news-item {
    border-left: 3px solid var(--color-accent);
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

.news-item .news-date {
    color: #6c757d;
    font-size: 0.85rem;
}

/* Buttons — wood-accent brown (lighter, friendlier than the dark bark).
   The .btn-forest class name is historical; the colour is now the warm wood
   accent. Green is reserved for highlights like the announcement bar and the
   "Open now" badge. Outline variant keeps the darker primary for text contrast
   against light backgrounds. */
/* ── Jednotný vzhled tlačítek napříč webem ── */
.btn {
    border-radius: 0.5rem;
}

.btn-forest,
.btn-outline-forest {
    font-weight: 600;
}

.btn-forest {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

@media (hover: hover) {
    .btn-forest:hover {
        background-color: var(--color-accent-dark);
        border-color: var(--color-accent-dark);
        color: white;
    }
}

.btn-outline-forest {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

@media (hover: hover) {
    .btn-outline-forest:hover {
        background-color: var(--color-primary);
        color: white;
    }
}

/* Active state for toggle buttons (btn-check) — make the selected option clearly filled. */
.btn-check:checked + .btn-outline-forest,
.btn-check:active + .btn-outline-forest {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    font-weight: 600;
    box-shadow: 0 0 0 0.15rem rgba(0, 0, 0, 0.08);
}

/* Contact info */
.contact-info a {
    color: var(--color-primary);
    text-decoration: none;
}

@media (hover: hover) {
    .contact-info a:hover {
        text-decoration: underline;
    }
}

/* Utility */
.text-forest {
    color: var(--color-primary) !important;
}

.bg-accent-light {
    background-color: var(--color-accent-light) !important;
}

/* Career listing tiles — subtle lift on hover so the whole card reads as clickable */
.job-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
    .job-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(73, 52, 44, 0.12) !important;
    }
}

/* Admin content area — soft backdrop so white cards stand out */
.admin-content {
    background-color: #efeae3;
    min-height: 100vh;
}

.admin-content .card {
    box-shadow: 0 1px 2px rgba(73, 52, 44, 0.06), 0 2px 10px rgba(73, 52, 44, 0.08) !important;
}

/* Admin sidebar — light panel separated from content by border + shadow */
.admin-sidebar {
    background-color: #fff;
    min-height: 100vh;
    padding-top: 0.5rem;
    border-right: 1px solid rgba(73, 52, 44, 0.14);
    box-shadow: 3px 0 12px rgba(73, 52, 44, 0.07);
    z-index: 1;
}

.admin-logo {
    display: block;
    text-align: center;
    padding: 0.5rem 1rem 1.1rem;
    margin: 0 0 0.5rem;
    border-bottom: 1px solid rgba(73, 52, 44, 0.1);
}

.admin-logo img {
    height: 58px;
    width: auto;
}

.admin-nav-group {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
    color: var(--color-primary);
    padding: 0.85rem 1.4rem 0.4rem;
    margin-top: 0.7rem;
    border-top: 1px solid rgba(73, 52, 44, 0.1);
}

.admin-sidebar .nav-link {
    color: var(--color-primary);
    padding: 0.5rem 1.2rem;
    border-radius: 6px;
    margin: 1px 10px;
    font-size: 0.95rem;
}

@media (hover: hover) {
    .admin-sidebar .nav-link:hover {
        color: var(--color-primary-dark);
        background-color: rgba(73, 52, 44, 0.07);
    }
}

.admin-sidebar .nav-link.active {
    color: var(--color-primary-dark);
    background-color: var(--color-accent-light);
    box-shadow: inset 3px 0 0 var(--color-accent);
    font-weight: 600;
}

.admin-sidebar-divider {
    border-color: rgba(73, 52, 44, 0.12);
}

/* Fotoobsah tab bar — Bootstrap nav-tabs render inactive links as faint plain
   text, so give them a cream fill + border to read as clickable tabs. */
.pi-tabs {
    border-bottom-color: rgba(73, 52, 44, 0.14);
    gap: 0.25rem;
}
.pi-tabs .nav-link {
    color: var(--color-primary);
    font-weight: 600;
    background-color: var(--color-accent-light);
    border: 1px solid rgba(73, 52, 44, 0.16);
    margin-bottom: -1px;
}
@media (hover: hover) {
    .pi-tabs .nav-link:hover {
        color: var(--color-primary-dark);
        background-color: #f2e3d3;
        border-color: rgba(73, 52, 44, 0.24);
    }
}
.pi-tabs .nav-link.active {
    color: var(--color-primary-dark);
    font-weight: 700;
    background-color: #fff;
    border-color: rgba(73, 52, 44, 0.16);
    border-bottom-color: #fff;
}

.admin-sidebar-footer-link {
    color: rgba(73, 52, 44, 0.6);
    text-align: left;
}

@media (hover: hover) {
    .admin-sidebar-footer-link:hover {
        color: var(--color-primary-dark);
    }
}

/* Forms */
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Product detail – variant selector (Alza-style chips) */
.detail-variants {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-variants-label {
    font-weight: 600;
    color: var(--color-primary);
}

.detail-variants-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.detail-variant-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0.45rem 0.95rem;
    border: 2px solid var(--color-accent);
    border-radius: 8px;
    background-color: #fff;
    color: var(--color-primary);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

@media (hover: hover) {
    .detail-variant-chip:hover {
        background-color: var(--color-accent-light);
        border-color: var(--color-accent-dark);
        color: var(--color-primary);
        text-decoration: none;
    }
}

.detail-variant-chip.active {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    cursor: default;
}

/* ── Admin image crop editor (full-screen overlay, sits above Bootstrap modals) ── */
.crop-overlay {
    position: fixed;
    inset: 0;
    z-index: 20100; /* above the media picker (20050) so inline upload's crop editor stays on top */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.72);
}

.crop-overlay.open {
    display: flex;
}

.crop-dialog {
    display: flex;
    flex-direction: column;
    width: min(900px, 100%);
    max-height: 100%;
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.crop-stage {
    flex: 1 1 auto;
    min-height: 0;
    height: 62vh;
    background: #1c1714;
}

.crop-stage .crop-img {
    display: block;
    max-width: 100%;
}

.crop-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid #e6e0da;
}

.crop-zoom-label {
    font-size: 0.9rem;
    color: var(--color-primary);
    font-weight: 600;
    white-space: nowrap;
}

.crop-zoom {
    flex: 1 1 auto;
    max-width: 320px;
    accent-color: var(--color-accent);
}

.crop-zoom-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
    min-width: 3.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.crop-zoom-reset {
    padding: 0 0.25rem;
    white-space: nowrap;
    text-decoration: none;
}

.crop-actions {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
}

/* Media-library picker modal */
.media-picker {
    position: fixed;
    inset: 0;
    z-index: 20050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.6);
}

.media-picker.open {
    display: flex;
}

.media-picker-dialog {
    display: flex;
    flex-direction: column;
    width: min(900px, 100%);
    max-height: 90vh;
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.media-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid #e6e0da;
}

.media-picker-grid {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.85rem;
}

.media-picker-item {
    display: flex;
    flex-direction: column;
    border: 1px solid #e0d9d2;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

@media (hover: hover) {
    .media-picker-item:hover {
        border-color: var(--color-accent);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    }
}

.media-picker-thumb {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: #f1efec;
    border-top-left-radius: 0.45rem;
    border-top-right-radius: 0.45rem;
}

.media-picker-label {
    display: block;
    padding: 0.4rem 0.55rem;
    font-size: 0.82rem;
    line-height: 1.25;
    color: var(--color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Cookie consent lišta (neagresivní pruh dole) ── */
.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    background: #fff;
    border-top: 1px solid var(--color-accent);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.cookie-consent.cookie-consent--show {
    transform: translateY(0);
}
.cookie-consent-inner {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.cookie-consent-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.cookie-consent-text {
    flex: 1 1 320px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--color-dark);
}
.cookie-consent-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}
/* Panel s kategoriemi */
.cookie-consent-panel {
    max-height: 70vh;
    overflow-y: auto;
}
.cookie-consent-cats {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.cookie-cat {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-accent-light);
    border-radius: 0.4rem;
    cursor: pointer;
}
.cookie-cat input[type="checkbox"] {
    margin-top: 0.15rem;
    flex-shrink: 0;
}
.cookie-cat input[disabled] {
    cursor: not-allowed;
}
.cookie-cat-body {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}
.cookie-cat-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
}
.cookie-cat-locked {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-left: 0.3rem;
}
.cookie-cat-desc {
    font-size: 0.82rem;
    color: #6c757d;
}
.cookie-consent-panel .cookie-consent-actions {
    flex-wrap: wrap;
    margin-left: 0;
    justify-content: flex-end;
}
@media (max-width: 575.98px) {
    .cookie-consent-actions {
        width: 100%;
    }
    .cookie-consent-actions .btn {
        flex: 1 1 0;
    }
}

/* ── Certifikáty a licence (O nás) ── */
.certificates {
    background-color: var(--color-accent-light);
}
.certificates-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1.25rem;
}
.document-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.6rem;
}
.document-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background-color: #fff;
    border: 1px solid var(--color-accent-light);
    border-left: 3px solid var(--color-accent);
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--color-dark);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) {
    .document-link:hover {
        border-color: var(--color-accent);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }
}
.document-icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--color-accent);
    font-size: 1.35rem;
}
.document-title {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.document-meta {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-primary);
    background-color: var(--color-accent-light);
    padding: 0.15rem 0.5rem;
    border-radius: 0.35rem;
    white-space: nowrap;
}
/* ── Dávkové nahrávání obrázků (Knihovna médií) ── */
.batch-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #6c757d;
    white-space: nowrap;
}
.batch-table td { vertical-align: middle; }
.batch-table .progress-bar.bg-forest,
.progress-bar.bg-forest { background-color: var(--color-accent); }

.batch-thumb {
    width: 72px;
    height: 54px;
    border-radius: 0.35rem;
    overflow: hidden;
    background: #f2e3d3;
    border: 1px solid rgba(73, 52, 44, 0.14);
}
.batch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.batch-row.uploading { opacity: 0.7; }
.batch-row.saving .batch-name,
.batch-row.saving .batch-alt { border-color: var(--color-accent); }

/* Floating hover zoom preview shared by thumbnails + crop cells. */
.batch-zoom {
    position: fixed;
    z-index: 2000;
    width: 320px;
    height: 320px;
    padding: 4px;
    background: #fff;
    border: 1px solid rgba(73, 52, 44, 0.2);
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    display: none;
}
.batch-zoom.show { display: block; }
.batch-zoom img { width: 100%; height: 100%; object-fit: contain; }