.spr-box {
        --spr-accent: #f59e0b;
        --spr-box-bg: #fafafc;
        --spr-box-border: #e8e8ee;
        --spr-title-color: #1f2937;
        --spr-card-bg: #ffffff;
        --spr-card-border: #ececf2;
        --spr-name-color: #111827;
        --spr-price-color: #334155;
        --spr-sale-color: #e11d48;
        --spr-badge-color: #e11d48;

        box-sizing: border-box; clear: both; margin: 2em 0; padding: 20px;
        background: var(--spr-box-bg); border: 1px solid var(--spr-box-border); border-radius: 16px;
        /* Size containment: the box must never stretch wider than its column,
           even when the theme wraps the content in a flex/grid container
           (Elementor columns, page builders, shop themes). This is the same
           "min-width: 0 on every flex child" rule Elementor/Swiper use. */
        min-width: 0; max-width: 100%;
        /* Last-resort guard: nothing from this box may ever widen the page
           (kills the white sideways gap on mobile in every theme). */
        overflow-x: clip;
        /* The box is always a plain vertical block: a theme that turns
           aside/figure/content children into flex/grid can no longer lay
           the title out next to the products or squeeze it vertically. */
        display: block !important;
}
.spr-box *, .spr-box *::before, .spr-box *::after { box-sizing: border-box; }
.spr-box__title {
        margin: 0 0 10px; padding-inline-start: 12px; border-inline-start: 4px solid var(--spr-accent);
        color: var(--spr-title-color);
        font-size: 1.15em; font-weight: 700; line-height: 1.6;
}
/* Gap-proof the title (fixes the white gap between the title and the
   product row): the title is a <p>, so themes style it with their own
   big paragraph margins (.entry-content p, Tailwind .prose, space-y-*),
   which used to open a tall empty strip under the title. It is forced to
   stay a compact HORIZONTAL strip that hugs its text at the inline-start
   edge (the right side in RTL), with fixed small margins. */
.spr-box .spr-box__title {
        display: block !important;
        float: none !important;
        flex: none !important;
        width: fit-content !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 10px !important;
        writing-mode: horizontal-tb !important;
}
/* No theme margin may ever open a gap right under the title ... */
.spr-box .spr-box__title + .spr-carousel-wrap,
.spr-box .spr-box__title + .spr-grid { margin-top: 0 !important; }
/* ... or between any of the box children (prose/space-y themes add
   "> * + *" margins that also hit the carousel/grid below the title). */
.spr-box > *:first-child { margin-top: 0 !important; }
.spr-box > *:last-child { margin-bottom: 0 !important; }

/* ---- Grid (card styles) ---- */
.spr-grid { display: grid; grid-template-columns: repeat(var(--spr-cols, 3), minmax(0, 1fr)); gap: 16px; min-width: 0; max-width: 100%; }
.spr-style-2 .spr-grid, .spr-style-4 .spr-grid { grid-template-columns: 1fr; }

