/*!
 * WooKit — Product Bundles (frontend)
 * Uses --wookit-* design tokens so the widget inherits the theme's accent,
 * surface, radius, etc. Renders a grid of selectable bundle cards above the
 * single-product add-to-cart area (or wherever the shortcode is dropped).
 */

.wookit-bundles {
    --gap: 12px;
    font-family: var( --wookit-font, inherit ) !important;
    color: var( --wookit-body, inherit ) !important;
    margin: 1.5rem 0 !important;
    container-type: inline-size;
    container-name: wookit-bundles;
}

.wookit-bundles *,
.wookit-bundles *::before,
.wookit-bundles *::after { box-sizing: border-box !important; }

.wookit-bundles__intro {
    margin: 0 0 var(--gap) !important;
    font-size: 0.95rem !important;
    color: var( --wookit-muted, #646970 ) !important;
}

/* ── List — one bundle per row, full width, stacked vertically. ──────────── */
.wookit-bundles__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Single bundle (a label wrapping a radio + the card) ───────────────────── */
.wookit-bundle {
    position: relative;
    display: block;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

.wookit-bundle__input {
    /* Hide the native radio without losing it from the form. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    opacity: 0;
    cursor: pointer !important;
    /* `appearance: none` keeps Safari from rendering it on top of the card. */
    -webkit-appearance: none !important;
    appearance: none !important;
}

.wookit-bundle__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px !important;
    background: var( --wookit-surface, #fff ) !important;
    border: 2px solid var( --wookit-border, #e2e4e7 ) !important;
    border-radius: var( --wookit-radius-md, 8px ) !important;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

/* ── Top section: hero left, head + description right.
   Stays horizontal at all container widths — clamp() handles narrow screens. */
.wookit-bundle__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wookit-bundle__top-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

@media ( hover: hover ) and ( pointer: fine ) {
    .wookit-bundle:hover .wookit-bundle__card {
        border-color: var( --wookit-accent, #2271b1 ) !important;
    }
}

.wookit-bundle.is-selected .wookit-bundle__card,
.wookit-bundle__input:checked ~ .wookit-bundle__card {
    border-color: var( --wookit-accent, #2271b1 ) !important;
    background: color-mix( in srgb, var( --wookit-accent, #2271b1 ) 4%, transparent ) !important;
}

/* "Selected" badge — sits half on the top border, accent pill with checkmark.
   Hidden by default, fades in when the bundle is selected. */
.wookit-bundle__selected-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate( -50%, -50% ) scale( 0.92 );
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    color: var( --wookit-accent-fg, #fff ) !important;
    background: var( --wookit-accent, #2271b1 ) !important;
    border-radius: var( --wookit-radius-pill, 999px ) !important;
    box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.12 ) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    white-space: nowrap !important;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

.wookit-bundle__selected-badge svg {
    display: block;
}

.wookit-bundle.is-selected .wookit-bundle__selected-badge,
.wookit-bundle__input:checked ~ .wookit-bundle__card .wookit-bundle__selected-badge {
    opacity: 1;
    visibility: visible;
    transform: translate( -50%, -50% ) scale( 1 );
}

@media ( prefers-reduced-motion: reduce ) {
    .wookit-bundle__selected-badge {
        transition: none;
    }
}

/* ── Out-of-stock / unavailable bundle ──────────────────────────────────────
   A bundle whose fixed products can't be fulfilled. Greyed + non-interactive,
   matching the swatch OOS language (grey + strikethrough + disabled). The
   badge itself stays crisp — only the content is dimmed. */
.wookit-bundle--unavailable {
    cursor: not-allowed !important;
}

.wookit-bundle--unavailable .wookit-bundle__card {
    pointer-events: none;
}

.wookit-bundle--unavailable .wookit-bundle__top,
.wookit-bundle--unavailable .wookit-bundle__section,
.wookit-bundle--unavailable .wookit-bundle__picker {
    opacity: 0.5;
    filter: grayscale( 0.7 );
}

.wookit-bundle--unavailable .wookit-bundle__title {
    text-decoration: line-through !important;
}

/* OOS badge — same placement as the selected badge, but muted grey and always
   visible while the option is unavailable. */
.wookit-bundle__oos-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate( -50%, -50% );
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    color: #fff !important;
    background: var( --wookit-muted, #9ca3af ) !important;
    border-radius: var( --wookit-radius-pill, 999px ) !important;
    box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.12 ) !important;
    white-space: nowrap !important;
    z-index: 2;
}

.wookit-bundle__oos-badge svg {
    display: block;
}

/* ── Bundle head ───────────────────────────────────────────────────────────── */
.wookit-bundle__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.wookit-bundle__head-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.wookit-bundle__title {
    margin: 0 !important;
    font-size: clamp( 1rem, 0.8rem + 1cqi, 1.25rem ) !important;
    font-weight: 700 !important;
    color: var( --wookit-text, inherit ) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
}

.wookit-bundle__price {
    flex-shrink: 0;
    text-align: right !important;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    font-variant-numeric: tabular-nums;
}

.wookit-bundle__price-regular {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: var( --wookit-muted, #9ca3af ) !important;
    text-decoration: line-through !important;
    font-variant-numeric: tabular-nums;
    line-height: 1 !important;
}

.wookit-bundle__price-regular .woocommerce-Price-amount,
.wookit-bundle__price-regular bdi {
    color: inherit !important;
    text-decoration: line-through !important;
}

.wookit-bundle__price-total {
    font-size: 1.0625rem !important;
    font-weight: 800 !important;
    color: var( --wookit-accent, #2271b1 ) !important;
    font-variant-numeric: tabular-nums;
    line-height: 1.15 !important;
}

.wookit-bundle__price-total .woocommerce-Price-amount,
.wookit-bundle__price-total bdi {
    color: inherit !important;
}

/* Savings badge — shown under the price when buying as bundle is cheaper
   than buying everything at retail. Uses success color for clear "win" signal. */
.wookit-bundle__savings-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px !important;
    margin-top: 2px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var( --wookit-success-text, #166534 ) !important;
    background: var( --wookit-success-soft, #dcfce7 ) !important;
    border-radius: var( --wookit-radius-pill, 999px ) !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 ) !important;
}

.wookit-bundle__savings-badge svg {
    color: var( --wookit-success, #16a34a ) !important;
    display: block;
}

.wookit-bundle__savings-badge .woocommerce-Price-amount,
.wookit-bundle__savings-badge bdi {
    color: inherit !important;
    font-weight: 700 !important;
}

.wookit-bundle__price-regular[hidden] {
    display: none !important;
}

/* ── Hero — image of the parent product (current page product). ──────────── */
.wookit-bundle__hero {
    flex-shrink: 0;
    width: clamp( 56px, 12.5%, 82px );
    align-self: center;
}

.wookit-bundle__hero-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var( --wookit-radius-sm, 4px ) !important;
    background: var( --wookit-surface-alt, #f5f5f5 ) !important;
}

.wookit-bundle__hero-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border-radius: inherit !important;
}

/* Quantity badge over the hero — shown only when parent_quantity > 1.
   Accent pill in the top-right corner, same palette as the "selected"
   badge so the two read as part of the same visual language. */
.wookit-bundle__hero-qty {
    position: absolute;
    top: 5px;
    right: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    min-width: 26px;
    height: 22px;
    padding: 0 7px !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var( --wookit-accent-fg, #fff ) !important;
    background: var( --wookit-accent, #2271b1 ) !important;
    border-radius: var( --wookit-radius-pill, 999px ) !important;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.12 ) !important;
    pointer-events: none;
}

/* ── Description + sections (all left-aligned) ───────────────────────────── */
.wookit-bundle__description {
    font-size: clamp( 0.9375rem, 0.8rem + 0.7cqi, 1.125rem ) !important;
    color: var( --wookit-muted, #6b7280 ) !important;
    line-height: 1.45 !important;
    text-align: left !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wookit-bundle__description p { margin: 0 0 0.5em !important; }
.wookit-bundle__description p:last-child { margin-bottom: 0 !important; }

.wookit-bundle__section {
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-align: left !important;
    padding-top: 10px !important;
    border-top: 1px solid var( --wookit-border, #e2e4e7 ) !important;
}

.wookit-bundle__section-title {
    margin: 0 !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var( --wookit-muted, #6b7280 ) !important;
    line-height: 1.3 !important;
}

.wookit-bundle__section--addons .wookit-bundle__section-title {
    display: none;
}

/* Included products — accent-tinted chips with a more presence. */
.wookit-bundle__products {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.wookit-bundle__product {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 4px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var( --wookit-text, inherit ) !important;
    background: var( --wookit-accent-soft, rgba( 0, 0, 0, 0.04 ) ) !important;
    border: 1px solid var( --wookit-accent-soft, rgba( 0, 0, 0, 0.06 ) ) !important;
    border-radius: var( --wookit-radius-pill, 999px ) !important;
    max-width: 100%;
    min-width: 0;
    transition: border-color 150ms ease, background-color 150ms ease;
}

@media ( hover: hover ) and ( pointer: fine ) {
    .wookit-bundle__product:hover {
        border-color: var( --wookit-accent, currentColor ) !important;
    }
}

.wookit-bundle__product-img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 50% !important;
    background: var( --wookit-surface, #fff ) !important;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.06 ) !important;
}

.wookit-bundle__product-name {
    overflow: hidden;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0;
    max-width: 18ch;
}

/* Per-included-product price: struck catalog + discounted, or FREE. */
.wookit-bundle__product-price {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    margin-left: 4px !important;
    font-size: 0.78rem !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap !important;
}

.wookit-bundle__product-price del,
.wookit-bundle__product-price del .woocommerce-Price-amount,
.wookit-bundle__product-price del bdi {
    color: var( --wookit-muted, #9ca3af ) !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

.wookit-bundle__product-price ins,
.wookit-bundle__product-price ins .woocommerce-Price-amount,
.wookit-bundle__product-price ins bdi {
    text-decoration: none !important;
    color: var( --wookit-accent, currentColor ) !important;
    font-weight: 600 !important;
}

.wookit-bundle__product-free {
    color: var( --wookit-success-text, #166534 ) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    font-size: 0.72rem !important;
}

/* Add-ons — boxed area with subtle accent stripe + bolder amounts. */
.wookit-bundle__section--addons {
    /* keep the section-level border-top from base rule */
}

.wookit-bundle__addons {
    margin: 0 !important;
    padding: 8px 10px !important;
    list-style: none !important;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 0.85rem !important;
    background: var( --wookit-surface-alt, #f5f5f5 ) !important;
    border-radius: var( --wookit-radius-sm, 4px ) !important;
}

.wookit-bundle__addon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 0 !important;
    border-bottom: 0 !important;
}

.wookit-bundle__addon:first-child { padding-top: 0 !important; }
.wookit-bundle__addon:last-child  { padding-bottom: 0 !important; border-bottom: 0 !important; }

.wookit-bundle__addon-label {
    color: var( --wookit-body, inherit ) !important;
    font-weight: 500 !important;
}

.wookit-bundle__addon-amount {
    color: var( --wookit-accent, currentColor ) !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap !important;
}

.wookit-bundle__addon-amount--free {
    color: var( --wookit-success-text, #166534 ) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
}

.wookit-bundle__addon-amount .woocommerce-Price-amount,
.wookit-bundle__addon-amount bdi { color: inherit !important; }

/* ── Inline swatches inside bundles form ───────────────────────────────────
   Lives between the bundle cards and the ATC footer. Shows up only for
   variable parent products. Looks distinct from the cards (subtle bordered
   block) so the step is obvious. */
.wookit-bundles__variations {
    margin-top: var(--gap) !important;
    padding: 14px !important;
    background: var( --wookit-surface, #fff ) !important;
    border: 1.5px solid var( --wookit-border, #e2e4e7 ) !important;
    border-radius: var( --wookit-radius-md, 8px ) !important;
}

.wookit-bundles__variations .wookit-product-swatches {
    /* Embedded — drop the standalone widget's container styling */
    gap: 8px;
}

/* ── Footer (add to cart) ──────────────────────────────────────────────────── */
.wookit-bundles__footer {
    margin-top: var(--gap) !important;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUANTITY PICKER (qty input + per-unit price)
   ═══════════════════════════════════════════════════════════════════════════ */
.wookit-bundle__picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px !important;
    border-top: 1px solid var( --wookit-border, #e2e4e7 ) !important;
}

.wookit-bundle__qty-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wookit-bundle__qty-label {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var( --wookit-text, inherit ) !important;
}

.wookit-bundle__qty-unit-price {
    margin-left: auto !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var( --wookit-muted, #6b7280 ) !important;
    font-variant-numeric: tabular-nums;
}

/* Minimal stepper — no outer container, +/− are icon-only triggers, the
   input itself is the only bordered element. Forced reset with !important
   because Hello Elementor + WC core both add aggressive `button` defaults
   (red focus border, padding, background) that bleed into our minimal UI. */
.wookit-bundle__qty-input {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

.wookit-bundle__qty-btn,
.wookit-bundle__qty-btn:hover,
.wookit-bundle__qty-btn:focus,
.wookit-bundle__qty-btn:active {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var( --wookit-muted, #6b7280 ) !important;
    font-family: inherit !important;
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: color 150ms ease !important;
}

@media ( hover: hover ) and ( pointer: fine ) {
    .wookit-bundle__qty-btn:hover {
        color: var( --wookit-text, inherit ) !important;
        background: transparent !important;
    }
}

.wookit-bundle__qty-btn:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

.wookit-bundle__qty-field,
.wookit-bundle__qty-field:hover,
.wookit-bundle__qty-field:focus {
    width: 52px !important;
    height: 34px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border: 1.5px solid var( --wookit-border-input, #e2e4e7 ) !important;
    border-radius: var( --wookit-radius-sm, 4px ) !important;
    background: var( --wookit-surface, #fff ) !important;
    color: var( --wookit-text, inherit ) !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
    text-align: center !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 150ms ease !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.wookit-bundle__qty-field:focus {
    border-color: var( --wookit-accent, currentColor ) !important;
}

/* Brief border flash when JS auto-corrects the qty back into range.
   Tells the user "we changed your number for you" without a modal/toast. */
.wookit-bundle__qty-field.is-clamped {
    animation: wookit-bundle-clamp 600ms ease;
}
@keyframes wookit-bundle-clamp {
    0%   { border-color: var( --wookit-warning, #d97706 ); background: color-mix( in srgb, var( --wookit-warning, #d97706 ) 12%, transparent ); }
    100% { border-color: var( --wookit-border-input, #e2e4e7 ); background: var( --wookit-surface, #fff ); }
}
@media ( prefers-reduced-motion: reduce ) {
    .wookit-bundle__qty-field.is-clamped { animation: none; }
}

.wookit-bundle__qty-field::-webkit-outer-spin-button,
.wookit-bundle__qty-field::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.wookit-bundle__qty-field::-webkit-outer-spin-button,
.wookit-bundle__qty-field::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Match the .single_add_to_cart_button styling used by product-price-cart so
   bundle ATC + standalone ATC look identical site-wide. Uses !important to
   beat theme/WC button defaults (Hello Elementor + WC core both ship with
   their own .button rules). */
.wookit-bundles__atc,
.wookit-bundles__atc:hover,
.wookit-bundles__atc:focus,
.wookit-bundles__atc:active {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0.75rem 1.5rem !important;
    min-height: 44px !important;
    font-family: inherit !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    color: var( --wookit-accent-fg, #fff ) !important;
    background: var( --wookit-accent, #2271b1 ) !important;
    border: 0 !important;
    border-radius: var( --wookit-radius-md, 8px ) !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
    transition: background-color 150ms ease, transform 150ms ease !important;
    -webkit-tap-highlight-color: transparent !important;
    flex: 1 1 auto;
}

.wookit-bundles__atc:hover {
    background: var( --wookit-accent-hover, var( --wookit-accent, #2271b1 ) ) !important;
}

.wookit-bundles__atc:active {
    transform: translateY( 1px ) !important;
}

.wookit-bundles__atc:disabled,
.wookit-bundles__atc[data-wookit-busy="1"] {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

.wookit-bundles__msg {
    margin: 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
}

.wookit-bundles__msg--success {
    color: var( --wookit-success-text, #1a7e2e ) !important;
}

.wookit-bundles__msg--error {
    color: var( --wookit-danger-text, #b32d2e ) !important;
}

.wookit-bundles__msg--info {
    color: var( --wookit-muted, #646970 ) !important;
}

/* ── Fallback: price + variations/add-to-cart when no bundles defined ────── */
.wookit-bundles--fallback {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var( --wookit-font, inherit ) !important;
    color: var( --wookit-body, inherit ) !important;
}

.wookit-bundles-fallback__price {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var( --wookit-text, inherit ) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em !important;
}

.wookit-bundles-fallback__price del {
    font-weight: 400 !important;
    font-size: 0.85em !important;
    color: var( --wookit-muted, #9ca3af ) !important;
    margin-right: 0.5rem !important;
}

.wookit-bundles-fallback__price ins {
    text-decoration: none !important;
    color: var( --wookit-accent, currentColor ) !important;
}

/* WC's variations form — let core styles apply but soften visuals to match */
.wookit-bundles-fallback__cart .variations {
    border: 0 !important;
    margin: 0 0 12px !important;
}

.wookit-bundles-fallback__cart .variations label {
    font-weight: 600 !important;
    color: var( --wookit-text, inherit ) !important;
    font-size: 0.9rem !important;
}

.wookit-bundles-fallback__cart .variations select {
    border: 1px solid var( --wookit-border-input, #d1d5db ) !important;
    border-radius: var( --wookit-radius-sm, 4px ) !important;
    padding: 0.5rem 0.75rem !important;
    background: var( --wookit-surface, #fff ) !important;
    color: var( --wookit-text, inherit ) !important;
    font-family: inherit !important;
}

.wookit-bundles-fallback__cart .single_add_to_cart_button,
.wookit-bundles-fallback__cart .single_add_to_cart_button:hover,
.wookit-bundles-fallback__cart .single_add_to_cart_button:focus,
.wookit-bundles-fallback__cart .single_add_to_cart_button:active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem 1.25rem !important;
    min-height: 44px !important;
    font-family: inherit !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var( --wookit-accent-fg, #fff ) !important;
    background: var( --wookit-accent, #2271b1 ) !important;
    border: 0 !important;
    border-radius: var( --wookit-radius-md, 8px ) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background-color 150ms ease !important;
}

.wookit-bundles-fallback__cart .single_add_to_cart_button:hover {
    background: var( --wookit-accent-hover, var( --wookit-accent, #2271b1 ) ) !important;
}

.wookit-bundles-fallback__cart .quantity {
    margin-right: 8px !important;
}

.wookit-bundles-fallback__cart .quantity .qty {
    width: 70px;
    padding: 0.625rem 0.5rem !important;
    border: 1px solid var( --wookit-border-input, #d1d5db ) !important;
    border-radius: var( --wookit-radius-sm, 4px ) !important;
    background: var( --wookit-surface, #fff ) !important;
    color: var( --wookit-text, inherit ) !important;
    font-family: inherit !important;
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — bundle cards
   On narrow screens the 3-column flex (hero | title+desc | price) squeezes
   the description to ~3 words per line. Restack so price moves under the
   title/description, freeing horizontal room for readable text.
   ═══════════════════════════════════════════════════════════════════════════ */
@media ( max-width: 560px ) {
    .wookit-bundle__head {
        flex-direction: column;
        gap: 8px;
    }
    .wookit-bundle__price {
        flex-direction: row;
        align-items: center;
        align-self: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        text-align: left !important;
    }
    .wookit-bundle__price-regular {
        order: 1;
    }
    .wookit-bundle__price-total {
        order: 2;
        font-size: 1.125rem !important;
    }
    .wookit-bundle__savings-badge {
        order: 3;
        margin-top: 0 !important;
    }
    .wookit-bundle__description {
        font-size: 0.9375rem !important;
        line-height: 1.5 !important;
    }
    .wookit-bundle__hero {
        width: clamp( 64px, 18vw, 88px );
    }
}