/**
 * Silver 0.9.387 — responsive backdrop + independently starting background bats.
 * No changes to the homepage carousel, hero, commerce logic or approved palette.
 */
body.silver-theme.slv-hw-background {
  isolation: isolate;
  background: #100b19;
  --slv-hw-shade: .43;
  --slv-hw-flight-y: 88px;
}
body.silver-theme.slv-hw-background--soft { --slv-hw-shade: .61; }
body.silver-theme.slv-hw-background--vivid { --slv-hw-shade: .26; }
.slv-hw-background .slv-hw-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none !important;
  user-select: none;
  background: #171021;
  contain: strict;
}
.slv-hw-background .slv-hw-scene * { pointer-events: none !important; }
.slv-hw-scene__picture { position: absolute; inset: 0; display: block; }
.slv-hw-background .slv-hw-scene__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  /* Do not apply blur, filters, zoom transforms or lazy-load placeholders. */
  filter: none;
  transform: none;
  opacity: 1;
}
.slv-hw-background .slv-hw-scene__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(15,10,23,var(--slv-hw-shade)),rgba(15,10,23,var(--slv-hw-shade))),
    radial-gradient(ellipse at 50% 48%,rgba(15,10,23,.30),transparent 73%),
    linear-gradient(180deg,rgba(15,10,23,.12),transparent 32%,rgba(15,10,23,.30));
}
body.slv-hw-background :is(.slv-home--marketplace,.slv-shop-page,.slv-product-page,.slv-hardware-page) {
  background: transparent !important;
}
/* Keep a small clear flight lane ABOVE, not on, the unchanged carousel.
 * This changes only its outer top spacing while bats are enabled (no slide
 * sizing, cropping, options, carousel JS or banner assets are changed). */
body.slv-hw-background.slv-hw-background--bats .slv-home--marketplace { padding-top: 30px !important; }
/* Same readable content surfaces as 0.9.380. */
body.slv-hw-background:not(.slv-halloween-catalog) :is(.slv-product-page,.slv-hardware-page) > .slv-product-container,
body.slv-hw-background #content.slv-container,
body.slv-hw-background #content.slv-page,
body.slv-hw-background:not(.slv-halloween-catalog) .slv-shop-page > .slv-shop-container {
  background-color: rgba(246,246,251,.98) !important;
  border-radius: 18px;
}
body.slv-hw-background:not(.slv-halloween-catalog) .slv-home--marketplace .slv-sec {
  background-color: rgba(246,246,251,.98);
  border-radius: 18px;
}
body.slv-hw-background.slv-auth-body .slv-auth__rail { background: rgba(17,10,25,.62); }

/* Silver 0.9.385 — transparent outer My Account shell, NOT transparent cards.
 * .slv-hw-background is present here even though .slv-halloween is not.
 * #content.slv-container is the actual pale wrapper painted earlier in this file.
 * Do not set opacity on a container: that would also fade forms and text.
 */
