/* rc-mobile-fixes.css  —  Remember Crew
   Importante: este archivo SOLO agrega estilos; no rompe tu styles.css.
   Incluirlo DESPUES de /assets/styles.css
*/

/* ====== MOBILE POLISH ====== */
:root{ --border: #1e1e1e; }

/* Contenedor y topbar */
.topbar{background:#000;color:#fff}
#topbar-inner{max-width:1100px;margin:0 auto;padding:10px 12px;gap:8px}
.logo img{max-height:44px}

/* Hero */
.hero{position:relative}
.hero-logo{display:block;margin:0 auto;max-width:560px;width:100%;height:auto}
.hero-video{width:100%;max-height:70vh;object-fit:cover;filter:brightness(.6)}
.hero-overlay .inner{padding:16px 12px}
.hero-title{font-size:clamp(22px,6vw,36px)}
.hero-sub{font-size:clamp(12px,3.6vw,14px)}

/* Cards y grilla */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.card{border:1px solid var(--border);border-radius:14px;background:#0a0a0a;overflow:hidden}
.card-img{aspect-ratio:4/5;background:#0f0f0f}
.card-title{font-size:14px;line-height:1.25;padding:10px 10px 0}
.card-price{padding:0 10px 10px;font-size:13.5px}

/* Rubros botonería */
.rubros-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rub-btn{padding:8px 12px;font-size:13.5px;border-radius:999px}

/* Filtros */
form[action*="shop.php"], form[action="/"]{
  display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px
}
select,input[type="text"]{font-size:14px;padding:9px 10px;border-radius:10px}
button{font-size:14px;padding:9px 12px;border-radius:10px}

/* Drawer (menú hamburguesa) y panel */
#drawer{z-index:9998}
#panel{top:calc(56px + env(safe-area-inset-top,0px));}

/* Safe areas para iPhone con notch */
@supports(padding: max(0px)){
  .topbar{padding-top:env(safe-area-inset-top)}
}

/* Mejores hit areas en móvil */
#hamb,#cartBtn{min-width:40px;min-height:40px}

/* Producto detalle */
.product-gallery{max-width:100%;overflow:hidden;border-radius:12px}
.product-gallery img{width:100%;height:auto;display:block}

/* Breakpoints */
@media (max-width: 480px){
  .container{padding:0 12px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card-title{font-size:13.5px}
  .card-price{font-size:13px}
  .logo img { max-height: 30px; }
  .hero{ max-height: 48vh; overflow:hidden }
  .hero-logo { max-width: clamp(140px, 55vw, 220px); }
}
@media (min-width: 481px) and (max-width: 768px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ===== Ajustes galería producto (agregado) ===== */
.gallery-main img {
  max-width: 100%;
  max-height: 420px;   /* desktop */
  object-fit: contain;
  border-radius: 12px;
}

@media (max-width: 480px){
  .gallery-main img {
    max-height: 260px; /* móvil */
  }
  .thumbs {
    justify-content: center;
  }
  .thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
  }
}
/* ===== Ajustes galería de producto (responsive y sin recortes) ===== */
.pg-main img {
  max-width: 100%;
  max-height: 420px;   /* desktop */
  object-fit: contain;
  border-radius: 12px;
  display: block;
}

.pg-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 480px){
  .pg-main img { max-height: 260px; } /* móvil */
  .pg-thumb { width: 56px; height: 56px; }
}
/* Robustez móvil (iOS Safari): forzar repintado y altura controlada */
.pg-main { position: relative; }
.pg-main img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  opacity: 1 !important;
  -webkit-transform: translateZ(0); /* fuerza paint en iOS */
  image-rendering: auto;
  background: transparent;
}

@media (max-width: 480px){
  .pg-main img { max-height: 260px; }
}
/* ===== FIX centrado y proporciones en móvil: detalle de producto ===== */
.pg-main{
  display:flex;                /* garantizamos flex */
  align-items:center;
  justify-content:center;      /* centra horizontal y vertical */
  text-align:center;           /* fallback extra */
  padding:0;                   /* evita empujes laterales raros */
}

.pg-main img{
  display:block;               /* evita espacios inline */
  margin:0 auto;               /* centrado extra por si flex falla */
  width:auto;                  /* NO estirar si no hace falta */
  max-width:100%;              /* que no se pase del contenedor */
  height:auto;
  max-height:70vh;             /* altura razonable */
  object-fit:contain;          /* no recortar */
  object-position:center center; /* centro real de la imagen */
}

@media (max-width: 480px){
  .pg-main{
    max-height:62vh;           /* contenedor no se hiper-alargue */
  }
  .pg-main img{
    max-height:62vh;           /* imagen acompaña el límite */
  }
}
/* ===== FIX duro de centrado para la imagen principal en móvil/desktop ===== */
.pg-center{
  display: grid !important;         /* por encima de cualquier flex heredado */
  place-items: center !important;   /* centra vertical y horizontal */
  padding: 0 !important;
  text-align: center !important;
}

.pg-center img{
  float: none !important;
  margin: 0 !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  -webkit-transform: translateZ(0); /* evita glitches de iOS */
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 70vh !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 480px){
  .pg-center img{
    max-height: 62vh !important;
  }
}

/* ===== Centrado duro de la imagen principal (iOS/mobile) ===== */
.pg-center{
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  text-align:center !important;
}
.pg-center img{
  float:none !important;
  margin:0 !important;
  position:static !important;
  transform:none !important;
  -webkit-transform:translateZ(0);
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:70vh !important;
  object-fit:contain !important;
  object-position:center center !important;
}
@media (max-width:480px){
  .pg-center img{ max-height:62vh !important; }
}