/* ============================================================
   MarketBox · Detalle de Producto Compartido (BoxUI)
   El layout lo aporta boxui-public/26-ecommerce.css
   (box-product-detail, box-gallery, box-price-row, box-swatches,
   box-buy-row, box-qty, box-stock, box-chip).
   Aquí solo quedan ajustes de proyecto y refuerzos de Swiper.
   ============================================================ */

/* Columna de información: sin relleno extra (BoxUI da el espaciado) */
.product-info-section { padding: 0; }

/* Galería: la imagen rellena su marco (object-fit: cover) y no queda
   contenida por el límite que Swiper aplica a .swiper-zoom-container img */
.swiper-zoom-container .main-product-image {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}

/* El Swiper llena su marco y centra cada slide.
   Se limita a .product-main-swiper: esta hoja también se carga junto a
   home.css (modal de vista rápida) y no debe tocar otros carruseles. */
.product-main-swiper.swiper { width: 100%; height: 100%; }
.product-main-swiper .swiper-wrapper { height: 100%; }
.product-main-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 0;
}

/* Miniatura activa: cart.js marca `.active`; BoxUI usa `[aria-current]` */
.box-gallery-thumb.active { opacity: 1; border-color: var(--boxp-accent, var(--box-brand)); }

/* Zoom: el lienzo llena el slide y nunca desborda el marco, en cualquier
   ancho. El slide recibe su ancho en línea desde Swiper, así que el
   contenedor se limita a él (max-*) además de rellenarlo (width/height). */
.swiper-zoom-container {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: zoom-in;
}

/* Etiquetas del producto: la vista fuerza en línea `flex-wrap: wrap` +
   `overflow: visible`, es decir una fila que envuelve, no un carrusel.
   La píldora debe entonces poder partir su propio texto: con el
   `white-space: nowrap` de .box-chip una etiqueta larga desborda la tarjeta
   y fija el min-content de la columna de información, estrangulando a la
   galería. Se limita a .product-tags para no tocar los chips de filtro. */
[data-ui-context="public"] .product-tags .box-chip {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: left;
}

/* ============================================================
   Selector de variantes (talla / color)
   Radio oculto + píldora estilo BoxUI (.box-swatch-text)
   ============================================================ */
.radio-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.radio-label { cursor: pointer; margin-bottom: 0; }
.radio-label input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.radio-label span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 0.65rem;
    border: 1px solid var(--boxp-border, var(--box-border));
    border-radius: var(--boxp-radius-sm, var(--box-radius-sm));
    background: var(--boxp-surface, var(--box-surface));
    color: var(--box-text);
    font-size: var(--boxp-text-sm, 0.875rem);
    font-weight: 600;
    transition: border-color var(--boxp-dur, 0.2s) var(--boxp-ease, ease),
                background-color var(--boxp-dur, 0.2s) var(--boxp-ease, ease),
                color var(--boxp-dur, 0.2s) var(--boxp-ease, ease);
}
.radio-label:hover span {
    border-color: var(--boxp-accent, var(--box-brand));
}
.radio-label input:checked + span {
    background: var(--boxp-accent, var(--box-brand));
    border-color: var(--boxp-accent, var(--box-brand));
    color: var(--boxp-accent-contrast, var(--box-text-on-brand));
}
.option-group.option-error .radio-label span {
    border-color: var(--box-danger-solid);
}

/* ============================================================
   Oferta / negociación
   ============================================================ */
.bidding-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: end;
    margin-top: 1.5rem;
}
@media (max-width: 576px) {
    .bidding-grid { grid-template-columns: 1fr; }
}
.bidding-section input { margin-bottom: 0; }

/* ============================================================
   Galería: integración con la interfaz (refinamiento sobre Swiper)
   ============================================================ */

/* La galería gana más espacio frente a la columna de información.
   `minmax(0, …)` es obligatorio: con `1.25fr 1fr` a secas la columna de
   información impone su tamaño min-content (la píldora de etiquetas no
   parte línea) y deja la galería —y con ella el .swiper-zoom-container—
   reducida a unos pocos píxeles. */
[data-ui-context="public"] .box-product-detail {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
[data-ui-context="public"] .box-product-detail > * { min-width: 0; }
@media (max-width: 900px) {
    [data-ui-context="public"] .box-product-detail { grid-template-columns: minmax(0, 1fr); }
}

/* Colocación en la rejilla de la galería: el marcado sitúa el marco
   principal antes que las miniaturas, pero BoxUI reserva la primera pista
   (84px) para éstas. Sin colocación explícita el marco cae en los 84px. */
@media (min-width: 901px) {
    [data-ui-context="public"] .box-gallery:has(.box-gallery-thumbs) > .box-gallery-main {
        grid-column: 2;
        grid-row: 1;
    }
    [data-ui-context="public"] .box-gallery:has(.box-gallery-thumbs) > .box-gallery-thumbs {
        grid-column: 1;
        grid-row: 1;
    }
}

/* Producto con una sola imagen: sin miniaturas, el marco ocupa el ancho */
[data-ui-context="public"] .box-gallery:not(:has(.box-gallery-thumbs)) {
    grid-template-columns: minmax(0, 1fr);
}

/* Bajo 900px las miniaturas pasan a fila: el scroll es horizontal */
@media (max-width: 900px) {
    [data-ui-context="public"] .box-gallery-thumbs {
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
    }
}

/* Marco principal: superficie coherente + sombra suave */
.box-gallery-main {
    box-shadow: var(--boxp-shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.08));
    background: var(--boxp-surface, var(--box-surface));
}

/* El swiper ocupa el marco y define contexto para sus controles.
   El aspecto de flechas y bullets lo aporta tienda/swiper_controls.css;
   aquí solo se afina la geometría propia de la galería. */
.product-main-swiper {
    position: relative;
    z-index: 0;
    --swiper-navigation-sides-offset: 12px;
    --swiper-pagination-bottom: 12px;
}

/* Miniaturas: columna con scroll suave y estados coherentes */
.box-gallery-thumbs {
    scrollbar-width: thin;
    scrollbar-color: var(--boxp-border, var(--box-border)) transparent;
}
.box-gallery-thumbs::-webkit-scrollbar { width: 6px; }
.box-gallery-thumbs::-webkit-scrollbar-track { background: transparent; }
.box-gallery-thumbs::-webkit-scrollbar-thumb {
    background-color: var(--boxp-border, var(--box-border));
    border-radius: 10px;
}
.box-gallery-thumb {
    border-radius: var(--boxp-radius-sm, 8px);
    transition: opacity var(--boxp-dur, 0.2s) ease,
                border-color var(--boxp-dur, 0.2s) ease,
                box-shadow var(--boxp-dur, 0.2s) ease;
}
.box-gallery-thumb:hover,
.box-gallery-thumb[aria-current="true"],
.box-gallery-thumb.active {
    box-shadow: var(--boxp-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.12));
}