/* Shrumfuzed Bestsellers Carousel — full-width Embla wrapper.
   Card design comes from circular-product-grid.css; this file only
   handles the slider container, viewport, slide widths and nav.

   No `!important` anywhere — overrides work by:
   1. This stylesheet declares `sfz-circular-grid-style` as a dependency in
      its wp_enqueue_style call, so it always loads AFTER the grid CSS, and
      same-specificity selectors win on cascade order.
   2. Where the inherited rule is higher-specificity (e.g. the button rule
      `.woocommerce ul.products li.product ... a.shrum-add-btn` = 0,5,3),
      the override selector chains `.sfz-bsc.woocommerce` to add a class
      and exceed it on spec count.
   3. Host classes (`sfz-bsc-host-row`, `-host-column`, `-host-inner`) are
      added via JS to the actual Kadence wrapper elements, then chained
      here with the always-present Kadence class (e.g. `.wp-block-kadence-rowlayout`,
      `.kb-row-layout-wrap`, `.wp-block-kadence-column`) plus a `body`
      prefix, to outrank Kadence's per-block inline CSS.
*/

.sfz-bsc {
    position: relative;
    width: 100%;          /* sits inside the parent cream column — no breakout */
    padding: 24px 0 32px;
    overflow: hidden;
    box-sizing: border-box;
    background: transparent;
}
@media (max-width: 1024px) {
    .sfz-bsc { padding: 16px 0 24px; }
}
@media (max-width: 700px) {
    .sfz-bsc { padding: 12px 12px 18px; }
}

/* ── Force the parent section (row + column) to span full viewport width
   so the existing cream box + "Shop bestsellers" heading extend edge-to-edge.
   The host classes are added at JS-init time by walking up the DOM, so this
   works on any page regardless of the Kadence block's uniqueID.

   Selector chains `body` + the always-present Kadence wrapper class
   (`.wp-block-kadence-rowlayout` or `.kb-row-layout-wrap`) so specificity
   is (0, 2, 1) — outranks Kadence's per-block inline rules like
   `.kb-row-layout-id... { padding/max-width: ... }` (0, 1, 0). */
