:root {
    --store-purple: #392481;
    --store-purple-dark: #2d1b69;
    --store-purple-soft: #f2effb;
    --store-green: #15803d;
    --store-border: #dfe7ef;
    --store-text: #40546a;
    --store-title: #203247;
    --store-footer-start: #edf5ff;
    --store-footer-end: #dbe8f5;
    --store-cart-layer: 2147483600;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    padding-top: 0 !important;
    background: #fff;
}

.store-site-header,
.store-site-header * {
    box-sizing: border-box;
    text-shadow: none !important;
}

/* ==========================================================
   HEADER EN TRES FILAS REALES
   Sobrescribe únicamente el layout genérico de .mn-header.
   No es fixed y no usa JavaScript para colocarse.
   ========================================================== */
.store-site-header {
    position: relative !important;
    inset: auto !important;
    z-index: 1000 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #e9eef4 !important;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .07) !important;
    transform: none !important;
    transition: none !important;
}

.store-site-header .mn-header.store-header,
.store-site-header .mn-header,
.store-site-header .store-header {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: none !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
    align-items: initial !important;
    justify-content: initial !important;
}

/* Fila 1: ventas, ayuda y cuenta. */
.store-site-header .store-service-bar {
    position: relative !important;
    display: block !important;
    flex: none !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2f6 !important;
    background: #fff !important;
    color: var(--store-text) !important;
    font-size: 11px !important;
}

.store-site-header .store-service-bar-inner {
    position: relative !important;
    display: flex !important;
    float: none !important;
    width: 100% !important;
    max-width: 1440px !important;
    min-height: 36px !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    margin: 0 auto !important;
    padding: 0 28px !important;
    background: transparent !important;
}

.store-service-bar-sales,
.store-service-bar-links,
.store-service-bar-link {
    display: inline-flex !important;
    align-items: center !important;
}

