/* ====================================================================== BOXR × Moon Bundles — FULL brand styling (v6, real fonts) PASTE INTO: Online Store → Themes → Customize → Theme settings → Custom CSS (NOT Moon's box — that caps at ~500 chars). Leave Moon's own Custom CSS field EMPTY. Fonts are your theme's actual brand faces (already loaded site-wide): • Titling Gothic FB Cond (700) — display / headings / badges • Uncut Sans (500) — body / labels / prices / chips Black / white / signal-red. Sharp + engineered. ====================================================================== */ :root{ --boxr-ink:#0a0a0a; --boxr-muted:#8a8a8a; --boxr-line:#e4e4e4; --boxr-card:#f5f5f5; --boxr-red:#ff321b; --boxr-blue:#0220f1; --boxr-radius:2px; --boxr-display:"Titling Gothic FB Cond","Titling Gothic FB",sans-serif; --boxr-body:"Uncut Sans",sans-serif; } /* base font for anything unstyled in the widget */ .moonbundle-box{ padding:0 !important; margin:0 !important; font-family:var(--boxr-body) !important; } /* ---- header: match the "Color" / "Size" labels, left-aligned ---- target inner spans too (Moon nests the text), so the size actually lands */ .moonbundle-box .moonbundle-title, .moonbundle-title.moonbundle-title{ text-align:left !important; display:block !important; width:100% !important; align-self:flex-start !important; margin:0 0 14px !important; } .moonbundle-box .moonbundle-title.moonbundle-title.moonbundle-title, .moonbundle-box .moonbundle-title.moonbundle-title.moonbundle-title *{ font-family:var(--boxr-body) !important; color:rgba(0,0,0,.81) !important; font-style:normal !important; font-weight:700 !important; font-size:18px !important; line-height:17px !important; text-transform:none !important; letter-spacing:0 !important; } /* ---- timer: understated ---- */ .moonbundle-bundle-timer{ background:transparent !important; border:0 !important; } .moonbundle-timer-text{ font-family:var(--boxr-body) !important; color:var(--boxr-muted) !important; text-transform:uppercase !important; letter-spacing:.12em !important; font-size:11px !important; font-weight:600 !important; } .moonbundle-timer-value{ font-family:var(--boxr-body) !important; color:var(--boxr-ink) !important; font-weight:700 !important; } /* ====================================================================== OFFER ROWS ====================================================================== */ .moonbundle-option-wrapper{ border:0 !important; box-shadow:none !important; } .moonbundle-option{ position:relative !important; background:var(--boxr-card) !important; border:2px solid transparent !important; border-radius:var(--boxr-radius) !important; box-shadow:none !important; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .12s ease !important; } .moonbundle-option:hover{ border-color:#cfcfcf !important; transform:translateY(-1px) !important; } /* selected: white card, hard black frame + soft lift (no left edge) */ .moonbundle-option-active{ background:#ffffff !important; border:2px solid var(--boxr-ink) !important; box-shadow:0 6px 18px rgba(10,10,10,.08) !important; transform:none !important; } /* radio / selection icon */ .moonbundle-option-checkbox{ accent-color:var(--boxr-ink) !important; } /* The real flex row is .moonbundle-option-details (checkbox + col + price). Chips live in a SEPARATE .moonbundle-highlights sibling BELOW this row, so centering the details row lines the radio up with the title/price and the chips no longer drag it down. */ .moonbundle-option-details{ align-items:center !important; } /* thumbnail (image layouts only) */ .moonbundle-offer-img{ border-radius:var(--boxr-radius) !important; border:1px solid var(--boxr-line) !important; } /* ---- titles ---- */ .moonbundle-option-title{ font-family:var(--boxr-display) !important; color:var(--boxr-ink) !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.01em !important; } .moonbundle-option-subtitle{ font-family:var(--boxr-body) !important; color:var(--boxr-ink) !important; font-weight:600 !important; text-transform:uppercase !important; letter-spacing:.04em !important; font-size:11px !important; opacity:.55 !important; } /* clean "+" inside a condensed title — wrap it: Buy 3 + Get 2 */ .boxr-plus{ font-family:var(--boxr-body) !important; font-weight:700 !important; letter-spacing:0 !important; margin:0 .08em !important; } /* ====================================================================== BADGES ====================================================================== */ /* "Most Popular / Best Value" → BOXR blue */ .moonbundle-best-seller-box{ background:var(--boxr-blue) !important; border-radius:var(--boxr-radius) !important; } .moonbundle-best-seller-block{ font-family:var(--boxr-display) !important; color:#ffffff !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.08em !important; font-size:11px !important; } /* SAVE badge → signal-red engineered tag (compact) */ .moonbundle-label-inside{ font-family:var(--boxr-body) !important; background:var(--boxr-red) !important; color:#ffffff !important; font-weight:800 !important; font-size:11px !important; text-transform:uppercase !important; letter-spacing:.02em !important; line-height:1 !important; border:0 !important; border-radius:var(--boxr-radius) !important; padding:4px 8px !important; box-shadow:none !important; } /* ====================================================================== PRICES — current black, pops RED when selected; old struck grey ====================================================================== */ .moonbundle-option-price{ text-align:right !important; } .moonbundle-option-single-price{ font-family:var(--boxr-body) !important; color:var(--boxr-ink) !important; font-weight:700 !important; letter-spacing:-.01em !important; } .moonbundle-option-active .moonbundle-option-single-price{ color:var(--boxr-red) !important; } .moonbundle-option-old-price{ font-family:var(--boxr-body) !important; color:var(--boxr-muted) !important; text-decoration:line-through !important; font-weight:500 !important; display:block !important; margin-bottom:5px !important; } /* ====================================================================== VARIANTS + GIFTS ====================================================================== */ .moonbundle-variants-box, .moonbundle-option-selector{ border-radius:var(--boxr-radius) !important; } .moonbundle-gifts-stacked-section{ border-top:1px solid var(--boxr-line) !important; margin-top:10px !important; padding-top:12px !important; } .moonbundle-gift-title{ font-family:var(--boxr-display) !important; color:var(--boxr-ink) !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.05em !important; font-size:12px !important; } .moonbundle-gift-column{ background:var(--boxr-card) !important; border-radius:var(--boxr-radius) !important; } .moonbundle-gift-footer-text{ font-family:var(--boxr-body) !important; color:var(--boxr-muted) !important; font-weight:500 !important; } /* ====================================================================== COLOUR CHIPS — hidden by default, revealed on the SELECTED offer. Put ONLY the markup inside each Moon offer (no inline

Nieuws

VOLG ONS