/* =========================================================
   EVLI HEADER + HERO CARD FIX
   Une visualmente header y hero sin margin negativos.
   Solo desktop.
========================================================= */

@media (min-width: 921px){

  :root{
    --evli-green:#063f2d;
    --evli-green-2:#087a58;
    --evli-gold:#e3bf4f;
    --evli-cream:#f7f1e6;
    --evli-paper:#fffdf8;
  }

  html,
  body{
    background:#f7f1e6 !important;
  }

  /* Eliminar efectos raros de contenedores superiores */
  body::before,
  body::after,
  .v16-shell::before,
  .v16-shell::after,
  .v16-page-shell::before,
  .v16-page-shell::after,
  .page-shell::before,
  .page-shell::after{
    display:none !important;
    content:none !important;
  }

  .v16-shell,
  .v16-page-shell,
  .page-shell{
    background:transparent !important;
    border-top:0 !important;
    overflow:visible !important;
  }

  /* HEADER: mismo ancho que el hero y pegado a él */
  body .site-header,
  body .evli-desktop-header{
    width:min(1280px, calc(100% - 72px)) !important;
    min-height:70px !important;
    margin:22px auto 0 !important;
    padding:12px 18px !important;
    border-radius:30px 30px 0 0 !important;
    background:rgba(255,253,248,.985) !important;
    border:1px solid rgba(6,63,45,.09) !important;
    border-bottom:0 !important;
    box-shadow:
      0 14px 44px rgba(6,63,45,.09),
      inset 0 1px 0 rgba(255,255,255,.88) !important;
    display:grid !important;
    grid-template-columns:185px minmax(520px,1fr) 300px !important;
    align-items:center !important;
    gap:18px !important;
    position:relative !important;
    z-index:1000 !important;
    backdrop-filter:blur(16px) !important;
  }

  body .site-header .brand,
  body .evli-desktop-header .brand{
    width:185px !important;
    min-width:185px !important;
    max-width:185px !important;
    height:52px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-decoration:none !important;
    overflow:visible !important;
  }

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

  body .site-header .brand::after,
  body .evli-desktop-header .brand::after,
  body .evli-safe-brand::after{
    display:none !important;
    content:none !important;
  }

  body .nav-links,
  body .evli-desktop-nav{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    flex-wrap:nowrap !important;
  }

  body .nav-links a,
  body .evli-desktop-nav a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:38px !important;
    padding:0 11px !important;
    border-radius:999px !important;
    color:#063f2d !important;
    text-decoration:none !important;
    font-size:14px !important;
    font-weight:850 !important;
    line-height:1 !important;
    letter-spacing:-.015em !important;
    white-space:nowrap !important;
    transition:all .22s ease !important;
  }

  body .nav-links a:hover,
  body .evli-desktop-nav a:hover{
    background:linear-gradient(135deg,#063f2d,#087a58) !important;
    color:#fff !important;
    transform:translateY(-2px) !important;
    box-shadow:0 12px 26px rgba(6,63,45,.18) !important;
  }

  body .nav-actions,
  body .evli-desktop-actions{
    width:300px !important;
    min-width:300px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:9px !important;
    white-space:nowrap !important;
  }

  body .nav-actions .btn,
  body .evli-desktop-actions .btn{
    min-height:42px !important;
    padding:0 20px !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:14.5px !important;
    font-weight:900 !important;
    text-decoration:none !important;
    transition:all .22s ease !important;
  }

  body .nav-actions .btn.white,
  body .evli-desktop-actions .btn.white{
    background:#fff !important;
    color:#063f2d !important;
    border:1px solid rgba(6,63,45,.13) !important;
    box-shadow:0 8px 22px rgba(6,63,45,.05) !important;
  }

  body .nav-actions .btn.gold,
  body .evli-desktop-actions .btn.gold{
    background:linear-gradient(135deg,#e3bf4f,#f4db72) !important;
    color:#063f2d !important;
    border:0 !important;
    box-shadow:0 12px 28px rgba(227,191,79,.23) !important;
  }

  body .cart-button{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    border-radius:999px !important;
    border:1px solid rgba(6,63,45,.12) !important;
    background:#fff !important;
    color:#063f2d !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    cursor:pointer !important;
    box-shadow:0 10px 24px rgba(6,63,45,.09) !important;
  }

  /* HERO: mismo ancho, pegado al header, sin margen negativo */
  body .v16-hero,
  body .page-hero,
  body .hero{
    width:min(1280px, calc(100% - 72px)) !important;
    margin:0 auto 0 !important;
    border-radius:0 0 30px 30px !important;
    overflow:hidden !important;
    box-shadow:0 28px 90px rgba(6,63,45,.14) !important;
    border:1px solid rgba(6,63,45,.07) !important;
    border-top:0 !important;
  }

  body .v16-hero .v16-wrap,
  body .page-hero .v16-wrap,
  body .hero .v16-wrap{
    padding-top:78px !important;
    padding-bottom:82px !important;
  }

  /* Evitar que el hero vuelva a usar márgenes agresivos */
  body .hero{
    margin-top:0 !important;
  }

  /* El fondo crema superior queda como marco general, no como franja partida */
  body main,
  body .v16-page,
  body .page{
    background:transparent !important;
  }
}

@media (min-width:921px) and (max-width:1180px){

  body .site-header,
  body .evli-desktop-header{
    width:calc(100% - 36px) !important;
    grid-template-columns:160px minmax(420px,1fr) 275px !important;
    gap:10px !important;
  }

  body .site-header .brand,
  body .evli-desktop-header .brand{
    width:160px !important;
    min-width:160px !important;
    max-width:160px !important;
  }

  body .site-header .brand img,
  body .evli-desktop-header .brand img{
    width:138px !important;
  }

  body .nav-links,
  body .evli-desktop-nav{
    gap:3px !important;
  }

  body .nav-links a,
  body .evli-desktop-nav a{
    font-size:13px !important;
    padding:0 7px !important;
  }

  body .nav-actions,
  body .evli-desktop-actions{
    width:275px !important;
    min-width:275px !important;
    gap:7px !important;
  }

  body .nav-actions .btn,
  body .evli-desktop-actions .btn{
    padding:0 15px !important;
    font-size:14px !important;
  }
}