/* ================================================================
   KRONHOS E-COMMERCE - COMPONENTES COMPARTIDOS
   Moderniza las clases existentes sin cambiar controles WebForms.
   ================================================================ */
/* ================================================================
   FASE 6.16 - TOKENS TIPOGRAFICOS GLOBALES
   Toda regla tipografica de los themes modernos debe consumir
   estas variables. Los themes pueden sobrescribirlas sin tocar
   selectores de componentes.
   ================================================================ */
.kr-ecommerce {
    --kr-ecom-type-zero: 0;
    --kr-ecom-type-2xs: 10px;
    --kr-ecom-type-xs: 11px;
    --kr-ecom-type-xs-plus: 11.5px;
    --kr-ecom-type-sm: 12px;
    --kr-ecom-type-sm-plus: 12.5px;
    --kr-ecom-type-md: 13px;
    --kr-ecom-type-md-plus: 14px;
    --kr-ecom-type-lg: 15px;
    --kr-ecom-type-xl: 16px;
    --kr-ecom-type-2xl: 18px;
    --kr-ecom-type-3xl: 20px;
    --kr-ecom-type-4xl: 22px;
    --kr-ecom-type-legacy-em: 1.55em;
    --kr-ecom-type-title-sm-fluid: clamp(16px, 1.5vw, 20px);
    --kr-ecom-type-title-md-fluid: clamp(17px, 2vw, 22px);
    --kr-ecom-type-title-lg-fluid: clamp(20px, 2vw, 28px);
    --kr-ecom-type-title-xl-fluid: clamp(22px, 2.5vw, 32px);
    --kr-ecom-leading-none: 0;
    --kr-ecom-leading-tightest: 1.15;
    --kr-ecom-leading-tight: 1.2;
    --kr-ecom-leading-snug: 1.25;
    --kr-ecom-leading-compact: 1.3;
    --kr-ecom-leading-normal-tight: 1.35;
    --kr-ecom-leading-card-title: 1.38;
    --kr-ecom-leading-normal: 1.4;
    --kr-ecom-leading-comfortable: 1.45;
    --kr-ecom-leading-relaxed: 1.5;
    --kr-ecom-leading-relaxed-plus: 1.55;
    --kr-ecom-leading-loose: 1.6;
    --kr-ecom-leading-loosest: 1.65;
    --kr-ecom-tracking-none: 0;
    --kr-ecom-tracking-tight-xs: -0.005em;
    --kr-ecom-tracking-tight-sm: -0.01em;
    --kr-ecom-tracking-tight-md: -0.012em;
    --kr-ecom-tracking-tight-lg: -0.015em;
    --kr-ecom-tracking-tight-xl: -0.018em;
    --kr-ecom-tracking-tight-2xl: -0.02em;
    --kr-ecom-tracking-open: 0.01em;
    --kr-ecom-tracking-wide: 0.04em;
}

/* Imagen de producto inválida: fallback general para los themes modernos. */
.kr-ecommerce .kr-image-fallback-host {
    position: relative !important;
    overflow: hidden;
    background: var(--kr-ecom-surface-alt);
}

.kr-ecommerce .kr-image-fallback-host .kr-image-invalid {
    opacity: 0 !important;
}

.kr-ecommerce .kr-image-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 140px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px dashed var(--kr-ecom-border-strong);
    border-radius: inherit;
    color: var(--kr-ecom-muted);
    background:
        linear-gradient(145deg, var(--kr-ecom-surface-alt), var(--kr-ecom-surface));
    text-align: center;
    pointer-events: none;
}

.kr-ecommerce .kr-image-fallback__icon {
    width: clamp(34px, 18%, 58px);
    height: auto;
    fill: currentColor;
    opacity: .7;
}

.kr-ecommerce .kr-image-fallback__text {
    max-width: 160px;
    font-family: var(--kr-ecom-font);
    font-size: var(--kr-ecom-type-sm);
    font-weight: var(--kr-ecom-weight-medium);
    line-height: var(--kr-ecom-leading-normal);
}

.kr-ecommerce .kr-image-fallback-host .imagen_pr,
.kr-ecommerce .kr-image-fallback-host .kr-product-image,
.kr-ecommerce .kr-image-fallback-host .kr-detail-image {
    position: relative;
    z-index: 1;
}

.kr-ecommerce .kr-image-fallback-host [data-kr-zoom-trigger],
.kr-ecommerce .kr-image-fallback-host [data-kr-zoom-help] {
    display: none !important;
}

/* ================================================================
   LOADER MODERNO POR THEME
   Reutiliza el marcado existente de Cats.Master.
   clasico-original conserva la imagen y el comportamiento historico.
   ================================================================ */

html body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .loader-wrapper {
    position: fixed !important;
    inset: 0 !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    background: var(--kr-ecom-bg) !important;
    color: var(--kr-ecom-text) !important;
    opacity: 1;
    isolation: isolate;
    z-index: 999999 !important;
}

    html body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .loader-wrapper::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--kr-ecom-primary) 12%, transparent) 0, transparent 32%), var(--kr-ecom-bg);
    }

    html body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .loader-wrapper::after {
        content: "Cargando";
        position: absolute;
        top: calc(50% + 62px);
        left: 50%;
        color: var(--kr-ecom-muted, var(--kr-ecom-text)) !important;
        font-family: var(--kr-ecom-body-font, var(--kr-ecom-font)) !important;
        font-size: var(--kr-ecom-type-sm, 12px) !important;
        font-weight: 600;
        line-height: 1;
        letter-spacing: .12em;
        text-transform: uppercase;
        transform: translateX(-50%);
        animation: kr-ecom-loader-label 1.35s ease-in-out infinite;
    }

html body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .loader {
    position: relative !important;
    display: block !important;
    box-sizing: border-box;
    width: 78px !important;
    height: 78px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
}

    html body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .loader::before,
    html body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .loader::after {
        content: "";
        position: absolute;
        box-sizing: border-box;
        border-radius: 50%;
    }

    html body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .loader::before {
        inset: 0;
        border: 3px solid color-mix(in srgb, var(--kr-ecom-primary) 18%, transparent);
        border-top-color: var(--kr-ecom-primary);
        border-right-color: var(--kr-ecom-accent);
        animation: kr-ecom-loader-spin .9s linear infinite;
    }

    html body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .loader::after {
        inset: 9px;
        border: 2px solid color-mix(in srgb, var(--kr-ecom-accent) 14%, transparent);
        border-right-color: var(--kr-ecom-primary);
        border-bottom-color: var(--kr-ecom-accent);
        animation: kr-ecom-loader-spin-reverse 1.25s linear infinite;
    }

html body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .loader-inner {
    position: absolute !important;
    inset: 18px !important;
    z-index: 2;
    display: grid !important;
    align-items: center;
    justify-items: center;
    width: auto !important;
    height: auto !important;
    border: 1px solid color-mix(in srgb, var(--kr-ecom-primary) 24%, var(--kr-ecom-border)) !important;
    border-radius: 50% !important;
    background: var(--kr-ecom-surface) !important;
    color: var(--kr-ecom-primary) !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--kr-ecom-primary) 18%, transparent);
    animation: kr-ecom-loader-core 1.35s ease-in-out infinite;
}

    html body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .loader-inner::before {
        content: "shopping_cart";
        color: inherit;
        font-family: "Material Symbols Rounded" !important;
        font-size: 21px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        line-height: 1;
        letter-spacing: normal !important;
        text-transform: none !important;
        white-space: nowrap;
        direction: ltr;
        font-feature-settings: "liga" !important;
        -webkit-font-feature-settings: "liga" !important;
        font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    }

    html body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .loader-inner img {
        display: none !important;
    }

@keyframes kr-ecom-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes kr-ecom-loader-spin-reverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes kr-ecom-loader-core {
    0%, 100% {
        transform: scale(.94);
    }

    50% {
        transform: scale(1);
    }
}

@keyframes kr-ecom-loader-label {
    0%, 100% {
        opacity: .48;
    }

    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .loader::before,
    html body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .loader::after,
    html body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .loader-inner,
    html body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .loader-wrapper::after {
        animation: none !important;
    }
}

/* ================================================================
   REDES SOCIALES DEL FOOTER
   Los SVG usan currentColor para integrarse con cada theme.
   ================================================================ */

.kr-social-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kr-social-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    color: inherit;
    line-height: 1;
    text-decoration: none !important;
}

.kr-social-icon {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    overflow: visible;
}

.kr-social-icon--facebook path {
    fill: currentColor;
    stroke: none;
}

.kr-social-icon--x path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kr-social-icon--instagram rect,
.kr-social-icon--instagram circle:not(.kr-social-icon__dot) {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kr-social-icon--instagram .kr-social-icon__dot {
    fill: currentColor;
    stroke: none;
}

body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-social-link {
    border: 1px solid color-mix(in srgb, var(--kr-ecom-footer-text) 38%, transparent);
    border-radius: 50%;
    color: var(--kr-ecom-footer-text) !important;
    background: color-mix(in srgb, var(--kr-ecom-footer-text) 7%, transparent);
    transition: color var(--kr-ecom-transition), background-color var(--kr-ecom-transition), border-color var(--kr-ecom-transition), transform var(--kr-ecom-transition);
}

    body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-social-link:hover,
    body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-social-link:focus-visible {
        border-color: var(--kr-ecom-footer-text);
        background: var(--kr-ecom-footer-text);
        color: var(--kr-ecom-footer-bg) !important;
        transform: translateY(-2px);
        outline: none;
    }

    body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-social-link:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--kr-ecom-footer-text) 24%, transparent);
    }

@media (prefers-reduced-motion: reduce) {
    body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-social-link {
        transition: none;
    }
}


/* Cabecera y búsqueda */
.kr-ecommerce .cabecera {
    min-height: 44px;
    border-bottom: 1px solid var(--kr-ecom-border);
    color: var(--kr-ecom-muted);
}

.kr-ecommerce .cabecera_tel,
.kr-ecommerce .cabecera_login {
    font-size: var(--kr-ecom-top-font-size);
}

.kr-ecommerce .menusup,
.kr-ecommerce .menuUserName,
.kr-ecommerce #LoginStatus1 {
    color: var(--kr-ecom-text) !important;
    font-family: var(--kr-ecom-font) !important;
    font-size: var(--kr-ecom-top-font-size) !important;
    font-weight: var(--kr-ecom-weight-medium);
    text-decoration: none !important;
}

.kr-ecommerce .divLoginCss {
    display: flex;
    min-height: 96px;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 14px 0;
}

.kr-ecommerce .cabLogo {
    width: min(250px, 26vw);
    height: 70px;
}

.kr-ecommerce .cabLogoPeq {
    height: 34px;
    width: 120px;
}

.kr-ecommerce .cabLogoIn,
.kr-ecommerce .fitimageNew {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kr-ecommerce .cabLoginNew {
    width: min(760px, 68%);
}

.kr-ecommerce .divOpNew {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.kr-ecommerce .divOpTextBox {
    width: 100% !important;
    flex: 1 1 auto;
}

.kr-ecommerce .divOpNew .botonAdd {
    min-width: 108px;
    margin: 0 !important;
}

.kr-ecommerce .completionList {
    max-height: 360px !important;
    overflow: auto;
    border: 1px solid var(--kr-ecom-border) !important;
    border-radius: var(--kr-ecom-radius) !important;
    background: var(--kr-ecom-surface) !important;
    box-shadow: var(--kr-ecom-shadow-lg);
    padding: 6px !important;
    z-index: 50000;
}

.kr-ecommerce .listItem,
.kr-ecommerce .itemHighlighted {
    min-height: 50px;
    margin: 2px 0 !important;
    border-radius: var(--kr-ecom-radius-sm);
    background: var(--kr-ecom-surface) !important;
    color: var(--kr-ecom-text) !important;
    font-size: var(--kr-ecom-type-md) !important;
    padding: 10px 12px !important;
    text-align: left;
    text-transform: none;
}

.kr-ecommerce .itemHighlighted {
    background: var(--kr-ecom-primary-soft) !important;
}

.kr-ecommerce .CabResumen {
    width: 340px;
    border: 1px solid var(--kr-ecom-border) !important;
    border-radius: var(--kr-ecom-radius) !important;
    background: var(--kr-ecom-surface) !important;
    box-shadow: var(--kr-ecom-shadow-lg) !important;
    color: var(--kr-ecom-text) !important;
    padding: 20px !important;
}

/* Menú superior y ruta */
.kr-ecommerce .menu_sup_nuevo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin: 0 !important;
    border: 1px solid var(--kr-ecom-border) !important;
    border-right: 0 !important;
    border-left: 0 !important;
    background: var(--kr-ecom-surface);
    padding: 8px 0 !important;
}

.kr-ecommerce .menuupcab {
    display: inline-flex;
}

.kr-ecommerce .upmenu {
    display: inline-flex !important;
    min-height: 34px;
    align-items: center;
    border-radius: var(--kr-ecom-radius-sm);
    color: var(--kr-ecom-text) !important;
    font-family: var(--kr-ecom-font) !important;
    font-size: var(--kr-ecom-main-menu-font-size) !important;
    font-weight: var(--kr-ecom-weight-medium);
    padding: 7px 15px !important;
    text-decoration: none !important;
}

    .kr-ecommerce .upmenu:hover {
        background: var(--kr-ecom-primary-soft);
        color: var(--kr-ecom-primary) !important;
    }

.kr-ecommerce .upmenudiv {
    display: none !important;
}

.kr-ecommerce .divRuta,
.kr-ecommerce .divRuta2 {
    margin: 14px 0 !important;
    border: 1px solid var(--kr-ecom-border);
    border-radius: var(--kr-ecom-radius-sm);
    background: var(--kr-ecom-surface-alt) !important;
    color: var(--kr-ecom-muted) !important;
    font-size: var(--kr-ecom-breadcrumb-font-size) !important;
    text-transform: none !important;
}

.kr-ecommerce .rutacss {
    color: var(--kr-ecom-muted) !important;
    font-weight: var(--kr-ecom-weight-medium);
    text-decoration: none !important;
}

/* Estructura principal y categorías */
.kr-ecommerce .divMaster {
    width: 100%;
    max-width: var(--kr-ecom-content-width);
    margin: 0 auto;
}

    .kr-ecommerce .divMaster > .row {
        display: flex;
        align-items: flex-start;
        gap: var(--kr-ecom-gap);
    }

.kr-ecommerce .column1,
.kr-ecommerce .column3 {
    flex: 0 0 230px;
    width: 230px;
    border: 1px solid var(--kr-ecom-border);
    border-radius: var(--kr-ecom-radius);
    background: var(--kr-ecom-surface);
    box-shadow: var(--kr-ecom-shadow-sm);
    padding: 14px;
}

.kr-ecommerce .column2 {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}

.kr-ecommerce .letramenu,
.kr-ecommerce .DLSCategoria {
    display: block;
    width: 100%;
    border-radius: var(--kr-ecom-radius-sm);
    color: var(--kr-ecom-text) !important;
    font-size: var(--kr-ecom-category-font-size);
    line-height: var(--kr-ecom-leading-normal-tight);
    padding: 8px 10px;
    text-align: left;
    text-decoration: none !important;
}

    .kr-ecommerce .letramenu:hover,
    .kr-ecommerce .DLSCategoria:hover {
        background: var(--kr-ecom-primary-soft);
    }

/* Títulos compartidos de navegación y contenido */
.kr-ecommerce .kr-category-title,
.kr-ecommerce .kr-content-title {
    margin: 0;
    color: var(--kr-ecom-text);
    font-family: var(--kr-ecom-heading-font);
    line-height: var(--kr-ecom-leading-tight);
    letter-spacing: var(--kr-ecom-tracking-tight-lg);
    text-align: left;
}

.kr-ecommerce .kr-category-title {
    margin-bottom: 10px;
    font-size: var(--kr-ecom-category-title-size);
    font-weight: var(--kr-ecom-weight-medium);
}

.kr-ecommerce .kr-content-title {
    margin-bottom: 12px;
    font-size: var(--kr-ecom-content-title-size);
    font-weight: var(--kr-ecom-weight-medium);
}

/* Carrusel */
.kr-ecommerce .moves1 {
    overflow: hidden;
    margin-bottom: var(--kr-ecom-gap);
    border-radius: var(--kr-ecom-radius-lg);
    background: var(--kr-ecom-surface);
    box-shadow: var(--kr-ecom-shadow-sm);
}

    .kr-ecommerce .moves1 .slide {
        width: auto !important;
        height: var(--kr-ecom-slider-height) !important;
        margin: 0 !important;
    }

        .kr-ecommerce .moves1 .slide img {
            width: 100%;
            height: 100%;
            object-fit: contain !important;
            object-position: center;
        }

/* Catálogo */
.kr-ecommerce .kr-catalog-page {
    width: 100%;
    text-align: left;
}

.kr-ecommerce .kr-catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 var(--kr-ecom-gap) !important;
    border: 1px solid var(--kr-ecom-border) !important;
    border-radius: var(--kr-ecom-radius) !important;
    background: var(--kr-ecom-surface);
    box-shadow: var(--kr-ecom-shadow-sm);
    padding: 12px 14px !important;
    font-size: var(--kr-ecom-type-md) !important;
}

    .kr-ecommerce .kr-catalog-toolbar > span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding-left: 0 !important;
    }

.kr-ecommerce .kr-products {
    display: flex !important;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--kr-ecom-gap);
    width: 100%;
}

.kr-ecommerce .pr_contenedor {
    position: relative;
    display: inline-flex !important;
    width: calc((100% / var(--kr-ecom-columns)) - var(--kr-ecom-gap)) !important;
    min-width: 210px;
    height: auto !important;
    flex: 1 1 calc((100% / var(--kr-ecom-columns)) - var(--kr-ecom-gap));
    flex-direction: column;
    float: none !important;
    overflow: hidden;
    margin: 0 !important;
    border: 1px solid var(--kr-ecom-border) !important;
    border-radius: var(--kr-ecom-radius) !important;
    background: var(--kr-ecom-surface) !important;
    box-shadow: var(--kr-ecom-shadow-sm);
    color: var(--kr-ecom-text);
    padding: 0 !important;
    text-align: left;
    vertical-align: top;
    transition: transform var(--kr-ecom-transition), box-shadow var(--kr-ecom-transition), border-color var(--kr-ecom-transition);
}

    .kr-ecommerce .pr_contenedor:hover {
        border-color: color-mix(in srgb, var(--kr-ecom-primary) 28%, var(--kr-ecom-border)) !important;
        box-shadow: var(--kr-ecom-shadow);
        transform: translateY(-3px);
    }

    .kr-ecommerce .pr_contenedor > table {
        flex: 1 1 auto;
        border: 0;
        border-collapse: collapse;
    }

    .kr-ecommerce .pr_contenedor td {
        padding: 0 var(--kr-ecom-space);
    }

    .kr-ecommerce .pr_contenedor tr:first-child td {
        padding: 0;
    }

