/* landing-page-v2 top section (/v2 only) — the layout of the live shop page
   qureskincare.com/pages/micro-infusion-system-v5: title, claims and buy box in the left column,
   gallery, accordions, guarantee and jump links in the right. On a phone the order is v5's:
   gallery, title and claims, buy box, then the rest. Type and colour come from the redesign
   tokens in redesign-base.css (the customer kit), so nothing here sets a raw brand colour. */

/* v5's width: a 1200px content column (1232 container) where our sections use 1120. Raised for the
   whole /v2 page; every rd-section reads --rd-container. Scoped to /v2's <html> attribute rather than
   :root, because redesign-base.css redeclares :root later in the page and would win. */
html[data-offer-page="v2"], html[data-offer-page="v3"] { --rd-container: 1240px; }

.v2-top {
  padding: 60px 0 0;
  background: #fff;
}
.v2-top__grid {
  max-width: var(--rd-container);
  margin-inline: auto;
  padding-inline: var(--rd-gutter);
  display: grid;
  grid-template-columns: minmax(0, 570px) minmax(0, 570px);
  justify-content: space-between;
  align-items: start;
  gap: 60px;
}
.v2-top__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---- left: title, lede, rating, claims ---- */
.v2-top__title {
  margin: 0 0 20px;
  font-family: var(--heading-font-family), Georgia, serif;
  font-weight: 300;
  font-size: var(--rd-fs-display);
  line-height: var(--rd-lh-display);
  color: var(--rd-ink);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rd-hairline);
}
.v2-top__lede {
  max-width: 335px;
  margin: 0 0 30px;
  font-family: var(--base-font-family), system-ui, sans-serif;
  font-size: var(--rd-fs-label);
  line-height: var(--rd-lh-display);
  color: var(--rd-body);
}
.v2-top__lede strong { font-weight: 600; }
.v2-top__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rd-hairline);
  font-family: var(--base-font-family), system-ui, sans-serif;
  font-size: var(--rd-fs-nav);
  color: var(--rd-body);
}
.v2-top__rating { max-width: 335px; }
/* v5's Trustpilot stars: green #06da8d over grey #dfe0e0, filled to 4.8 of 5 (page.micro-infusion-system-v5.css,
   .c-rating--trustpilot). Trustpilot's own colour, so it is a raw hex on purpose, not a brand token. */
.v2-top__stars { position: relative; display: inline-block; line-height: 0; }
.v2-top__stars-row { display: inline-flex; gap: 3px; }
.v2-top__stars-row svg { display: block; }
.v2-top__stars-row svg { width: 20px; height: 20px; fill: #dfe0e0; }
.v2-top__stars-row--on { position: absolute; top: 0; left: 0; width: calc(4.8 / 5 * 100%); overflow: hidden; }
.v2-top__stars-row--on svg { fill: #06da8d; flex: 0 0 20px; }
.v2-top__score b { font-weight: 600; }
.v2-top__tp { height: 26px; width: auto; display: block; }
.v2-top__claims {
  max-width: 335px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 10px;
  font-family: var(--base-font-family), system-ui, sans-serif;
  font-size: var(--rd-fs-note);
  line-height: 1.35;
  color: var(--rd-body);
}
.v2-top__claims li { display: flex; align-items: center; gap: 12px; }
.v2-top__jump svg,
.v2-gallery__arrow svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* v5's icon-font glyphs: filled, 16px, black */
.v2-top__claims .v2-glyph { width: 16px; height: 16px; flex: 0 0 16px; fill: #000; stroke: none; }

/* ---- the subscription buy box (purchase-form.js) sits in the left column here, so it drops its own
   band, heading and product image: v5 shows the product in the gallery on the right. Everything
   inside the card (steps, options, prices, CTA, Klarna line, one-time link) is untouched. ---- */
.v2-top #purchase-form,
main .v2-top #purchase-form {
  background: transparent;
  padding: 0;
  margin: 0;
}
.v2-top #purchase-form .pf-container { max-width: none; padding: 0; }
.v2-top #purchase-form .pf-grid { display: block; }
/* heading, "Cancel anytime…" line and product image all off on /v2 (Marko's QA, 16 Oct): v5 has none of them */
.v2-top #purchase-form .pf-left { display: none; }
/* v5 carries the dermatologists line on the right, under the accordions, not in the buy box */
.v2-top #purchase-form .pf-derm { display: none; }
/* the buy box's own accordions (what it does, ingredients, what is in the supply) are off on /v2: the right
   column's Key Benefits / How It Works / What's Included carry the same, as on v5 (Marko, 16 Oct) */
.v2-top #purchase-form .pf-acc-group { display: none; }
/* v5's Best Value: an orange tab hanging inside the card's top edge, no star. Ours sat above the card on a
   30px margin, which opened a gap under "Subscribe & Save:" that step 1 does not have. */
.v2-top #purchase-form .pf-supply--best { margin-top: 0; padding-top: 28px; }
.v2-top #purchase-form .pf-supply .pf-best {
  top: -2px;
  right: 14px;
  padding: 1px 14px;
  border-radius: 0 0 5px 5px;
  background: var(--rd-accent);
  font-size: var(--rd-fs-note);
  font-weight: 600;
  line-height: 18px;
}
.v2-top #purchase-form .pf-supply .pf-best::after { display: none; }
/* v5's product tiles (.c-options-selector, measured 18 Oct): a 1px #dfe0e0 ring drawn as an inset shadow,
   10px corners, 14px padding, no fill; the picture sits straight on the tile at 80x61 (no panel); label 18px
   regular, black. Selected: Mist fill and a 2px black ring (1px inset + 1px outset), so the tile does not move. */
.v2-top #purchase-form .pf-prod {
  border: 0;
  border-radius: 10px;
  padding: 14px;
  background: transparent;
  box-shadow: inset 0 0 0 1px #dfe0e0;
}
.v2-top #purchase-form .pf-prod:hover { box-shadow: inset 0 0 0 1px #bdbdbd; }
.v2-top #purchase-form .pf-prod.sel {
  background: var(--rd-surface);
  box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #000;   /* v5: black, not charcoal */
}
.v2-top #purchase-form .pf-prod .pf-vial {
  height: 61px;
  margin: 3px 0 14px;
  border: 0;
  border-radius: 0;
  background: none;
}
.v2-top #purchase-form .pf-prod .pf-vial img { width: 80px; height: 61px; padding: 0; object-fit: contain; }
.v2-top #purchase-form .pf-prod .pf-prod-name { font-size: 18px; font-weight: 400; line-height: 1.4; color: #000; }   /* 18px on phone too, and black, as v5 */