/* ---- Card (shared) ---- */
.spr-card {
        display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none;
        background: var(--spr-card-bg); border: 1px solid var(--spr-card-border); border-radius: 12px;
        min-width: 0; max-width: 100%;
        transition: box-shadow .2s ease, transform .2s ease;
}
.spr-card:hover, .spr-card:focus-visible { box-shadow: 0 8px 22px rgba(20, 20, 40, .1); transform: translateY(-2px); }
.spr-card__media { position: relative; display: block; aspect-ratio: 1 / 1; background: #f3f3f7; }
.spr-card__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
.spr-card__badge {
        position: absolute; inset-block-start: 8px; inset-inline-start: 8px; padding: 2px 10px; z-index: 1;
        color: #fff; background: var(--spr-badge-color); border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.8;
}
.spr-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px; }
.spr-card__name {
        display: -webkit-box; overflow: hidden; color: var(--spr-name-color);
        font-size: .95em; font-weight: 600; line-height: 1.7;
        overflow-wrap: anywhere;
        -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.spr-card__price { margin-top: auto; color: var(--spr-price-color); font-size: .95em; font-weight: 700; }
.spr-card__price del { margin-inline-end: 6px; font-size: .9em; font-weight: 400; opacity: .55; }
.spr-card__price ins { color: var(--spr-sale-color); text-decoration: none; }

/* ---- Style 2: horizontal rows (list) ---- */
.spr-style-2 .spr-card { flex-direction: row; align-items: stretch; }
.spr-style-2 .spr-card__media { flex: none; width: 120px; aspect-ratio: 1 / 1; }
.spr-style-2 .spr-card__body { justify-content: center; gap: 4px; }
.spr-style-2 .spr-card__name { -webkit-line-clamp: 2; }

/* ---- Style 3: text over image ---- */
.spr-style-3 .spr-card { position: relative; border: 0; }
.spr-style-3 .spr-card:hover, .spr-style-3 .spr-card:focus-visible { transform: none; }
.spr-style-3 .spr-card__media { aspect-ratio: 4 / 3; }
.spr-style-3 .spr-card__body {
        position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1; gap: 2px; padding: 26px 12px 10px;
        background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0));
}
.spr-style-3 .spr-card__name { color: #fff; -webkit-line-clamp: 2; }
.spr-style-3 .spr-card__price { margin-top: 0; color: #fff; }
.spr-style-3 .spr-card__price del { color: rgba(255, 255, 255, .75); }
.spr-style-3 .spr-card__price ins { color: #fff; }
.spr-style-3 .spr-card__badge { inset-block-start: 10px; }

/* ---- Style 4: image beside details (compact) ---- */
.spr-style-4 .spr-card { flex-direction: row; align-items: center; }
.spr-style-4 .spr-card__media { flex: none; width: 96px; aspect-ratio: 1 / 1; background: #f3f3f7; }
.spr-style-4 .spr-card__body { justify-content: center; padding: 10px 12px; }
.spr-style-4 .spr-card__name { -webkit-line-clamp: 2; }

/* ---- Style 5: minimal cards (no frame, soft shadows) ---- */
.spr-style-5 { background: transparent; border: 0; padding-inline: 0; }
.spr-style-5 .spr-box__title { border-inline-start: 0; padding-inline-start: 0; }
.spr-style-5 .spr-card {
        border: 0; border-radius: 14px;
        box-shadow: 0 4px 18px rgba(15, 23, 42, .08);
}
.spr-style-5 .spr-card:hover, .spr-style-5 .spr-card:focus-visible { box-shadow: 0 10px 26px rgba(15, 23, 42, .14); }

/* ---- Style 6: bold accent ---- */
.spr-style-6 .spr-box__title {
        padding: 10px 16px; border: 0; border-radius: 10px;
        color: #fff; background: var(--spr-accent);
}
.spr-style-6 .spr-card { border-top: 3px solid var(--spr-accent); border-radius: 12px; }
.spr-style-6 .spr-card__price { color: var(--spr-accent); }
.spr-style-6 .spr-card__price ins { color: var(--spr-sale-color); }
.spr-style-6 .spr-card__badge { font-size: 13px; }

/* ---- Carousel: swipeable slider (best on mobile) ----
   Products sit in one horizontal, touch-scrollable row with CSS
   scroll snapping: adding more products never stacks them down.
   Every element is size-contained (min-width: 0 + max-width: 100%)
   and the card width is clamped in pixels, so no theme can ever
   stretch the box across the screen again. */
.spr-carousel-wrap { position: relative; min-width: 0; max-width: 100%; }
.spr-carousel,
.spr-carousel .spr-grid {
        display: flex; gap: 12px;
        overflow-x: auto; overflow-y: hidden;
        min-width: 0; max-width: 100%;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none; -ms-overflow-style: none;
        padding: 4px 2px 8px;
        cursor: grab;
}
.spr-carousel::-webkit-scrollbar,
.spr-carousel .spr-grid::-webkit-scrollbar { display: none; }
.spr-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }

/* flex-basis with a hard pixel ceiling: on a normal phone (~360-430px)
   this is about two cards plus a peek of the third; even inside a
   broken/stretched theme container the card can never exceed 230px. */
.spr-carousel .spr-card {
        flex: 0 0 clamp(148px, 45%, 230px);
        width: auto;
        scroll-snap-align: start;
}
.spr-carousel .spr-card:hover, .spr-carousel .spr-card:focus-visible { transform: none; }
.spr-carousel .spr-card__name { -webkit-line-clamp: 2; }

/* Navigation arrows (logical properties: they flip in RTL automatically).
   They sit INSIDE the track edges so they can never push the page wider. */
.spr-nav {
        position: absolute; inset-block-start: 50%; z-index: 2;
        display: flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; padding: 0; margin: 0; cursor: pointer;
        color: var(--spr-name-color); background: var(--spr-card-bg);
        border: 1px solid var(--spr-card-border); border-radius: 50%;
        box-shadow: 0 3px 10px rgba(20, 20, 40, .16);
        transform: translateY(-50%);
        transition: opacity .2s ease;
}
.spr-nav--prev { inset-inline-start: 2px; }
.spr-nav--next { inset-inline-end: 2px; }
.spr-nav svg {
        width: 16px; height: 16px; fill: none;
        stroke: currentColor; stroke-width: 2.5;
        stroke-linecap: round; stroke-linejoin: round;
}
[dir='rtl'] .spr-nav svg { transform: scaleX(-1); }
.spr-nav[disabled] { opacity: .35; cursor: default; }

/* Touch devices and narrow screens swipe natively: the round arrow
   buttons are hidden there (same behaviour as the Elementor /
   WooCommerce product sliders). ANY single matching signal is enough —
   some mobile browsers misreport hover/pointer capabilities, so the
   viewport-width fallback guarantees that no white button can ever
   float over the slider on a phone. Desktop (hover + mouse, wide
   screen) keeps the arrows. */
@media (hover: none), (pointer: coarse), (max-width: 782px) {
        .spr-nav { display: none !important; }
}

@media (min-width: 600px) {
        .spr-carousel .spr-card { flex-basis: clamp(180px, 31.5%, 300px); }
}
@media (min-width: 992px) {
        .spr-carousel .spr-card { flex-basis: clamp(200px, 23.5%, 320px); }
}

/* ---- Screen reader ---- */
.spr-box .screen-reader-text {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
        clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Admin settings preview ---- */
.spr-preview { max-width: 560px; margin-block: 10px 20px; }
.spr-preview__img {
        position: absolute; inset: 0; display: block;
        background: linear-gradient(135deg, #e2e8f0 0%, #f8fafc 50%, #e2e8f0 100%);
}
.spr-preview .spr-card { pointer-events: none; }

/* ---- Responsive ---- */
@media (max-width: 700px) {
        .spr-box { padding: 14px; border-radius: 14px; }
        .spr-grid { grid-template-columns: 1fr; gap: 10px; }

        /* Carousel cards: compact on phones. */
        .spr-carousel { gap: 10px; }
        .spr-carousel .spr-card__body { padding: 10px; gap: 4px; }
        .spr-carousel .spr-card__name { font-size: .9em; }
        .spr-carousel .spr-card__price { font-size: .9em; }

        /* Style 1 collapses into a compact horizontal row. */
        .spr-style-1 .spr-card { flex-direction: row; align-items: stretch; }
        .spr-style-1 .spr-card__media { flex: none; width: 96px; aspect-ratio: auto; min-height: 96px; }
        .spr-style-1 .spr-card__body { justify-content: center; }
        .spr-style-1 .spr-card__price { margin-top: 0; }

        .spr-style-2 .spr-card__media, .spr-style-4 .spr-card__media { width: 84px; }
        .spr-style-3 .spr-card__media { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
        .spr-card { transition: none; }
        .spr-card:hover, .spr-card:focus-visible { transform: none; }
}