:root {
  --surface-default: #fff;
  --surface-card: rgb(255 255 255 / 60%);
  --surface-hover: rgb(255 255 255 / 80%);
  --surface-muted: rgb(255 255 255 / 40%);
  --text-primary: #000;
  --text-secondary: rgb(0 0 0 / 60%);
  --text-muted: rgb(0 0 0 / 40%);
  --text-disabled: rgb(0 0 0 / 20%);
  --accent-blue: #0095ff;
  --accent-pink: #ed3a79;
  --accent-yellow: #f2ff00;
  --positive: #05945b;
  --font-family-base: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-body-xlarge: 18px;
  --line-body-xlarge: 25px;
  --font-body-large: 16px;
  --line-body-large: 22px;
  --font-body-medium: 14px;
  --line-body-medium: 20px;
  --font-body-small: 12px;
  --line-body-small: 17px;
  --font-body-xsmall: 10px;
  --line-body-xsmall: 16px;
  --font-heading-medium: 28px;
  --line-heading-medium: 34px;
  --font-heading-small: 24px;
  --line-heading-small: 29px;
  --font-heading-xsmall: 20px;
  --line-heading-xsmall: 26px;
  --font-heading-xxsmall: 14px;
  --line-heading-xxsmall: 18px;
  --font-cta-small: 12px;
  --line-cta-small: 18px;
  --font-cta-large: 14px;
  --line-cta-large: 22px;
  --tracking-cta: 0.04em;
  --icon-size-xsmall: 20px;
  --icon-size-small: 24px;
  --space-2: 5px;
  --space-3: 10px;
  --space-4: 15px;
  --space-5: 20px;
  --space-6: 25px;
  --gallery-edge-gutter: 20px;
  --blur-weak: 30px;
  --radius-small: 5px;
  --radius-medium: 10px;
  --radius-large: 15px;
  --radius-xlarge: 20px;
  --status-positive-lighter: #e6f9ef;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/inter-regular.ttf") format("truetype");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/inter-semibold.ttf") format("truetype");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/inter-bold.ttf") format("truetype");
}

@font-face {
  font-family: "DM Serif Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/dm-serif-text-regular.ttf") format("truetype");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/inter-medium.ttf") format("truetype");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-bottom: 114px; }

body {
  margin: 0;
  color: var(--text-primary);
  background: #f2f2f2;
  font-family: var(--font-family-base);
}

