/**
 * Alfa Digital - Paquetes
 * Frontend Styles — All typography in em (relative to parent/theme)
 */

/* === Grid Wrapper === */
.alfa-bundle-grid-wrap,
.alfa-bundle-summary,
.alfa-bundle-grid-wrap *,
.alfa-bundle-summary *,
.alfa-bcr, .alfa-bcr * { font-family: inherit !important; }
.alfa-bundle-grid-wrap { margin-bottom: 20px; }

/* === Bundle Size Toggle === */
.alfa-bundle-toggle-wrap { margin-bottom: 14px; }
/* v2.20.3: show the right toggle per viewport. Desktop toggle lives in the
   summary sidebar; mobile toggle is rendered inside the grid shortcode
   because Woodmart often hides the sidebar on mobile viewports. */
.alfa-bundle-toggle-wrap--mobile { display: none; }
@media (max-width: 1023px) {
    .alfa-bundle-toggle-wrap--desktop { display: none !important; }
    .alfa-bundle-toggle-wrap--mobile { display: block; }
}
.alfa-bundle-toggle-title {
    font-size: 0.76em; color: #888; margin-bottom: 6px;
}
.alfa-bundle-toggle {
    display: flex; gap: 5px;
}
.alfa-bundle-toggle__opt {
    flex: 1; padding: 8px 6px; border-radius: 6px; text-align: center;
    cursor: pointer; border: 1px solid #e0e0e0; background: #fff;
    text-decoration: none; color: inherit; display: block; position: relative;
    transition: all 0.15s;
}
.alfa-bundle-toggle__opt:hover { border-color: #bbb; }
.alfa-bundle-toggle__opt--active { border-color: #0D2240; background: #0D2240; color: #fff; }
.alfa-bundle-toggle__qty { font-size: 1em; font-weight: 600; display: block; line-height: 1.2; }
.alfa-bundle-toggle__label { font-size: 0.65em; color: #999; display: block; }
.alfa-bundle-toggle__opt--active .alfa-bundle-toggle__label { color: rgba(255,255,255,0.6); }
.alfa-bundle-toggle__badge {
    position: absolute; top: -7px; right: -6px;
    font-size: 0.58em; font-weight: 600;
    padding: 1px 5px; border-radius: 3px;
    background: #E24B4A; color: #fff;
}
.alfa-bundle-toggle__opt--active .alfa-bundle-toggle__badge { background: #0277BD; }

/* Back tab — dashed, subtle */
.alfa-bundle-toggle__opt--back {
    background: transparent !important; border: 1px dashed #ccc !important; color: #999 !important;
}
.alfa-bundle-toggle__opt--back:hover { border-color: #999 !important; color: #555 !important; }
.alfa-bundle-toggle__opt--back .alfa-bundle-toggle__qty { font-size: 0.88em; font-weight: 400; }
.alfa-bundle-toggle__opt--back .alfa-bundle-toggle__label { color: #ccc; }

/* ============================================================
   TOGGLE VARIANT — Cards (qty + ppu + total + "Máximo ahorro")
   Used on single bundle pages to surface pricing info upfront.
   ============================================================ */
.alfa-bundle-toggle-wrap--cards {
    margin-bottom: 18px;
    /* v2.24.0: add top padding to wrap so the absolute badge (-8px) has room
       to render without being clipped by overflow-hidden ancestors. */
    padding-top: 10px;
}
.alfa-bundle-toggle--cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: stretch;
}
/* v2.24.0: Card layout refactored to stay under 45px max height.
   - Single horizontal row: qty + label side by side (was stacked vertically).
   - Badge pulled out of flow (position:absolute, -8px) — no internal height.
   - Padding reduced from 12px/10px to 6px/8px vertical.
   - overflow:visible so the absolute badge renders above the top border. */
.alfa-bundle-toggle-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    min-height: 45px;
    max-height: 45px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #fff;
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    text-align: center;
    line-height: 1.2;
    min-width: 0;
    overflow: visible;
}
.alfa-bundle-toggle-card:hover {
    border-color: #0D2240;
    box-shadow: 0 2px 8px rgba(13, 34, 64, 0.08);
}
.alfa-bundle-toggle-card:active { transform: scale(0.98); }

.alfa-bundle-toggle-card--active {
    border-color: #0D2240 !important;
    background: #0D2240 !important;
    color: #fff !important;
    cursor: default;
}
.alfa-bundle-toggle-card--active:hover { box-shadow: none; }

.alfa-bundle-toggle-card--best {
    /* v2.24.0: no more padding hack — badge is absolutely positioned and
       doesn't participate in layout. Just the emphasized 2px border. */
    border: 2px solid #3B6D11;
}
.alfa-bundle-toggle-card--best.alfa-bundle-toggle-card--active {
    border-color: #3B6D11 !important;
    background: #3B6D11 !important;
}

/* v2.24.0: Badge floats above the card top border. */
.alfa-bundle-toggle-card__badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #3B6D11;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    line-height: 1.2;
    z-index: 2;
}

.alfa-bundle-toggle-card__qty {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: inherit;
    flex: 0 0 auto;
}
.alfa-bundle-toggle-card__label {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    flex: 0 0 auto;
}
.alfa-bundle-toggle-card--active .alfa-bundle-toggle-card__label {
    color: rgba(255, 255, 255, 0.7);
}

.alfa-bundle-toggle-card__ppu {
    font-size: 12px;
    font-weight: 600;
    color: #3B6D11;
    margin-bottom: 2px;
    line-height: 1.2;
    white-space: nowrap;
}
.alfa-bundle-toggle-card__ppu-suffix {
    font-size: 9px;
    font-weight: 400;
    color: #999;
}
.alfa-bundle-toggle-card--active .alfa-bundle-toggle-card__ppu {
    color: #C0DD97;
}
.alfa-bundle-toggle-card--active .alfa-bundle-toggle-card__ppu-suffix {
    color: rgba(255, 255, 255, 0.6);
}

.alfa-bundle-toggle-card__total {
    font-size: 11px;
    color: #666;
    line-height: 1.2;
    white-space: nowrap;
}
.alfa-bundle-toggle-card--active .alfa-bundle-toggle-card__total {
    color: rgba(255, 255, 255, 0.75);
}

/* Prices inside cards use WooCommerce's .amount markup — normalize it */
.alfa-bundle-toggle-card .woocommerce-Price-amount {
    font: inherit;
    color: inherit;
}

/* Mobile: mantener una sola fila, tipografías ligeramente menores */
@media (max-width: 600px) {
    .alfa-bundle-toggle--cards {
        gap: 4px;
        /* v2.24.0: overflow-y visible is required so the absolute badge (top:-7px)
           renders above the card; overflow-x:auto alone implicitly clips y. */
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        grid-auto-columns: minmax(80px, 1fr);
        /* Extra top padding inside the scroll area so the badge has breathing room. */
        padding-top: 8px;
    }
    .alfa-bundle-toggle-card {
        padding: 5px 6px;
        min-width: 72px;
        gap: 4px;
    }
    .alfa-bundle-toggle-card__qty { font-size: 16px; }
    .alfa-bundle-toggle-card__label { font-size: 9px; }
    .alfa-bundle-toggle-card__ppu { font-size: 11px; }
    .alfa-bundle-toggle-card__ppu-suffix { font-size: 8px; }
    .alfa-bundle-toggle-card__total { font-size: 10px; }
    .alfa-bundle-toggle-card__badge {
        font-size: 8px;
        padding: 2px 6px;
        top: -7px;
        letter-spacing: 0.02em;
    }
}

/* === Mobile Header (< 1024px) === */
.alfa-bundle-mobile-header {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 2px 0 8px;
    text-align: left;
}
.alfa-bundle-mobile-header__main { flex: 1; min-width: 0; }
.alfa-bundle-mobile-header h2 {
    font-size: 1.15em; font-weight: 600; margin: 0; line-height: 1.2;
    color: #1B365D;
}
.alfa-bundle-mobile-header p {
    font-size: 0.78em; color: #666; margin: 2px 0 0; line-height: 1.3;
}
.alfa-bundle-mobile-header__badge {
    flex-shrink: 0;
    background: #F4F9FC;
    border-left: 2px solid #11ABE3;
    padding: 3px 8px;
    font-size: 0.78em;
    font-weight: 600;
    color: #0277BD;
    white-space: nowrap;
    border-radius: 0 3px 3px 0;
    align-self: center;
}
.alfa-bundle-mobile-header__badge-label {
    font-size: 0.85em; color: #888; text-transform: uppercase; letter-spacing: 0.3px;
    font-weight: 500; margin-right: 4px;
}
.alfa-bundle-mobile-header__badge-count {
    font-weight: 700; color: #0277BD;
}
.alfa-bundle-mobile-header .alfa-bundle-pick-for-me-mobile {
    font-size: 0.82em; padding: 6px 16px; border-radius: 20px; border: 1px solid #ccc;
    background: transparent; cursor: pointer; color: #555;
    flex-shrink: 0;
}
.alfa-bundle-mobile-header .alfa-bundle-pick-for-me-mobile:hover { background: #f7f7f7; color: #333; }

/* v2.24.1: Badge hidden on mobile, social proof sits inline right-aligned
   next to the title, taking the badge's former position. */
.alfa-bundle-mobile-header__badge {
    display: none;
}
.alfa-bundle-mobile-header__social-proof {
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #0F6E56 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap;
}
@media (min-width: 1024px) { .alfa-bundle-mobile-header { display: none; } }

/* === Filters === */
/* === Category filter tabs === */
.alfa-bundle-filters {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
    padding: 0; border: none;
}
.alfa-bundle-filter {
    font-size: 0.84em !important;
    font-weight: 500 !important;
    padding: 8px 18px !important;
    border-radius: 22px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    color: #475569 !important;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-family: inherit !important;
    min-height: unset !important;
    box-shadow: none !important;
    white-space: nowrap;
}
.alfa-bundle-filter:hover {
    border-color: #cbd5e1 !important;
    color: #0D2240 !important;
    background: #f8fafc !important;
}
.alfa-bundle-filter.active,
.alfa-bundle-filter.active:hover {
    background: #0D2240 !important;
    color: #fff !important;
    border-color: #0D2240 !important;
}
@media (max-width: 1023px) {
    .alfa-bundle-filters {
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 14px;
    }
    .alfa-bundle-filter {
        font-size: 0.8em !important;
        padding: 6px 14px !important;
        touch-action: manipulation;
    }
}

/* === Product Grid === */
.alfa-bundle-product-grid {
    display: grid;
    grid-template-columns: repeat(var(--alfa-bundle-cols, 3), minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 1023px) {
    /* v2.20.3: mobile list view — higher density, faster scanning.
       Single column, each card is a horizontal row (thumb + info + action). */
    .alfa-bundle-product-grid {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    .alfa-bundle-card {
        grid-template-columns: 56px 1fr auto;
        grid-template-areas: "img info actions";
        align-items: center;
        gap: 12px;
        padding: 8px 10px;
        border-width: 2px;
    }
    /* Default grid display, but jQuery .hide() can still apply inline display:none */
    .alfa-bundle-card:not([style*="display: none"]) {
        display: grid;
    }
    .alfa-bundle-card__image-wrap {
        grid-area: img;
        position: relative;
    }
    .alfa-bundle-card__image {
        width: 56px !important;
        height: 56px !important;
        aspect-ratio: 1 !important;
    }
    .alfa-bundle-card__info {
        grid-area: info;
        padding: 0 !important;
        text-align: left !important;
        min-width: 0;
    }
    .alfa-bundle-card__name {
        font-size: 0.82em !important;
        text-align: left !important;
        margin: 0 0 3px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3 !important;
        font-weight: 500 !important;
    }
    .alfa-bundle-card__price {
        font-size: 0.76em !important;
        text-align: left !important;
        margin-bottom: 0 !important;
        display: flex;
        align-items: baseline;
        gap: 5px;
        flex-wrap: nowrap;
    }
    .alfa-bundle-card__price-regular {
        margin-right: 0 !important;
    }
    .alfa-bundle-card__price-label {
        display: none !important;
    }
    .alfa-bundle-card__actions {
        grid-area: actions;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0;
    }
    .alfa-bundle-card__add-btn {
        width: auto !important;
        min-width: 90px !important;
        max-width: 100% !important;
        height: 36px !important;
        padding: 0 16px !important;
        font-size: 0.76em !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        border-radius: 18px !important;
        flex-shrink: 0;
        line-height: 1 !important;
        align-items: center;
        justify-content: center;
    }
    /* Base display uses inline-flex — NOT !important so jQuery .hide()
       can override with inline display:none. */
    .alfa-bundle-card__add-btn:not([style*="display: none"]) {
        display: inline-flex;
    }
    .alfa-bundle-card__qty-controls {
        height: 34px !important;
        padding: 0 2px !important;
        min-width: 92px;
        border-radius: 17px !important;
        border: 1px solid #cbd5e1 !important;
    }
    .alfa-bundle-card__qty-btn {
        width: 26px !important; height: 26px !important;
    }
    .alfa-bundle-card__qty-display {
        font-size: 0.78em !important;
        padding: 0 4px;
    }
    .alfa-bundle-card__badge {
        top: 4px !important; left: 4px !important; right: auto !important;
        width: 20px !important; height: 20px !important;
        font-size: 0.64em !important;
        font-weight: 700 !important;
        background: #E24B4A !important;
        color: #fff !important;
        box-shadow: 0 0 0 2px #fff !important;
        line-height: 1 !important;
    }
    .alfa-bundle-card__oos-badge {
        top: 2px !important; left: 2px !important;
        font-size: 0.58em !important; padding: 1px 5px !important;
    }
    .alfa-bundle-card:hover .alfa-bundle-card__image { transform: none; }
}

/* === Card === */
.alfa-bundle-card {
    border-radius: 8px; overflow: hidden; cursor: pointer; transition: all 0.15s;
    position: relative; background: #fff !important; display: flex; flex-direction: column;
    /* Reserve 2px of border space so switching to --selected doesn't shift
       card dimensions in the grid. Transparent when unselected. */
    border: 2px solid transparent;
}
.alfa-bundle-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.13) !important; outline: none !important; }
.alfa-bundle-card--selected {
    outline: none !important;
    border-color: #1B365D;
}
.alfa-bundle-card--selected:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.13) !important; }
.alfa-bundle-card--dimmed { opacity: 0.3; pointer-events: none; }

/* === Out-of-stock state === */
.alfa-bundle-card--out-of-stock {
    opacity: 0.55;
    cursor: not-allowed;
}
.alfa-bundle-card--out-of-stock:hover {
    box-shadow: none !important;
}
.alfa-bundle-card--out-of-stock .alfa-bundle-card__image {
    filter: grayscale(0.5);
}
.alfa-bundle-card__oos-badge {
    position: absolute; top: 6px; left: 6px;
    background: #666; color: #fff;
    font-size: 0.68em; font-weight: 600;
    padding: 2px 7px; border-radius: 3px;
    letter-spacing: 0.3px; text-transform: uppercase;
    z-index: 2;
}
.alfa-bundle-card__add-btn--disabled {
    background: #d8d8d4 !important; color: #777 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.alfa-bundle-card__badge {
    position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
    background: #0d2240; color: #fff; font-size: 0.72em; font-weight: 500;
    display: flex; align-items: center; justify-content: center; z-index: 2;
}
.alfa-bundle-card__image-wrap { display: block; }
.alfa-bundle-card__image {
    width: 100%; aspect-ratio: 1; object-fit: contain;
    background: #fafafa; transition: transform 0.2s;
}
.alfa-bundle-card:hover .alfa-bundle-card__image { transform: scale(1.03); }

.alfa-bundle-card__info { padding: 8px 10px 0; text-align: center; }
.alfa-bundle-card__name { font-size: 0.88em; font-weight: 500; text-align: center; line-height: 1.35; margin: 0 0 3px; }
@media (max-width: 479px) { .alfa-bundle-card__name { font-size: 0.82em; } }
.alfa-bundle-card__price { font-size: 0.82em; color: #444; text-align: center; margin-bottom: 6px; line-height: 1.4; }
.alfa-bundle-card__price-regular {
    text-decoration: line-through; color: #666; font-size: 0.95em; margin-right: 4px;
}
.alfa-bundle-card__price-regular .woocommerce-Price-amount { text-decoration: line-through; color: #666; }
.alfa-bundle-card__price-bundle {
    font-weight: 600; color: #3B6D11; font-size: 1.05em;
}
.alfa-bundle-card__price-bundle .woocommerce-Price-amount { color: #3B6D11; font-weight: 600; }
.alfa-bundle-card__price-label {
    display: block; font-size: 0.82em; color: #555; margin-top: 1px;
}

.alfa-bundle-card__actions { margin-top: auto; padding: 0 10px 10px; }
.alfa-bundle-card__add-btn {
    width: 100%; height: 42px !important; border-radius: 24px !important; border: none !important;
    background: #0d2240 !important; font-size: 0.88em !important; cursor: pointer;
    color: #fff !important; transition: all 0.12s; box-sizing: border-box;
    padding: 0 !important; min-height: unset !important;
    text-transform: none !important; letter-spacing: 0 !important;
    font-weight: 500 !important; font-family: inherit !important;
    line-height: 1 !important;
}
.alfa-bundle-card__add-btn:hover { background: #1B365D !important; }
/* Two-label pattern: long text on desktop, short on mobile */
.alfa-bundle-card__add-btn-long { display: inline; }
.alfa-bundle-card__add-btn-short { display: none; }
@media (max-width: 1023px) {
    .alfa-bundle-card__add-btn-long { display: none; }
    .alfa-bundle-card__add-btn-short { display: inline; }
}
.alfa-bundle-card__qty-controls {
    display: flex; align-items: center; justify-content: space-between;
    border-radius: 24px; border: 1px solid #000; height: 42px;
    background: transparent !important; box-sizing: border-box; padding: 0 4px;
}
.alfa-bundle-card__qty-btn {
    width: 32px; height: 32px; border-radius: 50% !important; border: none !important;
    background: transparent !important; min-height: unset !important;
    font-size: 1em; cursor: pointer; display: flex; align-items: center;
    justify-content: center; color: #000 !important; padding: 0 !important;
}
.alfa-bundle-card__qty-btn:hover { background: rgba(0,0,0,0.05) !important; }
.alfa-bundle-card__qty-display { font-size: 0.88em; font-weight: 500; flex: 1; text-align: center; color: #000; }

/* === Price badge under title === */
.alfa-bundle-summary__price-badge {
    display: flex; align-items: center; gap: 8px; margin: 6px 0 4px;
}
.alfa-bundle-summary__price-original {
    font-size: 0.88em; text-decoration: line-through; color: #999;
}
.alfa-bundle-summary__price-original .woocommerce-Price-amount { text-decoration: line-through; }
.alfa-bundle-summary__price-final {
    font-size: 1.3em; font-weight: 600; color: #0D47A1;
}
.alfa-bundle-summary__price-pct {
    font-size: 0.72em; padding: 3px 8px; border-radius: 4px;
    background: #E3F2FD; color: #0277BD; font-weight: 500;
}

/* === Summary Desktop (>= 1024px) === */
.alfa-bundle-summary {
    border: 1px solid #eaeaea; border-radius: 16px; padding: 22px; background: #fff;
    overflow: hidden;
}
.alfa-bundle-summary--sticky { position: sticky; top: 100px; }

/* === Summary Mobile (< 1024px): Fixed Bottom Bar === */
@media (max-width: 1023px) {
    .alfa-bundle-summary {
        position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
        top: auto !important; z-index: 999 !important;
        border: none; border-radius: 12px 12px 0 0;
        border-top: 1px solid #ddd;
        background: #fff; padding: 8px 12px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
        transform: none !important;
        will-change: auto;
    }
    .alfa-bundle-summary__header,
    .alfa-bundle-summary__pick-for-me { display: none; }
    .alfa-bundle-grid-wrap { padding-bottom: 140px; }
}
@media (min-width: 1024px) {
    .alfa-bundle-summary__toggle-arrow,
    .alfa-bundle-summary__overlay { display: none !important; }
}

.alfa-bundle-summary__title { font-size: 1.18em; font-weight: 600; margin: 0 0 4px; }
.alfa-bundle-summary__subtitle { font-size: 0.88em; color: #666; margin: 0 0 12px; line-height: 1.4; }
.alfa-bundle-summary__pick-for-me {
    width: 100%; padding: 8px; border-radius: 8px; border: 1px solid #ddd;
    background: transparent; font-size: 0.88em; cursor: pointer; color: #666;
    transition: all 0.12s; margin-bottom: 14px;
}
.alfa-bundle-summary__pick-for-me:hover { background: #f7f7f7; color: #333; }

/* === Progress === */
.alfa-bundle-summary__progress { margin-bottom: 14px; }
@media (max-width: 1023px) { .alfa-bundle-summary__progress { margin-bottom: 4px; } }
.alfa-bundle-summary__progress-row {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px;
}
@media (max-width: 1023px) { .alfa-bundle-summary__progress-row { margin-bottom: 4px; } }
.alfa-bundle-summary__progress-text { font-size: 0.88em; color: #666; line-height: 1.2; }
.alfa-bundle-summary__progress-text strong { color: #222; font-weight: 600; }

/* Savings banner — sits above the progress row. Integrated visually into the summary,
   no new sticky element. Appears only when items are selected and the pack has savings. */
.alfa-bundle-summary__savings-banner {
    background: #F4F9FC;
    color: #0277BD;
    padding: 7px 14px;
    font-size: 0.82em;
    font-weight: 500;
    text-align: center;
    border-bottom: 1px solid #e3eef5;
    margin: 0 -12px 8px;
    line-height: 1.3;
}
@media (min-width: 1024px) {
    .alfa-bundle-summary__savings-banner { margin-left: -22px; margin-right: -22px; }
}
.alfa-bundle-summary__savings-banner strong { font-weight: 700; }
.alfa-bundle-summary__savings-banner--complete { font-weight: 600; }

.alfa-bundle-summary__progress-bar {
    height: 12px; width: 100%; background: #E3F2FD; border-radius: 6px; overflow: hidden;
}
.alfa-bundle-summary__progress-fill {
    height: 100%; border-radius: 6px;
    background: linear-gradient(90deg, #0277BD 0%, #039BE5 100%);
    transition: width 0.4s;
}
.alfa-bundle-summary__progress-fill--complete {
    background: linear-gradient(90deg, #0277BD 0%, #039BE5 100%) !important;
}

/* === Toggle Arrow (mobile) === */
.alfa-bundle-summary__toggle-arrow {
    background: none !important; border: none !important; outline: none !important;
    box-shadow: none !important; cursor: pointer;
    font-size: 0.88em; color: #888; line-height: 1;
    padding: 0 4px; transition: transform 0.2s;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: auto; min-height: auto;
}
@media (max-width: 1023px) {
    /* Touch target is expanded via padding on the tappable region, not the visible box. */
    .alfa-bundle-summary__toggle-arrow {
        padding: 8px 10px; font-size: 0.88em;
    }
}
.alfa-bundle-summary__toggle-arrow:focus,
.alfa-bundle-summary__toggle-arrow:active {
    background: none !important; outline: none !important; border: none !important;
}
.alfa-bundle-summary__toggle-arrow--open { transform: rotate(180deg); }

/* === Expandable Section (mobile) === */
.alfa-bundle-summary__expandable {
    overflow: hidden; height: 0; opacity: 0;
    transition: height 0.3s ease, opacity 0.2s ease;
}
.alfa-bundle-summary__expandable--open { opacity: 1; }
@media (min-width: 1024px) {
    .alfa-bundle-summary__expandable { height: auto !important; opacity: 1 !important; overflow: visible !important; }
}
@media (max-width: 1023px) {
    .alfa-bundle-summary__expandable--open { max-height: 60vh; overflow-y: auto; }
    .alfa-bundle-summary__pricing { margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee; }
    .alfa-bundle-summary__price-row { font-size: 0.82em; }
    .alfa-bundle-summary__shipping-row { font-size: 0.76em; }
}

/* v2.19.3: Mobile collapsed CTA — only visible on mobile */
.alfa-bundle-summary__mobile-cta { display: none !important; }
.alfa-bundle-summary__cta--mobile-collapsed {
    width: 100%; padding: 14px !important; border-radius: 12px !important; border: none !important;
    background: #0D2240 !important; color: #fff !important; font-size: 1em !important; font-weight: 600 !important;
    cursor: pointer; min-height: unset !important; text-transform: none !important;
    letter-spacing: 0 !important; font-family: inherit !important; line-height: 1.4 !important;
    margin-top: 6px;
}
.alfa-bundle-summary__cta--mobile-collapsed:hover { background: #1B365D !important; }
.alfa-bundle-summary__mobile-edit {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 0 2px; font-size: 0.82em; color: #999;
}
.alfa-bundle-summary__mobile-edit-btn {
    background: none !important; border: none !important; color: #0277BD !important;
    cursor: pointer; font-size: 0.82em; padding: 0 !important; min-height: unset !important;
    font-family: inherit !important;
}
/* When complete + collapsed on mobile: hide progress/mini-slots, show mobile CTA */
@media (max-width: 1023px) {
    .alfa-bundle-summary--complete-collapsed .alfa-bundle-summary__progress { display: none !important; }
    .alfa-bundle-summary--complete-collapsed .alfa-bundle-summary__savings-banner { display: none !important; }
    .alfa-bundle-summary--complete-collapsed .alfa-bundle-summary__mobile-cta { display: block !important; }
}
@media (min-width: 1024px) {
    .alfa-bundle-summary__mobile-cta { display: none !important; }
}

/* === Overlay (mobile) === */
.alfa-bundle-summary__overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 998; display: none;
}
.alfa-bundle-summary__overlay--visible { display: block; }

/* === Slots — 68px fixed, text scales with em === */
.alfa-bundle-summary__slots {
    display: grid;
    grid-template-columns: repeat(var(--alfa-bundle-slots, 4), minmax(0, 68px));
    gap: 5px; margin-bottom: 14px;
    justify-content: start;
}
@media (max-width: 1023px) {
    .alfa-bundle-summary__slots {
        display: flex; gap: 5px; overflow-x: auto; margin: 8px -15px 0; padding: 0 15px;
        -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    }
}
.alfa-bundle-slot { text-align: center; flex-shrink: 0; }

/* Empty slot */
.alfa-bundle-slot__empty {
    width: 68px; height: 68px; border-radius: 4px;
    border: 1px dashed #d0d0d0;
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box;
}
.alfa-bundle-slot__number { font-size: 0.72em; color: #ccc; font-weight: 400; }

/* Filled slot */
.alfa-bundle-slot__filled {
    width: 68px; height: 68px; border-radius: 4px;
    position: relative; overflow: hidden;
    padding: 5px; box-sizing: border-box;
    display: block;
}

/* Product name inside slot */
.alfa-bundle-slot__name {
    font-size: 0.65em; font-weight: 500; line-height: 1.3;
    color: #fff; word-break: break-word; text-align: left;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden; margin: 0;
}

/* X remove */
.alfa-bundle-slot__remove {
    position: absolute;
    bottom: 5px; right: 5px;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
    user-select: none;
}
.alfa-bundle-slot__remove::before,
.alfa-bundle-slot__remove::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 7px; height: 1.5px;
    background: #fff;
    border-radius: 1px;
}
.alfa-bundle-slot__remove::before { transform: translate(-50%, -50%) rotate(45deg); }
.alfa-bundle-slot__remove::after { transform: translate(-50%, -50%) rotate(-45deg); }
.alfa-bundle-slot__remove:hover { background: #333; }

/* === Pricing === */
.alfa-bundle-summary__pricing { margin-bottom: 14px; }
.alfa-bundle-summary__price-row {
    display: flex; justify-content: space-between; font-size: 0.88em; color: #666; padding: 3px 0;
}
.alfa-bundle-summary__price-value { font-weight: 500; color: #333; }
.alfa-bundle-summary__discount-row .alfa-bundle-summary__price-label,
.alfa-bundle-summary__discount-row .alfa-bundle-summary__price-value { color: #0277BD; }
.alfa-bundle-summary__shipping-row {
    border-top: 1px solid #f0f0f0; padding-top: 8px; margin-top: 4px;
}

/* === Promo & CTA === */
.alfa-bundle-summary__promo {
    font-size: 0.82em; padding: 8px 12px; border-radius: 8px;
    background: #E3F2FD; color: #0D47A1; text-align: center; margin-bottom: 12px;
}
.alfa-bundle-summary__cta {
    width: 100%; padding: 14px !important; border-radius: 12px !important; border: none !important;
    background: #1B365D !important; color: #fff !important; font-size: 0.94em !important; font-weight: 500 !important;
    cursor: pointer; transition: all 0.15s; min-height: unset !important;
    text-transform: none !important; letter-spacing: 0 !important;
}
@media (max-width: 1023px) {
    .alfa-bundle-summary__cta {
        padding: 16px !important; font-size: 1em !important; font-weight: 600 !important; margin-top: 10px;
    }
}
.alfa-bundle-summary__cta:disabled { opacity: 0.25; cursor: not-allowed; }
.alfa-bundle-summary__cta:not(:disabled) { background: #0D2240 !important; color: #fff !important; }
.alfa-bundle-summary__cta:not(:disabled):hover { background: #1B365D !important; }
.alfa-bundle-summary__cta--success { background: #0277BD !important; }

/* Strike-through regular price + highlighted final price inside CTA button */
.alfa-bundle-summary__cta-strike {
    text-decoration: line-through; opacity: 0.55; font-weight: 400; margin: 0 2px;
}
.alfa-bundle-summary__cta-final {
    font-weight: 700; margin-left: 2px;
}

/* === Cart Display — Collapsed Bundle Row === */
.alfa-bundle-cart-item--hidden { display: none !important; }

.alfa-bcr, .alfa-bcr * { font-family: inherit; }
.alfa-bcr__title { font-size: 1em; font-weight: 600; margin-bottom: 3px; line-height: 1.4; }
.alfa-bcr__pricing { display: flex; align-items: center; gap: 5px; font-size: 0.88em; margin-bottom: 5px; flex-wrap: wrap; }
.alfa-bcr__original { text-decoration: line-through; color: #999; }
.alfa-bcr__original .woocommerce-Price-amount { text-decoration: line-through; }
.alfa-bcr__final { font-weight: 600; color: #0277BD; }
.alfa-bcr__pct { font-size: 0.92em; color: #0277BD; }
.alfa-bcr__slots { display: flex; gap: 4px; flex-wrap: wrap; margin: 5px 0; }
.alfa-bcr__slot {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 3px;
    background: #F0F0EE; color: #333;
    font-size: 0.76em; font-weight: 500; line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.alfa-bcr__slot-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alfa-bcr__slot-qty {
    flex-shrink: 0;
    background: #666; color: #fff;
    padding: 1px 5px; border-radius: 2px;
    font-size: 0.92em; font-weight: 700; line-height: 1.2;
}
.alfa-bcr__edit {
    display: inline-block; font-size: 0.82em; color: #0277BD; margin-top: 3px;
    text-decoration: underline; cursor: pointer;
}
.alfa-bcr__edit:hover { color: #01579B; }
.alfa-bcr__qty { font-size: 0.88em; color: #666; }
.alfa-bcr__thumb {
    width: 52px; height: 52px; border-radius: 8px;
    background: #E3F2FD; color: #0277BD;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.76em; font-weight: 500;
}

/* === OTO slots: full-width rows with name, price, and per-slot X === */
.alfa-bcr__slots--oto { flex-direction: column; gap: 6px; }
.alfa-bcr__slots--oto .alfa-bcr__slot--removable {
    display: flex; align-items: center; gap: 8px;
    max-width: none; width: 100%;
    padding: 6px 10px; border-radius: 4px;
    white-space: normal; overflow: visible; text-overflow: clip;
    font-size: 0.82em;
    background: #F0F0EE; color: #333;
}
.alfa-bcr__slot--removable .alfa-bcr__slot-name {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alfa-bcr__slot--removable .alfa-bcr__slot-qty {
    background: #666; color: #fff;
}
.alfa-bcr__slot--removable .alfa-bcr__slot-price {
    display: none;
}
.alfa-bcr__slot-remove {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: #d8d8d4; color: #555 !important;
    font-size: 16px; line-height: 1; text-decoration: none !important;
    font-weight: 400; cursor: pointer;
    transition: background 0.15s;
}
.alfa-bcr__slot-remove:hover { background: #c8c8c4; color: #333 !important; text-decoration: none !important; }

/* Mini cart sidebar — scale down from parent */
.cart-widget-side .alfa-bcr { max-width: 210px; font-size: 0.85em; }
.cart-widget-side .alfa-bcr__slot:not(.alfa-bcr__slot--removable) { max-width: 140px; }
.cart-widget-side .alfa-bcr__thumb { width: 48px; height: 48px; }

/* Checkout — inherit, constrain pills only (but not OTO removable rows) */
.alfa-cs-cart-item .alfa-bcr__slot:not(.alfa-bcr__slot--removable),
.woocommerce-checkout-review-order .alfa-bcr__slot:not(.alfa-bcr__slot--removable) { max-width: 160px; }

.alfa-bundle-error { padding: 12px 16px; background: #fff3f3; color: #c00; border-radius: 8px; font-size: 0.82em; }

/* === [2] Sticky CTA on desktop === */
@media (min-width: 1024px) {
    .alfa-bundle-summary__expandable { padding-bottom: 0; }
    .alfa-bundle-summary__cta {
        position: sticky; bottom: 0; z-index: 2;
        margin-top: 12px;
    }
}

/* === [3] Added modal === */
.alfa-added-modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10001;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.25s;
}
.alfa-added-modal--visible { opacity: 1; }
.alfa-added-modal__content {
    background: #fff; border-radius: 14px; padding: 0; text-align: center;
    max-width: 400px; width: 92%;
    transform: scale(0.9); transition: transform 0.25s;
    max-height: 90vh; overflow-y: auto; overflow-x: hidden;
}
@media (max-width: 479px) {
    .alfa-added-modal__content { width: 94%; border-radius: 12px; }
}
.alfa-added-modal--visible .alfa-added-modal__content { transform: scale(1); }
.alfa-added-modal__btn {
    display: block !important; width: 100% !important; padding: 11px !important; border-radius: 10px !important;
    font-size: 0.88em !important; font-weight: 500 !important; text-align: center !important;
    cursor: pointer !important; text-decoration: none !important; border: none !important;
    box-sizing: border-box !important; min-height: unset !important;
    text-transform: none !important; letter-spacing: 0 !important;
    font-family: inherit !important; line-height: 1.4 !important;
}
.alfa-added-modal__btn--primary {
    background: #0D2240 !important; color: #fff !important;
    margin-bottom: 8px !important;
}
.alfa-added-modal__btn--primary:hover { background: #1B365D !important; }
.alfa-added-modal__btn--secondary {
    background: transparent !important; color: #64748b !important;
    border: none !important;
    font-size: 0.82em !important; padding: 10px 6px !important;
    min-height: unset !important; text-decoration: underline !important;
    text-underline-offset: 3px !important;
}
.alfa-added-modal__btn--secondary:hover { color: #0D2240 !important; background: transparent !important; }

/* === [6] Mini-slots in mobile collapsed bar === */
.alfa-bundle-summary__mini-slots {
    display: none; gap: 3px; padding: 4px 0 0; flex-wrap: wrap;
}
@media (max-width: 1023px) {
    .alfa-bundle-summary__mini-slots { display: flex; }
    /* Hide mini-slots when the bottom bar is expanded — the full slots
       inside already show the same info with product names and remove buttons. */
    .alfa-bundle-summary--expanded .alfa-bundle-summary__mini-slots {
        display: none;
    }
}
.alfa-mini-slot {
    width: 18px; height: 18px; border-radius: 3px; flex-shrink: 0;
}

/* === [7] Social proof ticker ===
   v2.24.0: Base rule neutralized. Social proof now lives in two locations
   (summary titlebar desktop / mobile header) with their own scoped styles
   above. Keeping the selector chain for specificity resolution but with
   zero visual impact. */
.alfa-bundle-summary__social-proof {
    font-size: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
    text-align: inherit;
}
.alfa-bundle-summary__social-proof strong { color: inherit; font-weight: 500; }

/* === v2.20.2: OTO modal redesigned — contundente ===
   Structure:
   - .alfa-oto-toast: full-width green bar confirming bundle added
   - .alfa-oto-body: padded section with the actual offer
   - .alfa-oto-header: urgency tag + timer row
   - .alfa-oto-headline: "Agrega este pack y ahorra $X"
   - .alfa-oto-product: thumbs + name (compact row)
   - .alfa-oto-price: big price with strike + badge -X%
   - .alfa-oto__btn + .alfa-oto__skip: actions
*/
.alfa-oto-toast {
    background: #EAF3DE; color: #27500A;
    padding: 10px 16px;
    font-size: 0.82em; font-weight: 500;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    line-height: 1.3;
}
.alfa-oto-toast__check {
    width: 16px; height: 16px; border-radius: 50%;
    background: #3B6D11;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; position: relative;
}
.alfa-oto-toast__check::after {
    content: ''; position: absolute;
    width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}
.alfa-oto-body {
    padding: 18px 18px 18px;
    text-align: center;
}
@media (max-width: 479px) { .alfa-oto-body { padding: 14px 14px 14px; } }
.alfa-oto-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; gap: 10px;
}
.alfa-oto-urgency {
    background: #FCEBEB; color: #A32D2D;
    padding: 4px 10px; border-radius: 6px;
    font-size: 0.72em; font-weight: 700;
    letter-spacing: 0.03em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px;
    line-height: 1;
}
.alfa-oto-urgency__dot {
    width: 6px; height: 6px; border-radius: 50%; background: #E24B4A;
    display: inline-block; flex-shrink: 0;
    animation: alfa-oto-pulse 1.4s ease-in-out infinite;
}
@keyframes alfa-oto-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.25); }
}
.alfa-oto-urgency__timer {
    font-size: 0.78em; color: #A32D2D; font-weight: 600;
    white-space: nowrap;
}
.alfa-oto__countdown { font-weight: 700; }
.alfa-oto-headline {
    font-size: 1.15em; font-weight: 700;
    color: #0D2240; line-height: 1.25;
    margin: 0 0 14px;
}
@media (max-width: 479px) { .alfa-oto-headline { font-size: 1.05em; } }
.alfa-oto-product {
    display: flex; gap: 12px; align-items: center;
    padding: 10px 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 14px;
    text-align: left;
}
.alfa-oto__imgs {
    display: flex; gap: 3px; flex-shrink: 0;
}
.alfa-oto__img {
    width: 48px; height: 48px; border-radius: 6px;
    object-fit: contain; background: #fff; border: 1px solid #e2e8f0;
}
@media (max-width: 479px) { .alfa-oto__img { width: 42px; height: 42px; } }
.alfa-oto__info { flex: 1; min-width: 0; }
.alfa-oto__name {
    font-size: 0.88em; font-weight: 600;
    color: #1e293b; margin-bottom: 3px; line-height: 1.2;
}
.alfa-oto__desc {
    font-size: 0.72em; color: #64748b; line-height: 1.4;
}
.alfa-oto-price {
    display: flex; align-items: baseline; justify-content: center;
    gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.alfa-oto-price__strike {
    font-size: 0.95em; text-decoration: line-through; color: #cbd5e1;
}
.alfa-oto-price__now {
    font-size: 2em; font-weight: 800; color: #0D2240;
    letter-spacing: -0.02em; line-height: 1;
}
.alfa-oto-price__pct {
    background: #E24B4A; color: #fff;
    padding: 4px 10px; border-radius: 6px;
    font-size: 0.82em; font-weight: 700;
}
.alfa-oto__btn {
    width: 100% !important; padding: 13px !important; border-radius: 10px !important; border: none !important;
    background: #0D2240 !important; color: #fff !important; font-size: 0.94em !important; font-weight: 600 !important;
    cursor: pointer !important; text-align: center !important; display: block !important;
    min-height: unset !important; text-transform: none !important; letter-spacing: 0 !important;
    font-family: inherit !important; line-height: 1.4 !important; box-sizing: border-box !important;
}
.alfa-oto__btn:hover { background: #1B365D !important; }
.alfa-oto__btn:disabled { opacity: 0.5 !important; }
.alfa-oto__skip {
    display: block !important; width: 100% !important;
    background: none !important; border: none !important;
    font-size: 0.82em !important; color: #94a3b8 !important;
    text-align: center !important; margin-top: 8px !important;
    padding: 8px !important; cursor: pointer !important;
    font-family: inherit !important; min-height: unset !important;
    text-decoration: underline !important; text-underline-offset: 3px !important;
}
.alfa-oto__skip:hover { color: #64748b !important; background: none !important; }

/* v2.20.3: Post-decision step 2 — ligero, consolidado, sin icono grande */
.alfa-step2-body {
    padding: 16px 18px 18px;
    text-align: center;
}
@media (max-width: 479px) { .alfa-step2-body { padding: 14px 14px 14px; } }
.alfa-step2__summary {
    background: #f8fafc; border-radius: 10px; padding: 12px 14px;
    margin: 0 0 14px; text-align: left;
}
.alfa-step2__row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 3px 0; font-size: 0.88em;
}
.alfa-step2__row-lbl { color: #64748b; padding-right: 8px; }
.alfa-step2__row-val { color: #1e293b; font-weight: 500; white-space: nowrap; }
.alfa-step2__row--total {
    font-size: 1em; font-weight: 600;
    border-top: 1px solid #e2e8f0; padding-top: 8px; margin-top: 4px;
}
.alfa-step2__row--total span { color: #0D2240; }
.alfa-step2__eta {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.76em; color: #0F6E56; font-weight: 500;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid #e2e8f0;
}

/* v2.21: Stepper (pedido armado → pago → entrega) */
.alfa-step2__stepper {
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 18px; padding: 0 6px;
}
.alfa-step2__step {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    flex-shrink: 0;
}
.alfa-step2__step-dot {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
    line-height: 1;
}
.alfa-step2__step--done .alfa-step2__step-dot { background: #3B6D11; color: #fff; }
.alfa-step2__step--current .alfa-step2__step-dot {
    background: #0D2240; color: #fff;
    box-shadow: 0 0 0 4px rgba(13, 34, 64, 0.12);
}
.alfa-step2__step--future .alfa-step2__step-dot { background: #e2e8f0; color: #94a3b8; }
.alfa-step2__step-line {
    flex: 1; height: 2px; background: #e2e8f0; margin-top: -14px;
    min-width: 20px;
}
.alfa-step2__step-line--done { background: #3B6D11; }
.alfa-step2__step-lbl {
    font-size: 10px; color: #94a3b8; font-weight: 500;
    text-align: center; line-height: 1.2;
}
.alfa-step2__step--current .alfa-step2__step-lbl { color: #0D2240; font-weight: 600; }
.alfa-step2__step--done .alfa-step2__step-lbl { color: #27500A; }

/* v2.21: Motivator CTA with main + sub label */
.alfa-step2__cta {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    width: 100% !important; padding: 14px 16px !important;
    background: #0D2240 !important; color: #fff !important;
    border-radius: 10px !important; border: none !important;
    text-decoration: none !important; cursor: pointer !important;
    box-sizing: border-box !important; transition: background 0.15s;
    margin-bottom: 6px;
    gap: 2px;
}
.alfa-step2__cta:hover { background: #1B365D !important; color: #fff !important; }
.alfa-step2__cta-main {
    font-size: 17px; font-weight: 700; line-height: 1.2;
    letter-spacing: -0.01em;
}
.alfa-step2__cta-sub {
    font-size: 11px; font-weight: 400; opacity: 0.8;
    margin-top: 0; line-height: 1.2;
}
@media (max-width: 479px) {
    .alfa-step2__cta-main { font-size: 16px; }
}

/* v2.21: Trust row at the bottom */
.alfa-step2__trust {
    display: flex; justify-content: center; gap: 12px;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
    flex-wrap: wrap;
}
.alfa-step2__trust-item {
    display: flex; align-items: center; gap: 4px;
    font-size: 10px; color: #64748b;
}
.alfa-step2__trust-ic {
    width: 14px; height: 14px; border-radius: 50%;
    background: #EAF3DE; color: #3B6D11;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; line-height: 1;
    flex-shrink: 0;
}

/* === V2.9: Summary visual simplification (CSS-only, no HTML changes) === */

/* Hide redundant elements */
.alfa-bundle-summary__price-badge { display: none !important; }
.alfa-bundle-summary__subtitle { display: none !important; }
.alfa-bundle-summary__pricing { display: none !important; }
.alfa-bundle-summary__promo { display: none !important; }
.alfa-bundle-summary__pick-for-me { display: none !important; }

/* v2.24.0: Legacy V2.9 override neutralized. Social proof is now styled
   scoped to its two new locations (.titlebar .social-proof desktop +
   .mobile-header__social-proof mobile). Leaving the selector but with
   no visual effect to avoid breaking cached stylesheets. */
.alfa-bundle-summary__social-proof {
    /* intentionally empty — see scoped rules below */
}

/* === Shop archive / related / widgets — alfa-bundle price display === */
/* Small pill showing "Ahorra hasta X%" next to the bundle price on listings.
   Does NOT apply on the bundle's PDP (filter returns '' there). */
.alfa-bundle-shop-price {
    font-weight: 700;
}
.alfa-bundle-shop-savings {
    display: inline-block;
    background: #F4F9FC;
    color: #0277BD;
    border-left: 2px solid #11ABE3;
    padding: 2px 7px;
    margin-left: 6px;
    font-size: 0.72em;
    font-weight: 600;
    border-radius: 0 3px 3px 0;
    vertical-align: middle;
    white-space: nowrap;
}
/* Stack vertically on narrow card layouts */
@media (max-width: 480px) {
    .alfa-bundle-shop-savings {
        display: block; margin-left: 0; margin-top: 4px;
        width: fit-content;
    }
}

/* === v2.17: Unified Price Zone in summary === */
.alfa-bundle-summary__price-zone {
    background: #f8faf5;
    border: 1px solid #e4ecd9;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
/* v2.22.2: Two instances of price-zone exist — one outside expandable for
   mobile (visible in collapsed bottom bar), one inside for desktop (reads
   as post-slot detail). CSS hides the wrong variant per viewport always.
   JS toggles display on both instances; wrong-viewport instance stays hidden. */
@media (max-width: 1023px) {
    .alfa-bundle-summary__price-zone--desktop { display: none !important; }
}
@media (min-width: 1024px) {
    .alfa-bundle-summary__price-zone--mobile { display: none !important; }
}
.alfa-bundle-pz__regular,
.alfa-bundle-pz__bundle,
.alfa-bundle-pz__savings {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    font-size: 0.88em;
    line-height: 1.4;
}
.alfa-bundle-pz__regular-label,
.alfa-bundle-pz__bundle-label,
.alfa-bundle-pz__savings-label {
    color: #666;
}
.alfa-bundle-pz__regular-amount {
    text-decoration: line-through;
    color: #999;
    font-size: 0.95em;
}
.alfa-bundle-pz__bundle {
    padding: 6px 0;
}
.alfa-bundle-pz__bundle-label {
    font-weight: 500;
    color: #333;
}
.alfa-bundle-pz__bundle-amount {
    font-size: 1.35em;
    font-weight: 700;
    color: #1B365D;
}
.alfa-bundle-pz__savings {
    border-top: 1px solid #e4ecd9;
    padding-top: 8px;
    margin-top: 4px;
}
.alfa-bundle-pz__savings-label {
    font-weight: 500;
    color: #3B6D11;
}
.alfa-bundle-pz__savings-amount {
    font-weight: 700;
    color: #3B6D11;
    font-size: 1.05em;
}
/* v2.20.1: Shipping + ETA trust row inside price zone */
.alfa-bundle-pz__shipping {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid #e4ecd9;
    font-size: 0.82em;
    font-weight: 500;
    color: #3B6D11;
    line-height: 1.3;
}
.alfa-bundle-pz__shipping svg { flex-shrink: 0; }
/* Projected (partial state) — slightly faded with ≈ prefix */
.alfa-bundle-pz__projected {
    opacity: 0.7;
    font-style: italic;
}
@media (max-width: 1023px) {
    .alfa-bundle-summary__price-zone {
        padding: 10px 12px;
        margin-bottom: 10px;
    }
    .alfa-bundle-pz__bundle-amount { font-size: 1.15em; }
}

/* === v2.11.1: Price block — shown above the grid on mobile, and in the
   summary sidebar on desktop. Static content, no JS updates (price and
   savings pct are server-rendered and don't depend on selections). */
.alfa-bundle-price-block {
    background: #F4F9FC;
    border-left: 3px solid #11ABE3;
    border-radius: 0 4px 4px 0;
    padding: 8px 12px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.alfa-bundle-price-block__price {
    font-size: 1.2em;
    font-weight: 700;
    color: #1B365D;
    line-height: 1.1;
}
.alfa-bundle-price-block__price .woocommerce-Price-amount {
    color: inherit;
    font-weight: inherit;
}
.alfa-bundle-price-block__savings {
    font-size: 0.82em;
    font-weight: 600;
    color: #0277BD;
    white-space: nowrap;
}

/* Mobile placement: between mobile-header and filters. Margin bottom separates
   it from whatever comes next (filters or grid). */
.alfa-bundle-price-block--mobile {
    margin: 0 0 12px;
}
@media (min-width: 1024px) {
    .alfa-bundle-price-block--mobile { display: none; }
}

/* Desktop placement: inside the summary sidebar, right under the header.
   Hidden on mobile (the --mobile variant takes over). */
.alfa-bundle-price-block--desktop {
    margin: 0 0 14px;
}
@media (max-width: 1023px) {
    .alfa-bundle-price-block--desktop { display: none; }
}

/* ===========================================================================
   === v2.23.0: CRO corrections (reviews + sabor protagonist + step2 cleanup)
   ===========================================================================
   Rationale summary (see session notes for full diagnostic):
   - Evidence says reviews must be adjacent to the Add-to-Cart CTA, not only
     near the H1. We render a compact ⭐⭐⭐⭐⭐ (N) link inside the sidebar.
   - Flavor (shortName) is the ONLY thing that distinguishes cards — raise it
     to 15px/500 protagonist; full product name moves to title attribute.
   - Bundle price anchor stays in the sidebar; card strikethrough is now
     subordinate (10-12px gray) so it anchors without competing.
   - Step 2 modal: removed stepper (contradicted "Pago" while user hadn't paid),
     removed duplicate "Envío gratis" trust item, removed "Garantía" (no policy
     yet — better empty than dishonest). Total is protagonist, detail collapses.
   =========================================================================== */

/* --- Card: flavor protagonist + tighter price hierarchy --- */
.alfa-bundle-card__name {
    font-size: 15px;
    font-weight: 500;
    color: #0d2240;
    line-height: 1.2;
    margin: 2px 0 2px;
    /* Single line + ellipsis for long names (e.g. "Granada y Zarzamora") */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
}
@media (max-width: 479px) {
    .alfa-bundle-card__name { font-size: 14px; }
}

.alfa-bundle-card__price {
    font-size: 13px;
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    line-height: 1.2;
}
.alfa-bundle-card__price-regular {
    font-size: 12px;
    color: #888;
    margin-right: 0;
}
.alfa-bundle-card__price-regular .woocommerce-Price-amount {
    text-decoration: line-through;
    color: #888;
    font-weight: 400;
}
.alfa-bundle-card__price-bundle {
    font-size: 17px;
    font-weight: 600;
    color: #0d2240;
}
.alfa-bundle-card__price-bundle .woocommerce-Price-amount {
    color: #0d2240;
    font-weight: 600;
}

/* --- Sidebar rating (adjacent to CTA) --- */
.alfa-bundle-summary__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 4px 0 6px;
    text-decoration: none;
    color: inherit;
}
.alfa-bundle-summary__rating:hover { text-decoration: none; }
.alfa-bundle-summary__rating:hover .alfa-bundle-summary__rating-count {
    text-decoration: underline;
}
.alfa-bundle-summary__stars {
    color: #F59E0B;
    font-size: 13px;
    letter-spacing: -1px;
    line-height: 1;
}
.alfa-bundle-summary__rating-count {
    font-size: 11px;
    color: #555;
    font-weight: 500;
}
@media (max-width: 1023px) {
    /* On mobile the summary header is hidden by existing CSS, so the rating
       inside it won't render there. Mobile gets its own rating via the
       mobile header (handled separately if product page has it above the grid). */
}

/* --- Social proof: subir peso visual (green dot + bigger text) --- */
.alfa-bundle-summary__social-proof-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #0F6E56;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    /* Subtle pulse to reinforce "real-time activity" without being intrusive */
    animation: alfa-sp-pulse 2.2s ease-in-out infinite;
}
@keyframes alfa-sp-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}
/* v2.24.0: Removed obsolete .title > .social-proof override — social proof
   is no longer nested inside the h3 (see titlebar refactor). */

/* --- Step 2 modal: total protagonist + detail toggle --- */
.alfa-step2__total-block {
    text-align: center;
    padding: 6px 0 4px;
}
.alfa-step2__total-lbl {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
    font-weight: 400;
}
.alfa-step2__total-val {
    font-size: 28px;
    font-weight: 700;
    color: #0d2240;
    line-height: 1;
    letter-spacing: -0.015em;
}
/* v2.23.5.1: El botón "Ver desglose" debe renderizarse como link plano subrayado.
   Woodmart aplica estilos globales a <button> (background, border, box-shadow,
   border-radius, padding) con alta especificidad — sin !important los reglas
   originales las perdían. Forzamos reset completo. */
.alfa-step2__detail-toggle {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #1B365D !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    margin-top: 6px !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    width: auto !important;
    min-height: 0 !important;
    display: inline-block !important;
}
.alfa-step2__detail-toggle:hover,
.alfa-step2__detail-toggle:focus,
.alfa-step2__detail-toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    color: #0d2240 !important;
    text-decoration: underline !important;
    outline: none !important;
}
.alfa-step2__detail-arrow {
    display: inline-block;
    margin-left: 2px;
    font-size: 10px;
}

/* Summary stays (reused by the expandable detail) but margins adjusted for
   new context (below total-block, above CTA). */
.alfa-step2__total-block + .alfa-step2__summary {
    margin: 4px 0 10px;
    padding: 10px 12px;
    background: #F7F9FC;
    border-radius: 8px;
}

/* CTA sub-line now carries ETA icon. Ensure icon aligns with text baseline. */
.alfa-step2__cta-sub svg {
    display: inline;
    vertical-align: -2px;
}

/* Trust row now has one item only. Center it and soften. */
.alfa-step2__trust {
    justify-content: center;
    gap: 0;
}
.alfa-step2__trust .alfa-step2__trust-item {
    font-size: 11px;
    color: #64748b;
}
.alfa-step2__trust .alfa-step2__trust-ic {
    background: transparent;
    font-size: 12px;
    width: auto;
    height: auto;
    border-radius: 0;
}

/* Secondary "Seguir comprando": diluted (text-style, not button) */
.alfa-added-modal__btn.alfa-added-modal__btn--secondary {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 8px !important;
    text-decoration: underline !important;
    cursor: pointer;
    display: block !important;
    margin: 4px auto 0 !important;
    width: auto !important;
}
.alfa-added-modal__btn.alfa-added-modal__btn--secondary:hover {
    color: #0d2240 !important;
}

/* ===========================================================================
   === v2.23.0: PDP template layout (full plugin-controlled page) ===
   ===========================================================================
   Used by templates/single-alfa-bundle.php. Renders:
   - Hero: H1 + rating link + savings badge (all inline-meta)
   - Body: 2-column grid (products | sidebar) → stacked on mobile
   - Reviews section (native comments_template styling inherited from theme)
   =========================================================================== */

.alfa-bundle-pdp-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 20px 48px;
}
@media (max-width: 767px) {
    .alfa-bundle-pdp-wrap { padding: 16px 12px 32px; }
}

/* Hero block */
.alfa-bundle-pdp-hero {
    margin: 0 0 20px;
}
.alfa-bundle-pdp-hero__title {
    font-size: 28px;
    font-weight: 600;
    color: #0d2240;
    line-height: 1.15;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
@media (max-width: 767px) {
    .alfa-bundle-pdp-hero__title { font-size: 22px; }
}
.alfa-bundle-pdp-hero__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}
.alfa-bundle-pdp-hero__rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
}
.alfa-bundle-pdp-hero__rating:hover .alfa-bundle-pdp-hero__rating-count {
    text-decoration: underline;
}
.alfa-bundle-pdp-hero__stars {
    color: #F59E0B;
    font-size: 16px;
    letter-spacing: -1px;
    line-height: 1;
}
.alfa-bundle-pdp-hero__rating-count {
    color: #1B365D;
    font-size: 13px;
    font-weight: 500;
}
.alfa-bundle-pdp-hero__dot {
    display: none;
}
.alfa-bundle-pdp-hero__savings {
    display: none;
}

/* Body: 2-column layout (grid | sidebar) */
.alfa-bundle-pdp-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
}
.alfa-bundle-pdp-body__grid {
    min-width: 0;
}
.alfa-bundle-pdp-body__aside {
    min-width: 0;
    position: sticky;
    top: 90px; /* allows for theme headers ~70-80px */
}

/* Breakpoint: below 1023 (tablet down) collapse to single column.
   Sidebar becomes the mobile sticky bar which is handled by
   .alfa-bundle-summary's existing mobile CSS. */
@media (max-width: 1023px) {
    .alfa-bundle-pdp-body {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .alfa-bundle-pdp-body__aside {
        position: static;
    }
}

/* Reviews section — inherits most styling from theme's comments_template.
   We just provide the outer wrapper and title styling. */
.alfa-bundle-pdp-reviews {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #e2e8f0;
}
.alfa-bundle-pdp-reviews__title {
    font-size: 20px;
    font-weight: 600;
    color: #0d2240;
    margin: 0 0 20px;
}
@media (max-width: 767px) {
    .alfa-bundle-pdp-reviews { margin-top: 32px; padding-top: 24px; }
    .alfa-bundle-pdp-reviews__title { font-size: 17px; }
}

/* Body class marker — small tweaks for consistency when this template is active. */
body.alfa-bundle-pdp .woocommerce-breadcrumb {
    max-width: 1400px;
    margin: 16px auto 0;
    padding: 0 20px;
    font-size: 12px;
}
@media (max-width: 767px) {
    body.alfa-bundle-pdp .woocommerce-breadcrumb { padding: 0 12px; }
}

/* ===========================================================================
   === v2.23.2: Fixes del QA de Claude in Chrome ===
   ===========================================================================
   - Titlebar flex para poner rating AL LADO del título (antes caía debajo)
   - Social proof ahora vive fuera del <h3> (antes era HTML inválido)
   - __meta para la segunda línea de la card (marca · tamaño)
   - Trust icon con espacio a su derecha
   =========================================================================== */

/* Titlebar: título + rating en la misma fila (flex baseline).
   Solo aplica en desktop — en mobile el header del summary está oculto.
   Usamos align-items: baseline (no center) porque el título es mucho más
   grande (24px) que el rating (13px); con center el rating quedaría visualmente
   "flotando" arriba del texto. Con baseline los dos se asientan en la misma
   línea tipográfica, que es la convención correcta para precios/ratings
   acompañando un heading. Nota QA: los rects top() diferirán ~10px por la
   diferencia de altura de los elementos, pero los centros visuales coinciden. */
.alfa-bundle-summary__titlebar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
    margin: 0;
}
.alfa-bundle-summary__titlebar .alfa-bundle-summary__title {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
}
/* v2.24.0: social proof lives here now (right-aligned, inline with title).
   The dot-animation + color come from the base rule below. */
.alfa-bundle-summary__titlebar .alfa-bundle-summary__social-proof {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #0F6E56 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    line-height: 1.2 !important;
    text-align: right;
}

/* v2.24.0: deprecated — social proof no longer lives in __header as a sibling;
   it lives inside __titlebar. Keep this rule only as a no-op fallback for any
   cached HTML from older versions. */
.alfa-bundle-summary__header > .alfa-bundle-summary__social-proof {
    display: none !important;
}

/* Card meta line: marca + tamaño debajo del sabor (protagonista).
   Muy suave para no competir con el sabor grande ni con el precio. */
.alfa-bundle-card__meta {
    font-size: 10px;
    color: #888;
    text-align: center;
    line-height: 1.2;
    margin: 0 0 6px;
    padding: 0 4px;
    letter-spacing: 0.1px;
    /* Evita que nombres muy largos de marca + tamaño rompan la card */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 479px) {
    .alfa-bundle-card__meta { font-size: 9px; }
}

/* Trust icon: margin derecho para separar del texto. */
.alfa-step2__trust .alfa-step2__trust-ic {
    margin-right: 6px;
}

/* ── Mobile-only card adjustments ── */
@media (max-width: 1023px) {
    .alfa-bundle-card__meta {
        display: none;
    }
    .alfa-bundle-card__price {
        justify-content: flex-start;
    }
}