/* ── TBC Shop Slider Block ──
   Fully self-contained: no shared classes/rules with global.css or any
   other hero block (tbc-hero-book, dark-bg-page, etc.) — every class here
   is unique to this block (tbc-shop-hero__*) so nothing else on the site
   can affect it, and it can't affect anything else. */

.tbc-shop-hero {
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    color: #ffffff;
}

@media (min-width: 820px) {
    
    .tbc-shop-hero {
        height: auto;
        aspect-ratio: 16 / 7.35;
    }
}


.tbc-shop-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}

.tbc-shop-hero__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.tbc-shop-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.tbc-shop-hero__scrim {
    position: absolute;
    inset: 0;
    background: #000000;
    opacity: 0.35;
    z-index: 2;
}

.tbc-shop-hero__container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    margin-inline: auto;
    padding-inline: 20px;
    display: flex;
    align-items: center;
}

.tbc-shop-hero__content {
    max-width: 800px;
    /* padding-bottom: clamp(3rem, 8vw, 6rem); */
    color: #ffffff;
}
@media (min-width: 768px) {
    .tbc-shop-hero__content{
        max-width: 1024px;
        padding-left: 100px;
    }
}
@media (min-width: 992px) {
    .tbc-shop-hero__container{
        padding-inline: 60px;
    }
}


.tbc-shop-hero__eyebrow {
    font-family: var(--tbc-font-body);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 1rem;
}

.tbc-shop-hero__title {
    font-family: var(--tbc-font-heading);
    font-size: clamp(2rem, 4.5vw, 3.75rem);
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

.tbc-shop-hero__line {
    display: block;
    overflow: hidden;
}

.tbc-shop-hero__line-inner {
    display: inline-block;
    transform: translateY(110%);
}

.tbc-shop-hero__body {
    margin-top: 1.25rem;
    color: #ffffff;
    max-width: 630px;
}

.tbc-shop-hero__body p {
    font-family: var(--tbc-font-body);
    font-size: var(--fs-22-18);
    line-height: 1.5;
    color: #ffffff;
    margin: 0;
}
.tbc-shop-hero__body p:has(+p) {
    --space-20-16: clamp(1rem, 0.714rem + 0.595vw, 1.25rem);
    margin-bottom: var(--space-20-16);
}

.tbc-shop-hero__cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.tbc-shop-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.2rem;
    min-width: 220px;
    border: 1.5px solid var(--tbc-color-white);
    color: var(--tbc-color-black);
    background-color: var(--tbc-color-white);
    font-family: var(--tbc-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 50px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease;
}

.tbc-shop-hero__btn:hover,
.tbc-shop-hero__btn:focus-visible {
    background: transparent;
    color: var(--tbc-color-white);
}

.tbc-shop-hero__btn--secondary{
    color: var(--tbc-color-white);
    border-color: var(--tbc-color-black);
    background-color: var(--tbc-color-black);
}
.tbc-shop-hero__btn--secondary:hover,
.tbc-shop-hero__btn--secondary:focus-visible{
    color: var(--tbc-color-white);
    border-color: var(--tbc-color-accent);
    background-color: var(--tbc-color-accent);
}

/* ── Prev/next slide nav (only rendered when there's more than one slide) ── */
.tbc-shop-hero__nav {
    position: absolute;
    left: 50%;
    bottom: 2.5rem;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 1rem;
    align-items: center;
    /* border: 1.5px solid rgba(255, 255, 255, 0.5); */
    /* border-radius: 8px; */
    overflow: hidden;
}

.tbc-shop-hero__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 40px;
    border-radius: 50px;
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.25s ease;
}

.tbc-shop-hero__nav-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.tbc-shop-hero__nav-btn--prev {
    /* border-right: 1.5px solid rgba(255, 255, 255, 0.5); */
}

.tbc-shop-hero__nav-btn svg {
    width: 26px;
    height: 26px;
}

/* Nav sits higher when the scroll indicator is also shown below it, so the two never overlap. */
.tbc-shop-hero__nav:has(+ .tbc-shop-hero__scroll) {
    bottom: 9rem;
}

/* ── Scroll indicator (own copy — not the shared .tbc-scroll-indicator,
   which is wired to the Home hero's specific GSAP entrance/click logic). ── */
.tbc-shop-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 2.5rem;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    opacity: 0.9;
    cursor: pointer;
    z-index: 10;
}

.tbc-shop-hero__scroll p {
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: currentColor;
}

.tbc-shop-hero__arrow-down {
    width: 54px;
    height: auto;
    animation: tbc-shop-hero-bounce 1s infinite ease-in-out;
}

@keyframes tbc-shop-hero-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .tbc-shop-hero__container {
        padding-bottom: 0;
        text-align: center;
    }

    .tbc-shop-hero__content {
        max-width: 100%;
        /* padding-bottom: 2.5rem; */
    }

    .tbc-shop-hero__body p {
        max-width: 100%;
    }

    .tbc-shop-hero__scroll {
        bottom: 1.5rem;
    }

    .tbc-shop-hero__arrow-down {
        width: 40px;
    }
    .tbc-shop-hero__cta-row{
        justify-content: center;
    }

    .tbc-shop-hero__nav {
        bottom: 1.5rem;
    }

    .tbc-shop-hero__nav:has(+ .tbc-shop-hero__scroll) {
        bottom: 6.5rem;
    }
}