/** Shopify CDN: Minification failed

Line 218:2 Unexpected "30%"
Line 221:2 Unexpected "60%"
Line 224:2 Unexpected "100%"
Line 227:0 Unexpected "}"

**/

:root {
  --rosso: #d62828;
  --verde: #2a9d8f;
  --oro: #f4c95d;
}

/* sfondo chiaro con accenti rosso/verde */
body {
  background: linear-gradient(180deg,#fff 0%,#fff7f7 40%,#f0fff5 100%);
  color:#1a1a1a;
}

/* neve */
body::before,body::after{
  content:"";
  position:fixed; inset:-50px 0 0 0;
  pointer-events:none;
  background-repeat:repeat;
  background-size:220px 220px;
  z-index:1;
}
body::before{
  background-image:
    radial-gradient(2px 2px at 20px 30px,rgba(255,255,255,0.9)50%,transparent 51%),
    radial-gradient(2px 2px at 120px 80px,rgba(255,255,255,0.9)50%,transparent 51%),
    radial-gradient(2px 2px at 200px 40px,rgba(255,255,255,0.9)50%,transparent 51%);
  animation:neve1 28s linear infinite;
}
body::after{
  background-image:
    radial-gradient(3px 3px at 60px 10px,rgba(255,255,255,0.9)40%,transparent 55%),
    radial-gradient(4px 4px at 180px 90px,rgba(255,255,255,0.9)40%,transparent 55%),
    radial-gradient(3px 3px at 260px 50px,rgba(255,255,255,0.9)40%,transparent 55%);
  animation:neve2 16s linear infinite;
}

@keyframes neve1 {0%{transform:translateY(-40px);}100%{transform:translateY(60px);}}
@keyframes neve2 {0%{transform:translateY(-60px);}100%{transform:translateY(80px);}}

/* banner */
.christmas-banner{
  background:linear-gradient(90deg,var(--rosso),var(--verde));
  color:#fff; padding:0.7rem; text-transform:uppercase;
  display:flex; gap:0.7rem; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

/* header, .site-header, .header-wrapper{background: var(--verde);}
  border-bottom:3px solid var(--rosso);
}
header, .site-header, .header-wrapper{background: var(--verde);}
  color:#fff!important;
  border-radius:999px; padding:0.6rem 1.2rem;
  border:2px solid var(--oro)!important;
}
button:hover{opacity:0.9;}

/* card prodotto */
.product-card,.card{
  border:2px solid var(--verde);
  background:#ffffffd9;
  box-shadow:0 8px 22px rgba(0,0,0,0.15);
}
.product-card:hover{transform:translateY(-4px);}

/* badge sconto */
.badge{background:var(--rosso); color:#fff;}

/* titoli */
h1,h2,h3{color:var(--rosso); text-shadow:0 0 8px rgba(0,0,0,0.15);}
h1::after,h2::after{
  content:""; display:block; width:70px; height:4px;
  margin:0.4rem auto;
  background:linear-gradient(90deg,var(--rosso),var(--oro),var(--verde));
}

/* footer */
footer{background:#fff8f8; border-top:3px solid var(--verde);}

/* hero natalizia già esistente – mantiene rosso/verde */
.christmas-hero{
  background:linear-gradient(135deg,#fff,#ffeaea 40%,#eafff4 100%);
  border:3px solid var(--rosso);
}
.christmas-hero__tag{background:var(--verde); color:#fff;}



/* FORZA COLORI TASTI NATALIZI */
:is(button, .button, .btn, .shopify-payment-button__button) {
  background: linear-gradient(135deg, #d62828, #0B5C2C) !important;
  color: #ffffff !important;
  border: 2px solid #f4c95d !important;
  border-radius: 999px !important;
  padding: 0.7rem 1.4rem !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25) !important;
}
:is(button, .button, .btn, .shopify-payment-button__button):hover {
  opacity: 0.9 !important;
  transform: translateY(-2px) !important;
}



/* ===============================
   FORZA TUTTI I TASTI PRINCIPALI
   - Pulsante "Aggiungi al carrello"
   - Pulsante "Compra ora"
   - Pulsanti carrello e carrello laterale
   - Pulsanti di pagamento rapido
   =============================== */

:is(
  .product-form__submit,
  .product-form button,
  .product__info-container button,
  .product__info-container .button,
  .shopify-payment-button__button,
  .shopify-payment-button__button--unbranded,
  .cart__checkout-button,
  .cart__buttons .button,
  .cart-drawer__checkout,
  .cart-drawer__footer button,
  .cart-drawer__footer .button,
  .cart__dynamic-checkout-buttons .shopify-payment-button__button,
  .card-wrapper .button,
  .product-card .button,
  .product-card button
) {
  background: linear-gradient(135deg, #d62828, #0B5C2C) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  border: 2px solid #f4c95d !important;
  padding: 0.7rem 1.5rem !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.28) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

:is(
  .product-form__submit,
  .product-form button,
  .product__info-container button,
  .product__info-container .button,
  .shopify-payment-button__button,
  .shopify-payment-button__button--unbranded,
  .cart__checkout-button,
  .cart__buttons .button,
  .cart-drawer__checkout,
  .cart-drawer__footer button,
  .cart-drawer__footer .button,
  .cart__dynamic-checkout-buttons .shopify-payment-button__button,
  .card-wrapper .button,
  .product-card .button,
  .product-card button
):hover {
  opacity: 0.92 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.35) !important;
}


/* ============================================
   SLITTA ANIMATA CON BABBO NATALE E RENNE
   ============================================ */


.christmas-sleigh {
  position: fixed;
  bottom: 60px;
  right: -260px;
  width: 260px;
  height: 120px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 9999;
  pointer-events: none;
  animation: sleigh-flight 14s linear infinite;
  will-change: transform;
  opacity: 1;
}


/* leggera ombra sotto la slitta */
.christmas-sleigh::after {
  content: "";
  position: absolute;
  inset: auto 20px -10px 20px;
  height: 16px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0, transparent 60%);
  filter: blur(4px);
  opacity: 0.65;
}


@keyframes sleigh-flight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-70vw);
  }
  100% {
    transform: translateX(-140vw);
  }
}

  30% {
    transform: translateX(-70vw) translateY(-8px) scale(1.02);
  }
  60% {
    transform: translateX(-140vw) translateY(4px) scale(1.04);
  }
  100% {
    transform: translateX(-210vw) translateY(0) scale(1.02);
  }
}

/* versione mobile: slitta più piccola e più in alto */

@media (max-width: 749px) {
  .christmas-sleigh {
    bottom: 90px;
    width: 200px;
    height: 90px;
    animation-duration: 12s;
  }
}
