/* ========================================================================== Best Meat UK Christmas Club: Brand theme Colour scheme follows the Christmas Club's own "VIP member" card artwork (deep red glow, falling white snow, gold headline text), rather than the main Best Meat UK site's black/red or the green/brown surfaces tried earlier on this pass: - Brand red #C8102E (ribbon/bauble red, kept from the main site) - Deep red night #35070B (surfaces: a dark wine red, echoing the VIP card's red vignette, instead of black/grey, brown or green) - Antique gold #C6862A (headline/accent colour, as on the VIP card) - White snow procedural speckle pattern, not a photo, so it tiles seamlessly and reads as "falling snow" rather than a soft blurred texture ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Bangers&family=Bowlby+One&family=Inter:wght@300;400;500;600;700;800&display=swap'); :root { --bm-red: #C8102E; --bm-red-deep: #7B0A1F; --bm-red-soft: #E63B52; --bm-black: #141414; --bm-charcoal: #2A2A2A; --bm-cream: #F4ECD8; --bm-parchment: #FBF7EE; --bm-grey-100: #F5F2EC; --bm-grey-200: #E5E0D6; --bm-grey-400: #9A9388; --bm-grey-600: #5C564C; --bm-success: #2F855A; /* Dark surfaces: deep wine-red, matching the Christmas Club's VIP card artwork, rather than the neutral black/grey, warm brown, or evergreen tried at earlier points on this pass. */ --bm-surface-deep: #22040A; --bm-surface: #350710; --bm-surface-raised: #440A15; --bm-ink-on-dark: #FBF7EE; --bm-ink-on-dark-muted: rgba(251, 247, 238, 0.72); --bm-border-on-dark: rgba(255, 255, 255, 0.08); --bm-shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06), 0 1px 3px rgba(20, 20, 20, 0.08); --bm-shadow-md: 0 4px 12px rgba(20, 20, 20, 0.08), 0 2px 4px rgba(20, 20, 20, 0.06); --bm-shadow-lg: 0 12px 32px rgba(20, 20, 20, 0.16), 0 4px 8px rgba(20, 20, 20, 0.08); --bm-shadow-red: 0 8px 24px rgba(200, 16, 46, 0.28); --bm-radius-sm: 6px; --bm-radius-md: 12px; --bm-radius-lg: 18px; --bm-radius-xl: 28px; --bm-font-display: 'Bowlby One', 'Anton', 'Bebas Neue', Impact, sans-serif; --bm-font-display-condensed: 'Anton', 'Bebas Neue', Impact, sans-serif; --bm-font-accent: 'Bangers', 'Bowlby One', Impact, sans-serif; --bm-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* Christmas Club accent: colour-sampled from the gift/bauble photo used in the hero. Warmed back up slightly after the first mute pass felt flat rather than festive. */ --bm-gold: #BC8A2E; --bm-gold-soft: #DDB666; --bm-gold-deep: #86611C; --bm-pine: #4A5D42; --bm-pine-deep: #33422E; --bm-topbar-green: #17331F; /* "Success" buttons (Add to Cart, Checkout etc.) use the same deep green as the topbar, so the two tie together instead of being two different greens. */ --bm-btn-green: var(--bm-topbar-green); --bm-btn-green-deep: #0E2415; /* kept as aliases so the rest of the sheet reads naturally; both now point at gold, not green */ --bm-xmas-green: var(--bm-gold); --bm-xmas-green-deep: var(--bm-gold-deep); --bm-xmas-green-soft: var(--bm-gold-soft); } /* ---------- Base ---------- Body is dark by default, matching the Best Meat UK hybrid theme. Form-heavy pages (cart, checkout, account) opt back into a light reading surface via the `.surface-light` class on . */ html { background-color: var(--bm-surface-deep); } /* Deep red vignette + procedurally-drawn falling snow (not a photo, just a few tiled dot layers at different scales/opacities) as the page's own background, echoing the Christmas Club's VIP member card artwork. This is plain background-image layers on body itself, so it's guaranteed to sit behind body's real content (backgrounds always paint behind an element's own children, no z-index/stacking involved, unlike the fixed-overlay approaches tried earlier), tiles with no seams since it's pure gradients rather than a photo, and doesn't need a blend-mode that would otherwise muddy the colours. background-attachment: fixed keeps it from scrolling with the page. */ body { background-color: var(--bm-surface); background-image: radial-gradient(circle, rgba(255,255,255,0.95) 1px, transparent 1.6px), radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 1.5px), radial-gradient(circle, rgba(255,255,255,0.55) 1.5px, transparent 2.2px), radial-gradient(ellipse at 50% 0%, #6B1017 0%, #43090F 45%, #1C0308 100%); background-size: 140px 140px, 90px 90px, 220px 220px, cover; background-position: 0 0, 45px 70px, 110px 20px, center top; background-repeat: repeat, repeat, repeat, no-repeat; background-attachment: fixed; color: var(--bm-ink-on-dark); } body { font-family: var(--bm-font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.surface-light { background-color: var(--bm-parchment); color: var(--bm-black); } h1, h2, h3, h4, h5, h6 { font-family: var(--bm-font-display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--bm-ink-on-dark); margin-bottom: 0.75rem; font-weight: 400; } body.surface-light h1, body.surface-light h2, body.surface-light h3, body.surface-light h4, body.surface-light h5, body.surface-light h6 { color: var(--bm-black); } h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.05; } h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.1; } h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); } h4 { font-size: 1.25rem; } p { color: var(--bm-ink-on-dark-muted); } body.surface-light p { color: var(--bm-charcoal); } a { color: var(--bm-red-soft); transition: color 0.18s ease; } a:hover { color: #fff; text-decoration: none; } body.surface-light a { color: var(--bm-red); } body.surface-light a:hover { color: var(--bm-red-deep); } sup { color: var(--bm-red); } /* ---------- Buttons (generic) ---------- */ /* This project's vendored bootstrap.css carries an old glossy-button theme that sets `background-image: linear-gradient(...)` on every .btn-* class (success, primary, danger, warning, dark, secondary). Setting only `background-color` below never clears that separate property, so the gradient keeps painting over it regardless of colour. Reset it here, on the same .btn selector these rules key off, so every button class is covered in one place. */ .btn { background-image: none; border-radius: 8px; font-weight: 600; letter-spacing: 0.02em; padding: 0.65rem 1.5rem; transition: all 0.18s ease; border: none; } /* Gold, matching the topbar's gift/truck icons, rather than red (red is already doing a lot of work as the page background/price colour, and a red button on a red page had no contrast). Text goes dark for readability on the lighter gold fill. `background:` (the shorthand) is used rather than `background-color:` on every rule below, including the :hover states, specifically because it resets `background-image` to `none` as part of the shorthand, and the bootstrap.css gradient-image bug above binds separately to `:hover` compound selectors (e.g. `.btn-success:hover`) at higher specificity than the single `.btn { background-image: none; }` reset can reach, so each hover rule needs its own reset too, not just the base state. */ .btn-primary, .btn-danger { background: var(--bm-gold); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); box-shadow: 0 8px 24px rgba(188, 138, 46, 0.35); } .btn-primary:hover, .btn-danger:hover { background: var(--bm-gold-deep); color: #fff; transform: translateY(-1px); } .btn-dark, .btn-secondary { background: var(--bm-black); color: #fff; } .btn-dark:hover, .btn-secondary:hover { background: var(--bm-charcoal); color: #fff; } .btn-success { background: var(--bm-btn-green); color: #fff; border: 2px solid var(--bm-gold); } .btn-success:hover { background: var(--bm-btn-green-deep); color: #fff; border-color: var(--bm-gold); transform: translateY(-1px); } .btn-outline-light { border: 2px solid rgba(255,255,255,0.85); color: #fff; background: transparent; } .btn-outline-light:hover { background: #fff; color: var(--bm-red); } button:disabled, button[disabled] { background-color: var(--bm-grey-200) !important; color: var(--bm-grey-400) !important; border: none !important; box-shadow: none !important; cursor: not-allowed; transform: none !important; } /* ========================================================================== Top announcement strip: festive red/green gradient ========================================================================== */ .topbar { background: var(--bm-topbar-green); border-bottom: 1px solid rgba(188, 138, 46, 0.35); color: #fff; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.5rem 0; position: fixed; top: 0; left: 0; right: 0; z-index: 1031; } .topbar .topbar-msg { color: rgba(255, 255, 255, 0.95); } .topbar .topbar-msg i { color: var(--bm-gold); } @media (max-width: 991px) { .topbar { font-size: 0.68rem; letter-spacing: 0.03em; padding: 0.4rem 0; } .topbar .topbar-msg { white-space: nowrap; } .topbar > .container { justify-content: center !important; } } /* Body padding compensates for the fixed top bars so content isn't hidden */ body { padding-top: 110px; /* topbar (~32px) + mobile navbar (~78px) */ } @media (min-width: 992px) { body { padding-top: 130px; } /* topbar + desktop navbar with larger logo */ } /* Sticky footer: on a short page (e.g. the deal alert unsubscribe page) with a tall viewport, this keeps the footer pinned to the bottom of the screen instead of floating partway down with bare background below it. The fixed topbar/navbar are unaffected since position:fixed takes them out of flow. */ body { display: flex; flex-direction: column; min-height: 100vh; } .site-main { flex: 1 0 auto; } .footer-section-space { flex-shrink: 0; } /* ========================================================================== Main navbar: near-black with a red cast, not flat neutral black, so this site doesn't read as a straight re-skin of the main Best Meat UK navbar ========================================================================== */ .navbar.bmuk-navbar, .navbar.bmuk-navbar.navbar-dark.bg-dark { background: #15040A !important; border-bottom: 3px solid var(--bm-gold); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); padding: 0.25rem 0; position: fixed !important; top: 32px; /* sits under the .topbar */ left: 0; right: 0; z-index: 1030; } .bmuk-navbar .navbar-brand { padding: 0; margin-right: 2rem; display: flex; align-items: center; } .bmuk-navbar .navbar-brand img { max-height: 72px; transition: transform 0.18s ease; filter: none; display: block; } @media (min-width: 992px) { .bmuk-navbar .navbar-brand img { max-height: 88px; } } .bmuk-navbar .navbar-brand:hover img { transform: scale(1.04); } .bmuk-navbar .navbar-nav .nav-link { color: #ffffff !important; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.6rem 1rem !important; position: relative; transition: color 0.18s ease; } .bmuk-navbar .navbar-nav .nav-link::after { content: ''; position: absolute; left: 1rem; right: 1rem; bottom: 0.3rem; height: 2px; background: var(--bm-xmas-green); transform: scaleX(0); transform-origin: center; transition: transform 0.22s ease; } .bmuk-navbar .navbar-nav .nav-link:hover { color: var(--bm-red-soft) !important; } .bmuk-navbar .navbar-nav .nav-link:hover::after { transform: scaleX(1); } .bmuk-navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.25); background: transparent; } .bmuk-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E"); } #cartTotal .nav-link { background: var(--bm-red); color: #fff !important; border-radius: 999px; padding: 0.55rem 1.1rem !important; margin-left: 0.5rem; font-weight: 700; box-shadow: var(--bm-shadow-red); text-transform: uppercase; letter-spacing: 0.04em; } #cartTotal .nav-link::after { display: none; } #cartTotal .nav-link:hover { background: var(--bm-red-deep); color: #fff !important; } #cartTotal .badge { background: #fff; color: var(--bm-red); font-weight: 700; margin-left: 0.25rem; } /* Mobile: open hamburger menu shouldn't push the page; let it overlay instead */ @media (max-width: 991.98px) { .navbar.bmuk-navbar .navbar-collapse { position: absolute; top: 100%; left: 0; right: 0; background: #000; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 3px solid var(--bm-xmas-green); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); padding: 0.5rem 1rem 1rem; max-height: calc(100vh - 110px); overflow-y: auto; } } /* ========================================================================== Hero / banner: lets the gifts/bauble photo actually read, with just enough of a warm (not green) vignette at the edges for text contrast ========================================================================== */ .woodback { background-color: #241B12 !important; background-image: linear-gradient(180deg, rgba(20, 14, 8, 0.25) 0%, rgba(20, 14, 8, 0.15) 45%, rgba(20, 14, 8, 0.55) 100%), radial-gradient(ellipse at center, rgba(20, 14, 8, 0) 40%, rgba(20, 14, 8, 0.5) 100%), url('../images/present-background.jpg') !important; background-size: cover !important; background-position: center !important; color: #fff; width: 100%; padding: 2rem 1.25rem 2.25rem; text-align: center; position: relative; overflow: hidden; border-bottom: 4px solid var(--bm-gold); } @media (min-width: 768px) { .woodback { padding: 2.5rem 1.25rem 2.75rem; } } .woodback > * { position: relative; z-index: 1; } .woodback h1 { display: block; color: #fff; text-shadow: 0 3px 18px rgba(0,0,0,0.55); font-size: clamp(2.5rem, 6vw, 4.75rem); margin: 0 auto 0; max-width: 900px; } .woodback h1::after { content: ''; display: block; width: 80px; height: 4px; background: var(--bm-xmas-green); margin: 1rem auto 0; border-radius: 2px; } .woodback .lede { margin-top: 1.25rem; font-size: 1.1rem; color: rgba(255,255,255,0.85); max-width: 640px; margin-left: auto; margin-right: auto; } .woodback .pill { margin-bottom: 1.25rem; display: inline-block; } .pill--xmas { background: rgba(74, 93, 66, 0.4); border-color: rgba(74, 93, 66, 0.65); } /* USP strip under the hero */ .usp-strip { background: var(--bm-surface-deep); border-bottom: 1px solid var(--bm-border-on-dark); padding: 1.5rem 0; } .usp-strip .usp { display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-weight: 700; color: var(--bm-ink-on-dark); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; } .usp-strip .usp i { color: var(--bm-xmas-green-soft); font-size: 1.5rem; } body.surface-light .usp-strip { background: var(--bm-surface-deep); } body.surface-light .usp-strip .usp { color: var(--bm-ink-on-dark); } /* ========================================================================== Account page tabs (My Account): Bootstrap's default light nav-tabs otherwise renders unstyled against the dark theme ========================================================================== */ .nav-tabs { justify-content: center; border-bottom: 2px solid var(--bm-border-on-dark); margin-top: 2.5rem; margin-bottom: 2rem; gap: 0.25rem; } .nav-tabs .nav-item { margin-bottom: -2px; } .nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--bm-ink-on-dark-muted); font-family: var(--bm-font-display-condensed); letter-spacing: 0.04em; font-size: 1rem; padding: 0.75rem 1.25rem; transition: color 0.18s ease, border-color 0.18s ease; } .nav-tabs .nav-link:hover { border-color: transparent; color: #fff; } .nav-tabs .nav-link.active { background: transparent; color: var(--bm-gold); border-color: var(--bm-gold); } /* ========================================================================== Cards (deal cards / product cards) ========================================================================== */ .card { border: 1px solid var(--bm-border-on-dark); background: var(--bm-surface-raised); color: var(--bm-ink-on-dark); border-radius: var(--bm-radius-lg); padding: 0; overflow: hidden; width: 100%; max-width: none; height: 100%; margin: 0 0 1.5rem; text-align: left; box-shadow: var(--bm-shadow-lg); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; display: flex; flex-direction: column; position: relative; } body.surface-light .card { border-color: var(--bm-grey-200); background: #fff; color: var(--bm-black); box-shadow: var(--bm-shadow-sm); } .row > [class*="col-"] > .card { height: 100%; } .row > [class*="col-"]:has(> .card) { display: flex; margin-bottom: 1rem; } .card > p:last-child { margin-top: auto; margin-bottom: 0; } .card > p:last-child > button { margin: 0; } .card:hover { transform: translateY(-4px); box-shadow: var(--bm-shadow-lg); border-color: var(--bm-xmas-green); } .card > img, .card img:first-of-type, .card-media > img { width: 100%; height: 220px; object-fit: cover; border-bottom: 1px solid var(--bm-border-on-dark); display: block; } body.surface-light .card > img, body.surface-light .card img:first-of-type, body.surface-light .card-media > img { border-bottom-color: var(--bm-grey-200); } /* ========================================================================== Deal card image wrapper (The Christmas Club deals API doesn't return a reliable in-stock signal for the deal list, so there's no out-of-stock ribbon/state here.) ========================================================================== */ .card-media { position: relative; width: 100%; } .card h1, .card h2, .card h3 { font-size: 1.35rem; margin: 1rem 1.25rem 0.5rem; color: var(--bm-ink-on-dark); letter-spacing: 0.01em; } body.surface-light .card h1, body.surface-light .card h2, body.surface-light .card h3 { color: var(--bm-black); } .card p { margin: 0 1.25rem 0.75rem; color: var(--bm-ink-on-dark-muted); font-size: 0.95rem; } body.surface-light .card p { color: var(--bm-grey-600); } .card p.price { color: var(--bm-red); font-weight: 700; font-size: 1.6rem; font-family: var(--bm-font-display); letter-spacing: 0.02em; margin-top: 0.25rem; margin-bottom: 0.5rem; } .card button, .cart-button { border: none; outline: none; padding: 0.85rem 1rem; color: #fff; background: var(--bm-red); text-align: center; cursor: pointer; width: 100%; font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 0; margin-top: auto; transition: background-color 0.18s ease, transform 0.18s ease; } .card button:hover, .cart-button:hover { background: var(--bm-red-deep); opacity: 1; } .card a { color: #fff; width: 100%; display: flex; justify-content: center; align-items: center; } .card p:has(> button) { margin: 0; } .card-land { border: 1px solid var(--bm-border-on-dark); border-radius: var(--bm-radius-lg); background: var(--bm-surface-raised); color: var(--bm-ink-on-dark); max-width: 1000px; margin: 0 auto 1.25rem; padding: 1.25rem; box-shadow: var(--bm-shadow-lg); } .card-land h4 { color: var(--bm-ink-on-dark); } .card-land p { color: var(--bm-ink-on-dark-muted); } body.surface-light .card-land { border-color: var(--bm-grey-200); background: #fff; color: var(--bm-black); box-shadow: var(--bm-shadow-sm); } body.surface-light .card-land h4 { color: var(--bm-black); } body.surface-light .card-land p { color: var(--bm-grey-600); } .card-header { background: var(--bm-surface-deep); color: var(--bm-ink-on-dark); padding: 0.85rem 1rem; margin: -1.25rem -1.25rem 1rem; border-bottom: 3px solid var(--bm-xmas-green); border-top-left-radius: var(--bm-radius-lg); border-top-right-radius: var(--bm-radius-lg); font-family: var(--bm-font-display); letter-spacing: 0.04em; text-transform: uppercase; } body.surface-light .card-header { background: var(--bm-cream); color: var(--bm-black); } .card-land-login, .card-land-login-auto { box-shadow: var(--bm-shadow-md); max-width: 1000px; margin: 0 auto 1.25rem; padding: 1.5rem; background: #fff; border-radius: var(--bm-radius-lg); border: 1px solid var(--bm-grey-200); height: auto; } .orderimage { text-align: center; max-height: 170px; } .orderrow { height: auto; min-height: 180px; } /* ---------- Generic price utility ---------- */ .price { color: var(--bm-red); font-weight: 700; font-family: var(--bm-font-display); font-size: 1.5rem; letter-spacing: 0.02em; } /* ---------- Alerts ---------- */ .alert { padding: 0.75rem 1rem; font-size: 0.9rem; margin: 0.75rem 0; border-radius: var(--bm-radius-sm); border: 1px solid transparent; } .alert-info { background: #EAF5FB; color: #1B5E7E; border-color: #BFE0F0; } .alert-success { background: #E8F5EE; color: var(--bm-xmas-green); border-color: #B7DFC7; } .alert-danger { background: #FDE8EB; color: var(--bm-red-deep); border-color: #F4B8C0; } .btn-100 { width: 100%; } .btn-45 { width: 45%; } /* ========================================================================== Card selectors (variant chips, addons) ========================================================================== */ .card-selector { max-width: 350px; margin: 0 auto; text-align: center; } .card-selector input[type="radio"], .card-selector input[type="checkbox"], .card input[type="radio"] { opacity: 0; position: fixed; width: 0; } .card-selector label { display: inline-block; background-color: var(--bm-grey-100); border: 2px solid var(--bm-grey-200); padding: 0.55rem 1rem; border-radius: 999px; font-weight: 500; cursor: pointer; transition: all 0.18s ease; } .card-selector label:hover { background-color: #fff; border-color: var(--bm-red); color: var(--bm-red); } .card-selector input[type="radio"]:checked + label, .card-selector input[type="checkbox"]:checked + label, .card input[type="radio"]:checked + label { background-color: var(--bm-red); color: #fff; border-color: var(--bm-red); } /* ========================================================================== Snow / seasonal texture (kept available) ========================================================================== */ .snow { background-image: url('../images/snowflakes.jpg'); background: repeat; } /* ========================================================================== Modals ========================================================================== */ .modal-content { border: none; border-radius: var(--bm-radius-lg); overflow: hidden; box-shadow: var(--bm-shadow-lg); background: var(--bm-surface-raised); color: var(--bm-ink-on-dark); } .modal-header { background: linear-gradient(135deg, var(--bm-xmas-green) 0%, var(--bm-xmas-green-deep) 100%); color: #fff; border-bottom: none; font-family: var(--bm-font-display); letter-spacing: 0.04em; text-transform: uppercase; } .modal-title { color: #fff; } .modal-body { background: var(--bm-surface-raised); color: var(--bm-ink-on-dark); padding: 1.5rem; } .modal-body p { color: var(--bm-ink-on-dark); } .modal-body .img-thumbnail { background: var(--bm-surface-deep); border-color: var(--bm-border-on-dark); } .modal-header .close { color: #fff; opacity: 0.9; text-shadow: none; } .modal-header .close:hover { opacity: 1; } .close { color: #fff; } /* Darker backdrop than Bootstrap's default 0.5, so the modal reads clearly against the page behind it instead of a half-visible page showing through. */ .modal-backdrop.show { opacity: 0.75; } .btn-warning { background: transparent; color: var(--bm-ink-on-dark); border: 2px solid rgba(255, 255, 255, 0.35); box-shadow: none; } .btn-warning:hover { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: #fff; } /* ========================================================================== Carousel (specials) ========================================================================== */ .carousel { border-radius: var(--bm-radius-lg); overflow: hidden; box-shadow: var(--bm-shadow-md); background: var(--bm-black); } .carousel-item img { max-height: 480px; object-fit: cover; } .carousel-caption { text-shadow: 0 2px 6px rgba(0,0,0,0.6); background: transparent; bottom: 1.5rem; padding: 0; } .carousel-caption > div { background: linear-gradient(135deg, rgba(20,20,20,0.85) 0%, rgba(123,10,31,0.85) 100%) !important; border-radius: var(--bm-radius-md) !important; padding: 1rem 1.25rem !important; display: inline-block; border: 1px solid rgba(255,255,255,0.1); } .carousel-caption h5 { text-shadow: 0 2px 6px rgba(0,0,0,0.5); font-family: var(--bm-font-display); font-size: 1.5rem; letter-spacing: 0.04em; margin-bottom: 0.25rem; color: #fff; } .carousel-caption p { color: #fff; margin-bottom: 0; font-size: 1.1rem; font-weight: 600; } .carousel-caption button { border: none; outline: 0; padding: 0.65rem 1.5rem; color: #fff; background-color: var(--bm-red); text-align: center; cursor: pointer; width: auto; font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px; margin-top: 0.75rem; text-shadow: none; box-shadow: var(--bm-shadow-red); transition: background-color 0.18s ease, transform 0.18s ease; } .carousel-caption button:hover { background-color: var(--bm-red-deep); transform: translateY(-1px); } .carousel-caption a { color: #fff; display: inline-flex; justify-content: center; align-items: center; } .carousel-indicators li { background-color: rgba(255,255,255,0.55); border-radius: 50%; width: 10px; height: 10px; } .carousel-indicators .active { background-color: var(--bm-xmas-green-soft); } .carousel-control-prev-icon, .carousel-control-next-icon { background-color: rgba(0,0,0,0.45); border-radius: 50%; padding: 1.25rem; background-size: 60% 60%; } /* ========================================================================== Category grid ========================================================================== */ ul.category { list-style: none; padding-left: 0; display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; } ul.category li { margin-top: 0; } .category-list { background-color: var(--bm-grey-200); height: 220px; background-position: center; background-repeat: no-repeat; background-size: cover; text-align: center; padding: 0; border-radius: var(--bm-radius-lg); position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; box-shadow: var(--bm-shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: pointer; } .category-list::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,0) 30%, rgba(20,20,20,0.85) 100%); transition: opacity 0.25s ease; } .category-list:hover { transform: translateY(-3px); box-shadow: var(--bm-shadow-lg); } .category-list:hover::before { background: linear-gradient(180deg, rgba(123,10,31,0.15) 0%, rgba(20,20,20,0.92) 100%); } .category-list h3 { color: #fff !important; padding: 0.85rem 1rem !important; width: auto !important; max-width: 90% !important; margin: 0 auto 1rem !important; background: transparent !important; background-color: transparent !important; border-radius: 0 !important; display: inline-block !important; position: relative; z-index: 1; font-family: var(--bm-font-display); letter-spacing: 0.04em; text-shadow: 0 2px 8px rgba(0,0,0,0.7); font-size: 1.5rem; } .category-list h3 a, .category-list h3 a:link, .category-list h3 a:visited { color: #fff !important; display: inline-flex; align-items: center; gap: 0.5rem; } .category-list h3 a::after { content: '\2192'; display: inline-block; transition: transform 0.22s ease; } .category-list:hover h3 a::after { transform: translateX(4px); } @media (min-width: 576px) { ul.category { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .category-list { height: 320px; } .category-list h3 { font-size: 2rem; margin-bottom: 1.5rem !important; } } @media (min-width: 992px) { ul.category { grid-template-columns: repeat(3, 1fr); } .category-list { height: 340px; } } /* ========================================================================== Footer ========================================================================== */ .footer-bg { background: linear-gradient(180deg, #350710 0%, #12030A 100%); position: relative; margin-top: 3rem; } .footer-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--bm-red) 0%, var(--bm-gold) 35%, var(--bm-xmas-green) 65%, var(--bm-red) 100%); } .footer-section-space { padding: 4rem 0 2rem; } .footer_common h3 { color: #fff; font-size: 1rem; letter-spacing: 0.1em; margin-bottom: 1rem; position: relative; padding-bottom: 0.6rem; } .footer_common h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; background: var(--bm-xmas-green-soft); } .footer_common p { color: rgba(255, 255, 255, 0.78); font-size: 0.92rem; margin-bottom: 0.5rem; } .footer_common .div-center img { max-height: 110px; } .footer_common .div-center p, .footer_common .div-center h3 { text-align: left; } .footer_common .footer-br { border-bottom: 1px solid rgba(255, 255, 255, 0.1); width: 100%; margin: 0 auto; } .footer_common .footer-br-tb { margin-top: 2rem; margin-bottom: 2rem; } .footer-p-bottom { margin-bottom: 0.4rem; } a.white { color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 0.92rem; font-weight: 400; transition: color 0.18s ease; display: inline-block; padding: 0.15rem 0; } a.white:hover { color: #fff; text-decoration: none; padding-left: 4px; } a.back { color: #fff; } .white-text { color: #fff; } .footer_common .center.ls { color: rgba(255, 255, 255, 0.55); font-size: 0.82rem; } /* ========================================================================== Misc ========================================================================== */ .video-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0; margin-bottom: 1.5rem; border-radius: var(--bm-radius-md); } .video-responsive iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; border: 0; } ul.tree { list-style-image: url('https://res.cloudinary.com/dte0hcvcv/image/upload/v1541644942/christmas-tree.png'); margin: 1.25rem 0; } ul.gift { list-style-image: url('https://res.cloudinary.com/dte0hcvcv/image/upload/v1572911977/wrapped-gift.png'); margin: 1.25rem 0; } ul.santa { list-style-image: url('https://res.cloudinary.com/dte0hcvcv/image/upload/v1544306956/father-christmas.jpg'); margin: 1.25rem 0; } input[type="radio"] { margin-right: 0; padding: 10px; } /* Image zoom button (kept) */ @media (min-width: 401px) { .img-zoom-container { display: inline-block; position: relative; } .img-zoom-container button { display: none; } } @media (max-width: 400px) { .img-zoom-container { display: inline-block; position: relative; } .img-zoom-container button { position: absolute; width: 50px; height: 50px; bottom: 1em; right: 1em; background-color: var(--bm-red); border-radius: 50%; border: 2px solid #fff; color: #fff; padding: 0.65em; } } /* Bow-divider image separator (Christmas Club specific, kept as-is) */ .divider { margin-bottom: 1.5rem; margin-top: 0.5rem; text-align: center; } .divider img { max-width: 320px; width: 60%; opacity: 0.9; } /* Forms: subtle modernisation that doesn't break Bootstrap */ .form-control { border-radius: var(--bm-radius-sm); border: 1px solid var(--bm-grey-200); padding: 0.6rem 0.85rem; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .form-control:focus { border-color: var(--bm-red); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12); } /* Container breathing room */ .container { padding-left: 1.25rem; padding-right: 1.25rem; } /* Section utilities used by new home layout */ .section { padding: 3rem 0; } .section--raised { background: var(--bm-surface-raised); border-top: 1px solid var(--bm-border-on-dark); border-bottom: 1px solid var(--bm-border-on-dark); } body.surface-light .section--raised { background: var(--bm-cream); border-color: var(--bm-grey-200); } .section-title { text-align: center; margin-bottom: 2rem; position: relative; } .section-title h2 { display: inline-block; position: relative; padding-bottom: 0.75rem; } .section-title h2::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 60px; height: 3px; background: var(--bm-xmas-green-soft); border-radius: 2px; } .section-title p { color: var(--bm-ink-on-dark); font-size: 1.05rem; max-width: 600px; margin: 0.75rem auto 0; } body.surface-light .section-title p { color: var(--bm-grey-600); } /* Intro paragraph under a page hero (e.g. Deals index): bigger and centred so it doesn't get lost against the dark background */ .page-intro { text-align: center; font-size: 1.2rem; line-height: 1.6; color: var(--bm-ink-on-dark); max-width: 700px; margin: 1.75rem auto 2rem; } body.surface-light .page-intro { color: var(--bm-charcoal); } /* Tagline pill */ .pill { display: inline-block; background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; position: relative; z-index: 1; } /* ========================================================================== Deal page: CMS-authored description ========================================================================== */ .deal-description { white-space: pre-line; margin: 1rem 0 1.5rem; line-height: 1.5; } .deal-description p { margin: 0 0 0.75rem; } .deal-description p:last-child { margin-bottom: 0; } .deal-description ul, .deal-description ol { margin: 0 0 0.75rem 1.25rem; padding: 0; } .deal-description li { margin-bottom: 0.25rem; } .deal-description h2, .deal-description h3, .deal-description h4, .deal-description h5, .deal-description h6 { margin: 1rem 0 0.5rem; line-height: 1.25; } .deal-description a { text-decoration: underline; } /* ========================================================================== Deal page: "This Deal Includes" block ========================================================================== */ .deal-includes { max-width: 920px; margin: 2rem auto 2.5rem; padding: 1.75rem 1.25rem 0; background: var(--bm-surface-raised); border-radius: var(--bm-radius-xl); border: 1px solid var(--bm-border-on-dark); box-shadow: var(--bm-shadow-lg); overflow: hidden; } body.surface-light .deal-includes { background: var(--bm-parchment); border-color: var(--bm-grey-200); box-shadow: var(--bm-shadow-sm); } .deal-includes-title { text-align: center; font-family: var(--bm-font-display); font-size: clamp(1.4rem, 3vw, 1.85rem); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bm-ink-on-dark); margin: 0 0 0.5rem; position: relative; padding-bottom: 0.85rem; } body.surface-light .deal-includes-title { color: var(--bm-black); } .deal-includes-title::after { content: ''; display: block; width: 56px; height: 3px; background: var(--bm-xmas-green-soft); margin: 0.6rem auto 0; border-radius: 2px; } ul.products { list-style: none !important; list-style-image: none !important; padding: 0 !important; margin: 1.25rem 0 1.75rem !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; } ul.products li { background: var(--bm-surface-deep); border: 1px solid var(--bm-border-on-dark); border-left: 4px solid var(--bm-xmas-green); border-radius: var(--bm-radius-md); padding: 0.85rem 1rem 0.85rem 3rem; font-size: 0.98rem !important; font-weight: 600; color: var(--bm-ink-on-dark); box-shadow: var(--bm-shadow-sm); position: relative; line-height: 1.35; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; text-align: left; } body.surface-light ul.products li { background: #fff; border-color: var(--bm-grey-200); border-left-color: var(--bm-xmas-green); color: var(--bm-black); } ul.products li::before { content: "\2713"; position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; background: rgba(198, 134, 42, 0.15); color: var(--bm-xmas-green-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; line-height: 1; } ul.products li:hover { transform: translateY(-2px); box-shadow: var(--bm-shadow-md); border-left-color: var(--bm-xmas-green-deep); } /* Price banner that closes the include card */ .deal-price-banner { margin: 0 -1.25rem -0.01rem; padding: 1.1rem 1.25rem; background: linear-gradient(135deg, var(--bm-red) 0%, var(--bm-red-deep) 100%); color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .deal-price-label { font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; opacity: 0.9; } .deal-price-amount { font-family: var(--bm-font-display); font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: 0.04em; line-height: 1; text-shadow: 0 2px 6px rgba(0,0,0,0.18); } @media (min-width: 768px) { .deal-includes { padding: 2rem 1.75rem 0; } } /* ========================================================================== Auth forms (Register, Login, Forgot Password etc.) ========================================================================== */ .auth-form { max-width: 880px; margin: 2rem auto 3rem; } .auth-card { background: #fff; border: 1px solid var(--bm-grey-200); border-radius: var(--bm-radius-xl); box-shadow: var(--bm-shadow-md); padding: 1.75rem 1.5rem; overflow: hidden; } @media (min-width: 768px) { .auth-card { padding: 2.5rem 2.75rem; } } .auth-card-header { text-align: center; padding-bottom: 1.5rem; border-bottom: 1px solid var(--bm-grey-200); margin-bottom: 1.75rem; } .auth-card-header h2 { font-family: var(--bm-font-display); font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: 0.04em; margin-bottom: 0.5rem; color: var(--bm-black); } .auth-card-header p { color: var(--bm-grey-600); margin: 0; font-size: 0.98rem; } .form-section { margin-bottom: 2rem; } .form-section:last-of-type { margin-bottom: 1rem; } .form-section-title { font-family: var(--bm-font-display); font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bm-black); margin: 0 0 1.1rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--bm-cream); display: flex; align-items: center; gap: 0.75rem; } .form-section-title .step-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--bm-xmas-green); color: #fff; border-radius: 50%; font-family: var(--bm-font-body); font-size: 0.9rem; font-weight: 700; letter-spacing: 0; flex-shrink: 0; box-shadow: var(--bm-shadow-red); } /* Auth form labels: subtle uppercase */ .auth-card .form-group { margin-bottom: 1rem; } .auth-card label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bm-grey-600); margin-bottom: 0.35rem; } .auth-card .form-control { padding: 0.7rem 0.9rem; font-size: 0.98rem; } /* Address lookup highlighted box */ .address-lookup { background: var(--bm-cream); border: 1px dashed var(--bm-grey-200); border-radius: var(--bm-radius-md); padding: 1rem 1.1rem 1.1rem; margin-bottom: 1.5rem; } .address-lookup-label { font-family: var(--bm-font-display); font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bm-black); margin-bottom: 0.15rem; display: block; } .address-lookup .form-text { margin-top: 0; margin-bottom: 0.4rem; } .address-lookup .input-group .btn { border-radius: 0 var(--bm-radius-sm) var(--bm-radius-sm) 0; padding-left: 1.1rem; padding-right: 1.1rem; box-shadow: none; } .address-link { color: var(--bm-red); font-weight: 600; font-size: 0.9rem; cursor: pointer; text-decoration: none; } .address-link:hover { color: var(--bm-red-deep); text-decoration: underline; } /* Submit row */ .form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: center; padding-top: 1.25rem; border-top: 1px solid var(--bm-grey-200); margin-top: 1rem; } .btn-submit { min-width: 240px; } .btn-outline-dark { background: transparent; border: 2px solid var(--bm-black); color: var(--bm-black); font-weight: 600; } .btn-outline-dark:hover { background: var(--bm-black); color: #fff; } .btn-lg { padding: 0.85rem 1.75rem; font-size: 1rem; } .auth-footnote { text-align: center; margin: 1.5rem 0 0; color: var(--bm-grey-600); font-size: 0.92rem; } .auth-footnote a { color: var(--bm-red); font-weight: 600; } .auth-form > .alert:empty { display: none; } /* ========================================================================== Cart page ========================================================================== */ .cart-page { margin-top: 2rem; margin-bottom: 3rem; } .cart-item { display: grid; grid-template-columns: 140px 1fr auto; gap: 1.25rem; align-items: stretch; background: #fff; border: 1px solid var(--bm-grey-200); border-radius: var(--bm-radius-lg); box-shadow: var(--bm-shadow-sm); padding: 1rem 1.25rem; margin-bottom: 1rem; transition: box-shadow 0.18s ease, transform 0.18s ease; } .cart-item:hover { box-shadow: var(--bm-shadow-md); } @media (max-width: 575px) { .cart-item { grid-template-columns: 1fr; gap: 1rem; } } .cart-item-media img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--bm-radius-md); background: var(--bm-grey-100); } .cart-item-body { display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; } .cart-item-title { font-family: var(--bm-font-display); font-size: 1.4rem; margin: 0 0 0.25rem; letter-spacing: 0.02em; color: var(--bm-black); } .cart-item-title a { color: inherit; text-decoration: none; } .cart-item-title a:hover { color: var(--bm-red); } .cart-item-subtle { font-size: 0.88rem; color: var(--bm-grey-600); margin: 0; } .cart-item-extras { list-style: none; padding-left: 0; margin: 0 0 0.5rem; font-size: 0.88rem; color: var(--bm-grey-600); } .cart-item-extras li::before { content: "+ "; color: var(--bm-xmas-green); font-weight: 700; } .cart-item-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; } .cart-tag { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(198, 134, 42, 0.12); color: var(--bm-xmas-green-soft); padding: 0.25rem 0.65rem; border-radius: 999px; } .cart-tag-muted { background: var(--bm-grey-100); color: var(--bm-grey-600); } .cart-item-meta { margin-top: 0.5rem; } .cart-qty { font-size: 0.92rem; color: var(--bm-charcoal); } .cart-item-price { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0.25rem; min-width: 140px; text-align: right; } .cart-price-amount { font-family: var(--bm-font-display); font-size: 1.75rem; color: var(--bm-red); letter-spacing: 0.02em; line-height: 1; } .cart-price-detail { font-size: 0.82rem; color: var(--bm-grey-600); } .cart-remove-link { margin-top: 0.5rem; font-size: 0.82rem; font-weight: 600; color: var(--bm-grey-600); text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; } .cart-remove-link:hover { color: var(--bm-red); } /* ===== Order summary card (used on Cart + Checkout) ===== */ .summary-card { background: #fff; border: 1px solid var(--bm-grey-200); border-radius: var(--bm-radius-lg); box-shadow: var(--bm-shadow-md); padding: 1.5rem; overflow: hidden; } .summary-card-sticky { position: sticky; top: 140px; } @media (max-width: 991.98px) { .summary-card-sticky { position: static; } } .summary-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.85rem; border-bottom: 2px solid var(--bm-cream); margin-bottom: 1rem; } .summary-title { font-family: var(--bm-font-display); font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; color: var(--bm-black); } .summary-title i { color: var(--bm-xmas-green); margin-left: 0.4rem; } .summary-edit-link { font-size: 0.85rem; font-weight: 600; color: var(--bm-red); text-transform: uppercase; letter-spacing: 0.04em; } .summary-items { max-height: 360px; overflow-y: auto; margin-bottom: 1rem; padding-right: 0.25rem; } .summary-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px dashed var(--bm-grey-200); } .summary-line:last-child { border-bottom: none; } .summary-line-name, .summary-line-price { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.95rem; } .summary-line-name strong, .summary-line-price strong { color: var(--bm-black); font-weight: 600; } .summary-line-name small, .summary-line-price small { font-size: 0.78rem; color: var(--bm-grey-600); line-height: 1.3; } .summary-line-price { text-align: right; } .summary-row { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0; font-size: 0.95rem; color: var(--bm-charcoal); } .summary-total { border-top: 2px solid var(--bm-black); margin-top: 0.5rem; padding-top: 0.85rem; padding-bottom: 0.85rem; font-size: 1.1rem; color: var(--bm-black); } .summary-total strong, .summary-total span:last-child { font-family: var(--bm-font-display); font-size: 1.6rem; color: var(--bm-red); letter-spacing: 0.02em; } .btn-checkout { background: var(--bm-red); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.95rem 1.25rem; margin-top: 0.5rem; box-shadow: var(--bm-shadow-red); } .btn-checkout:hover { background: var(--bm-red-deep); color: #fff; transform: translateY(-1px); } .summary-trust { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bm-grey-200); } .summary-trust p { margin: 0.25rem 0; font-size: 0.85rem; color: var(--bm-grey-600); } .summary-trust i { color: var(--bm-xmas-green); width: 18px; text-align: center; margin-right: 0.5rem; } .summary-back-link { display: block; text-align: center; margin-top: 1rem; color: var(--bm-grey-600); font-size: 0.9rem; font-weight: 600; text-decoration: none; } .summary-back-link:hover { color: var(--bm-red); } /* Empty cart state */ .cart-empty { text-align: center; background: #fff; border: 1px solid var(--bm-grey-200); border-radius: var(--bm-radius-xl); box-shadow: var(--bm-shadow-sm); padding: 3.5rem 1.5rem; margin-top: 2rem; } .cart-empty-icon { width: 90px; height: 90px; margin: 0 auto 1rem; background: var(--bm-cream); color: var(--bm-red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; } .cart-empty h2 { font-family: var(--bm-font-display); letter-spacing: 0.04em; margin-bottom: 0.5rem; } .cart-empty p { color: var(--bm-grey-600); margin-bottom: 1.5rem; } /* ========================================================================== Checkout page ========================================================================== */ .checkout-page { margin-top: 2rem; margin-bottom: 3rem; } .delivery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem; } .delivery-option { margin: 0; position: relative; } .delivery-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .delivery-option label { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; background: #fff; border: 2px solid var(--bm-grey-200); border-radius: var(--bm-radius-md); padding: 1rem 2.5rem 1rem 1rem; font-weight: 600; font-size: 0.92rem; color: var(--bm-black); cursor: pointer; text-align: center; margin: 0; transition: all 0.18s ease; text-transform: none; letter-spacing: 0.02em; min-height: 72px; overflow: hidden; } .delivery-option label i { color: var(--bm-grey-400); transition: color 0.18s ease; } .delivery-option label:hover { border-color: var(--bm-red); color: var(--bm-red); transform: translateY(-1px); } .delivery-check { display: none; position: absolute; top: 0.5rem; right: 0.5rem; width: 24px; height: 24px; background: #22C55E; color: #fff; border: 2px solid #fff; border-radius: 50%; align-items: center; justify-content: center; font-size: 0.7rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); z-index: 1; } .delivery-check i, .delivery-option input[type="radio"]:checked + label .delivery-check i { color: #fff !important; } .delivery-option input[type="radio"]:checked + label { background: var(--bm-red); color: #fff; border-color: var(--bm-red); box-shadow: var(--bm-shadow-red), 0 0 0 4px rgba(200, 16, 46, 0.18); transform: translateY(-1px); } .delivery-option input[type="radio"]:checked + label i { color: #fff; } .delivery-option input[type="radio"]:checked + label .delivery-check { display: inline-flex; } .delivery-option input[type="radio"]:focus + label { outline: 3px solid rgba(200, 16, 46, 0.4); outline-offset: 2px; } .checkout-login-prompt { background: var(--bm-cream); border-left: 4px solid var(--bm-red); padding: 0.85rem 1rem; border-radius: var(--bm-radius-sm); margin-bottom: 1rem; font-size: 0.95rem; color: var(--bm-charcoal); } .checkout-login-prompt a { color: var(--bm-red); font-weight: 700; } .form-required-note { font-size: 0.82rem; color: var(--bm-grey-600); margin-bottom: 1rem; } .form-required-note .req { color: var(--bm-red); font-weight: 700; } /* ========================================================================== Cart + Checkout: dark surface overrides ========================================================================== */ body:not(.surface-light) .cart-item, body:not(.surface-light) .summary-card, body:not(.surface-light) .cart-empty { background: var(--bm-surface-raised); border-color: var(--bm-border-on-dark); color: var(--bm-ink-on-dark); box-shadow: var(--bm-shadow-lg); } body:not(.surface-light) .cart-item-title, body:not(.surface-light) .summary-title, body:not(.surface-light) .summary-total, body:not(.surface-light) .summary-line-name strong, body:not(.surface-light) .summary-line-price strong, body:not(.surface-light) .cart-empty h2 { color: var(--bm-ink-on-dark); } body:not(.surface-light) .cart-item-subtle, body:not(.surface-light) .cart-item-extras, body:not(.surface-light) .cart-qty, body:not(.surface-light) .cart-price-detail, body:not(.surface-light) .cart-remove-link, body:not(.surface-light) .summary-row, body:not(.surface-light) .summary-trust p, body:not(.surface-light) .summary-back-link, body:not(.surface-light) .cart-empty p, body:not(.surface-light) .summary-line-name small, body:not(.surface-light) .summary-line-price small { color: var(--bm-ink-on-dark-muted); } body:not(.surface-light) .cart-tag-muted { background: rgba(255, 255, 255, 0.06); color: var(--bm-ink-on-dark-muted); } body:not(.surface-light) .summary-header { border-bottom-color: var(--bm-border-on-dark); } body:not(.surface-light) .summary-line { border-bottom-color: var(--bm-border-on-dark); } body:not(.surface-light) .summary-total { border-top-color: var(--bm-red); } body:not(.surface-light) .summary-trust { border-top-color: var(--bm-border-on-dark); } body:not(.surface-light) .cart-empty-icon { background: rgba(200, 16, 46, 0.15); color: var(--bm-red); } body:not(.surface-light) .delivery-option label { background: var(--bm-surface-raised); border-color: var(--bm-border-on-dark); color: var(--bm-ink-on-dark); } body:not(.surface-light) .delivery-option label i { color: var(--bm-ink-on-dark-muted); } body:not(.surface-light) .delivery-option label:hover { border-color: var(--bm-red); color: #fff; } body:not(.surface-light) .delivery-option input[type="radio"]:checked + label { background: var(--bm-surface-deep); border-color: var(--bm-red); color: #fff; } body:not(.surface-light) .form-control, body:not(.surface-light) .form-select { background: var(--bm-surface-deep); border-color: var(--bm-border-on-dark); color: var(--bm-ink-on-dark); } body:not(.surface-light) .form-control::placeholder { color: var(--bm-ink-on-dark-muted); } body:not(.surface-light) .form-control:focus, body:not(.surface-light) .form-select:focus { background: var(--bm-surface-deep); border-color: var(--bm-red); color: var(--bm-ink-on-dark); box-shadow: 0 0 0 0.2rem rgba(200, 16, 46, 0.25); } body:not(.surface-light) label, body:not(.surface-light) .form-label, body:not(.surface-light) legend { color: var(--bm-ink-on-dark); } body:not(.surface-light) .auth-card { background: var(--bm-surface-raised); border-color: var(--bm-border-on-dark); box-shadow: var(--bm-shadow-lg); color: var(--bm-ink-on-dark); } body:not(.surface-light) .auth-card-header { border-bottom-color: var(--bm-border-on-dark); } body:not(.surface-light) .auth-card-header h2 { color: var(--bm-ink-on-dark); } body:not(.surface-light) .auth-card-header p { color: var(--bm-ink-on-dark-muted); } body:not(.surface-light) .auth-card label, body:not(.surface-light) .auth-card-narrow label { color: var(--bm-ink-on-dark-muted); } body:not(.surface-light) .form-section-title { color: var(--bm-ink-on-dark); border-bottom-color: var(--bm-border-on-dark); } body:not(.surface-light) .form-required-note { color: var(--bm-ink-on-dark-muted); } body:not(.surface-light) .checkout-login-prompt { background: rgba(244, 236, 216, 0.08); border-left-color: var(--bm-red); color: var(--bm-ink-on-dark); } body:not(.surface-light) .checkout-login-prompt a { color: var(--bm-red-soft); } body:not(.surface-light) .address-lookup { background: var(--bm-surface-deep); border-color: var(--bm-border-on-dark); } body:not(.surface-light) .address-lookup-label { color: var(--bm-ink-on-dark); } body:not(.surface-light) .auth-card-feature { background: var(--bm-surface-deep); border-color: var(--bm-border-on-dark); } body:not(.surface-light) .feature-list li { color: var(--bm-ink-on-dark); border-bottom-color: var(--bm-border-on-dark); } body:not(.surface-light) .btn-outline-dark { border: 2px solid rgba(255, 255, 255, 0.35); color: var(--bm-ink-on-dark); background: transparent; } body:not(.surface-light) .btn-outline-dark:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; color: #fff; } /* ========================================================================== Account / Order detail page ========================================================================== */ .order-page { margin-top: 2rem; margin-bottom: 3rem; } .back-link { display: inline-flex; align-items: center; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bm-grey-600); text-decoration: none; margin-bottom: 1.25rem; } .back-link:hover { color: var(--bm-red); } .order-info-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--bm-grey-200); border: 1px solid var(--bm-grey-200); border-radius: var(--bm-radius-lg); overflow: hidden; margin-bottom: 2rem; box-shadow: var(--bm-shadow-sm); } @media (min-width: 768px) { .order-info-strip { grid-template-columns: repeat(4, 1fr); } } .order-info-cell { background: #fff; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.2rem; } .order-info-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bm-grey-600); } .order-info-value { font-family: var(--bm-font-display); font-size: 1.2rem; letter-spacing: 0.02em; color: var(--bm-black); } .order-info-total { background: var(--bm-cream); } .order-info-total .order-info-value { color: var(--bm-red); } .order-line { background: #fff; border: 1px solid var(--bm-grey-200); border-radius: var(--bm-radius-xl); box-shadow: var(--bm-shadow-sm); margin-bottom: 1.5rem; overflow: hidden; } .order-line-header { background: var(--bm-black); color: #fff; padding: 1rem 1.5rem; border-bottom: 3px solid var(--bm-xmas-green); } .order-line-header h2 { margin: 0; font-family: var(--bm-font-display); font-size: clamp(1.25rem, 2.5vw, 1.6rem); letter-spacing: 0.04em; color: #fff; } .order-line-body { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; } @media (min-width: 768px) { .order-line-body { grid-template-columns: 220px 1fr; } } .order-line-media img { width: 100%; border-radius: var(--bm-radius-md); object-fit: cover; max-height: 220px; } .order-line-summary { display: flex; flex-direction: column; gap: 0.4rem; } .order-line-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0; border-bottom: 1px dashed var(--bm-grey-200); } .order-line-summary-row:last-child { border-bottom: none; } .order-line-summary-label { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bm-grey-600); } .order-line-summary-value { font-family: var(--bm-font-display); font-size: 1.15rem; letter-spacing: 0.02em; color: var(--bm-black); } .order-line-summary-sub .order-line-summary-value { font-family: var(--bm-font-body); font-size: 0.95rem; font-weight: 600; color: var(--bm-charcoal); } .order-line-included { padding: 0 1.5rem 1.5rem; background: var(--bm-parchment); border-top: 1px solid var(--bm-grey-200); padding-top: 1.25rem; } .order-included-title { margin-top: 1rem !important; margin-bottom: 0.85rem !important; font-size: 1rem !important; } .order-included-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; } .order-included-list li { display: flex; align-items: center; gap: 0.75rem; background: #fff; border: 1px solid var(--bm-grey-200); border-left: 4px solid var(--bm-xmas-green); border-radius: var(--bm-radius-md); padding: 0.5rem 0.75rem; font-size: 0.92rem; font-weight: 600; color: var(--bm-black); box-shadow: var(--bm-shadow-sm); } .order-included-list li img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--bm-radius-sm); flex-shrink: 0; } /* ========================================================================== Auth pages: extras (Login two-up grid, narrow forms, banner, links) ========================================================================== */ .auth-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 980px; margin: 2rem auto 3rem; } @media (min-width: 768px) { .auth-grid { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; } } .auth-card-narrow { display: flex; flex-direction: column; height: 100%; padding: 1.75rem 1.5rem; } @media (min-width: 768px) { .auth-card-narrow { padding: 2rem 2rem; } } .auth-card-feature { background: linear-gradient(180deg, #fff 0%, var(--bm-parchment) 100%); border-color: var(--bm-cream); } .feature-list { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; } .feature-list li { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.55rem 0; font-size: 0.95rem; color: var(--bm-charcoal); border-bottom: 1px dashed var(--bm-grey-200); } .feature-list li:last-child { border-bottom: none; } .feature-list i { color: var(--bm-xmas-green); margin-top: 0.2rem; flex-shrink: 0; } .auth-banner { max-width: 980px; margin: 1.5rem auto 0; border-radius: var(--bm-radius-lg); background: #E8F5EE; border: 1px solid #B7DFC7; color: #1A5C3A; padding: 1rem 1.25rem; } .auth-banner h4 { color: #1A5C3A; margin-bottom: 0.3rem; font-family: var(--bm-font-display); letter-spacing: 0.04em; } .auth-form-narrow { max-width: 540px; } .forgot-link { display: inline-block; margin-top: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--bm-red); } .forgot-link:hover { color: var(--bm-red-deep); } /* ========================================================================== Account / Orders list ========================================================================== */ .order-summary-card { background: #fff; border: 1px solid var(--bm-grey-200); border-radius: var(--bm-radius-xl); box-shadow: var(--bm-shadow-sm); margin-bottom: 1.5rem; overflow: hidden; transition: box-shadow 0.18s ease, transform 0.18s ease; } .order-summary-card:hover { box-shadow: var(--bm-shadow-md); } .order-info-strip-compact { margin-bottom: 0; border: none; border-bottom: 1px solid var(--bm-grey-200); border-radius: 0; box-shadow: none; } .order-info-strip-compact .order-info-cell { padding: 0.85rem 1.1rem; } .order-info-strip-compact .order-info-value a { color: var(--bm-red); text-decoration: none; } .order-info-strip-compact .order-info-value a:hover { text-decoration: underline; } .order-summary-lines { padding: 1rem 1.25rem; } .order-summary-line { display: grid; grid-template-columns: 110px 1fr auto; gap: 1.25rem; align-items: center; padding: 1rem 0; border-bottom: 1px dashed var(--bm-grey-200); } .order-summary-line:last-child { border-bottom: none; } @media (max-width: 575px) { .order-summary-line { grid-template-columns: 70px 1fr; grid-template-areas: "media body" "price price"; } .order-summary-line-media { grid-area: media; } .order-summary-line-body { grid-area: body; } .order-summary-line-price { grid-area: price; flex-direction: row !important; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--bm-grey-200); margin-top: 0.5rem; } } .order-summary-line-media img { width: 100%; height: 100px; object-fit: cover; border-radius: var(--bm-radius-md); background: var(--bm-grey-100); } @media (max-width: 575px) { .order-summary-line-media img { height: 70px; } } .order-summary-line-body h3 { font-family: var(--bm-font-display); font-size: 1.2rem; letter-spacing: 0.02em; margin: 0 0 0.35rem; color: var(--bm-black); } .order-summary-line-price { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; text-align: right; min-width: 120px; } .order-card-footer-link { display: flex; align-items: center; justify-content: center; padding: 0.85rem 1.25rem; background: var(--bm-cream); border-top: 1px solid var(--bm-grey-200); color: var(--bm-red); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease; } .order-card-footer-link:hover { background: var(--bm-red); color: #fff; text-decoration: none; } /* ========================================================================== Account / Orders + Order detail: dark surface overrides ========================================================================== */ body:not(.surface-light) .back-link { color: var(--bm-ink-on-dark-muted); } body:not(.surface-light) .back-link:hover { color: var(--bm-red-soft); } body:not(.surface-light) .order-info-strip { background: var(--bm-border-on-dark); border-color: var(--bm-border-on-dark); box-shadow: var(--bm-shadow-lg); } body:not(.surface-light) .order-info-cell { background: var(--bm-surface-raised); } body:not(.surface-light) .order-info-label { color: var(--bm-ink-on-dark-muted); } body:not(.surface-light) .order-info-value { color: var(--bm-ink-on-dark); } body:not(.surface-light) .order-info-total { background: var(--bm-surface-deep); } body:not(.surface-light) .order-line { background: var(--bm-surface-raised); border-color: var(--bm-border-on-dark); box-shadow: var(--bm-shadow-lg); } body:not(.surface-light) .order-line-summary-row { border-bottom-color: var(--bm-border-on-dark); } body:not(.surface-light) .order-line-summary-label { color: var(--bm-ink-on-dark-muted); } body:not(.surface-light) .order-line-summary-value { color: var(--bm-ink-on-dark); } body:not(.surface-light) .order-line-summary-sub .order-line-summary-value { color: var(--bm-ink-on-dark-muted); } body:not(.surface-light) .order-line-included { background: var(--bm-surface-deep); border-top-color: var(--bm-border-on-dark); } body:not(.surface-light) .order-included-list li { background: var(--bm-surface-raised); border-color: var(--bm-border-on-dark); border-left-color: var(--bm-xmas-green); color: var(--bm-ink-on-dark); } body:not(.surface-light) .order-summary-card { background: var(--bm-surface-raised); border-color: var(--bm-border-on-dark); box-shadow: var(--bm-shadow-lg); } body:not(.surface-light) .order-info-strip-compact { border-bottom-color: var(--bm-border-on-dark); } body:not(.surface-light) .order-summary-line { border-bottom-color: var(--bm-border-on-dark); } @media (max-width: 575px) { body:not(.surface-light) .order-summary-line-price { border-top-color: var(--bm-border-on-dark); } } body:not(.surface-light) .order-summary-line-body h3 { color: var(--bm-ink-on-dark); } body:not(.surface-light) .order-card-footer-link { background: var(--bm-surface-deep); border-top-color: var(--bm-border-on-dark); color: var(--bm-red-soft); } body:not(.surface-light) .order-card-footer-link:hover { background: var(--bm-red); color: #fff; } /* ========================================================================== Cart: mobile layout polish ========================================================================== */ @media (max-width: 575px) { .cart-item { grid-template-columns: 90px 1fr; grid-template-areas: "media body" "price price"; gap: 0.85rem; padding: 0.85rem; } .cart-item-media { grid-area: media; } .cart-item-body { grid-area: body; } .cart-item-price { grid-area: price; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem; min-width: 0; text-align: left; padding-top: 0.75rem; border-top: 1px dashed var(--bm-grey-200); margin-top: 0.25rem; } .cart-item-media img { height: 90px; } .cart-price-amount { font-size: 1.4rem; } .cart-remove-link { margin-top: 0; } } /* ========================================================================== Modal form-check polish ========================================================================== */ .modal .form-check { padding-left: 1.75rem; position: relative; } .modal .form-check-input { position: absolute; margin-left: -1.75rem; margin-top: 0.3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--bm-red); } .modal .form-check-label { font-weight: 500; color: var(--bm-ink-on-dark); margin-bottom: 0; cursor: pointer; }