body.silver-theme.slv-hw-background.slv-hw-account-shell #content.slv-container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.silver-theme.slv-hw-background.slv-hw-account-shell #content.slv-container > .woocommerce,
body.silver-theme.slv-hw-background.slv-hw-account-shell :is(
  .slv-account-page, .slv-account-layout, .slv-account-content,
  .slv-account-sidebar, .slv-account-nav, .slv-account-nav__items,
  .slv-rewards-overview-grid
) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Sidebar labels now sit over the dark illustration, not the old pale panel. */
body.silver-theme.slv-hw-background.slv-hw-account-shell :is(
  .slv-account-nav__item:not(.is-active), .slv-account-nav__logout
) {
  color: #f4edf9;
  text-shadow: 0 1px 3px rgba(8,4,15,.85);
}
body.silver-theme.slv-hw-background.slv-hw-account-shell :is(
  .slv-account-nav__item:not(.is-active):hover, .slv-account-nav__logout:hover
) {
  color: #ffd3b6;
  background: rgba(35,22,45,.88);
}
body.silver-theme.slv-hw-background.slv-hw-account-shell .slv-account-nav__logout {
  border-top-color: rgba(242,226,252,.24);
}
body.silver-theme.slv-hw-background.slv-hw-account-shell :is(
  .slv-account-nav__item, .slv-account-nav__logout
):focus-visible {
  outline: 2px solid #ffbc89;
  outline-offset: 3px;
}
/* Only headings OUTSIDE white content cards need a light text colour. */
body.silver-theme.slv-hw-background.slv-hw-account-shell :is(
  .slv-account-breadcrumb, .slv-account-breadcrumb a, .slv-account-breadcrumb span,
  .slv-account-orders > .slv-account-section-head h2,
  .slv-account-notifications > form > h2,
  .slv-rewards-page > .slv-rewards-page__head h2,
  .slv-rewards-page > .slv-rewards-page__head p,
  .slv-points-page > .slv-points-footnote
) {
  color: #f4edf9;
  text-shadow: 0 1px 3px rgba(8,4,15,.85);
}
body.silver-theme.slv-hw-background.slv-hw-account-shell .slv-account-nav__item.is-active {
  text-shadow: none;
}
/* Keep hard-copy/high-contrast navigation legible without the illustration. */
@media print, (forced-colors: active) {
  body.silver-theme.slv-hw-background.slv-hw-account-shell :is(
    .slv-account-nav__item, .slv-account-nav__logout,
    .slv-account-breadcrumb, .slv-account-breadcrumb a, .slv-account-breadcrumb span,
    .slv-account-orders > .slv-account-section-head h2,
    .slv-account-notifications > form > h2,
    .slv-rewards-page > .slv-rewards-page__head h2,
    .slv-rewards-page > .slv-rewards-page__head p,
    .slv-points-page > .slv-points-footnote
  ) {
    color: CanvasText;
    background: transparent;
    text-shadow: none;
  }
}

/* Silver 0.9.387 — transparent CHECKOUT outer shell only.
 * This stylesheet is enqueued on protected checkout pages; halloween-surfaces.css
 * is not. Do not depend on .slv-halloween or make payment cards translucent.
 * PHP scopes this to the normal Silver checkout, never order-pay/thank-you/auth.
 * No geometry, form opacity, pointer events or commerce behaviour is changed.
 */
body.silver-theme.slv-hw-background.slv-hw-checkout-shell #content.slv-wc-page--checkout.slv-container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Clear only layout wrappers. Deliberately exclude .slv-checkout-card,
 * .slv-checkout-sidebar__inner (#order_review), notices and native payment boxes.
 */
body.silver-theme.slv-hw-background.slv-hw-checkout-shell #content.slv-wc-page--checkout.slv-container > .woocommerce,
body.silver-theme.slv-hw-background.slv-hw-checkout-shell #content.slv-wc-page--checkout.slv-container :is(
  form.slv-checkout-form, .slv-checkout-page, .slv-checkout-layout,
  .slv-checkout-main, .slv-checkout-sidebar
) {
  background: transparent !important;
}
/* Some stores enable these headings outside the white cards. */
body.silver-theme.slv-hw-background.slv-hw-checkout-shell .slv-checkout-page > :is(
  .slv-checkout-title, .slv-checkout-breadcrumb
),
body.silver-theme.slv-hw-background.slv-hw-checkout-shell .slv-checkout-page > .slv-checkout-breadcrumb :is(a, span, .slv-ico) {
  color: #f4edf9;
  text-shadow: 0 1px 3px rgba(8,4,15,.85);
}
body.silver-theme.slv-hw-background.slv-hw-checkout-shell .slv-checkout-page > .slv-checkout-breadcrumb a:focus-visible {
  outline: 2px solid #ffbc89;
  outline-offset: 3px;
}
@media print, (forced-colors: active) {
  body.silver-theme.slv-hw-background.slv-hw-checkout-shell .slv-checkout-page > :is(
    .slv-checkout-title, .slv-checkout-breadcrumb
  ),
  body.silver-theme.slv-hw-background.slv-hw-checkout-shell .slv-checkout-page > .slv-checkout-breadcrumb :is(a, span, .slv-ico) {
    color: CanvasText;
    text-shadow: none;
  }
}

