.fourcore-shop-the-look {
  --fsl-font: inherit;
  --fsl-size: 16px;
  /* Default-zero radius / shadows / backgrounds — every visual
     surface starts plain so nothing decorative shows up unless the
     merchant explicitly opts into it from the customizer. Earlier
     defaults shipped with cards that had a white background, soft
     shadow, and 12px radius; on the live storefront that read as
     the app forcing its own look on top of every theme. */
  --fsl-radius: 0px;
  --fsl-container-radius: 0px;
  --fsl-card-radius: 0px;
  --fsl-accent: #111827;
  --fsl-accent-soft: #1118270f;
  --fsl-container-shadow: none;
  --fsl-layout-surface-shadow: none;
  --fsl-card-shadow: none;
  --fsl-card-shadow-hover: none;
  --fsl-card-hover-shadow: none;
  --fsl-card-hover-lift: 0px;
  --fsl-card-hover-border-color: transparent;
  --fsl-shadow: none;
  --fsl-gap: 16px;
  --fsl-heading-size: 18px;
  --fsl-heading-color: #0f172a;
  --fsl-heading-font-weight: 800;
  --fsl-product-title-size: 15px;
  --fsl-product-title-color: #0f172a;
  --fsl-product-title-font-weight: 800;
  --fsl-product-title-lines: 3;
  --fsl-price-size: 14px;
  --fsl-price-color: #475569;
  --fsl-price-font-weight: 700;
  --fsl-widget-bg: transparent;
  --fsl-card-bg: transparent;
  --fsl-media-bg: transparent;
  --fsl-border-color: transparent;
  --fsl-container-border-color: transparent;
  --fsl-card-border-color: transparent;
  --fsl-container-border-width: 0px;
  --fsl-card-border-width: 0px;
  --fsl-layout-surface-padding: clamp(12px, 2vw, 18px);
  --fsl-root-padding-top: 0px;
  --fsl-root-padding-right: 0px;
  --fsl-root-padding-bottom: 0px;
  --fsl-root-padding-left: 0px;
  --fsl-card-padding-top: 0px;
  --fsl-card-padding-right: 0px;
  --fsl-card-padding-bottom: 0px;
  --fsl-card-padding-left: 0px;
  --fsl-card-content-padding-top: 0px;
  --fsl-card-content-padding-right: 0px;
  --fsl-card-content-padding-bottom: 0px;
  --fsl-card-content-padding-left: 0px;
  --fsl-image-hover-scale: 1.025;
  --fsl-control-bg: #ffffff;
  --fsl-variant-gap: 6px;
  --fsl-variant-dropdown-height: 40px;
  --fsl-variant-dropdown-radius: 10px;
  --fsl-variant-dropdown-font-size: 12px;
  --fsl-variant-pill-height: 32px;
  --fsl-variant-pill-radius: 999px;
  --fsl-variant-pill-font-size: 12px;
  --fsl-variant-chip-height: 26px;
  --fsl-variant-chip-radius: 10px;
  --fsl-variant-chip-font-size: 11px;
  --fsl-variant-swatch-core-size: 24px;
  --fsl-variant-swatch-radius: 999px;
  --fsl-variant-swatch-gap: 8px;
  --fsl-variant-swatch-fit: cover;
  --fsl-variant-active-border-color: var(--fsl-accent);
  --fsl-variant-active-bg: var(--fsl-accent);
  --fsl-variant-active-text-color: #ffffff;
  --fsl-image-radius: 10px;
  --fsl-image-aspect-ratio: auto;
  --fsl-image-border-width: 1px;
  --fsl-image-border-color: var(--fsl-border-color);
  --fsl-stack-image-cap-desktop: 220px;
  --fsl-stack-content-cap-desktop: 1200px;
  --fsl-stack-image-cap-tablet: 120px;
  --fsl-stack-content-cap-tablet: 960px;
  --fsl-stack-image-cap-mobile: 640px;
  --fsl-stack-content-cap-mobile: 640px;
  --fsl-stack-image-cap: var(--fsl-stack-image-cap-desktop);
  --fsl-stack-content-cap: var(--fsl-stack-content-cap-desktop);
  --fsl-button-bg: var(--fsl-accent);
  --fsl-button-color: #ffffff;
  --fsl-button-border: 1px solid var(--fsl-accent);
  --fsl-button-shadow: 0 10px 24px rgba(17, 24, 39, 0.18);
  --fsl-button-shadow-hover: 0 14px 30px rgba(17, 24, 39, 0.24);
  --fsl-button-hover-lift: -1px;
  --fsl-item-button-bg: var(--fsl-button-bg);
  --fsl-item-button-color: var(--fsl-button-color);
  --fsl-item-button-border: var(--fsl-button-border);
  --fsl-add-all-button-bg: var(--fsl-button-bg);
  --fsl-add-all-button-color: var(--fsl-button-color);
  --fsl-add-all-button-border: var(--fsl-button-border);
  --fsl-item-button-radius: var(--fsl-radius);
  --fsl-add-all-button-radius: var(--fsl-radius);
  --fsl-item-button-height: 42px;
  --fsl-item-button-padding-x: 16px;
  --fsl-item-button-font-size: 0.92em;
  --fsl-item-button-font-weight: 800;
  --fsl-add-all-button-height: 42px;
  --fsl-add-all-button-padding-x: 16px;
  --fsl-add-all-button-font-size: 0.92em;
  --fsl-add-all-button-font-weight: 800;
  --fsl-summary-size: 12px;
  --fsl-summary-count-color: #55637d;
  --fsl-summary-total-color: #44536d;
  --fsl-summary-weight: 700;
  --fsl-summary-style: normal;
  --fsl-summary-decoration: none;
  --fsl-nav-size: 36px;
  --fsl-nav-icon-size: 20px;
  --fsl-nav-dot-size: 8px;
  --fsl-nav-dot-active-width: 28px;
  --fsl-hotspot-dot-size: 30px;
  --fsl-hotspot-dot-radius: 999px;
  --fsl-hotspot-dot-bg: #111827;
  --fsl-hotspot-dot-color: #ffffff;
  --fsl-hotspot-dot-border-width: 3px;
  --fsl-hotspot-dot-border-color: #fffffff5;
  --fsl-hotspot-dot-ring-color: #ffffff80;
  --fsl-hotspot-dot-active-bg: #0f172a;
  --fsl-hotspot-dot-active-color: #ffffff;
  --fsl-hotspot-dot-active-border-color: #ffffff;
  --fsl-hotspot-dot-active-scale: 1.08;
  --fsl-hotspot-detail-active-border-color: #111827;
  --fsl-grid-cols-desktop: 4;
  --fsl-grid-cols-tablet: 2;
  --fsl-grid-cols-mobile: 1;
  --fsl-slider-visible-desktop: 3;
  --fsl-slider-visible-tablet: 2;
  --fsl-slider-visible-mobile: 1;
  --fsl-slider-visible: 3;
  --fsl-slider-gap: 16px;
  --fsl-slider-duration: 520ms;
  --fsl-section-max-width: none;
  font-family: var(--fsl-font);
  font-size: var(--fsl-size);
  color: var(--fsl-product-title-color, #0f172a);
  width: 100%;
  /* `min(100%, ...)` belt-and-suspenders: even if the merchant
     sets a custom max-width like 1500px, on tablet/mobile viewports
     the widget never exceeds the parent container. Avoids
     horizontal scroll if a theme nests the widget inside a
     non-stretchy wrapper. */
  max-width: min(100%, var(--fsl-section-max-width));
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
  padding: var(--fsl-root-padding-top) var(--fsl-root-padding-right)
    var(--fsl-root-padding-bottom) var(--fsl-root-padding-left);
  box-sizing: border-box;
}

html.fsl-modal-open,
body.fsl-modal-open {
  overflow: hidden;
}

.fsl-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.fsl-title,
.fsl-widget-heading {
  margin: 0;
  font-family: inherit;
  font-size: var(--fsl-heading-size);
  letter-spacing: -0.01em;
  font-weight: var(--fsl-heading-font-weight, 700);
  color: var(--fsl-heading-color);
}

.fourcore-shop-the-look.fsl-force-important .fsl-title,
.fourcore-shop-the-look.fsl-force-important .fsl-widget-heading {
  font-family: inherit !important;
  font-size: var(--fsl-heading-size) !important;
  color: var(--fsl-heading-color) !important;
}

.fsl-heading-copy {
  min-width: 0;
  flex: 1 1 240px;
  max-width: 52rem;
}

.fsl-heading-actions {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.fsl-heading-actions:empty {
  display: none;
}

.fsl-template-desc {
  margin-top: 4px;
  color: var(--fsl-price-color, #64748b);
  font-size: 0.82em;
  line-height: 1.4;
  font-weight: 500;
  max-width: 60ch;
}

.fsl-layout-surface {
  border: var(--fsl-container-border-width) solid
    var(--fsl-container-border-color);
  border-radius: var(--fsl-container-radius);
  background: var(--fsl-widget-bg);
  box-shadow: none;
  padding: var(--fsl-layout-surface-padding);
}

.fsl-layout-surface--carousel {
  overflow: hidden;
}

.fsl-carousel-shell {
  overflow: hidden;
  margin-inline: -4px;
  padding-inline: 4px;
  padding-bottom: 18px;
}

.fsl-carousel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.fsl-carousel-actions:empty {
  display: none;
}

.fsl-add-all,
.fsl-add {
  cursor: pointer;
  min-height: 42px;
  padding: 10px 16px;
  font-weight: 600;
  font-family: inherit;
  font-size: 0.92em;
  border: var(--fsl-button-border, 1px solid var(--fsl-accent));
  background: var(--fsl-button-bg, var(--fsl-accent));
  color: var(--fsl-button-color, #ffffff);
  box-shadow: var(--fsl-button-shadow, 0 10px 24px rgba(17, 24, 39, 0.18));
}

.fsl-add {
  min-height: var(--fsl-item-button-height, 42px);
  padding-inline: var(--fsl-item-button-padding-x, 16px);
  font-size: var(--fsl-item-button-font-size, 0.92em);
  font-weight: var(--fsl-item-button-font-weight, 800);
  border-radius: var(--fsl-item-button-radius, var(--fsl-radius));
  width: var(--fsl-item-button-width, 100%);
  border: var(
    --fsl-item-button-border,
    var(--fsl-button-border, 1px solid var(--fsl-accent))
  );
  background: var(
    --fsl-item-button-bg,
    var(--fsl-button-bg, var(--fsl-accent))
  );
  color: var(--fsl-item-button-color, var(--fsl-button-color, #ffffff));
}

.fourcore-shop-the-look.fsl-force-important .fsl-add {
  font-size: var(--fsl-item-button-font-size, 0.92em) !important;
}

.fsl-add-all {
  min-height: var(--fsl-add-all-button-height, 42px);
  padding-inline: var(--fsl-add-all-button-padding-x, 16px);
  font-size: var(--fsl-add-all-button-font-size, 0.92em);
  font-weight: var(--fsl-add-all-button-font-weight, 800);
  border-radius: var(--fsl-add-all-button-radius, var(--fsl-radius));
  width: var(--fsl-add-all-button-width, auto);
  border: var(
    --fsl-add-all-button-border,
    var(--fsl-button-border, 1px solid var(--fsl-accent))
  );
  background: var(
    --fsl-add-all-button-bg,
    var(--fsl-button-bg, var(--fsl-accent))
  );
  color: var(--fsl-add-all-button-color, var(--fsl-button-color, #ffffff));
}

.fourcore-shop-the-look.fsl-force-important .fsl-add-all {
  font-size: var(--fsl-add-all-button-font-size, 0.92em) !important;
}

.fsl-add,
.fsl-add-all {
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    opacity 0.2s;
}

.fsl-add:hover,
.fsl-add-all:hover {
  transform: translateY(var(--fsl-button-hover-lift, -1px));
  box-shadow: var(--fsl-button-shadow-hover, var(--fsl-button-shadow));
}

.fsl-add:disabled,
.fsl-add-all:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.fsl-grid,
.fsl-carousel,
.fsl-slider,
.fsl-list,
.fsl-stacked {
  display: grid;
  gap: var(--fsl-gap);
}

.fsl-grid {
  grid-template-columns: repeat(var(--fsl-grid-cols-desktop), minmax(0, 1fr));
}

.fsl-carousel {
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 34vw, 360px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  touch-action: pan-y;
  padding-bottom: 18px;
  scrollbar-width: thin;
  scroll-padding-inline: 4px;
  overscroll-behavior-x: contain;
  align-items: stretch;
}

.fsl-carousel .fsl-item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.fsl-carousel .fsl-item:hover {
  transform: translateY(var(--fsl-card-hover-lift, -3px));
}

.fsl-carousel .fsl-thumb {
  min-height: clamp(200px, 24vw, 260px);
  aspect-ratio: 4 / 4.4;
}

.fsl-slider {
  display: flex;
  align-items: stretch;
  gap: var(--fsl-gap);
  transition: transform var(--fsl-slider-duration, 520ms)
    cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  padding: 8px 0 14px;
}

.fourcore-shop-the-look[data-slider-animation="SOFT"] .fsl-slider {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.fourcore-shop-the-look[data-slider-animation="FADE"] .fsl-slider {
  transition-timing-function: ease;
}

.fourcore-shop-the-look[data-slider-animation="ZOOM"] .fsl-slider {
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.24, 1);
}

.fourcore-shop-the-look[data-slider-animation="STACK"] .fsl-slider {
  transition-timing-function: cubic-bezier(0.32, 0.06, 0.24, 1);
}

.fourcore-shop-the-look[data-slider-animation="REVEAL"] .fsl-slider {
  transition-timing-function: cubic-bezier(0.24, 0.98, 0.32, 1);
}

.fsl-layout-surface--slider {
  overflow: hidden;
  border: var(--fsl-container-border-width) solid
    var(--fsl-container-border-color);
  background: var(--fsl-widget-bg);
}

.fsl-slider-stage {
  position: relative;
  padding: 6px;
  border-radius: var(--fsl-container-radius);
  border: var(--fsl-container-border-width) solid
    var(--fsl-container-border-color);
  background: var(--fsl-widget-bg);
}

.fsl-slider-viewport {
  overflow: hidden;
  padding: clamp(16px, 2vw, 22px) clamp(52px, 6vw, 76px) 10px;
  touch-action: pan-y;
}

.fourcore-shop-the-look[data-slider-arrows="0"] .fsl-slider-viewport {
  padding-inline: clamp(16px, 2vw, 22px);
}

.fsl-slider-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.fourcore-shop-the-look[data-slider-pagination-position="BOTTOM_LEFT"]
  .fsl-slider-pagination {
  justify-content: flex-start;
}

.fourcore-shop-the-look[data-slider-pagination-position="BOTTOM_RIGHT"]
  .fsl-slider-pagination {
  justify-content: flex-end;
}

.fourcore-shop-the-look[data-slider-pagination-position="TOP_CENTER"]
  .fsl-slider-pagination {
  order: -1;
  margin-top: 0;
  margin-bottom: 16px;
}

.fsl-slider-dot {
  width: var(--fsl-nav-dot-size);
  height: var(--fsl-nav-dot-size);
  padding: 0;
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: rgba(203, 213, 225, 0.92);
  cursor: pointer;
  box-shadow: none;
  transition:
    width 180ms ease,
    background 180ms ease,
    opacity 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.fsl-slider-dot:hover {
  transform: scale(1.08);
}

.fsl-slider-dot.is-active {
  width: var(--fsl-nav-dot-active-width);
  background: var(--fsl-accent);
  border-color: transparent;
  box-shadow: none;
}

.fsl-list {
  grid-template-columns: 1fr;
}

/* ── Flatlay Boutique layout ─────────────────────────────────────────
   Editorial flat-lay hero with hotspot dots; a boutique summary panel
   overlaps the hero on the right (bundle total + add-all). Clicking a
   dot swaps the floating product card at the bottom of the image. */
.fsl-flatlay {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(240px, 0.85fr);
  align-items: center;
  gap: 0;
}

.fsl-flatlay-stage {
  position: relative;
  min-width: 0;
}

.fsl-flatlay-stage .fsl-hotspot-canvas {
  border-radius: var(--fsl-image-radius, 12px);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1);
  aspect-ratio: var(--fsl-flatlay-aspect, 4 / 3);
}

.fsl-flatlay-stage .fsl-hotspot-canvas > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Anchored under the active hotspot dot (JS sets left/top from the dot;
   .is-above flips it when the dot sits low on the image). */
.fsl-flatlay-popover {
  position: absolute;
  left: 50%;
  top: 55%;
  width: min(300px, 82%);
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, 18px);
}

.fsl-flatlay-popover.is-above {
  transform: translate(-50%, calc(-100% - 18px));
}

.fsl-flatlay-popover [data-hotspot-detail] {
  display: none;
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.2);
  padding: 10px;
}

/* Minimal mini-card: thumbnail left; title, variant, price and a small
   add-to-cart stacked on the right. */
.fsl-flatlay-popover [data-hotspot-detail].is-active {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  text-align: left;
}

.fsl-flatlay-popover [data-hotspot-detail] .fsl-gallery {
  width: 64px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  margin: 0;
}

.fsl-flatlay-popover [data-hotspot-detail] .fsl-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fsl-flatlay-popover [data-hotspot-detail] .fsl-gallery-nav,
.fsl-flatlay-popover [data-hotspot-detail] .fsl-gallery-dots {
  display: none !important;
}

.fsl-flatlay-popover [data-hotspot-detail] .fsl-info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  text-align: left;
  padding: 0;
  min-width: 0;
}

.fsl-flatlay-popover [data-hotspot-detail] .fsl-name {
  font-size: 13px;
  line-height: 1.35;
}

.fsl-flatlay-popover [data-hotspot-detail] .fsl-price {
  font-size: 13px;
  margin: 0;
}

.fsl-flatlay-popover [data-hotspot-detail] .fsl-add {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
  width: 100%;
}

.fsl-flatlay-total {
  font-size: clamp(20px, 2.4cqw, 28px);
  font-weight: 650;
  letter-spacing: 0.04em;
  color: inherit;
}

.fsl-flatlay-panel /* ── Per-card custom text fields (personalization) ─────────────────── */
.fsl-custom-fields {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.fsl-custom-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.fsl-custom-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fsl-product-title-color, #0f172a);
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}

.fsl-custom-field-required {
  color: #b91c1c;
}

.fsl-custom-field-input {
  font: inherit;
  font-size: 13px;
  color: inherit;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.55);
  border-radius: var(--fsl-item-button-radius, 8px);
  padding: 8px 10px;
  min-height: 36px;
  width: 100%;
  box-sizing: border-box;
}

.fsl-custom-field-input:focus {
  outline: none;
  border-color: var(--fsl-accent, #111827);
}

.fsl-custom-field-input--error {
  border-color: #b91c1c;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}

.fsl-summary {
  display: none !important;
}

.fsl-flatlay-panel {
  position: relative;
  z-index: 2;
  margin-left: clamp(-72px, -6cqw, -28px);
  background: var(--fsl-flatlay-panel-bg, #fdece7);
  border-radius: var(--fsl-card-radius, 6px);
  padding: clamp(26px, 3.4cqw, 44px) clamp(20px, 3cqw, 38px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
}

.fsl-flatlay-panel .fsl-spotlight-title {
  margin: 0;
  letter-spacing: -0.01em;
}

.fsl-flatlay-panel .fsl-template-desc {
  margin: 0;
  opacity: 0.75;
}

.fsl-flatlay-panel .fsl-hero-bundle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.fsl-flatlay-panel .fsl-add-all {
  border-radius: 999px;
  min-width: 200px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
}

@container (max-width: 760px) {
  .fsl-flatlay {
    grid-template-columns: minmax(0, 1fr);
  }
  .fsl-flatlay-panel {
    margin: -34px 14px 0;
  }
}

@media (max-width: 760px) {
  .fourcore-shop-the-look .fsl-flatlay {
    grid-template-columns: minmax(0, 1fr);
  }
  .fourcore-shop-the-look .fsl-flatlay-panel {
    margin: -34px 14px 0;
  }
}

.fsl-hotspot {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
  gap: clamp(14px, 2.4vw, 24px);
  align-items: start;
}

.fsl-hotspot-stage {
  position: relative;
  min-height: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--fsl-card-radius);
  border: var(--fsl-card-border-width) solid var(--fsl-card-border-color);
  background: var(--fsl-media-bg);
  overflow: hidden;
  box-shadow: none;
  padding: 0;
}

.fsl-hotspot-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--fsl-card-radius);
  overflow: hidden;
  background: transparent;
}

.fsl-hotspot-stage img {
  width: 100%;
  height: 100%;
  object-fit: var(--fsl-image-fit, cover);
  display: block;
  border-radius: 0;
}

.fsl-hotspot-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding-right: 4px;
}

/* Hotspot panel — SLIDER variant.
   When the merchant picks SLIDER for hotspotPanelLayout, the right-side
   stack becomes a one-card-at-a-time Splide carousel. The hotspot dots
   on the image still drive activation: clicking dot N tells Splide to
   `go(N)`, and swiping the slider syncs the matching dot back. We keep
   STACK as the default so an unset value renders today's UI unchanged. */
.fsl-hotspot-panel--slider {
  display: block;
  padding-right: 0;
}

/* Direct-child fallback: in any context where the details are NOT wrapped
   in a Splide track (the customizer's preview iframe, or any storefront
   where splide.min.js failed to load), only show the active card. The
   `> ` direct-child selector means the rule does NOT match in the real
   storefront — there, the details are nested inside .splide > .splide__track
   > .splide__list, so Splide owns the display logic and this rule
   stays quiet. */
.fsl-hotspot-panel--slider > .fsl-hotspot-detail:not(.is-active) {
  display: none;
}

.fsl-hotspot-panel--slider .fsl-hotspot-splide {
  width: 100%;
}

.fsl-hotspot-panel--slider .fsl-hotspot-detail {
  /* All slides are visually equal in slider mode — Splide shows only
     the active one. Skip the dim-inactive treatment used in STACK. */
  opacity: 1;
  transform: none;
}

.fsl-hotspot-panel--slider .splide__track {
  overflow: hidden;
  border-radius: var(--fsl-card-radius);
}

.fsl-hotspot-panel--slider .splide__arrow {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  opacity: 0.95;
  z-index: 5;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.fsl-hotspot-panel--slider .splide__arrow:hover {
  opacity: 1;
  background: #ffffff;
}

.fsl-hotspot-panel--slider .splide__arrow svg {
  width: 14px;
  height: 14px;
  fill: var(--fsl-accent, #111827);
}

.fsl-hotspot-panel--slider .splide__arrow--prev {
  left: 6px;
}

.fsl-hotspot-panel--slider .splide__arrow--next {
  right: 6px;
}

.fsl-hotspot-dot {
  position: absolute;
  width: var(--fsl-hotspot-dot-size);
  height: var(--fsl-hotspot-dot-size);
  padding: 0;
  margin: 0;
  border: var(--fsl-hotspot-dot-border-width) solid
    var(--fsl-hotspot-dot-border-color);
  border-radius: var(--fsl-hotspot-dot-radius);
  background: var(--fsl-hotspot-dot-bg);
  transform: translate(-50%, -50%);
  box-shadow: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--fsl-hotspot-dot-color);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.fsl-hotspot-dot::after {
  content: "";
  position: absolute;
  inset: calc(var(--fsl-hotspot-dot-size) * -0.27);
  border-radius: calc(var(--fsl-hotspot-dot-radius) + 8px);
  border: 1px solid var(--fsl-hotspot-dot-ring-color);
}

.fsl-hotspot-dot span {
  pointer-events: none;
}

.fsl-hotspot-dot:focus-visible {
  outline: 2px solid rgba(15, 23, 42, 0.32);
  outline-offset: 3px;
}

.fsl-hotspot-dot.is-active {
  transform: translate(-50%, -50%) scale(var(--fsl-hotspot-dot-active-scale));
  background: var(--fsl-hotspot-dot-active-bg);
  color: var(--fsl-hotspot-dot-active-color);
  border-color: var(--fsl-hotspot-dot-active-border-color);
  box-shadow: none;
}

.fsl-hotspot-detail {
  display: block;
  border-radius: var(--fsl-card-radius);
  transition:
    transform 160ms ease,
    opacity 160ms ease;
}

.fsl-hotspot-detail .fsl-item {
  grid-template-columns: minmax(84px, 112px) minmax(0, 1fr);
  grid-template-rows: none;
  /* See note on the base .fsl-item rule: percentage min-height with an
     indefinite parent track resolves to absurd heights on Safari. */
  min-height: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(248, 250, 252, 0.95)
  );
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease;
}

.fsl-hotspot-detail .fsl-thumb {
  height: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  border-bottom: 0;
  border-right: var(--fsl-image-border-width) solid
    var(--fsl-image-border-color);
}

.fsl-hotspot-detail .fsl-thumb img {
  padding: 0;
  border-radius: 0;
}

.fsl-hotspot-detail .fsl-info {
  padding: 14px 14px 14px 16px;
  gap: 12px;
  grid-template-rows: auto auto;
  align-content: start;
}

.fsl-hotspot-detail .fsl-name {
  -webkit-line-clamp: 2;
}

.fsl-hotspot-detail .fsl-add {
  width: 100%;
  min-height: 40px;
  padding: 10px 14px;
}

.fsl-hotspot-detail:not(.is-active) .fsl-item {
  opacity: 0.84;
}

.fsl-hotspot-detail.is-active {
  transform: translateX(calc(var(--fsl-card-hover-lift, -3px) * 1.3333));
}

.fsl-hotspot-detail.is-active .fsl-item {
  border-color: var(
    --fsl-hotspot-detail-active-border-color,
    var(--fsl-card-hover-border-color, var(--fsl-accent))
  );
  box-shadow: var(--fsl-card-hover-shadow, var(--fsl-card-shadow-hover));
}

.fsl-stacked {
  grid-template-columns: 1fr;
  gap: var(--fsl-gap);
}

.fsl-masonry,
.fsl-inline {
  display: block;
  column-width: clamp(220px, 24vw, 300px);
  column-gap: var(--fsl-gap);
}

.fsl-item {
  position: relative;
  /* Earlier this hard-coded a white-ish gradient that ignored the
     merchant's "transparent" choice in the customizer — the live
     storefront kept rendering the cards on a white surface. Drive
     it from --fsl-card-bg (defaults to transparent in :root) so the
     card actually disappears when the merchant sets it that way. */
  background: var(--fsl-card-bg, transparent);
  border-radius: var(--fsl-card-radius);
  box-shadow: var(--fsl-card-shadow);
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(190px, auto) auto;
  border: var(--fsl-card-border-width) solid var(--fsl-card-border-color);
  min-width: 0;
  /* Grid items already auto-stretch to fill the row track, so we don't
     need an explicit min-height: 100% here for card-height alignment.
     The percentage form created a circular dependency on Safari when
     the parent grid had no explicit row height, resolving to absurd
     heights (20000+px) and leaving the cards looking blank with
     enormous gaps below the content. min-height: 0 keeps the item
     content-sized while still allowing the grid track to stretch it. */
  min-height: 0;
  padding: var(--fsl-card-padding-top) var(--fsl-card-padding-right)
    var(--fsl-card-padding-bottom) var(--fsl-card-padding-left);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.fsl-item:hover {
  transform: translateY(var(--fsl-card-hover-lift, -3px));
  border-color: var(--fsl-card-hover-border-color, rgba(191, 219, 254, 0.92));
  box-shadow: var(--fsl-card-hover-shadow, var(--fsl-card-shadow-hover));
}

.fsl-thumb {
  background: var(--fsl-media-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: var(--fsl-image-border-width) solid
    var(--fsl-image-border-color);
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--fsl-image-aspect-ratio, auto);
  overflow: hidden;
  padding: 0;
}

.fsl-thumb img {
  width: var(--fsl-image-width, 100%);
  height: var(--fsl-image-height, 100%);
  max-width: 100%;
  max-height: 100%;
  object-fit: var(--fsl-image-fit, cover);
  padding: 0;
  display: block;
  margin: auto;
  border-radius: var(--fsl-image-radius);
  /* aspect-ratio lives on the img so it actually drives the box's
     height when --fsl-image-height is "auto" (set by JS when the
     merchant picks a non-auto ratio). The thumb wraps the img and
     subgrid row tracks size to the shared aspect-ratio'd height. */
  aspect-ratio: var(--fsl-image-aspect-ratio, auto);
  transition:
    transform 220ms ease,
    filter 220ms ease;
}

.fsl-item:hover .fsl-thumb img {
  transform: scale(var(--fsl-image-hover-scale, 1.025));
}

.fsl-product-link {
  color: inherit;
  text-decoration: none;
}

.fsl-product-link--media {
  display: block;
  width: 100%;
  height: 100%;
}

.fsl-product-link--title:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.fsl-gallery {
  position: relative;
  width: 100%;
  height: 100%;
}

.fsl-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: max(24px, calc(var(--fsl-nav-size) - 6px));
  height: max(24px, calc(var(--fsl-nav-size) - 6px));
  border-radius: 999px;
  /* Each colour falls back through gallery-specific override → shared
     widget variable → hardcoded default. So when the merchant leaves a
     field empty in the Product Gallery Controls layer, the gallery
     inherits the widget's default chrome. */
  border: 1px solid var(--fsl-gallery-nav-border-color, var(--fsl-border-color, #cbd5e1));
  background: var(--fsl-gallery-nav-bg, var(--fsl-control-bg, rgba(255, 255, 255, 0.92)));
  color: var(--fsl-gallery-nav-icon-color, var(--fsl-product-title-color, #0f172a));
  font-size: max(14px, calc(var(--fsl-nav-icon-size) - 2px));
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    background 120ms ease,
    transform 120ms ease,
    opacity 120ms ease;
}

.fsl-gallery-nav:hover {
  background: var(
    --fsl-gallery-nav-hover-bg,
    var(--fsl-gallery-nav-bg, var(--fsl-control-bg, #fff))
  );
  transform: translateY(-50%) scale(1.03);
}

.fsl-gallery-nav.prev {
  left: 10px;
}

.fsl-gallery-nav.next {
  right: 10px;
}

.fsl-gallery-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--fsl-gallery-dots-bg, var(--fsl-control-bg, rgba(255, 255, 255, 0.85)));
  border: 1px solid var(--fsl-gallery-nav-border-color, var(--fsl-border-color, #e2e8f0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.fsl-gallery:hover .fsl-gallery-nav,
.fsl-gallery:hover .fsl-gallery-dots,
.fsl-gallery:focus-within .fsl-gallery-nav,
.fsl-gallery:focus-within .fsl-gallery-dots {
  opacity: 1;
  pointer-events: auto;
}

.fsl-gallery[data-gallery-size]:not([data-gallery-size="0"]):not(
    [data-gallery-size="1"]
  )
  .fsl-gallery-dots {
  opacity: 1;
  pointer-events: auto;
}

.fsl-gallery-dot {
  width: max(6px, calc(var(--fsl-nav-dot-size) - 1px));
  height: max(6px, calc(var(--fsl-nav-dot-size) - 1px));
  border-radius: 999px;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--fsl-gallery-dot-color, var(--fsl-border-color, #94a3b8));
  cursor: pointer;
}

.fsl-gallery-dot.is-active {
  width: max(
    var(--fsl-nav-dot-size),
    calc(var(--fsl-nav-dot-active-width) - 8px)
  );
  background: var(--fsl-gallery-dot-active-color, var(--fsl-accent));
}

.fsl-thumb-fallback {
  width: 68px;
  height: 68px;
  border-radius: var(--fsl-image-radius);
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--fsl-product-title-color, #0f172a);
  background: var(--fsl-control-bg, #ffffff);
  border: 1px solid var(--fsl-border-color, #cbd5e1);
}

.fsl-info {
  /* Top default bumped from 16px → 18px so there's clear breathing
     room between the product image and the title — earlier sizing
     ran the title right under the image edge.
     Side defaults bumped from 0px → 12px so text + buttons no
     longer touch the card edge on the live storefront. Merchants
     can override any of these from the customizer if they want
     edge-to-edge content. */
  padding: var(--fsl-card-content-padding-top, 18px)
    var(--fsl-card-content-padding-right, 12px)
    var(--fsl-card-content-padding-bottom, 12px)
    var(--fsl-card-content-padding-left, 12px);
  display: grid;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  height: auto;
  grid-template-rows: none;
  align-content: start;
  /* Remove the implicit white-ish gradient under the content. The
     card background now defers to whatever the merchant explicitly
     sets via --fsl-card-bg (defaults to transparent). */
  background: transparent;
}

.fsl-item-copy,
.fsl-item-meta {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.fsl-item-meta {
  align-content: start;
}

.fsl-name,
.fsl-product-title {
  font-family: inherit;
  font-weight: var(--fsl-product-title-font-weight, 700);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-size: var(--fsl-product-title-size);
  color: var(--fsl-product-title-color);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: var(--fsl-product-title-lines, 3);
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-word;
}

.fourcore-shop-the-look.fsl-force-important .fsl-name,
.fourcore-shop-the-look.fsl-force-important .fsl-product-title {
  font-family: inherit !important;
  font-size: var(--fsl-product-title-size) !important;
  color: var(--fsl-product-title-color) !important;
}

.fsl-variant-wrap {
  display: grid;
  gap: var(--fsl-variant-gap);
}

.fsl-variant-group {
  display: grid;
  gap: max(6px, calc(var(--fsl-variant-gap) * 0.72));
}

.fsl-variant-label {
  font-size: 0.74em;
  color: var(--fsl-price-color, #64748b);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fsl-variant-group-label {
  font-size: 0.72em;
  color: var(--fsl-price-color, #64748b);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.fsl-variant-picker {
  width: 100%;
  min-height: var(--fsl-variant-dropdown-height);
  /* Right padding leaves ≥15px from the right edge for the chevron;
     custom SVG bg-image keeps the chevron consistent across browsers. */
  padding: 8px 40px 8px 12px;
  border-radius: var(--fsl-variant-dropdown-radius);
  border: 1px solid var(--fsl-border-color, #cbd5e1);
  background: var(--fsl-control-bg, #fff)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E")
    no-repeat right 16px center / 12px 8px;
  color: var(--fsl-product-title-color, #0f172a);
  font: inherit;
  font-size: var(--fsl-variant-dropdown-font-size);
  appearance: none;
  -webkit-appearance: none;
}

.fsl-variant-picker:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.fsl-variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fsl-variant-gap);
}

.fsl-variant-option {
  min-height: var(--fsl-variant-pill-height);
  padding: 0 12px;
  border-radius: var(--fsl-variant-pill-radius);
  border: 1px solid var(--fsl-border-color, #cbd5e1);
  background: var(--fsl-control-bg, #ffffff);
  color: var(--fsl-product-title-color, #0f172a);
  font: inherit;
  font-size: var(--fsl-variant-pill-font-size);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease,
    background 120ms ease;
}

.fsl-variant-option--chip {
  min-height: var(--fsl-variant-chip-height);
  padding: 0 8px;
  border-radius: var(--fsl-variant-chip-radius);
  font-size: var(--fsl-variant-chip-font-size);
}

.fsl-variant-option:hover:not(:disabled),
.fsl-variant-swatch:hover:not(:disabled) {
  transform: translateY(-1px);
}

.fsl-variant-option.is-selected {
  border-color: var(--fsl-variant-active-border-color, var(--fsl-accent));
  background: var(--fsl-variant-active-bg, var(--fsl-accent));
  color: var(--fsl-variant-active-text-color, #ffffff);
  box-shadow: none;
}

.fsl-variant-option:disabled,
.fsl-variant-swatch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.fsl-variant-options--swatches {
  gap: var(--fsl-variant-swatch-gap);
}

.fsl-variant-swatch {
  width: calc(var(--fsl-variant-swatch-core-size) + 6px);
  height: calc(var(--fsl-variant-swatch-core-size) + 6px);
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.fsl-variant-swatch-core {
  width: var(--fsl-variant-swatch-core-size);
  height: var(--fsl-variant-swatch-core-size);
  border-radius: var(--fsl-variant-swatch-radius);
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: none;
}

.fsl-variant-swatch-core.has-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--fsl-variant-swatch-fit);
  overflow: hidden;
}

.fsl-variant-swatch.is-selected .fsl-variant-swatch-core {
  border-color: var(--fsl-variant-active-border-color, var(--fsl-accent));
  outline: 2px solid var(--fsl-variant-active-bg, #ffffff);
  outline-offset: 1px;
  color: var(--fsl-variant-active-text-color, #ffffff);
}

.fsl-variant-swatch-label {
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.fsl-price,
.fsl-product-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--fsl-price-size);
  color: var(--fsl-price-color);
  line-height: 1.28;
  font-weight: var(--fsl-price-font-weight, 700);
}

.fourcore-shop-the-look.fsl-force-important .fsl-template-desc,
.fourcore-shop-the-look.fsl-force-important .fsl-subtitle,
.fourcore-shop-the-look.fsl-force-important .fsl-price,
.fourcore-shop-the-look.fsl-force-important .fsl-product-price,
.fourcore-shop-the-look.fsl-force-important .fsl-current,
.fourcore-shop-the-look.fsl-force-important .fsl-compare {
  font-size: var(--fsl-price-size) !important;
  color: var(--fsl-price-color) !important;
}

.fsl-current {
  font-weight: inherit;
}

.fsl-compare {
  color: var(--fsl-price-color, #94a3b8);
  opacity: 0.72;
  text-decoration: line-through;
}

.fsl-add {
  width: 100%;
  margin: 0;
  justify-self: stretch;
  background: var(--fsl-item-button-bg);
  color: var(--fsl-item-button-color);
  border: var(--fsl-item-button-border);
}

.fsl-add--icon {
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.7em;
  line-height: 1;
  font-weight: 400;
  box-shadow: none;
  justify-self: end;
}

.fsl-nav {
  margin-top: 8px;
  background: var(--fsl-control-bg, #fff);
  border: 1px solid var(--fsl-border-color, #e2e8f0);
  border-radius: 50%;
  width: var(--fsl-nav-size);
  height: var(--fsl-nav-size);
  cursor: pointer;
  color: var(--fsl-product-title-color, #0f172a);
  display: grid;
  place-items: center;
  font-size: var(--fsl-nav-icon-size);
  line-height: 1;
  font-weight: 700;
  box-shadow: none;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease,
    background 160ms ease;
}

.fsl-nav:hover:not(:disabled) {
  box-shadow: none;
}

.fsl-nav:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.fsl-carousel-actions .fsl-nav {
  margin-top: 0;
}

.fsl-slider-stage .fsl-nav {
  position: absolute;
  top: calc(50% - 6px);
  transform: translateY(-50%);
  z-index: 2;
  margin-top: 0;
  width: var(--fsl-nav-size);
  height: var(--fsl-nav-size);
  background: var(--fsl-control-bg, rgba(255, 255, 255, 0.94));
  border-color: var(--fsl-border-color, rgba(226, 232, 240, 0.96));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fsl-slider-stage .fsl-nav.prev {
  left: 10px;
}
.fsl-slider-stage .fsl-nav.next {
  right: 10px;
}

.fourcore-shop-the-look[data-slider-arrow-position="OUTSIDE"]
  .fsl-layout-surface--slider,
.fourcore-shop-the-look[data-slider-arrow-position="OUTSIDE"]
  .fsl-slider-stage {
  overflow: visible;
}

.fourcore-shop-the-look[data-slider-arrow-position="OUTSIDE"]
  .fsl-slider-stage
  .fsl-nav.prev {
  left: -16px;
}

.fourcore-shop-the-look[data-slider-arrow-position="OUTSIDE"]
  .fsl-slider-stage
  .fsl-nav.next {
  right: -16px;
}

.fourcore-shop-the-look[data-slider-arrow-position="BOTTOM_LEFT"]
  .fsl-slider-stage,
.fourcore-shop-the-look[data-slider-arrow-position="BOTTOM_RIGHT"]
  .fsl-slider-stage {
  padding-bottom: calc(var(--fsl-nav-size) + 22px);
}

.fourcore-shop-the-look[data-slider-arrow-position="BOTTOM_LEFT"]
  .fsl-slider-stage
  .fsl-nav,
.fourcore-shop-the-look[data-slider-arrow-position="BOTTOM_RIGHT"]
  .fsl-slider-stage
  .fsl-nav {
  top: auto;
  bottom: 12px;
  transform: none;
}

.fourcore-shop-the-look[data-slider-arrow-position="BOTTOM_LEFT"]
  .fsl-slider-stage
  .fsl-nav.prev {
  left: 12px;
}

.fourcore-shop-the-look[data-slider-arrow-position="BOTTOM_LEFT"]
  .fsl-slider-stage
  .fsl-nav.next {
  left: calc(12px + var(--fsl-nav-size) + 8px);
  right: auto;
}

.fourcore-shop-the-look[data-slider-arrow-position="BOTTOM_RIGHT"]
  .fsl-slider-stage
  .fsl-nav.next {
  right: 12px;
}

.fourcore-shop-the-look[data-slider-arrow-position="BOTTOM_RIGHT"]
  .fsl-slider-stage
  .fsl-nav.prev {
  left: auto;
  right: calc(12px + var(--fsl-nav-size) + 8px);
}

.fourcore-shop-the-look[data-slider-arrows="0"] .fsl-slider-stage .fsl-nav {
  display: none;
}

.fourcore-shop-the-look[data-slider-ticker="1"] .fsl-slider-stage .fsl-nav,
.fourcore-shop-the-look[data-slider-ticker="1"] .fsl-slider-pagination {
  display: none;
}

.fsl-slider .fsl-item {
  transform: translate3d(0, 16px, 0);
  transform-origin: center center;
  clip-path: inset(0 round var(--fsl-card-radius));
  transition:
    transform var(--fsl-slider-duration, 520ms) cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms ease,
    box-shadow 420ms ease,
    filter 420ms ease,
    clip-path 420ms ease;
  filter: saturate(0.78) blur(0.2px);
}

.fourcore-shop-the-look[data-slider-animation="SOFT"] .fsl-slider .fsl-item {
  transform: translate3d(0, 10px, 0) scale(0.95);
}

.fourcore-shop-the-look[data-slider-animation="FADE"] .fsl-slider .fsl-item {
  transform: translate3d(0, 8px, 0) scale(0.97);
  filter: saturate(0.72);
}

.fourcore-shop-the-look[data-slider-animation="ZOOM"] .fsl-slider .fsl-item {
  transform: translate3d(0, 4px, 0) scale(0.86);
  filter: saturate(0.82);
}

.fourcore-shop-the-look[data-slider-animation="STACK"] .fsl-slider .fsl-item {
  transform: translate3d(0, 20px, 0) scale(0.9);
  filter: saturate(0.84);
}

.fourcore-shop-the-look[data-slider-animation="REVEAL"] .fsl-slider .fsl-item {
  opacity: 0.54;
  transform: translate3d(0, 6px, 0) scale(0.95);
  filter: saturate(0.78);
  clip-path: inset(12% 10% 12% 10% round var(--fsl-card-radius));
}

.fourcore-shop-the-look[data-slider-center="0"] .fsl-slider .fsl-item {
  transform: translate3d(0, 8px, 0);
  filter: none;
}

.fsl-slider .fsl-item.is-visible {
  filter: saturate(0.92);
}

.fsl-slider .fsl-item.is-active {
  transform: translate3d(0, -6px, 0);
  box-shadow: var(--fsl-card-hover-shadow, var(--fsl-card-shadow-hover));
  z-index: 3;
  filter: none;
}

.fourcore-shop-the-look[data-slider-animation="ZOOM"]
  .fsl-slider
  .fsl-item.is-active {
  transform: translate3d(0, -6px, 0);
}

.fourcore-shop-the-look[data-slider-animation="STACK"]
  .fsl-slider
  .fsl-item.is-active {
  transform: translate3d(0, -8px, 0);
}

.fourcore-shop-the-look[data-slider-animation="REVEAL"]
  .fsl-slider
  .fsl-item.is-active {
  opacity: 1;
  transform: translate3d(0, -4px, 0);
  filter: none;
  clip-path: inset(0 round var(--fsl-card-radius));
}

.fourcore-shop-the-look[data-slider-center="0"]
  .fsl-slider
  .fsl-item.is-active {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--fsl-card-hover-shadow, var(--fsl-card-shadow-hover));
}

.fourcore-shop-the-look[data-slider-center="0"][data-slider-animation="ZOOM"]
  .fsl-slider
  .fsl-item.is-active {
  transform: translate3d(0, -4px, 0);
}

.fourcore-shop-the-look[data-slider-rotate="1"]
  .fsl-slider
  .fsl-item.is-before {
  transform: translate3d(8px, 12px, 0) rotate(-1.75deg);
}

.fourcore-shop-the-look[data-slider-rotate="1"] .fsl-slider .fsl-item.is-after {
  transform: translate3d(-8px, 12px, 0) rotate(1.75deg);
}

.fourcore-shop-the-look[data-slider-center="0"][data-slider-rotate="1"]
  .fsl-slider
  .fsl-item.is-before,
.fourcore-shop-the-look[data-slider-center="0"][data-slider-rotate="1"]
  .fsl-slider
  .fsl-item.is-after {
  transform: translate3d(0, 6px, 0);
}

.fourcore-shop-the-look[data-slider-animation="ZOOM"][data-slider-rotate="0"]
  .fsl-slider
  .fsl-item.is-before {
  transform: translate3d(10px, 8px, 0) scale(0.9);
}

.fourcore-shop-the-look[data-slider-animation="ZOOM"][data-slider-rotate="0"]
  .fsl-slider
  .fsl-item.is-after {
  transform: translate3d(-10px, 8px, 0) scale(0.9);
}

.fourcore-shop-the-look[data-slider-animation="STACK"][data-slider-rotate="0"]
  .fsl-slider
  .fsl-item.is-before {
  transform: translate3d(12px, 16px, 0) scale(0.9);
}

.fourcore-shop-the-look[data-slider-animation="STACK"][data-slider-rotate="0"]
  .fsl-slider
  .fsl-item.is-after {
  transform: translate3d(-12px, 16px, 0) scale(0.9);
}

.fourcore-shop-the-look[data-slider-animation="REVEAL"]
  .fsl-slider
  .fsl-item.is-before {
  transform: translate3d(14px, 0, 0) scale(0.93);
}

.fourcore-shop-the-look[data-slider-animation="REVEAL"]
  .fsl-slider
  .fsl-item.is-after {
  transform: translate3d(-14px, 0, 0) scale(0.93);
}

.fourcore-shop-the-look[data-slider-ticker="1"] .fsl-slider-viewport {
  padding: 16px 0 8px;
}

.fourcore-shop-the-look[data-slider-ticker="1"] .fsl-slider {
  transition: none !important;
  padding: 6px 0 10px;
}

.fourcore-shop-the-look[data-slider-ticker="1"] .fsl-slider .fsl-item,
.fourcore-shop-the-look[data-slider-ticker="1"]
  .fsl-slider
  .fsl-item.is-visible,
.fourcore-shop-the-look[data-slider-ticker="1"] .fsl-slider .fsl-item.is-active,
.fourcore-shop-the-look[data-slider-ticker="1"] .fsl-slider .fsl-item.is-before,
.fourcore-shop-the-look[data-slider-ticker="1"] .fsl-slider .fsl-item.is-after {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 round var(--fsl-card-radius));
  box-shadow: var(--fsl-card-shadow);
}

.fsl-masonry .fsl-item,
.fsl-inline .fsl-item {
  display: grid;
  grid-template-rows: auto;
  min-width: 0;
  min-height: 0;
  margin: 0 0 calc(var(--fsl-gap) + 4px);
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: var(--fsl-card-padding-top) var(--fsl-card-padding-right)
    var(--fsl-card-padding-bottom) var(--fsl-card-padding-left);
  gap: 0;
}

.fsl-masonry .fsl-item:last-child,
.fsl-inline .fsl-item:last-child {
  margin-bottom: 0;
}

.fsl-masonry .fsl-gallery,
.fsl-inline .fsl-gallery {
  height: 100%;
}

.fsl-masonry .fsl-thumb,
.fsl-inline .fsl-thumb {
  min-height: clamp(230px, 25vw, 340px);
  aspect-ratio: auto;
  border: var(--fsl-image-border-width) solid var(--fsl-image-border-color);
  border-radius: var(--fsl-image-radius);
  background: var(--fsl-media-bg);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

.fsl-masonry .fsl-item:nth-child(4n + 1) .fsl-thumb,
.fsl-inline .fsl-item:nth-child(4n + 1) .fsl-thumb {
  min-height: clamp(220px, 24vw, 320px);
}

.fsl-masonry .fsl-item:nth-child(4n + 2) .fsl-thumb,
.fsl-inline .fsl-item:nth-child(4n + 2) .fsl-thumb {
  min-height: clamp(320px, 34vw, 440px);
}

.fsl-masonry .fsl-item:nth-child(4n + 3) .fsl-thumb,
.fsl-inline .fsl-item:nth-child(4n + 3) .fsl-thumb {
  min-height: clamp(190px, 20vw, 260px);
}

.fsl-masonry .fsl-item:nth-child(4n + 4) .fsl-thumb,
.fsl-inline .fsl-item:nth-child(4n + 4) .fsl-thumb {
  min-height: clamp(280px, 30vw, 380px);
}

.fsl-masonry .fsl-thumb img,
.fsl-inline .fsl-thumb img {
  border-radius: inherit;
}

.fsl-masonry .fsl-info,
.fsl-inline .fsl-info {
  position: relative;
  z-index: 1;
  margin: -28px 16px 0;
  padding: 14px 14px 16px;
  gap: 10px;
  min-width: 0;
  height: auto;
  grid-template-rows: none;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: var(--fsl-card-radius);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96),
    rgba(248, 250, 252, 0.98)
  );
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.fsl-masonry .fsl-name,
.fsl-inline .fsl-name {
  -webkit-line-clamp: 2;
}
.fsl-masonry .fsl-add,
.fsl-inline .fsl-add {
  width: 100%;
  min-width: 0;
  border-radius: calc(var(--fsl-item-button-radius) + 6px);
  box-shadow: none;
}

.fsl-stacked .fsl-item {
  grid-template-columns: minmax(
      96px,
      min(var(--fsl-image-width, 120px), var(--fsl-stack-image-cap, 220px))
    ) minmax(0, 1fr);
  grid-template-rows: none;
  align-items: center;
  padding:
    calc(12px + var(--fsl-card-padding-top))
    calc(12px + var(--fsl-card-padding-right))
    calc(12px + var(--fsl-card-padding-bottom))
    calc(12px + var(--fsl-card-padding-left));
  gap: 14px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.99),
    rgba(248, 250, 252, 0.95)
  );
}

.fsl-stacked .fsl-thumb {
  width: 100%;
  max-width: min(100%, var(--fsl-stack-image-cap, 220px));
  min-height: 120px;
  aspect-ratio: 1 / 1;
  border-bottom: 0;
  border-right: var(--fsl-image-border-width) solid
    var(--fsl-image-border-color);
  justify-self: start;
}

.fsl-stacked .fsl-thumb img {
  width: var(--fsl-image-width, 100%);
  height: var(--fsl-image-height, 100%);
  max-width: 100%;
  max-height: 100%;
  object-fit: var(--fsl-image-fit, cover);
  margin: auto;
  padding: 8px;
  border-radius: var(--fsl-image-radius);
}

.fsl-stacked .fsl-gallery-nav {
  width: 26px;
  height: 26px;
  font-size: 18px;
}
.fsl-stacked .fsl-variant-label {
  display: none;
}

.fsl-stacked .fsl-info {
  padding: 2px 0 0;
  gap: 12px;
  width: min(100%, var(--fsl-stack-content-cap, 1200px));
  max-width: 100%;
  justify-self: start;
}

.fsl-stacked .fsl-add {
  width: 100%;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 14px;
}

.fsl-spotlight {
  display: grid;
  gap: var(--fsl-gap);
}

.fsl-split {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 20px;
  align-items: start;
}
.fsl-split.reverse {
  direction: rtl;
}
.fsl-split.reverse > * {
  direction: ltr;
}
.fsl-split-hero {
  min-width: 0;
  min-height: 100%;
  display: flex;
  align-items: stretch;
}
.fsl-split-hero img {
  width: 100%;
  min-height: 320px;
  aspect-ratio: 4 / 5;
  border-radius: var(--fsl-card-radius);
  object-fit: var(--fsl-image-fit, cover);
  background: var(--fsl-media-bg);
  border: var(--fsl-card-border-width) solid var(--fsl-card-border-color);
  padding: 0;
  box-shadow: none;
}
.fsl-split-list {
  display: grid;
  gap: var(--fsl-gap);
}
.fsl-split-list .fsl-item {
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  box-shadow: var(--fsl-card-shadow);
  border: 1px solid rgba(226, 232, 240, 0.96);
  padding:
    calc(12px + var(--fsl-card-padding-top))
    calc(12px + var(--fsl-card-padding-right))
    calc(12px + var(--fsl-card-padding-bottom))
    calc(12px + var(--fsl-card-padding-left));
  gap: 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.99),
    rgba(248, 250, 252, 0.94)
  );
}
.fsl-split-list .fsl-thumb {
  height: auto;
  min-height: 96px;
  aspect-ratio: 1 / 1;
}
.fsl-split-list .fsl-thumb img {
  padding: 0;
  border-radius: 0;
}
.fsl-split-list .fsl-variant-label {
  display: none;
}
.fsl-split-list .fsl-variant-option {
  min-height: max(24px, calc(var(--fsl-variant-pill-height) - 6px));
  font-size: max(10px, calc(var(--fsl-variant-pill-font-size) - 1px));
}
.fsl-split-list .fsl-variant-option--chip {
  min-height: max(20px, calc(var(--fsl-variant-chip-height) - 2px));
}
.fsl-split-list .fsl-variant-swatch {
  width: max(20px, calc(var(--fsl-variant-swatch-core-size) + 2px));
  height: max(20px, calc(var(--fsl-variant-swatch-core-size) + 2px));
}
.fsl-split-list .fsl-variant-swatch-core {
  width: max(16px, calc(var(--fsl-variant-swatch-core-size) - 4px));
  height: max(16px, calc(var(--fsl-variant-swatch-core-size) - 4px));
}
.fsl-split-list .fsl-info {
  padding: 2px 0 0;
  gap: 12px;
}
.fsl-split-list .fsl-add {
  width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
}

.fsl-layout-surface--hero {
  padding: clamp(14px, 2.2vw, 22px);
}

.fsl-hero-shell {
  display: grid;
  grid-template-columns: minmax(340px, 1.3fr) minmax(280px, 0.95fr);
  gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}

.fsl-hero-shell.reverse {
  direction: rtl;
}

.fsl-hero-shell.reverse > * {
  direction: ltr;
}

.fsl-hero-primary,
.fsl-hero-sidebar {
  min-width: 0;
}

.fsl-hero-primary .fsl-item {
  border-radius: var(--fsl-card-radius);
  border-color: var(--fsl-border-color);
  background: var(--fsl-card-bg);
  box-shadow: none;
  padding:
    calc(clamp(16px, 2vw, 22px) + var(--fsl-card-padding-top))
    calc(clamp(16px, 2vw, 22px) + var(--fsl-card-padding-right))
    calc(clamp(16px, 2vw, 22px) + var(--fsl-card-padding-bottom))
    calc(clamp(16px, 2vw, 22px) + var(--fsl-card-padding-left));
  gap: 18px;
}

.fsl-hero-primary .fsl-thumb {
  min-height: clamp(300px, 34vw, 560px);
  aspect-ratio: 4 / 4.2;
  border-radius: var(--fsl-card-radius);
  border-bottom: 0;
  padding: 0;
  background: var(--fsl-media-bg);
}

.fsl-hero-primary .fsl-thumb img {
  padding: 0;
  object-fit: var(--fsl-image-fit, cover);
}

.fsl-hero-primary .fsl-info {
  padding: 0;
  gap: 12px 18px;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  align-items: end;
}

.fsl-hero-primary .fsl-name {
  grid-column: 1 / -1;
  font-size: clamp(
    calc(var(--fsl-product-title-size) * 1.4),
    2.6vw,
    calc(var(--fsl-product-title-size) * 2.15)
  );
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.fsl-hero-primary .fsl-price {
  grid-column: 1 / 2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.fsl-hero-primary .fsl-current {
  font-size: 1.9em;
  line-height: 1;
  font-weight: inherit;
  color: var(--fsl-price-color);
}

.fsl-hero-primary .fsl-compare {
  font-size: 1.1em;
}

.fsl-hero-primary .fsl-variant-wrap {
  grid-column: 1 / 2;
}

.fsl-hero-primary .fsl-add {
  grid-column: 2 / 3;
  grid-row: 2 / span 2;
}

.fsl-hero-sidebar {
  display: grid;
  gap: 16px;
}

.fsl-hero-sidebar-head {
  display: grid;
  gap: 6px;
  padding-inline: 2px;
}

.fsl-hero-sidebar-title {
  margin: 0;
  font-size: clamp(26px, 2.4vw, 42px);
  line-height: 1.06;
  font-weight: var(--fsl-heading-font-weight, 700);
  letter-spacing: -0.03em;
  color: var(--fsl-heading-color);
}

.fsl-hero-sidebar-head .fsl-template-desc {
  margin-top: 0;
  max-width: none;
}

.fsl-hero-sidebar-list {
  display: grid;
  gap: 14px;
}

.fsl-hero-sidebar-list-mobile {
  display: none;
}

.fsl-hero-sidebar-list .fsl-item {
  grid-template-columns: 108px minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  gap: 14px;
  padding:
    calc(12px + var(--fsl-card-padding-top))
    calc(12px + var(--fsl-card-padding-right))
    calc(12px + var(--fsl-card-padding-bottom))
    calc(12px + var(--fsl-card-padding-left));
  border-radius: var(--fsl-card-radius);
  box-shadow: none;
}

.fsl-hero-sidebar-list .fsl-thumb {
  min-height: 108px;
  aspect-ratio: 1 / 1;
  border-radius: var(--fsl-card-radius);
  border-bottom: 0;
  padding: 0;
  background: var(--fsl-media-bg);
}

.fsl-hero-sidebar-list .fsl-thumb img {
  padding: 0;
}

.fsl-hero-sidebar-list .fsl-info {
  padding: 0;
  gap: 8px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.fsl-hero-sidebar-list .fsl-name,
.fsl-hero-sidebar-list .fsl-price,
.fsl-hero-sidebar-list .fsl-variant-wrap {
  grid-column: 1 / 2;
}

.fsl-hero-sidebar-list .fsl-name {
  -webkit-line-clamp: 2;
}

.fsl-hero-sidebar-list .fsl-variant-label {
  display: none;
}

.fsl-hero-sidebar-list .fsl-variant-picker,
.fsl-hero-sidebar-list .fsl-variant-options {
  max-width: 100%;
}

.fsl-hero-sidebar-list .fsl-add {
  /* By default the Add-to-cart button rides the SAME ROW as the variant
     picker (row 3), so the button visually sits next to the variant
     options instead of vertically centering across the whole card. The
     merchant can still override via the customizer if they want the
     button to span all three rows. */
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  align-self: center;
  justify-self: end;
}

.fsl-hero-bundle {
  /* Width-constrained + wrap-allowed so the bundle bar never spills
     out of the .fsl-hero-sidebar column. Earlier the flex row had
     fixed gap+content that could exceed the sidebar's intrinsic
     width on narrow canvases — the button overflowed RIGHT into
     the secondary card above, looking like it was overlapping. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 16px 18px;
  border-radius: var(--fsl-card-radius);
  border: 2px dashed var(--fsl-accent);
  background: var(--fsl-widget-bg);
  position: relative;
  z-index: 1;
}

.fsl-hero-bundle-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.fsl-hero-bundle-copy strong {
  font-size: 1.02em;
  line-height: 1.2;
  font-weight: 800;
}

.fsl-hero-bundle-copy span {
  color: var(--fsl-price-color, #64748b);
  font-size: 0.9em;
  line-height: 1.35;
}

.fsl-price-stack {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.fsl-hero-bundle .fsl-add-all {
  /* min-width capped at 100% so on narrow canvases the button
     respects its parent and never forces horizontal overflow.
     Visual properties (height, radius, font) come from the
     customizer's --fsl-add-all-button-* variables. */
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}

/* Wide hero columns still want the button at a sensible 200px+
   minimum so it reads as the primary CTA rather than a tiny chip. */
@media (min-width: 720px) {
  .fsl-hero-bundle .fsl-add-all {
    flex: 0 1 auto;
    min-width: 200px;
  }
}

.fsl-layout-surface--spotlight {
  padding: clamp(14px, 2.2vw, 22px);
}

.fsl-spotlight-shell {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}

.fsl-spotlight-stage,
.fsl-spotlight-panel {
  min-width: 0;
}

.fsl-spotlight-trigger {
  border-radius: var(--fsl-card-radius);
  overflow: hidden;
  border: var(--fsl-card-border-width) solid var(--fsl-card-border-color);
  background: linear-gradient(
    180deg,
    rgba(238, 231, 224, 0.96),
    rgba(222, 215, 207, 0.96)
  );
  box-shadow: none;
}

.fsl-spotlight-trigger img {
  width: 100%;
  height: clamp(360px, 48vw, 760px);
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.fsl-spotlight-panel {
  display: grid;
  gap: 14px;
  align-content: start;
}

.fsl-spotlight-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.fsl-spotlight-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.fsl-spotlight-title {
  margin: 0;
  font-size: clamp(26px, 2.4vw, 42px);
  line-height: 1.06;
  font-weight: var(--fsl-heading-font-weight, 700);
  letter-spacing: -0.03em;
  color: var(--fsl-heading-color);
}

.fsl-spotlight-copy .fsl-template-desc {
  margin-top: 0;
  max-width: none;
}

.fsl-spotlight-head .fsl-add-all {
  width: auto;
  min-width: max-content;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: clamp(0.78em, 1.2vw, var(--fsl-add-all-button-font-size, 0.92em));
}

.fsl-spotlight-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 112px));
  gap: 10px;
  justify-content: start;
  align-items: start;
}

.fsl-spotlight-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1.08;
  padding: 0;
  margin: 0;
  border-radius: calc(var(--fsl-card-radius) - 2px);
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(255, 255, 255, 0.96);
  overflow: hidden;
  cursor: pointer;
  box-shadow: none;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.fsl-spotlight-thumb:hover {
  transform: translateY(-1px);
}

.fsl-spotlight-thumb.is-active {
  border-color: var(--fsl-accent);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}

.fsl-spotlight-thumb:focus-visible {
  outline: 2px solid rgba(15, 23, 42, 0.32);
  outline-offset: 3px;
}

.fsl-spotlight-thumb .fsl-product-image,
.fsl-spotlight-thumb .fsl-thumb-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.fsl-spotlight-detail {
  display: none;
}

.fsl-spotlight-detail.is-active {
  display: block;
}

.fsl-spotlight-detail .fsl-item {
  grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1.35fr);
  grid-template-rows: none;
  min-height: clamp(120px, 14vw, 210px);
}

.fsl-spotlight-detail .fsl-thumb {
  min-height: 100%;
  aspect-ratio: auto;
  width: min(100%, 150px);
  max-width: 150px;
  justify-self: start;
  border-bottom: 0;
  border-right: var(--fsl-image-border-width) solid
    var(--fsl-image-border-color);
  background: linear-gradient(
    180deg,
    rgba(240, 234, 228, 0.94),
    rgba(233, 228, 222, 0.94)
  );
}

.fsl-spotlight-detail .fsl-thumb > .fsl-gallery,
.fsl-spotlight-detail .fsl-thumb > .fsl-product-link--media,
.fsl-spotlight-detail .fsl-thumb > .fsl-gallery > .fsl-product-link--media,
.fsl-spotlight-detail .fsl-thumb a,
.fsl-spotlight-detail .fsl-thumb picture {
  width: 100%;
  max-width: 100%;
}

.fsl-spotlight-detail .fsl-thumb > .fsl-gallery,
.fsl-spotlight-detail .fsl-thumb > .fsl-product-link--media,
.fsl-spotlight-detail .fsl-thumb > .fsl-gallery > .fsl-product-link--media,
.fsl-spotlight-detail .fsl-thumb a,
.fsl-spotlight-detail .fsl-thumb picture {
  height: 100%;
}

.fsl-spotlight-detail .fsl-thumb img {
  width: var(--fsl-image-width, 100%);
  height: var(--fsl-image-height, 100%);
  max-width: 100%;
  max-height: 100%;
  object-fit: var(--fsl-image-fit, cover);
  margin: auto;
  border-radius: var(--fsl-image-radius);
}

.fsl-spotlight-detail .fsl-info {
  padding: clamp(10px, 1.2vw, 14px);
  gap: 8px;
  grid-template-rows: auto;
  height: auto;
  align-content: start;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(248, 250, 252, 0.98)
  );
}

.fsl-spotlight-detail .fsl-name {
  font-size: clamp(
    calc(var(--fsl-product-title-size) * 1.25),
    2.2vw,
    calc(var(--fsl-product-title-size) * 1.75)
  );
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.fsl-spotlight-detail .fsl-price {
  display: flex;
  align-items: baseline;
  align-self: start;
  gap: 10px;
  flex-wrap: wrap;
}

.fsl-spotlight-detail .fsl-current {
  font-size: 1.7em;
  line-height: 1;
  font-weight: inherit;
}

.fsl-spotlight-detail .fsl-add {
  width: 100%;
  min-height: 42px;
  margin-top: 0;
}

.fsl-spotlight-empty {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 20px;
  border: 1px dashed rgba(148, 163, 184, 0.48);
  border-radius: var(--fsl-card-radius);
  color: #64748b;
  background: rgba(248, 250, 252, 0.88);
  text-align: center;
}

.fsl-product-image {
  border-radius: var(--fsl-image-radius);
  object-fit: var(--fsl-image-fit, cover);
  /* Border driven by the customizer's Product Image > Border Width /
     Color controls. Without this declaration the CSS variables were
     defined on the host but nothing consumed them on the actual <img>,
     so the merchant's border setting had no visible effect on the
     storefront. */
  border: var(--fsl-image-border-width) solid var(--fsl-image-border-color);
}

.fsl-skeleton {
  display: flex;
  gap: 12px;
  background: var(--fsl-card-bg);
  padding: 14px;
  border-radius: var(--fsl-card-radius);
  border: 1px solid var(--fsl-border-color);
}

.fsl-skeleton-thumb {
  width: 96px;
  height: 96px;
  background: linear-gradient(90deg, #e2e8f0, #f1f5f9, #e2e8f0);
  animation: fsl-shimmer 1.4s infinite;
  border-radius: 10px;
}

.fsl-skeleton-lines {
  flex: 1;
}
.fsl-skeleton-lines div {
  height: 12px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #e2e8f0, #f1f5f9, #e2e8f0);
  animation: fsl-shimmer 1.4s infinite;
  border-radius: 8px;
}

.fsl-empty,
.fsl-error {
  padding: 12px;
  background: var(--fsl-control-bg);
  border-radius: var(--fsl-card-radius);
  color: var(--fsl-price-color, #475569);
  border: 1px dashed var(--fsl-border-color);
  text-align: center;
}

/* Theme-editor-only placeholder. Renders ONLY when the page is being
   previewed in Shopify's design mode AND no look is configured for
   the product. Live storefront never shows this — the widget
   collapses to display:none instead. */
.fsl-editor-placeholder {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1.5px dashed #cbd5e1;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  color: #334155;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  box-sizing: border-box;
}

.fsl-editor-placeholder-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
}

.fsl-editor-placeholder-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.fsl-editor-placeholder-copy strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.fsl-editor-placeholder-copy p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #64748b;
}

.fsl-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: var(--fsl-summary-size);
  line-height: 1.3;
  font-weight: var(--fsl-summary-weight);
  font-style: var(--fsl-summary-style);
  text-decoration: var(--fsl-summary-decoration);
}

.fourcore-shop-the-look.fsl-force-important .fsl-summary {
  font-size: var(--fsl-summary-size) !important;
}

.fsl-summary:empty {
  display: none;
}

.fsl-summary-count {
  color: var(--fsl-summary-count-color);
}

.fsl-summary-total {
  color: var(--fsl-summary-total-color);
  font-weight: var(--fsl-summary-weight);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Bundle total placement. The widget renders inside a shadow root, so the popup
   widget is the shadow HOST — scope with :host(...), not a descendant selector.
   - Default (inline widget, e.g. desktop product page): footer below the items.
   - Popup on desktop/tablet: total under the look title.
   - Popup on mobile (<=640px): total above the "Add all to cart" button. */
.fsl-summary--inline,
.fsl-summary--heading {
  display: none;
}
:host(.fsl-trigger-modal-widget) .fsl-summary--heading {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 8px;
}
:host(.fsl-trigger-modal-widget) .fsl-summary--footer {
  display: none;
}
@media (max-width: 640px) {
  :host(.fsl-trigger-modal-widget) .fsl-summary--heading {
    display: none;
  }
  :host(.fsl-trigger-modal-widget) .fsl-summary--inline {
    display: flex;
    margin-top: 0;
    margin-bottom: 10px;
  }
  :host(.fsl-trigger-modal-widget) .fsl-heading-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}

.fsl-toast-stack {
  position: fixed;
  z-index: 2147483647;
  display: grid;
  gap: 10px;
  max-width: min(420px, calc(100vw - 24px));
  pointer-events: none;
  /* Default = bottom-right. Position is overridden via data-position
     attribute set by JS from componentStyles.toastPosition. */
  right: 16px;
  bottom: 16px;
}
.fsl-toast-stack[data-position="TOP_LEFT"] {
  top: 16px;
  left: 16px;
  right: auto;
  bottom: auto;
}
.fsl-toast-stack[data-position="TOP_CENTER"] {
  top: 16px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
}
.fsl-toast-stack[data-position="TOP_RIGHT"] {
  top: 16px;
  right: 16px;
  left: auto;
  bottom: auto;
}
.fsl-toast-stack[data-position="BOTTOM_LEFT"] {
  bottom: 16px;
  left: 16px;
  right: auto;
  top: auto;
}
.fsl-toast-stack[data-position="BOTTOM_CENTER"] {
  bottom: 16px;
  left: 50%;
  right: auto;
  top: auto;
  transform: translateX(-50%);
}
.fsl-toast-stack[data-position="BOTTOM_RIGHT"] {
  bottom: 16px;
  right: 16px;
  left: auto;
  top: auto;
}

.fsl-toast {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: var(--fsl-toast-radius, 12px);
  border: 1px solid var(--fsl-toast-border, transparent);
  color: var(--fsl-toast-text, #0f172a);
  background: var(--fsl-toast-bg, #fff);
  box-shadow: var(--fsl-toast-shadow, none);
  pointer-events: auto;
  animation: fsl-toast-in 160ms ease-out;
}

.fsl-toast--success {
  border-color: var(
    --fsl-toast-border,
    var(--fsl-toast-success-accent, #86efac)
  );
  background: var(--fsl-toast-bg, #f0fdf4);
}

.fsl-toast--warning {
  border-color: var(
    --fsl-toast-border,
    var(--fsl-toast-warning-accent, #fcd34d)
  );
  background: var(--fsl-toast-bg, #fffbeb);
}

.fsl-toast--error {
  border-color: var(
    --fsl-toast-border,
    var(--fsl-toast-error-accent, #fecaca)
  );
  background: var(--fsl-toast-bg, #fef2f2);
}

.fsl-toast-text {
  font-size: 0.95em;
  line-height: 1.35;
}

.fsl-toast-close {
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.fsl-toast-leave {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.fourcore-shop-the-look .fsl-layout-surface,
.fourcore-shop-the-look .fsl-layout-surface--slider {
  background: var(--fsl-widget-bg);
  border-color: var(--fsl-container-border-color);
  border-width: var(--fsl-container-border-width);
  border-radius: var(--fsl-container-radius);
  box-shadow: none;
}

.fourcore-shop-the-look .fsl-slider-stage,
.fourcore-shop-the-look .fsl-hotspot-stage,
.fourcore-shop-the-look .fsl-hotspot-canvas,
.fourcore-shop-the-look .fsl-hero-bundle,
.fourcore-shop-the-look .fsl-empty,
.fourcore-shop-the-look .fsl-error {
  background: var(--fsl-widget-bg);
  border-color: var(--fsl-container-border-color);
  border-width: var(--fsl-container-border-width);
  border-radius: var(--fsl-container-radius);
  box-shadow: none;
}

.fourcore-shop-the-look .fsl-item,
.fourcore-shop-the-look .fsl-hotspot-detail .fsl-item,
.fourcore-shop-the-look .fsl-masonry .fsl-item,
.fourcore-shop-the-look .fsl-inline .fsl-item,
.fourcore-shop-the-look .fsl-stacked .fsl-item,
.fourcore-shop-the-look .fsl-split-list .fsl-item,
.fourcore-shop-the-look .fsl-hero-primary .fsl-item,
.fourcore-shop-the-look .fsl-hero-sidebar-list .fsl-item {
  background: var(--fsl-card-bg);
  border-color: var(--fsl-card-border-color);
  border-width: var(--fsl-card-border-width);
  border-radius: var(--fsl-card-radius);
  box-shadow: var(--fsl-card-shadow);
}

.fourcore-shop-the-look .fsl-thumb,
.fourcore-shop-the-look .fsl-hotspot-canvas,
.fourcore-shop-the-look .fsl-hotspot-detail .fsl-thumb,
.fourcore-shop-the-look .fsl-masonry .fsl-thumb,
.fourcore-shop-the-look .fsl-inline .fsl-thumb,
.fourcore-shop-the-look .fsl-stacked .fsl-thumb,
.fourcore-shop-the-look .fsl-split-list .fsl-thumb,
.fourcore-shop-the-look .fsl-hero-primary .fsl-thumb,
.fourcore-shop-the-look .fsl-hero-sidebar-list .fsl-thumb,
.fourcore-shop-the-look .fsl-thumb img,
.fourcore-shop-the-look .fsl-hotspot-stage img {
  background: transparent;
  border-color: var(--fsl-image-border-color);
}

.fourcore-shop-the-look .fsl-hotspot-stage,
.fourcore-shop-the-look .fsl-hotspot-canvas,
.fourcore-shop-the-look .fsl-thumb,
.fourcore-shop-the-look .fsl-hotspot-detail .fsl-thumb,
.fourcore-shop-the-look .fsl-masonry .fsl-thumb,
.fourcore-shop-the-look .fsl-inline .fsl-thumb,
.fourcore-shop-the-look .fsl-stacked .fsl-thumb,
.fourcore-shop-the-look .fsl-split-list .fsl-thumb,
.fourcore-shop-the-look .fsl-hero-primary .fsl-thumb,
.fourcore-shop-the-look .fsl-hero-sidebar-list .fsl-thumb {
  background: transparent;
  padding: 0;
}

.fourcore-shop-the-look .fsl-thumb img,
.fourcore-shop-the-look .fsl-hotspot-detail .fsl-thumb img,
.fourcore-shop-the-look .fsl-stacked .fsl-thumb img,
.fourcore-shop-the-look .fsl-split-list .fsl-thumb img,
.fourcore-shop-the-look .fsl-hero-primary .fsl-thumb img,
.fourcore-shop-the-look .fsl-hero-sidebar-list .fsl-thumb img,
.fourcore-shop-the-look .fsl-split-hero img,
.fourcore-shop-the-look .fsl-hotspot-stage img {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.fourcore-shop-the-look .fsl-info,
.fourcore-shop-the-look .fsl-hotspot-detail .fsl-info,
.fourcore-shop-the-look .fsl-masonry .fsl-info,
.fourcore-shop-the-look .fsl-inline .fsl-info,
.fourcore-shop-the-look .fsl-stacked .fsl-info,
.fourcore-shop-the-look .fsl-split-list .fsl-info,
.fourcore-shop-the-look .fsl-hero-primary .fsl-info,
.fourcore-shop-the-look .fsl-hero-sidebar-list .fsl-info {
  background: transparent;
}

.fourcore-shop-the-look .fsl-masonry .fsl-item,
.fourcore-shop-the-look .fsl-inline .fsl-item {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.fourcore-shop-the-look .fsl-masonry .fsl-thumb,
.fourcore-shop-the-look .fsl-inline .fsl-thumb {
  background: var(--fsl-media-bg);
  border: var(--fsl-image-border-width) solid var(--fsl-image-border-color);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

.fourcore-shop-the-look .fsl-masonry .fsl-thumb img,
.fourcore-shop-the-look .fsl-inline .fsl-thumb img {
  border-radius: inherit;
}

.fourcore-shop-the-look .fsl-masonry .fsl-info,
.fourcore-shop-the-look .fsl-inline .fsl-info {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96),
    rgba(248, 250, 252, 0.98)
  );
  border: 1px solid rgba(226, 232, 240, 0.92);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.fourcore-shop-the-look .fsl-variant-picker,
.fourcore-shop-the-look .fsl-variant-option:not(.is-selected),
.fourcore-shop-the-look .fsl-gallery-nav,
.fourcore-shop-the-look .fsl-gallery-dots,
.fourcore-shop-the-look .fsl-nav {
  /* background-color (not the shorthand) so .fsl-variant-picker keeps
     its inline SVG chevron from the base rule. */
  background-color: var(--fsl-control-bg);
  border-color: var(--fsl-border-color);
}

.fsl-overlay-trigger-layer {
  box-sizing: border-box;
}

.fsl-overlay-trigger {
  position: relative;
  inset: auto;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  max-width: min(100%, 240px);
  padding: 8px 14px;
  border: 1px solid var(--fsl-trigger-border, rgba(255, 255, 255, 0.42));
  border-radius: var(--fsl-trigger-radius, 999px);
  background: var(--fsl-trigger-bg, rgba(15, 23, 42, 0.88));
  color: var(--fsl-trigger-fg, #ffffff);
  font: inherit;
  font-size: 0.82em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 160ms ease,
    background 160ms ease;
}

.fsl-overlay-trigger[data-fsl-trigger-style="GLASS"] {
  background: var(--fsl-trigger-bg-glass, rgba(15, 23, 42, 0.7));
  border-color: var(--fsl-trigger-border-strong, rgba(255, 255, 255, 0.46));
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.fsl-overlay-trigger[data-fsl-trigger-style="OUTLINE"] {
  background: var(--fsl-trigger-outline-bg, rgba(15, 23, 42, 0.08));
  border-color: var(--fsl-trigger-border-strong, rgba(255, 255, 255, 0.46));
  box-shadow: none;
}

.fsl-overlay-trigger[data-fsl-trigger-style="SOFT"] {
  box-shadow: none;
}

.fsl-overlay-trigger[data-fsl-trigger-style="TAG"] {
  min-height: 34px;
  padding: 8px 14px;
  font-size: 0.72em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fsl-overlay-trigger:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

.fsl-trigger-modal-root {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.fsl-trigger-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.fsl-trigger-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  scrollbar-gutter: stable both-edges;
  border: 1px solid #dbe1ed;
  border-radius: 26px;
  background: #ffffff;
  box-shadow: none;
  padding: 22px 22px 32px;
}

.fsl-trigger-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 1px solid #dbe1ed;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: none;
}

.fsl-trigger-modal-widget {
  width: 100%;
  padding-top: 22px;
  padding-bottom: 18px;
}

.fsl-trigger-modal-widget .fsl-heading-row {
  padding-right: 54px;
}

@keyframes fsl-shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

@keyframes fsl-toast-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .fourcore-shop-the-look {
    --fsl-stack-image-cap: var(--fsl-stack-image-cap-tablet, 120px);
    --fsl-stack-content-cap: var(--fsl-stack-content-cap-tablet, 960px);
  }

  .fsl-grid {
    grid-template-columns: repeat(var(--fsl-grid-cols-tablet), minmax(0, 1fr));
  }

  .fsl-trigger-modal-root {
    padding: 16px;
  }

  .fsl-trigger-modal-panel {
    padding: 18px;
  }

  .fsl-trigger-modal-close {
    top: 14px;
    right: 12px;
  }

  .fsl-trigger-modal-widget .fsl-heading-row {
    padding-right: 0;
  }

  .fsl-hero-shell {
    grid-template-columns: 1fr;
  }

  .fsl-spotlight-shell {
    grid-template-columns: 1fr;
  }

  .fsl-spotlight-trigger img {
    height: clamp(320px, 72vw, 540px);
  }

  .fsl-spotlight-detail .fsl-item {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .fsl-spotlight-detail .fsl-thumb {
    display: none;
  }

  .fsl-carousel {
    grid-auto-columns: minmax(220px, 72vw);
  }

  .fsl-masonry,
  .fsl-inline {
    column-width: clamp(180px, 42vw, 240px);
  }

  .fsl-slider-viewport {
    padding-inline: 36px;
  }

  .fsl-split {
    grid-template-columns: 1fr;
  }

  .fsl-hotspot {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 0.92fr);
    gap: 14px;
  }

  .fsl-hotspot-stage {
    padding: 0;
  }

  .fsl-hotspot-detail .fsl-item {
    grid-template-columns: minmax(76px, 96px) minmax(0, 1fr);
  }

  .fsl-split-hero img {
    min-height: 300px;
  }

  .fsl-stacked .fsl-item {
    grid-template-columns: minmax(
        96px,
        min(var(--fsl-image-width, 120px), var(--fsl-stack-image-cap, 120px))
      ) minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .fourcore-shop-the-look {
    --fsl-stack-image-cap: var(--fsl-stack-image-cap-mobile, 640px);
    --fsl-stack-content-cap: var(--fsl-stack-content-cap-mobile, 640px);
  }

  .fsl-heading-row {
    align-items: stretch;
  }

  .fsl-overlay-trigger {
    min-height: 34px;
    max-width: min(100%, 220px);
    padding: 8px 12px;
    font-size: 0.76em;
  }

  .fsl-trigger-modal-root {
    padding: 10px;
  }

  .fsl-trigger-modal-panel {
    max-height: calc(100vh - 20px);
    padding: 16px;
    border-radius: 20px;
  }

  .fsl-trigger-modal-widget {
    padding-top: 20px;
  }

  .fsl-heading-actions {
    width: 100%;
  }

  .fsl-heading-actions .fsl-add-all {
    width: 100%;
  }

  .fsl-layout-surface {
    padding: var(--fsl-layout-surface-padding);
  }

  .fsl-grid {
    grid-template-columns: repeat(var(--fsl-grid-cols-mobile), minmax(0, 1fr));
  }

  .fsl-hero-primary {
    display: none;
  }

  .fsl-hero-sidebar-list:not(.fsl-hero-sidebar-list-mobile) {
    display: none;
  }

  .fsl-hero-sidebar-list-mobile {
    /* Horizontal carousel on mobile: items scroll left/right in one row
       instead of stacking, with the Add-all bar appearing below.
       overflow-y must be hidden (not visible) — when paired with
       overflow-x:auto, browsers promote visible to auto and a stray
       vertical scrollbar appears for any sub-pixel content overflow. */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .fsl-hero-sidebar-list-mobile .fsl-item {
    flex: 0 0 160px;
    width: 160px;
    min-width: 160px;
    scroll-snap-align: start;
  }

  .fsl-hero-sidebar-list-mobile .fsl-thumb {
    min-height: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .fsl-hero-sidebar-list-mobile .fsl-info {
    padding: 4px 0 0;
    gap: 6px;
  }

  .fsl-hero-primary .fsl-info,
  .fsl-hero-sidebar-list .fsl-info {
    grid-template-columns: 1fr;
  }

  .fsl-spotlight-head {
    flex-direction: column;
  }

  .fsl-spotlight-head .fsl-add-all {
    width: 100%;
    white-space: nowrap;
    font-size: clamp(0.74em, 2.8vw, 0.9em);
  }

  .fsl-spotlight-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fsl-spotlight-detail .fsl-info {
    padding: 18px;
  }

  .fsl-hero-primary .fsl-add,
  .fsl-hero-sidebar-list .fsl-add {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
  }

  .fsl-hero-sidebar-list .fsl-item {
    grid-template-columns: 1fr;
  }

  .fsl-spotlight-detail .fsl-name {
    font-size: clamp(
      calc(var(--fsl-product-title-size) * 1.15),
      7vw,
      calc(var(--fsl-product-title-size) * 1.4)
    );
  }

  .fsl-hero-sidebar-list .fsl-thumb {
    min-height: 180px;
  }

  .fsl-hero-bundle {
    flex-direction: column;
    align-items: stretch;
  }

  .fsl-carousel {
    grid-auto-columns: minmax(220px, 88%);
  }

  .fsl-slider-viewport {
    padding-inline: 14px;
  }

  .fsl-slider-stage .fsl-nav {
    width: max(28px, calc(var(--fsl-nav-size) - 4px));
    height: max(28px, calc(var(--fsl-nav-size) - 4px));
  }

  .fsl-slider-dot.is-active {
    width: max(
      var(--fsl-nav-dot-size),
      calc(var(--fsl-nav-dot-active-width) - 4px)
    );
  }

  .fsl-item,
  .fsl-stacked .fsl-item,
  .fsl-split-list .fsl-item {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    padding:
      calc(12px + var(--fsl-card-padding-top))
      calc(12px + var(--fsl-card-padding-right))
      calc(12px + var(--fsl-card-padding-bottom))
      calc(12px + var(--fsl-card-padding-left));
    gap: 12px;
  }

  .fsl-grid .fsl-thumb {
    min-height: min(220px, 44vw);
  }

  .fsl-masonry .fsl-thumb,
  .fsl-inline .fsl-thumb,
  .fsl-stacked .fsl-thumb,
  .fsl-split-list .fsl-thumb {
    min-height: clamp(220px, 72vw, 360px);
  }

  .fsl-info,
  .fsl-stacked .fsl-info,
  .fsl-split-list .fsl-info {
    padding: 0;
  }

  .fsl-masonry,
  .fsl-inline {
    column-width: 100%;
  }

  .fsl-masonry .fsl-item,
  .fsl-inline .fsl-item {
    padding: var(--fsl-card-padding-top) var(--fsl-card-padding-right)
      var(--fsl-card-padding-bottom) var(--fsl-card-padding-left);
    gap: 0;
  }

  .fsl-masonry .fsl-info,
  .fsl-inline .fsl-info {
    margin: -24px 12px 0;
    padding: 13px 12px 14px;
  }

  .fsl-masonry .fsl-add,
  .fsl-inline .fsl-add,
  .fsl-stacked .fsl-add {
    width: 100%;
    min-width: 0;
  }

  .fsl-hotspot {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .fsl-hotspot-stage {
    padding: 0;
    width: 100%;
  }

  .fsl-hotspot-panel {
    width: 100%;
    padding-right: 0;
  }

  .fsl-hotspot-dot {
    width: 24px;
    height: 24px;
    border-width: 2px;
    font-size: 10px;
  }

  .fsl-hotspot-dot::after {
    inset: -6px;
  }

  .fsl-hotspot-detail .fsl-item {
    width: 100%;
    grid-template-columns: minmax(88px, 112px) minmax(0, 1fr);
  }

  .fsl-hotspot-detail .fsl-thumb img {
    padding: 0;
  }

  .fsl-hotspot-detail .fsl-info {
    padding: 10px;
    gap: 8px;
  }

  .fsl-hotspot-detail .fsl-add {
    min-height: 36px;
    padding: 8px 12px;
  }

  .fsl-split-hero img {
    min-height: 260px;
  }

  .fsl-add {
    min-height: max(40px, var(--fsl-item-button-height, 40px));
    width: 100%;
  }

  .fsl-add-all {
    min-height: max(40px, var(--fsl-add-all-button-height, 40px));
    width: 100%;
  }
}

.fourcore-look-book {
  width: 100%;
  /* The width cap lives on the inner .fsl-lookbook-shell, which reads the
     merchant's "Container max width" via width: min(100%, var(--fsl-lookbook-
     shell-max-width)). Hard-capping the outer wrapper at 1240px here clamped
     the shell's 100% to 1240 and ignored the setting (e.g. 2000 stayed 1240).
     Leave the wrapper uncapped so the shell controls the width. */
  max-width: none;
  margin-inline: auto;
  color: #0f172a;
}

.fsl-lookbook-shell {
  --fsl-lookbook-accent: #5f6ceb;
  --fsl-lookbook-bg: #ffffff;
  --fsl-lookbook-text: #0f172a;
  --fsl-lookbook-shell-max-width: 1240px;
  --fsl-lookbook-card-style: soft;
  --fsl-lookbook-shell-radius: 28px;
  --fsl-lookbook-card-radius: 20px;
  --fsl-lookbook-shell-bg: transparent;
  --fsl-lookbook-shell-shadow: none;
  --fsl-lookbook-shell-border-width: 0px;
  --fsl-lookbook-card-bg: transparent;
  --fsl-lookbook-card-border-width: 0px;
  --fsl-lookbook-showcase-bg: transparent;
  --fsl-lookbook-card-shadow: none;
  --fsl-lookbook-card-shadow-strong: none;
  --fsl-lookbook-grid-gap: 14px;
  --fsl-lookbook-card-padding: 15px;
  --fsl-lookbook-media-bg: linear-gradient(
    145deg,
    rgba(241, 245, 249, 0.96),
    rgba(226, 232, 240, 0.9)
  );
  --fsl-lookbook-media-radius: 16px;
  --fsl-lookbook-media-fit: cover;
  --fsl-lookbook-showcase-media-fit: contain;
  --fsl-lookbook-mosaic-media-fit: cover;
  --fsl-lookbook-media-scale: 1;
  --fsl-lookbook-card-title-color: var(--fsl-lookbook-text);
  --fsl-lookbook-card-title-size: 18px;
  --fsl-lookbook-card-title-lines: 3;
  --fsl-lookbook-card-kicker-color: #64748b;
  --fsl-lookbook-card-kicker-size: 10px;
  --fsl-lookbook-card-description-color: #64748b;
  --fsl-lookbook-card-description-size: 13px;
  --fsl-lookbook-price-color: color-mix(
    in srgb,
    var(--fsl-lookbook-text) 72%,
    #64748b
  );
  --fsl-lookbook-price-size: 17px;
  --fsl-lookbook-price-chip-color: #475569;
  --fsl-lookbook-price-chip-size: 10px;
  --fsl-lookbook-price-chip-bg: #f1f5f9;
  --fsl-lookbook-price-chip-radius: 999px;
  --fsl-lookbook-price-chip-border-width: 0px;
  --fsl-lookbook-price-chip-border-color: #cbd5e1;
  --fsl-lookbook-cta-bg: var(--fsl-lookbook-accent);
  --fsl-lookbook-cta-text: #ffffff;
  --fsl-lookbook-cta-radius: 12px;
  --fsl-lookbook-cta-border-width: 1px;
  --fsl-lookbook-cta-font-size: 13px;
  border: var(--fsl-lookbook-shell-border-width) solid #dde5ef;
  border-radius: var(--fsl-lookbook-shell-radius);
  background: var(--fsl-lookbook-shell-bg);
  box-shadow: var(--fsl-lookbook-shell-shadow);
  width: min(100%, var(--fsl-lookbook-shell-max-width));
  margin-inline: auto;
  padding: clamp(18px, 2.4vw, 26px);
  color: var(--fsl-lookbook-text);
  box-sizing: border-box;
}

.fsl-lookbook-shell[data-lookbook-format="mosaic"] {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.fsl-lookbook-shell[data-lookbook-format="editorial"] {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.fsl-lookbook-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 16px;
  margin-bottom: 16px;
}

.fsl-lookbook-head-copy {
  min-width: 0;
}

.fsl-lookbook-shell[data-lookbook-format="mosaic"] .fsl-lookbook-head {
  display: none;
}

.fsl-lookbook-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fsl-lookbook-accent);
}

.fsl-lookbook-title {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 750;
  color: var(--fsl-lookbook-text);
}

.fsl-lookbook-subtitle {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.65;
  color: #64748b;
}

.fsl-lookbook-badge {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--fsl-lookbook-accent) 14%, #ffffff);
  color: var(--fsl-lookbook-accent);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  max-width: 100%;
}

.fsl-lookbook-badge:empty {
  display: none;
}

.fsl-lookbook-grid {
  display: grid;
  gap: var(--fsl-lookbook-grid-gap);
  align-items: start;
}

.fsl-lookbook-grid--editorial {
  grid-template-columns: repeat(
    var(
      --fsl-lookbook-cards-per-view-desktop,
      var(--fsl-lookbook-cards-per-view, 4)
    ),
    minmax(0, 1fr)
  );
  gap: var(--fsl-lookbook-grid-gap, 8px);
}

/* Editorial cards honor the customizer's card/media controls (radius,
   background) instead of hardcoding them away — defaults stay transparent. */
.fsl-lookbook-grid--editorial .fsl-lookbook-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  cursor: pointer;
  border: 0;
  border-radius: var(--fsl-lookbook-card-radius, 0);
  background: var(--fsl-lookbook-card-bg, transparent);
  box-shadow: none;
  overflow: hidden;
  transition: opacity 0.12s ease;
}

.fsl-lookbook-grid--editorial .fsl-lookbook-card:hover {
  opacity: 0.96;
}

.fsl-lookbook-grid--mosaic {
  grid-template-columns:
    minmax(180px, 1.34fr)
    repeat(4, minmax(120px, 1fr))
    minmax(180px, 1.34fr);
  grid-auto-rows: clamp(160px, 14vw, 220px);
  grid-auto-flow: dense;
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.18s ease;
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-card:hover,
.fsl-lookbook-grid--mosaic .fsl-lookbook-card:focus-visible {
  transform: translateY(-2px);
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--fsl-lookbook-accent) 36%, #ffffff);
  outline-offset: 3px;
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-card:nth-child(10n + 1),
.fsl-lookbook-grid--mosaic .fsl-lookbook-card:nth-child(10n + 6) {
  grid-row: span 2;
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-card:nth-child(10n + 1) {
  grid-column: 1;
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-card:nth-child(10n + 6) {
  grid-column: 6;
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-card:first-child:nth-last-child(1) {
  grid-column: 1 / -1;
  grid-row: span 2;
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-card:first-child:nth-last-child(2),
.fsl-lookbook-grid--mosaic
  .fsl-lookbook-card:first-child:nth-last-child(2)
  ~ .fsl-lookbook-card {
  grid-column: span 3;
  grid-row: span 2;
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-card:first-child:nth-last-child(2) {
  grid-column: 1 / span 3;
}

.fsl-lookbook-grid--mosaic
  .fsl-lookbook-card:first-child:nth-last-child(2)
  ~ .fsl-lookbook-card {
  grid-column: 4 / span 3;
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-card:first-child:nth-last-child(3) {
  grid-column: 1 / span 2;
  grid-row: span 2;
}

.fsl-lookbook-grid--mosaic
  .fsl-lookbook-card:first-child:nth-last-child(3)
  ~ .fsl-lookbook-card:nth-child(2) {
  grid-column: 3 / span 2;
  grid-row: span 2;
}

.fsl-lookbook-grid--mosaic
  .fsl-lookbook-card:first-child:nth-last-child(3)
  ~ .fsl-lookbook-card:nth-child(3) {
  grid-column: 5 / span 2;
  grid-row: span 2;
}

.fsl-lookbook-grid--stories {
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 300px);
  overflow-x: auto;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
}

.fsl-lookbook-grid--showcase {
  grid-template-columns: repeat(
    var(
      --fsl-lookbook-cards-per-view-desktop,
      var(--fsl-lookbook-cards-per-view, 4)
    ),
    minmax(0, 1fr)
  );
}

.fsl-lookbook-grid--catalog {
  grid-template-columns: minmax(0, 1fr);
}

.fsl-lookbook-card {
  border-radius: var(--fsl-lookbook-card-radius);
  border: var(--fsl-lookbook-card-border-width) solid rgba(226, 232, 240, 0.96);
  background: var(--fsl-lookbook-card-bg);
  box-shadow: var(--fsl-lookbook-card-shadow);
  overflow: hidden;
  min-width: 0;
  position: relative;
}

.fsl-lookbook-shell[style*="--fsl-lookbook-card-style:bold"]
  .fsl-lookbook-card {
  border-color: color-mix(in srgb, var(--fsl-lookbook-accent) 30%, #dbe4f4);
  box-shadow: var(--fsl-lookbook-card-shadow-strong);
}

.fsl-lookbook-card--row {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  align-items: stretch;
}

.fsl-lookbook-grid--catalog .fsl-lookbook-card {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  align-items: stretch;
}

.fsl-lookbook-grid--showcase .fsl-lookbook-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease;
}

.fsl-lookbook-grid--showcase .fsl-lookbook-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--fsl-lookbook-accent) 30%, #dbe4f4);
  box-shadow: var(--fsl-lookbook-card-shadow-strong);
}

.fsl-lookbook-media {
  position: relative;
  min-height: 0;
  aspect-ratio: 4 / 3;
  background: var(--fsl-lookbook-media-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--fsl-lookbook-media-radius);
}

.fsl-lookbook-grid--editorial .fsl-lookbook-media {
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  border-radius: var(--fsl-lookbook-media-radius, 0);
  background: var(--fsl-lookbook-media-bg, transparent);
}

.fsl-lookbook-grid--editorial .fsl-lookbook-media-fallback {
  border-radius: 0;
  background: rgba(241, 245, 249, 0.86);
}

.fsl-lookbook-grid--editorial .fsl-lookbook-copy {
  display: none;
}

.fsl-lookbook-grid--mosaic
  .fsl-lookbook-card:nth-child(10n + 1)
  .fsl-lookbook-media,
.fsl-lookbook-grid--mosaic
  .fsl-lookbook-card:nth-child(10n + 6)
  .fsl-lookbook-media {
  aspect-ratio: auto;
}

.fsl-lookbook-card--story .fsl-lookbook-media,
.fsl-lookbook-grid--stories .fsl-lookbook-media {
  aspect-ratio: 4 / 5;
}

.fsl-lookbook-grid--showcase .fsl-lookbook-card {
  background: var(--fsl-lookbook-showcase-bg);
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-media {
  min-height: 100%;
  height: 100%;
  aspect-ratio: auto;
  padding: 0;
  border-radius: 0;
  background: #eef2f6;
}

.fsl-lookbook-card--row .fsl-lookbook-media,
.fsl-lookbook-grid--catalog .fsl-lookbook-media {
  min-height: 100%;
  aspect-ratio: 1 / 1;
}

.fsl-lookbook-grid--showcase .fsl-lookbook-media {
  aspect-ratio: 1 / 1;
  padding: 16px;
}

.fsl-lookbook-media img,
.fsl-lookbook-media .fsl-lookbook-media-fallback {
  width: 100%;
  height: 100%;
}

.fsl-lookbook-media img {
  display: block;
  object-fit: var(--fsl-lookbook-media-fit);
  transform: scale(var(--fsl-lookbook-media-scale));
  transform-origin: center;
}

.fsl-lookbook-grid--showcase .fsl-lookbook-media img {
  object-fit: var(--fsl-lookbook-showcase-media-fit);
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-media img {
  object-fit: var(--fsl-lookbook-mosaic-media-fit);
}

.fsl-lookbook-media-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #64748b;
}

.fsl-lookbook-grid--showcase .fsl-lookbook-media-fallback {
  border-radius: 14px;
  background: rgba(241, 245, 249, 0.86);
}

.fsl-lookbook-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--fsl-lookbook-card-padding);
  min-width: 0;
  min-height: 0;
  height: auto;
}

.fsl-lookbook-card--row .fsl-lookbook-copy,
.fsl-lookbook-grid--catalog .fsl-lookbook-copy {
  height: auto;
  align-self: start;
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-copy {
  position: absolute;
  inset: auto 0 0 0;
  gap: 6px;
  padding: 18px 18px 38px;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0) 28%,
    rgba(15, 23, 42, 0.18) 56%,
    rgba(15, 23, 42, 0.72) 100%
  );
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  pointer-events: none;
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-card:hover .fsl-lookbook-copy,
.fsl-lookbook-grid--mosaic .fsl-lookbook-card:focus-visible .fsl-lookbook-copy,
.fsl-lookbook-grid--mosaic .fsl-lookbook-card:focus-within .fsl-lookbook-copy {
  opacity: 1;
  transform: translateY(0);
}

.fsl-lookbook-grid--showcase .fsl-lookbook-copy {
  flex: 1 1 auto;
  gap: 10px;
  padding: 15px 15px 16px;
}

.fsl-lookbook-card-kicker {
  margin: 0;
  font-size: var(--fsl-lookbook-card-kicker-size);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fsl-lookbook-card-kicker-color);
}

.fsl-lookbook-card-title {
  margin: 0;
  font-size: var(--fsl-lookbook-card-title-size);
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 750;
  color: var(--fsl-lookbook-card-title-color);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--fsl-lookbook-card-title-lines);
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.fsl-lookbook-card--lead .fsl-lookbook-card-title {
  font-size: clamp(
    calc(var(--fsl-lookbook-card-title-size) + 4px),
    2.3vw,
    calc(var(--fsl-lookbook-card-title-size) + 12px)
  );
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-card-title {
  color: #ffffff;
  font-size: clamp(
    calc(var(--fsl-lookbook-card-title-size) + 2px),
    1.8vw,
    calc(var(--fsl-lookbook-card-title-size) + 6px)
  );
  line-height: 1.12;
  -webkit-line-clamp: 2;
}

.fsl-lookbook-card-description {
  margin: 0;
  font-size: var(--fsl-lookbook-card-description-size);
  line-height: 1.6;
  color: var(--fsl-lookbook-card-description-color);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.fsl-lookbook-grid--showcase .fsl-lookbook-card-kicker,
.fsl-lookbook-grid--showcase .fsl-lookbook-card-description,
.fsl-lookbook-grid--showcase .fsl-lookbook-open {
  display: none;
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-card-kicker,
.fsl-lookbook-grid--mosaic .fsl-lookbook-card-description,
.fsl-lookbook-grid--mosaic .fsl-lookbook-open {
  display: none;
}

.fsl-lookbook-grid--showcase .fsl-lookbook-card-title {
  font-size: calc(var(--fsl-lookbook-card-title-size) + 2px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.fsl-lookbook-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-card-meta {
  gap: 0;
}

.fsl-lookbook-card-meta span {
  min-height: 26px;
  padding: 0 9px;
  border-radius: var(--fsl-lookbook-price-chip-radius);
  border: var(--fsl-lookbook-price-chip-border-width) solid
    var(--fsl-lookbook-price-chip-border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fsl-lookbook-price-chip-bg);
  color: var(--fsl-lookbook-price-chip-color);
  font-size: var(--fsl-lookbook-price-chip-size);
  line-height: 1;
  font-weight: 700;
  text-transform: capitalize;
}

.fsl-lookbook-grid--showcase .fsl-lookbook-card-meta {
  margin-top: 2px;
}

.fsl-lookbook-grid--showcase .fsl-lookbook-card-meta span {
  color: var(--fsl-lookbook-price-chip-color);
  background: var(--fsl-lookbook-price-chip-bg);
  border: var(--fsl-lookbook-price-chip-border-width) solid
    var(--fsl-lookbook-price-chip-border-color);
  border-radius: var(--fsl-lookbook-price-chip-radius);
  font-size: var(--fsl-lookbook-price-chip-size);
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
}

.fsl-lookbook-grid--mosaic .fsl-lookbook-card-meta span {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(
    var(--fsl-lookbook-price-size),
    1.2vw,
    calc(var(--fsl-lookbook-price-size) + 1px)
  );
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
}

.fsl-lookbook-card-meta span:empty {
  display: none;
}

.fsl-lookbook-open {
  cursor: pointer;
  min-height: 38px;
  padding: 9px 14px;
  border-radius: var(--fsl-lookbook-cta-radius);
  border: var(--fsl-lookbook-cta-border-width) solid var(--fsl-lookbook-cta-bg);
  background: var(--fsl-lookbook-cta-bg);
  color: var(--fsl-lookbook-cta-text);
  font-family: inherit;
  font-size: var(--fsl-lookbook-cta-font-size);
  line-height: 1.2;
  font-weight: 750;
  transition: transform 0.12s ease;
  margin-top: auto;
  align-self: flex-start;
}

.fsl-lookbook-open:hover {
  transform: translateY(-1px);
}

.fsl-lookbook-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 20px;
  background: rgba(248, 250, 252, 0.86);
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 600;
  padding: 22px;
}

/* Per-element visibility flags — the renderer sets data-fsl-hide-* on the
   shell from the lookbook's saved design (customizer Show/Hide toggles). */
.fsl-lookbook-shell[data-fsl-hide-kicker="1"] .fsl-lookbook-card-kicker,
.fsl-lookbook-shell[data-fsl-hide-title="1"] .fsl-lookbook-card-title,
.fsl-lookbook-shell[data-fsl-hide-description="1"]
  .fsl-lookbook-card-description,
.fsl-lookbook-shell[data-fsl-hide-price="1"] .fsl-lookbook-card-meta,
.fsl-lookbook-shell[data-fsl-hide-cta="1"] .fsl-lookbook-open {
  display: none !important;
}

/* Card layout presets (customizer → Card surface → Card design).
   OVERLAY: the CTA floats bottom-center over the image, all other copy is
   hidden and the whole card is clickable. MINIMAL: image + title only, the
   whole card is clickable. */
.fsl-lookbook-shell[data-fsl-card-layout="overlay"] .fsl-lookbook-card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.fsl-lookbook-shell[data-fsl-card-layout="overlay"] .fsl-lookbook-media {
  border-radius: var(--fsl-lookbook-media-radius);
}

.fsl-lookbook-shell[data-fsl-card-layout="overlay"] .fsl-lookbook-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  padding: 0 12px;
  margin: 0;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  pointer-events: none;
}

.fsl-lookbook-shell[data-fsl-card-layout="overlay"][data-fsl-cta-align="center"]
  .fsl-lookbook-copy {
  justify-content: center;
}

.fsl-lookbook-shell[data-fsl-card-layout="overlay"][data-fsl-cta-align="right"]
  .fsl-lookbook-copy {
  justify-content: flex-end;
}

.fsl-lookbook-shell[data-fsl-card-layout="overlay"][data-fsl-cta-pos="top"]
  .fsl-lookbook-copy {
  top: 16px;
  bottom: auto;
}

.fsl-lookbook-shell[data-fsl-card-layout="overlay"][data-fsl-cta-pos="middle"]
  .fsl-lookbook-copy {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.fsl-lookbook-shell[data-fsl-card-layout="overlay"] .fsl-lookbook-open {
  margin-top: 0;
  align-self: auto;
}

/* Classic-layout CTA alignment (default left keeps existing behavior). */
.fsl-lookbook-shell[data-fsl-cta-align="center"]:not([data-fsl-card-layout="overlay"])
  .fsl-lookbook-open {
  align-self: center;
}

.fsl-lookbook-shell[data-fsl-cta-align="right"]:not([data-fsl-card-layout="overlay"])
  .fsl-lookbook-open {
  align-self: flex-end;
}

.fsl-lookbook-shell[data-fsl-card-layout="overlay"] .fsl-lookbook-open {
  pointer-events: auto;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.28);
}

.fsl-lookbook-shell[data-fsl-card-layout="overlay"] .fsl-lookbook-card-kicker,
.fsl-lookbook-shell[data-fsl-card-layout="overlay"] .fsl-lookbook-card-title,
.fsl-lookbook-shell[data-fsl-card-layout="overlay"]
  .fsl-lookbook-card-description,
.fsl-lookbook-shell[data-fsl-card-layout="overlay"] .fsl-lookbook-card-meta {
  display: none !important;
}

.fsl-lookbook-shell[data-fsl-card-layout="minimal"] .fsl-lookbook-card {
  cursor: pointer;
}

.fsl-lookbook-shell[data-fsl-card-layout="minimal"] .fsl-lookbook-card-kicker,
.fsl-lookbook-shell[data-fsl-card-layout="minimal"]
  .fsl-lookbook-card-description,
.fsl-lookbook-shell[data-fsl-card-layout="minimal"] .fsl-lookbook-card-meta,
.fsl-lookbook-shell[data-fsl-card-layout="minimal"] .fsl-lookbook-open {
  display: none !important;
}

.fsl-lookbook-modal-panel {
  max-width: min(1120px, calc(100vw - 32px));
}

.fsl-lookbook-grid--stories::-webkit-scrollbar {
  height: 8px;
}

.fsl-lookbook-grid--stories::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.4);
}

@media (max-width: 1100px) {
  .fsl-lookbook-grid--editorial .fsl-lookbook-card,
  .fsl-lookbook-grid--catalog .fsl-lookbook-card,
  .fsl-lookbook-card--row {
    grid-template-columns: minmax(0, 1fr);
  }

  .fsl-lookbook-grid--editorial {
    grid-template-columns: repeat(
      var(--fsl-lookbook-cards-per-view-tablet, 2),
      minmax(0, 1fr)
    );
  }

  .fsl-lookbook-grid--mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(190px, 30vw, 260px);
  }

  .fsl-lookbook-grid--mosaic .fsl-lookbook-card,
  .fsl-lookbook-grid--mosaic .fsl-lookbook-card:nth-child(10n + 1),
  .fsl-lookbook-grid--mosaic .fsl-lookbook-card:nth-child(10n + 6) {
    grid-column: span 1;
    grid-row: span 1;
  }

  .fsl-lookbook-grid--mosaic .fsl-lookbook-copy {
    opacity: 1;
    transform: none;
    padding: 14px;
  }

  .fsl-lookbook-grid--showcase {
    grid-template-columns: repeat(
      var(--fsl-lookbook-cards-per-view-tablet, 2),
      minmax(0, 1fr)
    );
  }

  .fsl-lookbook-grid--stories {
    grid-auto-columns: minmax(240px, 60%);
  }

  .fsl-lookbook-grid--editorial .fsl-lookbook-media,
  .fsl-lookbook-grid--catalog .fsl-lookbook-media,
  .fsl-lookbook-card--row .fsl-lookbook-media {
    min-height: 220px;
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

@media (max-width: 720px) {
  .fsl-lookbook-shell {
    padding: 18px;
    border-radius: var(--fsl-lookbook-shell-radius);
  }

  .fsl-lookbook-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .fsl-lookbook-grid--mosaic {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  .fsl-lookbook-grid--mosaic .fsl-lookbook-media {
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .fsl-lookbook-grid--editorial {
    grid-template-columns: repeat(
      var(--fsl-lookbook-cards-per-view-mobile, 1),
      minmax(0, 1fr)
    );
  }

  .fsl-lookbook-grid--showcase {
    grid-template-columns: repeat(
      var(--fsl-lookbook-cards-per-view-mobile, 1),
      minmax(0, 1fr)
    );
  }

  .fsl-lookbook-grid--stories {
    grid-auto-columns: 86%;
  }

  .fsl-lookbook-card--story .fsl-lookbook-media,
  .fsl-lookbook-grid--stories .fsl-lookbook-media,
  .fsl-lookbook-grid--editorial .fsl-lookbook-media {
    min-height: 220px;
  }

  .fsl-lookbook-badge,
  .fsl-lookbook-open {
    width: 100%;
    justify-content: center;
  }
}

/* -------------------------------------------------------------------------
   Cross-card row alignment
   -------------------------------------------------------------------------
   Goal: in any layout where cards sit side-by-side, the title row of card A
   should line up with the title row of card B, regardless of whether one
   has a 2-line title and the other 1-line. Same for price, variant picker,
   and Add to cart.

   Strategy:
   - Grid + Carousel are CSS Grid containers, so we use `subgrid` to inherit
     the parent's row tracks. Modern Safari/Chrome/Firefox all ship subgrid;
     older browsers fall back to per-card min-heights via `@supports not`.
   - Slider is a flex container. Each card stays self-contained but uses
     min-heights so adjacent cards still feel aligned.
   - Stacked (image left, content right) keeps card-internal alignment
     (title/price/CTA bottom) but doesn't try to align across cards since
     they're not in a row.
   - Masonry / Inline are intentionally variable-height and are left alone.

   Variant slot is always reserved (the runtime emits an empty
   .fsl-variant-wrap when a product has no picker) so row 4 lines up across
   all cards including products with no variants.
   ------------------------------------------------------------------------- */

/* --- Grid + Carousel: subgrid alignment --- */
.fsl-grid,
.fsl-carousel {
  /* 5 row tracks: image, title, price, variant, cta. `auto` lets each row
     grow to the tallest content among siblings. */
  grid-template-rows: auto auto auto auto auto;
  align-items: stretch;
}

.fsl-grid > .fsl-item,
.fsl-carousel > .fsl-item {
  grid-row: span 5;
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: 1fr;
  /* Default `gap` from .fsl-grid bleeds into the subgrid row gap, which
     would split the card visually. Card-internal spacing comes from
     .fsl-info padding instead. */
  row-gap: 0;
}

.fsl-grid > .fsl-item > .fsl-thumb,
.fsl-carousel > .fsl-item > .fsl-thumb {
  grid-row: 1;
  align-self: stretch;
}

.fsl-grid > .fsl-item > .fsl-info,
.fsl-carousel > .fsl-item > .fsl-info {
  grid-row: 2 / 6;
  display: grid;
  grid-template-rows: subgrid;
  /* The default .fsl-info applies a 12px gap and stack padding; subgrid
     takes the row sizes from the parent, so we keep top/horizontal padding
     but zero out vertical row-gap because the parent grid owns it. */
  row-gap: 12px;
}

.fsl-grid > .fsl-item > .fsl-info > .fsl-product-title,
.fsl-carousel > .fsl-item > .fsl-info > .fsl-product-title {
  grid-row: 1;
}
.fsl-grid > .fsl-item > .fsl-info > .fsl-product-price,
.fsl-carousel > .fsl-item > .fsl-info > .fsl-product-price {
  grid-row: 2;
}
.fsl-grid > .fsl-item > .fsl-info > .fsl-variant-wrap,
.fsl-carousel > .fsl-item > .fsl-info > .fsl-variant-wrap {
  grid-row: 3;
  align-self: end;
}
.fsl-grid > .fsl-item > .fsl-info > .fsl-add,
.fsl-carousel > .fsl-item > .fsl-info > .fsl-add {
  grid-row: 4;
  align-self: end;
}

/* Empty variant slot uses the SAME markup as a real picker (label +
   dropdown), just rendered invisible. That way the placeholder takes
   the exact same vertical space a real picker would, regardless of
   layout (subgrid, flex, splide, anything) — no per-layout min-height
   reservation needed. Earlier we tried `visibility: hidden` + a
   per-layout `min-height` reservation, but that turned out to either
   collapse the row entirely or over-reserve and stretch every card. */
.fsl-variant-wrap.fsl-variant-wrap--empty {
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

/* Fallback: browsers without subgrid (old Safari) get per-row min-heights
   based on the worst case across cards. Cards don't align pixel-perfect,
   but sit visually on the same baselines instead of drifting. */
@supports not (grid-template-rows: subgrid) {
  .fsl-grid > .fsl-item > .fsl-info,
  .fsl-carousel > .fsl-item > .fsl-info {
    /* Force CTA to the bottom of each card so at least the bottom edge
       of every card lines up. */
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .fsl-grid > .fsl-item > .fsl-info > .fsl-product-title,
  .fsl-carousel > .fsl-item > .fsl-info > .fsl-product-title {
    min-height: calc(
      var(--fsl-product-title-size, 15px) * 1.3 *
        var(--fsl-product-title-lines, 2)
    );
  }
  .fsl-grid > .fsl-item > .fsl-info > .fsl-variant-wrap,
  .fsl-carousel > .fsl-item > .fsl-info > .fsl-variant-wrap {
    min-height: 44px;
  }
  .fsl-grid > .fsl-item > .fsl-info > .fsl-add,
  .fsl-carousel > .fsl-item > .fsl-info > .fsl-add {
    margin-top: auto;
  }
}

/* --- Slider: flex container, can't subgrid. Per-card alignment instead. --- */
.fsl-slider > .fsl-item {
  display: flex;
  flex-direction: column;
}
.fsl-slider > .fsl-item > .fsl-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fsl-slider > .fsl-item > .fsl-info > .fsl-product-title {
  min-height: calc(
    var(--fsl-product-title-size, 15px) * 1.3 *
      var(--fsl-product-title-lines, 2)
  );
}
.fsl-slider > .fsl-item > .fsl-info > .fsl-variant-wrap {
  min-height: 44px;
}
.fsl-slider > .fsl-item > .fsl-info > .fsl-add {
  margin-top: auto;
}

/* --- Stacked: cards stack vertically with image left + content right.
   No cross-card row alignment, but pin CTA to the bottom of each card. --- */
.fsl-stacked > .fsl-item > .fsl-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fsl-stacked > .fsl-item > .fsl-info > .fsl-add {
  margin-top: auto;
}

/* --- Masonry / Inline: variable height is the point. Don't enforce row
   alignment, just make sure the CTA sticks to the card bottom. --- */
.fsl-masonry > .fsl-item > .fsl-info,
.fsl-inline > .fsl-item > .fsl-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fsl-masonry > .fsl-item > .fsl-info > .fsl-add,
.fsl-inline > .fsl-item > .fsl-info > .fsl-add {
  margin-top: auto;
}

/* --- Splide-based carousel (CAROUSEL + SLIDER presets) ---
   Items live inside .splide__list. .splide__list is a flex row with
   default align-items:stretch — so every card stretches to match the
   tallest sibling. Without help, the shorter cards open a giant
   empty gap below their content row before the CTA. Solution: keep
   the stretch (so cards are uniform height across the row), but tell
   the GRID inside each card that the IMAGE row absorbs the extra
   space (`1fr`) while the content row stays auto-sized. Every card's
   content row is the same height (title + price + picker + CTA), so
   CTAs across the row land on the same Y. Images on shorter cards
   just render taller (object-fit:cover clips cleanly). The variant
   placeholder ghost picker keeps the content row identical on cards
   that have no variants. */
.splide .splide__list .fsl-item {
  min-height: 0;
  grid-template-rows: 1fr auto;
}


/* ===================================================================
   SPLIDE LAYOUT (inlined essentials)
   -------------------------------------------------------------------
   Splide's own CSS lives in a separate file the theme app extension
   loads at the DOCUMENT level. The widget mounts inside a Shadow
   DOM, and shadow roots are CSS-isolated — that document-level
   splide.min.css NEVER reaches our slider. Without these few rules
   the .splide__track has no overflow:hidden and every slide spills
   out side-by-side, which is exactly the "all 6 cards visible at
   once on the live storefront" bug. Inlining the essentials here
   means they ship inside the same stylesheet (shop-the-look.css)
   that we DO inject into the shadow root, so the slider works
   regardless of whether splide.min.css reaches the shadow or not.
   ================================================================ */
.splide {
  position: relative;
  visibility: hidden;
}
.splide.is-initialized,
.splide.is-rendered {
  visibility: visible;
}
.splide__container {
  position: relative;
  box-sizing: border-box;
}
.splide__track {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.splide__list {
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  backface-visibility: hidden;
}
.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}
.splide__slide {
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  margin: 0;
  list-style-type: none !important;
  backface-visibility: hidden;
}
.splide__slide img {
  vertical-align: bottom;
}
.splide__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border: 0;
  border-radius: 50%;
  background: #ccc;
  opacity: 0.7;
  padding: 0;
  cursor: pointer;
  transform: translateY(-50%);
}
.splide__arrow svg {
  width: 1.2em;
  height: 1.2em;
  fill: #000;
}
.splide__arrow:hover:not(:disabled) {
  opacity: 0.9;
}
.splide__arrow:disabled {
  opacity: 0.3;
}
.splide__arrow--prev {
  left: 1em;
}
.splide__arrow--prev svg {
  transform: scaleX(-1);
}
.splide__arrow--next {
  right: 1em;
}
.splide__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5em;
}
.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}
.splide__pagination__page {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 3px;
  padding: 0;
  background: #ccc;
  border: 0;
  border-radius: 50%;
  opacity: 0.7;
  cursor: pointer;
}
.splide:not(.is-overflow) .splide__pagination {
  display: none;
}

/* ===================================================================
   SPLIDE (Advanced Slider) SKIN
   -------------------------------------------------------------------
   Branded overrides on top of the essentials above. Merchant-set
   colors / sizes / positions win via the --fsl-splide-* variables.
   ================================================================ */

.fsl-layout-surface--splide {
  padding: 12px 0;
}

/* Force the .splide container to stay visible even before Splide's JS
   adds `.is-initialized` — splide.min.css ships `.splide{visibility:
   hidden}` so a deferred-script delay or a Splide mount failure makes
   the whole widget invisible. Override that for our roots so the cards
   are at least readable as a horizontal flex row. */
.fsl-splide.splide {
  visibility: visible !important;
}

/* Slide layout: the inlined Splide essentials above already give the
   list display:flex + flex-shrink:0 on slides. Splide's JS sets the
   inline per-slide width once mounted. We just keep min-width:0 so
   children that have intrinsic min-width (e.g. long product titles)
   don't push slides wider than their flex basis. */
.fsl-splide .splide__slide {
  min-width: 0;
}

/* Arrows — branded defaults that win over splide.min.css. Splide
   ships its own position rules (absolute, top:50%, translateY(-50%),
   left/right:1em) which we keep — they make the arrows ride the
   vertical center of the slider on the sides, the merchant-expected
   "INSIDE" placement. We only override the visual props (colors,
   size, radius, hover state). !important is needed because splide.
   min.css uses class-only selectors and we don't want merchants to
   write deeper selectors to win. */
.fsl-splide .splide__arrow {
  background: var(--fsl-splide-arrow-bg, var(--fsl-nav-bg, #0f172a)) !important;
  color: var(--fsl-splide-arrow-color, var(--fsl-nav-color, #ffffff)) !important;
  border: 0 !important;
  border-radius: var(--fsl-splide-arrow-radius, 999px) !important;
  width: var(--fsl-splide-arrow-size, var(--fsl-nav-size, 40px)) !important;
  height: var(--fsl-splide-arrow-size, var(--fsl-nav-size, 40px)) !important;
  opacity: 1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  transition: background 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  z-index: 5;
}
/* Hover: brightness lift instead of a transform-based scale. Touching
   `transform` on hover broke Splide's translateY(-50%) centering AND
   the prev arrow's SVG flip, making the arrow jump to the top-left
   and momentarily point the wrong way. Filter has no such side
   effects. */
.fsl-splide .splide__arrow:hover:not(:disabled) {
  background: var(--fsl-splide-arrow-bg-hover, var(--fsl-splide-arrow-bg, #1e293b)) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.24);
  filter: brightness(1.05);
}
.fsl-splide .splide__arrow svg {
  fill: currentColor;
  width: 14px;
  height: 14px;
}
.fsl-splide .splide__arrow:disabled {
  opacity: var(--fsl-splide-arrow-disabled-opacity, 0.4) !important;
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}

/* Auto-hide nav when there's nothing to scroll. Splide adds
   `.is-overflow` to its root only when total slides > visible slides;
   it already auto-hides .splide__pagination on the inverse, but
   leaves arrows visible by default. We hide both so a look with
   exactly perPage products doesn't render dead controls. */
.fsl-splide.splide:not(.is-overflow) .splide__arrows,
.fsl-splide.splide:not(.is-overflow) .splide__pagination {
  display: none !important;
}

/* Arrow position variants. Splide places arrows centered on the
   sides by default and flips the prev arrow with `transform:
   scaleX(-1)`. When we move arrows to a corner we need to switch
   `position: absolute → static`, but we MUST keep the prev-arrow
   flip — otherwise both arrows render pointing the same way. We
   apply scaleX(-1) explicitly on the prev arrow for every corner
   variant. */
.fsl-splide[data-fsl-arrow-position="OUTSIDE"] .splide__arrow--prev {
  left: -20px;
}
.fsl-splide[data-fsl-arrow-position="OUTSIDE"] .splide__arrow--next {
  right: -20px;
}
.fsl-splide[data-fsl-arrow-position="TOP_LEFT"] .splide__arrows,
.fsl-splide[data-fsl-arrow-position="TOP_RIGHT"] .splide__arrows,
.fsl-splide[data-fsl-arrow-position="BOTTOM_LEFT"] .splide__arrows,
.fsl-splide[data-fsl-arrow-position="BOTTOM_RIGHT"] .splide__arrows {
  position: absolute;
  display: flex;
  gap: 8px;
  z-index: 5;
}
.fsl-splide[data-fsl-arrow-position="TOP_LEFT"] .splide__arrows {
  top: 8px;
  left: 8px;
}
.fsl-splide[data-fsl-arrow-position="TOP_RIGHT"] .splide__arrows {
  top: 8px;
  right: 8px;
}
.fsl-splide[data-fsl-arrow-position="BOTTOM_LEFT"] .splide__arrows {
  bottom: 8px;
  left: 8px;
}
.fsl-splide[data-fsl-arrow-position="BOTTOM_RIGHT"] .splide__arrows {
  bottom: 8px;
  right: 8px;
}
.fsl-splide[data-fsl-arrow-position="TOP_LEFT"] .splide__arrow,
.fsl-splide[data-fsl-arrow-position="TOP_RIGHT"] .splide__arrow,
.fsl-splide[data-fsl-arrow-position="BOTTOM_LEFT"] .splide__arrow,
.fsl-splide[data-fsl-arrow-position="BOTTOM_RIGHT"] .splide__arrow {
  position: static;
  top: auto;
  transform: none;
}
/* Re-apply the prev-arrow horizontal flip when we removed
   `transform: scaleX(-1)` above. */
.fsl-splide[data-fsl-arrow-position="TOP_LEFT"] .splide__arrow--prev,
.fsl-splide[data-fsl-arrow-position="TOP_RIGHT"] .splide__arrow--prev,
.fsl-splide[data-fsl-arrow-position="BOTTOM_LEFT"] .splide__arrow--prev,
.fsl-splide[data-fsl-arrow-position="BOTTOM_RIGHT"] .splide__arrow--prev {
  transform: scaleX(-1);
}

/* Dots — variable-driven size, colors, and active-state width.
   Splide-core ships its own .splide__pagination__page rules with
   a min-width / square aspect that beat unprefixed selectors, so
   we force a few props with !important to keep the dots circular
   at the merchant's chosen size. */
.fsl-splide .splide__pagination {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 4px;
  bottom: -28px;
  padding: 0;
  margin: 0;
}
.fsl-splide .splide__pagination li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  list-style: none;
}
.fsl-splide .splide__pagination__page {
  background: var(--fsl-splide-dot-bg, var(--fsl-dot-bg, rgba(15, 23, 42, 0.25))) !important;
  width: var(--fsl-splide-dot-size, 8px) !important;
  height: var(--fsl-splide-dot-size, 8px) !important;
  min-width: var(--fsl-splide-dot-size, 8px) !important;
  min-height: var(--fsl-splide-dot-size, 8px) !important;
  margin: 0;
  border-radius: 999px !important;
  border: 0;
  padding: 0;
  transform: none;
  transition: width 0.2s ease, background 0.2s ease;
  opacity: 1;
}
.fsl-splide .splide__pagination__page.is-active {
  background: var(--fsl-splide-dot-active-bg, var(--fsl-dot-bg-active, var(--fsl-accent, #0f172a))) !important;
  width: var(--fsl-splide-dot-active-width, 22px) !important;
  min-width: var(--fsl-splide-dot-active-width, 22px) !important;
  transform: none;
}

/* Pagination position variants. */
.fsl-splide[data-fsl-dot-position="BOTTOM_LEFT"] .splide__pagination {
  justify-content: flex-start;
  padding-left: 12px;
}
.fsl-splide[data-fsl-dot-position="BOTTOM_RIGHT"] .splide__pagination {
  justify-content: flex-end;
  padding-right: 12px;
}
.fsl-splide[data-fsl-dot-position="TOP_CENTER"] .splide__pagination,
.fsl-splide[data-fsl-dot-position="TOP_LEFT"] .splide__pagination,
.fsl-splide[data-fsl-dot-position="TOP_RIGHT"] .splide__pagination {
  bottom: auto;
  top: -28px;
}
.fsl-splide[data-fsl-dot-position="TOP_LEFT"] .splide__pagination {
  justify-content: flex-start;
  padding-left: 12px;
}
.fsl-splide[data-fsl-dot-position="TOP_RIGHT"] .splide__pagination {
  justify-content: flex-end;
  padding-right: 12px;
}

/* Position arrows-as-corner-buttons modes need positioned ancestors. */
.fsl-splide[data-fsl-arrow-position="TOP_LEFT"],
.fsl-splide[data-fsl-arrow-position="TOP_RIGHT"],
.fsl-splide[data-fsl-arrow-position="BOTTOM_LEFT"],
.fsl-splide[data-fsl-arrow-position="BOTTOM_RIGHT"] {
  position: relative;
}

/* Slides keep using the existing .fsl-item card styling. Splide just
   measures the slide width via flex — the .fsl-item retains its full
   card chrome (image, info, buttons) because we add `splide__slide`
   as an extra class rather than replacing it. */
.fsl-splide .splide__slide {
  display: flex;
  flex-direction: column;
}

/* ===================================================================
   CART DRAWER MODE
   -------------------------------------------------------------------
   When the storefront JS auto-injects the widget into a theme's cart
   drawer (because Shopify doesn't expose drawer block targets), the
   container gets `data-fsl-drawer-context="1"`. Cart drawers are
   narrow side panels (usually 360–480px) so the widget needs to:
     - cap its own width to the drawer column,
     - drop to a single column slider regardless of merchant's grid
       columns setting (a 4-col grid in a 400px drawer is unreadable),
     - shrink heading + body type one tier so it doesn't dwarf the
       cart contents below,
     - kill the boxed section max-width override so the widget hugs
       the drawer instead of trying to render at 1500px and then
       getting clipped by the drawer's overflow:hidden.
   We use a container query on the host element so the widget responds
   to the DRAWER's width, not the viewport — opens the door for
   merchants who configure a wider drawer to still get the multi-card
   slider layout.
   ================================================================ */

.fourcore-shop-the-look[data-fsl-drawer-context="1"] {
  /* Reset any boxed section width so the widget fills the drawer
     column instead of overflowing the drawer's overflow:hidden. */
  max-width: 100%;
  width: 100%;
  margin: 16px 0 0;
  padding: 0;
  container-type: inline-size;
  container-name: fsl-drawer;
}

.fourcore-shop-the-look[data-fsl-drawer-context="1"] .fsl-widget {
  --fsl-card-radius: 10px;
  --fsl-container-radius: 12px;
  --fsl-image-radius: 8px;
  --fsl-gap: 10px;
  padding: 12px;
  background: var(--fsl-widget-bg, transparent);
}

.fourcore-shop-the-look[data-fsl-drawer-context="1"] .fsl-widget-heading {
  font-size: clamp(13px, 3.2vw, 15px);
  margin: 0 0 10px;
}

.fourcore-shop-the-look[data-fsl-drawer-context="1"] .fsl-product-title {
  font-size: 12.5px;
  line-height: 1.3;
  -webkit-line-clamp: 2;
}

.fourcore-shop-the-look[data-fsl-drawer-context="1"] .fsl-price {
  font-size: 12.5px;
}

.fourcore-shop-the-look[data-fsl-drawer-context="1"] .fsl-add,
.fourcore-shop-the-look[data-fsl-drawer-context="1"] .fsl-add-all {
  font-size: 12.5px;
  padding-block: 8px;
}

/* Cart drawers are usually ≤ 480px. Below that, force grid/slider/
   carousel into a single column so cards stay readable instead of
   getting squeezed into tiny columns. Merchants get a Next-arrow
   carousel rather than a clipped grid. */
@container fsl-drawer (max-width: 540px) {
  .fourcore-shop-the-look[data-fsl-drawer-context="1"] .fsl-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .fourcore-shop-the-look[data-fsl-drawer-context="1"] .fsl-thumb {
    aspect-ratio: 4 / 3;
  }
  /* In a narrow drawer the hero layout's two-up sidebar collapses to
     a single column stacked under the primary card. */
  .fourcore-shop-the-look[data-fsl-drawer-context="1"] .fsl-hero-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Hide the boxed sidebar-trigger / popup affordances inside the
   drawer — there's no room for them and they'd compete with the
   theme's drawer chrome (close button, cart subtotal etc.) */
.fourcore-shop-the-look[data-fsl-drawer-context="1"] .fsl-overlay-trigger,
.fourcore-shop-the-look[data-fsl-drawer-context="1"] .fsl-trigger-modal-root {
  display: none !important;
}