:root{--cbhg-primary:#c70342;--cbhg-primary-dark:#9f0035;--cbhg-radius:30px;--cbhg-gap:22px;--cbhg-card:min(74vw,980px);--cbhg-start-pad:clamp(28px,5vw,88px)}
.cb-hero-gallery{position:relative;width:100%;margin:0 0 52px;padding:28px 0 34px;overflow:hidden;background:#fff;font-family:Montserrat,Arial,sans-serif}
.cb-hero-gallery__inner,.cb-hero-gallery__viewport{position:relative;width:100%}
.cb-hero-gallery__viewport{overflow:hidden;padding:12px 0 34px}
.cb-hero-gallery__track{display:flex;gap:var(--cbhg-gap);margin:0;padding:0 var(--cbhg-start-pad);overflow-x:auto;overflow-y:visible;list-style:none;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cb-hero-gallery__track::-webkit-scrollbar{display:none}
.cb-hero-gallery__card{position:relative;flex:0 0 var(--cbhg-card);aspect-ratio:16/10;overflow:hidden;border-radius:var(--cbhg-radius);background:#eee;box-shadow:0 14px 36px rgba(63,25,37,.14);transform:translateZ(0);isolation:isolate;transition:transform .42s cubic-bezier(.22,.61,.36,1),box-shadow .42s cubic-bezier(.22,.61,.36,1)}
.cb-hero-gallery__card:hover{transform:scale(1.028) translateY(-5px);box-shadow:0 26px 64px rgba(63,25,37,.23);z-index:4}
.cb-hero-gallery__link{position:relative;z-index:2;display:block;width:100%;height:100%;color:#fff!important;text-decoration:none!important}
.cb-hero-gallery__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;transition:transform .78s cubic-bezier(.22,.61,.36,1)}
.cb-hero-gallery__card:hover .cb-hero-gallery__image{transform:scale(1.07)}
.cb-hero-gallery__link::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(26,14,18,.66) 0%,rgba(26,14,18,.50) 31%,rgba(26,14,18,.18) 58%,rgba(26,14,18,.02) 100%),linear-gradient(0deg,rgba(20,10,14,.30) 0%,rgba(20,10,14,0) 55%)}
.cb-hero-gallery__content{position:absolute;left:clamp(28px,4vw,58px);bottom:clamp(28px,4vw,52px);z-index:3;width:min(560px,58%);color:#fff}
.cb-hero-gallery__eyebrow{display:inline-flex;align-items:center;min-height:30px;margin:0 0 14px;padding:7px 11px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.10);color:#fff;backdrop-filter:blur(8px);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.cb-hero-gallery__title{margin:0 0 14px;color:#fff;font-size:clamp(38px,4.8vw,70px);line-height:.98;font-weight:800;letter-spacing:-.045em;text-shadow:0 4px 20px rgba(0,0,0,.18)}
.cb-hero-gallery__text{max-width:500px;margin:0 0 24px;color:rgba(255,255,255,.90);font-size:clamp(14px,1.2vw,17px);line-height:1.55;font-weight:500}
.cb-hero-gallery__cta{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:12px 20px;border-radius:999px;background:#fff;color:var(--cbhg-primary)!important;box-shadow:0 10px 26px rgba(0,0,0,.16);font-size:13px;font-weight:800;transition:transform .24s ease,background .24s ease}
.cb-hero-gallery__cta::after{content:"→";font-size:16px;transition:transform .24s ease}
.cb-hero-gallery__card:hover .cb-hero-gallery__cta{transform:translateY(-2px);background:#fff3f7}
.cb-hero-gallery__card:hover .cb-hero-gallery__cta::after{transform:translateX(4px)}
.cb-hero-gallery__nav{position:absolute;inset:0;z-index:8;pointer-events:none}
.cb-hero-gallery__button{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid rgba(255,255,255,.36);border-radius:50%;background:rgba(255,255,255,.88);color:#4a3d41;box-shadow:0 10px 28px rgba(63,25,37,.16);cursor:pointer;pointer-events:auto}
.cb-hero-gallery__button--prev{left:24px}.cb-hero-gallery__button--next{right:24px}
.cb-hero-gallery__button:disabled{opacity:0;pointer-events:none}.cb-hero-gallery__button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2}
.cb-hero-gallery__progress{position:relative;width:124px;height:4px;margin:0 auto;overflow:hidden;border-radius:999px;background:rgba(86,38,49,.10)}
.cb-hero-gallery__progress-bar{position:absolute;top:0;left:0;width:32%;height:100%;border-radius:inherit;background:var(--cbhg-primary);transition:transform .2s ease}
@media(max-width:799px){:root{--cbhg-gap:14px;--cbhg-card:86vw;--cbhg-start-pad:16px;--cbhg-radius:24px}.cb-hero-gallery{margin-bottom:36px;padding:18px 0;background:#faf7f5}.cb-hero-gallery__track{padding:0 16px;scroll-snap-type:x mandatory}.cb-hero-gallery__card{aspect-ratio:4/5;scroll-snap-align:start}.cb-hero-gallery__card:hover{transform:none}.cb-hero-gallery__card:hover .cb-hero-gallery__image{transform:none}.cb-hero-gallery__link::after{background:linear-gradient(0deg,rgba(26,14,18,.74) 0%,rgba(26,14,18,.55) 36%,rgba(26,14,18,.12) 72%,rgba(26,14,18,.02) 100%)}.cb-hero-gallery__content{left:22px;right:22px;bottom:24px;width:auto}.cb-hero-gallery__title{font-size:clamp(32px,10vw,46px)}.cb-hero-gallery__text{font-size:13px}.cb-hero-gallery__nav{display:none}.cb-hero-gallery__progress{width:92px}}


/* ==========================================================
   CHOCO BONTÉ – HERO GALLERY v10 MOTION
   Focus hover + dim siblings + stronger premium motion.
========================================================== */

@media (min-width:800px){

    .cb-hero-gallery__track{
        overflow-y:visible;
    }

    /* Karty se při hoveru chovají jako focus mode */
    .cb-hero-gallery__track:hover .cb-hero-gallery__card{
        opacity:.78;
        filter:saturate(.88) brightness(.92);
        transform:scale(.975);
        transition:
            transform .48s cubic-bezier(.22,.61,.36,1),
            box-shadow .48s cubic-bezier(.22,.61,.36,1),
            opacity .34s ease,
            filter .34s ease;
    }

    .cb-hero-gallery__track:hover .cb-hero-gallery__card:hover{
        opacity:1;
        filter:none;
        transform:scale(1.055) translateY(-8px);
        box-shadow:0 30px 72px rgba(63,25,37,.27);
        z-index:5;
    }

    .cb-hero-gallery__track:hover .cb-hero-gallery__card:hover .cb-hero-gallery__image{
        transform:scale(1.10);
    }

    .cb-hero-gallery__track:hover .cb-hero-gallery__card:hover .cb-hero-gallery__content{
        transform:translateY(-4px);
    }

    .cb-hero-gallery__content{
        transition:transform .42s cubic-bezier(.22,.61,.36,1);
    }

    .cb-hero-gallery__track:hover .cb-hero-gallery__card:hover .cb-hero-gallery__cta{
        transform:translateY(-4px) scale(1.025);
        box-shadow:0 16px 34px rgba(0,0,0,.22);
    }
}

/* Jemný autoplay pulse na aktivní kartu */
.cb-hero-gallery__card.is-active{
    box-shadow:0 18px 46px rgba(63,25,37,.17);
}

@media(prefers-reduced-motion:reduce){
    .cb-hero-gallery__track:hover .cb-hero-gallery__card,
    .cb-hero-gallery__track:hover .cb-hero-gallery__card:hover,
    .cb-hero-gallery__content{
        transition:none !important;
        transform:none !important;
        filter:none !important;
        opacity:1 !important;
    }
}


/* ==========================================================
   CHOCO BONTÉ – HERO v11 FLOAT + CONTINUOUS MOTION
   - karta může při hoveru opravdu vystoupit mimo svou pozici
   - žádné vizuální "mantinely" kolem scale efektu
========================================================== */

@media (min-width:800px){

    /* Sekce i inner dovolí vizuálnímu scale efektu přesahovat */
    .cb-hero-gallery,
    .cb-hero-gallery__inner{
        overflow:visible !important;
    }

    /* Viewport zůstává horizontálně funkční, ale dostane prostor nahoře/dole */
    .cb-hero-gallery__viewport{
        overflow-x:hidden !important;
        overflow-y:visible !important;
        padding-top:34px !important;
        padding-bottom:52px !important;
        margin-top:-22px;
        margin-bottom:-18px;
    }

    /* Track má dostatečný vertikální breathing room */
    .cb-hero-gallery__track{
        overflow-x:auto !important;
        overflow-y:visible !important;
        padding-top:22px !important;
        padding-bottom:22px !important;
    }

    /* Výraznější floating efekt celé karty */
    .cb-hero-gallery__track:hover .cb-hero-gallery__card:hover{
        transform:scale(1.065) translateY(-10px) !important;
        box-shadow:
            0 34px 80px rgba(63,25,37,.30),
            0 12px 28px rgba(63,25,37,.16) !important;
    }

    .cb-hero-gallery__track:hover .cb-hero-gallery__card:hover .cb-hero-gallery__image{
        transform:scale(1.11) !important;
    }

    /* CTA a text dostanou trochu víc depth */
    .cb-hero-gallery__track:hover .cb-hero-gallery__card:hover .cb-hero-gallery__content{
        transform:translateY(-7px) !important;
    }

    .cb-hero-gallery__track:hover .cb-hero-gallery__card:hover .cb-hero-gallery__cta{
        transform:translateY(-5px) scale(1.035) !important;
    }
}

/* Mobil/tablet zůstává bez floating overflow efektu */
@media(max-width:799px){
    .cb-hero-gallery,
    .cb-hero-gallery__inner,
    .cb-hero-gallery__viewport{
        overflow:hidden !important;
    }
}


/* ==========================================================
   CHOCO BONTÉ – HERO v12 FINAL POLISH
   Menší desktop hero, lepší proporce, jemnější premium hover.
========================================================== */

@media (min-width:1200px){

    :root{
        --cbhg-card:min(64vw, 860px) !important;
        --cbhg-start-pad:clamp(42px, 5vw, 78px) !important;
        --cbhg-gap:20px !important;
        --cbhg-radius:28px !important;
    }

    .cb-hero-gallery{
        margin-bottom:44px !important;
        padding-top:18px !important;
        padding-bottom:24px !important;
    }

    .cb-hero-gallery__viewport{
        padding-top:28px !important;
        padding-bottom:42px !important;
        margin-top:-16px !important;
        margin-bottom:-12px !important;
    }

    .cb-hero-gallery__track{
        padding-top:16px !important;
        padding-bottom:16px !important;
    }

    .cb-hero-gallery__card{
        aspect-ratio:16 / 9 !important;
    }

    .cb-hero-gallery__content{
        left:42px !important;
        bottom:38px !important;
        width:min(500px,58%) !important;
    }

    .cb-hero-gallery__eyebrow{
        margin-bottom:12px !important;
        min-height:28px !important;
        padding:6px 10px !important;
        font-size:10px !important;
    }

    .cb-hero-gallery__title{
        margin-bottom:12px !important;
        font-size:clamp(38px,3.7vw,58px) !important;
        line-height:1 !important;
        letter-spacing:-.038em !important;
    }

    .cb-hero-gallery__text{
        max-width:450px !important;
        margin-bottom:20px !important;
        font-size:15px !important;
        line-height:1.5 !important;
    }

    .cb-hero-gallery__cta{
        min-height:46px !important;
        padding:11px 18px !important;
        font-size:12px !important;
    }

    /* Jemnější, ale elegantnější focus hover */
    .cb-hero-gallery__track:hover .cb-hero-gallery__card{
        opacity:.86 !important;
        filter:saturate(.92) brightness(.95) !important;
        transform:scale(.985) !important;
    }

    .cb-hero-gallery__track:hover .cb-hero-gallery__card:hover{
        opacity:1 !important;
        filter:brightness(1.02) saturate(1.03) !important;
        transform:scale(1.042) translateY(-7px) !important;
        box-shadow:
            0 28px 64px rgba(63,25,37,.25),
            0 10px 24px rgba(63,25,37,.14) !important;
    }

    .cb-hero-gallery__track:hover .cb-hero-gallery__card:hover .cb-hero-gallery__image{
        transform:scale(1.075) !important;
    }

    .cb-hero-gallery__track:hover .cb-hero-gallery__card:hover .cb-hero-gallery__content{
        transform:translateY(-4px) !important;
    }

    .cb-hero-gallery__track:hover .cb-hero-gallery__card:hover .cb-hero-gallery__cta{
        transform:translateY(-3px) scale(1.02) !important;
    }

    .cb-hero-gallery__button{
        width:50px !important;
        height:50px !important;
    }

    .cb-hero-gallery__button--prev{ left:20px !important; }
    .cb-hero-gallery__button--next{ right:20px !important; }

    .cb-hero-gallery__progress{
        width:112px !important;
    }
}

@media (min-width:800px) and (max-width:1199px){
    :root{
        --cbhg-card:min(76vw, 760px) !important;
    }

    .cb-hero-gallery__card{
        aspect-ratio:16 / 9.5 !important;
    }

    .cb-hero-gallery__title{
        font-size:clamp(34px,4.5vw,52px) !important;
    }
}