@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
.spc-section,
.spc-row,
.spc-heading,
.spc-text,
.spc-image,
.spc-video,
.spc-button-wrap,
.spc-trust-badges,
.spc-fl,
.spc-offer,
.spc-selector,
.spc-checkout,
.spc-faq,
.spc-testimonials,
.spc-image-slider,
.spc-cb {
    /* The accent family reads from --spc-cfg-accent* (injected on :root from the
       config accent_color when it differs from the pink default). With nothing
       injected, every fallback below is the original pink, so the look is
       unchanged; set config accent_color to re-skin the whole plugin. */
    --spc-primary:      var(--spc-cfg-accent, #D81B60);
    --spc-primary-dark: var(--spc-cfg-accent-dark, #ad1457);
    --spc-accent:       var(--spc-cfg-accent-soft, #f06292);
    --spc-bg-soft:      var(--spc-cfg-accent-bg, #fdf2f7);
    --spc-radius:       14px;
    --spc-shadow:       0 8px 24px var(--spc-cfg-accent-shadow, rgba(216, 27, 96, .14));
    --spc-shadow-card:  0 2px 12px rgba(15, 23, 42, .08);

    /* Shared palette tokens — every block reads these as its DEFAULT look so an
       unconfigured block is polished + consistent. Per-field colors still win
       (they set their own inline vars). BD-friendly magenta-pink accent above;
       green for trust/success, amber for stars, calm neutral text/borders. */
    --spc-trust:        #0F8A5F;   /* secure / free shipping / success cues */
    --spc-trust-dark:   #0C7150;
    --spc-trust-soft:   #E8F5EF;   /* green tint surface (cod/payment) */
    --spc-star:         #F5A623;   /* rating amber */
    --spc-text-strong:  #1F2430;   /* titles */
    --spc-text:         #5A5F6B;   /* body */
    --spc-text-muted:   #8A8F99;   /* meta / struck */
    --spc-border:       #E6E8EC;
    --spc-surface:      #FFFFFF;   /* card */
    --spc-surface-soft: #F7F8FA;   /* soft background */
    --spc-radius-card:  12px;
    --spc-container:        1140px;
    --spc-container-narrow: 760px;
    --spc-gutter:           16px;
}

/* ── RESET / BASE ──────────────────────────────────────────── */
.spc-section,
.spc-section *,
.spc-row,
.spc-row *,
:is(.spc-heading, .spc-text, .spc-image, .spc-video, .spc-button-wrap, .spc-trust-badges, .spc-fl, .spc-offer, .spc-selector, .spc-checkout, .spc-faq, .spc-testimonials, .spc-image-slider),
:is(.spc-heading, .spc-text, .spc-image, .spc-video, .spc-button-wrap, .spc-trust-badges, .spc-fl, .spc-offer, .spc-selector, .spc-checkout, .spc-faq, .spc-testimonials, .spc-image-slider) * {
    box-sizing: border-box;
    font-family: 'Hind Siliguri', system-ui, sans-serif;
}

.spc-section {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    background-color: var(--spc-bg, transparent);
    background-image: var(--spc-bg-image, none);
    background-size: cover;
    background-position: center;
    padding-block: var(--spc-mpt, 32px) var(--spc-mpb, 32px);
}

/* ── CONTAINERS ────────────────────────────────────────────── */
.spc-section__inner,
.spc-width-container,
.spc-width-narrow {
    width: min(calc(100% - 2 * var(--spc-gutter, 16px)), var(--spc-container, 1140px));
    max-width: 100%;
    margin-inline: auto;
    min-width: 0;
}

.spc-width-narrow {
    width: min(calc(100% - 2 * var(--spc-gutter, 16px)), var(--spc-container-narrow, 760px));
}

.spc-width-full {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Every SPC block self-contains to the global container when it is
   placed directly on the page, so nothing ever touches viewport edges
   and all left/right edges align. */
.spc-heading,
.spc-text,
.spc-image,
.spc-video,
.spc-button-wrap,
.spc-trust-badges,
.spc-fl,
.spc-offer,
.spc-selector,
.spc-checkout,
.spc-faq,
.spc-testimonials {
    width: min(calc(100% - 2 * var(--spc-gutter, 16px)), var(--spc-container, 1140px));
    max-width: 100%;
    margin-inline: auto;
    min-width: 0;
}

/* Inside a Section inner wrapper or a Row column the parent already
   provides the container — blocks must fill 100% of that width and
   must NOT re-apply the page container. */
:is(.spc-section__inner, .spc-col) :is(.spc-heading, .spc-text, .spc-image, .spc-video, .spc-button-wrap, .spc-trust-badges, .spc-fl, .spc-offer, .spc-selector, .spc-checkout, .spc-faq, .spc-testimonials) {
    width: 100%;
}

/* ── ROW / COLUMN LAYOUT ───────────────────────────────────── */
/* Mobile first: a row is a single column stack. Columns only appear
   from 768px up. */
.spc-row {
    width: min(calc(100% - 2 * var(--spc-gutter, 16px)), var(--spc-container, 1140px));
    max-width: 100%;
    margin-inline: auto;
    margin-block: 16px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spc-row-gap, 20px);
    overflow-x: clip;
}

.spc-row--width-narrow {
    width: min(calc(100% - 2 * var(--spc-gutter, 16px)), var(--spc-container-narrow, 760px));
}

.spc-row--width-full {
    width: 100%;
}

.spc-row--reverse-mobile { flex-direction: column-reverse; }

.spc-row--gap-sm { --spc-row-gap: 12px; }
.spc-row--gap-md { --spc-row-gap: 20px; }
.spc-row--gap-lg { --spc-row-gap: 28px; }

.spc-row--boxed {
    background: var(--spc-row-bg, transparent);
    padding: var(--spc-row-padding, 16px);
    border-radius: var(--spc-radius);
}

.spc-col {
    min-width: 0;
    width: 100%;
}

/* ── ALIGNMENT ─────────────────────────────────────────────── */
.spc-align-left   { text-align: left; }
.spc-align-center { text-align: center; }
.spc-align-right  { text-align: right; }

/* ── HEADING ───────────────────────────────────────────────── */
.spc-heading {
    color: #15202b;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    margin: 0 0 12px;
}

.spc-heading--sm { font-size: clamp(20px, 5.5vw, 24px); }
.spc-heading--md { font-size: clamp(24px, 6.5vw, 32px); }
.spc-heading--lg { font-size: clamp(28px, 7.5vw, 42px); }
.spc-heading--xl { font-size: clamp(30px, 8.5vw, 54px); }

/* Mobile font size setting wins below 768px (H1 stays 28-32px) */
@media (max-width: 767.98px) {
    .spc-heading--mobile-sm { font-size: clamp(20px, 6vw, 24px); }
    .spc-heading--mobile-md { font-size: clamp(24px, 7vw, 28px); }
    .spc-heading--mobile-lg { font-size: clamp(28px, 7.5vw, 32px); }
}

.spc-heading__highlight { color: var(--spc-primary); }

/* ── TEXT ──────────────────────────────────────────────────── */
.spc-text {
    line-height: 1.7;
    overflow-wrap: anywhere;
    font-size: 16px;
    color: var(--spc-txt-body, inherit);
}

.spc-text__heading {
    margin: 0 0 14px;
    font-size: clamp(24px, 6.5vw, 28px);
    font-weight: 600;
    line-height: 1.35;
    color: var(--spc-txt-heading, #15202b);
    overflow-wrap: anywhere;
}

.spc-text__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 11px;
    text-align: left;
}

.spc-text__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    line-height: 1.65;
    color: var(--spc-txt-body, #334155);
}

.spc-text__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 3px;
    color: var(--spc-txt-icon, var(--spc-primary));
}

.spc-text__icon svg {
    width: 100%;
    height: 100%;
}

.spc-text__icon i {
    font-size: 19px;
    line-height: 1;
}

.spc-text__item-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* List icon size presets — only applied when the block saves icon_size;
   legacy blocks (no attribute) keep the original 22px box above. The
   margin-top keeps each icon centered on the first text line. */
.spc-text__list--icon-sm .spc-text__icon { width: 14px; height: 14px; margin-top: 6px; }
.spc-text__list--icon-sm .spc-text__icon i { font-size: 13px; }
.spc-text__list--icon-md .spc-text__icon { width: 18px; height: 18px; margin-top: 4px; }
.spc-text__list--icon-md .spc-text__icon i { font-size: 16px; }
.spc-text__list--icon-lg .spc-text__icon { width: 24px; height: 24px; margin-top: 1px; }
.spc-text__list--icon-lg .spc-text__icon i { font-size: 22px; }

/* Tables inside rich text scroll inside their own wrapper, never the page */
.spc-text table,
.spc-faq__body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.spc-text--sm { font-size: 15px; }
.spc-text--md { font-size: 16px; }
.spc-text--lg { font-size: 18px; }

/* ── IMAGE ─────────────────────────────────────────────────── */
.spc-image {
    margin-block: 0 20px;
    overflow: hidden;
}

.spc-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.spc-image--container { max-width: min(100%, var(--spc-container-narrow, 760px)); }
.spc-image--radius-sm img { border-radius: 6px; }
.spc-image--radius-md img { border-radius: 12px; }
.spc-image--radius-lg img { border-radius: 20px; }

/* ── VIDEO ─────────────────────────────────────────────────── */
.spc-video {
    --spc-video-radius: var(--spc-radius);
    margin-bottom: 20px;
}

/* Width presets: full bleeds to the column, container caps at ~760px, hero is a
   narrow centered ~540px for a single-product focal feel. */
.spc-video--container .spc-video__frame { max-width: var(--spc-container-narrow, 760px); }
.spc-video--hero .spc-video__frame { max-width: 540px; }
.spc-video--container .spc-video__frame,
.spc-video--hero .spc-video__frame { margin-inline: auto; }

.spc-video--align-left .spc-video__frame { margin-inline: 0 auto; }
.spc-video--align-right .spc-video__frame { margin-inline: auto 0; }

.spc-video__frame {
    position: relative;
    aspect-ratio: var(--spc-ratio, 16 / 9);
    overflow: hidden;
    border-radius: var(--spc-video-radius);
    background: #111827;
}

.spc-video iframe,
.spc-video video,
.spc-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.spc-video__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 14px;
    text-align: center;
    padding: 16px;
    background: repeating-linear-gradient(45deg, #1f2937, #1f2937 12px, #111827 12px, #111827 24px);
}

/* YouTube facade + manual play overlay: the poster fills the frame and a centered,
   brand-colored play button invites the tap. On tap the YouTube facade swaps to the
   iframe in place; the manual button just plays the local <video>. Both share
   .spc-video__play so the page reads as one system. */
.spc-video__facade,
.spc-video__playbtn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    z-index: 2;
}

.spc-video__facade { background-color: #111827; }

.spc-video__facade::after,
.spc-video__playbtn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.12);
    transition: background 0.2s ease;
}

.spc-video__facade:hover::after,
.spc-video__playbtn:hover::after { background: rgba(0, 0, 0, 0.04); }

.spc-video__playbtn.is-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Branded circular play button (our own — never YouTube's red). */
.spc-video__play {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: #fff;
    background: var(--spc-primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, background 0.2s ease;
}

.spc-video__play svg { margin-left: 3px; } /* optically center the triangle */

.spc-video__facade:hover .spc-video__play,
.spc-video__playbtn:hover .spc-video__play {
    transform: scale(1.08);
    background: var(--spc-primary-dark);
}

/* Overlay badges — same look as the slider badges, token-default colors. */
.spc-video__badges {
    position: absolute;
    top: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.spc-video__badges--tl { left: 10px; align-items: flex-start; }
.spc-video__badges--tr { right: 10px; align-items: flex-end; }

.spc-video__badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Tap-to-unmute hint — bottom-right, auto-hides via .is-hidden. */
.spc-video__unmute {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    cursor: pointer;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(17, 24, 39, 0.72);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.spc-video__unmute.is-hidden {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}

/* Discreet 32px corner mute toggle (bottom-right). Neutral when muted; brand tint
   when audio is on. Bound once in JS so it works every scroll cycle. */
.spc-video__mute {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: rgba(17, 24, 39, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: background 0.2s ease, transform 0.2s ease;
}

.spc-video__mute:hover { transform: scale(1.06); }
.spc-video__mute.is-on { background: var(--spc-primary); }
.spc-video__mute .spc-video__mute-on { display: none; }
.spc-video__mute.is-on .spc-video__mute-on { display: block; }
.spc-video__mute.is-on .spc-video__mute-off { display: none; }

/* Centered "you paused this" overlay — frosted backdrop + brand play button. JS
   toggles .is-hidden; shown only while the buyer has manually paused. */
.spc-video__pause-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    background: rgba(15, 23, 42, 0.34);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    transition: opacity 0.2s ease;
}

.spc-video__pause-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.spc-video__cta {
    margin-top: 14px;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .spc-video__play,
    .spc-video__facade::after,
    .spc-video__playbtn::after,
    .spc-video__mute,
    .spc-video__pause-overlay,
    .spc-video__unmute { transition: none; }
}

/* Desktop sizing for portrait ratios: a column-width 9:16 / 4:5 frame would leave
   huge empty side-space, so cap it to a centered, sensibly-sized player. 16:9 and
   1:1 already fill the container fine and are left untouched. Mobile is unchanged —
   portrait fills the screen width as authors expect. */
@media (min-width: 768px) {
    .spc-video--ratio-9-16 .spc-video__frame { max-width: 380px; margin-inline: auto; }
    .spc-video--ratio-4-5 .spc-video__frame { max-width: 470px; margin-inline: auto; }
}

/* ── BUTTON ────────────────────────────────────────────────── */
.spc-button-wrap {
    margin-block: 20px;
}

.spc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 52px;
    gap: 8px;
    border-radius: var(--spc-radius);
    border: 2px solid transparent;
    padding: 13px 28px;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow-wrap: normal;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.spc-button:active { transform: scale(.97); }

.spc-button--primary {
    background: linear-gradient(135deg, var(--spc-primary-dark), var(--spc-primary));
    color: #fff !important;
    box-shadow: var(--spc-shadow);
}

.spc-button--primary:hover {
    box-shadow: 0 12px 32px rgba(216, 27, 96, .32);
}

.spc-button--secondary {
    background: linear-gradient(135deg, var(--spc-trust), var(--spc-trust-dark));
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(5, 150, 105, .22);
}

.spc-button--dark {
    background: #111827;
    color: #fff !important;
}

/* Style system v2 — colors come from per-button CSS vars set inline by
   the shortcode, with the --spc-primary system as fallback. */
.spc-button--solid {
    background: var(--spc-btn-bg, var(--spc-primary));
    color: var(--spc-btn-text, #fff) !important;
    box-shadow: var(--spc-shadow);
}

.spc-button--solid:hover {
    background: var(--spc-btn-hover-bg, var(--spc-btn-bg, var(--spc-primary-dark)));
    color: var(--spc-btn-hover-text, var(--spc-btn-text, #fff)) !important;
}

/* The checkout submit is a real <button>; some host themes give <button> their
   own (green) background that beats the non-!important .spc-button--solid fill
   (the Order Button is an <a>, so it stays accent). Re-assert the accent token
   with !important, scoped to the checkout submit. The --spc-btn-bg var is kept
   first in the chain, so an author-set submit color still wins. */
.spc-checkout button.spc-button--solid {
    background: var(--spc-btn-bg, var(--spc-primary)) !important;
}

.spc-checkout button.spc-button--solid:hover {
    background: var(--spc-btn-hover-bg, var(--spc-btn-bg, var(--spc-primary-dark))) !important;
}

.spc-button--outline {
    background: transparent;
    color: var(--spc-btn-text, var(--spc-btn-bg, var(--spc-primary))) !important;
    border-color: var(--spc-btn-bg, var(--spc-primary));
}

.spc-button--outline:hover {
    background: var(--spc-btn-hover-bg, var(--spc-btn-bg, var(--spc-primary)));
    border-color: var(--spc-btn-hover-bg, var(--spc-btn-bg, var(--spc-primary)));
    color: var(--spc-btn-hover-text, #fff) !important;
}

.spc-button--soft {
    background: var(--spc-bg-soft);
    background: color-mix(in srgb, var(--spc-btn-bg, var(--spc-primary)) 12%, #fff);
    color: var(--spc-btn-text, var(--spc-btn-bg, var(--spc-primary))) !important;
}

.spc-button--soft:hover {
    background: var(--spc-btn-hover-bg, var(--spc-btn-bg, var(--spc-primary)));
    color: var(--spc-btn-hover-text, #fff) !important;
}

/* Shape (only applied when the shortcode sets one; legacy buttons keep
   the default --spc-radius). */
.spc-btn--shape-rounded { border-radius: 8px; }
.spc-btn--shape-pill    { border-radius: 999px; }
.spc-btn--shape-square  { border-radius: 0; }

/* Icons (icon_start / icon_end) — follow the button text color unless
   the shortcode sets --spc-btn-icon (icon_color setting); 8px gap comes
   from the .spc-button flex gap. */
.spc-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--spc-btn-icon, currentColor);
    transition: transform .2s ease;
}

.spc-button__icon svg { width: 1.2em; height: 1.2em; }
.spc-button__icon i   { font-size: 1.2em; line-height: 1; }

/* Hover effects */
.spc-btn--hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .24);
}

.spc-btn--hover-grow:hover { transform: scale(1.04); }

.spc-btn--hover-shine {
    position: relative;
    overflow: hidden;
}

.spc-btn--hover-shine::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -80%;
    width: 60%;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%);
    transform: skewX(-20deg);
    transition: left .45s ease;
    pointer-events: none;
}

.spc-btn--hover-shine:hover::after { left: 125%; }

.spc-btn--hover-icon-slide:hover .spc-button__icon--start { transform: translateX(-3px); }
.spc-btn--hover-icon-slide:hover .spc-button__icon--end   { transform: translateX(3px); }

/* Attention animations — continuous, subtle loops. They stop entirely
   on hover (animation: none, not paused) so a paused keyframe transform
   can never override the hover effect transform. */
@keyframes spc-btn-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}

@keyframes spc-btn-heartbeat {
    0%, 30%, 60%, 100% { transform: scale(1); }
    15% { transform: scale(1.06); }
    45% { transform: scale(1.04); }
}

@keyframes spc-btn-shake {
    0%, 88%, 100% { transform: translateX(0); }
    90% { transform: translateX(-3px); }
    92% { transform: translateX(3px); }
    94% { transform: translateX(-2px); }
    96% { transform: translateX(2px); }
}

@keyframes spc-btn-glow {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spc-btn-bg, var(--spc-primary)) 45%, transparent), var(--spc-shadow); }
    70%  { box-shadow: 0 0 0 14px transparent, var(--spc-shadow); }
    100% { box-shadow: 0 0 0 0 transparent, var(--spc-shadow); }
}

@keyframes spc-btn-bounce {
    0%, 86%, 100% { transform: translateY(0); }
    90% { transform: translateY(-6px); }
    94% { transform: translateY(0); }
    97% { transform: translateY(-3px); }
}

.spc-btn--anim-pulse     { animation: spc-btn-pulse 2s ease-in-out infinite; }
.spc-btn--anim-heartbeat { animation: spc-btn-heartbeat 1.6s ease-in-out infinite; }
.spc-btn--anim-shake     { animation: spc-btn-shake 3s ease-in-out infinite; }
.spc-btn--anim-glow      { animation: spc-btn-glow 2.2s ease-out infinite; }
.spc-btn--anim-bounce    { animation: spc-btn-bounce 3s ease-in-out infinite; }

.spc-btn--anim-pulse:hover,
.spc-btn--anim-heartbeat:hover,
.spc-btn--anim-shake:hover,
.spc-btn--anim-glow:hover,
.spc-btn--anim-bounce:hover {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .spc-btn--anim-pulse,
    .spc-btn--anim-heartbeat,
    .spc-btn--anim-shake,
    .spc-btn--anim-glow,
    .spc-btn--anim-bounce {
        animation: none;
    }
}

.spc-button--sm  { min-height: 48px; padding: 10px 18px; font-size: 15px; }
.spc-button--lg  { min-height: 56px; padding: 15px 32px; font-size: clamp(13px, 3.8vw, 17px); }
.spc-button--width-full   { width: 100%; }
.spc-button--width-mobile { width: 100%; }

/* sticky mobile CTA */
.spc-button-wrap--sticky-mobile {
    position: sticky;
    bottom: 12px;
    z-index: 30;
    padding-inline: 0;
    transition: opacity .25s ease, transform .25s ease;
}

.spc-button-wrap--sticky-mobile .spc-button {
    width: 100%;
    box-shadow: 0 -2px 20px rgba(0,0,0,.18), var(--spc-shadow);
}

.spc-button-wrap--sticky-mobile.spc-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

/* ── SECTION BLOCKS (shared vertical rhythm) ───────────────── */
.spc-fl,
.spc-offer,
.spc-selector,
.spc-checkout,
.spc-faq,
.spc-testimonials {
    margin-block: 24px;
}

/* ── FEATURE LIST ──────────────────────────────────────────── */
.spc-fl__items {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

/* Media = icon in a colored circle, or an uploaded image filling it. */
.spc-fl__media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--fl-media-size, 56px);
    height: var(--fl-media-size, 56px);
    border-radius: var(--fl-media-radius, 50%);
    overflow: hidden;
    font-size: calc(var(--fl-media-size, 56px) * .5);
    line-height: 1;
}

