/* =====================================================
   WC CATEGORY MOSAIC - GLOBAL VARS
   ===================================================== */

.wccm-scope{
  --wccm-zoom:1.08;
  --wccm-ms:550ms;
  --wccm-gap:18px;
  --wccm-big-h:460px;
  --wccm-small-h:220px;
  --wccm-cta-x:18px;
  --wccm-cta-y:18px;
}

/* =====================================================
   MOSAIC - WRAPPER / BLOCKS
   ===================================================== */

.wccm-wrapper{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:var(--wccm-gap);
}

.wccm-block{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--wccm-gap);
  align-items:stretch;
}

.wccm-grid4{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--wccm-gap);
  height:100%;
}

/* =====================================================
   MOSAIC - CARD
   ===================================================== */

.wccm-card{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:10px;
  min-height:var(--wccm-small-h);
  text-decoration:none;
  background:#0b0f16;
  width:100%;
}

.wccm-card--big{ min-height:var(--wccm-big-h); }
.wccm-card--small{ min-height:var(--wccm-small-h); }

.wccm-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--wccm-bg);
  background-size:cover;
  background-position:center;
  transform:scale(1);
  transition:transform var(--wccm-ms) ease;
  will-change:transform;
}

.wccm-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.15) 55%,
    rgba(0,0,0,.55) 100%
  );
  opacity:.9;
  transition:opacity 350ms ease;
}

.wccm-content{
  position:absolute;
  inset:0;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:10px;
  z-index:2;
}

.wccm-title{
  display:inline-block;
  color:#fff;
  font-size:18px;
  font-weight:600;
  line-height:1.1;
  max-width:85%;
}

.wccm-cta{
  position:absolute;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 250ms ease, transform 250ms ease, background 250ms ease;
  color:#fff;
  font-size:14px;
  font-weight:500;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  white-space:nowrap;
}

.wccm-cta-pos--top-left .wccm-cta{ top:var(--wccm-cta-y); left:var(--wccm-cta-x); }
.wccm-cta-pos--top-right .wccm-cta{ top:var(--wccm-cta-y); right:var(--wccm-cta-x); }
.wccm-cta-pos--bottom-left .wccm-cta{ bottom:var(--wccm-cta-y); left:var(--wccm-cta-x); }
.wccm-cta-pos--bottom-right .wccm-cta{ bottom:var(--wccm-cta-y); right:var(--wccm-cta-x); }

.wccm-card:hover::before{ transform:scale(var(--wccm-zoom)); }
.wccm-card:hover .wccm-cta{ opacity:1; transform:translateY(0); }

/* Alternância dos blocos */
.wccm-block--big-left .wccm-col--big{ order:1; }
.wccm-block--big-left .wccm-col--grid{ order:2; }
.wccm-block--big-right .wccm-col--grid{ order:1; }
.wccm-block--big-right .wccm-col--big{ order:2; }

/* =====================================================
   MOSAIC - TABLET / MOBILE (1 coluna + spacing fix)
   ===================================================== */

@media (max-width:1024px){

  .wccm-block{
    display:flex;
    flex-direction:column;
    gap:0;
  }

  .wccm-col--big + .wccm-col--grid{ margin-top:var(--wccm-gap); }
  .wccm-col--grid + .wccm-col--big{ margin-top:var(--wccm-gap); }

  .wccm-grid4{
    display:flex;
    flex-direction:column;
    gap:0;
    height:auto;
  }

  .wccm-grid4 .wccm-card + .wccm-card{
    margin-top:var(--wccm-gap);
  }

  .wccm-card--big,
  .wccm-card--small{
    min-height:var(--wccm-small-h);
  }
}

/* =====================================================
   SUBCATEGORIES WIDGET (thumbnails) - SCROLL
   Vars inline pelo widget:
   --wccm-subgap
   --wccm-subh
   --wccm-subfit
   --wccm-sub-title-gap

   NOVAS:
   --wccm-sub-visible      (quantos aparecem por vez)
   --wccm-sub-scroll-pad   (distância da barra p/ conteúdo)
   --wccm-sub-scroll-h     (espessura)
   --wccm-sub-scroll-thumb (cor do thumb)
   --wccm-sub-scroll-track (cor do track)
   --wccm-sub-scroll-radius
   --wccm-sub-thumb-bg / hover / active
   --wccm-sub-thumb-border / hover / active
   --wccm-sub-thumb-radius
   ===================================================== */

