/* ======================================================================
   Moda Minimal preset — component decorations
   Scoped a [data-mt24-preset="fashion_minimal"]. Lenguaje quiet luxury:
   tipografía ligera, mucho aire, acentos casi invisibles. Complementa (no
   pelea) al visual style `soft`. Sólo va aquí lo que los tokens no expresan.
   ====================================================================== */

[data-mt24-preset="fashion_minimal"] {

    /* Títulos — ligeros, con aire, nada de peso. ─────────────────────── */
    .mt24-section-header__title,
    .mt24-heading-md,
    .mt24-heading-lg,
    .mt24-heading-xl {
        font-weight: 400;
        letter-spacing: var(--mt24-letter-spacing-tight);
        line-height: 1.25;
    }

    /* Eyebrow: mayúsculas finas, tracking amplio, muy discreto. */
    .mt24-section-header__eyebrow,
    .mt24-eyebrow {
        font-family: var(--mt24-font-body);
        font-size: var(--mt24-font-size-xs);
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--mt24-text-muted);
    }

    /* Botones: outline-first, delgados, sin sombra; el primario llena
       suavemente al hover. Contención por encima de todo. */
    .mt24-btn {
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        font-size: 0.72rem;
        border-width: 1px;
        box-shadow: none;
        transition: background var(--mt24-duration) var(--mt24-ease),
                    color var(--mt24-duration) var(--mt24-ease),
                    border-color var(--mt24-duration) var(--mt24-ease);
    }
    .mt24-btn--primary {
        box-shadow: none;
    }
    .mt24-btn--primary:hover {
        opacity: 0.9;
    }
    .mt24-btn--outline {
        border-width: 1px;
    }
    .mt24-btn--outline:hover {
        background: var(--mt24-text);
        border-color: var(--mt24-text);
        color: #fff;
    }

    /* Section headers: sin regla ni acento; el aire hace el trabajo.
       Centro el encabezado para el aire editorial calmado. */
    .mt24-section-header {
        padding-top: var(--mt24-space-md);
    }

    /* Product card (classic): imagen alta, hover mínimo (leve alzado, sin
       sombra dura). El precio en peso normal, sin gritar. */
    .mt24-prod-card,
    .mt24-product-card {
        box-shadow: none;
        transition: transform var(--mt24-duration-slow) var(--mt24-ease);
    }
    .mt24-prod-card:hover,
    .mt24-product-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--mt24-shadow-md);
    }
    .mt24-prod-card__image img,
    .mt24-product-card__img--primary {
        transition: transform var(--mt24-duration-slow) var(--mt24-ease);
    }
    .mt24-prod-card:hover .mt24-prod-card__image img {
        transform: scale(1.03);
    }
    .mt24-price--current {
        font-family: var(--mt24-font-body);
        font-weight: 600;
        color: var(--mt24-text);
    }
    .mt24-price--old {
        color: var(--mt24-text-muted);
        font-weight: 400;
    }

    /* Badges: pastilla discreta, sin estridencia. */
    .mt24-badge,
    .mt24-prod-card__badge,
    .mt24-product-card__badge {
        border-radius: 999px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 0.62rem;
        background: var(--mt24-text);
        color: #fff;
    }

    /* Dividers: hairline muy tenue. */
    .mt24-divider {
        background: var(--mt24-border);
        opacity: 0.5;
    }

    /* Inputs: borde inferior sutil, sin caja; foco discreto. */
    .mt24-input {
        border-radius: var(--mt24-radius-sm);
        border: 1px solid var(--mt24-border);
        background: transparent;
    }
    .mt24-input:focus {
        border-color: var(--mt24-text);
        box-shadow: none;
    }

    /* Footer: títulos finos con tracking amplio. */
    .mt24-footer__title {
        letter-spacing: 0.16em;
        text-transform: uppercase;
        font-size: var(--mt24-font-size-xs);
        font-weight: 500;
    }

    /* Header transparente con texto OSCURO. El transparent del base fuerza
       texto/íconos/logo blancos (pensado para heroes oscuros), pero Moda Minimal
       es una estética clara y sus heroes salen claros → el texto blanco se
       perdía. Aquí lo invertimos a oscuro para que se lea sobre heroes claros,
       manteniendo el header flotante. (Scope del preset gana en especificidad al
       .mt24-header--transparent del base.) */
    .mt24-header--transparent .mt24-header__logo-text,
    .mt24-header--transparent .mt24-header__icon,
    .mt24-header--transparent .mt24-header__nav-links li a,
    .mt24-header--transparent .mt24-header__inline-nav a,
    .mt24-header--transparent .mt24-header__badge,
    .mt24-header--transparent .mt24-btn--ghost,
    .mt24-header--transparent .mt24-header__hotline i,
    .mt24-header--transparent .mt24-header__hotline-number {
        color: var(--mt24-text);
    }
    .mt24-header--transparent .mt24-header__icon:hover {
        background: rgba(0, 0, 0, 0.05);
        color: var(--mt24-text);
    }
    .mt24-header--transparent .mt24-header__nav-links li a:hover,
    .mt24-header--transparent .mt24-header__nav-links li a.active {
        color: var(--mt24-primary);
        opacity: 1;
    }
    .mt24-header--transparent .mt24-header__nav-links li a::after {
        background: var(--mt24-primary);
    }
    /* Logo sin invertir (que se vea el logo real, no en blanco). */
    .mt24-header--transparent .mt24-header__logo img {
        filter: none;
    }
    /* Buscador: borde/fondo e íconos oscuros. */
    .mt24-header--transparent .mt24-search-form__inner {
        border-color: rgba(0, 0, 0, 0.15);
        background: rgba(0, 0, 0, 0.04);
    }
    .mt24-header--transparent .mt24-search-form__icon,
    .mt24-header--transparent .mt24-search-form__input {
        color: var(--mt24-text);
    }
    .mt24-header--transparent .mt24-search-form__input::placeholder {
        color: var(--mt24-text-muted);
    }
    /* Trigger del mega-menú con fondo oscuro tenue. */
    .mt24-header--transparent .mt24-megamenu__trigger {
        background: rgba(0, 0, 0, 0.05);
    }
    .mt24-header--transparent .mt24-megamenu__trigger:hover {
        background: rgba(0, 0, 0, 0.09);
    }
}