/* Ruta: /public/assets/css/home-showcase.css
   Carrusel de categorías del Home: tarjeta con producto destacado (imagen grande
   + hover Hero→Context) + productos secundarios compactos + "Ver toda la categoría".
   Usa exclusivamente tokens del Design System (theme.css). Sin !important. */

.chs-section { padding-block: clamp(1.5rem, 4vw, 3rem); }

/* ---- Carrusel horizontal ---- */
.chs-carousel {
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    cursor: grab; -webkit-overflow-scrolling: touch;
}
.chs-carousel::-webkit-scrollbar { display: none; }
.chs-carousel.dragging { cursor: grabbing; }

.chs-track {
    display: flex; align-items: stretch;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding: .5rem clamp(1rem, 4vw, 3rem) 1rem;
    margin: 0; list-style: none;
}

/* Tarjeta de categoría — desktop ~4, tablet ~2, móvil 1 + peek */
.chs-col {
    flex: 0 0 min(300px, 82vw);
    display: flex; flex-direction: column; min-width: 0;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; box-shadow: var(--shadow-sm);
    padding: 1rem 1rem 1.1rem;
    text-align: center;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.chs-col:hover { box-shadow: var(--shadow-md); border-color: var(--brand-soft); }

/* Header: icono + nombre de categoría */
.chs-head { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .8rem; }
.chs-ic { font-size: 1.15rem; line-height: 1; }
.chs-cat { font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }

/* ---- Producto destacado (imagen grande) ---- */
.chs-feature { display: block; color: inherit; }
.chs-feature-thumb {
    position: relative; display: block;
    aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
    background: var(--brand-soft);
}
.chs-fimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.chs-fhero { opacity: 1; transition: opacity .4s ease; }
.chs-fctx  { opacity: 0; transition: opacity .4s ease; }
.chs-fempty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 3rem; }

.chs-feature-name { display: block; font-weight: 700; font-size: 1.05rem; color: var(--navy); line-height: 1.25; margin: .7rem 0 .15rem; }
.chs-feature-price { display: block; font-weight: 800; font-size: 1.15rem; color: var(--coral); }

/* Hover Hero→Context solo con hover real (móvil estable) */
@media (hover: hover) {
    .chs-feature.has-context:hover .chs-fhero { opacity: 0; }
    .chs-feature.has-context:hover .chs-fctx  { opacity: 1; }
    .chs-feature:hover .chs-feature-name { color: var(--navy-hover); }
}

.chs-divider { height: 1px; background: var(--line); margin: .9rem 0; }

/* ---- Producto secundario (compacto) ---- */
.chs-secondary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; row-gap: .5rem; }
.chs-cell { min-width: 0; }

.sc-item {
    display: flex; align-items: center; gap: .6rem; padding: .4rem;
    min-height: 70px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.sc-item:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); }
.sc-thumb { position: relative; flex: 0 0 auto; width: 54px; height: 54px; border-radius: 10px; overflow: hidden; background: var(--brand-soft); }
.sc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-hero    { opacity: 1; transition: opacity .35s ease; }
.sc-context { opacity: 0; transition: opacity .35s ease; }
.sc-thumb-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.4rem; }
.sc-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.sc-name { font-weight: 600; font-size: .82rem; line-height: 1.2; color: var(--navy);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-price { font-weight: 700; font-size: .85rem; color: var(--coral); }
@media (hover: hover) {
    .sc-item.has-context:hover .sc-hero    { opacity: 0; }
    .sc-item.has-context:hover .sc-context { opacity: 1; }
}

/* ---- "Ver toda la categoría" ---- */
.chs-more { margin-top: auto; padding-top: .95rem; display: inline-flex; align-self: center; align-items: center; gap: .35rem; font-weight: 700; font-size: .9rem; color: var(--coral); }
.chs-more:hover { color: var(--coral-hover); gap: .55rem; }
.chs-more span { transition: none; }