/* v5's supply option: the kit's picture on the left (65px), then name and meta, price on the right */
.v2-top #purchase-form .pf-supply-top { align-items: center; gap: 14px; }
.v2-top #purchase-form .pf-supply-top > div:not(.pf-supply-price) { flex: 1; min-width: 0; }
/* a fixed 65px square, picture fitted inside: the Rejuvenating and Brightening shots are different shapes (3-month:
   250x218 vs 250x250), and a height that followed the picture made the card jump 8px on every switch (Marko 2026-10-27) */
.v2-top #purchase-form .v2-supply-img { flex: 0 0 65px; width: 65px; height: 65px; object-fit: contain; display: block; }
.v2-top #purchase-form .v2-supply-img[hidden] { display: none; }
.v2-top #purchase-form .pf-card { border: 0; border-radius: 0; padding: 0; box-shadow: none; background: transparent; }
/* v5's buy box is 500px wide with plain step labels: no numbered circles and no rail down the side */
.v2-top #purchase-form { max-width: 500px; }
.v2-top #purchase-form .pf-step { padding-left: 0; }
.v2-top #purchase-form .pf-step::before,
.v2-top #purchase-form .pf-step .pf-num { display: none; }
.v2-top #purchase-form .pf-step-head { min-height: 0; margin: 0 0 14px; }
/* v5's CTA spans the buy box */
.v2-top #purchase-form .pf-cta { display: block; width: 100%; max-width: none; }

/* ---- right: gallery ---- */
.v2-gallery__stage {
  display: flex;
  border-radius: var(--rd-radius-card);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: #fff;
  aspect-ratio: 1080 / 982;
  cursor: grab;
  touch-action: pan-x pan-y;
}
.v2-gallery__stage::-webkit-scrollbar { display: none; }
.v2-gallery__stage.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.v2-gallery__stage.is-dragging .v2-gallery__slide { pointer-events: none; }
.v2-gallery__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  user-select: none;
  -webkit-user-drag: none;
}
.v2-gallery__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.v2-gallery__thumbs {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.v2-gallery__thumbs::-webkit-scrollbar { display: none; }
.v2-gallery__thumb {
  flex: 0 0 72px;
  height: 66px;
  padding: 0;
  border: 1px solid var(--rd-hairline);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  scroll-snap-align: start;
}
.v2-gallery__thumb.is-active { border: 2px solid var(--rd-ink); }
.v2-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-gallery__arrow {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rd-hairline);
  background: #fff;
  color: var(--rd-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.v2-gallery__arrow svg { width: 20px; height: 20px; }
.v2-gallery__arrow:disabled { opacity: .35; cursor: default; }

/* ---- right: accordions, guarantee, jump links ---- */
.v2-top__more { margin-top: 40px; font-family: var(--base-font-family), system-ui, sans-serif; color: var(--rd-body); }
.v2-acc__item { border-bottom: 1px solid var(--rd-ink); }
.v2-acc__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  font-size: var(--rd-fs-nav);
  color: var(--rd-ink);
}
.v2-acc__item summary::-webkit-details-marker { display: none; }
.v2-acc__sign { position: relative; width: 14px; height: 14px; flex: 0 0 14px; }
.v2-acc__sign::before,
.v2-acc__sign::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1.5px; background: var(--rd-ink); }
.v2-acc__sign::after { transform: rotate(90deg); transition: transform .2s ease; }
.v2-acc__item[open] .v2-acc__sign::after { transform: rotate(0deg); }
.v2-acc__body { padding: 0 0 18px; font-size: var(--rd-fs-note); line-height: var(--rd-lh-body); }
.v2-acc__body p { margin: 0 0 10px; }
.v2-acc__body ul,
.v2-acc__body ol { margin: 0 0 10px; padding-left: 20px; }