/* The top pair crosses the exposed gap UNDER the header, above the first banner.
 * Two edge paths remain noticeable where opaque product cards cover the centre.
 * Every bat remains inside the negative-z background; never over store controls. */
.slv-hw-scene__bats { position: absolute; inset: 0; overflow: hidden; }
.slv-hw-bat {
  --bat-size: 54px;
  --bat-duration: 20s;
  --bat-delay: -5s;
  position: absolute;
  left: 0;
  top: var(--slv-hw-flight-y);
  display: block;
  width: var(--bat-size);
  height: calc(var(--bat-size)*.475);
  color: #100818;
  opacity: .95;
  /* Old browsers without :has and without JS get a single sub-5s flyby. */
  animation: slv-hw-bat-cross 4.8s linear -.9s 1 both;
}
.slv-hw-bat__shape {
  display: block; width: 100%; height: 100%; overflow: visible;
  fill: currentColor; stroke: #d69579; stroke-width: .7;
  stroke-linejoin: round;
}
.slv-hw-bat__wing { transform-box: fill-box; }
.slv-hw-bat__wing--left { transform-origin: right center; }
.slv-hw-bat__wing--right { transform-origin: left center; }
.slv-hw-bat--2 {
  --bat-size: 45px; --bat-duration: 27s; --bat-delay: -18s;
  top: var(--slv-hw-flight-y-secondary, calc(var(--slv-hw-flight-y) + 3px));
  animation-direction: reverse;
}
.slv-hw-bat--3 {
  --bat-size: 52px; --bat-duration: 24s; --bat-delay: -8s;
  top: 0; left: max(-8px, calc((100vw - 1440px)/4));
  animation-name: slv-hw-bat-edge;
}
.slv-hw-bat--4 {
  --bat-size: 47px; --bat-duration: 30s; --bat-delay: -21s;
  top: 0; left: auto; right: max(-6px, calc((100vw - 1440px)/4));
  animation-name: slv-hw-bat-edge;
  animation-direction: reverse;
}
.slv-hw-bat--5 { --bat-size: 43px; --bat-duration: 32s; --bat-delay: -23s; top: 62%; }
.slv-hw-bat--6 { --bat-size: 37px; --bat-duration: 35s; --bat-delay: -11s; top: 83%; animation-direction: reverse; }
@keyframes slv-hw-bat-cross {
  0% { transform: translate3d(-80px,0,0) rotate(-3deg); opacity: 0; }
  6% { opacity: .95; }
  25% { transform: translate3d(23vw,-2px,0) rotate(2deg); }
  50% { transform: translate3d(51vw,2px,0) rotate(-2deg); }
  75% { transform: translate3d(79vw,-1px,0) rotate(3deg); opacity: .95; }
  95%,100% { transform: translate3d(calc(100vw + 80px),1px,0) rotate(-2deg); opacity: 0; }
}
@keyframes slv-hw-bat-edge {
  0% { transform: translate3d(0,8vh,0) rotate(-12deg); opacity: 0; }
  8% { opacity: .94; }
  35% { transform: translate3d(3px,36vh,0) rotate(10deg); }
  65% { transform: translate3d(-3px,65vh,0) rotate(-8deg); opacity: .94; }
  90% { opacity: .94; }
  100% { transform: translate3d(0,98vh,0) rotate(10deg); opacity: 0; }
}
@keyframes slv-hw-bat-flap { from { transform: scaleY(.35); } to { transform: scaleY(1); } }

/* CSS-only continuous animation has a native, keyboard-accessible pause control.
 * It does not depend on the optional script, its loading order or cache delays. */