.store-service-bar-sales {
    flex: 0 0 auto !important;
    gap: 6px !important;
    margin-right: auto !important;
    color: var(--store-text) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.store-service-bar-sales i,
.store-service-bar-sales strong,
.store-service-bar-link i {
    color: var(--store-purple) !important;
}

.store-service-bar-links {
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.store-service-bar-link {
    min-height: 34px !important;
    gap: 6px !important;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--store-purple) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.store-service-bar-link:hover {
    background: var(--store-purple-soft) !important;
    color: var(--store-purple-dark) !important;
    opacity: 1 !important;
}

/* Filas 2 y 3: logo/buscador/acciones y rubros. */
.store-site-header .store-header-shell {
    position: relative !important;
    display: block !important;
    flex: none !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 1440px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 10px 28px 8px !important;
    background: #fff !important;
}

.store-site-header .store-header-top {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 52px !important;
    grid-template-columns: minmax(180px, 235px) minmax(360px, 1fr) auto auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.store-header-brand,
.store-header-search {
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.store-header-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.store-header-brand .logo {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 235px !important;
    height: 48px !important;
    margin: 0 !important;
}

.store-header-brand .logo img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 48px !important;
    object-fit: contain !important;
}

.store-header-search,
.store-header-smart-search,
.store-header-smart-search form,
.store-system-context {
    width: 100% !important;
    max-width: none !important;
}

.store-header-smart-search form,
.store-header-smart-search input,
.store-header-smart-search button {
    min-height: 42px !important;
}

.store-header-smart-search input {
    border-radius: 12px !important;
}

.store-system-context {
    min-height: 42px !important;
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    border: 1px solid var(--store-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--store-title) !important;
}

.store-system-context-copy {
    min-width: 0 !important;
    display: grid !important;
    line-height: 1.2 !important;
}

.store-system-context-copy strong,
.store-system-context-copy small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.store-system-context-copy small {
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 10px !important;
}

.store-header-main-checkout,
.store-header-main-cart {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 13px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.store-header-main-checkout {
    border: 1px solid #86efac !important;
    background: #dcfce7 !important;
    color: var(--store-green) !important;
}

.store-header-main-cart {
    position: relative !important;
    border: 1px solid #d9d2ee !important;
    background: #fff !important;
    color: var(--store-purple) !important;
    cursor: pointer !important;
}

.store-header-main-checkout:hover,
.store-header-main-cart:hover {
    transform: translateY(-1px) !important;
}

.store-header-main-cart-count {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: var(--store-purple) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 900 !important;
}

.store-site-header .store-header-menu-row {
    position: relative !important;
    display: flex !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 46px !important;
    align-items: center !important;
    margin: 8px 0 0 !important;
    padding: 7px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid #eeeaf7 !important;
    background: transparent !important;
}

.store-header-menu-row .sticky-nav,
.store-header-menu-row .nav-desk,
.store-header-menu-row .mn-main-menu {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.store-system-direct-list {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    list-style: none !important;
}

.store-system-direct-list > li {
    display: block !important;
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.store-site-header .store-system-direct-link {
    position: relative !important;
    display: inline-flex !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #2d3d50 !important;
    box-shadow: none !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
}

.store-site-header .store-system-direct-link > i {
    width: auto !important;
    margin: 0 !important;
    color: var(--store-purple) !important;
    font-size: 14px !important;
}

.store-site-header .store-system-direct-link > span {
    color: inherit !important;
}

.store-site-header .store-system-direct-link:hover {
    border-color: #d9d2ee !important;
    background: var(--store-purple-soft) !important;
    color: var(--store-purple-dark) !important;
}

.store-site-header .store-system-direct-link.active,
.store-site-header .store-system-direct-link.active:hover,
.store-site-header .store-system-direct-link[aria-current="page"] {
    border-color: var(--store-purple) !important;
    background: var(--store-purple) !important;
    color: #fff !important;
    box-shadow: 0 5px 13px rgba(57, 36, 129, .18) !important;
}

.store-site-header .store-system-direct-link.active > i,
.store-site-header .store-system-direct-link.active > span,
.store-site-header .store-system-direct-link.active:hover > i,
.store-site-header .store-system-direct-link.active:hover > span,
.store-site-header .store-system-direct-link[aria-current="page"] > i,
.store-site-header .store-system-direct-link[aria-current="page"] > span {
    color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Navegación móvil de rubros. */
.store-current-system-badge {
    margin: 0 14px 10px !important;
    padding: 9px 11px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid var(--store-border) !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    color: var(--store-title) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.store-system-icon-rail {
    margin: 0 14px 14px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

.store-system-icon-rail a {
    min-height: 76px !important;
    padding: 10px 7px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 7px !important;
    border: 1px solid #d9d2ee !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--store-purple) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-decoration: none !important;
}

.store-system-icon-rail a.active,
.store-system-icon-rail a[aria-current="page"] {
    border-color: var(--store-purple) !important;
    background: var(--store-purple) !important;
    color: #fff !important;
}

.store-system-icon-rail a.active i,
.store-system-icon-rail a.active span,
.store-system-icon-rail a[aria-current="page"] i,
.store-system-icon-rail a[aria-current="page"] span {
    color: #fff !important;
}

@media (max-width: 1199.98px) {
    .store-site-header .store-service-bar-inner,
    .store-site-header .store-header-shell {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    .store-site-header .store-header-top {
        grid-template-columns: minmax(145px, 190px) minmax(240px, 1fr) auto auto !important;
        gap: 8px !important;
    }

    .store-site-header .store-system-direct-link {
        padding-right: 9px !important;
        padding-left: 9px !important;
        font-size: 10.8px !important;
    }
}

@media (max-width: 991.98px) {
    .store-site-header .store-header-menu-row {
        display: none !important;
    }

    .store-site-header .store-service-bar-inner {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }

    .store-site-header .store-service-bar-inner::-webkit-scrollbar {
        display: none !important;
    }

    .store-service-bar-sales {
        margin-right: 8px !important;
    }

    .store-service-bar-links {
        flex: 0 0 auto !important;
    }
}

@media (max-width: 767.98px) {
    .store-site-header .store-service-bar-inner,
    .store-site-header .store-header-shell {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .store-service-bar-sales > span,
    .store-service-bar-link > span,
    .store-service-bar-link--tutorial {
        display: none !important;
    }

    .store-service-bar-link {
        width: 31px !important;
        min-width: 31px !important;
        height: 31px !important;
        min-height: 31px !important;
        justify-content: center !important;
        padding: 0 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 9px !important;
        background: #f8fafc !important;
    }

    .store-site-header .store-header-top {
        grid-template-columns: minmax(82px, 112px) minmax(0, 1fr) 38px 38px !important;
        min-height: 46px !important;
        gap: 6px !important;
    }

    .store-header-brand .logo,
    .store-header-brand .logo img {
        max-height: 40px !important;
    }

    .store-header-main-checkout,
    .store-header-main-cart {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
    }

    .store-header-main-checkout span,
    .store-header-main-cart-label {
        display: none !important;
    }

    .store-header-main-cart-count {
        position: absolute !important;
        top: -5px !important;
        right: -5px !important;
        min-width: 16px !important;
        height: 16px !important;
        font-size: 8px !important;
    }
}

        /* ==========================================================
           CARRITO: OCULTO AL CARGAR Y SOBRE TODA LA INTERFAZ
           ========================================================== */
        .desktop-cart-widget {
            position: fixed !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100dvh !important;
            z-index: var(--store-cart-layer) !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        .desktop-cart-widget.active {
            visibility: visible !important;
            pointer-events: auto !important;
        }

        .desktop-cart-overlay {
            position: absolute !important;
            inset: 0 !important;
            z-index: 1 !important;
            display: block !important;
            background: rgba(15, 23, 42, .58) !important;
            opacity: 0 !important;
            visibility: hidden !important;
            transition: opacity .2s ease, visibility .2s ease !important;
        }

        .desktop-cart-widget.active .desktop-cart-overlay {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .desktop-cart-panel {
            position: absolute !important;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            z-index: 2 !important;
            width: min(420px, 100%) !important;
            height: 100dvh !important;
            display: flex !important;
            flex-direction: column !important;
            background: #fff !important;
            transform: translateX(105%) !important;
            transition: transform .25s ease !important;
            box-shadow: -18px 0 45px rgba(15, 23, 42, .18) !important;
        }

        .desktop-cart-widget.active .desktop-cart-panel {
            transform: translateX(0) !important;
        }

        body.store-cart-open {
            overflow: hidden !important;
        }

        .gtranslate_wrapper {
            z-index: 15000 !important;
        }

        /* ==========================================================
           FOOTER: UN SOLO DEGRADADO Y SVG ORIGINALES
           ========================================================== */
        .sofiapps-store-footer {
            width: 100%;
            margin-top: 30px;
            overflow: hidden;
            background: linear-gradient(135deg, var(--store-footer-start), var(--store-footer-end)) !important;
            color: var(--store-text) !important;
            border-top: 1px solid rgba(47, 82, 111, .16);
        }

        .sofiapps-footer-main {
            padding-top: 44px;
            padding-bottom: 24px;
        }

        .sofiapps-footer-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 30px;
            padding-bottom: 28px;
            border-bottom: 1px solid rgba(47, 82, 111, .16);
        }

        .sofiapps-footer-column h4 {
            margin: 0 0 16px;
            color: var(--store-title) !important;
            font-size: 13px;
            font-weight: 900;
            letter-spacing: .075em;
            text-transform: uppercase;
        }

        .sofiapps-footer-links {
            margin: 0;
            padding: 0;
            display: grid;
            gap: 10px;
            list-style: none;
        }

        .sofiapps-footer-links a {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--store-text) !important;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.45;
            text-decoration: none;
        }

        .sofiapps-footer-links a:hover {
            color: var(--store-title) !important;
        }

        .sofiapps-footer-links i {
            width: 18px;
            color: #496b8b !important;
            text-align: center;
        }

        .sofiapps-footer-brand {
            padding: 30px 16px 20px;
            display: grid;
            justify-items: center;
            gap: 11px;
            text-align: center;
        }

        .sofiapps-footer-brand img {
            display: block;
            width: auto;
            max-width: 220px;
            max-height: 72px;
            object-fit: contain;
            filter: none !important;
        }

        .sofiapps-footer-brand p {
            max-width: 720px;
            margin: 0;
            color: #607286 !important;
            font-size: 14px;
            line-height: 1.65;
        }

        .sofiapps-footer-social {
            padding: 22px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            border-top: 1px solid rgba(47, 82, 111, .16);
            background: transparent !important;
        }

        .sofiapps-footer-social a {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 0 !important;
            border-radius: 10px;
            background: transparent !important;
            overflow: visible !important;
            text-decoration: none;
        }

        .sofiapps-footer-social a:hover {
            background: rgba(255, 255, 255, .45) !important;
            transform: translateY(-2px);
        }

        .sofiapps-footer-social img {
            display: block !important;
            width: 32px !important;
            height: 32px !important;
            max-width: 32px !important;
            max-height: 32px !important;
            object-fit: contain !important;
            opacity: 1 !important;
            visibility: visible !important;
            filter: none !important;
            mix-blend-mode: normal !important;
            background: transparent !important;
        }

        .sofiapps-footer-legal {
            border-top: 1px solid rgba(47, 82, 111, .16);
            background: transparent !important;
        }

        .sofiapps-footer-legal-row {
            min-height: 58px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px 18px;
            color: #607286 !important;
            font-size: 12px;
            text-align: center;
        }

        .sofiapps-footer-legal-links {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px 18px;
        }

        .sofiapps-footer-legal-links a {
            color: #40546a !important;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
        }

        @media (max-width: 991.98px) {
            .sofiapps-footer-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767.98px) {
            .sofiapps-footer-grid {
                grid-template-columns: 1fr;
                gap: 24px;
            }
        }