/**
 * Ficha de producto: galería de imágenes (Paso 11).
 *
 * Fichero aparte de app.css a propósito: app.css lo edita Felipe en paralelo.
 * Aquí solo va lo de la galería; el resto de la ficha (prod__media, prod__foto,
 * el configurador) sigue viviendo en app.css y no se toca.
 */

/* Tira de miniaturas bajo la foto grande. */
.prod__tiras {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}

.prod__tira {
    display: block;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 4px;
    /* El fondo se ve mientras carga la miniatura: sin él, la tira «salta» al
       aparecer las imágenes. */
    background: #f3efe9;
    line-height: 0;
    transition: border-color .15s ease;
}

.prod__tira img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.prod__tira:hover,
.prod__tira:focus-visible {
    border-color: #c9a227;
}

/* La que se está viendo arriba. Se marca también con aria-current, así que el
   color no es la única señal. */
.prod__tira.es-activa {
    border-color: #7b1220;
}

.prod__tira:focus-visible {
    outline: 2px solid #7b1220;
    outline-offset: 2px;
}

/* En móvil la tira se desplaza en horizontal en vez de romper en varias filas:
   ocho miniaturas apiladas empujarían el precio y el botón fuera de la pantalla. */
@media (max-width: 640px) {
    .prod__tiras {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .3rem;
        -webkit-overflow-scrolling: touch;
    }
    .prod__tira {
        flex: 0 0 auto;
        width: 64px;
        height: 64px;
    }
}

/* ------------------------------------------------------------------
   Personalización POR UNIDAD (2026-07-29)
   Cada unidad lleva su propio bloque de campos, porque comprando dos
   aprovechando el precio de la unidad par lo normal es que sean de
   apellidos distintos. Con una sola unidad la cabecera sobra y se oculta,
   para que la ficha se vea exactamente igual que antes.
   ------------------------------------------------------------------ */
.pers-ud {
    border: 1px solid #e2d4b8;
    border-radius: 8px;
    padding: .85rem .9rem .1rem;
    margin-bottom: .8rem;
    background: #fffdf8;
}
.pers-ud--sola {
    border: 0;
    padding: 0;
    margin-bottom: 0;
    background: none;
}
.pers-ud--sola .pers-ud__cab { display: none; }

.pers-ud__cab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin: 0 0 .6rem;
}
.pers-ud__n { font-weight: 700; color: #6e1423; }
.pers-ud__par {
    font-style: normal;
    font-size: .82rem;
    color: #7a5b1e;
    background: #f6efe0;
    border: 1px solid #e2d4b8;
    border-radius: 999px;
    padding: .1rem .55rem;
}
.pers-ud__igual {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    color: #6b5b46;
    font-weight: 400;
    cursor: pointer;
}
.pers-ud__igual input { width: 1rem; height: 1rem; }

.pers-ayuda {
    font-size: .85rem;
    color: #6b5b46;
    margin: .2rem 0 0;
}

/* Desglose del importe cuando se piden 2 o más unidades (2026-07-29). */
.precio-desglose {
    margin: .2rem 0 0;
    font-size: .88rem;
    color: #6b5b46;
    text-align: right;
}

/* Descripción heredada del WooCommerce, bajo el título de la ficha. */
.prod__desc {
    background: #f6efe0;
    border-left: 3px solid var(--gold, #b08d35);
    border-radius: 0 8px 8px 0;
    padding: .9rem 1.1rem;
    margin: 0 0 1.4rem;
    font-size: .95rem;
    line-height: 1.55;
    color: #4a453e;
}