/* ================================================================
   KRONHOS E-COMMERCE - CATEGORIAS / MOTION
   FASE 6.36

   - Solo themes modernos.
   - clasico-original queda intacto.
   - Apertura/cierre sutil.
   - Sin element.style desde JavaScript.
   - Respeta prefers-reduced-motion.
   ================================================================ */

.kr-ecommerce:not([data-ecommerce-theme="clasico-original"])
.kr-repeater-categories
.kr-cat-group {
    overflow: hidden;
}

    /*
   Sobrescribe el comportamiento nativo que oculta inmediatamente
   el contenido de <details> al retirar [open]. De esta forma CSS
   puede interpolar el cierre.
*/
    .kr-ecommerce:not([data-ecommerce-theme="clasico-original"])
    .kr-repeater-categories
    .kr-cat-group:not([open]) > .kr-cat-children {
        display: block !important;
    }

.kr-ecommerce:not([data-ecommerce-theme="clasico-original"])
.kr-repeater-categories
.kr-cat-children {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    transition: max-height 220ms ease, opacity 160ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

.kr-ecommerce:not([data-ecommerce-theme="clasico-original"])
.kr-repeater-categories
.kr-cat-group[open] > .kr-cat-children {
    max-height: 1400px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: max-height 240ms ease, opacity 180ms ease 25ms, transform 220ms ease, visibility 0s linear 0s;
}

/* La cabecera acompaña el movimiento sin cambiar la personalidad del theme. */
.kr-ecommerce:not([data-ecommerce-theme="clasico-original"])
.kr-repeater-categories
.kr-cat-header {
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

/* Material Symbol de flecha. */
.kr-ecommerce:not([data-ecommerce-theme="clasico-original"])
.kr-repeater-categories
.kr-cat-arrow {
    transform: rotate(0deg);
    transition: transform 220ms ease;
    transform-origin: center;
}

.kr-ecommerce:not([data-ecommerce-theme="clasico-original"])
.kr-repeater-categories
.kr-cat-group[open] > .kr-cat-header
.kr-cat-arrow {
    transform: rotate(90deg);
}

/* Accesibilidad: sin movimiento si el usuario lo solicita. */
@media (prefers-reduced-motion: reduce) {
    .kr-ecommerce:not([data-ecommerce-theme="clasico-original"])
    .kr-repeater-categories
    .kr-cat-children,
    .kr-ecommerce:not([data-ecommerce-theme="clasico-original"])
    .kr-repeater-categories
    .kr-cat-header,
    .kr-ecommerce:not([data-ecommerce-theme="clasico-original"])
    .kr-repeater-categories
    .kr-cat-arrow {
        transition: none !important;
        transform: none;
    }
}