/* BRILED features bundle (css) - generovano build-features-bundle.sh, needit rucne */

/* ===== kompletacni-box-v1.css ===== */
/* ==========================================================================
   BRILED – Kompletační box na detailu LED pásku (V1)
   Blok "Sestavte kompletní řešení" pod nákupním formulářem.
   ========================================================================== */

.kb-box {
    margin-top: 10px;
    font-family: "DM Sans", sans-serif;
    color: #1D1D1B;
}

/* Zarovnání s .add-to-cart: na mobilu má add-to-cart navíc vlastní
   padding-left/right: var(--buybox-mobile-inset) (04-product-gallery-fix V4.css),
   který kb-box jako sourozenec formuláře nezdědí – dorovnáno margin-em. */
@media (max-width: 767px) {
    .kb-box {
        margin-left: var(--buybox-mobile-inset, 12px);
        margin-right: var(--buybox-mobile-inset, 12px);
    }
}

/* Toggle = sekundární button, rozměrově shodný s "DO KOŠÍKU" nad ním */
.kb-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    padding: 0 12px;
    background: #fff;
    border: 2px solid #1D1D1B;
    border-radius: 6px;
    cursor: pointer;
    font-family: "Exo 2", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    color: #1D1D1B;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.kb-toggle:hover,
.kb-toggle:focus {
    background: #1D1D1B;
    color: #fff;
}

.kb-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 50%;
    background: #D61118;
    color: #fff;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.2s ease;
}

.kb-box.kb-open .kb-toggle-icon {
    transform: rotate(45deg);
}

.kb-toggle-chevron {
    display: none;
}

.kb-panel {
    margin-top: 8px;
    padding: 14px 16px 16px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
}

.kb-item {
    padding: 14px 0;
    border-top: 1px solid #eee;
}

.kb-item:first-of-type {
    border-top: none;
    padding-top: 0;
}

.kb-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
}

.kb-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    background: #1D1D1B;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.kb-badge {
    padding: 2px 8px;
    border-radius: 10px;
    background: #D61118;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kb-zdroj-note,
.kb-item-note {
    margin: 8px 0 10px;
    font-size: 13px;
    line-height: 1.45;
    color: #555;
}

.kb-zdroj-note strong {
    color: #1D1D1B;
}

.kb-zdroj-products {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kb-product {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    text-decoration: none;
    color: #1D1D1B;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kb-product:hover,
.kb-product:focus {
    border-color: #D61118;
    box-shadow: 0 2px 8px rgba(29, 29, 27, 0.08);
    text-decoration: none;
    color: #1D1D1B;
}

.kb-product-img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    object-fit: contain;
}

.kb-product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kb-product-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-product-meta {
    font-size: 12px;
    color: #777;
}

.kb-product-price {
    margin-left: auto;
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 14px;
    color: #D61118;
    white-space: nowrap;
}

.kb-sestava {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: #f7f7f7;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: #555;
}

.kb-sestava strong {
    color: #1D1D1B;
}

.kb-sestava-price {
    color: #D61118 !important;
    white-space: nowrap;
}

.kb-calc-link,
.kb-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #D61118;
    text-decoration: none;
}

.kb-calc-link::after,
.kb-link::after {
    content: " →";
}

.kb-calc-link:hover,
.kb-calc-link:focus,
.kb-link:hover,
.kb-link:focus {
    color: #1D1D1B;
    text-decoration: underline;
}

.kb-loading,
.kb-empty {
    margin: 0;
    font-size: 13px;
    color: #777;
}

.kb-empty a {
    color: #D61118;
    font-weight: 600;
}

@media (max-width: 767px) {
    .kb-panel {
        padding: 12px 14px 14px;
    }
}

/* ===== baleni-badge-v1.css ===== */
/* ==========================================================================
   BRILED – Badge výhodného balení na detailu produktu (V1)
   ========================================================================== */

.bb-badge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    background: #fdf1f1;
    border: 1px solid #f0c4c6;
    border-radius: 6px;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #1D1D1B;
}

