@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&display=swap');
/* ===== Classic Christmas palette ===== */
:root{
  --x-cyan:#f0cc73; --x-pink:#b01b2e; --x-gold:#ffd23f;
  --x-green:#27854d; --x-red:#b01b2e; --x-pine:#081d16; --x-midn:#081d16;
  --bg:#081d16; --card:#081d16; --line:#103e2c; --orange:#f0cc73; --muted:#d5e8dc; --text:#f7fff9;
  --holiday-orange:#f0cc73; --holiday-gold:#ffd23f; --holiday-red:#b01b2e; --holiday-brown:#081d16;
  --font-festive:'Mountains of Christmas', 'Permanent Marker', cursive;
  --hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath d='M8 34c6-18 20-28 34-28 4 10 8 18 10 28H8z' fill='%23E11D48'/%3E%3Cpath d='M38 8c4-2 10-2 14 2-2 6-6 10-12 12-2-4-2-10-2-14z' fill='%23E11D48'/%3E%3Ccircle cx='52' cy='10' r='6' fill='%23fff'/%3E%3Crect x='6' y='32' width='48' height='10' rx='4' fill='%23fff'/%3E%3C/svg%3E");
}
body{
  background:
    radial-gradient(ellipse at 50% 120%, rgba(176,27,46,.28), transparent 55%),
    radial-gradient(ellipse at 12% 0%, rgba(39,133,77,.35), transparent 48%),
    radial-gradient(ellipse at 88% 8%, rgba(240,204,115,.16), transparent 42%),
    radial-gradient(ellipse at 50% 40%, rgba(255,210,63,.08), transparent 50%),
    linear-gradient(180deg, #081d16 0%, #081d16 45%, #081d16 100%) !important;
  color:var(--text);
}
.glow-1{background:var(--x-green)!important;opacity:.28!important}
.glow-2{background:var(--x-red)!important;opacity:.32!important}

/* string lights */
.xmas-lights{position:fixed;top:var(--hb-h);left:0;right:0;height:22px;z-index:99998;pointer-events:none;overflow:hidden}
.xmas-lights svg{display:block;width:160%;max-width:none;height:22px;margin-left:-15%}
.section-lights{display:block;width:100%;height:18px;margin:0.4rem 0 0.8rem}
@media (prefers-reduced-motion:reduce){.xmas-bulb,.xmas-snow span{animation:none!important}}

.holiday-banner{
  background:linear-gradient(90deg,#103e2c 0%,#081d16 22%,#081d16 78%,#5f111f 100%)!important;
  border-bottom:3px solid var(--x-gold)!important;
  box-shadow:0 0 14px rgba(176,27,46,.55),0 0 22px rgba(240,204,115,.25)!important;
}
.hb-btn{
  position:relative;
  background:linear-gradient(135deg,#b01b2e,#b01b2e)!important;color:#ffffff!important;
  box-shadow:0 0 10px #b01b2e,0 0 18px #f0cc73!important;
  border:2px solid #ffd23f!important;
}
.hb-item{color:#ffffff!important;text-shadow:0 0 6px #b01b2e,0 0 12px #27854d!important}
.hb-item:nth-child(3n+2){color:var(--x-cyan)!important;text-shadow:0 0 6px var(--x-cyan)!important}
.hb-item:nth-child(3n){color:var(--x-gold)!important;text-shadow:0 0 6px var(--x-gold)!important}

/* snow */
.xmas-snow{pointer-events:none;position:fixed;inset:0;z-index:1;overflow:hidden}
.xmas-snow span{position:absolute;top:-18px;color:rgba(255,255,255,.85);font-size:12px;text-shadow:0 0 6px rgba(240,204,115,.45);animation:snow-drift linear infinite}
@keyframes snow-drift{to{transform:translateY(110vh) rotate(360deg)}}

/* candy cane borders */
.candy-border,.bx-card,.pf-card,.contact-card,.nov-soon,.fl-list>li,.mt-panel{
  border-image:repeating-linear-gradient(135deg,#b01b2e 0 10px,#ffffff 10px 20px) 4 / 3px !important;
}
.bx-card,.ss-hero .bx-card{
  position:relative;
  border:3px solid transparent!important;
  border-image:repeating-linear-gradient(45deg,#b01b2e 0 12px,#ffffff 12px 24px,#27854d 24px 36px,#ffffff 36px 48px) 6!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 18%),
    radial-gradient(120% 140% at 0% 0%,rgba(39,133,77,.22),transparent 55%),
    radial-gradient(120% 140% at 100% 100%,rgba(176,27,46,.2),transparent 55%),
    #081d16!important;
  box-shadow:0 0 0 2px rgba(240,204,115,.35),0 0 30px rgba(176,27,46,.35),0 0 40px rgba(240,204,115,.2)!important;
  overflow:visible;
}
/* snow cap on cards */
.bx-card:after,.pf-card:after,.contact-card:after:after{
  content:"";position:absolute;left:8%;right:8%;top:-8px;height:14px;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 20% 100%,#ffffff 0 40%,transparent 41%),
    radial-gradient(ellipse at 50% 100%,#ffffff 0 45%,transparent 46%),
    radial-gradient(ellipse at 80% 100%,#ffffff 0 40%,transparent 41%);
  filter:drop-shadow(0 0 4px rgba(255,255,255,.5));
}

.ss-hero .bx-card:before{
  content:"";position:absolute;left:10px;right:10px;top:8px;height:10px;z-index:1;
  background:repeating-linear-gradient(90deg,#b01b2e 0 10px,#27854d 10px 20px,#ffd23f 20px 30px,#f0cc73 30px 40px,#b01b2e 40px 50px);
  border-radius:999px;opacity:.95;box-shadow:0 0 12px rgba(255,210,63,.55);pointer-events:none;
}

/* festive headers */
.nov-title,.bx-title,.mt-title,.nov-soon-title,.section-head h2,.spw-h{
  font-family:var(--font-festive)!important;
  letter-spacing:.02em;
}
.nov-title span,.bx-title span{color:var(--x-cyan)!important;text-shadow:0 0 18px rgba(240,204,115,.7),0 0 8px rgba(176,27,46,.4)!important}
.nov-sub,.bx-kicker{color:var(--x-gold)!important;text-shadow:0 0 10px rgba(255,210,63,.45)!important}
.nov-label{color:var(--x-gold)!important;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.festive-tag{display:inline-block;margin:.35rem 0 .7rem;padding:.35em .9em;border-radius:999px;
  background:linear-gradient(135deg,rgba(176,27,46,.25),rgba(39,133,77,.25));
  border:2px solid var(--x-gold);color:#ffffff;font-family:var(--font-festive);font-size:clamp(1.05rem,3.4vw,1.45rem);
  text-shadow:0 0 8px #b01b2e;box-shadow:0 0 14px rgba(240,204,115,.3)}

/* price chips + tabs red/green/gold */
.nov-pricetag,.bx-price,.fl-price,.add-price{
  color:var(--x-gold)!important;text-shadow:0 0 12px rgba(255,210,63,.5)!important
}
.nov-pricetag{
  display:inline-flex;align-items:center;gap:.5rem;padding:.35em .9em;border-radius:999px;
  background:rgba(8,29,22,.75);border:2px solid var(--x-red);
  box-shadow:0 0 12px rgba(176,27,46,.4), inset 0 0 10px rgba(39,133,77,.2);
}
.mt-tab{border:2px solid rgba(39,133,77,.45)!important;background:rgba(8,29,22,.7)!important;position:relative}
.mt-tab[aria-selected="true"]{
  border-color:var(--x-red)!important;background:linear-gradient(135deg,rgba(176,27,46,.25),rgba(39,133,77,.2))!important;
  box-shadow:0 0 14px rgba(176,27,46,.45),0 0 10px rgba(240,204,115,.25)!important;color:#ffffff!important
}
.tab-flag{background:rgba(255,210,63,.18);color:var(--x-gold);border:1px solid rgba(255,210,63,.45)}
.add-btn{
  background:linear-gradient(135deg,#27854d,#f0cc73)!important;color:#081d16!important;
  border:2px solid #b01b2e!important;
  box-shadow:0 0 14px rgba(39,133,77,.5),0 0 20px rgba(176,27,46,.25)!important;
  position:relative;
}
.bx-badge.bx-drops{
  background:linear-gradient(135deg,#b01b2e,#ffd23f)!important;color:#081d16!important;
  letter-spacing:.12em;left:50%;transform:translateX(-50%) rotate(-2deg);
  box-shadow:0 0 14px #b01b2e,0 0 22px #f0cc73!important;
}

/* garland / ornaments on dividers */
.xmas-garland{display:flex;justify-content:center;gap:10px;align-items:center;margin:.6rem 0 1rem;font-size:1.15rem;
  text-shadow:0 0 8px rgba(39,133,77,.6);letter-spacing:.2em;color:#27854d}
.xmas-garland .orn{color:#b01b2e;text-shadow:0 0 8px #b01b2e;font-size:1rem}

/* hero tree + wreath */
.hero-festive{display:flex;justify-content:center;gap:1.2rem;align-items:flex-end;margin:.4rem auto .8rem;filter:drop-shadow(0 0 12px rgba(240,204,115,.35))}
.hero-festive .tree,.hero-festive .wreath{font-size:clamp(2.4rem,9vw,3.6rem);line-height:1}
.hero-festive .tree{text-shadow:0 0 12px #27854d,0 0 20px #f0cc73}
.hero-festive .wreath{text-shadow:0 0 12px #b01b2e,0 0 18px #ffd23f;animation:wspin 8s linear infinite}
@keyframes wspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero-festive .wreath{animation:none}}

.ss-hero-art{position:relative;margin:0 auto 1rem;max-width:360px}
.ss-box-shot{width:100%;height:auto;border-radius:18px;border:3px solid #b01b2e;box-shadow:0 0 24px rgba(39,133,77,.4),0 0 36px rgba(240,204,115,.25);display:block;background:#081d16}
.ss-hero-art{position:relative}

/* ===== Santa hats (one consistent SVG via --hat) ===== */
.santa-hat,.logo,.fl-logo,.bx-item .fl-logo,.mt-tab,.ss-hero-art,.hb-btn,.spw-logo-wrap,.add-btn.add-big{
  /* positioning contexts */
}
.logo{position:relative}
.logo-icon{border-radius:14px!important;box-shadow:0 0 14px rgba(240,204,115,.55),0 0 20px rgba(176,27,46,.35)!important;position:relative}
.logo::before{
  content:"";position:absolute;top:-10px;left:10px;width:28px;height:22px;z-index:3;pointer-events:none;
  background:var(--hat) center/contain no-repeat;transform:rotate(-18deg);
  filter:drop-shadow(0 0 4px rgba(176,27,46,.55));
}
.fl-list li,.bx-item{position:relative}
.fl-logo,.bx-item .fl-logo{position:relative}
.fl-list li::before,.bx-item::before{
  content:"";position:absolute;top:-6px;left:10px;width:22px;height:17px;z-index:4;pointer-events:none;
  background:var(--hat) center/contain no-repeat;transform:rotate(-16deg);
  filter:drop-shadow(0 0 3px rgba(176,27,46,.5));
}
.fl-list.fl-one li::before{left:14px;top:-4px;width:26px;height:20px}
.mt-tab::before{
  content:"";position:absolute;top:-8px;right:4px;width:16px;height:12px;pointer-events:none;
  background:var(--hat) center/contain no-repeat;transform:rotate(12deg) scaleX(-1);
}
.ss-hero-art::before{
  content:"";position:absolute;top:-12px;left:12px;width:48px;height:36px;z-index:5;pointer-events:none;
  background:var(--hat) center/contain no-repeat;transform:rotate(-14deg);
  filter:drop-shadow(0 0 6px rgba(176,27,46,.6));
}
.hb-btn::before{
  content:"";position:absolute;top:-12px;left:6px;width:22px;height:16px;pointer-events:none;
  background:var(--hat) center/contain no-repeat;transform:rotate(-20deg);
}
.spw-logo-wrap{position:relative;display:inline-block}
.spw-logo-wrap::before{
  content:"";position:absolute;top:-14px;left:8px;width:42px;height:32px;z-index:2;pointer-events:none;
  background:var(--hat) center/contain no-repeat;transform:rotate(-18deg);
}
.add-btn.add-big{position:relative}
.add-btn.add-big::before{
  content:"";position:absolute;top:-12px;left:10px;width:24px;height:18px;pointer-events:none;
  background:var(--hat) center/contain no-repeat;transform:rotate(-18deg);
}

/* product card corner hat (extra) */
.fl-list>li::after{
  content:"";position:absolute;top:-2px;right:6px;width:14px;height:11px;pointer-events:none;opacity:.9;
  background:var(--hat) center/contain no-repeat;transform:rotate(22deg);
}


.tg-pink{--c:#b01b2e!important}.tg-cyan{--c:#f0cc73!important}.tg-gold{--c:#ffd23f!important}
.tg-foot{color:var(--x-red)!important;text-shadow:0 0 10px rgba(176,27,46,.7)!important}
.contact-card{background:linear-gradient(160deg,rgba(39,133,77,.12),rgba(176,27,46,.12))!important;border-color:rgba(255,210,63,.4)!important}
.nov-soon{border:3px solid transparent;border-image:repeating-linear-gradient(45deg,#b01b2e 0 10px,#ffffff 10px 20px) 4;border-radius:20px;padding:1.4rem 1.2rem;background:rgba(39,133,77,.08);box-shadow:0 0 24px rgba(240,204,115,.15);position:relative}

.tbd-pill{display:inline-block;background:rgba(255,210,63,.16);color:var(--x-gold);border:1.5px solid rgba(255,210,63,.55);border-radius:999px;padding:.2em .7em;font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}

html,body{overflow-x:hidden}
@media (max-width:390px){
  .top{width:calc(100% - 1rem)}
  .bx-list li{flex:1 1 calc(50% - .4rem);max-width:calc(50% - .3rem)}
}

/* Classic Christmas finish: final layer overrides legacy neon UI. */
:root{--x-cyan:#f0cc73;--x-pink:#b01b2e;--x-gold:#f0cc73;--x-green:#27854d;--x-red:#b01b2e;--x-pine:#0b3d2e;--bg:#081d16;--card:#103e2c;--line:#bd9d54;--text:#fffaf0;--muted:#e1eee1;--holiday-orange:#f0cc73;--holiday-gold:#f0cc73}
body{background:radial-gradient(ellipse at top,#17583d 0,transparent 55%),linear-gradient(180deg,#0b3022,#081d16 55%,#4e1420)!important}
.xmas-lights{position:relative;top:auto;height:84px;margin:0;z-index:2;overflow:hidden;pointer-events:none;background:linear-gradient(#75182a,#0b3022)}
.xmas-lights svg{display:block;width:100%;height:84px;margin:0;max-width:none}
.section-lights{height:82px;max-width:1100px;width:100%;margin:1rem auto;position:relative;pointer-events:none;overflow:hidden}
.section-lights svg{width:100%;height:72px;display:block}
.xmas-bulb{animation:bulb-twinkle 3.8s ease-in-out var(--twinkle-delay,0s) infinite;filter:drop-shadow(0 2px 4px #f0cc7388)}
@keyframes bulb-twinkle{0%,100%{opacity:1}50%{opacity:.62}}
.holiday-banner{background:#851d2e!important;box-shadow:none!important;border-bottom:3px solid #f0cc73!important}
.hb-item,.hb-item:nth-child(n){color:#fffaf0!important;text-shadow:none!important}
.hb-btn,.add-btn,.prod-btn,.mb-btn{background:#a81930!important;color:#fffaf0!important;border:2px solid #f0cc73!important;box-shadow:0 3px 0 #5f111f!important;text-shadow:none!important}
.bx-card,.pf-card,.mt-panel,.nov-card,.contact-card,.mail-lane,.fl-list>li{background:#103e2c!important;color:#fffaf0!important;box-shadow:0 8px 26px #0003!important}
.nov-title,.bx-title,.nov-title span,.bx-title span,.section-head h2,.section-head h2 span,.mt-title{color:#fffaf0!important;text-shadow:0 2px 0 #75182a!important}
.bx-title span,.nov-title span,.contact-email,.mt-tab,.tg-near,.tg-foot,.kicker{color:#f0cc73!important;text-shadow:none!important}
.ss-hero .bx-card::before{display:none}
.bx-card{isolation:isolate}.hero-canes{display:flex;justify-content:space-between;max-width:560px;margin:.2rem auto -92px;pointer-events:none;position:relative;z-index:0}
.hero-canes img{width:72px;height:144px;transform:rotate(-18deg)}.hero-canes img+img{transform:scaleX(-1) rotate(-18deg)}
.ss-hero-art{z-index:1;width:calc(100% - 80px)}
.candy-cta{display:flex;align-items:center;justify-content:center;gap:12px;margin:1rem 0 .6rem;color:#f0cc73;font-weight:800;font-size:.95rem}
.candy-cta img{width:34px;height:68px}.candy-cta img:last-child{transform:scaleX(-1)}
.festive-divider::before,.festive-divider::after{content:"";position:absolute;top:0;width:38px;height:76px;background:url('img/candy-cane.svg') center/contain no-repeat;z-index:2}.festive-divider::before{left:8px}.festive-divider::after{right:8px;transform:scaleX(-1)}
.tg-strip{background:#75182a!important;border-color:#f0cc73!important;box-shadow:none!important;--c:#fffaf0!important}
.foot{background:#081d16!important;border-top:2px solid #f0cc73;color:#fffaf0}.foot p,.foot .legal-line{color:#e1eee1!important}.foot-row{flex-wrap:wrap;gap:1rem}.foot .ig-btn{color:#f0cc73!important;background:#103e2c!important;border-color:#f0cc73!important}
.mail-addr{overflow-wrap:anywhere}.mail-lane-note,.contact-note,.sub,.bx-sub{color:#e1eee1!important}.spw-card,.spw-box{background:#103e2c!important;border-color:#f0cc73!important;color:#fffaf0!important}
@media(max-width:600px){.xmas-lights,.xmas-lights svg{height:68px}.xmas-lights svg,.section-lights svg{width:200%;max-width:none}.section-lights{height:72px}.hero-canes{margin-bottom:-86px}.hero-canes img{width:55px;height:110px}.ss-hero-art{width:calc(100% - 48px)}.bx-card{padding-left:1rem!important;padding-right:1rem!important}.candy-cta{gap:8px;font-size:.85rem}.mail-lanes{grid-template-columns:1fr!important}.mail-lane{min-width:0}.foot-row p{font-size:.9rem}.nov-title,.bx-title{line-height:1.12!important}}
@media(prefers-reduced-motion:reduce){.xmas-bulb,.xmas-snow span,.hero-festive .wreath{animation:none!important}.xmas-bulb{opacity:1}}

.christmas-countdown{display:table;margin:.5rem auto 1.3rem;padding:.6rem 1rem;background:#75182a;border:1px solid #f0cc73;border-radius:12px;color:#fffaf0;font-weight:700;font-size:clamp(.8rem,3.2vw,1rem)}.spw-go,.spw-slogan{color:#fffaf0!important}.spw-go{background:#a81930!important;border-color:#f0cc73!important}

/* Mobile QA v39: usable two-row navigation, full-width flavor rows,
   and a permanent clear lane for the floating chat launcher at the footer. */
@media(max-width:600px){
 :root{--nav-h:112px}
 .top{display:grid!important;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:10px!important;width:calc(100% - 16px)!important;max-width:calc(100% - 16px)!important;margin-inline:auto!important;padding:8px 12px!important;box-sizing:border-box;min-width:0}
 .top .logo{width:48px;min-width:0;gap:0}.top .logo-icon{width:48px;height:48px}.top .logo-text{display:none}
 .top .top-nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px!important;min-width:0;width:100%;align-items:center;justify-items:stretch}
 .top .snav{min-width:0;min-height:44px;padding:3px 2px;font-size:.7rem;letter-spacing:0;line-height:1.2;text-align:center;white-space:normal}
 .top .cart-btn{width:44px;height:44px;margin:0;justify-self:center;flex-shrink:0;color:#f0cc73;border-color:#f0cc73}
 .top .cart-count{top:-2px;right:-3px;background:#f0cc73;color:#081d16}
 .bx-list{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
 .bx-list li{width:100%!important;max-width:100%!important;min-width:0;flex-basis:100%!important}
 .bx-list .bx-item{display:flex;flex-direction:row;gap:14px;padding:10px;text-align:left;border:1px solid #bd9d54;background:#0b3022;min-width:0}
 .bx-list .fl-logo{width:76px!important;height:76px!important;flex:0 0 76px}
 .bx-list .bx-name{font-size:1.05rem;line-height:1.4;font-weight:700;letter-spacing:.01em;min-width:0;word-break:normal;overflow-wrap:normal;hyphens:none;text-wrap:pretty}
 .mt-panel .fl-list>li{display:flex;flex-direction:column!important;align-items:flex-start!important;padding:16px!important;gap:14px!important}
 .mt-panel .fl-logo{width:88px!important;height:88px!important;flex:none}
 .mt-panel .fl-txt{width:100%;min-width:0;flex:none}.mt-panel .fl-name{font-size:1.4rem;line-height:1.25;letter-spacing:.02em;word-break:normal;overflow-wrap:normal}
 .fl-real{font-size:.85rem;line-height:1.45}.fl-desc{font-size:.95rem;line-height:1.5}
 .foot{box-sizing:border-box;padding:28px 104px 32px 20px!important;min-height:210px}
 .foot-row{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;min-width:0}
 .foot-row p{width:100%;margin:0;font-size:.9rem;line-height:1.6;overflow-wrap:normal;text-wrap:balance}
 .foot .tg-foot{font-size:.95rem;line-height:1.5;letter-spacing:.06em}.foot .foot-note{font-size:.85rem;line-height:1.5}
 .mail-lane-label{color:#f0cc73!important}
}

@media(max-width:600px){.foot{padding:28px 20px 32px!important}}

/* LOCAL contrast correction, pending approval before any deployment.
   Legacy holiday.css sets both an !important green color and WebKit fill. */
.nov-hero .nov-built-wrap{background:#103e2c;border-radius:12px}
.nov-hero .nov-title.nov-built > span,
.ss-hero .bx-title > span{
 color:#f0cc73!important;
 -webkit-text-fill-color:#f0cc73!important;
 text-shadow:0 2px 2px #75182a,0 0 12px rgba(176,27,46,.5)!important;
}
/* Same legacy green-on-green issue in the coming-soon heading. */
.nov-soon .nov-soon-title{
 color:#f0cc73!important;
 -webkit-text-fill-color:#f0cc73!important;
 text-shadow:0 2px 2px #75182a!important;
}
