/* Selector de moneda de visualización del encabezado.
   El modal reutiliza el sistema de .st-collection-modal, así que acá solo viven
   el disparador y el contenido propio del selector. */

/* El disparador muestra texto en lugar de un ícono, así que necesita ancho
   propio y un borde sutil que lo delate como control. */
body.theme-store .st-currency-trigger {
    width: auto;
    min-width: 42px;
    height: 42px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--st-on-header-fg, var(--st-fg)) 26%, transparent);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
}

body.theme-store .st-currency-trigger:hover,
body.theme-store .st-currency-trigger:focus-visible {
    border-color: color-mix(in srgb, var(--st-on-header-fg, var(--st-fg)) 48%, transparent);
    color: var(--st-on-header-fg, var(--st-fg));
}

.st-currency-trigger__code {
    font-variant-numeric: tabular-nums;
}

/* Dentro del modal las filas ya vienen con .st-sort-option: acá solo se apila
   el código sobre el nombre de la moneda. */
.st-currency-option {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.st-currency-option__code {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.st-currency-option__name {
    color: color-mix(in srgb, var(--st-fg) 62%, transparent);
    font-size: 12.5px;
    font-weight: 500;
}

.st-currency-note {
    margin: 0;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--st-border);
    color: color-mix(in srgb, var(--st-fg) 58%, transparent);
    font-size: 12px;
    line-height: 1.45;
}

/* Fila del checkout que aclara el importe real a cobrar cuando el visitante
   está viendo los precios en otra moneda. */
.st-currency-charge-note {
    display: block;
    margin-top: 3px;
    color: color-mix(in srgb, var(--st-fg) 60%, transparent);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 720px) {
    body.theme-store .st-currency-trigger {
        min-width: 38px;
        height: 38px;
        padding: 0 9px;
        font-size: 11.5px;
    }

    .st-currency-note {
        padding: 12px 16px 16px;
    }
}