/* 🎄 Christmas theme — only active when christmas.js adds the "xmas" class (see dates in christmas.js) */
html.xmas{
  --coral:#C8102E; --coral-d:#8E0B20; --teal:#0F7B4F; --sun:#F4C430; --bg:#FFFAF3; --line:#F1E3CF;
}
html.xmas body{background:
  radial-gradient(circle at 12% 18%,rgba(200,16,46,.05) 0 120px,transparent 121px),
  radial-gradient(circle at 88% 40%,rgba(15,123,79,.05) 0 160px,transparent 161px),var(--bg)}

/* top festive bar */
.xmas-bar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:8px 16px;color:#fff;font-size:.95rem;text-align:center;
  background:repeating-linear-gradient(135deg,#B3122B 0 22px,#C8102E 22px 44px);position:relative;z-index:41}
.xmas-bar b{font-weight:800}
.xmas-bar .xb-btn{background:#fff;color:#B3122B;font-weight:800;border-radius:999px;padding:3px 14px;font-size:.88rem;white-space:nowrap}
.xmas-bar .xb-btn:hover{background:#F4C430;color:#5A0715}
@media (max-width:560px){.xmas-bar .xb-sub{display:none}}

/* navigation */
html.xmas .nav{border-bottom:3px solid transparent;border-image:repeating-linear-gradient(90deg,#C8102E 0 18px,#fff 18px 36px,#0F7B4F 36px 54px,#fff 54px 72px) 3}
html.xmas .logo{position:relative}
.xmas-minihat{position:absolute;left:-7px;top:-13px;width:34px;transform:rotate(-18deg);pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}
.xmas-minihat svg{width:100%;height:auto;display:block}
footer .xmas-minihat{left:-6px;top:-14px;width:38px}

/* welcome area */
html.xmas .hero{overflow:hidden;padding-top:84px}
.xmas-lights{position:absolute;top:0;left:0;right:0;height:46px;pointer-events:none}
.xmas-lights svg{position:absolute;inset:0;width:100%;height:30px}
.xmas-lights i{position:absolute;width:11px;height:16px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;transform:translateX(-50%);
  box-shadow:0 0 10px 2px currentColor;color:rgba(255,220,120,.6);animation:xtwinkle 2.2s ease-in-out infinite}
.xmas-lights i::before{content:"";position:absolute;top:-4px;left:3px;width:5px;height:5px;border-radius:1px;background:#2B5F3F}
@keyframes xtwinkle{0%,100%{opacity:1;filter:brightness(1.15)}50%{opacity:.45;filter:brightness(.8)}}
html.xmas .blob{background:#D9F2E3!important}
html.xmas .blob.b2{background:#FBD9DB!important}
.xmas-hat{position:absolute;width:37%;left:47%;top:3%;transform:rotate(16deg);pointer-events:none;filter:drop-shadow(0 8px 10px rgba(0,0,0,.18));animation:float 6s ease-in-out infinite;z-index:2}
.xmas-hat svg{width:100%;height:auto;display:block}
.xmas-star{top:-2%;inset-inline-start:44%;font-size:clamp(1.6rem,4vw,2.4rem)!important;animation:xtwinkle 2.6s ease-in-out infinite!important}
html.xmas .pill{background:#fff;border-color:#F3C9CF}
html.xmas .hero h1 .hl,html.xmas .hero .h1 .hl{color:#C8102E}
html.xmas .badge-card{border:2px solid #F3C9CF;z-index:3}

/* the two big cards */
html.xmas .duo .d1{background:linear-gradient(135deg,#0F7B4F,#0A5A3A)!important}
html.xmas .duo .d2{background:linear-gradient(135deg,#C8102E,#8E0B20)!important}
html.xmas .duo a{position:relative;overflow:hidden}
html.xmas .duo a::after{content:"❄";position:absolute;right:18px;bottom:-14px;font-size:5.5rem;opacity:.12;line-height:1}

/* section titles */
html.xmas .eyebrow{background:#C8102E;border-color:#C8102E;color:#fff}
html.xmas .eyebrow::before{content:"❄ "}
html.xmas .head h2::after,html.xmas .sview .head h1::after{content:"";display:block;width:84px;height:12px;margin:10px auto 0;
  background:radial-gradient(circle,#C8102E 0 4px,transparent 5px) 0 0/28px 12px,radial-gradient(circle,#0F7B4F 0 4px,transparent 5px) 14px 0/28px 12px}
html.xmas section.alt{background:#FFFFFF}

/* toys & packages: a candy-cane edge */
html.xmas .prod::before,html.xmas .pack::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;z-index:2;
  background:repeating-linear-gradient(135deg,#C8102E 0 10px,#fff 10px 20px)}
html.xmas .pack{overflow:hidden}
html.xmas .prod:hover{box-shadow:0 14px 34px rgba(200,16,46,.16)}
html.xmas .chip.on{background:#0F7B4F;border-color:#0F7B4F}
html.xmas .add{background:#0F7B4F}
html.xmas .add.done{background:#C8102E}
html.xmas .tag{background:#F4C430;color:#5A0715}
html.xmas .banner{background:linear-gradient(135deg,#F4C430,#F7D774)}

/* footer with a snowy edge */
html.xmas body > footer{background:#0B3D2B;position:relative;padding-top:64px}
.xmas-drift{position:absolute;top:-1px;left:0;right:0;height:34px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v14c-40 12-80 16-120 8s-70-16-110-6-80 20-130 12-70-18-110-14-80 18-130 16-70-16-120-12-80 16-130 14-80-14-120-10-80 12-120 8-60-10-110-6V0z' fill='%23FFFAF3'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* floating buttons */
html.xmas .fab .cart-b{background:#C8102E}

/* falling snow */
.xmas-snow{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:45}
@media print{.xmas-snow,.xmas-bar,.xmas-lights{display:none}}