/* Bloco: Variáveis de estilo locais */
.mc-cats {
  --mc-cats-max-desktop: 8;
  --mc-cats-max-mobile: 6;
  --mc-cats-gap: var(--mc-gap, 14px);

  /* Tamanho base dos cards e imagens (estilo iFood) */
  --mc-cat-card-size: 112px;
  --mc-cat-img-size: 72px;

  /* Borda ativa mais suave no mobile */
  --mc-cat-active-border: color-mix(in oklab, var(--mc-accent) 60%, #ffffff 40%);
}

/* Bloco: Layout principal do componente */
.mc-cats {
  padding-block: 1.75rem;
  margin: 14px 0 6px;
}

.mc-cats .container {
  overflow: visible;
}

.mc-cats__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.mc-cats__title {
  font-family: var(--mc-font-ui);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--mc-text);
}

.mc-cats__subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: var(--mc-text-weak);
  max-width: 420px;
}

.mc-cats__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--mc-cats-gap);
  padding: 0.75rem 0 0.35rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  justify-content: flex-start;
}

/* Quando não há overflow horizontal, distribui os itens igualmente */
.mc-cats__track:not(.mc-cats__track--has-overflow) {
  justify-content: space-between;
}

/* Bloco: Elementos internos (cards, imagens, textos) */

.mc-cat {
  position: relative;
  scroll-snap-align: start;
  flex: 0 0 auto;

  min-width: var(--mc-cat-card-size);
  text-decoration: none;
  color: inherit;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;

  transform: translateZ(0);
  will-change: transform;
}

/* Card com fundo F7F7F7, borda e shadow bem leve */
.mc-cat__canvas {
  width: var(--mc-cat-card-size);
  height: var(--mc-cat-card-size);
  border-radius: 18px;
  background: #F7F7F7;
  border: 1px solid color-mix(in oklab, var(--mc-border) 55%, transparent);
  box-shadow: 0 5px 12px rgba(15, 17, 20, 0.05);

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  pointer-events: none;
  transition:
    box-shadow .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

/* Todas as imagens mesmo tamanho + sombra projetada leve */
.mc-cat__image {
  width: var(--mc-cat-img-size);
  height: var(--mc-cat-img-size);
  object-fit: contain;
  display: block;

  /* sombra da própria imagem, bem sutil */
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12));
}

/* Label abaixo do card, peso menor e cinza escuro */
.mc-cat__label {
  font-family: var(--mc-font-ui);
  font-size: 0.86rem;
  font-weight: 400;          /* peso menor */
  color: #333333;            /* cinza escuro */
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

/* Hover/focus (mais perceptível no desktop) */
.mc-cat:hover,
.mc-cat:focus-visible {
  transform: translateY(-1px);
}

.mc-cat:hover .mc-cat__canvas,
.mc-cat:focus-visible .mc-cat__canvas {
  box-shadow: 0 9px 18px rgba(15, 17, 20, 0.10);
  border-color: color-mix(in oklab, var(--mc-border) 70%, transparent);
}

.mc-cat:focus {
  outline: none;
}

/* Estados de carrossel (dots, se um dia usar) */
.mc-cats__dots{
  display:none;
}
.mc-dot{
  width:8px; height:8px;
  border-radius:999px;
  background:#d7dbe3;
}
.mc-dot.is-active{
  background: var(--mc-accent);
}

/* Respeita redução de movimento */
@media (prefers-reduced-motion: reduce){
  .mc-cat,
  .mc-cat__canvas{
    transition:none !important;
  }
}

/* Bloco: Responsividade (breakpoints) */

/* Desktop / tablets */
@media (min-width: 768px) {
  .mc-cats__track {
    --mc-cats-max-desktop: var(--mc-cats-max-desktop);
  }

  .mc-cat {
    flex-basis: calc(100% / var(--mc-cats-max-desktop) - var(--mc-cats-gap) * 0.5);
  }

  /* Em desktop o "ativo" é bem sutil */
  .mc-cat.is-active .mc-cat__canvas {
    border-color: color-mix(in oklab, var(--mc-border) 70%, transparent);
  }
}

/* Mobile: destaque leve no item ativo, com borda mais suave */
@media (max-width: 767px) {
  .mc-cats {
    padding-block: 1.25rem;
  }

  .mc-cats__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .mc-cats__subtitle {
    max-width: 100%;
  }

  .mc-cat {
    flex-basis: calc(100% / var(--mc-cats-max-mobile) - var(--mc-cats-gap) * 0.4);
  }

  .mc-cat.is-active .mc-cat__canvas {
    border-width: 2px;
    border-color: var(--mc-cat-active-border);  /* cor mais suave */
    box-shadow: 0 9px 18px rgba(15, 17, 20, 0.10);
    transform: translateY(-1px);
  }

  .mc-cat.is-active .mc-cat__label {
    color: #222222;
  }
}
/* ===============================
   MOBILE — Scrollbar visível só ao rolar
   =============================== */
@media (max-width: 767px) {

  /* Remove a barra até o usuário interagir */
  .mc-cats__track {
    scrollbar-width: none;         /* Firefox */
  }
  .mc-cats__track::-webkit-scrollbar {
    height: 0;                     /* Chrome/Safari */
  }

  /* Quando está rolando → mostra scrollbar suave */
  .mc-cats__track:active,
  .mc-cats__track:focus,
  .mc-cats__track:hover {
    scrollbar-width: thin;         /* Firefox */
    scrollbar-color: color-mix(in oklab, #000 25%, transparent) transparent;
  }

  .mc-cats__track:active::-webkit-scrollbar,
  .mc-cats__track:focus::-webkit-scrollbar,
  .mc-cats__track:hover::-webkit-scrollbar {
    height: 4px;                   /* aparece no mobile */
  }

  .mc-cats__track::-webkit-scrollbar-track {
    background: transparent;
  }

  .mc-cats__track::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, #000 25%, transparent);
    border-radius: 4px;
  }

}