.products-intro {
  display: grid;
  grid-template-columns: 90px 1fr .7fr;
  gap: 5vw;
  align-items: end;
  padding: 8rem 8vw;
  background: var(--paper);
}

.products-intro > p {
  max-width: 470px;
  margin: 0;
  color: var(--muted);
}

.product-showcase {
  display: grid;
  grid-template-columns: minmax(250px, .62fr) minmax(0, 1.6fr);
  gap: 6vw;
  padding: 0 8vw 6rem;
  background: var(--paper);
}

.showcase-heading {
  align-self: center;
  padding-bottom: 2rem;
}

.showcase-heading h2 { font-size: clamp(2.5rem, 3.8vw, 4.2rem); }

.showcase-heading > p:last-child {
  max-width: 420px;
  margin: 2rem 0 0;
  color: var(--muted);
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  align-items: stretch;
}

.product-shot {
  display: grid;
  grid-template-rows: auto 5.4rem;
  min-width: 0;
  margin: 0;
}

.product-media {
  position: relative;
  height: clamp(210px, 22vw, 315px);
  overflow: hidden;
}

.product-media img {
  position: absolute;
  left: 50%;
  bottom: calc(14px + var(--source-bottom));
  display: block;
  width: auto;
  height: var(--source-height);
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: translateX(-50%);
  transform-origin: center bottom;
  transition: transform .35s ease;
}

.product-shot:hover img { transform: translateX(-50%) scale(1.045); }
.product-image-trigger,.product-name-trigger { width:100%; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.product-image-trigger { display:block; border-radius:100px 100px 18px 18px; }
.product-image-trigger .product-media { display:block; }
.product-name-trigger { font-family:var(--dermalogica); font-size:.92rem; font-weight:700; line-height:1.08; letter-spacing:-.035em; text-transform:lowercase; }
.product-name-trigger span { display:block; margin-bottom:.22rem; font:600 .58rem/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase; }

.product-shot-precleanse { --source-height: 100%; --source-bottom: -8.5%; }
.product-shot-cleanser { --source-height: 88.3%; --source-bottom: -5%; }
.product-shot-exfoliant { --source-height: 96.6%; --source-bottom: -8.45%; }
.product-shot-toner { --source-height: 86.5%; --source-bottom: -4.16%; }
.product-shot-moisturiser { --source-height: 118%; --source-bottom: -11%; }
.product-shot-spf { --source-height: 86.7%; --source-bottom: -4.44%; }

.product-shot figcaption {
  padding: .8rem 0 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font: .95rem/1.25 var(--serif);
}

.product-shot figcaption span {
  display: block;
  margin-bottom: .2rem;
  font: 600 .58rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.range {
  padding: 0 8vw 9rem;
  background: var(--paper);
}

.range-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.range-card {
  min-width: 0;
  min-height: 360px;
  padding: 3rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.range-card > span {
  font-size: .65rem;
  letter-spacing: .13em;
  color: var(--muted);
}

.range-card h2 {
  margin-top: 3.5rem;
  font-size: clamp(2.4rem, 4vw, 4rem);
}

.range-card p {
  max-width: 510px;
  margin: 1.2rem 0 0;
  color: var(--muted);
}

.stock-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8vw;
  padding: 9rem 8vw;
  background: var(--clay);
  color: #fff9f0;
}

.stock-note > div > p:last-of-type {
  max-width: 600px;
  margin: 2rem 0;
  opacity: .82;
  font-weight: 300;
}

.stock-steps { border-top: 1px solid rgba(255,255,255,.3); }

.stock-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 1.5rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid rgba(255,255,255,.3);
}

.stock-step span { padding-top: .25rem; font-size: .65rem; }
.stock-step h3 { margin: 0 0 .35rem; font: 1.8rem var(--serif); }
.stock-step p { margin: 0; opacity: .75; font-size: .9rem; }

.product-faq {
  padding: 9rem 8vw;
  background: var(--cream);
}

.product-faq-heading {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 5vw;
  margin-bottom: 5rem;
}

.faq-list { max-width: 980px; margin-left: auto; }

.faq-item {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 5vw;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
}

.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item h3 { margin: 0; font: 1.7rem var(--serif); }
.faq-item p { margin: 0; color: var(--muted); }

@media (max-width: 1000px) {
  .products-intro {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 6rem 6vw;
  }

  .product-showcase { grid-template-columns: 1fr; gap: 2.5rem; padding: 0 6vw 5rem; }
  .showcase-heading { max-width: 650px; padding: 0; }
  .showcase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .range { padding: 0 6vw 6rem; }
  .range-grid, .stock-note { grid-template-columns: 1fr; }
  .range-card { min-height: auto; padding: 2rem; }
  .range-card h2 { margin-top: 2rem; }
  .stock-note, .product-faq { padding: 6rem 6vw; }
  .product-faq-heading, .faq-item { grid-template-columns: 1fr; gap: 1rem; }
  .product-faq-heading { margin-bottom: 3rem; }
}

@media (max-width: 620px) {
  .page-hero-products h1 { font-size:clamp(4rem,20vw,6rem); }
  .page-hero-products { background-position:60% center; }
  .page-hero-products::before { background:linear-gradient(90deg,rgba(225,213,196,.98),rgba(225,213,196,.76) 74%,rgba(225,213,196,.2)); }

  .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .product-media { height: 178px; }
  .product-media img { bottom: calc(14px + var(--source-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .product-shot img { transition: none; }
}
.page-hero-products {
  background: url("assets/skin-with-rachel-products-hero.jpg") center/cover no-repeat;
  color: var(--ink);
}

.page-hero-products::before {
  background: linear-gradient(90deg, rgba(225,213,196,.98) 0%, rgba(225,213,196,.88) 36%, rgba(225,213,196,.32) 62%, rgba(225,213,196,.04) 100%);
}

.page-hero-products .hero-copy > p:not(.eyebrow) { opacity: .72; }
.page-hero-products .hero-link { border-color: rgba(31,41,35,.5); }