.bb-tag {
    padding: 2px 8px;
    border-radius: 10px;
    background: #D61118;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.bb-text {
    flex: 1 1 auto;
    min-width: 140px;
}

.bb-savings {
    font-weight: 700;
    color: #D61118;
    white-space: nowrap;
}

.bb-take {
    flex: 0 0 auto;
    padding: 6px 14px;
    background: #1D1D1B;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 700;
    transition: background-color 0.15s ease;
}

.bb-take:hover,
.bb-take:focus {
    background: #D61118;
}

.bb-hidden-source {
    display: none;
}

/* ===== kosik-zdroj-reminder-v1.css ===== */
/* ==========================================================================
   BRILED – Připomínka zdroje v košíku (V1)
   ========================================================================== */

.kzr-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0;
    padding: 14px 16px;
    background: #fdf1f1;
    border: 1px solid #f0c4c6;
    border-radius: 10px;
    font-family: "DM Sans", sans-serif;
    color: #1D1D1B;
}

/* Varianta: konflikt napětí (silnější varování, jantarová) */
.kzr-notice.kzr-warn {
    background: #fff8e6;
    border-color: #f0d488;
}

.kzr-icon {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1.3;
}

.kzr-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.kzr-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.kzr-text {
    font-size: 13px;
    line-height: 1.45;
    color: #555;
}

.kzr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.kzr-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid #1D1D1B;
    background: #fff;
    color: #1D1D1B;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.kzr-btn:hover,
.kzr-btn:focus {
    background: #1D1D1B;
    color: #fff;
    text-decoration: none;
}

.kzr-btn-primary {
    background: #D61118;
    border-color: #D61118;
    color: #fff;
}

.kzr-btn-primary:hover,
.kzr-btn-primary:focus {
    background: #1D1D1B;
    border-color: #1D1D1B;
    color: #fff;
}

@media (max-width: 767px) {
    .kzr-notice {
        padding: 12px 14px;
    }

    .kzr-actions {
        width: 100%;
    }

    .kzr-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ===== produkt-faq-v1.css ===== */
/* ==========================================================================
   BRILED – FAQ na detailu LED pásku (V1)
   ========================================================================== */

.pfaq {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #e5e5e5;
    font-family: "DM Sans", sans-serif;
    color: #1D1D1B;
}

.pfaq-title {
    margin: 0 0 14px;
    font-family: "Bebas Neue", sans-serif;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: 0.5px;
    color: #1D1D1B;
}

.pfaq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pfaq-item {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
}

.pfaq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 13px 16px;
    background: #fff;
    border: none;
    cursor: pointer;
    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    color: #1D1D1B;
    transition: background-color 0.15s ease;
}

.pfaq-q:hover,
.pfaq-q:focus {
    background: #f7f7f7;
}

.pfaq-item.pfaq-open .pfaq-q {
    background: #f7f7f7;
}

.pfaq-chevron {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid #D61118;
    border-bottom: 2px solid #D61118;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.pfaq-item.pfaq-open .pfaq-chevron {
    transform: rotate(-135deg);
}

.pfaq-a {
    padding: 0 16px 14px;
    font-size: 14px;
    line-height: 1.55;
    color: #555;
}

.pfaq-a a {
    color: #D61118;
    font-weight: 600;
    text-decoration: none;
}

.pfaq-a a:hover,
.pfaq-a a:focus {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .pfaq-title {
        font-size: 21px;
    }

    .pfaq-q {
        font-size: 14px;
        padding: 12px 14px;
    }

    .pfaq-a {
        padding: 0 14px 12px;
    }
}

/* ===== search-whisperer-v1.css ===== */
/* ==========================================================================
   BRILED – Rychlé akce v našeptávači (V1)
   ========================================================================== */

.brw-actions {
    padding: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid #eee;
    font-family: "DM Sans", sans-serif;
}

.brw-actions-label {
    padding: 2px 6px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
}

.brw-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1D1D1B;
    text-decoration: none;
    transition: background-color 0.12s ease;
}

