/* EcomSaleBooster — Product Upsell Slider (frontend) */

/* Component-scoped normalization against broad theme button/form/image rules. */
.ecomsb-slider,
.ecomsb-popup-overlay {
    box-sizing: border-box;
}
.ecomsb-slider *,
.ecomsb-slider *::before,
.ecomsb-slider *::after,
.ecomsb-popup-overlay *,
.ecomsb-popup-overlay *::before,
.ecomsb-popup-overlay *::after {
    box-sizing: inherit;
}
.ecomsb-slider :is(button, input, select, textarea),
.ecomsb-popup-overlay :is(button, input, select, textarea) {
    font-family: inherit;
    letter-spacing: normal;
}
.ecomsb-slider button,
.ecomsb-popup-overlay button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    text-transform: none;
}
.ecomsb-slider {
    margin: 24px 0;
    container-type: inline-size;
    width: 100%;
    max-width: var(--ecomsb-slider-max-width, 100%);
    box-sizing: border-box;
    font-family: var(--ecomsb-font, inherit);
    background: var(--ecomsb-bg, transparent);
    border: var(--ecomsb-section-border, 0);
    border-radius: var(--ecomsb-section-radius, 0);
    padding: var(--ecomsb-section-pad, 0);
}
.ecomsb-slider__title { margin: 0 0 4px; font-size: var(--ecomsb-title-size, 1.25em); font-weight: var(--ecomsb-title-weight, 600); color: var(--ecomsb-title-color, inherit); text-align: var(--ecomsb-title-align, center); line-height: 1.25; }
.ecomsb-slider__desc { margin: 0 0 12px; opacity: .85; color: var(--ecomsb-desc-color, inherit); font-size: var(--ecomsb-desc-size, 1em); font-weight: var(--ecomsb-desc-weight, 400); text-align: var(--ecomsb-desc-align, center); line-height: 1.3; }
.ecomsb-slider__desc p { margin: 0; }
.ecomsb-slider__schedule-countdown {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0 0 12px;
    text-align: center;
    line-height: 1.35;
    font-family: var(--ecomsb-card-font, var(--ecomsb-font, inherit));
}
.ecomsb-slider__schedule-label {
    color: var(--ecomsb-schedule-label-color, #000);
    font-size: var(--ecomsb-schedule-label-size, 16px);
    font-weight: var(--ecomsb-schedule-label-weight, 700);
}
.ecomsb-slider__schedule-clock {
    color: var(--ecomsb-schedule-timer-color, #dc2626);
    font-size: var(--ecomsb-schedule-timer-size, 16px);
    font-weight: var(--ecomsb-schedule-timer-weight, 700);
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}
.ecomsb-slider__footer { margin-top: 14px; opacity: .85; }


.ecomsb-slider__viewport { position: relative; }
.ecomsb-slider__track {
    display: flex;
    gap: 14px;
    box-sizing: border-box;
    --ecomsb-cap: 99;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 20px 2px 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    user-select: none;
    touch-action: pan-x pan-y;
    cursor: grab;
}
.ecomsb-slider__track::-webkit-scrollbar { display: none; height: 0; width: 0; }

/* Smart container-aware cap: cards adapt to the width of the slot the slider is
   injected into (not just the viewport), evaluated by the browser at first paint
   so there is NO post-load jump. --ecomsb-cap caps the count; the card uses
   min(configured, cap) so it only ever REDUCES (a 1-up slider never becomes 2).
   Floor is 2 — even very narrow slots keep two cards side by side (a configured
   2-up must never collapse to a single card on mobile). A configured 1-up still
   stays 1 via the min(). */
@container (max-width: 959.98px) { .ecomsb-slider__track { --ecomsb-cap: 3; } }
@container (max-width: 717.98px) { .ecomsb-slider__track { --ecomsb-cap: 2; } }

.ecomsb-card {
    --ecomsb-n: min(var(--ecomsb-slides-d, 2), var(--ecomsb-cap, 99));
    flex: 0 0 calc((100% - (var(--ecomsb-n) - 1) * 14px) / var(--ecomsb-n));
    max-width: calc((100% - (var(--ecomsb-n) - 1) * 14px) / var(--ecomsb-n));
    box-sizing: border-box;
    font-family: var(--ecomsb-card-font, inherit);
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: visible;
    border: var(--ecomsb-card-border, 1px solid rgba(0,0,0,.10));
    border-radius: var(--ecomsb-card-radius, 10px);
    padding: 10px;
    background: var(--ecomsb-card-bg, #fff);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ecomsb-slider img { -webkit-user-drag: none; user-drag: none; }
/* Keep image overlays inside the card stacking order so sticky site headers and
   navigation remain above the slider while scrolling. */
.ecomsb-card__media-wrap { position: relative; z-index: 0; isolation: isolate; width: 100%; min-width: 0; overflow: visible; box-sizing: border-box; }

.ecomsb-card__qty-hint {
    margin-top: -2px;
    color: #dc2626;
    font-size: var(--ecomsb-qty-hint-size, 13px);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}
.ecomsb-card__media {
    display: block;
    border: 1px solid rgba(183, 183, 183, 0.66);
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
}
.ecomsb-card__media img {
    width: 100%;
    height: auto;
    display: block;
    border: 0;
    border-radius: inherit;
    box-sizing: border-box;
    object-fit: contain;
}
.ecomsb-card__media img.ecomsb-image-loading,
.ecomsb-cfg img.ecomsb-image-loading,
.ecomsb-required-product img.ecomsb-image-loading {
    background-color: #f8fafc;
    background-image: linear-gradient(100deg, rgba(226,232,240,.7) 20%, rgba(248,250,252,.95) 42%, rgba(226,232,240,.7) 64%);
    background-size: 220% 100%;
    animation: ecomsb-image-loading 1.1s linear infinite;
}
.ecomsb-card__media img.ecomsb-image-error,
.ecomsb-cfg img.ecomsb-image-error,
.ecomsb-required-product img.ecomsb-image-error { background: #f8fafc; }
@keyframes ecomsb-image-loading {
    from { background-position: 100% 0; }
    to { background-position: -120% 0; }
}

/* Rating bill — overlaid on the image, in the corner OPPOSITE the discount
   bullet (bullet = inset-inline-start, rating = inset-inline-end), so the two
   never collide; both flip automatically in RTL. */
.ecomsb-card__rating {
    position: absolute; z-index: 3; top: 8px; inset-inline-end: 8px;
    display: inline-flex; align-items: center; gap: 3px; pointer-events: none;
    padding: 2px 9px; border-radius: 999px; line-height: 1.3;
    background: var(--ecomsb-rating-bg, rgba(255,255,255,.82));
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
    font-size: .8em; font-weight: 800; direction: ltr; unicode-bidi: isolate;
}
.ecomsb-card__rating-star { color: var(--ecomsb-rating-star, #f5b50a); font-size: 1.05em; }
.ecomsb-card__rating-num  { color: var(--ecomsb-rating-num, #dc2626); }
/* RTL: move the rating to the OPPOSITE corner from the discount badge (which
   sits at the inline-start corner) so the two never collide. The pill keeps
   direction:ltr for content order, so flip its anchor explicitly here. */
[dir="rtl"] .ecomsb-card__rating { inset-inline-start: 8px; inset-inline-end: auto; }

/* Discount badge — base */
.ecomsb-card__badge {
    position: absolute; z-index: 2; white-space: normal; text-align: center; line-height: 1.3;
    background: var(--ecomsb-badge-bg, #dc2626); color: var(--ecomsb-badge-color, #fff);
    font-family: var(--ecomsb-badge-font, inherit);
    font-size: var(--ecomsb-badge-size, 12px); font-weight: var(--ecomsb-badge-weight, 700);
    box-sizing: border-box;
}
.ecomsb-card__badge-label,
.ecomsb-card__badge-suffix { display: inline; }
.ecomsb-card__badge-suffix:not(:empty)::before { content: " "; }
.ecomsb-card__badge--fixed {
    background: var(--ecomsb-fpbadge-bg, #16a34a); color: var(--ecomsb-fpbadge-color, #fff);
    font-family: var(--ecomsb-fpbadge-font, var(--ecomsb-badge-font, inherit));
    font-size: var(--ecomsb-fpbadge-size, 12px); font-weight: var(--ecomsb-fpbadge-weight, 700);
}
/* Top discount badge: centered on the upper product-media edge. Half of the
   badge overlaps the image and half floats above it, while the media wrapper's
   local stacking context keeps the badge below sticky site navigation. */
.ecomsb-card__badge--top {
    top: 0;
    left: auto;
    right: auto;
    inset-inline-start: 8px;
    inset-inline-end: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: calc(100% - 16px);
    min-width: min(68%, 210px);
    margin-inline: auto;
    padding: 5px 14px;
    border-radius: 7px;
    box-shadow: 0 3px 10px rgba(0,0,0,.22);
    overflow-wrap: anywhere;
}
/* Small bullet: compact pill in the image corner. */
.ecomsb-card__badge--bullet {
    top: 8px; inset-inline-start: 8px; padding: 2px 8px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}
/* Size presets (padding/width prominence; font px comes from the CSS var). */
.ecomsb-card__badge--top.ecomsb-card__badge--small  { padding: 3px 10px; min-width: min(50%, 160px); }
.ecomsb-card__badge--top.ecomsb-card__badge--medium { padding: 6px 18px; min-width: min(68%, 210px); }
.ecomsb-card__badge--top.ecomsb-card__badge--large  { padding: 8px 22px; min-width: min(78%, 260px); }
.ecomsb-card__badge--bullet.ecomsb-card__badge--small  { padding: 1px 6px; }
.ecomsb-card__badge--bullet.ecomsb-card__badge--medium { padding: 3px 16px; }
.ecomsb-card__badge--bullet.ecomsb-card__badge--large  { padding: 5px 30px; }
.ecomsb-card__name {
    font-size: var(--ecomsb-product-title-size, .92em); font-weight: var(--ecomsb-product-title-weight, 600);
    line-height: 1.35; text-decoration: none; color: var(--ecomsb-product-title-color, inherit); text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em;
}
.ecomsb-card__name:hover, .ecomsb-card__name:focus { color: var(--ecomsb-product-title-color, inherit); opacity: .7; }
.ecomsb-card__price { font-size: .95em; text-align: center; }
.ecomsb-card__starting {
    display: block;
    width: fit-content;
    margin: 0 auto 5px;
    padding: 2px 12px;
    line-height: 1.5;
    border-radius: var(--ecomsb-deal-label-radius, 999px);
    font-size: var(--ecomsb-deal-label-size, 12px);
    font-weight: var(--ecomsb-deal-label-weight, 600);
}
.ecomsb-card__starting--special { color: var(--ecomsb-special-text, #b45309); background: var(--ecomsb-special-bg, #fef3c7); }
.ecomsb-card__starting--from { color: var(--ecomsb-from-text, #2e7d32); background: var(--ecomsb-from-bg, #e8f5e9); }
.ecomsb-card__price del, .ecomsb-card__price del * { opacity: 1; margin-inline-end: 0; color: var(--ecomsb-old-price-color, inherit); font-size: var(--ecomsb-old-price-size, 1em); font-weight: var(--ecomsb-old-price-weight, 400); }
.ecomsb-card__insted { display: inline-block; margin: 0; opacity: .55; font-weight: var(--ecomsb-instead-weight, 400); font-size: var(--ecomsb-instead-size, 12px); color: inherit; }
.ecomsb-card__priceline { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 6px; }
.ecomsb-card__priceline > ins, .ecomsb-card__priceline > del, .ecomsb-card__price del, .ecomsb-card__price ins { white-space: nowrap; }
.ecomsb-card__price ins, .ecomsb-card__price ins * { text-decoration: none; font-size: var(--ecomsb-price-size, 1em); font-weight: var(--ecomsb-price-weight, 700); color: var(--ecomsb-price-color, #c0392b); }
.ecomsb-card__price > span:not(.ecomsb-card__starting):not(.ecomsb-card__insted):not(.ecomsb-card__priceline), .ecomsb-card__price > span:not(.ecomsb-card__starting):not(.ecomsb-card__insted):not(.ecomsb-card__priceline) * { color: var(--ecomsb-price-color, inherit); font-weight: var(--ecomsb-price-weight, 700); }
.ecomsb-card__purchase {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ecomsb-price-btn-gap, 0px);
    min-width: 0;
}
.ecomsb-card__purchase > .ecomsb-card__price,
.ecomsb-card__purchase > .ecomsb-card__btn { margin-block: 0 !important; }
.ecomsb-card__btn {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    margin-top: var(--ecomsb-price-btn-gap, auto);
    padding: 11px 16px;
    overflow: visible;
    border: 0;
    border-radius: var(--ecomsb-btn-radius, 8px);
    background: var(--ecomsb-btn-bg, #111111);
    color: var(--ecomsb-btn-color, #ffffff);
    box-shadow: none;
    font-family: inherit;
    font-size: var(--ecomsb-btn-size, 1em);
    font-weight: var(--ecomsb-btn-weight, 700);
    line-height: 1.25;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ecomsb-card__btn:hover,
.ecomsb-card__btn:focus-visible {
    background: var(--ecomsb-btn-hover-bg, var(--ecomsb-btn-bg, #111111));
    color: var(--ecomsb-btn-hover-color, var(--ecomsb-btn-color, #ffffff));
    text-decoration: none;
}

.ecomsb-slider button.ecomsb-slider__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; min-width: 0; min-height: 0; border-radius: 50%;
    border: 1px solid rgba(0,0,0,.12); background: #fff; cursor: pointer;
    font-size: 0; line-height: 0; color: #333; z-index: 5;
    margin: 0; padding: 0; box-sizing: border-box;
    -webkit-appearance: none; appearance: none; text-shadow: none;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.ecomsb-slider button.ecomsb-slider__nav .ecomsb-nav-ico { display: block; width: 13px; height: 13px; flex: 0 0 auto; stroke: #333; }
.ecomsb-slider__nav--prev { left: -6px; }
.ecomsb-slider__nav--next { right: -6px; }
.ecomsb-slider__nav[hidden] { display: none; }

.ecomsb-slider--empty p { padding: 14px; border: 1px dashed rgba(0,0,0,.2); border-radius: 8px; opacity: .7; }

.ecomsb-slider__track.is-grabbing { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }

@media (max-width: 600px) { .ecomsb-card__name { font-size: .9em; } }
/* Mobile: smaller category-tab text (~60% of desktop) + move the rating bill to
   the bottom corner so it doesn't collide with the top discount badge. */
@media (max-width: 600px) {
    .ecomsb-cat-tabs .ecomsb-cat-tab { font-size: calc(var(--ecomsb-cat-tabs-fs, 14px) * 0.75); }
    .ecomsb-card__rating { top: auto; bottom: 8px; }
    /* When a discount badge is present, stack the rating directly under it
       (same image corner) instead of the opposite bottom corner. The rating pill
       is direction:ltr, so anchor it physically per page direction to match the
       badge: LTR badge sits top-left, RTL badge sits top-right. */
    .ecomsb-card__media-wrap--has-badge .ecomsb-card__rating {
        top: 37px; bottom: auto; left: 8px; right: auto;
    }
    [dir="rtl"] .ecomsb-card__media-wrap--has-badge .ecomsb-card__rating {
        left: auto; right: 8px;
    }
    .ecomsb-popup__body address, .ecomsb-popup__body p, .ecomsb-popup__body table { margin: 0; }
}

/* ── Cart-side / lock-unlock UI ── */
.ecomsb-card__lock {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.ecomsb-card__lock-img { width: 35%; max-width: 108px; height: auto; object-fit: contain; }

.ecomsb-card__btn--locked { cursor: pointer; opacity: 0.92; }
.ecomsb-card__btn--max {
    cursor: not-allowed; opacity: 0.85;
    background: var(--ecomsb-max-btn-bg, #111111);
    color: var(--ecomsb-max-btn-color, #ffffff);
}
.ecomsb-card__btn.is-loading {
    opacity: .82;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ecomsb-card__btn-spinner {
    width: 16px; height: 16px; flex: 0 0 16px;
    border: 2px solid currentColor; border-inline-end-color: transparent;
    border-radius: 50%; animation: ecomsb-spin .7s linear infinite;
}
.ecomsb-card__footer { display: flex; flex-direction: column; gap: 8px; margin-top: var(--ecomsb-price-btn-gap, auto); align-items: stretch; }

/* Progressive loading (load more) */
.ecomsb-loadmore--card {
    background: var(--ecomsb-lm-bg, #a8323b); color: var(--ecomsb-lm-text, #fff);
    border: 0; align-items: center; justify-content: center; text-align: center;
    cursor: pointer; gap: 6px; padding: 18px 14px; min-height: 180px;
}
.ecomsb-loadmore--card .ecomsb-loadmore__icon { color: var(--ecomsb-lm-icon, #fff); line-height: 0; }
.ecomsb-loadmore--card .ecomsb-loadmore__text { font-weight: 700; font-size: 1.05em; }
.ecomsb-loadmore__meta { display: flex; flex-direction: column; gap: 2px; font-size: .82em; opacity: .9; }
.ecomsb-loadmore__cta {
    margin-top: 4px; padding: 6px 16px; border-radius: 999px; font-weight: 700; font-size: .9em;
    background: var(--ecomsb-lm-cta-bg, rgba(255,255,255,.18)); color: var(--ecomsb-lm-cta-color, #fff);
}
.ecomsb-loadmore--card.is-loading { opacity: .85; pointer-events: none; }
.ecomsb-loadmore__spinner { display: none; }
.ecomsb-loadmore.is-loading .ecomsb-loadmore__spinner {
    display: inline-block; width: 16px; height: 16px; margin-inline-start: 6px; vertical-align: middle;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: ecomsb-spin .7s linear infinite;
}
@keyframes ecomsb-spin { to { transform: rotate(360deg); } }
.ecomsb-slider__loadmore { display: flex; justify-content: center; margin-top: 12px; }
.ecomsb-loadmore--btn {
    display: inline-flex; align-items: center; cursor: pointer; border: 0; border-radius: 999px;
    padding: 10px 22px; font-weight: 700; font-size: .95em;
    background: var(--ecomsb-btn-bg, #111); color: var(--ecomsb-btn-color, #fff);
}
.ecomsb-loadmore--btn.is-loading { opacity: .75; pointer-events: none; }
.ecomsb-loadmore__count { margin-inline-start: 6px; opacity: .85; }

/* Load-more counter + per-batch range numbers */
.ecomsb-lm-meta { margin-top: 10px; text-align: center; }
.ecomsb-lm-meta__counter { font-size: .85em; opacity: .85; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.ecomsb-lm-meta__total { font-weight: 700; }
.ecomsb-lm-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.ecomsb-slider button.ecomsb-lm-page {
    border: 1px solid var(--ecomsb-dot-inactive, #cbd5e1); background: transparent; cursor: pointer;
    border-radius: 999px; padding: 2px 12px; font-size: .8em; color: #374151; opacity: .8;
    direction: ltr; unicode-bidi: isolate;
}
.ecomsb-slider button.ecomsb-lm-page.is-active { background: var(--ecomsb-dot-color, #111); color: #fff; border-color: transparent; opacity: 1; }
.ecomsb-lm-first { font-weight: 700; }
.ecomsb-lm-first::before { content: "\00AB"; margin-inline-end: 4px; }
[dir="rtl"] .ecomsb-lm-first::before { content: "\00BB"; }

.ecomsb-card__note { font-size: .82em; line-height: 1.4; opacity: .9; text-align: center; margin-top: 6px; }
.ecomsb-card__note p { margin: 0; }
.ecomsb-card__freeship-wrap { position: absolute; left: 0; right: 0; bottom: 5px; display: flex; justify-content: center; pointer-events: none; padding: 0 8px; }
.ecomsb-card__freeship { display: inline-flex; align-items: center; gap: 5px; text-align: center; font-size: var(--ecomsb-freeship-text-size, 12px) !important; font-weight: var(--ecomsb-freeship-text-weight, 600) !important; line-height: 1.4; padding: 3px 12px; border-radius: 6px; max-width: 100%; word-break: break-word; }
.ecomsb-card__freeship-icon { flex: 0 0 auto; width: 20px; height: 20px; display: block; }
.ecomsb-card__freeship-icon--image { object-fit: contain; object-position: center; }
.ecomsb-card__freeship-txt { min-width: 0; font-size: var(--ecomsb-freeship-text-size, 12px) !important; font-weight: var(--ecomsb-freeship-text-weight, 600) !important; line-height: inherit; }
.ecomsb-card__ribbon {
    overflow: hidden; white-space: nowrap; margin: 2px 0 2px; border-radius: 6px;
    background: var(--ecomsb-ribbon-bg, #d92323); color: var(--ecomsb-ribbon-color, #fff);
    font-size: .8em; font-weight: 700; line-height: 1.9;
}
.ecomsb-card__ribbon-track { display: inline-block; white-space: nowrap; will-change: transform; animation: ecomsb-ticker 12s linear infinite; }
.ecomsb-card__ribbon-item { display: inline-block; padding: 0 28px; }
.ecomsb-card:hover .ecomsb-card__ribbon-track { animation-play-state: paused; }
@keyframes ecomsb-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Pagination — modern tapering dash lines */
.ecomsb-slider__dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.ecomsb-slider button.ecomsb-slider__dot {
    width: 8px; height: 4px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--ecomsb-dot-inactive, #9ca3af); opacity: .5; box-sizing: border-box; min-width: 0; min-height: 0;
    transition: opacity .18s ease, background .18s ease, width .18s ease;
}
.ecomsb-slider button.ecomsb-slider__dot.is-near { width: 14px; height: 4px; opacity: .8; }
.ecomsb-slider button.ecomsb-slider__dot.is-active { background: var(--ecomsb-dot-color, #111); width: 28px; height: 4px; opacity: 1; }

/* Cards per view — tablet / mobile (still capped by the container via --ecomsb-cap) */
@media (max-width: 1024px) {
    .ecomsb-card { --ecomsb-n: min(var(--ecomsb-slides-t, 2), var(--ecomsb-cap, 99)); }
}
@media (max-width: 600px) {
    .ecomsb-card { --ecomsb-n: min(var(--ecomsb-slides-m, 1), var(--ecomsb-cap, 99)); }
}


/* Popups (notice + config) */
.ecomsb-popup-overlay {
    position: fixed; inset: 0; z-index: 100000; background: rgba(15,23,42,.55);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ecomsb-popup {
    background: #fff; border-radius: 14px; max-width: 460px; width: 100%;
    font-family: var(--ecomsb-font, inherit);
    box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden;
}
.ecomsb-popup--cfg { max-width: 560px; display: flex; flex-direction: column; max-height: 90vh; }
.ecomsb-popup--notice { padding: 16px 24px 24px; text-align: var(--ecomsb-notice-text-align, center); background-color: #fff; background-image: none; }
.ecomsb-popup__icon { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.ecomsb-popup__gif img { width: 240px; object-fit: contain; margin: 0 auto -16px; display: block; }
.ecomsb-popup__title { font-size: 1.15em; font-weight: 700; }
.ecomsb-popup__msg { color: #334155; margin-bottom: 16px; }
.ecomsb-popup--notice .ecomsb-popup__title { color: var(--ecomsb-notice-title-color, #000); font-family: var(--ecomsb-notice-title-font, inherit); font-size: var(--ecomsb-notice-title-size, 28px); font-weight: var(--ecomsb-notice-title-weight, 900); text-align: var(--ecomsb-notice-title-align, center); }
.ecomsb-popup--notice .ecomsb-popup__msg { color: var(--ecomsb-notice-text-color, #000); font-family: var(--ecomsb-notice-text-font, inherit); font-size: var(--ecomsb-notice-text-size, 22px); font-weight: var(--ecomsb-notice-text-weight, 700); text-align: var(--ecomsb-notice-text-align, center); }
/* Warning popup (e.g. limit reached / reference removed): yellow accent. */
.ecomsb-popup-overlay--warning .ecomsb-popup--notice { border-top: 4px solid #f59e0b; }
.ecomsb-popup-overlay--warning .ecomsb-popup__icon { color: #f59e0b; }
.ecomsb-popup-overlay--warning .ecomsb-popup__title { color: var(--ecomsb-notice-title-color, #000); }
/* Locked offer items in the mini-cart: hide the theme's quantity stepper (the
 * server clamp enforces the cap regardless of UI). The static "qty x price"
 * line stays visible. */
.ecomsb-mini-locked .quantity .qty,
.ecomsb-mini-locked input.qty,
.ecomsb-mini-locked .quantity button,
.ecomsb-mini-locked .quantity .plus,
.ecomsb-mini-locked .quantity .minus,
.ecomsb-mini-locked button.plus,
.ecomsb-mini-locked button.minus,
.ecomsb-mini-locked .wc-block-components-quantity-selector { display: none; }
/* The locked line renders a static "× N" instead of the theme stepper. Strip the
 * theme's input-style box/border/padding and collapse the wrapper spacing so it
 * reads as plain text right under the offer badge (no gap, no number-input box). */
.ecomsb-mini-locked .quantity {
    border: 0; background: none; box-shadow: none;
    padding: 0; margin: 2px 0 0; min-height: 0;
    width: auto; height: auto; display: block;
}
.ecomsb-mini-locked .ecomsb-locked-qty {
    display: inline-block; border: 0; background: none; padding: 0; margin: 0;
    font-weight: 600; line-height: 1.3; min-width: 0;
}
.ecomsb-popup-overlay .ecomsb-popup__ok, .ecomsb-popup__ok {
    background: var(--ecomsb-popup-btn-bg, #111); color: var(--ecomsb-popup-btn-color, #fff);
    border: 0; border-radius: 10px; padding: 11px 22px; font-family: var(--ecomsb-font, inherit); font-weight: 700; cursor: pointer;
    -webkit-appearance: none; appearance: none; box-sizing: border-box; min-width: 0; box-shadow: none; letter-spacing: normal; text-decoration: none; text-transform: none; text-shadow: none;
    transition: background .15s ease, filter .15s ease;
}
.ecomsb-popup-overlay .ecomsb-popup__ok:hover, .ecomsb-popup__ok:hover { background: var(--ecomsb-popup-btn-hover-bg, var(--ecomsb-popup-btn-bg, #111)); color: var(--ecomsb-popup-btn-color, #fff); }
/* Unlock notice: soft green tint fading from the top, dashed frame, and a
 * full-width OK button. Scoped to .ecomsb-popup--unlock so other notices
 * (add-to-cart, max-reached, bundle-removed) keep the default look. */
.ecomsb-popup--unlock {
    border: 2px dashed #16a34a;
    background-color: #f0fdf4;
    background-image: linear-gradient(to bottom, #dcfce7 0, #f0fdf4 150px, #ffffff 260px);
}
.ecomsb-popup--unlock .ecomsb-popup__msg { margin-bottom: 18px; }
.ecomsb-popup--unlock .ecomsb-popup__ok { display: block; width: 100%; }
.ecomsb-popup__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid rgba(0,0,0,.08);
}
.ecomsb-popup__close {
    -webkit-appearance: none; appearance: none; box-sizing: border-box;
    border: 0; box-shadow: none; cursor: pointer; font-size: 20px; line-height: 1;
    flex: 0 0 auto; min-width: 0; padding: 0; margin: 0;
    width: 32px; height: 32px; border-radius: 50%; background: #dc2626; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.ecomsb-popup__close:hover { background: #111; }
.ecomsb-popup__body { padding: 0 18px 18px; overflow-y: auto; overscroll-behavior: contain; }
.ecomsb-popup__foot { padding: 14px 18px; border-top: 1px solid rgba(0,0,0,.08); }
.ecomsb-popup__foot .ecomsb-popup__add { width: 100%; }
.ecomsb-popup-overlay .ecomsb-popup__add, .ecomsb-popup__add {
    -webkit-appearance: none; appearance: none; box-sizing: border-box; min-width: 0; box-shadow: none; font-family: inherit; letter-spacing: normal; text-decoration: none; text-transform: none;
    background: var(--ecomsb-popup-btn-bg, #111); color: var(--ecomsb-popup-btn-color, #fff);
    border: 0; border-radius: 10px; padding: 18px 22px; font-size: 1.15em; font-weight: 800; line-height: 1.2; cursor: pointer;
    transition: background .15s ease, filter .15s ease;
}
.ecomsb-popup-overlay .ecomsb-popup__add:hover, .ecomsb-popup__add:hover { background: var(--ecomsb-popup-btn-hover-bg, var(--ecomsb-popup-btn-bg, #111)); color: var(--ecomsb-popup-btn-color, #fff); filter: brightness(1.03); }
.ecomsb-cfg__notice {
    text-align: center;
    font-size: .92em;
    font-weight: 600;
    margin: 10px auto 10px;
    max-width: 420px;
    width: fit-content;
    padding: 8px 14px;
    border: 2px dashed #111111;
    border-radius: 12px;
    line-height: 1.45;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}
.ecomsb-cfg__piece + .ecomsb-cfg__piece { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(0,0,0,.12); }
.ecomsb-cfg__piece-head { text-align: center; font-weight: 700; font-size: .95em; margin-bottom: 8px; color: #111; background: var(--ecomsb-cfg-piecehead-bg, #e3f7fb); padding: 7px 12px; border-radius: 8px; }
.ecomsb-cfg__vlabel { display: block; width: fit-content; margin: 0 auto 8px; padding: 4px 14px; text-align: center; font-size: .85em; font-weight: 700; color: var(--ecomsb-cfg-vlabel-color, #374151); background: var(--ecomsb-cfg-vlabel-bg, #f3f4f6); border-radius: 8px; }
.ecomsb-cfg__vcard-drop { position: relative; display: block; width: 100%; margin-top: 6px; background: #fff; border: 1px solid var(--ecomsb-cfg-vlabel-border, #374151); border-radius: 9px; transition: background-color .15s ease; }
.ecomsb-cfg__vcard-drop:hover, .ecomsb-cfg__vcard-drop:focus-within { background: var(--ecomsb-cfg-vlabel-soft, #e4e7eb); }
.ecomsb-cfg__vcard-drop::after { content: ""; position: absolute; inset-inline-end: 11px; top: 50%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; color: var(--ecomsb-cfg-vlabel-color, #374151); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.ecomsb-cfg__vcard-drop select { width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 0; background: transparent; padding: 9px 12px; padding-inline-end: 28px; font-size: .85em; font-weight: 600; color: var(--ecomsb-cfg-vlabel-color, #374151); cursor: pointer; border-radius: 9px; }
.ecomsb-cfg__vcard.is-dim .ecomsb-cfg__vcard-drop { opacity: .8; pointer-events: none; }
.ecomsb-cfg__vcard-drop select:disabled { color: #9ca3af; cursor: not-allowed; }
.ecomsb-cfg__options { margin-bottom: 12px; }
.ecomsb-cfg__err { color: #b91c1c; font-size: 0.88em; min-height: 1em; }

/* Config popup — gallery, variation cards, description */
.ecomsb-cfg__gallery {
    --ecomsb-cfg-thumb-size: 86px;
    --ecomsb-cfg-thumb-gap: 8px;
    --ecomsb-cfg-thumb-visible: 4;
    --ecomsb-cfg-thumb-rail-padding: 3px;
    --ecomsb-cfg-thumb-nav-height: 30px;
    --ecomsb-cfg-thumb-nav-gap: 6px;
    --ecomsb-cfg-thumb-rail: calc(var(--ecomsb-cfg-thumb-size) + (var(--ecomsb-cfg-thumb-rail-padding) * 2));
    --ecomsb-cfg-thumbs-viewport-size: calc((var(--ecomsb-cfg-thumb-size) * var(--ecomsb-cfg-thumb-visible)) + (var(--ecomsb-cfg-thumb-gap) * (var(--ecomsb-cfg-thumb-visible) - 1)));
    --ecomsb-cfg-main-size: calc(var(--ecomsb-cfg-thumbs-viewport-size) + (var(--ecomsb-cfg-thumb-nav-height) * 2) + (var(--ecomsb-cfg-thumb-nav-gap) * 2));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: 18px 0 8px;
    text-align: center;
}
.ecomsb-cfg__gallery--multi {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.ecomsb-cfg__gallery--single { display: block; }

.ecomsb-cfg__main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: min(100%, var(--ecomsb-cfg-main-size));
    max-width: var(--ecomsb-cfg-main-size);
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    margin: 0;
    border: 1px solid #d7dce3;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    touch-action: pan-y;
    overscroll-behavior: contain;
}
.ecomsb-cfg__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: inherit;
    object-fit: contain;
    object-position: center;
    cursor: grab;
    -webkit-user-drag: none;
    user-select: none;
    touch-action: pan-y;
}
.ecomsb-cfg__main.is-grabbing .ecomsb-cfg__img { cursor: grabbing; }
.ecomsb-popup-overlay button.ecomsb-cfg__main-nav {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 50% !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    border: 1px solid #d7dce3 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #1f2937 !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.16) !important;
    line-height: 1 !important;
    cursor: pointer !important;
}
.ecomsb-popup-overlay button.ecomsb-cfg__main-nav:hover,
.ecomsb-popup-overlay button.ecomsb-cfg__main-nav:focus,
.ecomsb-popup-overlay button.ecomsb-cfg__main-nav:active {
    border-color: #94a3b8 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
}
.ecomsb-cfg__main-nav svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.4 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
}
.ecomsb-cfg__main-nav--prev { left: 8px !important; }
.ecomsb-cfg__main-nav--next { right: 8px !important; }
.ecomsb-cfg__thumbs-wrap {
    display: flex;
    flex: 0 0 var(--ecomsb-cfg-thumb-rail);
    flex-direction: column;
    align-items: stretch;
    gap: var(--ecomsb-cfg-thumb-nav-gap);
    width: var(--ecomsb-cfg-thumb-rail);
    min-width: var(--ecomsb-cfg-thumb-rail);
    height: var(--ecomsb-cfg-main-size);
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.ecomsb-cfg__thumbs-viewport {
    flex: 0 0 var(--ecomsb-cfg-thumbs-viewport-size);
    width: 100%;
    height: var(--ecomsb-cfg-thumbs-viewport-size);
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    touch-action: pan-y;
    overscroll-behavior: contain;
}
.ecomsb-cfg__thumbs {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--ecomsb-cfg-thumb-gap);
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 var(--ecomsb-cfg-thumb-rail-padding);
    overflow: visible;
    transform: translate3d(0, 0, 0);
    transition: transform .18s ease;
    will-change: transform;
}
.ecomsb-popup-overlay button.ecomsb-cfg__thumb-nav {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    position: static !important;
    inset: auto !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 var(--ecomsb-cfg-thumb-nav-height) !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: var(--ecomsb-cfg-thumb-nav-height) !important;
    min-height: var(--ecomsb-cfg-thumb-nav-height) !important;
    max-height: var(--ecomsb-cfg-thumb-nav-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border: 1px solid #d7dce3 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #0f172a !important;
    box-shadow: 0 1px 4px rgba(15,23,42,.12) !important;
    cursor: pointer !important;
}
.ecomsb-popup-overlay button.ecomsb-cfg__thumb-nav:hover,
.ecomsb-popup-overlay button.ecomsb-cfg__thumb-nav:focus,
.ecomsb-popup-overlay button.ecomsb-cfg__thumb-nav:active {
    border-color: #94a3b8 !important;
    background: #f8fafc !important;
    color: #020617 !important;
    box-shadow: 0 2px 6px rgba(15,23,42,.18) !important;
}
.ecomsb-popup-overlay button.ecomsb-cfg__thumb-nav[disabled] {
    opacity: .42 !important;
    cursor: default !important;
    box-shadow: none !important;
}
.ecomsb-popup-overlay button.ecomsb-cfg__thumb-nav[hidden] {
    display: none !important;
}
.ecomsb-cfg__thumb-nav svg {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.4 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
}

.ecomsb-popup-overlay button.ecomsb-cfg__thumb {
    flex: 0 0 var(--ecomsb-cfg-thumb-size) !important;
    width: var(--ecomsb-cfg-thumb-size) !important;
    min-width: var(--ecomsb-cfg-thumb-size) !important;
    max-width: var(--ecomsb-cfg-thumb-size) !important;
    height: var(--ecomsb-cfg-thumb-size) !important;
    min-height: var(--ecomsb-cfg-thumb-size) !important;
    max-height: var(--ecomsb-cfg-thumb-size) !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 3px !important;
    border: 1px solid #d7dce3 !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
.ecomsb-popup-overlay button.ecomsb-cfg__thumb:hover,
.ecomsb-popup-overlay button.ecomsb-cfg__thumb:focus { border-color: #94a3b8 !important; background: #fff !important; }
.ecomsb-popup-overlay button.ecomsb-cfg__thumb.is-active { border: 2px solid #111827 !important; padding: 2px !important; }
.ecomsb-cfg__thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #fff !important;
}
.ecomsb-cfg__price { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0; padding: 12px 18px; border-radius: 12px; border: 2px solid var(--ecomsb-price-color, #16a34a); font-size: 1.15em; line-height: 1.2; text-align: center; }
.ecomsb-cfg__desc { margin-bottom: 18px; font-size: .9em; line-height: 1.5; text-align: center; }
/* Clamp the description as a teaser. We use max-height (not -webkit-line-clamp):
   line-clamp silently fails to clamp when the description is several <p> blocks
   — as most WooCommerce descriptions are — leaving the full text shown and the
   "Show more" toggle hidden. max-height clips reliably regardless of block/inline
   content, and the JS overflow check (scrollHeight > clientHeight) then shows the
   toggle. R120 applies the final longer teaser contract below. */
.ecomsb-cfg__desc-body {
    overflow: hidden;
    max-height: 7.5em;
}
.ecomsb-cfg__desc-body > :last-child { margin-bottom: 0; }
.ecomsb-cfg__desc.is-expanded .ecomsb-cfg__desc-body {
    max-height: none;
    overflow: visible;
}
.ecomsb-popup-overlay button.ecomsb-cfg__desc-toggle {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 6px auto 0;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    background: var(--ecomsb-cfg-show-more-bg, #f3f4f6);
    color: var(--ecomsb-cfg-show-more-color, #111827);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.ecomsb-popup-overlay button.ecomsb-cfg__desc-toggle[hidden] {
    display: none;
}
.ecomsb-cfg__variations { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; justify-content: center; }
.ecomsb-cfg__vcard { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; flex: 1 1 calc((100% - 20px) / 3); max-width: calc((100% - 20px) / 3); min-width: 0; border: 2px solid #e5e7eb; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s ease, opacity .15s ease; }
.ecomsb-cfg__vcard.is-dim { opacity: .45; }
.ecomsb-cfg__variations.has-drop .ecomsb-cfg__vcard { min-width: 0; }
.ecomsb-cfg__variations.is-choosing .ecomsb-cfg__vcard { opacity: .5; }
.ecomsb-cfg__variations.is-choosing .ecomsb-cfg__vcard.is-active { opacity: 1; border-color: var(--ecomsb-cfg-vlabel-border, #374151); }
.ecomsb-cfg__vcard-img { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; display: block; background: #f8f8f8; }
.ecomsb-cfg__vcard-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ecomsb-cfg__vcard-label { font-size: .9em; font-weight: 700; text-align: center; color: var(--ecomsb-cfg-vlabel-color, #374151); }

/* Config popup — vertical thumbnail rail, highlighted price, addon instructions, qty */
.ecomsb-cfg__pricebar {
    position: sticky; top: 0; z-index: 6;
    margin: 0 -18px 14px; padding: 12px 18px 14px;
    background: #fff; border-bottom: 1px solid rgba(0,0,0,.06);
}
.ecomsb-cfg__price-val { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px; }
.ecomsb-cfg__deal-label { display: inline-flex; }
.ecomsb-cfg__deal-label .ecomsb-card__starting { margin: 0; }
.ecomsb-cfg__insted { opacity: .6; font-weight: 400; margin: 0 8px; font-size: .8em; }
.ecomsb-cfg__pct { display: inline-flex; align-items: center; margin-inline-start: 6px; padding: 5px 12px; border-radius: 9px; background: #e7f6ec; color: #16a34a; font-size: .92em; font-weight: 800; white-space: nowrap; }
@media (max-width: 600px) { .ecomsb-cfg__pct { font-size: .72em; padding: 4px 11px; border-radius: 8px; } }
/* Compact the configurator popup on mobile so it doesn't fill the whole screen
   (the hero image was the main height driver). ~70% of the previous height. */
@media (max-width: 600px) {
    .ecomsb-popup--cfg { max-height: 78vh; }
    .ecomsb-cfg__gallery {
        --ecomsb-cfg-thumb-size: 55px;
        --ecomsb-cfg-thumb-gap: 6px;
        --ecomsb-cfg-thumb-visible: 4;
        --ecomsb-cfg-thumb-rail-padding: 2px;
        --ecomsb-cfg-thumb-nav-height: 25px;
        --ecomsb-cfg-thumb-nav-gap: 4px;
        --ecomsb-cfg-thumb-rail: calc(var(--ecomsb-cfg-thumb-size) + (var(--ecomsb-cfg-thumb-rail-padding) * 2));
        --ecomsb-cfg-thumbs-viewport-size: calc((var(--ecomsb-cfg-thumb-size) * var(--ecomsb-cfg-thumb-visible)) + (var(--ecomsb-cfg-thumb-gap) * (var(--ecomsb-cfg-thumb-visible) - 1)));
        --ecomsb-cfg-main-size: calc(var(--ecomsb-cfg-thumbs-viewport-size) + (var(--ecomsb-cfg-thumb-nav-height) * 2) + (var(--ecomsb-cfg-thumb-nav-gap) * 2));
        gap: 7px;
    }
    .ecomsb-popup-overlay button.ecomsb-cfg__thumb-nav svg {
        width: 14px !important;
        height: 14px !important;
    }
    .ecomsb-cfg__main { min-height: 0; }
    .ecomsb-cfg__img { min-height: 0; max-height: none; }
    .ecomsb-cfg__piece + .ecomsb-cfg__piece { margin-top: 10px; padding-top: 10px; }
    .ecomsb-cfg__piece-head { padding: 5px 10px; margin-bottom: 6px; }
}
.ecomsb-cfg__desc, .ecomsb-cfg__desc * { text-align: center; }
.ecomsb-cfg__price del, .ecomsb-cfg__price del .amount { color: var(--ecomsb-old-price-color, #9ca3af); font-size: calc(var(--ecomsb-old-price-size, 14px) * 1.5); font-weight: var(--ecomsb-old-price-weight, 500); text-decoration: line-through; margin-inline-end: 0; }
.ecomsb-cfg__price ins, .ecomsb-cfg__price ins .amount, .ecomsb-cfg__price-val > .amount, .ecomsb-cfg__price > .amount { color: var(--ecomsb-price-color, #dc2626); font-size: calc(var(--ecomsb-price-size, 20px) * 1.5); font-weight: var(--ecomsb-price-weight, 800); text-decoration: none; }
.ecomsb-cfg__price-add { color: #16a34a; font-weight: 700; white-space: nowrap; margin-inline-start: 4px; }
.ecomsb-cfg__price-add .amount { color: #16a34a; }
.ecomsb-cfg__price-eq { font-weight: 800; white-space: nowrap; margin-inline-start: 4px; }

.ecomsb-cfg__addons-instr { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; font-weight: 700; margin: 12px 0; padding-bottom: 10px; }
.ecomsb-cfg__instr-arrow { flex: 0 0 auto; width: 12px; height: 12px; border-right: 3px solid #dc2626; border-bottom: 3px solid #dc2626; animation: ecomsb-arrow-bob 1s ease-in-out infinite; }
@keyframes ecomsb-arrow-bob { 0%, 100% { transform: rotate(45deg) translate(-2px, -2px); } 50% { transform: rotate(45deg) translate(3px, 3px); } }

.ecomsb-cfg__qty { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto; padding: 8px; padding-inline-start: 20px; padding-inline-end: 10px; width: fit-content; max-width: 100%; border: 0; border-radius: 999px; background: var(--ecomsb-cfg-qty-bg, #111); }
.ecomsb-cfg__qty[hidden] { display: none; }
.ecomsb-cfg__qty-label { font-size: 1em; font-weight: 800; color: var(--ecomsb-popup-btn-color, #fff); }
.ecomsb-cfg__stepper { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 0; border-radius: 999px; padding: 4px; }
.ecomsb-cfg__qty-minus, .ecomsb-cfg__qty-plus { width: 38px; height: 38px; border: 0; background: transparent; font-size: 22px; cursor: pointer; line-height: 1; border-radius: 50%; color: #111; }
.ecomsb-cfg__qty-minus:hover, .ecomsb-cfg__qty-plus:hover { background: rgba(0,0,0,.08); }
.ecomsb-cfg__qty-val { min-width: 38px; text-align: center; font-weight: 800; font-size: 1.1em; color: #111; }
.ecomsb-popup__foot .ecomsb-cfg__err { text-align: center; color: #b91c1c; font-size: .9em; margin-bottom: 8px; min-height: 0; }


/* ----------------------------------------------------------------------
 * Category Tabs (Slider) — pills bar above the viewport. Colours/sizing
 * come from per-offer CSS vars (set inline by the renderer); the values
 * below are the defaults: active = black/white, inactive = gray/white,
 * hover = darker gray, bar = white, pills, 14px, radius 12.
 * ------------------------------------------------------------------- */
.ecomsb-cat-tabs {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
    margin: 0 0 8px; padding: 4px;
    background: var(--ecomsb-cat-tabs-bar-bg, #ffffff);
    border-radius: var(--ecomsb-cat-tabs-bar-radius, 12px);
}
.ecomsb-cat-tab {
    appearance: none; border: 0; cursor: pointer;
    font-family: var(--ecomsb-card-font, var(--ecomsb-font, inherit));
    font-size: var(--ecomsb-cat-tabs-fs, 14px); font-weight: 600; line-height: 1.2;
    padding: 8px 16px;
    border-radius: var(--ecomsb-cat-tab-radius, 12px);
    background: var(--ecomsb-cat-tab-bg, #6b7280);
    color: var(--ecomsb-cat-tab-color, #ffffff);
    transition: background .18s ease, color .18s ease, opacity .18s ease;
}
.ecomsb-cat-tab:hover {
    background: var(--ecomsb-cat-tab-hover-bg, #4b5563);
    color: var(--ecomsb-cat-tab-hover-color, #ffffff);
}
.ecomsb-cat-tab.is-active {
    background: var(--ecomsb-cat-tab-active-bg, #111827);
    color: var(--ecomsb-cat-tab-active-color, #ffffff);
}
.ecomsb-cat-tab.is-loading { opacity: .6; cursor: default; }
.ecomsb-cat-tabs--underline { background: transparent; padding: 0; border-radius: 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.ecomsb-cat-tabs--underline .ecomsb-cat-tab { background: transparent; color: var(--ecomsb-cat-tab-color, #374151); border-radius: 0; border-bottom: 2px solid transparent; padding: 8px 12px; }
.ecomsb-cat-tabs--underline .ecomsb-cat-tab:hover { background: transparent; color: var(--ecomsb-cat-tab-hover-color, #111827); }
.ecomsb-cat-tabs--underline .ecomsb-cat-tab.is-active { background: transparent; color: var(--ecomsb-cat-tab-active-color, #111827); border-bottom-color: var(--ecomsb-cat-tab-active-color, #111827); }
.ecomsb-cat-tabs--minimal { background: transparent; padding: 0; }
.ecomsb-cat-tabs--minimal .ecomsb-cat-tab { background: transparent; color: var(--ecomsb-cat-tab-color, #374151); padding: 6px 12px; }
.ecomsb-cat-tabs--minimal .ecomsb-cat-tab:hover { background: transparent; color: var(--ecomsb-cat-tab-hover-color, #111827); }
.ecomsb-cat-tabs--minimal .ecomsb-cat-tab.is-active { background: transparent; color: var(--ecomsb-cat-tab-active-color, #111827); text-decoration: underline; text-underline-offset: 4px; }
.ecomsb-slider.ecomsb-cat-tabs-loading .ecomsb-slider__track { opacity: .5; transition: opacity .18s ease; }

/* Advanced → Performance: Reduce Motion (global toggle). Strips transitions,
   animations and hover transforms inside the slider for weak devices. */
.ecomsb-slider.ecomsb-reduce-motion,
.ecomsb-slider.ecomsb-reduce-motion * {
    transition: none;
    animation: none;
    scroll-behavior: auto;
}
.ecomsb-slider.ecomsb-reduce-motion .ecomsb-card:hover {
    transform: none;
}

/* Smart locked-requirement notice and lazy Required Products list. */
.ecomsb-popup--requirement {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 520px;
    padding: 0;
    overflow: hidden;
    border: 2px solid rgba(22, 163, 74, .28);
    background-color: #ffffff;
    background-image: linear-gradient(180deg, #dcfce7 0, #f0fdf4 118px, #ffffff 230px);
}
.ecomsb-popup--requirement > .ecomsb-popup__close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
}
.ecomsb-popup--requirement .ecomsb-popup__icon { margin-top: 8px; }
.ecomsb-requirement__scroll {
    min-height: 0;
    padding: 16px 24px 0;
    overflow-y: hidden;
    overscroll-behavior: contain;
}
.ecomsb-popup--requirement.is-scrollable .ecomsb-requirement__scroll { overflow-y: auto; }
.ecomsb-requirement__footer {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    padding: 10px 24px 24px;
    background: #fff;
    box-shadow: 0 -10px 22px rgba(15, 23, 42, .06);
}
.ecomsb-popup--requirement .ecomsb-requirement__stop-icon {
    display: inline-block;
    margin: 10px auto 14px;
    font-size: 64px;
    line-height: 1;
    transform-origin: 50% 90%;
    animation: ecomsb-requirement-stop-wave 1.15s ease-in-out infinite;
    filter: drop-shadow(0 6px 10px rgba(22, 101, 52, .16));
}
.ecomsb-popup--requirement .ecomsb-popup__msg {
    margin: 0 auto 16px;
    max-width: 440px;
    line-height: 1.72;
}
.ecomsb-requirement__message {
    color: var(--ecomsb-requirement-text-color, #000000);
    font-size: var(--ecomsb-requirement-text-size, 16px);
    font-weight: var(--ecomsb-requirement-text-weight, 700);
    text-align: center;
    unicode-bidi: plaintext;
    overflow-wrap: anywhere;
}
.ecomsb-requirement__token {
    display: inline-block;
    max-width: 100%;
    margin: 3px 3px;
    padding: 3px 9px;
    border: 1px solid rgba(22, 101, 52, .18);
    border-radius: 9px;
    background: #fff;
    color: var(--ecomsb-requirement-name-color, #dd3333);
    box-shadow: 0 2px 8px rgba(15,23,42,.05);
    font-size: var(--ecomsb-requirement-name-size, 16px);
    font-weight: var(--ecomsb-requirement-name-weight, 700);
    line-height: 1.45;
    unicode-bidi: isolate;
    vertical-align: middle;
    overflow-wrap: anywhere;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.ecomsb-requirement__token--locked { border-color: rgba(22, 163, 74, .34); }
@keyframes ecomsb-requirement-stop-wave {
    0%, 100% { transform: translateX(-3px) rotate(-8deg); }
    50% { transform: translateX(3px) rotate(8deg); }
}
.ecomsb-requirement__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
    margin: 0 0 16px;
}
.ecomsb-requirement__category-group {
    display: grid;
    gap: 9px;
    padding: 11px;
    border: 1px solid rgba(15, 23, 42, .16);
    border-radius: 12px;
    background: #fff;
}
.ecomsb-requirement__category-heading {
    color: #334155;
    font-size: .9em;
    font-weight: 800;
    text-align: center;
}
.ecomsb-requirement__category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.ecomsb-requirement__category-grid > .ecomsb-requirement__category-link:nth-child(odd):last-child {
    grid-column: 1 / -1;
}
.ecomsb-requirement__category-link,
.ecomsb-requirement__view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 16px;
    border-radius: 10px;
    font-family: var(--ecomsb-font, inherit);
    font-size: .95em;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
}
.ecomsb-requirement__category-link {
    min-width: 0;
    padding-inline: 9px;
    border: 1px solid rgba(15, 23, 42, .18);
    background: #fff;
    color: #111827;
}
.ecomsb-requirement__category-link:hover,
.ecomsb-requirement__category-link:focus {
    border-color: #111827;
    background: #f8fafc;
    color: #111827;
}
.ecomsb-requirement__view-all {
    appearance: none;
    border: 0;
    background: var(--ecomsb-popup-btn-bg, #111);
    color: var(--ecomsb-popup-btn-color, #fff);
}
.ecomsb-requirement__view-all:hover,
.ecomsb-requirement__view-all:focus {
    background: var(--ecomsb-popup-btn-hover-bg, var(--ecomsb-popup-btn-bg, #111));
    color: var(--ecomsb-popup-btn-color, #fff);
}
.ecomsb-popup--requirement .ecomsb-popup__ok {
    width: 100%;
    min-height: 45px;
    padding: 18px 20px;
    font-size: 16px;
    line-height: 1.2;
}

.ecomsb-popup--required-products {
    max-width: 640px;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
}
.ecomsb-popup--required-products .ecomsb-popup__head { flex: 0 0 auto; }
.ecomsb-required-products__body {
    min-height: 140px;
    padding: 16px 18px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.ecomsb-required-products__status {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 108px;
    padding: 12px;
    color: #475569;
    font-weight: 700;
    text-align: center;
}
.ecomsb-required-products__status.is-loading::before {
    content: "";
    width: 20px;
    height: 20px;
    margin-inline-end: 10px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: ecomsb-spin .7s linear infinite;
}

.ecomsb-popup-overlay--journey-redirect {
    z-index: 100020;
}
.ecomsb-popup--journey-redirect {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: min(360px, 100%);
    padding: 24px 28px;
    color: #0f172a;
    text-align: center;
}
.ecomsb-journey-redirect__spinner {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 3px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: ecomsb-spin .7s linear infinite;
}
.ecomsb-journey-redirect__text {
    min-width: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.45;
}
.ecomsb-required-products__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.ecomsb-required-product {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 12px;
    background: #fff;
    color: #111827;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ecomsb-required-product:hover,
.ecomsb-required-product:focus {
    border-color: rgba(15, 23, 42, .35);
    box-shadow: 0 7px 20px rgba(15, 23, 42, .10);
    color: #111827;
    transform: translateY(-1px);
}
.ecomsb-required-product__image {
    display: block;
    width: 82px;
    height: 82px;
    box-sizing: border-box;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 9px;
    background: #f8fafc;
    object-fit: contain;
}
.ecomsb-required-product__image--empty::before {
    content: "\1F4E6";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 28px;
    opacity: .45;
}
.ecomsb-required-product__name {
    min-width: 0;
    color: inherit;
    font-size: .95em;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.ecomsb-required-product--skeleton {
    pointer-events: none;
    overflow: hidden;
}
.ecomsb-required-product--skeleton .ecomsb-required-product__image,
.ecomsb-required-product__skeleton-copy i {
    position: relative;
    overflow: hidden;
    background: #eef2f7;
}
.ecomsb-required-product--skeleton .ecomsb-required-product__image::after,
.ecomsb-required-product__skeleton-copy i::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
    animation: ecomsb-required-products-shimmer 1.1s infinite;
}
.ecomsb-required-product__skeleton-copy { display: grid; gap: 9px; }
.ecomsb-required-product__skeleton-copy i { display: block; height: 12px; border-radius: 999px; }
.ecomsb-required-product__skeleton-copy i:last-child { width: 68%; }
@keyframes ecomsb-required-products-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    .ecomsb-popup--requirement .ecomsb-requirement__stop-icon,
    .ecomsb-image-loading,
    .ecomsb-required-product--skeleton .ecomsb-required-product__image::after,
    .ecomsb-required-product__skeleton-copy i::after { animation: none !important; }
}
@media (max-width: 600px) {
    .ecomsb-popup--requirement {
        max-height: min(80dvh, calc(100dvh - max(18px, env(safe-area-inset-top, 0px)) - max(18px, env(safe-area-inset-bottom, 0px))));
        padding: 0;
        overflow: hidden;
    }
    .ecomsb-requirement__scroll { padding: 12px 14px 0; }
    .ecomsb-requirement__footer {
        padding: 8px 14px max(14px, env(safe-area-inset-bottom, 0px));
    }
    .ecomsb-popup--requirement .ecomsb-requirement__stop-icon { font-size: 56px; }
    .ecomsb-popup--requirement .ecomsb-popup__msg { font-size: min(var(--ecomsb-notice-text-size, 22px), 18px); }
    .ecomsb-popup--required-products {
        max-height: min(
            76dvh,
            calc(
                100dvh
                - 120px
                - env(safe-area-inset-top, 0px)
                - env(safe-area-inset-bottom, 0px)
            )
        );
    }
    .ecomsb-required-products__list { grid-template-columns: 1fr; }
    .ecomsb-required-product { grid-template-columns: 72px minmax(0, 1fr); }
    .ecomsb-required-product__image { width: 72px; height: 72px; }
}

/* Required Products instruction and safe journey activation. */
.ecomsb-required-products__status.is-instruction {
    min-height: 0;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(22, 163, 74, .18);
    border-radius: 10px;
    background: rgba(22, 163, 74, .07);
    color: #334155;
    line-height: 1.55;
}
.ecomsb-required-product.is-loading,
.ecomsb-requirement__category-link.is-loading {
    opacity: .68;
    pointer-events: none;
}

/* structured locked-requirement notice. */
.ecomsb-requirement__message.is-structured {
    display: grid;
    gap: 7px;
    max-width: 455px;
    margin-inline: auto;
}
.ecomsb-requirement__line {
    display: block;
    color: var(--ecomsb-requirement-text-color, #000000);
    font-size: var(--ecomsb-requirement-text-size, 16px);
    font-weight: var(--ecomsb-requirement-text-weight, 700);
    line-height: 1.7;
    text-align: center;
    unicode-bidi: plaintext;
    overflow-wrap: anywhere;
}
.ecomsb-requirement__line--primary,
.ecomsb-requirement__line--categories,
.ecomsb-requirement__line--purchase {
    width: 100%;
}
.ecomsb-requirement__line--lead,
.ecomsb-requirement__line--category-lead,
.ecomsb-requirement__line--purchase {
    line-height: 1.35;
}
.ecomsb-requirement__line--product,
.ecomsb-requirement__line--category-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.ecomsb-requirement__line--category-chips .ecomsb-requirement__inline-chips {
    width: 100%;
}
.ecomsb-requirement__inline-chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    max-width: 100%;
    vertical-align: middle;
}
.ecomsb-requirement__separator {
    color: var(--ecomsb-requirement-text-color, #000000);
    font-size: var(--ecomsb-requirement-text-size, 16px);
    font-weight: var(--ecomsb-requirement-text-weight, 700);
}
.ecomsb-requirement__message.is-structured .ecomsb-requirement__token {
    margin: 2px 1px;
}
.ecomsb-requirement__message.is-structured .ecomsb-requirement__token--locked {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0 0;
    padding: 10px 14px;
    border: 2px dashed #f97316;
    border-radius: 11px;
    background: #fff7ed;
    color: var(--ecomsb-requirement-name-color, #dd3333);
    font-size: var(--ecomsb-requirement-name-size, 16px);
    font-weight: var(--ecomsb-requirement-name-weight, 700);
    line-height: 1.45;
    box-shadow: none;
}
.ecomsb-requirement__line--locked {
    width: 100%;
}
.ecomsb-requirement__category-link,
.ecomsb-requirement__category-link:visited {
    min-height: 58px;
    padding: 8px 5px;
    border-color: #15803d;
    font-size: 13px;
    line-height: 1.15;
    white-space: nowrap;
    background: #15803d;
    color: #fff;
    box-shadow: 0 4px 10px rgba(21, 128, 61, .14);
}
.ecomsb-requirement__category-link:hover,
.ecomsb-requirement__category-link:focus-visible {
    border-color: #166534;
    background: #166534;
    color: #fff;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .ecomsb-requirement__category-link,
    .ecomsb-requirement__category-link:visited {
        min-height: 58px;
        padding-inline: 4px;
        font-size: clamp(10px, 2.9vw, 12px);
    }
}



/* configuration quantity stepper geometry is
   component-owned and must not inherit theme button dimensions or colours. */
.ecomsb-popup-overlay .ecomsb-cfg__stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
}
.ecomsb-popup-overlay button.ecomsb-cfg__qty-minus,
.ecomsb-popup-overlay button.ecomsb-cfg__qty-plus {
    display: inline-grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #111;
    box-shadow: none;
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    transform: none;
}
.ecomsb-popup-overlay button.ecomsb-cfg__qty-minus:hover,
.ecomsb-popup-overlay button.ecomsb-cfg__qty-minus:focus-visible,
.ecomsb-popup-overlay button.ecomsb-cfg__qty-plus:hover,
.ecomsb-popup-overlay button.ecomsb-cfg__qty-plus:focus-visible {
    background: rgba(0, 0, 0, .08);
    color: #111;
    box-shadow: none;
    filter: none;
    transform: none;
}
.ecomsb-popup-overlay .ecomsb-cfg__qty-val {
    min-width: 38px;
    color: #111;
    font-family: inherit;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

/* Elessi/hostile-theme Slider popup ownership.
   High-specificity component selectors handle geometry. !important remains
   limited to the observed late theme hover/disabled colours and notice weights. */
.ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg button.ecomsb-popup__add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 58px;
    height: auto;
    margin: 0;
    padding: 14px 22px;
    border: 0;
    border-radius: 10px;
    background-color: var(--ecomsb-popup-btn-bg, #111);
    background-image: none;
    color: var(--ecomsb-popup-btn-color, #fff);
    box-shadow: none;
    font-family: var(--ecomsb-font, inherit);
    font-size: 1.15em;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: normal;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    filter: none;
    transform: none;
}
.ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg button.ecomsb-popup__add:hover,
.ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg button.ecomsb-popup__add:focus-visible {
    background-color: var(--ecomsb-popup-btn-hover-bg, var(--ecomsb-popup-btn-bg, #111)) !important;
    background-image: none !important;
    color: var(--ecomsb-popup-btn-color, #fff) !important;
    box-shadow: none;
    filter: none;
    transform: none;
}
.ecomsb-slider button.ecomsb-card__btn.ecomsb-card__btn--max:disabled,
.ecomsb-slider button.ecomsb-card__btn.ecomsb-card__btn--max:disabled:hover,
.ecomsb-slider button.ecomsb-card__btn.ecomsb-card__btn--max:disabled:focus {
    background-color: var(--ecomsb-max-btn-bg, var(--ecomsb-btn-bg, #111111)) !important;
    background-image: none !important;
    color: var(--ecomsb-max-btn-color, var(--ecomsb-btn-color, #ffffff)) !important;
    opacity: 1 !important;
    box-shadow: none;
    filter: none;
    transform: none;
}
.ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--notice,
.ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--notice * {
    font-synthesis: none;
}
.ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--notice .ecomsb-popup__title {
    font-weight: var(--ecomsb-notice-title-weight, 900) !important;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
}
.ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--notice .ecomsb-popup__msg {
    font-weight: var(--ecomsb-notice-text-weight, 400) !important;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
}


/* Slider popup, notice and CTA critical contracts. */
body .ecomsb-popup-overlay .ecomsb-popup button.ecomsb-popup__close {
    width: 36px !important; min-width: 36px !important; max-width: 36px !important;
    height: 36px !important; min-height: 36px !important; max-height: 36px !important;
    padding: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: #ef4444 !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
    opacity: 1 !important; line-height: 1 !important; box-shadow: none !important; filter: none !important; transform: none !important;
}
body .ecomsb-popup-overlay .ecomsb-popup button.ecomsb-popup__close:is(:hover, :focus-visible, :active) { background: #dc2626 !important; }
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--notice .ecomsb-popup__title {
    color: var(--ecomsb-notice-title-color, #000) !important;
    font-family: var(--ecomsb-notice-title-font, var(--ecomsb-font, inherit)) !important;
    font-size: var(--ecomsb-notice-title-size, 28px) !important;
    font-weight: var(--ecomsb-notice-title-weight, 900) !important;
    line-height: 1.25 !important; letter-spacing: normal !important;
    text-align: var(--ecomsb-notice-title-align, center) !important; text-transform: none !important;
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--requirement {
    --ecomsb-notice-text-color: var(--ecomsb-requirement-text-color, #000000);
    --ecomsb-notice-text-size: var(--ecomsb-requirement-text-size, 16px);
    --ecomsb-notice-text-weight: var(--ecomsb-requirement-text-weight, 700);
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--notice :is(.ecomsb-popup__msg, .ecomsb-requirement__message, .ecomsb-requirement__line, .ecomsb-requirement__separator) {
    color: var(--ecomsb-notice-text-color, #000) !important;
    font-family: var(--ecomsb-notice-text-font, var(--ecomsb-font, inherit)) !important;
    font-size: var(--ecomsb-notice-text-size, 22px) !important;
    font-weight: var(--ecomsb-notice-text-weight, 700) !important;
    line-height: 1.5 !important; letter-spacing: normal !important;
    text-align: var(--ecomsb-notice-text-align, center) !important; text-transform: none !important;
}
body .ecomsb-popup-overlay .ecomsb-popup :is(button.ecomsb-popup__ok, button.ecomsb-popup__add, button.ecomsb-requirement__view-all) {
    border: 0 !important; background-color: var(--ecomsb-popup-btn-bg, #111) !important; background-image: none !important;
    color: var(--ecomsb-popup-btn-color, #fff) !important; -webkit-text-fill-color: var(--ecomsb-popup-btn-color, #fff) !important;
    box-shadow: none !important; opacity: 1 !important; font-weight: 800 !important; line-height: 1.2 !important;
    letter-spacing: normal !important; text-decoration: none !important; text-transform: none !important; filter: none !important; transform: none !important;
}
body .ecomsb-popup-overlay .ecomsb-popup :is(button.ecomsb-popup__ok, button.ecomsb-popup__add, button.ecomsb-requirement__view-all):is(:hover, :focus-visible, :active):not(:disabled) {
    background-color: var(--ecomsb-popup-btn-hover-bg, var(--ecomsb-popup-btn-bg, #111)) !important;
}
/* Locked requirement copy owns separate typography for readable message
   text and emphasized product/category names. The secondary View All action
   intentionally inverts the primary button's normal/hover backgrounds. */
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--requirement .ecomsb-requirement__token {
    color: var(--ecomsb-requirement-name-color, #dd3333) !important;
    font-family: var(--ecomsb-notice-text-font, var(--ecomsb-font, inherit)) !important;
    font-size: var(--ecomsb-requirement-name-size, 16px) !important;
    font-weight: var(--ecomsb-requirement-name-weight, 700) !important;
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--notice button.ecomsb-requirement__view-all {
    background-color: var(--ecomsb-popup-btn-hover-bg, var(--ecomsb-popup-btn-bg, #111)) !important;
    color: var(--ecomsb-popup-btn-color, #fff) !important;
    -webkit-text-fill-color: var(--ecomsb-popup-btn-color, #fff) !important;
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--notice button.ecomsb-requirement__view-all:is(:hover, :focus-visible, :active):not(:disabled) {
    background-color: var(--ecomsb-popup-btn-bg, #111) !important;
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg button.ecomsb-popup__add { min-height: 58px !important; padding: 14px 22px !important; border-radius: 10px !important; }
body .ecomsb-slider button.ecomsb-card__btn {
    border: 0 !important; background-color: var(--ecomsb-btn-bg, #111) !important; background-image: none !important;
    color: var(--ecomsb-btn-color, #fff) !important; -webkit-text-fill-color: var(--ecomsb-btn-color, #fff) !important;
    box-shadow: none !important; opacity: 1 !important; font-weight: var(--ecomsb-btn-weight, 700) !important; line-height: 1.25 !important;
    letter-spacing: normal !important; text-transform: none !important; filter: none !important; transform: none !important;
}
body .ecomsb-slider button.ecomsb-card__btn:is(:hover, :focus-visible, :active):not(:disabled) {
    background-color: var(--ecomsb-btn-hover-bg, var(--ecomsb-btn-bg, #111)) !important;
    color: var(--ecomsb-btn-hover-color, var(--ecomsb-btn-color, #fff)) !important;
    -webkit-text-fill-color: var(--ecomsb-btn-hover-color, var(--ecomsb-btn-color, #fff)) !important;
}
body .ecomsb-slider button.ecomsb-card__btn.ecomsb-card__btn--max:disabled {
    background-color: var(--ecomsb-max-btn-bg, var(--ecomsb-btn-bg, #111)) !important;
    color: var(--ecomsb-max-btn-color, var(--ecomsb-btn-color, #fff)) !important;
    -webkit-text-fill-color: var(--ecomsb-max-btn-color, var(--ecomsb-btn-color, #fff)) !important; opacity: 1 !important;
}


/* typography inheritance and locked-state contract.
   General Typography owns the storefront font family. Component-specific size,
   weight and colour variables remain authoritative. */
body .ecomsb-slider,
body .ecomsb-popup-overlay .ecomsb-popup {
    font-family: var(--ecomsb-font, inherit) !important;
    font-synthesis: none;
}
body .ecomsb-slider :is(.ecomsb-slider__title, .ecomsb-slider__desc, .ecomsb-slider__footer) {
    font-family: var(--ecomsb-font, inherit) !important;
    font-synthesis: none;
    letter-spacing: normal !important;
    text-transform: none !important;
}
body .ecomsb-slider .ecomsb-slider__title {
    font-size: var(--ecomsb-title-size, 1.25em) !important;
    font-weight: var(--ecomsb-title-weight, 600) !important;
    line-height: 1.25 !important;
}
body .ecomsb-slider .ecomsb-slider__desc {
    font-size: var(--ecomsb-desc-size, 1em) !important;
    font-weight: var(--ecomsb-desc-weight, 400) !important;
    line-height: 1.4 !important;
}
body .ecomsb-slider .ecomsb-card {
    font-family: var(--ecomsb-card-font, var(--ecomsb-font, inherit)) !important;
    font-synthesis: none;
}
body .ecomsb-slider .ecomsb-card :is(.ecomsb-card__name, .ecomsb-card__price, .ecomsb-card__starting, .ecomsb-card__qty-hint, .ecomsb-card__note, button.ecomsb-card__btn) {
    font-family: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
body .ecomsb-slider .ecomsb-card .ecomsb-card__name {
    font-size: var(--ecomsb-product-title-size, .92em) !important;
    font-weight: var(--ecomsb-product-title-weight, 600) !important;
    line-height: 1.35 !important;
}
body .ecomsb-slider .ecomsb-card .ecomsb-card__qty-hint {
    margin-top: -2px !important;
    color: #dc2626 !important;
    -webkit-text-fill-color: #dc2626 !important;
    font-size: var(--ecomsb-qty-hint-size, 13px) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: center !important;
}
body .ecomsb-slider button.ecomsb-card__btn.ecomsb-card__btn--locked,
body .ecomsb-slider button.ecomsb-card__btn.ecomsb-card__btn--locked:is(:hover, :focus-visible, :active) {
    border-width: var(--ecomsb-locked-btn-border-width, 2px) !important;
    border-style: var(--ecomsb-locked-btn-border-style, dashed) !important;
    border-color: var(--ecomsb-locked-btn-border-color, #ffffff) !important;
    background-color: var(--ecomsb-locked-btn-bg, #606060) !important;
    background-image: none !important;
    color: var(--ecomsb-locked-btn-color, #ffffff) !important;
    -webkit-text-fill-color: var(--ecomsb-locked-btn-color, #ffffff) !important;
    min-height: 48px !important;
    padding: 10px 14px !important;
    border-radius: var(--ecomsb-btn-radius, 10px) !important;
    font-size: var(--ecomsb-locked-btn-size, var(--ecomsb-btn-size, 18px)) !important;
    font-weight: var(--ecomsb-locked-btn-weight, 700) !important;
    line-height: 1.25 !important;
    opacity: 1 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--notice,
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--notice * {
    font-synthesis: none !important;
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg,
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg :is(.ecomsb-cfg__title, .ecomsb-cfg__desc, .ecomsb-cfg__pricebar, .ecomsb-cfg__options, .ecomsb-popup__add) {
    font-family: var(--ecomsb-font, inherit) !important;
    font-synthesis: none;
}

/* remaining General Typography ownership.
   Category tabs and notice confirmation controls inherit the global storefront
   font instead of any direct theme button typography. */
body .ecomsb-slider button.ecomsb-cat-tab {
    font-family: var(--ecomsb-font, inherit) !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
body .ecomsb-popup-overlay .ecomsb-popup button.ecomsb-popup__ok {
    font-family: var(--ecomsb-font, inherit) !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* configurator typography, YITH width and
   structured requirement-line ownership. */
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg button.ecomsb-cfg__desc-toggle {
    font-family: var(--ecomsb-font, inherit) !important;
    font-synthesis: none !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg .ecomsb-cfg__options,
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg .ecomsb-cfg__options > :is(
    #yith-wapo-container,
    #yith_wapo_groups_container,
    .yith-wapo-block,
    .yith-wapo-addon
) {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg .ecomsb-cfg__options :is(
    .yith-wapo-block,
    .yith-wapo-addon,
    .yith-wapo-addon-content,
    .yith-wapo-options,
    .options-container,
    .yith-wapo-option,
    .yith-wapo-option-row,
    .yith-wapo-option-value,
    .yith-wapo-option-value > div,
    .select_box,
    .select2,
    .select2-container
) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg .ecomsb-cfg__options :is(
    .yith-wapo-option,
    .yith-wapo-option-row,
    .yith-wapo-option-value,
    .yith-wapo-option-value > div,
    .select_box
) {
    flex: 1 1 100% !important;
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg .ecomsb-cfg__options :is(
    .yith-wapo-addon-title,
    .yith-wapo-addon-title *,
    .yith-wapo-block-title,
    .yith-wapo-block-title *,
    label,
    legend,
    .label,
    .yith-wapo-option-value,
    h2,
    h3,
    h4,
    h5,
    h6
) {
    font-family: var(--ecomsb-font, inherit) !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg .ecomsb-cfg__options :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    .select2-container,
    .select2-selection
) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-family: var(--ecomsb-font, inherit) !important;
    font-synthesis: none !important;
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg .ecomsb-cfg__options :is(
    select,
    .select2-container .select2-selection,
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple
) {
    min-height: 44px !important;
    height: auto !important;
    padding-block: 8px !important;
    padding-inline: 14px 38px !important;
    line-height: 1.4 !important;
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg .ecomsb-cfg__options :is(
    .select2-container .select2-selection__rendered,
    .select2-container--default .select2-selection--single .select2-selection__rendered
) {
    width: 100% !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg .ecomsb-cfg__options :is(
    .select2-container .select2-selection__arrow,
    .select2-container--default .select2-selection--single .select2-selection__arrow
) {
    top: 50% !important;
    inset-inline-end: 10px !important;
    transform: translateY(-50%) !important;
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--notice .ecomsb-requirement__line--bridge {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    font-size: var(--ecomsb-notice-text-size, 22px) !important;
    font-weight: var(--ecomsb-notice-text-weight, 700) !important;
    line-height: 1.5 !important;
}
.ecomsb-requirement__line--lead + .ecomsb-requirement__line--product {
    margin-top: -2px;
}


/* YITH add-on layout contract inside the Slider configuration popup. */
.ecomsb-popup-overlay .ecomsb-cfg__options .yith-wapo-addon-type-select .options-container,
.ecomsb-popup-overlay .ecomsb-cfg__options .yith-wapo-addon-type-select .options.per-row-1,
.ecomsb-popup-overlay .ecomsb-cfg__options .yith-wapo-addon-type-select select.yith-wapo-option-value,
.ecomsb-popup-overlay .ecomsb-cfg__options .yith-wapo-addon-type-select .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    align-self: stretch !important;
}
.ecomsb-popup-overlay .ecomsb-cfg__options .yith-wapo-addon-type-select select.yith-wapo-option-value,
.ecomsb-popup-overlay .ecomsb-cfg__options .yith-wapo-addon-type-select .select2-selection {
    min-height: 44px !important;
}
.ecomsb-popup-overlay .ecomsb-cfg__options .checkbox-button-container {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}
.ecomsb-popup-overlay .ecomsb-cfg__options .checkbox-button-container .checkboxbutton {
    flex: 0 0 auto !important;
    margin: 0 !important;
}
.ecomsb-popup-overlay .ecomsb-cfg__options .checkbox-button-container .yith-wapo-addon-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    line-height: 1.45 !important;
}

/* notice action geometry. */
html body .ecomsb-popup-overlay .ecomsb-popup button.ecomsb-popup__ok {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 12px 22px !important;
    box-sizing: border-box !important;
}
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--unlock button.ecomsb-popup__ok {
    width: 100% !important;
    min-height: 50px !important;
}

/* progressive page-pill geometry ownership.
   Theme button presets must not enlarge the range buttons or replace their
   pill radius. Keep the contract scoped to the Slider load-more navigator. */
html body .ecomsb-slider .ecomsb-lm-pages button.ecomsb-lm-page[hidden] {
    display: none !important;
}
html body .ecomsb-slider .ecomsb-lm-pages button.ecomsb-lm-page:not([hidden]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--ecomsb-dot-inactive, #cbd5e1) !important;
    border-radius: 999px !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    box-shadow: none !important;
    filter: none !important;
    font-family: var(--ecomsb-font, inherit) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    opacity: .8 !important;
    box-sizing: border-box !important;
}
html body .ecomsb-slider .ecomsb-lm-pages button.ecomsb-lm-page.is-active:not([hidden]) {
    border-color: transparent !important;
    background-color: var(--ecomsb-dot-color, #111) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}
html body .ecomsb-slider .ecomsb-lm-pages button.ecomsb-lm-page.ecomsb-lm-first:not([hidden]) {
    font-weight: 700 !important;
}

/* Furnob/late-theme ownership for the qualifying
   category controls and first-paint notice copy. These selectors stay below
   plugin-owned popup roots and do not affect site buttons globally. */
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--requirement a.ecomsb-requirement__category-link,
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--requirement a.ecomsb-requirement__category-link:visited {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 8px 5px !important;
    border: 1px solid #15803d !important;
    border-radius: 10px !important;
    background-color: #15803d !important;
    background-image: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-family: var(--ecomsb-font, inherit) !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    box-shadow: 0 4px 10px rgba(21, 128, 61, .14) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--requirement a.ecomsb-requirement__category-link:is(:hover, :focus, :focus-visible, :active) {
    border-color: #166534 !important;
    background-color: #166534 !important;
    background-image: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 12px rgba(22, 101, 52, .22) !important;
    text-decoration: none !important;
}
body .ecomsb-popup-overlay.ecomsb-popup-overlay--copy-ready .ecomsb-popup.ecomsb-popup--notice :is(.ecomsb-popup__title, .ecomsb-popup__msg) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    content-visibility: visible !important;
    clip: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}
@media (max-width: 600px) {
    body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--requirement a.ecomsb-requirement__category-link,
    body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--requirement a.ecomsb-requirement__category-link:visited {
        min-height: 58px !important;
        padding-inline: 4px !important;
        font-size: clamp(10px, 2.9vw, 12px) !important;
    }
}

/* unlock notice actions.
   The contextual offer shortcut is intentionally above the dismiss action and
   remains scoped to the plugin-owned unlock notice. */
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--unlock .ecomsb-popup__actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--unlock button.ecomsb-popup__go-offer {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 12px 22px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #16a34a !important;
    background-image: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-family: var(--ecomsb-font, inherit) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    cursor: pointer !important;
}
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--unlock button.ecomsb-popup__go-offer:is(:hover, :focus-visible, :active) {
    background: #15803d !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    filter: none !important;
    transform: none !important;
}

/* Category Tabs style ownership.
   A compact variable-driven guard keeps the selected Pills, Underline or
   Minimal contract authoritative without duplicating a separate theme reset
   for every state. All selectors remain below the plugin-owned Slider root. */
html body .ecomsb-slider .ecomsb-cat-tabs {
    --ecomsb-cat-owned-bar-bg: var(--ecomsb-cat-tabs-bar-bg, #ffffff);
    --ecomsb-cat-owned-bar-radius: var(--ecomsb-cat-tabs-bar-radius, 12px);
    --ecomsb-cat-owned-bar-padding: 4px;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    padding: var(--ecomsb-cat-owned-bar-padding) !important;
    border: 0 !important;
    border-radius: var(--ecomsb-cat-owned-bar-radius) !important;
    background: var(--ecomsb-cat-owned-bar-bg) !important;
    box-shadow: none !important;
}
html body .ecomsb-slider .ecomsb-cat-tabs button.ecomsb-cat-tab {
    --ecomsb-cat-owned-bg: var(--ecomsb-cat-tab-bg, #6b7280);
    --ecomsb-cat-owned-color: var(--ecomsb-cat-tab-color, #ffffff);
    --ecomsb-cat-owned-radius: var(--ecomsb-cat-tab-radius, 12px);
    --ecomsb-cat-owned-padding: 8px 16px;
    --ecomsb-cat-owned-bottom-border: 0 solid transparent;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: var(--ecomsb-cat-owned-padding) !important;
    border: 0 !important;
    border-bottom: var(--ecomsb-cat-owned-bottom-border) !important;
    border-radius: var(--ecomsb-cat-owned-radius) !important;
    background: var(--ecomsb-cat-owned-bg) !important;
    color: var(--ecomsb-cat-owned-color) !important;
    -webkit-text-fill-color: var(--ecomsb-cat-owned-color) !important;
    font-family: var(--ecomsb-card-font, var(--ecomsb-font, inherit)) !important;
    font-size: var(--ecomsb-cat-tabs-fs, 14px) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
html body .ecomsb-slider .ecomsb-cat-tabs button.ecomsb-cat-tab::before,
html body .ecomsb-slider .ecomsb-cat-tabs button.ecomsb-cat-tab::after {
    content: none !important;
    display: none !important;
}
html body .ecomsb-slider .ecomsb-cat-tabs button.ecomsb-cat-tab:is(:hover, :focus, :focus-visible) {
    --ecomsb-cat-owned-bg: var(--ecomsb-cat-tab-hover-bg, #4b5563);
    --ecomsb-cat-owned-color: var(--ecomsb-cat-tab-hover-color, #ffffff);
}
html body .ecomsb-slider .ecomsb-cat-tabs button.ecomsb-cat-tab.is-active,
html body .ecomsb-slider .ecomsb-cat-tabs button.ecomsb-cat-tab.is-active:is(:hover, :focus, :focus-visible) {
    --ecomsb-cat-owned-bg: var(--ecomsb-cat-tab-active-bg, #111827);
    --ecomsb-cat-owned-color: var(--ecomsb-cat-tab-active-color, #ffffff);
}
html body .ecomsb-slider .ecomsb-cat-tabs button.ecomsb-cat-tab.is-loading {
    opacity: .6 !important;
    cursor: default !important;
}
html body .ecomsb-slider .ecomsb-cat-tabs.ecomsb-cat-tabs--underline {
    --ecomsb-cat-owned-bar-bg: transparent;
    --ecomsb-cat-owned-bar-radius: 0;
    --ecomsb-cat-owned-bar-padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
}
html body .ecomsb-slider .ecomsb-cat-tabs.ecomsb-cat-tabs--underline button.ecomsb-cat-tab {
    --ecomsb-cat-owned-bg: transparent;
    --ecomsb-cat-owned-color: var(--ecomsb-cat-tab-color, #374151);
    --ecomsb-cat-owned-radius: 0;
    --ecomsb-cat-owned-padding: 8px 12px;
    --ecomsb-cat-owned-bottom-border: 2px solid transparent;
}
html body .ecomsb-slider .ecomsb-cat-tabs.ecomsb-cat-tabs--underline button.ecomsb-cat-tab:is(:hover, :focus, :focus-visible) {
    --ecomsb-cat-owned-bg: transparent;
    --ecomsb-cat-owned-color: var(--ecomsb-cat-tab-hover-color, #111827);
}
html body .ecomsb-slider .ecomsb-cat-tabs.ecomsb-cat-tabs--underline button.ecomsb-cat-tab.is-active,
html body .ecomsb-slider .ecomsb-cat-tabs.ecomsb-cat-tabs--underline button.ecomsb-cat-tab.is-active:is(:hover, :focus, :focus-visible) {
    --ecomsb-cat-owned-bg: transparent;
    --ecomsb-cat-owned-color: var(--ecomsb-cat-tab-active-color, #111827);
    --ecomsb-cat-owned-bottom-border: 2px solid var(--ecomsb-cat-tab-active-color, #111827);
}
html body .ecomsb-slider .ecomsb-cat-tabs.ecomsb-cat-tabs--minimal {
    --ecomsb-cat-owned-bar-bg: transparent;
    --ecomsb-cat-owned-bar-radius: 0;
    --ecomsb-cat-owned-bar-padding: 0;
}
html body .ecomsb-slider .ecomsb-cat-tabs.ecomsb-cat-tabs--minimal button.ecomsb-cat-tab {
    --ecomsb-cat-owned-bg: transparent;
    --ecomsb-cat-owned-color: var(--ecomsb-cat-tab-color, #374151);
    --ecomsb-cat-owned-radius: 0;
    --ecomsb-cat-owned-padding: 6px 12px;
}
html body .ecomsb-slider .ecomsb-cat-tabs.ecomsb-cat-tabs--minimal button.ecomsb-cat-tab:is(:hover, :focus, :focus-visible) {
    --ecomsb-cat-owned-bg: transparent;
    --ecomsb-cat-owned-color: var(--ecomsb-cat-tab-hover-color, #111827);
}
html body .ecomsb-slider .ecomsb-cat-tabs.ecomsb-cat-tabs--minimal button.ecomsb-cat-tab.is-active,
html body .ecomsb-slider .ecomsb-cat-tabs.ecomsb-cat-tabs--minimal button.ecomsb-cat-tab.is-active:is(:hover, :focus, :focus-visible) {
    --ecomsb-cat-owned-bg: transparent;
    --ecomsb-cat-owned-color: var(--ecomsb-cat-tab-active-color, #111827);
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
}

/* Slider action radius ownership. */
html body .ecomsb-slider :is(button, a).ecomsb-card__btn,
html body .ecomsb-slider :is(button, a).ecomsb-card__btn:is(:hover, :focus-visible, :active) {
    border-radius: var(--ecomsb-btn-radius, 8px) !important;
}

/* requirement-popup typography and footer action
   use one component-owned scale. The category choices remain compact enough for
   two columns, while the confirmation control is vertically centered and large
   enough to read/tap consistently on theme-heavy storefronts. */
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--requirement .ecomsb-requirement__category-heading {
    font-family: var(--ecomsb-font, inherit) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--requirement a.ecomsb-requirement__category-link,
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--requirement a.ecomsb-requirement__category-link:visited {
    min-height: 60px !important;
    padding: 10px 8px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
}
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--requirement .ecomsb-requirement__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 76px !important;
    padding: 12px 24px 16px !important;
}
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--requirement button.ecomsb-popup__ok {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 52px !important;
    height: auto !important;
    padding: 12px 20px !important;
    border-radius: var(--ecomsb-popup-btn-radius, 10px) !important;
    font-family: var(--ecomsb-font, inherit) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center !important;
}
@media (max-width: 600px) {
    html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--requirement a.ecomsb-requirement__category-link,
    html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--requirement a.ecomsb-requirement__category-link:visited {
        min-height: 58px !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
    }
    html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--requirement .ecomsb-requirement__footer {
        min-height: 72px !important;
        padding: 10px 16px 14px !important;
    }
}


/* server-first popup copy ownership.
   TranslatePress/themed animation layers may otherwise expose a blank interval
   after JavaScript inserts Product Config or Required Products copy. */
html body .ecomsb-popup-overlay--copy-ready.ecomsb-popup-overlay--cfg :is(
    .ecomsb-popup__title,
    .ecomsb-cfg__desc-body,
    .ecomsb-cfg__desc-toggle,
    .ecomsb-cfg__notice,
    .ecomsb-cfg__piece-head,
    .ecomsb-cfg__vlabel,
    .ecomsb-cfg__vcard-label,
    .ecomsb-cfg__vcard-drop select,
    .ecomsb-cfg__qty-label,
    .ecomsb-cfg__addons-instr
),
html body .ecomsb-popup-overlay--copy-ready.ecomsb-popup-overlay--required-products :is(
    .ecomsb-popup__title,
    .ecomsb-required-products__status,
    .ecomsb-required-product__name
),
html body .ecomsb-popup-overlay--copy-ready.ecomsb-popup-overlay--requirement :is(
    .ecomsb-popup__msg,
    .ecomsb-requirement__category-heading,
    .ecomsb-requirement__category-link,
    .ecomsb-requirement__view-all,
    .ecomsb-popup__ok
) {
    visibility: visible !important;
    opacity: 1 !important;
    content-visibility: visible !important;
    clip: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    filter: none !important;
}
html body .ecomsb-popup-overlay--copy-ready.ecomsb-popup-overlay--required-products .ecomsb-required-product--skeleton,
html body .ecomsb-popup-overlay--copy-ready.ecomsb-popup-overlay--required-products .ecomsb-required-product--skeleton * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* popup chrome first-paint ownership. Copy-ready
   Requirement and Required Products overlays own their close control before any
   late theme/translation animation can hide, clip or flatten it. */
html body .ecomsb-popup-overlay--copy-ready:is(
    .ecomsb-popup-overlay--requirement,
    .ecomsb-popup-overlay--required-products,
    .ecomsb-popup-overlay--cfg
) .ecomsb-popup button.ecomsb-popup__close {
    position: relative;
    z-index: 100 !important;
    display: inline-grid !important;
    place-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    content-visibility: visible !important;
    clip: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
}
html body .ecomsb-popup-overlay--copy-ready.ecomsb-popup-overlay--requirement .ecomsb-popup--requirement > button.ecomsb-popup__close {
    position: absolute !important;
    top: 12px !important;
    inset-inline-end: 12px !important;
}

/* configuration cards use border selection only;
   the plugin-owned dropdown mirrors Quantity Deals geometry without decorative circles. */
/* canonical variation dropdown and multilingual
   first-paint ownership. The configurator owns its controls instead of exposing
   a theme-styled native select; exact radio state and copy remain visible while
   TranslatePress observes other dynamic page regions. */
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg .ecomsb-cfg__variations {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
}
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg .ecomsb-cfg__vcard {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
    isolation: auto !important;
}
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg .ecomsb-cfg__vcard.is-active {
    z-index: 20 !important;
    border-color: var(--ecomsb-cfg-vlabel-border, #374151) !important;
}
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg .ecomsb-cfg__vcard.has-open-dropdown {
    z-index: 100 !important;
    opacity: 1 !important;
}
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg .ecomsb-cfg__vcard-radio,
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg .ecomsb-cfg__vs-radio {
    display: none !important;
}
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg .ecomsb-cfg__variant-select {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-family: var(--ecomsb-font, inherit) !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg button.ecomsb-cfg__vs-control {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 14px !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 38px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border: 1px solid var(--ecomsb-cfg-vlabel-border, #374151) !important;
    border-radius: 9px !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--ecomsb-cfg-vlabel-color, #374151) !important;
    -webkit-text-fill-color: var(--ecomsb-cfg-vlabel-color, #374151) !important;
    box-shadow: none !important;
    font: inherit !important;
    font-family: var(--ecomsb-font, inherit) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    cursor: pointer !important;
    opacity: 1 !important;
    transform: none !important;
    box-sizing: border-box !important;
}
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg .ecomsb-cfg__variant-select.is-open button.ecomsb-cfg__vs-control,
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg button.ecomsb-cfg__vs-control:hover,
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg button.ecomsb-cfg__vs-control:focus-visible {
    border-color: var(--ecomsb-cfg-vlabel-border, #374151) !important;
    background: var(--ecomsb-cfg-vlabel-soft, #e4e7eb) !important;
    box-shadow: none !important;
}
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg .ecomsb-cfg__variant-select.is-disabled button.ecomsb-cfg__vs-control {
    pointer-events: none !important;
    opacity: .55 !important;
    cursor: not-allowed !important;
}
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg .ecomsb-cfg__vs-text,
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg .ecomsb-cfg__vs-opt-text {
    display: block !important;
    min-width: 0 !important;
    color: var(--ecomsb-cfg-vlabel-color, #374151) !important;
    -webkit-text-fill-color: var(--ecomsb-cfg-vlabel-color, #374151) !important;
    font-family: var(--ecomsb-font, inherit) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-indent: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg .ecomsb-cfg__vs-arrow {
    display: inline-block !important;
    color: var(--ecomsb-cfg-vlabel-color, #374151) !important;
    -webkit-text-fill-color: var(--ecomsb-cfg-vlabel-color, #374151) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    transition: transform .15s ease !important;
    pointer-events: none !important;
}
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg .ecomsb-cfg__variant-select.is-open .ecomsb-cfg__vs-arrow {
    transform: rotate(180deg) !important;
}
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg ul.ecomsb-cfg__vs-list {
    position: absolute !important;
    z-index: 1000 !important;
    top: calc(100% + 6px) !important;
    bottom: auto !important;
    inset-inline: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 1px solid var(--ecomsb-cfg-vlabel-border, #374151) !important;
    border-radius: 10px !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .22) !important;
    list-style: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
    font-family: var(--ecomsb-font, inherit) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg .ecomsb-cfg__variant-select.opens-up ul.ecomsb-cfg__vs-list {
    top: auto !important;
    bottom: calc(100% + 6px) !important;
}
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg ul.ecomsb-cfg__vs-list[hidden] {
    display: none !important;
}
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg li.ecomsb-cfg__vs-opt {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: var(--ecomsb-cfg-vlabel-color, #374151) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
}
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg li.ecomsb-cfg__vs-opt:hover,
html body .ecomsb-popup-overlay.ecomsb-popup-overlay--cfg li.ecomsb-cfg__vs-opt.is-selected {
    background: var(--ecomsb-cfg-vlabel-soft, #e4e7eb) !important;
}
html body .ecomsb-popup-overlay--copy-ready.ecomsb-popup-overlay--cfg :is(
    .ecomsb-cfg__vcard-label,
    .ecomsb-cfg__vs-text,
    .ecomsb-cfg__vs-opt-text,
    .ecomsb-popup__add
) {
    visibility: visible !important;
    opacity: 1 !important;
    content-visibility: visible !important;
    clip: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    filter: none !important;
    animation: none !important;
    text-indent: 0 !important;
}


/* theme-resistant circular slider arrows.
   Flatsome and similar themes must not replace the plugin's round navigation
   controls with square button chrome. */
html body .ecomsb-slider button.ecomsb-slider__nav,
html body .ecomsb-popup .ecomsb-slider button.ecomsb-slider__nav {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
    border-radius: 999px !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12) !important;
    color: #333 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: 0 !important;
    overflow: hidden !important;
    clip-path: circle(50%) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
html body .ecomsb-slider button.ecomsb-slider__nav::before,
html body .ecomsb-slider button.ecomsb-slider__nav::after {
    content: none !important;
    display: none !important;
}
html body .ecomsb-slider button.ecomsb-slider__nav .ecomsb-nav-ico {
    display: block !important;
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;
    margin: 0 !important;
    padding: 0 !important;
    stroke: currentColor !important;
    fill: none !important;
    transform: none !important;
}

/* Count/layout visibility must outrank the component's theme-resistant display
   declaration. XStore and other themes can otherwise reveal arrows that carry
   the native hidden attribute when only one card exists or every card fits. */
html body .ecomsb-slider button.ecomsb-slider__nav[hidden],
html body .ecomsb-slider button.ecomsb-slider__nav.ecomsb-slider__nav--count-hidden,
html body .ecomsb-popup .ecomsb-slider button.ecomsb-slider__nav[hidden],
html body .ecomsb-popup .ecomsb-slider button.ecomsb-slider__nav.ecomsb-slider__nav--count-hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}



/* Keep WooCommerce currency markup and merchant bdi::after currency artwork
   visible inside slider card price lines. */
html body .ecomsb-slider .ecomsb-card__price .woocommerce-Price-amount,
html body .ecomsb-slider .ecomsb-card__price .woocommerce-Price-amount bdi {
    display: inline-block;
    overflow: visible;
    white-space: nowrap;
}


/* Slider price/button gap, Flatsome price baseline, and badge contract hardening. */
html body .ecomsb-slider .ecomsb-card__purchase {
    gap: var(--ecomsb-price-btn-gap, 0px) !important;
}
html body .ecomsb-slider .ecomsb-card__purchase > :is(.ecomsb-card__price, .ecomsb-card__btn) {
    margin-block: 0 !important;
}
html body .ecomsb-slider .ecomsb-card__price .woocommerce-Price-amount,
html body .ecomsb-slider .ecomsb-card__price .woocommerce-Price-amount bdi,
html body .ecomsb-slider .ecomsb-card__price .woocommerce-Price-currencySymbol {
    vertical-align: baseline !important;
    line-height: inherit !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}
html body .ecomsb-slider .ecomsb-card__price .woocommerce-Price-currencySymbol {
    display: inline !important;
    font-size: 1em !important;
}
html body .ecomsb-slider .ecomsb-card__badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .35em !important;
    white-space: normal !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto;
}
html body .ecomsb-slider .ecomsb-card__badge-label,
html body .ecomsb-slider .ecomsb-card__badge-suffix {
    display: inline !important;
    min-width: 0 !important;
}
html body .ecomsb-slider .ecomsb-card__badge-suffix:not(:empty)::before {
    content: " " !important;
}
html body .ecomsb-slider .ecomsb-card__media-wrap > .ecomsb-card__badge--top {
    position: absolute !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    inset-inline-start: 8px !important;
    inset-inline-end: 8px !important;
    transform: translateY(-50%) !important;
    width: fit-content !important;
    max-width: calc(100% - 16px) !important;
    margin-inline: auto !important;
    z-index: 2 !important;
    pointer-events: none !important;
}
html body .ecomsb-slider .ecomsb-card__media-wrap > .ecomsb-card__badge--bullet {
    display: inline-flex !important;
    top: 8px !important;
    inset-inline-start: 8px !important;
    inset-inline-end: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(78%, 170px) !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    pointer-events: none !important;
}
@media (max-width: 600px) {
    html body .ecomsb-slider .ecomsb-card__media-wrap > .ecomsb-card__badge--top {
        inset-inline-start: 6px !important;
        inset-inline-end: 6px !important;
        max-width: calc(100% - 12px) !important;
    }
    html body .ecomsb-slider .ecomsb-card__media-wrap > .ecomsb-card__badge--bullet {
        max-width: min(86%, 150px) !important;
        line-height: 1.16 !important;
    }
}

/* R120 — Slider teaser, badge/rating geometry, card-font ownership and old-price contract. */
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg .ecomsb-cfg__desc {
    position: relative !important;
}
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg .ecomsb-cfg__desc-body {
    position: relative !important;
    max-height: 10.05em !important; /* roughly 6.7 lines: the final line is intentionally partial */
    overflow: hidden !important;
}
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg .ecomsb-cfg__desc.has-overflow:not(.is-expanded) .ecomsb-cfg__desc-body::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    bottom: 0;
    height: 2.4em;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.88) 54%, rgba(255,255,255,1) 100%);
    -webkit-backdrop-filter: blur(1.2px);
    backdrop-filter: blur(1.2px);
}
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg .ecomsb-cfg__desc.is-expanded .ecomsb-cfg__desc-body {
    max-height: none !important;
    overflow: visible !important;
}
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg button.ecomsb-cfg__desc-toggle,
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg button.ecomsb-cfg__desc-toggle:is(:hover, :focus-visible, :active) {
    background-color: var(--ecomsb-cfg-show-more-bg, #f3f4f6) !important;
    background-image: none !important;
    color: var(--ecomsb-cfg-show-more-color, #111827) !important;
    -webkit-text-fill-color: var(--ecomsb-cfg-show-more-color, #111827) !important;
    opacity: 1 !important;
}

/* Keep Badge Suffix attached to the final label token without disabling useful
   wrapping in the preceding label copy. */
html body .ecomsb-slider .ecomsb-card__badge-copy {
    display: inline !important;
    white-space: normal !important;
    text-wrap: pretty;
}
html body .ecomsb-slider .ecomsb-card__badge-tail {
    display: inline !important;
    white-space: nowrap !important;
}
html body .ecomsb-slider .ecomsb-card__badge-separator,
html body .ecomsb-slider .ecomsb-card__badge-suffix {
    display: inline !important;
    white-space: nowrap !important;
}
html body .ecomsb-slider .ecomsb-card__badge-suffix:not(:empty)::before {
    content: none !important;
}

/* Rating follows the real top-badge height. Bullet badges keep the rating in the
   opposite image corner; a multi-line top bill moves the rating down only as much
   as the measured bill requires. */
html body .ecomsb-slider .ecomsb-card__media-wrap--badge-top .ecomsb-card__rating {
    top: max(8px, calc(var(--ecomsb-top-badge-height, 26px) - 7px)) !important;
    bottom: auto !important;
}
html body .ecomsb-slider .ecomsb-card__media-wrap--badge-bullet .ecomsb-card__rating {
    top: 8px !important;
    bottom: auto !important;
}
@media (max-width: 600px) {
    html body .ecomsb-slider .ecomsb-card__media-wrap--badge-top .ecomsb-card__rating {
        top: max(8px, calc(var(--ecomsb-top-badge-height, 26px) - 7px)) !important;
        bottom: auto !important;
    }
    html body .ecomsb-slider .ecomsb-card__media-wrap--badge-bullet .ecomsb-card__rating {
        top: 8px !important;
        bottom: auto !important;
    }
}

/* Slider Cards Font owns all merchant-facing slider copy and configurator text,
   while SVG/icon glyphs retain their own font/shape contracts. */
html body .ecomsb-slider :is(
    .ecomsb-slider__title,
    .ecomsb-slider__desc,
    .ecomsb-slider__footer,
    .ecomsb-cat-tabs,
    .ecomsb-cat-tab,
    .ecomsb-card,
    .ecomsb-card__name,
    .ecomsb-card__price,
    .ecomsb-card__starting,
    .ecomsb-card__btn,
    .ecomsb-card__note,
    .ecomsb-card__qty-hint,
    .ecomsb-loadmore--card,
    .ecomsb-loadmore__icon,
    .ecomsb-loadmore__text,
    .ecomsb-loadmore__btn,
    .ecomsb-lm-meta,
    .ecomsb-lm-meta__counter,
    .ecomsb-lm-pages,
    .ecomsb-lm-page
) {
    font-family: var(--ecomsb-card-font, var(--ecomsb-font, inherit)) !important;
    font-synthesis: none !important;
}
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg {
    font-family: var(--ecomsb-card-font, var(--ecomsb-font, inherit)) !important;
}
html body .ecomsb-popup-overlay .ecomsb-popup.ecomsb-popup--cfg :is(
    .ecomsb-popup__title,
    .ecomsb-cfg__title,
    .ecomsb-cfg__desc,
    .ecomsb-cfg__desc-body,
    .ecomsb-cfg__desc-toggle,
    .ecomsb-cfg__notice,
    .ecomsb-cfg__piece-head,
    .ecomsb-cfg__vlabel,
    .ecomsb-cfg__vcard-label,
    .ecomsb-cfg__qty-label,
    .ecomsb-cfg__addons-instr,
    .ecomsb-cfg__instr-text,
    .ecomsb-cfg__deal-label,
    .ecomsb-cfg__price,
    .ecomsb-cfg__insted,
    .ecomsb-cfg__pct,
    .ecomsb-cfg__vs-control,
    .ecomsb-cfg__vs-list,
    .ecomsb-cfg__vs-opt,
    .ecomsb-cfg__vs-opt-text,
    .ecomsb-cfg__vs-text,
    .ecomsb-cfg__variant-select,
    .ecomsb-cfg__options,
    label,
    input,
    select,
    textarea,
    button
) {
    font-family: var(--ecomsb-card-font, var(--ecomsb-font, inherit)) !important;
    font-synthesis: none !important;
}

/* Themes such as Flatsome can remove or recolor del decoration. Keep the native
   WooCommerce old price visibly struck through in the slider card itself. */
html body .ecomsb-slider .ecomsb-card__price del,
html body .ecomsb-slider .ecomsb-card__price del *,
html body .ecomsb-slider .ecomsb-card__price del .woocommerce-Price-amount,
html body .ecomsb-slider .ecomsb-card__price del .woocommerce-Price-amount bdi {
    display: inline-block !important;
    text-decoration-line: line-through !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: currentColor !important;
    opacity: 1 !important;
}

/* Logical opposite-corner anchoring. This also neutralizes the older mobile
   physical left/right rules, so RTL bullet badges and ratings cannot share a corner. */
html body .ecomsb-slider .ecomsb-card__media-wrap--badge-top .ecomsb-card__rating,
html body .ecomsb-slider .ecomsb-card__media-wrap--badge-bullet .ecomsb-card__rating {
    left: auto !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: 8px !important;
}

/* R121 — Product-card media badges and secondary success action. */
/* Free Shipping is a centred card row below the product image, not an image
   overlay. It therefore cannot cover the rating or discount badge. */
html body .ecomsb-slider .ecomsb-card__freeship-wrap {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 8px !important;
    margin: -3px 0 -2px !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
/* Rating owns the lower logical-end image corner: bottom-right in LTR and
   bottom-left in RTL. Top/Small discount badges remain at the image top. */
html body .ecomsb-slider .ecomsb-card__media-wrap .ecomsb-card__rating,
html body .ecomsb-slider .ecomsb-card__media-wrap--badge-top .ecomsb-card__rating,
html body .ecomsb-slider .ecomsb-card__media-wrap--badge-bullet .ecomsb-card__rating {
    top: auto !important;
    bottom: 8px !important;
    left: auto !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: 8px !important;
}

/* Discount badge placement below the card price.
   This type is shared by percentage, fixed-discount and fixed-price badges. */
html body .ecomsb-slider .ecomsb-card__price-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}
html body .ecomsb-slider .ecomsb-card__purchase > :is(.ecomsb-card__price-stack, .ecomsb-card__btn) {
    margin-block: 0 !important;
}
html body .ecomsb-slider .ecomsb-card__badge-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-bottom: 6px !important;
}
html body .ecomsb-slider .ecomsb-card__badge--below-price {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: inline-block !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    pointer-events: none !important;
}
html body .ecomsb-slider .ecomsb-card__badge--below-price.ecomsb-card__badge--small {
    padding: 2px 8px !important;
}
html body .ecomsb-slider .ecomsb-card__badge--below-price.ecomsb-card__badge--medium {
    padding: 4px 12px !important;
}
html body .ecomsb-slider .ecomsb-card__badge--below-price.ecomsb-card__badge--large {
    padding: 6px 16px !important;
}