.kr-ecommerce .imgRpt {
    display: flex !important;
    width: 100% !important;
    height: var(--kr-ecom-image-height) !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 !important;
    background: var(--kr-ecom-surface-alt);
}

.kr-ecommerce .imagen_pr {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 12px;
    transition: transform 300ms ease;
}

.kr-ecommerce .pr_contenedor:hover .imagen_pr {
    transform: scale(1.035);
}

.kr-ecommerce #titulo1 {
    min-height: 50px;
    margin-top: 14px;
}

.kr-ecommerce .titulo1_pr,
.kr-ecommerce .titulo2_pr {
    display: -webkit-box;
    overflow: hidden;
    color: var(--kr-ecom-text) !important;
    font-family: var(--kr-ecom-font) !important;
    font-size: var(--kr-ecom-type-lg) !important;
    font-weight: var(--kr-ecom-weight-semibold) !important;
    line-height: var(--kr-ecom-leading-normal-tight);
    text-decoration: none !important;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.kr-ecommerce .pr_contenedor [id*="divSKU"],
.kr-ecommerce .pr_contenedor [id*="divCODIGO"],
.kr-ecommerce .pr_contenedor [id*="divUNIDAD"],
.kr-ecommerce .pr_contenedor [id*="divMARCA"],
.kr-ecommerce .pr_contenedor [id*="divTIPO"] {
    color: var(--kr-ecom-muted);
    font-size: var(--kr-ecom-type-sm);
    line-height: var(--kr-ecom-leading-relaxed-plus);
}

.kr-ecommerce .precio_c {
    display: flex !important;
    width: 100%;
    gap: 12px;
    margin-top: 14px !important;
    border-top: 1px solid var(--kr-ecom-border);
    padding: 13px 0 0;
}

    .kr-ecommerce .precio_c > div {
        width: 50% !important;
        float: none !important;
        color: var(--kr-ecom-muted);
        font-size: var(--kr-ecom-type-sm);
    }

        .kr-ecommerce .precio_c > div:last-child {
            color: var(--kr-ecom-primary);
        }

    .kr-ecommerce .precio_c [id*="Precio"],
    .kr-ecommerce .precio_c [id*="precio"] {
        color: inherit !important;
        font-size: var(--kr-ecom-type-2xl);
        font-weight: var(--kr-ecom-weight-semibold);
    }

.kr-ecommerce .kr-price-block {
    flex: 1 1 50%;
    width: 50% !important;
    min-width: 0;
    float: none !important;
    text-align: center;
}

    .kr-ecommerce .kr-price-block > span {
        font-size: var(--kr-ecom-type-sm);
        font-weight: var(--kr-ecom-weight-regular);
        color: var(--kr-ecom-muted);
    }

.kr-ecommerce .kr-price-note {
    margin-top: 4px;
    color: var(--kr-ecom-muted) !important;
    font-family: var(--kr-ecom-font) !important;
    font-size: var(--kr-ecom-type-xs) !important;
    font-weight: var(--kr-ecom-weight-regular) !important;
    line-height: var(--kr-ecom-leading-snug);
    letter-spacing: var(--kr-ecom-tracking-none);
}

.kr-ecommerce .nuevoAviso,
.kr-ecommerce .nuevoPromo {
    position: absolute !important;
    top: 12px;
    left: 12px;
    z-index: 4;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
}

.kr-ecommerce .nuevoPromo {
    left: auto;
    right: 12px;
}

.kr-ecommerce .nuevoAvisoIn,
.kr-ecommerce .nuevoPromoIn {
    border-radius: 999px !important;
    background: var(--kr-ecom-new) !important;
    color: #fff !important;
    font-size: var(--kr-ecom-type-2xs) !important;
    font-weight: var(--kr-ecom-weight-semibold);
    letter-spacing: var(--kr-ecom-tracking-wide);
    padding: 6px 9px !important;
}

.kr-ecommerce .nuevoPromoIn {
    background: var(--kr-ecom-promo) !important;
}

.kr-ecommerce [id*="PanelStock"] {
    color: var(--kr-ecom-success) !important;
    font-size: var(--kr-ecom-type-sm) !important;
    font-weight: var(--kr-ecom-weight-medium);
}

    .kr-ecommerce [id*="PanelStock"]::before {
        display: inline-block;
        width: 7px;
        height: 7px;
        margin-right: 6px;
        border-radius: 50%;
        background: var(--kr-ecom-success);
        content: "";
    }

.kr-ecommerce .kr-add-row {
    display: flex;
    min-height: 66px !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 12px var(--kr-ecom-space) var(--kr-ecom-space) !important;
    border-top: 1px solid var(--kr-ecom-border) !important;
    border-bottom: 0 !important;
    padding: 14px 0 0 !important;
    text-align: left !important;
}

    .kr-ecommerce .kr-add-row .txt_der {
        width: 64px !important;
        min-height: var(--kr-ecom-control-height) !important;
        margin: 0 !important;
    }

    .kr-ecommerce .kr-add-row .botonAdd {
        margin: 0 0 0 auto !important;
    }

/* Paginación */
.kr-ecommerce .pager,
.kr-ecommerce .pagerSel {
    display: inline-flex;
    min-width: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    margin: 3px;
    border: 1px solid var(--kr-ecom-border) !important;
    border-radius: var(--kr-ecom-radius-sm);
    background: var(--kr-ecom-surface);
    color: var(--kr-ecom-text);
    padding: 8px !important;
}

.kr-ecommerce .pagerSel {
    border-color: var(--kr-ecom-primary) !important;
    background: var(--kr-ecom-primary) !important;
    color: var(--kr-ecom-accent-contrast) !important;
}

.kr-ecommerce .pagerLink {
    color: inherit !important;
    text-decoration: none !important;
}

/* Detalle, formularios, área del cliente y carrito */
.kr-ecommerce .border,
.kr-ecommerce .detalle,
.kr-ecommerce .panelGeneralC,
.kr-ecommerce .panelGeneralCd,
.kr-ecommerce .divContenedorCuerpo,
.kr-ecommerce .loginT,
.kr-ecommerce .loginR,
.kr-ecommerce .registrese {
    border: 1px solid var(--kr-ecom-border) !important;
    border-radius: var(--kr-ecom-radius) !important;
    background: var(--kr-ecom-surface) !important;
    box-shadow: var(--kr-ecom-shadow-sm);
    color: var(--kr-ecom-text) !important;
}

.kr-ecommerce .border,
.kr-ecommerce .panelGeneralC,
.kr-ecommerce .panelGeneralCd,
.kr-ecommerce .divContenedorCuerpo,
.kr-ecommerce .loginT,
.kr-ecommerce .loginR,
.kr-ecommerce .registrese {
    padding: clamp(16px, 3vw, 32px) !important;
}

.kr-ecommerce .detalle {
    display: flex;
    gap: clamp(20px, 4vw, 50px);
    overflow: hidden;
    padding: clamp(18px, 3vw, 34px) !important;
}

.kr-ecommerce .detalleImg,
.kr-ecommerce .detalleDet {
    min-width: 0;
}

.kr-ecommerce .detalleImg {
    flex: 0 1 46%;
    border-radius: var(--kr-ecom-radius);
    background: var(--kr-ecom-surface-alt);
}

.kr-ecommerce .detalleDet {
    flex: 1 1 54%;
}

.kr-ecommerce .DatosEntregaCab,
.kr-ecommerce .DatosEntregaCab_ {
    color: var(--kr-ecom-muted) !important;
    font-family: var(--kr-ecom-font) !important;
    font-size: var(--kr-ecom-type-sm) !important;
    font-weight: var(--kr-ecom-weight-medium);
    padding: 7px 6px !important;
}

.kr-ecommerce .DatosEntregaCue {
    color: var(--kr-ecom-text) !important;
    font-family: var(--kr-ecom-font) !important;
    font-size: var(--kr-ecom-type-md-plus) !important;
    padding: 6px !important;
}

.kr-ecommerce table {
    color: var(--kr-ecom-text);
}

.kr-ecommerce .table,
.kr-ecommerce [class*="tbl_"] {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--kr-ecom-border) !important;
    border-radius: var(--kr-ecom-radius-sm);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--kr-ecom-surface);
}

.kr-ecommerce .cab,
.kr-ecommerce [class*="_cab"] {
    background: var(--kr-ecom-surface-alt) !important;
    color: var(--kr-ecom-muted) !important;
    font-weight: var(--kr-ecom-weight-semibold);
}

.kr-ecommerce .cue,
.kr-ecommerce [class*="_cue"] {
    border-top: 1px solid var(--kr-ecom-border);
    color: var(--kr-ecom-text) !important;
}

.kr-ecommerce .tit1 {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--kr-ecom-border) !important;
    font-size: var(--kr-ecom-type-title-xl-fluid) !important;
    padding-bottom: 14px !important;
}

.kr-ecommerce .tit2 {
    font-size: var(--kr-ecom-type-title-md-fluid) !important;
}

/* Pie y accesos inferiores */
.kr-ecommerce .pieDir {
    margin-top: 50px;
    background: var(--kr-ecom-footer-bg, var(--kr-ecom-primary-strong)) !important;
    color: var(--kr-ecom-footer-text, var(--kr-ecom-surface)) !important;
}

.kr-ecommerce .pieDirIn {
    padding: 24px;
}

.kr-ecommerce .cajainfcont {
    border-top: 1px solid color-mix(in srgb, var(--kr-ecom-primary) 70%, #000);
    background: var(--kr-ecom-footer-bg, var(--kr-ecom-primary)) !important;
    color: var(--kr-ecom-footer-text, var(--kr-ecom-surface)) !important;
}

.kr-ecommerce .cajasinf {
    border-radius: var(--kr-ecom-radius-sm);
    transition: background var(--kr-ecom-transition), transform var(--kr-ecom-transition);
}

    .kr-ecommerce .cajasinf:hover {
        background: rgba(255, 255, 255, .1);
        transform: translateY(-2px);
    }

.kr-ecommerce .txtcajasinf,
.kr-ecommerce .redes {
    color: #fff !important;
}

.kr-ecommerce .whatsapp {
    opacity: .9 !important;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .18));
}

/* Layouts configurables */
.kr-ecommerce[data-ecommerce-layout="list"] .pr_contenedor,
.kr-ecommerce[data-ecommerce-layout="quick-order"] .pr_contenedor {
    display: grid !important;
    width: 100% !important;
    min-width: 0;
    flex: 1 1 100%;
    grid-template-columns: minmax(0, 1fr) 210px;
    transform: none;
}

    .kr-ecommerce[data-ecommerce-layout="list"] .pr_contenedor > table,
    .kr-ecommerce[data-ecommerce-layout="quick-order"] .pr_contenedor > table {
        display: block;
    }

        .kr-ecommerce[data-ecommerce-layout="list"] .pr_contenedor > table tbody,
        .kr-ecommerce[data-ecommerce-layout="quick-order"] .pr_contenedor > table tbody {
            display: grid;
            grid-template-columns: 190px minmax(0, 1fr);
        }

        .kr-ecommerce[data-ecommerce-layout="list"] .pr_contenedor > table tr,
        .kr-ecommerce[data-ecommerce-layout="quick-order"] .pr_contenedor > table tr {
            display: contents;
        }

        .kr-ecommerce[data-ecommerce-layout="list"] .pr_contenedor > table td,
        .kr-ecommerce[data-ecommerce-layout="quick-order"] .pr_contenedor > table td {
            padding: var(--kr-ecom-space);
        }

.kr-ecommerce[data-ecommerce-layout="list"] .imgRpt,
.kr-ecommerce[data-ecommerce-layout="quick-order"] .imgRpt {
    height: 180px !important;
    border-radius: var(--kr-ecom-radius-sm);
}

.kr-ecommerce[data-ecommerce-layout="list"] .kr-add-row,
.kr-ecommerce[data-ecommerce-layout="quick-order"] .kr-add-row {
    height: 100% !important;
    min-height: 0 !important;
    flex-wrap: wrap;
    align-content: center;
    margin: 0 !important;
    border-top: 0 !important;
    border-left: 1px solid var(--kr-ecom-border) !important;
    padding: var(--kr-ecom-space) !important;
}

.kr-ecommerce[data-ecommerce-layout="quick-order"] .moves1 {
    display: none;
}

/* ================================================================
   FASE 2 - AJUSTE GLOBAL DE PROPORCIONES
   Solo aplica cuando el body contiene .kr-ecommerce.
   clasico-original no recibe esta clase y permanece intacto.
   ================================================================ */

.kr-ecommerce .kr-category-title,
.kr-ecommerce .kr-content-title {
    font-size: var(--kr-ecom-category-title-size) !important;
}

.kr-ecommerce .kr-content-title {
    font-size: var(--kr-ecom-content-title-size) !important;
}

.kr-ecommerce .menu_sup_nuevo {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.kr-ecommerce .upmenu {
    min-height: 32px;
    font-size: var(--kr-ecom-main-menu-font-size) !important;
    line-height: var(--kr-ecom-leading-tight);
    padding: 6px 13px !important;
}

.kr-ecommerce .column1,
.kr-ecommerce .column3 {
    flex-basis: 220px;
    width: 220px;
    padding: 12px;
}

.kr-ecommerce .letramenu,
.kr-ecommerce .DLSCategoria {
    font-size: var(--kr-ecom-category-font-size) !important;
    padding: 7px 9px;
}

.kr-ecommerce .moves1 {
    min-height: 0 !important;
}

    .kr-ecommerce .moves1 .slide {
        height: var(--kr-ecom-slider-height) !important;
        min-height: 0 !important;
    }

        .kr-ecommerce .moves1 .slide img {
            width: 100% !important;
            height: 100% !important;
            object-fit: contain !important;
            object-position: center center !important;
        }

    /* =========================================================
   FASE 2.1 - NORMALIZACION GLOBAL DE PROPORCIONES
   Solo aplica cuando el body tiene .kr-ecommerce.
   clasico-original permanece fuera de estas reglas.
   ========================================================= */

    /* Carrusel: Slick debe respetar la altura visual del banner.
   No basta limitar .slide: slick-list y slick-track pueden
   conservar una altura mayor y dejar un bloque blanco. */
    .kr-ecommerce .moves1,
    .kr-ecommerce .moves1.slick-slider,
    .kr-ecommerce .moves1 .slick-list,
    .kr-ecommerce .moves1 .slick-track {
        height: var(--kr-ecom-slider-height) !important;
        min-height: 0 !important;
        max-height: var(--kr-ecom-slider-height) !important;
    }

.kr-ecommerce .moves1 {
    position: relative;
    overflow: hidden !important;
    margin-bottom: var(--kr-ecom-gap) !important;
}

    .kr-ecommerce .moves1 .slick-list,
    .kr-ecommerce .moves1 .slick-track {
        overflow: hidden !important;
    }

    .kr-ecommerce .moves1 .slick-slide,
    .kr-ecommerce .moves1 .slide {
        height: var(--kr-ecom-slider-height) !important;
        min-height: 0 !important;
        max-height: var(--kr-ecom-slider-height) !important;
    }

        .kr-ecommerce .moves1 .slick-slide > div {
            height: 100% !important;
        }

        .kr-ecommerce .moves1 .slide img {
            display: block !important;
            width: 100% !important;
            height: 100% !important;
            max-height: 100% !important;
            object-fit: contain !important;
            object-position: center !important;
        }

    /* Los dots no deben aumentar la altura del carrusel. */
    .kr-ecommerce .moves1.slick-dotted.slick-slider {
        margin-bottom: calc(var(--kr-ecom-gap) + 18px) !important;
    }

    .kr-ecommerce .moves1 .slick-dots {
        bottom: -18px !important;
    }

/* Login / registro: recuperar una escala compacta y coherente.
   Las reglas anteriores aplicaban padding de panel grande a .border
   y hacian que formularios simples se vieran sobredimensionados. */
.kr-ecommerce .tit1 {
    margin: 0 0 18px !important;
    padding: 0 0 12px !important;
    font-size: var(--kr-ecom-type-title-lg-fluid) !important;
    line-height: var(--kr-ecom-leading-snug) !important;
    font-weight: var(--kr-ecom-weight-semibold) !important;
}

.kr-ecommerce .tit2 {
    margin: 16px 0 14px !important;
    font-size: var(--kr-ecom-type-title-sm-fluid) !important;
    line-height: var(--kr-ecom-leading-snug) !important;
    font-weight: var(--kr-ecom-weight-semibold) !important;
}

.kr-ecommerce .cinc {
    width: 48% !important;
    margin: 0 1% !important;
    box-sizing: border-box !important;
}

    .kr-ecommerce .cinc .border {
        height: auto !important;
        min-height: 100px;
        padding: 20px 22px !important;
        font-size: var(--kr-ecom-type-md) !important;
        line-height: var(--kr-ecom-leading-loose) !important;
        box-sizing: border-box !important;
    }

.kr-ecommerce .rowLogin {
    padding: 5px 0 !important;
    font-size: var(--kr-ecom-type-md) !important;
    line-height: var(--kr-ecom-leading-normal-tight) !important;
}

    .kr-ecommerce .rowLogin input[type="text"],
    .kr-ecommerce .rowLogin input[type="password"] {
        min-height: 38px !important;
        height: 38px !important;
        padding: 6px 10px !important;
        box-sizing: border-box !important;
    }

/* El LayoutTemplate del Login trae un panel gris inline; limitamos
   su escala sin cambiar el markup historico. */
.kr-ecommerce .cinc table,
.kr-ecommerce .cinc [id*="Login1"] {
    max-width: 100% !important;
}

.kr-ecommerce .cinc .botonAdd {
    min-height: 38px !important;
    padding: 8px 18px !important;
    font-size: var(--kr-ecom-type-md) !important;
}


/* =========================================================
   FASE 2.2 - CATEGORIAS MODERNAS
   ASPxNavBar se conserva exclusivamente para clasico-original.
   Los temas nuevos usan HTML nativo details/summary.
   ========================================================= */
.kr-ecommerce .kr-classic-navbar,
.kr-ecommerce .kr-classic-categories-mobile {
    display: none !important;
}

.kr-ecommerce .kr-modern-categories {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--kr-ecom-border);
    border-radius: var(--kr-ecom-radius);
    background: var(--kr-ecom-surface);
}

