/* ============================================================
   TrollGames — hlavní stylesheet  v79
   Barvy jsou definovány v /css/themes/*.css
   ============================================================ */

/* ============================================================
   ZÁKLADNÍ TYPOGRAFIE
   ============================================================ */

body {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    background: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    text-transform: uppercase;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: none;
    color: #212529;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    text-decoration: underline;
}

a {
    color: var(--clr-link, #3a6dbc);
}

a:hover {
    color: var(--clr-link-hover, #2a4f8c);
}

.sassy-frass-regular {
    font-family: "Sassy Frass", cursive;
    font-weight: 400;
    font-style: normal;
}

.title-icon {
    width: 34px;
    position: relative;
    top: -4px;
    margin-right: 5px;
}

.text-success {
    color: #4d931f !important;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #cf7fed;
    --bs-btn-border-color: #cf7fed;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9c58b5;
    --bs-btn-hover-border-color: #9c58b5;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #9c58b5;
    --bs-btn-active-border-color: #9c58b5;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #cdafd8;
    --bs-btn-disabled-border-color: #cdafd8;
}


/* ============================================================
   NAVBAR — horní mini menu
   ============================================================ */

.mini-menu {
    font-size: 80%;
    background: var(--mini-menu-bg, #f3f3f3) !important;
    /*border-bottom: 1px solid var(--mini-menu-border, #eaeaea);*/
}

.mini-menu .nav-link {
    padding: 5px 10px;
    color: var(--mini-menu-color, #3d5353);
}

.mini-menu .nav-link:hover {
    text-decoration: underline;
}

.mini-menu .nav-item.nav-last .nav-link {
    padding-right: 0;
}

/* ============================================================
   NAVBAR — hlavní
   ============================================================ */

.navbar {
    background: var(--navbar-bg, #fff) !important;
    /*border-bottom: 1px solid var(--navbar-border, #e8eef5);*/
    border-bottom: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.navbar a:hover {
    color: #7260bd;
}

@media (min-width: 992px) {
    .navbar.navbar-header {
        padding: 18px 0;
    }
}

@media (max-width: 764px) {
    .navbar.navbar-header {
        position: sticky;
        z-index: 999999999;
        top: 0;
    }
}

.navbar .navbar-toggler {
    border: 0;
    position: relative;
    top: 1px;
    color: var(--mini-menu-color, #3d5353);
}

.navbar .navbar-nav .nav-link {
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 500;
    padding: .5rem 1rem;
    color: #5f5585;
}

.navbar .navbar-nav .nav-link:hover {
    color: #7260bd;
}

.navbar .navbar-nav .nav-link.red {
    color: #d3328a !important;
}

/*
.navbar .navbar-nav .nav-item:first-child .nav-link {
    padding-left: 0 !important;
}*/

.navbar-bottom {
    background: var(--navbar-bottom-bg, #f0f4fa) !important;
    border-top: 1px solid var(--navbar-bottom-border, #dde4ef);
    border-bottom: 1px solid var(--navbar-bottom-border, #dde4ef);
    box-shadow: none !important;
}

@media (max-width: 991px) {
    .navbar-bottom {
        display: none;
    }
}

#search-suggestions { border-radius: 10px; overflow: hidden; border: 1px solid #e0e0e0; border-top: none; background: #fff; }
.sg-label { 
    padding: 6px 14px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: #4a486d;
    background: #f3f0ff;
    border-bottom: 1px solid #dcd6f4;
 }
.sg-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; text-decoration: none; color: #1a1a1a; border-bottom: 1px solid #f5f5f5; transition: background .1s; }
.sg-item:hover, .sg-item.sg-active { background: #f9f8fd; }
.sg-icon { color: #4c4665; font-size: 13px; width: 16px; flex-shrink: 0; }
.sg-thumb { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: #f5f5f5; flex-shrink: 0; }
.sg-thumb-placeholder { width: 36px; height: 36px; background: #f0f0f0; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 14px; flex-shrink: 0; }
.sg-item-text { display: flex; flex-direction: column; min-width: 0; }
.sg-item-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-item-name mark { background: #d4f0a8; color: inherit; border-radius: 2px; padding: 0 1px; }
.sg-item-price { font-size: 12px; color: #3B6D11; font-weight: 500; }
.sg-breadcrumb { font-size: 11px; color: #4c4665; }
.sg-category .sg-item-name { font-size: 13px; font-weight: 500; }
.sg-all { display: block; padding: 9px 14px; font-size: 12px; color: #4c4665;
    text-decoration: none;
    background: #f3f0ff; border-top: 1px solid #dcd6f4; text-align: center; }
.sg-all:hover { background: #f9f8fd; }
.sg-empty { padding: 12px 14px; font-size: 13px; color: #999; text-align: center; }
.sg-loading { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.sg-loading span { height: 32px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; border-radius: 6px; animation: sg-shimmer 1.2s infinite; }
.sg-loading span:nth-child(2) { width: 80%; }
.sg-loading span:nth-child(3) { width: 60%; }
@keyframes sg-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============================================================
   STEP KOŠÍK
   ============================================================ */
a.step-item {
    color: #198754;
}

/* ============================================================
   VYHLEDÁVÁNÍ
   ============================================================ */

.search {
    /*background: var(--navbar-bg, #fff) !important;*/
    background: #fff !important;
    /*border: 2px solid var(--search-border, #e9efef);*/
    border-radius: 8px;
}

.search input {
    border-radius: 0.375rem 0 0 0.375rem;
    /*border: 1px solid var(--search-input-border, #d3e0e5);*/
    border: none;
    border-right: none;
    background: #f7f5ff;
}

.search .form-control {
    padding: .675rem 1rem;
}

.search button {
    border-radius: 0 0.375rem 0.375rem 0;
    background: var(--search-btn-bg, #dff1f1);
    color: var(--search-btn-color, #4d6565);
    /*border: 1px solid var(--search-input-border, #d3e0e5);*/
    border: none;
    border-left: none;
}

.search .form-control:focus {
    color: var(--bs-body-color);
    background-color: #f7f5ff;;
    border-color: none;
    outline: 0;
    box-shadow: none;
}

.navbar-brand img {
    max-height: 42px;
}

/* Košík + účet ikony */
.header-cart-mobile {
    position: relative;
    text-decoration: none;
    color: var(--mini-menu-color, #3d5353);
    padding: 0 10px;
}

.header-cart-mobile span {
    font-size: 60%;
    border-radius: 6px !important;
    left: 90% !important;
    background-color: var(--clr-brand, #98bc07) !important;
}

.header-cart-mobile span.sub {
    background: none !important;
    font-size: 80%;
    margin-right: 10px;
}

@media (max-width: 991px) {
    .header-cart-mobile span {
        left: 70% !important;
    }

    .header-cart-mobile span.sub {
        display: none;
    }

    .navbar-expand-lg .navbar-collapse {
        margin-top: 15px;
    }
}

@media (max-width: 767px) {
    .navbar .search {
        margin-bottom: 15px;
        margin-right: 0 !important;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        justify-content: space-between;
    }

    .navbar-expand-lg .navbar-collapse .search {
        width: 100%;
        max-width: 500px;
        margin: 0 auto !important;
    }
}

/* ============================================================
   HOMEPAGE — FULL-WIDTH SEKCE
   ============================================================ */

.hp-section {
    width: 100%;
    padding: 0 0 1.5rem 0;
}

.hp-section--hero { background: var(--hp-section-hero-bg, #f8f9fa); padding: 1.5rem 0 .1rem; }


/* Statické sekce */
.hp-section--categories {
    background: var(--hp-section-categories-bg, #f3f0ff);
    --section-title-color: var(--hp-section-categories-title, #2d283d);
    --section-desc-color:  var(--hp-section-categories-desc,  #2d283d);
}
.hp-section--breadcrumbs {
    background: #fff;
    --section-title-color: var(--hp-section-categories-title, #2d283d);
    --section-desc-color:  var(--hp-section-categories-desc,  #2d283d);
}
.hp-section--top {
    background: url("/images/bg-box.png"), var(--hp-section-top-bg, #f5fdf2);
    background-blend-mode: multiply;
    --section-title-color: var(--hp-section-top-title, #35433b);
    --section-desc-color:  var(--hp-section-top-desc,  #35433b);
}
.hp-section--new {
    background: url("/images/bg-box.png"), var(--hp-section-new-bg, #fffbf0);
    --section-title-color: var(--hp-section-new-title, #554f43);
    --section-desc-color:  var(--hp-section-new-desc,  #554f43);
    border-top: 1px solid var(--hp-section-new-border);
}

/* Dynamické sekce */
.hp-section--pokemon {
    background: url("/images/bg-box.png"), var(--hp-section-pokemon-bg, #fff8dc);
    --section-title-color: var(--hp-section-pokemon-title, #27291a);
    --section-desc-color:  var(--hp-section-pokemon-desc,  #27291a);
    border-top: 1px solid var(--hp-section-pokemon-border);
}
.hp-section--lorcana {
    background: url("/images/bg-box.png"), var(--hp-section-lorcana-bg, #f5fdf2);
    background-blend-mode: multiply;
    --section-title-color: var(--hp-section-lorcana-title, #35433b);
    --section-desc-color:  var(--hp-section-lorcana-desc,  #35433b);
}
.hp-section--figures {
    background: url("/images/bg-box.png"), var(--hp-section-figures-bg, #fffbf0);
    --section-title-color: var(--hp-section-figures-title, #554f43);
    --section-desc-color:  var(--hp-section-figures-desc,  #554f43);
    border-top: 1px solid var(--hp-section-figures-border);
}
.hp-section--sport {
    background: url("/images/bg-box.png"), var(--hp-section-sport-bg, #fff0f5);
    --section-title-color: var(--hp-section-sport-title, #5c1a38);
    --section-desc-color:  var(--hp-section-sport-desc,  #7a3055);
    border-top: 1px solid var(--hp-section-sport-border);
}
.hp-section--boardgames {
    background: url("/images/bg-box.png"), var(--hp-section-boardgames-bg, #f1faff);
    --section-title-color: var(--hp-section-boardgames-title, #1a2931);
    --section-desc-color:  var(--hp-section-boardgames-desc,  #1a2931);
    border-top: 1px solid var(--hp-section-boardgames-border);
}

/* Ostatní sekce */
.hp-section--benefits      { background: var(--hp-section-white-bg, #fff); border-top: 1px solid var(--hp-section-white-border, #cdcdcd); }
.hp-section--reviews       { background: var(--hp-section-white-bg, #fff); border-top: 1px solid var(--hp-section-white-border, #cdcdcd); }
.hp-section--benefits-full {
    background: var(--clr-surface, #f3f0ff);
    --section-title-color: var(--clr-surface-title, #2d283d);
    --section-desc-color:  var(--clr-surface-desc,  #4a4560);
    border-top: 1px solid var(--clr-surface-border, #d9d0ff);
}
.hp-section--reviews-full { background: var(--clr-surface, #f3f0ff); padding-bottom: 3rem; border-top: 1px solid var(--clr-surface-border, #d9d0ff); }

/* ============================================================
   VLNKOVÉ ODDĚLOVAČE MEZI SEKCEMI
   ============================================================ */

.hp-wave {
    display: block;
    position: relative;
    line-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.hp-wave svg {
    display: block;
    width: 100%;
    height: 40px;
    overflow: visible;
    filter: drop-shadow(0 -1px 0px rgba(0, 0, 0, 0.08));
}

/* Druhá (echo) vlna — stejná barva, průhledná, jede "za" hlavní vlnou */
.hp-wave .wave-echo { fill-opacity: 0.30; }
.hp-wave .wave-main { fill-opacity: 1; }

/* fill vlnky = barva NÁSLEDUJÍCÍ sekce — platí pro obě paths */
.hp-wave--to-categories path    { fill: var(--hp-section-categories-bg, #f3f0ff); }
.hp-wave--to-breadcrumbs path    { fill: var(--hp-section-white-bg, #f3f0ff); }
.next-green .hp-wave--to-breadcrumbs path    { fill: var(--hp-section-top-bg, #f3f0ff); }
.hp-wave--to-top path           { fill: var(--hp-section-top-bg,        #f5fdf2); }
.hp-wave--to-benefits path      { fill: var(--hp-section-white-bg,      #fff); }
.hp-wave--to-reviews path       { fill: var(--hp-section-white-bg,      #fff); }
.hp-wave--to-benefits-full path { fill: var(--clr-surface,              #f3f0ff); }
.hp-wave--to-reviews-full path  { fill: var(--clr-surface,              #f3f0ff); }
.hp-wave--to-footer path        { fill: var(--footer-bg,                #3b3252); }

/* background vlnkového divu = barva PŘEDCHOZÍ sekce */
.hp-section--hero        + .hp-wave { background: var(--hp-section-hero-bg,        #0e0825); }
.hp-section--categories  + .hp-wave { background: var(--hp-section-categories-bg,  #f3f0ff); }
.hp-section--breadcrumbs  + .hp-wave { background: #fff; }
.hp-section--top         + .hp-wave { background: var(--hp-section-top-bg,         #f5fdf2); }
.hp-section--benefits    + .hp-wave { background: var(--hp-section-white-bg,       #fff); }
.hp-section--reviews     + .hp-wave { background: var(--hp-section-white-bg,       #fff); }
.hp-section--benefits-full + .hp-wave { background: var(--clr-surface,             #f3f0ff); }
.hp-wave.hp-wave--to-footer          { background: var(--clr-surface,              #f3f0ff); }

@media (max-width: 575px) {
    .hp-wave svg { height: 40px; }
}

/* Nadpisy v sekcích — barva se dědí z CSS proměnné nastavené na rodiči (.hp-section--N) */
.hp-section-title {
    margin-bottom: .5rem;
    color: var(--section-title-color, #1a1a2e);
}

.hp-section-title a {
    color: var(--section-title-color, #1a1a2e);
}

.hp-section-title a:hover {
    text-decoration: underline;
}

.hp-section-desc {
    color: var(--section-desc-color, #5a5a6a);
    margin-bottom: 1.25rem;
    font-size: 95%;
}

.hp-section-inner {
    padding: .25rem 0;
}

/* ============================================================
   KATEGORIE TLAČÍTKA
   ============================================================ */

.category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
}

.category-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 8px 12px;
    text-align: left;
    font-size: 90%;
    text-decoration: none;
    background: var(--cat-btn-bg, #fafafa);
    border: 1px solid var(--cat-btn-border, #e5e5e5);
    color: var(--cat-btn-color, #494949);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.06);
    font-weight: 500;
    border-radius: 6px;
    transition: transform .15s ease, box-shadow .15s ease, background .1s ease;
}

.category-btn:hover {
    background: var(--cat-btn-hover-bg, #fff);
    border-color: var(--clr-brand, #98bc07);
    color: var(--cat-btn-color, #494949);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,.1);
}

.category-btn:active, .category-btn:focus {
    background: var(--cat-btn-active-bg, #fff3cd);
    border-color: var(--cat-btn-active-border, #ffc107);
    color: var(--cat-btn-color, #494949);
}

.category-btn span {
    line-height: 140%;
}

.category-btn img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Kategorie uvnitř barevné sekce — bílé pozadí pro lepší kontrast */
.hp-section .category-btn {
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(2px);
}

.hp-section .category-btn:hover {
    background: #fff;
}

.hp-section--top .category-btn {
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(2px);
    color: var(--hp-section-top-title);
}

.hp-section--top .card-body, .hp-section--top h1, .hp-section--top p, .hp-section--top a {
    color: var(--hp-section-top-title);
}

.hp-section--top .nav-tabs .nav-link {
    color: var(--hp-section-top-title);
}

.hp-section--pokemon .category-btn                      { border: 1px solid #d5d0b7; }
.hp-section--lorcana .category-btn,
.hp-section--top .category-btn                          { border: 1px solid #c7d5c1; }
.hp-section--figures .category-btn,
.hp-section--new .category-btn                          { border: 1px solid #ddd7c9; }
.hp-section--sport .category-btn                        { border: 1px solid #d9c4cc; }
.hp-section--boardgames .category-btn                   { border: 1px solid #c0cbd3; }
.hp-section--categories .category-btn                   { border: 1px solid #c9c0f0; }

.box-bg .category-btn {
    background-color: white;
}

.box-bg .category-btn:hover {
    border-color: var(--clr-brand, #98bc07);
}

#theme-tiles .category-btn {
    background: white;
}

@media (max-width: 768px) {
    .category-section-top {
        padding-bottom: 1px !important;
    }

    .category-section-products {
        padding-top: 20px !important;
    }

    .category-section-products.section-product-detail {
        padding-top: 0 !important;
    }

}

@media (max-width: 800px) {
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: .75rem;
    }

    .category-btn {
        font-size: 80%;
    }

    .category-btn img {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 575px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem;
    }
}

@media (max-width: 350px) {
    .category-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: .75rem;
    }
}

/* ============================================================
   TLAČÍTKA
   ============================================================ */

.btn.btn-success {
    background-color: var(--btn-primary-bg, #98bc07);
    border: 1px solid var(--btn-primary-border, #98bc07);
    color: var(--btn-primary-color, #fff);
}

.btn.btn-success:hover {
    background-color: var(--btn-primary-hover, #7da006);
    border-color: var(--btn-primary-hover, #7da006);
    color: var(--btn-primary-color, #fff);
}

.btn.btn-add-cart {
    background-color: var(--btn-primary-bg, #98bc07);
    border-color: var(--btn-primary-border, #98bc07);
    color: var(--btn-primary-color, #fff);
    font-size: 120%;
}

.btn.btn-outline-success {
    border-color: var(--btn-primary-border, #98bc07);
    color: var(--btn-primary-border, #98bc07);
}

.btn.btn-outline-success:hover {
    background-color: var(--btn-primary-hover, #7da006);
    border-color: var(--btn-primary-hover, #7da006);
    color: var(--btn-primary-color, #fff);
}

.btn.btn-add-cart:hover {
    background-color: var(--btn-primary-hover, #7da006);
    border-color: var(--btn-primary-hover, #7da006);
    color: var(--btn-primary-color, #fff);
}

.product-detail-2 .btn.btn-add-cart {
    width: 100%;
}

.btn.btn-with-img {
    display: flex;
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .1);
    align-items: center;
    overflow: hidden;
}

.price-in-desc {
    background: #f8faf7;
    padding: 12px 4px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #e2eade;
    /* background: #fff; */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

/* ============================================================
   KARTY PRODUKTŮ
   ============================================================ */

.card-product {
    border: 1px solid var(--card-border, #e5e5e5);
    border-radius: 8px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.card-product:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--card-hover-shadow, rgba(0,0,0,.10));
}

.card-product .card-body {
    justify-content: space-between;
    display: flex;
    flex-direction: column;
}

.card-product .card-footer {
    border-top: 1px solid var(--card-border, #e5e5e5);
    padding: 10px 15px;
}

.card-product h5 a {
    display: block;
    color: rgb(55 55 55);
    font-size: 85%;
    text-decoration: none;
    line-height: 140%;
}

.card-product h5 a:hover {
    text-decoration: underline !important;
}

.card-product .card-title {
    margin-bottom: 5px;
}

.card-product .card-text {
    font-size: 80%;
}

.card-product .stock-label {
    padding-left: 0;
}

.card-product .stock-label.bg-success {
    background-color: white !important;
    color: green;
    font-size: 14px;
    display: inline-block;
    font-weight: 500;
    text-transform: none !important;
}

.card-product .stock-label.bg-danger {
    background-color: white !important;
    color: rgb(220 53 69) !important;
    font-size: 14px;
    display: inline-block;
    font-weight: 400;
    text-transform: none !important;
}

.card-img {
    width: 100%;
    height: 220px;
    text-align: center;
    padding: 8px;
}

.card-img .card-img-top {
    width: auto;
    max-width: 100%;
    height: 100%;
}

.badges-group {
    text-align: right;
    margin: 4px 8px;
    height: 20px;
}

.badges-group .badge {
    margin-bottom: 5px;
}

.card-body-2 {
    border-bottom: 1px solid #ededed;
    background: #ffffff;
    padding: 10px 14px 10px;
    border-top: 1px solid #ededed;
    margin: 5px 0 0 0;
    text-align: center;
    position: relative;
}

/* ============================================================
   CENY
   ============================================================ */

.stock-and-price {
    margin-top: 5px;
}

.stock-and-price strong {
    font-size: 140%;
    color: var(--clr-price, rgb(189, 38, 38));
}

.big-price {
    font-size: 180%;
    color: var(--clr-price, rgb(189, 38, 38));
    font-weight: bold;
    line-height: 110%;
}

.big-price .info,
.price .info,
.price-info {
    font-size: 11px;
    font-weight: normal;
    color: rgb(124, 124, 124);
    font-style: italic;
    position: relative;
    top: -5px;
}

.price-info {
    top: 0;
}

.extra-price {
    font-size: 180%;
    color: var(--clr-price, rgb(189, 38, 38));
    font-weight: bold;
}

.extra-price .sale {
    display: flex;
    align-items: center;
    gap: 10px;
}

.extra-price .text-price {
    font-size: 12px;
    line-height: 100%;
    background: var(--clr-accent, #f7bf18);
    color: black;
    padding: 4px 6px;
    border-radius: 4px;
}

.extra-price .double-price {
    display: flex;
    flex-direction: column;
}

.card-product .extra-price {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 150%;
    color: rgb(98 98 98);
    font-weight: bold;
    margin-top: 8px;
}

.card-product .col-buttons .btn {
    width: 100%;
    padding: 6px 12px;
}

.card-product .old-price {
    font-size: 90%;
    margin-left: 5px;
}

.old-price {
    position: relative;
    display: inline-block;
    font-size: 60%;
    font-weight: normal;
}

.old-price::after {
    content: "";
    width: 100%;
    position: absolute;
    right: 0;
    top: 50%;
    border-bottom: 1px solid currentColor;
    transform: skewY(-10deg);
}

/* ============================================================
   PRODUKT DETAIL
   ============================================================ */
.other-section-products.border-top {
    border-top: var(--bs-border-width) var(--bs-border-style) #cdd3cb !important;
    background: #f9f9f9;
}
.product-detail-2 .product-title {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2ebdf;
}

.product-img-detail {
    text-align: center;
    border-radius: 8px;
}

.product-img-detail .img-detail-after.img-card {
    padding: 1px;
    background: #bcc3b8;
    display: inline-block;
    border-radius: 16px;
    -webkit-box-shadow: 0px 12px 11px -7px rgba(0, 0, 0, 0.41);
    box-shadow: 0px 12px 11px -7px rgba(0, 0, 0, 0.25);
}

.product-img-detail .not-transparent {
    display: inline-block;
    background-color: white;
    padding: 10px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 12px 11px -7px rgba(0, 0, 0, 0.41);
    box-shadow: 0px 12px 11px -7px rgba(0, 0, 0, 0.25);
}

.product-img-detail img {
    max-height: 400px;
    width: auto;
}

.sp-header {
    background: none !important;
    border-radius: 10px;
    padding: 15px 20px;
    border: none;
}

.sp-header .card-body {
    padding-top: 0;
    padding-bottom: 0;
}

.sp-header .card-body p:last-child {
    margin-bottom: 0;
}

.sp-header h1 {
    font-family: "Indie Flower", sans-serif;
    font-weight: 600;
    font-size: 32px;
}

.sp-header .card-body {
    font-family: "Indie Flower", sans-serif;
    font-size: 21px;
}

.sp-header img {
    max-width: 50%;
    margin: 0 auto 15px auto;
    display: block;
    vertical-align: middle;
}

@media (max-width: 767px) {

    .sp-header h1 {
        margin-top: 16px;
        text-align: center;
    }

    .sp-header .card-body {
        text-align: center;
    }
}

@media (min-width: 768px) {

    .sp-header h1 {
        font-family: "Indie Flower", sans-serif;
        font-weight: 600;
        font-size: 32px;
    }

    .sp-header img {
        max-width: 90%;
        max-height: 90%;
        margin: 0 auto 0 auto;
    }
}

.top-text {
    color: #b55317;
    font-family: "Bungee", sans-serif;
    display: block;
    font-size: 42px;
}

h1 + .product-img-detail {
    margin: 20px 0;
}

.alert-info {
    --bs-alert-color: #2c7a89;
    --bs-alert-bg: #edfcff;
    --bs-alert-border-color: #ccebf1;
    --bs-alert-link-color: #2c7a89;
    border-style: dashed;
}

.alert-limit {
    font-size: 80%;
    padding: 8px 16px;
    background: #fffa96;
    border-color: #fffa96;
    color: #59561d;
}

.product-long-desc figure {
    text-align: center;
}

.product-long-desc figcaption {
    font-size: 80%;
    margin-top: 5px;
    color: #757575;
}

.product-long-desc img {
    max-width: 100%;
}

.product-detail-2 hr {
    color: #a3a3a3;
}

.product-detail-2 .bg-success.stock-label {
    background: none !important;
    color: #4d931f;
    padding: 0;
    text-transform: none;
    font-size: 100%;
}

.product-detail-2 .bg-danger.stock-label {
    background: none !important;
    color: #dc3545;
    padding: 0;
    text-transform: none;
}

.label-available_at {
    color: rgb(65 205 165) !important;
    font-size: 14px;
}

.stock-label.available_at {
    background-color: rgb(65 205 165) !important;
}

.card-product .stock-label.available_at {
    padding-left: .35em;
}

.product-detail-2 .stock-label.available_at {
    margin-bottom: 15px;
}

/* ============================================================
   BENEFITY
   ============================================================ */

.benefits {
    text-align: center;
    border-radius: 10px;
    padding: 0 0;
}

.benefits a {
    color: #212529;
    text-decoration: underline;
}

.benefits a:hover {
    color: #212529;
    text-decoration: none;
}

.benefits ul {
    list-style: none;
    text-align: left;
    padding-left: 0;
}

.benefits ul li {
    padding-bottom: 5px;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    background: var(--footer-bg, #2d3748);
    color: var(--footer-color, #cbd5e0);
    border-top: none;
}

.site-footer h5 {
    color: var(--footer-heading-color, #f7fafc);
    font-size: 95%;
    letter-spacing: .05em;
}

.site-footer a {
    color: var(--footer-link-color, #a0aec0);
    text-decoration: none;
    transition: color .15s ease;
}

.site-footer a:hover {
    color: var(--footer-link-hover, #f7fafc);
    text-decoration: underline !important;
}

.site-footer .text-dark {
    color: var(--footer-color, #cbd5e0) !important;
}

.site-footer .border-top {
    border-color: var(--footer-border, #4a5568) !important;
}

.site-footer .bg-light {
    background: transparent !important;
}

.fb a {
    color: #ffffff;
    font-weight: bold;
    background: #0866ff;
    padding: 12px 28px 12px 20px;
    /* border-radius: 0 50% 0 50%; */
    border-radius: 8px 24px 8px 24px;
}

.fb a img {
    width: 24px;
    position: relative;
    top: -4px;
    margin-right: 8px;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */

.breadcrumb {
    font-size: 80%;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.breadcrumb li {
    display: inline;
    margin: 0;
    padding: 0;
}

.breadcrumb li::before {
    display: none;
}

.breadcrumb li::after {
    content: "›";
    margin-left: 0.5rem;
    color: var(--hp-section-categories-desc);
}

.breadcrumb li:last-child::after {
    content: "";
}

.breadcrumb a {
    color: var(--hp-section-categories-desc);
}

.breadcrumb a:hover {
    text-decoration: none;
}

/* ============================================================
   RŮZNÉ POMŮCKY
   ============================================================ */

.ucet-wrap {
    max-width: 900px;
    margin: 0 auto;
}

.container.cart {
    max-width: 960px;
}

.container.cart .badge {
    font-size: 80%;
}

.badge {
    text-transform: uppercase;
}

.shadow-font {
    color: #595751;
}

.b-icon i {
    width: 50px;
}

.hover-shadow:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.transition {
    transition: all 0.3s ease;
}

/* ============================================================
   PICKER OVERLAY (PPL/Balíkovna)
   ============================================================ */

.picker-overlay {
    position: fixed;
    width: 80%;
    left: 10%;
    right: 10%;
    bottom: 80px;
    height: 80%;
    z-index: 9999;
    box-shadow: 0 5px 10px #aaa;
}

.picker-close {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.picker-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ============================================================
   MOBILNÍ FIXNÍ MENU
   ============================================================ */

.fixed-menu {
    display: none;
    padding: 8px 10px !important;
}

.fixed-menu li {
    padding: 0px !important;
}

.fixed-menu a {
    text-align: center;
    color: var(--mini-menu-color, #3d5353);
}

.fixed-menu a div {
    font-size: 80%;
}

.fixed-menu i {
    align-items: center;
    justify-content: center;
}

.fixed-menu .dropdown-toggle::after {
    display: none !important;
}

.fixed-menu .dropdown-toggle {
    border: 0;
    background: none;
}

.fixed-menu .dropdown-menu.show {
    position: absolute;
    inset: auto auto 0px 0px;
    margin: 0px;
    padding-top: 0;
    transform: translate3d(0, -69px, 0px);
    width: 100%;
    border: none;
    border-top: 1px solid #d4cece;
}

.fixed-menu .dropdown-menu.show .dropdown-item a {
    border-bottom: 1px solid rgb(225, 225, 225);
    padding: 10px 0;
}

@media (max-width: 768px) {
    .fixed-down {
        z-index: 9999999;
        position: fixed;
        bottom: 83px;
        /*border-radius: 8px;*/
        right: 20px;
        left: 20px;
        background: #f8faf7;
        padding: 12px 0px;
        border: 1px solid #e2eade;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    }

    .fixed-down .text-price {
        position: absolute;
        top: -10px;
    }

    .fixed-down .extra-price + .price-info {
        top: -5px !important;
    }

    .fixed-down .big-price {
        font-size: 150%;
    }

    .fixed-down .double-price {
        font-size: 90%;
    }

    .fixed-down .btn.btn-add-cart {
        margin-bottom: 0;
    }

    .fixed-menu {
        display: block !important;
        z-index: 9999999;
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        background: white;
        padding: 16px 28px 0;
        box-shadow: 0 0 10px #d4cece;
    }
}

/* ============================================================
   CART ALERT CONTAINER
   ============================================================ */

.cart-alert-container {
    width: 100%;
}

.box-cart-alert {
    top: 10%;
}

@media (max-width: 991px) {
    .box-cart-alert {
        top: auto;
        bottom: 0;
    }
}

/* ============================================================
   SMALL PRODUCTS (mobil 2-sloupcový layout)
   ============================================================ */

@media (min-width: 380px) and (max-width: 575px) {
    .small-products > div.col-12 {
        width: 50%;
    }

    .small-products .stock-and-price {
        font-size: 77%;
    }

    .small-products .card-body {
        padding: 10px;
    }

    .label-available_at {
        display: none;
    }

    .small-products .badges-group .badge {
        font-size: 66%;
    }

    .small-products .card-product h5 a {
        font-size: 66%;
    }
}

.small-products .card-img {
    width: 100%;
    height: 150px;
}

.small-products .card-img .card-img-top {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

.small-products .card-footer a {
    font-size: 80%;
    margin: 0 auto;
}

.small-products .card-footer a.with-cart {
    display: none;
}

.small-products .card-footer button {
    font-size: 80%;
    margin: 0 auto;
}

/* ============================================================
   KATEGORIE — FILTR ZÁLOŽKY
   ============================================================ */

.tabs-filter .nav-tabs {
    border: none !important;
}

.tabs-filter .nav-item {
    width: 100%;
    text-align: center;
}

.card-filter {
    border-color: #e3e3e3;
}

.tabs-filter .nav-link {
    padding: 5px;
}

.tabs-filter .nav-link.active {
    border: 1px solid #dee2e6 !important;
    border-radius: 6px;
}

/* ============================================================
   KATEGORIE — SEZNAM TLAČÍTEK (stránka kategorie)
   ============================================================ */

.categories-list a.btn {
    width: calc(20% - 8px);
    background: var(--clr-link, #3a6dbc);
    color: #fff;
    border: none;
    padding: 12px 20px;
    font-size: 90%;
    margin-left: 10px !important;
}

.categories-list a.btn.active {
    background: var(--clr-link-hover, #3482f9);
    color: #fff;
    border: none;
}

.categories-list a.btn:hover {
    background: var(--clr-link-hover, #234a86);
}

.categories-list p {
    font-size: 80%;
}

@media (max-width: 767px) {
    .categories-list a.btn {
        padding: 10px 15px;
        font-size: 90%;
        width: calc(33.333% - 8px);
        margin-left: 10px !important;
    }

    .categories-list a:nth-child(3n + 1) {
        margin-left: 0 !important;
    }
}

@media (max-width: 600px) {
    .categories-list a.btn {
        padding: 10px 15px;
        font-size: 90%;
        width: calc(50% - 8px);
        margin-left: 10px !important;
    }

    .categories-list a:nth-child(odd) {
        margin-left: 0px !important;
    }
}

@media (min-width: 768px) {
    .categories-list a:nth-child(5n + 1) {
        margin-left: 0 !important;
    }
}

.categories-list a:first-child {
    margin-left: 0px !important;
}

/* ============================================================
   GLIDE KARUSEL / BANNERY
   ============================================================ */

.glide__arrow {
    color: var(--clr-accent, #ffc107);
    padding: 9px 12px;
    background-color: transparent;
    opacity: .5;
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    text-shadow: none;
}

.carousel-inner {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.carousel-indicators {
    bottom: -40px;
}

.carousel-inner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: none !important;
    pointer-events: none;
}

.banner-top-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 90%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    pointer-events: none;
    text-align: center;
    color: white;
    border-radius: 10px;
}

.banner-top-text {
    position: absolute;
    bottom: .1rem;
    left: 15%;
    right: 15%;
    text-align: center;
    color: white;
}

.small-banner {
    font-size: 70%;
}

.small-banner h5 {
    font-size: 120%;
}

.carousel-dark .carousel-caption {
    color: #fff;
    z-index: 999;
    bottom: .1rem;
}

.carousel-item {
    max-height: 300px;
}

@media (max-width: 767px) {
    .banner-top-content {
        height: 80%;
    }

    .banner-top-text {
        bottom: .25rem;
    }

    .big-banner,
    .small-banner {
        font-size: 70%;
    }

    .big-banner h5,
    .small-banner h5 {
        font-size: 150%;
    }

    .carousel-inner::after {
        height: 80%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    }

    .carousel-dark .carousel-caption {
        bottom: .25rem;
    }

    .d-md-block {
        display: block !important;
        margin: 0;
        font-size: 80%;
        padding: 0;
    }

    .list-group {
        position: static;
        top: 0;
    }

    .list-scroll-content {
        height: 300px;
    }

    .product-subtotal {
        width: 100%;
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid #dadada;
    }

    .cookie-banner {
        bottom: 75px;
    }
}

/* ============================================================
   RŮZNÉ KOMPONENTY
   ============================================================ */

.icon-li-list {
    padding-left: 26px;
    line-height: 150%;
    margin-bottom: 0;
}

.icon-li-list + .icon-li-list {
    margin-top: 10px;
}

.icon-li-list i {
    width: 26px;
    position: relative;
    margin-left: -26px;
}

.icon-li-list hr {
    margin-bottom: 5px;
}

.list-group-flush i {
    width: 26px;
    position: relative;
    color: #1a8755;
}

.list-group-flush i.fa-circle-info {
    width: auto;
    color: #979797;
    font-size: 80%;
    top: -1px;
    right: -4px;
    margin-left: 4px;
}

.description-box {
    position: relative;
}

.description-content {
    max-height: 60px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

.description-box.expanded .description-content {
    max-height: 2000px;
    -webkit-mask-image: none;
    mask-image: none;
}

.toggle-text {
    display: inline-block;
    margin-top: 8px;
    color: #212529bf;
    cursor: pointer;
    font-size: 90%;
}

.prop-product-body .card {
    background: none !important;
    border: none;
    border-top: 4px solid #e6e1cc;
}

.prop-product-body .img-prop img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 5px;
}

.prop-product-body .img-prop {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100px;
    overflow: hidden;
    border-radius: 8px;
}

.prop-product-body-top .img-prop {
    height: 250px;
}

@media (max-width: 768px) {
    .prop-product-body .card-body {
        padding: 10px;
    }

    .prop-product-body h5 {
        font-size: 80%;
    }

    .prop-product-body .img-prop {
        height: 75px;
    }

    .prop-product-body-top .img-prop {
        height: 250px;
    }

    .card-product .card-title {
        margin-bottom: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAIL — benefits bar
   ═══════════════════════════════════════════════════════════════ */

.pd-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    margin-top: 16px;
    padding: 0 20px;
}

.pd-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
}

.pd-benefit-icon-wrap {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 8px;
    flex-shrink: 0;
    font-size: .95rem;
    color: #8BC34A;
}

.pd-benefit-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.pd-benefit-title {
    font-size: .8rem;
    font-weight: 700;
    color: #1a1a1a;
}

.pd-benefit-sub {
    font-size: .71rem;
    color: #465b3d;
}

.pd-benefit--link {
    text-decoration: none;
    color: inherit;
}
.pd-benefit--link:hover .pd-benefit-title {
    text-decoration: underline;
}

@media (min-width: 1400px) {
    .pd-benefits { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 991px) {
    .pd-benefits { grid-template-columns: 1fr; padding: 0; }
    .pd-benefit  { padding: 6px 0; }
}

@media (max-width: 767px) {
    .pd-benefits { grid-template-columns: 1fr 1fr; padding: 0; }
    .pd-benefit  { padding: 6px 0; }
}

@media (max-width: 380px) {
    .pd-benefits { grid-template-columns: 1fr; padding: 0; }
    .pd-benefit  { padding: 6px 0; }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAIL — "Kupte společně" sada carousel
   ═══════════════════════════════════════════════════════════════ */

.pd-sada-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}

.pd-sada-glide { position: relative; }

.pd-sada-glide .glide__slides { align-items: stretch; }
.pd-sada-glide .glide__slide  { display: flex; height: auto; }

.pd-sada-glide .glide__arrow {
    color: #aaa;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    opacity: .5;
    top: 50%;
    transform: translateY(-50%);
    transition: border-color .15s, color .15s, opacity .15s;
}
.pd-sada-glide .glide__arrow:hover { color: #555; border-color: #bbb; opacity: 1; }
.pd-sada-glide .glide__arrow--left  { left: -7px; }
.pd-sada-glide .glide__arrow--right { right: -7px; }

.pd-sada-item {
    display: flex;
    flex-direction: row;
    border: 1px solid var(--card-border, #e5e5e5);
    border-radius: 8px;
    background: #fff;
    width: 100%;
    padding: 10px;
    overflow: hidden;
}

.pd-sada-img {
    display: block;
    width: 72px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.pd-sada-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .2s;
}

.pd-sada-img:hover img { transform: scale(1.04); }

.pd-sada-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding-left: 10px;
}

.pd-sada-name {
    font-size: .72rem;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.pd-sada-name:hover { text-decoration: underline; }

.pd-sada-price {
    font-size: .78rem;
    margin-bottom: 4px;
    color: var(--clr-price, rgb(189, 38, 38));
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAIL — klíčové vlastnosti (specs panel)
   ═══════════════════════════════════════════════════════════════ */

.pd-specs {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2eade;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

@media (max-width: 767px) {
    .pd-specs { margin-bottom: 20px; }
}

.pd-specs-header {
    background: #f8faf7;
    border-bottom: 1px solid #e2eade;
    color: #2a4a25;
    padding: 10px 14px;
    font-size: .73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.pd-spec-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid #f0f3f1;
    transition: background .12s;
}

.pd-specs > *:last-child { border-bottom: none; }
.pd-spec-row:hover { background: #f7faf6; }

.pd-spec-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #eef6ec;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5a9e52;
    font-size: .78rem;
    flex-shrink: 0;
}

.pd-spec-name {
    font-size: .77rem;
    color: #6b7280;
    flex: 1;
    min-width: 0;
}

.pd-spec-value {
    font-size: .8rem;
    font-weight: 700;
    color: #1a1a1a;
    text-align: right;
    white-space: nowrap;
}

.pd-spec-info-btn {
    color: #c5cfd9;
    cursor: pointer;
    font-size: .7rem;
    margin-left: 5px;
    vertical-align: middle;
    transition: color .15s;
}
.pd-spec-info-btn:hover { color: #7aad72; }

.pd-spec-detail {
    padding: 8px 14px 10px 52px;
    font-size: .75rem;
    color: #555;
    background: #f7faf6;
    border-bottom: 1px solid #f0f3f1;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAIL — property tile grid (loga/obrázky vlastností)
   ═══════════════════════════════════════════════════════════════ */

.pd-prop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}

.pd-prop-tile {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5ebe3;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .15s, transform .15s;
}

.pd-prop-tile:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.09);
    transform: translateY(-2px);
}

.pd-prop-tile-img {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: #fff;
}

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

.pd-prop-tile-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 10px 10px;
    border-top: 1px solid #c8dfc4;
    background: #e8f4e5;
    text-align: center;
    line-height: 1.25;
}

.pd-prop-tile-label {
    font-size: .68rem;
    color: #4a7044;
}

.pd-prop-tile-value {
    font-size: .82rem;
    font-weight: 700;
    color: #1a3a16;
    margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAIL — TOP karty grid
   ═══════════════════════════════════════════════════════════════ */

.pd-tops-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 575px) {
    .pd-tops-grid { grid-template-columns: repeat(2, 1fr); }
}

.pd-top-card {
    background: #fff;
    border: 1px solid #e5ebe3;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    transition: box-shadow .15s, transform .15s;
}

.pd-top-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.1);
    transform: translateY(-2px);
}

.pd-top-card-img {
    width: 100%;
    margin: 16px 0;
    padding: 0 16px;
}

.pd-top-card-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

.pd-top-card-footer {
    background: #e8f4e5;
    border-top: 1px solid #c8dfc4;
    padding: 8px 10px 10px;
}

.pd-top-card-name {
    font-size: .76rem;
    font-weight: 600;
    color: #1a3a16;
    line-height: 1.3;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pd-top-card-price {
    font-size: .72rem;
    color: #3a7a34;
    font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────── */

.small-desc {
    margin-bottom: 15px;
    font-size: 90%;
}

.small-desc a {
    color: rgb(116, 116, 116);
    font-size: 80%;
}

.list-scroll-content {
    position: relative;
    height: 450px;
    overflow: auto;
}

.list-navbar {
    border-radius: 8px;
}

.card-messages .message-admin {
    background: var(--clr-accent, #fce461);
}

.card-messages .message-admin a {
    color: #101010;
}


.card-messages .type-rating .message-block {
    border: 1px solid var(--clr-accent, #fce461);
    background-color: #fff6c7 !important;
    color: #524a1f !important;
    width: 100% !important;
    max-width: 100% !important;
}

.rating input[type="radio"] {
    display: none;
}

.rating label {
    font-size: 1.8rem;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0 3px;
}

.rating input[type="radio"]:checked ~ label i {
    color: #ffc107;
}

.rating label:hover,
.rating label:hover ~ label {
    color: #ffca2c;
}

.variant-stamp {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border: 2px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

/* ============================================================
   MINI PRODUKTOVÁ KARTA (podobné produkty)
   ============================================================ */

.card-product-mini {
    border: 1px solid var(--card-border, #e5e5e5);
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.card-product-mini:hover {
    box-shadow: 0 2px 8px var(--card-hover-shadow, rgba(0,0,0,0.12));
}

.card-img-mini img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    padding: 15px;
}

.card-body-mini {
    padding: 6px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100% !important;
}

.card-title-mini {
    display: -webkit-box;
    font-size: 75%;
    line-height: 1.3;
    color: #373737;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-title-mini:hover {
    text-decoration: underline !important;
}

.card-price-mini {
    font-size: 80%;
    line-height: 1.2;
}

.card-price-mini .extra-price {
    flex-wrap: wrap;
    gap: 4px;
}

.card-price-mini .old-price {
    font-size: 85%;
}

.btn-xs {
    font-size: 72%;
    padding: 3px 6px;
    line-height: 1.4;
}

/* ============================================================
   BOX-BG (starý helper — zachován pro zpětnou kompatibilitu)
   ============================================================ */

.box-bg {
    background: var(--clr-surface, #f4f8e8);
    border: 1px solid var(--clr-surface-border, #ddedb0);
}

@media (max-width: 574px) {
    .box-bg {
        margin: 0 -25px;
        border-radius: 0;
    }
}

/* ============================================================
   NAVBAR2 (starý helper)
   ============================================================ */

.navbar2 {
    justify-content: start;
    margin: 0;
    padding: 4px;
    background: #e3eeff !important;
    border-radius: 8px;
}

@media (max-width: 600px) {
    .navbar2 .nav-link {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid var(--navbar-bottom-border, #c2daed);
    }
}

/* ============================================================
   CHECKOUT V2 — 2-krokový A/B test
   ============================================================ */

/* Minimální hlavička (krok 2) */
.cv2-header {
    background: var(--navbar-bg, #f3f0ff);
    border-bottom: 1px solid var(--navbar-border, #e8eef5);
    padding: 12px 0;
}
.cv2-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cv2-logo img {
    height: 36px;
    width: auto;
}
.cv2-secure {
    font-size: .85rem;
    color: #5a5a5a;
}

/* Indikátor kroků */
.cv2-steps {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 10px 0 4px;
}
.cv2-steps-bar {
    background: var(--hp-section-categories-bg, #f3f0ff);
    border-bottom: 1px solid var(--hp-section-categories-border, #d9d0ff);
    padding: 10px 0;
}
.cv2-step {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.cv2-step-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}
.cv2-step-num {
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 700;
    text-align: center;
    display: inline-block;
}
.cv2-step--active .cv2-step-num  { background: var(--clr-brand, #cf7fed); color: #fff; }
.cv2-step--done .cv2-step-num    { background: #6db33f; color: #fff; }
.cv2-step--pending .cv2-step-num { background: #dee2e6; color: #6c757d; }
.cv2-step-label {
    font-size: .88rem;
    color: #555;
}
.cv2-step-line {
    flex: 1;
    height: 3px;
    background: #dee2e6;
    margin: 0 10px;
    min-width: 24px;
}
.cv2-step-line--done { background: #6db33f; }

/* Layout */
.cv2-body {
    padding: 24px 0 48px;
    min-height: calc(100vh - 100px);
    background: #f7f7f7;
}
.cv2-layout {
    align-items: stretch; /* pravý sloupec dostane výšku levého → sticky má prostor */
}

/* Sekce formuláře */
.cv2-section {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 20px 22px;
    margin-bottom: 16px;
}
.cv2-section-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2d2d2d;
}
.cv2-section-num {
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 50%;
    background: var(--clr-brand, #cf7fed);
    color: #fff;
    font-size: .8rem;
    text-align: center;
    flex-shrink: 0;
}

/* Přehled objednávky */
.cv2-section--summary {
    background: #fff;
}
.cv2-order-items {
    margin-bottom: 8px;
}
.cv2-order-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}
.cv2-order-item:last-child {
    border-bottom: none;
}
.cv2-thumb {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
    background: #fafafa;
}
.cv2-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #ccc;
    background: #f5f5f5;
}
.cv2-order-item-info {
    flex: 1;
    min-width: 0;
}
.cv2-order-item-name {
    font-size: .87rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv2-order-item-qty {
    font-size: .78rem;
}
.cv2-order-item-price {
    font-size: .9rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.cv2-totals {
    margin-top: 6px;
}
.cv2-total-row {
    display: flex;
    justify-content: space-between;
    font-size: .88rem;
    padding: 2px 0;
}
.cv2-total-final {
    font-size: 1.05rem;
    font-weight: 700;
    padding-top: 6px;
    border-top: 1px solid #eee;
    margin-top: 4px;
    color: #222;
}

/* Edit cart link */
.cv2-edit-cart {
    font-size: .9rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--clr-link, #5b7fc4);
    text-decoration: underline;
}

@media (max-width: 992px) {

    .cv2-summary-col {
        margin-top: 0 !important;
    }
}

/* Sticky summary na desktopu */
@media (min-width: 992px) {
    .cv2-summary-sticky {
        position: sticky;
        top: 24px;
    }
}

/* Sekce submit */
.cv2-section--submit {
    background: #fff;
}

/* Submit box — výchozí stav (šedý) a připravený stav (zelený) */
.cv2-submit-box {
    border: 1px dashed #bbb;
    border-radius: 6px;
    padding: 14px;
    background: #f9f9f9;
    transition: border-color .3s, background .3s;
}
.cv2-submit-box--ready {
    border-color: #80b761;
    background: #fbffee;
}

/* ── Výdejní místo — pickup block ─────────────────────────── */
.cv2-pickup-heading {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #888;
    margin-bottom: 8px;
}
.cv2-pickup-heading i { color: var(--clr-primary, #6c3fc5); }

.cv2-pickup-choose-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: 1.5px dashed #bbb;
    border-radius: 6px;
    color: var(--clr-primary, #6c3fc5);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.cv2-pickup-choose-btn:hover {
    border-color: var(--clr-primary, #6c3fc5);
    background: #faf8ff;
}

.cv2-pickup-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #f0fce8;
    border: 1px solid #80b761;
    border-radius: 6px;
}
.cv2-pickup-pin {
    color: #4a8d28;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.cv2-pickup-addr {
    flex: 1;
    font-size: .9rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
}
.cv2-pickup-edit {
    background: none;
    border: none;
    padding: 0;
    font-size: .8rem;
    color: var(--clr-primary, #6c3fc5);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: underline;
    flex-shrink: 0;
}
.cv2-pickup-edit:hover { opacity: .75; }

/* Shipping option — větší klikatelná plocha */
.cv2-shipping-opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    margin-bottom: 8px !important;
}
.cv2-shipping-opt .form-check-input {
    flex-shrink: 0;
    margin-top: 3px; /* zarovnání s první řádkou textu */
    margin-left: 0;
}
.cv2-shipping-opt .form-check-label {
    cursor: pointer;
    line-height: 1.4;
}
.cv2-shipping-opt:hover {
    border-color: #d0d0d0;
    background: #fafafa;
}
.cv2-shipping-opt:has(input:checked) {
    border-color: var(--clr-brand, #cf7fed);
    background: rgba(207,127,237,.06);
}

/* ── Řádek produktu ─────────────────────────────────────────── */
.cv2-cart-item {
    display: grid;
    grid-template-columns: 68px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #efefef;
}
.cv2-cart-item:first-of-type { border-top: 1px solid #efefef; }

/* Obrázek */
.cv2-cart-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    background: none;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
}
.cv2-cart-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.cv2-cart-img-empty {
    font-size: 1.6rem;
    color: #ccc;
}

/* Info */
.cv2-cart-info {
    min-width: 0;
}
.cv2-cart-name {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.3;
    margin-bottom: 4px;
}
.cv2-cart-name:hover { text-decoration: underline; }
.cv2-cart-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
}
.cv2-cart-limit { color: #f59e0b; font-style: italic; }

/* Kontrolky množství + cena + smazat */
.cv2-cart-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* +/- */
.cv2-qty {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.cv2-qty-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    font-size: 1rem;
    cursor: pointer;
    color: #555;
    line-height: 1;
    transition: background .1s;
}
.cv2-qty-btn:hover { background: #f3f0ff; }
.cv2-qty-input {
    width: 38px;
    height: 30px;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    font-size: .88rem;
    font-weight: 600;
    -moz-appearance: textfield;
    padding: 0;
    background: #fff;
}
.cv2-qty-input::-webkit-outer-spin-button,
.cv2-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cv2-qty-input:focus { outline: none; background: #fdfcff; }

/* Cena */
.cv2-cart-price {
    text-align: right;
    line-height: 1.2;
}
.cv2-cart-subtotal {
    display: block;
    font-weight: 700;
    font-size: .95rem;
    color: #1a1a1a;
}
.cv2-cart-unit {
    font-size: .75rem;
    color: #999;
}

/* Smazat */
.cv2-cart-remove {
    background: none;
    border: none;
    color: #bbb;
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 4px;
    transition: color .15s;
    line-height: 1;
}
.cv2-cart-remove:hover { color: #e05252; }

/* ── Summary box ───────────────────────────────────────────── */
.cv2-cart-summary {
    margin-top: 8px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
}
.cv2-cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: .9rem;
}
.cv2-cart-shipping {
    color: #666;
    font-size: .85rem;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8e4f5;
    margin-bottom: 6px;
}
.cv2-cart-total {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
}
.cv2-cart-cta {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 12px 20px;
    background: var(--btn-primary-bg, #6db33f);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    transition: background .15s, transform .1s;
}
.cv2-cart-cta:hover {
    background: var(--btn-primary-hover, #559030);
    color: #fff;
    transform: translateY(-1px);
}

/* Mobil */
@media (max-width: 575px) {
    .cv2-cart-item {
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto;
    }
    .cv2-cart-controls {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 4px;
    }
    .cv2-cart-price { text-align: left; }
}

/* ============================================================
   Admin bar — zobrazena pouze přihlášeným adminům na frontendu
   ============================================================ */
.admin-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: #1a1a2e;
    color: #c8c8d8;
    z-index: 10000;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 4px;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
}

.admin-bar-brand {
    color: #f0a500;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .03em;
    padding: 0 8px 0 0;
    white-space: nowrap;
}
.admin-bar-brand:hover { color: #ffc845; }

.admin-bar-sep {
    width: 1px;
    height: 18px;
    background: #3a3a5c;
    margin: 0 8px;
    flex-shrink: 0;
}

.admin-bar-link {
    color: #c8c8d8;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.admin-bar-link:hover {
    background: #2e2e50;
    color: #fff;
}

.admin-bar-spacer { flex: 1; }

.admin-bar-user {
    color: #8888aa;
    padding: 0 10px;
    white-space: nowrap;
}

.admin-bar-logout {
    color: #e07070;
}
.admin-bar-logout:hover {
    background: #3a1a1a;
    color: #ff9090;
}

body.admin-bar-open {
    padding-top: 36px;
}

/* pagination **/
.pagination .page-link {
    border-radius: 12px !important;
    width: auto;
    height: 40px;
    text-align: center;
    line-height: 28px;
    margin: 0 6px;
    color: #873ea3;
}

.pagination .disabled .page-link {
    color: #c5c5c5;
}

.pagination-next-button {
    padding: 6px 40px;
    background: var(--clr-brand, #cf7fed);
    border-color: var(--clr-brand, #cf7fed);
}

.pagination-next-button:hover {
    background: #9c58b5;
    border-color: #9c58b5;
}

.active>.page-link, .page-link.active {
    color: #fff;
    background: var(--clr-brand, #cf7fed);
    border-color: var(--clr-brand, #cf7fed);
}

/* ============================================================
   PRŮVODCE VÝBĚREM (/pruvodce)
   ============================================================ */

.guide-page { margin: 0 auto; }

.guide-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 3rem 0 4rem;
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.guide-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(255,193,7,.08) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(220,53,69,.06) 0%, transparent 40%);
  pointer-events: none;
}
.guide-hero .breadcrumb li { color: #fff; }
.guide-hero .breadcrumb a  { color: #fff; }

/* Intro */
.guide-intro__badge {
  display: none;
  background: rgba(255,193,7,.15);
  color: #ffc107;
  border: 1px solid rgba(255,193,7,.3);
  padding: .25rem .75rem;
  border-radius: 2rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.guide-intro__title {
    color: #fff;
    margin-bottom: .75rem;
    line-height: 1.1;
    font-weight: 600;
    font-size: 32px;
}
.guide-intro__sub {
    color: rgb(143 152 253);
    line-height: 1.35;
    font-size: 21px;
}

/* Karta průvodce */
.guide-card {
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
}

/* Progress */
.guide-progress {
  padding: 1rem 1.5rem .5rem;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.guide-progress__bar {
  flex: 1;
  height: 4px;
  background: #e9ecef;
  border-radius: 2px;
  overflow: hidden;
}
.guide-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, #ffc107, #fd7e14);
  border-radius: 2px;
  transition: width .4s ease;
  width: 0%;
}
.guide-progress__label {
  font-size: .75rem;
  color: #6c757d;
  white-space: nowrap;
}

/* Breadcrumb cesta */
.guide-path {
  padding: .5rem 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-height: 0;
}
.guide-path:empty { padding: 0; }
.guide-path__crumb {
  font-size: .7rem;
  color: #6c757d;
  background: #f8f9fa;
  border-radius: 1rem;
  padding: .2rem .6rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.guide-path__crumb i { font-size: .6rem; opacity: .5; }

/* Tělo */
.guide-body {
  padding: 2rem 1.5rem;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.guide-body > * { animation: guideSlideIn .25s ease both; }
@keyframes guideSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Loading */
.guide-loading {
  text-align: center;
  color: #6c757d;
}
.guide-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid #f0f0f0;
  border-top-color: #ffc107;
  border-radius: 50%;
  animation: guideSpin .7s linear infinite;
  margin: 0 auto 1rem;
}
.guide-spinner--sm {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 2px;
  margin: .5rem auto;
}
@keyframes guideSpin { to { transform: rotate(360deg); } }

/* Otázka */
.guide-question {
  font-family: 'Oswald', sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: #1a1a2e;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

/* Tlačítka možností */
.guide-options {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.guide-option {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: .75rem;
  padding: .9rem 1.1rem;
  cursor: pointer;
  transition: all .18s ease;
  text-align: left;
  font-size: .95rem;
  color: #212529;
  font-weight: 500;
  width: 100%;
}
.guide-option:hover {
  border-color: #ffc107;
  background: #fffbf0;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,193,7,.15);
}
.guide-option:active { transform: translateY(0); }
.guide-option--selected { border-color: #ffc107; background: #fff9e6; }
.guide-option__icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
}
.guide-option__arrow {
  margin-left: auto;
  color: #adb5bd;
  font-size: .8rem;
  transition: transform .18s;
}
.guide-option:hover .guide-option__arrow { transform: translateX(3px); color: #fd7e14; }

/* Výsledkový blok */
.guide-result__header {
  text-align: center;
  margin-bottom: 1.75rem;
}
.guide-result__icon  { font-size: 2.5rem; margin-bottom: .5rem; }
.guide-result__title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem;
  color: #1a1a2e;
  margin-bottom: .4rem;
}
.guide-result__subtitle { color: #6c757d; font-size: .9rem; }

.guide-results-list { display: flex; flex-direction: column; gap: 1.5rem; }

.guide-result-block { display: flex; flex-direction: column; gap: .5rem; }

.guide-result-block__header { display: flex; flex-direction: column; gap: .25rem; }
.guide-result-block__badge {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fd7e14;
}
.guide-result-block__label {
  font-size: .88rem;
  color: #495057;
  line-height: 1.5;
  margin: 0;
}

/* Produktové karty */
.guide-products { display: flex; flex-direction: column; gap: .5rem; }
.guide-products--loading { align-items: center; }

.guide-product {
  display: flex;
  align-items: center;
  gap: .85rem;
  border: 1px solid #e9ecef;
  border-radius: .75rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s, border-color .18s;
  background: #fff;
}
.guide-product:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  border-color: #ffc107;
}
.guide-product--link {
  padding: .75rem 1rem;
  font-weight: 500;
  font-size: .9rem;
  justify-content: space-between;
  color: #1a1a2e;
}
.guide-product__img-wrap {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  overflow: hidden;
  background: #f8f9fa;
}
.guide-product__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.guide-product__body {
  flex: 1;
  padding: .5rem 0;
  min-width: 0;
}
.guide-product__name {
  font-size: .875rem;
  font-weight: 500;
  color: #1a1a2e;
  margin: 0 0 .25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guide-product__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.guide-product__price {
  font-weight: 700;
  font-size: .875rem;
  color: #1a1a2e;
}
.guide-product__stock {
  font-size: .72rem;
  font-weight: 600;
  border-radius: 1rem;
  padding: .15rem .5rem;
}
.guide-product__stock--yes { background: #d1fae5; color: #065f46; }
.guide-product__stock--no  { background: #fee2e2; color: #991b1b; }
.guide-product__arrow {
  color: #adb5bd;
  font-size: .8rem;
  flex-shrink: 0;
  margin-right: .85rem;
  transition: transform .18s;
}
.guide-product:hover .guide-product__arrow { transform: translateX(3px); color: #fd7e14; }

.guide-product__cart-btn {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: .5rem;
  background: var(--btn-primary-bg, #98bc07);
  color: #fff;
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: .5rem;
  transition: background .15s, transform .15s;
}
.guide-product__cart-btn:hover {
  background: var(--btn-primary-border, #7a9a05);
  transform: scale(1.1);
}

.guide-no-results { font-size: .88rem; color: #6c757d; margin: 0; }

/* Odkaz na celou kategorii */
.guide-result__category-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem;
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: .75rem;
  color: #495057;
  text-decoration: none;
  font-size: .875rem;
  transition: all .18s;
}
.guide-result__category-link:hover {
  border-color: #ffc107;
  color: #1a1a2e;
  background: #fffbf0;
}

/* Footer průvodce */
.guide-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  gap: .5rem;
}
.guide-btn {
  border: none;
  border-radius: .5rem;
  padding: .5rem 1rem;
  font-size: .85rem;
  cursor: pointer;
  font-weight: 500;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.guide-btn--back    { background: #f8f9fa; color: #495057; }
.guide-btn--back:hover { background: #e9ecef; }
.guide-btn--restart { background: transparent; color: #6c757d; border: 1px solid #dee2e6; }
.guide-btn--restart:hover { color: #dc3545; border-color: #dc3545; }

/* Responzivita */
@media (max-width: 576px) {
  .guide-intro__title { font-size: 1.8rem; }
  .guide-body { padding: 1.5rem 1rem; }
  .guide-footer { padding: .75rem 1rem; }
  .guide-progress { padding: .75rem 1rem .4rem; }
  .guide-path { padding: .4rem 1rem 0; }
}


/* ── Průvodce: Doporučený balíček ─────────────────────────────────────── */
.guide-bundle {
  background: #f4f8f0;
  border-radius: .75rem;
  border-left: 4px solid var(--clr-link, #3B6D11);
  padding: 1rem 1.1rem;
}
.guide-bundle .guide-result-block__badge {
  font-size: .78rem;
  color: var(--clr-link, #3B6D11);
}
.guide-bundle--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}
.guide-bundle__items {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: .75rem 0;
}
.guide-bundle__item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .4rem .5rem;
  border-radius: .5rem;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.guide-bundle__item:hover { background: #f8f9fa; }
.guide-bundle__img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: .35rem;
  flex-shrink: 0;
  background: #f5f5f5;
}
.guide-bundle__item-name {
  flex: 1;
  font-size: .82rem;
  line-height: 1.3;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.guide-bundle__item-price {
  font-size: .82rem;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  flex-shrink: 0;
}
.guide-bundle__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .75rem;
  border-top: 1px solid #f0f0f0;
  flex-wrap: wrap;
}
.guide-bundle__total {
  font-size: .9rem;
  color: #555;
}
.guide-bundle__total strong {
  color: #1a1a1a;
  font-size: 1rem;
}
.guide-bundle__btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1rem;
  border: none;
  border-radius: .5rem;
  background: var(--btn-primary-bg, #98bc07);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.guide-bundle__btn:hover:not(:disabled) { background: var(--btn-primary-border, #7a9a05); }
.guide-bundle__btn:disabled { opacity: .5; cursor: not-allowed; }
.guide-bundle__progress {
  margin-top: .6rem;
  font-size: .82rem;
  color: #555;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.guide-bundle__progress a {
  color: var(--clr-link, #3B6D11);
  font-weight: 500;
}
.guide-bundle__progress .fa-check { color: #3B6D11; }
@media (max-width: 576px) {
  .guide-bundle__footer { flex-direction: column; align-items: flex-start; }
  .guide-bundle__btn { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------
   Product detail — varianty karty
------------------------------------------------------- */
.card-variants {
    border-top: 1px solid #dee2e6;
    padding-top: .75rem;
}
.card-variants-title {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    margin-top: .5rem;
    margin-bottom: .4rem;
}
.card-variant-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .3rem .4rem;
    border-radius: 5px;
    font-size: .875rem;
}
.card-variant-row + .card-variant-row {
    border-top: 1px solid #f0f0f0;
}
.card-variant-row--active {
    background: #f0f9f0;
    font-weight: 600;
}
.card-variant-name {
    flex: 1;
    min-width: 0;
}
.card-variant-price {
    white-space: nowrap;
    font-weight: 600;
    flex: 0 0 3rem;
    text-align: right;
}
.card-variant-stock {
    font-size: .78rem;
    flex: 0 0 5.5rem;
    text-align: left;
}
.card-variant-name--link {
    color: var(--clr-link);
    text-decoration: none;
}
.card-variant-name--link:hover {
    color: var(--clr-link-hover);
    text-decoration: underline;
}
.card-variant-cart-btn {
    flex-shrink: 0;
    background: none;
    border: 1px solid #ced4da;
    border-radius: 5px;
    color: #495057;
    padding: .2rem .45rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.card-variant-cart-btn:hover {
    background: #8BC34A;
    border-color: #8BC34A;
    color: #fff;
}
.card-variant-cart-placeholder {
    display: inline-block;
    width: 1.9rem;
}

.card-variants--set .card-variant-stock {
    flex: 0 0 7.5rem;
}
.card-variants--set .card-variant-row {
    padding-left: 0;
    padding-right: 0;
}
.text-pripravujeme { color: rgb(65 205 165); }

@media (max-width: 767px) {
    .card-variants--set .card-variant-row {
        flex-wrap: wrap;
        padding-left: 0;
        padding-right: 0;
        gap: .25rem .75rem;
    }
    .card-variants--set .card-variant-name {
        flex: 0 0 100%;
    }
    .card-variants--set .card-variant-price {
        flex: 0 0 auto;
        text-align: left;
    }
    .card-variants--set .card-variant-cart-btn,
    .card-variants--set .card-variant-cart-placeholder {
        margin-left: auto;
    }
}

/* gallery */
.gallery .gallery-desc {
    margin: 10px 15px 15px;
    color: #3b3252;
    font-size: 90%;
    font-style: italic;
}

/* ============================================================
   BANNERS GRID — HP bannery (banners_html.php)
   ============================================================ */

.banners-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 270px 270px;
    grid-auto-rows: 210px;
    gap: 10px;
}

/* Tile pozice */
.banners-tile--hero { grid-column: 1 / 3; grid-row: 1 / 3; }
.banners-tile--sm-1 { grid-column: 3;     grid-row: 1; }
.banners-tile--sm-2 { grid-column: 3;     grid-row: 2; }
.banners-tile--md-1 { grid-column: 1;     grid-row: 3; }
.banners-tile--md-2 { grid-column: 2 / 4; grid-row: 3; }

/* Tile base */
.banners-tile {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.banners-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay — gradient + flex layout (label nahoře, obsah dole) */
.banners-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem 1.2rem 1.3rem;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.28) 40%,
        rgba(0, 0, 0, 0.0)  70%
    );
}

/* Label — pevný obdélník top-left, brand barva */
.banners-label {
    align-self: flex-start;
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--clr-brand, #cf7fed);
    border-radius: 4px;
    padding: 0.25em 0.65em;
}

/* Spodní řada: nadpis vlevo, šipka vpravo */
.banners-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Nadpis */
.banners-title {
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    text-transform: none;
    color: #fff;
    line-height: 1.1;
    margin: 0;
    font-size: 1.5rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.banners-tile:hover .banners-title {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Šipka — animuje se na hover vpravo */
.banners-arrow {
    flex-shrink: 0;
    font-size: 1.5rem;
    color: #fff;
    line-height: 1;
    padding-bottom: 0.1em;
    transition: transform 0.25s ease;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}


.banners-tile:hover .banners-arrow {
    transform: translateX(5px);
}

/* Tablet (md) — 2 sloupce */
@media (max-width: 991px) {
    .banners-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 230px 200px;
        grid-auto-rows: 180px;
    }
    .banners-tile--hero { grid-column: 1 / 3; grid-row: 1; }
    .banners-tile--sm-1 { grid-column: 1;     grid-row: 2; }
    .banners-tile--sm-2 { grid-column: 2;     grid-row: 2; }
    .banners-tile--md-1 { grid-column: 1;     grid-row: 3; }
    .banners-tile--md-2 { grid-column: 2;     grid-row: 3; }
    .banners-title      { font-size: 1.3rem; }
}


/* ============================================================
   VIP věrnostní slevy
   ============================================================ */

/* Badge "-X Kč" ve výpisu produktů a košíku */
.vip-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    color: #7c4a00;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 1px 6px;
    margin-top: 2px;
}

/* VIP cena — zvýraznění */
.vip-price {
    color: #b8860b;
}

/* Přeškrtnutá původní cena vedle VIP ceny */
.vip-original-price {
    font-size: .8rem;
    color: #888;
    text-decoration: line-through;
}

/* Hint pro nepřihlášené uživatele */
.vip-hint {
    font-size: .78rem;
    margin-top: 3px;
}
.vip-hint-link {
    color: #7c4a00;
    text-decoration: none;
    opacity: .85;
}
.vip-hint-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Řádek VIP úspory v souhrnu košíku */
.vip-savings-row {
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
    color: #7c4a00;
    padding: 2px 0;
}
.vip-savings-amount {
    font-weight: 600;
}

/* VIP karta na stránce účtu */
.vip-card {
    border-color: #ffc107;
    background: linear-gradient(135deg, #fffdf0 0%, #fff8e1 100%);
}
.vip-card-body {
    padding: 1rem 1.25rem;
}
.vip-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #7c4a00;
    margin-bottom: .75rem;
}
.vip-card-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.vip-stat {
    display: flex;
    flex-direction: column;
}
.vip-stat-label {
    font-size: .75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vip-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
}
.vip-rate-highlight {
    color: #b8860b;
}
.vip-progress-wrap {
    margin-top: .5rem;
}
.vip-progress-bar {
    height: 6px;
    background: #f0e0a0;
    border-radius: 3px;
    overflow: hidden;
}
.vip-progress-fill {
    height: 100%;
    background: #ffc107;
    border-radius: 3px;
    transition: width .4s ease;
}
.vip-progress-label {
    font-size: .8rem;
    color: #666;
    margin-top: .35rem;
    margin-bottom: 0;
}
.vip-max-label {
    font-size: .85rem;
    color: #7c4a00;
    font-weight: 600;
}

/* VIP upozornění na expiraci obratu */
.vip-expiry-alert {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    background: #f0f8ff;
    border: 1px solid #b6d4f5;
    border-radius: .5rem;
    padding: .65rem .85rem;
    font-size: .85rem;
    color: #1a4a70;
    line-height: 1.45;
}
.vip-expiry-alert--warn {
    background: #fff8e1;
    border-color: #ffe082;
    color: #6b4c00;
}
.vip-expiry-icon {
    margin-top: .1rem;
    flex-shrink: 0;
    opacity: .7;
}
.vip-expiry-downgrade {
    color: #c0392b;
    font-weight: 600;
}

/* VIP sleva v cart item (checkout step1) */
.cv2-cart-vip-save {
    display: block;
    margin-top: 2px;
}

/* VIP hint pro nepřihlášené v košíku */
.cv2-vip-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(135deg, #fffdf0 0%, #fff8e1 100%);
    border: 1px solid #ffe082;
    border-left: 4px solid #f59e0b;
    border-radius: .5rem;
    padding: .85rem 1.1rem;
    color: #5a3e00;
}
.cv2-vip-hint-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1;
    min-width: 0;
}
.cv2-vip-hint-crown {
    color: #f59e0b;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.cv2-vip-hint-title {
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.4;
}
.cv2-vip-hint-amount {
    font-weight: 700;
    font-size: 1rem;
    color: #d97706;
    white-space: nowrap;
}
.cv2-vip-hint-sub {
    font-size: .8rem;
    color: #92651a;
    margin-top: .1rem;
}
.cv2-vip-hint-actions {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.cv2-vip-hint--active {
    background: linear-gradient(135deg, #f0faf4 0%, #e6f5ec 100%);
    border-color: #86efac;
    border-left-color: #22c55e;
    color: #14532d;
}
.cv2-vip-hint--active .cv2-vip-hint-crown {
    color: #16a34a;
}
.cv2-vip-hint--active .cv2-vip-hint-amount {
    color: #15803d;
}
.cv2-vip-hint--active .cv2-vip-hint-sub {
    color: #166534;
}
@media (max-width: 576px) {
    .cv2-vip-hint { flex-direction: column; align-items: flex-start; }
    .cv2-vip-hint-actions { width: 100%; }
    .cv2-vip-hint-actions .btn { flex: 1; text-align: center; }
}