/* "Wardrobe" category showcase — all open/closed and sliding behaviour is CSS
   so it survives ikas re-mounting the cards. */
.cc_NwMRL89LvB_c5vdG8fJ1W .cs {
  width: 100%;
  background: var(--kombos-white);
  /* Mobile card width and the header height the block pins under */
  --cs-card: 78vw;
  --cs-gap: 0.5rem;
  --cs-top: 57px;
}

.cc_NwMRL89LvB_c5vdG8fJ1W .cs__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-block: 2.5rem;
}

/* ---- Head ---- */
.cc_NwMRL89LvB_c5vdG8fJ1W .cs__head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cc_NwMRL89LvB_c5vdG8fJ1W .cs__titles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cc_NwMRL89LvB_c5vdG8fJ1W .cs__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7f6650;
}

.cc_NwMRL89LvB_c5vdG8fJ1W .cs__title {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kombos-gray-900);
}

.cc_NwMRL89LvB_c5vdG8fJ1W .cs__desc {
  margin: 0;
  max-width: 36rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--kombos-gray-600);
}

.cc_NwMRL89LvB_c5vdG8fJ1W .cs__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.cc_NwMRL89LvB_c5vdG8fJ1W .cs__count {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--kombos-gray-600);
}

.cc_NwMRL89LvB_c5vdG8fJ1W .cs__all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kombos-gray-900);
  text-decoration: none;
  white-space: nowrap;
}

.cc_NwMRL89LvB_c5vdG8fJ1W .cs__all span {
  transition: transform 0.2s ease;
}

.cc_NwMRL89LvB_c5vdG8fJ1W .cs__all:hover span {
  transform: translateX(4px);
}

/* ---- Track ---- */
.cc_NwMRL89LvB_c5vdG8fJ1W .cs__track {
  counter-reset: cs-item;
  display: flex;
  gap: var(--cs-gap);
}

/* ikas mounts each card inside wrapper elements; flatten them so the cards
   themselves are the flex items */
.cc_NwMRL89LvB_c5vdG8fJ1W .cs__track > div, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track *:not(.cs-item):has(> .cs-item) {
  display: contents;
}

