/* ==========================================================================
   SanMiguel — Detalle de producto
   CSS autocontenido (style.css es un build precompilado de Tailwind y no
   incluye las utilidades peer-checked:* que usaba la plantilla original).
   Prefijo: .sm-variant
   ========================================================================== */

.sm-variant-input {
    /* No dependemos de .sr-only: en esta página solo existe porque la trae
       Font Awesome, y desaparecería si se quita esa hoja de estilos. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.sm-variant {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    background: #fff;
    border: 1px solid #e2ddd5;
    border-radius: 4px;
    color: #172430;
    font-family: "Josefin Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.sm-variant:hover {
    border-color: #bb976d;
    color: #bb976d;
}

.sm-variant-input:checked + .sm-variant {
    background: #bb976d;
    border-color: #bb976d;
    color: #fff;
}

.sm-variant-input:focus-visible + .sm-variant {
    outline: 2px solid #bb976d;
    outline-offset: 3px;
}

/* Miniatura activa de la galería, para que se note qué imagen se está viendo */
.sm-thumb-activa {
    outline: 2px solid #bb976d;
    outline-offset: 2px;
    border-radius: 4px;
}