.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look {
  box-sizing: border-box;
  /* Studio can render its page canvas narrower than the browser viewport.
     All desktop geometry therefore scales from this section's own inline
     size (1cqw), never from the outer editor window (1vw). */
  width: 100%;
  max-width: 100%;
  /* Safari <16 twin: `clip` is ignored there and the box bleeds sideways.
     `hidden` is safe on this element — it has no sticky descendant. */
  overflow: hidden;
  overflow: clip;
  container-type: inline-size;
  /* See Header/styles.css: WebKit measures `cqw` against the ZOOMED size
     under the fixed canvas, Chromium against the layout size. The canvas
     publishes an absolute px length, so prefer it when it exists. */
  --stl-canvas-vw: var(--sumone-design-vw, 1vw);
}

/* Safari 15 has no container queries. A `var(--x, 1vw)` fallback CANNOT save
   this: custom properties accept any token, so `--x: 1cqw` parses fine there
   and shadows the fallback, leaving every downstream calc() invalid — the
   section then collapses. The value must therefore be SWITCHED by @supports.
   1vw is the right stand-in: under the fixed canvas the body is `base`px wide
   and visually scaled by viewport/base, so 1vw lands on the same painted size. */
@supports (container-type: inline-size) {
  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look {
    --stl-canvas-vw: var(--sumone-design-vw, 1cqw);
  }
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__inner {
  /* Current agency frame 504:376 is authored at 1920x1080. */
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  /* Agency spacing note: the section must breathe equally above and below.
     80px is the authored 1920px value; the clamp keeps the same rhythm on
     smaller desktop/tablet canvases without creating oversized mobile air. */
  padding: clamp(36px, 4.166667vw, 80px) clamp(16px, 4.479vw, 86px);
}

/* Header */
.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__head {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: clamp(6px, 0.694vw, 10px);
  margin-bottom: clamp(24px, 2.083vw, 30px);
  text-align: left;
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__inner[data-align="center"] .shop-the-look__head {
  align-items: center;
  text-align: center;
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__inner[data-align="right"] .shop-the-look__head {
  align-items: flex-end;
  text-align: right;
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__inner[data-align="center"] .shop-the-look__looks, .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__inner[data-align="center"] .shop-the-look__look-slot {
  margin-inline: auto;
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-d30);
  font-weight: 500;
  line-height: 1.3667;
  letter-spacing: 0.0667em;
  color: var(--stl-text, var(--color-text-primary));
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-d60);
  font-weight: 400;
  line-height: 1.3667;
  letter-spacing: 0.0333em;
  color: var(--stl-text, var(--color-text-primary));
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 16rem;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-family: var(--font-label);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  border-radius: 2px;
}

/* Looks carousel */
.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__looks {
  position: relative;
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__look-slot {
  animation: cc_LmUd6PvvAN_BzmM4UgEEP_stl-look-fade 400ms ease;
}

@keyframes cc_LmUd6PvvAN_BzmM4UgEEP_stl-look-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__look-slot { animation: none; }
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__arrow {
  position: absolute;
  top: var(--stl-arrow-y, 50%);
  transform: translateY(-50%);
  z-index: var(--kombos-z-dropdown);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  background: var(--stl-text, var(--color-text-primary));
  color: var(--kombos-white);
  font-size: 1.125rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: opacity 200ms ease;
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__arrow:hover {
  opacity: 0.85;
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__arrow--prev {
  left: var(--stl-arrow-x, -1.5rem);
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__arrow--next {
  right: var(--stl-arrow-x, -1.5rem);
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__arrow:focus-visible {
  outline: 2px solid var(--stl-accent, var(--color-accent));
  outline-offset: 2px;
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease;
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__dot.is-active {
  background: var(--stl-accent, var(--color-accent));
  transform: scale(1.3);
}

.cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__dot:focus-visible {
  outline: 2px solid var(--stl-accent, var(--color-accent));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__arrow, .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__dot {
    transition: none;
  }
}

@media (max-width: 767px) {
  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__arrow {
    display: none;
  }
}

/* The fixed canvas remains 1080 logical pixels on every desktop width. Agency
   PDF spacing keeps equal 80px breathing room above and below the complete
   shoppable experience. There
   is deliberately no nested vertical scroller in this section: wheel/touch
   input always belongs to the document, so the storefront can never feel
   frozen over the product panel. */
@media (min-width: 1024px) {
  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__inner {
    box-sizing: border-box;
    height: calc(var(--stl-canvas-vw, 1vw) * 56.25);
    display: flex;
    flex-direction: column;
    padding:
      calc(var(--stl-canvas-vw, 1vw) * 4.166667)
      calc(var(--stl-canvas-vw, 1vw) * 4.479167)
      calc(var(--stl-canvas-vw, 1vw) * 4.166667);
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__head {
    flex: 0 0 auto;
    gap: calc(var(--stl-canvas-vw, 1vw) * 0.520833);
    margin-bottom: calc(var(--stl-canvas-vw, 1vw) * 2.239583);
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__looks {
    flex: 1 1 auto;
    min-height: 0;
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__look-slot {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  /* Ikas wraps the registered ShopTheLookLook child in its own cc_* host.
     That host must span the complete section. Making it another four-column
     grid turns the actual look into an item of only the first 677px track,
     which is what caused the product panel to grow outside this section. */
  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__look-slot > [class*="cc_"] {
    display: contents;
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look {
    box-sizing: border-box;
    display: grid;
    /* The parent inner already owns the 86px design insets. The child fills
       that available area instead of escaping to the browser viewport. */
    width: 100%;
    max-width: 100%;
    grid-template-columns:
      minmax(0, 60.5fr)
      minmax(0, 677fr)
      minmax(0, 343fr)
      minmax(0, 607fr)
      minmax(0, 60.5fr);
    column-gap: 0;
    height: 100%;
    min-height: 0;
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__stage {
    grid-column: 2;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__panel {
    grid-column: 4;
    height: 100%;
    min-height: 0;
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__list {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: calc(var(--stl-canvas-vw, 1vw) * 4.21875);
    transform: translateY(calc(var(--stl-canvas-vw, 1vw) * -0.260417));
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__list > [class*="cc_"], .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__list .stl-pin, .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__pins > [class*="cc_"], .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__pins .stl-pin {
    display: contents;
  }

  /* Parent-owned visual fallback. Registered child components are loaded as
     independent packages by ikas; during an editor refresh their CSS can
     arrive a frame later than the parent. Keeping the complete Figma row
     contract here prevents raw underlined links and narrow browser-default
     text from ever flashing or persisting. */
  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-dot {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--stl-canvas-vw, 1vw) * 1.875);
    height: calc(var(--stl-canvas-vw, 1vw) * 1.875);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--kombos-white);
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-dot-core {
    width: calc(var(--stl-canvas-vw, 1vw) * 0.677083);
    height: calc(var(--stl-canvas-vw, 1vw) * 0.677083);
    border-radius: 50%;
    background: var(--kombos-white);
    box-shadow: 0 0 0 calc(var(--stl-canvas-vw, 1vw) * 0.3125)
      var(--stl-text, var(--color-text-primary));
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__list .stl-dot, .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__pins .stl-look__item {
    display: none;
  }

  /* The pin rows are registered child code-components.  Studio can briefly
     retain an older child stylesheet while hot-reloading the section.  These
     parent-owned geometry rules intentionally restate the Figma measurements,
     keeping the whole e-commerce experience inside this one section even in
     that transition frame. */
  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: calc(var(--stl-canvas-vw, 1vw) * 11.927083);
    gap: calc(var(--stl-canvas-vw, 1vw) * 1.40625);
    padding: 0;
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__item-media {
    flex: 0 0 calc(var(--stl-canvas-vw, 1vw) * 9.635417);
    width: calc(var(--stl-canvas-vw, 1vw) * 9.635417);
    height: 100%;
    overflow: hidden;
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__item-img, .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__item-ph {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__item-foot {
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--stl-canvas-vw, 1vw) * 0.625);
    margin-top: calc(var(--stl-canvas-vw, 1vw) * 1.145833);
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__item-name, .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__item-price, .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__item-price-old {
    color: var(--stl-text, var(--color-text-primary));
    line-height: 1.75;
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__item-name, .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__item-price {
    font-size: calc(var(--stl-canvas-vw, 1vw) * 0.833333);
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__item-price-row {
    display: flex;
    align-items: baseline;
    gap: calc(var(--stl-canvas-vw, 1vw) * 0.416667);
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__item-price {
    font-weight: 700;
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__item-price-old {
    color: var(--color-text-muted);
    text-decoration: line-through;
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__item-cta {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-height: calc(var(--stl-canvas-vw, 1vw) * 2.135417);
    margin-left: auto;
    padding: 0 calc(var(--stl-canvas-vw, 1vw) * 1.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--stl-btn-bg, var(--stl-text, var(--color-text-primary)));
    color: var(--stl-btn-color, var(--kombos-white));
    font-size: calc(var(--stl-canvas-vw, 1vw) * 0.833333);
    font-weight: 700;
    line-height: 1.375;
    letter-spacing: 0.125em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look .stl-look__add-all {
    box-sizing: border-box;
    width: 76.277%;
    min-height: calc(var(--stl-canvas-vw, 1vw) * 3.177083);
    margin-top: auto;
    margin-right: 10.214%;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 0;
    border-radius: 0;
    background: var(--stl-btn-bg, var(--stl-text, var(--color-text-primary)));
    color: var(--stl-btn-color, var(--kombos-white));
    font-size: calc(var(--stl-canvas-vw, 1vw) * 0.833333);
    font-weight: 700;
    line-height: 1.375;
    letter-spacing: 0.125em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .cc_LmUd6PvvAN_BzmM4UgEEP .shop-the-look__dots {
    flex: 0 0 auto;
  }
}