/* Figma 257:110867, 266:123468 and 266:123873.
   Keep the existing swipe rails, artwork and falling-card physics. */
body.ui-study :is(#product, #repeat-orders) {
  width: calc(100% - 32px);
  margin: 16px auto;
  padding-block: 96px;
  overflow: clip;
  border: 2px solid #e9e9e4;
  border-radius: 24px;
  background: var(--figma-panel-surface);
}

body.ui-study :is(#product, #repeat-orders) > .container {
  width: 100%;
  max-width: none;
}

body.ui-study :is(#product, #repeat-orders) .section-heading,
body.ui-study #price .figma-free-panel > .section-heading {
  width: min(958px, calc(100% - 64px));
  max-width: 958px;
  padding: 0;
  margin: 0 auto 96px;
  text-align: center;
}

body.ui-study :is(#product, #repeat-orders) h2,
body.ui-study #price .figma-free-panel h2 {
  margin: 0;
  font-weight: 450;
  letter-spacing: -1.5px;
  color: #0b1220;
}

body.ui-study :is(#product, #repeat-orders) .section-description,
body.ui-study #price .figma-free-panel .section-description {
  max-width: 958px;
  margin: 16px auto 0;
  color: #707070;
  letter-spacing: 0;
}

body.ui-study #product .format-rail {
  margin-top: 24px;
  gap: 10px;
  padding: 4px 1px 10px;
}

body.ui-study #product .format-rail > li {
  padding: 10px 16px;
  border-radius: 14px;
  background: #fff;
  color: #707070;
  font-size: 14px;
  line-height: 20px;
  font-weight: 450;
  letter-spacing: 0;
}

body.ui-study :is(#product, #repeat-orders) .starter-carousel {
  --carousel-gutter: max(24px, calc(max(var(--page-gutter), (100vw - 1344px) / 2) - 18px));
  --carousel-card-width: 400px;
  --carousel-gap: 24px;
  --card-art-height: 320px;
  width: 100%;
  margin-inline: 0;
}

body.ui-study :is(#product, #repeat-orders) .starter-track {
  gap: var(--carousel-gap);
  padding-inline: var(--carousel-gutter);
  scroll-padding-inline: var(--carousel-gutter);
}

body.ui-study :is(#product, #repeat-orders) .starter-card {
  flex-basis: var(--carousel-card-width);
  border: 0;
  border-radius: 22.4px;
  background: #fff;
  color: #0b1220;
  box-shadow: none;
}

body.ui-study :is(#product, #repeat-orders) .starter-card-copy {
  flex: 1 0 auto;
  min-height: 196px;
  padding: 24px 24px 16px;
}

body.ui-study #repeat-orders .starter-card-copy { min-height: 164px; }

body.ui-study :is(#product, #repeat-orders) .starter-card-label {
  color: #64748b;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .3px;
}

body.ui-study :is(#product, #repeat-orders) .starter-card h3 {
  margin-top: 12px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: 0;
}

body.ui-study :is(#product, #repeat-orders) .starter-arrow {
  width: 36px;
  height: 36px;
  border: 1px solid #e2e2dc;
  background: #edede7;
  color: #f58b60;
  box-shadow: none;
}

body.ui-study :is(#product, #repeat-orders) .starter-prev { left: 24px; }
body.ui-study :is(#product, #repeat-orders) .starter-next { right: 24px; }
body.ui-study :is(#product, #repeat-orders) .starter-arrow .icon { width: 18px; height: 18px; transform: rotate(45deg); }
body.ui-study :is(#product, #repeat-orders) .starter-prev .icon { transform: rotate(225deg); }
body.ui-study .figma-carousel-booking { margin-top: 32px; text-align: center; }

/* Match the live illustration surfaces without recolouring their image assets. */
body.ui-study #product .card-image-frame > .figma-card-illustration {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: none;
  clip-path: inset(0);
}
/* The exported builder begins with a clipped label; hide its stray pixels. */
body.ui-study #product .figma-card-illustration[src*="figma-pizza-builder"] {
  clip-path: inset(4px 0 0);
}
body.ui-study #product .fee-order-total,
body.ui-study #product .fee-benefit-next > svg,
body.ui-study #repeat-orders .birthday-message-link { background: #e8eef5; }
body.ui-study #repeat-orders .promotion-code-field > span,
body.ui-study #repeat-orders .promotion-gift-cta,
body.ui-study #repeat-orders .promotion-toggle {
  background: #f58b60;
  color: #0b1220;
}

/* The inclusion panel is independent of the explanation and comparison below. */
body.ui-study #price .figma-free-panel {
  width: calc(100vw - 32px);
  max-width: none;
  margin-inline: calc((100% - 100vw + 32px) / 2);
  padding: 96px 0;
  border: 2px solid #e9e9e4;
  border-radius: 24px;
  background: var(--figma-panel-surface);
  overflow: clip;
}

