/* =========================================================
   EVLI DESKTOP STORE POLISH
   Header, tienda, carrito y checkout desktop
========================================================= */

:root{
  --evli-green:#063f2d;
  --evli-green-2:#0a6f4f;
  --evli-gold:#e3bf4f;
  --evli-cream:#f6f1e7;
  --evli-paper:#fffdf8;
  --evli-muted:#607267;
  --evli-line:rgba(6,63,45,.12);
  --evli-shadow:0 22px 70px rgba(6,63,45,.12);
}

/* HEADER DESKTOP CORREGIDO */
.site-header{
  width:min(1180px, calc(100% - 42px)) !important;
  margin:18px auto !important;
  padding:14px 18px !important;
  border-radius:999px !important;
  background:rgba(255,253,248,.92) !important;
  backdrop-filter:blur(16px) !important;
  box-shadow:0 14px 44px rgba(6,63,45,.10) !important;
  border:1px solid rgba(6,63,45,.10) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  position:sticky !important;
  top:14px !important;
  z-index:999 !important;
}

.site-header .brand{
  display:flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  text-decoration:none !important;
}

.site-header .brand img,
.site-header img.evli-safe-logo{
  width:auto !important;
  height:48px !important;
  max-width:180px !important;
  object-fit:contain !important;
  display:block !important;
}

.nav-links{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}

.nav-links a{
  position:relative !important;
  padding:10px 13px !important;
  border-radius:999px !important;
  color:var(--evli-green) !important;
  text-decoration:none !important;
  font-weight:850 !important;
  transition:all .22s ease !important;
}

.nav-links a:hover{
  color:#fff !important;
  background:linear-gradient(135deg,var(--evli-green),var(--evli-green-2)) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 12px 24px rgba(6,63,45,.18) !important;
}

.nav-actions{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex:0 0 auto !important;
}

.btn,
button.btn,
.cart-button,
.add-to-cart,
.product-bottom .add,
.pay-btn{
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease, background .22s ease !important;
}

.btn:hover,
button.btn:hover,
.cart-button:hover,
.add-to-cart:hover,
.product-bottom .add:hover,
.pay-btn:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 18px 34px rgba(6,63,45,.18) !important;
  filter:saturate(1.08) !important;
}

.cart-button{
  border:1px solid rgba(6,63,45,.12) !important;
  background:#fff !important;
  color:var(--evli-green) !important;
  border-radius:999px !important;
  min-width:54px !important;
  height:46px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
}

.cart-count{
  position:absolute !important;
  top:-7px !important;
  right:-7px !important;
  min-width:22px !important;
  height:22px !important;
  padding:0 6px !important;
  border-radius:999px !important;
  background:var(--evli-gold) !important;
  color:var(--evli-green) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:12px !important;
  font-weight:950 !important;
}

/* BLOQUE GUÍA DE COMPRA */
.evli-buy-flow{
  width:min(1180px, calc(100% - 42px));
  margin:26px auto 20px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

.evli-buy-step{
  background:rgba(255,255,255,.78);
  border:1px solid var(--evli-line);
  border-radius:24px;
  padding:20px;
  box-shadow:0 16px 50px rgba(6,63,45,.08);
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.evli-buy-step b{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--evli-gold),#f5de7a);
  color:var(--evli-green);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
}

.evli-buy-step strong{
  display:block;
  color:var(--evli-green);
  font-size:17px;
  margin-bottom:4px;
}

.evli-buy-step span{
  color:var(--evli-muted);
  font-size:14px;
  line-height:1.35;
}

/* TIENDA MÁS ORDENADA */
.tienda-main{
  padding-top:56px !important;
}

.tienda-featured-kit,
.product-card,
.route-card,
.checkout-card,
.thanks-card{
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}

.tienda-featured-kit:hover,
.product-card:hover,
.route-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 28px 80px rgba(6,63,45,.14) !important;
  border-color:rgba(6,63,45,.20) !important;
}

.tienda-featured-kit{
  border:1px solid rgba(6,63,45,.12) !important;
  box-shadow:var(--evli-shadow) !important;
}

