/* ======================================================================
   Tech preset — component decorations
   Scoped to [data-mt24-preset="tech"]. See classic/decorations.css for
   the contract.
   ====================================================================== */

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

    /* Buttons: blocky, slight uppercase, weight 600. */
    .mt24-btn {
        font-weight: 600;
        letter-spacing: -0.005em;
        border-radius: var(--mt24-radius-sm);
    }
    .mt24-btn--primary:hover {
        transform: translateY(-1px);
    }
    /* Don't lift when glued to an input — breaks alignment with the sibling. */
    .mt24-search-form .mt24-btn:hover,
    .mt24-input-group .mt24-btn:hover,
    .input-group .mt24-btn:hover {
        transform: none;
    }
    /* Restore input-group flattening overridden by the .mt24-btn rule above. */
    .mt24-input-group > .mt24-input,
    .mt24-input-group > .mt24-input-group__input,
    .mt24-input-group > input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .mt24-input-group > .mt24-btn,
    .mt24-input-group > .mt24-input-group__btn,
    .mt24-input-group > button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    /* Product card: subtle border + crisp shadow on hover so the card
       reads as a "pressable" tile (typical tech-store affordance). */
    .mt24-prod-card,
    .mt24-product-card {
        border: 1px solid var(--mt24-border-light);
        transition: border-color var(--mt24-duration-fast) var(--mt24-ease),
                    box-shadow var(--mt24-duration) var(--mt24-ease),
                    transform var(--mt24-duration) var(--mt24-ease);
    }
    .mt24-prod-card:hover,
    .mt24-product-card:hover {
        border-color: var(--mt24-primary);
        box-shadow: var(--mt24-shadow-lg);
        transform: translateY(-2px);
    }

    /* Section headers: acento de subrayado corto en color primario. Reemplaza
       al viejo prefijo "// " (leía como comentario de código, no como tienda de
       electrónica). El título es inline-flex (ancho = contenido), así que el
       subrayado queda alineado al texto tanto en headers a la izquierda como
       centrados. */
    .mt24-section-header__title {
        position: relative;
        padding-bottom: 0.55rem;
    }
    .mt24-section-header__title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 2.25rem;
        height: 3px;
        border-radius: 2px;
        background: var(--mt24-primary);
    }

    /* Price emphasis: tabular numerals so prices align in carousels. */
    .mt24-price {
        font-feature-settings: "tnum" 1;
    }
    .mt24-price--current {
        font-weight: 700;
    }

    /* Badge: sharper corners and uppercase tracking — "spec sheet" feel. */
    .mt24-badge {
        border-radius: var(--mt24-radius-sm);
        text-transform: uppercase;
        letter-spacing: var(--mt24-letter-spacing-wide);
        font-size: 0.6875rem;
    }

    /* Inputs: thicker focus ring with the brand color, no outline blur. */
    .mt24-input:focus {
        box-shadow: 0 0 0 2px var(--mt24-primary);
        border-color: var(--mt24-primary);
    }

    /* Trust badges: bigger, blockier. */
    .ui-block--trust_badges .mt24-card {
        border: 1px solid var(--mt24-border);
        border-radius: var(--mt24-radius);
    }

    /* Countdown deals: primary-tinted background + monospace digits. */
    .ui-block--countdown_deals .countdown-timer,
    .ui-block--countdown_deals time {
        font-family: var(--mt24-font-mono);
        font-weight: 700;
    }
}