/* padding, not margin — margin between adjacent sibling sections collapses
   to the larger single value instead of stacking, which read as too tight. */
.b4-spb-section {
    padding: 40px 0;
}

/* Product carousels — unlike the top promo slider (intentionally full-bleed),
   these are centered in a constrained column rather than spanning the full
   page width. */
.b4-spb-new-arrivals,
.b4-spb-target-category {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.b4-spb-section-title {
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    margin: 0 0 20px;
}

.b4-spb-section-subtitle {
    max-width: 640px;
    margin: -8px auto 20px;
    text-align: center;
    font-size: 0.95rem;
    opacity: 0.75;
    line-height: 1.5;
}

/* Featured Brand Banners — 2-up side-by-side images, capped at 800x600 each
   and centered as a group rather than stretched to fill the row. Dark
   background band, same #060606 as the front page's .front-hero-section
   (hero slider), full-bleed since this section has no side margin/max-width
   of its own. */
.b4-spb-featured-banners {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    background-color: #060606;
}

.b4-spb-featured-banner {
    flex: 1 1 800px;
    max-width: 800px;
    max-height: 600px;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.b4-spb-featured-banner-content {
    position: relative;
    z-index: 1;
    padding: 24px;
    color: #ffffff;
}

.b4-spb-featured-banner-headline {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 10px;
}

.b4-spb-featured-banner-cta {
    display: inline-block;
    background: #cc0000;
    color: #ffffff;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 2px;
}

/* Generic multi-item-per-view carousel — shared by New Arrivals, Target
   Category, and Favorite Titles. Each usage sets data-items-desktop/tablet/
   mobile attributes read by frontend.js. */
.b4-spb-carousel {
    position: relative;
    overflow: hidden;
}

.b4-spb-carousel-track {
    display: flex;
    transition: transform 0.4s ease;
}

/* Only applied by frontend.js when all items fit in one view (no
   scrolling) — centering an overflowing row clips content from both ends
   instead of respecting the track's translateX scroll position, cutting
   off the first item. */
.b4-spb-carousel-track.is-centered {
    justify-content: center;
}

.b4-spb-carousel-item {
    box-sizing: border-box;
    padding: 0 8px;
}

.b4-spb-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.b4-spb-carousel-arrow:hover {
    background: rgba(0, 0, 0, 0.75);
}

.b4-spb-carousel-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.b4-spb-carousel-prev {
    left: 0;
}

.b4-spb-carousel-next {
    right: 0;
}

.b4-spb-shop-all-row {
    text-align: center;
    margin-top: 24px;
}

/* Same specificity issue as .b4-spb-unforgettable-btn — WooCommerce's
   ".woocommerce a.button" otherwise wins over a plain single class here. */
.b4-spb-shop-all-btn {
    padding: 14px 32px !important;
    font-size: 1rem !important;
}

/* Shop by Category grid — auto-fit (not auto-fill) collapses empty tracks
   instead of leaving unpopulated columns that shrink real items down to
   their minimum and bunch them at the left; justify-content centers the
   row when there are too few categories to fill it. */
.b4-spb-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 450px));
    justify-content: center;
    gap: 16px;
}

.b4-spb-category-item {
    text-decoration: none;
    text-align: center;
    color: inherit;
}

.b4-spb-category-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
    margin-bottom: 8px;
}

.b4-spb-category-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Unforgettable Stories static banner */
.b4-spb-unforgettable {
    background-color: #111111;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    min-height: 320px;
    border-radius: 4px;
    overflow: hidden;
}

.b4-spb-unforgettable-content {
    flex: 0 0 auto;
    max-width: 480px;
    margin-left: 10%;
    padding: 40px;
    color: #ffffff;
}

.b4-spb-unforgettable-title {
    font-size: 2.25rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 12px;
}

.b4-spb-unforgettable-subtitle {
    font-size: 1rem;
    margin: 0 0 20px;
    opacity: 0.9;
}

/* Bigger than the theme's default .button. !important is needed: this
   banner renders inside WooCommerce's own .woocommerce content wrapper on
   the shop page, and the theme has higher-specificity rules like
   ".woocommerce a.button" that otherwise win over a plain single class here
   (same issue b4-promo-slider-plugin's own CTA button had to work around). */
.b4-spb-unforgettable-btn {
    padding: 18px 36px !important;
    font-size: 1.15rem !important;
}

.b4-spb-unforgettable-cover {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
}

.b4-spb-unforgettable-cover img {
    display: block;
    max-width: 300px;
    max-height: 420px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Favorite Titles circular avatar carousel */
.b4-spb-brand-avatar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.b4-spb-avatar {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 10px;
}

.b4-spb-brand-pill {
    display: inline-block;
    background: #cc0000;
    color: #ffffff;
    padding: 4px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 999px;
}

@media (max-width: 768px) {
    .b4-spb-featured-banners {
        flex-direction: column;
    }

    .b4-spb-unforgettable {
        flex-wrap: wrap;
        min-height: 260px;
    }

    .b4-spb-unforgettable-content {
        max-width: 90%;
        margin-left: 5%;
        padding: 20px;
    }

    .b4-spb-unforgettable-title {
        font-size: 1.5rem;
    }

    .b4-spb-unforgettable-cover {
        margin: 0 auto;
        padding: 20px;
    }

    .b4-spb-unforgettable-cover img {
        max-width: 80%;
        max-height: 220px;
    }

    .b4-spb-avatar {
        width: 220px;
        height: 220px;
    }
}