/* Central Home - Categorias Populares | estilo compacto, inspirado en navegacion Fravega.
   Todos los estilos quedan limitados al shortcode .chcp-carousel. */
.chcp-carousel{width:100%;color:#222;box-sizing:border-box;padding-top:var(--chcp-space-top,0px);padding-bottom:var(--chcp-space-bottom,0px)}
.chcp-carousel .chcp-title{margin:0 0 17px;font-size:clamp(23px,1.9vw,29px);line-height:1.25;font-weight:600}
.chcp-carousel .chcp-shell{position:relative}
.chcp-carousel .chcp-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--chcp-desktop) - 1)*var(--chcp-gap))/var(--chcp-desktop));gap:var(--chcp-gap);overflow-x:auto;scroll-snap-type:inline mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:7px 2px 10px}
.chcp-carousel .chcp-track::-webkit-scrollbar{display:none}
.chcp-carousel .chcp-card{display:flex;flex-direction:column;align-items:center;min-width:0;padding:8px 5px 7px;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:inherit;text-decoration:none!important;scroll-snap-align:start;transition:none}
.chcp-carousel .chcp-card:hover{background:transparent!important;color:#1b4ba8;transform:none!important;box-shadow:none!important;border:0!important}
.chcp-carousel .chcp-image{display:flex;align-items:center;justify-content:center;width:100%;height:min(var(--chcp-img),100px);margin:0 0 8px;overflow:hidden;background:transparent}
.chcp-carousel .chcp-image img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .2s ease}
.chcp-carousel .chcp-card:hover .chcp-image img{transform:scale(1.035)}
.chcp-carousel .chcp-placeholder{font-size:12px;color:#999}
.chcp-carousel .chcp-name{display:-webkit-box;min-height:2.55em;max-width:100%;overflow:hidden;text-align:center;font-size:14px;font-weight:400;line-height:1.28;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.chcp-carousel .chcp-arrow{position:absolute;top:43%;z-index:3;display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(0,0,0,.10);color:#222;font-size:27px;line-height:1;cursor:pointer;transform:translateY(-50%)}
.chcp-carousel .chcp-prev{left:-16px}.chcp-carousel .chcp-next{right:-16px}
.chcp-carousel .chcp-arrow[disabled]{opacity:.25;cursor:default}
@media(max-width:1024px){.chcp-carousel .chcp-track{grid-auto-columns:calc((100% - (var(--chcp-tablet) - 1)*var(--chcp-gap))/var(--chcp-tablet))}.chcp-carousel .chcp-image{height:min(var(--chcp-img),92px)}}
@media(max-width:767px){.chcp-carousel .chcp-title{margin-bottom:12px;font-size:21px}.chcp-carousel .chcp-track{grid-auto-columns:calc((100% - (var(--chcp-mobile) - 1)*var(--chcp-gap))/var(--chcp-mobile));padding:4px 2px 8px}.chcp-carousel .chcp-card{padding:6px 3px 8px}.chcp-carousel .chcp-image{height:min(var(--chcp-img),88px);margin-bottom:7px}.chcp-carousel .chcp-name{font-size:13px;line-height:1.3}.chcp-carousel .chcp-arrow{width:32px;height:32px;font-size:25px}.chcp-carousel .chcp-prev{left:-8px}.chcp-carousel .chcp-next{right:-8px}}

/* v1.4.0: Vista móvil a dos filas, cinco categorías por fila.
   Ambas filas se desplazan dentro de un solo track horizontal. */
@media (max-width:767px) {
  .chcp-carousel {width:100%;max-width:100%;min-width:0;overflow:hidden;padding-top:var(--chcp-mobile-space-top,0px);padding-bottom:var(--chcp-mobile-space-bottom,0px)}
  .chcp-carousel .chcp-shell {width:100%;max-width:100%;min-width:0}
  .chcp-carousel .chcp-title {font-size:20px;margin:0 0 12px;line-height:1.25}
  .chcp-carousel .chcp-track {
    display:grid;
    grid-template-rows:repeat(2,minmax(0,auto));
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 4 * 7px) / 5);
    column-gap:7px;
    row-gap:10px;
    padding:3px 0 7px;
    overflow-x:auto;
    overflow-y:hidden;
    touch-action:pan-x pan-y;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .chcp-carousel .chcp-card {min-width:0;padding:2px 0 4px;scroll-snap-align:start}
  .chcp-carousel .chcp-image {width:100%;height:59px;margin:0 0 5px;overflow:visible}
  .chcp-carousel .chcp-image img {max-width:100%;max-height:100%;object-fit:contain}
  .chcp-carousel .chcp-name {font-size:11px;line-height:1.2;min-height:2.4em;max-width:100%;overflow-wrap:anywhere}
  .chcp-carousel .chcp-arrow {display:none!important}
}