/* Rameez Scripts — page-bundles-user rules, split out of styles.css (2026-09-19) so only this page parses them.
   Load AFTER styles.css. Selectors stay scoped to body.page-bundles-user — a rule that must reach other pages belongs in styles.css. */

/* ============ File Bundles — premium (scoped to body.page-bundles-user) ============ */
body.page-bundles-user .main-content { background: #f4f7fb; }
body.page-bundles-user .bndx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
body.page-bundles-user .bndx-card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: #fff; border: 1px solid #e8eef6; border-radius: 18px; padding: 22px 20px; box-shadow: 0 6px 22px rgba(var(--c-primary-rgb),0.06); transition: transform .22s, box-shadow .22s, border-color .22s; animation: cartxIn .5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--d) * 70ms); }
body.page-bundles-user .bndx-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #f59e0b, #d97706); opacity: 0; transition: opacity .22s; }
body.page-bundles-user .bndx-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(var(--c-primary-rgb),0.13); border-color: #fde0a3; }
body.page-bundles-user .bndx-card:hover::before { opacity: 1; }
body.page-bundles-user .bndx-ribbon { position: absolute; top: 15px; right: -34px; transform: rotate(45deg); width: 132px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .5px; color: #fff; padding: 5px 0; background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 3px 10px rgba(220,38,38,0.35); }
body.page-bundles-user .bndx-top { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; padding-right: 28px; }
body.page-bundles-user .bndx-ic { width: 50px; height: 50px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); box-shadow: 0 8px 18px rgba(217,119,6,0.3); }
body.page-bundles-user .bndx-name { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 18px; font-weight: 800; color: var(--c-primary); line-height: 1.2; letter-spacing: -0.3px; }
body.page-bundles-user .bndx-count { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #64748b; margin-top: 4px; }
body.page-bundles-user .bndx-count i { color: var(--c-accent); }
body.page-bundles-user .bndx-desc { font-size: 13px; color: #64748b; line-height: 1.5; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.page-bundles-user .bndx-files { list-style: none; margin: 0 0 16px; padding: 14px; background: #f8fbff; border: 1px solid #eef3fa; border-radius: 12px; }
body.page-bundles-user .bndx-files li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #334155; padding: 5px 0; }
body.page-bundles-user .bndx-files li i { color: var(--c-accent); font-size: 12px; width: 15px; text-align: center; flex-shrink: 0; }
body.page-bundles-user .bndx-files li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body.page-bundles-user .bndx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid #f1f5f9; }
body.page-bundles-user .bndx-price { display: flex; flex-direction: column; line-height: 1.15; }
body.page-bundles-user .bndx-old { font-size: 12px; color: #94a3b8; text-decoration: line-through; }
body.page-bundles-user .bndx-final { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 24px; font-weight: 800; color: var(--c-primary); letter-spacing: -0.5px; }
body.page-bundles-user .bndx-final small { font-size: 13px; font-weight: 700; color: #64748b; }
body.page-bundles-user .rs-addcart-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: none; border-radius: 11px; font-size: 13.5px; font-weight: 700; color: #fff; cursor: pointer; white-space: nowrap; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); box-shadow: 0 6px 16px rgba(var(--c-primary-rgb),0.24); transition: transform .15s, box-shadow .2s, opacity .2s; }
body.page-bundles-user .rs-addcart-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--c-primary-rgb),0.32); }
body.page-bundles-user .rs-addcart-btn:disabled { opacity: .6; cursor: default; transform: none; }
body.page-bundles-user .bndx-empty { background: #fff; border: 1px solid #e8eef6; border-radius: 20px; padding: 60px 24px; text-align: center; box-shadow: 0 6px 24px rgba(var(--c-primary-rgb),0.05); max-width: 540px; margin: 24px auto 0; }
body.page-bundles-user .bndx-empty-ic { width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #d97706; background: radial-gradient(circle at 32% 30%, #fef3c7, #fde68a); }
body.page-bundles-user .bndx-empty h2 { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 22px; font-weight: 800; color: var(--c-primary); margin-bottom: 8px; }
body.page-bundles-user .bndx-empty p { font-size: 14px; color: #64748b; margin-bottom: 22px; }
body.page-bundles-user .bndx-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 12px; font-size: 14px; font-weight: 700; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); box-shadow: 0 8px 20px rgba(var(--c-primary-rgb),0.25); transition: transform .15s; }
body.page-bundles-user .bndx-cta:hover { transform: translateY(-2px); }
@media (max-width: 560px) {
    body.page-bundles-user .bndx-grid { grid-template-columns: 1fr; }
    body.page-bundles-user .bndx-foot { flex-wrap: wrap; }
}

/* bundle files — clickable preview + popup */
body.page-bundles-user .bndx-files { cursor: pointer; transition: background .15s, border-color .15s; }
body.page-bundles-user .bndx-files:hover { background: #f1f7ff; border-color: #cfe0f7; }
body.page-bundles-user .bndx-files:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
body.page-bundles-user .bndx-files li.bndx-viewall { color: var(--c-accent); font-weight: 700; margin-top: 4px; }
body.page-bundles-user .bndx-files li.bndx-viewall i { color: var(--c-accent); }

body.page-bundles-user .bndx-modal { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(var(--c-primary-rgb),0.55); backdrop-filter: blur(3px); }
body.page-bundles-user .bndx-modal.open { display: flex; animation: bndxFade .2s ease; }
body.page-bundles-user .bndx-modal-card { width: 100%; max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(var(--c-primary-rgb),0.4); animation: bndxPop .25s cubic-bezier(.2,.8,.2,1); }
body.page-bundles-user .bndx-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); color: #fff; }
body.page-bundles-user .bndx-modal-head h3 { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 9px; min-width: 0; }
body.page-bundles-user .bndx-modal-head h3 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.page-bundles-user .bndx-modal-x { width: 34px; height: 34px; flex-shrink: 0; border: none; border-radius: 9px; background: rgba(255,255,255,0.16); color: #fff; cursor: pointer; font-size: 15px; transition: background .2s; }
body.page-bundles-user .bndx-modal-x:hover { background: rgba(255,255,255,0.3); }
body.page-bundles-user .bndx-modal-sub { display: flex; align-items: center; gap: 7px; padding: 11px 20px; font-size: 12.5px; font-weight: 700; color: #0e7a37; background: #ecfdf5; border-bottom: 1px solid #d1fae5; }
body.page-bundles-user .bndx-modal-body { padding: 6px 14px 14px; overflow-y: auto; }
body.page-bundles-user .bndx-frow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 6px; border-bottom: 1px solid #f1f5f9; }
body.page-bundles-user .bndx-frow:last-child { border-bottom: none; }
body.page-bundles-user .bndx-fmain { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1; }
body.page-bundles-user .bndx-fmain > i { color: var(--c-accent); margin-top: 3px; flex-shrink: 0; font-size: 14px; }
body.page-bundles-user .bndx-fname { font-size: 13.5px; font-weight: 600; color: #1e293b; line-height: 1.35; min-width: 0; word-break: break-word; }
body.page-bundles-user .bndx-furl { display: block; font-size: 11px; color: #94a3b8; text-decoration: none; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; font-family: 'Courier New', monospace; }
body.page-bundles-user .bndx-furl:hover { color: var(--c-accent); text-decoration: underline; }
body.page-bundles-user .bndx-fright { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
body.page-bundles-user .bndx-fp { font-size: 12px; color: #64748b; white-space: nowrap; }
body.page-bundles-user .bndx-fp strong { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 15px; color: var(--c-primary); }
body.page-bundles-user .bndx-fp-old { text-decoration: line-through; color: #cbd5e1; margin-right: 5px; font-size: 11px; }
body.page-bundles-user .bndx-fv { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-decoration: none; padding: 4px 10px; border-radius: 8px; white-space: nowrap; }
body.page-bundles-user a.bndx-fv { color: #fff; background: #ff0000; box-shadow: 0 3px 8px rgba(255,0,0,0.22); }
body.page-bundles-user a.bndx-fv:hover { background: #d90000; }
body.page-bundles-user .bndx-fv-none { color: #94a3b8; background: #f1f5f9; }
@media (max-width: 480px) {
    body.page-bundles-user .bndx-furl { max-width: 140px; }
    body.page-bundles-user .bndx-modal-card { max-height: 90vh; }
}

/* bundle ownership — already-purchased state + per-file owned/access */
body.page-bundles-user .bndx-card.is-owned { border-color: #bbf7d0; }
body.page-bundles-user .bndx-card.is-owned::before { background: linear-gradient(90deg, #16a34a, #0e7a37); opacity: 1; }
body.page-bundles-user .bndx-owned-ribbon { position: absolute; top: 15px; right: -34px; transform: rotate(45deg); width: 132px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .5px; color: #fff; padding: 5px 0; background: linear-gradient(135deg, #16a34a, #0e7a37); box-shadow: 0 3px 10px rgba(22,163,74,0.35); }
body.page-bundles-user .bndx-files li .bndx-li-owned { color: #16a34a; font-size: 12px; margin-left: auto; flex-shrink: 0; }
body.page-bundles-user .bndx-owned-note { display: flex; align-items: center; gap: 7px; margin: -4px 0 14px; padding: 9px 12px; font-size: 12px; font-weight: 700; color: #0e7a37; background: #ecfdf5; border: 1px solid #d1fae5; border-radius: 10px; }
body.page-bundles-user .bndx-owned-note i { color: #16a34a; }
body.page-bundles-user .bndx-final-owned { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: #0e7a37; }
body.page-bundles-user .bndx-btn-owned { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: none; border-radius: 11px; font-size: 13.5px; font-weight: 700; color: #fff; cursor: pointer; white-space: nowrap; text-decoration: none; background: linear-gradient(135deg, #16a34a, #0e7a37); box-shadow: 0 6px 16px rgba(22,163,74,0.26); transition: transform .15s, box-shadow .2s; }
body.page-bundles-user .bndx-btn-owned:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(22,163,74,0.34); }
body.page-bundles-user .bndx-frow.is-owned { background: #f6fef9; }
body.page-bundles-user .bndx-fowned { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: #0e7a37; background: #ecfdf5; border: 1px solid #d1fae5; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
body.page-bundles-user a.bndx-fopen { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--c-accent), var(--c-primary)); border-radius: 8px; padding: 5px 11px; white-space: nowrap; }
body.page-bundles-user a.bndx-fopen:hover { filter: brightness(1.1); }
/* plan access — reachable now but rented, so it never credits the pack. blue, never the owned green */
body.page-bundles-user .bndx-files li .bndx-li-plan { color: #4f46e5; font-size: 12px; margin-left: auto; flex-shrink: 0; }
body.page-bundles-user .bndx-frow.is-plan { background: #f8f9ff; }
body.page-bundles-user .bndx-fplan { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: #3730a3; background: #eef2ff; border: 1px solid #e0e7ff; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }

/* ---- bundles.php responsive ---- */
@media (max-width: 768px) {
    body.page-bundles-user .files-page-header { padding: 20px 18px; }
    body.page-bundles-user .files-page-header h1 { font-size: 23px; }
    body.page-bundles-user .bndx-modal-x { width: 42px; height: 42px; } /* touch target */
    body.page-bundles-user .bndx-name { overflow-wrap: break-word; }
}
@media (max-width: 480px) {
    body.page-bundles-user .bndx-modal { padding: 10px; }
    body.page-bundles-user .bndx-card { padding: 18px 16px; }
    body.page-bundles-user .bndx-frow { flex-wrap: wrap; }
}

/* phones: card actions full width, taps >= 44px */
@media (max-width: 560px) {
    body.page-bundles-user .bndx-foot .bndx-btn, body.page-bundles-user .bndx-btn-owned { width: 100%; justify-content: center; min-height: 44px; }
    body.page-bundles-user .bndx-fv, body.page-bundles-user a.bndx-fopen { min-height: 36px; }
}

/* ================= PUBLIC VIEW (guests) — landing.php hero, ported and namespaced bx- =================
   landing.css is not loaded here and styles.css / public_header.php own generic .hero-ish names, so every
   rule is bx-prefixed and scoped to the page. Tokens fall back so it renders even without landing's :root */
body.page-bundles-user .bx-hero {
    --bx-hair: rgba(var(--c-primary-rgb, 15, 23, 42), .10);
    --bx-radius: 16px;
    --bx-float: 0 18px 44px rgba(var(--c-primary-rgb, 15, 23, 42), .14);
    position: relative; overflow: hidden; display: flex; align-items: center; box-sizing: border-box;
    min-height: min(660px, calc(100vh - 64px));
    padding: 56px clamp(16px, 4vw, 40px) 64px;
}
body.page-bundles-user .bx-stage { position: absolute; inset: 0; max-width: 1240px; margin: 0 auto; pointer-events: none; z-index: 1; }
body.page-bundles-user .bx-float {
    position: absolute; width: 230px; box-sizing: border-box; padding: 14px 16px; text-align: left;
    display: flex; flex-direction: column; gap: 7px;
    background: var(--c-card, #fff); border: 1px solid var(--bx-hair); border-radius: var(--bx-radius); box-shadow: var(--bx-float);
}
body.page-bundles-user .bx-float b { font-size: 12px; font-weight: 700; color: var(--c-text, #0f172a); }
body.page-bundles-user .bx-float span { font-size: 12px; color: var(--c-text-muted, #64748b); line-height: 1.5; display: flex; align-items: center; gap: 7px; }
body.page-bundles-user .bx-float i { color: var(--c-accent-strong, var(--c-accent, #0074D9)); font-size: 12px; }
body.page-bundles-user .bf-note  { top: 104px; left: -52px; transform: rotate(-6deg); }
body.page-bundles-user .bf-flow  { top: 132px; right: -46px; transform: rotate(5deg); padding-bottom: 16px; }
body.page-bundles-user .bf-pipe  { bottom: -26px; left: 34px; transform: rotate(3deg); }
body.page-bundles-user .bf-stack { bottom: 56px; right: -38px; transform: rotate(-4deg); width: 190px; }

/* the stepper — rail fills while each number lights in turn (same motion as landing) */
body.page-bundles-user .bf-flow::before, body.page-bundles-user .bf-flow::after { content: ''; position: absolute; left: 24px; top: 42px; bottom: 22px; width: 2px; border-radius: 2px; }
body.page-bundles-user .bf-flow::before { background: var(--c-tint-line, #e2e8f0); }
body.page-bundles-user .bf-flow::after { background: var(--c-accent, #0074D9); transform-origin: top; transform: scaleY(0); animation: bxRail 6s linear infinite; }
body.page-bundles-user .bf-step { position: relative; z-index: 1; align-items: flex-start; }
body.page-bundles-user .bf-step u { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; text-decoration: none;
    background: var(--c-tint-line, #e2e8f0); color: var(--c-text-muted, #64748b); font-size: 10px; font-weight: 800; animation: bxStep 6s linear infinite; }
body.page-bundles-user .bf-flow span:nth-of-type(2) u { animation-delay: 1.5s; }
body.page-bundles-user .bf-flow span:nth-of-type(3) u { animation-delay: 3s; }
body.page-bundles-user .bf-flow span:nth-of-type(4) u { animation-delay: 4.5s; }
@keyframes bxRail { 0% { transform: scaleY(0); } 85%, 100% { transform: scaleY(1); } }
@keyframes bxStep {
    0%, 22%   { background: var(--c-accent, #0074D9); color: var(--c-on-accent, #fff); box-shadow: 0 0 0 3px rgba(var(--c-accent-rgb, 0, 116, 217), .16); }
    30%, 100% { background: var(--c-tint-line, #e2e8f0); color: var(--c-text-muted, #64748b); box-shadow: none; }
}
/* savings bars — width = the pack's discount */
body.page-bundles-user .bf-row i { font-style: normal; flex: 0 0 82px; color: var(--c-text-muted, #64748b); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.page-bundles-user .bf-row u { flex: 1; height: 5px; text-decoration: none; position: relative; border-radius: 4px; background: rgba(var(--c-primary-rgb, 15, 23, 42), .08); }
body.page-bundles-user .bf-row u::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); border-radius: 4px; background: var(--c-accent, #0074D9); }
body.page-bundles-user .bf-row em { font-style: normal; font-weight: 700; color: var(--c-text, #0f172a); flex: 0 0 auto; }
body.page-bundles-user .bf-stack { width: 222px; }
body.page-bundles-user .bf-stack b { display: flex; align-items: center; gap: 7px; }
/* labelled brand tiles: each mark on a soft wash of its own colour, name underneath — the bare
   icons read as washed-out clip-art (the PHP mark was near-illegible at 20px) */
body.page-bundles-user .bf-logos { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; }
body.page-bundles-user .bf-stack .bf-chip {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    padding: 9px 4px 7px; border-radius: 11px;
    background: rgba(var(--bc, 100, 116, 139), .09); border: 1px solid rgba(var(--bc, 100, 116, 139), .22);
    transition: transform .2s ease;
}
body.page-bundles-user .bf-chip img { width: 26px; height: 26px; object-fit: contain; display: block; }
body.page-bundles-user .bf-chip small { font-size: 9.5px; font-weight: 700; letter-spacing: .01em; line-height: 1.1; color: var(--c-text, #0f172a); white-space: nowrap; }
@media (max-width: 1180px) { body.page-bundles-user .bx-float { display: none; } }   /* they'd sit on the words */

body.page-bundles-user .bx-hero-in { position: relative; z-index: 2; width: 100%; max-width: 780px; margin: 0 auto; text-align: center; }
body.page-bundles-user .bx-mark { display: block; width: 88px; height: 88px; margin: 0 auto 22px; /* block: never shares a line with the badge on a phone */ border-radius: var(--bx-radius); overflow: hidden; box-shadow: var(--bx-float); transition: transform .2s ease; }
body.page-bundles-user .bx-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.page-bundles-user .bx-mark:hover { transform: translateY(-2px); }
body.page-bundles-user .bx-badge {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; padding: 8px 20px;
    background: rgba(var(--c-accent-rgb, 0, 116, 217), .15); border: 1px solid rgba(var(--c-accent-rgb, 0, 116, 217), .30);
    border-radius: 12px; color: var(--c-accent-strong, var(--c-accent, #0074D9)); font-size: 14px; font-weight: 600; animation: bxUp .8s ease both;
}
body.page-bundles-user .bx-title {
    margin: 0 0 20px; color: var(--c-text, #0f172a); font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(36px, 5.2vw, 60px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; animation: bxUp .8s ease .2s both;
}
body.page-bundles-user .bx-title .accent { color: var(--c-text-muted, #64748b); }
body.page-bundles-user .bx-sub { max-width: 560px; margin: 0 auto 32px; color: var(--c-text-muted, #64748b); font-size: 18px; line-height: 1.7; animation: bxUp .8s ease .4s both; }
body.page-bundles-user .bx-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; animation: bxUp .8s ease .6s both; }
body.page-bundles-user .bx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 12px;
    font-size: 14px; font-weight: 600; text-decoration: none; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.page-bundles-user .bx-btn-p { background: var(--c-accent, #0074D9); color: var(--c-on-accent, #fff); font-size: 15px; box-shadow: 0 10px 24px rgba(var(--c-accent-rgb, 0, 116, 217), .28); }
body.page-bundles-user .bx-btn-p:hover { background: var(--c-accent-strong, var(--c-accent, #0074D9)); transform: translateY(-2px); }
body.page-bundles-user .bx-btn-o { background: var(--c-card, #fff); color: var(--c-text, #0f172a); border: 2px solid var(--bx-hair); }
body.page-bundles-user .bx-btn-o:hover { color: var(--c-accent-strong, var(--c-accent, #0074D9)); border-color: var(--c-accent, #0074D9); transform: translateY(-2px); }
body.page-bundles-user .bx-btn:active { transform: translateY(0) scale(.98); }
body.page-bundles-user .bx-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 25px; margin-top: 30px; animation: bxUp .8s ease .8s both; }
body.page-bundles-user .bx-ti { display: flex; align-items: center; gap: 8px; color: var(--c-text-muted, #64748b); font-size: 13px; font-weight: 500; }
body.page-bundles-user .bx-ti i { color: #22c55e; font-size: 14px; }
body.page-bundles-user .bx-ti b { color: var(--c-text, #0f172a); font-weight: 700; }
@keyframes bxUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    body.page-bundles-user .bf-flow::after { animation: none; transform: scaleY(1); }
    body.page-bundles-user .bf-step u { animation: none; background: var(--c-accent, #0074D9); color: var(--c-on-accent, #fff); }
    body.page-bundles-user .bx-badge, body.page-bundles-user .bx-title, body.page-bundles-user .bx-sub,
    body.page-bundles-user .bx-btns, body.page-bundles-user .bx-trust { animation: none; }
}

/* the bundle list under the hero */
body.page-bundles-user .bx-main { max-width: 1200px; margin: 0 auto; padding: 8px 16px 72px; box-sizing: border-box; scroll-margin-top: 80px; }
body.page-bundles-user .bx-head { text-align: center; margin: 0 auto 28px; max-width: 640px; }
body.page-bundles-user .bx-head h2 { margin: 0 0 8px; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: clamp(26px, 3.4vw, 36px); color: var(--c-text, #0f172a); letter-spacing: -.02em; }
body.page-bundles-user .bx-head p { margin: 0; color: var(--c-text-muted, #64748b); font-size: 15.5px; line-height: 1.6; }

/* guest Buy Now — the same look as Add to Cart */
body.page-bundles-user .bx-buy, body.page-bundles-user .bx-buy-alt {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: none; border-radius: 11px;
    font-size: 13.5px; font-weight: 700; color: #fff; cursor: pointer; white-space: nowrap; text-decoration: none; font-family: inherit;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); box-shadow: 0 6px 16px rgba(var(--c-primary-rgb), .24);
    transition: transform .15s, box-shadow .2s; touch-action: manipulation;
}
body.page-bundles-user .bx-buy:hover, body.page-bundles-user .bx-buy-alt:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--c-primary-rgb), .32); }

/* step 1 of guest checkout: pick a payment method (step 2 is the shared manual_pay_modal) */
body.page-bundles-user .bx-sheet {
    position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; padding: 18px;
    background: rgba(var(--c-primary-rgb, 15, 23, 42), .55); backdrop-filter: blur(3px);
}
body.page-bundles-user .bx-sheet.open { display: flex; }
body.page-bundles-user .bx-sheet-card {
    width: 100%; max-width: 460px; max-height: 88vh; overflow: auto; box-sizing: border-box; padding: 20px;
    background: var(--c-card, #fff); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
body.page-bundles-user .bx-sheet-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
body.page-bundles-user .bx-sheet-h h3 { margin: 0; font-size: 18px; color: var(--c-text, #0f172a); display: flex; gap: 10px; align-items: baseline; }
body.page-bundles-user .bx-sheet-h h3 i { color: var(--c-accent, #0074D9); }
body.page-bundles-user .bx-sheet-x { flex: 0 0 36px; height: 36px; border: none; border-radius: 10px; background: var(--c-tint, #f1f5f9); color: var(--c-text, #0f172a); cursor: pointer; font-size: 16px; }
body.page-bundles-user .bx-sheet-sub { margin: 6px 0 16px; color: var(--c-text-muted, #64748b); font-size: 14px; }
body.page-bundles-user .bx-sheet-list { display: flex; flex-direction: column; gap: 10px; }
body.page-bundles-user .bx-pm {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 14px; box-sizing: border-box;
    border: 1px solid var(--c-tint-line, #e2e8f0); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; text-align: left;
    transition: border-color .15s, box-shadow .15s, transform .15s; touch-action: manipulation;
}
body.page-bundles-user .bx-pm:hover { border-color: var(--c-accent, #0074D9); box-shadow: 0 6px 16px rgba(var(--c-accent-rgb, 0, 116, 217), .14); transform: translateY(-1px); }
body.page-bundles-user .bx-pm > i:first-child { flex: 0 0 22px; font-size: 18px; color: var(--c-accent, #0074D9); text-align: center; }
body.page-bundles-user .bx-pm span { flex: 1; font-weight: 600; color: var(--c-text, #0f172a); font-size: 15px; }
body.page-bundles-user .bx-pm b { color: var(--c-text, #0f172a); font-size: 15px; white-space: nowrap; }
body.page-bundles-user .bx-pm-go { color: var(--c-text-muted, #64748b); font-size: 12px; }
body.page-bundles-user .bx-sheet-note { margin: 16px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--c-tint, #f1f5f9); color: var(--c-text-muted, #64748b); font-size: 13px; line-height: 1.5; }
body.page-bundles-user .bx-sheet-note i { color: #16a34a; margin-right: 4px; }

@media (max-width: 768px) {
    body.page-bundles-user .bx-hero { min-height: 0; padding: 40px 16px 44px; }
    body.page-bundles-user .bx-sub { font-size: 16px; }
    body.page-bundles-user .bx-btn { flex: 1 1 100%; }
    body.page-bundles-user .bx-foot .bx-buy, body.page-bundles-user .bndx-foot .bx-buy,
    body.page-bundles-user .bndx-foot .bx-buy-alt { width: 100%; justify-content: center; min-height: 44px; }
    body.page-bundles-user .bx-sheet { align-items: flex-end; padding: 0; }
    body.page-bundles-user .bx-sheet-card { max-width: none; border-radius: 18px 18px 0 0; }
}

/* members: points price + the same pack in their country's currency, and Buy Now beside Add to Cart */
body.page-bundles-user .bx-local { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--c-text-muted, #64748b); white-space: nowrap; }
/* two buttons get their own full-width row under the price, equal widths — side by side they
   squeezed the price column until "or Rs …" broke over two lines */
body.page-bundles-user .bndx-foot { flex-wrap: wrap; }
body.page-bundles-user .bx-acts { display: flex; gap: 8px; flex: 1 1 100%; }
body.page-bundles-user .bx-acts .bndx-btn { flex: 1 1 0; justify-content: center; min-width: 0; }
@media (max-width: 768px) {
    body.page-bundles-user .bx-acts { width: 100%; }
    body.page-bundles-user .bx-acts .bndx-btn { flex: 1 1 140px; justify-content: center; min-height: 44px; }
}