.kr-ecommerce .kr-cat-group {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--kr-ecom-border);
}

    .kr-ecommerce .kr-cat-group:last-child {
        border-bottom: 0;
    }

.kr-ecommerce .kr-cat-summary {
    position: relative;
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    color: var(--kr-ecom-text);
    background: transparent;
    font-family: var(--kr-ecom-font);
    font-size: var(--kr-ecom-type-sm-plus);
    font-weight: var(--kr-ecom-weight-medium);
    line-height: var(--kr-ecom-leading-snug);
    list-style: none;
    cursor: pointer;
    user-select: none;
}

    .kr-ecommerce .kr-cat-summary::-webkit-details-marker {
        display: none;
    }

    .kr-ecommerce .kr-cat-summary::marker {
        display: none;
        content: "";
    }

    .kr-ecommerce .kr-cat-summary:hover {
        background: var(--kr-ecom-primary-soft);
    }

.kr-ecommerce .kr-cat-group[open] > .kr-cat-summary {
    color: var(--kr-ecom-primary);
    background: var(--kr-ecom-primary-soft);
}

.kr-ecommerce .kr-cat-group-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kr-ecommerce .kr-cat-chevron {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 180ms ease;
}

.kr-ecommerce .kr-cat-group[open] > .kr-cat-summary .kr-cat-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

.kr-ecommerce .kr-cat-items {
    padding: 4px 6px 7px;
    background: var(--kr-ecom-surface);
}

.kr-ecommerce .kr-cat-link {
    display: block;
    min-width: 0;
    margin: 1px 0;
    padding: 8px 10px 8px 14px;
    overflow: hidden;
    border-radius: var(--kr-ecom-radius-sm);
    color: var(--kr-ecom-text-muted) !important;
    font-family: var(--kr-ecom-font);
    font-size: var(--kr-ecom-type-sm);
    font-weight: var(--kr-ecom-weight-medium);
    line-height: var(--kr-ecom-leading-compact);
    text-decoration: none !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 160ms ease, color 160ms ease, padding-left 160ms ease;
}

    .kr-ecommerce .kr-cat-link:hover,
    .kr-ecommerce .kr-cat-link:focus-visible {
        padding-left: 17px;
        color: var(--kr-ecom-primary) !important;
        background: var(--kr-ecom-primary-soft);
        outline: none;
    }

    .kr-ecommerce .kr-cat-link.is-active {
        color: var(--kr-ecom-primary) !important;
        background: var(--kr-ecom-primary-soft);
        font-weight: var(--kr-ecom-weight-medium);
    }

/* El contenedor lateral ya aporta el panel visual; evitamos doble tarjeta. */
.kr-ecommerce .column1 .kr-modern-categories,
.kr-ecommerce .column3 .kr-modern-categories {
    border-radius: calc(var(--kr-ecom-radius) - 2px);
    box-shadow: none;
}

/* =========================================================
   FASE 3 - LAYOUT DE TIENDA MODERNA
   Solo temas nuevos (.kr-ecommerce). El clasico no cambia.
   ========================================================= */

/* Flechas laterales del carrusel: se eliminan en temas modernos. */
.kr-ecommerce .moves1 .slick-prev,
.kr-ecommerce .moves1 .slick-next {
    display: none !important;
}

/* Shell del catalogo */
.kr-ecommerce .kr-catalog-shell {
    width: 100% !important;
    text-align: left !important;
}

/* Toolbar de catalogo con aspecto de tienda actual. */
.kr-ecommerce .kr-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 14px 0 16px;
    padding: 10px 12px !important;
    border: 1px solid var(--kr-ecom-border) !important;
    border-radius: var(--kr-ecom-radius);
    background: var(--kr-ecom-surface);
    box-shadow: var(--kr-ecom-shadow-sm);
    color: var(--kr-ecom-muted);
    font-size: var(--kr-ecom-type-sm) !important;
}

    .kr-ecommerce .kr-shop-toolbar > span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding-left: 0 !important;
    }

    .kr-ecommerce .kr-shop-toolbar select {
        min-height: 34px;
        border: 1px solid var(--kr-ecom-border);
        border-radius: var(--kr-ecom-radius-sm);
        background: var(--kr-ecom-surface);
        color: var(--kr-ecom-text);
        font-family: var(--kr-ecom-font);
        font-size: var(--kr-ecom-type-sm);
        padding: 0 30px 0 10px;
    }

/* Cards: base comun, sin reescribir controles WebForms internos. */
.kr-ecommerce .kr-product-card {
    box-sizing: border-box;
    border: 1px solid var(--kr-ecom-border);
    border-radius: var(--kr-ecom-radius);
    background: var(--kr-ecom-surface);
    box-shadow: var(--kr-ecom-shadow-sm);
    overflow: hidden;
    transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

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

/* ---------------------------------------------------------
   MARKETPLACE
   Navegacion lateral persistente + contenido denso.
   --------------------------------------------------------- */
.kr-ecommerce[data-ecommerce-theme="marketplace"] .divMaster > .row {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 18px;
}

.kr-ecommerce[data-ecommerce-theme="marketplace"] .column1 {
    width: auto !important;
    min-width: 0;
    position: sticky;
    top: 12px;
}

.kr-ecommerce[data-ecommerce-theme="marketplace"] .column2 {
    width: auto !important;
    min-width: 0;
}

/* ---------------------------------------------------------
   PREMIUM
   Categorias arriba como bloque de descubrimiento y catalogo
   a ancho completo. Cambia el layout, no solo los colores.
   --------------------------------------------------------- */
.kr-ecommerce[data-ecommerce-theme="premium"] .divMaster > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.kr-ecommerce[data-ecommerce-theme="premium"] .column1 {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

    .kr-ecommerce[data-ecommerce-theme="premium"] .column1 .kr-modern-categories {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .kr-ecommerce[data-ecommerce-theme="premium"] .column1 .kr-category-title {
        grid-column: 1 / -1;
    }

.kr-ecommerce[data-ecommerce-theme="premium"] .kr-cat-group {
    min-width: 0;
    border: 1px solid var(--kr-ecom-border);
    border-radius: var(--kr-ecom-radius-sm);
    overflow: hidden;
}

.kr-ecommerce[data-ecommerce-theme="premium"] .column2 {
    width: 100% !important;
}

/* ---------------------------------------------------------
   B2B
   Interfaz compacta orientada a pedido rapido.
   --------------------------------------------------------- */
.kr-ecommerce[data-ecommerce-theme="b2b"] {
    --kr-ecom-slider-height: 150px;
}

    .kr-ecommerce[data-ecommerce-theme="b2b"] .divMaster > .row {
        display: grid;
        grid-template-columns: 205px minmax(0, 1fr);
        gap: 12px;
    }

    .kr-ecommerce[data-ecommerce-theme="b2b"] .column1 {
        width: auto !important;
        padding: 8px;
    }

    .kr-ecommerce[data-ecommerce-theme="b2b"] .kr-cat-summary,
    .kr-ecommerce[data-ecommerce-theme="b2b"] .kr-cat-link {
        font-size: var(--kr-ecom-type-xs);
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .kr-ecommerce[data-ecommerce-theme="b2b"] .kr-shop-toolbar {
        margin-top: 8px;
        margin-bottom: 10px;
        padding: 7px 9px !important;
    }

    .kr-ecommerce[data-ecommerce-theme="b2b"] .kr-product-card {
        border-radius: var(--kr-ecom-radius-sm);
    }

/* =========================================================
   FASE 4 - LAYOUTS VISUALES POR TEMA
   Estas reglas solo afectan a temas modernos (.kr-ecommerce).
   ========================================================= */

.kr-ecommerce .moves1 .slick-prev,
.kr-ecommerce .moves1 .slick-next,
.kr-ecommerce .moves1 .slick-arrow {
    display: none !important;
}

.kr-ecommerce .kr-product-meta {
    color: var(--kr-ecom-muted);
    font-size: var(--kr-ecom-type-sm);
    line-height: var(--kr-ecom-leading-relaxed) !important;
}

.kr-ecommerce .kr-stock-row {
    margin-top: 8px;
    min-height: 28px !important;
}

.kr-ecommerce .kr-promo-text {
    margin-top: 8px;
}

.kr-ecommerce .kr-add-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 58px;
    height: auto !important;
    margin: 10px var(--kr-ecom-space) 14px !important;
    width: auto !important;
    border-top: 1px solid var(--kr-ecom-border);
    border-bottom: 0 !important;
    padding: 10px 0 0 !important;
    color: var(--kr-ecom-muted);
    font-size: var(--kr-ecom-type-sm);
}

    .kr-ecommerce .kr-add-row .txt_der {
        width: 64px !important;
        min-height: 38px !important;
        text-align: center;
    }

.kr-ecommerce .kr-categories-horizontal {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

    .kr-ecommerce .kr-categories-horizontal .kr-category-title {
        margin: 0 0 10px !important;
    }

    .kr-ecommerce .kr-categories-horizontal .kr-modern-categories {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        border: 0;
        background: transparent;
    }

    .kr-ecommerce .kr-categories-horizontal .kr-cat-group {
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--kr-ecom-border);
        border-radius: var(--kr-ecom-radius);
        background: var(--kr-ecom-surface);
        box-shadow: var(--kr-ecom-shadow-sm);
    }

    .kr-ecommerce .kr-categories-horizontal .kr-cat-summary {
        min-height: 52px;
        padding: 12px 14px;
        font-size: var(--kr-ecom-type-md);
        font-weight: var(--kr-ecom-weight-semibold);
    }

    .kr-ecommerce .kr-categories-horizontal .kr-cat-items {
        max-height: 220px;
        overflow-y: auto;
        border-top: 1px solid var(--kr-ecom-border);
    }

    .kr-ecommerce .kr-categories-horizontal .kr-cat-link {
        min-height: 36px;
        padding: 9px 12px 9px 16px;
        font-size: var(--kr-ecom-type-sm);
    }


/* ================================================================
   FASE 5 - ANCHO FLUIDO + ALINEACION GENERAL
   Aplica solo a los temas modernos (.kr-ecommerce).
   ================================================================ */

/* FASE 6.3 - CONTENIDO CON ANCHO MAXIMO (FIX)
   El selector se apoya tambien en data-ecommerce-theme del body para
   no depender exclusivamente de la clase .kr-ecommerce.
   clasico-original queda fuera de este comportamiento. */
.kr-ecommerce,
body[data-ecommerce-theme]:not([data-ecommerce-theme="clasico-original"]) {
    --kr-ecom-site-max-width: 1440px;
    --kr-ecom-site-gutter: clamp(16px, 2vw, 32px);
}

    .kr-ecommerce .kr-page-shell,
    body[data-ecommerce-theme]:not([data-ecommerce-theme="clasico-original"]) .kr-page-shell {
        box-sizing: border-box !important;
        width: calc(100% - (2 * var(--kr-ecom-site-gutter))) !important;
        max-width: var(--kr-ecom-site-max-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Defensa adicional frente a reglas historicas que vuelvan a forzar
   width/max-width sobre el contenedor principal. */
    body[data-ecommerce-theme]:not([data-ecommerce-theme="clasico-original"]) form#form1 > div[style*="width: 100%"] > .kr-page-shell {
        width: calc(100% - (2 * var(--kr-ecom-site-gutter))) !important;
        max-width: var(--kr-ecom-site-max-width) !important;
        margin-inline: auto !important;
    }

    .kr-ecommerce .divMaster {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }

    /* El titulo Categoria respira dentro del panel lateral. */
    .kr-ecommerce .column1 > .kr-category-title,
    .kr-ecommerce .column3 > .kr-category-title {
        margin: 0 !important;
        padding: 4px 10px 12px !important;
        text-align: left !important;
    }

    /* Todos los subgrupos comparten exactamente el mismo eje izquierdo. */
    .kr-ecommerce .column1 .kr-cat-items,
    .kr-ecommerce .column3 .kr-cat-items,
    .kr-ecommerce .column1 .kr-cat-link,
    .kr-ecommerce .column3 .kr-cat-link {
        text-align: left !important;
    }

        .kr-ecommerce .column1 .kr-cat-link,
        .kr-ecommerce .column1 .kr-cat-link:hover,
        .kr-ecommerce .column1 .kr-cat-link:focus-visible,
        .kr-ecommerce .column1 .kr-cat-link.is-active,
        .kr-ecommerce .column3 .kr-cat-link,
        .kr-ecommerce .column3 .kr-cat-link:hover,
        .kr-ecommerce .column3 .kr-cat-link:focus-visible,
        .kr-ecommerce .column3 .kr-cat-link.is-active {
            padding-left: 16px !important;
        }

    /* Grid real: ocupa todo el ancho restante sin dejar huecos laterales. */
    .kr-ecommerce .kr-products {
        display: grid !important;
        width: 100% !important;
        grid-template-columns: repeat(var(--kr-ecom-columns), minmax(0, 1fr));
        gap: var(--kr-ecom-gap) !important;
        align-items: stretch;
    }

        .kr-ecommerce .kr-products > .pr_contenedor {
            display: flex !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
            margin: 0 !important;
        }

    .kr-ecommerce[data-ecommerce-layout="list"] .kr-products,
    .kr-ecommerce[data-ecommerce-layout="quick-order"] .kr-products {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* El pie nunca debe transparentar el contenido que pasa por debajo. */
    .kr-ecommerce .pieDir,
    .kr-ecommerce .cajainfcont {
        opacity: 1 !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .kr-ecommerce .pieDir {
        background-color: var(--kr-ecom-footer-bg, var(--kr-ecom-primary-strong)) !important;
    }

    .kr-ecommerce .cajainfcont {
        background-color: var(--kr-ecom-footer-bg, var(--kr-ecom-primary)) !important;
    }

        .kr-ecommerce .pieDir,
        .kr-ecommerce .pieDir *,
        .kr-ecommerce .cajainfcont,
        .kr-ecommerce .cajainfcont * {
            visibility: visible;
        }


    /* ================================================================
   LOGIN DE CLIENTES
   ---------------------------------------------------------------
   Todo el aspecto visual de Clogin.aspx vive aquí.
   La página solo conserva estructura y controles ASP.NET.
   Los temas cambian el aspecto mediante las variables --kr-ecom-*.
   ================================================================ */

    .kr-ecommerce .kr-login-page {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: clamp(16px, 2vw, 28px);
        color: var(--kr-ecom-text);
    }

    .kr-ecommerce .kr-login-title {
        margin: 0 0 26px !important;
        padding: 0 0 18px !important;
        color: var(--kr-ecom-text) !important;
        border-bottom: 1px solid var(--kr-ecom-border) !important;
    }

    .kr-ecommerce .kr-login-columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(24px, 4vw, 56px);
        width: 100%;
        align-items: start;
    }

    .kr-ecommerce .kr-login-column {
        float: none !important;
        width: 100% !important;
        min-width: 0;
        margin: 0 !important;
    }

    .kr-ecommerce .kr-login-section-title {
        margin: 0 0 18px !important;
        color: var(--kr-ecom-text) !important;
    }

    .kr-ecommerce .kr-login-intro {
        min-height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 22px !important;
        border: 1px solid var(--kr-ecom-border) !important;
        border-radius: var(--kr-ecom-radius) !important;
        background: var(--kr-ecom-surface-alt) !important;
        color: var(--kr-ecom-text) !important;
        box-shadow: var(--kr-ecom-shadow-sm);
        font-size: var(--kr-ecom-type-md-plus);
        line-height: var(--kr-ecom-leading-loosest);
        text-align: center;
    }

    .kr-ecommerce .kr-login-primary-action {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .kr-ecommerce .kr-login-box {
        display: block;
        width: 100%;
        padding: 18px;
        border: 1px solid var(--kr-ecom-border);
        border-radius: var(--kr-ecom-radius);
        background: var(--kr-ecom-surface);
        color: var(--kr-ecom-text);
        box-shadow: var(--kr-ecom-shadow-sm);
    }

    .kr-ecommerce .kr-login-label {
        padding: 4px 0 6px !important;
        color: var(--kr-ecom-text) !important;
        font-size: var(--kr-ecom-control-font-size);
        font-weight: var(--kr-ecom-weight-medium);
    }

    .kr-ecommerce .kr-login-field {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 0 14px !important;
    }

        .kr-ecommerce .kr-login-field .textbox_gen,
        .kr-ecommerce .kr-login-field input[type="text"],
        .kr-ecommerce .kr-login-field input[type="password"] {
            flex: 1 1 auto;
            width: 100% !important;
            min-width: 0;
            margin: 0 !important;
            background: var(--kr-ecom-surface) !important;
            color: var(--kr-ecom-text) !important;
            border-color: var(--kr-ecom-border) !important;
        }

    .kr-ecommerce .kr-login-options {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
        padding-top: 2px;
        color: var(--kr-ecom-text);
    }

        .kr-ecommerce .kr-login-options label {
            color: var(--kr-ecom-text);
        }

        .kr-ecommerce .kr-login-options .menuUserName {
            margin: 0;
            padding: 0;
            color: var(--kr-ecom-primary) !important;
            font-family: var(--kr-ecom-font) !important;
            font-size: var(--kr-ecom-control-font-size) !important;
            font-weight: var(--kr-ecom-weight-medium);
        }

            .kr-ecommerce .kr-login-options .menuUserName:hover {
                color: var(--kr-ecom-accent) !important;
            }

    .kr-ecommerce .kr-login-error {
        flex: 0 0 100%;
        min-height: 1px;
        color: var(--kr-ecom-danger);
    }

    .kr-ecommerce .kr-login-submit {
        display: flex;
        justify-content: center;
        padding-top: 14px !important;
        text-align: center !important;
    }

    /* En Dark Tech no existe ningún fondo claro fijo. */
    .kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-login-box {
        background: var(--kr-ecom-surface) !important;
        border-color: var(--kr-ecom-border) !important;
    }

    .kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-login-intro {
        background: var(--kr-ecom-surface-alt) !important;
        border-color: var(--kr-ecom-border) !important;
    }

    .kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-login-field .textbox_gen,
    .kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-login-field input[type="text"],
    .kr-ecommerce[data-ecommerce-theme="dark-tech"] .kr-login-field input[type="password"] {
        background: var(--kr-ecom-input-bg) !important;
        color: var(--kr-ecom-input-text) !important;
        border-color: var(--kr-ecom-border-control) !important;
    }

@media (max-width: 760px) {
    .kr-ecommerce .kr-login-page {
        padding: 14px;
    }

    .kr-ecommerce .kr-login-title {
        margin-bottom: 20px !important;
        font-size: var(--kr-ecom-type-legacy-em) !important;
        line-height: var(--kr-ecom-leading-snug);
    }

    .kr-ecommerce .kr-login-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .kr-ecommerce .kr-login-box {
        padding: 14px;
    }

    .kr-ecommerce .kr-login-intro {
        min-height: 0;
        padding: 18px !important;
    }

    .kr-ecommerce .kr-login-options {
        align-items: flex-start;
    }
}


/* ================================================================
   REFINAMIENTO VISUAL PROFESIONAL
   Jerarquía tipográfica, aire y cards más limpias.
   ================================================================ */

.kr-ecommerce {
    letter-spacing: var(--kr-ecom-tracking-none);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    /* Pesos: 400 texto, 500 interacción, 600 títulos. */
    .kr-ecommerce p,
    .kr-ecommerce label,
    .kr-ecommerce .rowLogin,
    .kr-ecommerce .pr_codigo,
    .kr-ecommerce .pr_marca,
    .kr-ecommerce .pr_unidad,
    .kr-ecommerce .kr-product-meta {
        font-weight: var(--kr-ecom-weight-regular) !important;
    }

    .kr-ecommerce .menusup,
    .kr-ecommerce .menuUserName,
    .kr-ecommerce .menu_sup_nuevo a,
    .kr-ecommerce .botonAdd,
    .kr-ecommerce button,
    .kr-ecommerce input[type="button"],
    .kr-ecommerce input[type="submit"] {
        font-weight: var(--kr-ecom-weight-medium) !important;
    }

    .kr-ecommerce .tit1,
    .kr-ecommerce .tit2,
    .kr-ecommerce .kr-category-title {
        font-weight: var(--kr-ecom-weight-semibold) !important;
    }

    /* Cards: menos ruido visual, más aire. */
    .kr-ecommerce .pr_contenedor {
        border: 1px solid var(--kr-ecom-border) !important;
        border-radius: 12px !important;
        background: var(--kr-ecom-surface) !important;
        box-shadow: none !important;
        padding: 16px !important;
        transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }

        .kr-ecommerce .pr_contenedor:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, .08) !important;
        }

    .kr-ecommerce .pr_imagen,
    .kr-ecommerce .kr-product-image {
        border-radius: 10px;
        overflow: hidden;
        background: var(--kr-ecom-surface-alt);
    }

    /* Nombre producto: 500, no bold pesado. */
    .kr-ecommerce .pr_descripcion,
    .kr-ecommerce .kr-product-title {
        margin-top: 14px;
        color: var(--kr-ecom-text) !important;
        font-family: var(--kr-ecom-font) !important;
        font-size: var(--kr-ecom-type-lg) !important;
        font-weight: var(--kr-ecom-weight-medium) !important;
        line-height: var(--kr-ecom-leading-normal-tight);
        text-align: left;
    }

    /* Metadata discreta y legible. */
    .kr-ecommerce .pr_codigo,
    .kr-ecommerce .pr_marca,
    .kr-ecommerce .pr_unidad,
    .kr-ecommerce .kr-product-meta {
        color: var(--kr-ecom-muted) !important;
        font-family: var(--kr-ecom-font) !important;
        font-size: var(--kr-ecom-type-sm) !important;
        line-height: var(--kr-ecom-leading-relaxed);
    }

    /* Precio: protagonista, pero sin 700/800. */
    .kr-ecommerce .precio_c {
        display: flex;
        align-items: flex-start;
        gap: 18px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--kr-ecom-border);
    }

    .kr-ecommerce .kr-price-block {
        flex: 1 1 50%;
        width: 50% !important;
        min-width: 0;
        float: none !important;
        text-align: left;
    }

        .kr-ecommerce .kr-price-block > span,
        .kr-ecommerce .precio_c [id*="Precio"],
        .kr-ecommerce .precio_c [id*="precio"] {
            font-family: var(--kr-ecom-font) !important;
            font-size: var(--kr-ecom-type-3xl) !important;
            font-weight: var(--kr-ecom-weight-semibold) !important;
            line-height: var(--kr-ecom-leading-tightest);
        }

    .kr-ecommerce .kr-price-note {
        margin-top: 5px;
        color: var(--kr-ecom-muted) !important;
        font-family: var(--kr-ecom-font) !important;
        font-size: var(--kr-ecom-type-sm) !important;
        font-weight: var(--kr-ecom-weight-regular) !important;
        line-height: var(--kr-ecom-leading-compact);
    }

    /* Botones e inputs más sobrios. */
    .kr-ecommerce .botonAdd {
        border-radius: 10px !important;
        font-family: var(--kr-ecom-font) !important;
        font-weight: var(--kr-ecom-weight-medium) !important;
        letter-spacing: var(--kr-ecom-tracking-none);
        box-shadow: none !important;
    }

    .kr-ecommerce .textbox_gen,
    .kr-ecommerce select,
    .kr-ecommerce input[type="text"],
    .kr-ecommerce input[type="password"],
    .kr-ecommerce input[type="number"] {
        font-family: var(--kr-ecom-font) !important;
        font-weight: var(--kr-ecom-weight-regular) !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }

    /* Solo temas con carácter editorial usan serif en títulos grandes. */
    .kr-ecommerce[data-ecommerce-theme="premium"] .tit1,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .tit1,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .tit1,
    .kr-ecommerce[data-ecommerce-theme="premium"] .kr-hero-title,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .kr-hero-title,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .kr-hero-title {
        font-family: var(--kr-ecom-editorial-font) !important;
        font-weight: var(--kr-ecom-weight-semibold) !important;
        letter-spacing: var(--kr-ecom-tracking-tight-2xl);
    }

@media (max-width: 760px) {
    .kr-ecommerce .pr_contenedor {
        padding: 14px !important;
    }

    .kr-ecommerce .precio_c {
        gap: 12px;
    }

        .kr-ecommerce .kr-price-block > span,
        .kr-ecommerce .precio_c [id*="Precio"],
        .kr-ecommerce .precio_c [id*="precio"] {
            font-size: var(--kr-ecom-type-2xl) !important;
        }

    .kr-ecommerce .pr_descripcion,
    .kr-ecommerce .kr-product-title {
        font-size: var(--kr-ecom-type-md-plus) !important;
    }
}


/* ================================================================
   PAGINADOR GLOBAL
   Centrado y cromáticamente ligado a la barra inferior del tema.
   ================================================================ */
.kr-ecommerce .kr-pager-section {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    clear: both;
    margin: 18px 0 28px !important;
    text-align: center !important;
}

.kr-ecommerce .kr-pager-wrap {
    width: auto !important;
    display: inline-flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px;
    margin: 0 auto !important;
    float: none !important;
    text-align: center !important;
}

    .kr-ecommerce .kr-pager-wrap .pager,
    .kr-ecommerce .kr-pager-wrap .pagerSel {
        margin: 0 !important;
        min-width: 40px;
        min-height: 40px;
        border-radius: var(--kr-ecom-radius-sm) !important;
        font-family: var(--kr-ecom-font) !important;
        font-size: var(--kr-ecom-type-md) !important;
        font-weight: var(--kr-ecom-weight-medium) !important;
    }

    .kr-ecommerce .kr-pager-wrap .pager {
        border-color: var(--kr-ecom-border) !important;
        background: var(--kr-ecom-surface) !important;
        color: var(--kr-ecom-text) !important;
    }

        .kr-ecommerce .kr-pager-wrap .pager:hover {
            border-color: var(--kr-ecom-footer-bg, var(--kr-ecom-primary)) !important;
            background: var(--kr-ecom-surface-alt) !important;
            color: var(--kr-ecom-footer-bg, var(--kr-ecom-primary)) !important;
        }

    .kr-ecommerce .kr-pager-wrap .pagerSel {
        border-color: var(--kr-ecom-footer-bg, var(--kr-ecom-primary)) !important;
        background: var(--kr-ecom-footer-bg, var(--kr-ecom-primary)) !important;
        color: var(--kr-ecom-footer-text, var(--kr-ecom-accent-contrast)) !important;
    }

    .kr-ecommerce .kr-pager-wrap .pagerLink {
        display: inline-flex !important;
        text-decoration: none !important;
        color: inherit !important;
    }

@media (max-width: 590px) {
    .kr-ecommerce .kr-pager-section {
        margin: 14px 0 22px !important;
    }

    .kr-ecommerce .kr-pager-wrap {
        gap: 5px;
    }

        .kr-ecommerce .kr-pager-wrap .pager,
        .kr-ecommerce .kr-pager-wrap .pagerSel {
            min-width: 38px;
            min-height: 38px;
            padding: 7px !important;
        }
}


/* ================================================================
   EXPLORADOR DE CATEGORÍAS
   Reemplaza la grilla de acordeones por:
   1) categorías principales tipo tabs/chips;
   2) un solo panel de subcategorías;
   3) sin scrollbars internos.
   ================================================================ */

.kr-ecommerce .kr-category-title {
    margin: 0 0 12px !important;
    padding: 0 2px !important;
    color: var(--kr-ecom-text) !important;
    font-family: var(--kr-ecom-font) !important;
    font-size: var(--kr-ecom-type-2xl) !important;
    font-weight: var(--kr-ecom-weight-semibold, 600) !important;
    line-height: var(--kr-ecom-leading-compact);
    text-align: left !important;
}

.kr-ecommerce .kr-category-explorer {
    width: 100%;
    min-width: 0;
    color: var(--kr-ecom-text);
    font-family: var(--kr-ecom-font);
}

/* Categorías principales */
.kr-ecommerce .kr-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    margin: 0 0 12px;
}

.kr-ecommerce .kr-cat-tab {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    max-width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--kr-ecom-border);
    border-radius: 999px;
    background: var(--kr-ecom-surface);
    color: var(--kr-ecom-text);
    font: inherit;
    font-size: var(--kr-ecom-type-sm);
    font-weight: var(--kr-ecom-weight-medium, 500);
    line-height: var(--kr-ecom-leading-tight);
    text-align: center;
    cursor: pointer;
    transition: background var(--kr-ecom-transition), color var(--kr-ecom-transition), border-color var(--kr-ecom-transition), transform var(--kr-ecom-transition);
}

    .kr-ecommerce .kr-cat-tab:hover {
        border-color: var(--kr-ecom-primary);
        color: var(--kr-ecom-primary);
        transform: translateY(-1px);
    }

    .kr-ecommerce .kr-cat-tab.is-active {
        background: var(--kr-ecom-primary);
        border-color: var(--kr-ecom-primary);
        color: var(--kr-ecom-accent-contrast);
    }

/* Un solo panel abierto */
.kr-ecommerce .kr-cat-panels {
    width: 100%;
    min-width: 0;
}

.kr-ecommerce .kr-cat-panel {
    width: 100%;
    padding: 18px;
    border: 1px solid var(--kr-ecom-border);
    border-radius: var(--kr-ecom-radius);
    background: var(--kr-ecom-surface);
    box-sizing: border-box;
    text-align: left;
}

    .kr-ecommerce .kr-cat-panel[hidden] {
        display: none !important;
    }

.kr-ecommerce .kr-cat-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--kr-ecom-border);
}

