/* =========================================================
   Anmile – Carrusel de Categoras (mobile-first)
   ========================================================= */

:root{
  --anmile-cc-h: 96px;         /* alto en mobile para icono + label */
  --anmile-cc-z: 9996;         /* debajo del sheet del carrito (9999) */
}

/* Contenedor base + sticky en mobile */
.anmile-cc{
  width:100%;
  background:#ffffffF2;
  backdrop-filter:saturate(120%) blur(4px);
  border-bottom:1px solid #e9e2d7;
}
.anmile-cc--sticky{
  position:sticky; top:0; z-index:var(--anmile-cc-z);
}

/* Layout interno */
.anmile-cc__inner{
  min-height:var(--anmile-cc-h);
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  margin:10px 0px;
}

nav.anmile-cc.anmile-cc--sticky {
    padding-top: 1px !important;
}

/* Título */
.anmile-cc__title{
  font:700 14px/1 "Rubik", sans-serif;
  color:#213F32;
  white-space:nowrap;
  margin-right:2px;
}

/* Pista: SOLO scroll táctil horizontal (sin flechas) */
.anmile-cc__track{
  display:flex; align-items:stretch; gap:10px;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding:2px 2px;
  flex:1 1 auto;
}
.anmile-cc__track::-webkit-scrollbar{ display:none; }

/* Chips verticales */
.anmile-cc__chip{
  flex:0 0 auto;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:6px;
  padding:8px 10px;
  border:1px solid #cdb897;
  background:#fff; color:#2f261f;
  border-radius:16px;
  font:600 13px/1 "Rubik", sans-serif;
  min-width:86px; max-width:140px;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.anmile-cc__chip:focus{
  outline:2px solid #6B8B6E; outline-offset:2px;
}

/* Icono circular */
.anmile-cc__icon{
  width:56px; height:56px;
  border-radius:50%;
  border:1px solid #cdb897;
  background:#fff;
  display:grid; place-items:center;
  overflow:hidden;
}
.anmile-cc__icon img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Fallback inicial (si no hay imagen) */
.anmile-cc__initial{
  font:700 22px/1 "Rubik", sans-serif;
  color:#213F32;
}

/* Etiqueta */
.anmile-cc__label{
  display:block; text-align:center;
  max-width:120px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Activo */
.anmile-cc__chip[aria-selected="true"],
.anmile-cc__chip.is-active{
  background:#213F32; color:#fff; border-color:#213F32;
}
.anmile-cc__chip[aria-selected="true"] .anmile-cc__icon{
  border-color:#fff;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px #C07A45; /* anillo terracota */
}

/* Ajustes pantallas muy pequeñas */
@media (max-width: 380px){
  :root{ --anmile-cc-h: 90px; }
  .anmile-cc__icon{ width:52px; height:52px; }
  .anmile-cc__chip{ min-width:82px; font-size:12px; }
}

/* En desktop se mantiene, pero si quieres más compacto: */
@media (min-width: 992px){
  :root{ --anmile-cc-h: 84px; }
}