/* ==========================================================================
   Promotions Page v4 - "Free Gift Ladder" (promotions_info_v4.php)
   --------------------------------------------------------------------------
   Loaded AFTER promo_page.css, which supplies the base .promo2 tokens + shared
   components (dealbar, hero, shead, .btn, product grid, facet rail palette,
   finale). This file only adds the NEW gift-ladder components, all scoped under
   .promo4 so nothing leaks into the live page:
     - sticky cart-aware header (.railbar, three stacked rows)
     - the tier / gift ladder (.tier, .gift)
     - complete-the-gift bundles (.bundles)
     - selection footer (.selbar) + ajax toast (.toast)
     - grid "Unlocks gift" pill
   Colors reuse the house tokens; savings-green is --lp-savings (#a4d007).

   COLOR ROLES (see CURSOR_colors_and_naming_v3.md):
     - GREEN  (--lp-savings / --savings-deep) = savings INFORMATION only. Never a
       clickable element.
     - BLUE   (--lp-action) = the ACTION. Every add-to-cart CTA (bundle + plain),
       matching the product-page "Update Cart" button. White text, hover darker.
     - RED    = promo / urgency only (deal bar, codes) - kept off the cards.
     - Off-black (--chip-dark) = the gift chip pill (dark-on-green needs contrast).
   ========================================================================== */

/* Action + deep-green tokens (scoped so nothing leaks to the live page). */
/* --p-display = Bebas (already loaded site-wide) for deal/price display type;
   --p-mono = system monospace for prices (DM Mono in the mockups isn't loaded). */
