/*!
 * Christmas layer — christmas.css
 * Plain, hand-written CSS (no build step), loaded only while the "Enable
 * Christmas theme" toggle on Site Configuration is on — see
 * functions/christmas-theme.php. Sits on top of the seasonal kit
 * (seasonal.css/js); christmas.js adds the extra builders used below.
 * Everything is scoped under body.christmas-theme-active.
 */

/* ---------------------------------------------------------------------
   Header (templates/header.php) — a dark night-sky bar so the lights
   glow, with fairy-light bunting along the top edge, icicles hanging off
   the bottom edge and a few baubles swinging below it. All three are
   pointer-events:none, so the nav and search stay fully clickable.
   --------------------------------------------------------------------- */
body.christmas-theme-active .header {
  background-color: #14181d;
}
.sd-deco.sd-fairylights {
  position: absolute; left: 0; right: 0; top: 0; height: 40px; z-index: 1;
}
.sd-deco.sd-icicles {
  position: absolute; left: 0; right: 0; top: 100%; height: 54px; z-index: 20;
}
.sd-deco.sd-hangbaubles {
  position: absolute; left: 0; right: 0; top: 100%; height: 90px; z-index: 21;
}
@media screen and (max-width: 800px) {
  .sd-deco.sd-icicles { height: 34px; }
  .sd-deco.sd-hangbaubles { display: none; }
}

.sd-fairylights .sway { animation: bbx-bunting-sway 7s ease-in-out infinite; transform-origin: 50% 0; }
.sd-fairylights .halo { transform-box: fill-box; transform-origin: center; mix-blend-mode: screen;
  animation: bbx-halo 2.6s ease-in-out infinite; }
.sd-fairylights .glass,
.bb-xmas-bulb { animation: bbx-bulb 2.6s ease-in-out infinite; }
@keyframes bbx-bulb { 0%, 100% { opacity: 1; } 45% { opacity: .32; } }
@keyframes bbx-halo { 0%, 100% { opacity: .75; transform: scale(1); } 45% { opacity: .12; transform: scale(.72); } }
@keyframes bbx-bunting-sway { 0%, 100% { transform: translateY(0) rotate(-.25deg); } 50% { transform: translateY(2px) rotate(.25deg); } }

/* Shadow so the icicles still read where the page below the header is white. */
.sd-icicles svg { filter: drop-shadow(0 1px 1.5px rgba(70, 100, 135, .45)); }
.sd-icicles .drip { opacity: 0; animation: bbx-drip 5.2s cubic-bezier(.4, 0, .9, 1) infinite; }
@keyframes bbx-drip {
  0%, 78% { opacity: 0; transform: translateY(0); }
  80%     { opacity: 1; transform: translateY(0); }
  96%     { opacity: 1; transform: translateY(40px); }
  100%    { opacity: 0; transform: translateY(46px); }
}

.sd-hangbaubles .bauble { position: absolute; top: 0; transform-origin: 50% 0;
  animation: bbx-swing 4.6s ease-in-out infinite; }
.sd-hangbaubles .bauble svg { width: auto; height: auto; }
@keyframes bbx-swing { 0%, 100% { transform: rotate(-5.5deg); } 50% { transform: rotate(5.5deg); } }

/* ---------------------------------------------------------------------
   Side gutters (bb_christmas_gutters()) — the same fixed side rails a
   sales-period takeover uses; header.php only prints the Christmas ones
   when no takeover is active. Inline SVG instead of a background image.
   --------------------------------------------------------------------- */
body.christmas-theme-active .gutter.bb-xmas-gutter {
  z-index: 101;           /* above .footer's own z-index:100 */
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}
.bb-xmas-gutter svg { display: block; width: 100%; height: 100%; }
.bb-xmas-gutter__sway { transform-origin: 50% 0; animation: bbx-gutter-sway 9s ease-in-out infinite; }
.gutter__right .bb-xmas-gutter__sway { animation-duration: 11s; animation-direction: reverse; }
@keyframes bbx-gutter-sway { 0%, 100% { transform: rotate(-.5deg) translateX(-3px); } 50% { transform: rotate(.5deg) translateX(3px); } }

/* ---------------------------------------------------------------------
   Red image-button block (gutenberg-blocks/image-button-block.php) — the
   kit's own "snow" strip fills the red panel behind the heading/link.
   The block's stylesheet styles every inner div (red background, 40px
   padding, flex), so the snow host is reset back to a plain layer.
   --------------------------------------------------------------------- */