body .sfz-bsc-host-row.wp-block-kadence-rowlayout,
body .sfz-bsc-host-row.kb-row-layout-wrap {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

/* Inner row wrappers — direct-child and any descendant. Spec (0, 2, 2)
   beats Kadence's `.kb-row-layout-id... > .kt-row-column-wrap` (0, 2, 1)
   on element count. */
body .sfz-bsc-host-row > .kt-row-layout-inner,
body .sfz-bsc-host-row > .kt-row-column-wrap,
body .sfz-bsc-host-row .kt-row-column-wrap {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Every Kadence column ancestor — outer (cream) AND inner — stretches to
   full width, no rounded corners, no left/right margin or padding. The
   cream bg on whichever column has it just stays in place. Bottom margin
   collapsed so the section below sits flush with the cream box.

   Chained with `.wp-block-kadence-column` (always present on column
   elements) + body prefix → (0, 2, 1), enough to beat Kadence per-column
   inline rules like `.kadence-column_xxx { ... }` (0, 1, 0) and
   `.kadence-column_xxx > .kt-inside-inner-col { padding: ... }` (0, 2, 1)
   via cascade order (this file loads later). */
body .sfz-bsc-host-column.wp-block-kadence-column {
    max-width: none;
    width: 100%;
    flex: 1 1 100%;
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

/* Inner column wrap — spec (0, 2, 2) by chaining as child of host-column,
   beats Kadence's `.kadence-column_xxx > .kt-inside-inner-col` (0, 2, 1)
   on element count. */
body .sfz-bsc-host-column > .sfz-bsc-host-inner,
body .sfz-bsc-host-column .sfz-bsc-host-inner {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Specific Kadence row above the bestsellers cream box that adds
   bottom padding — collapse it so the cream box sits flush.
   Wrapping `body` here just boosts specificity over Kadence's own
   generated rule on the same selector. */
body .kb-row-layout-id28608_b7ae65-1b > .kt-row-column-wrap {
    padding-bottom: 0;
}

.sfz-bsc__viewport {
    overflow: hidden;
    width: 100%;
    padding: 8px clamp(16px, 4vw, 64px);
    box-sizing: border-box;
    transition: height .25s ease;
}

/* ── Image wrapper: rounded-rectangle container clipping the image to a
   16px radius (matches site-wide button/card radius).
   Chained `.sfz-bsc.woocommerce` adds the woocommerce class to give
   spec (0, 6, 2) — outranks inherited grid rule
   `.woocommerce ul.products li.product .shrumfuzed-product-card .shrumfuzed-image-wrapper` (0, 5, 2). */
.sfz-bsc.woocommerce ul.products li.product .shrumfuzed-product-card .shrumfuzed-image-wrapper,
.sfz-bsc .sfz-bsc__slide .shrumfuzed-image-wrapper {
    position: relative;
    width: 100%;
/*     max-width: 340px; */
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    background: transparent;
    background-color: transparent;
    overflow: hidden;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.woocommerce ul.products li.product.sfz-bsc__slide .shrumfuzed-product-card {
	max-width: 100%;
}

.sfz-bsc .shrumfuzed-image-wrapper .shrumfuzed-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: transparent;
}

/* Hide the duplicated flavor span — the product title already ends with
   the flavor (e.g. "Shrumfuzed Miniz Gummies (320mg) Strawmelon"), so the
   extra .product-flavor row was showing the word twice.
   Spec (0, 6, 2) beats inherited
   `.woocommerce ul.products li.product .shrumfuzed-product-card .shrumfuzed-product-title .product-flavor` (0, 5, 2). */
.sfz-bsc.woocommerce ul.products li.product .shrumfuzed-product-card .shrumfuzed-product-title .product-flavor {
    display: none;
}

/* Title — slightly smaller than the inherited 24px so prices/titles
   feel less heavy on the carousel cards.
   Spec (0, 6, 2) beats inherited
   `.woocommerce ul.products li.product .shrumfuzed-product-card .shrumfuzed-product-title` (0, 5, 2). */
.sfz-bsc.woocommerce ul.products li.product .shrumfuzed-product-card .shrumfuzed-product-title {
    font-size: 20px;
    line-height: 1.25;
}

/* Price — smaller AND unbolded (was 24px / 900). The bold weight made
   the price visually dominate the card; normal weight reads as supporting
   info beside the title.
   Spec (0, 6, 2) beats inherited (0, 5, 2). */
.sfz-bsc.woocommerce ul.products li.product .shrumfuzed-product-card .shrumfuzed-product-price {
    font-size: 18px;
    font-weight: 600;
}

/* Responsive size caps for the image wrapper — same spec chain as above. */
@media (max-width: 1024px) {
    .sfz-bsc.woocommerce ul.products li.product .shrumfuzed-product-card .shrumfuzed-image-wrapper,
    .sfz-bsc .sfz-bsc__slide .shrumfuzed-image-wrapper {
        max-width: 280px;
        margin-bottom: 18px;
    }
}
@media (max-width: 700px) {
    .sfz-bsc.woocommerce ul.products li.product .shrumfuzed-product-card .shrumfuzed-image-wrapper,
    .sfz-bsc .sfz-bsc__slide .shrumfuzed-image-wrapper {
        max-width: 240px;
        margin-bottom: 14px;
    }
    /* Title spec (0, 6, 2) beats grid rule (0, 5, 2). */
    .sfz-bsc.woocommerce ul.products li.product .shrumfuzed-product-card .shrumfuzed-product-title {
        font-size: 14px;
        line-height: 1.25;
    }
    /* Price spec (0, 6, 2) beats grid rule (0, 5, 2). */
    .sfz-bsc.woocommerce ul.products li.product .shrumfuzed-product-card .shrumfuzed-product-price {
        font-size: 13px;
    }
    /* Button spec (0, 7, 3) beats grid rule
       `.woocommerce ul.products li.product .shrumfuzed-product-card .shrumfuzed-cart-button a.shrum-add-btn` (0, 5, 3). */
    .sfz-bsc.woocommerce ul.products li.product .shrumfuzed-product-card .shrumfuzed-cart-button a.shrum-add-btn {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* Image fills the full square wrapper so EVERY card occupies the same
   width × height regardless of the source image's aspect ratio.
   `object-fit: contain` keeps the aspect ratio (no distortion); whatever
   transparent area remains keeps the visual slot uniform.
   The inherited img rule
   `.woocommerce ul.products li.product .shrumfuzed-product-card .shrumfuzed-main-img` (0, 5, 2)
   only sets height/object-fit/transition. Chained `.sfz-bsc.woocommerce` →
   (0, 6, 2) wins on class count. */
.sfz-bsc.woocommerce ul.products li.product .shrumfuzed-product-card .shrumfuzed-main-img,
.sfz-bsc .sfz-bsc__slide .shrumfuzed-image-wrapper .shrumfuzed-main-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    background: transparent;
    border-radius: 16px;
    transform: none;
}

/* The inherited grid rule from circular-product-grid.css
   (`body .woocommerce.sfz-shortcode-wrapper ul.shrumfuzed-custom-grid`)
   is gated to `.sfz-shortcode-wrapper`, which we don't carry on the
   carousel — so a plain selector on our container is sufficient. */
.sfz-bsc__container.products.shrumfuzed-custom-grid {
    /* display: flex;
    gap: var(--sfz-bsc-gap, 16px);
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: none; */
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: none;
    /* Use a negative margin strategy to perfectly balance out side-gaps on snap boundaries */
    margin-left: calc(var(--sfz-bsc-gap, 16px) * -1);
}

/* Slide — chained `.sfz-bsc.woocommerce ul.products li.product.sfz-bsc__slide`
   gives spec (0, 5, 2), beating WooCommerce's `.woocommerce ul.products li.product`
   (0, 3, 2) on classes. Margin must be reset (WC adds bottom margin). */
.sfz-bsc.woocommerce ul.products li.product.sfz-bsc__slide {
    /* flex: 0 0 calc(
        (100% - (var(--sfz-bsc-per-view, 4) - 1) * var(--sfz-bsc-gap, 16px))
        / var(--sfz-bsc-per-view, 4)
    );
    min-width: 0;
    margin: 0;
    list-style: none;
     */
    flex: 0 0 calc(100% / var(--sfz-bsc-per-view, 4));
    min-width: 0;
    margin: 0;
    list-style: none;
    /* Move the gap into padding-left so it never gets clipped or miscalculated at boundaries */
    padding-left: var(--sfz-bsc-gap, 16px);
    box-sizing: border-box;
}

/* Responsive — fewer cards per view on smaller screens.
   Breakpoints chosen to match common device viewports:
     1200+ desktop:           4 cards
     1024-1199 small desktop: 3 cards
     701-1024 iPad + landscape phones: 2 cards (centered)
     <=700  portrait phones:  1 card + small peek of next, centered          */
@media (max-width: 1199px) {
    .sfz-bsc.woocommerce ul.products li.product.sfz-bsc__slide {
        /* flex-basis: calc((100% - 2 * var(--sfz-bsc-gap, 16px)) / 3); */
        flex: 0 0 calc(100% / 3);
    }
}
@media (max-width: 1024px) {
    .sfz-bsc.woocommerce ul.products li.product.sfz-bsc__slide {
        /* flex-basis: calc((100% - 1 * var(--sfz-bsc-gap, 16px)) / 2); */
        flex: 0 0 calc(100% / 3); /* Clean 2-column split */
    }
    .sfz-bsc__viewport { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 767px) {
    .sfz-bsc.woocommerce ul.products li.product.sfz-bsc__slide {
        /* flex-basis: calc((100% - 1 * var(--sfz-bsc-gap, 16px)) / 2); */
        flex: 0 0 calc(100% / 2); /* Clean 2-column split */
    }
    .sfz-bsc__viewport { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 500px) {
    .sfz-bsc.woocommerce ul.products li.product.sfz-bsc__slide {
        /* flex-basis: 80%; */
        flex: 0 0 80%;
    }
    .sfz-bsc__viewport { padding-left: 8px; padding-right: 8px; }
}

/* Make each card fill its slide */
.sfz-bsc__slide .shrumfuzed-product-card {
    height: 100%;
    box-sizing: border-box;
}

/* ── Mobile 2x2 grid pages ─────────────────────────────────────────
   At <=700px the JS (bestsellers-carousel.js) wraps every 4 original
   product <li class="sfz-bsc__slide"> items into ONE outer
   <li class="sfz-bsc__slide sfz-bsc__slide-group"> containing a nested
   2-column grid. That outer <li> becomes the Embla slide, so exactly
   one group of 4 products is visible per page/swipe. No product card
   markup, classes, or styling changes — .shrumfuzed-product-card and
   friends render exactly as they already do; only the outer wrapper
   that positions them is different at this breakpoint. Above 700px the
   JS restores the original flat list, so these rules never apply and
   desktop/tablet are completely unaffected. */
@media (max-width: 700px) {
    /* The outer grouped slide — one full-width Embla "page". Doesn't
       carry `.product`, so it never matches the individual product-slide
       flex rules above; it needs its own base slide sizing instead. */
    .sfz-bsc.woocommerce ul.products li.sfz-bsc__slide-group {
        flex: 0 0 100%;
        min-width: 0;
        padding-left: var(--sfz-bsc-gap, 16px);
        box-sizing: border-box;
        list-style: none;
        /* .sfz-bsc__container is `display: flex` with the default
           align-items: stretch, so every slide is stretched to match
           the tallest one in the row. A trailing group with fewer than
           4 products (e.g. 2 left over) would otherwise get stretched
           to the height of the full 2x2 groups, leaving empty space
           below its cards. align-self lets each group size to its own
           content instead. */
        align-self: flex-start;
    }

    /* The nested 2-column grid holding the 4 product cards. */
    .sfz-bsc__slide-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sfz-bsc-gap, 16px);
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Individual product <li>s inside a grid page must not keep the
       flex-basis/padding rules meant for the flat carousel — they're
       grid cells now, sized by the grid track, not by --sfz-bsc-per-view.
       Spec (0,6,2) beats the flat-list rule's (0,5,2), so this wins
       regardless of source order. */
    .sfz-bsc.woocommerce ul.products .sfz-bsc__slide-grid li.product.sfz-bsc__slide {
        flex: none;
        width: 100%;
        min-width: 0;
        padding-left: 0;
        margin: 0;
    }
}

/* ── Arrows — small white circles on the left/right sides,
   vertically centered to the product image circles. ─────────────── */
.sfz-bsc__btn {
    position: absolute;
    top: 45%;                  /* aligned with the centerline of the image circle */
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid #CBD5E0;
    background: #ffffff;
    color: #1A202C;
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.sfz-bsc__btn:hover {
    background: #1A202C;
    color: #fff;
    border-color: #1A202C;
    transform: translateY(-50%) scale(1.05);
}
.sfz-bsc__btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: translateY(-50%);
}
.sfz-bsc__btn--prev { left: 14px; }
.sfz-bsc__btn--next { right: 14px; }

@media (max-width: 1024px) {
    .sfz-bsc__btn { width: 36px; height: 36px; font-size: 20px; }
}
/* Hide arrows on portrait phones — they overlap the card on small screens
   and swipe gesture works fine. Dots + autoplay still give navigation. */
@media (max-width: 700px) {
    .sfz-bsc__btn { display: none; }
}

/* ── Dots — centered row below the carousel ──────────────────────── */
.sfz-bsc__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 22px auto 0;
    padding: 0 16px;
}
.sfz-bsc__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    background: #CBD5E0;
    padding: 0;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.sfz-bsc__dot.is-active {
    background: #F22F8B;
    transform: scale(1.25);
}
.sfz-bsc__dot:hover { background: #94a3b8; }