.spc-fl__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spc-fl__media i { line-height: 1; }

/* rendered icon (inline SVG from BaseHelper::renderIcon) inherits the span color */
.spc-fl__media svg {
    width: 1em;
    height: 1em;
    display: block;
}

/* Media type "Both": image and icon shown side by side, never overlapping */
.spc-fl__media-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* per-type sizes (block-level, uniform) */
.spc-fl__media--icon  { width: var(--fl-icon-size, 56px);  height: var(--fl-icon-size, 56px);  font-size: calc(var(--fl-icon-size, 56px) * .5); }
.spc-fl__media--image { width: var(--fl-image-size, 56px); height: var(--fl-image-size, 56px); }

/* optional section heading above the list */
.spc-fl__heading {
    margin: 0 0 16px;
    font-size: clamp(20px, 5.5vw, 28px);
    line-height: 1.25;
    font-weight: 800;
    color: var(--fl-heading-color, #111827);
    overflow-wrap: anywhere;
}

.spc-fl__heading.spc-align-center { text-align: center; }
.spc-fl__heading.spc-align-right  { text-align: right; }

.spc-fl__title {
    margin: 0;
    color: var(--fl-title-color, #111827);
    font-size: var(--fl-title-size, 17px);
    line-height: 1.3;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.spc-fl__desc {
    margin: 0;
    color: var(--fl-desc-color, #475569);
    line-height: 1.6;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.spc-fl__check-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    font-size: 22px;
    line-height: 1;
    color: var(--fl-check-color, var(--spc-primary));
}

.spc-fl__check-icon svg { width: 1em; height: 1em; display: block; }
.spc-fl__check-icon i { line-height: 1; }

/* ── LAYOUT (independent per breakpoint) ───────────────────────
   One semantic item; each breakpoint renders as icon-card / horizontal /
   checklist based on the spc-fl--d-* (desktop ≥768px) and spc-fl--m-*
   (mobile <768px) classes, so any desktop+mobile combination works. */
.spc-fl__item { display: flex; }
.spc-fl__body { min-width: 0; }

/* The three layouts are scoped per breakpoint so the desktop layout
   (spc-fl--d-*) only applies at >=768px and the mobile layout (spc-fl--m-*)
   only applies below it. When the per-layout item rules lived outside any
   media query they shared equal specificity, so whichever came last in the
   source (checklist/horizontal) overrode the desktop icon-card layout at
   every width — the desktop_layout bug. */
@media (min-width: 768px) {
    /* icon-card (desktop) */
    .spc-fl--d-icon-card .spc-fl__item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        height: 100%;
        padding: 18px 14px;
        border-radius: var(--spc-radius);
        background: var(--fl-card-bg, #fff);
    }
    .spc-fl--d-icon-card .spc-fl__check-icon { display: none; }
    /* Desktop text alignment (independent of mobile) */
    .spc-fl--dalign-left   { text-align: left; }
    .spc-fl--dalign-center { text-align: center; }
    .spc-fl--dalign-right  { text-align: right; }
    .spc-fl--d-icon-card.spc-fl--dalign-left   .spc-fl__item { align-items: flex-start; text-align: left; }
    .spc-fl--d-icon-card.spc-fl--dalign-center .spc-fl__item { align-items: center;     text-align: center; }
    .spc-fl--d-icon-card.spc-fl--dalign-right  .spc-fl__item { align-items: flex-end;   text-align: right; }
    .spc-fl--d-icon-card.spc-fl--card-bordered .spc-fl__item    { border: 1px solid #e5e7eb; }
    .spc-fl--d-icon-card.spc-fl--card-soft-shadow .spc-fl__item { box-shadow: var(--spc-shadow-card); }
    .spc-fl--d-icon-card.spc-fl--cols-2 .spc-fl__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spc-fl--d-icon-card.spc-fl--cols-3 .spc-fl__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .spc-fl--d-icon-card.spc-fl--cols-4 .spc-fl__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* horizontal (desktop) */
    .spc-fl--d-horizontal .spc-fl__item {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding: 14px;
        border-radius: var(--spc-radius);
        background: var(--fl-card-bg, #fff);
    }
    .spc-fl--d-horizontal .spc-fl__items { grid-template-columns: 1fr; gap: 10px; }
    .spc-fl--d-horizontal .spc-fl__check-icon { display: none; }
    .spc-fl--d-horizontal .spc-fl__media { margin-top: 2px; }
    .spc-fl--d-horizontal .spc-fl__title { margin-bottom: 4px; }

    /* checklist (desktop) */
    .spc-fl--d-checklist .spc-fl__item {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        padding: 8px 10px;
        border-radius: 8px;
        background: var(--fl-check-bg, transparent);
    }
    .spc-fl--d-checklist .spc-fl__items { grid-template-columns: 1fr; gap: 6px; }
    .spc-fl--d-checklist .spc-fl__media { display: none; }
    .spc-fl--d-checklist .spc-fl__desc  { display: none; }
    .spc-fl--d-checklist .spc-fl__title {
        margin: 0;
        color: var(--fl-check-text, #374151);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5;
    }
}

@media (max-width: 767.98px) {
    /* icon-card (mobile) */
    .spc-fl--m-icon-card .spc-fl__item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        height: 100%;
        padding: 18px 14px;
        border-radius: var(--spc-radius);
        background: var(--fl-card-bg, #fff);
    }
    .spc-fl--m-icon-card .spc-fl__check-icon { display: none; }
    /* Mobile text alignment (independent of desktop) */
    .spc-fl--malign-left   { text-align: left; }
    .spc-fl--malign-center { text-align: center; }
    .spc-fl--malign-right  { text-align: right; }
    .spc-fl--m-icon-card.spc-fl--malign-left   .spc-fl__item { align-items: flex-start; text-align: left; }
    .spc-fl--m-icon-card.spc-fl--malign-center .spc-fl__item { align-items: center;     text-align: center; }
    .spc-fl--m-icon-card.spc-fl--malign-right  .spc-fl__item { align-items: flex-end;   text-align: right; }
    .spc-fl--m-icon-card.spc-fl--card-bordered .spc-fl__item    { border: 1px solid #e5e7eb; }
    .spc-fl--m-icon-card.spc-fl--card-soft-shadow .spc-fl__item { box-shadow: var(--spc-shadow-card); }
    .spc-fl--m-icon-card.spc-fl--mcols-1 .spc-fl__items { grid-template-columns: 1fr; }
    .spc-fl--m-icon-card.spc-fl--mcols-2 .spc-fl__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* horizontal (mobile) */
    .spc-fl--m-horizontal .spc-fl__item {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding: 14px;
        border-radius: var(--spc-radius);
        background: var(--fl-card-bg, #fff);
    }
    .spc-fl--m-horizontal .spc-fl__items { grid-template-columns: 1fr; gap: 10px; }
    .spc-fl--m-horizontal .spc-fl__check-icon { display: none; }
    .spc-fl--m-horizontal .spc-fl__media { margin-top: 2px; }
    .spc-fl--m-horizontal .spc-fl__title { margin-bottom: 4px; }

    /* checklist (mobile) */
    .spc-fl--m-checklist .spc-fl__item {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        padding: 8px 10px;
        border-radius: 8px;
        background: var(--fl-check-bg, transparent);
    }
    .spc-fl--m-checklist .spc-fl__items { grid-template-columns: 1fr; gap: 6px; }
    .spc-fl--m-checklist .spc-fl__media { display: none; }
    .spc-fl--m-checklist .spc-fl__desc  { display: none; }
    .spc-fl--m-checklist .spc-fl__title {
        margin: 0;
        color: var(--fl-check-text, #374151);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5;
    }
}

/* ── TRUST BADGES ──────────────────────────────────────────── */
.spc-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    justify-content: center;
    padding: 4px 0;
}

.spc-trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 68px;
    flex: 0 0 auto;
}

.spc-trust-badge__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--spc-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.spc-trust-badge__icon svg {
    width: 26px;
    height: 26px;
    color: var(--spc-primary);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.spc-trust-badge__label {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-align: center;
    line-height: 1.3;
    overflow-wrap: anywhere;
    max-width: 72px;
}

/* ── OFFER PRICE BOX ───────────────────────────────────────── */
.spc-offer {
    padding: 20px 16px;
    border: 1px solid #e5e7eb;
    border-radius: var(--spc-radius);
    background: #fff;
    box-shadow: var(--spc-shadow-card);
}

.spc-offer--highlighted {
    border-color: var(--spc-accent);
    background: var(--spc-bg-soft);
}

.spc-offer__badge {
    display: inline-flex;
    max-width: 100%;
    border-radius: 999px;
    background: var(--spc-bg-soft);
    color: var(--spc-primary);
    border: 1px solid var(--spc-accent);
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.spc-offer__prices {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 0;
}

.spc-offer__prices strong {
    color: var(--spc-primary);
    font-size: 36px;
    font-weight: 800;
}

.spc-offer__regular {
    color: #64748b;
    text-decoration: line-through;
    font-size: 18px;
}

.spc-offer__hotline {
    font-weight: 700;
    color: #111827;
}

/* ── QTY STEPPER ───────────────────────────────────────────── */
.spc-qty {
    display: inline-grid;
    grid-template-columns: 48px minmax(56px, 68px) 48px;
    width: max-content;
    max-width: 100%;
    overflow: hidden;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    margin-top: 4px;
}

.spc-qty button,
.spc-qty input {
    height: 48px;
    border: 0;
    background: #fff;
    text-align: center;
    font-size: 17px;
    font-family: inherit;
}

.spc-qty button {
    font-weight: 900;
    background: #f8fafc;
    color: #374151;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.spc-qty button:active { background: #f1f5f9; }

/* ── SELECTOR ITEMS GRID ───────────────────────────────────── */
.spc-selector__items {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

/* ── CHECKOUT ──────────────────────────────────────────────── */
.spc-checkout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

.spc-checkout__form {
    order: 1;
    border: 1px solid #e5e7eb;
    border-radius: var(--spc-radius);
    background: #fff;
    box-shadow: var(--spc-shadow-card);
    padding: 18px;
}

.spc-checkout__summary {
    order: 2;
    border: 1px solid #e5e7eb;
    border-radius: var(--spc-radius);
    background: #fff;
    box-shadow: var(--spc-shadow-card);
    padding: 18px;
}

.spc-checkout__summary h3,
.spc-checkout__form h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 800;
    color: #111827;
}

.spc-h3-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--spc-primary);
}

.spc-h3-icon svg { width: 1.05em; height: 1.05em; }
.spc-h3-icon i { font-size: 1.05em; line-height: 1; }

/* ── SUMMARY ITEMS ─────────────────────────────────────────── */
.spc-summary__item,
.spc-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed #e5e7eb;
    min-width: 0;
    font-size: 15px;
}

.spc-summary__item > div,
.spc-summary__row span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.spc-summary__item span {
    color: #64748b;
    font-size: 13px;
}

.spc-summary__row--total {
    border-bottom: 0;
    margin-top: 4px;
    padding-top: 12px;
    font-size: 20px;
    font-weight: 800;
    color: var(--spc-primary);
}

/* Phone-based buyer discount line (above the total). Shown only when an
   eligible coupon is active for the typed phone; the .spc-summary__row base is
   display:flex, so [hidden] needs an explicit display:none to actually hide. */
.spc-summary__discount {
    color: var(--spc-trust, #0F8A5F);
    font-weight: 700;
}

.spc-summary__discount strong {
    color: var(--spc-trust, #0F8A5F);
    white-space: nowrap;
}

.spc-summary__discount[hidden] {
    display: none;
}

.spc-checkout__cod {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--spc-cod-bg, var(--spc-trust-soft));
    color: var(--spc-cod-text, var(--spc-trust-dark));
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.spc-cod-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.spc-cod-icon svg { width: 1.15em; height: 1.15em; }
.spc-cod-icon i { font-size: 1.15em; line-height: 1; }

/* Free-shipping encouragement line (below the threshold) */
.spc-summary__free {
    margin-top: 10px;
    padding: 9px 14px;
    border-radius: 10px;
    background: #fff7ed;
    color: #b45309;
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.spc-summary__free[hidden] { display: none; }

/* ── FORM FIELDS ───────────────────────────────────────────── */
/* Compact, dense inputs. Values are forced with !important and scoped to the
   SPC checkout so the host theme's taller global form styles can't inflate the
   fields back up. Targets: 44px control height, 8px vertical padding, 5px
   label gap, 12px between field groups. */
.spc-checkout .spc-field {
    margin-bottom: 12px;
}

.spc-checkout .spc-field label {
    display: block;
    margin-bottom: 5px;
    color: #334155;
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.2;
}

.spc-checkout .spc-field input,
.spc-checkout .spc-field textarea,
.spc-checkout .spc-field select {
    width: 100%;
    min-height: 44px !important;
    height: 44px !important;
    border: 1px solid #d1d8e0;
    border-radius: 9px;
    padding: 8px 14px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    background: #fff;
    color: #111827;
    font-family: 'Hind Siliguri', system-ui, sans-serif;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.spc-checkout .spc-field input:focus,
.spc-checkout .spc-field textarea:focus,
.spc-checkout .spc-field select:focus {
    outline: none;
    border-color: var(--spc-primary);
    box-shadow: 0 0 0 3px rgba(216, 27, 96, .10);
}

.spc-checkout .spc-field textarea {
    min-height: 72px !important;
    height: auto !important;
    resize: vertical;
}

/* ── INPUT LEADING ICONS ───────────────────────────────────── */
.spc-input-wrap { position: relative; }

.spc-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}

.spc-input-icon svg { width: 16px; height: 16px; }
.spc-input-icon i { font-size: 16px; line-height: 1; }

/* Icon is 16px at left:14px; text starts 8px after it (14 + 16 + 8 = 38px). */
.spc-checkout .spc-field .spc-input-wrap input.has-icon,
.spc-checkout .spc-field .spc-input-wrap textarea.has-icon {
    padding-left: 38px !important;
}

.spc-input-wrap--textarea .spc-input-icon {
    top: 11px;
    transform: none;
}

/* ── TRUST ROW (above submit button) ───────────────────────── */
.spc-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    margin: 14px 0 4px;
}

.spc-trust-row__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--spc-trust-color, var(--spc-trust));
    overflow-wrap: anywhere;
}

.spc-trust-row__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--spc-trust-color, var(--spc-trust));
}

.spc-trust-row__icon svg { width: 1.15em; height: 1.15em; }
.spc-trust-row__icon i { font-size: 1.15em; line-height: 1; }

/* ── SHIPPING RADIO LIST ───────────────────────────────────── */
.spc-shipping-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px !important;
    margin-top: 4px;
}

/* Compact radio rows — target ~44-46px height: tighter padding, slimmer
   border, smaller radio circle. Selected still fills with the accent + check. */
.spc-shipping-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, background .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.spc-shipping-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.spc-shipping-card__check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .15s ease, border-color .15s ease;
}

.spc-shipping-card__check svg {
    width: 11px;
    height: 11px;
    opacity: 0;
    transition: opacity .15s ease;
}

.spc-shipping-card__name {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 12px;
    font-size: 14.5px;
    font-weight: 700;
    color: #374151;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.spc-shipping-card__fee {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 800;
    color: var(--spc-primary);
}

.spc-shipping-card.is-selected {
    border-color: var(--spc-primary);
    background: var(--spc-bg-soft);
}

.spc-shipping-card.is-selected .spc-shipping-card__check {
    background: var(--spc-primary);
    border-color: var(--spc-primary);
}

.spc-shipping-card.is-selected .spc-shipping-card__check svg { opacity: 1; }

/* Robust radio row: two-class specificity + !important beats theme `label`/form
   resets that could flip display or collapse spacing. Spacing is margin-based
   (not flex `gap`) so the radio→label gap survives even if a theme zeroes flex
   gap entirely: column-gap is forced to 0 and the check carries the 10px right
   margin. Layout stays radio | 10px | name … | fee (pushed right). */
.spc-shipping-cards .spc-shipping-card {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    column-gap: 0 !important;
}

.spc-shipping-cards .spc-shipping-card__check { flex: 0 0 auto !important; margin: 0 10px 0 0 !important; }
.spc-shipping-cards .spc-shipping-card__name { flex: 1 1 auto !important; margin: 0 !important; }
.spc-shipping-cards .spc-shipping-card__fee { flex: 0 0 auto !important; margin-left: auto !important; }

/* Inline required-field error (shipping area) */
.spc-field__error {
    margin-top: 8px;
    color: #b91c1c;
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.spc-field__error[hidden] { display: none; }

.spc-field.has-error .spc-shipping-cards { animation: spc-card-shake .4s ease; }

/* ── ALERT ─────────────────────────────────────────────────── */
.spc-alert {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    overflow-wrap: anywhere;
    font-size: 15px;
    font-weight: 600;
}

.spc-alert.is-success {
    background: #ecfdf5;
    color: #047857;
}

/* ── BRANDED THANK-YOU (after a successful order) ──────────── */
.spc-checkout--done {
    display: block;
}

.spc-thankyou {
    --spc-ty-accent: var(--spc-primary);
    max-width: 480px;
    margin: 0 auto;
    padding: 30px 22px 26px;
    border: 1px solid #e5e7eb;
    border-radius: var(--spc-radius);
    background: #fff;
    box-shadow: var(--spc-shadow-card);
    text-align: center;
}

.spc-thankyou__check {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--spc-ty-check, var(--spc-trust));
    box-shadow: 0 8px 20px -8px var(--spc-ty-check, var(--spc-trust));
    animation: spc-ty-pop .4s ease;
}

.spc-thankyou__check svg { width: 34px; height: 34px; }

@keyframes spc-ty-pop {
    0%   { transform: scale(.4); opacity: 0; }
    60%  { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

.spc-thankyou__heading {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    color: #111827;
    line-height: 1.45;
}

.spc-thankyou__order {
    margin-bottom: 16px;
    font-size: 15px;
    color: #475569;
}

.spc-thankyou__order strong { color: var(--spc-ty-accent); }

.spc-thankyou__items {
    text-align: left;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    padding: 4px 14px;
    margin-bottom: 16px;
    background: #fafbfc;
}

.spc-ty__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed #e5e7eb;
    font-size: 15px;
    color: #334155;
    overflow-wrap: anywhere;
}

.spc-ty__item strong { white-space: nowrap; }
.spc-ty__item:last-child { border-bottom: 0; }

.spc-ty__total {
    font-weight: 800;
    font-size: 17px;
    color: var(--spc-ty-accent);
}

.spc-thankyou__message {
    margin: 0 0 14px;
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
}

.spc-thankyou__cod {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--spc-trust-soft);
    color: var(--spc-trust-dark);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
}

.spc-thankyou__support {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    overflow-wrap: anywhere;
}

/* Standalone thank-you page (dedicated route) — breathing room under the header */
.spc-thankyou-page {
    padding-block: 48px;
}

/* ── FAQ ───────────────────────────────────────────────────── */
.spc-faq__title {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 800;
    color: #111827;
}

.spc-faq__item {
    overflow: hidden;
    background: var(--spc-faq-card, #fff);
}

.spc-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    color: var(--spc-faq-q, var(--spc-text-strong));
    line-height: 1.4;
    -webkit-tap-highlight-color: transparent;
}

.spc-faq__item.is-static .spc-faq__q,
.spc-faq--list .spc-faq__q { cursor: default; }

.spc-faq__qtext {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.spc-faq__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--spc-faq-icon, var(--spc-primary));
}

.spc-faq__icon svg { width: 1.2em; height: 1.2em; }
.spc-faq__icon i { font-size: 1.15em; line-height: 1; }

/* Open/close indicator */
.spc-faq__ind {
    flex-shrink: 0;
    width: 22px;
    text-align: center;
    color: var(--spc-faq-ind, var(--spc-primary));
    font-weight: 400;
    line-height: 1;
    transition: transform .22s ease;
}

.spc-faq--ind-plus-minus .spc-faq__ind::before { content: '+'; font-size: 20px; }
.spc-faq--ind-plus-minus .spc-faq__item.is-open .spc-faq__ind::before { content: '\2212'; }
.spc-faq--ind-chevron .spc-faq__ind::before { content: '\25BE'; font-size: 14px; display: inline-block; }
.spc-faq--ind-chevron .spc-faq__item.is-open .spc-faq__ind { transform: rotate(180deg); }

/* Body open/close animation (max-height set inline by JS on open) */
.spc-faq__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
}

.spc-faq--list .spc-faq__body { max-height: none; }

.spc-faq__bodyinner {
    padding: 0 16px 14px;
    color: var(--spc-faq-a, var(--spc-text));
    font-size: 15px;
    line-height: 1.65;
}

/* Alignment */
.spc-faq--align-center .spc-faq__qtext,
.spc-faq--align-center .spc-faq__bodyinner,
.spc-faq--align-center .spc-faq__title { text-align: center; }

/* STYLE — Separated cards (default) */
.spc-faq--style-cards .spc-faq__item {
    border: 1px solid #e5e7eb;
    border-radius: var(--spc-radius);
    box-shadow: var(--spc-shadow-card);
    margin-bottom: 10px;
}

/* STYLE — Bordered (single joined container) */
.spc-faq--style-bordered {
    border: 1px solid #e5e7eb;
    border-radius: var(--spc-radius);
    overflow: hidden;
}

.spc-faq--style-bordered .spc-faq__title {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.spc-faq--style-bordered .spc-faq__item + .spc-faq__item { border-top: 1px solid #e5e7eb; }

/* STYLE — Soft background */
.spc-faq--style-soft .spc-faq__item {
    background: var(--spc-faq-card, #f8fafc);
    border-radius: var(--spc-radius);
    margin-bottom: 8px;
}

/* STYLE — Plain (dividers only) */
.spc-faq--style-plain .spc-faq__item {
    background: var(--spc-faq-card, transparent);
    border-bottom: 1px solid #e5e7eb;
}

.spc-faq--style-plain .spc-faq__q { padding-left: 2px; padding-right: 2px; }
.spc-faq--style-plain .spc-faq__bodyinner { padding-left: 2px; padding-right: 2px; }

/* ── TESTIMONIALS ──────────────────────────────────────────── */
.spc-testimonials {
    --spc-tm-name: var(--spc-text-strong);
    --spc-tm-text: var(--spc-text);
    --spc-tm-star: var(--spc-star);
    --spc-tm-verified: var(--spc-trust);
    --spc-tm-accent: var(--spc-primary);
}

.spc-tm-title { margin: 0 0 16px; }
.spc-tm-title--left { text-align: left; }
.spc-tm-title--center { text-align: center; }
.spc-tm-title--right { text-align: right; }

.spc-testimonials__items {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

.spc-testimonial {
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: var(--spc-radius);
    background: var(--spc-tm-card-bg, #fff);
    box-shadow: var(--spc-shadow-card);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.spc-testimonial__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.spc-testimonial__avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--spc-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    color: var(--spc-tm-accent);
    overflow: hidden;
    text-transform: uppercase;
}

.spc-testimonial__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.spc-testimonial__meta {
    min-width: 0;
}

.spc-testimonial__name {
    font-weight: 700;
    color: var(--spc-tm-name);
    font-size: 15px;
    display: block;
    overflow-wrap: anywhere;
}

.spc-testimonial__location {
    display: block;
    font-size: 12.5px;
    color: #94a3b8;
    margin-top: 1px;
    overflow-wrap: anywhere;
}

.spc-testimonial__rating {
    letter-spacing: 2px;
    font-size: 15px;
    line-height: 1;
    margin-top: 4px;
}

.spc-testimonial__stars-on { color: var(--spc-tm-star); }
.spc-testimonial__stars-off { color: #d1d5db; }

.spc-testimonial__verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    color: var(--spc-tm-verified);
    font-size: 12px;
    font-weight: 700;
}

.spc-testimonial__verified svg { flex-shrink: 0; }

.spc-testimonial > p {
    margin: 0;
    color: var(--spc-tm-text);
    line-height: 1.65;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.spc-testimonial__photo img {
    max-width: 140px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    display: block;
}

/* Card content alignment */
.spc-tm-align--center .spc-testimonial { text-align: center; }
.spc-tm-align--center .spc-testimonial__head { flex-direction: column; gap: 8px; }
.spc-tm-align--center .spc-testimonial__verified,
.spc-tm-align--center .spc-testimonial__photo { align-self: center; }
.spc-tm-align--center .spc-testimonial__photo img { margin-inline: auto; }
.spc-tm-align--right .spc-testimonial { text-align: right; }
.spc-tm-align--right .spc-testimonial__head { flex-direction: row-reverse; }
.spc-tm-align--right .spc-testimonial__verified { align-self: flex-end; }
.spc-tm-align--right .spc-testimonial__photo img { margin-left: auto; }

/* Card style variants (the Colors group overrides these defaults) */
.spc-tm--bordered .spc-testimonial {
    border: 1.5px solid #e2e8f0;
    box-shadow: none;
}

.spc-tm--soft .spc-testimonial {
    border-color: transparent;
    background: var(--spc-tm-card-bg, #f1f5f9);
    box-shadow: none;
}

.spc-tm--plain .spc-testimonial {
    border-color: transparent;
    background: var(--spc-tm-card-bg, transparent);
    box-shadow: none;
    padding: 14px 2px;
}

/* Slider layout (lightweight, custom JS — no library) */
.spc-tm-slider { position: relative; }
.spc-tm-viewport { overflow: hidden; }

.spc-tm-track {
    display: flex;
    transition: transform .45s ease;
    will-change: transform;
}

.spc-tm-track--noanim { transition: none; }

.spc-tm-slide {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 6px 6px;
    display: flex;
}

.spc-tm-slide .spc-testimonial { width: 100%; }

.spc-tm-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
}

.spc-tm-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.spc-tm-dots button.is-active {
    background: var(--spc-tm-accent);
    transform: scale(1.3);
}

.spc-tm-arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #334155;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--spc-shadow-card);
    display: none;
}

.spc-tm-arrow--prev { left: -6px; }
.spc-tm-arrow--next { right: -6px; }

/* ── VISIBILITY HELPERS ────────────────────────────────────── */
/* Only ever set display:none so flex/grid blocks keep their own
   display value when visible. */
@media (max-width: 767.98px) {
    .spc-hide-mobile { display: none !important; }
}

/* ── DESKTOP OVERRIDES (≥768px) ────────────────────────────── */
@media (min-width: 768px) {
    .spc-section,
    .spc-row,
    .spc-heading,
    .spc-text,
    .spc-image,
    .spc-video,
    .spc-button-wrap,
    .spc-trust-badges,
    .spc-fl,
    .spc-offer,
    .spc-selector,
    .spc-checkout,
    .spc-faq,
    .spc-testimonials {
        --spc-gutter: 24px;
    }

    .spc-section {
        padding-block: var(--spc-pt, 56px) var(--spc-pb, 56px);
    }

    .spc-fl,
    .spc-offer,
    .spc-selector,
    .spc-checkout,
    .spc-faq,
    .spc-testimonials {
        margin-block: 28px;
    }

    /* Rows become real columns from 768px up */
    .spc-row {
        display: grid;
        grid-template-columns: var(--spc-row-cols, repeat(2, minmax(0, 1fr)));
        align-items: start;
        margin-block: 24px;
    }

    .spc-row--gap-lg { --spc-row-gap: 32px; }

    .spc-row--valign-top     { align-items: start; }
    .spc-row--valign-middle  { align-items: center; }
    .spc-row--valign-bottom  { align-items: end; }
    .spc-row--valign-stretch { align-items: stretch; }

    .spc-hide-desktop { display: none !important; }

    .spc-button--width-mobile { width: auto; }

    .spc-button-wrap--sticky-mobile {
        position: static;
        bottom: auto;
    }

    .spc-button-wrap--sticky-mobile.spc-hidden {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .spc-heading--sm { font-size: clamp(22px, 3vw, 24px); }
    .spc-heading--md { font-size: clamp(26px, 4vw, 32px); }
    .spc-heading--lg { font-size: clamp(30px, 5vw, 42px); }
    .spc-heading--xl { font-size: clamp(34px, 6vw, 54px); }

    .spc-text--md { font-size: 17px; }
    .spc-text--lg { font-size: 20px; }

    .spc-text__heading { font-size: clamp(26px, 3vw, 32px); }

    .spc-checkout {
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 22px;
    }

    .spc-checkout__form    { order: 1; padding: 24px; }
    .spc-checkout__summary { order: 2; padding: 24px; }

    .spc-checkout--summary-top,
    .spc-checkout--one-column {
        grid-template-columns: 1fr;
    }

    .spc-checkout--split .spc-checkout__form    { order: 1; }
    .spc-checkout--split .spc-checkout__summary { order: 2; }

    .spc-testimonials--grid .spc-testimonials__items {
        grid-template-columns: repeat(3, 1fr);
    }

    .spc-testimonials--list .spc-testimonials__items {
        grid-template-columns: 1fr;
    }

    .spc-tm-slide {
        flex-basis: 33.3333%;
        max-width: 33.3333%;
    }

    .spc-tm-arrow { display: block; }

    .spc-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .spc-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

    .spc-offer { padding: 28px; }
}

/* ── TINY SCREENS (<360px) ─────────────────────────────────── */
@media (max-width: 359px) {
    .spc-shipping-cards {
        grid-template-columns: 1fr;
    }
}

/* ── OFFER PRICE BOX V2 ────────────────────────────────────── */
/* v2 boxes carry .spc-offer (container/token rules) plus .spc-offer2;
   the rules below come last in the file so they override the legacy
   .spc-offer skin at every breakpoint. Legacy blocks (no style preset
   saved) never get .spc-offer2. */
.spc-offer2 {
    --spc-o2-accent: var(--spc-primary);
    --spc-o2-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 480px;
    margin-inline: auto;
    padding: 24px 18px;
    border: none;
    border-radius: var(--spc-o2-radius);
    background: var(--spc-o2-bg, #fff);
    box-shadow: none;
}

.spc-offer2--corner-square { --spc-o2-radius: 0; }

/* Style presets — each a complete look; the box colors only override
   the preset when the shortcode sets them (inline CSS vars win). */
.spc-offer2--bordered {
    border: var(--spc-o2-bw, 2px) solid var(--spc-o2-border, var(--spc-o2-accent));
    box-shadow: var(--spc-shadow-card);
}

.spc-offer2--soft {
    background: var(--spc-o2-bg, var(--spc-bg-soft));
}

.spc-offer2--band {
    background: var(--spc-o2-bg, var(--spc-bg-soft));
    border-block: var(--spc-o2-bw, 3px) solid var(--spc-o2-border, var(--spc-o2-accent));
    border-radius: 0;
}

.spc-offer2--plain {
    background: var(--spc-o2-bg, transparent);
}

.spc-offer2--luxury-dark {
    --spc-o2-accent: #d4af37;
    --spc-o2-regular: #b9b3c4;
    --spc-o2-strike: #8f8a9b;
    --spc-o2-offer: #f3d36b;
    --spc-o2-info: #d6d1e0;
    --spc-o2-line-bg: rgba(255, 255, 255, .06);
    --spc-o2-line-text: #f3d36b;
    background: var(--spc-o2-bg, #171225);
    border: var(--spc-o2-bw, 1px) solid var(--spc-o2-border, #d4af37);
    box-shadow: 0 10px 30px rgba(23, 18, 37, .35);
}

.spc-offer2--minimal {
    border: var(--spc-o2-bw, 1px) solid var(--spc-o2-border, #e5e7eb);
}

/* Badge (top pill) */
.spc-offer2__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
    background: var(--spc-o2-badge-bg, color-mix(in srgb, var(--spc-o2-accent) 14%, transparent));
    color: var(--spc-o2-badge-text, var(--spc-o2-accent));
}

.spc-offer2--badge-sm .spc-offer2__badge { font-size: 12px; }
.spc-offer2--badge-md .spc-offer2__badge { font-size: 13px; }
.spc-offer2--badge-lg .spc-offer2__badge { font-size: 15px; }

/* Badge attention loops reuse the button keyframes defined above */
.spc-offer2__badge--anim-pulse { animation: spc-btn-pulse 2s ease-in-out infinite; }
.spc-offer2__badge--anim-shake { animation: spc-btn-shake 3s ease-in-out infinite; }

/* Price: small struck regular line above, hero offer price below,
   generous breathing room around the hero. */
.spc-offer2__price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 14px 0;
}

.spc-offer2__regular {
    font-size: 14px;
    font-weight: 600;
    color: var(--spc-o2-regular, var(--spc-text));
}

.spc-offer2__regular del {
    color: var(--spc-o2-strike, var(--spc-text-muted));
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.spc-offer2__offer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--spc-o2-offer, var(--spc-o2-accent));
}

.spc-offer2--price-sm .spc-offer2__offer { font-size: 34px; }
.spc-offer2--price-md .spc-offer2__offer { font-size: 40px; }
.spc-offer2--price-lg .spc-offer2__offer { font-size: 46px; }

.spc-offer2__tag {
    border-radius: 8px;
    padding: 3px 9px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    background: var(--spc-o2-tag-bg, var(--spc-o2-accent));
    color: var(--spc-o2-tag-text, #fff);
}

/* Savings pill */
.spc-offer2__savings {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    border-radius: 999px;
    padding: 7px 16px;
    font-weight: 700;
    overflow-wrap: anywhere;
    background: var(--spc-o2-save-bg, var(--spc-trust-dark));
    color: var(--spc-o2-save-text, #fff);
}

/* Info + offer lines: grouped tight under the hero */
.spc-offer2__lines {
    display: grid;
    gap: 7px;
    justify-items: center;
    width: 100%;
    margin-top: 10px;
}

.spc-offer2__info,
.spc-offer2__offer-line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.spc-offer2__info {
    font-weight: 600;
    color: var(--spc-o2-info, var(--spc-text));
}

/* Polish default: white background + thin border in the box accent
   family (never amber) so the line cannot clash with the box colors. */
.spc-offer2__offer-line {
    border-radius: 10px;
    padding: 9px 14px;
    font-weight: 700;
    background: var(--spc-o2-line-bg, #fff);
    border: 1px solid var(--spc-o2-line-border, color-mix(in srgb, var(--spc-o2-accent) 45%, #fff));
    color: var(--spc-o2-line-text, var(--spc-o2-accent));
}

.spc-offer2--text-sm :is(.spc-offer2__info, .spc-offer2__offer-line, .spc-offer2__savings) { font-size: 13px; }
.spc-offer2--text-md :is(.spc-offer2__info, .spc-offer2__offer-line, .spc-offer2__savings) { font-size: 15px; }
.spc-offer2--text-lg :is(.spc-offer2__info, .spc-offer2__offer-line, .spc-offer2__savings) { font-size: 17px; }

/* Inline icons render before the text in badge/savings/info/offer lines */
.spc-o2-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.spc-o2-icon svg { width: 1.2em; height: 1.2em; }
.spc-o2-icon i { font-size: 1.2em; line-height: 1; }

/* Button: separated from the lines, full-width tap target in the box */
.spc-offer2__btn {
    width: 100%;
    margin-top: 14px;
}

@media (min-width: 768px) {
    .spc-offer2 { padding: 28px 24px; }
    .spc-offer2--price-sm .spc-offer2__offer { font-size: 38px; }
    .spc-offer2--price-md .spc-offer2__offer { font-size: 44px; }
    .spc-offer2--price-lg .spc-offer2__offer { font-size: 50px; }
}

@media (prefers-reduced-motion: reduce) {
    .spc-offer2__badge--anim-pulse,
    .spc-offer2__badge--anim-shake {
        animation: none;
    }
}

/* ── SELECTOR V2 (product selector + product grid selector) ── */
/* All colors/sizes are CSS vars set inline per shortcode; the defaults
   below match the admin form defaults so legacy blocks render fine. */
.spc-sel {
    --spc-sel-border:   var(--spc-primary);
    --spc-sel-tint:     var(--spc-bg-soft);
    --spc-sel-unborder: var(--spc-border);
    --spc-sel-cardbg:   var(--spc-surface);
    --spc-sel-img:      58px;
    --spc-sel-name:     16px;
    --spc-sel-pricefs:  18px;
    --spc-sel-radius:   14px;
}

.spc-sel--img-sm { --spc-sel-img: 48px; }
.spc-sel--img-md { --spc-sel-img: 58px; }
.spc-sel--img-lg { --spc-sel-img: 72px; }

.spc-sel--name-sm { --spc-sel-name: 14px; }
.spc-sel--name-md { --spc-sel-name: 16px; }
.spc-sel--name-lg { --spc-sel-name: 18px; }

.spc-sel--price-sm { --spc-sel-pricefs: 16px; }
.spc-sel--price-md { --spc-sel-pricefs: 18px; }
.spc-sel--price-lg { --spc-sel-pricefs: 21px; }

.spc-sel--square { --spc-sel-radius: 4px; }

/* Buyer guidance line above the cards */
.spc-sel__guide {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--spc-sel-guide, var(--spc-text));
    overflow-wrap: anywhere;
}

/* Card: mobile-first strict stacking — control+image left column,
   name/badge/price stacked right; extra + qty slide rows span below. */
.spc-pcard {
    position: relative;
    display: grid;
    grid-template-columns: 24px var(--spc-sel-img) minmax(0, 1fr);
    grid-template-areas:
        "control image head"
        "control image pricing"
        "extra   extra extra"
        "qty     qty   qty";
    column-gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1.5px solid var(--spc-sel-unborder);
    border-radius: var(--spc-sel-radius);
    background: var(--spc-sel-cardbg);
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Selected: ~2px colored border (ring avoids layout shift) + light tint */
.spc-pcard.is-selected {
    border-color: var(--spc-sel-border);
    box-shadow: 0 0 0 1px var(--spc-sel-border);
    background: var(--spc-sel-tint);
}

.spc-pcard input[type="radio"],
.spc-pcard input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Corner ribbon pill — only on the selected card */
.spc-pcard__ribbon {
    display: none;
    position: absolute;
    top: -10px;
    right: 12px;
    z-index: 2;
    max-width: calc(100% - 24px);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    background: var(--spc-sel-ribbon-bg, var(--spc-sel-border));
    color: var(--spc-sel-ribbon-text, #fff);
    overflow-wrap: anywhere;
}

.spc-pcard.is-selected .spc-pcard__ribbon { display: inline-flex; }

/* Radio circle / checkbox square — filled with a check when selected */
.spc-pcard__control {
    grid-area: control;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border: 2px solid #CBD5E1;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s ease, border-color .15s ease;
}

.spc-pcard--check .spc-pcard__control { border-radius: 6px; }

.spc-pcard__control svg {
    width: 12px;
    height: 12px;
    stroke: #fff;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity .15s ease;
}

.spc-pcard.is-selected .spc-pcard__control {
    background: var(--spc-sel-border);
    border-color: var(--spc-sel-border);
}

.spc-pcard.is-selected .spc-pcard__control svg { opacity: 1; }

.spc-pcard__img {
    grid-area: image;
    width: var(--spc-sel-img);
    height: var(--spc-sel-img);
    border-radius: 10px;
    object-fit: cover;
    background: #f8fafc;
}

/* Name (own line, wraps) → optional badge → subtitle */
.spc-pcard__head {
    grid-area: head;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.spc-pcard__name {
    color: var(--spc-text-strong);
    font-size: var(--spc-sel-name);
    line-height: 1.35;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.spc-pcard__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    background: var(--spc-badge-bg-i, var(--spc-sel-badge-bg, var(--spc-trust-dark)));
    color: var(--spc-badge-text-i, var(--spc-sel-badge-text, #fff));
    overflow-wrap: anywhere;
}

.spc-pcard__badge-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.spc-pcard__badge-icon svg { width: 1.1em; height: 1.1em; }
.spc-pcard__badge-icon i   { font-size: 1.1em; line-height: 1; }

.spc-pcard__subtitle {
    color: var(--spc-text);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Offer price on its own line; struck regular + auto -% below it */
.spc-pcard__pricing {
    grid-area: pricing;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 4px;
}

.spc-pcard__price {
    color: var(--spc-sel-price, var(--spc-sel-border));
    font-weight: 800;
    font-size: var(--spc-sel-pricefs);
    line-height: 1.2;
}

.spc-pcard__was {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.spc-pcard__was del {
    color: var(--spc-sel-strike, #94a3b8);
    text-decoration: line-through;
}

.spc-pcard__off {
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    background: var(--spc-sel-tag-bg, var(--spc-bg-soft));
    color: var(--spc-sel-tag-text, var(--spc-primary));
}

/* Slide-down areas: variations/guidance/error (extra) and qty stepper.
   Collapsed when unselected; single mode collapses the previous card
   automatically because is-selected drops off it. */
.spc-pcard__extra,
.spc-pcard__qtywrap {
    min-width: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .25s ease, opacity .2s ease;
}

.spc-pcard__extra   { grid-area: extra; }
.spc-pcard__qtywrap { grid-area: qty; }

.spc-pcard.is-selected .spc-pcard__extra   { max-height: 520px; opacity: 1; }
.spc-pcard.is-selected .spc-pcard__qtywrap { max-height: 120px; opacity: 1; }

/* Qty after a dashed separator (mobile) */
.spc-pcard__qtywrap {
    display: block;
}

.spc-pcard.is-selected .spc-pcard__qtywrap {
    border-top: 1.5px dashed #D7DEE5;
    margin-top: 12px;
    padding-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.spc-pcard__qtylabel {
    font-size: 14px;
    font-weight: 600;
    color: var(--spc-sel-qtylabel, #334155);
}

.spc-pcard__guide {
    display: block;
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--spc-sel-guide, var(--spc-text));
}

.spc-pcard__stock {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #DC2626;
}

.spc-pcard__error {
    display: block;
    margin-top: 10px;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    background: var(--spc-sel-err-bg, #FEF2F2);
    color: var(--spc-sel-err, #B91C1C);
    overflow-wrap: anywhere;
}

.spc-pcard__error[hidden] { display: none; }

.spc-pcard.has-error { border-color: var(--spc-sel-err, #B91C1C); }

@keyframes spc-card-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.spc-pcard--shake { animation: spc-card-shake .45s ease; }

/* Variation chip groups inside the selected card */
.spc-pcard__variants {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.spc-vgroup__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.spc-vgroup__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spc-chip {
    min-height: 40px;
    padding: 7px 14px;
    border: 1.5px solid #D7DEE5;
    border-radius: 9px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.spc-chip.is-selected {
    background: var(--spc-sel-border);
    border-color: var(--spc-sel-border);
    color: #fff;
}

.spc-chip--swatch {
    position: relative;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 50%;
    background: var(--spc-swatch, #e5e7eb);
}

.spc-chip--swatch.is-selected {
    background: var(--spc-swatch, #e5e7eb);
    border-color: var(--spc-sel-border);
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 2.5px var(--spc-sel-border);
}

.spc-chip.is-out {
    opacity: .45;
    cursor: not-allowed;
    text-decoration: line-through;
}

.spc-chip--swatch.is-out::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    top: 50%;
    height: 2px;
    background: #9CA3AF;
    transform: rotate(-45deg);
}

/* Summary bounce on selection change */
@keyframes spc-bounce {
    0%, 100% { transform: scale(1); }
    35% { transform: scale(1.08); }
}

.spc-bounce {
    display: inline-block;
    animation: spc-bounce .35s ease;
}

/* Desktop: full-width horizontal rows —
   radio | image | name+badge | price | qty; variations as second row. */
@media (min-width: 768px) {
    .spc-pcard {
        grid-template-columns: 24px var(--spc-sel-img) minmax(0, 1fr) auto auto;
        grid-template-areas:
            "control image head pricing qty"
            "extra   extra extra extra   extra";
        align-items: center;
        column-gap: 16px;
        padding: 14px 18px;
    }

    .spc-pcard__control { margin-top: 0; }

    .spc-pcard__pricing {
        align-items: flex-end;
        text-align: right;
        margin-top: 0;
    }

    .spc-pcard.is-selected .spc-pcard__qtywrap {
        border-top: none;
        margin-top: 0;
        padding-top: 0;
    }

    /* Optional 2-column desktop layout for the product selector */
    .spc-sel--cols-2 .spc-selector__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .spc-pcard--shake,
    .spc-bounce {
        animation: none;
    }

    .spc-pcard__extra,
    .spc-pcard__qtywrap {
        transition: none;
    }
}

/* =========================================================================
   SPC: Contact Button (spc-cb) — floating / sticky bar / inline modes.
   Mobile-first, tap targets >= 48px, no horizontal overflow 320–428px.
   ========================================================================= */
.spc-cb__btns {
    display: flex;
    gap: 10px;
}

/* Button + icon sizing is driven by CSS vars set per size class below; the
   medium defaults reproduce the original look exactly (48px / 56px round /
   24px icon / 15px font). */
.spc-cb {
    --spc-cb-h: 48px;
    --spc-cb-pad: 16px;
    --spc-cb-font: 15px;
    --spc-cb-round: 56px;
    --spc-cb-isize: 24px;
}

.spc-cb--size-s { --spc-cb-h: 40px; --spc-cb-pad: 12px; --spc-cb-font: 14px; --spc-cb-round: 46px; }
.spc-cb--size-l { --spc-cb-h: 56px; --spc-cb-pad: 22px; --spc-cb-font: 17px; --spc-cb-round: 66px; }

.spc-cb--icon-s { --spc-cb-isize: 18px; }
.spc-cb--icon-l { --spc-cb-isize: 30px; }

.spc-cb__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--spc-cb-h);
    min-width: var(--spc-cb-h);
    padding: 0 var(--spc-cb-pad);
    border: 0;
    border-radius: 999px;
    background: var(--spc-cb-bg, #0f766e);
    color: var(--spc-cb-text, #fff);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--spc-cb-font);
    line-height: 1.2;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.spc-cb__btn:hover {
    transform: translateY(-2px);
    color: var(--spc-cb-text, #fff);
    filter: brightness(1.05);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
}

.spc-cb__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--spc-cb-isize);
    height: var(--spc-cb-isize);
    flex: 0 0 auto;
    color: var(--spc-cb-icon, currentColor);
}

.spc-cb__icon svg {
    width: var(--spc-cb-isize);
    height: var(--spc-cb-isize);
}

.spc-cb__icon i {
    font-size: calc(var(--spc-cb-isize) - 2px);
    line-height: 1;
}

.spc-cb__label {
    white-space: nowrap;
}

/* --- Floating: round icon buttons stacked in a corner --- */
.spc-cb--floating {
    position: fixed;
    z-index: 1050;
    display: flex;
}

/* Corner anchoring via --spc-cb-x / --spc-cb-y (author offset, default 16px).
   Bottom-anchored corners also add --spc-cb-bottombar (set by the overlap JS to
   a sticky bottom bar's height) so the float lifts above the bar; top corners
   add --spc-cb-topbar the same way. */
.spc-cb--floating.spc-cb--pos-br {
    right: var(--spc-cb-x, 16px);
    bottom: calc(var(--spc-cb-y, 16px) + var(--spc-cb-bottombar, 0px));
}

.spc-cb--floating.spc-cb--pos-bl {
    left: var(--spc-cb-x, 16px);
    bottom: calc(var(--spc-cb-y, 16px) + var(--spc-cb-bottombar, 0px));
}

.spc-cb--floating.spc-cb--pos-tr {
    right: var(--spc-cb-x, 16px);
    top: calc(var(--spc-cb-y, 16px) + var(--spc-cb-topbar, 0px));
}

.spc-cb--floating.spc-cb--pos-tl {
    left: var(--spc-cb-x, 16px);
    top: calc(var(--spc-cb-y, 16px) + var(--spc-cb-topbar, 0px));
}

.spc-cb--floating .spc-cb__btns {
    flex-direction: column;
}

.spc-cb--floating:not(.spc-cb--labeled) .spc-cb__btn {
    width: var(--spc-cb-round);
    min-width: var(--spc-cb-round);
    height: var(--spc-cb-round);
    padding: 0;
    border-radius: 50%;
}

.spc-cb--floating.spc-cb--labeled .spc-cb__btn {
    justify-content: flex-start;
}

/* --- Sticky bar: full-width edge bar, contacts as equal halves --- */
.spc-cb--sticky {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1050;
    display: flex;
    gap: 8px;
    background: #fff;
}

.spc-cb--sticky.spc-cb--edge-bottom {
    bottom: 0;
    padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 14px rgba(15, 23, 42, 0.14);
}

.spc-cb--sticky.spc-cb--edge-top {
    top: 0;
    padding: calc(8px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-left)) 8px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.14);
}

.spc-cb--sticky .spc-cb__btns {
    flex: 1;
    gap: 8px;
}

.spc-cb--sticky .spc-cb__btn {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 10px;
    box-shadow: none;
}

.spc-cb--sticky .spc-cb__btn:hover {
    transform: none;
    box-shadow: none;
}

/* --- Inline: a small CTA card in the page flow --- */
.spc-cb--inline {
    display: block;
    margin: 16px 0;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.spc-cb--inline .spc-cb__btns {
    flex-wrap: wrap;
}

.spc-cb--inline .spc-cb__btn {
    flex: 1 1 160px;
    border-radius: 10px;
}

@media (max-width: 480px) {
    .spc-cb--inline .spc-cb__btn {
        flex-basis: 100%;
    }
}

/* Inline CTA text (heading / subtext / optional icon) — each part renders only
   when the author sets it, so an empty field never leaves a gap. */
.spc-cb__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.spc-cb__head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    color: #0f766e;
}

.spc-cb__head-icon svg {
    width: 28px;
    height: 28px;
}

.spc-cb__head-icon i {
    font-size: 26px;
    line-height: 1;
}

.spc-cb__heading {
    margin: 0;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: #0f172a;
}

.spc-cb__subtext {
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: #64748b;
}

/* --- Button animation (stage 3): reuses the shared spc-btn-* keyframes.
   Mapping --spc-btn-bg to the contact's own color makes the glow ring match
   the button. Pauses on hover; disabled for reduced-motion below. --- */
.spc-cb__btn {
    --spc-btn-bg: var(--spc-cb-bg, #0f766e);
}

.spc-cb--anim-pulse .spc-cb__btn {
    animation: spc-btn-pulse 2s ease-in-out infinite;
}

.spc-cb--anim-heartbeat .spc-cb__btn {
    animation: spc-btn-heartbeat 1.6s ease-in-out infinite;
}

.spc-cb--anim-shake .spc-cb__btn {
    animation: spc-btn-shake 3s ease-in-out infinite;
}

.spc-cb--anim-glow .spc-cb__btn {
    animation: spc-btn-glow 2.2s ease-out infinite;
}

.spc-cb--anim-bounce .spc-cb__btn {
    animation: spc-btn-bounce 3s ease-in-out infinite;
}

.spc-cb--anim-pulse .spc-cb__btn:hover,
.spc-cb--anim-heartbeat .spc-cb__btn:hover,
.spc-cb--anim-shake .spc-cb__btn:hover,
.spc-cb--anim-glow .spc-cb__btn:hover,
.spc-cb--anim-bounce .spc-cb__btn:hover {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .spc-cb--anim-pulse .spc-cb__btn,
    .spc-cb--anim-heartbeat .spc-cb__btn,
    .spc-cb--anim-shake .spc-cb__btn,
    .spc-cb--anim-glow .spc-cb__btn,
    .spc-cb--anim-bounce .spc-cb__btn {
        animation: none;
    }
}

/* ── IMAGE SLIDER ──────────────────────────────────────────────
   Conversion-focused, mobile-first. No arrows: swipe + dots only.
   Lightweight custom engine (no library). All accents read the shared
   design tokens (--spc-primary / --spc-trust) so it matches every block. */
.spc-image-slider {
    --spc-is-dot: var(--spc-primary);
    --spc-is-radius: var(--spc-radius);
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.spc-image-slider--container { max-width: var(--spc-container); }

.spc-is-viewport {
    overflow: hidden;
    border-radius: var(--spc-is-radius);
}

.spc-is-track {
    display: flex;
    transition: transform .45s ease;
    will-change: transform;
}

.spc-is-track--noanim { transition: none; }

.spc-is-slide {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.spc-is-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--spc-is-ratio, 1 / 1);
    overflow: hidden;
    border-radius: var(--spc-is-radius);
    background: var(--spc-surface-soft);
}

/* Fill the reserved (ratio) box; cover avoids any layout shift on load. */
.spc-is-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Badges — up to two, stacked per top corner. Color set inline per badge. */
.spc-is-badges {
    position: absolute;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
}

.spc-is-badges--tl { left: 10px; align-items: flex-start; }
.spc-is-badges--tr { right: 10px; align-items: flex-end; }

.spc-is-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
}

.spc-is-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 14px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(to top, rgba(15, 23, 42, .72), transparent);
    z-index: 1;
}

.spc-is-cta {
    margin-top: 12px;
    text-align: center;
}

/* The slider CTA defaults to the bold accent fill of the main Order Button
   (not a pale/soft tint). A per-block CTA color still wins: it sets
   --spc-btn-bg, which this fallback honours first. */
.spc-is-cta .spc-button--solid {
    background: var(--spc-btn-bg, linear-gradient(135deg, var(--spc-primary-dark), var(--spc-primary)));
}

/* Dots — clickable, active uses the accent token. */
.spc-is-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
}

.spc-is-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.spc-is-dots button.is-active {
    background: var(--spc-is-dot);
    transform: scale(1.3);
}

/* Thumbnail strip — horizontally scrollable on mobile; active thumb uses the
   accent border. Sits below the dots. */
.spc-is-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-bottom: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.spc-is-thumb {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    overflow: hidden;
    opacity: .6;
    transition: opacity .2s, border-color .2s;
}

.spc-is-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spc-is-thumb.is-active {
    opacity: 1;
    border-color: var(--spc-is-dot);
}

/* Desktop: spanning the full container letterboxed a portrait/square ratio
   with large empty side-space. Instead, constrain the whole slider — media,
   dots, thumbnails and the fixed CTA all live inside .spc-image-slider — to a
   centered single-product hero width. The media keeps object-fit:cover (base
   rule) so it fills whatever aspect ratio the author chose, with no
   letterboxing. Mobile (< 768px) is left exactly as-is. */
@media (min-width: 768px) {
    .spc-image-slider {
        max-width: 540px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spc-is-track { transition: none; }
}

/* ── QTY STEPPER — compact segmented pill, no native spinner ─────
   This block is the single source of truth for the stepper sizing and
   intentionally overrides the legacy grid definition earlier in the file.
   Container chrome (1.5px border, 10px radius, overflow:hidden, white bg)
   comes from that base .spc-qty rule; here we only lay out + size the three
   segments: −  number  +. Desktop is compact; mobile uses thumb-friendly
   44px targets and keeps the number at 16px so iOS never zoom-focuses it. */

/* Remove native number-input spinner arrows — all devices */
.spc-qty [data-spc-qty-input]::-webkit-outer-spin-button,
.spc-qty [data-spc-qty-input]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.spc-qty [data-spc-qty-input] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.spc-qty {
    display: inline-flex;
    align-items: center;
    width: max-content !important;
    max-width: 100%;
}

.spc-qty [data-spc-qty-minus],
.spc-qty [data-spc-qty-plus] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    padding: 0;
}

.spc-qty [data-spc-qty-input] {
    flex: 0 0 auto;
    width: 46px;
    height: 38px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    padding: 0;
}

.spc-pcard__qtywrap {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    max-width: fit-content !important;
}

.spc-pcard__qtylabel {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Mobile — larger, thumb-friendly targets; number stays 16px (no iOS zoom).
   At 320px the label + (44+52+44) pill ≈ 200px, so it never overflows. */
@media (max-width: 767px) {
    .spc-pcard__qtywrap {
        margin-top: 6px;
    }

    .spc-qty [data-spc-qty-minus],
    .spc-qty [data-spc-qty-plus] {
        width: 44px !important;
        height: 44px !important;
        font-size: 22px !important;
    }

    .spc-qty [data-spc-qty-input] {
        width: 52px !important;
        height: 44px !important;
        font-size: 16px !important;
    }
}