.brw-action:hover,
.brw-action:focus {
    background: #f2f2f2;
    color: #1D1D1B;
    text-decoration: none;
}

.brw-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    font-size: 13px;
    background: #f2f2f2;
    color: #1D1D1B;
}

.brw-calc .brw-ico {
    background: #D61118;
    color: #fff;
}

/* === Zkratky nad výsledky vyhledávání === */
.brw-results {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    font-family: "DM Sans", sans-serif;
}

.brw-results-label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #1D1D1B;
}

.brw-results-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.brw-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e5e5e5;
    font-size: 13px;
    font-weight: 600;
    color: #1D1D1B;
    text-decoration: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.brw-pill:hover,
.brw-pill:focus {
    border-color: #D61118;
    box-shadow: 0 2px 8px rgba(29, 29, 27, 0.08);
    color: #1D1D1B;
    text-decoration: none;
}

.brw-pill .brw-ico {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    font-size: 12px;
}

@media (max-width: 767px) {
    .brw-results-row {
        gap: 6px;
    }

    .brw-pill {
        padding: 7px 12px;
        font-size: 12px;
    }
}

/* ===== garance-kompatibilita-v1.css ===== */
/* ==========================================================================
   BRILED – Garance kontroly kompatibility na detailu (V1)
   ========================================================================== */

.gk-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px;
    padding: 14px 16px;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    font-family: "DM Sans", sans-serif;
    color: #1D1D1B;
}

.gk-icon {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1.3;
}

.gk-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.gk-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.gk-text {
    font-size: 13px;
    line-height: 1.45;
    color: #555;
}

.gk-tel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #D61118;
    text-decoration: none;
}

.gk-tel:hover,
.gk-tel:focus {
    color: #1D1D1B;
    text-decoration: none;
}

.gk-tel-ico {
    font-size: 14px;
}

@media (max-width: 767px) {
    .gk-box {
        padding: 12px 14px;
        /* Zarovnání s .add-to-cart: dorovnává mobilní inset, který gk-box
           jako sourozenec formuláře jinak nezdědí (viz kompletacni-box-v1.css). */
        margin-left: var(--buybox-mobile-inset, 12px);
        margin-right: var(--buybox-mobile-inset, 12px);
    }
}

/* ===== kategorie-poradce-v1.css ===== */
/* ==========================================================================
   BRILED – Poradenský prvek v horní části kategorie pásků (V1)
   ========================================================================== */

.kp-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px;
    padding: 14px 18px;
    background: #1D1D1B;
    border-radius: 12px;
    font-family: "DM Sans", sans-serif;
    color: #fff;
}

.kp-icon {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
}

.kp-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.kp-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.kp-text {
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.75);
}

.kp-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 8px;
    background: #D61118;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.kp-cta:hover,
.kp-cta:focus {
    background: #fff;
    color: #1D1D1B;
    text-decoration: none;
}

