/* Christmas look. Loaded only while sbx_xmas_on() is true (1 Nov to 6 Jan, or forced on). Dark backgrounds carry light text. */
:root { --xm-green: #14502b; --xm-gold: #ffd56b; --xm-berry: #c8202f; }

/* a holly garland along the bottom edge of the header and the top edge of the footer */
body.sbx-xmas .sbx-hdr { position: relative; }
body.sbx-xmas .sbx-hdr::after,
body.sbx-xmas .sbx-ftr::before { content: ""; display: block; height: 22px; width: 100%; background-repeat: repeat-x; background-size: 120px 22px; background-position: left top;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cpath d='M0 3Q30 14 60 3T120 3' fill='none' stroke='%2314502b' stroke-width='3'/%3E%3Cg fill='%232e9150'%3E%3Cpath d='M14 5c4-7 11-6 12-1c-3 4-8 5-12 1z'/%3E%3Cpath d='M44 9c4 6 11 6 12 1c-3-4-8-5-12-1z'/%3E%3Cpath d='M74 5c4-7 11-6 12-1c-3 4-8 5-12 1z'/%3E%3Cpath d='M104 9c4 6 11 6 12 1c-3-4-8-5-12-1z'/%3E%3C/g%3E%3Cg fill='%23c8202f'%3E%3Ccircle cx='30' cy='10' r='3'/%3E%3Ccircle cx='34' cy='7' r='3'/%3E%3Ccircle cx='90' cy='10' r='3'/%3E%3Ccircle cx='94' cy='7' r='3'/%3E%3C/g%3E%3Ccircle cx='60' cy='12' r='4' fill='%23ffd56b'/%3E%3C/svg%3E"); }
body.sbx-xmas .sbx-hdr::after { position: absolute; left: 0; bottom: -20px; z-index: 5; pointer-events: none; }
body.sbx-xmas .sbx-ftr::before { margin-top: -2px; }

/* the front-page hero: a deep green tint and gentle falling snow */
body.sbx-xmas .sbx-home .rd-hero { background: radial-gradient(900px 420px at 82% 0%, rgba(200,32,47,.28), transparent 62%), radial-gradient(700px 380px at 10% 100%, rgba(31,122,77,.35), transparent 65%), linear-gradient(180deg, #0f1d30, #0a1320); position: relative; overflow: hidden; }
body.sbx-xmas .sbx-home .rd-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(2px 2px at 90px 120px, #fff, transparent), radial-gradient(1.5px 1.5px at 160px 60px, #fff, transparent), radial-gradient(2.5px 2.5px at 230px 170px, #fff, transparent), radial-gradient(1.5px 1.5px at 300px 90px, #fff, transparent);
  background-size: 320px 220px; animation: sbxSnow 22s linear infinite; }
@keyframes sbxSnow { from { background-position: 0 0; } to { background-position: 40px 220px; } }
body.sbx-xmas .sbx-home .rd-hero-in { position: relative; z-index: 1; }

/* the offer card */
.sbx-xmas-card { background: linear-gradient(180deg, #123f2a, #0c2a1c) !important; color: #fff !important; border: 2px solid rgba(255,213,107,.55); cursor: default; }
.sbx-xmas-card:hover { transform: none; }
.sbx-xmas-art { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.sbx-xmas-tag { align-self: flex-start; background: var(--xm-gold); color: #3a2a00; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; margin-top: 4px; }
.sbx-xmas-card .sbx-xmas-h { color: #fff !important; font-size: clamp(20px, 2vw, 24px); line-height: 1.2; font-weight: 800; margin: 10px 0 6px !important; }
.sbx-xmas-p, .sbx-xmas-offer, .sbx-xmas-by { color: #e6f0ea !important; font-size: 15px; line-height: 1.45; margin: 0 0 8px !important; }
.sbx-xmas-offer { color: var(--xm-gold) !important; font-weight: 700; }
.sbx-xmas-by b { color: var(--xm-gold); }
.sbx-xmas-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.sbx-xmas-cta .sbx-btn { flex: 1 1 150px; text-align: center; justify-content: center; }
@media (max-width: 800px) { .sbx-xmas-art { max-width: 280px; } }
@media (prefers-reduced-motion: reduce) { body.sbx-xmas .sbx-home .rd-hero::before { animation: none; } }

/* 11 Oct 2026, Stephen: "the lights going across the screen from left to right, can we remove it, Tom and others do not like it". The holly-and-lights garland under the header and above the footer is switched off. The wreath card and the countdown stay. To bring it back, delete this block. */
body.sbx-xmas .sbx-hdr::after, body.sbx-xmas .sbx-ftr::before { display: none !important; }