.wccm-subcats{
  --wccm-sub-title-gap: 10px;
  --wccm-sub-visible: 5;
  --wccm-sub-scroll-pad: 10px;
  --wccm-sub-scroll-h: 8px;
  --wccm-sub-scroll-thumb: rgba(0,0,0,.35);
  --wccm-sub-scroll-track: rgba(0,0,0,.10);
  --wccm-sub-scroll-radius: 999px;
}

/* faixa com scroll horizontal */
.wccm-subcats__grid{
  display:flex;
  gap: var(--wccm-subgap, 12px);
  align-items:flex-start;

  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;

  padding-bottom: var(--wccm-sub-scroll-pad, 10px);
  scroll-snap-type: x mandatory;
}

/* cada item ocupa 1/N da largura visível */
.wccm-subcats__item{
  flex: 0 0 calc(
    (100% - (var(--wccm-subgap, 12px) * (var(--wccm-sub-visible, 5) - 1))) / var(--wccm-sub-visible, 5)
  );

  display:flex;
  flex-direction:column;
  text-decoration:none;
  background:transparent;
  border:0;
  padding:0;
  transition:transform 200ms ease;
  scroll-snap-align: start;
}

.wccm-subcats__item:hover{
  transform: translateY(-1px);
}

/* box da imagem */
.wccm-subcats__thumb{
  width:100%;
  height: var(--wccm-subh, 90px);

  background-color: var(--wccm-sub-thumb-bg, #f3f3f3);
  background-image: none;
  background-size: var(--wccm-subfit, contain);
  background-repeat:no-repeat;
  background-position:center;

  border: var(--wccm-sub-thumb-border, 1px solid rgba(0,0,0,.12));
  border-radius: var(--wccm-sub-thumb-radius, 0px);

  transition: background-color 200ms ease, border-color 200ms ease;
}

.wccm-subcats__item:hover .wccm-subcats__thumb{
  background-color: var(--wccm-sub-thumb-bg-hover, var(--wccm-sub-thumb-bg, #f3f3f3));
  border-color: var(--wccm-sub-thumb-border-hover, rgba(0,0,0,.20));
}

.wccm-subcats__item.is-active .wccm-subcats__thumb{
  background-color: var(--wccm-sub-thumb-bg-active, var(--wccm-sub-thumb-bg, #f3f3f3));
  border-color: var(--wccm-sub-thumb-border-active, rgba(0,0,0,.35));
}

/* título fora do box */
.wccm-subcats__name{
  margin-top: var(--wccm-sub-title-gap, 10px);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.2;
  text-align:center;
  color:#000;
}

.wccm-subcats__item.is-active .wccm-subcats__name{
  color: var(--wccm-sub-title-active, currentColor);
}

/* Scrollbar (Chrome/Edge/Safari) */
.wccm-subcats__grid::-webkit-scrollbar{
  height: var(--wccm-sub-scroll-h, 8px);
}
.wccm-subcats__grid::-webkit-scrollbar-track{
  background: var(--wccm-sub-scroll-track, rgba(0,0,0,.10));
  border-radius: var(--wccm-sub-scroll-radius, 999px);
}
.wccm-subcats__grid::-webkit-scrollbar-thumb{
  background: var(--wccm-sub-scroll-thumb, rgba(0,0,0,.35));
  border-radius: var(--wccm-sub-scroll-radius, 999px);
}

/* Firefox */
.wccm-subcats__grid{
  scrollbar-width: thin;
  scrollbar-color: var(--wccm-sub-scroll-thumb, rgba(0,0,0,.35)) var(--wccm-sub-scroll-track, rgba(0,0,0,.10));
}

/* =====================================================
   TERM DESCRIPTION WIDGET
   ===================================================== */

.wccm-term-desc{
  width:100%;
}