@supports selector(body:has(input:checked)) {
  body:has([data-slv-hw-motion-toggle]) .slv-hw-bat {
    animation-duration: var(--bat-duration);
    animation-delay: var(--bat-delay);
    animation-iteration-count: infinite;
  }
  body:has([data-slv-hw-motion-toggle]) .slv-hw-bat__wing {
    animation: slv-hw-bat-flap .40s ease-in-out infinite alternate;
  }
  body:has([data-slv-hw-motion-toggle]:checked) .slv-hw-scene__bats { visibility: hidden; }
  body:has([data-slv-hw-motion-toggle]:checked) :is(.slv-hw-bat,.slv-hw-bat__wing) { animation-play-state: paused; }
}
/* Also supports browsers without :has after the small enhancement loads. */
.slv-hw-scene[data-motion-ready="1"] .slv-hw-bat {
  animation-duration: var(--bat-duration); animation-delay: var(--bat-delay); animation-iteration-count: infinite;
}
.slv-hw-scene[data-motion-ready="1"] .slv-hw-bat__wing { animation: slv-hw-bat-flap .40s ease-in-out infinite alternate; }
.slv-hw-scene[data-motion="paused"] .slv-hw-scene__bats { visibility: hidden; }
.slv-hw-scene[data-motion="paused"] :is(.slv-hw-bat,.slv-hw-bat__wing) { animation-play-state: paused; }
.slv-hw-motion-control { margin: 0; padding: 12px 24px 16px; text-align: end; background: #100b19; }
.slv-hw-motion-control__label {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 7px 12px; border: 1px solid #594162; border-radius: 8px;
  color: #d4c8de; background: #201729; font: inherit; font-size: 12px; line-height: 1.5; cursor: pointer;
}
.slv-hw-motion-control__label:hover { color: #ffe0c2; border-color: #cc9a9d; }
.slv-hw-motion-control__label:focus-within { outline: 2px solid #ffd4a1; outline-offset: 3px; }
.slv-hw-motion-control__label input {
  appearance: auto; -webkit-appearance: checkbox; position: static; display: inline-block;
  width: 18px; height: 18px; margin: 0; opacity: 1; flex: 0 0 18px; accent-color: #ffab72;
}
@media (max-width: 760px) {
  body.silver-theme.slv-hw-background { --slv-hw-flight-y: 80px; }
  .slv-hw-bat { --bat-size: 43px; --bat-duration: 17s; }
  .slv-hw-bat--2 { --bat-size: 36px; --bat-duration: 23s; }
  .slv-hw-bat--3 { --bat-size: 39px; --bat-duration: 22s; left: -8px; }
  .slv-hw-bat--4 { --bat-size: 37px; --bat-duration: 26s; right: -7px; }
  .slv-hw-bat--5,.slv-hw-bat--6 { display: none; animation: none !important; }
  .slv-hw-bat--5 .slv-hw-bat__wing,.slv-hw-bat--6 .slv-hw-bat__wing { animation: none !important; }
  .slv-hw-motion-control { padding-inline: 16px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .slv-hw-background .slv-hw-scene { background: linear-gradient(180deg,#291329,#171021 75%,#100b19); }
  .slv-hw-background .slv-hw-scene__art {
    inset: 0 0 auto; height: auto; width: 100%; object-fit: contain; object-position: center top;
    /* Portrait picture stays in proportion (normally 150vw high). The bottom
     * fades into the same plum base instead of stretching to the full viewport. */
    -webkit-mask-image: linear-gradient(#000 0%,#000 83%,transparent 100%);
    mask-image: linear-gradient(#000 0%,#000 83%,transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .slv-hw-scene__bats,.slv-hw-motion-control { display: none !important; }
  .slv-hw-bat,.slv-hw-bat__wing { animation: none !important; }
}
@media (forced-colors: active) {
  .slv-hw-background .slv-hw-scene { display: none; }
  body.silver-theme.slv-hw-background { background: Canvas; }
}
@media print {
  .slv-hw-background .slv-hw-scene,.slv-hw-motion-control { display: none !important; }
  body.silver-theme.slv-hw-background { background: white; }
}