/* ==========================================================================
   Home themes 5 (Classic) and 6 (Espresso): the site's own header floats over the hero.
   Only active when <body> has .cb-home (set in master/front.blade.php). Scrolling brings back the normal white bar.
   ========================================================================== */

body.cb-home .site-header.cbk-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    box-shadow: none;
    font-family: "Jost", var(--cbk-sans);
}

/* once scrolled, behave like the normal pinned bar again (the utility bar slides away) */
body.cb-home .site-header.cbk-header.is-stuck {
    position: fixed;
    background: #fff;
    box-shadow: 0 10px 30px -18px rgba(23, 23, 23, 0.25);
    animation: cbhHeaderIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cbhHeaderIn {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: none; }
}

/* utility bar */
body.cb-home .cbk-topbar {
    background: rgba(15, 8, 5, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
}
body.cb-home .cbk-header .cbk-topbar a,
body.cb-home .cbk-header .cbk-dd__toggle,
body.cb-home .cbk-header .cbk-topbar__note { color: rgba(255, 255, 255, 0.86); }
body.cb-home .cbk-header .cbk-topbar a:hover,
body.cb-home .cbk-header .cbk-dd__toggle:hover { color: #fff; }
body.cb-home .cbk-topbar__sep,
body.cb-home .cbk-topbar__links > li + li::before { background: rgba(255, 255, 255, 0.3); }

/* main bar: transparent, logo only (no text), white uppercase links */
body.cb-home .cbk-mainbar { background: transparent; border-bottom: 0; }
body.cb-home .cbk-mainbar__inner { height: 96px; }
body.cb-home .cbk-brand__text { display: none; }
body.cb-home .cbk-header .cbk-brand__logo {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
body.cb-home .cbk-header .cbk-nav__link {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}
body.cb-home .cbk-nav__link i { color: rgba(255, 255, 255, 0.75); }
body.cb-home .cbk-nav__link::after { background: #fff; bottom: 34px; }
body.cb-home .cbk-header .cbk-icon-btn { color: #fff; filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.35)); }
body.cb-home .cbk-header .cbk-icon-btn:hover { color: #fff; }
body.cb-home .cbk-badge { background: #fff; color: #1b1210; }

/* scrolled state: back to dark text on white */
body.cb-home .site-header.cbk-header.is-stuck .cbk-mainbar { background: #fff; border-bottom: 1px solid var(--cbk-line); }
body.cb-home .site-header.cbk-header.is-stuck .cbk-mainbar__inner { height: 78px; }
body.cb-home .site-header.cbk-header.is-stuck .cbk-brand__logo { width: 56px; height: 56px; box-shadow: none; }
body.cb-home .site-header.cbk-header.is-stuck .cbk-nav__link { color: var(--cbk-ink); text-shadow: none; }
body.cb-home .site-header.cbk-header.is-stuck .cbk-nav__link i { color: var(--cbk-muted); }
body.cb-home .site-header.cbk-header.is-stuck .cbk-nav__link::after { background: var(--cbk-ink); bottom: 22px; }
body.cb-home .site-header.cbk-header.is-stuck .cbk-icon-btn { color: var(--cbk-ink); filter: none; }
body.cb-home .site-header.cbk-header.is-stuck .cbk-badge { background: var(--cbk-ink); color: #fff; }

/* dropdown panels stay white with dark text */
body.cb-home .cbk-nav__dd { background: #fff; text-shadow: none; }

/* the search panel keeps its normal look */
body.cb-home .cbk-search { background: #fff; }

/* Espresso (theme 6): the hero is a rounded card, flush with the top so the header sits inside it */
body.cb-home-b .cbh-root .cbh-frame { padding: 0 14px; }
body.cb-home-b .cbh-root .cbh-hero { height: calc(100vh - 14px); border-radius: 0 0 22px 22px; }

@media (max-width: 991px) {
    body.cb-home .cbk-mainbar__inner { height: 78px; }
    body.cb-home .cbk-header .cbk-brand__logo { width: 58px; height: 58px; }
    body.cb-home .cbk-burger { color: #fff; }
    body.cb-home .site-header.cbk-header.is-stuck .cbk-burger { color: var(--cbk-ink); }
}

/* Brand-orange hovers (header over the hero + the home theme sections) */
body.cb-home .cbk-header .cbk-nav__link:hover,
body.cb-home .cbk-header .cbk-nav__item:hover > .cbk-nav__link,
body.cb-home .cbk-header .cbk-topbar a:hover,
body.cb-home .cbk-header .cbk-dd__toggle:hover,
body.cb-home .cbk-header .cbk-icon-btn:hover { color: var(--cb-brand, #FF6A00); }
body.cb-home .cbk-header .cbk-nav__link::after { background: var(--cb-brand, #FF6A00); }
body.cb-home .cbk-nav__dd .cbk-nav__ddlink:hover { color: var(--cb-brand, #FF6A00); }

.cbh-root .cbh-btn:hover { background: var(--cb-brand, #FF6A00); color: #fff; }
.cbh-root .cbh-cta:hover { color: var(--cb-brand, #FF6A00); }
.cbh-root .cbh-card:hover .cbh-t b,
.cbh-root .cbh-chip:hover span,
.cbh-root .cbh-insta a:hover,
.cbh-root .cbh-tile:hover .cbh-tl { color: var(--cb-brand, #FF6A00); }
.cbh-root .cbh-tile:not(.cbh-prod):hover .cbh-tl { color: #fff; border-bottom-color: var(--cb-brand, #FF6A00); }

/* ---- Phone layout for home themes 5 and 6 ---- */
@media (max-width: 760px) {
    .cbh-root .cbh-hero { background: #1b1210; }
    .cbh-root .cbh-slide .cbh-bg { bottom: 40%; background-position-y: 28%; }
    .cbh-root .cbh-hero::after {
        background: linear-gradient(0deg, #1b1210 0%, #1b1210 40%, rgba(27,18,16,0) 66%),
                    linear-gradient(180deg, rgba(15,8,5,.55) 0%, rgba(15,8,5,0) 24%);
    }
    .cbh-root .cbh-copy { left: 20px; right: 20px; width: auto; bottom: 72px; top: auto; text-align: left; }
    .cbh-root h1.cbh-hd { font-size: clamp(26px, 7.4vw, 34px); }
    .cbh-root h1.cbh-hd .cbh-ln { white-space: normal; }
    .cbh-root .cbh-sub { margin-left: 0; font-size: 14px; max-width: none; }
    .cbh-root .cbh-cta, .cbh-root .cbh-btn { margin-top: 20px; }
    .cbh-root .cbh-dots { bottom: 24px; }
    /* collection cards: text below the picture instead of on top of it */
    .cbh-root .cbh-chip { aspect-ratio: .92 / 1; }
    .cbh-root .cbh-chip img { padding: 8% 8% 32%; }
    .cbh-root .cbh-chip span { left: 14px; right: 14px; bottom: 32px; font-size: 15px; line-height: 1.15; white-space: normal; }
    .cbh-root .cbh-chip small { left: 14px; right: auto; bottom: 12px; font-size: 10px; }
}

/* hide the hero progress lines */
.cbh-root .cbh-dots { display: none !important; }