/* ═══════════════════════════════════════════════════════════════
   "Kategori Carousel" — the product carousel's strip with hand-made cards
   (CategoryCard children) instead of products. Sizes, spacing, arrows and
   progress line are the product carousel's, rule for rule.
   Set by the component: --cc-max, --cc-side-m / -d, --cc-top-m / -d,
   --cc-bottom-m / -d, --cc-gap-m / -d, --cc-visible-m / -d, --cc-full-m / -d,
   --cc-arrow, --cc-title-m / -d, --cc-bg; for the cards: --cc-text, --cc-ratio-m / -d.
   ═══════════════════════════════════════════════════════════════ */

.cc_JsHSjQyQmG_XOtsYig1xn .category-carousel {
  --cc-side: var(--cc-side-m, var(--container-pad));
  --cc-gap: var(--cc-gap-m, 12px);
  --cc-visible: var(--cc-visible-m, 1.6);
  --cc-full: var(--cc-full-m, 1);
  /* Distance from the screen's edge to the page's inner edge: the first card starts here.
     (100cqw = the section's own width, wherever the value is used inside .category-carousel-inner.) */
  --cc-edge: max(var(--cc-side), calc((100cqw - var(--cc-max, 100cqw)) / 2 + var(--cc-side)));

  width: 100%;
  padding: var(--cc-top-m, var(--space-lg)) 0 var(--cc-bottom-m, var(--space-lg));
  overflow: hidden;
  background: var(--cc-bg, var(--color-bg));
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

/* Measures the section's width for the edge above. */
.cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-inner { container-type: inline-size; }

.cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
  padding: 0 var(--cc-edge);
}

.cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-title {
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--cc-title-m, var(--text-h3));
  font-weight: var(--heading-weight);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-more {
  position: relative;
  flex-shrink: 0;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-wide);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

/* Larger touch target without changing the layout */
.cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-more::before {
  content: "";
  position: absolute;
  inset: calc(var(--space-sm) * -1) 0;
}

.cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-body { position: relative; }

/* The strip runs from one screen edge to the other; its padding lines the first card up
   with the page and leaves the same room after the last one. */
.cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-track {
  display: flex;
  gap: var(--cc-gap);
  margin: 0;
  padding: 0 var(--cc-edge);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;
  scroll-padding-inline: var(--cc-edge);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-track::-webkit-scrollbar { display: none; }

/* While dragged with the mouse the strip follows the pointer freely */
.cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-track.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

/* Width of a card: the visible width (the strip's inner width plus the room on the right,
   which the cards run into) holds --cc-visible cards and the gaps between the whole ones. */
.cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-item {
  flex: 0 0 calc((100% + var(--cc-edge) - var(--cc-gap) * var(--cc-full)) / var(--cc-visible));
  min-width: 0;
  scroll-snap-align: start;
}

/* A card fills its list item, however its own container is drawn */
.cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-slot { display: contents; }
.cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-item > * { min-width: 0; }
/* Arrow buttons: from 1024px up only */
.cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-arrow { display: none; }

/* Thin line that shows how far along the strip is */
.cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-progress {
  height: 1px;
  margin: var(--space-md) var(--cc-edge) 0;
  overflow: hidden;
  background: var(--color-border);
}

.cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-text-primary);
}

@media (min-width: 1024px) {
  .cc_JsHSjQyQmG_XOtsYig1xn .category-carousel {
    --cc-side: var(--cc-side-d, var(--container-pad));
    --cc-gap: var(--cc-gap-d, 24px);
    --cc-visible: var(--cc-visible-d, 4.4);
    --cc-full: var(--cc-full-d, 4);

    padding: var(--cc-top-d, var(--space-xl)) 0 var(--cc-bottom-d, var(--space-xl));
  }

  .cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-head { margin-bottom: var(--space-lg); }

  .cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-title { font-size: var(--cc-title-d, var(--text-h3)); }

  .cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-track { cursor: grab; }

  /* Centered on the photos; at an end of the strip the arrow steps back */
  .cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-arrow {
    position: absolute;
    top: calc(50% - var(--tap-size) / 2);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cc-arrow, var(--tap-size));
    height: var(--cc-arrow, var(--tap-size));
    padding: 0;
    border: none;
    border-radius: var(--radius-round);
    background: var(--color-surface);
    color: var(--color-text-primary);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity var(--duration) var(--ease);
  }

  .cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-arrow svg {
    width: 45%;
    height: 45%;
  }

  .cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-arrow--prev { left: var(--space-sm); }
  .cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-arrow--next { right: var(--space-sm); }

  .cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-arrow:disabled {
    opacity: 0;
    pointer-events: none;
  }

  .cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-arrow:focus-visible {
    outline: 1px solid var(--color-text-primary);
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_JsHSjQyQmG_XOtsYig1xn .category-carousel-arrow { transition: none; }
}