/*
 * One category story. Sizes and colours come from the strip section as CSS variables:
 * --st-d (ring diameter), --st-pop (overflow ratio), --st-ring-a/-b (unseen ring), --st-seen.
 * Box = diameter wide; in pop mode it is diameter x (1 + pop) tall and both images fill it with
 * the same framing, so the cut-out sits exactly on the photo behind it.
 */
.cc_pxp5JFR88R_YxCG6YJcBK .im-strip-item {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  width: calc(var(--st-d, 72px) + 12px);
  color: var(--im-color-text, #000);
  text-decoration: none;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}

.cc_pxp5JFR88R_YxCG6YJcBK .im-strip-item:active {
  transform: scale(0.95);
}

.cc_pxp5JFR88R_YxCG6YJcBK .im-strip-item__box {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--st-d, 72px);
  height: var(--st-d, 72px);
}

/* Ring: the gradient fills the circle and the mask keeps only its edge, as thick as the disc's
   inset, so the ring meets the photo with no gap (as in the prototype). */
.cc_pxp5JFR88R_YxCG6YJcBK .im-strip-item__ring {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: var(--st-d, 72px);
  height: var(--st-d, 72px);
  padding: 4px;
  border-radius: var(--im-strip-radius, 50%);
  background: conic-gradient(from 210deg, var(--st-ring-a, #511628), var(--st-ring-b, #f5ebd0), var(--st-ring-a, #511628));
  background: conic-gradient(
    from 210deg,
    var(--st-ring-a, #511628),
    color-mix(in srgb, var(--st-ring-a, #511628) 70%, var(--st-ring-b, #f5ebd0)),
    var(--st-ring-b, #f5ebd0),
    color-mix(in srgb, var(--st-ring-a, #511628) 70%, var(--st-ring-b, #f5ebd0)),
    var(--st-ring-a, #511628)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.cc_pxp5JFR88R_YxCG6YJcBK .im-strip-item[data-seen] .im-strip-item__ring {
  background: var(--st-seen, #cfc4b6);
}

.cc_pxp5JFR88R_YxCG6YJcBK .im-strip-item__disc {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(var(--st-d, 72px) - 8px);
  height: calc(var(--st-d, 72px) - 8px);
  overflow: hidden;
  border-radius: var(--im-strip-radius, 50%);
  background: var(--im-color-soft, #f5ebd0);
}

.cc_pxp5JFR88R_YxCG6YJcBK .im-strip-item__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Pop: the photo keeps the full box framing behind the disc's circular window. */
.cc_pxp5JFR88R_YxCG6YJcBK .im-strip-item[data-pop] .im-strip-item__box {
  height: calc(var(--st-d, 72px) * (1 + var(--st-pop, 0.36)));
}

.cc_pxp5JFR88R_YxCG6YJcBK .im-strip-item[data-pop] .im-strip-item__image {
  position: absolute;
  top: -4px;
  left: -4px;
  width: var(--st-d, 72px);
  max-width: none;
  height: calc(var(--st-d, 72px) * (1 + var(--st-pop, 0.36)));
}

/* Cut-out: clipped to the circle in its top half, free below the ring's middle. The mask stays on
   this wrapper; the entrance animation moves the image inside it. */
.cc_pxp5JFR88R_YxCG6YJcBK .im-strip-item__fig {
  position: absolute;
  inset: 0;
  -webkit-mask:
    radial-gradient(circle calc(var(--st-d, 72px) / 2 - 4px) at 50% calc(var(--st-d, 72px) / 2), #000 99%, transparent 100%) 0 0 / 100% 100% no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--st-d, 72px) / 2) / 100% 100% no-repeat;
  mask:
    radial-gradient(circle calc(var(--st-d, 72px) / 2 - 4px) at 50% calc(var(--st-d, 72px) / 2), #000 99%, transparent 100%) 0 0 / 100% 100% no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--st-d, 72px) / 2) / 100% 100% no-repeat;
  pointer-events: none;
}

.cc_pxp5JFR88R_YxCG6YJcBK .im-strip-item__fig-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: drop-shadow(0 2px 2px rgba(42, 28, 32, 0.28));
}

/* Long names ("Büyük Beden Elbiseler") wrap to two lines, centred, top-aligned across the row. */
.cc_pxp5JFR88R_YxCG6YJcBK .im-strip-item__label {
  display: -webkit-box;
  width: 100%;
  margin-top: 5px;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cc_pxp5JFR88R_YxCG6YJcBK .im-strip-item--highlight .im-strip-item__label {
  font-weight: 700;
  color: var(--im-color-sale, #d01c1c);
}

.cc_pxp5JFR88R_YxCG6YJcBK .im-strip-item:focus-visible {
  outline: 2px solid var(--im-color-text, #000);
  outline-offset: 4px;
}

@media (min-width: 768px) {
  .cc_pxp5JFR88R_YxCG6YJcBK .im-strip-item__label {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_pxp5JFR88R_YxCG6YJcBK .im-strip-item {
    transition: none;
  }
}