button, a { color: inherit; font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.preview-shell {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
}

.product-page {
  position: relative;
  width: 390px;
  min-width: 390px;
  height: 1987px;
  overflow: visible;
  isolation: isolate;
  background: #fff url("assets/aurora-background.png") center top / 390px 1960px no-repeat;
}

.wishlist-page {
  position: relative;
  width: 390px;
  min-width: 390px;
  min-height: 100vh;
  isolation: isolate;
  background: #fff url("assets/aurora-background.png") center top / 390px 1960px no-repeat;
}
.wishlist-header { position: relative; height: 124px; }
.wishlist-status-bar { position: absolute; inset: 0 0 auto; width: 390px; height: 40px; }
.wishlist-back { position: absolute; top: 50px; left: 20px; }
.wishlist-content { padding: 20px; }
.wishlist-content h1 { margin: 0; font-size: var(--font-heading-xsmall); line-height: var(--line-heading-xsmall); font-weight: 600; }
.wishlist-empty { margin: 24px 0 0; color: var(--text-secondary); font-size: var(--font-body-medium); line-height: var(--line-body-medium); font-weight: 500; }
.wishlist-continue { display: flex; width: 170px; height: 40px; margin-top: 24px; text-decoration: none; }

.sticky-header {
  position: sticky;
  top: -40px;
  z-index: 10;
  width: 390px;
  height: 114px;
  background: transparent;
  transition: background-color 180ms ease, backdrop-filter 180ms ease;
}
.sticky-header.is-scrolled {
  background-color: rgb(255 255 255 / 20%);
  backdrop-filter: blur(var(--blur-weak));
  -webkit-backdrop-filter: blur(var(--blur-weak));
}
.status-bar { position: absolute; inset: 0 0 auto; width: 390px; height: 40px; }

.top-bar {
  position: absolute;
  top: 53px;
  left: 20px;
  width: 350px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.icon-button {
  display: grid;
  place-items: center;
  width: var(--icon-size-small);
  height: var(--icon-size-small);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.icon-button img { display: block; }
.top-actions { display: flex; align-items: center; gap: var(--space-5); }

.section-nav {
  position: absolute;
  top: 87px;
  left: 20px;
  width: 370px;
  height: 27px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  z-index: 1;
}

.section-nav::-webkit-scrollbar { display: none; }

.section-nav a {
  flex: none;
  scroll-snap-align: start;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-body-small);
  font-weight: 500;
  line-height: var(--line-body-small);
  text-transform: uppercase;
}

.section-nav a.active { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.gallery {
  position: absolute;
  top: 124px;
  left: 0;
  width: 390px;
  height: 408px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery:focus { outline: none; }
.gallery:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

.gallery-track { display: flex; width: max-content; gap: var(--space-4); height: 408px; }
.gallery-edge-spacer { display: block; flex: 0 0 calc(var(--gallery-edge-gutter) - var(--space-4)); }
.gallery-card { position: relative; flex: none; border-radius: var(--radius-medium); overflow: hidden; background: var(--surface-default); }
.hero-card, .product-detail-card, .review-card { width: 300px; height: 408px; }
.hero-layer { position: absolute; display: block; object-fit: cover; }
.hero-base { left: -1px; top: 0; width: 301px; height: 408px; }
.hero-model { left: calc(50% + 0.5px); top: -11px; width: 315px; height: 429px; transform: translateX(-50%); }
.ds-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: var(--radius-small);
  color: var(--text-primary);
  background: rgb(255 255 255 / 60%);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  text-transform: uppercase;
  font-size: var(--font-cta-large);
  line-height: var(--line-cta-large);
  font-weight: 600;
  letter-spacing: var(--tracking-cta);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, opacity 140ms ease;
}
.ds-button:hover:not(:disabled):not([aria-disabled="true"]) {
  background: radial-gradient(ellipse 60px 20px at center, #fff 38.462%, rgb(255 255 255 / 40%) 100%);
}
.ds-button:active:not(:disabled):not([aria-disabled="true"]) { background: var(--surface-default); }
.ds-button:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.ds-button:disabled, .ds-button[aria-disabled="true"] {
  color: var(--text-disabled);
  background: var(--surface-muted);
  cursor: not-allowed;
}
.shop-look { position: absolute; left: 15px; bottom: 15px; width: 150px; height: 40px; padding: 0; white-space: nowrap; }
.gallery-column { flex: none; width: 145px; height: 408px; display: flex; flex-direction: column; gap: 14px; }
.narrow-card { width: 145px; height: 197px; }
.narrow-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.quote-card { position: relative; width: 145px; height: 197px; border-radius: var(--radius-medium); overflow: hidden; color: #fff; background: var(--accent-blue); }
.quote-layout { position: absolute; top: 20px; left: 20px; width: 105px; height: 157px; display: flex; flex-direction: column; justify-content: space-between; }
.quote-open, .quote-close-rotate p { width: 100%; height: 8px; margin: 0; font-size: 30px; line-height: normal; font-weight: 600; }
.quote-body { width: 100%; margin: 0; font-size: var(--font-body-xlarge); line-height: var(--line-body-xlarge); font-weight: 500; text-align: center; }
.quote-body p { margin: 0; }
.quote-close-wrap { width: 100%; display: flex; align-items: center; justify-content: center; }
.quote-close-rotate { flex: none; width: 100%; transform: rotate(180deg); }
.product-detail-card img { position: absolute; left: calc(50% + 0.5px); top: -15px; width: 315px; height: 429px; transform: translateX(-50%); object-fit: cover; }
.offer-tile { position: relative; width: 145px; height: 197px; border-radius: var(--radius-medium); background: var(--accent-yellow); overflow: hidden; }
.offer-copy { position: absolute; left: 50%; top: 50%; width: 95px; display: flex; flex-direction: column; gap: var(--space-2); transform: translate(-50%, -50%); }
.eyebrow { display: block; color: var(--text-muted); font-size: var(--font-body-xsmall); line-height: 10px; font-weight: 600; letter-spacing: var(--tracking-cta); text-transform: uppercase; }
.offer-message { width: 95px; font-size: var(--font-body-large); line-height: var(--line-body-large); font-weight: 500; }
.offer-message p { margin: 0; }
.offer-discount { position: absolute; left: -22px; top: -22px; display: block; }
.review-card { position: relative; }
.review-photo { position: absolute; display: block; max-width: none; object-fit: cover; }
.pink-review-photo { left: -7px; top: -170.22px; width: 315.317px; height: 599.448px; }
.blue-review-photo { left: -6px; top: -168.32px; width: 313.315px; height: 595.642px; }
.review-copy { position: absolute; left: 0; bottom: 0; width: 100%; padding: 20px 0 0; color: #fff; }
.pink-review-copy { background: var(--accent-pink); }
.blue-review-copy { background: var(--accent-blue); }
.review-copy-inner { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.pink-review-copy { padding: 20px; }
.pink-review-copy .review-copy-inner { width: 260px; }
.blue-review-copy { padding: 20px; }
.blue-review-copy .review-copy-inner { width: 260px; }
.review-open, .review-close-rotate p { width: 100%; height: 8px; margin: 0; font-size: 30px; line-height: normal; font-weight: 600; text-box-edge: cap alphabetic; text-box-trim: trim-both; }
.review-text { width: 100%; margin: 0; font-size: var(--font-body-medium); line-height: var(--line-body-medium); font-weight: 400; }
.review-close-wrap { width: 100%; display: flex; align-items: center; justify-content: center; }
.review-close-rotate { flex: none; width: 100%; transform: rotate(180deg); }
.back-view-card img { position: absolute; left: 0; top: calc(50% - 1px); width: 148px; height: 201px; transform: translateY(-50%); object-fit: cover; }
.fabric-detail-card img { position: absolute; left: -34px; top: -69px; width: 214px; height: 291px; max-width: none; object-fit: cover; }

.product-info {
  position: absolute;
  top: 627px;
  left: 20px;
  width: 350px;
  height: 668px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
}

.summary { width: 100%; height: 107px; flex: none; }
.title-rating { display: flex; align-items: flex-start; gap: 15px; width: 100%; }
.title-rating h1 { flex: 1; min-width: 0; margin: 0; color: var(--text-primary); font-family: "DM Serif Text", Georgia, serif; font-size: var(--font-heading-small); line-height: var(--line-heading-small); font-weight: 400; }
.rating-column { flex: none; display: flex; align-items: flex-end; flex-direction: column; gap: 10px; }
.rating-pill { height: 35px; min-width: 69px; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 10px; border: 1px solid #fff; border-radius: var(--radius-small); background: var(--surface-muted); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.rating-star { position: relative; display: block; flex: none; width: 16px; height: 16px; overflow: hidden; }
.rating-star img { position: absolute; left: -15.6667px; top: -13.6667px; display: block; width: 47.3334px; height: 46.68px; max-width: none; }
.rating-number { color: var(--text-primary); font-size: var(--font-body-large); line-height: var(--line-body-large); font-weight: 500; }
.tertiary-medium { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; color: var(--text-primary); background: transparent; font-family: var(--font-family-base); font-size: var(--font-cta-small); line-height: var(--line-cta-small); font-weight: 500; letter-spacing: 0.04em; text-decoration: underline; text-underline-position: from-font; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.tertiary-medium:hover, .tertiary-medium:active, .tertiary-medium:focus-visible { font-weight: 700; }
.tertiary-medium[aria-disabled="true"] { color: var(--text-disabled); font-weight: 500; pointer-events: none; }
.price-row { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.price { font-family: var(--font-family-base); font-size: var(--font-heading-xsmall); line-height: var(--line-heading-xsmall); font-weight: 600; }
.old-price { color: var(--text-muted); font-size: var(--font-body-medium); line-height: var(--line-body-medium); font-weight: 400; text-decoration: line-through; }
.discount-label { color: var(--positive); font-size: var(--font-heading-xxsmall); line-height: var(--line-heading-xxsmall); font-weight: 500; }

.coupon { position: relative; display: flex; flex: none; width: 350px; height: 102px; align-items: flex-start; gap: 66px; padding: 15px 15px 15px 57px; overflow: hidden; border-radius: var(--radius-medium); background: var(--status-positive-lighter); }
.coupon-tag { position: absolute; inset: 0 auto 0 0; z-index: 1; width: 57px; color: #fff; background: var(--positive); border-radius: var(--radius-medium); }
.coupon-tag-label { position: absolute; top: calc(50% - 33px); left: 8px; display: flex; width: 22px; height: 65px; align-items: center; justify-content: center; }
.coupon-tag-label > span { flex: none; width: max-content; font-size: 14px; line-height: 22px; font-weight: 600; letter-spacing: .56px; white-space: nowrap; transform: rotate(-90deg); }
.coupon-tag-cover { position: absolute; top: 0; left: 37px; width: 74px; height: 102px; border-radius: var(--radius-medium); background: var(--status-positive-lighter); }
.coupon-copy { position: relative; z-index: 2; width: 171px; height: 72px; display: flex; flex: none; flex-direction: column; justify-content: space-between; }
.coupon-message { margin: 0; color: var(--text-primary); font-size: 16px; line-height: 22px; font-weight: 500; }
.coupon-message strong { font-weight: 700; }
.coupon-copy a { width: fit-content; color: var(--text-secondary); text-decoration: none; font-size: 12px; line-height: 17px; font-weight: 500; }
.coupon-copy a:hover, .coupon-copy a:focus-visible { text-decoration: underline; }
.apply-button { position: relative; z-index: 2; margin-top: 2px; }
.coupon-art { position: absolute; z-index: 0; top: 40px; left: 231px; width: 104px; height: 104px; background: linear-gradient(90deg, rgb(5 148 91 / 13%) 39.344%, rgb(230 249 239 / 13%) 81.967%); -webkit-mask: url("assets/coupon-watermark-figma.png") center / 104px 104px no-repeat; mask: url("assets/coupon-watermark-figma.png") center / 104px 104px no-repeat; }

.color-section { width: calc(100% + 20px); height: 139px; flex: none; overflow: visible; }
.section-label { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 20px; font-weight: 400; }
.color-options { display: flex; align-items: flex-start; gap: 10px; width: calc(100% + 24px); margin-top: -9px; margin-left: -24px; padding: 24px 24px 36px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-left: 24px; }
.color-options::-webkit-scrollbar { display: none; }
.color-option { position: relative; display: block; flex: none; width: 78px; height: 104px; padding: 0; overflow: hidden; border: 1px solid transparent; border-radius: var(--radius-medium); background: transparent; cursor: pointer; scroll-snap-align: start; }
.color-option img { position: absolute; top: 0; left: 0; display: block; width: 76px; height: 102px; object-fit: cover; border-radius: 9px; }
.color-option.selected { border: 1px solid transparent; background: linear-gradient(224.48deg, #ffffff 0%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0.6) 66%, rgba(255, 255, 255, 0.3) 78%, #ffffff 100%) border-box; box-shadow: 0 8px 24px #0000001f; }
.color-option.extra-color { width: 9px; }

.size-section { width: 100%; height: 120px; flex: none; }
.size-heading { display: flex; align-items: center; justify-content: space-between; height: 20px; }
.size-links { display: flex; gap: 20px; align-items: center; }
.size-options { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; margin-top: 15px; }
.segmented-control button { display: flex; flex: 0 0 50px; width: 50px; height: 50px; align-items: center; justify-content: center; padding: 10px 12px; border: 1px solid #fff; border-radius: var(--radius-medium); background: rgb(255 255 255 / 40%); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); color: var(--text-primary); font-family: var(--font-family-base); font-size: 16px; line-height: 22px; font-weight: 400; cursor: pointer; }
.segmented-control button.selected { border-color: transparent; background: var(--surface-default); box-shadow: 0 2px 8px rgb(0 0 0 / 9%); }
.model-note { margin: 10px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 17px; }

.features { position: absolute; top: 552px; left: 20px; width: 100%; height: 45px; }
.feature-strip-viewport { position: relative; width: calc(100% + 40px); height: 45px; margin-left: -20px; overflow: hidden; }
.feature-chip-strip { display: flex; align-items: center; gap: 10px; width: calc(100% + 11px); height: 45px; margin: 0 0 0 -11px; padding-right: 20px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.feature-chip-strip::-webkit-scrollbar { display: none; }
.feature-chip { display: inline-flex; flex: none; align-items: center; justify-content: center; height: 32px; margin: 0; padding: 0 15px; overflow: hidden; border-radius: var(--radius-small); background: var(--surface-card); color: #171717; font-size: var(--font-body-medium); line-height: var(--line-body-medium); font-weight: 400; white-space: nowrap; }
.feature-highlight { display: inline-flex; flex: none; align-items: center; justify-content: flex-end; width: 127px; height: 45px; margin: 0; padding: 0; overflow: hidden; border: 0; border-top: 1px solid #fff; border-right: 1px solid #fff; border-bottom: 1px solid #fff; border-radius: var(--radius-medium); background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, var(--status-positive-lighter) 55%, #edfcf5 100%); color: var(--positive); font-size: var(--font-body-medium); line-height: var(--line-body-medium); font-weight: 500; white-space: nowrap; }
.feature-highlight-content { display: flex; flex: none; align-items: center; gap: 6px; padding: 0 10px 0 13px; }
.feature-highlight-icon { display: block; flex: none; }
.feature-highlight-pinned-overlay { position: absolute; z-index: 3; top: 0; left: -11px; display: block; opacity: 0; pointer-events: none; will-change: opacity, transform; }

.bottom-purchase-bar { position: fixed; z-index: 20; bottom: 0; left: 50%; width: 390px; max-width: 100vw; padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateX(-50%); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
.bottom-purchase-actions { display: flex; align-items: center; gap: 15px; padding: 10px 20px; background: var(--surface-card); }
.purchase-wishlist { flex: 0 0 50px; width: 50px; height: 50px; padding: 0; text-decoration: none; }
.purchase-wishlist img, .purchase-add-to-cart img { display: block; flex: none; }
.purchase-add-to-cart { display: flex; flex: 1; min-width: 0; height: 50px; align-items: center; justify-content: center; gap: 10px; padding: 0 15px; border: 0; border-radius: var(--radius-small); background: var(--text-primary); color: var(--surface-default); font-family: var(--font-family-base); font-size: var(--font-cta-large); line-height: var(--line-cta-large); font-weight: 600; letter-spacing: var(--tracking-cta); text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color 160ms ease; }
.purchase-add-to-cart:hover { background: #242424; }
.purchase-add-to-cart:active { background: #3d3d3d; }
.purchase-add-to-cart:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.bottom-home-area { display: flex; height: 24px; align-items: center; justify-content: center; background: var(--surface-card); }
.bottom-home-indicator { display: block; width: 140px; height: 4px; border-radius: 104px; background: var(--text-disabled); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (min-width: 700px) {
  .preview-shell { padding: 28px; }
  .product-page { border-radius: 12px; box-shadow: 0 18px 55px rgb(0 0 0 / 18%); }
}

@media (max-width: 389px) {
  .preview-shell { justify-content: flex-start; overflow-x: auto; }
}