/* ============================================================
   MOBILE / _detalle.css — Página de detalle de producto
   Afecta: /producto/{slug}
   Archivo desktop relacionado: detalle.css
   NOTA: detalle.css ya colapsa a 1 columna en max-width:1023px.
   Este archivo solo ajusta tamaños y espaciados internos.
   NO usa display:contents ni reordena elementos con order.
   ============================================================ */

/* ── Layout: colapso a 1 columna (complementa detalle.css) ─── */
@media (max-width: 1023px) {

    .detalle-container {
        gap: 24px;
        margin: 24px auto;
        padding: 0 16px;
    }
}

/* ── Imagen principal ───────────────────────────────────────── */
@media (max-width: 639px) {

    .detalle-figma .imagen-principal.card-figma {
        padding: 16px;
    }

    .detalle-figma .imagen-principal img {
        height: 260px;   /* era 420px en desktop */
    }

    /* Zoom hint no tiene sentido en touch */
    .img-zoom-hint { display: none; }
}

@media (min-width: 640px) and (max-width: 1023px) {

    .detalle-figma .imagen-principal img {
        height: 340px;
    }
}

/* ── Thumbnails de galería ──────────────────────────────────── */
@media (max-width: 639px) {

    .galeria-thumbnails {
        gap: 6px;
    }

    /* Máximo 4 thumbnails visibles, el resto con scroll */
    .thumb-galeria {
        width: 64px;   /* era 111px fijo */
        height: 64px;
        flex-shrink: 0;
    }

    .thumbnails-row {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
    }

    .thumbnails-row::-webkit-scrollbar { display: none; }
}

/* ── Nombre y precio ────────────────────────────────────────── */
@media (max-width: 639px) {

    .detalle-figma .nombre-producto-arriba {
        font-size: clamp(1.2rem, 5vw, 1.8rem);
        margin-bottom: 12px;
    }

    .precio-detalle {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
        padding: 10px 20px;
    }
}

/* ── Tallas y colores ───────────────────────────────────────── */
@media (max-width: 639px) {

    .detalle-figma .tallas-grid {
        gap: 6px;
    }

    .detalle-figma .talla-btn {
        padding: 8px 10px;
        font-size: 0.82rem;
        min-width: 44px;     /* área táctil mínima */
        min-height: 44px;
    }

    .detalle-figma .colores-grid {
        gap: 6px;
    }

    .detalle-figma .color-btn {
        padding: 8px 10px;
        font-size: 0.75rem;
        min-height: 44px;    /* área táctil mínima */
    }
}

/* ── Controles de cantidad (+/-) ────────────────────────────── */
@media (max-width: 639px) {

    .qty-btn {
        width: 44px;    /* área táctil mínima (era 40px) */
        height: 44px;
    }

    .detalle-figma .cantidad-input {
        height: 44px !important;
    }
}

/* ── Botón agregar al carrito ───────────────────────────────── */
@media (max-width: 639px) {

    .detalle-figma .btn-agregar-carrito {
        font-size: 0.78rem;
        padding: 14px;
        margin-top: 16px;
    }
}

/* ── Trust badges ───────────────────────────────────────────── */
@media (max-width: 639px) {

    .trust-badges {
        gap: 8px;
        flex-wrap: wrap;
    }

    .trust-item {
        font-size: 0.68rem;
        width: calc(50% - 4px);
    }
}

/* ── Sección descripción completa ───────────────────────────── */
/* detalle.css ya la maneja en max-width:768px → complementamos */
@media (max-width: 639px) {

    .detalle-desc-section {
        padding: 40px 16px;
    }
}

/* ── Carrusel de relacionados ───────────────────────────────── */
@media (max-width: 639px) {

    .rel-carousel-section {
        padding: 48px 0 56px;
    }

    .rel-carousel-wrap {
        padding: 0 28px;
    }

    .rel-carousel-arrow {
        width: 34px;
        height: 34px;
    }

    /* 1 card visible en móvil */
    .rel-card {
        flex: 0 0 calc(100% - 0px);
    }

    .rel-card-img { height: 180px; }
}

@media (min-width: 640px) and (max-width: 1023px) {

    /* 2 cards en tablet */
    .rel-card {
        flex: 0 0 calc(50% - 12px);
    }
}

/* ── Modal guía de tallas ───────────────────────────────────── */
@media (max-width: 480px) {

    .gt-modal-box {
        padding: 24px 14px 20px;
        max-height: 85vh;
    }

    .gt-tab {
        padding: 8px 10px;
        font-size: 0.7rem;
    }
}