.image-button-block-desktop > div {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.image-button-block-desktop > div > *:not(.sd-deco) {
  position: relative;
  z-index: 2;
}
.image-button-block-desktop > div > .sd-deco.sd-snow {
  display: block;
  padding: 0;
  background: none;
  height: auto;
}

/* ---------------------------------------------------------------------
   Single product image (single-product.php) — Christmas frame as a CSS
   background (christmas-product-frame.svg, the twin of
   halloween-product-frame.avif) plus a frosted-corner overlay that fades
   in once the image is on screen. The frost sits under the packshot and
   the price roundel so it never covers anything that matters.
   --------------------------------------------------------------------- */
body.christmas-theme-active .page-singleproduct__image {
  overflow: hidden;
  isolation: isolate;
  background: url('../images/christmas-product-frame.svg') no-repeat center / cover, #8a0410;
}
body.christmas-theme-active .page-singleproduct__image picture,
body.christmas-theme-active .page-singleproduct__image img {
  position: relative;
  z-index: 2;
}
.bb-xmas-frost {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.1s ease;
  background:
    radial-gradient(110px 90px at 0% 0%, rgba(255,255,255,.95), rgba(214,232,248,.6) 45%, rgba(255,255,255,0) 72%),
    radial-gradient(110px 90px at 100% 0%, rgba(255,255,255,.92), rgba(214,232,248,.55) 45%, rgba(255,255,255,0) 72%),
    radial-gradient(130px 100px at 100% 100%, rgba(255,255,255,.88), rgba(214,232,248,.5) 46%, rgba(255,255,255,0) 74%),
    radial-gradient(110px 90px at 0% 100%, rgba(255,255,255,.88), rgba(214,232,248,.5) 46%, rgba(255,255,255,0) 74%);
}
.bb-xmas-frost svg { display: block; width: 100%; height: 100%; }
.bb-xmas-frost.is-in { opacity: .6; }

/* ---------------------------------------------------------------------
   Related products (single-product.php) — snow dusting across the top of
   the section and a snow cap on each card. The cap is a pseudo-element so
   it also lands on the clones slick makes for the infinite carousel.
   --------------------------------------------------------------------- */
body.christmas-theme-active .page-singleproduct__related-products {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: linear-gradient(180deg, #e3ecf6 0, rgba(227, 236, 246, 0) 120px);
}
body.christmas-theme-active .page-singleproduct__related-products > .resp-width-cont {
  position: relative;
  z-index: 2;
}
.page-singleproduct__related-products > .sd-deco.sd-snow {
  --sd-flake: #b9cde2;
  height: 160px;
}
/* Cards get a lighter cousin of the product-image frame: brand-red
   spotlight with soft snow bokeh, no icons and no bottom drift (at
   thumbnail size those read as clutter in front of the product). */
body.christmas-theme-active .page-singleproduct__related-products .slider-item,
body.christmas-theme-active .page-singleproduct__related-products .slider-item:hover {
  position: relative;
  display: block;
  margin: 14px 10px 0;
  padding-bottom: 14px;
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 24%, rgba(255,255,255,.16) 0, rgba(255,255,255,0) 11px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.14) 0, rgba(255,255,255,0) 9px),
    radial-gradient(circle at 64% 56%, rgba(255,255,255,.09) 0, rgba(255,255,255,0) 14px),
    radial-gradient(circle at 31% 70%, rgba(255,255,255,.11) 0, rgba(255,255,255,0) 8px),
    radial-gradient(circle at 89% 74%, rgba(255,255,255,.11) 0, rgba(255,255,255,0) 7px),
    radial-gradient(circle at 7% 80%, rgba(255,255,255,.1) 0, rgba(255,255,255,0) 6px),
    radial-gradient(44% 44% at 50% 44%, rgba(255,255,255,.18), rgba(255,255,255,0)),
    radial-gradient(80% 80% at 50% 40%, #e30613 0, #c40511 55%, #6e0310 100%);
}
body.christmas-theme-active .page-singleproduct__related-products .slider-item .txt-grid-item-name {
  color: #fff;
}
body.christmas-theme-active .page-singleproduct__related-products .slider-item::before {
  content: '';
  position: absolute; left: -2px; right: -2px; top: -2px; height: 24px; z-index: 3;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,26 V11 C18,3 32,13 50,8 C70,2 84,12 102,7 C122,1 138,11 158,7 C180,2 194,12 212,8 C234,3 248,13 266,8 C280,4 290,9 300,7 V26 Z'/%3E%3Cpath fill='%23fff' d='M64,15 l3.4,0 l-1.7,8 z M152,14 l3.8,0 l-1.9,9 z M238,15 l3.4,0 l-1.7,7.5 z'/%3E%3C/svg%3E") no-repeat center top / 100% 100%;
  filter: drop-shadow(0 3px 2.5px rgba(108, 142, 178, .5));
}

/* ---------------------------------------------------------------------
   Footer village (templates/footer.php, bb_christmas_village_scene()) —
   the scene fills the bottom of the footer; the footer gets the same
   deep-red gradient Halloween used plus extra bottom padding so the
   links and copyright sit in the night sky above the rooftops.
   On desktop the scene box is 30vw tall, which is exactly the SVG's
   1600x480 aspect, so it scales with the page width; its tallest firs
   reach ~21% of the width up from the bottom, hence the 21vw padding
   (plus a little breathing room) to keep the text clear of them.
   --------------------------------------------------------------------- */
body.christmas-theme-active .footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-bottom: max(260px, calc(21vw + 30px));
  background: linear-gradient(180deg, #1c0508 0, #1c0508 30%, #e30613) !important;
}
body.christmas-theme-active .footer > *:not(.sd-deco) {
  position: relative;
  z-index: 2;
}
.bb-xmas-village {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30vw; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.bb-xmas-village svg { display: block; width: 100%; height: 100%; }
@media screen and (max-width: 1024px) {
  body.christmas-theme-active .footer { padding-bottom: 260px; }
  .bb-xmas-village { height: 380px; }
}

.bbx-win   { animation: bbx-win 6s steps(1, end) infinite; }
@keyframes bbx-win { 0%, 88% { opacity: 1; } 90% { opacity: .35; } 92% { opacity: 1; } 94% { opacity: .5; } 96% { opacity: 1; } }
.bbx-cloud { animation: bbx-cloud 70s linear infinite; }
.bbx-cloud--slow { animation-duration: 110s; animation-direction: reverse; }
@keyframes bbx-cloud { 0% { transform: translateX(-140px); } 100% { transform: translateX(140px); } }
.bbx-smoke { animation: bbx-smoke 7s ease-out infinite; transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; }
@keyframes bbx-smoke { 0% { opacity: 0; transform: translateY(0) scale(.5); } 22% { opacity: .5; } 100% { opacity: 0; transform: translateY(-62px) scale(2.1); } }
.bbx-lamp  { animation: bbx-lamp 4.2s ease-in-out infinite; }
@keyframes bbx-lamp { 0%, 100% { opacity: .85; } 42% { opacity: .62; } 70% { opacity: .95; } }
.bbx-moon-glow { animation: bbx-moon 9s ease-in-out infinite; }
@keyframes bbx-moon { 0%, 100% { opacity: .5; } 50% { opacity: .78; } }
.bbx-sign  { animation: bbx-sign 5.5s ease-in-out infinite; }
@keyframes bbx-sign { 0%, 100% { opacity: 1; } 48% { opacity: .72; } 50% { opacity: 1; } 52% { opacity: .8; } }
.bbx-robin { animation: bbx-robin 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes bbx-robin { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
.bbx-vsnow { animation: bbx-vsnow linear infinite; }
@keyframes bbx-vsnow { 0% { transform: translateY(-30px); } 100% { transform: translateY(560px); } }

/* ---------------------------------------------------------------------
   Pausing + reduced motion. The kit pauses any [data-sd] host that's off
   screen (.sd-paused); the static scenes above follow the same rule.
   --------------------------------------------------------------------- */
.bb-xmas-village.sd-paused *,
.bb-xmas-gutter.sd-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .bb-xmas-gutter *,
  .bb-xmas-village *,
  .sd-fairylights *,
  .sd-icicles *,
  .sd-hangbaubles * { animation: none !important; }
  .sd-icicles .drip,
  .bbx-vsnow { display: none; }
  .bb-xmas-frost { transition: none; }
}