/* =========================================================
   SCOOTSHOP.CO — CSS MOBILE OVERRIDES (styles.mobile.css)
   Solo overrides responsive extraídos del CSS original
   ========================================================= */

/* Ajuste header en móvil */
@media (max-width:768px){
  :root{ --header-h: 72px; }
}

/* En móvil ocultas nav desktop y muestras burger */
@media (max-width:980px){
  nav.menu{ display:none; }
  .burger{ display:grid; }
}

/* Features: 4 -> 2 columnas en tablets/móvil */
@media (max-width:1024px){
  .feature-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Features: legibilidad en móvil */
@media (max-width:768px){
  .feature-grid{ gap:10px; }
  .feature-card{
    padding:12px;
    grid-template-columns:36px 1fr;
    column-gap:10px;
    row-gap:6px;
    align-items:start;
  }
  .feature-card h3{
    font-size:.96rem;
    line-height:1.25;
  }
  .feature-card p{
    font-size:.88rem;
    line-height:1.5;
  }
  .f-icon{
    width:36px;
    height:36px;
  }
  .f-icon i{ font-size:16px; }
}

@media (max-width:560px){
  .feature-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Mobile product layout tweaks */
@media (max-width:640px){
  .grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .card-media{ margin:6px; border-radius:10px; aspect-ratio:1/1; }
  .chip-name{
    display:block;
    margin:6px 6px 10px;
    padding:7px 10px;
    border-radius:10px;
    background:#111;
    color:#fff;
    font-weight:900;
    font-size:.85rem;
    text-align:center;
    letter-spacing:.02em;
  }
  .card-body,
  .carousel-dots{ display:none !important; }
  .btn-row{ flex-direction:column; }
  .btn-row a{ width:100%; min-width:unset; }
}

/* Oculta botones en móvil (como lo tenías) */
@media (max-width:768px){
  .btn-row{ display:none !important; }
}

/* Legal columnas: 2 -> 1 */
@media (max-width:900px){
  .legal .columns{ grid-template-columns:1fr; }
  .legal .columns{ gap:10px; }
  .legal .columns > details{ padding:10px 12px; border-radius:14px; }
  .legal .columns > details summary{ font-size:.95rem; }
  .legal .columns > details p,
  .legal .columns > details li{ font-size:.92rem; line-height:1.58; }
  .legal .columns > details.tc-large{ grid-column:auto; padding:11px 13px; }
  .legal .columns > details.tc-large > summary{ font-size:1rem; }
}

/* Grid de series (2 columnas escritorio, 1 columna móvil) */
@media (max-width:820px){
  .product-grid{ grid-template-columns:1fr; }
}