/* ==========================================
   WooCommerce Child Category Carousel
   + Responsive stacked buttons (3 cols <708px, 2 cols <630px)
========================================== */

/* Hide until JS sets correct state */
.wcccc{ visibility: hidden; }
.wcccc.is-ready{ visibility: visible; }

/* ===== Variables ===== */
.wcccc{
  --arrow-size: 42px;
  --arrow-font: 32px;
  --arrow-pad-fix: 5px;          /* glyph optical centring */
  --arrow-gutter: 56px;          /* space reserved for outside arrows */

  --gap: 15px;
  --item-w: 116px;

  --img: 110px;
  --img-bg: #f2f2f2;
  --img-br: 1px solid rgba(0,0,0,.08);

  position: relative;
  width: 100%;
  margin: 20px 0;
  box-sizing: border-box;

  padding-inline: var(--arrow-gutter);
}

/* ===== Viewport ===== */
.wcccc__viewport{
  width: 100%;
  box-sizing: border-box;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wcccc__viewport::-webkit-scrollbar{ display:none; }

/* ===== Track ===== */
.wcccc__track{
  display: flex;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 8px 2px;              /* keeps first item off the edge */
  width: max-content;
}

/* Centre only when JS flags no overflow */
.wcccc.is-no-overflow .wcccc__track{
  justify-content: center;
  width: 100%;
}

/* ===== Items ===== */
.wcccc__item{
  flex: 0 0 auto;
  width: var(--item-w);
  text-align: center;
  scroll-snap-align: start;
}

.wcccc__card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

/* ===== Image ===== */
.wcccc__img{
  width: var(--img);
  height: var(--img);
  border-radius: 50%;
  overflow: hidden;

  display: grid;
  place-items: center;

  background: var(--img-bg);
  border: var(--img-br);
}
.wcccc__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wcccc__fallback{
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: #ddd;
}

.wcccc__name{
  font-size: 14px;
  line-height: 1.2;
}

/* Active */
.wcccc__item.is-current .wcccc__img{ box-shadow: 0 0 0 3px rgba(0,0,0,.15); }
.wcccc__item.is-current .wcccc__name{ font-weight: 600; }

/* ===== Outside Arrows ===== */
.wcccc__arrow{
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  z-index: 5;

  width: var(--arrow-size);
  height: var(--arrow-size);

  display: grid;
  place-items: center;

  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;

  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;

  font-size: var(--arrow-font);
  line-height: 1;
  color: #111;
  font-weight: 300;
  padding: 0 0 var(--arrow-pad-fix);
}

.wcccc__arrow--left{ left: 0; }
.wcccc__arrow--right{ right: 0; }

/* Hide without layout shift */
.wcccc__arrow[hidden]{
  visibility: hidden;
  pointer-events: none;
}

/* ===== Responsive ===== */
@media (max-width: 768px){
  .wcccc{
    --arrow-size: 36px;
    --arrow-font: 22px;
    --arrow-gutter: 48px;

    --gap: 16px;
    --item-w: 100px;
    --img: 72px;
  }
}

@media (max-width: 480px){
  .wcccc{
    --arrow-size: 34px;
    --arrow-font: 22px;
    --arrow-gutter: 44px;

    --gap: 14px;
    --item-w: 86px;
    --img: 60px;
  }
}

/* =========================================================
   NEW: Stacked grid buttons (no images) below 708px
   - 3 columns < 708px
   - 2 columns < 630px
========================================================= */
@media (max-width: 708px){
  .wcccc{
    padding-inline: 0;
  }

  /* Hide arrows completely */
  .wcccc__arrow{
    display: none !important;
  }

  /* Remove scrolling behaviour */
  .wcccc__viewport{
    overflow: visible;
    scroll-snap-type: none;
  }

  .wcccc__track{
    display: grid;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;

    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .wcccc__item{
    width: auto;
    text-align: left;
    scroll-snap-align: none;
  }

  /* No images in stacked mode */
  .wcccc__img{
    display: none !important;
  }

  /* Make link look like a rounded button */
  .wcccc__card{
    display: block;
    width: 100%;
    box-sizing: border-box;

    padding: 12px 14px;
    border-radius: 999px;

    border: 1px solid rgba(0,0,0,.14);
    background: #fff;

    text-decoration: none;
    text-align: center;
  }

  .wcccc__name{
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
  }

  /* Current state as button emphasis */
  .wcccc__item.is-current .wcccc__card{
    border-color: rgba(0,0,0,.28);
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
  }
}

/* 2 columns below 630px */
@media (max-width: 630px){
  .wcccc__track{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}