/* Branded packshot scene; labels on the physical packaging stay in the photo.
   All headings and purchase actions remain real, selectable HTML. */
.beauty-collections.beauty-purchase {
  padding: 0;
  overflow: clip;
  background: #f2c8bf;
  scroll-margin-top: 20px;
}
.beauty-purchase > .beauty-page {
  position: relative;
  width: min(100%, 640px);
}
.beauty-purchase .beauty-collections__intro {
  position: absolute;
  z-index: 2;
  top: 3.4%;
  left: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 24px;
  box-sizing: border-box;
  color: var(--beauty-burgundy, #7e183c);
}
.beauty-purchase .beauty-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 600 13px/1.4 var(--beauty-sans, Arial, sans-serif);
  letter-spacing: .12em;
}
.beauty-purchase .beauty-eyebrow::before,
.beauty-purchase .beauty-eyebrow::after {
  content: '';
  height: 1px;
  flex: 0 0 28px;
  background: currentColor;
}
.beauty-purchase .beauty-section-title {
  margin: 8px 0 0;
  color: var(--beauty-burgundy, #7e183c);
  font: 450 clamp(32px, 7.8vw, 48px)/1.05 var(--beauty-sans, Arial, sans-serif);
  letter-spacing: -.045em;
}
.beauty-purchase .beauty-section-title span,
.beauty-purchase .beauty-section-title strong { display: block; }
.beauty-purchase .beauty-section-title strong { font-weight: 650; }
.beauty-purchase .beauty-collections__intro-text {
  margin-top: 6px;
  font: 500 18px/1.5 var(--beauty-sans, Arial, sans-serif);
}
.beauty-purchase .beauty-collection-grid { width: 100%; max-width: none; margin: 0; grid-template-columns: minmax(0, 1fr); gap: 0; }
.beauty-purchase .beauty-card:not(.beauty-card--coming-soon) {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 985 / 1597;
  overflow: hidden;
  background: #f2c8bf;
}
.beauty-purchase .beauty-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: transparent;
}
.beauty-purchase .beauty-card:not(.beauty-card--coming-soon) .beauty-card__image {
  object-fit: cover;
  object-position: 50% 50%;
}
.beauty-purchase .beauty-card__purchase {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 4%;
  width: min(72%, 380px);
  margin: 0;
  gap: 10px;
  transform: translateX(-50%);
}
.beauty-purchase .beauty-card__purchase .beauty-button {
  min-height: 52px;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 999px;
  font: 650 16px/1.4 var(--beauty-sans, Arial, sans-serif);
  letter-spacing: .05em;
  background: var(--beauty-burgundy, #7e183c);
  color: #fff;
}
.beauty-purchase__pricing { text-align: center; color: var(--beauty-burgundy, #7e183c); padding: 0 0 12px; }
.beauty-purchase__previous { margin: 0 0 5px; color: #a16b7d; font: 400 clamp(19px, 5vw, 24px)/1.3 var(--beauty-sans, Arial, sans-serif); }
.beauty-purchase__previous s { text-decoration-thickness: 1.5px; }
.beauty-purchase__price { margin: 0; font: 400 clamp(38px, 10vw, 52px)/1.12 var(--beauty-sans, Arial, sans-serif); letter-spacing: -.035em; }
.beauty-purchase__size { margin: 10px 0 0; font: 400 clamp(17px, 4.5vw, 20px)/1.4 var(--beauty-sans, Arial, sans-serif); }
.beauty-purchase .beauty-card__purchase .beauty-button:hover {
  background: var(--beauty-burgundy-dark, #59102a);
}
.beauty-purchase .beauty-card__purchase .beauty-card__view {
  border: 1px solid var(--beauty-burgundy, #7e183c);
  background: transparent;
  color: var(--beauty-burgundy, #7e183c);
}
.beauty-purchase .beauty-card__purchase .beauty-card__view:hover { background: #ffffff40; }
.beauty-purchase__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  fill: none;
  stroke: currentColor;
}
.beauty-purchase .beauty-button.loading > .beauty-purchase__icon { visibility: hidden; }
.beauty-purchase .beauty-card__media:focus-visible { outline-offset: -4px; }
.beauty-purchase__picture { display: block; width: 100%; height: 100%; }
/* A dedicated square photograph and a real two-column layout on desktop.
   Keep the approved portrait scene and overlay positions below this breakpoint. */
@media (min-width: 990px) {
  .beauty-collections.beauty-purchase { padding: 64px 0; background: #fff5f7; }
  .beauty-purchase > .beauty-page { width: min(calc(100% - 96px), 1280px); }
  .beauty-purchase .beauty-card:not(.beauty-card--coming-soon) {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    grid-template-rows: 1fr 1fr;
    gap: 28px 64px;
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
  }
  .beauty-purchase .beauty-collections__intro {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    padding: 0;
    text-align: left;
  }
  .beauty-purchase .beauty-eyebrow { justify-content: flex-start; gap: 14px; font-size: 12px; line-height: 1.6; letter-spacing: .14em; }
  .beauty-purchase .beauty-eyebrow::before { flex-basis: 28px; }
  .beauty-purchase .beauty-eyebrow::after { display: none; }
  .beauty-purchase .beauty-section-title { margin-top: 20px; font-size: clamp(48px, 4.8vw, 72px); line-height: 1.04; }
  .beauty-purchase .beauty-collections__intro-text { margin-top: 20px; font-size: 20px; line-height: 1.6; }
  .beauty-purchase .beauty-card__media {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    aspect-ratio: 1;
    height: auto;
    border-radius: 28px;
    box-shadow: 0 24px 64px -40px #7e183c66;
  }
  .beauty-purchase .beauty-card:not(.beauty-card--coming-soon) .beauty-card__image { object-fit: contain; }
  .beauty-purchase .beauty-card__purchase {
    position: static;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    width: min(100%, 360px);
    transform: none;
    gap: 12px;
  }
  .beauty-purchase .beauty-card__purchase .beauty-button { min-height: 56px; font-size: 15px; }
}
@media (max-width: 749px) {
  .beauty-purchase .beauty-card:not(.beauty-card--coming-soon) { min-height: 680px; }
  .beauty-purchase .beauty-eyebrow { font-size: 12px; gap: 8px; }
  .beauty-purchase .beauty-eyebrow::before,
  .beauty-purchase .beauty-eyebrow::after { flex-basis: 20px; }
  .beauty-purchase .beauty-collections__intro { padding-inline: 16px; }
  .beauty-purchase .beauty-collections__intro-text { font-size: 16px; }
  .beauty-purchase .beauty-card__purchase .beauty-button { min-height: 44px; padding: 10px 12px; font-size: 14px; gap: 10px; }
}
@media (max-width: 359px) {
  .beauty-purchase .beauty-eyebrow { font-size: 11px; letter-spacing: .06em; gap: 6px; }
  .beauty-purchase .beauty-eyebrow::before,
  .beauty-purchase .beauty-eyebrow::after { flex-basis: 14px; }
  .beauty-purchase .beauty-section-title { font-size: 30px; }
  .beauty-purchase .beauty-card__purchase { width: 80%; }
}

/* Original packaging is displayed from the supplied photograph, independently
   of the pink scene. Normal flow keeps the box clear of headings and buttons. */
.beauty-purchase:has(.beauty-purchase__original) {
  background: #faeaea;
}
.beauty-purchase:has(.beauty-purchase__original) .beauty-card:not(.beauty-card--coming-soon) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 18px;
  aspect-ratio: auto;
  min-height: 0;
  padding-bottom: 30px;
  background: transparent;
  overflow: visible;
}
.beauty-purchase:has(.beauty-purchase__original) .beauty-collections__intro {
  position: static;
  padding: 28px 20px 0;
}
.beauty-purchase:has(.beauty-purchase__original) .beauty-card__media {
  position: relative;
  inset: auto;
  width: min(80%, 330px);
  height: auto;
  aspect-ratio: 550 / 1024;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.beauty-purchase__original {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 16px #6a153b26);
}
.beauty-purchase:has(.beauty-purchase__original) .beauty-card__purchase {
  position: static;
  box-sizing: border-box;
  width: min(94%, 440px);
  margin: 0 auto;
  padding: 28px 20px 22px;
  gap: 12px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
@media (min-width: 990px) {
  .beauty-purchase:has(.beauty-purchase__original) { padding: 48px 0; }
  .beauty-purchase:has(.beauty-purchase__original) .beauty-card:not(.beauty-card--coming-soon) {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    grid-template-rows: 1fr 1fr;
    gap: 24px 64px;
    padding-bottom: 0;
  }
  .beauty-purchase:has(.beauty-purchase__original) .beauty-collections__intro { padding: 0; }
  .beauty-purchase:has(.beauty-purchase__original) .beauty-card__media { width: min(100%, 340px); }
  .beauty-purchase:has(.beauty-purchase__original) .beauty-card__purchase { width: min(100%, 440px); margin: 0; padding: 32px 28px 28px; }
}
