/* =========================================================
   LIZARD JOYAS — AJUSTES PARA CELULAR
   ---------------------------------------------------------
   Se enlaza desde el <head> de index.html (mejor después del <style>):
     <link rel="preload" as="image" href="hero-mobile.jpg" media="(max-width: 780px)">
     <link rel="stylesheet" href="mobile.css">
   Casi todo lo de acá aplica solo en pantallas de hasta 780 px;
   lo que vale para toda la página está al principio y lo dice. Los selectores empiezan con
   "body" para ganarle a los estilos de index.html en cualquier orden.
   ========================================================= */

/* ---------- TODA LA PÁGINA (computadora y celular) ---------- */

/* Sección "Nosotros" oculta por ahora, con sus enlaces del menú y del pie.
   Para volver a mostrarla, borrar este bloque. */
body #nosotros{ display:none !important; }
body #navLinks li:has(> a[href="#nosotros"]),
body footer li:has(> a[href="#nosotros"]){ display:none !important; }

/* Catálogo: sin la nota "Los precios y la disponibilidad se actualizan
   desde el panel…" y con menos espacio abajo, así la sección
   "Cómo comprar" queda más pegada a los productos. */
body #coleccion .grid-note{ display:none !important; }
body #coleccion{ padding-bottom:clamp(2.5rem, 5vw, 4rem); }

/* Sin el distintivo ("Plata 925 maciza", etc.) sobre las fotos:
   ni en la ficha del producto ni en las tarjetas del catálogo. */
body .pv-stage-badge,
body #productGrid .card__frame > span:not(.lz-blur-bg){ display:none !important; }

@media (max-width: 780px){

  /* ---------- PORTADA: foto a pantalla completa con el texto encima ---------- */
  body .hero{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    padding-top:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:#131210 url("hero-mobile.jpg") center / cover no-repeat;
    overflow:hidden;
  }

  /* La foto de computadora no se usa en el celular */
  body .hero__bg{ display:none !important; }

  /* Oscurece la parte de abajo para que el texto se lea bien */
  body .hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(
      to bottom,
      rgba(19,18,16,0) 0%,
      rgba(19,18,16,0) 45%,
      rgba(19,18,16,0.45) 68%,
      rgba(19,18,16,0.78) 100%
    );
  }

  body .hero__container{
    position:relative;
    z-index:2;
    padding:0 1.5rem calc(2.25rem + env(safe-area-inset-bottom, 0px));
  }

  body .hero__eyebrow{
    color:#FFFFFF;
    font-size:0.72rem;
    text-shadow:0 1px 8px rgba(0,0,0,0.35);
  }

  body .hero__divider{
    background:#FFFFFF;
    margin:0.75rem 0 1rem;
  }

  body .hero__title{
    color:#FFFFFF;
    font-size:clamp(2.1rem, 9.5vw, 2.7rem);
    text-shadow:0 2px 14px rgba(0,0,0,0.3);
  }

  body .hero__cta{
    margin-top:1.4rem;
    background:#FFFFFF;
    border-color:#FFFFFF;
    color:#131210;
  }
  body .hero__cta:hover{
    background:#F0EEEA;
    color:#131210;
  }

  body .hero__pillars{
    margin-top:1.5rem;
    color:rgba(255,255,255,0.82);
    font-size:0.66rem;
  }
}

/* Celulares bajitos: texto más compacto para no tapar el anillo */
@media (max-width: 780px) and (max-height: 720px){
  body .hero__eyebrow{ font-size:0.66rem; }
  body .hero__divider{ margin:0.55rem 0 0.7rem; }
  body .hero__title{ font-size:1.85rem; }
  body .hero__cta{ margin-top:1rem; padding:0.75rem 1.4rem; }
  body .hero__pillars{ display:none; }
  body .hero__container{ padding-bottom:calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- TARJETAS DE PRODUCTO: de a dos por fila, compactas ---------- */
@media (max-width: 780px){
  body #productGrid.grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1.75rem 0.75rem;
  }
  body #productGrid .card:hover{ transform:none; }
  body #productGrid .card__body{
    padding-top:0.65rem;
    gap:0.25rem;
  }
  /* Sin la categoría arriba del nombre, como en el ejemplo */
  body #productGrid .card__body > span:first-child{ display:none !important; }
  body #productGrid .card__name{
    font-size:0.95rem;
    line-height:1.3;
  }
  body #productGrid .card__meta{ justify-content:flex-start; }
  body #productGrid .card__price{ font-size:0.95rem; }

  /* Nuevos ingresos: se ven dos tarjetas y asoma la tercera */
  body .lz-new__track{
    --lz-gap:0.75rem;
    grid-auto-columns:44%;
  }
  body .lz-new-card__name{
    margin-top:0.65rem;
    font-size:0.95rem;
    line-height:1.3;
  }
  body .lz-new-card__price{ font-size:0.95rem; }
  body .lz-new__arrow{ display:none; }
}

body .hero__title{ text-transform:none; }

/* Botón de acceso al panel: solo un ícono chico y discreto
   (lo usa únicamente el dueño de la tienda) */
body .nav__admin-btn,
body header.is-scrolled .nav__admin-btn{
  position:relative;
  width:30px;
  height:30px;
  padding:0;
  gap:0;
  justify-content:center;
  background:transparent;
  border:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  opacity:0.45;
  transition:opacity 0.2s ease;
}
body header.is-scrolled .nav__admin-btn{ color:var(--ink); }
body .nav__admin-btn:hover,
body header.is-scrolled .nav__admin-btn:hover{
  background:transparent;
  border:none;
  transform:none;
  opacity:1;
}
body .nav__admin-label{ display:none !important; }
body .nav__admin-btn svg{ width:16px; height:16px; }
/* El puntito verde de sesión activa, chiquito en la esquina */
body .nav__admin-dot{
  position:absolute;
  top:4px;
  right:3px;
  width:5px;
  height:5px;
}

/* Ficha de producto: sin garantías ni desplegables de cuidados/envíos */
body .pv-guarantees,
body .pv-details-accordions{
  display:none !important;
}

/* Pie de página: sin la columna "Contacto" */
body footer .footer__top > div:last-child{
  display:none !important;
}

/* Ficha de producto: "Completá tu look" en una fila chica que se desliza */
@media (max-width: 780px){
  body .pv-related .grid{
    display:flex !important;
    grid-template-columns:none !important;
    gap:0.85rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    margin-inline:-1.25rem;
    padding:0 1.25rem 0.75rem;
    scroll-padding-inline:1.25rem;
    scrollbar-width:none;
  }
  body .pv-related .grid::-webkit-scrollbar{ display:none; }

  body .pv-related .grid > *{
    flex:0 0 42vw;
    max-width:180px;
    min-width:0;
    scroll-snap-align:start;
  }

  /* Textos acordes al tamaño de la tarjeta */
  body .pv-related .grid > * h3{ font-size:0.95rem; line-height:1.25; }
  body .pv-related .grid > * [class*="price"]{ font-size:0.9rem; }
  body .pv-related .grid > * [class*="cat"],
  body .pv-related .grid > * [class*="tag"]{ font-size:0.62rem; letter-spacing:0.12em; }
  body .pv-related__title{ font-size:1.5rem; }
}