/* ===== Mobile & tablet: swipe row (fallback) ===== */
@media (max-width: 1023px) {
  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: -1rem;
    padding-inline: 1rem;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track::-webkit-scrollbar {
    display: none;
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item {
    flex: 0 0 var(--cs-card);
    height: min(calc(var(--cs-card) * 4 / 3), calc(100svh - var(--cs-top) - 13rem));
    scroll-snap-align: center;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cc_NwMRL89LvB_c5vdG8fJ1W .cs {
    --cs-card: 46vw;
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track {
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
    scroll-padding-inline: 1.5rem;
  }
}

/* ===== Phones with scroll timelines: pin under the header and let the page
   scroll slide the row; when the last card is in, the page carries on ===== */
@supports (animation-timeline: view()) {
  @media (max-width: 767px) {
    .cc_NwMRL89LvB_c5vdG8fJ1W .cs {
      /* Sideways distance = row width − screen width */
      --cs-dist: calc(
        var(--cs-n) * var(--cs-card) + (var(--cs-n) - 1) * var(--cs-gap) + 2rem - 100vw
      );
      view-timeline-name: --cs-pin;
      view-timeline-axis: block;
    }

    /* Scroll room for the slide. A sticky box can't travel into its parent's
       padding, so the room is real content after the pinned block */
    .cc_NwMRL89LvB_c5vdG8fJ1W .cs::after {
      content: "";
      display: block;
      height: var(--cs-dist);
    }

    .cc_NwMRL89LvB_c5vdG8fJ1W .cs__inner {
      position: sticky;
      top: var(--cs-top);
      min-height: calc(100svh - var(--cs-top));
      justify-content: center;
      overflow-x: clip;
    }

    .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track {
      overflow: visible;
      scroll-snap-type: none;
      animation: cc_NwMRL89LvB_c5vdG8fJ1W_cs-slide linear both;
      animation-timeline: --cs-pin;
      animation-range: contain 0% contain 100%;
    }
  }
}

@keyframes cc_NwMRL89LvB_c5vdG8fJ1W_cs-slide {
  to {
    transform: translate3d(calc(-1 * var(--cs-dist)), 0, 0);
  }
}

/* ===== Desktop: doors side by side; the hovered (or focused) one opens,
   the first one is open while nothing is hovered ===== */
@media (min-width: 1024px) {
  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__inner {
    gap: 2.5rem;
    padding-block: 4.5rem;
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__title {
    font-size: 2.5rem;
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track {
    height: clamp(30rem, 72vh, 46rem);
    gap: 0.625rem;
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item {
    flex: 1 1 0;
    transition: flex-grow 0.75s cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* Closed: dimmed, number on top, name written vertically */
  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item__shade {
    background:
      linear-gradient(to top, rgba(20, 16, 14, 0.7) 0%, rgba(20, 16, 14, 0) 55%),
      rgba(20, 16, 14, 0.3);
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item__img {
    transform: scale(1.06);
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item__num {
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    transition:
      left 0.5s ease,
      transform 0.5s ease;
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item__vlabel {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    z-index: 2;
    writing-mode: vertical-rl;
    transform: translateX(-50%) rotate(180deg);
    font-size: 0.875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  /* Content keeps a fixed width so it doesn't reflow while the door opens */
  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item__content {
    width: 28rem;
    max-width: none;
    padding: 2rem;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition:
      opacity 0.25s ease,
      transform 0.25s ease;
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item__content a {
    pointer-events: none;
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item__title {
    font-size: 2rem;
  }

  /* ---- Open state ---- */
  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:hover, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:focus-within, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track:not(:hover):not(:focus-within) :is([id$="-0"] > .cs-item, .cs-item[id$="-0"]) {
    flex-grow: 4.2;
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:hover .cs-item__shade, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:focus-within .cs-item__shade, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track:not(:hover):not(:focus-within) :is([id$="-0"] > .cs-item, .cs-item[id$="-0"]) .cs-item__shade {
    background:
      linear-gradient(to top, rgba(20, 16, 14, 0.72) 0%, rgba(20, 16, 14, 0) 55%),
      rgba(20, 16, 14, 0);
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:hover .cs-item__img, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:focus-within .cs-item__img, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track:not(:hover):not(:focus-within) :is([id$="-0"] > .cs-item, .cs-item[id$="-0"]) .cs-item__img {
    transform: scale(1);
  }

  /* Open state swaps to the wide photo when the card has one */
  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:hover .cs-item__img--open, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:focus-within .cs-item__img--open, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track:not(:hover):not(:focus-within) :is([id$="-0"] > .cs-item, .cs-item[id$="-0"]) .cs-item__img--open {
    opacity: 1;
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:has(.cs-item__img--open):hover .cs-item__img--closed, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:has(.cs-item__img--open):focus-within .cs-item__img--closed, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track:not(:hover):not(:focus-within) :is([id$="-0"] > .cs-item, .cs-item[id$="-0"]):has(.cs-item__img--open) .cs-item__img--closed {
    opacity: 0;
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:hover .cs-item__vlabel, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:focus-within .cs-item__vlabel, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track:not(:hover):not(:focus-within) :is([id$="-0"] > .cs-item, .cs-item[id$="-0"]) .cs-item__vlabel {
    opacity: 0;
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:hover .cs-item__num, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:focus-within .cs-item__num, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track:not(:hover):not(:focus-within) :is([id$="-0"] > .cs-item, .cs-item[id$="-0"]) .cs-item__num {
    left: 1.5rem;
    transform: none;
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:hover .cs-item__content, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:focus-within .cs-item__content, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track:not(:hover):not(:focus-within) :is([id$="-0"] > .cs-item, .cs-item[id$="-0"]) .cs-item__content {
    opacity: 1;
    transform: none;
    transition-delay: 0.3s;
  }

  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:hover .cs-item__content a, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item:focus-within .cs-item__content a, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track:not(:hover):not(:focus-within) :is([id$="-0"] > .cs-item, .cs-item[id$="-0"]) .cs-item__content a {
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item__content, .cc_NwMRL89LvB_c5vdG8fJ1W .cs__track .cs-item__num {
    animation: none !important;
    transition: none !important;
  }
}