.kr-ecommerce .kr-cat-panel-title {
    color: var(--kr-ecom-text);
    font-size: var(--kr-ecom-type-md-plus);
    font-weight: var(--kr-ecom-weight-semibold, 600);
    line-height: var(--kr-ecom-leading-compact);
}

.kr-ecommerce .kr-cat-panel-subtitle {
    margin-top: 4px;
    color: var(--kr-ecom-muted);
    font-size: var(--kr-ecom-type-sm);
    font-weight: var(--kr-ecom-weight-regular, 400);
    line-height: var(--kr-ecom-leading-normal);
}

/* Subcategorías: alineadas, sin cajas pesadas */
.kr-ecommerce .kr-cat-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 4px 18px;
    width: 100%;
}

.kr-ecommerce .kr-cat-link {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 8px;
    border-radius: 7px;
    color: var(--kr-ecom-text) !important;
    font-size: var(--kr-ecom-type-sm);
    font-weight: var(--kr-ecom-weight-regular, 400);
    line-height: var(--kr-ecom-leading-normal-tight);
    text-align: left !important;
    text-decoration: none !important;
    transition: background var(--kr-ecom-transition), color var(--kr-ecom-transition), padding-left var(--kr-ecom-transition);
}

    .kr-ecommerce .kr-cat-link:hover {
        padding-left: 11px;
        background: var(--kr-ecom-surface-alt);
        color: var(--kr-ecom-primary) !important;
    }

    .kr-ecommerce .kr-cat-link.is-active {
        background: var(--kr-ecom-selected-bg, var(--kr-ecom-surface-alt));
        color: var(--kr-ecom-primary) !important;
        font-weight: var(--kr-ecom-weight-medium, 500);
    }