@media (max-width: 767px) {
    .kp-strip {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px;
    }

    .kp-body {
        flex: 1 1 100%;
        order: 2;
    }

    .kp-icon {
        order: 1;
    }

    .kp-cta {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}

/* ===== metraz-info-v1.css ===== */
/* ==========================================================================
   BRILED - Mikrotext k metrážním produktům (V1)
   Diskrétní vysvětlivka pod stepperem množství. Paleta značky: červený akcent,
   neutrální text. Čistý jemný box, ne "pěst na oko".
   ========================================================================== */
/* Sourozenec kb-box/gk-box (mimo .add-to-cart) - šířku dorovnává JS
   (kb-width-sync-v1.js) na tlačítko "Do košíku", stejně jako u těch boxů. */
.mi-note {
    box-sizing: border-box;
    margin: 12px 0 0;
    padding: 8px 12px;
    background: #f6f6f5;
    border-left: 3px solid #D61118;
    border-radius: 4px;
    font-family: 'DM Sans', 'Exo 2', sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    color: #3a3a38;
    text-align: left;
}

.mi-note .mi-text {
    display: block;
}

@media (max-width: 767px) {
    .mi-note {
        margin-left: var(--buybox-mobile-inset, 12px);
        margin-right: var(--buybox-mobile-inset, 12px);
    }
}

/* ===== product-cta-unify-v1.css ===== */
/* ==========================================================================
   BRILED – Sjednocení vizuálního systému CTA/stepperu/info boxů na detailu (V1)
   Sjednocuje: quantity stepper, hlavní CTA "Do košíku", "Sestavit kompletní
   řešení" (kb-toggle), poradenský box (gk-box) a info hlášku (mi-note).

   Načítá se AŽ PO VSE V93.css a feature souborech (kompletacni-box-v1,
   garance-kompatibilita-v1, metraz-info-v1) – doplňuje jen designové tokeny
   (barva/radius/focus), nemění strukturu ani funkčnost žádného prvku.
   ========================================================================== */

:root {
    --bru-radius: 8px;
    --bru-green: #2E7D32;
    --bru-green-dark: #24632a;
    --bru-green-darker: #1b4d20;
    --bru-grey-bg: #e9e9e7;
    --bru-grey-text: #8a8a88;
}

/* --- Hlavní CTA "Do košíku" na detailu: zelená jako primární akce --- */
.p-detail-inner .add-to-cart .add-to-cart-button {
    background-color: var(--bru-green) !important;
    border-color: var(--bru-green) !important;
    color: #fff !important;
    border-radius: var(--bru-radius);
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.p-detail-inner .add-to-cart .add-to-cart-button:hover,
.p-detail-inner .add-to-cart .add-to-cart-button:focus {
    background-color: var(--bru-green-dark) !important;
    border-color: var(--bru-green-dark) !important;
    color: #fff !important;
}

.p-detail-inner .add-to-cart .add-to-cart-button:active {
    background-color: var(--bru-green-darker) !important;
    border-color: var(--bru-green-darker) !important;
}

.p-detail-inner .add-to-cart .add-to-cart-button:focus-visible {
    outline: 2px solid var(--bru-green-darker);
    outline-offset: 3px;
}

.p-detail-inner .add-to-cart .add-to-cart-button:disabled,
.p-detail-inner .add-to-cart .add-to-cart-button[disabled] {
    background-color: var(--bru-grey-bg) !important;
    border-color: var(--bru-grey-bg) !important;
    color: var(--bru-grey-text) !important;
    cursor: not-allowed;
}

/* --- Sekundární CTA "Sestavit kompletní řešení": sjednocený radius s primární CTA,
       vizuálně jasně odlišené (bílá/obrys vs. zelená výplň) --- */
.kb-toggle {
    border-radius: var(--bru-radius);
}

.kb-toggle:focus-visible {
    outline: 2px solid #1D1D1B;
    outline-offset: 3px;
}

/* --- Poradenský box: sjednocený radius s CTA rodinou --- */
.gk-box {
    border-radius: var(--bru-radius);
}

.gk-tel:focus-visible {
    outline: 2px solid #D61118;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Oprava: na produkci text v .gk-text/.mi-text vychází modrý (silnější/pozdější
   pravidlo Shoptet motivu než plain barva v garance-kompatibilita-v1.css /
   metraz-info-v1.css) – dorovnáno na zamýšlenou neutrální barvu. */
.gk-text {
    color: #555 !important;
}

.mi-note .mi-text {
    color: #3a3a38 !important;
}

/* --- Množstevní stepper: sjednocený radius tlačítek + viditelný klávesový focus.
       Mobilní pravidlo v `VSE V93.css` (@max-width:480px) ruší :hover/:active/:focus
       outline záměrně kvůli dotyku – zde doplňujeme jen :focus-visible (klávesnice),
       které se při dotyku nespouští, takže se chování na mobilu nemění. --- */
.quantity .increase,
.quantity .decrease {
    border-radius: var(--bru-radius) !important;
}

.quantity .increase:focus-visible,
.quantity .decrease:focus-visible {
    outline: 2px solid var(--bru-green-dark);
    outline-offset: 2px;
}

/* ===== napeti-chips-v1.css ===== */
/* ==========================================================================
   BRILED - Rychlé chipy napětí nad výpisem kategorie pásků (V1)
   ========================================================================== */
.nch-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
}

.nch-label {
    font-family: "DM Sans", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #1D1D1B;
    margin-right: 2px;
}

.nch-chip {
    font-family: "DM Sans", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: #1D1D1B;
    background: #fff;
    border: 1.5px solid #1D1D1B;
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.nch-chip:hover {
    background: #1D1D1B;
    color: #fff;
}

.nch-chip--on,
.nch-chip[aria-pressed="true"] {
    background: #D61118;
    border-color: #D61118;
    color: #fff;
}

.nch-chip:focus-visible {
    outline: 2px solid #D61118;
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .nch-strip {
        margin-bottom: 12px;
        padding: 8px 10px;
    }
    .nch-chip {
        padding: 7px 14px;
    }
}

/* ===== mobilni-rychle-kategorie-v1.css ===== */
/* ==========================================================================
   BRILED - Rychlé kategorie v mobilním menu (V1)
   Zobrazuje se jen v mobilním menu (≤768px).
   ========================================================================== */
.mrk-strip {
    display: none;
}

@media (max-width: 768px) {
    .mrk-strip {
        display: block;
        padding: 14px 20px 12px;
        border-bottom: 1px solid #eee;
        background: #fff;
    }

    .mrk-title {
        display: block;
        font-family: "DM Sans", sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: #8a8a88;
        margin-bottom: 10px;
    }

    .mrk-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .mrk-chip {
        display: inline-block;
        font-family: "DM Sans", sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        color: #1D1D1B !important;
        background: #f4f4f4;
        border: 1.5px solid transparent;
        border-radius: 999px;
        padding: 9px 15px;
        text-decoration: none !important;
    }

    /* hero produkt (první chip) zvýrazněný značkově */
    .mrk-chip:first-of-type {
        background: #D61118;
        color: #fff !important;
    }

    .mrk-chip:active {
        border-color: #1D1D1B;
    }
}

/* ===== kosik-panel-v1.css ===== */
/* ==========================================================================
   BRILED - Silný potvrzovací panel po přidání do košíku (V1)
   ========================================================================== */
.kpn-panel {
    position: fixed;
    z-index: 100000;
    top: 20px;
    right: 20px;
    width: 340px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid #e6e6e6;
    border-top: 4px solid #D61118;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    padding: 18px 20px 20px;
    font-family: "DM Sans", sans-serif;
    color: #1D1D1B;
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .28s ease;
}

.kpn-panel--show {
    transform: translateX(0);
    opacity: 1;
}

.kpn-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #9a9a98;
    cursor: pointer;
    padding: 4px;
}
.kpn-close:hover { color: #1D1D1B; }

.kpn-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
}

.kpn-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1aa053;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    flex: 0 0 auto;
}

.kpn-title {
    font-size: 17px;
    font-weight: 700;
}

.kpn-name {
    font-size: 14px;
    line-height: 1.35;
    color: #444;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kpn-actions {
    display: flex;
    gap: 8px;
}

.kpn-btn {
    flex: 1 1 50%;
    text-align: center;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 12px 10px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none !important;
    border: 1.5px solid #1D1D1B;
    transition: background-color .15s ease, color .15s ease;
}

.kpn-btn--ghost {
    background: #fff;
    color: #1D1D1B !important;
}
.kpn-btn--ghost:hover { background: #f2f2f2; }

.kpn-btn--primary {
    background: #D61118;
    border-color: #D61118;
    color: #fff !important;
}
.kpn-btn--primary:hover { background: #b60d13; border-color: #b60d13; }

@media (max-width: 767px) {
    .kpn-panel {
        top: auto;
        bottom: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        transform: translateY(calc(100% + 24px));
    }
    .kpn-panel--show { transform: translateY(0); }
}