/** Shopify CDN: Minification failed

Line 349:0 Unexpected "}"

**/
/* ===========================================================================
   PHOTO AND VIDEO
   Two panels filling the width with nothing between them, words laid over the
   left one. Built for the About page hero.
   =========================================================================== */

.fc-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  overflow: hidden;
  border-radius: var(--fc-radius-card, 2rem);
}

.fc-duo__panel {
  position: relative;
  overflow: hidden;
  background: var(--fc-ground-2);
}

/* the two halves keep the same shape as each other so the seam runs clean */
.fc-duo--square .fc-duo__panel { aspect-ratio: 1 / 1; }

/* a shade taller than square. Square panels read squat beside the product
   block, which stands 510 to a card. */
.fc-duo--taller .fc-duo__panel { aspect-ratio: 1 / 1.16; }

.fc-duo--tall   .fc-duo__panel { aspect-ratio: 4 / 5; }

.fc-duo--wide   .fc-duo__panel { aspect-ratio: 5 / 4; }

.fc-duo__image,
.fc-duo__video,
.fc-duo__panel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fc-duo__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  color: var(--fc-ink-soft);
  font-size: 1.6rem;
  text-align: center;
  padding: 2rem;
}

.fc-duo__placeholder-svg {
  width: 7rem;
  height: auto;
  opacity: 0.3;
}

/* a gradient rather than a flat wash, so the top of the photo stays bright
   and only the area behind the words is darkened */
.fc-duo__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 14, 16, 0.9) 0%, rgba(20, 14, 16, 0.35) 42%, rgba(20, 14, 16, 0) 70%);
  pointer-events: none;
}

/* ---------- the words ---------- */

.fc-duo__words {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
  padding: clamp(2.4rem, 3.4vw, 5.2rem);
}

.fc-duo__eyebrow {
  font-family: var(--fc-accent-family);
  font-style: var(--fc-accent-style, italic);
  font-size: 2rem;
  color: var(--fc-pink);
}

.fc-duo__title {
  margin: 0;
  font-family: var(--font-heading-family);
  font-size: clamp(3.2rem, 4.2vw, 6.4rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  text-wrap: balance;
}

.fc-duo__title p {
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}

.fc-duo__title strong {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: var(--fc-pink);
}

/* The shop hero sets its accent on its own line, so it has no roman word to
   sit against and reads as hanging left and slightly large. Its own scale and
   lead rather than the global ones. */
.fc-duo__title em {
  --fc-accent-scale: 0.68;
  --fc-accent-lead: 0.42em;
  font-family: var(--fc-accent-family);
  font-style: var(--fc-accent-style, italic);
  color: var(--fc-pink);
  font-size: calc(1em * var(--fc-accent-scale, 1));
  /* Baselines align, but the script's ink band sits higher, which is what
     reads as the word floating. Dropped by half the x-height difference. */
  position: relative;
  top: var(--fc-accent-drop, 0);
  margin-left: var(--fc-accent-lead, 0);
}

.fc-duo__button {
  margin-top: 0.4rem;
}

/* ---------- stacked on small screens ---------- */

@media screen and (max-width: 749px) {
  .fc-duo {
    grid-template-columns: 1fr;
    border-radius: var(--fc-radius-card, 2rem);
  }

  .fc-duo--square .fc-duo__panel,
  .fc-duo--tall .fc-duo__panel,
  .fc-duo--wide .fc-duo__panel {
    aspect-ratio: 4 / 5;
  }

  .fc-duo__words {
    padding: 2.4rem;
  }

}

/* ===========================================================================
   RIGHT PANEL AS A PRODUCT
   The square holds one product: photograph, title, price and an add to bag
   that posts straight to the cart, so the Shop page sells from the first
   screen instead of sending people off to a product page to do it.
   =========================================================================== */

.fc-duo__panel--product {
  background: var(--fc-ground-2);
}

.fc-duo__product {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(2.4rem, 3vw, 4.4rem);
  gap: clamp(1.6rem, 2vw, 3rem);
}

.fc-duo__product-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* the shots are photographed on white, and multiply drops that white into the
   pink so the tube sits on the panel rather than on a slab */
.fc-duo__product-image {
  position: static;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.fc-duo__product-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}

.fc-duo__product-title {
  margin: 0;
  font-family: var(--font-heading-family);
  font-size: clamp(2.4rem, 2.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fc-ink);
}

.fc-duo__product-price {
  margin: 0;
  font-size: 1.9rem;
  color: var(--fc-ink);
  font-variant-numeric: tabular-nums;
}

.fc-duo__product-was {
  margin-left: 0.8rem;
  color: var(--fc-ink-soft);
  text-decoration: line-through;
}

.fc-duo__product-blurb {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--fc-ink-soft);
  max-width: 34ch;
}

.fc-duo__form {
  margin: 0.8rem 0 0;
  width: 100%;
}

.fc-duo__product-button {
  width: auto;
}

@media screen and (max-width: 749px) {
  .fc-duo__product {
    padding: 2.4rem;
    gap: 1.6rem;
  }

}

/* ===========================================================================
   WORDS PANEL
   A half given over to a quote or a passage, on the pink, with no photograph
   behind it. Used on the Shop page for the dermatologist quote.
   =========================================================================== */

.fc-duo__panel--text {
  background: var(--fc-ground-2);
}

.fc-duo__textpanel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.6rem;
  padding: clamp(2.8rem, 4vw, 6rem);
}

.fc-duo__quote {
  font-family: var(--font-heading-family);
  font-size: clamp(2rem, 2.1vw, 3rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--fc-ink);
  max-width: 24ch;
  text-wrap: pretty;
}

.fc-duo__quote p { margin: 0; font-size: inherit; line-height: inherit; }

.fc-duo__quote em {
  font-family: var(--fc-accent-family);
  font-style: var(--fc-accent-style, italic);
  color: var(--fc-pink-deep);
  font-size: calc(1em * var(--fc-accent-scale, 1));
  /* Baselines align, but the script's ink band sits higher, which is what
     reads as the word floating. Dropped by half the x-height difference. */
  position: relative;
  top: var(--fc-accent-drop, 0);
  margin-left: var(--fc-accent-lead, 0);
}

.fc-duo__body-text {
  font-size: 1.7rem;
  line-height: 1.6;
  color: var(--fc-ink-soft);
  /* 40ch left a narrow ribbon of text stranded in a wide square once a panel
     carried a full passage rather than a one line quote */
  max-width: 46ch;
}

.fc-duo__body-text p { margin: 0 0 1.2rem; }

.fc-duo__body-text p:last-child { margin-bottom: 0; }

/* the name sits in the same face as the words it belongs to, and only the
   colour separates it */
.fc-duo__attribution {
  margin: 0;
  font-family: inherit;
  font-style: normal;
  font-size: 1.7rem;
  color: var(--fc-rose);
}

/* the placeholder needs to be visible when a panel type has nothing set yet */
.fc-duo__panel--product .fc-duo__placeholder,
.fc-duo__panel--text .fc-duo__placeholder {
  background: var(--fc-ground-2);
}

/* the little round photo beside a quote's attribution */
.fc-duo__credit {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.fc-duo__avatar {
  position: static;
  width: 4.8rem;
  height: 4.8rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

}

.fc-duo__product-media { text-decoration: none; }

.fc-duo__product-media .fc-duo__product-image { transition: transform 0.35s cubic-bezier(0.22,0.61,0.36,1); }

.fc-duo__product-media:hover .fc-duo__product-image { transform: scale(1.04); }