.product-card{
  position:relative !important;
  overflow:hidden !important;
}

.product-card::before{
  content:"Producto EVLI";
  position:absolute;
  left:18px;
  top:18px;
  z-index:3;
  background:rgba(255,255,255,.88);
  color:var(--evli-green);
  border:1px solid rgba(6,63,45,.10);
  border-radius:999px;
  padding:7px 11px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}

.product-card figure{
  background:linear-gradient(180deg,#fff,#f8f3e9) !important;
}

.product-bottom{
  gap:14px !important;
}

.product-bottom .add,
button.add.add-to-cart{
  background:linear-gradient(135deg,var(--evli-green),var(--evli-green-2)) !important;
  color:#fff !important;
  border:0 !important;
  width:48px !important;
  height:48px !important;
  border-radius:999px !important;
  font-size:24px !important;
  font-weight:950 !important;
  cursor:pointer !important;
}

/* CARRITO DESKTOP ORDENADO */
.cart-overlay.active{
  backdrop-filter:blur(6px) !important;
  background:rgba(6,63,45,.28) !important;
}

.cart-panel{
  width:min(460px, calc(100vw - 28px)) !important;
  background:var(--evli-paper) !important;
  border-left:1px solid rgba(6,63,45,.10) !important;
  box-shadow:-28px 0 80px rgba(6,63,45,.18) !important;
}

.cart-head{
  padding:24px 24px 16px !important;
  border-bottom:1px solid var(--evli-line) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.cart-head h3{
  font-size:34px !important;
  color:var(--evli-green) !important;
  margin:0 !important;
}

.close-cart{
  width:44px !important;
  height:44px !important;
  border-radius:999px !important;
  border:1px solid var(--evli-line) !important;
  background:#fff !important;
  color:var(--evli-green) !important;
  font-size:26px !important;
  cursor:pointer !important;
}

.close-cart:hover{
  background:var(--evli-green) !important;
  color:#fff !important;
}

.ref-box{
  margin:18px 24px !important;
  padding:18px !important;
  border-radius:22px !important;
  border:1px solid rgba(6,63,45,.12) !important;
  background:linear-gradient(180deg,#fff,#f8f4ea) !important;
}

.ref-row{
  display:flex !important;
  gap:10px !important;
  margin-top:12px !important;
}

.ref-row input{
  flex:1 !important;
  min-width:0 !important;
  border:1px solid rgba(6,63,45,.16) !important;
  border-radius:14px !important;
  padding:12px 13px !important;
}

.ref-row button{
  border:0 !important;
  border-radius:14px !important;
  padding:12px 14px !important;
  background:var(--evli-green) !important;
  color:#fff !important;
  font-weight:900 !important;
}

.cart-items{
  padding:8px 24px 18px !important;
  max-height:42vh !important;
  overflow:auto !important;
}

.cart-line{
  background:#fff !important;
  border:1px solid rgba(6,63,45,.10) !important;
  border-radius:20px !important;
  padding:16px !important;
  margin-bottom:12px !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:16px !important;
}

.cart-line strong{
  color:var(--evli-green) !important;
  font-size:16px !important;
}

.cart-line span{
  color:var(--evli-muted) !important;
}

.qty{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-top:10px !important;
}

.qty button{
  width:34px !important;
  height:34px !important;
  border-radius:999px !important;
  border:1px solid rgba(6,63,45,.13) !important;
  background:#f8f4ea !important;
  color:var(--evli-green) !important;
  font-weight:950 !important;
  cursor:pointer !important;
}

.qty button:hover{
  background:var(--evli-green) !important;
  color:#fff !important;
}

.cart-total{
  padding:20px 24px 26px !important;
  border-top:1px solid var(--evli-line) !important;
  background:linear-gradient(180deg,#fffdf8,#f5efe2) !important;
}

.total-row{
  background:var(--evli-green) !important;
  color:#fff !important;
  border-radius:20px !important;
  padding:17px 18px !important;
  margin-bottom:14px !important;
  font-size:20px !important;
  font-weight:950 !important;
}

#checkoutBtn{
  min-height:54px !important;
  font-size:17px !important;
  font-weight:950 !important;
  border-radius:999px !important;
}

.cart-disclaimer{
  color:var(--evli-muted) !important;
  font-size:13px !important;
  text-align:center !important;
  margin-top:12px !important;
}

/* CHECKOUT DESKTOP */
.checkout-wrap{
  padding-top:52px !important;
}

.checkout-card{
  background:#fffdf8 !important;
}

.checkout-form input,
.checkout-form select,
.checkout-form textarea{
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.checkout-form input:focus,
.checkout-form select:focus,
.checkout-form textarea:focus{
  outline:none !important;
  border-color:var(--evli-green-2) !important;
  box-shadow:0 0 0 4px rgba(10,111,79,.12) !important;
}

.order-line{
  align-items:flex-start !important;
}

.order-total{
  background:var(--evli-green) !important;
  color:#fff !important;
  border-radius:20px !important;
  padding:18px 20px !important;
}

/* EVITA LOGOS GIGANTES EN CHECKOUT/GRACIAS */
body .site-header .brand img{
  max-height:48px !important;
  max-width:180px !important;
}

/* RESPONSIVE DE RESPALDO */
@media(max-width:980px){
  .evli-buy-flow{grid-template-columns:1fr}
  .site-header{border-radius:28px !important;align-items:flex-start !important;flex-wrap:wrap !important}
  .nav-links{justify-content:flex-start !important}
  .nav-actions{width:100% !important;justify-content:flex-start !important;flex-wrap:wrap !important}
}

/* =========================================================
   EVLI ADD TO CART CHOICE MODAL
========================================================= */
.evli-add-choice{
  position:fixed;
  inset:0;
  z-index:100000;
  background:rgba(6,63,45,.32);
  backdrop-filter:blur(7px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.evli-add-choice.active{
  display:flex;
}

.evli-add-choice-card{
  width:min(520px, 100%);
  background:#fffdf8;
  border:1px solid rgba(6,63,45,.12);
  border-radius:34px;
  padding:34px;
  box-shadow:0 30px 90px rgba(6,63,45,.28);
  text-align:center;
  position:relative;
  animation:evliPop .22s ease both;
}

@keyframes evliPop{
  from{transform:translateY(12px) scale(.96);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}

.evli-add-choice-close{
  position:absolute;
  right:18px;
  top:18px;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(6,63,45,.14);
  background:#fff;
  color:#063f2d;
  font-size:24px;
  cursor:pointer;
}

.evli-add-choice-icon{
  width:68px;
  height:68px;
  margin:0 auto 16px;
  border-radius:999px;
  background:linear-gradient(135deg,#063f2d,#0a8a62);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  font-weight:950;
  box-shadow:0 18px 40px rgba(6,63,45,.22);
}

.evli-add-choice-card h3{
  color:#063f2d;
  font-size:34px;
  margin:0 0 8px;
  font-family:Georgia,serif;
}

.evli-add-choice-card p{
  color:#607267;
  font-size:17px;
  line-height:1.45;
  margin:0 auto 24px;
}

.evli-add-choice-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.evli-added-feedback{
  filter:saturate(1.2);
  box-shadow:0 0 0 5px rgba(227,191,79,.22), 0 18px 36px rgba(6,63,45,.18) !important;
}

/* Forzar header correcto en checkout */
body .site-header{
  min-height:auto !important;
}

body .site-header .brand img{
  height:46px !important;
  width:auto !important;
  max-width:170px !important;
  object-fit:contain !important;
}

body .checkout-wrap{
  margin-top:24px !important;
}

/* El carrito debe sentirse como flujo, no como panel suelto */
.cart-panel.open{
  transform:translateX(0) !important;
}

.cart-empty{
  background:#fff;
  border:1px dashed rgba(6,63,45,.20);
  border-radius:20px;
  padding:22px;
  color:#607267;
  text-align:center;
  font-weight:800;
}

/* =========================================================
   EVLI GLOBAL DESKTOP HEADER + FOOTER FIX
========================================================= */

.evli-desktop-header{
  width:min(1180px, calc(100% - 40px)) !important;
  margin:18px auto !important;
  padding:14px 18px !important;
  min-height:82px !important;
  display:grid !important;
  grid-template-columns:220px 1fr auto !important;
  align-items:center !important;
  gap:24px !important;
  border-radius:999px !important;
  background:rgba(255,253,248,.94) !important;
  border:1px solid rgba(6,63,45,.10) !important;
  box-shadow:0 18px 55px rgba(6,63,45,.12) !important;
  position:sticky !important;
  top:14px !important;
  z-index:9999 !important;
  backdrop-filter:blur(16px) !important;
}

.evli-desktop-header .brand{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-decoration:none !important;
  min-width:0 !important;
}

.evli-desktop-header .brand img{
  width:170px !important;
  height:auto !important;
  max-height:54px !important;
  object-fit:contain !important;
  display:block !important;
}

.evli-desktop-nav{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  flex-wrap:wrap !important;
}

.evli-desktop-nav a{
  color:#063f2d !important;
  text-decoration:none !important;
  font-size:15px !important;
  font-weight:900 !important;
  padding:11px 13px !important;
  border-radius:999px !important;
  line-height:1 !important;
  transition:all .22s ease !important;
}

.evli-desktop-nav a:hover{
  color:#fff !important;
  background:linear-gradient(135deg,#063f2d,#08845f) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 14px 28px rgba(6,63,45,.18) !important;
}

.evli-desktop-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  white-space:nowrap !important;
}

.evli-desktop-actions .btn{
  min-height:46px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 22px !important;
  border-radius:999px !important;
  font-weight:950 !important;
  text-decoration:none !important;
}

.evli-desktop-actions .cart-button{
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
}

/* Footer global */
.evli-desktop-footer{
  background:#032f22 !important;
  color:#eaf3ee !important;
  margin-top:0 !important;
  padding:72px 0 28px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}

.evli-footer-inner{
  width:min(1180px, calc(100% - 44px)) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:1.5fr 1fr 1fr 1fr 1fr !important;
  gap:38px !important;
  align-items:start !important;
}

.evli-footer-brand img{
  width:180px !important;
  height:auto !important;
  display:block !important;
  margin-bottom:20px !important;
  filter:brightness(0) invert(1) !important;
}

.evli-footer-brand p{
  color:rgba(255,255,255,.72) !important;
  font-size:16px !important;
  line-height:1.65 !important;
  margin:0 0 24px !important;
  max-width:330px !important;
}

.evli-footer-contact{
  display:grid !important;
  gap:7px !important;
}

.evli-footer-contact strong{
  color:#fff !important;
  font-size:15px !important;
  margin-top:8px !important;
}

.evli-footer-contact a,
.evli-footer-col a{
  color:rgba(255,255,255,.72) !important;
  text-decoration:none !important;
  transition:all .2s ease !important;
}

.evli-footer-contact a:hover,
.evli-footer-col a:hover{
  color:#f0cf61 !important;
  transform:translateX(3px) !important;
}

.evli-footer-col h4{
  color:#f0cf61 !important;
  font-size:14px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  margin:0 0 18px !important;
}

.evli-footer-col{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.evli-footer-col a{
  font-size:15px !important;
  line-height:1.35 !important;
}

.evli-footer-bottom{
  width:min(1180px, calc(100% - 44px)) !important;
  margin:46px auto 0 !important;
  padding-top:22px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  display:grid !important;
  grid-template-columns:1fr 2fr !important;
  gap:24px !important;
  color:rgba(255,255,255,.58) !important;
  font-size:13px !important;
  line-height:1.55 !important;
}

/* Home header en hero */
body .v16-hero,
body .page-hero{
  margin-top:0 !important;
  padding-top:0 !important;
}

@media(max-width:1100px){
  .evli-desktop-header{
    grid-template-columns:1fr !important;
    border-radius:30px !important;
  }

  .evli-desktop-nav{
    justify-content:flex-start !important;
  }

  .evli-desktop-actions{
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }

  .evli-footer-inner{
    grid-template-columns:1fr 1fr !important;
  }

  .evli-footer-bottom{
    grid-template-columns:1fr !important;
  }
}