/* ============================================================
   Product Category Carousel – Domino's-style
   Image circle on top, category name below (outside circle)
   ============================================================ */

/* ── Wrapper & Swiper shell ─────────────────────────────── */
.pcc-wrapper {
  width: 100%;
  position: relative;
}

.pcc-swiper {
  width: 100%;
  overflow: hidden;
  padding: 0 4px 8px;
  box-sizing: border-box;
}

.pcc-swiper .swiper-wrapper {
  align-items: flex-start;
}

/* ── Slide sizing (CSS-driven, mirrors JS vars) ─────────── */
.pcc-wrapper .pcc-swiper .swiper-slide {
  width: calc((100% - (var(--pcc-gap, 20px) * (var(--pcc-spv, 9) - 1))) / var(--pcc-spv, 9)) !important;
  flex: 0 0 calc((100% - (var(--pcc-gap, 20px) * (var(--pcc-spv, 9) - 1))) / var(--pcc-spv, 9)) !important;
  display: flex;
  justify-content: center;
}

/* ── Item link ──────────────────────────────────────────── */
.pcc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  gap: 10px;
  width: 100%;
  max-width: var(--pcc-circle, 140px);
}

/* ── Circle image container ─────────────────────────────── */
.pcc-circle {
  position: relative;
  width: min(100%, var(--pcc-circle, 140px));
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: #efefef;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pcc-item:hover .pcc-circle,
.pcc-item:focus-visible .pcc-circle {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}

/* ── Category image ─────────────────────────────────────── */
.pcc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* ── Label BELOW the circle (normal flow, not absolute) ─── */
.pcc-label {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
  word-break: break-word;
  hyphens: auto;
  padding: 0 4px;
  transition: color 0.18s ease;
  /* explicitly NOT positioned absolute */
  position: static;
  transform: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

.pcc-item:hover .pcc-label,
.pcc-item:focus-visible .pcc-label {
  color: #006cb7;
}

/* ── Navigation Arrows ──────────────────────────────────── */
.pcc-nav {
  position: absolute;
  top: calc(var(--pcc-circle, 140px) / 2);
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  z-index: 10;
  border: 1px solid #e5e5e5;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.pcc-nav:hover {
  background: #f5f5f5;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}

.pcc-prev { left: -6px; }
.pcc-next { right: -6px; }

.pcc-nav::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
}

.pcc-prev::before {
  transform: translate(-30%, -50%) rotate(225deg);
}
.pcc-next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

/* ── Tablet (768 – 1024 px) ─────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  .pcc-label { font-size: 12px; }
  .pcc-nav { width: 32px; height: 32px; }
}

/* ── Mobile (< 768 px) ──────────────────────────────────── */
@media (max-width: 767px) {
  .pcc-swiper { padding: 0 2px 6px; }
  .pcc-item { gap: 7px; }
  .pcc-label { font-size: 11px; }
  .pcc-nav { width: 30px; height: 30px; }
  .pcc-prev { left: -2px; }
  .pcc-next { right: -2px; }
}