/* =====================================================================
   Matteson Brands — Christmas theme (brand colours: black · gold · silver)
   Everything is scoped to body.festive. Turn it off with
   'festive' => false in config/config.php (or config.local.php).
   ===================================================================== */
.festive { --xmas-gold: #E1A631; --xmas-gold-l: #FFD76A; --xmas-gold-d: #A8732E; --xmas-silver: #E2E8F0; }

/* ---------------------------------------------------- announcement bar + twinkling lights */
.festive .announce { position: relative; background: linear-gradient(90deg, #040606, #12161a 50%, #040606); color: #EDEDED; margin-bottom: 12px; padding: .42rem 0; }
.festive .announce i, .festive .announce strong { color: var(--xmas-gold-l); }
.festive .announce .xmas-pill { display: inline-block; background: rgba(225,166,49,.16); border: 1px solid rgba(225,166,49,.5); color: var(--xmas-gold-l); border-radius: 99px; padding: 0 .65rem; margin-right: .5rem; font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.festive .announce::before, .festive .announce::after, .festive .announce .container::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; pointer-events: none; z-index: 3; background-repeat: repeat-x; background-size: 120px 16px; }
.festive .announce .container { position: static; }
/* two alternating sets of gold / champagne / silver / white bulbs */
.festive .announce::after {
  background-image: radial-gradient(circle at 15px 9px, #FFD76A 0 4px, transparent 5px), radial-gradient(circle at 45px 9px, #FFFFFF 0 4px, transparent 5px),
    radial-gradient(circle at 75px 9px, #E1A631 0 4px, transparent 5px), radial-gradient(circle at 105px 9px, #C9CED6 0 4px, transparent 5px);
  filter: drop-shadow(0 0 5px rgba(255,215,106,.9)); animation: xmasTwinkle 1.6s ease-in-out infinite alternate;
}
.festive .announce .container::after {
  background-image: radial-gradient(circle at 0 9px, #FFFFFF 0 4px, transparent 5px), radial-gradient(circle at 30px 9px, #E1A631 0 4px, transparent 5px),
    radial-gradient(circle at 60px 9px, #C9CED6 0 4px, transparent 5px), radial-gradient(circle at 90px 9px, #FFD76A 0 4px, transparent 5px);
  filter: drop-shadow(0 0 5px rgba(255,255,255,.85)); animation: xmasTwinkle 1.6s ease-in-out infinite alternate-reverse;
}
@keyframes xmasTwinkle { from { opacity: .35; } to { opacity: 1; } }

/* ---------------------------------------------------- santa hat on the logo (gold + white) */
.festive .navbar-brand { position: relative; }
.festive .navbar-brand::before { content: ""; position: absolute; left: -9px; top: -10px; width: 34px; height: 28px; z-index: 4; transform: rotate(-16deg); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 52'%3E%3Cpath d='M6 40C10 16 26 4 46 6c-6 8-4 18 4 26 4 3 8 6 10 10-18 4-38 4-54-2z' fill='%23E1A631'/%3E%3Cpath d='M6 40c16 6 36 6 54 2 2-6-2-9-6-12-14 4-34 6-48 10z' fill='%23fff'/%3E%3Ccircle cx='50' cy='8' r='7' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); animation: hatSway 3.6s ease-in-out infinite alternate; transform-origin: 20% 90%; }
@keyframes hatSway { from { transform: rotate(-18deg); } to { transform: rotate(-12deg); } }

/* ---------------------------------------------------- small touches (brand colours kept) */
.festive .eyebrow::before { content: "\F56E"; font-family: "bootstrap-icons"; width: auto; height: auto; background: none; font-size: .85rem; line-height: 1; }
.festive .btn-gold { background: linear-gradient(180deg, #F3C766, var(--gold)); }

/* subtle snowfall pattern on inner-page banners */
.festive .page-hero { background-image: radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.7), transparent), radial-gradient(2px 2px at 90px 80px, rgba(255,255,255,.55), transparent), radial-gradient(1.5px 1.5px at 150px 20px, rgba(255,255,255,.6), transparent), radial-gradient(700px 240px at 85% 0%, rgba(225,166,49,.24), transparent 70%), linear-gradient(135deg, #040606 0%, #12161a 100%); background-size: 180px 120px, 180px 120px, 180px 120px, auto, auto; animation: snowDrift 18s linear infinite; }
@keyframes snowDrift { to { background-position: 0 120px, 0 120px, 0 120px, 0 0, 0 0; } }
.festive .page-hero::after { background: repeating-linear-gradient(135deg, var(--gold) 0 12px, #040606 12px 24px); height: 4px; display: block; }

/* ---------------------------------------------------- countdown */
.xmas-count { display: flex; gap: .5rem; margin: 0 0 1rem; }
.xmas-count span { min-width: 58px; text-align: center; background: var(--choc); color: #fff; border-radius: 10px; padding: .45rem .3rem .4rem; line-height: 1; box-shadow: 0 8px 18px -10px rgba(4,6,6,.6); }
.xmas-count span:nth-child(odd) { background: var(--gold); color: var(--choc); }
.xmas-count b { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.xmas-count small { display: block; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; margin-top: .25rem; }

/* ---------------------------------------------------- Christmas gift guide banner */
.xmas-banner { position: relative; overflow: hidden; border-radius: 20px; color: #fff; padding: clamp(1.6rem, 4vw, 3rem); background: radial-gradient(600px 300px at 90% 0%, rgba(225,166,49,.3), transparent 70%), radial-gradient(500px 260px at 0% 100%, rgba(161,163,165,.14), transparent 70%), linear-gradient(135deg, #040606 0%, #12161a 55%, #2A2113 100%); box-shadow: 0 30px 60px -34px rgba(4,6,6,.8); isolation: isolate; }
.xmas-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(2.5px 2.5px at 20px 30px, rgba(255,255,255,.8), transparent), radial-gradient(2px 2px at 110px 90px, rgba(255,255,255,.6), transparent), radial-gradient(3px 3px at 170px 30px, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 60px 120px, rgba(255,255,255,.6), transparent); background-size: 200px 150px; animation: snowDrift2 14s linear infinite; }
@keyframes snowDrift2 { to { background-position: 0 150px; } }
.xmas-banner::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: repeating-linear-gradient(135deg, var(--gold) 0 14px, #040606 14px 28px); }
.xmas-orn { position: absolute; border-radius: 50%; z-index: -1; box-shadow: inset -8px -10px 18px rgba(0,0,0,.3), inset 8px 8px 14px rgba(255,255,255,.4), 0 14px 28px -10px rgba(0,0,0,.6); animation: ornSwing 5s ease-in-out infinite alternate; transform-origin: 50% -80px; }
.xmas-orn::before { content: ""; position: absolute; left: 50%; top: -80px; width: 1px; height: 80px; background: rgba(255,255,255,.45); }
.xmas-orn::after { content: ""; position: absolute; left: 50%; top: -6px; width: 16px; height: 9px; margin-left: -8px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #F3C766, var(--xmas-gold-d)); }
.xmas-orn.o1 { width: 74px; height: 74px; right: 9%; top: 70px; background: radial-gradient(circle at 30% 30%, #FFE59A, var(--gold) 55%, var(--xmas-gold-d)); }
.xmas-orn.o2 { width: 54px; height: 54px; right: 20%; top: 130px; background: radial-gradient(circle at 30% 30%, #F4F6F8, #B7BCC4 55%, #7C828B); animation-delay: -1.4s; }
.xmas-orn.o3 { width: 62px; height: 62px; right: 3%; top: 160px; background: radial-gradient(circle at 30% 30%, #5A5F66, #22262B 55%, #040606); animation-delay: -2.6s; }
@keyframes ornSwing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.xmas-banner .eyebrow { color: var(--xmas-gold-l); } .xmas-banner h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.1; margin: .6rem 0; max-width: 560px; color: #fff; }
.xmas-banner p { color: #C2C2C1; max-width: 520px; margin-bottom: 1.1rem; }
.xmas-banner .btn-light-outline { border-color: rgba(255,255,255,.55); }
.xmas-banner .xmas-count { margin: 1rem 0 1.4rem; } .xmas-banner .xmas-count span { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); box-shadow: none; } .xmas-banner .xmas-count span:nth-child(odd) { background: var(--gold); border-color: var(--gold); color: var(--choc); }
@media (max-width: 767.98px) { .xmas-orn { opacity: .45; transform-origin: 50% -40px; } .xmas-orn.o1 { top: 20px; width: 56px; height: 56px; } .xmas-orn.o2, .xmas-orn.o3 { display: none; } .xmas-orn::before { height: 40px; top: -40px; } }

/* ---------------------------------------------------- footer */
.festive .site-footer { position: relative; }
.festive .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: repeating-linear-gradient(135deg, var(--gold) 0 14px, #040606 14px 28px); }
.xmas-greet { display: inline-flex; align-items: center; gap: .5rem; color: var(--xmas-gold-l); font-weight: 600; }

/* ---------------------------------------------------- snow canvas + toggle */
#snowCanvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1500; }

/* =====================================================================
   More Christmas — pendants, pines, bows, tree, greeting card, sparkles
   ===================================================================== */
/* hanging stars along the top of the hero slider */
.festive .hs { position: relative; }
.festive .hs::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 84px; z-index: 6; pointer-events: none; background-repeat: repeat-x; background-size: 190px 84px; animation: xmasTwinkle 2.4s ease-in-out infinite alternate;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='84' viewBox='0 0 190 84'%3E%3Cg stroke='%23A8732E' stroke-opacity='.75' stroke-width='1.2'%3E%3Cpath d='M24 0v30M92 0v52M150 0v20'/%3E%3C/g%3E%3Cpath d='M24 28l3.5 7.2 7.8 1-5.7 5.5 1.5 7.8L24 45.6l-7.1 3.9 1.5-7.8-5.7-5.5 7.8-1z' fill='%23E1A631'/%3E%3Cpath d='M92 50l3.5 7.2 7.8 1-5.7 5.5 1.5 7.8L92 67.6l-7.1 3.9 1.5-7.8-5.7-5.5 7.8-1z' fill='%23E2E8F0'/%3E%3Cpath d='M150 18l3 6.2 6.8.9-5 4.8 1.3 6.8-6.1-3.4-6.1 3.4 1.3-6.8-5-4.8 6.8-.9z' fill='%23FFD76A'/%3E%3C/svg%3E"); }

/* pine-forest horizon above the footer */
.festive .site-footer::after { content: ""; position: absolute; left: 0; right: 0; top: -43px; height: 44px; pointer-events: none; z-index: 1; background-repeat: repeat-x; background-position: bottom; background-size: 150px 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='44' viewBox='0 0 150 44'%3E%3Cg fill='%23040606'%3E%3Cpath d='M18 44L33 18h-6L40 2l13 16h-6l15 26z'/%3E%3Cpath d='M82 44l11-14h-5l9-14 9 14h-5l11 14z'/%3E%3Cpath d='M118 44l9-11h-4l7-10 7 10h-4l9 11z'/%3E%3C/g%3E%3Cg fill='%23E1A631'%3E%3Ccircle cx='40' cy='13' r='1.5'/%3E%3Ccircle cx='34' cy='27' r='1.5'/%3E%3Ccircle cx='47' cy='31' r='1.5'/%3E%3Ccircle cx='97' cy='24' r='1.4'/%3E%3Ccircle cx='91' cy='34' r='1.4'/%3E%3Ccircle cx='132' cy='31' r='1.3'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.9'%3E%3Ccircle cx='40' cy='5' r='1.8'/%3E%3Ccircle cx='97' cy='18' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); }

/* gold bow on product cards */
.festive .p-media::after { content: ""; position: absolute; left: 50%; top: -3px; width: 44px; height: 30px; margin-left: -22px; z-index: 3; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(4,6,6,.35));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Cpath d='M22 15C13 1 1 3 2 12c1 9 13 6 20 3z' fill='%23E1A631'/%3E%3Cpath d='M22 15C31 1 43 3 42 12c-1 9-13 6-20 3z' fill='%23F3C766'/%3E%3Cpath d='M22 15L14 29M22 15l8 14' stroke='%23A8732E' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='22' cy='14' r='4.6' fill='%23A8732E'/%3E%3C/svg%3E") no-repeat center / contain; }
.festive .pbadges { top: 28px; }

/* sparkle on titles */
.festive .section-title::after { content: "\2726"; display: inline-block; margin-left: .55rem; font-size: .55em; color: var(--gold); vertical-align: middle; animation: starSpin 7s linear infinite; }
@keyframes starSpin { to { transform: rotate(360deg); } }

/* Christmas tree in the gift-guide banner */
.xmas-tree { position: absolute; right: 4%; bottom: -6px; width: clamp(150px, 15vw, 210px); z-index: -1; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.xmas-tree .tw { animation: bulb 1.8s ease-in-out infinite alternate; } .xmas-tree .tw:nth-child(2n) { animation-delay: -.6s; } .xmas-tree .tw:nth-child(3n) { animation-delay: -1.1s; }
.xmas-tree .star { animation: starPulse 2.4s ease-in-out infinite alternate; transform-origin: 100px 22px; }
@keyframes bulb { from { opacity: .35; } to { opacity: 1; } } @keyframes starPulse { from { transform: scale(.92); filter: drop-shadow(0 0 4px #FFD76A); } to { transform: scale(1.1); filter: drop-shadow(0 0 12px #FFD76A); } }
.xmas-orn.o1 { right: 24%; } .xmas-orn.o2 { right: 33%; } .xmas-orn.o3 { right: 41%; }
@media (max-width: 991.98px) { .xmas-tree { opacity: .55; } .xmas-orn.o3 { display: none; } }
@media (max-width: 767.98px) { .xmas-tree { display: none; } }

/* greeting card */
.xmas-greet-card { position: fixed; left: 50%; bottom: 22px; z-index: 1700; width: min(440px, calc(100% - 24px)); display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 16px; background: radial-gradient(300px 120px at 100% 0%, rgba(225,166,49,.28), transparent 70%), #040606; color: #fff; border: 1px solid rgba(225,166,49,.55); box-shadow: 0 24px 50px -16px rgba(0,0,0,.7); transform: translate(-50%, 30px); opacity: 0; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.xmas-greet-card.in { transform: translate(-50%, 0); opacity: 1; }
.xmas-greet-card strong { font-size: 1.05rem; color: #FFD76A; } .xmas-greet-card p { color: #C2C2C1; font-size: .86rem; margin: .15rem 0 .65rem; }
.xg-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: linear-gradient(135deg, #F3C766, var(--xmas-gold-d)); color: var(--choc); }
.xg-x { position: absolute; right: 10px; top: 8px; border: 0; background: none; color: #8a8b8f; font-size: .8rem; padding: 4px; cursor: pointer; } .xg-x:hover { color: #fff; }
@media (max-width: 575.98px) { .xmas-greet-card { bottom: 66px; } }

/* cursor sparkles */
.xspark { position: fixed; z-index: 2000; width: var(--sz, 9px); height: var(--sz, 9px); margin: calc(var(--sz, 9px) / -2) 0 0 calc(var(--sz, 9px) / -2); pointer-events: none; background: #FFD76A; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 3px rgba(255,215,106,.9)); animation: sparkFall .95s ease-out forwards; }
.xspark.silver { background: #F4F6F8; filter: drop-shadow(0 0 3px rgba(255,255,255,.9)); }
@keyframes sparkFall { to { transform: translate(var(--dx, 0), 34px) rotate(140deg) scale(.2); opacity: 0; } }

/* snow button now sits above the WhatsApp button (left) */
@media (max-width: 575.98px) { 
/* Mobile: keep decorations off the content */
@media (max-width: 767.98px) {
  .festive .hs::before { display: none; }
  .xmas-greet-card { padding: .8rem .9rem; }
  .xmas-greet-card p { display: none; }
  .xmas-greet-card .xg-ic { width: 38px; height: 38px; font-size: 1.1rem; }
  .festive .section-title::after { font-size: .5em; }
}