/* ================================================================
   MT24 Design System — Components
   MiTienda24 Ecommerce Platform
   Requires: mt24-base.css (variables, buttons, badges, forms, utilities)
   BEM naming: .mt24-{block}__{element}--{modifier}
   ================================================================ */


/* ================================================================
   1. HEADER (.mt24-header)
   Variants: --horizontal (default), --centered, --minimal, --transparent
   ================================================================ */

.mt24-header {
    position: sticky;
    top: 0;
    z-index: var(--mt24-z-sticky);
    background: var(--mt24-header-bg);
    border-bottom: 1px solid var(--mt24-border);
    transition: all var(--mt24-duration) var(--mt24-ease);
}

.mt24-header.is-scrolled {
    box-shadow: var(--mt24-shadow-md);
}

/* Top bar */
.mt24-header__top {
    background: var(--mt24-bg-dark);
    color: var(--mt24-text-inverse);
    font-size: var(--mt24-font-size-xs);
    padding: var(--mt24-space-xs) 0;
}

.mt24-header__top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--mt24-container-max);
    margin: 0 auto;
    /*padding: 0 var(--mt24-space-md);*/
}

.mt24-header__top-left,
.mt24-header__top-right {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-md);
}

.mt24-header__top a {
    color: var(--mt24-text-inverse);
    opacity: 0.8;
    transition: opacity var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-header__top a:hover {
    opacity: 1;
    color: var(--mt24-text-inverse);
}

.mt24-header__promo {
    text-align: center;
    font-weight: 600;
}

/* Main row */
.mt24-header__main {
    display: flex;
    align-items: center;
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    min-height: var(--mt24-header-height);
}

.mt24-header__main > .mt24-header__nav-container {
    width: 100%;
}

/* Doble padding en mobile: tanto .mt24-header__main como
   .mt24-header__nav-container traen padding lateral, así que al
   anidarlos el espacio se sumaba (~32px de cada lado en viewports
   chicos). En mobile dejamos solo el padding del main para que el
   contenido respire sin chocar contra los bordes pero sin duplicar.

   Y también compactamos verticalmente: el min-height de 72px del
   desktop + padding vertical de 8px/8px daba ~88px de alto en
   mobile (mucho). Lo bajamos a 56px min-height + 4px/4px de
   padding = ~64px. El topbar también se acompacta a 2px vertical. */
@media (max-width: 991.98px) {
    .mt24-header__main > .mt24-header__nav-container {
        padding-left: 0;
        padding-right: 0;
    }
    .mt24-header__main {
        min-height: 56px;
        padding-top: var(--mt24-space-xs);
        padding-bottom: var(--mt24-space-xs);
    }
    .mt24-header__top {
        padding: 2px 0;
    }
}

/* Logo */
.mt24-header__logo {
  display: flex;
    flex-shrink: 0;
}

.mt24-header__logo a {
    display: inline-flex;
    align-items: center;
}

.mt24-header__logo img {
    max-height: 56px;
    width: auto;
}

/* Search */
.mt24-header__search {
    flex: 1;
    max-width: 600px;
    position: relative;
}

/* ── Search Suggest dropdown (Alpine-powered) ────────────────── */
.mt24-search-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg, 12px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    max-height: 70vh;
    overflow-y: auto;
}
.mt24-search-suggest__group + .mt24-search-suggest__group {
    border-top: 1px solid var(--mt24-border-light);
}
.mt24-search-suggest__group-title {
    padding: 10px 16px 6px;
    font-size: var(--mt24-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mt24-text-muted);
}
.mt24-search-suggest__cat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--mt24-text);
    text-decoration: none;
    transition: background var(--mt24-duration) var(--mt24-ease);
}
.mt24-search-suggest__cat i { color: var(--mt24-text-muted); flex-shrink: 0; }
.mt24-search-suggest__cat.is-active,
.mt24-search-suggest__cat:hover {
    background: var(--mt24-bg-soft);
    color: var(--mt24-primary);
}
.mt24-search-suggest__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--mt24-text);
    text-decoration: none;
    transition: background var(--mt24-duration) var(--mt24-ease);
}
.mt24-search-suggest__item.is-active,
.mt24-search-suggest__item:hover {
    background: var(--mt24-bg-soft);
}
.mt24-search-suggest__thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--mt24-radius);
    background: var(--mt24-bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--mt24-text-muted);
}
.mt24-search-suggest__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mt24-search-suggest__body {
    flex: 1;
    min-width: 0;
}
.mt24-search-suggest__name {
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mt24-search-suggest__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: var(--mt24-font-size-xs);
}
.mt24-search-suggest__price {
    color: var(--mt24-primary);
    font-weight: 700;
}
.mt24-search-suggest__compare {
    color: var(--mt24-text-muted);
    text-decoration: line-through;
}
.mt24-search-suggest__view-all {
    display: block;
    padding: 12px 16px;
    text-align: center;
    background: var(--mt24-bg-soft);
    color: var(--mt24-primary);
    font-weight: 600;
    font-size: var(--mt24-font-size-sm);
    text-decoration: none;
    border-top: 1px solid var(--mt24-border-light);
    transition: background var(--mt24-duration) var(--mt24-ease);
}
.mt24-search-suggest__view-all:hover {
    background: var(--mt24-bg-muted);
}
.mt24-search-suggest--empty {
    padding: 24px 16px;
    text-align: center;
}
.mt24-search-suggest__empty-icon {
    font-size: 32px;
    color: var(--mt24-text-muted);
    opacity: 0.5;
}
.mt24-search-suggest__empty-text {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
    margin-top: 8px;
}
.mt24-search-suggest__empty-hint {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    margin-top: 4px;
}

.mt24-header__search-form {
    display: flex;
    align-items: stretch;
    border: 2px solid var(--mt24-border);
    border-radius: var(--mt24-radius-full);
    overflow: hidden;
    transition: border-color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-header__search-form:focus-within {
    border-color: var(--mt24-primary);
    box-shadow: 0 0 0 3px rgba(var(--mt24-primary-rgb), 0.1);
}

.mt24-header__search-category {
    border: none;
    background: var(--mt24-bg-soft);
    padding: 0 var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    border-right: 1px solid var(--mt24-border);
    cursor: pointer;
    min-width: 130px;
}

.mt24-header__search-input {
    border: none;
    padding: 10px var(--mt24-space-md);
    flex: 1;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
    background: var(--mt24-bg);
    outline: none;
    min-width: 0;
}

.mt24-header__search-input::placeholder {
    color: var(--mt24-text-muted);
}

.mt24-header__search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    border: none;
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
    cursor: pointer;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-header__search-btn:hover {
    background: var(--mt24-primary-hover);
}

/* Actions */
.mt24-header__actions {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    flex-shrink: 0;
}

/* Toggle "Acciones pegadas a la derecha" — opcional, controlado por la
   setting theme_header_actions_align desde el page builder. Sin esta
   clase los iconos quedan junto al search (comportamiento legacy). Con
   ella, el actions recibe margin-left:auto y se empuja al borde derecho
   del nav-container.
   Excluimos centered (usa grid con justify-self:end, ya está alineado)
   y sidebar_left (header vertical, no aplica). */
.mt24-header--actions-right:not(.mt24-header--centered):not(.mt24-header--sidebar_left)
  .mt24-header__nav-container > .mt24-header__actions {
    margin-left: auto;
}

/* Toggle "Ocultar barra superior" — la setting theme_header_topbar
   ('show' default | 'hide') agrega esta clase al wrapper y el topbar
   queda visualmente oculto. Lo dejamos en el DOM (sin display:none
   global del partial) por si en el futuro queremos animarlo o exponerlo
   contextualmente. */
.mt24-header--no-topbar .mt24-header__top {
    display: none !important;
}

.mt24-header__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--mt24-radius-full);
    background: transparent;
    border: none;
    color: var(--mt24-text);
    cursor: pointer;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
    font-size: 1.25rem;
    text-decoration: none;
}
.mt24-header__icon > i {
  width: 24px;
  height: 24px;
}

.mt24-header__icon:hover {
    background: var(--mt24-bg-muted);
    color: var(--mt24-primary);
}

/* Mobile-only: bump the direct icon children (search toggle, wishlist, cart)
   so they feel tappable, and push the action group all the way right so
   the icons aren't glued to the logo. Desktop keeps 1em (~16px). */
@media (max-width: 991.98px) {
    .mt24-header__icon > i {
        width: 24px;
        height: 24px;
    }
    .mt24-header__nav-container > .mt24-header__actions {
        margin-left: auto;
    }
}

/* Wrap interno (icono + badge). Aísla al badge para que su position:absolute
   se ancle al icono y no al <a> entero — sino, con labels visibles el badge
   terminaba colgando del borde derecho del bloque, después del texto. */
.mt24-header__icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.mt24-header__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt24-danger);
    color: var(--mt24-text-inverse);
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--mt24-radius-full);
    padding: 0 4px;
    line-height: 1;
}

.mt24-header__icon-label {
    display: none;
    font-size: var(--mt24-font-size-xs);
    font-weight: 500;
}

/* Navigation bar */
.mt24-header__nav {
    background: var(--mt24-bg);
    border-top: 1px solid var(--mt24-border-light);
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-header__nav-container {
    max-width: var(--mt24-container-max);
    margin: 0 auto;
    padding: 0 var(--mt24-space-md);
}

.mt24-header__nav-inner {
    display: flex;
    align-items: stretch;
    gap: 0;
    /*padding: 0 var(--mt24-space-md);*/
    padding: 0;
}

.mt24-header__nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--mt24-duration-fast) var(--mt24-ease);
    position: relative;
}

.mt24-header__nav-link:hover,
.mt24-header__nav-link.active {
    color: var(--mt24-primary);
}

.mt24-header__nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--mt24-space-md);
    right: var(--mt24-space-md);
    height: 2px;
    background: var(--mt24-primary);
    transform: scaleX(0);
    transition: transform var(--mt24-duration) var(--mt24-ease);
}

.mt24-header__nav-link:hover::after,
.mt24-header__nav-link.active::after {
    transform: scaleX(1);
}

/* Mobile toggle */
.mt24-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    color: var(--mt24-text);
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: var(--mt24-radius);
}

/* ── Header Variant: Centered ── */
/* ── Header Variant: Centered ── */
.mt24-header--centered .mt24-header__main > div {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    padding-top: var(--mt24-space-md);
    padding-bottom: var(--mt24-space-md);
    gap: var(--mt24-space-sm);
}

/* Hamburger mobile — hide on desktop for centered */
.mt24-header--centered .mt24-header__main > div > .d-lg-none:first-child {
    grid-column: 1;
    grid-row: 1;
}

.mt24-header--centered .mt24-header__logo {
  display: flex;
    grid-column: 2;
    grid-row: 1;
    text-align: center;
}

.mt24-header--centered .mt24-header__logo a {
    display: inline-flex;
    justify-content: center;
}

.mt24-header--centered .mt24-header__logo img {
    max-height: 52px;
}

.mt24-header--centered .mt24-header__search {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.mt24-header--centered .mt24-header__actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

.mt24-header--centered .mt24-header__nav-inner {
    justify-content: center;
}

.mt24-header--centered .mt24-megamenu__trigger {
    border-radius: var(--mt24-radius);
    margin: 4px 0;
}

.mt24-header--centered .mt24-header__nav-links {
    justify-content: center;
    flex: none;
}

/* ── Header Variant: Minimal ── */
.mt24-header--minimal .mt24-header__top {
    display: none;
}

.mt24-header--minimal .mt24-header__nav {
    display: none !important;
}

.mt24-header--minimal .mt24-header__search {
    display: none !important;
}

.mt24-header--minimal .mt24-header__main {
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-header--minimal .mt24-header__inline-nav {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    flex: 1;
    justify-content: center;
}

.mt24-header--minimal .mt24-header__inline-nav a {
    font-size: var(--mt24-font-size-sm);
    font-weight: 500;
    color: var(--mt24-text-secondary);
    text-decoration: none;
    padding: var(--mt24-space-xs) var(--mt24-space-sm);
    border-radius: var(--mt24-radius);
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-header--minimal .mt24-header__inline-nav a:hover,
.mt24-header--minimal .mt24-header__inline-nav a.active {
    color: var(--mt24-primary);
    background: rgba(var(--mt24-primary-rgb, 59, 130, 246), 0.06);
}

/* Hide inline-nav by default (only show in minimal on desktop) */
.mt24-header__inline-nav {
    display: none;
}

@media (max-width: 991px) {
    .mt24-header--minimal .mt24-header__inline-nav {
        display: none !important;
    }
}

/* Minimal: show search icon in actions for quick access */
.mt24-header--minimal .mt24-header__actions .d-lg-none {
    display: inline-flex !important;
}

.mt24-header--minimal .mt24-header__actions .d-none.d-lg-inline-flex {
    display: inline-flex !important;
}

/* ── Header Variant: Transparent ── */
/* ── Header Variant: Transparent ── */
.mt24-header--transparent {
    /* Sticky como todas las variantes (el base .mt24-header ya es sticky). Antes
       era 'relative', así que no se fijaba al bajar PERO el estado .is-scrolled
       —pensado para sticky— igual le ponía fondo blanco: se veía como un bug
       (blanqueaba mientras se iba). Ahora flota transparente sobre el hero y al
       scrollear se queda fija con fondo sólido (is-scrolled). */
    position: sticky;
    top: 0;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: var(--mt24-z-sticky);
    transition: background var(--mt24-duration) var(--mt24-ease), border-color var(--mt24-duration) var(--mt24-ease), box-shadow var(--mt24-duration) var(--mt24-ease);
}

/* Pull next content up behind the transparent header */
.mt24-header--transparent + * {
    margin-top: calc(-1 * var(--mt24-transparent-header-h, 110px));
    position: relative;
}

/* Hide top bar and nav bar in transparent */
.mt24-header--transparent .mt24-header__top {
    display: none;
}

.mt24-header--transparent .mt24-header__nav {
    background: transparent;
    border-top-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: transparent;
}

.mt24-header--transparent .mt24-header__main {
    background: transparent;
}

/* All text/icons white */
.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 {
    color: var(--mt24-text-inverse);
}

.mt24-header--transparent .mt24-header__icon:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--mt24-text-inverse);
}

.mt24-header--transparent .mt24-header__nav-links li a:hover,
.mt24-header--transparent .mt24-header__nav-links li a.active {
    color: #fff;
    opacity: 0.85;
}

.mt24-header--transparent .mt24-header__nav-links li a::after {
    background: #fff;
}

/* Logo white filter */
.mt24-header--transparent .mt24-header__logo img {
    filter: brightness(0) invert(1);
}

/* Search transparent style */
.mt24-header--transparent .mt24-search-form__inner {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

.mt24-header--transparent .mt24-search-form__icon,
.mt24-header--transparent .mt24-search-form__input {
    color: var(--mt24-text-inverse);
}

.mt24-header--transparent .mt24-search-form__input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Megamenu trigger transparent */
.mt24-header--transparent .mt24-megamenu__trigger {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--mt24-radius);
    margin: 4px 0;
}

.mt24-header--transparent .mt24-megamenu__trigger:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Mobile hamburger white */
.mt24-header--transparent .mt24-btn--ghost {
    color: var(--mt24-text-inverse);
}

/* ── Scrolled: solid background ── */
.mt24-header--transparent.is-scrolled {
    background: var(--mt24-bg);
    border-bottom-color: var(--mt24-border-light);
    box-shadow: var(--mt24-shadow-sm);
}

.mt24-header--transparent.is-scrolled .mt24-header__nav {
    background: var(--mt24-bg);
}

.mt24-header--transparent.is-scrolled .mt24-header__main {
    background: var(--mt24-bg);
}

.mt24-header--transparent.is-scrolled .mt24-header__logo-text,
.mt24-header--transparent.is-scrolled .mt24-header__icon,
.mt24-header--transparent.is-scrolled .mt24-header__nav-links li a,
.mt24-header--transparent.is-scrolled .mt24-header__inline-nav a,
.mt24-header--transparent.is-scrolled .mt24-header__badge {
    color: var(--mt24-text);
}

.mt24-header--transparent.is-scrolled .mt24-header__nav-links li a:hover,
.mt24-header--transparent.is-scrolled .mt24-header__nav-links li a.active {
    color: var(--mt24-primary);
    opacity: 1;
}

.mt24-header--transparent.is-scrolled .mt24-header__nav-links li a::after {
    background: var(--mt24-primary);
}

.mt24-header--transparent.is-scrolled .mt24-header__icon:hover {
    background: var(--mt24-bg-muted);
    color: var(--mt24-primary);
}

.mt24-header--transparent.is-scrolled .mt24-header__logo img {
    filter: none;
}

.mt24-header--transparent.is-scrolled .mt24-search-form__inner {
    border-color: var(--mt24-border);
    background: var(--mt24-bg);
}

.mt24-header--transparent.is-scrolled .mt24-search-form__icon,
.mt24-header--transparent.is-scrolled .mt24-search-form__input {
    color: var(--mt24-text);
}

.mt24-header--transparent.is-scrolled .mt24-search-form__input::placeholder {
    color: var(--mt24-text-muted);
}

.mt24-header--transparent.is-scrolled .mt24-megamenu__trigger {
    background: var(--mt24-primary);
}

.mt24-header--transparent.is-scrolled .mt24-header__nav {
    border-top-color: var(--mt24-border-light);
    border-bottom-color: var(--mt24-border-light);
}

.mt24-header--transparent.is-scrolled .mt24-btn--ghost {
    color: var(--mt24-text);
}

/* Header responsive */
@media (max-width: 991px) {
    .mt24-header__search {
        display: none;
    }

    .mt24-header__nav {
        display: none;
    }

    .mt24-header__toggle {
        display: inline-flex;
    }

    .mt24-header--centered .mt24-header__main > div {
        display: flex;
        flex-wrap: nowrap;
        /* En desktop el centered necesita padding vertical extra (16px
           arriba/abajo) porque tiene 2 filas en grid. En mobile pasa a
           flex single-row, así que ese padding ya no aplica y se
           sumaba indebido (~32px extra). Heredamos el padding del
           .mt24-header__main que ya quedó en 4px. */
        padding-top: 0;
        padding-bottom: 0;
    }

    .mt24-header--centered .mt24-header__logo {
        flex: 0 0 auto;
        text-align: left;
    }

    .mt24-header--centered .mt24-header__logo img {
        max-height: 36px;
    }

    .mt24-header--centered .mt24-header__search {
        display: none !important;
    }
}


/* ================================================================
   2. MEGA MENU (.mt24-megamenu)
   ================================================================ */

.mt24-header__nav {
    position: relative;
}

.mt24-megamenu {
    position: static;
    display: flex;
    align-items: stretch;
}

.mt24-megamenu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px var(--mt24-space-lg);
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
    border: none;
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
    white-space: nowrap;
    margin: -1px 0;
}

.mt24-megamenu__trigger:hover {
    background: var(--mt24-secondary, var(--mt24-primary-hover));
}

.mt24-megamenu__trigger i {
    font-size: 1.5em;
}

.mt24-megamenu__arrow {
    font-size: 0.7em;
    transition: transform var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-megamenu[data-open="true"] .mt24-megamenu__arrow {
    transform: rotate(180deg);
}

.mt24-megamenu__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--mt24-bg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border-top: 3px solid var(--mt24-primary);
    border-radius: 0 0 var(--mt24-radius-lg) var(--mt24-radius-lg);
    padding: var(--mt24-space-xl) 0;
    z-index: var(--mt24-z-dropdown);
}

/* ── Megamenu columns ── */
.mt24-megamenu__col {
    padding: 0 var(--mt24-space-sm);
}

.mt24-megamenu__col-title {
    margin-bottom: var(--mt24-space-sm);
}

.mt24-megamenu__col-title a {
    font-size: var(--mt24-font-size-sm);
    font-weight: 700;
    color: var(--mt24-text);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    padding-bottom: var(--mt24-space-xs);
    border-bottom: 2px solid var(--mt24-primary);
}

/* Iconos en la cabecera de cada columna (categoría padre con subcats).
   Sin esto el <i> hereda font-size sm (~13px) del <a> y los iconos
   quedaban tipo "favicon". 20px se ve proporcionado al título. */
.mt24-megamenu__col-title a i[class*="icon-mt24-"] {
    font-size: 20px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--mt24-primary);
}

.mt24-megamenu__col-title a:hover {
    color: var(--mt24-primary);
}

.mt24-megamenu__sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mt24-megamenu__sub-list li a {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    padding: 4px 0;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    text-decoration: none;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
    border-radius: var(--mt24-radius-sm, 4px);
}

/* Iconos de las categorías "simples" (sin subcats) — mostradas como ítems
   de lista. Mismo problema que arriba: heredaban font-size sm. 18px las
   hace legibles sin desbalancear el texto. */
.mt24-megamenu__sub-list li a i[class*="icon-mt24-"] {
    font-size: 18px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--mt24-primary);
    opacity: 0.85;
}

.mt24-megamenu__sub-list li a:hover {
    color: var(--mt24-primary);
    padding-left: var(--mt24-space-sm);
}

/* 3rd level nested */
.mt24-megamenu__sub-list--nested {
    list-style: none;
    padding: 0;
    margin: 4px 0 var(--mt24-space-xs) var(--mt24-space-sm);
    border-left: 2px solid var(--mt24-border-light);
}

.mt24-megamenu__sub-list--nested li a {
    display: block;
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    padding: 3px 0 3px var(--mt24-space-sm);
    text-decoration: none;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-megamenu__sub-list--nested li a:hover {
    color: var(--mt24-primary);
    padding-left: var(--mt24-space-md);
}

/* ── Megamenu footer ── */
.mt24-megamenu__footer {
    margin-top: var(--mt24-space-md);
    padding-top: var(--mt24-space-md);
    border-top: 1px solid var(--mt24-border-light);
    text-align: center;
}

.mt24-megamenu__view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-primary);
    text-decoration: none;
    transition: gap var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-megamenu__view-all:hover {
    gap: var(--mt24-space-sm);
}

/* ── Legacy class compat ── */
.mt24-megamenu__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mt24-space-xl);
    max-width: var(--mt24-container-max);
    margin: 0 auto;
}

.mt24-megamenu__title {
    font-size: var(--mt24-font-size-sm);
    font-weight: 700;
    color: var(--mt24-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--mt24-space-sm);
    padding-bottom: var(--mt24-space-xs);
    border-bottom: 2px solid var(--mt24-primary);
    display: inline-block;
}

.mt24-megamenu__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mt24-megamenu__link {
    display: block;
    padding: var(--mt24-space-xs) 0;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    text-decoration: none;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-megamenu__link:hover {
    color: var(--mt24-primary);
    padding-left: var(--mt24-space-sm);
}

.mt24-megamenu__image {
    display: block;
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    position: relative;
}

.mt24-megamenu__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--mt24-duration-slow) var(--mt24-ease);
}

.mt24-megamenu__image:hover img {
    transform: scale(1.05);
}

.mt24-megamenu__image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--mt24-space-md);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: var(--mt24-text-inverse);
    font-weight: 600;
    font-size: var(--mt24-font-size-sm);
}

@media (max-width: 991px) {
    .mt24-megamenu__panel {
        display: none !important;
    }
}


/* ================================================================
   3. MOBILE MENU OFFCANVAS (.mt24-mobile-menu)
   ================================================================ */

.mt24-mobile-menu__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--mt24-z-offcanvas) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--mt24-duration-slow) var(--mt24-ease), visibility var(--mt24-duration-slow);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.mt24-mobile-menu__backdrop.active {
    opacity: 1;
    visibility: visible;
}

.mt24-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 90vw;
    background: var(--mt24-bg);
    z-index: var(--mt24-z-offcanvas);
    transform: translateX(-100%);
    transition: transform var(--mt24-duration-slow) var(--mt24-ease);
    box-shadow: none;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.mt24-mobile-menu.active {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

.mt24-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mt24-space-md);
    border-bottom: 1px solid var(--mt24-border);
    flex-shrink: 0;
}

.mt24-mobile-menu__logo img {
    max-height: 32px;
}

.mt24-mobile-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--mt24-bg-muted);
    border-radius: var(--mt24-radius-full);
    color: var(--mt24-text);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-mobile-menu__close:hover {
    background: var(--mt24-danger);
    color: var(--mt24-text-inverse);
}

.mt24-mobile-menu__search {
    padding: var(--mt24-space-md);
    border-bottom: 1px solid var(--mt24-border-light);
    flex-shrink: 0;
}

.mt24-mobile-menu__search-input {
    width: 100%;
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-full);
    padding: 10px var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
    background: var(--mt24-bg-soft);
    outline: none;
    transition: border-color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-mobile-menu__search-input:focus {
    border-color: var(--mt24-primary);
}

.mt24-mobile-menu__nav {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--mt24-space-sm);
}

.mt24-mobile-menu__link {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-md);
    padding: 12px var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    font-weight: 500;
    color: var(--mt24-text);
    text-decoration: none;
    border-radius: var(--mt24-radius);
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-mobile-menu__link i {
    width: 20px;
    font-size: 1.1rem;
    color: var(--mt24-text-muted);
    flex-shrink: 0;
}

/* Iconos mt24 dentro de los links del menú mobile (categorías simples,
   Mi cuenta, Blog, Catálogo, etc.). Sin esto el <i> heredaba font-size sm
   y el width:20px del rule de arriba no matcheaba el height (1em ≈ 17px) →
   mask-image salía squished. 22px cuadrados + color primary lo alinea con
   el mega-menú desktop. */
.mt24-mobile-menu__link i[class*="icon-mt24-"] {
    width: 22px;
    height: 22px;
    font-size: 22px;
    color: var(--mt24-primary);
    opacity: 0.9;
}

.mt24-mobile-menu__link:hover,
.mt24-mobile-menu__link.active {
    background: rgba(var(--mt24-primary-rgb, 59, 130, 246), 0.08);
    color: var(--mt24-primary);
}

.mt24-mobile-menu__link:hover i,
.mt24-mobile-menu__link.active i {
    color: var(--mt24-primary);
}

.mt24-mobile-menu__link:hover i[class*="icon-mt24-"],
.mt24-mobile-menu__link.active i[class*="icon-mt24-"] {
    opacity: 1;
}

.mt24-mobile-menu__link--highlight {
    color: var(--mt24-primary);
    font-weight: 600;
}

.mt24-mobile-menu__link--danger {
    color: var(--mt24-danger);
}

.mt24-mobile-menu__link--danger i {
    color: var(--mt24-danger);
}

.mt24-mobile-menu__link--danger:hover {
    background: rgba(239, 68, 68, 0.08);
    color: var(--mt24-danger);
}

/* Section title */
.mt24-mobile-menu__section {
    margin-top: var(--mt24-space-xs);
}

.mt24-mobile-menu__section-title {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    margin-bottom: var(--mt24-space-xs);
    font-size: var(--mt24-font-size-xs);
    font-weight: 700;
    /* Fondo + color tomados de la nav del desktop (vars inyectadas en el
       wrapper .mt24-mobile-menu via mobile_menu.php). Cuando el tenant no
       configuró colores propios, --mt24-nav-bg cae a --mt24-bg-soft (gris
       neutro del theme) y --mt24-nav-text a --mt24-text-muted. */
    background: var(--mt24-nav-bg, var(--mt24-bg-soft));
    color: var(--mt24-nav-text, var(--mt24-text-muted));
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Accordion */
.mt24-mobile-menu__accordion {
    margin-bottom: 2px;
}

.mt24-mobile-menu__accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    font-weight: 400;
    color: var(--mt24-text);
    background: none;
    border: none;
    border-radius: var(--mt24-radius);
    cursor: pointer;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}

/* El <span> izquierdo del trigger contiene `<i>icon</i> Nombre` — sin
   esta regla el span queda en `display:inline`, gap no aplica, y el
   icono y el texto quedan pegados sin alineación vertical. */
.mt24-mobile-menu__accordion-trigger > span {
    display: inline-flex;
    align-items: center;
    gap: var(--mt24-space-sm);
}

/* Iconos de categoría dentro del trigger (categorías padre del menú
   mobile). El selector apunta al primer <i> dentro del <span> izquierdo
   — el otro <i> del trigger es el chevron y mantiene su tamaño chico. */
.mt24-mobile-menu__accordion-trigger > span > i[class*="icon-mt24-"] {
    width: 22px;
    height: 22px;
    font-size: 22px;
    color: var(--mt24-primary);
    opacity: 0.9;
    flex-shrink: 0;
}

.mt24-mobile-menu__accordion-trigger:hover {
    background: var(--mt24-bg-soft);
}

.mt24-mobile-menu__accordion-trigger:hover > span > i[class*="icon-mt24-"] {
    opacity: 1;
}

.mt24-mobile-menu__accordion-icon {
    font-size: 0.7rem;
    color: var(--mt24-text-muted);
    transition: transform var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-mobile-menu__accordion-icon.is-expanded {
    transform: rotate(180deg);
}

.mt24-mobile-menu__accordion-panel {
    padding: 0 var(--mt24-space-sm) var(--mt24-space-sm);
}

.mt24-mobile-menu__sublink {
    display: block;
    padding: 8px var(--mt24-space-md) 8px var(--mt24-space-xl);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    text-decoration: none;
    border-radius: var(--mt24-radius-sm, 4px);
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-mobile-menu__sublink:hover {
    background: var(--mt24-bg-soft);
    color: var(--mt24-primary);
}

.mt24-mobile-menu__sublink--all {
    color: var(--mt24-primary);
    font-weight: 600;
}

.mt24-mobile-menu__divider {
    height: 1px;
    background: var(--mt24-border-light);
    margin: var(--mt24-space-sm);
}

/* Footer */
.mt24-mobile-menu__footer {
    padding: var(--mt24-space-md);
    border-top: 1px solid var(--mt24-border-light);
    flex-shrink: 0;
    background: var(--mt24-bg-soft);
}

.mt24-mobile-menu__contact {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    padding: 6px 0;
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-secondary);
    text-decoration: none;
}

.mt24-mobile-menu__contact:hover {
    color: var(--mt24-primary);
}

.mt24-mobile-menu__social {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    padding-top: var(--mt24-space-sm);
    margin-top: var(--mt24-space-sm);
    border-top: 1px solid var(--mt24-border-light);
}

.mt24-mobile-menu__social a,
.mt24-mobile-menu__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--mt24-radius-full);
    background: var(--mt24-bg-muted);
    color: var(--mt24-text-secondary);
    text-decoration: none;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-mobile-menu__social a:hover {
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
}


/* ================================================================
   4. PRODUCT CARD (.mt24-product-card)
   Variants: --classic (default), --minimal, --overlay, --horizontal
   ================================================================ */

.mt24-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--mt24-bg);
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    border: 1px solid var(--mt24-border-light);
    transition: all var(--mt24-duration) var(--mt24-ease);
}

.mt24-product-card:hover {
    box-shadow: var(--mt24-shadow-md);
    transform: translateY(-2px);
    border-color: var(--mt24-border);
}

/* Image container */
.mt24-product-card__image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--mt24-bg-soft);
}

.mt24-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--mt24-duration-slow) var(--mt24-ease);
}

.mt24-product-card:hover .mt24-product-card__image img {
    transform: scale(1.05);
}

.mt24-product-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Second image on hover */
.mt24-product-card__image-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--mt24-duration-slow) var(--mt24-ease);
}

.mt24-product-card:hover .mt24-product-card__image-hover {
    opacity: 1;
}

/* Badges */
.mt24-product-card__badges {
    position: absolute;
    top: var(--mt24-space-sm);
    left: var(--mt24-space-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

.mt24-product-card__badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--mt24-radius-sm);
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.mt24-product-card__badge--sale {
    background: var(--mt24-danger);
    color: var(--mt24-text-inverse);
}

.mt24-product-card__badge--new {
    background: var(--mt24-success);
    color: var(--mt24-text-inverse);
}

.mt24-product-card__badge--hot {
    background: var(--mt24-warning);
    color: var(--mt24-text);
}

.mt24-product-card__badge--out {
    background: var(--mt24-bg-dark);
    color: var(--mt24-text-inverse);
}

/* Quick actions */
.mt24-product-card__actions {
    position: absolute;
    right: var(--mt24-space-sm);
    top: var(--mt24-space-sm);
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateX(10px);
    transition: all var(--mt24-duration) var(--mt24-ease);
    z-index: 2;
}

.mt24-product-card:hover .mt24-product-card__actions {
    opacity: 1;
    transform: translateX(0);
}

.mt24-product-card__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--mt24-radius-full);
    background: var(--mt24-bg);
    color: var(--mt24-text);
    border: none;
    cursor: pointer;
    box-shadow: var(--mt24-shadow);
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
    font-size: 0.9rem;
}

.mt24-product-card__action-btn:hover {
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
    transform: scale(1.1);
}

.mt24-product-card__action-btn.is-active {
    background: var(--mt24-danger);
    color: var(--mt24-text-inverse);
}

/* Body */
.mt24-product-card__body {
    padding: var(--mt24-space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mt24-product-card__brand {
    font-size: var(--mt24-font-size-xs);
    font-weight: 600;
    color: var(--mt24-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    margin-bottom: 2px;
}

.mt24-product-card__category {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.mt24-product-card__category a {
    color: inherit;
    text-decoration: none;
}

.mt24-product-card__category a:hover {
    color: var(--mt24-primary);
}

.mt24-product-card__title {
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    line-height: 1.3;
    margin: 0 0 var(--mt24-space-xs);
}

.mt24-product-card__title a {
    color: inherit;
    text-decoration: none;
}

.mt24-product-card__title a:hover {
    color: var(--mt24-primary);
}

.mt24-product-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--mt24-space-xs);
}

.mt24-product-card__stars {
    color: var(--mt24-warning);
    font-size: var(--mt24-font-size-xs);
    display: flex;
    gap: 1px;
}

.mt24-product-card__stars-empty {
    color: var(--mt24-border);
}

.mt24-product-card__rating-count {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
}

/* Price */
.mt24-product-card__price {
    margin-top: auto;
    padding-top: var(--mt24-space-sm);
    display: flex;
    align-items: baseline;
    gap: var(--mt24-space-xs);
    flex-wrap: wrap;
}

.mt24-product-card__price-current {
    font-size: var(--mt24-font-size-lg);
    font-weight: 700;
    color: var(--mt24-primary);
}

.mt24-product-card__price-old {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-muted);
    text-decoration: line-through;
    font-weight: 400;
}

.mt24-product-card__price-discount {
    font-size: 11px;
    font-weight: 700;
    color: var(--mt24-danger);
}

.mt24-product-card .mt24-btn i {
    width: 20px;
    height: 20px;
}

/* Add to cart */
.mt24-product-card__add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mt24-space-xs);
    width: 100%;
    padding: 10px var(--mt24-space-md);
    margin-top: var(--mt24-space-sm);
    border: none;
    border-radius: var(--mt24-radius);
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-product-card__add-btn:hover {
    background: var(--mt24-primary-hover);
    box-shadow: 0 4px 12px rgba(var(--mt24-primary-rgb), 0.3);
}

/* ── Product Card Variant: Minimal ── */
.mt24-product-card--minimal {
    box-shadow: none;
    border: 1px solid var(--mt24-border);
}

.mt24-product-card--minimal:hover {
    box-shadow: none;
    transform: none;
    border-color: var(--mt24-primary);
}

.mt24-product-card--minimal .mt24-product-card__image {
    aspect-ratio: 4/3;
}

.mt24-product-card--minimal:hover .mt24-product-card__image img {
    transform: none;
}

/* minimal mantiene el patrón hover por default — no override actions */

/* ── Product Card Variant: Overlay ── */
.mt24-product-card--overlay .mt24-product-card__image {
    aspect-ratio: 3/4;
}

.mt24-product-card--overlay .mt24-product-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    padding: var(--mt24-space-xl) var(--mt24-space-md) var(--mt24-space-md);
    color: var(--mt24-text-inverse);
    z-index: 2;
}

.mt24-product-card--overlay .mt24-product-card__title,
.mt24-product-card--overlay .mt24-product-card__category,
.mt24-product-card--overlay .mt24-product-card__brand {
    color: var(--mt24-text-inverse);
}

.mt24-product-card--overlay .mt24-product-card__category {
    opacity: 0.8;
}

.mt24-product-card--overlay .mt24-product-card__title a {
    color: var(--mt24-text-inverse);
}

.mt24-product-card--overlay .mt24-product-card__price-current {
    color: var(--mt24-text-inverse);
}

.mt24-product-card--overlay .mt24-product-card__price-old {
    color: rgba(255, 255, 255, 0.6);
}
.mt24-product-card--overlay .mt24-btn i {
    width: 20px;
    height: 20px;
}

/* ── Product Card Variant: Horizontal ── */
.mt24-product-card--horizontal {
    flex-direction: row;
    height: auto;
}

.mt24-product-card--horizontal .mt24-product-card__image {
    width: 140px;
    min-width: 140px;
    aspect-ratio: 1;
    flex-shrink: 0;
}

.mt24-product-card--horizontal .mt24-product-card__body {
    justify-content: center;
    flex: 1;
}

.mt24-product-card--horizontal .mt24-product-card__title {
    font-size: var(--mt24-font-size-sm);
    min-height: auto;
    -webkit-line-clamp: 2;
}

.mt24-product-card--horizontal .mt24-product-card__placeholder {
    aspect-ratio: 1;
    height: 100%;
}

@media (max-width: 575px) {
    .mt24-product-card--horizontal .mt24-product-card__image {
        width: 120px;
        min-width: 120px;
    }
}


/* ================================================================
   5. CART OFFCANVAS (.mt24-cart-offcanvas)
   ================================================================ */

.mt24-cart-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 90vw;
    background: var(--mt24-bg);
    z-index: var(--mt24-z-offcanvas);
    transform: translateX(100%);
    transition: transform var(--mt24-duration-slow) var(--mt24-ease);
    display: flex;
    flex-direction: column;
    box-shadow: var(--mt24-shadow-xl);
}

.mt24-cart-offcanvas.active {
    transform: translateX(0);
}

.mt24-cart-offcanvas__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mt24-space-md) var(--mt24-space-lg);
    border-bottom: 1px solid var(--mt24-border);
    flex-shrink: 0;
}

.mt24-cart-offcanvas__title {
    font-size: var(--mt24-font-size-lg);
    font-weight: 700;
    color: var(--mt24-text);
    margin: 0;
}

.mt24-cart-offcanvas__count {
    font-weight: 400;
    color: var(--mt24-text-muted);
    font-size: var(--mt24-font-size-sm);
}

.mt24-cart-offcanvas__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--mt24-bg-muted);
    border-radius: var(--mt24-radius-full);
    color: var(--mt24-text);
    cursor: pointer;
    font-size: 1.1rem;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-cart-offcanvas__close:hover {
    background: var(--mt24-danger);
    color: var(--mt24-text-inverse);
}

/* Progress bar (free shipping) */
.mt24-cart-offcanvas__progress {
    padding: var(--mt24-space-sm) var(--mt24-space-lg);
    background: var(--mt24-bg-soft);
    border-bottom: 1px solid var(--mt24-border-light);
    flex-shrink: 0;
}

.mt24-cart-offcanvas__progress-text {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-secondary);
    margin-bottom: var(--mt24-space-xs);
    text-align: center;
}

.mt24-cart-offcanvas__progress-bar {
    height: 4px;
    background: var(--mt24-bg-muted);
    border-radius: var(--mt24-radius-full);
    overflow: hidden;
}

.mt24-cart-offcanvas__progress-fill {
    height: 100%;
    background: var(--mt24-success);
    border-radius: var(--mt24-radius-full);
    transition: width var(--mt24-duration-slow) var(--mt24-ease);
}

/* Body (scrollable items) */
.mt24-cart-offcanvas__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--mt24-space-md) var(--mt24-space-lg);
}

/* Empty state */
.mt24-cart-offcanvas__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mt24-space-3xl) var(--mt24-space-md);
    text-align: center;
    color: var(--mt24-text-muted);
}

.mt24-cart-offcanvas__empty-icon {
    font-size: 3rem;
    margin-bottom: var(--mt24-space-md);
    opacity: 0.4;
}

.mt24-cart-offcanvas__empty-text {
    font-size: var(--mt24-font-size-base);
    margin-bottom: var(--mt24-space-md);
}

/* Backdrop */
.mt24-cart-offcanvas__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: calc(var(--mt24-z-offcanvas) - 1);
    backdrop-filter: blur(2px);
}

/* Item placeholder image */
.mt24-cart-offcanvas__item-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt24-bg-muted);
    border-radius: var(--mt24-radius);
    width: 64px;
    height: 64px;
}
.mt24-cart-offcanvas__item-placeholder i {
    font-size: 1.5rem;
    color: var(--mt24-text-muted);
}

/* Item variant label */
.mt24-cart-offcanvas__item-variant {
    display: block;
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    margin-top: 2px;
}

/* Cart item */
.mt24-cart-offcanvas__item {
    display: flex;
    gap: var(--mt24-space-md);
    padding: var(--mt24-space-md) 0;
    border-bottom: 1px solid var(--mt24-border-light);
    position: relative;
}

.mt24-cart-offcanvas__item:last-child {
    border-bottom: none;
}

.mt24-cart-offcanvas__item-image {
    width: 72px;
    height: 72px;
    border-radius: var(--mt24-radius);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--mt24-bg-soft);
}

.mt24-cart-offcanvas__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mt24-cart-offcanvas__item-info {
    flex: 1;
    min-width: 0;
}

.mt24-cart-offcanvas__item-name {
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text);
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mt24-cart-offcanvas__item-name a {
    color: inherit;
    text-decoration: none;
}

.mt24-cart-offcanvas__item-variant {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    margin-bottom: var(--mt24-space-xs);
}

.mt24-cart-offcanvas__item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mt24-space-sm);
}

.mt24-cart-offcanvas__item-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    overflow: hidden;
}

.mt24-cart-offcanvas__item-qty button {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--mt24-bg-soft);
    color: var(--mt24-text);
    cursor: pointer;
    font-size: var(--mt24-font-size-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-cart-offcanvas__item-qty button:hover {
    background: var(--mt24-bg-muted);
}

.mt24-cart-offcanvas__item-qty span {
    width: 32px;
    text-align: center;
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
}

.mt24-cart-offcanvas__item-price {
    font-size: var(--mt24-font-size-sm);
    font-weight: 700;
    color: var(--mt24-text);
    white-space: nowrap;
}

.mt24-cart-offcanvas__item-remove {
    position: absolute;
    top: var(--mt24-space-sm);
    right: 0;
    background: none;
    border: none;
    color: var(--mt24-text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 4px;
    transition: color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-cart-offcanvas__item-remove:hover {
    color: var(--mt24-danger);
}

/* Footer */
.mt24-cart-offcanvas__footer {
    padding: var(--mt24-space-md) var(--mt24-space-lg);
    border-top: 1px solid var(--mt24-border);
    background: var(--mt24-bg-soft);
    flex-shrink: 0;
}

.mt24-cart-offcanvas__subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mt24-space-xs);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
}

.mt24-cart-offcanvas__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mt24-space-md);
    font-size: var(--mt24-font-size-lg);
    font-weight: 700;
    color: var(--mt24-text);
}

/* Footer rows: per-promotion line + subtotal-strike (replace inline styles) */
.mt24-cart-offcanvas__promo-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mt24-space-xs);
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-success);
    padding-bottom: 4px;
}
.mt24-cart-offcanvas__subtotal-strike {
    display: flex;
    justify-content: space-between;
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    padding-bottom: 4px;
}
.mt24-cart-offcanvas__strike {
    text-decoration: line-through;
}

/* Skeleton placeholders shown while /cart/json is in flight */
.mt24-cart-offcanvas__loading {
    display: flex;
    flex-direction: column;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-lg) 0;
}
.mt24-cart-offcanvas__skeleton {
    width: 100%;
    height: 80px;
    border-radius: var(--mt24-radius);
}

/* Out-of-stock visual cue on the + button (replaces inline opacity-50) */
.mt24-cart-offcanvas__qty-btn--maxed {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Cross-sell strip at the bottom of the offcanvas body ──
   Compact horizontal cards (image + name + price) that link to the PDP.
   Sits between cart items and footer so the user discovers companions
   without leaving the panel. */
.mt24-cart-offcanvas__cross-sell {
    margin-top: var(--mt24-space-md);
    padding-top: var(--mt24-space-md);
    border-top: 1px dashed var(--mt24-border);
}
.mt24-cart-offcanvas__cross-sell-title {
    font-size: var(--mt24-font-size-sm);
    font-weight: 700;
    color: var(--mt24-text);
    margin: 0 0 var(--mt24-space-sm) 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mt24-cart-offcanvas__cross-sell-item {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    padding: 6px;
    border-radius: var(--mt24-radius);
    text-decoration: none;
    color: inherit;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}
.mt24-cart-offcanvas__cross-sell-item:hover {
    background: var(--mt24-bg-soft);
}
.mt24-cart-offcanvas__cross-sell-item img,
.mt24-cart-offcanvas__cross-sell-placeholder {
    width: 60px;
    height: 60px;
    border-radius: var(--mt24-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}
.mt24-cart-offcanvas__cross-sell-placeholder {
    background: var(--mt24-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mt24-text-muted);
}
.mt24-cart-offcanvas__cross-sell-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.mt24-cart-offcanvas__cross-sell-name {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mt24-cart-offcanvas__cross-sell-price {
    font-size: var(--mt24-font-size-sm);
    font-weight: 700;
    color: var(--mt24-primary);
    margin-top: 2px;
}

.mt24-cart-offcanvas__checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mt24-space-sm);
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--mt24-radius);
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
    font-size: var(--mt24-font-size-base);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
    text-decoration: none;
}

.mt24-cart-offcanvas__checkout-btn:hover {
    background: var(--mt24-primary-hover);
    color: var(--mt24-text-inverse);
    box-shadow: 0 4px 12px rgba(var(--mt24-primary-rgb), 0.3);
}

.mt24-cart-offcanvas__view-cart {
    display: block;
    text-align: center;
    margin-top: var(--mt24-space-sm);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text-secondary);
    text-decoration: none;
}

.mt24-cart-offcanvas__view-cart:hover {
    color: var(--mt24-primary);
}


/* ================================================================
   6. FOOTER (.mt24-footer)
   Variants: --columns (default), --minimal, --centered
   ================================================================ */

.mt24-footer {
    background: var(--mt24-footer-bg);
    color: var(--mt24-footer-text);
    padding-top: var(--mt24-space-3xl);
}

.mt24-footer a {
    color: var(--mt24-footer-text);
    text-decoration: none;
    transition: color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-footer a:hover {
    color: white;
}

.mt24-footer__main {
    padding-bottom: var(--mt24-space-2xl);
}

.mt24-footer__brand {
    max-width: 300px;
}

.mt24-footer__brand-logo {
    margin-bottom: var(--mt24-space-md);
}

.mt24-footer__brand-logo img {
    max-height: 36px;
    filter: brightness(0) invert(1);
}

.mt24-footer__brand-desc {
    font-size: var(--mt24-font-size-sm);
    line-height: 1.7;
    opacity: 0.8;
    margin-bottom: var(--mt24-space-md);
}

.mt24-footer__title {
    color: white;
    font-size: var(--mt24-font-size-base);
    font-weight: 700;
    margin-bottom: var(--mt24-space-md);
    position: relative;
}

.mt24-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mt24-footer__links li {
    margin-bottom: var(--mt24-space-xs);
    opacity: 0.8;
}

.mt24-footer__links a {
    font-size: var(--mt24-font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    padding: 2px 0;
}

.mt24-footer__links a:hover {
    color: white;
}

.mt24-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--mt24-space-sm);
    margin-bottom: var(--mt24-space-sm);
    font-size: var(--mt24-font-size-sm);
    opacity: 0.8;
}

.mt24-footer__contact-icon {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    margin-top: 2px;
}

.mt24-footer__newsletter {
    margin-top: var(--mt24-space-md);
}

.mt24-footer__newsletter-form {
    display: flex;
    gap: var(--mt24-space-xs);
}

.mt24-footer__newsletter-input {
    flex: 1;
    padding: 10px var(--mt24-space-md);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--mt24-radius);
    background: rgba(255, 255, 255, 0.08);
    color: var(--mt24-text-inverse);
    font-size: var(--mt24-font-size-sm);
    outline: none;
    transition: border-color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-footer__newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.mt24-footer__newsletter-input:focus {
    border-color: var(--mt24-primary);
}

.mt24-footer__newsletter-btn {
    padding: 10px 18px;
    border: none;
    border-radius: var(--mt24-radius);
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
    font-weight: 600;
    font-size: var(--mt24-font-size-sm);
    cursor: pointer;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
    white-space: nowrap;
}

.mt24-footer__newsletter-btn:hover {
    background: var(--mt24-primary-hover);
}

/* Social icons */
.mt24-footer__social {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    margin-top: var(--mt24-space-md);
}

.mt24-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--mt24-radius-full);
    background: rgba(255, 255, 255, 0.1);
    color: var(--mt24-footer-text);
    font-size: 1rem;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-footer__social a:hover {
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
    transform: translateY(-2px);
}

/* Payment badges */
.mt24-footer__payments {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    flex-wrap: wrap;
}

.mt24-footer__payments img {
    height: 24px;
    opacity: 0.7;
    transition: opacity var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-footer__payments img:hover {
    opacity: 1;
}

/* Bottom bar */
.mt24-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--mt24-space-md) 0;
}

.mt24-footer__bottom-inner {
    max-width: var(--mt24-container-max);
    margin: 0 auto;
    padding: 0 var(--mt24-space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--mt24-space-sm);
    font-size: var(--mt24-font-size-xs);
    opacity: 0.6;
}

.mt24-footer__bottom-links {
    display: flex;
    gap: var(--mt24-space-md);
}

.mt24-footer__bottom-links a {
    font-size: var(--mt24-font-size-xs);
}

/* ── Footer Variant: Minimal ── */
.mt24-footer--minimal .mt24-footer__logo {
    margin-bottom: 0;
}

.mt24-footer__minimal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mt24-space-lg);
    padding: var(--mt24-space-md) 0;
}

.mt24-footer__minimal-logo {
    flex-shrink: 0;
}

.mt24-footer__minimal-social {
    flex-shrink: 0;
}

.mt24-footer--minimal .mt24-footer__inline-links--centered {
    margin-bottom: 0;
}

.mt24-footer--minimal .mt24-footer__social {
    margin-top: 0;
}

@media (max-width: 767px) {
    .mt24-footer__minimal-row {
        flex-direction: column;
        text-align: center;
    }

    .mt24-footer--minimal .mt24-footer__social {
        justify-content: center;
    }
}

/* ── Footer Variant: Centered ── */
.mt24-footer--centered .mt24-footer__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mt24-footer--centered .mt24-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mt24-space-md);
}

.mt24-footer--centered .mt24-footer__links li {
    margin: 0;
}

.mt24-footer--centered .mt24-footer__social {
    justify-content: center;
}

.mt24-footer--centered .mt24-footer__bottom-inner {
    justify-content: center;
    text-align: center;
}

/* Footer responsive */
@media (max-width: 575px) {
    .mt24-footer__bottom-inner {
        flex-direction: column;
        text-align: center;
    }
}


/* ================================================================
   7. HERO SLIDER (.mt24-hero)
   Variants: --fullwidth (default), --split, --minimal, --video
   ================================================================ */

.mt24-hero {
    position: relative;
    overflow: hidden;
    background: var(--mt24-bg-dark);
    padding: 0px !important;
}

.mt24-hero__slide {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
}

.mt24-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.mt24-hero__bg img,
.mt24-hero__bg video {
    width: 100%;
    height: 100%;
    /* object-fit configurable por config del bloque (cover default | contain).
       El renderer emite --hero-fit:contain en el <section> cuando el cliente
       lo cambia; sin override, queda cover. */
    object-fit: var(--hero-fit, cover);
}

.mt24-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 1;
}

/* Slide-link absoluto: cubre toda la slide del hero cuando el banner
   no tiene títulos ni botón pero sí URL (caso "imagen con CTA ya
   diseñado en el arte"). Va por encima del overlay y del content para
   que el click le llegue. Es transparente — no aporta visual, solo
   captura el click sobre todo el área. */
.mt24-hero__slide-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    color: inherit;
    text-decoration: none;
    /* Visible-only-on-focus para a11y por teclado */
}
.mt24-hero__slide-link:focus-visible {
    outline: 3px solid var(--mt24-primary);
    outline-offset: -3px;
}

.mt24-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: var(--mt24-space-3xl) 0;
    color: var(--mt24-text-inverse);
}

.mt24-hero__tag {
    display: inline-block;
    padding: 4px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--mt24-radius-full);
    font-size: var(--mt24-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--mt24-space-md);
    backdrop-filter: blur(4px);
}

.mt24-hero__title {
    font-size: var(--mt24-font-size-4xl);
    font-weight: 800;
    /* Hereda el color del wrapper .mt24-hero__content, que lleva inline el
       text_color del bloque (default #FFFFFF). Antes fijaba text-inverse y
       pisaba ese color: en un hero de fondo CLARO el título blanco se perdía,
       y el selector de color del bloque solo afectaba al subtítulo. Con
       inherit, el text_color controla título Y subtítulo por igual. */
    color: inherit;
    line-height: 1.15;
    margin-bottom: var(--mt24-space-md);
    max-width: 600px;
}

.mt24-hero__subtitle {
    font-size: var(--mt24-font-size-lg);
    opacity: 0.9;
    max-width: 500px;
    margin-bottom: var(--mt24-space-lg);
    line-height: 1.6;
}

.mt24-hero__cta {
    display: flex;
    gap: var(--mt24-space-md);
    flex-wrap: wrap;
}

/* Navigation dots / arrows */
.mt24-hero__dots {
    position: absolute;
    bottom: var(--mt24-space-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: var(--mt24-space-sm);
}

.mt24-hero__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--mt24-radius-full);
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-hero__dot.active,
.mt24-hero__dot:hover {
    background: var(--mt24-text-inverse);
    width: 28px;
}

.mt24-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    border-radius: var(--mt24-radius-full);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    color: var(--mt24-text-inverse);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-hero__arrow:hover {
    background: rgba(255, 255, 255, 0.3);
}

.mt24-hero__arrow--prev {
    left: var(--mt24-space-md);
}

.mt24-hero__arrow--next {
    right: var(--mt24-space-md);
}

/* ── Hero Variant: Split ── */
.mt24-hero--split .mt24-hero__slide {
    display: flex;
    min-height: 480px;
}

.mt24-hero--split .mt24-hero__content {
    flex: 1;
    color: inherit;
    background: transparent;
    padding: var(--mt24-space-3xl);
    margin: 0;
}

.mt24-hero--split .mt24-hero__content > .mt24-container {
    max-width: none;
    padding: 0;
    height: 100%;
    justify-content: center;
}

/* Split: text-left means content first, image second */
.mt24-hero--split .mt24-hero__content--left {
    order: -1;
}

/* Split: text-right means image first, content second (default HTML order) */
.mt24-hero--split .mt24-hero__content--right {
    order: 1;
}

.mt24-hero--split .mt24-hero__title {
    color: inherit;
}

.mt24-hero--split .mt24-hero__bg {
    position: relative;
    flex: 1;
}

.mt24-hero--split .mt24-hero__overlay {
    display: none;
}

/* ── Hero Variant: Minimal ── */
.mt24-hero--minimal .mt24-hero__slide {
    min-height: 350px;
}

.mt24-hero--minimal .mt24-hero__title {
    font-size: var(--mt24-font-size-3xl);
}

.mt24-hero--minimal .mt24-hero__title,
.mt24-hero--minimal .mt24-hero__subtitle {
    max-width: 700px;
}

/* ── Hero Variant: Cards (3-up grid/carousel, content below image) ──
   Different shape from the rest of the hero family — no fixed height,
   no overlay; each item is a real card whose body is a sibling of the
   image, not a positioned absolute overlay.

   Override the dark background that .mt24-hero ships by default — the
   cards bring their own #f6f6f6 surface and a dark section behind them
   would clash. Inline style="background:..." from the admin still wins
   when the tenant explicitly picks a section background color. */
.mt24-hero--cards {
    background: transparent;
    overflow: visible;
    padding: var(--mt24-space-2xl) 0;
}

.mt24-hero-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f6f6f6;
    border-radius: 20px;
    overflow: hidden;
    transition: transform var(--mt24-duration) var(--mt24-ease),
                box-shadow var(--mt24-duration) var(--mt24-ease);
}

.mt24-hero-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10);
}

.mt24-hero-card__image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e8e8e8;
}

.mt24-hero-card__image img,
.mt24-hero-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--mt24-ease);
}

.mt24-hero-card:hover .mt24-hero-card__img {
    transform: scale(1.04);
}

.mt24-hero-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--mt24-space-md) var(--mt24-space-lg) var(--mt24-space-lg);
    color: #3a3735;
}

.mt24-hero-card__title {
    font-size: var(--mt24-font-size-xl);
    font-weight: 700;
    line-height: 1.3;
    color: #3a3735;
    margin: 0 0 var(--mt24-space-xs);
}

.mt24-hero-card__subtitle {
    font-size: var(--mt24-font-size-sm);
    line-height: 1.5;
    color: #5a5755;
    margin: 0 0 var(--mt24-space-md);
    flex: 1; /* push CTA to bottom */
}

/* CTA renders as a text link, not a button — same color as the title
   so the card reads as a single typographic block, but lighter weight
   so the hierarchy still holds. Underlined by default to signal "link". */
.mt24-hero-card__cta {
    align-self: flex-start;
    font-size: var(--mt24-font-size-sm);
    font-weight: 500;
    color: #3a3735;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: opacity var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-hero-card__cta:hover {
    color: #3a3735;
    opacity: 0.7;
}

/* Pagination dots: positioned below the carousel for the cards layout
   (default Swiper position would float over the image). */
.mt24-hero--cards .mt24-hero-cards__dots {
    position: relative;
    bottom: auto;
    margin-top: var(--mt24-space-md);
    text-align: center;
}

/* Carousel arrows for cards layout — vertically centered, sit just
   outside the swiper viewport on desktop, smaller on mobile. */
.mt24-hero--cards .mt24-hero__arrow {
    position: absolute;
    top: calc((100% - 40px) / 2);
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--mt24-border);
    color: var(--mt24-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    z-index: 5;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-hero--cards .mt24-hero__arrow:hover {
    background: #fafafa;
}

.mt24-hero--cards .mt24-hero__arrow--prev { left: -8px; }
.mt24-hero--cards .mt24-hero__arrow--next { right: -8px; }

@media (min-width: 1200px) {
    .mt24-hero--cards .mt24-hero__arrow--prev { left: -20px; }
    .mt24-hero--cards .mt24-hero__arrow--next { right: -20px; }
}

@media (max-width: 767px) {
    .mt24-hero--cards .mt24-hero__arrow {
        width: 36px;
        height: 36px;
    }
    .mt24-hero-card__body {
        padding: var(--mt24-space-md);
    }
    .mt24-hero-card__title {
        font-size: var(--mt24-font-size-lg);
    }
}

/* ── Hero Variant: Video ── */
.mt24-hero--video .mt24-hero__bg video {
    object-fit: cover;
}

.mt24-hero--video .mt24-hero__play-btn {
    width: 64px;
    height: 64px;
    border-radius: var(--mt24-radius-full);
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid var(--mt24-text-inverse);
    color: var(--mt24-text-inverse);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    backdrop-filter: blur(4px);
    transition: all var(--mt24-duration) var(--mt24-ease);
}

.mt24-hero--video .mt24-hero__play-btn:hover {
    background: var(--mt24-primary);
    border-color: var(--mt24-primary);
    transform: scale(1.1);
}

/* Hero responsive */
@media (max-width: 991px) {
    .mt24-hero__slide {
        min-height: 400px;
    }

    .mt24-hero__title {
        font-size: var(--mt24-font-size-3xl);
    }

    .mt24-hero--split .mt24-hero__slide {
        flex-direction: column-reverse;
    }

    .mt24-hero--split .mt24-hero__bg {
        height: 250px;
    }
}

@media (max-width: 575px) {
    .mt24-hero__slide {
        min-height: 320px;
    }

    .mt24-hero__title {
        font-size: var(--mt24-font-size-3xl);
    }

    .mt24-hero__subtitle {
        font-size: var(--mt24-font-size-base);
    }

    .mt24-hero__arrow {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* ── Hero: Custom height via CSS variable ── */
.mt24-hero[style*="--hero-height"] .mt24-hero__slide {
    min-height: var(--hero-height, 500px);
}

/* ── Hero MOBILE (look app): altura fija 4:3 ignorando la config del bloque,
   y contenido SIEMPRE centrado aunque en desktop sea izquierda/derecha. ── */
@media (max-width: 767px) {
    /* El pull del header transparente por defecto es 110px (alto del header en
       desktop). En mobile el header mide ~56px, así que sin esto el hero sube
       ~54px de más y el texto centrado queda pegado al header. Ajustamos la var
       a la altura real del header móvil para que el pull calce. */
    :root {
        --mt24-transparent-header-h: 60px;
    }
    .mt24-hero[style*="--hero-height"] .mt24-hero__slide,
    .mt24-hero .mt24-hero__slide {
        min-height: 0;
        /* Altura por aspect-ratio en mobile. El renderer emite
           --hero-mobile-aspect en el <section>: el aspect elegido por el bloque
           SOLO si hay imagen mobile; si no, 4:3 clásico (también el fallback). */
        aspect-ratio: var(--hero-mobile-aspect, 4 / 3);
        /* Alineación vertical del contenido en mobile (arriba/centro/abajo),
           configurable por bloque vía --hero-mobile-valign. El horizontal se
           mantiene centrado (regla de abajo). */
        align-items: var(--hero-mobile-valign, center);
    }
    .mt24-hero__content > .mt24-container {
        align-items: center !important;
        text-align: center !important;
    }
    /* Padding vertical más compacto para que el contenido entre en el 4:3. */
    .mt24-hero__content {
        padding: var(--mt24-space-3xl) 0;
    }
}

/* ── Hero Skeleton ── */
.mt24-hero--skeleton {
    position: relative;
    overflow: hidden;
}

.mt24-hero--skeleton .mt24-hero__slide {
    min-height: var(--hero-height, 500px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Hero: Ken Burns effect ── */
.mt24-hero--kenburns .mt24-hero__img {
    animation: mt24-kenburns 20s ease-in-out infinite alternate;
}

@keyframes mt24-kenburns {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* ── Hero: Parallax (scroll-driven) ── */
.mt24-hero--parallax .mt24-hero__slide {
    overflow: hidden;
}

.mt24-hero--parallax .mt24-hero__img {
    will-change: transform;
    /* Más alta que el contenedor: el sobrante se recorta con el overflow:hidden
       del slide y se revela con el translateY del parallax (JS on scroll). */
    height: 130%;
    /* Nada de top/left aquí: la imagen es position:static y el parallax se hace
       con transform:translateY, no con offsets — top solo daría un warning. */
}

/* ── Contained width variant ── */
.mt24-hero--contained {
    /* width:calc + max-width:container-max — en viewports anchos el
       max-width manda (centrado clásico); en mobile/tablet el calc gana
       y deja 16px de gutter lateral, alineado con el resto del contenido
       que usa .mt24-container (padding 0 16px). Sin esto el hero pegaba
       al borde de la pantalla en mobile cuando el cliente lo configuraba
       como container. */
    max-width: var(--mt24-container-max);
    width: calc(100% - 2 * var(--mt24-space-md));
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--mt24-radius-lg);
    padding: 0px !important;
}

/* En variante `--contained` el <section> ya se limita al ancho del container
   global, por lo que el .mt24-container interno (16px de padding lateral) deja
   el copy pegado al borde del hero. Le damos más aire en desktop/tablet y
   bajamos a 24px en mobile donde 48px sería excesivo. */
.mt24-hero--contained .mt24-hero__content > .mt24-container {
    padding-left: var(--mt24-space-2xl);
    padding-right: var(--mt24-space-2xl);
}

@media (max-width: 575px) {
    .mt24-hero--contained .mt24-hero__content > .mt24-container {
        padding-left: var(--mt24-space-lg);
        padding-right: var(--mt24-space-lg);
    }
}

/* ── Content alignment variants ── */
.mt24-hero__content--left > .mt24-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.mt24-hero__content--right > .mt24-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.mt24-hero__content--center > .mt24-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


/* ================================================================
   8. CATEGORY CAROUSEL (.mt24-category-carousel)
   Variants: --card (default), --circle, --banner
   ================================================================ */

.mt24-category-carousel {
    position: relative;
}

.mt24-category-carousel__item {
    text-align: center;
    text-decoration: none;
    display: block;
    transition: all var(--mt24-duration) var(--mt24-ease);
}

.mt24-category-carousel__image {
    overflow: hidden;
    border-radius: var(--mt24-radius-lg);
    background: var(--mt24-bg-soft);
    margin-bottom: var(--mt24-space-sm);
    aspect-ratio: 1;
    position: relative;
}

.mt24-category-carousel__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--mt24-duration-slow) var(--mt24-ease);
}

.mt24-category-carousel__item:hover .mt24-category-carousel__image img {
    transform: scale(1.08);
}

.mt24-category-carousel__name {
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text);
    transition: color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-category-carousel__item:hover .mt24-category-carousel__name {
    color: var(--mt24-primary);
}

.mt24-category-carousel__count {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
}

/* ── Category Variant: Circle ── */
.mt24-category-carousel--circle .mt24-category-carousel__image {
    border-radius: var(--mt24-radius-full);
    width: 120px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid var(--mt24-border-light);
    transition: border-color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-category-carousel--circle .mt24-category-carousel__item:hover .mt24-category-carousel__image {
    border-color: var(--mt24-primary);
}

/* ── Category Variant: Banner ── */
.mt24-category-carousel--banner .mt24-category-carousel__image {
    aspect-ratio: 2/1;
    border-radius: var(--mt24-radius-lg);
}

.mt24-category-carousel--banner .mt24-category-carousel__name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--mt24-space-md);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: var(--mt24-text-inverse);
    font-size: var(--mt24-font-size-base);
    border-radius: 0 0 var(--mt24-radius-lg) var(--mt24-radius-lg);
}

.mt24-category-carousel--banner .mt24-category-carousel__item:hover .mt24-category-carousel__name {
    color: var(--mt24-text-inverse);
}

@media (max-width: 575px) {
    .mt24-category-carousel--circle .mt24-category-carousel__image {
        width: 80px;
        height: 80px;
    }
}


/* ================================================================
   9. NEWSLETTER (.mt24-newsletter)
   Variants: --centered (default), --horizontal, --minimal, --banner
   ================================================================ */

.mt24-newsletter {
    background: var(--mt24-primary-light);
    padding: var(--mt24-space-3xl) var(--mt24-space-md);
    text-align: center;
}

.mt24-newsletter__inner {
    max-width: 600px;
    margin: 0 auto;
}

/* old rule removed — .mt24-newsletter__icon styled in new section below */

.mt24-newsletter__title {
    font-size: var(--mt24-font-size-2xl);
    font-weight: 700;
    color: var(--mt24-text);
    margin-bottom: var(--mt24-space-xs);
}

/* old rule removed — .mt24-newsletter__text styled in new section below */

.mt24-newsletter__form {
    display: flex;
    gap: var(--mt24-space-sm);
    max-width: 480px;
    margin: 0 auto;
}

.mt24-newsletter__input {
    flex: 1;
    padding: 12px var(--mt24-space-md);
    border: 2px solid var(--mt24-border);
    border-radius: var(--mt24-radius-full);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
    background: var(--mt24-bg);
    outline: none;
    transition: border-color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-newsletter__input:focus {
    border-color: var(--mt24-primary);
}

.mt24-newsletter__btn {
    padding: 12px 28px;
    border: none;
    border-radius: var(--mt24-radius-full);
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
    font-weight: 700;
    font-size: var(--mt24-font-size-sm);
    cursor: pointer;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
    white-space: nowrap;
}

.mt24-newsletter__btn:hover {
    background: var(--mt24-primary-hover);
    box-shadow: 0 4px 12px rgba(var(--mt24-primary-rgb), 0.3);
}

.mt24-newsletter__disclaimer {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    margin-top: var(--mt24-space-sm);
}

/* ── Newsletter Variant: Horizontal ── */
.mt24-newsletter--horizontal {
    text-align: left;
}

.mt24-newsletter--horizontal .mt24-newsletter__inner {
    max-width: var(--mt24-container-max);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mt24-space-xl);
}

.mt24-newsletter--horizontal .mt24-newsletter__content {
    flex: 1;
}

.mt24-newsletter--horizontal .mt24-newsletter__form-wrap {
    flex: 1;
    max-width: 500px;
}

.mt24-newsletter--horizontal .mt24-newsletter__form {
    max-width: none;
}

/* ── Newsletter Variant: Minimal ── */
.mt24-newsletter--minimal {
    background: var(--mt24-bg);
    border-top: 1px solid var(--mt24-border);
    border-bottom: 1px solid var(--mt24-border);
    padding: var(--mt24-space-xl) var(--mt24-space-md);
}

.mt24-newsletter--minimal .mt24-newsletter__icon {
    display: none;
}

.mt24-newsletter--minimal .mt24-newsletter__title {
    font-size: var(--mt24-font-size-lg);
}

/* ── Newsletter Variant: Banner ── */
.mt24-newsletter--banner {
    background: var(--mt24-bg-dark);
    color: var(--mt24-text-inverse);
}

.mt24-newsletter--banner .mt24-newsletter__title {
    color: var(--mt24-text-inverse);
}

.mt24-newsletter--banner .mt24-newsletter__text {
    color: rgba(255, 255, 255, 0.7);
}

.mt24-newsletter--banner .mt24-newsletter__input {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--mt24-text-inverse);
}

.mt24-newsletter--banner .mt24-newsletter__input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 767px) {
    .mt24-newsletter__form {
        flex-direction: column;
    }

    .mt24-newsletter--horizontal .mt24-newsletter__inner {
        flex-direction: column;
        text-align: center;
    }
}


/* ================================================================
   10. TRUST BADGES (.mt24-trust-badges)
   ================================================================ */

.mt24-trust-badges {
    padding: var(--mt24-space-xl) 0;
    background: var(--mt24-bg);
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-trust-badges__inner {
    max-width: var(--mt24-container-max);
    margin: 0 auto;
    padding: 0 var(--mt24-space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--mt24-space-xl);
}

.mt24-trust-badges__item {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    text-align: left;
}

.mt24-trust-badges__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mt24-radius-full);
    background: var(--mt24-primary-light);
    color: var(--mt24-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.mt24-trust-badges__label {
    font-size: var(--mt24-font-size-sm);
    font-weight: 700;
    color: var(--mt24-text);
    line-height: 1.3;
}

.mt24-trust-badges__sublabel {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    font-weight: 400;
}

@media (max-width: 767px) {
    .mt24-trust-badges__inner {
        gap: var(--mt24-space-md);
    }

    .mt24-trust-badges__item {
        flex: 0 0 calc(50% - var(--mt24-space-md));
    }
}

@media (max-width: 479px) {
    .mt24-trust-badges__item {
        flex: 0 0 100%;
        justify-content: center;
    }
}


/* ================================================================
   11. PROMO BANNER (.mt24-promo-banner)
   Variants: --default, --gradient, --image, --countdown
   ================================================================ */

.mt24-promo-banner {
    position: relative;
    padding: var(--mt24-space-xl) var(--mt24-space-md);
    background: var(--mt24-primary-light);
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    text-align: center;
}

.mt24-promo-banner__inner {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.mt24-promo-banner__badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
    font-size: var(--mt24-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--mt24-radius-full);
    margin-bottom: var(--mt24-space-sm);
}

.mt24-promo-banner__title {
    font-size: var(--mt24-font-size-2xl);
    font-weight: 800;
    color: var(--mt24-text);
    margin-bottom: var(--mt24-space-xs);
}

.mt24-promo-banner__text {
    font-size: var(--mt24-font-size-base);
    color: var(--mt24-text-secondary);
    margin-bottom: var(--mt24-space-md);
}

.mt24-promo-banner__cta {
    display: inline-flex;
}

/* Countdown */
.mt24-promo-banner__countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mt24-space-sm);
    margin-bottom: var(--mt24-space-md);
}

.mt24-promo-banner__countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    padding: var(--mt24-space-sm);
    background: var(--mt24-bg);
    border-radius: var(--mt24-radius);
    box-shadow: var(--mt24-shadow-xs);
}

.mt24-promo-banner__countdown-number {
    font-size: var(--mt24-font-size-2xl);
    font-weight: 800;
    color: var(--mt24-primary);
    line-height: 1;
}

.mt24-promo-banner__countdown-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--mt24-text-muted);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.mt24-promo-banner__countdown-separator {
    font-size: var(--mt24-font-size-xl);
    font-weight: 700;
    color: var(--mt24-text-muted);
}

/* ── Promo Variant: Gradient ── */
.mt24-promo-banner--gradient {
    background: linear-gradient(135deg, var(--mt24-primary) 0%, var(--mt24-secondary) 100%);
    color: var(--mt24-text-inverse);
}

.mt24-promo-banner--gradient .mt24-promo-banner__title {
    color: var(--mt24-text-inverse);
}

.mt24-promo-banner--gradient .mt24-promo-banner__text {
    color: rgba(255, 255, 255, 0.85);
}

.mt24-promo-banner--gradient .mt24-promo-banner__badge {
    background: rgba(255, 255, 255, 0.2);
}

/* ── Promo Variant: Image ── */
.mt24-promo-banner--image {
    background-size: cover;
    background-position: center;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mt24-promo-banner--image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.mt24-promo-banner--image .mt24-promo-banner__title {
    color: var(--mt24-text-inverse);
}

.mt24-promo-banner--image .mt24-promo-banner__text {
    color: rgba(255, 255, 255, 0.85);
}

/* ── Promo Variant: Countdown ── */
.mt24-promo-banner--countdown {
    background: var(--mt24-bg-dark);
    color: var(--mt24-text-inverse);
}

.mt24-promo-banner--countdown .mt24-promo-banner__title {
    color: var(--mt24-text-inverse);
}

.mt24-promo-banner--countdown .mt24-promo-banner__text {
    color: rgba(255, 255, 255, 0.7);
}


/* ================================================================
   12. TESTIMONIALS (.mt24-testimonials)
   Variants: --card (default), --quote, --minimal
   ================================================================ */

.mt24-testimonials {
    padding: var(--mt24-space-section) 0;
    background: var(--mt24-bg-soft);
}

.mt24-testimonials__item {
    background: var(--mt24-bg);
    border-radius: var(--mt24-radius-lg);
    padding: var(--mt24-space-xl);
    box-shadow: var(--mt24-shadow);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mt24-testimonials__stars {
    display: flex;
    gap: 2px;
    color: var(--mt24-warning);
    font-size: var(--mt24-font-size-sm);
    margin-bottom: var(--mt24-space-sm);
}

.mt24-testimonials__text {
    font-size: var(--mt24-font-size-base);
    color: var(--mt24-text-secondary);
    line-height: 1.7;
    flex: 1;
    margin-bottom: var(--mt24-space-md);
    font-style: italic;
}

.mt24-testimonials__author {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    margin-top: auto;
}

.mt24-testimonials__avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--mt24-radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.mt24-testimonials__author-name {
    font-size: var(--mt24-font-size-sm);
    font-weight: 700;
    color: var(--mt24-text);
}

.mt24-testimonials__author-role {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
}

/* ── Testimonials Variant: Quote ── */
.mt24-testimonials--quote .mt24-testimonials__item {
    text-align: center;
    position: relative;
    padding-top: var(--mt24-space-2xl);
}

.mt24-testimonials--quote .mt24-testimonials__item::before {
    content: '\201C';
    position: absolute;
    top: var(--mt24-space-md);
    left: 50%;
    transform: translateX(-50%);
    font-size: 4rem;
    color: var(--mt24-primary);
    opacity: 0.2;
    line-height: 1;
    font-family: Georgia, serif;
}

.mt24-testimonials--quote .mt24-testimonials__author {
    justify-content: center;
}

.mt24-testimonials--quote .mt24-testimonials__stars {
    justify-content: center;
}

/* ── Testimonials Variant: Minimal ── */
.mt24-testimonials--minimal {
    background: var(--mt24-bg);
}

.mt24-testimonials--minimal .mt24-testimonials__item {
    box-shadow: none;
    border: 1px solid var(--mt24-border-light);
    padding: var(--mt24-space-lg);
}


/* ================================================================
   13. BREADCRUMB (.mt24-breadcrumb)
   ================================================================ */

.mt24-breadcrumb {
    padding: var(--mt24-space-md) 0;
    background: var(--mt24-bg-soft);
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-breadcrumb__inner {
    max-width: var(--mt24-container-max);
    margin: 0 auto;
    padding: 0 var(--mt24-space-md);
}

.mt24-breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mt24-space-xs);
    list-style: none;
    padding: 0;
    margin: 0;
}

.mt24-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    font-size: var(--mt24-font-size-sm);
}

.mt24-breadcrumb__item + .mt24-breadcrumb__item::before {
    content: '/';
    color: var(--mt24-text-muted);
    font-size: var(--mt24-font-size-xs);
}

.mt24-breadcrumb__link {
    color: var(--mt24-text-secondary);
    text-decoration: none;
    transition: color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-breadcrumb__link:hover {
    color: var(--mt24-primary);
}

.mt24-breadcrumb__item--active {
    color: var(--mt24-text-muted);
    font-weight: 500;
}


/* ================================================================
   14. PAGINATION (.mt24-pagination)
   ================================================================ */

.mt24-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mt24-space-xs);
    padding: var(--mt24-space-lg) 0;
}

.mt24-pagination__item {
    display: inline-flex;
}

.mt24-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    color: var(--mt24-text-muted);
    font-size: var(--mt24-font-size-sm);
}

.mt24-pagination__info {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-muted);
    margin-top: var(--mt24-space-sm);
    text-align: center;
}


/* ================================================================
   15. SEARCH BAR (.mt24-search)
   ================================================================ */

.mt24-search {
    position: relative;
    width: 100%;
}

.mt24-search__form {
    display: flex;
    align-items: stretch;
    background: var(--mt24-bg);
    border: 2px solid var(--mt24-border);
    border-radius: var(--mt24-radius-full);
    overflow: hidden;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-search__form:focus-within {
    border-color: var(--mt24-primary);
    box-shadow: 0 0 0 4px rgba(var(--mt24-primary-rgb), 0.1);
}

.mt24-search__input {
    flex: 1;
    border: none;
    padding: 12px var(--mt24-space-lg);
    font-size: var(--mt24-font-size-base);
    color: var(--mt24-text);
    background: transparent;
    outline: none;
    min-width: 0;
}

.mt24-search__input::placeholder {
    color: var(--mt24-text-muted);
}

.mt24-search__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--mt24-space-lg);
    border: none;
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
    cursor: pointer;
    font-size: 1.1rem;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-search__btn:hover {
    background: var(--mt24-primary-hover);
}

/* Autocomplete dropdown */
.mt24-search__results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg);
    box-shadow: var(--mt24-shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    z-index: var(--mt24-z-dropdown);
    display: none;
}

.mt24-search__results.active {
    display: block;
}

.mt24-search__results-group {
    padding: var(--mt24-space-sm) 0;
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-search__results-group:last-child {
    border-bottom: none;
}

.mt24-search__results-title {
    padding: var(--mt24-space-xs) var(--mt24-space-md);
    font-size: var(--mt24-font-size-xs);
    font-weight: 700;
    color: var(--mt24-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mt24-search__results-item {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    text-decoration: none;
    color: var(--mt24-text);
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-search__results-item:hover,
.mt24-search__results-item.is-highlighted {
    background: var(--mt24-primary-light);
}

.mt24-search__results-item-image {
    width: 40px;
    height: 40px;
    border-radius: var(--mt24-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--mt24-bg-soft);
}

.mt24-search__results-item-name {
    font-size: var(--mt24-font-size-sm);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mt24-search__results-item-price {
    font-size: var(--mt24-font-size-sm);
    font-weight: 700;
    color: var(--mt24-primary);
    white-space: nowrap;
}

.mt24-search__results-all {
    display: block;
    text-align: center;
    padding: var(--mt24-space-sm);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-primary);
    text-decoration: none;
    border-top: 1px solid var(--mt24-border-light);
}

.mt24-search__results-all:hover {
    background: var(--mt24-primary-light);
}


/* ================================================================
   16. ANNOUNCEMENT BAR (.mt24-announcement)
   ================================================================ */

.mt24-announcement {
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
    padding: var(--mt24-space-xs) var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    text-align: center;
    position: relative;
    z-index: calc(var(--mt24-z-sticky) + 1);
}

.mt24-announcement__inner {
    max-width: var(--mt24-container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mt24-space-sm);
}

.mt24-announcement__text {
    font-weight: 500;
}

.mt24-announcement__text strong {
    font-weight: 700;
}

.mt24-announcement__link {
    color: var(--mt24-text-inverse);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mt24-announcement__link:hover {
    color: var(--mt24-text-inverse);
    opacity: 0.85;
}

.mt24-announcement__close {
    position: absolute;
    right: var(--mt24-space-md);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--mt24-text-inverse);
    opacity: 0.7;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
    transition: opacity var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-announcement__close:hover {
    opacity: 1;
}

/* Variant: Gradient */
.mt24-announcement--gradient {
    background: linear-gradient(90deg, var(--mt24-primary) 0%, var(--mt24-secondary) 100%);
}

/* Variant: Warning */
.mt24-announcement--warning {
    background: var(--mt24-warning);
    color: var(--mt24-text);
}

.mt24-announcement--warning .mt24-announcement__close {
    color: var(--mt24-text);
}

/* Variant: Dark */
.mt24-announcement--dark {
    background: var(--mt24-bg-dark);
}

/* Scrolling text */
.mt24-announcement--scrolling .mt24-announcement__text {
    animation: mt24-marquee 20s linear infinite;
    white-space: nowrap;
}

@keyframes mt24-marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}


/* ================================================================
   17. TOAST NOTIFICATIONS (.mt24-toast)
   ================================================================ */

.mt24-toast-container {
    position: fixed;
    z-index: var(--mt24-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--mt24-space-sm);
    pointer-events: none;
    max-width: 400px;
    width: calc(100% - var(--mt24-space-xl));
}

.mt24-toast-container--top-right {
    top: var(--mt24-space-lg);
    right: var(--mt24-space-lg);
}

.mt24-toast-container--top-center {
    top: var(--mt24-space-lg);
    left: 50%;
    transform: translateX(-50%);
}

.mt24-toast-container--bottom-right {
    bottom: var(--mt24-space-lg);
    right: var(--mt24-space-lg);
}

.mt24-toast-container--bottom-center {
    bottom: var(--mt24-space-lg);
    left: 50%;
    transform: translateX(-50%);
}

.mt24-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-md);
    background: var(--mt24-bg);
    border-radius: var(--mt24-radius-lg);
    box-shadow: var(--mt24-shadow-lg);
    border-left: 4px solid var(--mt24-border);
    pointer-events: auto;
    animation: mt24-toast-in var(--mt24-duration) var(--mt24-ease-out) forwards;
    max-width: 100%;
}

.mt24-toast.is-leaving {
    animation: mt24-toast-out var(--mt24-duration) var(--mt24-ease-in) forwards;
}

@keyframes mt24-toast-in {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes mt24-toast-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

.mt24-toast__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.mt24-toast__content {
    flex: 1;
    min-width: 0;
}

.mt24-toast__title {
    font-size: var(--mt24-font-size-sm);
    font-weight: 700;
    color: var(--mt24-text);
    margin-bottom: 2px;
}

.mt24-toast__message {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    line-height: 1.5;
}

.mt24-toast__close {
    background: none;
    border: none;
    color: var(--mt24-text-muted);
    cursor: pointer;
    padding: 2px;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-toast__close:hover {
    color: var(--mt24-text);
}

/* Progress bar */
.mt24-toast__progress {
    position: absolute;
    bottom: 0;
    left: 4px;
    right: 0;
    height: 3px;
    background: var(--mt24-bg-muted);
    border-radius: 0 0 var(--mt24-radius-lg) 0;
    overflow: hidden;
}

.mt24-toast__progress-bar {
    height: 100%;
    border-radius: inherit;
    transition: width linear;
}

/* Toast types */
.mt24-toast--success {
    border-left-color: var(--mt24-success);
}

.mt24-toast--success .mt24-toast__icon {
    color: var(--mt24-success);
}

.mt24-toast--success .mt24-toast__progress-bar {
    background: var(--mt24-success);
}

.mt24-toast--danger {
    border-left-color: var(--mt24-danger);
}

.mt24-toast--danger .mt24-toast__icon {
    color: var(--mt24-danger);
}

.mt24-toast--danger .mt24-toast__progress-bar {
    background: var(--mt24-danger);
}

.mt24-toast--warning {
    border-left-color: var(--mt24-warning);
}

.mt24-toast--warning .mt24-toast__icon {
    color: var(--mt24-warning);
}

.mt24-toast--warning .mt24-toast__progress-bar {
    background: var(--mt24-warning);
}

.mt24-toast--info {
    border-left-color: var(--mt24-info);
}

.mt24-toast--info .mt24-toast__icon {
    color: var(--mt24-info);
}

.mt24-toast--info .mt24-toast__progress-bar {
    background: var(--mt24-info);
}

/* Cart toast (with product preview) */
.mt24-toast--cart {
    border-left-color: var(--mt24-success);
}

.mt24-toast--cart .mt24-toast__product {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    margin-top: var(--mt24-space-sm);
    padding-top: var(--mt24-space-sm);
    border-top: 1px solid var(--mt24-border-light);
}

.mt24-toast--cart .mt24-toast__product-image {
    width: 48px;
    height: 48px;
    border-radius: var(--mt24-radius-sm);
    object-fit: cover;
}

.mt24-toast--cart .mt24-toast__product-name {
    font-size: var(--mt24-font-size-xs);
    font-weight: 600;
    color: var(--mt24-text);
}

.mt24-toast--cart .mt24-toast__product-price {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-primary);
    font-weight: 700;
}


/* ================================================================
   18. QUICKVIEW MODAL (.mt24-quickview)
   ================================================================ */

.mt24-quickview {
    position: fixed;
    inset: 0;
    z-index: var(--mt24-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mt24-space-lg);
    opacity: 0;
    visibility: hidden;
    transition: all var(--mt24-duration) var(--mt24-ease);
}

.mt24-quickview.active {
    opacity: 1;
    visibility: visible;
}

.mt24-quickview__overlay {
    position: absolute;
    inset: 0;
    background: var(--mt24-bg-overlay);
}

.mt24-quickview__dialog {
    position: relative;
    background: var(--mt24-bg);
    border-radius: var(--mt24-radius-xl);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--mt24-shadow-xl);
    display: flex;
    transform: scale(0.95) translateY(20px);
    transition: transform var(--mt24-duration) var(--mt24-ease);
}

.mt24-quickview.active .mt24-quickview__dialog {
    transform: scale(1) translateY(0);
}

.mt24-quickview__close {
    position: absolute;
    top: var(--mt24-space-md);
    right: var(--mt24-space-md);
    width: 36px;
    height: 36px;
    border-radius: var(--mt24-radius-full);
    background: var(--mt24-bg);
    border: none;
    color: var(--mt24-text);
    cursor: pointer;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: var(--mt24-shadow);
    z-index: 5;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-quickview__close:hover {
    background: var(--mt24-danger);
    color: var(--mt24-text-inverse);
}

.mt24-quickview__image {
    flex: 0 0 50%;
    max-width: 50%;
    background: var(--mt24-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mt24-quickview__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mt24-quickview__info {
    flex: 1;
    padding: var(--mt24-space-xl);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.mt24-quickview__category {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--mt24-space-xs);
}

.mt24-quickview__title {
    font-size: var(--mt24-font-size-xl);
    font-weight: 700;
    color: var(--mt24-text);
    margin-bottom: var(--mt24-space-sm);
}

.mt24-quickview__rating {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    margin-bottom: var(--mt24-space-md);
}

.mt24-quickview__stars {
    color: var(--mt24-warning);
    font-size: var(--mt24-font-size-sm);
}

.mt24-quickview__review-count {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-muted);
}

.mt24-quickview__price {
    display: flex;
    align-items: baseline;
    gap: var(--mt24-space-sm);
    margin-bottom: var(--mt24-space-md);
}

.mt24-quickview__price-current {
    font-size: var(--mt24-font-size-2xl);
    font-weight: 800;
    color: var(--mt24-primary);
}

.mt24-quickview__price-old {
    font-size: var(--mt24-font-size-base);
    color: var(--mt24-text-muted);
    text-decoration: line-through;
}

.mt24-quickview__description {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--mt24-space-md);
}

.mt24-quickview__variants {
    margin-bottom: var(--mt24-space-md);
}

.mt24-quickview__variant-label {
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text);
    margin-bottom: var(--mt24-space-xs);
}

.mt24-quickview__variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt24-space-xs);
}

.mt24-quickview__variant-option {
    padding: 6px 14px;
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
    background: var(--mt24-bg);
    cursor: pointer;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-quickview__variant-option:hover,
.mt24-quickview__variant-option.active {
    border-color: var(--mt24-primary);
    color: var(--mt24-primary);
    background: var(--mt24-primary-light);
}

/* Color swatches */
.mt24-quickview__color-option {
    width: 32px;
    height: 32px;
    border-radius: var(--mt24-radius-full);
    border: 2px solid var(--mt24-border);
    cursor: pointer;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-quickview__color-option:hover,
.mt24-quickview__color-option.active {
    border-color: var(--mt24-primary);
    box-shadow: 0 0 0 2px var(--mt24-primary-light);
}

.mt24-quickview__qty {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-md);
    margin-bottom: var(--mt24-space-md);
}

.mt24-quickview__qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    overflow: hidden;
}

.mt24-quickview__qty-btn {
    width: 38px;
    height: 38px;
    border: none;
    background: var(--mt24-bg-soft);
    color: var(--mt24-text);
    cursor: pointer;
    font-size: var(--mt24-font-size-base);
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-quickview__qty-btn:hover {
    background: var(--mt24-bg-muted);
}

.mt24-quickview__qty-value {
    width: 48px;
    text-align: center;
    font-weight: 600;
    font-size: var(--mt24-font-size-base);
    border: none;
    background: var(--mt24-bg);
    color: var(--mt24-text);
}

.mt24-quickview__actions {
    display: flex;
    gap: var(--mt24-space-sm);
    margin-top: auto;
}

.mt24-quickview__view-full {
    display: block;
    text-align: center;
    margin-top: var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-primary);
    text-decoration: none;
}

.mt24-quickview__view-full:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .mt24-quickview__dialog {
        flex-direction: column;
        max-height: 95vh;
    }

    .mt24-quickview__image {
        flex: 0 0 auto;
        max-width: 100%;
        height: 300px;
    }
}


/* ================================================================
   19. CATALOG GRID (.mt24-catalog)
   ================================================================ */

.mt24-catalog {
    max-width: var(--mt24-container-max);
    margin: 0 auto;
    padding: var(--mt24-space-lg) var(--mt24-space-md);
}

.mt24-catalog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mt24-space-lg);
    flex-wrap: wrap;
    gap: var(--mt24-space-md);
}

.mt24-catalog__count {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-muted);
}

.mt24-catalog__category-intro {
    margin-bottom: var(--mt24-space-lg);
}

.mt24-catalog__category-intro h1 {
    margin: 0 0 var(--mt24-space-xs) 0;
}

.mt24-catalog__category-intro p,
.mt24-catalog__category-intro div {
    line-height: 1.7;
    color: var(--mt24-text-secondary);
}

.mt24-catalog__controls {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-md);
}

.mt24-catalog__sort {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-xs);
}

.mt24-catalog__sort-label {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    white-space: nowrap;
}

.mt24-catalog__sort-select {
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    padding: 6px 12px;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
    background: var(--mt24-bg);
    cursor: pointer;
    outline: none;
}

.mt24-catalog__sort-select:focus {
    border-color: var(--mt24-primary);
}

/* View toggle */
.mt24-catalog__view-toggle {
    display: flex;
    gap: 2px;
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    overflow: hidden;
}

.mt24-catalog__view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--mt24-bg);
    color: var(--mt24-text-muted);
    cursor: pointer;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-catalog__view-btn:hover {
    color: var(--mt24-text);
}

.mt24-catalog__view-btn.active {
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
}

/* Grid layout */
.mt24-catalog__layout {
    display: flex;
    gap: var(--mt24-space-lg);
}

.mt24-catalog__sidebar {
    flex: 0 0 var(--mt24-sidebar-width);
    width: var(--mt24-sidebar-width);
}

/* Sticky filters on desktop — keep filters visible while user scrolls long lists.
   max-height + overflow-y prevents the sidebar from growing taller than the viewport,
   which would silently break sticky on small screens. */
@media (min-width: 992px) {
    .mt24-catalog__sidebar {
        position: sticky;
        top: calc(var(--mt24-header-height, 72px) + var(--mt24-space-md));
        align-self: flex-start;
        max-height: calc(100vh - var(--mt24-header-height, 72px) - var(--mt24-space-lg));
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

.mt24-catalog__content {
    flex: 1;
    min-width: 0;
}

.mt24-catalog__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mt24-space-md);
}

.mt24-catalog__grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.mt24-catalog__grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

/* List view only kicks in on desktop. On mobile we ignore the .--list
   modifier so the responsive grid (2 cols < 480px, 3 cols < 768px, etc.)
   keeps working even if the user previously enabled list mode in desktop. */
@media (min-width: 992px) {
    .mt24-catalog__grid--list {
        grid-template-columns: 1fr;
    }
}

/* Sort/filter navigation ahora muestra skeleton cards (ver mt24SkeletonCards
   en mt24-catalog.js) en vez del fade + spinner que había acá. */
@keyframes mt24-spin {
    to { transform: rotate(360deg); }
}

/* List view: render cards horizontal — image left, content right.
   Wrapped in min-width:992px so it only applies on desktop (where the
   toggle button lives). The CTA button gets auto width because at the
   wider body w-100 stretches it across the whole card. */
@media (min-width: 992px) {
    .mt24-catalog__grid--list .mt24-product-card {
        flex-direction: row;
        height: auto;
    }
    .mt24-catalog__grid--list .mt24-product-card__image {
        width: 200px;
        min-width: 200px;
        aspect-ratio: 1;
        flex-shrink: 0;
    }
    .mt24-catalog__grid--list .mt24-product-card__body {
        justify-content: center;
        flex: 1;
        align-items: flex-start;
    }
    .mt24-catalog__grid--list .mt24-product-card__title {
        -webkit-line-clamp: 2;
        min-height: auto;
    }
    .mt24-catalog__grid--list .mt24-product-card__placeholder {
        aspect-ratio: 1;
        height: 100%;
    }
    /* Bootstrap's .w-100 uses !important, so we need !important to win.
       Compact CTA fits the right edge of the horizontal card. */
    .mt24-catalog__grid--list .mt24-product-card__body > .mt24-btn.w-100 {
        width: auto !important;
        min-width: 160px;
    }
}

/* Active filters */
.mt24-catalog__active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mt24-space-sm);
    margin-bottom: var(--mt24-space-md);
}

.mt24-catalog__active-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--mt24-primary-light);
    color: var(--mt24-primary);
    border-radius: var(--mt24-radius-full);
    font-size: var(--mt24-font-size-xs);
    font-weight: 500;
}

.mt24-catalog__active-filter-remove {
    background: none;
    border: none;
    color: var(--mt24-primary);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
}

.mt24-catalog__active-filter-remove:hover {
    opacity: 1;
}

.mt24-catalog__clear-filters {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-danger);
    text-decoration: none;
    font-weight: 600;
}

.mt24-catalog__clear-filters:hover {
    text-decoration: underline;
    color: var(--mt24-danger);
}

/* Infinite scroll loader */
.mt24-catalog__infinite-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-xl) 0;
    color: var(--mt24-text-muted);
    font-size: var(--mt24-font-size-sm);
    transition: opacity 0.3s ease;
}

.mt24-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--mt24-border);
    border-top-color: var(--mt24-primary);
    border-radius: 50%;
    animation: mt24-spin 0.7s linear infinite;
}

/* Inline variant — sized to sit next to button text without taking
   over its own line. Replaces the inline style="width:18px;..." we
   used in the contact form submit. */
.mt24-spinner--inline {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-width: 2px;
    vertical-align: middle;
    margin-right: 8px;
}

/* Honeypot wrapper — visually hidden but kept in the DOM so bots that
   parse + fill <input> fields trip it. Replaces the inline left:-9999px
   on the contact form. */
.mt24-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Complaints book — token-driven helpers replacing inline styles ── */
/* Radio row with two side-by-side labeled options (used in the type picker) */
.mt24-radio-row {
    display: flex;
    gap: var(--mt24-space-lg);
    flex-wrap: wrap;
}
.mt24-radio-row__item {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    cursor: pointer;
    user-select: none;
}
.mt24-radio-row__item input[type="radio"] {
    accent-color: var(--mt24-primary);
    cursor: pointer;
}
/* Big success check on the confirmation page */
.mt24-complaint-success-icon {
    font-size: 4rem;
    color: var(--mt24-success);
    margin-bottom: var(--mt24-space-md);
}
/* Highlighted complaint number (LR-2026-0001) on the confirmation alert */
.mt24-complaint-number-alert {
    justify-content: center;
}
.mt24-complaint-number {
    font-size: var(--mt24-font-size-xl);
    font-weight: 800;
    margin-left: 8px;
}
/* Alerts that should keep their text left-aligned even inside a centered card */
.mt24-complaint-alert-left {
    text-align: left;
}
/* Provider-response section sits below the table with a divider */
.mt24-complaint-response {
    border-top: 1px solid var(--mt24-border-light);
}
/* Search button on the lookup form fills the column on desktop */
.mt24-complaint-search-btn {
    width: 100%;
}

@keyframes mt24-spin {
    to { transform: rotate(360deg); }
}

/* Empty state */
.mt24-catalog__empty {
    text-align: center;
    padding: var(--mt24-space-3xl) var(--mt24-space-md);
    color: var(--mt24-text-muted);
}

.mt24-catalog__empty-icon {
    font-size: 3rem;
    margin-bottom: var(--mt24-space-md);
    opacity: 0.3;
}

.mt24-catalog__empty-title {
    font-size: var(--mt24-font-size-lg);
    font-weight: 600;
    color: var(--mt24-text);
    margin-bottom: var(--mt24-space-xs);
}

/* Empty state suggestion blocks (rendered below the empty message) */
.mt24-empty-suggest {
    margin-top: var(--mt24-space-xl);
}
.mt24-empty-suggest__title {
    font-size: var(--mt24-font-size-lg);
    font-weight: 700;
    color: var(--mt24-text);
    margin-bottom: var(--mt24-space-md);
    text-align: center;
}
.mt24-empty-suggest__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt24-space-sm);
    justify-content: center;
    margin-bottom: var(--mt24-space-lg);
}
.mt24-empty-suggest__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    padding: 8px 16px;
    background: var(--mt24-bg-soft);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-full);
    color: var(--mt24-text);
    font-size: var(--mt24-font-size-sm);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}
.mt24-empty-suggest__chip:hover {
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
    border-color: var(--mt24-primary);
}

.mt24-catalog__empty-text {
    font-size: var(--mt24-font-size-sm);
}

@media (max-width: 1199px) {
    .mt24-catalog__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .mt24-catalog__sidebar {
        display: none;
    }

    .mt24-catalog__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .mt24-catalog__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mt24-catalog__grid--list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 479px) {
    .mt24-catalog__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--mt24-space-sm);
    }
}


/* ================================================================
   20. CATALOG FILTERS (.mt24-filters)
   ================================================================ */

.mt24-filters {
    background: var(--mt24-bg);
    border-radius: var(--mt24-radius-lg);
    border: 1px solid var(--mt24-border-light);
    overflow: hidden;
}

/* Mobile offcanvas is hidden on desktop. Below 992px the media query
   further down promotes it to display:flex with slide-in animation. */
.mt24-filters--mobile {
    display: none;
}

.mt24-filters__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mt24-space-md);
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-filters__title {
    font-size: var(--mt24-font-size-base);
    font-weight: 700;
    color: var(--mt24-text);
    margin: 0;
}

.mt24-filters__clear {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-danger);
    text-decoration: none;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
}

.mt24-filters__clear:hover {
    text-decoration: underline;
}

/* Filter group */
.mt24-filters__group {
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-filters__group:last-child {
    border-bottom: none;
}

.mt24-filters__group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    color: var(--mt24-text);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-filters__group-header:hover {
    background: var(--mt24-bg-soft);
}

.mt24-filters__group-arrow {
    font-size: 0.7rem;
    color: var(--mt24-text-muted);
    transition: transform var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-filters__group.open .mt24-filters__group-arrow {
    transform: rotate(180deg);
}

.mt24-filters__group-body {
    padding: 0 var(--mt24-space-md) var(--mt24-space-md);
    display: none;
}

.mt24-filters__group.open .mt24-filters__group-body {
    display: block;
}

/* Checkbox list */
.mt24-filters__option {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    padding: 4px 0;
    cursor: pointer;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    text-decoration: none;
    transition: color var(--mt24-duration-fast) var(--mt24-ease);
}

a.mt24-filters__option {
    color: inherit;
}

button.mt24-filters__option {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.mt24-filters__option:hover {
    color: var(--mt24-text);
}

.mt24-filters__checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--mt24-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.mt24-filters__option-count {
    margin-left: auto;
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
}

/* Price range */
.mt24-filters__range {
    padding-top: var(--mt24-space-sm);
}

/* noUiSlider overrides */
.mt24-filters__range .noUi-target {
    height: 6px;
    border: none;
    background: var(--mt24-border);
    border-radius: 3px;
    box-shadow: none;
    margin-bottom: var(--mt24-space-md);
}

.mt24-filters__range .noUi-connect {
    background: var(--mt24-primary);
    border-radius: 3px;
}

.mt24-filters__range .noUi-handle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mt24-bg);
    border: 2px solid var(--mt24-primary);
    box-shadow: var(--mt24-shadow-sm);
    cursor: grab;
    top: -7px;
    right: -9px;
}

.mt24-filters__range .noUi-handle:before,
.mt24-filters__range .noUi-handle:after {
    display: none;
}

.mt24-filters__range .noUi-handle:active {
    cursor: grabbing;
    border-color: var(--mt24-primary-dark, var(--mt24-primary));
    box-shadow: 0 0 0 4px rgba(var(--mt24-primary-rgb, 79, 70, 229), 0.15);
}

.mt24-filters__range-slider {
    width: 100%;
    accent-color: var(--mt24-primary);
    cursor: pointer;
}

.mt24-filters__range-values {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mt24-space-sm);
    margin-top: var(--mt24-space-xs);
}

.mt24-filters__range-input {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-sm);
    font-size: var(--mt24-font-size-xs);
    text-align: center;
    color: var(--mt24-text);
}

.mt24-filters__range-separator {
    color: var(--mt24-text-muted);
    font-size: var(--mt24-font-size-sm);
}

.mt24-filters__range-apply {
    width: 100%;
    margin-top: var(--mt24-space-sm);
}

.mt24-filters__range-input.is-invalid {
    border-color: var(--mt24-danger);
    background-color: color-mix(in srgb, var(--mt24-danger) 6%, transparent);
}

.mt24-filters__range-error {
    margin: var(--mt24-space-xs) 0 0 0;
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-danger);
    line-height: 1.3;
}

[x-cloak] { display: none !important; }

/* Category filter links with depth levels */
.mt24-filters__cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mt24-space-xs);
    padding: 5px 0;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    text-decoration: none;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-filters__cat-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mt24-filters__cat-link:hover {
    color: var(--mt24-text);
}

.mt24-filters__cat-link--active,
.mt24-filters__cat-link--depth-1.mt24-filters__cat-link--active,
.mt24-filters__cat-link--depth-2.mt24-filters__cat-link--active {
    color: var(--mt24-primary) !important;
    font-weight: 700;
}

.mt24-filters__cat-link--in-path,
.mt24-filters__cat-link--depth-1.mt24-filters__cat-link--in-path,
.mt24-filters__cat-link--depth-2.mt24-filters__cat-link--in-path {
    color: var(--mt24-primary) !important;
    opacity: 0.7;
}

.mt24-filters__cat-link--depth-0 {
    font-weight: 600;
}

.mt24-filters__cat-link--depth-1 {
    padding-left: var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    position: relative;
}

.mt24-filters__cat-link--depth-1::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--mt24-border);
}

.mt24-filters__cat-link--depth-2 {
    padding-left: calc(var(--mt24-space-md) * 2);
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    position: relative;
}

.mt24-filters__cat-link--depth-2::before {
    content: '';
    position: absolute;
    left: calc(var(--mt24-space-md) + 6px);
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--mt24-border-light);
}

/* Collapsible category tree */
.mt24-filters__cat-tree {
    display: block;
}

.mt24-filters__cat-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mt24-filters__cat-row .mt24-filters__cat-link {
    flex: 1 1 auto;
    min-width: 0;
}

.mt24-filters__cat-toggle {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--mt24-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.2s ease;
}

.mt24-filters__cat-toggle:hover {
    background: var(--mt24-bg-soft);
    color: var(--mt24-text);
}

.mt24-filters__cat-toggle .icon-mt24-chevron-down {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.mt24-filters__cat-toggle.is-expanded .icon-mt24-chevron-down {
    transform: rotate(180deg);
}

.mt24-filters__cat-children {
    display: block;
}

.mt24-filters__group-body--scroll {
    max-height: 220px;
    overflow-y: auto;
}

.mt24-filters__star {
    color: var(--mt24-warning);
    font-size: 14px;
}

.mt24-filters__mobile-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mt24-filters__mobile-actions {
    padding: var(--mt24-space-md);
    border-top: 1px solid var(--mt24-border-light);
    background: var(--mt24-bg);
}

.mt24-filters__mobile-actions .mt24-btn {
    width: 100%;
}

.mt24-filters__mobile-actions .mt24-btn + .mt24-btn {
    margin-top: var(--mt24-space-sm);
}

.mt24-filters__mobile-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: var(--mt24-radius-full);
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
    font-size: 11px;
    font-weight: 700;
    padding: 0 5px;
    margin-left: 4px;
}

/* Color swatches in filters */
.mt24-filters__colors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt24-space-sm);
}

.mt24-filters__color {
    width: 28px;
    height: 28px;
    border-radius: var(--mt24-radius-full);
    border: 2px solid var(--mt24-border);
    cursor: pointer;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
    position: relative;
}

.mt24-filters__color:hover {
    transform: scale(1.15);
}

.mt24-filters__color.active {
    border-color: var(--mt24-primary);
    box-shadow: 0 0 0 2px var(--mt24-primary-light);
}

.mt24-filters__color.active::after {
    content: '\2713';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Search within filter */
.mt24-filters__search {
    margin-bottom: var(--mt24-space-sm);
}

.mt24-filters__search-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-sm);
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text);
    outline: none;
}

.mt24-filters__search-input:focus {
    border-color: var(--mt24-primary);
}

/* Mobile filter toggle */
.mt24-filters__mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--mt24-space-xs);
    padding: 10px var(--mt24-space-md);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    background: var(--mt24-bg);
    color: var(--mt24-text);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

@media (max-width: 991px) {
    .mt24-filters__mobile-toggle {
        display: flex;
    }

    /* Filtros como bottom sheet (estilo app): sube desde abajo, esquinas
       redondeadas, con handle y safe-area. Antes era un drawer lateral. */
    .mt24-filters--mobile {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        z-index: var(--mt24-z-offcanvas);
        transform: translateY(100%);
        /* Slide animation runs on open and close. visibility flips with a delay
           equal to the slide duration on close, so the panel stays interactive
           through the slide-out and only becomes hidden once it is offscreen. */
        visibility: hidden;
        transition: transform var(--mt24-duration-slow) var(--mt24-ease),
                    visibility 0s linear var(--mt24-duration-slow);
        border-radius: 20px 20px 0 0;
        border: none;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
        display: flex !important;
        flex-direction: column;
        overflow: hidden;
    }

    .mt24-filters--mobile.active {
        transform: translateY(0);
        visibility: visible;
        transition: transform var(--mt24-duration-slow) var(--mt24-ease),
                    visibility 0s linear 0s;
    }

    /* Handle del bottom sheet (pseudo-elemento, sin tocar el markup). */
    .mt24-filters--mobile .mt24-filters__header {
        position: relative;
        padding-top: 20px;
    }
    .mt24-filters--mobile .mt24-filters__header::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--mt24-border);
    }
    /* El botón de cerrar usa .mt24-btn base (sin color propio) → heredaba un
       color sin contraste y el icono X (currentColor) no se veía. Forzamos
       color de texto + un fondo tenue para que siempre sea visible. */
    .mt24-filters--mobile .mt24-filters__header .mt24-btn--icon {
        color: var(--mt24-text);
        background: color-mix(in srgb, currentColor 8%, transparent);
    }

    /* El footer de acciones respeta la safe-area del iPhone. */
    .mt24-filters__mobile-actions {
        padding-bottom: max(var(--mt24-space-md), env(safe-area-inset-bottom, 0px));
    }
}


/* ================================================================
   21. PRODUCT GALLERY (.mt24-gallery)
   ================================================================ */

.mt24-gallery {
    display: flex;
    gap: var(--mt24-space-md);
}

.mt24-gallery__thumbs {
    display: flex;
    flex-direction: column;
    gap: var(--mt24-space-sm);
    width: 80px;
    flex-shrink: 0;
}

.mt24-gallery__thumb {
    width: 80px;
    height: 80px;
    border-radius: var(--mt24-radius);
    overflow: hidden;
    border: 2px solid var(--mt24-border-light);
    cursor: pointer;
    transition: border-color var(--mt24-duration-fast) var(--mt24-ease);
    background: var(--mt24-bg-soft);
}

.mt24-gallery__thumb:hover,
.mt24-gallery__thumb.active {
    border-color: var(--mt24-primary);
}

.mt24-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mt24-gallery__main {
    flex: 1;
    position: relative;
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    background: var(--mt24-bg-soft);
    aspect-ratio: 1;
}

.mt24-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}

/* PDP layout container (replaces inline style on the wrapper) */
.mt24-pdp__wrapper {
    max-width: var(--mt24-container-max);
    margin: 0 auto;
    padding: var(--mt24-space-lg) var(--mt24-space-md);
}

/* Drift zoom pane (replaces inline absolute positioning) */
.mt24-pdp__zoom-pane {
    position: absolute;
    top: 0;
    right: -110%;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: none;
}

/* Promotion badge — supports dynamic color via --badge-color custom prop;
   falls back to the semantic danger token when no color is configured */
.mt24-pdp__promo-badge {
    background-color: var(--badge-color, var(--mt24-danger));
    color: #fff;
}

/* Sticky bar image placeholder (no real image) */
.mt24-pdp__sticky-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt24-bg-muted);
    color: var(--mt24-text-muted);
    font-size: 18px;
}

/* PDP tabs container — replaces inline margin-bottom */
.mt24-pdp__tabs {
    margin-bottom: var(--mt24-space-lg);
}

/* PDP rich text (description tab) — relaxed line-height + readable max-width */
.mt24-pdp__rich-text {
    line-height: 1.8;
    max-width: 900px;
}

/* Guest wishlist — login nudge after items are loaded */
.mt24-pdp__guest-wishlist-nudge {
    margin-top: var(--mt24-space-lg);
    padding: var(--mt24-space-md);
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    color: var(--mt24-text-secondary);
    font-size: var(--mt24-font-size-sm);
}
.mt24-pdp__guest-wishlist-nudge i { color: var(--mt24-primary); flex-shrink: 0; }

/* Review form — title spacing (replaces inline margin-bottom) */
.mt24-pdp__review-form-title {
    margin-bottom: var(--mt24-space-md);
}

/* Review form — star picker active color */
.mt24-pdp__star-btn {
    color: var(--mt24-border-dark);
    transition: color var(--mt24-duration) var(--mt24-ease);
}
.mt24-pdp__star-btn.is-on {
    color: var(--mt24-warning);
}

/* Review form — photo uploader */
.mt24-pdp__review-uploader {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt24-space-sm);
    margin-bottom: var(--mt24-space-xs);
}
.mt24-pdp__review-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--mt24-radius);
    overflow: hidden;
    background: var(--mt24-bg-soft);
    border: 1px solid var(--mt24-border);
    flex-shrink: 0;
}
.mt24-pdp__review-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mt24-pdp__review-thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}
.mt24-pdp__review-thumb-remove:hover { background: rgba(0, 0, 0, 0.85); }
.mt24-pdp__review-thumb--add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 2px dashed var(--mt24-border);
    color: var(--mt24-text-muted);
    cursor: pointer;
    transition: border-color var(--mt24-duration) var(--mt24-ease), color var(--mt24-duration) var(--mt24-ease);
}
.mt24-pdp__review-thumb--add:hover {
    border-color: var(--mt24-primary);
    color: var(--mt24-primary);
}
.mt24-pdp__review-thumb--add i { font-size: 22px; }
.mt24-pdp__review-thumb--add.is-disabled { opacity: 0.5; pointer-events: none; }
.mt24-pdp__review-file-input { display: none; }

/* Review photo display (in the reviews list) */
.mt24-pdp__review-photos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt24-space-xs);
    margin: var(--mt24-space-xs) 0;
}
.mt24-pdp__review-photo {
    width: 60px;
    height: 60px;
    border-radius: var(--mt24-radius-sm, 4px);
    overflow: hidden;
    flex-shrink: 0;
    cursor: zoom-in;
    transition: transform var(--mt24-duration) var(--mt24-ease);
}
.mt24-pdp__review-photo:hover { transform: scale(1.05); }
.mt24-pdp__review-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mt24-gallery__zoom {
    position: absolute;
    top: var(--mt24-space-sm);
    right: var(--mt24-space-sm);
    width: 36px;
    height: 36px;
    border-radius: var(--mt24-radius-full);
    background: var(--mt24-bg);
    border: none;
    color: var(--mt24-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--mt24-shadow);
    z-index: 2;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-gallery__zoom:hover {
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
}

/* Navigation arrows */
.mt24-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: var(--mt24-radius-full);
    background: var(--mt24-bg);
    border: none;
    color: var(--mt24-text);
    cursor: pointer;
    box-shadow: var(--mt24-shadow);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-gallery__nav:hover {
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
}

.mt24-gallery__nav--prev {
    left: var(--mt24-space-sm);
}

.mt24-gallery__nav--next {
    right: var(--mt24-space-sm);
}

/* Badge overlays */
.mt24-gallery__badges {
    position: absolute;
    top: var(--mt24-space-sm);
    left: var(--mt24-space-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

/* Lightbox */
.mt24-gallery__lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: var(--mt24-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--mt24-duration) var(--mt24-ease);
}

.mt24-gallery__lightbox.active {
    opacity: 1;
    visibility: visible;
}

.mt24-gallery__lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
}

.mt24-gallery__lightbox-close {
    position: absolute;
    top: var(--mt24-space-lg);
    right: var(--mt24-space-lg);
    width: 44px;
    height: 44px;
    border-radius: var(--mt24-radius-full);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: var(--mt24-text-inverse);
    cursor: pointer;
    font-size: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-gallery__lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 767px) {
    .mt24-gallery {
        flex-direction: column-reverse;
        overflow: auto;
    }

    .mt24-gallery__thumbs {
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        gap: var(--mt24-space-xs);
        padding-bottom: var(--mt24-space-xs);
    }

    .mt24-gallery__thumb {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }
}


/* ================================================================
   22. PRODUCT INFO (.mt24-product-info)
   ================================================================ */

.mt24-product-info {
    padding: var(--mt24-space-md) 0;
}

.mt24-product-info__breadcrumb {
    margin-bottom: var(--mt24-space-sm);
}

.mt24-product-info__brand {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--mt24-space-xs);
}

.mt24-product-info__brand a {
    color: var(--mt24-primary);
    font-weight: 600;
    text-decoration: none;
}

.mt24-product-info__brand a:hover {
    text-decoration: underline;
}

.mt24-product-info__title {
    font-size: var(--mt24-font-size-2xl);
    font-weight: 700;
    color: var(--mt24-text);
    line-height: 1.3;
    margin-bottom: var(--mt24-space-sm);
}

.mt24-product-info__sku {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    margin-bottom: var(--mt24-space-sm);
}

.mt24-product-info__rating {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    margin-bottom: var(--mt24-space-md);
    padding-bottom: var(--mt24-space-md);
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-product-info__stars {
    display: flex;
    gap: 2px;
    color: var(--mt24-warning);
    font-size: var(--mt24-font-size-base);
}

.mt24-product-info__review-count {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-muted);
}

.mt24-product-info__review-link {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-primary);
    text-decoration: none;
    font-weight: 600;
}

.mt24-product-info__review-link:hover {
    text-decoration: underline;
}

/* Price section */
.mt24-product-info__price {
    display: flex;
    align-items: baseline;
    gap: var(--mt24-space-sm);
    margin-bottom: var(--mt24-space-md);
    flex-wrap: wrap;
}

.mt24-product-info__price-current {
    font-size: var(--mt24-font-size-3xl);
    font-weight: 800;
    color: var(--mt24-primary);
}

.mt24-product-info__price-old {
    font-size: var(--mt24-font-size-lg);
    color: var(--mt24-text-muted);
    text-decoration: line-through;
}

.mt24-product-info__price-save {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-danger);
    font-weight: 700;
    padding: 2px 8px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--mt24-radius-sm);
}

.mt24-product-info__tax-note {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    display: block;
    margin-top: 4px;
}

/* Short description */
.mt24-product-info__short-desc {
    font-size: var(--mt24-font-size-base);
    color: var(--mt24-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--mt24-space-md);
}

/* Stock status */
.mt24-product-info__stock {
    display: inline-flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    margin-bottom: var(--mt24-space-md);
}

.mt24-product-info__stock--in {
    color: var(--mt24-success);
}

.mt24-product-info__stock--low {
    color: var(--mt24-warning);
}

.mt24-product-info__stock--out {
    color: var(--mt24-danger);
}

.mt24-product-info__stock-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--mt24-radius-full);
    background: currentColor;
}

/* Variants / Options */
.mt24-product-info__option {
    margin-bottom: var(--mt24-space-md);
}

.mt24-product-info__option-label {
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text);
    margin-bottom: var(--mt24-space-xs);
}

.mt24-product-info__option-label span {
    font-weight: 400;
    color: var(--mt24-text-muted);
}

.mt24-product-info__option-values {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt24-space-xs);
}

.mt24-product-info__option-value {
    padding: 8px 16px;
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
    background: var(--mt24-bg);
    cursor: pointer;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-product-info__option-value:hover {
    border-color: var(--mt24-primary);
}

.mt24-product-info__option-value.active {
    border-color: var(--mt24-primary);
    background: var(--mt24-primary-light);
    color: var(--mt24-primary);
    font-weight: 600;
}

.mt24-product-info__option-value--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: line-through;
}

/* Quantity + Add to cart row */
.mt24-product-info__add-row {
    display: flex;
    align-items: stretch;
    gap: var(--mt24-space-sm);
    margin-bottom: var(--mt24-space-md);
}

.mt24-product-info__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    overflow: hidden;
    flex-shrink: 0;
}

.mt24-product-info__qty-btn {
    width: 42px;
    height: 46px;
    border: none;
    background: var(--mt24-bg-soft);
    color: var(--mt24-text);
    cursor: pointer;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-product-info__qty-btn:hover {
    background: var(--mt24-bg-muted);
}

.mt24-product-info__qty-value {
    width: 48px;
    height: 46px;
    text-align: center;
    border: none;
    font-weight: 600;
    font-size: var(--mt24-font-size-base);
    color: var(--mt24-text);
    background: var(--mt24-bg);
}

.mt24-product-info__add-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mt24-space-sm);
    padding: 12px var(--mt24-space-xl);
    border: none;
    border-radius: var(--mt24-radius);
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
    font-size: var(--mt24-font-size-base);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-product-info__add-btn:hover {
    background: var(--mt24-primary-hover);
    box-shadow: 0 4px 16px rgba(var(--mt24-primary-rgb), 0.35);
}

.mt24-product-info__add-btn:active {
    transform: scale(0.97);
}

/* Secondary actions */
.mt24-product-info__secondary-actions {
    display: flex;
    gap: var(--mt24-space-md);
    margin-bottom: var(--mt24-space-lg);
    padding-bottom: var(--mt24-space-lg);
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-product-info__secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    background: none;
    border: none;
    color: var(--mt24-text-secondary);
    font-size: var(--mt24-font-size-sm);
    cursor: pointer;
    padding: 0;
    transition: color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-product-info__secondary-btn:hover {
    color: var(--mt24-primary);
}

/* Meta info */
.mt24-product-info__meta {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    line-height: 2;
}

.mt24-product-info__meta strong {
    color: var(--mt24-text);
    font-weight: 600;
}

.mt24-product-info__meta a {
    color: var(--mt24-primary);
    text-decoration: none;
}

.mt24-product-info__meta a:hover {
    text-decoration: underline;
}

/* Delivery / Trust section */
.mt24-product-info__trust {
    margin-top: var(--mt24-space-md);
    padding: var(--mt24-space-md);
    background: var(--mt24-bg-soft);
    border-radius: var(--mt24-radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--mt24-space-sm);
}

.mt24-product-info__trust-item {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-md);
    padding: 6px 0;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
}

.mt24-product-info__trust-item + .mt24-product-info__trust-item {
    border-top: 1px solid var(--mt24-border-light);
    padding-top: var(--mt24-space-sm);
}

.mt24-product-info__trust-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--mt24-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 1px 3px rgba(var(--mt24-primary-rgb), 0.18);
    flex-shrink: 0;
}

.mt24-product-info__trust-icon i {
    font-size: 1.05rem;
}

.mt24-product-info__trust-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.mt24-product-info__trust-text strong {
    color: var(--mt24-text);
    font-size: var(--mt24-font-size-sm);
    font-weight: 700;
}

.mt24-product-info__trust-text small {
    color: var(--mt24-text-muted);
    font-size: var(--mt24-font-size-xs);
    margin-top: 2px;
}

/* Color variant button: swatch + label combo (shared with landing layout) */
.mt24-product-info__option-value--swatch {
    padding-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mt24-product-info__option-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 0 0 2px #fff;
    flex-shrink: 0;
}


/* ================================================================
   23. ACCOUNT SIDEBAR (.mt24-account-sidebar)
   ================================================================ */

.mt24-account-sidebar {
    background: var(--mt24-bg);
    border-radius: var(--mt24-radius-lg);
    border: 1px solid var(--mt24-border-light);
    overflow: hidden;
}

.mt24-account-sidebar__header {
    padding: var(--mt24-space-lg);
    text-align: center;
    background: var(--mt24-bg-soft);
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-account-sidebar__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--mt24-radius-full);
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--mt24-font-size-base);
    flex-shrink: 0;
}

.mt24-account-sidebar__avatar-placeholder {
    width: 72px;
    height: 72px;
    border-radius: var(--mt24-radius-full);
    background: var(--mt24-primary-light);
    color: var(--mt24-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto var(--mt24-space-sm);
}

.mt24-account-sidebar__name {
    display: block;
    font-size: var(--mt24-font-size-sm);
    font-weight: 700;
    color: var(--mt24-text);
}

.mt24-account-sidebar__email {
    display: block;
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    margin-top: 2px;
}

.mt24-account-sidebar__nav {
    padding: var(--mt24-space-sm) 0;
}

.mt24-account-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    padding: 10px var(--mt24-space-lg);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    text-decoration: none;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
    border-left: 3px solid transparent;
}

.mt24-account-sidebar__link:hover {
    color: var(--mt24-primary);
    background: var(--mt24-primary-light);
    border-left-color: var(--mt24-primary);
}

.mt24-account-sidebar__link.active {
    color: var(--mt24-primary);
    background: var(--mt24-primary-light);
    border-left-color: var(--mt24-primary);
    font-weight: 600;
}

.mt24-account-sidebar__link-icon {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    opacity: 0.7;
}

.mt24-account-sidebar__link-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt24-danger);
    color: var(--mt24-text-inverse);
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--mt24-radius-full);
    padding: 0 5px;
}

.mt24-account-sidebar__divider {
    height: 1px;
    background: var(--mt24-border-light);
    margin: var(--mt24-space-xs) 0;
}

.mt24-account-sidebar__logout {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    padding: 10px var(--mt24-space-lg);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-danger);
    text-decoration: none;
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-account-sidebar__logout:hover {
    background: rgba(239, 68, 68, 0.05);
}


/* ================================================================
   24. WHATSAPP FLOAT (.mt24-whatsapp)
   ================================================================ */

.mt24-whatsapp {
    position: fixed;
    bottom: calc(var(--mt24-space-lg) + var(--mt24-bottom-offset, 0px));
    right: var(--mt24-space-lg);
    z-index: var(--mt24-z-fixed);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--mt24-space-sm);
    transition: bottom var(--mt24-duration) var(--mt24-ease);
}

.mt24-whatsapp__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--mt24-radius-full);
    background: #25D366;
    color: white;
    font-size: 1.75rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
    transition: all var(--mt24-duration) var(--mt24-ease);
    text-decoration: none;
}

.mt24-whatsapp__btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
    color: white;
}

.mt24-whatsapp__btn:active {
    transform: scale(1.05);
}

/* Pulse animation */
.mt24-whatsapp__btn {
    position: relative;
}

.mt24-whatsapp__btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--mt24-radius-full);
    border: 2px solid rgba(37, 211, 102, 0.5);
    animation: mt24-whatsapp-pulse 2s ease-in-out infinite;
}

@keyframes mt24-whatsapp-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* Chat popup */
.mt24-whatsapp__popup {
    background: var(--mt24-bg);
    border-radius: var(--mt24-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    width: 320px;
    max-width: calc(100vw - var(--mt24-space-xl));
    overflow: hidden;
    border: 1px solid var(--mt24-border-light);
}

.mt24-whatsapp__popup-header {
    background: #075E54;
    color: white;
    padding: var(--mt24-space-md);
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
}

.mt24-whatsapp__popup-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--mt24-radius-full);
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.mt24-whatsapp__popup-name {
    font-weight: 700;
    font-size: var(--mt24-font-size-sm);
}

.mt24-whatsapp__popup-status {
    font-size: var(--mt24-font-size-xs);
    opacity: 0.8;
}

.mt24-whatsapp__popup-close {
    margin-left: auto;
    background: none;
    border: none;
    color: white;
    opacity: 0.7;
    cursor: pointer;
    font-size: 1rem;
}

.mt24-whatsapp__popup-close:hover {
    opacity: 1;
}

.mt24-whatsapp__popup-body {
    padding: var(--mt24-space-md);
    background: #ECE5DD;
    min-height: 80px;
}

.mt24-whatsapp__popup-message {
    background: white;
    border-radius: 0 var(--mt24-radius) var(--mt24-radius) var(--mt24-radius);
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
    box-shadow: var(--mt24-shadow-xs);
    display: inline-block;
    max-width: 85%;
    line-height: 1.5;
}

.mt24-whatsapp__popup-time {
    font-size: 10px;
    color: var(--mt24-text-muted);
    text-align: right;
    margin-top: 2px;
}

.mt24-whatsapp__popup-footer {
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    background: var(--mt24-bg);
}

.mt24-whatsapp__popup-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mt24-space-xs);
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: var(--mt24-radius-full);
    background: #25D366;
    color: white;
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-whatsapp__popup-cta:hover {
    background: #128C7E;
    color: white;
}

/* Tooltip label */
.mt24-whatsapp__label {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--mt24-bg);
    border-radius: var(--mt24-radius-full);
    box-shadow: var(--mt24-shadow-md);
    font-size: var(--mt24-font-size-xs);
    font-weight: 600;
    color: var(--mt24-text);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    transition: all var(--mt24-duration) var(--mt24-ease);
}

.mt24-whatsapp:hover .mt24-whatsapp__label {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 575px) {
    .mt24-whatsapp {
        /* Preserve --mt24-bottom-offset (set by sticky bars / overlay floats) */
        bottom: calc(var(--mt24-space-md) + var(--mt24-bottom-offset, 0px));
        right: var(--mt24-space-md);
    }

    .mt24-whatsapp__btn {
        width: 56px;
        height: 56px;
        font-size: 1.75rem;
    }

    .mt24-whatsapp__popup {
        width: calc(100vw - var(--mt24-space-xl));
    }

    .mt24-whatsapp__label {
        display: none;
    }
}


/* ================================================================
   MISSING CLASS DEFINITIONS — PHP/CSS alignment fixes
   ================================================================ */


/* ── Header extras ── */

.mt24-header__logo-text {
    font-size: var(--mt24-font-size-lg);
    font-weight: 800;
    color: var(--mt24-text);
    text-decoration: none;
    letter-spacing: -0.5px;
}

.mt24-header__logo a .mt24-header__logo-text {
    color: var(--mt24-text);
}

.mt24-header__main-inner {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-md);
    width: 100%;
}

.mt24-header__top-link {
    display: inline-flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    color: var(--mt24-text-inverse);
    text-decoration: none;
    font-size: var(--mt24-font-size-xs);
    opacity: 0.8;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-header__top-link:hover {
    opacity: 1;
    color: var(--mt24-text-inverse);
}

.mt24-header__top-promo {
    font-weight: 600;
    color: var(--mt24-text-inverse);
    opacity: 0.9;
}

.mt24-header__top-social {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
}

.mt24-header__top-lang {
    position: relative;
}

.mt24-header__mobile-search-wrap {
    position: static;
}
/* El buscador del header mobile ahora abre el sheet full-screen (search_sheet.php);
   el panel inline .mt24-header__mobile-search fue retirado. El menú móvil conserva
   su propio buscador inline (.mt24-mobile-menu__search), que sí usa lo de abajo. */
.mt24-mobile-menu__search .mt24-search-form {
    flex-wrap: wrap;
}
.mt24-search-suggest.mt24-search-suggest--mobile {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    flex-basis: 100%;
    width: 100%;
    margin-top: var(--mt24-space-sm);
    box-shadow: none;
    border-radius: var(--mt24-radius);
    max-height: 60vh;
}

/* Hide native search input clear button (webkit) — we render our own X */
.mt24-search-form__input::-webkit-search-cancel-button,
.mt24-search-form__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.mt24-header__nav-links {
    display: flex;
    align-items: stretch;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
    flex: 1;
}

.mt24-header__nav-links li {
    display: flex;
}

.mt24-header__nav-links li a {
    display: inline-flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    padding: 0 var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: color var(--mt24-duration-fast) var(--mt24-ease);
    position: relative;
}

.mt24-header__nav-links li a:hover,
.mt24-header__nav-links li a.active {
    color: var(--mt24-primary);
}

.mt24-header__nav-links li a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: var(--mt24-space-md);
    right: var(--mt24-space-md);
    height: 2px;
    background: var(--mt24-primary);
    transform: scaleX(0);
    transition: transform var(--mt24-duration) var(--mt24-ease);
}

.mt24-header__nav-links li a:hover::after,
.mt24-header__nav-links li a.active::after {
    transform: scaleX(1);
}

/* Menú con categorías destacadas: sin el dropdown de categorías, la
   altura de la fila del nav la daba el .mt24-megamenu__trigger. Al
   ocultarse, los enlaces (que tienen padding vertical 0) colapsaban la
   fila. Les damos el mismo padding vertical del trigger (12px) para que
   la fila conserve su altura por sí sola. */
.mt24-header__nav--source-categories .mt24-header__nav-links li a {
    padding-top: 12px;
    padding-bottom: 12px;
}

.mt24-header__hotline {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    margin-left: auto;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
    white-space: nowrap;
}

.mt24-header__hotline i {
    font-size: 1.25rem;
    color: var(--mt24-accent, var(--mt24-primary));
}

.mt24-header__hotline-label {
    display: block;
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-secondary);
    line-height: 1.2;
}

.mt24-header__hotline-number {
    display: block;
    font-weight: 700;
    color: var(--mt24-accent, var(--mt24-primary));
    text-decoration: none;
    line-height: 1.2;
}

.mt24-header__hotline-number:hover {
    color: var(--mt24-primary-hover);
}

.mt24-header__user {
    position: relative;
}


/* ── Search form (standalone) ── */

.mt24-search-form {
    display: flex;
    width: 100%;
}

.mt24-search-form__inner {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    width: 100%;
    border: 2px solid var(--mt24-border);
    border-radius: var(--mt24-radius-full);
    overflow: hidden;
    transition: border-color var(--mt24-duration-fast) var(--mt24-ease);
    background: var(--mt24-bg);
    height: 44px;
}

.mt24-search-form__inner:focus-within {
    border-color: var(--mt24-primary);
    box-shadow: 0 0 0 3px rgba(var(--mt24-primary-rgb), 0.1);
}

.mt24-search-form__icon {
    display: flex;
    align-items: center;
    margin-left: 14px;
    color: var(--mt24-text-muted);
    font-size: 1.1rem;
    flex-shrink: 0;
    pointer-events: none;
}

/* Botón clickable que envuelve el icono lupa (submit del buscador desktop).
   El <i> mantiene pointer-events:none; el click lo recibe este botón. */
.mt24-search-form__icon-btn {
    display: flex;
    align-items: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.mt24-search-form__icon-btn:hover .mt24-search-form__icon {
    color: var(--mt24-primary);
}

.mt24-search-form__input {
    border: none;
    padding: 10px var(--mt24-space-md) 10px 0;
    flex: 1;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
    background: transparent;
    outline: none;
    min-width: 0;
}

.mt24-search-form__input::placeholder {
    color: var(--mt24-text-muted);
}

.mt24-search-form__btn {
    border: none;
    border-radius: 0 var(--mt24-radius-full) var(--mt24-radius-full) 0;
    white-space: nowrap;
    height: 100%;
    align-self: stretch;
    padding: 0 var(--mt24-space-md);
    margin: -1px -1px -1px 0;
}


/* ── Dropdown ── */

.mt24-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    box-shadow: var(--mt24-shadow-lg);
    padding: var(--mt24-space-xs) 0;
    z-index: var(--mt24-z-dropdown);
}

.mt24-dropdown--sm {
    min-width: 140px;
}

.mt24-dropdown__header {
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    font-weight: 700;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-xs) var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
    text-decoration: none;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-dropdown__item:hover {
    background: var(--mt24-bg-soft);
    color: var(--mt24-primary);
}

.mt24-dropdown__item.active {
    color: var(--mt24-primary);
    font-weight: 600;
}

.mt24-dropdown__item--danger {
    color: var(--mt24-danger);
}

.mt24-dropdown__item--danger:hover {
    background: rgba(239, 68, 68, 0.06);
    color: var(--mt24-danger);
}

.mt24-dropdown__divider {
    height: 1px;
    background: var(--mt24-border-light);
    margin: var(--mt24-space-xs) 0;
}


/* ── Mega-menu extras ── */

.mt24-megamenu__col {
    margin-bottom: var(--mt24-space-md);
}

.mt24-megamenu__col-title {
    font-weight: 700;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
    margin-bottom: var(--mt24-space-sm);
}

.mt24-megamenu__col-title a {
    color: var(--mt24-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--mt24-space-xs);
}

.mt24-megamenu__col-title a:hover {
    color: var(--mt24-primary);
}

.mt24-megamenu__sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mt24-megamenu__sub-list li {
    margin-bottom: 2px;
}

.mt24-megamenu__sub-list a {
    display: inline-flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    padding: 4px 0;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    text-decoration: none;
    transition: color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-megamenu__sub-list a:hover {
    color: var(--mt24-primary);
    padding-left: 4px;
}

.mt24-megamenu__footer {
    border-top: 1px solid var(--mt24-border-light);
    padding-top: var(--mt24-space-md);
    margin-top: var(--mt24-space-sm);
    text-align: center;
}

.mt24-megamenu__view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-primary);
    text-decoration: none;
    transition: gap var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-megamenu__view-all:hover {
    gap: var(--mt24-space-sm);
}

.mt24-megamenu__arrow {
    font-size: 0.7em;
    transition: transform var(--mt24-duration-fast) var(--mt24-ease);
}


/* ── Mobile menu extras ── */

.mt24-mobile-menu__brand {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    text-decoration: none;
}

.mt24-mobile-menu__brand-text {
    font-size: var(--mt24-font-size-lg);
    font-weight: 800;
    color: var(--mt24-text);
}

.mt24-mobile-menu__accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    background: none;
    border: none;
    font-size: var(--mt24-font-size-sm);
    font-weight: 500;
    color: var(--mt24-text);
    cursor: pointer;
    text-align: left;
}

.mt24-mobile-menu__accordion-icon {
    font-size: 0.75em;
    transition: transform var(--mt24-duration) var(--mt24-ease);
}

.mt24-mobile-menu__accordion-icon.is-expanded {
    transform: rotate(180deg);
}

.mt24-mobile-menu__accordion-panel {
    padding: 0 var(--mt24-space-md) var(--mt24-space-sm);
}

.mt24-mobile-menu__sublink {
    display: block;
    padding: var(--mt24-space-xs) var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    text-decoration: none;
    transition: color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-mobile-menu__sublink:hover {
    color: var(--mt24-primary);
}

.mt24-mobile-menu__sublink--all {
    font-weight: 600;
    color: var(--mt24-primary);
}

.mt24-mobile-menu__sublink--view-all {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    margin-top: var(--mt24-space-xs);
    padding-top: var(--mt24-space-xs);
    border-top: 1px solid var(--mt24-border-light);
    display: flex;
    align-items: center;
    gap: 4px;
}

.mt24-mobile-menu__sublink--view-all:hover {
    color: var(--mt24-primary);
}

.mt24-mobile-menu__sublink--nested {
    padding-left: calc(var(--mt24-space-xl) + var(--mt24-space-md));
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
}

.mt24-mobile-menu__sublink--nested:hover {
    color: var(--mt24-primary);
}

.mt24-mobile-menu__link--highlight {
    color: var(--mt24-primary);
    font-weight: 600;
}

.mt24-mobile-menu__link--danger {
    color: var(--mt24-danger);
}

.mt24-mobile-menu__link--danger:hover {
    color: var(--mt24-danger);
    background: rgba(239, 68, 68, 0.06);
}

.mt24-mobile-menu__section {
    padding: var(--mt24-space-sm) 0;
}

.mt24-mobile-menu__section-title {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    font-size: var(--mt24-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mt24-text-muted);
}

.mt24-mobile-menu__contact {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-xs) var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    text-decoration: none;
}

.mt24-mobile-menu__contact:hover {
    color: var(--mt24-primary);
}

/* ================================================================
   STORE LOCATIONS (.mt24-stores)
   ================================================================ */

.mt24-stores {
    max-width: var(--mt24-container-max);
    margin: 0 auto;
    padding: var(--mt24-space-lg) var(--mt24-space-md);
}

.mt24-stores__title {
    font-size: var(--mt24-font-size-xl);
    font-weight: 700;
    margin: 0 0 var(--mt24-space-lg) 0;
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
}

.mt24-stores__subtitle {
    color: var(--mt24-text-muted);
    margin: -8px 0 var(--mt24-space-md) 0;
    font-size: var(--mt24-font-size-sm);
}

.mt24-stores__list {
    max-height: 600px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--mt24-space-sm);
    padding: 0 var(--mt24-space-xs) 0 0;
    margin: 0;
    list-style: none;
}
.mt24-stores__list > li { list-style: none; }

/* Card is a div (not a button) because it contains nested controls — the
   click-anywhere convenience is for mouse users; keyboard users target
   the name button or any inner control. */
.mt24-stores__card {
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg);
    padding: var(--mt24-space-md);
    cursor: pointer;
    box-shadow: var(--mt24-shadow-sm);
    transition: box-shadow var(--mt24-duration-fast) var(--mt24-ease),
                border-color var(--mt24-duration-fast) var(--mt24-ease);
}
.mt24-stores__card:hover { box-shadow: var(--mt24-shadow-md); }
.mt24-stores__card--active {
    border-color: var(--mt24-primary);
    box-shadow: 0 0 0 2px rgba(var(--mt24-primary-rgb, 59, 130, 246), 0.2);
}

/* "Open today: 9–18" hint above the schedule toggle */
.mt24-stores__card-today {
    margin: 0 0 var(--mt24-space-xs) 0;
    font-size: var(--mt24-font-size-xs);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mt24-stores__card-today--open { color: var(--mt24-success); }
.mt24-stores__card-today--closed { color: var(--mt24-text-muted); }

.mt24-stores__card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: var(--mt24-space-xs);
}

/* Name is a <button> so keyboard users have an explicit "select on map"
   affordance. Reset browser styles so it reads as the H2 it visually is. */
.mt24-stores__card-name {
    font-size: var(--mt24-font-size-base);
    font-weight: 700;
    margin: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    text-align: left;
}
.mt24-stores__card-name:hover { color: var(--mt24-primary); }
.mt24-stores__card-name:focus-visible {
    outline: 2px solid var(--mt24-primary);
    outline-offset: 2px;
    border-radius: var(--mt24-radius-sm);
}

.mt24-stores__card-address {
    margin: 0 0 var(--mt24-space-xs) 0;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
}

.mt24-stores__card-phone {
    margin: 0 0 var(--mt24-space-xs) 0;
    font-size: var(--mt24-font-size-sm);
}

.mt24-stores__card-phone a {
    color: var(--mt24-text);
    text-decoration: none;
}

.mt24-stores__card-phone a:hover {
    color: var(--mt24-primary);
}

.mt24-stores__card-actions {
    margin-top: var(--mt24-space-sm);
}

/* Schedule */
.mt24-stores__schedule {
    margin-top: var(--mt24-space-xs);
}

.mt24-stores__schedule-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--mt24-font-size-xs);
    font-weight: 600;
    color: var(--mt24-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.mt24-stores__schedule-chevron {
    transition: transform var(--mt24-duration-fast) var(--mt24-ease);
}
.mt24-stores__schedule-chevron--open {
    transform: rotate(180deg);
}

.mt24-stores__schedule-body {
    margin-top: 4px;
}

.mt24-stores__schedule-day {
    display: flex;
    justify-content: space-between;
    gap: var(--mt24-space-sm);
    font-size: var(--mt24-font-size-xs);
    padding: 2px 0;
    color: var(--mt24-text-muted);
}
.mt24-stores__schedule-day-name { flex: 0 0 auto; }
.mt24-stores__schedule-day-hours { flex: 0 0 auto; text-align: right; }
.mt24-stores__schedule-day--today {
    font-weight: 700;
    color: var(--mt24-primary);
}
.mt24-stores__schedule-day--closed .mt24-stores__schedule-day-hours em {
    color: var(--mt24-text-muted);
    font-style: normal;
}

/* Map */
.mt24-stores__map {
    /* Mobile default: tall enough to be useful without dominating the
       viewport. Desktop bumps to 600 via the media query below. Sticky is
       desktop-only — on mobile the map sits naturally below the list. */
    height: 400px;
    border-radius: var(--mt24-radius-lg);
    border: 1px solid var(--mt24-border-light);
    z-index: 1;
}

@media (max-width: 991px) {
    .mt24-stores__list {
        max-height: none;
    }
}

@media (min-width: 992px) {
    .mt24-stores__map {
        height: 600px;
        position: sticky;
        /* +24px buffer accounts for any flash/promo bar that lands above the
           header on the first paint without leaving an awkward gap when
           there's nothing there. */
        top: calc(var(--mt24-header-height, 72px) + 24px);
    }
}


/* ================================================================
   FLASH MESSAGES (.mt24-flash)
   ================================================================ */

.mt24-flash {
    padding: var(--mt24-space-sm) 0;
}

.mt24-flash__inner {
    max-width: var(--mt24-container-max);
    margin: 0 auto;
    padding: var(--mt24-space-md) var(--mt24-space-lg);
    border-radius: var(--mt24-radius-lg);
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
}

.mt24-flash--success .mt24-flash__inner {
    background: rgba(16, 185, 129, 0.08);
    color: var(--mt24-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.mt24-flash--error .mt24-flash__inner {
    background: rgba(239, 68, 68, 0.08);
    color: var(--mt24-danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.mt24-flash--info .mt24-flash__inner {
    background: rgba(var(--mt24-primary-rgb), 0.08);
    color: var(--mt24-primary);
    border: 1px solid rgba(var(--mt24-primary-rgb), 0.2);
}

.mt24-flash--warning .mt24-flash__inner {
    background: rgba(245, 158, 11, 0.08);
    color: var(--mt24-warning);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.mt24-flash__icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.mt24-flash__close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    padding: 4px;
    display: flex;
    flex-shrink: 0;
}

.mt24-flash__close:hover {
    opacity: 1;
}


/* ================================================================
   CONTACT PAGE (.mt24-contact)
   ================================================================ */

.mt24-contact {
    max-width: var(--mt24-container-max);
    margin: 0 auto;
    padding: var(--mt24-space-xl) var(--mt24-space-md);
}

.mt24-contact__title {
    font-size: var(--mt24-font-size-xl);
    font-weight: 700;
    margin: 0 0 var(--mt24-space-xl) 0;
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
}

.mt24-contact__alert {
    border-radius: var(--mt24-radius-lg);
    padding: var(--mt24-space-md);
    margin-bottom: var(--mt24-space-lg);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
}

.mt24-contact__alert--success {
    background: rgba(16, 185, 129, 0.08);
    color: var(--mt24-success);
}

.mt24-contact__alert--error {
    background: rgba(239, 68, 68, 0.08);
    color: var(--mt24-danger);
}

.mt24-contact__grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--mt24-space-xl);
    align-items: start;
}

.mt24-contact__info-card {
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg);
    padding: var(--mt24-space-lg);
    box-shadow: var(--mt24-shadow-sm);
}

.mt24-contact__info-title {
    font-size: var(--mt24-font-size-lg);
    font-weight: 700;
    margin: 0 0 var(--mt24-space-lg) 0;
}

.mt24-contact__info-item {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-md);
    margin-bottom: var(--mt24-space-lg);
}

.mt24-contact__info-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--mt24-radius-full);
    background: rgba(var(--mt24-primary-rgb, 59, 130, 246), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--mt24-primary);
}

.mt24-contact__info-label {
    display: block;
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
}

.mt24-contact__info-value {
    font-weight: 600;
    color: var(--mt24-text);
    text-decoration: none;
}

a.mt24-contact__info-value:hover {
    color: var(--mt24-primary);
}

.mt24-contact__social-title {
    font-size: var(--mt24-font-size-sm);
    font-weight: 700;
    margin-bottom: var(--mt24-space-sm);
}

.mt24-contact__social-links {
    display: flex;
    gap: var(--mt24-space-sm);
}

.mt24-contact__social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--mt24-radius-full);
    border: 1px solid var(--mt24-border);
    color: var(--mt24-text-secondary);
    text-decoration: none;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-contact__social-btn:hover {
    background: var(--mt24-primary);
    border-color: var(--mt24-primary);
    color: var(--mt24-text-inverse);
}

.mt24-contact__locations {
    margin-top: var(--mt24-space-md);
}

.mt24-contact__location-item {
    padding-bottom: var(--mt24-space-sm);
    margin-bottom: var(--mt24-space-sm);
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-contact__location-item:last-of-type {
    border-bottom: none;
}

.mt24-contact__location-address {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-muted);
    margin: 4px 0 0 0;
}

.mt24-contact__locations-btn {
    width: 100%;
    margin-top: var(--mt24-space-sm);
}

.mt24-contact__form-card {
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg);
    padding: var(--mt24-space-lg);
    box-shadow: var(--mt24-shadow-sm);
}

.mt24-contact__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mt24-space-md);
}

.mt24-contact__form-field {
    margin-bottom: var(--mt24-space-md);
}

.mt24-contact__form-field textarea {
    resize: vertical;
}

.mt24-contact__submit {
    width: 100%;
}

@media (max-width: 767px) {
    .mt24-contact__grid {
        grid-template-columns: 1fr;
    }

    .mt24-contact__form-row {
        grid-template-columns: 1fr;
    }
}


/* ================================================================
   CMS PAGE (.mt24-page)
   ================================================================ */

.mt24-page {
    max-width: var(--mt24-container-max);
    margin: 0 auto;
    padding: var(--mt24-space-xl) var(--mt24-space-md);
}

.mt24-page__title {
    font-size: var(--mt24-font-size-2xl, 2rem);
    font-weight: 700;
    margin: 0 0 var(--mt24-space-lg) 0;
    line-height: 1.2;
}

.mt24-page__featured-image {
    margin-bottom: var(--mt24-space-lg);
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
}

.mt24-page__featured-image img {
    width: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
}

/* ================================================================
   BLOG (.mt24-blog)
   ================================================================ */

.mt24-blog {
    max-width: var(--mt24-container-max);
    margin: 0 auto;
    padding: var(--mt24-space-lg) var(--mt24-space-md);
}

.mt24-blog__title {
    font-size: var(--mt24-font-size-xl);
    font-weight: 700;
    margin: 0 0 var(--mt24-space-lg) 0;
}

.mt24-blog__search-info {
    color: var(--mt24-text-muted);
    margin-bottom: var(--mt24-space-md);
}

.mt24-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mt24-space-md);
}

/* ── Blog Card ── */
.mt24-blog-card {
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border-light);
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-blog-card:hover {
    box-shadow: var(--mt24-shadow-md);
    transform: translateY(-2px);
}

.mt24-blog-card__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.mt24-blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--mt24-duration) var(--mt24-ease);
}

.mt24-blog-card:hover .mt24-blog-card__image img {
    transform: scale(1.05);
}

.mt24-blog-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt24-border);
    aspect-ratio: 16 / 9;
    text-decoration: none;
}

.mt24-blog-card__placeholder i {
    font-size: 2.5rem;
    color: var(--mt24-text-muted);
    opacity: 0.5;
}

.mt24-blog-card__body {
    padding: var(--mt24-space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mt24-blog-card__category {
    font-size: var(--mt24-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--mt24-primary);
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.mt24-blog-card__title {
    font-size: var(--mt24-font-size-base);
    font-weight: 700;
    margin: 0 0 var(--mt24-space-xs) 0;
    line-height: 1.3;
}

.mt24-blog-card__title a {
    color: var(--mt24-text);
    text-decoration: none;
}

.mt24-blog-card__title a:hover {
    color: var(--mt24-primary);
}

.mt24-blog-card__excerpt {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mt24-blog-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--mt24-space-sm);
    padding-top: var(--mt24-space-sm);
    border-top: 1px solid var(--mt24-border-light);
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
}

.mt24-blog-card__meta i {
    margin-right: 3px;
}

/* ── Blog Post (single) ── */
.mt24-blog-post__featured {
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    margin-bottom: var(--mt24-space-lg);
}

.mt24-blog-post__featured img {
    width: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
}

.mt24-blog-post__title {
    font-size: var(--mt24-font-size-2xl, 2rem);
    font-weight: 700;
    margin: 0 0 var(--mt24-space-sm) 0;
    line-height: 1.2;
}

.mt24-blog-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt24-space-md);
    align-items: center;
    margin-bottom: var(--mt24-space-lg);
    padding-bottom: var(--mt24-space-md);
    border-bottom: 1px solid var(--mt24-border-light);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-muted);
}

.mt24-blog-post__meta i {
    margin-right: 3px;
}

.mt24-blog-post__share {
    margin-top: var(--mt24-space-xl);
    padding-top: var(--mt24-space-md);
    border-top: 1px solid var(--mt24-border-light);
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    flex-wrap: wrap;
}

.mt24-blog-post__share-label {
    font-size: var(--mt24-font-size-sm);
    font-weight: 700;
    color: var(--mt24-text-secondary);
}

.mt24-blog-post__share-links {
    display: flex;
    gap: var(--mt24-space-xs);
}

.mt24-blog-post__tags {
    margin-top: var(--mt24-space-lg);
    padding-top: var(--mt24-space-md);
    border-top: 1px solid var(--mt24-border-light);
}

.mt24-blog-post__tags-title {
    font-size: var(--mt24-font-size-base);
    font-weight: 700;
    margin-bottom: var(--mt24-space-sm);
}

.mt24-blog-post__tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt24-space-xs);
}

.mt24-blog-post__tags-list a {
    text-decoration: none;
}

.mt24-blog-post__products {
    margin-top: var(--mt24-space-xl);
}

/* ── Blog Sidebar ── */
.mt24-blog__sidebar-card {
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg);
    padding: var(--mt24-space-md);
    margin-bottom: var(--mt24-space-md);
    box-shadow: var(--mt24-shadow-sm);
}

.mt24-blog__sidebar-title {
    font-size: var(--mt24-font-size-base);
    font-weight: 700;
    margin: 0 0 var(--mt24-space-sm) 0;
}

.mt24-blog__search-form {
    display: flex;
    gap: 6px;
}

.mt24-blog__search-form .mt24-auth__input {
    flex: 1;
}

.mt24-blog__sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mt24-blog__sidebar-link {
    display: block;
    padding: 8px 12px;
    border-radius: var(--mt24-radius);
    text-decoration: none;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-blog__sidebar-link:hover {
    background: var(--mt24-bg-soft);
    color: var(--mt24-text);
}

.mt24-blog__sidebar-link--active {
    background: rgba(var(--mt24-primary-rgb, 59, 130, 246), 0.08);
    color: var(--mt24-primary);
    font-weight: 700;
}

.mt24-blog__back-btn {
    width: 100%;
}

/* ── Blog Responsive ── */
@media (max-width: 991px) {
    .mt24-blog__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .mt24-blog__grid {
        grid-template-columns: 1fr;
    }

    .mt24-blog-post__title {
        font-size: var(--mt24-font-size-xl);
    }
}


/* ================================================================
   CMS PAGE (.mt24-page)
   ================================================================ */

.mt24-page__article {
    max-width: 960px;
    margin: 0 auto;
}

.mt24-page__content {
    line-height: 1.8;
    font-size: var(--mt24-font-size-base);
    color: var(--mt24-text);
}


/* ================================================================
   ERROR PAGES (.mt24-error-page)
   ================================================================ */

.mt24-error-page {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    padding: var(--mt24-space-3xl) var(--mt24-space-md);
}

/* Featured grid sibling — uses the normal page container width so the
   product cards aren't crushed by the narrow 560px error-page wrapper. */
.mt24-error-page__featured {
    max-width: var(--mt24-content-max-width, 1280px);
    margin: 0 auto;
    padding: 0 var(--mt24-space-md) var(--mt24-space-2xl);
    text-align: center;
}
.mt24-error-page__featured .mt24-empty-suggest__title {
    margin-bottom: var(--mt24-space-md);
}
.mt24-error-page__featured .mt24-catalog__grid {
    text-align: left;
}

.mt24-error-page__code {
    font-size: clamp(5rem, 15vw, 10rem);
    font-weight: 900;
    line-height: 1;
    color: var(--mt24-border);
    letter-spacing: -0.05em;
    user-select: none;
}

.mt24-error-page__icon {
    font-size: 3rem;
    color: var(--mt24-primary);
    margin: var(--mt24-space-md) 0;
    opacity: 0.6;
}

.mt24-error-page__title {
    font-size: var(--mt24-font-size-xl);
    font-weight: 700;
    margin: 0 0 var(--mt24-space-sm) 0;
}

.mt24-error-page__text {
    font-size: var(--mt24-font-size-base);
    color: var(--mt24-text-muted);
    margin: 0 0 var(--mt24-space-lg) 0;
    line-height: 1.6;
}

.mt24-error-page__search {
    max-width: 420px;
    margin: 0 auto var(--mt24-space-lg);
}

.mt24-error-page__actions {
    display: flex;
    justify-content: center;
    gap: var(--mt24-space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--mt24-space-xl);
}

.mt24-error-page__suggestions {
    padding-top: var(--mt24-space-lg);
    border-top: 1px solid var(--mt24-border-light);
}

.mt24-error-page__suggestions-title {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-muted);
    margin-bottom: var(--mt24-space-sm);
}

.mt24-error-page__suggestions-links {
    display: flex;
    justify-content: center;
    gap: var(--mt24-space-md);
    flex-wrap: wrap;
}

.mt24-error-page__suggestions-links a {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-primary);
    text-decoration: none;
    font-weight: 500;
}

.mt24-error-page__suggestions-links a:hover {
    text-decoration: underline;
}

@media (max-width: 575px) {
    .mt24-error-page {
        padding: var(--mt24-space-xl) var(--mt24-space-md);
    }

    .mt24-error-page__actions {
        flex-direction: column;
    }

    .mt24-error-page__actions .mt24-btn {
        width: 100%;
    }
}


/* ── Footer extras ── */

/* Footer container */
.mt24-footer__container {
    max-width: var(--mt24-container-max);
    margin: 0 auto;
    padding: 0 var(--mt24-space-md);
}

.mt24-footer__centered {
    text-align: center;
}

.mt24-footer__logo {
    display: inline-block;
    margin-bottom: var(--mt24-space-md);
}

.mt24-footer__logo img {
    max-height: 48px;
    width: auto;
    /* Por ahora no invertimos el logo, porque puede usar el logo dark en el footer */
    /*filter: brightness(0) invert(1);*/
}

.mt24-footer__logo--centered {
    display: block;
    text-align: center;
    margin-bottom: var(--mt24-space-md);
}

.mt24-footer__logo--centered img {
    max-height: 52px;
}

.mt24-footer__logo-text {
    font-size: var(--mt24-font-size-lg);
    font-weight: 800;
    color: white;
    text-decoration: none;
    display: inline-block;
    margin-bottom: var(--mt24-space-md);
}

.mt24-footer__desc {
    font-size: var(--mt24-font-size-sm);
    line-height: 1.7;
    opacity: 0.8;
    margin-bottom: var(--mt24-space-md);
}

.mt24-footer__desc--centered {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.mt24-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--mt24-radius-full);
    background: rgba(255, 255, 255, 0.1);
    color: var(--mt24-footer-text);
    font-size: 1rem;
    text-decoration: none;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-footer__social-link:hover {
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
    transform: translateY(-2px);
}

.mt24-footer__contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mt24-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--mt24-space-sm);
    margin-bottom: var(--mt24-space-sm);
    font-size: var(--mt24-font-size-sm);
    opacity: 0.8;
}

.mt24-footer__contact li i {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    margin-top: 3px;
}

.mt24-footer__inline-links {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--mt24-space-md);
}

.mt24-footer__inline-links a {
    font-size: var(--mt24-font-size-sm);
    opacity: 0.8;
}

.mt24-footer__inline-links a:hover {
    opacity: 1;
}

.mt24-footer__inline-links--centered {
    justify-content: center;
    margin-bottom: var(--mt24-space-md);
}

.mt24-footer__social--centered {
    justify-content: center;
}

.mt24-footer__payments-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-md) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mt24-footer__payment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--mt24-space-xs) var(--mt24-space-sm);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--mt24-radius);
    font-size: var(--mt24-font-size-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    min-width: 60px;
    text-align: center;
}

/* ── Recently Viewed (hydrated client-side from localStorage) ─── */
.mt24-recently-viewed {
    background: var(--mt24-bg);
}
.mt24-recently-viewed .mt24-section-header__title {
    display: inline-flex;
    align-items: center;
    gap: var(--mt24-space-sm);
}
.mt24-recently-viewed__prev,
.mt24-recently-viewed__next {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--mt24-border);
    background: var(--mt24-bg);
    color: var(--mt24-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--mt24-duration) var(--mt24-ease);
}
.mt24-recently-viewed__prev:hover,
.mt24-recently-viewed__next:hover {
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast);
    border-color: var(--mt24-primary);
}
.mt24-recently-viewed__prev.swiper-button-disabled,
.mt24-recently-viewed__next.swiper-button-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.mt24-footer__payment-logo {
    height: 28px;
    width: auto;
    max-width: 60px;
    object-fit: contain;
    background: #fff;
    padding: 4px 6px;
    border-radius: var(--mt24-radius-sm, 4px);
    transition: transform var(--mt24-duration) var(--mt24-ease);
}
.mt24-footer__payment-logo:hover {
    transform: translateY(-1px);
}

.mt24-footer__legal {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--mt24-space-sm) 0;
    text-align: center;
}
.mt24-footer__legal-line {
    margin: 0;
    font-size: var(--mt24-font-size-xs);
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

.mt24-footer__copyright {
    margin: 0;
    font-size: var(--mt24-font-size-xs);
    opacity: 0.6;
}

.mt24-footer__platform {
    text-align: center;
    padding-top: var(--mt24-space-sm);
    margin-top: var(--mt24-space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mt24-footer__platform-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--mt24-font-size-xs);
    color: inherit;
    opacity: 0.5;
    text-decoration: none;
    transition: opacity var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-footer__platform-link:hover {
    opacity: 0.8;
    color: inherit;
}

.mt24-footer__platform-logo {
    height: 18px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.7;
}

.mt24-footer__complaints {
    display: inline-flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-footer-text);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-footer__complaints:hover {
    opacity: 1;
    color: white;
}


/* ── Breadcrumb extras ── */

.mt24-breadcrumb__current {
    color: var(--mt24-text-muted);
    font-weight: 600;
}

.mt24-breadcrumb__separator {
    color: var(--mt24-text-muted);
    font-size: var(--mt24-font-size-xs);
    margin: 0 var(--mt24-space-xs);
}


/* ── Pagination extras ── */

.mt24-pagination__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mt24-space-md);
    padding: var(--mt24-space-lg) 0;
}

.mt24-pagination__list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--mt24-space-xs);
}

.mt24-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--mt24-space-sm);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    font-size: var(--mt24-font-size-sm);
    font-weight: 500;
    color: var(--mt24-text);
    text-decoration: none;
    background: var(--mt24-bg);
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-pagination__link:hover {
    border-color: var(--mt24-primary);
    color: var(--mt24-primary);
    background: rgba(var(--mt24-primary-rgb), 0.05);
}

.mt24-pagination__link--active {
    background: var(--mt24-primary);
    border-color: var(--mt24-primary);
    color: var(--mt24-text-inverse);
    font-weight: 700;
}

.mt24-pagination__link--active:hover {
    background: var(--mt24-primary-hover);
    color: var(--mt24-text-inverse);
}

.mt24-pagination__link--disabled {
    opacity: 0.4;
    pointer-events: none;
}

.mt24-pagination__link--prev,
.mt24-pagination__link--next {
    font-weight: 600;
}

@media (max-width: 575px) {
    .mt24-pagination {
        flex-direction: column;
        gap: var(--mt24-space-sm);
    }

    .mt24-pagination__list {
        gap: 2px;
    }

    .mt24-pagination__link {
        min-width: 32px;
        height: 32px;
        font-size: var(--mt24-font-size-xs);
        padding: 0 6px;
    }

    .mt24-pagination__ellipsis {
        min-width: 28px;
        height: 32px;
    }
}


/* ── Category card ── */

.mt24-category-card {
    position: relative;
    display: block;
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: all var(--mt24-duration) var(--mt24-ease);
}

.mt24-category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mt24-shadow-lg);
}

.mt24-category-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.mt24-category-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--mt24-duration) var(--mt24-ease);
}

.mt24-category-card:hover .mt24-category-card__img {
    transform: scale(1.05);
}

.mt24-category-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt24-bg-soft);
    color: var(--mt24-text-muted);
    font-size: 2.5rem;
}

.mt24-category-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
}

.mt24-category-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--mt24-space-md);
    color: white;
}

.mt24-category-card__title {
    font-size: var(--mt24-font-size-base);
    font-weight: 700;
    margin-bottom: 2px;
}

.mt24-category-card__count {
    font-size: var(--mt24-font-size-xs);
    opacity: 0.8;
}

.mt24-category-card__desc {
    font-size: var(--mt24-font-size-sm);
    opacity: 0.8;
    margin-top: var(--mt24-space-xs);
}

.mt24-category-card__arrow {
    display: inline-flex;
    align-items: center;
    font-size: var(--mt24-font-size-sm);
    margin-top: var(--mt24-space-xs);
    transition: transform var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-category-card:hover .mt24-category-card__arrow {
    transform: translateX(4px);
}


/* ── Product card extras ── */

.mt24-product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--mt24-duration) var(--mt24-ease);
}

.mt24-product-card__img--primary {
    position: relative;
    z-index: 1;
}

.mt24-product-card__img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 2;
}

.mt24-product-card:hover .mt24-product-card__img--hover {
    opacity: 1;
}

.mt24-product-card:hover .mt24-product-card__img--primary:has(~ .mt24-product-card__img--hover) {
    opacity: 0;
}

.mt24-product-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt24-bg-soft);
    color: var(--mt24-text-muted);
    font-size: 2.5rem;
}


/* ── Product detail grid ── */

.mt24-product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mt24-space-xl);
    align-items: start;
}

@media (max-width: 991px) {
    .mt24-product-detail-grid {
        grid-template-columns: 1fr;
    }
}


/* ── Quick-view extras ── */

.mt24-quickview__modal {
    position: fixed;
    inset: 0;
    z-index: var(--mt24-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mt24-space-lg);
}

.mt24-quickview__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--mt24-z-modal) - 1);
}

.mt24-quickview__content {
    position: relative;
    background: var(--mt24-bg);
    border-radius: var(--mt24-radius-lg);
    box-shadow: var(--mt24-shadow-xl);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--mt24-space-xl);
    z-index: 1;
    padding: var(--mt24-space-lg);
}

.mt24-quickview__image-wrap {
    background: var(--mt24-bg-soft);
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mt24-quickview__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mt24-quickview__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.mt24-quickview__placeholder i {
    font-size: 3rem;
    color: var(--mt24-text-muted);
}

.mt24-quickview__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--mt24-text-muted);
    font-size: var(--mt24-font-size-lg);
}

@media (max-width: 767px) {
    .mt24-quickview__content {
        grid-template-columns: 1fr;
    }
}


/* ── Cart offcanvas extras ── */

.mt24-cart-offcanvas__items {
    flex: 1;
    overflow-y: auto;
}

.mt24-cart-offcanvas__item-img {
    width: 70px;
    height: 70px;
    border-radius: var(--mt24-radius);
    overflow: hidden;
    flex-shrink: 0;
}

.mt24-cart-offcanvas__item-img img,
.mt24-cart-offcanvas__item-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mt24-cart-offcanvas__item-img-link {
    display: block;
    width: 70px;
    height: 70px;
    border-radius: var(--mt24-radius);
    overflow: hidden;
    flex-shrink: 0;
}

.mt24-cart-offcanvas__qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    background: var(--mt24-bg);
    color: var(--mt24-text);
    cursor: pointer;
    font-size: var(--mt24-font-size-sm);
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-cart-offcanvas__qty-btn:hover {
    border-color: var(--mt24-primary);
    color: var(--mt24-primary);
}

.mt24-cart-offcanvas__qty-value {
    min-width: 28px;
    text-align: center;
    font-weight: 600;
    font-size: var(--mt24-font-size-sm);
}

.mt24-cart-offcanvas__shipping-progress {
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-secondary);
    text-align: center;
}

.mt24-cart-offcanvas__tax-note {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    text-align: center;
    padding: var(--mt24-space-xs) 0;
}


/* ================================================================
   CART PAGE (.mt24-cart)
   ================================================================ */

.mt24-cart {
    max-width: var(--mt24-container-max);
    margin: 0 auto;
    padding: var(--mt24-space-lg) var(--mt24-space-md);
}

.mt24-cart__title {
    font-size: var(--mt24-font-size-xl);
    font-weight: 700;
    margin: 0 0 var(--mt24-space-lg) 0;
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
}

.mt24-cart__count {
    font-size: var(--mt24-font-size-base);
    font-weight: 400;
    color: var(--mt24-text-muted);
}

/* ── Free shipping progress bar ──────────────────────────────────────
   Shown above the cart summary / inside the offcanvas footer when the
   tenant configured a `free_shipping_threshold`. The bar fills from 0 →
   100% as the cart subtotal approaches the threshold; once qualified it
   flips to a success color and the message changes to "qualifies". */
.mt24-free-shipping {
    background: var(--mt24-bg-soft);
    border: 1px solid var(--mt24-border-light);
    border-radius: var(--mt24-radius);
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    margin-bottom: var(--mt24-space-md);
}
.mt24-free-shipping--compact {
    padding: var(--mt24-space-xs) var(--mt24-space-sm);
    margin-bottom: var(--mt24-space-sm);
}
.mt24-free-shipping__msg {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-success);
    margin-bottom: var(--mt24-space-xs);
}
.mt24-free-shipping__msg--pending {
    color: var(--mt24-text);
    font-weight: 500;
}
.mt24-free-shipping__bar {
    width: 100%;
    height: 6px;
    background: var(--mt24-border);
    border-radius: var(--mt24-radius-full);
    overflow: hidden;
}
.mt24-free-shipping__fill {
    height: 100%;
    background: var(--mt24-primary);
    transition: width var(--mt24-duration) var(--mt24-ease);
    border-radius: var(--mt24-radius-full);
}
.mt24-free-shipping__fill--qualified {
    background: var(--mt24-success);
}

/* ── Cart coupon block (cart page summary) ──────────────────────────── */
.mt24-cart__coupon {
    margin-bottom: var(--mt24-space-md);
}
.mt24-cart__coupon-label {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text);
    margin-bottom: var(--mt24-space-xs);
}
.mt24-cart__coupon-error {
    color: var(--mt24-danger);
    font-size: var(--mt24-font-size-xs);
    margin: var(--mt24-space-xs) 0 0 0;
}
.mt24-cart__coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    background: color-mix(in srgb, var(--mt24-success) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mt24-success) 40%, transparent);
    border-radius: var(--mt24-radius);
    color: var(--mt24-success);
    font-size: var(--mt24-font-size-sm);
}
.mt24-cart__coupon-applied i { margin-right: 4px; }
.mt24-cart__coupon-applied-msg {
    color: var(--mt24-text-muted);
    font-size: var(--mt24-font-size-xs);
    margin-left: var(--mt24-space-xs);
}
.mt24-cart__coupon-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mt24-text-muted);
    padding: 4px;
    line-height: 0;
}
.mt24-cart__coupon-remove:hover { color: var(--mt24-danger); }

/* ── Cart offcanvas coupon (compact: chip / toggle / inline form) ──── */
.mt24-cart-offcanvas__coupon {
    margin-bottom: var(--mt24-space-sm);
}
.mt24-cart-offcanvas__coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--mt24-success) 8%, transparent);
    border-radius: var(--mt24-radius);
    color: var(--mt24-success);
    font-size: var(--mt24-font-size-xs);
}
.mt24-cart-offcanvas__coupon-toggle {
    background: none;
    border: 1px dashed var(--mt24-border);
    border-radius: var(--mt24-radius);
    padding: 6px 10px;
    color: var(--mt24-primary);
    font-size: var(--mt24-font-size-xs);
    cursor: pointer;
    width: 100%;
    text-align: center;
}
.mt24-cart-offcanvas__coupon-toggle:hover { background: var(--mt24-bg-soft); }
.mt24-cart-offcanvas__coupon-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mt24-text-muted);
    padding: 2px;
    line-height: 0;
}
.mt24-cart-offcanvas__coupon-remove:hover { color: var(--mt24-danger); }
.mt24-cart-offcanvas__coupon-error {
    color: var(--mt24-danger);
    font-size: var(--mt24-font-size-xxs, 11px);
    margin: 4px 0 0 0;
}

/* Empty-cart card. Replaces old Bootstrap utilities so it stays on-token. */
.mt24-cart__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--mt24-space-xxl) var(--mt24-space-lg);
}
.mt24-cart__empty-icon {
    color: var(--mt24-text-muted);
    opacity: 0.35;
    margin-bottom: var(--mt24-space-md);
    line-height: 1;
}
/* Force 96px so the empty-state icon stays prominent regardless of which
   sizing class the page uses (.icon-mt24-5x = 80px is too modest here). */
.mt24-cart__empty-icon > i[class*="icon-mt24-"] {
    width: 96px;
    height: 96px;
}
.mt24-cart__empty-title {
    font-size: var(--mt24-font-size-lg);
    font-weight: 700;
    margin: 0 0 var(--mt24-space-xs) 0;
    color: var(--mt24-text);
}
.mt24-cart__empty-text {
    color: var(--mt24-text-muted);
    margin: 0 0 var(--mt24-space-lg) 0;
}

.mt24-cart__layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--mt24-space-xl);
    align-items: start;
}

/* ── Cart Table (Desktop) ── */
.mt24-cart__table-wrap {
    border: 1px solid var(--mt24-border-light);
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
}

.mt24-cart__table {
    width: 100%;
    border-collapse: collapse;
}

.mt24-cart__table thead tr {
    background: var(--mt24-bg-soft);
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-cart__table th {
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text-secondary);
    text-align: left;
}

.mt24-cart__table tbody tr {
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-cart__table tbody tr:last-child {
    border-bottom: none;
}

.mt24-cart__table td {
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    vertical-align: middle;
}

.mt24-cart__item-img {
    width: 70px;
}

.mt24-cart__item-img img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--mt24-radius);
    border: 1px solid var(--mt24-border-light);
}

.mt24-cart__item-placeholder {
    width: 64px;
    height: 64px;
    background: var(--mt24-bg-muted);
    border-radius: var(--mt24-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mt24-text-muted);
}

.mt24-cart__item-name {
    font-weight: 600;
    color: var(--mt24-text);
    text-decoration: none;
    display: block;
    line-height: 1.3;
}

.mt24-cart__item-name:hover {
    color: var(--mt24-primary);
}

.mt24-cart__item-variant {
    display: block;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-muted);
    margin-top: 2px;
}

.mt24-cart__item-sku {
    display: block;
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    margin-top: 2px;
}

.mt24-cart__item-promo {
    display: inline-flex;
    margin-top: 4px;
}

.mt24-cart__item-price {
    font-weight: 600;
    white-space: nowrap;
}

.mt24-cart__item-total {
    font-weight: 700;
    white-space: nowrap;
}

.mt24-cart__item-remove {
    width: 50px;
    text-align: center;
}

.mt24-cart__remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--mt24-radius);
    color: var(--mt24-text-muted);
    text-decoration: none;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-cart__remove-btn:hover {
    color: var(--mt24-danger);
    background: rgba(var(--mt24-danger-rgb, 239, 68, 68), 0.08);
}

/* ── Quantity Inline (reusable) ── */
.mt24-qty-inline {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    overflow: hidden;
}

.mt24-qty-inline__btn {
    width: 32px;
    height: 36px;
    border: none;
    background: var(--mt24-bg-soft);
    color: var(--mt24-text);
    font-size: var(--mt24-font-size-base);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-qty-inline__btn:hover {
    background: var(--mt24-border);
}

.mt24-qty-inline__input {
    width: 44px;
    height: 36px;
    border: none;
    border-left: 1px solid var(--mt24-border);
    border-right: 1px solid var(--mt24-border);
    text-align: center;
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text);
    background: var(--mt24-bg);
    -moz-appearance: textfield;
}

.mt24-qty-inline__input::-webkit-outer-spin-button,
.mt24-qty-inline__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Mobile Cart Cards ── */
.mt24-cart__mobile-items {
    display: none;
}

.mt24-cart__mobile-card {
    border: 1px solid var(--mt24-border-light);
    border-radius: var(--mt24-radius-lg);
    padding: var(--mt24-space-md);
    margin-bottom: var(--mt24-space-sm);
}

.mt24-cart__mobile-card-top {
    display: flex;
    gap: var(--mt24-space-sm);
}

.mt24-cart__mobile-card-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--mt24-radius);
    border: 1px solid var(--mt24-border-light);
    flex-shrink: 0;
}

.mt24-cart__mobile-card-info {
    flex: 1;
    min-width: 0;
}

.mt24-cart__mobile-card-price {
    display: block;
    font-weight: 700;
    margin-top: 4px;
    color: var(--mt24-text);
}

.mt24-cart__mobile-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--mt24-space-sm);
    padding-top: var(--mt24-space-sm);
    border-top: 1px solid var(--mt24-border-light);
}

.mt24-cart__mobile-card-total {
    font-weight: 700;
    font-size: var(--mt24-font-size-base);
}

.mt24-cart__continue {
    margin-top: var(--mt24-space-md);
}

/* ── Cart Summary ── */
.mt24-cart__summary {
    border: 1px solid var(--mt24-border-light);
    border-radius: var(--mt24-radius-lg);
    padding: var(--mt24-space-lg);
    position: sticky;
    top: calc(var(--mt24-header-height) + 20px);
}

.mt24-cart__summary-title {
    font-size: var(--mt24-font-size-lg);
    font-weight: 700;
    margin: 0 0 var(--mt24-space-md) 0;
}

.mt24-cart__summary-row {
    display: flex;
    justify-content: space-between;
    padding: var(--mt24-space-xs) 0;
    font-size: var(--mt24-font-size-sm);
}

.mt24-cart__summary-row--discount {
    color: var(--mt24-success);
}

.mt24-cart__summary-row--muted {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
}

.mt24-cart__summary-msg {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-success);
    padding: 2px 0;
}

.mt24-cart__summary-total {
    display: flex;
    justify-content: space-between;
    font-size: var(--mt24-font-size-lg);
    font-weight: 800;
}

.mt24-cart__summary-total span:last-child {
    color: var(--mt24-primary);
}

.mt24-cart__summary-saving {
    background: var(--mt24-bg-soft);
    border-radius: var(--mt24-radius);
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    margin-top: var(--mt24-space-sm);
    color: var(--mt24-success);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
}

.mt24-cart__checkout-btn {
    width: 100%;
    margin-top: var(--mt24-space-md);
}

.mt24-cart__login-hint {
    text-align: center;
    margin-top: var(--mt24-space-sm);
    margin-bottom: 0;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-muted);
}

/* ── Cross-sell ── */
.mt24-cart__cross-sell {
    margin-top: var(--mt24-space-xl);
    background: var(--mt24-bg-soft);
    margin-left: calc(var(--mt24-space-md) * -1);
    margin-right: calc(var(--mt24-space-md) * -1);
    padding: var(--mt24-space-xl) var(--mt24-space-md);
    border-radius: var(--mt24-radius-lg);
}

.mt24-cart__cross-sell .mt24-product-card {
    border: 1px solid var(--mt24-border);
    box-shadow: var(--mt24-shadow-sm);
}

.mt24-cart__cross-sell .mt24-product-card:hover {
    box-shadow: var(--mt24-shadow-md);
}

/* ── Swiper Dots (reusable) ── */
.mt24-swiper-dots.swiper-pagination {
    position: relative;
    margin-top: var(--mt24-space-md);
    bottom: auto;
}

.mt24-swiper-dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--mt24-border);
    opacity: 1;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-swiper-dots .swiper-pagination-bullet-active {
    background: var(--mt24-primary);
    width: 24px;
    border-radius: 4px;
}

.mt24-cart__cross-sell .mt24-product-card__placeholder {
    background: var(--mt24-border);
    color: var(--mt24-text-muted);
}

/* ── Carousel wrap (reusable) ── */
.mt24-carousel-wrap {
    position: relative;
}

.mt24-carousel-wrap__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: var(--mt24-bg);
    box-shadow: var(--mt24-shadow-md);
}

.mt24-carousel-wrap__nav--prev {
    left: -16px;
}

.mt24-carousel-wrap__nav--next {
    right: -16px;
}

/* ── Cart Responsive ── */
@media (max-width: 991px) {
    .mt24-cart__layout {
        grid-template-columns: 1fr;
    }

    .mt24-cart__summary {
        position: static;
    }
}

@media (max-width: 767px) {
    .mt24-cart__table-wrap {
        display: none;
    }

    .mt24-cart__mobile-items {
        display: block;
    }

    .mt24-carousel-wrap__nav {
        display: none;
    }
}

@media (max-width: 575px) {
    .mt24-cart__title {
        font-size: var(--mt24-font-size-lg);
    }
}


/* ================================================================
   AUTH PAGES (.mt24-auth)
   ================================================================ */

.mt24-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--mt24-space-xl) var(--mt24-space-md);
    background: linear-gradient(135deg, var(--mt24-bg-soft) 0%, var(--mt24-bg-muted, #f0f0f0) 100%);
}

.mt24-auth__card {
    width: 100%;
    max-width: 440px;
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border-light);
    border-top: 3px solid var(--mt24-primary);
    border-radius: var(--mt24-radius-xl, 16px);
    padding: var(--mt24-space-xl) var(--mt24-space-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.mt24-auth__card--wide {
    max-width: 560px;
}

.mt24-auth__logo {
    text-align: center;
    margin-bottom: var(--mt24-space-lg);
}

.mt24-auth__logo img {
    max-height: 48px;
    width: auto;
}

.mt24-auth__store-name {
    font-size: var(--mt24-font-size-xl);
    font-weight: 800;
    color: var(--mt24-text);
    text-decoration: none;
}

.mt24-auth__title {
    font-size: var(--mt24-font-size-xl);
    font-weight: 700;
    text-align: center;
    margin: 0 0 var(--mt24-space-xs) 0;
}

.mt24-auth__subtitle {
    text-align: center;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-muted);
    margin: 0 0 var(--mt24-space-lg) 0;
}

.mt24-auth__field {
    margin-bottom: var(--mt24-space-md);
}

.mt24-auth__label {
    display: block;
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text);
    margin-bottom: 6px;
}

.mt24-auth__label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.mt24-auth__required {
    color: var(--mt24-danger);
}

.mt24-auth__forgot {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-primary);
    text-decoration: none;
}

.mt24-auth__forgot:hover {
    text-decoration: underline;
}

.mt24-auth__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.mt24-auth__input-icon {
    position: absolute;
    left: 12px;
    color: var(--mt24-text-muted);
    font-size: 1em;
    pointer-events: none;
}

.mt24-auth__input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
    background: var(--mt24-bg);
    transition: border-color var(--mt24-duration-fast) var(--mt24-ease), box-shadow var(--mt24-duration-fast) var(--mt24-ease);
    outline: none;
}

.mt24-auth__input-wrap .mt24-auth__input {
    padding-left: 38px;
}

.mt24-auth__input:focus {
    border-color: var(--mt24-primary);
    box-shadow: 0 0 0 3px rgba(var(--mt24-primary-rgb, 59, 130, 246), 0.1);
}

.mt24-auth__input::placeholder {
    color: var(--mt24-text-muted);
    opacity: 0.6;
}

.mt24-auth__select {
    appearance: auto;
    cursor: pointer;
}

.mt24-auth__toggle-pass {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--mt24-text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

.mt24-auth__toggle-pass:hover {
    color: var(--mt24-text);
}

.mt24-auth__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mt24-space-md);
}

.mt24-auth__submit {
    width: 100%;
    margin-top: var(--mt24-space-sm);
    margin-bottom: var(--mt24-space-md);
}

.mt24-auth__switch {
    text-align: center;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-muted);
    margin: 0;
}

.mt24-auth__switch a {
    color: var(--mt24-primary);
    font-weight: 600;
    text-decoration: none;
}

.mt24-auth__switch a:hover {
    text-decoration: underline;
}

@media (max-width: 575px) {
    .mt24-auth__card {
        padding: var(--mt24-space-lg) var(--mt24-space-md);
        border: none;
        box-shadow: none;
        border-radius: 0;
    }

    .mt24-auth__row {
        grid-template-columns: 1fr;
    }

    .mt24-auth {
        min-height: auto;
        padding: var(--mt24-space-md) 0;
    }
}


/* ── Account sidebar extras ── */

.mt24-account-sidebar__inner {
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
}

.mt24-account-sidebar__profile {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-md);
    padding: var(--mt24-space-lg);
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-account-sidebar__toggle {
    display: none;
    width: 100%;
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    font-weight: 600;
    font-size: var(--mt24-font-size-sm);
    gap: var(--mt24-space-sm);
    cursor: pointer;
    text-align: left;
}

.mt24-account-sidebar__link--active {
    background: rgba(var(--mt24-primary-rgb), 0.08);
    color: var(--mt24-primary);
    font-weight: 600;
}

.mt24-account-sidebar__link--danger {
    color: var(--mt24-danger);
}

.mt24-account-sidebar__link--danger:hover {
    background: rgba(239, 68, 68, 0.06);
    color: var(--mt24-danger);
}

.mt24-account-sidebar__toggle i:last-child {
    margin-left: auto;
    transition: transform var(--mt24-duration) var(--mt24-ease);
}

.mt24-account-sidebar__link i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.mt24-account-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@media (max-width: 991px) {
    .mt24-account-sidebar__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mt24-account-sidebar__inner {
        display: none;
        margin-top: var(--mt24-space-xs);
    }

    .mt24-account-sidebar__inner.is-open {
        display: block;
    }
}


/* ================================================================
   ACCOUNT PAGES (.mt24-account)
   ================================================================ */

.mt24-account {
    max-width: var(--mt24-container-max);
    margin: 0 auto;
    padding: var(--mt24-space-lg) var(--mt24-space-md);
}

.mt24-account__title {
    font-size: var(--mt24-font-size-xl);
    font-weight: 700;
    margin: 0 0 var(--mt24-space-lg) 0;
}

/* ── Stats Cards (Dashboard) ── */
.mt24-account__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mt24-space-md);
    margin-bottom: var(--mt24-space-lg);
}

.mt24-account__stat {
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg);
    padding: var(--mt24-space-lg);
    text-align: center;
    box-shadow: var(--mt24-shadow-sm);
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-account__stat:hover {
    box-shadow: var(--mt24-shadow-md);
    transform: translateY(-2px);
    border-color: var(--mt24-primary);
}

.mt24-account__stat-value {
    font-size: var(--mt24-font-size-3xl, 2rem);
    font-weight: 700;
    color: var(--mt24-primary);
    line-height: 1;
}

.mt24-account__stat-label {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    margin-top: var(--mt24-space-xs);
}

.mt24-account__stat-icon {
    font-size: 1.5rem;
    color: var(--mt24-text-muted);
    margin-bottom: var(--mt24-space-sm);
    opacity: 0.5;
}

/* ── Quick Links (Dashboard) ── */
.mt24-account__quick-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mt24-space-md);
    margin-bottom: var(--mt24-space-lg);
}

.mt24-account__quick-link {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-md);
    padding: var(--mt24-space-md);
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg);
    text-decoration: none;
    color: var(--mt24-text);
    box-shadow: var(--mt24-shadow-sm);
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-account__quick-link:hover {
    border-color: var(--mt24-primary);
    box-shadow: var(--mt24-shadow-md);
    color: var(--mt24-text);
    transform: translateY(-2px);
}

.mt24-account__quick-link-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mt24-radius);
    background: rgba(var(--mt24-primary-rgb, 59, 130, 246), 0.08);
    color: var(--mt24-primary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.mt24-account__quick-link-text {
    font-weight: 600;
    font-size: var(--mt24-font-size-sm);
}

.mt24-account__quick-link-desc {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    margin-top: 2px;
}

/* ── Card Section (reusable for account pages) ── */
.mt24-account__card {
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    box-shadow: var(--mt24-shadow-sm);
}

.mt24-account__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mt24-space-md) var(--mt24-space-lg);
    border-bottom: 1px solid var(--mt24-border-light);
}
/* When the header doubles as a collapse toggle (e.g. password card on profile) */
.mt24-account__card-header--toggle {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--mt24-border-light);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
.mt24-account__card-header-meta {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
}
.mt24-account__card-chevron {
    transition: transform var(--mt24-duration-fast) var(--mt24-ease);
}
.mt24-account__card-chevron--open {
    transform: rotate(180deg);
}

.mt24-account__card-title {
    font-size: var(--mt24-font-size-base);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
}

.mt24-account__card-body {
    padding: var(--mt24-space-lg);
}
/* Tables that fill their card with no padding */
.mt24-account__card-body--flush {
    padding: 0;
}
/* Mobile order card — total color matches body text (replaces inline color) */
.mt24-account__mobile-card-total {
    color: var(--mt24-text);
}
/* ── Generic dialog modal (.mt24-modal) ──────────────────────────────
   Centered card with backdrop. Used for forms (addresses, etc.) where
   the user needs more vertical space than .mt24-confirm-modal. Driven
   by Alpine x-data with a `modalOpen` flag — no Bootstrap dependency. */
.mt24-modal {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mt24-space-md);
    overflow-y: auto;
}
.mt24-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.mt24-modal__dialog {
    position: relative;
    background: var(--mt24-bg);
    border-radius: var(--mt24-radius-lg);
    max-width: 640px;
    width: 100%;
    box-shadow: var(--mt24-shadow-lg);
    margin: auto;
    max-height: calc(100vh - var(--mt24-space-2xl));
    display: flex;
    flex-direction: column;
}
.mt24-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mt24-space-md) var(--mt24-space-lg);
    border-bottom: 1px solid var(--mt24-border-light);
    flex-shrink: 0;
}
.mt24-modal__title {
    font-size: var(--mt24-font-size-lg);
    font-weight: 700;
    margin: 0;
    color: var(--mt24-text);
}
.mt24-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mt24-text-muted);
    padding: 6px;
    line-height: 0;
    border-radius: var(--mt24-radius);
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}
.mt24-modal__close:hover {
    background: var(--mt24-bg-soft);
    color: var(--mt24-text);
}
.mt24-modal__body {
    padding: var(--mt24-space-lg);
    overflow-y: auto;
    flex: 1 1 auto;
}
.mt24-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-md) var(--mt24-space-lg);
    border-top: 1px solid var(--mt24-border-light);
    flex-shrink: 0;
}

/* ── Reusable confirm modal (.mt24-confirm-modal) ───────────────────
   Drop-in replacement for native confirm() — same shape across the
   storefront: backdrop + dialog + icon header + message + actions row.
   Driven by Alpine x-data with `deleteOpen` / `deleteId` state. */
.mt24-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mt24-space-md);
}
.mt24-confirm-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.mt24-confirm-modal__dialog {
    position: relative;
    background: var(--mt24-bg);
    border-radius: var(--mt24-radius-lg);
    padding: var(--mt24-space-lg);
    max-width: 440px;
    width: 100%;
    box-shadow: var(--mt24-shadow-lg);
}
.mt24-confirm-modal__header {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    margin-bottom: var(--mt24-space-sm);
}
.mt24-confirm-modal__title {
    font-size: var(--mt24-font-size-lg);
    font-weight: 700;
    margin: 0;
    color: var(--mt24-text);
}
.mt24-confirm-modal__entity {
    color: var(--mt24-text-muted);
    font-weight: 500;
}
.mt24-confirm-modal__message {
    color: var(--mt24-text-secondary);
    font-size: var(--mt24-font-size-sm);
    margin: 0 0 var(--mt24-space-md) 0;
    line-height: 1.5;
}
.mt24-confirm-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--mt24-space-sm);
}

/* ── Password strength meter (mt24PasswordStrength Alpine factory) ──
   Bar + label below a password input. The fill width / color come from
   data attributes set by the Alpine getter. */
.mt24-pwd-meter {
    height: 4px;
    background: var(--mt24-border);
    border-radius: var(--mt24-radius-full);
    overflow: hidden;
    margin-top: 6px;
}
.mt24-pwd-meter__bar {
    height: 100%;
    background: var(--mt24-danger);
    transition: width var(--mt24-duration-fast) var(--mt24-ease), background var(--mt24-duration-fast) var(--mt24-ease);
    border-radius: var(--mt24-radius-full);
}
.mt24-pwd-meter__bar--0,
.mt24-pwd-meter__bar--1 { background: var(--mt24-danger); }
.mt24-pwd-meter__bar--2 { background: var(--mt24-warning); }
.mt24-pwd-meter__bar--3 { background: var(--mt24-primary); }
.mt24-pwd-meter__bar--4 { background: var(--mt24-success); }
.mt24-pwd-meter__label {
    display: block;
    font-size: var(--mt24-font-size-xs);
    margin-top: 4px;
    line-height: 1.2;
}

/* ── Orders filter bar (/account/orders) ────────────────────────────
   Compact form above the table; collapses to one column per row on
   mobile so each input keeps tap-friendly height. */
.mt24-orders-filters {
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border-light);
    border-radius: var(--mt24-radius-lg);
    padding: var(--mt24-space-md);
    margin-bottom: var(--mt24-space-md);
}
.mt24-orders-filters__row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--mt24-space-sm);
    align-items: end;
}
@media (max-width: 768px) {
    .mt24-orders-filters__row {
        grid-template-columns: 1fr 1fr;
    }
    .mt24-orders-filters__field--grow {
        grid-column: 1 / -1;
    }
}
@media (max-width: 480px) {
    .mt24-orders-filters__row {
        grid-template-columns: 1fr;
    }
}
.mt24-orders-filters__field { min-width: 0; }
.mt24-orders-filters__actions {
    display: flex;
    gap: var(--mt24-space-sm);
    margin-top: var(--mt24-space-sm);
    flex-wrap: wrap;
}

/* ── Address management (/account/addresses) ─────────────────────────
   Replaces 32 inline styles with token-driven classes. */
.mt24-address-list__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mt24-space-md);
}
.mt24-address-list__count {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
}
.mt24-address-list__empty {
    text-align: center;
    padding: var(--mt24-space-2xl) var(--mt24-space-lg);
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border-light);
    border-radius: var(--mt24-radius-lg);
    box-shadow: var(--mt24-shadow);
}
.mt24-address-list__empty-icon {
    color: var(--mt24-text-muted);
    margin-bottom: var(--mt24-space-md);
}
.mt24-address-list__empty-title {
    margin-top: 0;
    margin-bottom: var(--mt24-space-xs);
}
.mt24-address-list__empty-text {
    color: var(--mt24-text-muted);
    margin-bottom: var(--mt24-space-md);
}

.mt24-address-card {
    padding: var(--mt24-space-md);
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border-light);
    border-radius: var(--mt24-radius-lg);
    box-shadow: var(--mt24-shadow);
    height: 100%;
    position: relative;
    transition: box-shadow var(--mt24-duration-fast) var(--mt24-ease);
}
.mt24-address-card:hover { box-shadow: var(--mt24-shadow-md); }
.mt24-address-card--default {
    border: 2px solid var(--mt24-primary);
}
.mt24-address-card__default-badge {
    position: absolute;
    top: -10px;
    right: 12px;
}
.mt24-address-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--mt24-space-sm);
    gap: var(--mt24-space-sm);
}
.mt24-address-card__title {
    font-size: var(--mt24-font-size-base);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mt24-address-card__title i { color: var(--mt24-primary); }
.mt24-address-card__menu-btn {
    padding: 4px;
    line-height: 1;
}
.mt24-address-card__menu-dots {
    font-size: 18px;
    line-height: 1;
}
.mt24-address-card p {
    margin: 0 0 4px 0;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
}
.mt24-address-card__contact {
    font-weight: 600;
    color: var(--mt24-text) !important;
}
.mt24-address-card__line2,
.mt24-address-card__phone {
    font-size: var(--mt24-font-size-xs) !important;
    color: var(--mt24-text-muted) !important;
}
.mt24-address-card__phone {
    margin-top: 4px;
}

/* Form labels (small, semibold) used in modal forms */
.mt24-form-label {
    display: block;
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text);
    margin-bottom: 6px;
}
.mt24-form-label__required {
    color: var(--mt24-danger);
    margin-left: 2px;
}

/* Native checkbox row (label + checkbox) — replaces Bootstrap form-check */
.mt24-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
    user-select: none;
}
.mt24-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--mt24-primary);
    cursor: pointer;
}

/* Order detail summary footer — semantic + token-driven (replaces inline styles) */
.mt24-account__order-total-row td {
    border-top: 2px solid var(--mt24-border);
}
.mt24-account__order-total-label {
    font-size: var(--mt24-font-size-lg);
}
.mt24-account__order-total-value {
    font-size: var(--mt24-font-size-lg);
    color: var(--mt24-primary);
}
.mt24-account__order-saved {
    border: none !important;
}

/* ── Table (Orders, Detail) ── */
.mt24-account__table-wrap {
    overflow-x: auto;
}

.mt24-account__table {
    width: 100%;
    border-collapse: collapse;
}

.mt24-account__table thead tr {
    background: var(--mt24-bg-soft);
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-account__table th {
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text-secondary);
    text-align: left;
    white-space: nowrap;
}

.mt24-account__table td {
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    vertical-align: middle;
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-account__table tbody tr:last-child td {
    border-bottom: none;
}

.mt24-account__table tbody tr:hover {
    background: var(--mt24-bg-soft);
}

.mt24-account__table tfoot td {
    padding: var(--mt24-space-xs) var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
}

/* ── Mobile Cards (Orders list) ── */
.mt24-account__mobile-cards {
    display: none;
}

.mt24-account__mobile-card {
    display: block;
    border: 1px solid var(--mt24-border-light);
    border-radius: var(--mt24-radius-lg);
    padding: var(--mt24-space-md);
    margin-bottom: var(--mt24-space-sm);
    text-decoration: none;
    color: var(--mt24-text);
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-account__mobile-card:hover {
    border-color: var(--mt24-primary);
    box-shadow: var(--mt24-shadow-sm);
    color: var(--mt24-text);
}

.mt24-account__mobile-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mt24-account__mobile-card-row + .mt24-account__mobile-card-row {
    margin-top: var(--mt24-space-xs);
}

/* ── Form Fields (Profile, Addresses) ── */
.mt24-account__form-label {
    display: block;
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text);
    margin-bottom: 6px;
}

.mt24-account__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mt24-space-md);
}

/* ── Address Cards ── */
.mt24-account__address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--mt24-space-md);
}

.mt24-account__address-card {
    border: 1px solid var(--mt24-border-light);
    border-radius: var(--mt24-radius-lg);
    padding: var(--mt24-space-md);
    position: relative;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-account__address-card:hover {
    box-shadow: var(--mt24-shadow-sm);
}

.mt24-account__address-card--default {
    border-color: var(--mt24-primary);
    border-width: 2px;
}

.mt24-account__address-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: var(--mt24-space-sm);
}

.mt24-account__address-label {
    font-weight: 600;
}

.mt24-account__address-text {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
    line-height: 1.5;
}

/* ── Empty States ── */
.mt24-account__empty {
    text-align: center;
    padding: var(--mt24-space-3xl) var(--mt24-space-md);
    color: var(--mt24-text-muted);
}

.mt24-account__empty-icon {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: var(--mt24-space-md);
}

.mt24-account__empty-title {
    font-size: var(--mt24-font-size-lg);
    font-weight: 600;
    color: var(--mt24-text);
    margin-bottom: var(--mt24-space-xs);
}

.mt24-account__empty-text {
    font-size: var(--mt24-font-size-sm);
    margin-bottom: var(--mt24-space-md);
}

/* ── Order Detail Header ── */
.mt24-account__order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mt24-space-md);
    margin-bottom: var(--mt24-space-lg);
}

.mt24-account__order-number {
    font-size: var(--mt24-font-size-lg);
    font-weight: 700;
}

.mt24-account__order-meta {
    display: flex;
    gap: var(--mt24-space-lg);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-secondary);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .mt24-account__quick-links {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .mt24-account__stats {
        grid-template-columns: 1fr;
    }

    .mt24-account__table-wrap {
        display: none;
    }

    .mt24-account__mobile-cards {
        display: block;
    }

    .mt24-account__form-row {
        grid-template-columns: 1fr;
    }

    .mt24-account__order-header {
        flex-direction: column;
        align-items: start;
    }
}

@media (max-width: 575px) {
    .mt24-account__address-grid {
        grid-template-columns: 1fr;
    }

    .mt24-account__quick-links {
        grid-template-columns: 1fr;
    }
}


/* ── Progress bar ── */

.mt24-progress {
    width: 100%;
    height: 8px;
    background: var(--mt24-bg-muted);
    border-radius: var(--mt24-radius-full);
    overflow: hidden;
}

.mt24-progress--sm {
    height: 4px;
}

.mt24-progress__bar {
    height: 100%;
    background: var(--mt24-primary);
    border-radius: var(--mt24-radius-full);
    transition: width var(--mt24-duration) var(--mt24-ease);
}


/* ── Price extras ── */

.mt24-price--lg {
    font-size: var(--mt24-font-size-lg);
}


/* ── Badge extras ── */

.mt24-badge--info {
    background: #3B82F6;
    color: white;
}

/* Urgencia por pocas unidades — ámbar, distinto del rojo de descuento. */
.mt24-badge--urgency {
    background: #F59E0B;
    color: #1f2937;
    font-weight: 700;
}
.mt24-badge--urgency .icon-mt24-fire {
    font-size: 0.9em;
}


/* ── Button extras ── */

.mt24-btn--disabled,
.mt24-btn[disabled] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}


/* ── Cart layout ── */

.mt24-cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--mt24-space-xl);
    align-items: start;
}

@media (max-width: 991px) {
    .mt24-cart-layout {
        grid-template-columns: 1fr;
    }
}


/* ── Contact grid ── */

.mt24-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--mt24-space-lg);
}


/* ── Blog content ── */

.mt24-blog-content {
    font-size: var(--mt24-font-size-base);
    line-height: 1.8;
    color: var(--mt24-text);
}

.mt24-blog-content h2,
.mt24-blog-content h3 {
    margin-top: var(--mt24-space-xl);
    margin-bottom: var(--mt24-space-md);
}

.mt24-blog-content p {
    margin-bottom: var(--mt24-space-md);
}

.mt24-blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mt24-radius);
    margin: var(--mt24-space-md) 0;
}


/* ── Swiper navigation extras ── */

.mt24-swiper-next,
.mt24-swiper-prev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--mt24-radius-full);
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    color: var(--mt24-text);
    cursor: pointer;
    box-shadow: var(--mt24-shadow);
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
    z-index: 10;
}

.mt24-swiper-next:hover,
.mt24-swiper-prev:hover {
    background: var(--mt24-primary);
    border-color: var(--mt24-primary);
    color: var(--mt24-text-inverse);
}


/* ── Star rating extras ── */

.mt24-star {
    color: var(--mt24-warning);
    font-size: 0.875rem;
}

.mt24-star--filled {
    color: var(--mt24-warning);
}

.mt24-star--half {
    color: var(--mt24-warning);
}

.mt24-star--empty {
    color: var(--mt24-border);
}


/* ── Loader ── */

.mt24-loader {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--mt24-border);
    border-top-color: var(--mt24-primary);
    border-radius: 50%;
    animation: mt24-spin 0.6s linear infinite;
}

@keyframes mt24-spin {
    to { transform: rotate(360deg); }
}


/* ── Filters extras ── */

.mt24-filters__range-input {
    width: 80px;
    padding: 6px var(--mt24-space-sm);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    font-size: var(--mt24-font-size-sm);
    text-align: center;
    outline: none;
}

.mt24-filters__range-input:focus {
    border-color: var(--mt24-primary);
}

.mt24-filters__range-separator {
    color: var(--mt24-text-muted);
    font-size: var(--mt24-font-size-sm);
    padding: 0 var(--mt24-space-xs);
}

.mt24-filters__range-values {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-xs);
    margin-top: var(--mt24-space-sm);
}


/* ── WhatsApp popup extras ── */

.mt24-whatsapp__popup-arrow {
    color: var(--mt24-text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-whatsapp__popup-item:hover .mt24-whatsapp__popup-arrow {
    opacity: 1;
    color: #25D366;
}

.mt24-whatsapp__popup-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mt24-radius-full);
    background: #25D366;
    color: white;
    font-size: 1.25rem;
}

.mt24-whatsapp__popup-info {
    flex: 1;
}

.mt24-whatsapp__popup-item {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-sm);
    text-decoration: none;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
    border-radius: var(--mt24-radius);
}

.mt24-whatsapp__popup-item:hover {
    background: var(--mt24-bg-soft);
}

.mt24-whatsapp__popup-label {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-secondary);
}

.mt24-whatsapp__popup-number {
    font-weight: 600;
    color: var(--mt24-text);
    font-size: var(--mt24-font-size-sm);
}

.mt24-whatsapp__popup-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ================================================================
   25. UIBLOCK BRIDGE — Style integration for admin-rendered blocks
   UIBlocks generate <section class="ui-block ui-block--{type}">
   with Bootstrap classes. This CSS makes them inherit MT24 tokens.
   ================================================================ */

/* Base section spacing */
.ui-block {
    padding: var(--mt24-space-xl) 0;
}

/* Use MT24 container width */
.ui-block > .container {
    max-width: var(--mt24-container-max);
}

/* UIBlock headings inherit MT24 typography */
.ui-block h3,
.ui-block h4 {
    font-family: var(--mt24-font-heading);
    font-weight: 700;
    color: var(--mt24-text);
}

/* UIBlock section titles */
.ui-block h3 {
    font-size: var(--mt24-font-size-2xl);
    /*margin-bottom: var(--mt24-space-lg);*/
    margin-bottom: 0;
}

/* UIBlock cards inherit MT24 shadows and radius */
.ui-block .card {
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    transition: all var(--mt24-duration) var(--mt24-ease);
}

.ui-block .card:hover {
    box-shadow: var(--mt24-shadow-md);
    transform: translateY(-2px);
}

.ui-block .card-img-top {
    height: 220px;
    object-fit: cover;
}

/* UIBlock product card titles — line clamp */
.ui-block .card-title {
    font-family: var(--mt24-font-heading);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}

/* UIBlock prices */
.ui-block .text-primary {
    color: var(--mt24-primary) !important;
}

/* UIBlock buttons */
.ui-block .btn-primary {
    background: var(--mt24-primary);
    border-color: var(--mt24-primary);
    border-radius: var(--mt24-radius);
}

.ui-block .btn-primary:hover {
    background: var(--mt24-primary-hover);
    border-color: var(--mt24-primary-hover);
}

.ui-block .btn-outline-primary {
    color: var(--mt24-primary);
    border-color: var(--mt24-primary);
    border-radius: var(--mt24-radius);
}

.ui-block .btn-outline-primary:hover {
    background: var(--mt24-primary);
    color: var(--mt24-primary-contrast, #FFFFFF);
}

/* UIBlock badges */
.ui-block .badge {
    border-radius: var(--mt24-radius-full);
}

/* UIBlock forms/inputs */
.ui-block .form-control {
    border-radius: var(--mt24-radius);
    border-color: var(--mt24-border);
}

.ui-block .form-control:focus {
    border-color: var(--mt24-primary);
    box-shadow: 0 0 0 3px rgba(var(--mt24-primary-rgb), 0.15);
}

/* UIBlock carousels — better scroll snap */
.ui-block .row.flex-nowrap {
    gap: 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ui-block .row.flex-nowrap::-webkit-scrollbar {
    display: none;
}

/* UIBlock newsletter */
.ui-block--newsletter {
    background: var(--mt24-bg-soft);
    border-radius: var(--mt24-radius-lg);
}

/* UIBlock trust badges */
.ui-block--trust_badges .text-center {
    padding: var(--mt24-space-md);
}

/* UIBlock promo banner */
.ui-block--promo_banner .rounded {
    border-radius: var(--mt24-radius-lg) !important;
}

/* UIBlock announcement bar — full width, no padding */
.ui-block--announcement_bar {
    padding: 0;
}

/* Responsive: smaller section padding on mobile */
@media (max-width: 767px) {
    .ui-block {
        padding: var(--mt24-space-xl) 0;
    }
}

/* ================================================================
   CATEGORY CARDS (.mt24-cat-card)
   Templates: --card, --circle, --banner, --minimal, --icon-box, --pill
   ================================================================ */

/* Base */
.mt24-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--mt24-text);
    transition: all var(--mt24-duration) var(--mt24-ease);
    text-align: center;
    height: 100%;
}

.mt24-cat-card:hover {
    color: var(--mt24-primary);
}

.mt24-cat-card__name {
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    margin: 0;
    transition: color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-cat-card__count {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    margin-top: 2px;
}

/* -- Card template -- */
.mt24-cat-card--card {
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    padding: 0;
}
.mt24-cat-card--card:hover {
    box-shadow: var(--mt24-shadow-md);
    transform: translateY(-3px);
    border-color: var(--mt24-primary);
}
.mt24-cat-card--card .mt24-cat-card__visual {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--mt24-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mt24-cat-card--card .mt24-cat-card__visual img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--mt24-duration-slow) var(--mt24-ease);
    transform: scale(0.9);
}
.mt24-cat-card--card:hover .mt24-cat-card__visual img {
    transform: scale(0.85);
}
.mt24-cat-card--card .mt24-cat-card__visual i {
    font-size: 2.5rem;
    color: var(--mt24-primary);
}
.mt24-cat-card--card .mt24-cat-card__placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    background: var(--mt24-bg-muted);
}
.mt24-cat-card--card .mt24-cat-card__placeholder i { font-size: 2rem; color: var(--mt24-text-muted); }
.mt24-cat-card--card .mt24-cat-card__body {
    padding: var(--mt24-space-md);
}

/* -- Circle template -- */
.mt24-cat-card--circle {
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-md);
}
.mt24-cat-card--circle:hover { transform: translateY(-3px); }
.mt24-cat-card__visual--circle {
    width: 100px; height: 100px;
    border-radius: var(--mt24-radius-full);
    overflow: hidden;
    background: var(--mt24-bg-soft);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--mt24-border);
    transition: border-color var(--mt24-duration) var(--mt24-ease), box-shadow var(--mt24-duration) var(--mt24-ease);
}
.mt24-cat-card--circle:hover .mt24-cat-card__visual--circle {
    border-color: var(--mt24-primary);
    box-shadow: 0 0 0 4px rgba(var(--mt24-primary-rgb), 0.15);
}
.mt24-cat-card__visual--circle img { width: 100%; height: 100%; object-fit: cover; }
.mt24-cat-card__visual--circle i { font-size: 2rem; color: var(--mt24-primary); }

/* -- Banner template -- */
.mt24-cat-card--banner {
    position: relative;
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    height: 180px;
}
.mt24-cat-card--banner .mt24-cat-card__bg {
    position: absolute; inset: 0;
    background: var(--mt24-bg-muted);
}
.mt24-cat-card--banner .mt24-cat-card__bg img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--mt24-duration-slow) var(--mt24-ease); }
.mt24-cat-card--banner:hover .mt24-cat-card__bg img { transform: scale(1.08); }
.mt24-cat-card--banner .mt24-cat-card__overlay {
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: var(--mt24-space-md);
    background: linear-gradient(transparent 40%, rgba(0,0,0,0.7));
}
.mt24-cat-card--banner .mt24-cat-card__name { color: white; font-size: var(--mt24-font-size-base); }
.mt24-cat-card--banner .mt24-cat-card__count { color: rgba(255,255,255,0.8); }

/* -- Minimal template -- */
.mt24-cat-card--minimal {
    flex-direction: row;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    border-radius: var(--mt24-radius);
    text-align: left;
    align-items: center;
}
.mt24-cat-card--minimal:hover { background: var(--mt24-bg-soft); }
.mt24-cat-card__visual--inline { font-size: 1.3rem; flex-shrink: 0; }
.mt24-cat-card__visual--inline img { width: 32px; height: 32px; border-radius: var(--mt24-radius); object-fit: cover; }

/* -- Icon-box template -- */
.mt24-cat-card--icon-box {
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-lg);
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg);
}
.mt24-cat-card--icon-box:hover {
    border-color: var(--mt24-primary);
    box-shadow: var(--mt24-shadow-md);
    transform: translateY(-3px);
}
.mt24-cat-card__icon-wrap {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: var(--mt24-primary-light);
    border-radius: var(--mt24-radius-lg);
    margin-bottom: var(--mt24-space-xs);
}
.mt24-cat-card__icon-wrap i { font-size: 1.5rem; color: var(--mt24-primary); }
.mt24-cat-card__icon-wrap img { width: 36px; height: 36px; object-fit: contain; }

/* -- Pill template -- */
.mt24-cat-card--pill {
    flex-direction: row;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-full);
    white-space: nowrap;
    text-align: left;
    height: auto;
}
.mt24-cat-card--pill:hover {
    border-color: var(--mt24-primary);
    background: var(--mt24-primary-light);
}
.mt24-cat-card__visual--pill { flex-shrink: 0; }
.mt24-cat-card__visual--pill img { width: 28px; height: 28px; border-radius: var(--mt24-radius-full); object-fit: cover; }
.mt24-cat-card__visual--pill i { font-size: 1rem; color: var(--mt24-primary); }

/* Swiper nav for categories */
/* ── Carousel arrow positions ── */

/* Default: sides (centered vertically) */
.mt24-carousel-arrows--sides .mt24-swiper-prev,
.mt24-carousel-arrows--sides .mt24-swiper-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.mt24-carousel-arrows--sides .mt24-swiper-prev { left: -16px; }
.mt24-carousel-arrows--sides .mt24-swiper-next { right: -16px; }

@media (max-width: 767px) {
    .mt24-carousel-arrows--sides .mt24-swiper-prev { left: 4px; }
    .mt24-carousel-arrows--sides .mt24-swiper-next { right: 4px; }
}

/* Top-right: arrows are placed inline in the section header via PHP, no extra CSS needed */

/* Bottom-right: both arrows grouped at bottom right */
.mt24-carousel-arrows--bottom-right .mt24-swiper-prev,
.mt24-carousel-arrows--bottom-right .mt24-swiper-next {
    position: relative;
    display: inline-flex;
    margin-top: var(--mt24-space-md);
}
.mt24-carousel-arrows--bottom-right {
    text-align: right;
}
.mt24-carousel-arrows--bottom-right .mt24-swiper-prev {
    margin-right: var(--mt24-space-xs);
}


/* ================================================================
   PRODUCT SHOWCASE CARDS (.mt24-prod-card)
   Unified product card for product_carousel and product_grid UIBlocks.
   Templates: card (default), minimal, overlay, horizontal, badge, compact
   ================================================================ */

.mt24-prod-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--mt24-bg);
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    transition: all var(--mt24-duration) var(--mt24-ease);
    text-decoration: none;
    color: var(--mt24-text);
}

/* Image container */
.mt24-prod-card__image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--mt24-bg-soft, #f8f9fa);
}
.mt24-prod-card__image a { display: block; width: 100%; height: 100%; }
.mt24-prod-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Placeholder */
.mt24-prod-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--mt24-bg-soft, #f0f0f0);
}
.mt24-prod-card__placeholder i {
    font-size: 2.5rem;
    color: var(--mt24-text-muted);
}

/* Badges */
.mt24-prod-card__badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

/* Hover actions (wishlist, quick view) */
.mt24-prod-card__actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transform: translateX(8px);
    transition: all var(--mt24-duration) var(--mt24-ease);
    z-index: 2;
}
.mt24-prod-card:hover .mt24-prod-card__actions {
    opacity: 1;
    transform: translateX(0);
}
.mt24-prod-card__action-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    color: var(--mt24-text-muted);
    cursor: pointer;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
    font-size: 1rem;
    padding: 0;
}
.mt24-prod-card__action-btn:hover,
.mt24-prod-card__action-btn.is-active {
    background: var(--mt24-primary);
    color: #fff;
    border-color: var(--mt24-primary);
}

/* Body */
.mt24-prod-card__body {
    padding: var(--mt24-space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.mt24-prod-card__brand {
    font-size: var(--mt24-font-size-xs);
    font-weight: 600;
    color: var(--mt24-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    margin-bottom: 2px;
}
.mt24-prod-card__category {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}
/* En la variante overlay el texto va sobre la imagen (blanco). */
.mt24-prod-card--overlay .mt24-prod-card__brand,
.mt24-prod-card--overlay .mt24-prod-card__category {
    color: #fff;
    opacity: 0.85;
}
.mt24-prod-card__title {
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
    line-height: 1.2;
    margin: 0 0 8px;
}
.mt24-prod-card__title a {
    color: inherit;
    text-decoration: none;
}
.mt24-prod-card__title a:hover {
    color: var(--mt24-primary);
}
.mt24-prod-card__price {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.mt24-prod-card__btn {
    margin-top: var(--mt24-space-sm);
}
.mt24-prod-card__btn i {
    width: 20px;
    height: 20px;
}


/* ─── card template (default) ─── */
.mt24-prod-card--card {
    border: 1px solid var(--mt24-border);
}
.mt24-prod-card--card:hover {
    box-shadow: var(--mt24-shadow-md);
    transform: translateY(-3px);
}
.mt24-prod-card--card:hover .mt24-prod-card__image img {
    transform: scale(1.06);
}


/* ─── minimal template ─── */
.mt24-prod-card--minimal {
    background: transparent;
    border: none;
    text-align: center;
}
.mt24-prod-card--minimal .mt24-prod-card__image {
    border-radius: var(--mt24-radius-md);
}
.mt24-prod-card--minimal .mt24-prod-card__body {
    padding: var(--mt24-space-sm) 0;
    align-items: center;
}
.mt24-prod-card--minimal .mt24-prod-card__title {
    font-weight: 500;
}
.mt24-prod-card--minimal .mt24-prod-card__price {
    justify-content: center;
}


/* ─── overlay template ─── */
.mt24-prod-card--overlay {
    border-radius: var(--mt24-radius-lg);
    min-height: 280px;
}
.mt24-prod-card--overlay .mt24-prod-card__image {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}
.mt24-prod-card--overlay .mt24-prod-card__overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--mt24-space-lg) var(--mt24-space-md) var(--mt24-space-md);
    background: linear-gradient(transparent 0%, rgba(0,0,0,0.65) 100%);
    color: #fff;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.mt24-prod-card--overlay .mt24-prod-card__title {
    color: #fff;
    font-size: var(--mt24-font-size-base);
}
.mt24-prod-card--overlay .mt24-prod-card__title a {
    color: #fff;
}
.mt24-prod-card--overlay .mt24-price--current {
    color: #fff;
    font-weight: 700;
}
.mt24-prod-card--overlay:hover .mt24-prod-card__image img {
    transform: scale(1.08);
}


/* ─── horizontal template ─── */
.mt24-prod-card--horizontal {
    flex-direction: row;
    border: 1px solid var(--mt24-border);
}
.mt24-prod-card--horizontal .mt24-prod-card__image {
    width: 140px;
    min-width: 140px;
    aspect-ratio: auto;
    height: auto;
}
.mt24-prod-card--horizontal .mt24-prod-card__body {
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    justify-content: center;
}
.mt24-prod-card--horizontal .mt24-prod-card__badges {
    top: 4px;
    left: 4px;
}
.mt24-prod-card--horizontal:hover {
    box-shadow: var(--mt24-shadow-sm);
}
@media (max-width: 575.98px) {
    .mt24-prod-card--horizontal .mt24-prod-card__image {
        width: 110px;
        min-width: 110px;
    }
}


/* ─── badge template ─── */
.mt24-prod-card--badge {
    border: 1px solid var(--mt24-border);
}
.mt24-prod-card--badge:hover {
    box-shadow: var(--mt24-shadow-md);
    transform: translateY(-3px);
}
.mt24-prod-card--badge:hover .mt24-prod-card__image img {
    transform: scale(1.06);
}
.mt24-prod-card--badge .mt24-prod-card__badges {
    top: 10px;
    left: 10px;
}
.mt24-prod-card--badge .mt24-badge--danger {
    font-size: 0.85rem;
    padding: 4px 10px;
    font-weight: 700;
}


/* ─── compact template ─── */
.mt24-prod-card--compact {
    border: 1px solid var(--mt24-border);
}
.mt24-prod-card--compact .mt24-prod-card__image {
    aspect-ratio: 4/3;
}
.mt24-prod-card--compact .mt24-prod-card__body {
    padding: var(--mt24-space-xs) var(--mt24-space-sm);
}
.mt24-prod-card--compact .mt24-prod-card__title {
    font-size: var(--mt24-font-size-xs);
    min-height: 2em;
    margin-bottom: 4px;
}
.mt24-prod-card--compact .mt24-prod-card__price {
    font-size: var(--mt24-font-size-xs);
}
.mt24-prod-card--compact:hover {
    box-shadow: var(--mt24-shadow-sm);
}


/* ─── compact horizontal template ───
   Mismo contenido que compact (sólo título + precio, sin botones ni
   categoría) pero en fila: imagen izquierda, cuerpo derecha. Ideal
   para grids con columnas anchas o sidebars angostos. */
.mt24-prod-card--compact-horizontal {
    flex-direction: row;
    border: 1px solid var(--mt24-border);
}
.mt24-prod-card--compact-horizontal .mt24-prod-card__image {
    width: 110px;
    min-width: 110px;
    aspect-ratio: 1 / 1;
    height: auto;
    flex-shrink: 0;
}
.mt24-prod-card--compact-horizontal .mt24-prod-card__body {
    padding: var(--mt24-space-sm) var(--mt24-space-sm);
    justify-content: center;
}
.mt24-prod-card--compact-horizontal .mt24-prod-card__title {
    font-size: var(--mt24-font-size-sm);
    min-height: 0;
    margin-bottom: 4px;
}
.mt24-prod-card--compact-horizontal .mt24-prod-card__price {
    margin-top: 4px;
}
.mt24-prod-card--compact-horizontal .mt24-prod-card__price .mt24-price--current {
    font-size: var(--mt24-font-size-base);
    font-weight: 700;
}
.mt24-prod-card--compact-horizontal .mt24-prod-card__badges {
    top: 4px;
    left: 4px;
}
.mt24-prod-card--compact-horizontal:hover {
    box-shadow: var(--mt24-shadow-sm);
}
@media (max-width: 575.98px) {
    .mt24-prod-card--compact-horizontal .mt24-prod-card__image {
        width: 90px;
        min-width: 90px;
    }
}

/* 5-column grid */
.col-xl-5th {
    flex: 0 0 auto;
    width: 20%;
}
@media (max-width: 1199px) {
    .col-xl-5th { width: 33.333%; }
}
@media (max-width: 767px) {
    .col-xl-5th { width: 50%; }
}

/* Badge template - discount ribbon */
.mt24-prod-card__discount-ribbon {
    position: absolute;
    top: 12px;
    left: 0;
    background: var(--mt24-danger);
    color: white;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 12px 4px 8px;
    border-radius: 0 var(--mt24-radius) var(--mt24-radius) 0;
    z-index: 3;
}
.mt24-prod-card--badge .mt24-prod-card__btn {
    opacity: 1;
}
.mt24-prod-card__price--lg {
    margin-bottom: 4px;
}

/* ================================================================
   PROMO BANNER (.mt24-promo)
   Templates: --default, --clean, --outline, --minimal, --hover-zoom, --full
   ================================================================ */

.mt24-promo {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: white;
    transition: all var(--mt24-duration) var(--mt24-ease);
}

.mt24-promo__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--mt24-duration-slow) var(--mt24-ease);
}

.mt24-promo:hover .mt24-promo__img {
    transform: scale(1.03);
}

/* Hover-zoom template: stronger zoom */
.mt24-promo--hover-zoom:hover .mt24-promo__img {
    transform: scale(1.08);
}

.mt24-promo__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt24-bg-muted);
}
.mt24-promo__placeholder i {
    font-size: 2.5rem;
    color: var(--mt24-text-muted);
}

/* Overlay positioning */
.mt24-promo__overlay {
    position: absolute;
    left: 0;
    right: 0;
    padding: var(--mt24-space-md) var(--mt24-space-lg);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.mt24-promo__overlay--bottom {
    bottom: 0;
    justify-content: flex-end;
}

.mt24-promo__overlay--center {
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    align-items: center;
}

.mt24-promo__overlay--top {
    top: 8%;
    justify-content: flex-start;
}

.mt24-promo__title {
    font-size: var(--mt24-font-size-lg);
    font-weight: 700;
    color: white;
    margin: 0;
    line-height: 1.3;
}

.mt24-promo__subtitle {
    font-size: var(--mt24-font-size-sm);
    color: rgba(255,255,255,0.85);
    margin: 0;
}

.mt24-promo__link {
    color: white;
    text-decoration: underline;
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    display: inline-block;
    margin-top: 4px;
}
.mt24-promo__link:hover { color: inherit; opacity: 0.8; }

/* Text and button inherit color from overlay inline style */
.mt24-promo__title { color: inherit; }
.mt24-promo__subtitle { color: inherit; opacity: 0.85; }

/* Buttons should be inline, not full width */
.mt24-promo__overlay .mt24-btn { display: inline-flex; margin-top: var(--mt24-space-sm); }

/* Template: default — gradient overlay at text position */
.mt24-promo--default .mt24-promo__overlay--bottom {
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    padding-top: var(--mt24-space-2xl);
}
.mt24-promo--default .mt24-promo__overlay--top {
    background: linear-gradient(rgba(0,0,0,0.7), transparent);
    padding-bottom: var(--mt24-space-2xl);
}
.mt24-promo--default .mt24-promo__overlay--center {
    background: rgba(0,0,0,0.4);
    inset: 0;
    top: 0;
    transform: none;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Horizontal alignment — viene DESPUÉS de las template-position rules
   y matchea con specificity (0,2,0) para poder ganarles por cascade
   order. El modifier --align-X se aplica a nivel de bloque desde el
   admin, así que tiene que vencer al center default de la template. */
.mt24-promo .mt24-promo__overlay--align-left   { text-align: left;   align-items: flex-start; }
.mt24-promo .mt24-promo__overlay--align-center { text-align: center; align-items: center; }
.mt24-promo .mt24-promo__overlay--align-right  { text-align: right;  align-items: flex-end; }

/* Template: clean — no gradient, text shadow */
.mt24-promo--clean .mt24-promo__title,
.mt24-promo--clean .mt24-promo__subtitle {
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

/* Template: outline — gradient + outline buttons */
.mt24-promo--outline .mt24-promo__overlay--bottom {
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    padding-top: var(--mt24-space-2xl);
}

/* Template: minimal — text below image, not overlaid */
.mt24-promo--minimal {
    display: flex;
    flex-direction: column;
    background: var(--mt24-bg);
    color: var(--mt24-text);
    height: auto !important;
}
.mt24-promo--minimal .mt24-promo__img {
    position: relative;
    inset: auto;
    aspect-ratio: 16/9;
}
.mt24-promo--minimal .mt24-promo__overlay {
    position: relative;
    padding: var(--mt24-space-md);
    background: none;
}
.mt24-promo--minimal .mt24-promo__title { color: var(--mt24-text); }
.mt24-promo--minimal .mt24-promo__subtitle { color: var(--mt24-text-muted); }

/* Template: hover-zoom — stronger effect handled above */

/* Template: full — image only, no overlay */
.mt24-promo--full .mt24-promo__overlay { display: none; }

@media (max-width: 767px) {
    .mt24-promo__title { font-size: var(--mt24-font-size-base); }
    .mt24-promo__overlay { padding: var(--mt24-space-sm) var(--mt24-space-md); }
}


/* ================================================================
   PROMO BANNER — MOSAIC VARIANTS (.mt24-promo-mosaic)
   Layouts asimétricos tipo magazine: el wrapper es un CSS Grid con
   áreas predefinidas y cada .mt24-promo-mosaic__tile (renderizada en
   orden de items) cae en la celda que le toca por nth-child. Mobile
   colapsa a una columna vertical con aspect-ratio uniforme.
   ================================================================ */

.mt24-promo-mosaic {
    display: grid;
    gap: var(--mosaic-gap, 16px);
    width: 100%;
}
.mt24-promo-mosaic__tile {
    /* Reset del height inline que usa .mt24-promo en el flujo Bootstrap.
       En mosaico, las dimensiones las da el grid del wrapper. */
    height: 100% !important;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* mosaic_3_feature — 1 grande izquierda + 2 verticales derecha
   [1][2]
   [1][3]
   Cols 1.6fr 1fr → tile 1 ocupa ~62% del ancho. aspect-ratio 13/6
   (~2.17:1) hace el grid más bajo que ancho, así tile 1 sale en
   proporción 4:3 (más ancho que alto, no portrait como tenía antes).
   Tiles 2 y 3 (derecha) quedan ~5:3 (1.67:1, similar a 16:9). */
.mt24-promo-mosaic--3-feature {
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 13 / 6;
}
.mt24-promo-mosaic--3-feature > :nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.mt24-promo-mosaic--3-feature > :nth-child(2) { grid-column: 2; grid-row: 1; }
.mt24-promo-mosaic--3-feature > :nth-child(3) { grid-column: 2; grid-row: 2; }

/* Jerarquía tipográfica (misma escala que mosaic_4_split). Solo hay
   2 tiles laterales en 3_feature, ambos quedan en el nivel "medio"
   (2xl) — equivalente al tile 2 del 4_split. */
.mt24-promo-mosaic--3-feature .mt24-promo__subtitle {
    font-size: var(--mt24-font-size-base);
}
.mt24-promo-mosaic--3-feature > :nth-child(1) .mt24-promo__title {
    font-size: var(--mt24-font-size-4xl);
    line-height: 1.1;
}
.mt24-promo-mosaic--3-feature > :nth-child(2) .mt24-promo__title,
.mt24-promo-mosaic--3-feature > :nth-child(3) .mt24-promo__title {
    font-size: var(--mt24-font-size-2xl);
    line-height: 1.2;
}
.mt24-promo-mosaic--3-feature .mt24-btn--sm {
    padding: 10px 20px;
    font-size: var(--mt24-font-size-sm);
}
@media (max-width: 767.98px) {
    .mt24-promo-mosaic--3-feature > :nth-child(n) .mt24-promo__title {
        font-size: var(--mt24-font-size-lg);
    }
}

/* mosaic_4_split — 1 grande izquierda + 1 mediana arriba der + 2 chicas abajo
   [1][1][2][2]
   [1][1][3][4]
   Tile 1 ocupa la mitad del ancho (cols 1-2 de 4 iguales). Para que
   no quede cuadrado, bajamos la altura total del grid con
   aspect-ratio 8/3 (~2.67:1) → tile 1 = 4:3 (más ancho que alto,
   ideal para banner hero rectangular).
   Rows 1.3fr 1fr → tile 2 (top der) queda más alto que tiles 3/4
   (mejor para imágenes 16:9). */
.mt24-promo-mosaic--4-split {
    grid-template-columns: repeat(4, 1fr);
    /* Rows 1.5fr 1fr → tile 2 (top der) queda más alto que tiles 3/4
       en la fila inferior. Antes era 1.3fr 1fr (diferencia sutil);
       ahora la jerarquía visual se nota más. */
    grid-template-rows: 1.5fr 1fr;
    aspect-ratio: 8 / 3;
}
.mt24-promo-mosaic--4-split > :nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.mt24-promo-mosaic--4-split > :nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
.mt24-promo-mosaic--4-split > :nth-child(3) { grid-column: 3;     grid-row: 2; }
.mt24-promo-mosaic--4-split > :nth-child(4) { grid-column: 4;     grid-row: 2; }

/* Jerarquía tipográfica en mosaic_4_split — el tile 1 es el héroe
   visual, el 2 el secundario y los chicos 3/4 mantienen un título
   legible pero pequeño. La descripción/subtitle se mantiene
   uniforme (base = 15px) para que el bloque se sienta coherente.
   Botón override para que el mt24-btn--sm del renderer salga con
   padding/font del tamaño base — sm queda muy chico para el hero. */
.mt24-promo-mosaic--4-split .mt24-promo__subtitle {
    font-size: var(--mt24-font-size-base);
}
.mt24-promo-mosaic--4-split > :nth-child(1) .mt24-promo__title {
    font-size: var(--mt24-font-size-4xl);
    line-height: 1.1;
}
.mt24-promo-mosaic--4-split > :nth-child(2) .mt24-promo__title {
    font-size: var(--mt24-font-size-2xl);
    line-height: 1.2;
}
.mt24-promo-mosaic--4-split > :nth-child(3) .mt24-promo__title,
.mt24-promo-mosaic--4-split > :nth-child(4) .mt24-promo__title {
    font-size: var(--mt24-font-size-lg);
    line-height: 1.25;
}
.mt24-promo-mosaic--4-split .mt24-btn--sm {
    padding: 10px 20px;
    font-size: var(--mt24-font-size-sm);
}
@media (max-width: 767.98px) {
    /* En mobile todos los tiles son el mismo ancho — la jerarquía
       de tamaños de desktop se pierde. Volvemos a un tamaño uniforme
       razonable para evitar que el tile 1 quede demasiado grande
       proporcional al espacio reducido.
       :nth-child(n) matchea todos los tiles pero tiene la MISMA
       especificidad (0,3,0) que las reglas desktop por tile — sin
       esto el desktop nth-child(1) ganaba aunque estuviéramos en
       media mobile. */
    .mt24-promo-mosaic--4-split > :nth-child(n) .mt24-promo__title {
        font-size: var(--mt24-font-size-lg);
    }
}

/* mosaic_5_top_row — hero gigante + columna vertical + fila inferior de 3
   [1][1][2]
   [1][1][2]
   [3][4][5]
   aspect-ratio 7/5 (1.4:1) → tile 1 (cols 1-2 de 3 cols, rows 1-2 de
   2.85 rows) sale en ~4:3. Tile 2 (col 3, rows 1-2) queda vertical
   (~0.7:1, portrait) — útil para producto destacado tipo "Acer
   ConceptD" del demo. Tiles 3/4/5 abajo en row 0.85fr cada una. */
.mt24-promo-mosaic--5-top-row {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr 0.85fr;
    aspect-ratio: 7 / 5;
}
.mt24-promo-mosaic--5-top-row > :nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.mt24-promo-mosaic--5-top-row > :nth-child(2) { grid-column: 3;     grid-row: 1 / 3; }
.mt24-promo-mosaic--5-top-row > :nth-child(3) { grid-column: 1;     grid-row: 3; }
.mt24-promo-mosaic--5-top-row > :nth-child(4) { grid-column: 2;     grid-row: 3; }
.mt24-promo-mosaic--5-top-row > :nth-child(5) { grid-column: 3;     grid-row: 3; }

/* Jerarquía tipográfica (misma escala que 4_split / 3_feature) */
.mt24-promo-mosaic--5-top-row .mt24-promo__subtitle {
    font-size: var(--mt24-font-size-base);
}
.mt24-promo-mosaic--5-top-row > :nth-child(1) .mt24-promo__title {
    font-size: var(--mt24-font-size-4xl);
    line-height: 1.1;
}
.mt24-promo-mosaic--5-top-row > :nth-child(2) .mt24-promo__title {
    font-size: var(--mt24-font-size-2xl);
    line-height: 1.2;
}
.mt24-promo-mosaic--5-top-row > :nth-child(3) .mt24-promo__title,
.mt24-promo-mosaic--5-top-row > :nth-child(4) .mt24-promo__title,
.mt24-promo-mosaic--5-top-row > :nth-child(5) .mt24-promo__title {
    font-size: var(--mt24-font-size-lg);
    line-height: 1.25;
}
.mt24-promo-mosaic--5-top-row .mt24-btn--sm {
    padding: 10px 20px;
    font-size: var(--mt24-font-size-sm);
}
@media (max-width: 767.98px) {
    .mt24-promo-mosaic--5-top-row > :nth-child(n) .mt24-promo__title {
        font-size: var(--mt24-font-size-lg);
    }
}

/* mosaic_6_grid_mix — 3 chicas arriba + 1 ancha + 1 chica + 1 wide
   [1][2][3]
   [4][4][5]
   [6][6][6] */
.mt24-promo-mosaic--6-grid-mix {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 0.8fr 1fr 0.7fr;
    aspect-ratio: 3 / 2.4;
}
.mt24-promo-mosaic--6-grid-mix > :nth-child(1) { grid-column: 1; grid-row: 1; }
.mt24-promo-mosaic--6-grid-mix > :nth-child(2) { grid-column: 2; grid-row: 1; }
.mt24-promo-mosaic--6-grid-mix > :nth-child(3) { grid-column: 3; grid-row: 1; }
.mt24-promo-mosaic--6-grid-mix > :nth-child(4) { grid-column: 1 / 3; grid-row: 2; }
.mt24-promo-mosaic--6-grid-mix > :nth-child(5) { grid-column: 3;     grid-row: 2; }
.mt24-promo-mosaic--6-grid-mix > :nth-child(6) { grid-column: 1 / 4; grid-row: 3; }

/* Jerarquía tipográfica (misma escala que los otros mosaicos).
   Acá el "hero" visual es tile 4 (ancha media — la pieza más grande
   del grid) y tile 6 es un banner wide secundario. Las chicas de
   arriba (1, 2, 3) y la chica del medio (5) usan el tamaño chico. */
.mt24-promo-mosaic--6-grid-mix .mt24-promo__subtitle {
    font-size: var(--mt24-font-size-base);
}
.mt24-promo-mosaic--6-grid-mix > :nth-child(4) .mt24-promo__title {
    /* Tile 4 — ancha central, el hero visual de esta variante */
    font-size: var(--mt24-font-size-4xl);
    line-height: 1.1;
}
.mt24-promo-mosaic--6-grid-mix > :nth-child(6) .mt24-promo__title {
    /* Tile 6 — wide bottom banner. Texto secundario pero prominente
       porque el ancho da espacio para un title más grande. */
    font-size: var(--mt24-font-size-2xl);
    line-height: 1.2;
}
.mt24-promo-mosaic--6-grid-mix > :nth-child(1) .mt24-promo__title,
.mt24-promo-mosaic--6-grid-mix > :nth-child(2) .mt24-promo__title,
.mt24-promo-mosaic--6-grid-mix > :nth-child(3) .mt24-promo__title,
.mt24-promo-mosaic--6-grid-mix > :nth-child(5) .mt24-promo__title {
    /* Chicas (arriba 1-3 y medio derecho 5) */
    font-size: var(--mt24-font-size-lg);
    line-height: 1.25;
}
.mt24-promo-mosaic--6-grid-mix .mt24-btn--sm {
    padding: 10px 20px;
    font-size: var(--mt24-font-size-sm);
}
@media (max-width: 767.98px) {
    .mt24-promo-mosaic--6-grid-mix > :nth-child(n) .mt24-promo__title {
        font-size: var(--mt24-font-size-lg);
    }
}

/* Mobile — colapsamos a 1 columna pero RESPETAMOS el aspect ratio
   de cada tile (el que tenía en desktop por su posición en el grid).
   Antes todos los tiles se forzaban a 16:9 — visualmente uniforme
   pero rompía la intención del diseño (imágenes verticales,
   cuadradas, banners wide, etc. quedaban estiradas/recortadas).
   Las ratios per-tile están alineadas con VARIANT_TILE_RATIOS del JS
   (hint en page builder) para que la imagen que sube el cliente
   funcione tanto en desktop como en mobile sin recortes. */
@media (max-width: 767.98px) {
    [class*="mt24-promo-mosaic--"] {
        display: flex !important;
        flex-direction: column;
        aspect-ratio: auto !important;
    }
    [class*="mt24-promo-mosaic--"] > .mt24-promo-mosaic__tile {
        grid-column: unset !important;
        grid-row: unset !important;
        height: auto !important;
    }

    /* mosaic_3_feature: tile 1 = hero 4:3, tiles 2/3 = 5:3 (landscape sutil) */
    .mt24-promo-mosaic--3-feature > :nth-child(1) { aspect-ratio: 4 / 3; }
    .mt24-promo-mosaic--3-feature > :nth-child(2),
    .mt24-promo-mosaic--3-feature > :nth-child(3) { aspect-ratio: 5 / 3; }

    /* mosaic_4_split: hero 4:3 + banner wide + 2 medianos 5:3 */
    .mt24-promo-mosaic--4-split > :nth-child(1) { aspect-ratio: 4 / 3; }
    .mt24-promo-mosaic--4-split > :nth-child(2) { aspect-ratio: 20 / 9; }
    .mt24-promo-mosaic--4-split > :nth-child(3),
    .mt24-promo-mosaic--4-split > :nth-child(4) { aspect-ratio: 5 / 3; }

    /* mosaic_5_top_row: hero 4:3 + portrait 2:3 + 3 landscapes 3:2 */
    .mt24-promo-mosaic--5-top-row > :nth-child(1) { aspect-ratio: 4 / 3; }
    .mt24-promo-mosaic--5-top-row > :nth-child(2) { aspect-ratio: 2 / 3; }
    .mt24-promo-mosaic--5-top-row > :nth-child(3),
    .mt24-promo-mosaic--5-top-row > :nth-child(4),
    .mt24-promo-mosaic--5-top-row > :nth-child(5) { aspect-ratio: 3 / 2; }

    /* mosaic_6_grid_mix: 3 chicas 4:3 + hero wide 2:1 + cuadrado + banner 4:1 */
    .mt24-promo-mosaic--6-grid-mix > :nth-child(1),
    .mt24-promo-mosaic--6-grid-mix > :nth-child(2),
    .mt24-promo-mosaic--6-grid-mix > :nth-child(3) { aspect-ratio: 4 / 3; }
    .mt24-promo-mosaic--6-grid-mix > :nth-child(4) { aspect-ratio: 2 / 1; }
    .mt24-promo-mosaic--6-grid-mix > :nth-child(5) { aspect-ratio: 1 / 1; }
    .mt24-promo-mosaic--6-grid-mix > :nth-child(6) { aspect-ratio: 4 / 1; }
}


/* ================================================================
   PRODUCT TABS (.mt24-tabs)
   Styles: --underline, --pills, --boxed, --minimal
   ================================================================ */

.mt24-tabs {
    display: flex;
    gap: var(--mt24-space-xs);
    margin-bottom: var(--mt24-space-lg);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mt24-tabs::-webkit-scrollbar { display: none; }

.mt24-tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
    position: relative;
}

.mt24-tabs__btn:hover {
    color: var(--mt24-text);
}

.mt24-tabs__btn.is-active {
    color: var(--mt24-primary);
}

/* Underline style */
.mt24-tabs--underline {
    border-bottom: 2px solid var(--mt24-border-light);
}
.mt24-tabs--underline .mt24-tabs__btn {
    padding-bottom: var(--mt24-space-sm);
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
}
.mt24-tabs--underline .mt24-tabs__btn.is-active {
    border-bottom-color: var(--mt24-primary);
}

/* Pills style */
.mt24-tabs--pills .mt24-tabs__btn {
    border-radius: var(--mt24-radius-full);
    padding: var(--mt24-space-xs) var(--mt24-space-md);
}
.mt24-tabs--pills .mt24-tabs__btn.is-active {
    background: var(--mt24-primary);
    color: white;
}

/* Boxed style */
.mt24-tabs--boxed .mt24-tabs__btn {
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    padding: var(--mt24-space-xs) var(--mt24-space-lg);
}
.mt24-tabs--boxed .mt24-tabs__btn.is-active {
    background: var(--mt24-primary);
    border-color: var(--mt24-primary);
    color: white;
}

/* Minimal style */
.mt24-tabs--minimal .mt24-tabs__btn {
    padding: var(--mt24-space-xs) 0;
    margin-right: var(--mt24-space-lg);
}
.mt24-tabs--minimal .mt24-tabs__btn.is-active {
    color: var(--mt24-primary);
}
.mt24-tabs--minimal .mt24-tabs__btn.is-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--mt24-primary);
    border-radius: 1px;
}

/* Tab content */
.mt24-tabs__content {
    position: relative;
}

.mt24-tabs__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.mt24-tabs__products {
    min-height: 200px;
    transition: opacity 0.2s ease;
}

/* Product items in tabs — grid wrapper from AJAX */
.mt24-tabs__products .product-tab-item {
    margin-bottom: var(--mt24-space-md);
}

@media (max-width: 767px) {
    .mt24-tabs__btn {
        font-size: var(--mt24-font-size-xs);
        padding: var(--mt24-space-xs) var(--mt24-space-sm);
    }
}

/* ================================================================
   FEATURE / CHARACTERISTICS (.mt24-feature)
   Templates: --icons (default), --cards, --minimal, --bordered, --horizontal, --banner
   ================================================================ */

.mt24-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--mt24-space-md);
    height: 100%;
    transition: all var(--mt24-duration) var(--mt24-ease);
}

.mt24-feature__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--mt24-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--mt24-space-md);
    flex-shrink: 0;
    font-size: 1.5rem;
}

.mt24-feature__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
}

/* Image mode — larger container, no circle, no bg */
.mt24-feature__icon--img {
    width: 80px;
    height: 80px;
    border-radius: var(--mt24-radius-lg);
    background: none !important;
}
.mt24-feature--horizontal .mt24-feature__icon--img {
    width: 56px;
    height: 56px;
}

.mt24-feature__icon--banner-img {
    width: 28px;
    height: 28px;
    border-radius: var(--mt24-radius);
    margin: 0;
    margin-right: var(--mt24-space-sm);
    background: none !important;
}

.mt24-feature__icon--sm {
    width: auto;
    height: auto;
    background: none !important;
    font-size: 2rem;
    margin-bottom: var(--mt24-space-sm);
}

.mt24-feature__icon--inline {
    width: auto;
    height: auto;
    background: none !important;
    font-size: 1.25rem;
    margin: 0;
    margin-right: var(--mt24-space-sm);
}

.mt24-feature__title {
    font-size: var(--mt24-font-size-sm);
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--mt24-text);
}

.mt24-feature__desc {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Cards template */
.mt24-feature--card {
    background: var(--mt24-bg);
    border-radius: var(--mt24-radius-lg);
    box-shadow: var(--mt24-shadow);
    padding: var(--mt24-space-lg);
}
.mt24-feature--card:hover {
    box-shadow: var(--mt24-shadow-md);
    transform: translateY(-3px);
}

/* Minimal template */
.mt24-feature--minimal {
    padding: var(--mt24-space-sm);
}

/* Bordered template */
.mt24-feature--bordered {
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg);
    padding: var(--mt24-space-lg);
}
.mt24-feature--bordered:hover {
    border-color: var(--mt24-primary);
}

/* Horizontal template */
.mt24-feature--horizontal {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: var(--mt24-space-md);
}
.mt24-feature--horizontal .mt24-feature__icon {
    margin-bottom: 0;
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
}
.mt24-feature--horizontal .mt24-feature__text {
    flex: 1;
}

/* Banner template (compact row) */
.mt24-feature--banner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    gap: var(--mt24-space-xs);
}
.mt24-feature--banner .mt24-feature__title {
    margin: 0;
    font-size: var(--mt24-font-size-xs);
}

/* Icons default template */
.mt24-feature--icons .mt24-feature__icon {
    border-radius: var(--mt24-radius-full);
}

@media (max-width: 767px) {
    .mt24-feature__icon { width: 52px; height: 52px; font-size: 1.25rem; }
    .mt24-feature--horizontal .mt24-feature__icon { width: 40px; height: 40px; }
}

/* ================================================================
   COUNTDOWN (.mt24-countdown)
   ================================================================ */

.mt24-countdown {
    display: inline-flex;
    align-items: center;
}

.mt24-countdown__digits {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mt24-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mt24-countdown__digit {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    background: var(--mt24-bg-dark);
    color: white;
    font-weight: 800;
    font-size: var(--mt24-font-size-lg);
    border-radius: var(--mt24-radius);
    font-variant-numeric: tabular-nums;
}

.mt24-countdown__digit--primary {
    background: var(--mt24-primary);
}

.mt24-countdown__digit--danger {
    background: var(--mt24-danger);
}

.mt24-countdown__digit--light {
    background: var(--mt24-bg-muted);
    color: var(--mt24-text);
}

.mt24-countdown__sep {
    font-weight: 800;
    font-size: var(--mt24-font-size-lg);
    color: var(--mt24-text-muted);
    line-height: 1;
    margin-top: -12px;
}

.mt24-countdown__label {
    font-size: 10px;
    color: var(--mt24-text-muted);
    font-weight: 600;
    margin-top: 2px;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .mt24-countdown__digit {
        min-width: 32px;
        height: 32px;
        font-size: var(--mt24-font-size-sm);
    }
    .mt24-countdown__label { font-size: 8px; }
}

/* Small countdown (for deal cards) */
.mt24-countdown--sm .mt24-countdown__digit {
    min-width: 28px;
    height: 28px;
    font-size: var(--mt24-font-size-xs);
}
.mt24-countdown--sm .mt24-countdown__sep { font-size: var(--mt24-font-size-sm); margin-top: -8px; }
.mt24-countdown--sm .mt24-countdown__label { font-size: 8px; }

/* ================================================================
   COUNTDOWN PROMO (.mt24-countdown-promo)
   Variant 'promo' of countdown_deals: hero (image + title + desc +
   countdown + CTA) with optional product grid below. All within a
   single wrapper so the block background (universal bg system from
   page builder) covers the whole section uniformly.
   ================================================================ */

.mt24-countdown-promo__hero {
    /* g-4 + align-items-center come from Bootstrap. Mobile stacks
       image then content; ≥768px renders side-by-side. */
}

.mt24-countdown-promo__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    /* Sin fondo — el cliente puede subir PNG con transparencia y
       queremos que el bg del bloque (universal) se vea a través. El
       placeholder de edit mode usa su propio borde dashed, así que
       tampoco depende de tener un bg aquí. */
}
.mt24-countdown-promo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mt24-countdown-promo__image--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed color-mix(in srgb, currentColor 22%, transparent);
    background: transparent;
}

.mt24-countdown-promo__title {
    font-family: var(--mt24-font-heading, inherit);
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 var(--mt24-space-sm);
    color: inherit;
}
.mt24-countdown-promo__desc {
    font-size: var(--mt24-font-size-lg);
    line-height: 1.55;
    margin: 0 0 var(--mt24-space-md);
    color: inherit;
    opacity: 0.85;
}
.mt24-countdown-promo__timer {
    margin: var(--mt24-space-md) 0;
}
.mt24-countdown-promo__cta {
    margin-top: var(--mt24-space-md);
}

/* Countdown más grande sólo dentro del hero promo — la variant es
   visualmente jerárquica y la cuenta regresiva es protagonista, no
   accesorio. Otras variants (default/banner/compact/card) mantienen
   el tamaño base 40x40. */
.mt24-countdown-promo .mt24-countdown__digit {
    min-width: 64px;
    height: 64px;
    font-size: var(--mt24-font-size-3xl);
}
.mt24-countdown-promo .mt24-countdown__sep {
    font-size: var(--mt24-font-size-2xl);
    margin-top: -10px;
}
.mt24-countdown-promo .mt24-countdown__label {
    font-size: var(--mt24-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
@media (max-width: 575.98px) {
    .mt24-countdown-promo .mt24-countdown__digit {
        min-width: 52px;
        height: 52px;
        font-size: var(--mt24-font-size-2xl);
    }
}

.mt24-countdown-promo__products {
    margin-top: var(--mt24-space-xl);
}
.mt24-countdown-promo__sep {
    border: 0;
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    margin: 0 0 var(--mt24-space-lg);
    opacity: 1;
}

/* ================================================================
   DEAL CARD (.mt24-deal-card)
   Product with image background + overlay text + individual countdown
   ================================================================ */

.mt24-deal-card {
    position: relative;
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mt24-deal-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.mt24-deal-card__badge {
    position: absolute;
    top: var(--mt24-space-sm);
    left: var(--mt24-space-sm);
    background: var(--mt24-danger);
    color: white;
    font-size: var(--mt24-font-size-xs);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--mt24-radius);
    z-index: 3;
}

.mt24-deal-card__overlay {
    position: relative;
    z-index: 2;
    padding: var(--mt24-space-lg);
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    display: flex;
    flex-direction: column;
    gap: var(--mt24-space-xs);
    align-items: flex-start;
}

.mt24-deal-card__name {
    color: white;
    font-size: var(--mt24-font-size-base);
    font-weight: 700;
    margin: var(--mt24-space-xs) 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mt24-deal-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--mt24-space-sm);
}

.mt24-deal-card__price .mt24-price--current {
    color: white;
    font-size: var(--mt24-font-size-lg);
}

.mt24-deal-card__price .mt24-price--old {
    color: rgba(255,255,255,0.6);
}

.mt24-deal-card .mt24-btn {
    margin-top: var(--mt24-space-xs);
    position: relative;
    z-index: 3;
}

.mt24-deal-card:hover {
    box-shadow: var(--mt24-shadow-lg);
}

@media (max-width: 767px) {
    .mt24-deal-card { min-height: 260px; }
    .mt24-deal-card--square { aspect-ratio: 1; min-height: auto; }
    .mt24-deal-card--portrait { aspect-ratio: 3/4; min-height: auto; }
}

/* Deal card aspect variants */
.mt24-deal-card--square {
    aspect-ratio: 1;
    min-height: auto;
}

.mt24-deal-card--portrait {
    aspect-ratio: 3/4;
    min-height: auto;
}

/* ================================================================
   BRAND SHOWCASE (.mt24-brand)
   Templates: --logo, --logo-name, --card, --circle, --text
   ================================================================ */

.mt24-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--mt24-text);
    /* --brand-tile-padding override del wrapper (configurable desde
       page builder). Default 16px = --mt24-space-md, mismo que antes. */
    padding: var(--brand-tile-padding, var(--mt24-space-md));
    /* --brand-tile-bg override del wrapper. Default transparente — el
       cliente puede pintar el tile (ej. para logos blancos sobre fondo
       claro o look tipo "card" uniforme). */
    background: var(--brand-tile-bg, transparent);
    transition: all var(--mt24-duration) var(--mt24-ease);
    text-align: center;
}

.mt24-brand__logo {
    /* --brand-logo-height configurable desde el page builder. Default
       60px (igual que antes). El object-fit:contain garantiza que la
       imagen no se distorsione al cambiar la altura. */
    max-height: var(--brand-logo-height, 60px);
    max-width: 100%;
    object-fit: contain;
    transition: all var(--mt24-duration) var(--mt24-ease);
}

.mt24-brand__name {
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    margin-top: var(--mt24-space-sm);
    color: var(--mt24-text-secondary);
    transition: color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-brand:hover .mt24-brand__name { color: var(--mt24-primary); }

.mt24-brand__placeholder {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt24-bg-muted);
    border-radius: var(--mt24-radius);
    color: var(--mt24-text-muted);
    font-size: 1.5rem;
}

.mt24-brand__initial {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt24-primary-light);
    color: var(--mt24-primary);
    font-size: var(--mt24-font-size-2xl);
    font-weight: 800;
    border-radius: var(--mt24-radius-full);
}

/* Logo template (default). Padding mayor que el base de .mt24-brand
   para que los logos respiren. El cliente puede override con la var
   --brand-tile-padding (incluso a 0 si la imagen ya tiene su propio
   margen blanco). */
.mt24-brand--logo { padding: var(--brand-tile-padding, var(--mt24-space-lg)); }

/* Logo + name */
.mt24-brand--logo-name { gap: var(--mt24-space-xs); }

/* Card template */
.mt24-brand--card {
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg);
    padding: var(--brand-tile-padding, var(--mt24-space-lg));
    height: 100%;
}
.mt24-brand--card:hover {
    border-color: var(--mt24-primary);
    box-shadow: var(--mt24-shadow);
}

/* Circle template */
.mt24-brand--circle .mt24-brand__logo {
    width: 80px;
    height: 80px;
    border-radius: var(--mt24-radius-full);
    object-fit: cover;
    border: 2px solid var(--mt24-border);
}
.mt24-brand--circle:hover .mt24-brand__logo {
    border-color: var(--mt24-primary);
}

/* Text template */
.mt24-brand--text .mt24-brand__name {
    font-size: var(--mt24-font-size-base);
    margin: 0;
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-full);
}
.mt24-brand--text:hover .mt24-brand__name {
    background: var(--mt24-primary);
    color: white;
    border-color: var(--mt24-primary);
}

/* Hover effects */
.mt24-brand--grayscale .mt24-brand__logo {
    filter: grayscale(100%);
    opacity: 0.6;
}
.mt24-brand--grayscale:hover .mt24-brand__logo {
    filter: grayscale(0%);
    opacity: 1;
}

.mt24-brand--opacity .mt24-brand__logo { opacity: 0.4; }
.mt24-brand--opacity:hover .mt24-brand__logo { opacity: 1; }

.mt24-brand--scale:hover .mt24-brand__logo { transform: scale(1.1); }

@media (max-width: 767px) {
    /* Logo height en mobile = ~67% del configurado (mantiene la
       proporción 40/60 = 0.667 del default original). Si el cliente
       seteó 100px desktop, mobile usa ~67px; si seteó 30px, mobile
       usa ~20px. Padding queda sin escalar — los logos chicos no
       saturan visualmente con su padding original. */
    .mt24-brand__logo { max-height: calc(var(--brand-logo-height, 60px) * 1); }
    .mt24-brand--circle .mt24-brand__logo { width: 60px; height: 60px; }
}

/* ================================================================
   BLOG CARD (.mt24-blog-card)
   Templates: --card, --horizontal, --overlay, --minimal
   ================================================================ */

.mt24-blog-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--mt24-text);
    height: 100%;
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    transition: all var(--mt24-duration) var(--mt24-ease);
}

.mt24-blog-card__image {
    position: relative;
    overflow: hidden;
    background: var(--mt24-bg-soft);
}

.mt24-blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--mt24-duration-slow) var(--mt24-ease);
}

.mt24-blog-card:hover .mt24-blog-card__img { transform: scale(1.05); }

.mt24-blog-card__body {
    padding: var(--mt24-space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mt24-blog-card__date {
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.mt24-blog-card__title {
    font-size: var(--mt24-font-size-base);
    font-weight: 700;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-blog-card:hover .mt24-blog-card__title { color: var(--mt24-primary); }

.mt24-blog-card__excerpt {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.mt24-blog-card__link {
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    color: var(--mt24-primary);
    margin-top: auto;
    padding-top: var(--mt24-space-sm);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Card template */
.mt24-blog-card--card {
    border: 1px solid var(--mt24-border);
}
.mt24-blog-card--card:hover {
    box-shadow: var(--mt24-shadow-md);
    transform: translateY(-3px);
}
.mt24-blog-card--card .mt24-blog-card__image { aspect-ratio: 16/9; }

/* Horizontal template */
.mt24-blog-card--horizontal {
    flex-direction: row;
    border: 1px solid var(--mt24-border-light);
    border-radius: var(--mt24-radius);
}
.mt24-blog-card--horizontal:hover { background: var(--mt24-bg-soft); }
.mt24-blog-card--horizontal .mt24-blog-card__image {
    width: 120px;
    min-height: 90px;
    flex-shrink: 0;
}
.mt24-blog-card--horizontal .mt24-blog-card__body { padding: var(--mt24-space-sm) var(--mt24-space-md); justify-content: center; }
.mt24-blog-card--horizontal .mt24-blog-card__title { font-size: var(--mt24-font-size-sm); -webkit-line-clamp: 2; }

/* Overlay template */
.mt24-blog-card--overlay {
    position: relative;
}
.mt24-blog-card--overlay .mt24-blog-card__image {
    position: absolute;
    inset: 0;
}
.mt24-blog-card--overlay .mt24-blog-card__overlay {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 280px;
    padding: var(--mt24-space-lg);
    background: linear-gradient(transparent 30%, rgba(0,0,0,0.7));
}
.mt24-blog-card--overlay .mt24-blog-card__title { color: white; }
.mt24-blog-card--overlay .mt24-blog-card__date { color: rgba(255,255,255,0.7); }
.mt24-blog-card--overlay:hover .mt24-blog-card__title { color: white; opacity: 0.9; }

/* Minimal template */
.mt24-blog-card--minimal {
    padding: var(--mt24-space-md) 0;
    border-bottom: 1px solid var(--mt24-border-light);
    border-radius: 0;
}
.mt24-blog-card--minimal:last-child { border-bottom: none; }
.mt24-blog-card--minimal:hover { background: var(--mt24-bg-soft); padding-left: var(--mt24-space-sm); }

@media (max-width: 767px) {
    .mt24-blog-card--horizontal .mt24-blog-card__image { width: 90px; }
}

/* ================================================================
   NEWSLETTER (.mt24-newsletter)
   Templates: --default, --horizontal, --minimal, --banner, --split, --floating
   ================================================================ */

.mt24-newsletter {
    padding: var(--mt24-space-2xl) 0;
}

.mt24-newsletter__title {
    font-weight: 800;
    margin: 0 0 var(--mt24-space-xs);
    color: inherit;
}

.mt24-newsletter__subtitle {
    opacity: 0.85;
    margin: 0 0 var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    color: inherit;
}

.mt24-newsletter__form {
    display: flex;
    gap: var(--mt24-space-sm);
    max-width: 480px;
}

/* Input: white solid by default */
.mt24-newsletter__input {
    flex: 1;
    border: 2px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    padding: 10px 16px;
    font-size: var(--mt24-font-size-sm);
    background: #ffffff;
    color: var(--mt24-text);
    outline: none;
}
.mt24-newsletter__input::placeholder { color: var(--mt24-text-muted); }
.mt24-newsletter__input:focus { border-color: var(--mt24-primary); box-shadow: 0 0 0 3px rgba(var(--mt24-primary-rgb), 0.1); }

/* On colored backgrounds: white border for contrast */
.mt24-newsletter--default .mt24-newsletter__input,
.mt24-newsletter--horizontal .mt24-newsletter__input,
.mt24-newsletter--banner .mt24-newsletter__input,
.mt24-newsletter--split .mt24-newsletter__input {
    border-color: rgba(255,255,255,0.4);
}

/* Default: centered */
.mt24-newsletter--default .mt24-newsletter__center {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.mt24-newsletter--default .mt24-newsletter__form { margin: 0 auto; }

/* Horizontal: 3-column grid, centered */
.mt24-newsletter--horizontal .mt24-newsletter__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mt24-space-xl);
    max-width: 900px;
    margin: 0 auto;
}
.mt24-newsletter__icon { font-size: 3rem; opacity: 0.8; flex-shrink: 0; }
.mt24-newsletter__text { flex: 0 1 auto; }
.mt24-newsletter__text .mt24-newsletter__title { margin-bottom: 0; }
.mt24-newsletter__text .mt24-newsletter__subtitle { margin-bottom: 0; margin-top: 4px; }
.mt24-newsletter__action { flex: 1; max-width: 400px; }
.mt24-newsletter__action .mt24-newsletter__form { max-width: none; }

/* Minimal: inline, no background, border-bottom separator */
.mt24-newsletter--minimal {
    padding: var(--mt24-space-lg) 0;
    border-top: 1px solid var(--mt24-border-light);
    border-bottom: 1px solid var(--mt24-border-light);
}
.mt24-newsletter__inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--mt24-space-md);
}
.mt24-newsletter__inline .mt24-newsletter__title { margin: 0; white-space: nowrap; }
.mt24-newsletter__inline .mt24-newsletter__form { flex: 1; max-width: none; }

/* Banner: bg image with overlay */
.mt24-newsletter--banner {
    position: relative;
    text-align: center;
    padding: var(--mt24-space-3xl) 0;
    min-height: 300px;
    display: flex;
    align-items: center;
}
.mt24-newsletter__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1;
}
.mt24-newsletter__content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}
.mt24-newsletter--banner .mt24-newsletter__form { margin: 0 auto; }
.mt24-newsletter--banner .mt24-newsletter__title { font-size: var(--mt24-font-size-3xl); }

/* Split: image + form side by side */
.mt24-newsletter--split { padding: var(--mt24-space-2xl) 0; }
.mt24-newsletter__image {
    width: 100%;
    border-radius: var(--mt24-radius-lg);
    object-fit: cover;
    max-height: 300px;
}
.mt24-newsletter__icon-large {
    font-size: 5rem;
    text-align: center;
    opacity: 0.3;
    padding: var(--mt24-space-2xl) 0;
}

/* Floating: card with shadow, distinct from default */
.mt24-newsletter--floating { padding: var(--mt24-space-lg) 0; background: none !important; }
.mt24-newsletter__card {
    border-radius: var(--mt24-radius-xl);
    padding: var(--mt24-space-2xl);
    text-align: center;
    box-shadow: var(--mt24-shadow-lg);
}
.mt24-newsletter__card .mt24-newsletter__form { margin: 0 auto; }
.mt24-newsletter__card .mt24-newsletter__input { border-color: rgba(255,255,255,0.4); }

@media (max-width: 767px) {
    .mt24-newsletter--horizontal .mt24-newsletter__grid { flex-direction: column; text-align: center; }
    .mt24-newsletter__icon { font-size: 2rem; }
    .mt24-newsletter__form { flex-direction: column; }
    .mt24-newsletter__inline { flex-direction: column; text-align: center; }
    .mt24-newsletter--banner .mt24-newsletter__title { font-size: var(--mt24-font-size-2xl); }
}

/* ================================================================
   ANNOUNCEMENT BAR (.mt24-announcement)
   Templates: --default, --fade, --static, --gradient
   ================================================================ */

.mt24-announcement {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: var(--mt24-z-sticky);
}

.mt24-announcement__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Static: no animation, show first only */
.mt24-announcement--static .mt24-announcement__slide {
    position: relative;
}

.mt24-announcement__text {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Font size variants */
.mt24-ab-font-xs { font-size: var(--mt24-font-size-xs); }
.mt24-ab-font-sm { font-size: var(--mt24-font-size-sm); }
.mt24-ab-font-lg { font-size: var(--mt24-font-size-base); font-weight: 700; }

.mt24-announcement__link {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
}
.mt24-announcement__link:hover {
    color: inherit;
    text-decoration: underline;
}

.mt24-announcement__img {
    object-fit: contain;
}

/* Navigation dots */
.mt24-announcement__dots {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 3;
}

.mt24-announcement__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--mt24-radius-full);
    border: none;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 0;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}
.mt24-announcement__dot.is-active {
    background: rgba(255,255,255,0.9);
    width: 16px;
}

/* Close button */
.mt24-announcement__close {
    position: absolute;
    right: var(--mt24-space-sm);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 14px;
    z-index: 3;
    padding: 4px;
    line-height: 1;
}
.mt24-announcement__close:hover { opacity: 1; }

/* Slide Up transition */
.mt24-ab-slide-up-enter, .mt24-ab-slide-up-leave { transition: all var(--mt24-duration-slow) var(--mt24-ease); }
.mt24-ab-slide-up-start { transform: translateY(100%); opacity: 0; }
.mt24-ab-slide-up-end { transform: translateY(0); opacity: 1; }
.mt24-ab-slide-up-out { transform: translateY(-100%); opacity: 0; }

/* Slide Down transition */
.mt24-ab-slide-down-enter, .mt24-ab-slide-down-leave { transition: all var(--mt24-duration-slow) var(--mt24-ease); }
.mt24-ab-slide-down-start { transform: translateY(-100%); opacity: 0; }
.mt24-ab-slide-down-end { transform: translateY(0); opacity: 1; }
.mt24-ab-slide-down-out { transform: translateY(100%); opacity: 0; }

@media (max-width: 767px) {
    .mt24-announcement__text { font-size: inherit; }
    .mt24-announcement__dots { display: none; }
}

/* ================================================================
   CONTENT BLOCK (.mt24-content)
   Templates: default, --card, --overlap, --fullwidth
   ================================================================ */

.mt24-content__title {
    font-size: var(--mt24-font-size-3xl);
    font-weight: 800;
    margin: 0 0 var(--mt24-space-md);
    line-height: 1.2;
}

.mt24-content__body {
    font-size: var(--mt24-font-size-base);
    line-height: 1.7;
    color: inherit;
    opacity: 0.85;
    margin-bottom: var(--mt24-space-md);
}

.mt24-content__body p { margin-bottom: var(--mt24-space-sm); }
.mt24-content__body ul,
.mt24-content__body ol { padding-left: var(--mt24-space-lg); }

.mt24-content__desc {
    font-size: var(--mt24-font-size-base);
    color: inherit;
    opacity: 0.8;
    margin: var(--mt24-space-sm) 0;
}

.mt24-content__cta {
    margin-top: var(--mt24-space-lg);
}

.mt24-content__img {
    width: 100%;
    height: auto;
    display: block;
}

/* Card template */
.mt24-content--card {
    background: var(--mt24-bg);
    padding: var(--mt24-space-xl);
}
.mt24-content--card .mt24-content__img {
    margin: calc(var(--mt24-space-xl) * -1);
    margin-bottom: var(--mt24-space-xl);
    width: calc(100% + var(--mt24-space-xl) * 2);
    max-width: none;
}

/* Fullwidth template — image as background */
.mt24-content--fullwidth {
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
}

.mt24-content__overlay {
    position: relative;
    z-index: 2;
    padding: var(--mt24-space-2xl);
    color: white;
    max-width: 600px;
}

.mt24-content--fullwidth::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}

.mt24-content--fullwidth .mt24-content__title { color: white; }

/* Overlap template — image overlaps a colored background panel */
.mt24-content--overlap {
    position: relative;
    padding: var(--mt24-space-xl) 0;
}

.mt24-content__overlap-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 55%;
    z-index: 0;
}

/* Text left: bg panel on left side */
.mt24-content--overlap-text_left .mt24-content__overlap-bg {
    left: 0;
    border-radius: 0 var(--mt24-radius-xl) var(--mt24-radius-xl) 0;
}

/* Text right: bg panel on right side */
.mt24-content--overlap-text_right .mt24-content__overlap-bg {
    right: 0;
    border-radius: var(--mt24-radius-xl) 0 0 var(--mt24-radius-xl);
}

.mt24-content__overlap-img {
    position: relative;
    z-index: 2;
}

@media (max-width: 767px) {
    .mt24-content__overlap-bg { display: none; }
}

@media (max-width: 767px) {
    .mt24-content__title { font-size: var(--mt24-font-size-2xl); }
    .mt24-content--fullwidth { min-height: 300px !important; }
    .mt24-content__overlay { padding: var(--mt24-space-lg); }
}

/* ================================================================
   TESTIMONIALS (.mt24-testimonial)
   Templates: --card, --bubble, --minimal, --large
   ================================================================ */

.mt24-testimonial {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--mt24-space-lg);
}

.mt24-testimonial__stars {
    display: flex;
    gap: 2px;
    margin-bottom: var(--mt24-space-sm);
    font-size: 14px;
}

.mt24-testimonial__quote {
    font-size: var(--mt24-font-size-sm);
    line-height: 1.7;
    color: var(--mt24-text-secondary);
    margin: 0 0 var(--mt24-space-md);
    flex: 1;
    font-style: italic;
}

.mt24-testimonial__quote--lg {
    font-size: var(--mt24-font-size-xl);
    line-height: 1.6;
}

.mt24-testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    margin-top: auto;
}

.mt24-testimonial__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--mt24-radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.mt24-testimonial__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt24-primary-light);
    color: var(--mt24-primary);
    font-weight: 800;
    font-size: var(--mt24-font-size-lg);
}

.mt24-testimonial__name {
    display: block;
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
}

.mt24-testimonial__role {
    display: block;
    font-size: var(--mt24-font-size-xs);
    color: var(--mt24-text-muted);
}

/* Card template */
.mt24-testimonial--card {
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg);
    transition: all var(--mt24-duration) var(--mt24-ease);
}
.mt24-testimonial--card:hover {
    box-shadow: var(--mt24-shadow-md);
    transform: translateY(-3px);
}

/* Bubble template */
/* Bubble: quote in colored bg, triangle arrow pointing to author below */
.mt24-testimonial--bubble {
    background: none;
    border: none;
    padding: 0;
    gap: 0;
}

.mt24-testimonial--bubble .mt24-testimonial__stars,
.mt24-testimonial--bubble .mt24-testimonial__quote {
    background: var(--mt24-bg-soft);
    margin: 0;
}

.mt24-testimonial--bubble .mt24-testimonial__stars {
    padding: var(--mt24-space-md) var(--mt24-space-lg) 0;
    border-radius: var(--mt24-radius-lg) var(--mt24-radius-lg) 0 0;
    margin-bottom: 0;
}

.mt24-testimonial--bubble .mt24-testimonial__quote {
    padding: var(--mt24-space-sm) var(--mt24-space-lg) var(--mt24-space-lg);
    border-radius: 0 0 var(--mt24-radius-lg) var(--mt24-radius-lg);
    font-style: normal;
    color: var(--mt24-text);
}

.mt24-testimonial--bubble .mt24-testimonial__quote:first-child {
    border-radius: var(--mt24-radius-lg);
    padding-top: var(--mt24-space-lg);
}

.mt24-testimonial__bubble-arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--mt24-bg-soft);
    margin: 0 0 var(--mt24-space-sm) var(--mt24-space-xl);
}

.mt24-testimonial--bubble .mt24-testimonial__author {
    padding: 0 var(--mt24-space-sm);
}

/* Minimal template */
.mt24-testimonial--minimal {
    padding: var(--mt24-space-md) 0;
    border-bottom: 1px solid var(--mt24-border-light);
}

/* Large template */
.mt24-testimonial--large {
    padding: var(--mt24-space-xl);
}
.mt24-testimonial--large .mt24-testimonial__avatar {
    width: 64px;
    height: 64px;
}
.mt24-testimonial--large .mt24-testimonial__stars {
    justify-content: center;
    margin-bottom: var(--mt24-space-md);
}
.mt24-testimonial--large .mt24-testimonial__quote {
    text-align: center;
}
.mt24-testimonial--large .mt24-testimonial__author {
    justify-content: center;
}

@media (max-width: 767px) {
    .mt24-testimonial__quote--lg { font-size: var(--mt24-font-size-lg); }
}

/* ================================================================
   PRODUCT DETAIL PAGE (.mt24-pdp)
   ================================================================ */

/* Gallery */
.mt24-pdp__gallery {
    position: relative;
}

.mt24-pdp__main-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--mt24-radius-lg);
    overflow: hidden;
    background: var(--mt24-bg-soft);
    cursor: zoom-in;
}

.mt24-pdp__main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mt24-pdp__thumbs {
    display: flex;
    gap: var(--mt24-space-sm);
    margin-top: var(--mt24-space-sm);
    overflow-x: auto;
}

.mt24-pdp__thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--mt24-radius);
    overflow: hidden;
    border: 2px solid var(--mt24-border);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-pdp__thumb.is-active,
.mt24-pdp__thumb:hover {
    border-color: var(--mt24-primary);
}

.mt24-pdp__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product Info */
.mt24-pdp__info {
    display: flex;
    flex-direction: column;
    gap: var(--mt24-space-md);
}

.mt24-pdp__title {
    font-size: var(--mt24-font-size-2xl);
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
}

.mt24-pdp__brand {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-muted);
}

.mt24-pdp__brand a {
    color: var(--mt24-primary);
    text-decoration: none;
}

.mt24-pdp__price {
    display: flex;
    align-items: baseline;
    gap: var(--mt24-space-sm);
    flex-wrap: wrap;
}

.mt24-pdp__price-current {
    font-size: var(--mt24-font-size-3xl);
    font-weight: 800;
    color: var(--mt24-primary);
}

.mt24-pdp__price-old {
    font-size: var(--mt24-font-size-lg);
    color: var(--mt24-text-muted);
    text-decoration: line-through;
}

.mt24-pdp__price-discount {
    font-size: var(--mt24-font-size-xs);
    font-weight: 700;
    background: var(--mt24-danger);
    color: white;
    padding: 2px 8px;
    border-radius: var(--mt24-radius);
}

.mt24-pdp__stock {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    font-size: var(--mt24-font-size-sm);
}

.mt24-pdp__stock-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--mt24-radius-full);
    flex-shrink: 0;
}

.mt24-pdp__stock-dot--in { background: var(--mt24-success); }
.mt24-pdp__stock-dot--low { background: var(--mt24-warning); }
.mt24-pdp__stock-dot--out { background: var(--mt24-danger); }

/* Selected variant info */
.mt24-pdp__variant-info {
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    background: var(--mt24-bg-soft);
    border-radius: var(--mt24-radius);
    border-left: 3px solid var(--mt24-primary);
    margin: var(--mt24-space-sm) 0 var(--mt24-space-md);
}

.mt24-pdp__variant-info-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
}

.mt24-pdp__variant-info-row span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Variants */
.mt24-pdp__variant-group {
    margin-bottom: var(--mt24-space-sm);
}

/* ── Variantes en bottom sheet (mobile) ─────────────────────────────
   El trigger, el backdrop y el chrome del panel solo aparecen bajo lg
   (llevan .d-lg-none). En desktop el selector queda inline como siempre. */
.mt24-pdp__variant-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mt24-space-sm);
    width: 100%;
    padding: 12px 14px;
    margin-bottom: var(--mt24-space-sm);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg, 12px);
    background: var(--mt24-bg);
    color: var(--mt24-text);
    cursor: pointer;
    text-align: left;
}
.mt24-pdp__variant-trigger-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mt24-pdp__variant-trigger-title {
    font-size: var(--mt24-font-size-xs, 0.75rem);
    color: var(--mt24-text-muted);
    font-weight: 600;
}
.mt24-pdp__variant-trigger-value {
    font-size: var(--mt24-font-size-sm);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mt24-pdp__variant-trigger .icon-mt24-chevron-right {
    flex-shrink: 0;
    color: var(--mt24-text-muted);
}

.mt24-pdp__variant-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1049;
    background: rgba(0, 0, 0, 0.45);
}

/* Chrome del sheet: oculto salvo en modo bottom sheet (mobile). */
.mt24-pdp__variants-handle,
.mt24-pdp__variants-header,
.mt24-pdp__variants-done {
    display: none;
}

@media (max-width: 991.98px) {
    /* Solo cuando el tenant activó el modo bottom sheet (modificador --sheet).
       Sin él, .mt24-pdp__variants queda inline (selector normal). */
    .mt24-pdp__variants--sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        max-height: 82vh;
        overflow-y: auto;
        padding: 8px var(--mt24-space-lg) calc(var(--mt24-space-lg) + env(safe-area-inset-bottom, 0px));
        background: var(--mt24-bg);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .mt24-pdp__variants--sheet.is-sheet-open {
        transform: translateY(0);
    }
    .mt24-pdp__variants-handle {
        display: block;
        width: 40px;
        height: 4px;
        margin: 4px auto 10px;
        border-radius: 999px;
        background: var(--mt24-border);
    }
    .mt24-pdp__variants-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--mt24-space-md);
    }
    .mt24-pdp__variants-header-title {
        font-weight: 700;
        font-size: var(--mt24-font-size-lg);
    }
    .mt24-pdp__variants-close {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1.25rem;
        line-height: 1;
        color: var(--mt24-text-muted);
        padding: 4px;
    }
    .mt24-pdp__variants-done {
        display: block;
        width: 100%;
        margin-top: var(--mt24-space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mt24-pdp__variants--sheet {
        transition: none;
    }
}

/* Flash del selector de variantes cuando el cliente intenta agregar sin elegir:
   pulso de anillo con el color primario para guiar el ojo. */
.mt24-variant-flash {
    animation: mt24-variant-flash 0.55s ease 2;
    border-radius: var(--mt24-radius, 8px);
}
@keyframes mt24-variant-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
    35% { box-shadow: 0 0 0 3px var(--mt24-primary); }
}
@media (prefers-reduced-motion: reduce) {
    .mt24-variant-flash { animation: none; }
}

body.mt24-sheet-lock {
    overflow: hidden;
}

.mt24-pdp__variant-label {
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    margin-bottom: var(--mt24-space-xs);
}

.mt24-pdp__variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt24-space-xs);
}

.mt24-pdp__variant-btn {
    padding: var(--mt24-space-xs) var(--mt24-space-md);
    border: 2px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    background: var(--mt24-bg);
    font-size: var(--mt24-font-size-sm);
    cursor: pointer;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-pdp__variant-btn:hover { border-color: var(--mt24-primary); }
.mt24-pdp__variant-btn.is-active {
    border-color: var(--mt24-primary);
    background: var(--mt24-primary-light);
    color: var(--mt24-primary);
    font-weight: 600;
}

.mt24-pdp__color-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--mt24-radius-full);
    border: 2px solid var(--mt24-border);
    cursor: pointer;
    transition: all var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-pdp__color-btn:hover { transform: scale(1.1); }
.mt24-pdp__color-btn.is-active {
    border-color: var(--mt24-primary);
    box-shadow: 0 0 0 3px rgba(var(--mt24-primary-rgb), 0.2);
}

/* Quantity */
.mt24-pdp__qty {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    overflow: hidden;
}

.mt24-pdp__qty-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt24-bg-soft);
    border: none;
    cursor: pointer;
    font-size: var(--mt24-font-size-lg);
    color: var(--mt24-text);
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-pdp__qty-btn:hover { background: var(--mt24-bg-muted); }

.mt24-pdp__qty-input {
    width: 50px;
    height: 40px;
    border: none;
    text-align: center;
    font-weight: 600;
    font-size: var(--mt24-font-size-base);
    -moz-appearance: textfield;
}

.mt24-pdp__qty-input::-webkit-inner-spin-button { display: none; }

/* Actions */
.mt24-pdp__actions {
    display: flex;
    gap: var(--mt24-space-sm);
    flex-wrap: wrap;
}

/* Meta */
.mt24-pdp__meta {
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text-muted);
}

.mt24-pdp__meta dt { font-weight: 600; color: var(--mt24-text-secondary); display: inline; }
.mt24-pdp__meta dd { display: inline; margin: 0 var(--mt24-space-md) 0 0; }

/* Reviews */
.mt24-pdp__review {
    padding: var(--mt24-space-md) 0;
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-pdp__review-author {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    margin-bottom: var(--mt24-space-sm);
}

.mt24-pdp__review-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--mt24-radius-full);
    background: var(--mt24-primary-light);
    color: var(--mt24-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--mt24-font-size-sm);
}

/* Rating bars */
.mt24-pdp__rating-bar {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    font-size: var(--mt24-font-size-sm);
    margin-bottom: 4px;
}

.mt24-pdp__rating-track {
    flex: 1;
    height: 8px;
    background: var(--mt24-bg-muted);
    border-radius: var(--mt24-radius-full);
    overflow: hidden;
}

.mt24-pdp__rating-fill {
    height: 100%;
    background: var(--mt24-warning);
    border-radius: var(--mt24-radius-full);
    transition: width .3s;
}

/* Rating summary */
.mt24-pdp__rating-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--mt24-space-xl);
    margin-bottom: var(--mt24-space-xl);
    max-width: 700px;
}

.mt24-pdp__rating-big {
    text-align: center;
}

.mt24-pdp__rating-number {
    font-size: var(--mt24-font-size-4xl);
    font-weight: 800;
    color: var(--mt24-primary);
}

.mt24-pdp__rating-stars {
    display: flex;
    gap: 2px;
    justify-content: center;
    color: var(--mt24-warning);
}

/* Review card */
.mt24-pdp__review-stars {
    display: flex;
    gap: 2px;
    color: var(--mt24-warning);
    margin-bottom: 4px;
}

.mt24-pdp__review-stars i {
    font-size: 14px;
}

/* Share */
.mt24-pdp__share {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
}

.mt24-pdp__share-wrap {
    position: relative;
}

/* Default: opens below */
.mt24-pdp__share-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--mt24-bg);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg);
    box-shadow: var(--mt24-shadow-lg);
    padding: var(--mt24-space-xs) 0;
    min-width: 180px;
    z-index: var(--mt24-z-dropdown);
    margin-top: var(--mt24-space-sm);
}

/* Arrow pointing up (below mode) */
.mt24-pdp__share-dropdown::before,
.mt24-pdp__share-dropdown::after {
    content: '';
    position: absolute;
    left: 24px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}
.mt24-pdp__share-dropdown::before {
    bottom: 100%;
    border-bottom: 8px solid var(--mt24-border);
}
.mt24-pdp__share-dropdown::after {
    bottom: 100%;
    margin-bottom: -1px;
    border-bottom: 8px solid var(--mt24-bg);
}

/* Above mode: opens above */
.mt24-pdp__share-dropdown--above {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--mt24-space-sm);
}

/* Arrow pointing down (above mode) */
.mt24-pdp__share-dropdown--above::before {
    bottom: auto;
    top: 100%;
    border-bottom: none;
    border-top: 8px solid var(--mt24-border);
}
.mt24-pdp__share-dropdown--above::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -1px;
    border-bottom: none;
    border-top: 8px solid var(--mt24-bg);
}

.mt24-pdp__share-item {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    font-size: var(--mt24-font-size-sm);
    color: var(--mt24-text);
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
}

.mt24-pdp__share-item:hover {
    background: var(--mt24-bg-soft);
    color: var(--mt24-primary);
}

.mt24-pdp__share-item i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* Tags */
.mt24-pdp__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt24-space-xs);
    margin-top: var(--mt24-space-md);
}

/* Sections spacing */
.mt24-pdp__section {
    margin-top: var(--mt24-space-xl);
}

.mt24-pdp__section--highlight {
    background: var(--mt24-bg-soft);
    margin-left: calc(var(--mt24-space-md) * -1);
    margin-right: calc(var(--mt24-space-md) * -1);
    padding: var(--mt24-space-xl) var(--mt24-space-md);
    border-radius: var(--mt24-radius-lg);
}

.mt24-pdp__section--highlight .mt24-product-card {
    border: 1px solid var(--mt24-border);
    box-shadow: var(--mt24-shadow-sm);
}
.mt24-pdp__section--highlight .mt24-product-card:hover {
    box-shadow: var(--mt24-shadow-md);
}
.mt24-pdp__section--highlight .mt24-product-card__placeholder {
    background: var(--mt24-border);
    color: var(--mt24-text-muted);
}

/* Spec table */
.mt24-pdp__spec-row {
    display: flex;
    padding: var(--mt24-space-sm) 0;
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-pdp__spec-label {
    flex: 0 0 40%;
    color: var(--mt24-text-muted);
}

.mt24-pdp__spec-value {
    flex: 1;
}

/* Video grid */
.mt24-pdp__video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: var(--mt24-space-md);
}

.mt24-pdp__video-card {
    overflow: hidden;
    border: 1px solid var(--mt24-border-light);
    border-radius: var(--mt24-radius-lg);
}

.mt24-pdp__video-card iframe,
.mt24-pdp__video-card video {
    width: 100%;
    height: 100%;
    border: 0;
}

/* FAQ */
.mt24-pdp__faq-item {
    border-bottom: 1px solid var(--mt24-border-light);
}

.mt24-pdp__faq-btn {
    width: 100%;
    text-align: left;
    padding: var(--mt24-space-md) 0;
    font-weight: 600;
    font-size: var(--mt24-font-size-base);
    color: var(--mt24-text);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mt24-pdp__faq-icon {
    transition: transform .2s;
}

.mt24-pdp__faq-answer {
    padding: 0 0 var(--mt24-space-md) 0;
}

/* Review form */
.mt24-pdp__review-form {
    border: 1px solid var(--mt24-border-light);
    padding: var(--mt24-space-lg);
    margin-bottom: var(--mt24-space-lg);
    max-width: 700px;
    border-radius: var(--mt24-radius-lg);
}

.mt24-pdp__form-group {
    margin-bottom: var(--mt24-space-md);
}

.mt24-pdp__form-label {
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.mt24-pdp__star-picker {
    display: flex;
    gap: 4px;
}

.mt24-pdp__star-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0;
}

/* Admin reply */
.mt24-pdp__admin-reply {
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    margin-top: var(--mt24-space-sm);
    margin-left: var(--mt24-space-lg);
}

/* No reviews */
.mt24-pdp__empty {
    text-align: center;
    padding: var(--mt24-space-xl) 0;
    color: var(--mt24-text-muted);
}

/* Out of stock button */
.mt24-pdp__out-of-stock {
    width: 100%;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Swiper nav buttons */
.mt24-pdp__swiper-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: var(--mt24-bg);
    box-shadow: var(--mt24-shadow-md);
}

.mt24-pdp__swiper-nav--prev { left: -16px; }
.mt24-pdp__swiper-nav--next { right: -16px; }

/* No-image placeholder */
.mt24-pdp__no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--mt24-bg-muted);
    color: var(--mt24-text-muted);
}

/* Sticky Add to Cart Bar */
.mt24-pdp__sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--mt24-z-sticky);
    background: var(--mt24-bg);
    border-top: 1px solid var(--mt24-border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    /* Respeta la safe-area del iPhone (al ocultarse la barra del navegador
       la fija queda pegada al borde inferior). */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* When the sticky ATC bar is visible, lift any other bottom-fixed floats
   (WhatsApp button, scroll-to-top, etc.) so they don't overlap.
   --mt24-bottom-offset is set dynamically via JS to the actual bar height
   + a 12px gap (since the bar height varies by viewport and content). */

.mt24-pdp__sticky-enter { transition: transform 0.3s ease, opacity 0.3s ease; }
.mt24-pdp__sticky-leave { transition: transform 0.2s ease, opacity 0.2s ease; }
[x-transition\:enter-start].mt24-pdp__sticky-bar,
.mt24-pdp__sticky-bar[x-transition\:leave-end] { transform: translateY(100%); opacity: 0; }

/* App-style: stepper de cantidad a la izquierda + CTA con el precio integrado
   ocupando el resto del ancho (tipo delivery). Sin imagen ni nombre. */
.mt24-pdp__sticky-inner {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    /* Aire lateral extra (sobre el del container) para que el stepper y el CTA
       no queden pegados a los bordes / esquinas curvas del teléfono. */
    padding: var(--mt24-space-sm) var(--mt24-space-sm);
}

.mt24-pdp__sticky-qty {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius-lg, 12px);
    overflow: hidden;
}

.mt24-pdp__sticky-qty button {
    width: 40px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--mt24-font-size-lg);
    line-height: 1;
    color: var(--mt24-text);
}

.mt24-pdp__sticky-qty button.is-max {
    opacity: 0.4;
}

.mt24-pdp__sticky-qty span {
    min-width: 28px;
    text-align: center;
    font-weight: 700;
    font-size: var(--mt24-font-size-base);
    font-variant-numeric: tabular-nums;
}

.mt24-pdp__sticky-add {
    flex: 1;
    min-height: 44px;
    border-radius: var(--mt24-radius-lg, 12px);
    font-weight: 700;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.mt24-pdp__sticky-add:active {
    transform: scale(0.98);
}

.mt24-pdp__sticky-add-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

/* Separador "·" entre "Agregar" y el precio dentro del botón. */
.mt24-pdp__sticky-add-price {
    font-weight: 800;
}

.mt24-pdp__sticky-add-price::before {
    content: "·";
    margin-right: 0.5em;
    font-weight: 400;
    opacity: 0.55;
}

/* Feedback "Agregado": micro-pulse (respeta la paleta de la tienda, sin
   forzar verde para no romper la identidad). El check + la vibración
   completan la confirmación. */
.mt24-pdp__sticky-add.is-added {
    animation: mt24-added-pulse 0.32s ease;
}

@keyframes mt24-added-pulse {
    50% { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
    .mt24-pdp__sticky-add.is-added { animation: none; }
}

/* ================================================================
   INLINE NOTICE (.mt24-notice)
   Compact contextual alert — replaces Bootstrap `.alert .alert-*`
   used inside checkout sections (no shipping coverage, login hint, etc.)
   ================================================================ */
.mt24-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    border-radius: var(--mt24-radius);
    border: 1px solid transparent;
    font-size: var(--mt24-font-size-sm);
    line-height: 1.45;
    margin-bottom: var(--mt24-space-md);
}
.mt24-notice > i { flex-shrink: 0; line-height: 1.2; margin-top: 1px; }
.mt24-notice--info {
    background: rgba(var(--mt24-primary-rgb), 0.06);
    color: var(--mt24-primary);
    border-color: rgba(var(--mt24-primary-rgb), 0.18);
}
.mt24-notice--info a { color: var(--mt24-primary); font-weight: 600; }
.mt24-notice--success {
    background: rgba(16, 185, 129, 0.08);
    color: var(--mt24-success);
    border-color: rgba(16, 185, 129, 0.2);
}
.mt24-notice--warning {
    background: rgba(245, 158, 11, 0.08);
    color: #92400e;
    border-color: rgba(245, 158, 11, 0.25);
}
.mt24-notice--danger {
    background: rgba(239, 68, 68, 0.08);
    color: var(--mt24-danger);
    border-color: rgba(239, 68, 68, 0.2);
}

/* ================================================================
   INPUT GROUP (.mt24-input-group)
   Side-by-side input + attached button (e.g. coupon code + Apply).
   Replaces Bootstrap `.input-group .form-control`.
   ================================================================ */
.mt24-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}
/* Flatten the meeting edges of any direct input + button so the corners
   touch and look like a single attached unit. Works for both the BEM
   modifier classes and plain .mt24-input / .mt24-btn children. */
.mt24-input-group > .mt24-input,
.mt24-input-group > .mt24-input-group__input,
.mt24-input-group > input {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}
.mt24-input-group > .mt24-btn,
.mt24-input-group > .mt24-input-group__btn,
.mt24-input-group > button {
    flex: 0 0 auto;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    white-space: nowrap;
}
/* Focus ring on the input shouldn't get clipped by the button */
.mt24-input-group > .mt24-input:focus,
.mt24-input-group > .mt24-input-group__input:focus,
.mt24-input-group > input:focus {
    position: relative;
    z-index: 1;
}

/* Compact variant for tight spaces like the offcanvas footer */
.mt24-input-group--sm {
    font-size: var(--mt24-font-size-sm);
}

/* ================================================================
   RADIO CARD (.mt24-radio-card)
   Selectable card with built-in radio — replaces Bootstrap `.list-group
   .list-group-item-action` pattern used for shipping methods, payment
   methods, invoice type and saved addresses on the checkout.
   ================================================================ */
.mt24-radio-card-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
    overflow: hidden;
}
.mt24-radio-card {
    display: flex;
    align-items: flex-start;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-md);
    background: var(--mt24-bg);
    cursor: pointer;
    transition: background var(--mt24-duration-fast) var(--mt24-ease);
    border: 0;
    border-bottom: 1px solid var(--mt24-border-light);
    margin: 0;
}
.mt24-radio-card:last-child { border-bottom: 0; }
.mt24-radio-card:hover { background: var(--mt24-bg-soft); }
.mt24-radio-card input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--mt24-primary);
    flex-shrink: 0;
}
.mt24-radio-card:has(input[type="radio"]:checked) {
    background: rgba(var(--mt24-primary-rgb), 0.04);
    box-shadow: inset 3px 0 0 var(--mt24-primary);
}
.mt24-radio-card__body {
    flex: 1;
    min-width: 0;
}
.mt24-radio-card__title {
    font-weight: 700;
    color: var(--mt24-text);
    margin-bottom: 2px;
}
.mt24-radio-card__hint {
    color: var(--mt24-text-muted);
    font-size: var(--mt24-font-size-xs);
    line-height: 1.4;
}
.mt24-radio-card__price {
    font-weight: 700;
    margin-left: auto;
    flex-shrink: 0;
}


/* ──────────────────────────────────────────────────────────────
   WhatsApp Pedidos — reusable CTA (.mt24-wa-order-btn)
   ────────────────────────────────────────────────────────────── */
.mt24-wa-order-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--mt24-radius);
    font-weight: 600;
    font-size: var(--mt24-font-size-sm);
    text-decoration: none;
    background: #25d366;
    color: #fff !important;
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    line-height: 1.2;
}

.mt24-wa-order-btn:hover {
    background: #1ebd5a;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.25);
}

.mt24-wa-order-btn i {
    font-size: 1.1em;
}

.mt24-wa-order-btn--primary {
    height: 48px;
    padding: 0 22px;
    font-size: var(--mt24-font-size-base);
}

.mt24-wa-order-btn--secondary {
    background: #fff;
    color: #128c7e !important;
    border: 1.5px solid #25d366;
}

.mt24-wa-order-btn--secondary:hover {
    background: #25d366;
    color: #fff !important;
}

.mt24-wa-order-btn--inline {
    padding: 6px 12px;
    font-size: var(--mt24-font-size-xs);
}

.mt24-wa-order-btn--block {
    width: 100%;
    height: 48px;
}



/* Breathing room when the WA CTA follows another button (PDP add-to-cart row,
   OOS button, cart checkout button, product card "Agotado", etc.). */
.mt24-product-info__add-row + .mt24-wa-order-btn,
.mt24-pdp__out-of-stock + .mt24-wa-order-btn,
.mt24-cart__checkout-btn + .mt24-wa-order-btn,
.mt24-btn + .mt24-wa-order-btn {
    margin-top: var(--mt24-space-sm);
}

/* Preserve the secondary-actions row from collapsing into the WA button. */
.mt24-wa-order-btn + .mt24-product-info__secondary-actions,
.mt24-product-info__add-row + .mt24-product-info__secondary-actions,
.mt24-pdp__out-of-stock + .mt24-product-info__secondary-actions {
    margin-top: var(--mt24-space-md);
}



/* Center text inside the floating badges on product cards. The badge base
   class uses display:inline-flex, so the proper axis is justify-content
   (text-align is a no-op on flex containers). */
.mt24-product-card__badges .mt24-badge,
.mt24-prod-card__badges .mt24-badge {
    justify-content: center;
    text-align: center;
}

/* Equalize UIBlock product card heights regardless of whether the
   action area shows just one button (in stock) or two (out of stock
   with the WhatsApp follow-up). The card itself already grows; we
   stretch the swiper slide and the swiper-wrapper so they stretch the
   full row height instead of rendering at intrinsic height. */
.swiper:has(.mt24-prod-card) .swiper-wrapper {
    align-items: stretch;
}
.swiper-slide:has(.mt24-prod-card),
.mt24-recently-viewed__slide:has(.mt24-prod-card) {
    height: auto;
    display: flex;
}
/* Reset added when the recently-viewed swiper was introduced — solo
   necesitamos width/height al 100% para que las cards llenen su slide.
   `display: flex` se redeclara por seguridad (no rompe nada) pero
   `flex-direction: column` NO debe ir acá: la declaración original en
   línea 10810 ya la setea, y volver a declararla acá (con misma
   especificidad pero más abajo) pisaba las variantes horizontales
   (--horizontal, --compact-horizontal) por orden de cascada. */
.mt24-prod-card {
    display: flex;
    width: 100%;
    height: 100%;
}
.mt24-prod-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Push the action area to the bottom so single-button and double-button
   cards align at the top edge — the difference becomes invisible from
   the row above. */
.mt24-prod-card__btn {
    margin-top: auto;
}
.mt24-prod-card__btn .mt24-wa-order-btn {
    margin-top: var(--mt24-space-sm);
}



/* ──────────────────────────────────────────────────────────────
   Yape/Plin manual proof-of-payment panel (checkout)
   ────────────────────────────────────────────────────────────── */
.mt24-pay-proof {
    margin: -4px 0 var(--mt24-space-md) 0;
    padding: var(--mt24-space-md);
    background: var(--mt24-bg-soft);
    border: 1px solid var(--mt24-border);
    border-radius: var(--mt24-radius);
}

.mt24-pay-proof__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mt24-space-md);
}

@media (min-width: 640px) {
    .mt24-pay-proof__body {
        grid-template-columns: 160px 1fr;
        align-items: start;
    }
}

.mt24-pay-proof__qr {
    background: #fff;
    padding: 8px;
    border-radius: var(--mt24-radius);
    border: 1px solid var(--mt24-border);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mt24-pay-proof__qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}

.mt24-pay-proof__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mt24-pay-proof__step {
    margin: 0;
    color: var(--mt24-text);
    font-size: var(--mt24-font-size-sm);
}

.mt24-pay-proof__step strong {
    color: var(--mt24-primary);
    margin-right: 4px;
}

.mt24-pay-proof__phone {
    margin: 0 0 8px 0;
    font-size: var(--mt24-font-size-lg);
    font-weight: 700;
    color: var(--mt24-text);
    letter-spacing: 0.02em;
}

.mt24-pay-proof__phone i {
    margin-right: 6px;
    color: var(--mt24-primary);
}

.mt24-pay-proof__msg {
    margin: 0 0 var(--mt24-space-sm) 0;
    color: var(--mt24-text-secondary);
    font-size: var(--mt24-font-size-sm);
    line-height: 1.5;
}

.mt24-pay-proof__file {
    padding: 8px;
}



/* ═══════════════════════════════════════════════════════════════════
   UI Blocks — Render contextual por placement (Page Builder v2)
   ═══════════════════════════════════════════════════════════════════
   Los bloques (trust_badges, recently_viewed, etc.) se renderizan con
   wrapping <section><div.mt24-container>...</div></section> pensado en
   secciones full-width del home. Cuando viven en el PDP (pdp_below_buy
   dentro de la columna mt24-product-info, o pdp_bottom al final), ese
   wrapping rompe el layout. Estas reglas resetean el envoltorio y
   adaptan el bloque al contexto.

   La clase ui-block--in-pdp-* la inyecta UIBlockRenderer::render según
   el placement del bloque. Si el bloque se mueve a otra zona, deja de
   aplicar este CSS automáticamente.
═══════════════════════════════════════════════════════════════════ */

/* ── pdp_below_buy: trust_badges al estilo del strip original ─── */
.ui-block--in-pdp-below-buy {
    /* Resetear section: sin padding ni background propio. El layout
       contenedor (.mt24-product-info) ya impone el contexto visual. */
    padding: 0 !important;
    margin: var(--mt24-space-md) 0 0;
    background: transparent !important;
}
.ui-block--in-pdp-below-buy > .mt24-container {
    /* Resetear container Bootstrap-like: sin max-width ni padding */
    padding: 0;
    max-width: none;
    width: 100%;
}
.ui-block--in-pdp-below-buy .row {
    margin: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}
.ui-block--in-pdp-below-buy [class*="col-"] {
    padding: 0;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

/* Replica del look original del trust strip (.mt24-product-info__trust).
   Aplicado al wrapper y a cada feature item para que se vea consistente
   con el diseño anterior — fondo soft, items con separator y border-top
   entre ellos, icono circular blanco con shadow sutil del primary. */
.ui-block--in-pdp-below-buy.ui-block--trust_badges {
    padding: var(--mt24-space-md) !important;
    background: var(--mt24-bg-soft) !important;
    border-radius: var(--mt24-radius-lg);
}
.ui-block--in-pdp-below-buy .mt24-feature--horizontal,
.ui-block--in-pdp-below-buy .mt24-feature--icons,
.ui-block--in-pdp-below-buy .mt24-feature--minimal {
    flex-direction: row;
    align-items: center;
    gap: var(--mt24-space-md);
    padding: 6px 0;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-align: left;
}
.ui-block--in-pdp-below-buy [class*="col-"] + [class*="col-"] .mt24-feature {
    border-top: 1px solid var(--mt24-border-light);
    padding-top: var(--mt24-space-sm);
}
.ui-block--in-pdp-below-buy .mt24-feature__icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--mt24-primary);
    box-shadow: 0 1px 3px rgba(var(--mt24-primary-rgb), 0.18);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.ui-block--in-pdp-below-buy .mt24-feature__icon i {
    font-size: 1.05rem;
}
.ui-block--in-pdp-below-buy .mt24-feature__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}
.ui-block--in-pdp-below-buy .mt24-feature__title {
    margin: 0;
    color: var(--mt24-text);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    line-height: 1.3;
}
.ui-block--in-pdp-below-buy .mt24-feature__desc {
    margin: 2px 0 0;
    color: var(--mt24-text-secondary);
    font-size: var(--mt24-font-size-xs);
    line-height: 1.35;
}

/* ── pdp_bottom: bloques al final del detalle ──────────────────
   El section ya es full-width acá (después de la grid de producto)
   así que casi no hay overrides — solo asegurar que el spacing
   superior matchee al de la sección anterior del PDP. */
.ui-block--in-pdp-bottom {
    margin-top: var(--mt24-space-section);
}
.ui-block--in-pdp-bottom.ui-block--recently_viewed {
    /* recently_viewed ya tiene su propio padding consistente con el
       resto del storefront; solo asegurar separación con el bloque
       previo. */
    margin-top: var(--mt24-space-lg);
}

/* ═══════════════════════════════════════════════════════════════════
   Header — Opciones globales (page builder)
   ═══════════════════════════════════════════════════════════════════
   - .mt24-header--with-icon-labels → muestra texto al lado/debajo de
     los iconos (Favoritos, Carrito, Ingresar). Toggle global del
     setting theme_header_icon_labels.
   - CSS vars --mt24-header-bg / -text / --mt24-nav-bg / -text →
     colores custom del fondo y texto del header y nav row. Se setean
     inline en el <header> via mt24_setting. Si no se setean, el
     header usa los colores del tema (default).
═══════════════════════════════════════════════════════════════════ */

/* Labels de los iconos del header — por default escondidos para no
   romper el layout. Se muestran cuando el wrapper tiene la clase
   con-icon-labels. La posición (debajo o al costado) la decide la
   clase --labels-below / --labels-right que el dispatcher agrega. */
.mt24-header__icon-label {
    display: none;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
}
.mt24-header--with-icon-labels .mt24-header__icon {
    /* Quitar el círculo fijo de 42x42 cuando hay labels — necesitamos
       que el contenedor se ajuste al contenido (icono + texto). */
    width: auto;
    height: auto;
    padding: 6px 10px;
    border-radius: var(--mt24-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mt24-header--with-icon-labels .mt24-header__icon-label {
    display: inline-block;
}
/* Más gap entre iconos cuando hay labels — sino quedan apretados */
.mt24-header--with-icon-labels .mt24-header__actions {
    gap: var(--mt24-space-sm);
}

/* ── Posición del label: debajo del icono (default) ── */
.mt24-header--labels-below .mt24-header__icon {
    flex-direction: column;
    gap: 2px;
}

/* ── Posición del label: al costado derecho del icono ── */
.mt24-header--labels-right .mt24-header__icon {
    flex-direction: row;
    gap: 6px;
}
.mt24-header--labels-right .mt24-header__icon-label {
    /* Cuando va al costado, un poquito más grande se ve mejor */
    font-size: 12px;
}
/* En mobile (< sm) los labels se apretarían — los escondemos abajo
   del breakpoint para mantener el header compacto, sin importar la
   posición elegida. */
@media (max-width: 575.98px) {
    .mt24-header--with-icon-labels .mt24-header__icon-label {
        display: none;
    }
    .mt24-header--with-icon-labels .mt24-header__icon {
        /* Recuperar el círculo fijo en mobile */
        width: 42px;
        height: 42px;
        padding: 0;
        border-radius: var(--mt24-radius-full);
    }
}

/* Color de fondo/texto custom del header — solo aplican si el
   tenant los setea (sino las vars no se emiten y el tema decide). */
/* :not(.mt24-header--transparent) — la variante transparent es un
   tratamiento visual autocontenido (fondo transparente sobre el hero,
   texto blanco). Los overrides de color inline del tenant (--mt24-header-bg /
   --mt24-nav-bg / etc.) tienen mayor especificidad ([style*=] cuenta como
   clase) y pisaban al transparent cuando el tenant venía de otra plantilla
   con colores custom. Excluyendo transparent, la variante siempre gana. */
.mt24-header:not(.mt24-header--transparent)[style*="--mt24-header-bg"] .mt24-header__main {
    background: var(--mt24-header-bg);
}
.mt24-header:not(.mt24-header--transparent)[style*="--mt24-header-text"] .mt24-header__main,
.mt24-header:not(.mt24-header--transparent)[style*="--mt24-header-text"] .mt24-header__main a,
.mt24-header:not(.mt24-header--transparent)[style*="--mt24-header-text"] .mt24-header__icon,
.mt24-header:not(.mt24-header--transparent)[style*="--mt24-header-text"] .mt24-header__icon-label {
    color: var(--mt24-header-text);
}
.mt24-header:not(.mt24-header--transparent)[style*="--mt24-nav-bg"] .mt24-header__nav {
    background: var(--mt24-nav-bg);
}
/* Color del texto del nav row top-level. ALCANZADO de forma específica:
   solo el wrapper del nav + los links propios del row (.mt24-header__nav-links)
   + el trigger del mega-menú. NO entra a los <a> del panel del mega-menú
   (categorías/subcategorías) — esos tienen sus propias vars opcionales
   (--mt24-megamenu-title / --mt24-megamenu-link) o caen al color default
   del theme. El bug viejo (.mt24-header__nav a) capturaba TODOS los <a>
   descendientes y propagaba el color del nav al megamenú, rompiendo la
   jerarquía visual del panel. */
.mt24-header:not(.mt24-header--transparent)[style*="--mt24-nav-text"] .mt24-header__nav,
.mt24-header:not(.mt24-header--transparent)[style*="--mt24-nav-text"] .mt24-header__nav-links a,
.mt24-header:not(.mt24-header--transparent)[style*="--mt24-nav-text"] .mt24-megamenu__trigger {
    color: var(--mt24-nav-text);
}

/* Borde del nav row (arriba/abajo del menú). El CSS base usa
   --mt24-border-light como default. Cuando el cliente setea
   --mt24-nav-border desde el page builder, ese valor sobreescribe el
   color de ambos bordes. Convención de la setting:
     auto (default)  → no emit la var → cae al border-light legacy
     ''  explícito   → emit 'transparent' → bordes invisibles
     hex             → emit ese color → bordes coloreados */
.mt24-header:not(.mt24-header--transparent)[style*="--mt24-nav-border"] .mt24-header__nav {
    border-top-color: var(--mt24-nav-border);
    border-bottom-color: var(--mt24-nav-border);
}

/* Mega-menú: colores OPCIONALES e INDEPENDIENTES del nav row. Solo se
   aplican si el cliente seteó las vars desde el page builder. Sin
   override, los items del megamenú conservan los colores del theme. */
.mt24-header[style*="--mt24-megamenu-title"] .mt24-megamenu__col-title,
.mt24-header[style*="--mt24-megamenu-title"] .mt24-megamenu__col-title a,
.mt24-header[style*="--mt24-megamenu-title"] .mt24-megamenu__title {
    color: var(--mt24-megamenu-title);
}
.mt24-header[style*="--mt24-megamenu-link"] .mt24-megamenu__sub-list li a,
.mt24-header[style*="--mt24-megamenu-link"] .mt24-megamenu__link {
    color: var(--mt24-megamenu-link);
}

/* ═══════════════════════════════════════════════════════════════════
   Chips de categorías (mobile) — scroll horizontal estilo tabs de app.
   Solo se muestra bajo lg (el componente lleva .d-lg-none); en desktop el
   sidebar ya trae el árbol de categorías.
   ═══════════════════════════════════════════════════════════════════ */
.mt24-cat-chips {
    margin: 0 0 var(--mt24-space-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mt24-cat-chips::-webkit-scrollbar {
    display: none;
}
.mt24-cat-chips__track {
    display: inline-flex;
    gap: var(--mt24-space-sm);
    padding-bottom: 2px;
}
.mt24-cat-chips__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--mt24-border);
    background: var(--mt24-bg);
    color: var(--mt24-text);
    font-size: var(--mt24-font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mt24-cat-chips__chip:active {
    transform: scale(0.97);
}
.mt24-cat-chips__chip.is-active {
    background: var(--mt24-primary);
    border-color: var(--mt24-primary);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   Mobile Bottom Bar — Navegación fija inferior estilo app
   ═══════════════════════════════════════════════════════════════════
   Setting: theme_mobile_bottom_bar
     - off (default)  → componente no se renderea, sin estilos extra
     - default        → barra plana al fondo con 5 iconos compactos
     - with_labels    → idem + texto debajo de cada icono
     - floating       → "isla" con border-radius y margen del borde

   La barra solo se ve en mobile (< lg = 992px). En desktop se esconde
   con `display: none` para no estorbar.

   El padding-bottom del body lo aplica `.has-mobile-bottom-bar` para
   que el contenido no quede tapado por la barra fija.
═══════════════════════════════════════════════════════════════════ */

.mt24-mobile-bar {
    display: none;
}

@media (max-width: 991.98px) {
    .mt24-mobile-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: var(--mt24-bg, #ffffff);
        border-top: 1px solid var(--mt24-border-light, color-mix(in srgb, currentColor 10%, transparent));
        align-items: stretch;
        justify-content: space-around;
        padding: 4px 0 max(4px, env(safe-area-inset-bottom, 4px));
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
        /* Oculta al cargar la página (look app): aparece al hacer scroll para
           no tapar el hero — clave con el hero mobile 9:16 en la home. El JS
           del componente hace toggle de .is-visible según window.scrollY. */
        transform: translateY(calc(100% + 24px));
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }
    .mt24-mobile-bar.is-visible {
        transform: translateY(0);
    }
    .mt24-mobile-bar__item {
        flex: 1;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        background: transparent;
        border: 0;
        color: var(--mt24-text, #1f2937);
        text-decoration: none;
        font-size: 10.5px;
        line-height: 1.1;
        cursor: pointer;
        transition: color 150ms;
        min-height: 48px; /* tap target */
    }
    .mt24-mobile-bar__icon-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 999px;
        line-height: 1;
        transition: background-color 180ms ease, color 180ms ease, transform 120ms ease;
    }
    .mt24-mobile-bar__icon-wrap i {
        font-size: 22px;
    }
    .mt24-mobile-bar__item:hover .mt24-mobile-bar__icon-wrap {
        background: color-mix(in srgb, var(--mt24-primary, #4680FF) 12%, transparent);
    }
    .mt24-mobile-bar__item:active .mt24-mobile-bar__icon-wrap {
        transform: scale(0.9);
    }
    /* Estado ACTIVO (página actual): color primario + highlight sólido. */
    .mt24-mobile-bar__item.is-active {
        color: var(--mt24-primary, #4680FF);
    }
    .mt24-mobile-bar__item.is-active .mt24-mobile-bar__icon-wrap {
        background: color-mix(in srgb, var(--mt24-primary, #4680FF) 16%, transparent);
        color: var(--mt24-primary, #4680FF);
    }
    .mt24-mobile-bar__badge {
        position: absolute;
        top: -4px;
        right: -8px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: var(--mt24-primary, #4680FF);
        color: #fff;
        border-radius: 8px;
        font-size: 9.5px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }
    .mt24-mobile-bar__label {
        font-size: 10px;
        font-weight: 500;
        white-space: nowrap;
    }
    .mt24-mobile-bar__item.is-active .mt24-mobile-bar__label {
        font-weight: 700;
    }

    /* Variante "floating" — isla redondeada con margen del borde */
    .mt24-mobile-bar--floating {
        left: 20px;
        right: 20px;
        bottom: max(20px, env(safe-area-inset-bottom, 20px));
        /* Esquinas totalmente redondeadas (stadium), look app. */
        border-radius: 999px;
        border-top: 0;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
        padding: 6px 10px;
        /* Fondo semi-transparente con blur (efecto glass, look app). */
        background: color-mix(in srgb, var(--mt24-bg, #fff) 75%, transparent);
        -webkit-backdrop-filter: blur(16px) saturate(1.5);
        backdrop-filter: blur(16px) saturate(1.5);
    }

    /* ── Variantes "pill" y "pill_floating" (Material You): el item activo — y
       también en hover — se expande a un pill horizontal con icono + etiqueta;
       el resto quedan solo-icono. pill_floating además es una isla flotante. ── */
    .mt24-mobile-bar--pill,
    .mt24-mobile-bar--pill_floating {
        justify-content: space-between;
        gap: 2px;
        /* Pills compactos centrados (sin estirar). El stretch heredado + el
           padding env() del contenedor flex hacía que el pill edge-to-edge no
           reservara bien la safe-area del iPhone. */
        align-items: center;
    }
    /* Pill edge-to-edge (no flotante): barra más alta con más aire arriba/abajo
       para que los pills no queden pegados al borde inferior (los iconos se ven
       más arriba y con mejor tap target, como el indicador). */
    .mt24-mobile-bar--pill {
        padding-top: 8px;
        padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
        justify-content: center;
    }
    .mt24-mobile-bar--pill .mt24-mobile-bar__item,
    .mt24-mobile-bar--pill_floating .mt24-mobile-bar__item {
        flex: 0 1 auto;
        flex-direction: row;
        gap: 6px;
        padding: 10px 14px;
        border-radius: 999px;
        min-height: 48px;
        transition: background-color 200ms ease, color 200ms ease;
    }
    .mt24-mobile-bar--pill .mt24-mobile-bar__icon-wrap,
    .mt24-mobile-bar--pill_floating .mt24-mobile-bar__icon-wrap {
        width: auto;
        height: auto;
        background: transparent !important;
        transform: none !important;
    }
    .mt24-mobile-bar--pill .mt24-mobile-bar__label,
    .mt24-mobile-bar--pill_floating .mt24-mobile-bar__label {
        display: none;
        font-size: 12.5px;
        font-weight: 700;
    }
    /* Hover: se expande y muestra la etiqueta (igual que el activo). */
    .mt24-mobile-bar--pill .mt24-mobile-bar__item:hover,
    .mt24-mobile-bar--pill_floating .mt24-mobile-bar__item:hover,
    .mt24-mobile-bar--pill .mt24-mobile-bar__item.is-active,
    .mt24-mobile-bar--pill_floating .mt24-mobile-bar__item.is-active {
        flex: 0 0 auto;
        background: color-mix(in srgb, var(--mt24-primary, #4680FF) 15%, transparent);
        color: var(--mt24-primary, #4680FF);
    }
    .mt24-mobile-bar--pill .mt24-mobile-bar__item:hover .mt24-mobile-bar__label,
    .mt24-mobile-bar--pill_floating .mt24-mobile-bar__item:hover .mt24-mobile-bar__label,
    .mt24-mobile-bar--pill .mt24-mobile-bar__item.is-active .mt24-mobile-bar__label,
    .mt24-mobile-bar--pill_floating .mt24-mobile-bar__item.is-active .mt24-mobile-bar__label {
        display: inline;
    }
    /* pill_floating: isla flotante glass, esquinas totalmente redondeadas. */
    .mt24-mobile-bar--pill_floating {
        left: 20px;
        right: 20px;
        bottom: max(20px, env(safe-area-inset-bottom, 20px));
        border-radius: 999px;
        border-top: 0;
        padding: 6px 8px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
        background: color-mix(in srgb, var(--mt24-bg, #fff) 75%, transparent);
        -webkit-backdrop-filter: blur(16px) saturate(1.5);
        backdrop-filter: blur(16px) saturate(1.5);
    }

    /* ── Variante "indicator": línea superior sobre el item activo + icono
       primario, sin pill de fondo. Limpio y app-like. ── */
    .mt24-mobile-bar--indicator .mt24-mobile-bar__item {
        position: relative;
    }
    .mt24-mobile-bar--indicator .mt24-mobile-bar__item.is-active .mt24-mobile-bar__icon-wrap {
        background: transparent;
    }
    .mt24-mobile-bar--indicator .mt24-mobile-bar__item.is-active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 26px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--mt24-primary, #4680FF);
    }

    /* ── Variante "circle": el item activo es un círculo sólido primario con
       el icono en blanco (solo-icono). ── */
    .mt24-mobile-bar--circle .mt24-mobile-bar__item.is-active {
        color: var(--mt24-primary-contrast, #fff);
    }
    .mt24-mobile-bar--circle .mt24-mobile-bar__item.is-active .mt24-mobile-bar__icon-wrap {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: var(--mt24-primary, #4680FF);
        color: var(--mt24-primary-contrast, #fff);
    }

    /* ── Variante "dark": isla oscura tipo glass con pill activo primario. ── */
    .mt24-mobile-bar--dark {
        left: 20px;
        right: 20px;
        bottom: max(20px, env(safe-area-inset-bottom, 20px));
        border-radius: 999px;
        border-top: 0;
        justify-content: space-between;
        gap: 2px;
        padding: 7px 10px;
        background: color-mix(in srgb, #171b26 86%, transparent);
        color: rgba(255, 255, 255, 0.72);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
        -webkit-backdrop-filter: blur(14px) saturate(1.4);
        backdrop-filter: blur(14px) saturate(1.4);
    }
    .mt24-mobile-bar--dark .mt24-mobile-bar__item {
        flex: 0 1 auto;
        flex-direction: row;
        gap: 6px;
        padding: 8px 12px;
        border-radius: 999px;
        min-height: 44px;
        color: rgba(255, 255, 255, 0.72);
        transition: background-color 200ms ease, color 200ms ease;
    }
    .mt24-mobile-bar--dark .mt24-mobile-bar__icon-wrap {
        width: auto;
        height: auto;
        background: transparent !important;
        transform: none !important;
    }
    .mt24-mobile-bar--dark .mt24-mobile-bar__label {
        display: none;
        font-size: 12.5px;
        font-weight: 700;
    }
    /* Hover: se expande a pill primario y muestra la etiqueta (como el activo). */
    .mt24-mobile-bar--dark .mt24-mobile-bar__item:hover,
    .mt24-mobile-bar--dark .mt24-mobile-bar__item.is-active {
        flex: 0 0 auto;
        background: var(--mt24-primary, #4680FF);
        color: var(--mt24-primary-contrast, #fff);
    }
    .mt24-mobile-bar--dark .mt24-mobile-bar__item:hover .mt24-mobile-bar__icon-wrap,
    .mt24-mobile-bar--dark .mt24-mobile-bar__item.is-active .mt24-mobile-bar__icon-wrap {
        color: var(--mt24-primary-contrast, #fff);
    }
    .mt24-mobile-bar--dark .mt24-mobile-bar__item:hover .mt24-mobile-bar__label,
    .mt24-mobile-bar--dark .mt24-mobile-bar__item.is-active .mt24-mobile-bar__label {
        display: none;
    }

    /* ── Variante "fab": item central elevado como botón circular primario;
       el resto con etiquetas debajo. ── */
    .mt24-mobile-bar--fab .mt24-mobile-bar__item--fab {
        flex: 0 0 auto;
        margin-top: -26px;
        justify-content: flex-start;
    }
    .mt24-mobile-bar--fab .mt24-mobile-bar__item--fab .mt24-mobile-bar__icon-wrap {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--mt24-primary, #4680FF);
        color: var(--mt24-primary-contrast, #fff);
        box-shadow: 0 6px 16px color-mix(in srgb, var(--mt24-primary, #4680FF) 45%, transparent);
    }
    .mt24-mobile-bar--fab .mt24-mobile-bar__item--fab .mt24-mobile-bar__icon-wrap i {
        font-size: 26px;
    }
    .mt24-mobile-bar--fab .mt24-mobile-bar__item--fab .mt24-mobile-bar__label {
        display: none;
    }
    /* El FAB nunca toma el highlight de activo (es acción, no destino). */
    .mt24-mobile-bar--fab .mt24-mobile-bar__item--fab.is-active .mt24-mobile-bar__icon-wrap {
        background: var(--mt24-primary, #4680FF);
    }

    /* ── Animación estilo Instagram: SOLO las barras flotantes se encogen al
       scrollear hacia abajo y vuelven a su tamaño al scrollear arriba. El JS
       del componente pone/quita .is-shrunk según la dirección del scroll. Las
       barras edge-to-edge (default, pill, etc.) no aplican. ── */
    .mt24-mobile-bar--floating.is-visible.is-shrunk,
    .mt24-mobile-bar--dark.is-visible.is-shrunk,
    .mt24-mobile-bar--pill_floating.is-visible.is-shrunk {
        transform: translateY(0) scale(0.85);
        transform-origin: bottom center;
    }

    /* Body con bottom bar activa — agregar padding inferior para que
       el contenido (footer principalmente) no quede tapado. La
       altura aproximada de la barra es 56-66px según variant. */
    body.has-mobile-bottom-bar {
        padding-bottom: 64px;
    }
    body.has-mobile-bottom-bar--with_labels {
        padding-bottom: 72px;
    }
    body.has-mobile-bottom-bar--floating,
    body.has-mobile-bottom-bar--dark,
    body.has-mobile-bottom-bar--pill_floating {
        padding-bottom: 84px;
    }
    body.has-mobile-bottom-bar--fab {
        padding-bottom: 76px;
    }

    /* Ajuste para el botón flotante de WhatsApp — sino se monta sobre
       la mobile bar y tapa el último icono. La clase real del wrapper
       es .mt24-whatsapp (no .mt24-whatsapp-float, hubo un typo en el
       commit anterior). Subimos según variant. */
    body.has-mobile-bottom-bar .mt24-whatsapp {
        bottom: 80px;
    }
    body.has-mobile-bottom-bar--with_labels .mt24-whatsapp {
        bottom: 90px;
    }
    body.has-mobile-bottom-bar--floating .mt24-whatsapp,
    body.has-mobile-bottom-bar--dark .mt24-whatsapp,
    body.has-mobile-bottom-bar--pill_floating .mt24-whatsapp {
        bottom: 100px;
    }
    body.has-mobile-bottom-bar--fab .mt24-whatsapp {
        bottom: 92px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Buscador en SHEET full-screen (mobile) — independiente del header.
   Se abre desde el icono Buscar de la barra inferior (search-sheet-open).
   ═══════════════════════════════════════════════════════════════════ */
.mt24-search-sheet {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--mt24-bg);
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
    /* Oculto por OPACIDAD (no display:none) para que el input siga en el DOM y
       sea enfocable al abrir → en iOS el teclado aparece de una con el cursor.
       pointer-events:none deja pasar los toques al contenido cuando está cerrado. */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.mt24-search-sheet.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
.mt24-search-sheet__bar {
    display: flex;
    align-items: center;
    gap: var(--mt24-space-sm);
    padding: var(--mt24-space-sm) var(--mt24-space-md);
    border-bottom: 1px solid var(--mt24-border-light);
}
.mt24-search-sheet__form {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--mt24-bg-muted, #f1f5f9);
    border-radius: 999px;
    padding: 0 12px;
    height: 42px;
    min-width: 0;
}
.mt24-search-sheet__icon {
    color: var(--mt24-text-muted);
    flex-shrink: 0;
}
.mt24-search-sheet__input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    font-size: var(--mt24-font-size-base);
    color: var(--mt24-text);
    min-width: 0;
}
.mt24-search-sheet__clear {
    background: none;
    border: 0;
    color: var(--mt24-text-muted);
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
    display: inline-flex;
}
.mt24-search-sheet__cancel {
    background: none;
    border: 0;
    color: var(--mt24-primary);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.mt24-search-sheet__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--mt24-space-lg);
}
/* Desktop: el sheet se usa como overlay de búsqueda en el header `minimal`
   (solo muestra el icono lupa). Centramos barra + resultados en una columna
   para que se lea intencional y no disperso a todo el ancho de pantalla. */
@media (min-width: 992px) {
    .mt24-search-sheet__bar,
    .mt24-search-sheet__body {
        max-width: 720px;
        margin-inline: auto;
        width: 100%;
    }
    .mt24-search-sheet__bar {
        padding-top: var(--mt24-space-lg);
    }
}
/* Los items de sugerencia reusan las clases del header; aseguramos padding. */
.mt24-search-sheet .mt24-search-suggest__group-title,
.mt24-search-sheet .mt24-search-suggest__item,
.mt24-search-sheet .mt24-search-suggest__cat,
.mt24-search-sheet .mt24-search-suggest__view-all {
    padding-left: var(--mt24-space-md);
    padding-right: var(--mt24-space-md);
}
.mt24-search-sheet__hint,
.mt24-search-sheet__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mt24-space-sm);
    text-align: center;
    color: var(--mt24-text-muted);
    padding: var(--mt24-space-3xl) var(--mt24-space-lg);
}
.mt24-search-sheet__hint i,
.mt24-search-sheet__empty i {
    font-size: 32px;
    opacity: 0.4;
}
.mt24-search-sheet__empty-text strong {
    color: var(--mt24-text);
}
.mt24-search-sheet__empty-hint {
    font-size: var(--mt24-font-size-sm);
}

/* ═══════════════════════════════════════════════════════════════════
   Header — Variantes EXCLUSIVAS para mobile
   ═══════════════════════════════════════════════════════════════════
   El header desktop sigue siendo el setting theme_header_variant
   (horizontal/centered/minimal/transparent). Estas reglas extra
   sobreescriben el layout SOLO en breakpoint mobile (< 992px) cuando
   el tenant elige una variante mobile específica:

     .mt24-header--m-compact      Hamburger + logo CENTRO + carrito
     .mt24-header--m-with_search  Logo + iconos / Search row 2
     .mt24-header--m-drawer       Hamburger + logo + 3 iconos derecha

   En desktop estas clases no hacen nada (no hay media query desktop
   que las matchee) — el header desktop se ve igual.
═══════════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {

    /* ── Compact ─────────────────────────────────────────────────
       Lo más minimalista: 3 elementos en una sola fila. Sin topbar,
       sin search visible (clic en la lupa lo abre), sin nav inline.
       Logo CENTRADO entre la hamburguesa y el carrito. */
    .mt24-header--m-compact .mt24-header__top,
    .mt24-header--m-compact .mt24-header__nav,
    .mt24-header--m-compact .mt24-header__inline-nav {
        display: none;
    }
    .mt24-header--m-compact .mt24-header__main > .mt24-header__nav-container {
        position: relative;
        justify-content: center;
    }
    .mt24-header--m-compact .mt24-header__logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: auto;
    }
    .mt24-header--m-compact .mt24-header__logo img,
    .mt24-header--m-compact .mt24-header__logo-text {
        max-height: 32px;
    }
    .mt24-header--m-compact .mt24-header__actions {
        margin-left: auto;
    }
    /* Sólo dejamos el botón de cart en actions (search-mobile-toggle
       opcional). Wishlist y user dropdown se ocultan para reducir
       ruido — el cliente accede via menu drawer. */
    .mt24-header--m-compact .mt24-header__actions > a[href="/wishlist"],
    .mt24-header--m-compact .mt24-header__actions > .mt24-header__user,
    .mt24-header--m-compact .mt24-header__actions > a[href="/login"] {
        display: none;
    }

    /* ── With Search ─────────────────────────────────────────────
       Row 1: hamburger + logo + iconos. Row 2: search bar full-width
       siempre visible. Topbar oculto. Search ya no es un panel
       overlay sino un campo permanente. */
    .mt24-header--m-with_search .mt24-header__top,
    .mt24-header--m-with_search .mt24-header__nav,
    .mt24-header--m-with_search .mt24-header__inline-nav {
        display: none;
    }
    /* Forzar el search del page builder a estilo desktop pero
       solo en este variant mobile. */
    .mt24-header--m-with_search .mt24-header__search {
        display: flex !important;
        order: 99;            /* después de la fila principal */
        flex: 0 0 100%;        /* ocupa toda la fila siguiente */
        max-width: none;
        width: 100%;
        margin: 8px 0 0;
    }
    .mt24-header--m-with_search .mt24-header__search .mt24-search-form {
        width: 100%;
    }
    .mt24-header--m-with_search .mt24-header__main > .mt24-header__nav-container {
        flex-wrap: wrap;
        row-gap: 4px;
    }
    /* Ocultar el toggle de search-mobile (la lupa) — ya hay search
       fijo abajo, sería redundante. */
    .mt24-header--m-with_search .mt24-header__mobile-search-wrap {
        display: none;
    }

    /* ── Drawer ──────────────────────────────────────────────────
       Estilo app móvil. Hamburger + logo (a su lado) + 3 iconos
       derecha (heart, cart, login). Sin topbar, sin nav, search
       en el menú lateral. */
    .mt24-header--m-drawer .mt24-header__top,
    .mt24-header--m-drawer .mt24-header__nav,
    .mt24-header--m-drawer .mt24-header__inline-nav,
    .mt24-header--m-drawer .mt24-header__mobile-search-wrap {
        display: none;
    }
    .mt24-header--m-drawer .mt24-header__logo {
        flex: 0 1 auto;
        margin-left: 4px;
    }
    .mt24-header--m-drawer .mt24-header__logo img,
    .mt24-header--m-drawer .mt24-header__logo-text {
        max-height: 28px;
    }
    .mt24-header--m-drawer .mt24-header__actions {
        margin-left: auto;
        gap: 2px;
    }
    /* En drawer mostramos heart + cart + user (3 iconos), pero
       más compactos */
    .mt24-header--m-drawer .mt24-header__actions > a[href="/wishlist"],
    .mt24-header--m-drawer .mt24-header__actions > .mt24-header__user,
    .mt24-header--m-drawer .mt24-header__actions > a[href="/login"] {
        display: inline-flex;
    }
    .mt24-header--m-drawer .mt24-header__icon {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Header — Variantes nuevas (sprint mejoras post-feedback)
   ═══════════════════════════════════════════════════════════════════
   Layouts adicionales que se diferencian visualmente de las 4
   originales (horizontal/centered/minimal/transparent). Mismo HTML
   base, distinto CSS reorganizando la composición.
═══════════════════════════════════════════════════════════════════ */

/* ── Stacked ─────────────────────────────────────────────────────
   3 filas full-info estilo MercadoLibre / Amazon:
   - Topbar prominente (visible siempre)
   - Main row con SEARCH BIG centrado + logo izq + iconos der
   - Nav row debajo con mega-menú + nav links
   Buena para tiendas con catálogo grande. */
.mt24-header--stacked .mt24-header__top {
    padding: var(--mt24-space-sm) 0;
}
.mt24-header--stacked .mt24-header__main {
    padding: var(--mt24-space-md) var(--mt24-space-md);
    background: var(--mt24-bg-soft, color-mix(in srgb, currentColor 3%, transparent));
}
.mt24-header--stacked .mt24-header__search {
    flex: 1;
    max-width: 700px;
    margin: 0 var(--mt24-space-lg);
}
.mt24-header--stacked .mt24-header__search .mt24-search-form__inner {
    height: 44px;
}
.mt24-header--stacked .mt24-header__nav {
    background: transparent;
    border-top: 1px solid var(--mt24-border-light);
}
.mt24-header--stacked .mt24-header__inline-nav {
    display: none;  /* nav vive en la fila inferior, no en main row */
}

/* ── Sidebar Left ────────────────────────────────────────────────
   Header en columna VERTICAL fija a la izquierda (240px). Cambia
   radicalmente el layout: logo arriba, nav vertical en el medio,
   iconos abajo. El <main> page-content gana padding-left:240px
   automáticamente vía body class. Look modern-app / SaaS dashboard.
   En mobile cae al header horizontal estándar (toda la verticalidad
   en mobile gastaría toda la pantalla). */
@media (min-width: 992px) {
    .mt24-header--sidebar_left {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 240px;
        z-index: 1030;
        display: flex;
        flex-direction: column;
        border-right: 1px solid var(--mt24-border-light);
        background: var(--mt24-header-bg, var(--mt24-bg, #fff));
        overflow-y: auto;
        overflow-x: hidden;  /* prevenir que el mega-menú/nav desborde y meta scroll horizontal al body */
    }
    .mt24-header--sidebar_left .mt24-header__top {
        display: none !important;   /* topbar no encaja en columna 240px */
    }
    .mt24-header--sidebar_left .mt24-header__main {
        padding: var(--mt24-space-lg) var(--mt24-space-md);
        flex: 0 0 auto;
    }
    .mt24-header--sidebar_left .mt24-header__main > .mt24-header__nav-container {
        flex-direction: column;
        align-items: stretch;
        gap: var(--mt24-space-lg);
        padding: 0;
    }
    .mt24-header--sidebar_left .mt24-header__logo {
        text-align: center;
        padding-bottom: var(--mt24-space-md);
        border-bottom: 1px solid var(--mt24-border-light);
    }
    .mt24-header--sidebar_left .mt24-header__logo img {
        max-width: 100%;
        height: auto;
    }
    .mt24-header--sidebar_left .mt24-header__search {
        width: 100%;
    }
    .mt24-header--sidebar_left .mt24-header__inline-nav {
        display: flex !important;
        flex-direction: column;
        gap: var(--mt24-space-xs);
        font-size: var(--mt24-font-size-sm);
        font-weight: 500;
        width: 100%;
    }
    .mt24-header--sidebar_left .mt24-header__inline-nav a {
        color: var(--mt24-text);
        text-decoration: none;
        padding: var(--mt24-space-sm) var(--mt24-space-md);
        border-radius: var(--mt24-radius-md);
        transition: background var(--mt24-duration-fast) var(--mt24-ease),
                    color var(--mt24-duration-fast) var(--mt24-ease);
    }
    .mt24-header--sidebar_left .mt24-header__inline-nav a:hover,
    .mt24-header--sidebar_left .mt24-header__inline-nav a.active {
        background: color-mix(in srgb, var(--mt24-primary) 12%, transparent);
        color: var(--mt24-primary);
    }
    .mt24-header--sidebar_left .mt24-header__actions {
        margin-top: auto;
        flex-direction: row;
        justify-content: space-around;
        padding-top: var(--mt24-space-md);
        border-top: 1px solid var(--mt24-border-light);
        width: 100%;
    }
    /* Con labels de texto (Favoritos / Carrito / Ingresar), la fila horizontal
       no cabe en el rail de 240px y se desborda en una sola línea. Cuando hay
       labels, apilamos las acciones en COLUMNA — cada una como icono + texto en
       su propia fila (igual que el nav de arriba). Sin labels se mantiene la
       fila de iconos original. Scopeado a --with-icon-labels para no tocar el
       caso solo-iconos. */
    .mt24-header--sidebar_left.mt24-header--with-icon-labels .mt24-header__actions {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--mt24-space-xs);
    }
    .mt24-header--sidebar_left.mt24-header--with-icon-labels .mt24-header__actions .mt24-header__icon {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--mt24-space-sm);
        width: 100%;
        padding: var(--mt24-space-sm) var(--mt24-space-md);
        border-radius: var(--mt24-radius-md);
    }
    /* Permitir que un label largo baje de línea en vez de forzar overflow. */
    .mt24-header--sidebar_left.mt24-header--with-icon-labels .mt24-header__icon-label {
        white-space: normal;
        text-align: left;
    }
    .mt24-header--sidebar_left .mt24-header__nav {
        display: none !important;  /* mega-menú no encaja en sidebar vertical, !important para ganar a otras variants */
    }
    /* Esconder hamburguesa: el menú ya está visible */
    .mt24-header--sidebar_left .d-lg-none {
        display: none !important;
    }
    /* Body class agregada por el layout cuando esta variant está activa.
       overflow-x:hidden por defensa — si algún hijo del main mide >100vw
       (catálogos con grid wide, hero, etc.) no debería meter scroll
       horizontal global por culpa del padding-left del sidebar. */
    body.has-sidebar-header {
        padding-left: 240px;
        overflow-x: hidden;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Footer — Variantes nuevas (sprint mejoras post-feedback)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Bordered columns ───────────────────────────────────────────
   4 cols con border-top de color primary + padding generoso. Look
   premium tipo SaaS modernos (Stripe, Linear). */
.mt24-footer--bordered_columns .mt24-footer__main {
    padding-top: var(--mt24-space-2xl, 48px);
    padding-bottom: var(--mt24-space-2xl, 48px);
    border-top: 3px solid var(--mt24-primary);
}
.mt24-footer--bordered_columns .mt24-footer__title {
    color: var(--mt24-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    margin-bottom: var(--mt24-space-md);
}
.mt24-footer--bordered_columns .mt24-footer__links a {
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    display: inline-block;
    transition: color var(--mt24-duration-fast) var(--mt24-ease),
                border-color var(--mt24-duration-fast) var(--mt24-ease);
}
.mt24-footer--bordered_columns .mt24-footer__links a:hover {
    color: var(--mt24-primary);
    border-bottom-color: var(--mt24-primary);
}

/* ── Logo centered small ────────────────────────────────────────
   Logo arriba centrado (chico) + links inline debajo + copyright
   muy fino al final. Footer compacto para tiendas que no necesitan
   columnas de info. */
.mt24-footer--logo_centered_small .mt24-footer__main {
    padding: var(--mt24-space-lg) var(--mt24-space-md);
    text-align: center;
}
.mt24-footer--logo_centered_small .mt24-footer__logo,
.mt24-footer--logo_centered_small .mt24-footer__logo-text {
    display: inline-block;
    margin: 0 auto var(--mt24-space-md);
    max-height: 36px;
}
.mt24-footer--logo_centered_small .mt24-footer__inline-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--mt24-space-md);
    margin-bottom: var(--mt24-space-sm);
    font-size: var(--mt24-font-size-sm);
}
.mt24-footer--logo_centered_small .mt24-footer__inline-links li { list-style: none; }
.mt24-footer--logo_centered_small .mt24-footer__social {
    justify-content: center;
    margin-bottom: var(--mt24-space-sm);
}
.mt24-footer--logo_centered_small .mt24-footer__bottom {
    border-top: 1px solid var(--mt24-border-light);
    padding-top: var(--mt24-space-sm);
    text-align: center;
    font-size: 11px;
    opacity: 0.7;
}

/* ── Compact line ───────────────────────────────────────────────
   Una sola fila horizontal: logo izq + links inline centrados +
   redes + copyright der. Para tiendas donde el footer ya no es
   destino sino solo cierre legal. */
.mt24-footer--compact_line .mt24-footer__main {
    padding: var(--mt24-space-md) var(--mt24-space-md);
}
.mt24-footer--compact_line .mt24-footer__main > .mt24-footer__container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mt24-space-md);
    justify-content: space-between;
}
.mt24-footer--compact_line .mt24-footer__logo,
.mt24-footer--compact_line .mt24-footer__logo-text {
    flex: 0 0 auto;
    max-height: 28px;
    margin: 0;
}
.mt24-footer--compact_line .mt24-footer__inline-links {
    display: flex;
    gap: var(--mt24-space-md);
    flex: 1;
    justify-content: center;
    font-size: var(--mt24-font-size-sm);
    list-style: none;
    padding: 0;
    margin: 0;
}
.mt24-footer--compact_line .mt24-footer__social {
    flex: 0 0 auto;
    gap: 6px;
}

/* ==========================================================================
   Skeleton loaders (shimmer) — reutilizable en Quick View, buscador y catálogo.
   Da forma al contenido mientras llega la respuesta AJAX (evita el vacío/spinner
   abrupto). Respeta prefers-reduced-motion. Sirve en mobile y desktop.
   ========================================================================== */
.mt24-skel {
    position: relative;
    overflow: hidden;
    /* Gris propio del skeleton (no --mt24-bg-soft, que es casi blanco #F9FAFB
       y se confundía con el fondo del modal). Visible sobre blanco. */
    background: var(--mt24-skel-bg, #e2e5ea);
    border-radius: var(--mt24-radius-sm, 6px);
}
.mt24-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--mt24-surface, #fff) 65%, transparent),
        transparent
    );
    animation: mt24-shimmer 1.4s ease-in-out infinite;
}
@keyframes mt24-shimmer {
    to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .mt24-skel::after { animation: none; }
}

.mt24-skel-line { height: 12px; border-radius: 999px; }
.mt24-skel-line--sm { height: 10px; }
.mt24-skel-line--lg { height: 20px; }

/* ── Quick View skeleton (2 columnas: imagen + info) ── */
.mt24-quickview__skel-img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--mt24-radius, 10px);
}
.mt24-quickview__skel-lines {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 6px;
}

/* ── Buscador (sheet + dropdown desktop): filas de sugerencia ── */
.mt24-search-skel { padding: 6px 0; }
.mt24-search-skel__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px var(--mt24-space-md, 16px);
}
.mt24-search-skel__thumb {
    width: 46px;
    height: 46px;
    border-radius: var(--mt24-radius-sm, 6px);
    flex-shrink: 0;
}
.mt24-search-skel__lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* En el dropdown desktop el skeleton vive dentro del contenedor .mt24-search-suggest */
.mt24-search-suggest--loading { padding-block: 4px; }

/* ── Catálogo: card skeleton (mismo contenedor .mt24-product-card para
      heredar el sizing/gap del grid en mobile y desktop) ── */
.mt24-product-card--skel { pointer-events: none; }
.mt24-product-card--skel .mt24-product-card__image {
    aspect-ratio: 1;
}
.mt24-product-card--skel .mt24-skel-img {
    width: 100%;
    height: 100%;
}
.mt24-product-card--skel .mt24-product-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}