/* En layouts horizontales el explorador utiliza todo el ancho. */
.kr-ecommerce .kr-categories-horizontal {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    padding: 16px !important;
    margin: 14px 0 18px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

    .kr-ecommerce .kr-categories-horizontal .kr-category-title {
        margin-bottom: 14px !important;
    }

/* En sidebar mantenemos una experiencia compacta y solo un panel visible. */
.kr-ecommerce .column1:not(.kr-categories-horizontal) .kr-cat-tabs,
.kr-ecommerce .column3 .kr-cat-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.kr-ecommerce .column1:not(.kr-categories-horizontal) .kr-cat-tab,
.kr-ecommerce .column3 .kr-cat-tab {
    justify-content: flex-start;
    width: 100%;
    border-radius: 7px;
    border-color: transparent;
    background: transparent;
    text-align: left;
}

    .kr-ecommerce .column1:not(.kr-categories-horizontal) .kr-cat-tab.is-active,
    .kr-ecommerce .column3 .kr-cat-tab.is-active {
        background: var(--kr-ecom-surface-alt);
        border-color: var(--kr-ecom-border);
        color: var(--kr-ecom-primary);
    }

.kr-ecommerce .column1:not(.kr-categories-horizontal) .kr-cat-panel,
.kr-ecommerce .column3 .kr-cat-panel {
    padding: 10px 8px;
    border: 0;
    border-top: 1px solid var(--kr-ecom-border);
    border-radius: 0;
    background: transparent;
}

.kr-ecommerce .column1:not(.kr-categories-horizontal) .kr-cat-panel-head,
.kr-ecommerce .column3 .kr-cat-panel-head {
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.kr-ecommerce .column1:not(.kr-categories-horizontal) .kr-cat-panel-subtitle,
.kr-ecommerce .column3 .kr-cat-panel-subtitle {
    display: none;
}

.kr-ecommerce .column1:not(.kr-categories-horizontal) .kr-cat-links,
.kr-ecommerce .column3 .kr-cat-links {
    grid-template-columns: 1fr;
}

/* ================================================================
   FASE 6.0 - HERO + CATEGORIAS COMPACTAS
   Mantiene Slick, CCatalogo.aspx y el modelo historico intactos.
   Solo aplica a themes modernos (.kr-ecommerce).
   ================================================================ */

/* Hero / carrusel: presencia amplia, limpia y controles discretos. */
.kr-ecommerce .moves1 {
    border-radius: var(--kr-ecom-radius);
    background: var(--kr-ecom-surface);
}

    .kr-ecommerce .moves1 .slide img {
        object-fit: cover !important;
    }

    .kr-ecommerce .moves1 .slick-prev,
    .kr-ecommerce .moves1 .slick-next,
    .kr-ecommerce .moves1 .slick-arrow {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px !important;
        height: 38px !important;
        z-index: 4;
        border: 1px solid var(--kr-ecom-border) !important;
        border-radius: 999px;
        background: var(--kr-ecom-surface) !important;
        color: var(--kr-ecom-text) !important;
        opacity: .86;
        transition: opacity var(--kr-ecom-transition), transform var(--kr-ecom-transition);
    }

    .kr-ecommerce .moves1 .slick-prev {
        left: 14px !important;
    }

    .kr-ecommerce .moves1 .slick-next {
        right: 14px !important;
    }

        .kr-ecommerce .moves1 .slick-prev:hover,
        .kr-ecommerce .moves1 .slick-next:hover {
            opacity: 1;
            transform: translateY(-50%) scale(1.03);
        }

        .kr-ecommerce .moves1 .slick-prev:before,
        .kr-ecommerce .moves1 .slick-next:before {
            color: var(--kr-ecom-text) !important;
            font-size: var(--kr-ecom-type-4xl) !important;
            opacity: 1 !important;
        }

    .kr-ecommerce .moves1.slick-dotted.slick-slider {
        margin-bottom: calc(var(--kr-ecom-gap) + 10px) !important;
    }

    .kr-ecommerce .moves1 .slick-dots {
        bottom: 10px !important;
        z-index: 4;
    }

        .kr-ecommerce .moves1 .slick-dots li {
            width: 16px;
            height: 16px;
            margin: 0 2px;
        }

            .kr-ecommerce .moves1 .slick-dots li button:before {
                color: var(--kr-ecom-text) !important;
                opacity: .38 !important;
            }

            .kr-ecommerce .moves1 .slick-dots li.slick-active button:before {
                color: var(--kr-ecom-primary) !important;
                opacity: 1 !important;
            }

/* Categorias: una sola franja compacta. El detalle se abre al seleccionar. */
.kr-ecommerce .kr-category-title {
    margin-bottom: 8px !important;
    font-size: var(--kr-ecom-type-xl) !important;
}

.kr-ecommerce .kr-category-explorer {
    position: relative;
}

.kr-ecommerce .kr-cat-tabs {
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 0;
    padding: 0 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

    .kr-ecommerce .kr-cat-tabs::-webkit-scrollbar {
        display: none;
    }

.kr-ecommerce .kr-cat-tab {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 12px;
    white-space: nowrap;
    font-size: var(--kr-ecom-type-xs-plus);
}

    .kr-ecommerce .kr-cat-tab:hover {
        transform: none;
    }

.kr-ecommerce .kr-cat-panels {
    margin-top: 0;
}

.kr-ecommerce .kr-category-explorer.is-open .kr-cat-panels {
    margin-top: 8px;
}

.kr-ecommerce .kr-cat-panel {
    padding: 12px 14px;
    border-radius: calc(var(--kr-ecom-radius) - 2px);
}

.kr-ecommerce .kr-cat-panel-head {
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.kr-ecommerce .kr-cat-panel-title {
    font-size: var(--kr-ecom-type-md);
}

.kr-ecommerce .kr-cat-panel-subtitle {
    margin-top: 2px;
    font-size: var(--kr-ecom-type-xs-plus);
}

.kr-ecommerce .kr-cat-links {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2px 12px;
}

.kr-ecommerce .kr-cat-link {
    min-height: 32px;
    padding: 5px 7px;
    font-size: var(--kr-ecom-type-xs-plus);
}

/* En la variante horizontal no convertimos la seccion en una tarjeta grande. */
.kr-ecommerce .kr-categories-horizontal {
    padding: 10px 0 !important;
    margin: 8px 0 12px !important;
}

    .kr-ecommerce .kr-categories-horizontal .kr-category-title {
        margin-bottom: 8px !important;
    }

/* Sidebar: compacto, sin alterar el modelo de navegacion. */
.kr-ecommerce .column1:not(.kr-categories-horizontal) .kr-cat-tabs,
.kr-ecommerce .column3 .kr-cat-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
}

.kr-ecommerce .column1:not(.kr-categories-horizontal) .kr-cat-tab,
.kr-ecommerce .column3 .kr-cat-tab {
    width: auto;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--kr-ecom-border);
    border-radius: 999px;
    background: var(--kr-ecom-surface);
}

.kr-ecommerce .column1:not(.kr-categories-horizontal) .kr-cat-panel,
.kr-ecommerce .column3 .kr-cat-panel {
    padding: 9px 4px 4px;
    border-top: 1px solid var(--kr-ecom-border);
}


/* =========================================================
   FASE 6.1 - KRONHOS E-COMMERCE MOTION SYSTEM
   Inspirado en experiencias premium, sin alterar el modelo.
   Solo aplica a themes modernos porque requiere .kr-ecommerce.
   ========================================================= */
.kr-ecommerce {
    --kr-ecom-motion-duration: 360ms;
    --kr-ecom-motion-duration-slow: 560ms;
    --kr-ecom-motion-distance: 14px;
    --kr-ecom-motion-scale: 1.025;
    --kr-ecom-motion-easing: cubic-bezier(.22,.61,.36,1);
    --kr-ecom-motion-stagger: 55ms;
}

    /* Elementos reveal: solo se ocultan cuando JS confirmó soporte. */
    .kr-ecommerce.kr-motion-enabled .kr-motion-item {
        opacity: 0;
        transform: translate3d(0, var(--kr-ecom-motion-distance), 0);
        transition: opacity var(--kr-ecom-motion-duration-slow) var(--kr-ecom-motion-easing), transform var(--kr-ecom-motion-duration-slow) var(--kr-ecom-motion-easing);
        transition-delay: var(--kr-motion-delay, 0ms);
        will-change: opacity, transform;
    }

        .kr-ecommerce.kr-motion-enabled .kr-motion-item.is-revealed {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

    /* Hero: entrada limpia y profundidad muy leve. */
    .kr-ecommerce .moves1 {
        transform: translateZ(0);
    }

        .kr-ecommerce .moves1 .slick-slide .slide img,
        .kr-ecommerce .moves1 .slick-slide img {
            transform: scale(1);
            transition: transform 900ms var(--kr-ecom-motion-easing), opacity 420ms ease;
        }

        .kr-ecommerce .moves1 .slick-slide.slick-active .slide img,
        .kr-ecommerce .moves1 .slick-slide.slick-active img {
            transform: scale(var(--kr-ecom-motion-scale));
        }

    /* Categorías: chips con microinteracción, sin saltos de layout. */
    .kr-ecommerce .kr-cat-tab {
        transform: translateZ(0);
        transition: background-color var(--kr-ecom-motion-duration) var(--kr-ecom-motion-easing), color var(--kr-ecom-motion-duration) var(--kr-ecom-motion-easing), border-color var(--kr-ecom-motion-duration) var(--kr-ecom-motion-easing), transform var(--kr-ecom-motion-duration) var(--kr-ecom-motion-easing);
    }

        .kr-ecommerce .kr-cat-tab:hover {
            transform: translateY(-1px);
        }

        .kr-ecommerce .kr-cat-tab:active {
            transform: translateY(0) scale(.985);
        }

    /* Panel inferior: al activarse entra suavemente. */
    .kr-ecommerce .kr-cat-panel.is-active:not([hidden]) {
        animation: krEcomPanelIn var(--kr-ecom-motion-duration) var(--kr-ecom-motion-easing) both;
    }

@keyframes krEcomPanelIn {
    from {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.kr-ecommerce .kr-cat-link {
    transition: color var(--kr-ecom-motion-duration) var(--kr-ecom-motion-easing), background-color var(--kr-ecom-motion-duration) var(--kr-ecom-motion-easing), transform var(--kr-ecom-motion-duration) var(--kr-ecom-motion-easing);
}

    .kr-ecommerce .kr-cat-link:hover {
        transform: translateX(3px);
    }

/* Cards: hover premium, sin sombra o zoom agresivo. */
.kr-ecommerce .kr-product-card {
    transition: box-shadow var(--kr-ecom-motion-duration) var(--kr-ecom-motion-easing), transform var(--kr-ecom-motion-duration) var(--kr-ecom-motion-easing), border-color var(--kr-ecom-motion-duration) var(--kr-ecom-motion-easing);
}

    .kr-ecommerce .kr-product-card:hover {
        transform: translateY(-3px);
    }

    .kr-ecommerce .kr-product-card img {
        transform: scale(1);
        transition: transform 480ms var(--kr-ecom-motion-easing);
    }

    .kr-ecommerce .kr-product-card:hover img {
        transform: scale(var(--kr-ecom-motion-scale));
    }

/* Themes orientados a operación: movimiento algo más rápido. */
.kr-ecommerce[data-ecommerce-theme="b2b"],
.kr-ecommerce[data-ecommerce-theme="corporativo"],
.kr-ecommerce[data-ecommerce-theme="compacto"] {
    --kr-ecom-motion-duration: 260ms;
    --kr-ecom-motion-duration-slow: 420ms;
    --kr-ecom-motion-distance: 10px;
    --kr-ecom-motion-scale: 1.018;
}

/* Premium/editorial: un poco más pausado, sin exagerar. */
.kr-ecommerce[data-ecommerce-theme="premium"],
.kr-ecommerce[data-ecommerce-theme="boutique"],
.kr-ecommerce[data-ecommerce-theme="editorial"] {
    --kr-ecom-motion-duration: 390ms;
    --kr-ecom-motion-duration-slow: 620ms;
    --kr-ecom-motion-distance: 16px;
}


/* =========================================================
   FASE 6.7 - CORRECCION MENU REPEATER
   Corrige el bloque 6.6 mal serializado y no depende de Material Symbols.
   Solo afecta al menú moderno de categorías.
   ========================================================= */

.kr-repeater-categories {
    display: none;
}

.kr-ecommerce .kr-repeater-categories {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--kr-ecom-border);
    border-radius: var(--kr-ecom-radius-sm);
    background: var(--kr-ecom-surface);
}

    .kr-ecommerce .kr-repeater-categories .kr-cat-group {
        display: block;
        margin: 0;
        border: 0;
        border-bottom: 1px solid var(--kr-ecom-border);
        background: var(--kr-ecom-surface);
    }

        .kr-ecommerce .kr-repeater-categories .kr-cat-group:last-child {
            border-bottom: 0;
        }

    .kr-ecommerce .kr-repeater-categories .kr-cat-header {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        min-height: 42px;
        box-sizing: border-box;
        padding: 10px 12px;
        color: var(--kr-ecom-text);
        background: var(--kr-ecom-surface);
        font-family: var(--kr-ecom-font);
        font-size: var(--kr-ecom-type-md);
        font-weight: var(--kr-ecom-weight-medium);
        line-height: var(--kr-ecom-leading-compact);
        text-align: left;
        cursor: pointer;
        list-style: none;
        user-select: none;
        transition: background-color 180ms ease, color 180ms ease;
    }

        .kr-ecommerce .kr-repeater-categories .kr-cat-header::-webkit-details-marker {
            display: none;
        }

        .kr-ecommerce .kr-repeater-categories .kr-cat-header::marker {
            content: "";
        }

        .kr-ecommerce .kr-repeater-categories .kr-cat-header:hover {
            background: var(--kr-ecom-primary-soft);
        }

    /* No dependemos de Material Symbols: ocultamos el texto chevron_right
   y dibujamos la flecha con CSS. */
    .kr-ecommerce .kr-repeater-categories .kr-cat-arrow {
        order: -1;
        position: relative;
        display: inline-block;
        flex: 0 0 14px;
        width: 14px;
        height: 14px;
        overflow: visible;
        font-size: var(--kr-ecom-type-zero) !important;
        line-height: var(--kr-ecom-leading-none) !important;
        color: transparent !important;
    }

        .kr-ecommerce .kr-repeater-categories .kr-cat-arrow::before {
            content: "";
            position: absolute;
            left: 3px;
            top: 3px;
            width: 6px;
            height: 6px;
            border-right: 1.5px solid var(--kr-ecom-muted);
            border-bottom: 1.5px solid var(--kr-ecom-muted);
            transform: rotate(-45deg);
            transform-origin: center;
            transition: transform 180ms ease, border-color 180ms ease;
        }

    .kr-ecommerce .kr-repeater-categories .kr-cat-group[open] > .kr-cat-header .kr-cat-arrow::before {
        transform: rotate(45deg);
        border-color: var(--kr-ecom-primary);
    }

    .kr-ecommerce .kr-repeater-categories .kr-cat-group[open] > .kr-cat-header {
        background: var(--kr-ecom-surface-alt);
    }

    .kr-ecommerce .kr-repeater-categories .kr-cat-name {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .kr-ecommerce .kr-repeater-categories .kr-cat-children {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        background: var(--kr-ecom-surface);
    }

    .kr-ecommerce .kr-repeater-categories .kr-cat-child,
    .kr-ecommerce .kr-repeater-categories .kr-cat-child:link,
    .kr-ecommerce .kr-repeater-categories .kr-cat-child:visited {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        min-height: 38px;
        margin: 0 !important;
        padding: 9px 12px 9px 35px !important;
        border: 0 !important;
        border-top: 1px solid var(--kr-ecom-border) !important;
        color: var(--kr-ecom-text) !important;
        background: transparent !important;
        font-family: var(--kr-ecom-font) !important;
        font-size: var(--kr-ecom-type-sm-plus) !important;
        font-weight: var(--kr-ecom-weight-regular) !important;
        line-height: var(--kr-ecom-leading-comfortable) !important;
        text-align: left !important;
        text-decoration: none !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        transition: background-color 160ms ease, color 160ms ease, padding-left 160ms ease;
    }

        .kr-ecommerce .kr-repeater-categories .kr-cat-child:hover,
        .kr-ecommerce .kr-repeater-categories .kr-cat-child:focus-visible {
            padding-left: 39px !important;
            color: var(--kr-ecom-primary) !important;
            background: var(--kr-ecom-primary-soft) !important;
            outline: none;
        }

/* El explorador de chips/mega-menu anterior no participa. */
.kr-ecommerce .kr-category-explorer,
.kr-ecommerce .kr-cat-tabs,
.kr-ecommerce .kr-cat-panels {
    display: none !important;
}

@media (min-width: 901px) {
    .kr-ecommerce .column1 {
        display: block !important;
        width: 250px !important;
        max-width: 250px !important;
        flex: 0 0 250px !important;
    }

    .kr-ecommerce .column2 {
        min-width: 0 !important;
        width: auto !important;
        flex: 1 1 auto !important;
    }

    .kr-ecommerce .column3 {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .kr-ecommerce .column1 {
        display: none !important;
    }

    .kr-ecommerce .column3 {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
    }

    .kr-ecommerce .kr-repeater-categories--mobile {
        width: 100%;
    }
}


/* =========================================================
   FASE 6.8 - HERO ARRIBA + CATALOGO EN DOS COLUMNAS
   - Hero/carrusel ocupa todo el ancho útil antes del catálogo.
   - Categorías a la izquierda, productos a la derecha.
   - Mayor jerarquía visual entre grupo y subcategoría.
   - Solo themes modernos. clasico-original queda fuera.
   ========================================================= */

.kr-ecommerce .kr-ecom-hero-slot {
    width: 100%;
    max-width: var(--kr-ecom-content-width);
    margin: 0 auto 18px;
    box-sizing: border-box;
}

    .kr-ecommerce .kr-ecom-hero-slot:empty {
        display: none;
    }

    /* Banner completo 3:1: recomendado 1920x640. */
    .kr-ecommerce .kr-ecom-hero-slot .moves1,
    .kr-ecommerce .kr-ecom-hero-slot .moves1.slick-slider,
    .kr-ecommerce .kr-ecom-hero-slot .moves1 .slick-list,
    .kr-ecommerce .kr-ecom-hero-slot .moves1 .slick-track,
    .kr-ecommerce .kr-ecom-hero-slot .moves1 .slick-slide,
    .kr-ecommerce .kr-ecom-hero-slot .moves1 .slick-slide > div,
    .kr-ecommerce .kr-ecom-hero-slot .moves1 .slide {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .kr-ecommerce .kr-ecom-hero-slot .moves1 {
        width: 100% !important;
        aspect-ratio: 3 / 1;
        margin: 0 !important;
        border-radius: var(--kr-ecom-radius);
        overflow: hidden !important;
        background: var(--kr-ecom-surface);
    }

        .kr-ecommerce .kr-ecom-hero-slot .moves1 .slide img {
            display: block !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            object-position: center center !important;
        }

        /* Dots discretos y sin números visibles. */
        .kr-ecommerce .kr-ecom-hero-slot .moves1 .slick-dots {
            position: absolute !important;
            left: 50% !important;
            bottom: 12px !important;
            width: auto !important;
            margin: 0 !important;
            padding: 5px 8px !important;
            transform: translateX(-50%);
            display: flex !important;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--kr-ecom-surface) 76%, transparent);
        }

            .kr-ecommerce .kr-ecom-hero-slot .moves1 .slick-dots li {
                width: 7px !important;
                height: 7px !important;
                margin: 0 !important;
            }

                .kr-ecommerce .kr-ecom-hero-slot .moves1 .slick-dots li button {
                    width: 7px !important;
                    height: 7px !important;
                    min-width: 0 !important;
                    padding: 0 !important;
                    border: 0 !important;
                    border-radius: 999px !important;
                    background: var(--kr-ecom-border-strong) !important;
                    color: transparent !important;
                    font-size: var(--kr-ecom-type-zero) !important;
                    line-height: var(--kr-ecom-leading-none) !important;
                    overflow: hidden !important;
                }

                .kr-ecommerce .kr-ecom-hero-slot .moves1 .slick-dots li button {
                    text-indent: -9999px !important;
                    white-space: nowrap !important;
                }

                    .kr-ecommerce .kr-ecom-hero-slot .moves1 .slick-dots li button::before,
                    .kr-ecommerce .kr-ecom-hero-slot .moves1 .slick-dots li button::after {
                        display: none !important;
                        content: none !important;
                    }

                .kr-ecommerce .kr-ecom-hero-slot .moves1 .slick-dots li.slick-active,
                .kr-ecommerce .kr-ecom-hero-slot .moves1 .slick-dots li.slick-active button {
                    width: 22px !important;
                }

                    .kr-ecommerce .kr-ecom-hero-slot .moves1 .slick-dots li.slick-active button {
                        background: var(--kr-ecom-primary) !important;
                    }

/* Jerarquía del menú: grupo claramente distinto de subcategoría. */
.kr-ecommerce .kr-repeater-categories .kr-cat-header {
    min-height: 44px;
    padding: 10px 12px;
    background: var(--kr-ecom-surface-alt);
    font-size: var(--kr-ecom-type-md);
    font-weight: var(--kr-ecom-weight-semibold);
    letter-spacing: var(--kr-ecom-tracking-open);
}

.kr-ecommerce .kr-repeater-categories .kr-cat-group[open] > .kr-cat-header {
    position: relative;
    color: var(--kr-ecom-primary);
    background: var(--kr-ecom-primary-soft);
}

    .kr-ecommerce .kr-repeater-categories .kr-cat-group[open] > .kr-cat-header::after {
        content: "";
        position: absolute;
        left: 0;
        top: 7px;
        bottom: 7px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--kr-ecom-primary);
    }

.kr-ecommerce .kr-repeater-categories .kr-cat-children {
    padding: 4px 0 6px;
    background: var(--kr-ecom-surface);
}

.kr-ecommerce .kr-repeater-categories .kr-cat-child,
.kr-ecommerce .kr-repeater-categories .kr-cat-child:link,
.kr-ecommerce .kr-repeater-categories .kr-cat-child:visited {
    position: relative;
    min-height: 34px;
    padding: 8px 12px 8px 38px !important;
    border-top: 0 !important;
    color: var(--kr-ecom-muted) !important;
    font-size: var(--kr-ecom-type-sm) !important;
    font-weight: var(--kr-ecom-weight-regular) !important;
}

    .kr-ecommerce .kr-repeater-categories .kr-cat-child::before {
        content: "";
        position: absolute;
        left: 24px;
        top: 50%;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--kr-ecom-border-strong);
        transform: translateY(-50%);
    }

    .kr-ecommerce .kr-repeater-categories .kr-cat-child:hover,
    .kr-ecommerce .kr-repeater-categories .kr-cat-child:focus-visible {
        padding-left: 42px !important;
        color: var(--kr-ecom-primary) !important;
        background: var(--kr-ecom-primary-soft) !important;
    }

        .kr-ecommerce .kr-repeater-categories .kr-cat-child:hover::before,
        .kr-ecommerce .kr-repeater-categories .kr-cat-child:focus-visible::before {
            background: var(--kr-ecom-primary);
        }

/* Desktop: menú y productos deben compartir la misma fila. */
@media (min-width: 901px) {
    .kr-ecommerce .divMaster > .row {
        display: grid !important;
        grid-template-columns: 250px minmax(0, 1fr) !important;
        align-items: start !important;
        column-gap: 18px !important;
        row-gap: 0 !important;
    }

    .kr-ecommerce .column1 {
        grid-column: 1 !important;
        width: 250px !important;
        max-width: 250px !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .kr-ecommerce .column2 {
        grid-column: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .kr-ecommerce .divRuta2,
    .kr-ecommerce .column3 {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .kr-ecommerce .kr-ecom-hero-slot .moves1 {
        aspect-ratio: 16 / 7;
    }
}

@media (max-width: 600px) {
    .kr-ecommerce .kr-ecom-hero-slot {
        margin-bottom: 14px;
    }

        .kr-ecommerce .kr-ecom-hero-slot .moves1 {
            aspect-ratio: 4 / 3;
            border-radius: var(--kr-ecom-radius-sm);
        }
}

/* =========================================================
   FASE 6.10 - FIX FINAL VISIBLE
   Se agrega al final del archivo para prevalecer sobre estilos
   historicos e inline del catalogo moderno.
   clasico-original permanece fuera al no usar .kr-ecommerce.
   ========================================================= */

/* 1) Carrusel: sin numeros ni paginacion inferior. */
.kr-ecommerce .kr-ecom-hero-slot .moves1 .slick-dots,
.kr-ecommerce .kr-ecom-hero-slot .slick-dots,
.kr-ecommerce .moves1 .slick-dots {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kr-ecommerce .kr-ecom-hero-slot .moves1.slick-dotted.slick-slider,
.kr-ecommerce .moves1.slick-dotted.slick-slider {
    margin-bottom: 0 !important;
}

/* 2) Categorias: estilo frase, primera letra mayuscula y resto minuscula. */
.kr-ecommerce .kr-repeater-categories .kr-cat-name,
.kr-ecommerce .kr-repeater-categories .kr-cat-child {
    text-transform: lowercase !important;
}

    .kr-ecommerce .kr-repeater-categories .kr-cat-name::first-letter,
    .kr-ecommerce .kr-repeater-categories .kr-cat-child::first-letter {
        text-transform: uppercase !important;
    }

/* 3) Texto explicativo de precios: legible incluso si el ASPX conserva
      el antiguo style="font-size:0.5em". */
.kr-ecommerce .precio_c .kr-price-caption,
.kr-ecommerce .precio_c > div > div[style*="font-size"] {
    margin-top: 5px !important;
    color: var(--kr-ecom-muted) !important;
    font-size: var(--kr-ecom-type-sm) !important;
    line-height: var(--kr-ecom-leading-normal-tight) !important;
    font-weight: var(--kr-ecom-weight-regular) !important;
}

/* El precio principal conserva jerarquia y gana un poco mas de presencia. */
.kr-ecommerce .precio_c [id*="Precio"],
.kr-ecommerce .precio_c [id*="precio"] {
    font-size: var(--kr-ecom-type-3xl) !important;
    line-height: var(--kr-ecom-leading-tight) !important;
    font-weight: var(--kr-ecom-weight-semibold) !important;
}

/* =========================================================
   FASE 6.11 - SIDEBAR STICKY + LEYENDAS DE PRECIO LEGIBLES
   Solo temas modernos. clasico-original queda fuera al no usar
   la clase .kr-ecommerce.
   ========================================================= */

/* Desktop: el explorador de categorias permanece visible mientras
   se desplaza el listado de productos. Se limita al viewport y el
   scroll interno queda disponible sin mostrar una barra visual. */
@media (min-width: 901px) {
    .kr-ecommerce .divMaster > .row {
        align-items: start !important;
    }

    .kr-ecommerce .column1 {
        position: sticky !important;
        top: 16px !important;
        align-self: start !important;
        z-index: 20 !important;
        max-height: calc(100vh - 32px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .kr-ecommerce .column1::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
            display: none !important;
        }
}

/* FASE 6.12 - Leyendas de precio: legibles pero discretas.
   Mantienen jerarquia secundaria y ganan al antiguo 0.5em inline. */
.kr-ecommerce .precio_c .kr-price-caption,
.kr-ecommerce .precio_c > div > div[style*="font-size"] {
    margin-top: 4px !important;
    color: var(--kr-ecom-muted) !important;
    font-size: var(--kr-ecom-type-xs-plus) !important;
    line-height: var(--kr-ecom-leading-compact) !important;
    font-weight: var(--kr-ecom-weight-regular) !important;
    letter-spacing: var(--kr-ecom-tracking-none) !important;
}


/* =========================================================
   FASE 6.13 - SISTEMA TIPOGRAFICO E-COMMERCE
   Inter como base profesional y legible.
   Playfair Display solo como acento editorial en themes compatibles.
   clasico-original permanece fuera al no usar .kr-ecommerce.
   ========================================================= */

.kr-ecommerce {
    --kr-ecom-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --kr-ecom-heading-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --kr-ecom-editorial-font: "Playfair Display", Georgia, serif;
    font-family: var(--kr-ecom-font) !important;
    font-size: var(--kr-ecom-type-md-plus);
    line-height: var(--kr-ecom-leading-relaxed);
    font-weight: var(--kr-ecom-weight-regular);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    /* Herencia consistente: evita que sobrevivan Roboto, Muli, Work Sans u Oswald
   en piezas internas del ecommerce moderno. */
    .kr-ecommerce input,
    .kr-ecommerce select,
    .kr-ecommerce textarea,
    .kr-ecommerce button,
    .kr-ecommerce a,
    .kr-ecommerce label,
    .kr-ecommerce table,
    .kr-ecommerce .dxgv,
    .kr-ecommerce .dxeBase,
    .kr-ecommerce .dxbButton {
        font-family: var(--kr-ecom-font) !important;
    }

        /* Cabecera / navegación */
        .kr-ecommerce .upmenu,
        .kr-ecommerce .menuupcab a,
        .kr-ecommerce .menusup,
        .kr-ecommerce .botonAdd,
        .kr-ecommerce button,
        .kr-ecommerce input[type="button"],
        .kr-ecommerce input[type="submit"] {
            font-weight: var(--kr-ecom-weight-medium) !important;
            letter-spacing: var(--kr-ecom-tracking-tight-xs);
        }

    .kr-ecommerce .upmenu,
    .kr-ecommerce .menuupcab a {
        font-size: var(--kr-ecom-type-md) !important;
        line-height: var(--kr-ecom-leading-normal-tight) !important;
    }

    /* Breadcrumb: secundario, claro y compacto. */
    .kr-ecommerce .rutacss,
    .kr-ecommerce .divRuta,
    .kr-ecommerce .divRuta2 {
        font-family: var(--kr-ecom-font) !important;
        font-size: var(--kr-ecom-type-sm) !important;
        line-height: var(--kr-ecom-leading-normal) !important;
        font-weight: var(--kr-ecom-weight-regular) !important;
        letter-spacing: var(--kr-ecom-tracking-none) !important;
    }

    /* Títulos generales */
    .kr-ecommerce .kr-content-title,
    .kr-ecommerce .kr-category-title,
    .kr-ecommerce .tit1,
    .kr-ecommerce .tit2 {
        font-family: var(--kr-ecom-heading-font) !important;
        letter-spacing: var(--kr-ecom-tracking-tight-2xl);
    }

    .kr-ecommerce .kr-content-title {
        font-size: var(--kr-ecom-type-3xl) !important;
        line-height: var(--kr-ecom-leading-snug) !important;
        font-weight: var(--kr-ecom-weight-semibold) !important;
    }

    .kr-ecommerce .kr-category-title {
        font-size: var(--kr-ecom-type-xl) !important;
        line-height: var(--kr-ecom-leading-compact) !important;
        font-weight: var(--kr-ecom-weight-semibold) !important;
    }

    /* Menú Repeater: grupo principal y subcategoría con jerarquía clara. */
    .kr-ecommerce .kr-repeater-categories .kr-cat-name {
        font-family: var(--kr-ecom-font) !important;
        font-size: var(--kr-ecom-type-md) !important;
        line-height: var(--kr-ecom-leading-normal-tight) !important;
        font-weight: var(--kr-ecom-weight-semibold) !important;
        letter-spacing: var(--kr-ecom-tracking-tight-sm);
    }

    .kr-ecommerce .kr-repeater-categories .kr-cat-child,
    .kr-ecommerce .kr-repeater-categories .kr-cat-child:link,
    .kr-ecommerce .kr-repeater-categories .kr-cat-child:visited {
        font-family: var(--kr-ecom-font) !important;
        font-size: var(--kr-ecom-type-sm-plus) !important;
        line-height: var(--kr-ecom-leading-normal) !important;
        font-weight: var(--kr-ecom-weight-regular) !important;
        letter-spacing: var(--kr-ecom-tracking-none) !important;
    }

        .kr-ecommerce .kr-repeater-categories .kr-cat-child:hover,
        .kr-ecommerce .kr-repeater-categories .kr-cat-child:focus-visible,
        .kr-ecommerce .kr-repeater-categories .kr-cat-child.is-active {
            font-weight: var(--kr-ecom-weight-medium) !important;
        }

    /* Cards: nombre con presencia, metadata tranquila. */
    .kr-ecommerce .kr-product-card,
    .kr-ecommerce .pr_contenedor {
        font-family: var(--kr-ecom-font) !important;
    }

        .kr-ecommerce .kr-product-title,
        .kr-ecommerce .pr_contenedor .capitalice[id*="Descripcion"],
        .kr-ecommerce .pr_contenedor [id*="DescripcionProducto"],
        .kr-ecommerce .pr_contenedor [id*="DESCRIPCION"] {
            font-family: var(--kr-ecom-font) !important;
            font-size: var(--kr-ecom-type-lg) !important;
            line-height: var(--kr-ecom-leading-card-title) !important;
            font-weight: var(--kr-ecom-weight-medium) !important;
            letter-spacing: var(--kr-ecom-tracking-tight-md);
        }

        .kr-ecommerce .kr-product-meta,
        .kr-ecommerce .pr_contenedor [id*="divCODIGO"],
        .kr-ecommerce .pr_contenedor [id*="divUNIDAD"],
        .kr-ecommerce .pr_contenedor [id*="divMARCA"],
        .kr-ecommerce .pr_contenedor [id*="divTIPO"] {
            font-family: var(--kr-ecom-font) !important;
            font-size: var(--kr-ecom-type-sm-plus) !important;
            line-height: var(--kr-ecom-leading-relaxed) !important;
            font-weight: var(--kr-ecom-weight-regular) !important;
            letter-spacing: var(--kr-ecom-tracking-none) !important;
        }

    /* Precio: protagonista sin exceso de negrita. */
    .kr-ecommerce .precio_c {
        font-family: var(--kr-ecom-font) !important;
    }

        .kr-ecommerce .precio_c > div > span:first-child {
            font-size: var(--kr-ecom-type-xs-plus) !important;
            line-height: var(--kr-ecom-leading-compact) !important;
            font-weight: var(--kr-ecom-weight-regular) !important;
            letter-spacing: var(--kr-ecom-tracking-none) !important;
        }

        .kr-ecommerce .precio_c [id*="Precio"],
        .kr-ecommerce .precio_c [id*="precio"] {
            font-family: var(--kr-ecom-font) !important;
            font-size: var(--kr-ecom-type-3xl) !important;
            line-height: var(--kr-ecom-leading-tightest) !important;
            font-weight: var(--kr-ecom-weight-semibold) !important;
            letter-spacing: var(--kr-ecom-tracking-tight-2xl);
        }

        .kr-ecommerce .precio_c .kr-price-caption,
        .kr-ecommerce .precio_c > div > div[style*="font-size"] {
            font-family: var(--kr-ecom-font) !important;
            font-size: var(--kr-ecom-type-xs-plus) !important;
            line-height: var(--kr-ecom-leading-compact) !important;
            font-weight: var(--kr-ecom-weight-regular) !important;
            letter-spacing: var(--kr-ecom-tracking-none) !important;
        }

    /* Stock, promociones y acciones. */
    .kr-ecommerce .kr-stock-row,
    .kr-ecommerce [id*="PanelStock"],
    .kr-ecommerce .kr-promo-text {
        font-family: var(--kr-ecom-font) !important;
        font-size: var(--kr-ecom-type-sm) !important;
        line-height: var(--kr-ecom-leading-normal) !important;
        font-weight: var(--kr-ecom-weight-regular) !important;
    }

    .kr-ecommerce .kr-add-row,
    .kr-ecommerce .kr-add-row .botonAdd,
    .kr-ecommerce .pr_contenedor .botonAdd {
        font-family: var(--kr-ecom-font) !important;
        font-size: var(--kr-ecom-type-sm-plus) !important;
        line-height: var(--kr-ecom-leading-compact) !important;
        font-weight: var(--kr-ecom-weight-medium) !important;
    }

    /* Toolbar, combos y buscador. */
    .kr-ecommerce .kr-shop-toolbar,
    .kr-ecommerce .kr-catalog-toolbar,
    .kr-ecommerce .kr-shop-toolbar select,
    .kr-ecommerce .kr-catalog-toolbar select,
    .kr-ecommerce .divOpTextBox,
    .kr-ecommerce input[type="text"],
    .kr-ecommerce input[type="search"],
    .kr-ecommerce input[type="number"],
    .kr-ecommerce select,
    .kr-ecommerce textarea {
        font-family: var(--kr-ecom-font) !important;
        font-size: var(--kr-ecom-type-md) !important;
        line-height: var(--kr-ecom-leading-normal) !important;
        font-weight: var(--kr-ecom-weight-regular) !important;
        letter-spacing: var(--kr-ecom-tracking-none) !important;
    }

    /* Editorial: solo títulos; jamás navegación, precio o texto operativo. */
    .kr-ecommerce[data-ecommerce-theme="premium"] .kr-content-title,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .kr-content-title,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .kr-content-title,
    .kr-ecommerce[data-ecommerce-theme="premium"] .tit1,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .tit1,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .tit1 {
        font-family: var(--kr-ecom-editorial-font) !important;
        font-weight: var(--kr-ecom-weight-semibold) !important;
        letter-spacing: var(--kr-ecom-tracking-tight-xl);
    }

/* Responsive: no bajar de tamaños que comprometan legibilidad. */
@media (max-width: 760px) {
    .kr-ecommerce {
        font-size: var(--kr-ecom-type-md-plus);
    }

        .kr-ecommerce .kr-content-title {
            font-size: var(--kr-ecom-type-2xl) !important;
        }

        .kr-ecommerce .kr-category-title {
            font-size: var(--kr-ecom-type-lg) !important;
        }

        .kr-ecommerce .kr-repeater-categories .kr-cat-name {
            font-size: var(--kr-ecom-type-md) !important;
        }

        .kr-ecommerce .kr-repeater-categories .kr-cat-child {
            font-size: var(--kr-ecom-type-sm-plus) !important;
        }
}


/* =========================================================
   FASE 6.14 - FOOTER 100% INTEGRADO AL THEME
   El pie y la barra Kronhos e-commerce heredan la paleta del theme.
   ========================================================= */
.kr-ecommerce .pieDir,
.kr-ecommerce .cajainfcont {
    background: var(--kr-ecom-footer-bg, var(--kr-ecom-primary-strong)) !important;
    color: var(--kr-ecom-footer-text, var(--kr-ecom-surface)) !important;
}

    .kr-ecommerce .pieDir *,
    .kr-ecommerce .cajainfcont *,
    .kr-ecommerce .pieDir a,
    .kr-ecommerce .cajainfcont a,
    .kr-ecommerce .txtcajasinf,
    .kr-ecommerce .redes {
        color: var(--kr-ecom-footer-text, var(--kr-ecom-surface)) !important;
    }

/* =========================================================
   FASE 6.15 - PALETA GLOBAL POR THEME + TIPOGRAFIA CONSISTENTE
   - Todos los themes modernos usan su color predominante en footer.
   - Inter queda como tipografia operativa de cards/productos.
   - Playfair queda reservado a titulos editoriales puntuales.
   - clasico-original permanece fuera al no usar .kr-ecommerce.
   ========================================================= */

/* El footer siempre deriva del color predominante del theme activo.
   No depende de una variable footer fija heredada de otro theme. */
.kr-ecommerce .pieDir,
.kr-ecommerce .cajainfcont {
    background: var(--kr-ecom-primary-strong) !important;
    background-color: var(--kr-ecom-primary-strong) !important;
    color: var(--kr-ecom-surface) !important;
}

    .kr-ecommerce .pieDir *,
    .kr-ecommerce .cajainfcont *,
    .kr-ecommerce .pieDir a,
    .kr-ecommerce .cajainfcont a,
    .kr-ecommerce .txtcajasinf,
    .kr-ecommerce .redes {
        color: var(--kr-ecom-surface) !important;
    }

/* La barra inferior Kronhos e-commerce usa la misma paleta del footer. */
.kr-ecommerce .cajainfcont {
    border-color: color-mix(in srgb, var(--kr-ecom-surface) 18%, transparent) !important;
}

/* Tipografia operativa: nunca heredar Georgia/serif desde un theme. */
.kr-ecommerce .pr_contenedor,
.kr-ecommerce .kr-product-card,
.kr-ecommerce .titulo1_pr,
.kr-ecommerce .titulo2_pr,
.kr-ecommerce .pr_contenedor [id*="divSKU"],
.kr-ecommerce .pr_contenedor [id*="divCODIGO"],
.kr-ecommerce .pr_contenedor [id*="divUNIDAD"],
.kr-ecommerce .pr_contenedor [id*="divMARCA"],
.kr-ecommerce .pr_contenedor [id*="divTIPO"],
.kr-ecommerce .pr_contenedor [id*="PanelStock"],
.kr-ecommerce .pr_contenedor .precio_c,
.kr-ecommerce .pr_contenedor .precio_c span,
.kr-ecommerce .pr_contenedor .precio_c div,
.kr-ecommerce .pr_contenedor .kr-add-row,
.kr-ecommerce .pr_contenedor .botonAdd,
.kr-ecommerce .pr_contenedor input,
.kr-ecommerce .pr_contenedor select,
.kr-ecommerce .pr_contenedor label {
    font-family: var(--kr-ecom-font) !important;
}

/* Nombre de producto: moderno, limpio y consistente en todos los themes. */
.kr-ecommerce .titulo1_pr,
.kr-ecommerce .titulo2_pr {
    font-size: var(--kr-ecom-type-lg) !important;
    line-height: var(--kr-ecom-leading-card-title) !important;
    font-weight: var(--kr-ecom-weight-medium) !important;
    letter-spacing: var(--kr-ecom-tracking-tight-md) !important;
}

/* Metadata siempre secundaria y legible. */
.kr-ecommerce .pr_contenedor [id*="divSKU"],
.kr-ecommerce .pr_contenedor [id*="divCODIGO"],
.kr-ecommerce .pr_contenedor [id*="divUNIDAD"],
.kr-ecommerce .pr_contenedor [id*="divMARCA"],
.kr-ecommerce .pr_contenedor [id*="divTIPO"] {
    font-size: var(--kr-ecom-type-sm-plus) !important;
    line-height: var(--kr-ecom-leading-relaxed) !important;
    font-weight: var(--kr-ecom-weight-regular) !important;
    letter-spacing: var(--kr-ecom-tracking-none) !important;
}

/* Precios mantienen Inter y jerarquia 600, sin serif del theme. */
.kr-ecommerce .pr_contenedor .precio_c [id*="Precio"],
.kr-ecommerce .pr_contenedor .precio_c [id*="precio"] {
    font-family: var(--kr-ecom-font) !important;
    font-size: var(--kr-ecom-type-3xl) !important;
    line-height: var(--kr-ecom-leading-tightest) !important;
    font-weight: var(--kr-ecom-weight-semibold) !important;
    letter-spacing: var(--kr-ecom-tracking-tight-2xl) !important;
}

.kr-ecommerce .pr_contenedor .kr-price-caption,
.kr-ecommerce .pr_contenedor .precio_c > div > div[style*="font-size"] {
    font-family: var(--kr-ecom-font) !important;
    font-size: var(--kr-ecom-type-xs-plus) !important;
    line-height: var(--kr-ecom-leading-compact) !important;
    font-weight: var(--kr-ecom-weight-regular) !important;
}

/* Acento editorial solo en encabezados de pagina/seccion. */
.kr-ecommerce[data-ecommerce-theme="premium"] .kr-content-title,
.kr-ecommerce[data-ecommerce-theme="boutique"] .kr-content-title,
.kr-ecommerce[data-ecommerce-theme="editorial"] .kr-content-title,
.kr-ecommerce[data-ecommerce-theme="premium"] .tit1,
.kr-ecommerce[data-ecommerce-theme="boutique"] .tit1,
.kr-ecommerce[data-ecommerce-theme="editorial"] .tit1 {
    font-family: var(--kr-ecom-editorial-font) !important;
    font-weight: var(--kr-ecom-weight-semibold) !important;
}


/* =========================================================
   FASE 6.17 - TITULO DE PRODUCTO SIEMPRE OPERATIVO
   Los títulos de producto no usan la fuente editorial del theme.
   ========================================================= */
.kr-ecommerce .pr_contenedor .titulo1_pr,
.kr-ecommerce .pr_contenedor .titulo2_pr,
.kr-ecommerce .kr-product-card .titulo1_pr,
.kr-ecommerce .kr-product-card .titulo2_pr {
    font-family: var(--kr-ecom-font) !important;
    font-size: var(--kr-ecom-type-lg) !important;
    font-weight: var(--kr-ecom-weight-medium) !important;
    line-height: var(--kr-ecom-leading-card-title) !important;
    letter-spacing: var(--kr-ecom-tracking-tight-md) !important;
}


/* ================================================================
   FASE 6.21 - APLICACION TIPOGRAFICA POR FUNCION
   Este bloque debe permanecer al final del archivo para ganar
   sobre las reglas historicas que forzaban --kr-ecom-font.
   ================================================================ */

/* Texto general */
.kr-ecommerce,
.kr-ecommerce p,
.kr-ecommerce label,
.kr-ecommerce input,
.kr-ecommerce select,
.kr-ecommerce textarea {
    font-family: var(--kr-ecom-body-font) !important;
}

    /* Menu superior + categorias modernas */
    .kr-ecommerce .menusup,
    .kr-ecommerce .menuUserName,
    .kr-ecommerce #LoginStatus1,
    .kr-ecommerce .upmenu,
    .kr-ecommerce .kr-category-title,
    .kr-ecommerce .kr-repeater-categories,
    .kr-ecommerce .kr-repeater-categories .kr-cat-name,
    .kr-ecommerce .kr-repeater-categories .kr-cat-child,
    .kr-ecommerce .kr-repeater-categories .kr-cat-child:link,
    .kr-ecommerce .kr-repeater-categories .kr-cat-child:visited {
        font-family: var(--kr-ecom-menu-font) !important;
    }

    /* Nombre de producto: aqui Boutique y Editorial si cambian de fuente. */
    .kr-ecommerce .titulo1_pr,
    .kr-ecommerce .titulo2_pr,
    .kr-ecommerce .pr_descripcion,
    .kr-ecommerce .kr-product-title,
    .kr-ecommerce .pr_contenedor .capitalice[id*="Descripcion"],
    .kr-ecommerce .pr_contenedor [id*="DescripcionProducto"],
    .kr-ecommerce .pr_contenedor [id*="DESCRIPCION"] {
        font-family: var(--kr-ecom-product-font) !important;
    }

    /* Datos secundarios */
    .kr-ecommerce .pr_codigo,
    .kr-ecommerce .pr_marca,
    .kr-ecommerce .pr_unidad,
    .kr-ecommerce .kr-product-meta,
    .kr-ecommerce .pr_contenedor [id*="divSKU"],
    .kr-ecommerce .pr_contenedor [id*="divCODIGO"],
    .kr-ecommerce .pr_contenedor [id*="divUNIDAD"],
    .kr-ecommerce .pr_contenedor [id*="divMARCA"],
    .kr-ecommerce .pr_contenedor [id*="divTIPO"],
    .kr-ecommerce .precio_c .kr-price-caption,
    .kr-ecommerce .precio_c > div > div[style*="font-size"] {
        font-family: var(--kr-ecom-meta-font) !important;
    }

    /* Precio */
    .kr-ecommerce .precio_c,
    .kr-ecommerce .precio_c span,
    .kr-ecommerce .precio_c [id*="Precio"],
    .kr-ecommerce .precio_c [id*="precio"] {
        font-family: var(--kr-ecom-price-font) !important;
    }

    /* Botones */
    .kr-ecommerce .botonAdd,
    .kr-ecommerce button,
    .kr-ecommerce input[type="button"],
    .kr-ecommerce input[type="submit"],
    .kr-ecommerce .kr-add-row .botonAdd,
    .kr-ecommerce .pr_contenedor .botonAdd {
        font-family: var(--kr-ecom-button-font) !important;
    }

    /* Boutique: un poco mas editorial sin sacrificar lectura operativa. */
    .kr-ecommerce[data-ecommerce-theme="boutique"] .titulo1_pr,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .titulo2_pr,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .kr-product-title {
        font-weight: var(--kr-ecom-weight-medium) !important;
        letter-spacing: var(--kr-ecom-tracking-tight-sm) !important;
    }

    .kr-ecommerce[data-ecommerce-theme="boutique"] .kr-repeater-categories .kr-cat-name {
        font-weight: var(--kr-ecom-weight-medium) !important;
    }


    /* ================================================================
   FASE 6.24 - TITULOS COMPLETOS + PROMOCIONES VISIBLES
   ================================================================ */

    /* El título del producto no debe recortarse.
   Se conserva una altura mínima para alinear cards, pero puede crecer. */
    .kr-ecommerce .pr_contenedor #titulo1 {
        height: auto !important;
        min-height: 64px !important;
        max-height: none !important;
        overflow: visible !important;
    }

        .kr-ecommerce .pr_contenedor #titulo1 .titulo1_pr,
        .kr-ecommerce .pr_contenedor .titulo1_pr,
        .kr-ecommerce .pr_contenedor .titulo2_pr {
            display: block !important;
            width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            overflow: visible !important;
            text-overflow: clip !important;
            -webkit-line-clamp: unset !important;
            -webkit-box-orient: initial !important;
            white-space: normal !important;
            word-break: normal !important;
            overflow-wrap: anywhere !important;
            line-height: var(--kr-ecom-leading-card-title) !important;
        }

    /* Badge NUEVO / PROMOCION:
   estas reglas solo actúan cuando ASP.NET realmente renderiza el Panel. */
    .kr-ecommerce .pr_contenedor .nuevoAviso,
    .kr-ecommerce .pr_contenedor .nuevoPromo {
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        pointer-events: none;
    }

    .kr-ecommerce .pr_contenedor .nuevoAvisoIn,
    .kr-ecommerce .pr_contenedor .nuevoPromoIn {
        display: inline-flex !important;
        width: auto !important;
        max-width: none !important;
        min-height: 24px !important;
        align-items: center;
        justify-content: center;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-family: var(--kr-ecom-button-font, var(--kr-ecom-font)) !important;
        font-size: var(--kr-ecom-type-2xs) !important;
        font-weight: var(--kr-ecom-weight-semibold) !important;
        line-height: var(--kr-ecom-leading-tight) !important;
        letter-spacing: var(--kr-ecom-tracking-wide) !important;
    }

    /* En Boutique/Editorial dejamos algo más de aire para la serif. */
    .kr-ecommerce[data-ecommerce-theme="boutique"] .pr_contenedor #titulo1,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .pr_contenedor #titulo1 {
        min-height: 72px !important;
    }


    /* ================================================================
   FASE 6.25 - APLICACION TIPOGRAFICA AL FOOTER
   Se aplica al contenedor y a todos sus textos/enlaces.
   ================================================================ */
    .kr-ecommerce .pieDir,
    .kr-ecommerce .pieDir *,
    .kr-ecommerce .pieDir a,
    .kr-ecommerce .cajainfcont,
    .kr-ecommerce .cajainfcont *,
    .kr-ecommerce .cajainfcont a,
    .kr-ecommerce .txtcajasinf,
    .kr-ecommerce .redes {
        font-family: var(--kr-ecom-footer-font) !important;
    }

        /* Títulos del pie: jerarquía del theme */
        .kr-ecommerce .pieDir h1,
        .kr-ecommerce .pieDir h2,
        .kr-ecommerce .pieDir h3,
        .kr-ecommerce .pieDir h4,
        .kr-ecommerce .pieDir .tit1,
        .kr-ecommerce .pieDir .tit2,
        .kr-ecommerce .cajainfcont h1,
        .kr-ecommerce .cajainfcont h2,
        .kr-ecommerce .cajainfcont h3,
        .kr-ecommerce .cajainfcont h4 {
            font-family: var(--kr-ecom-footer-font) !important;
            font-weight: var(--kr-ecom-weight-semibold) !important;
        }

        /* Texto secundario del footer: mismo theme, menor peso */
        .kr-ecommerce .pieDir p,
        .kr-ecommerce .pieDir span,
        .kr-ecommerce .pieDir div,
        .kr-ecommerce .cajainfcont p,
        .kr-ecommerce .cajainfcont span,
        .kr-ecommerce .cajainfcont div {
            font-family: var(--kr-ecom-footer-font) !important;
        }

    /* Boutique/Editorial: serif solo en títulos del pie.
   Cuerpo/dirección/redes queda en Inter para legibilidad. */
    .kr-ecommerce[data-ecommerce-theme="boutique"] .pieDir,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .pieDir p,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .pieDir span,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .pieDir div,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .pieDir a,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .cajainfcont,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .cajainfcont p,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .cajainfcont span,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .cajainfcont div,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .cajainfcont a,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .pieDir,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .pieDir p,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .pieDir span,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .pieDir div,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .pieDir a,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .cajainfcont,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .cajainfcont p,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .cajainfcont span,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .cajainfcont div,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .cajainfcont a {
        font-family: var(--kr-ecom-body-font, var(--kr-ecom-font)) !important;
    }

        /* En Boutique/Editorial los encabezados sí toman la personalidad serif. */
        .kr-ecommerce[data-ecommerce-theme="boutique"] .pieDir h1,
        .kr-ecommerce[data-ecommerce-theme="boutique"] .pieDir h2,
        .kr-ecommerce[data-ecommerce-theme="boutique"] .pieDir h3,
        .kr-ecommerce[data-ecommerce-theme="boutique"] .pieDir h4,
        .kr-ecommerce[data-ecommerce-theme="boutique"] .cajainfcont h1,
        .kr-ecommerce[data-ecommerce-theme="boutique"] .cajainfcont h2,
        .kr-ecommerce[data-ecommerce-theme="boutique"] .cajainfcont h3,
        .kr-ecommerce[data-ecommerce-theme="boutique"] .cajainfcont h4,
        .kr-ecommerce[data-ecommerce-theme="editorial"] .pieDir h1,
        .kr-ecommerce[data-ecommerce-theme="editorial"] .pieDir h2,
        .kr-ecommerce[data-ecommerce-theme="editorial"] .pieDir h3,
        .kr-ecommerce[data-ecommerce-theme="editorial"] .pieDir h4,
        .kr-ecommerce[data-ecommerce-theme="editorial"] .cajainfcont h1,
        .kr-ecommerce[data-ecommerce-theme="editorial"] .cajainfcont h2,
        .kr-ecommerce[data-ecommerce-theme="editorial"] .cajainfcont h3,
        .kr-ecommerce[data-ecommerce-theme="editorial"] .cajainfcont h4 {
            font-family: var(--kr-ecom-heading-font) !important;
        }


    /* ================================================================
   FASE 6.26 - FOOTER SEGUN MARKUP REAL
   Los titulos del pie son <p>, no encabezados h1-h4.
   ================================================================ */

    /* Base del bloque: texto operativo legible */
    .kr-ecommerce .pieDir .pieDirIn,
    .kr-ecommerce .pieDir .pieDirIn *,
    .kr-ecommerce .pieDir .pieDirIn a,
    .kr-ecommerce .pieDir .pieDirIn span {
        font-family: var(--kr-ecom-body-font, var(--kr-ecom-font)) !important;
    }

        /* Titulo del primer bloque: "Una empresa de:" */
        .kr-ecommerce .pieDir .pieDirIn:first-child > div > p:first-child {
            font-family: var(--kr-ecom-heading-font, var(--kr-ecom-font)) !important;
            font-weight: var(--kr-ecom-weight-semibold) !important;
            letter-spacing: var(--kr-ecom-tracking-tight-sm) !important;
        }

        /* Titulo del segundo bloque: "Direccion:" */
        .kr-ecommerce .pieDir .pieDirIn:nth-child(2) > p:first-child {
            font-family: var(--kr-ecom-heading-font, var(--kr-ecom-font)) !important;
            font-weight: var(--kr-ecom-weight-semibold) !important;
            letter-spacing: var(--kr-ecom-tracking-tight-sm) !important;
        }

        /* Titulo del tercer bloque: "Siguenos".
   Gana incluso sobre style="font-family: Work Sans" del contenedor. */
        .kr-ecommerce .pieDir .pieDirIn:nth-child(3) > p:first-child {
            font-family: var(--kr-ecom-heading-font, var(--kr-ecom-font)) !important;
            font-weight: var(--kr-ecom-weight-semibold) !important;
            letter-spacing: var(--kr-ecom-tracking-tight-sm) !important;
        }

    /* Boutique y Editorial: refuerzo explicito de identidad serif en títulos */
    .kr-ecommerce[data-ecommerce-theme="boutique"] .pieDir .pieDirIn:first-child > div > p:first-child,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .pieDir .pieDirIn:nth-child(2) > p:first-child,
    .kr-ecommerce[data-ecommerce-theme="boutique"] .pieDir .pieDirIn:nth-child(3) > p:first-child,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .pieDir .pieDirIn:first-child > div > p:first-child,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .pieDir .pieDirIn:nth-child(2) > p:first-child,
    .kr-ecommerce[data-ecommerce-theme="editorial"] .pieDir .pieDirIn:nth-child(3) > p:first-child {
        font-family: var(--kr-ecom-heading-font) !important;
    }

    /* El resto del texto del pie queda con la fuente de cuerpo del theme. */
    .kr-ecommerce .pieDir .pieDirIn > p:not(:first-child),
    .kr-ecommerce .pieDir .pieDirIn:first-child > div > div,
    .kr-ecommerce .pieDir .pieDirIn:nth-child(3) > div,
    .kr-ecommerce .pieDir .pieDirIn:nth-child(3) > div * {
        font-family: var(--kr-ecom-body-font, var(--kr-ecom-font)) !important;
    }


    /* ================================================================
   FASE 6.27 - COMPONENTES CON TIPOGRAFIA SEMANTICA
   ================================================================ */
    .kr-ecommerce,
    .kr-ecommerce p,
    .kr-ecommerce label,
    .kr-ecommerce input,
    .kr-ecommerce select,
    .kr-ecommerce textarea {
        font-family: var(--kr-ecom-body-font) !important;
    }

        .kr-ecommerce .titulo1_pr,
        .kr-ecommerce .titulo2_pr,
        .kr-ecommerce .pr_descripcion,
        .kr-ecommerce .kr-product-title {
            font-family: var(--kr-ecom-product-font) !important;
        }

        .kr-ecommerce .upmenu,
        .kr-ecommerce .menusup,
        .kr-ecommerce .menuUserName,
        .kr-ecommerce .kr-category-title,
        .kr-ecommerce .kr-repeater-categories,
        .kr-ecommerce .kr-cat-name,
        .kr-ecommerce .kr-cat-child {
            font-family: var(--kr-ecom-menu-font) !important;
        }

        .kr-ecommerce .precio_c,
        .kr-ecommerce .precio_c * {
            font-family: var(--kr-ecom-price-font) !important;
        }

        .kr-ecommerce .botonAdd,
        .kr-ecommerce button,
        .kr-ecommerce input[type="button"],
        .kr-ecommerce input[type="submit"] {
            font-family: var(--kr-ecom-button-font) !important;
        }

        .kr-ecommerce .pr_codigo,
        .kr-ecommerce .pr_marca,
        .kr-ecommerce .pr_unidad,
        .kr-ecommerce .kr-product-meta {
            font-family: var(--kr-ecom-meta-font) !important;
        }

        .kr-ecommerce .pieDir,
        .kr-ecommerce .pieDir .pieDirIn,
        .kr-ecommerce .pieDir .pieDirIn * {
            font-family: var(--kr-ecom-body-font) !important;
        }

            .kr-ecommerce .pieDir .pieDirIn:first-child > div > p:first-child,
            .kr-ecommerce .pieDir .pieDirIn:nth-child(2) > p:first-child,
            .kr-ecommerce .pieDir .pieDirIn:nth-child(3) > p:first-child {
                font-family: var(--kr-ecom-footer-font) !important;
            }


        /* ================================================================
   FASE 6.28 - PAGINADOR CENTRADO + AGREGAR COMPACTO
   ================================================================ */

        .kr-ecommerce .kr-pager-section {
            display: flex !important;
            width: 100% !important;
            flex-direction: column;
            align-items: center !important;
            justify-content: center !important;
            clear: both;
            margin: 18px auto 28px !important;
            text-align: center !important;
        }

        .kr-ecommerce .kr-pager-wrap {
            display: inline-flex !important;
            width: auto !important;
            max-width: 100%;
            flex-wrap: wrap;
            align-items: center !important;
            justify-content: center !important;
            gap: 6px;
            margin: 0 auto !important;
            float: none !important;
        }

            .kr-ecommerce .kr-pager-wrap .pager,
            .kr-ecommerce .kr-pager-wrap .pagerSel {
                width: 40px !important;
                min-width: 40px !important;
                height: 40px !important;
                min-height: 40px !important;
                padding: 0 !important;
            }

        .kr-ecommerce .kr-visually-hidden {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }

        .kr-ecommerce .kr-add-row .kr-add-button,
        .kr-ecommerce .pr_contenedor .kr-add-button {
            position: relative;
            display: inline-flex !important;
            flex: 0 0 40px !important;
            width: 40px !important;
            min-width: 40px !important;
            max-width: 40px !important;
            height: 40px !important;
            min-height: 40px !important;
            align-items: center !important;
            justify-content: center !important;
            margin: 0 !important;
            border: 1px solid var(--kr-ecom-primary) !important;
            border-radius: var(--kr-ecom-radius-sm) !important;
            background: var(--kr-ecom-primary) !important;
            color: var(--kr-ecom-accent-contrast) !important;
            padding: 0 !important;
            cursor: pointer;
            text-decoration: none !important;
            box-shadow: none !important;
            transition: transform 160ms ease, opacity 160ms ease, background-color 160ms ease;
        }

            .kr-ecommerce .kr-add-row .kr-add-button:hover,
            .kr-ecommerce .pr_contenedor .kr-add-button:hover {
                transform: translateY(-1px);
                opacity: .92;
            }

        .kr-ecommerce .kr-add-button .icon-cart {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: var(--kr-ecom-type-xl) !important;
            line-height: 1 !important;
            color: inherit !important;
        }

        .kr-ecommerce .kr-add-button--loading {
            pointer-events: none;
            opacity: .75;
        }

            .kr-ecommerce .kr-add-button--loading .icon-cart {
                visibility: hidden;
            }

            .kr-ecommerce .kr-add-button--loading::after {
                content: "";
                position: absolute;
                width: 15px;
                height: 15px;
                border: 2px solid currentColor;
                border-right-color: transparent;
                border-radius: 50%;
                animation: kr-ecom-add-spin .7s linear infinite;
            }

@keyframes kr-ecom-add-spin {
    to {
        transform: rotate(360deg);
    }
}

/* El UpdateProgress reutiliza el mismo componente visual de la carga completa.
   Fuera de los themes modernos permanece oculto para conservar el clásico. */
.loader-wrapper.kr-update-progress {
    display: none !important;
}

html body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"])
    .loader-wrapper.kr-update-progress {
    display: flex !important;
}

@media (max-width: 590px) {
    .kr-ecommerce .kr-add-row .kr-add-button,
    .kr-ecommerce .pr_contenedor .kr-add-button {
        flex-basis: 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }
}


/* ================================================================
   FASE 6.29 - NAVEGACION + BUSCADOR COMPACTO
   ================================================================ */

/* Menú superior: transición/fade sutil y capitalización natural. */
.kr-ecommerce .menu_sup_nuevo .upmenu,
.kr-ecommerce .menu_sup_nuevo .menuupcab > a {
    position: relative;
    text-transform: none !important;
    transition: color 180ms ease, background-color 180ms ease, opacity 180ms ease, transform 180ms ease !important;
}

    .kr-ecommerce .menu_sup_nuevo .upmenu:hover,
    .kr-ecommerce .menu_sup_nuevo .menuupcab > a:hover {
        background: var(--kr-ecom-primary-soft) !important;
        color: var(--kr-ecom-primary) !important;
        opacity: .96;
        transform: translateY(-1px);
    }

    .kr-ecommerce .menu_sup_nuevo .upmenu::after,
    .kr-ecommerce .menu_sup_nuevo .menuupcab > a::after {
        content: "";
        position: absolute;
        right: 14px;
        bottom: 4px;
        left: 14px;
        height: 1px;
        border-radius: 999px;
        background: var(--kr-ecom-primary);
        opacity: 0;
        transform: scaleX(.25);
        transform-origin: center;
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .kr-ecommerce .menu_sup_nuevo .upmenu:hover::after,
    .kr-ecommerce .menu_sup_nuevo .menuupcab > a:hover::after {
        opacity: .38;
        transform: scaleX(1);
    }

/* Breadcrumb: Inicio / Ingreso, evitando mezcla de TODO MAYÚSCULAS. */
.kr-ecommerce .divRuta,
.kr-ecommerce .divRuta2 {
    text-transform: lowercase !important;
}

    .kr-ecommerce .divRuta::first-letter,
    .kr-ecommerce .divRuta2::first-letter,
    .kr-ecommerce .divRuta a::first-letter,
    .kr-ecommerce .divRuta2 a::first-letter,
    .kr-ecommerce .rutacss::first-letter {
        text-transform: uppercase !important;
    }

/* Buscador más pequeño y centrado dentro de su zona. */
.kr-ecommerce .cabLoginNew {
    width: min(620px, 62%) !important;
}

.kr-ecommerce .divOpNew {
    width: 100% !important;
    max-width: 620px;
    margin-left: auto;
    gap: 8px !important;
    align-items: center !important;
}

    .kr-ecommerce .divOpNew .divOpTextBox,
    .kr-ecommerce .divOpNew input[type="text"] {
        min-height: 40px !important;
        height: 40px !important;
        border-radius: var(--kr-ecom-radius-sm) !important;
        padding-inline: 13px !important;
        font-family: var(--kr-ecom-body-font, var(--kr-ecom-font)) !important;
        font-size: var(--kr-ecom-type-md) !important;
        font-weight: var(--kr-ecom-weight-regular) !important;
    }

    /* La marca de agua debe verse normal, no como texto gritón. */
    .kr-ecommerce .divOpNew .buscador_wm_m {
        text-transform: none !important;
        color: var(--kr-ecom-muted) !important;
        font-family: var(--kr-ecom-body-font, var(--kr-ecom-font)) !important;
        font-size: var(--kr-ecom-type-md) !important;
        font-weight: var(--kr-ecom-weight-regular) !important;
    }

    /* Botón lupa: sustituye visualmente al botón BUSCAR grande. */
    .kr-ecommerce .divOpNew .kr-search-button {
        display: inline-flex !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        border: 1px solid var(--kr-ecom-primary) !important;
        border-radius: var(--kr-ecom-radius-sm) !important;
        background: var(--kr-ecom-primary) !important;
        color: var(--kr-ecom-accent-contrast) !important;
        padding: 0 !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transition: transform 160ms ease, opacity 160ms ease, background-color 160ms ease !important;
    }

        .kr-ecommerce .divOpNew .kr-search-button:hover {
            transform: translateY(-1px);
            opacity: .9;
        }

        .kr-ecommerce .divOpNew .kr-search-button .icon-search {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: inherit !important;
            font-size: var(--kr-ecom-type-lg) !important;
            line-height: 1 !important;
        }

@media (max-width: 760px) {
    .kr-ecommerce .cabLoginNew {
        width: 100% !important;
    }

    .kr-ecommerce .divOpNew {
        max-width: none;
        margin-left: 0;
    }
}


/* ================================================================
   FASE 6.30 - TIPOGRAFIA UNIFICADA EN CABECERA OPERATIVA
   Teléfono, correo, registro e ingreso usan la misma fuente de UI.
   ================================================================ */

.kr-ecommerce .cabecera,
.kr-ecommerce .cabecera *,
.kr-ecommerce .cabecera a,
.kr-ecommerce .cabecera span,
.kr-ecommerce .cabecera p,
.kr-ecommerce .cabecera div,
.kr-ecommerce .cabecera_tel,
.kr-ecommerce .cabecera_tel *,
.kr-ecommerce .cabecera_login,
.kr-ecommerce .cabecera_login *,
.kr-ecommerce .divLoginCss,
.kr-ecommerce .divLoginCss *,
.kr-ecommerce .divLoginCss a,
.kr-ecommerce .menusup,
.kr-ecommerce .menusup *,
.kr-ecommerce .menusup a,
.kr-ecommerce .menuUserName,
.kr-ecommerce #LoginStatus1 {
    font-family: var(--kr-ecom-body-font, var(--kr-ecom-font)) !important;
}

    /* Enlaces/acciones de la cabecera */
    .kr-ecommerce .cabecera a,
    .kr-ecommerce .cabecera_login a,
    .kr-ecommerce .divLoginCss a,
    .kr-ecommerce .menusup a,
    .kr-ecommerce .menuUserName,
    .kr-ecommerce #LoginStatus1 {
        font-weight: var(--kr-ecom-weight-medium) !important;
        letter-spacing: var(--kr-ecom-tracking-none) !important;
        text-decoration: none !important;
    }

    /* Datos informativos: peso regular */
    .kr-ecommerce .cabecera_tel,
    .kr-ecommerce .cabecera_tel *,
    .kr-ecommerce .cabecera_tel a {
        font-weight: var(--kr-ecom-weight-regular) !important;
    }

/* La fuente editorial queda reservada para títulos,
   nunca para login o acciones operativas. */
.kr-ecommerce[data-ecommerce-theme="boutique"] .cabecera_login,
.kr-ecommerce[data-ecommerce-theme="boutique"] .cabecera_login *,
.kr-ecommerce[data-ecommerce-theme="boutique"] .divLoginCss,
.kr-ecommerce[data-ecommerce-theme="boutique"] .divLoginCss *,
.kr-ecommerce[data-ecommerce-theme="editorial"] .cabecera_login,
.kr-ecommerce[data-ecommerce-theme="editorial"] .cabecera_login *,
.kr-ecommerce[data-ecommerce-theme="editorial"] .divLoginCss,
.kr-ecommerce[data-ecommerce-theme="editorial"] .divLoginCss * {
    font-family: var(--kr-ecom-body-font, var(--kr-ecom-font)) !important;
}


/* ================================================================
   FASE 6.31 - AUTOCOMPLETE PROFESIONAL + ESTADO DE CARGA
   Sin estilos inline. Todo consume variables del theme activo.
   ================================================================ */

.kr-ecommerce .completionList {
    box-sizing: border-box !important;
    max-height: min(420px, 58vh) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    margin-top: 7px !important;
    border: 1px solid var(--kr-ecom-border) !important;
    border-radius: calc(var(--kr-ecom-radius, 12px) + 2px) !important;
    background: var(--kr-ecom-surface) !important;
    box-shadow: var(--kr-ecom-shadow-lg) !important;
    padding: 6px !important;
    opacity: 0;
    transform: translateY(-4px) scale(.995);
    transform-origin: top center;
    transition: opacity 150ms ease, transform 150ms ease;
    scrollbar-width: thin;
    scrollbar-color: var(--kr-ecom-border) transparent;
}

    .kr-ecommerce .completionList.kr-autocomplete-open {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .kr-ecommerce .completionList::-webkit-scrollbar {
        width: 8px;
    }

    .kr-ecommerce .completionList::-webkit-scrollbar-track {
        background: transparent;
    }

    .kr-ecommerce .completionList::-webkit-scrollbar-thumb {
        border: 2px solid var(--kr-ecom-surface);
        border-radius: 999px;
        background: var(--kr-ecom-border);
    }

    .kr-ecommerce .completionList .listItem,
    .kr-ecommerce .completionList .itemHighlighted {
        display: block !important;
        min-height: 0 !important;
        margin: 0 !important;
        border: 1px solid transparent !important;
        border-radius: var(--kr-ecom-radius-sm) !important;
        background: transparent !important;
        color: var(--kr-ecom-text) !important;
        padding: 0 !important;
        text-align: left !important;
        transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
    }

        .kr-ecommerce .completionList .listItem + .listItem,
        .kr-ecommerce .completionList .itemHighlighted + .listItem,
        .kr-ecommerce .completionList .listItem + .itemHighlighted {
            margin-top: 3px !important;
        }

        .kr-ecommerce .completionList .itemHighlighted,
        .kr-ecommerce .completionList .listItem:hover {
            border-color: var(--kr-ecom-border) !important;
            background: var(--kr-ecom-primary-soft) !important;
        }

.kr-ecommerce .kr-autocomplete-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 20px;
    gap: 12px;
    align-items: center;
    min-height: 72px;
    padding: 9px 10px;
    cursor: pointer;
}

.kr-ecommerce .kr-autocomplete-card__image-wrap {
    display: flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--kr-ecom-border);
    border-radius: var(--kr-ecom-radius-sm);
    background: var(--kr-ecom-surface-alt);
}

.kr-ecommerce .kr-autocomplete-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
}

.kr-ecommerce .kr-autocomplete-card__content {
    min-width: 0;
}

.kr-ecommerce .kr-autocomplete-card__name {
    display: -webkit-box;
    overflow: hidden;
    color: var(--kr-ecom-text) !important;
    font-family: var(--kr-ecom-body-font, var(--kr-ecom-font)) !important;
    font-size: var(--kr-ecom-type-md) !important;
    font-weight: var(--kr-ecom-weight-medium) !important;
    line-height: var(--kr-ecom-leading-snug, 1.3) !important;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.kr-ecommerce .kr-autocomplete-card__price {
    margin-top: 5px;
    color: var(--kr-ecom-primary) !important;
    font-family: var(--kr-ecom-body-font, var(--kr-ecom-font)) !important;
    font-size: var(--kr-ecom-type-sm) !important;
    font-weight: var(--kr-ecom-weight-medium) !important;
    line-height: var(--kr-ecom-leading-tight) !important;
}

.kr-ecommerce .kr-autocomplete-card__arrow {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
    opacity: .55;
    transition: opacity 140ms ease, transform 140ms ease;
}

    .kr-ecommerce .kr-autocomplete-card__arrow::before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 7px;
        height: 7px;
        border-top: 1.5px solid currentColor;
        border-right: 1.5px solid currentColor;
        color: var(--kr-ecom-primary);
        content: "";
        transform: translate(-65%, -50%) rotate(45deg);
    }

.kr-ecommerce .itemHighlighted .kr-autocomplete-card__arrow,
.kr-ecommerce .listItem:hover .kr-autocomplete-card__arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* Loading: input + botón. */
.kr-ecommerce .divOpNew.kr-search-loading .divOpTextBox,
.kr-ecommerce .divOpNew.kr-search-loading input[type="text"] {
    border-color: var(--kr-ecom-primary) !important;
    box-shadow: 0 0 0 3px var(--kr-ecom-primary-soft) !important;
}

.kr-ecommerce .divOpNew .kr-search-button {
    position: relative;
    overflow: hidden;
}

.kr-ecommerce .divOpNew.kr-search-loading .kr-search-button .icon-search {
    opacity: 0 !important;
}

.kr-ecommerce .divOpNew.kr-search-loading .kr-search-button::after {
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    content: "";
    animation: kr-ecom-search-spin 650ms linear infinite;
}

@keyframes kr-ecom-search-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 590px) {
    .kr-ecommerce .kr-autocomplete-card {
        grid-template-columns: 46px minmax(0, 1fr) 16px;
        gap: 9px;
        min-height: 64px;
        padding: 8px;
    }

    .kr-ecommerce .kr-autocomplete-card__image-wrap {
        width: 46px;
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kr-ecommerce .completionList,
    .kr-ecommerce .kr-autocomplete-card__arrow {
        transition: none !important;
    }

    .kr-ecommerce .divOpNew.kr-search-loading .kr-search-button::after {
        animation-duration: 1.2s;
    }
}


.kr-ecommerce .kr-promo-list {
    display: grid;
    width: 100%;
    gap: 8px;
    margin: 12px 0;
}

.kr-ecommerce .kr-promo-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    border: 1px solid var(--kr-ecom-border);
    border-left: 4px solid var(--kr-ecom-promo);
    border-radius: var(--kr-ecom-radius-sm);
    background: var(--kr-ecom-surface-alt);
    padding: 10px 12px;
    color: var(--kr-ecom-text);
    font-family: var(--kr-ecom-font);
    font-size: var(--kr-ecom-type-sm);
    line-height: var(--kr-ecom-leading-snug);
}

.kr-ecommerce .kr-promo-item__icon {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--kr-ecom-promo);
}

.kr-ecommerce .kr-promo-item__text {
    font-size: 10px;
    min-width: 0;
    overflow-wrap: anywhere;
}