/* 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 0 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;
}

/* ── 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;
}

.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: 400;
}

/* 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;
}

/* 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;
}

/* 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);
    }
}
@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);
    }
    .sfz-bsc__viewport { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 700px) {
    .sfz-bsc.woocommerce ul.products li.product.sfz-bsc__slide {
        flex-basis: 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;
}

/* ── 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; }