/* ===== Cioraderm Media Showcase (slider) ===== */
.cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh {
  width: 100%;
  container-type: inline-size;
}

.cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 24px;
}

.cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__heading {
  font-size: var(--cio-msh-heading-size, 26px);
  line-height: 1.15;
  font-weight: var(--cio-msh-heading-weight, 500);
  text-transform: uppercase;
  color: var(--cio-msh-heading-color, #1a1a1a);
}
/* default: single line on desktop, wraps freely on mobile */
@media (min-width: 768px) {
  .cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__heading {
    white-space: nowrap;
  }
}
/* toggle off → force the capped 2-line wrap look */
.cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__heading--wrap {
  max-width: 18ch;
}
@media (min-width: 768px) {
  .cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__heading--wrap {
    white-space: normal;
  }
}

.cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e2e2e2;
  background: #fff;
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__arrow:hover {
  background: #4b2f4f;
  border-color: #4b2f4f;
  color: #fff;
}

.cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__arrow:focus-visible {
  outline: 2px solid #4b2f4f;
  outline-offset: 2px;
}

/* slider track */
.cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__viewport {
  position: relative;
}

/* Right-edge fade: a fixed gradient over the track's right side hinting that
   more cards are scrollable. Sits above the track, ignores pointer events. */
.cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__edge {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}

.cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__track::-webkit-scrollbar {
  display: none;
}

/* IkasComponentRenderer wraps each child in display:contents wrappers, so the
   actual flex cell is the card root `.cio-msc` itself. */
.cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__track .cio-msc {
  flex: 0 0 auto;
  width: 85%;
  scroll-snap-align: start;
}

@container (min-width: 640px) {
  .cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__track .cio-msc {
    width: 46%;
  }
}

@container (min-width: 1024px) {
  /* Show N full cards plus a ~55% peek of the next one (hints scrollability):
     divide the available width by (N + 0.55) instead of exactly N. */
  .cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__track .cio-msc {
    width: calc(
      (100% - 20px * var(--cio-msh-per, 4)) / (var(--cio-msh-per, 4) + 0.55)
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__arrow, .cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__track {
    transition: none;
    scroll-behavior: auto;
  }
}

/* Mobile size overrides — fall back to the desktop var, then the default. */
@media (max-width: 767px) {
  .cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__heading {
    font-size: var(--cio-msh-heading-size-m, var(--cio-msh-heading-size, 26px));
  }
}

/* Merchant-controlled side gutters. Appended last so they win over the layout
   rules above (breakpoint blocks included); the fallbacks are exactly what
   those rules already produce, so an unset prop changes nothing. */
.cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__inner {
  padding-left: var(--cio-sidepad-l, 24px);
  padding-right: var(--cio-sidepad-r, 24px);
}
@media (max-width: 767px) {
  .cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__inner {
    padding-left: var(--cio-sidepad-l-m, var(--cio-sidepad-l, 24px));
    padding-right: var(--cio-sidepad-r-m, var(--cio-sidepad-r, 24px));
  }
}

/* Merchant-controlled button side padding. Appended last so it wins over the
   rules above (breakpoint blocks included); the fallbacks are what those
   rules already produce, so an unset prop leaves the button unchanged. */
.cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__arrow {
  padding-left: var(--cio-btn-arrow-l, 0);
  padding-right: var(--cio-btn-arrow-r, 0);
}
@media (max-width: 767px) {
  .cc_MdNZYCy9lp_pIVF8HeKNM .cio-msh__arrow {
    padding-left: var(--cio-btn-arrow-l-m, var(--cio-btn-arrow-l, 0));
    padding-right: var(--cio-btn-arrow-r-m, var(--cio-btn-arrow-r, 0));
  }
}