.promo4{ --lp-action:#3968BA; --lp-action-hover:#2f579c; --savings-deep:#5f7f00; --chip-dark:#191A1C; --p-display:"Bebas Neue",Impact,sans-serif; --p-mono:ui-monospace,Menlo,Consolas,monospace; }

/* ---------- deal bar tweak (v4 uses a single-message bar) ---------- */
.promo4 .dealbar .wrap{ justify-content:center; gap:14px; }
.promo4 .dealbar .db-msg{ font-weight:600; }
.promo4 .dealbar .code{ font-family:ui-monospace,Menlo,Consolas,monospace; background:rgba(0,0,0,.22); padding:2px 9px; border-radius:6px; letter-spacing:1px; }

/* ============ STICKY CART-AWARE HEADER (rail) ============ */
.promo4 .railbar{ position:sticky; top:0; z-index:45; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 2px 10px rgba(8,8,8,.05); }
.promo4 .railbar .wrap{ display:flex; align-items:center; gap:22px; padding:12px 24px; }
.promo4 .rail-cart{ display:flex; align-items:center; gap:11px; white-space:nowrap; }
.promo4 .rail-cart .ico{ position:relative; width:38px; height:38px; border-radius:9px; background:var(--grey); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:1.15rem; }
.promo4 .rail-cart .cbadge{ position:absolute; top:-6px; right:-6px; background:var(--lp-savings); color:var(--lp-savings-ink); font-size:.62rem; font-weight:800; min-width:17px; height:17px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.promo4 .rail-cart .cbadge[hidden]{ display:none; }
.promo4 .rail-cart .lbl{ font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; color:var(--p-muted); font-weight:700; }
.promo4 .rail-cart .amt{ font-size:1.35rem; font-weight:800; color:var(--p-text-dk); line-height:1.05; font-variant-numeric:tabular-nums; }
.promo4 .rail-cart .amt .pre{ font-size:.85rem; color:var(--p-muted); vertical-align:top; }

.promo4 .rail-prog{ flex:1; min-width:0; }
.promo4 .rail-msg{ font-size:.9rem; color:var(--p-text); margin-bottom:9px; font-weight:500; line-height:1.25; }
.promo4 .rail-msg b{ color:var(--savings-deep); font-weight:700; }
.promo4 .rail-msg .amber{ color:var(--red); font-weight:700; }
.promo4 .rail-track{ position:relative; height:7px; border-radius:999px; background:var(--grey); margin-bottom:18px; }
.promo4 .rail-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg,#7fa300,var(--lp-savings)); width:0%; transition:width .45s cubic-bezier(.2,.7,.2,1); }
.promo4 .rail-node{ position:absolute; top:50%; transform:translate(-50%,-50%); width:13px; height:13px; border-radius:50%; background:#fff; border:2px solid var(--line-2); transition:.25s; z-index:2; }
.promo4 .rail-node.hit{ background:var(--lp-savings); border-color:var(--lp-savings); box-shadow:0 0 0 3px rgba(164,208,7,.25); }
.promo4 .rail-node .tip{ position:absolute; top:14px; left:50%; transform:translateX(-50%); font-size:.72rem; font-weight:700; color:var(--p-muted); white-space:nowrap; transition:.25s; }
.promo4 .rail-node.hit .tip{ color:var(--savings-deep); }

.promo4 .rail-cta{ font-weight:700; font-size:.85rem; background:var(--lp-savings); color:var(--lp-savings-ink); border:none; border-radius:8px; padding:11px 17px; white-space:nowrap; transition:filter .15s; }
.promo4 .rail-cta:hover{ filter:brightness(1.05); }
.promo4 .rail-cta.ghost{ background:#fff; color:var(--p-text); border:1px solid var(--line-2); }
.promo4 .rail-cta.ghost:hover{ border-color:var(--lp-savings); color:var(--savings-deep); filter:none; }

/* ============ LADDER (tiers + gifts) ============ */
.promo4 .shead .legend{ display:flex; gap:15px; font-size:.78rem; color:var(--p-muted); flex-wrap:wrap; align-items:center; }
.promo4 .shead .legend span{ display:inline-flex; align-items:center; gap:7px; }
.promo4 .shead .legend .sw{ width:13px; height:13px; border-radius:4px; display:inline-block; }
.promo4 .shead .legend .sw.on{ background:var(--lp-savings); }
.promo4 .shead .legend .sw.off{ background:var(--grey); border:1px solid var(--line-2); }
.promo4 .shead .legend .sw.pick{ background:transparent; border:2px solid var(--lp-savings); }

.promo4 .tier{ border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:16px; overflow:hidden; transition:box-shadow .25s, border-color .25s; }
.promo4 .tier.unlocked{ border-color:rgba(164,208,7,.55); box-shadow:0 0 0 1px rgba(164,208,7,.18); }
.promo4 .tier-head{ display:flex; align-items:center; gap:15px; padding:14px 18px; background:var(--grey); border-bottom:1px solid var(--line); }
.promo4 .tier.unlocked .tier-head{ background:linear-gradient(90deg,rgba(164,208,7,.14),transparent); }
.promo4 .tier-badge{ font-size:1.2rem; font-weight:800; line-height:1; padding:9px 13px; border-radius:10px; background:#fff; color:var(--p-muted); border:1px solid var(--line-2); min-width:74px; text-align:center; transition:.25s; }
.promo4 .tier.unlocked .tier-badge{ background:var(--lp-savings); color:var(--lp-savings-ink); border-color:var(--lp-savings); }
.promo4 .tier-meta{ flex:1; min-width:0; }
.promo4 .tier-meta .t1{ font-weight:700; font-size:.98rem; color:var(--p-text-dk); }
.promo4 .tier-meta .t2{ font-size:.82rem; color:var(--p-muted); }
.promo4 .tier-state{ font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; border-radius:999px; background:#fff; color:var(--p-muted); border:1px solid var(--line-2); white-space:nowrap; }
.promo4 .tier.unlocked .tier-state{ background:rgba(164,208,7,.15); color:var(--savings-deep); border-color:rgba(164,208,7,.5); }

.promo4 .gift-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; padding:16px 18px; }
.promo4 .gift{ position:relative; border:1px solid var(--line); border-radius:11px; background:#fff; padding:12px; text-align:center; cursor:pointer; transition:transform .15s, border-color .15s, box-shadow .15s; display:flex; flex-direction:column; }
.promo4 .gift:hover{ border-color:var(--line-2); transform:translateY(-2px); box-shadow:var(--p-shadow); }
.promo4 .tier.locked .gift{ cursor:not-allowed; opacity:.55; filter:grayscale(.7); }
.promo4 .tier.locked .gift:hover{ transform:none; border-color:var(--line); box-shadow:none; }
.promo4 .gift .thumb{ height:96px; border-radius:8px; margin-bottom:10px; background:var(--grey); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.promo4 .gift .thumb img{ max-height:100%; width:auto; object-fit:contain; }
.promo4 .gift .thumb .ph{ font-size:2rem; }
.promo4 .gift .gname{ font-size:.8rem; font-weight:600; line-height:1.28; min-height:2.3em; margin-bottom:5px; color:var(--p-text-dk); }
.promo4 .gift .gval{ font-size:.78rem; color:var(--p-muted); margin-top:auto; }
.promo4 .gift .gval s{ margin-right:5px; }
.promo4 .gift .gval .free{ color:var(--savings-deep); font-weight:700; }
.promo4 .gift .pick-ring{ position:absolute; inset:-1px; border-radius:11px; border:2px solid var(--lp-savings); opacity:0; transition:.15s; pointer-events:none; box-shadow:0 0 0 4px rgba(164,208,7,.18); }
.promo4 .gift.selected .pick-ring{ opacity:1; }
.promo4 .gift .check{ position:absolute; top:9px; right:9px; width:22px; height:22px; border-radius:50%; background:var(--lp-savings); color:var(--lp-savings-ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem; opacity:0; transform:scale(.6); transition:.15s; }
.promo4 .gift.selected .check{ opacity:1; transform:scale(1); }
.promo4 .locked-note{ padding:0 18px 16px; font-size:.82rem; color:var(--p-muted); display:flex; align-items:center; gap:8px; }
.promo4 .locked-note b{ color:var(--red); }

/* ============ SECTION BACKGROUND RHYTHM ============ */
/* Dark hero (fixed) -> off-white -> white -> aliceblue. Each promo section steps
   to a different LIGHT tone so the eye separates them; green is never a surface
   (savings info only), and card interiors stay white on every band.
   (see CURSOR_cards_and_backgrounds_v4.md) */
.promo4 .giftbanner{ background:#f8fafc; }        /* 1: free gifts showcase */
.promo4 .bundles{ background:#ffffff; }           /* 2: top package deals   */
.promo4 #grid{ background:aliceblue; }             /* 3: popular picks / grid */
.promo4 #ladder{ background:#ffffff; }             /* full gift picker below  */

/* ============ GIFT HIGHLIGHT BANNER (above-the-fold teaser) ============ */
.promo4 .giftbanner{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.promo4 .gb-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:18px; }
.promo4 .gb-kicker{ font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--savings-deep); margin-bottom:6px; }
.promo4 .gb-head h2{ font-size:26px !important; font-weight:800 !important; margin:0 !important; color:var(--p-text-dk) !important; line-height:1.1; }
.promo4 .gb-sub{ font-size:.92rem; color:var(--p-muted); margin:6px 0 0; max-width:52ch; }
/* See-all is an ACTION -> blue (outline that fills on hover). */
.promo4 .gb-cta{ flex-shrink:0; font-weight:700; font-size:.88rem; background:transparent; color:var(--lp-action); border:1px solid var(--lp-action); border-radius:10px; padding:11px 18px; text-decoration:none; white-space:nowrap; transition:background .15s, color .15s; }
.promo4 .gb-cta:hover{ background:var(--lp-action); color:#fff; }
/* G1 (value-first): big image, retail price on an off-black corner flag, big
   green FREE at the bottom, product name demoted to a caption. No strikethrough,
   no "unlocks at" tag. Reads as "this is a $74.99 item -> it's FREE." */
.promo4 .gb-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.promo4 .gbc{ position:relative; border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, box-shadow .2s, transform .2s; }
.promo4 .gbc:hover{ border-color:var(--lp-action); transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,30,15,.10); }
.promo4 .gbc.unlocked{ border-color:var(--lp-savings); box-shadow:0 0 0 3px rgba(164,208,7,.16); }
.promo4 .gbc-flag{ position:absolute; top:0; left:0; z-index:2; background:var(--chip-dark); color:#fff; font-size:.82rem; font-weight:700; padding:5px 12px 6px 11px; border-bottom-right-radius:12px; font-variant-numeric:tabular-nums; }
.promo4 .gbc-flag .v{ color:#c7ccd6; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; margin-left:4px; }
.promo4 .gbc-img{ height:172px; background:#fff; display:flex; align-items:center; justify-content:center; padding:16px; }
.promo4 .gbc-img img{ max-width:100%; max-height:100%; width:auto; object-fit:contain; }
.promo4 .gbc-img .ph{ font-size:3.4rem; }
.promo4 .gbc-foot{ margin-top:auto; padding:13px 14px 15px; border-top:1px solid var(--line); text-align:center; }
.promo4 .gbc-free{ font-family:var(--p-display); font-weight:400; font-size:2rem; color:var(--savings-deep); line-height:.85; letter-spacing:1px; }
.promo4 .gbc-cap{ font-size:.75rem; color:var(--p-muted); margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:860px){ .promo4 .gb-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .promo4 .gb-cards{ grid-template-columns:repeat(2,1fr); gap:10px; } .promo4 .gb-head h2{ font-size:22px !important; } .promo4 .gbc-img{ height:132px; } }

/* ============ PACKAGE DEALS - A1 grouped bundle strip (savings-first) ============ */
/* Background set in the section-rhythm block above (white); no green surfaces. */
.promo4 .bundles{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.promo4 .bundles[hidden]{ display:none; }
.promo4 .bhead{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.promo4 .bhead .spark{ font-size:1.3rem; }
.promo4 .bhead h2{ font-size:22px !important; font-weight:800 !important; margin:0 !important; color:var(--p-text-dk) !important; }
.promo4 .bwhy{ font-size:.92rem; color:var(--p-muted); margin-bottom:20px; }
.promo4 .bwhy b{ color:var(--savings-deep); }

.promo4 .a1-group{ margin-bottom:22px; }
.promo4 .a1-group:last-child{ margin-bottom:0; }
.promo4 .a1-grouphead{ font-size:.82rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--p-text-dk); margin:0 0 12px; }
.promo4 .a1-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.promo4 .a1{ border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--p-shadow); }

/* 1) savings band - loudest element, spans the card top. Save = Bebas display. */
.promo4 .a1-savebanner{ background:var(--lp-savings); color:var(--lp-savings-ink); padding:9px 15px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.promo4 .a1-savebanner .big{ font-family:var(--p-display); font-weight:400; font-size:1.5rem; line-height:1; letter-spacing:.5px; }
.promo4 .a1-savebanner .pct{ font-weight:700; font-size:.8rem; margin-left:5px; }
.promo4 .a1-savebanner .unlocks{ font-size:.6rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:var(--chip-dark); color:#fff; padding:4px 9px; border-radius:6px; white-space:nowrap; }

/* 2) V1 dark title bar - makes the bundle NAME read as a banner/label (Bebas,
   white), visually distinct from the anchor product name below (UI font). */
.promo4 .a1-titlebar{ background:var(--chip-dark); color:#fff; padding:11px 15px; }
.promo4 .a1-titlebar .bn{ font-family:var(--p-display); font-weight:400; font-size:1.35rem; letter-spacing:.6px; line-height:1; color:#fff; }
.promo4 .a1-titlebar .why{ font-size:.76rem; color:#b8bdc7; margin-top:4px; }

/* 3) anchor row - image + name + price only (no brand line). Price = blue mono. */
.promo4 .a1-top{ display:flex; gap:12px; padding:13px 15px 12px; align-items:center; }
.promo4 .ico-sq{ border-radius:8px; background:var(--grey); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.promo4 .ico-sq img{ max-width:100%; max-height:100%; object-fit:contain; }
.promo4 .a1-hero-img{ width:60px; height:60px; font-size:1.7rem; }
.promo4 .a1-herometa{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.promo4 .a1-hname{ font-size:.9rem; font-weight:600; line-height:1.25; color:var(--p-text-dk); }
.promo4 .a1-hname a{ color:inherit; text-decoration:none; }
.promo4 .a1-hname a:hover{ text-decoration:underline; }
.promo4 .a1-hprice{ font-family:var(--p-mono); font-size:.78rem; color:var(--lp-action); margin-top:3px; }

/* 4) add-on rows - green "+", small thumb, name, price mono. Cap 2 + "+N more". */
.promo4 .a1-addons{ padding:0 15px 4px; }
.promo4 .a1-addon{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line-soft, var(--line)); }
.promo4 .a1-addon .plus{ color:var(--savings-deep); font-weight:800; font-size:1rem; flex-shrink:0; }
.promo4 .a1-addon .ico-sq{ width:30px; height:30px; font-size:.9rem; }
.promo4 .a1-aname{ flex:1; min-width:0; font-size:.78rem; color:var(--p-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.promo4 .a1-aprice{ font-family:var(--p-mono); font-size:.74rem; color:var(--p-muted); }
.promo4 .a1-more{ flex:1; min-width:0; font-size:.74rem; color:var(--p-muted); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 5) footer - bundle price (Bebas) + struck original, green "you save" line, CTA. */
.promo4 .a1-foot{ margin-top:auto; padding:13px 15px 15px; border-top:1px solid var(--line); }
.promo4 .a1-pricerow{ display:flex; align-items:baseline; gap:8px; margin-bottom:2px; }
.promo4 .a1-priceblock{ display:flex; align-items:baseline; gap:8px; }
.promo4 .a1-priceblock .now{ font-family:var(--p-display); font-weight:400; font-size:1.7rem; line-height:.85; color:var(--p-text-dk); }
.promo4 .a1-priceblock .was{ font-family:var(--p-mono); font-size:.78rem; color:var(--p-muted); text-decoration:line-through; }
.promo4 .a1-save{ font-size:.72rem; color:var(--savings-deep); font-weight:700; margin:2px 0 11px; }
.promo4 .a1-save .meta{ color:var(--p-muted); font-weight:400; }
/* ACTION = blue (matches the product-page "Update Cart" button). */
.promo4 .a1 .btn-primary{ width:100%; font-weight:700; font-size:.9rem; background:var(--lp-action); color:#fff; border:none; border-radius:10px; padding:12px; cursor:pointer; transition:background .15s; }
.promo4 .a1 .btn-primary:hover{ background:var(--lp-action-hover); }
.promo4 .a1 .btn-primary:disabled{ background:var(--grey); color:var(--p-muted); cursor:not-allowed; }
.promo4 .a1-sub{ font-size:.7rem; color:var(--p-muted); text-align:center; margin-top:7px; }

/* ============ B1 - in-grid bundle card (savings-first) ============ */
.promo4 .pgrid .p.pbundle{ border-color:rgba(164,208,7,.55); }
.promo4 .p.pbundle .pimg{ position:relative; display:flex; align-items:center; justify-content:center; }
.promo4 .p.pbundle .pimg .pb-emoji{ font-size:2.4rem; }
/* "Save $X" image tag — shared by in-grid bundles (B1) AND regular sale cards. */
.promo4 .pgrid .p .pb-savetag{ position:absolute; top:9px; right:9px; z-index:2; font-size:.82rem; font-weight:900; letter-spacing:.2px; background:var(--lp-savings); color:var(--lp-savings-ink); padding:5px 11px; border-radius:6px; line-height:1.15; }
.promo4 .p.pbundle .pb-name{ font-size:.86rem; font-weight:800; line-height:1.28; color:var(--p-text-dk); margin-bottom:4px; }
.promo4 .p.pbundle .pb-name a{ color:inherit; text-decoration:none; }
.promo4 .p.pbundle .pb-name a:hover{ text-decoration:underline; }
.promo4 .p.pbundle .pb-why{ font-size:.72rem; color:var(--p-muted); line-height:1.3; margin-bottom:8px; min-height:2.3em; }
.promo4 .p.pbundle .pb-addons{ border-top:1px dashed var(--line); margin:0 0 8px; padding-top:8px; display:flex; flex-direction:column; gap:6px; }
.promo4 .p.pbundle .pb-hd{ font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; color:var(--savings-deep); font-weight:800; }
.promo4 .p.pbundle .pb-ar{ display:flex; align-items:center; gap:7px; }
.promo4 .p.pbundle .pb-plus{ color:var(--savings-deep); font-weight:800; font-size:.9rem; flex-shrink:0; }
.promo4 .p.pbundle .pb-ico{ width:24px; height:24px; border-radius:6px; background:var(--grey); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; font-size:.75rem; }
.promo4 .p.pbundle .pb-ico img{ max-width:100%; max-height:100%; object-fit:contain; }
.promo4 .p.pbundle .pb-an{ flex:1; min-width:0; font-size:.71rem; color:var(--p-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.promo4 .p.pbundle .pb-ap{ font-size:.68rem; color:var(--p-muted); font-variant-numeric:tabular-nums; }
.promo4 .p.pbundle .pb-amore{ font-size:.68rem; color:var(--p-muted); font-style:italic; }
/* Savings-first price block — shared by in-grid bundles (B1) AND regular sale
   cards so the "You save" message reads identically across the whole grid. */
.promo4 .pgrid .p .pb-price{ margin-top:6px; }
.promo4 .pgrid .p.pbundle .pb-price{ margin-top:auto; } /* bundle: pin under the addon list */
.promo4 .pgrid .p .pb-saveline{ display:flex; align-items:baseline; gap:6px; margin-bottom:3px; }
.promo4 .pgrid .p .pb-savebig{ font-size:1.2rem; font-weight:900; color:var(--savings-deep); line-height:1; }
.promo4 .pgrid .p .pb-savepct{ font-size:.68rem; font-weight:800; color:var(--savings-deep); }
.promo4 .pgrid .p .pb-payline{ font-size:.72rem; color:var(--p-muted); }
.promo4 .pgrid .p .pb-payline .pb-now{ font-weight:700; color:var(--p-text); }
.promo4 .pgrid .p .pb-payline s{ color:var(--p-muted); }
.promo4 .p.pbundle .pb-add{ width:100%; font-weight:800; font-size:.8rem; background:var(--lp-action); color:#fff; border:none; border-radius:8px; padding:9px 12px; cursor:pointer; transition:background .15s; }
.promo4 .p.pbundle .pb-add:hover{ background:var(--lp-action-hover); }
.promo4 .p.pbundle .pb-add:disabled{ background:var(--grey); color:var(--p-muted); cursor:not-allowed; }
@media (max-width:600px){ .promo4 .a1-row{ grid-template-columns:1fr; } }

/* ============ GRID: "Unlocks gift" pill + ajax add button ============ */
/* Gift chip = off-black pill (gift context is NOT savings, and needs contrast). */
.promo4 .pgrid .p .fitpill{ position:absolute; top:9px; left:9px; font-size:.6rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; background:var(--chip-dark); color:#fff; padding:3px 8px; border-radius:6px; z-index:2; }
.promo4 .pgrid .p .pfoot{ padding:0 14px 14px; margin-top:auto; }
.promo4 .pgrid.list .p .pfoot{ align-self:flex-end; padding:14px; }
/* Plain-card ACTION = blue outline that fills on hover (same blue as bundles). */
.promo4 .pgrid .p .addcart{ display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; font-weight:700; font-size:.8rem; background:#fff; color:var(--lp-action); border:1px solid var(--lp-action); border-radius:8px; padding:9px 12px; transition:.15s; }
.promo4 .pgrid .p .addcart:hover{ background:var(--lp-action); color:#fff; border-color:var(--lp-action); }
.promo4 .pgrid .p .addcart.added{ background:rgba(57,104,186,.12); color:var(--lp-action); border-color:rgba(57,104,186,.5); }
/* Already in the cart -> inactive grey pill (mirrors bundle button :disabled). */
.promo4 .pgrid .p .addcart.incart,
.promo4 .pgrid .p .addcart:disabled{ background:var(--grey); color:var(--p-muted); border-color:var(--line); cursor:not-allowed; }
.promo4 .pgrid .p .addcart.incart:hover,
.promo4 .pgrid .p .addcart:disabled:hover{ background:var(--grey); color:var(--p-muted); border-color:var(--line); }

/* ============ SELECTION FOOTER ============ */
.promo4 .selbar{ position:fixed; left:0; right:0; bottom:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-top:1px solid var(--line); }
.promo4 .selbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 24px; flex-wrap:wrap; }
.promo4 .selbar .info{ display:flex; align-items:center; gap:13px; }
.promo4 .selbar .sthumb{ width:46px; height:46px; border-radius:8px; background:var(--grey); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:1.4rem; overflow:hidden; }
.promo4 .selbar .sthumb img{ max-height:100%; width:auto; object-fit:contain; }
.promo4 .selbar .stxt .l1{ font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; color:var(--p-muted); font-weight:700; }
.promo4 .selbar .stxt .l2{ font-weight:600; font-size:.92rem; color:var(--p-text-dk); }
.promo4 .selbar .stxt .l2 .free{ color:var(--savings-deep); margin-left:8px; font-weight:700; font-size:.82rem; }
.promo4 .selbar .stxt .l2 .sel-void{ text-decoration:line-through; color:var(--p-muted); }
.promo4 .selbar .stxt .l2 .sel-warn{ color:#c0392b; margin-left:8px; font-weight:700; font-size:.82rem; }
.promo4 .selbar .cta{ font-weight:700; font-size:.92rem; background:var(--lp-savings); color:var(--lp-savings-ink); border:none; border-radius:10px; padding:12px 24px; text-decoration:none; transition:filter .15s; }
.promo4 .selbar .cta:hover{ filter:brightness(1.05); }
.promo4 .selbar .cta.is-disabled{ background:var(--grey); color:var(--p-muted); pointer-events:none; }
/* All steps complete (item in cart + gift picked): pulse the checkout CTA. */
.promo4 .selbar .cta.is-ready{ animation:selCtaPulse 1.5s ease-in-out infinite; }
@keyframes selCtaPulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(164,208,7,.55); }
  50%{ transform:scale(1.045); box-shadow:0 0 0 10px rgba(164,208,7,0); }
}
@media (prefers-reduced-motion:reduce){ .promo4 .selbar .cta.is-ready{ animation:none; } }
/* Brief highlight on the tier we auto-scroll to after an add. */
.promo4 .tier.tier-flash{ animation:tierFlash 1.5s ease-out 1; }
@keyframes tierFlash{
  0%{ box-shadow:0 0 0 0 rgba(164,208,7,.0); }
  20%{ box-shadow:0 0 0 3px rgba(164,208,7,.65); }
  100%{ box-shadow:0 0 0 3px rgba(164,208,7,0); }
}

/* No bottom padding: the shared site footer follows directly (the old fixed
   selection bar is gone), so extra padding just left a white gap above it. */
.promo4{ padding-bottom:0; }

/* ============ AJAX TOAST ============ */
.promo4 .toast{ position:fixed; left:50%; bottom:92px; transform:translateX(-50%) translateY(20px); z-index:70; background:var(--p-text-dk); color:#fff; font-weight:700; font-size:.88rem; padding:11px 20px; border-radius:10px; box-shadow:0 8px 24px rgba(8,8,8,.35); opacity:0; transition:.25s; pointer-events:none; max-width:calc(100vw - 32px); }
.promo4 .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.promo4 .toast.ok{ background:#3d5300; }
.promo4 .toast.err{ background:var(--red); }

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  .promo4 .railbar .wrap{ flex-wrap:wrap; gap:12px; }
  .promo4 .rail-prog{ order:3; flex-basis:100%; }
}
@media (max-width:600px){
  .promo4 .tier-head{ flex-wrap:wrap; }
  .promo4 .tier-state{ order:3; width:100%; }
  .promo4 .selbar .wrap{ gap:10px; }
  .promo4 .selbar .cta{ padding:11px 16px; }
}

/* ============ SHORT-VIEWPORT COMPACT MODE ============ */
/* Gated on viewport HEIGHT, not width: wide-but-short laptop / landscape
   screens stack the sticky top rail AND the fixed bottom checkout bar, which
   together (with the header) eat ~30-40% of the viewport and push the gift
   cards' "FREE" + name off-screen. Under 720px tall — and >=768px wide so
   phones / portrait keep their existing layout untouched — we:
     1) merge the two sticky bars into ONE (cart + progress + Checkout),
     2) switch the gift cards to short horizontal tiles, and
     3) tighten the hero + section padding.
   The checkout <a> (#sel-checkout) is physically relocated into the rail by
   promo_page_v4.js (setupCompactMode); it keeps its id so all of renderSelbar's
   state toggles (.is-ready / .is-disabled) continue to work. */
@media (max-height:720px) and (min-width:768px){

  /* --- Change 1: single merged sticky bar --- */
  .promo4 .railbar .wrap{ gap:16px; padding:7px 20px; }
  .promo4 .rail-cart{ gap:9px; }
  .promo4 .rail-cart .ico{ width:30px; height:30px; font-size:1rem; }
  .promo4 .rail-cart .lbl{ font-size:.55rem; }
  .promo4 .rail-cart .amt{ font-size:1.15rem; }
  .promo4 .rail-msg{ font-size:.78rem; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .promo4 .rail-track{ height:5px; margin-bottom:9px; }
  /* Hide tier price labels — the fill + nodes still convey progress. Labels
     reveal on hover; the JS also sets a title attr as a tap/hover fallback. */
  .promo4 .rail-node .tip{ opacity:0; pointer-events:none; transition:opacity .15s; }
  .promo4 .rail-node:hover .tip{ opacity:1; }
  /* The old ghost "shop to unlock" CTA is replaced by the merged Checkout. */
  .promo4 .rail-cta{ display:none; }
  /* Checkout, relocated from the bottom bar into the rail's right slot. */
  .promo4 .railbar .rail-checkout{
    flex-shrink:0; background:var(--lp-action); color:#fff; border:none;
    border-radius:9px; padding:9px 18px; font-weight:700; font-size:.85rem;
    line-height:1.1; white-space:nowrap; text-decoration:none; text-align:center;
    transition:background .15s, filter .15s;
  }
  .promo4 .railbar .rail-checkout:hover{ background:var(--lp-action-hover); }
  .promo4 .railbar .rail-checkout .sub{ display:block; font-size:.58rem; font-weight:500; opacity:.85; }
  .promo4 .railbar .rail-checkout.is-disabled{ background:var(--grey); color:var(--p-muted); pointer-events:none; }
  .promo4 .railbar .rail-checkout.is-ready{ animation:selCtaPulse 1.5s ease-in-out infinite; }
  /* The separate bottom bar is gone in compact mode (checkout moved up). */
  .promo4 .selbar{ display:none; }

  /* --- Change 2: horizontal free-gift cards --- */
  /* Switch the 4-up grid to a horizontally-scrolling row of short tiles:
     small image (with retail-price corner pill) on the left, big green FREE
     + 2-line name on the right. */
  .promo4 .gb-cards{ display:flex; grid-template-columns:none; gap:10px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .promo4 .gbc{ flex:0 0 250px; flex-direction:row; align-items:center; gap:11px; padding:10px; scroll-snap-align:start; }
  .promo4 .gbc:hover{ transform:none; }
  .promo4 .gbc-flag{ font-size:.56rem; font-weight:700; padding:2px 7px; border-bottom-right-radius:8px; }
  .promo4 .gbc-flag .v{ display:none; }
  .promo4 .gbc-img{ width:64px; height:64px; flex-shrink:0; padding:6px; border-radius:8px; background:var(--grey); }
  .promo4 .gbc-img .ph{ font-size:2rem; }
  .promo4 .gbc-foot{ margin-top:0; padding:0; border-top:none; text-align:left; min-width:0; flex:1; }
  .promo4 .gbc-free{ font-size:1.5rem; line-height:.9; }
  .promo4 .gbc-cap{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:3px; line-height:1.2; }

  /* --- Change 3: tighten hero + section padding --- */
  .promo4.promo2 .hero .wrap{ min-height:0; }
  .promo4.promo2 .hero .copy{ padding:20px 44px; }
  .promo4.promo2 .hero h1{ font-size:clamp(24px,3vw,34px) !important; margin:0 0 8px !important; }
  .promo4.promo2 .hero p{ margin:0 0 14px !important; }
  .promo4.promo2 section{ padding:20px 0; }
  .promo4 .gb-head{ margin-bottom:12px; }
  .promo4 .shead{ margin-bottom:14px; }
}