/* v5's .c-certified-box: two avatars and a mint "+50", on Mist */
.v2-top__certified {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 40px;
  padding: 10px 20px;
  border-radius: 5px;
  background: var(--rd-surface);
  font-size: var(--rd-fs-note);
  line-height: 18px;
}
.v2-top__certified ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.v2-top__certified li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--rd-surface);
  border-radius: 50%;
  background: var(--rd-mint);
  font-size: 12px;
  font-weight: 600;
  color: var(--rd-ink);
}
.v2-top__certified li + li { margin-left: -8px; }
.v2-top__certified img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-top__certified p { margin: 0; }
.v2-top__certified strong { font-weight: 600; }
.v2-top__certified a { color: inherit; text-decoration: underline; }

.v2-top__guarantee {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  padding: 20px 24px;
  border-radius: var(--rd-radius-card);
  background: var(--rd-surface);
}
.v2-top__guarantee img { width: 81px; height: 80px; flex: 0 0 81px; }
.v2-top__guarantee p { margin: 0; font-size: var(--rd-fs-nav); line-height: 1.4; }
.v2-top__guarantee strong { font-weight: 600; }

.v2-top__jump { margin-top: 40px; }
.v2-top__jump p { margin: 0 0 12px; font-size: var(--rd-fs-nav); color: var(--rd-ink); }
.v2-top__jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.v2-top__jump a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;   /* v5's chip height; 44 on a phone (kit tap target) */
  padding: 0 24px;
  border: 1px solid var(--rd-ink);
  border-radius: var(--rd-radius-pill);
  font-size: var(--rd-fs-nav);
  color: var(--rd-ink);
  text-decoration: none;
}
.v2-top__jump svg { width: 14px; height: 14px; }

/* the jump links land below the sticky header */
#the-results, #how-it-works, #reviews, #how-to-use, #ingredients, #faq { scroll-margin-top: 80px; }

/* ---- tablet and phone: one column in v5's phone order ---- */
@media (max-width: 880px) {
  .v2-top { padding-top: 16px; }
  .v2-top__lede, .v2-top__rating, .v2-top__claims, .v2-top #purchase-form { max-width: none; }
  .v2-top__grid { display: flex; flex-direction: column; gap: 0; padding-inline: 16px; }
  .v2-top__col { display: contents; }
  /* flex items size to their content by default; the thumb strip would push the column to ~870px */
  .v2-gallery, .v2-top__info, .v2-top__more, .v2-top #purchase-form { width: 100%; min-width: 0; }
  .v2-gallery { order: 1; margin-bottom: 24px; }
  .v2-top__info { order: 2; }
  .v2-top #purchase-form-slot,
  .v2-top #purchase-form { order: 3; }
  .v2-top__more { order: 4; }
  /* v5's phone sizes, measured at 390 (16 Oct): title 32, lede 18; the kit's phone tokens run smaller */
  .v2-top__title { font-size: 32px; margin-bottom: 16px; padding-bottom: 16px; }
  .v2-top__lede { font-size: 18px; }
  .v2-top__claims { font-size: 16px; margin-bottom: 24px; }
  .v2-top__stars-row svg, .v2-top__stars-row--on svg { width: 15px; height: 15px; flex-basis: 15px; }
  .v2-top__tp { height: 20px; }
  .v2-top__jump a { min-height: 44px; padding: 0 18px; }   /* kit: 44px tap targets on a phone */
  .v2-gallery__thumb { flex-basis: 60px; height: 56px; }
}

/* clinical study on desktop: draggable, and the incoming slide moves in from its side (v2-top.js) */
@media (min-width: 881px) {
  /* the rail has no box of its own on desktop (display: contents), so the cursor sits on the slides */
  [data-rd-carousel="clinical"] [data-rd-slide] { cursor: grab; touch-action: pan-y; user-select: none; }
  [data-rd-carousel="clinical"] [data-cs-rail].is-grabbing [data-rd-slide] { cursor: grabbing; }
  [data-rd-carousel="clinical"] [data-cs-rail] img { -webkit-user-drag: none; }
}
.v2-slide-in { animation: v2-slide-in .32s ease-out; }
.v2-slide-in--back { animation: v2-slide-in-back .32s ease-out; }
@keyframes v2-slide-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes v2-slide-in-back { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v2-slide-in, .v2-slide-in--back { animation: none; } }