body.ui-study #price .figma-free-panel .free-cards-scene {
  width: calc(100% - 64px);
  max-width: 1080px;
  background: transparent;
}

/* Soften only the entry edge while cards fall; resting cards stay fully opaque. */
body.ui-study #price .figma-free-panel .free-cards-scene.is-falling {
  --card-entry-fade: clamp(32px, 5vw, 64px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--card-entry-fade));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--card-entry-fade));
}
body.ui-study #price .figma-free-panel .free-cards-scene.is-settled {
  -webkit-mask-image: none;
  mask-image: none;
}

body.ui-study #price .figma-free-panel .free-card {
  color: #0b1220;
  background: #fff;
  box-shadow: none;
}
body.ui-study #price .figma-free-panel :is(.free-card-connect, .free-card-subscription, .free-card-fee) {
  width: max-content;
  max-width: calc(100% - 24px);
}
body.ui-study #price .figma-free-panel .free-card strong { font-weight: 600; }
body.ui-study #price .figma-free-panel .free-card-photo strong { font-weight: 500; }
body.ui-study #price .figma-free-panel .free-card-note { color: #64748b; }
body.ui-study #price .figma-free-panel .free-store-badges span { background: #e8eef5; }
body.ui-study #price .figma-free-panel .price-booking { margin-top: 32px; }

@media (hover: hover) {
  body.ui-study :is(#product, #repeat-orders) .starter-arrow:hover { background: #e2e2dc; }
}

@media (max-width: 1023px) {
  body.ui-study :is(#product, #repeat-orders),
  body.ui-study #price .figma-free-panel { padding-block: 64px; }
  body.ui-study :is(#product, #repeat-orders) .section-heading,
  body.ui-study #price .figma-free-panel > .section-heading { margin-bottom: 64px; }
  body.ui-study :is(#product, #repeat-orders) .starter-carousel {
    --carousel-card-width: 340px;
    --card-art-height: 288px;
  }
}

@media (max-width: 767px) {
  body.ui-study :is(#product, #repeat-orders) {
    width: calc(100% - 16px);
    margin-block: 8px;
    padding-block: 48px;
    border-radius: 20px;
  }
  body.ui-study :is(#product, #repeat-orders) .section-heading,
  body.ui-study #price .figma-free-panel > .section-heading {
    width: calc(100% - 40px);
    margin-bottom: 48px;
  }
  body.ui-study :is(#product, #repeat-orders) h2,
  body.ui-study #price .figma-free-panel h2 { letter-spacing: -1px; }
  body.ui-study #product .format-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin-top: 20px;
    padding: 0;
    gap: 8px;
    overflow: visible;
    scroll-snap-type: none;
    scrollbar-width: none;
  }
  body.ui-study #product .format-rail::-webkit-scrollbar { display: none; }
  body.ui-study #product .format-rail > li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    white-space: normal;
    text-wrap: balance;
  }
  body.ui-study :is(#product, #repeat-orders) .starter-carousel {
    --carousel-gutter: 16px;
    --carousel-card-width: min(320px, calc(100vw - 52px));
    --carousel-gap: 16px;
  }
  body.ui-study :is(#product, #repeat-orders) .starter-card-copy { padding-inline: 20px; }
  body.ui-study :is(#product, #repeat-orders) .starter-carousel-controls {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 44px;
    margin-top: 20px;
    padding-inline: 16px;
    pointer-events: auto;
  }
  body.ui-study :is(#product, #repeat-orders) .starter-arrow {
    position: relative;
    inset: auto;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    transform: none;
    border: 1px solid #e2e2dc;
    border-radius: 50%;
    background: #edede7;
    color: #f58b60;
    box-shadow: none;
    pointer-events: auto;
  }
  body.ui-study :is(#product, #repeat-orders) .starter-arrow:disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
  }
  body.ui-study #price .figma-free-panel {
    width: calc(100vw - 16px);
    margin-inline: calc((100% - 100vw + 16px) / 2);
    padding-block: 48px;
    border-radius: 20px;
  }
  body.ui-study #price .figma-free-panel .free-cards-scene {
    width: calc(100% - 24px);
    height: 620px;
  }
  body.ui-study #price .figma-free-panel .free-card-stores {
    top: auto;
    bottom: 12px;
  }
  /* Intrinsic widths are also the collider widths measured by the card physics. */
  body.ui-study #price .figma-free-panel :is(.free-card-connect, .free-card-subscription, .free-card-fee) {
    width: max-content;
    max-width: calc(100% - 24px);
    padding-inline: 14px;
  }
}