/* Only loaded on the Fragrance Switcher template. */
.fragrance-finder-page .hero-page {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: clamp(18rem, 25vw, 30rem);
}
.fragrance-finder-page .hero-page__content {
  background: rgba(232, 228, 217, .85);
  color: var(--black);
}
.fragrance-finder {
  padding: clamp(3rem, 5.5vw, 5rem) clamp(1.5rem, 5vw, 5rem);
  color: var(--black);
  font-family: var(--body-font);
  letter-spacing: .04em;
}
.fragrance-finder__intro { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.fragrance-finder__intro h2 { font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 400; line-height: 1.35; margin: 0 0 1.25rem; }
.fragrance-finder__intro p { max-width: 34rem; margin: auto; font-size: 1.125rem; line-height: 1.6; }
.fragrance-finder__questions { position: relative; max-width: 75rem; margin: auto; }
.fragrance-finder__panel { background: var(--white); }
/* Outgoing panels cannot capture focus or clicks during their fade. */
.fragrance-finder__panel[aria-hidden="true"] { position: absolute; inset: 0 0 auto; pointer-events: none; }
.fragrance-finder .fs__wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 5.5vw, 5rem); list-style: none; padding: 0; margin: 0; }
.fragrance-finder .fs__wrap li { min-width: 0; }
.fragrance-finder .fs__wrap article { position: relative; min-width: 0; }
.fragrance-finder .fs__wrap input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fragrance-finder .fs__wrap label { display: block; cursor: pointer; }
.fragrance-finder .fs__wrap picture { display: block; }
.fragrance-finder .fs__wrap img:not(.fs__ribbon) { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.fragrance-finder .fs__wrap input:focus-visible + label { outline: 2px solid var(--kelp); outline-offset: 5px; }
.fragrance-finder .fs__wrap label:hover img { filter: brightness(.94); }
.fragrance-finder .fs__wrap h3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,.8); padding: .5rem 1.5rem; margin: 0; font-size: clamp(.8rem, 1.3vw, 1.125rem); line-height: 1.25; font-weight: 400; text-align: center; text-transform: uppercase; letter-spacing: .08em; pointer-events: none; }
.fragrance-finder .fs__wrap--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 48rem; margin: auto; }
.fragrance-finder .fs__btn-wrap { display: flex; justify-content: center; margin-top: 2rem; gap: 1.5rem; }
.fragrance-finder .fs__btn-back { border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.fragrance-finder .fs__btn-wrap--end { flex-direction: column; align-items: center; }
.fragrance-finder .fs__btn,
.fragrance-finder__shop { display: inline-block; border: 1px solid var(--sage); padding: .5rem 1.5rem; color: inherit; background: var(--white); font-size: .875rem; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; }
.fragrance-finder .fs__btn:hover,
.fragrance-finder__shop:hover { background: var(--satin); }
.fragrance-finder a:focus-visible,
.fragrance-finder button:focus-visible { outline: 2px solid var(--kelp); outline-offset: 4px; }
.fragrance-finder .fs__wrap--end-two { grid-template-columns: minmax(0, 1fr); max-width: 60rem; margin: auto; gap: 0; }
.fragrance-finder .fs__wrap--end-two article { display: flex; align-items: stretch; text-align: center; }
.fragrance-finder .fs__col { flex: 1 1 50%; min-width: 0; }
.fragrance-finder .fs__col:first-of-type { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; background: url('images/texture/result-box-texture.jpg') center / cover; }
.fragrance-finder .fs__col h3 { position: static; transform: none; background: none; padding: 0; margin-bottom: 1rem; font-size: 1.5rem; }
.fragrance-finder .fs__col p { font-size: 1.125rem; line-height: 1.5; margin-bottom: 1.25rem; }
.fragrance-finder .fs__col a { color: var(--black); font-size: 1.125rem; text-underline-offset: .2em; }
.fragrance-finder .fs__col picture,
.fragrance-finder .fs__col img:not(.fs__ribbon) { height: 100%; }
.fragrance-finder .fs__col-bottom { display: none; }
.fragrance-finder .fs__ribbon { position: absolute; width: 3.875rem; height: auto; left: -1.5rem; top: -1.75rem; }
.fragrance-finder .fs__wrap--end-two-choice { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); max-width: 60rem; margin: auto; gap: 2.5rem; align-items: stretch; }
.fragrance-finder .fs__wrap--end-two-choice article { display: flex; text-align: center; }
.fragrance-finder .fs__wrap--end-two-choice > span { display: flex; align-items: center; text-transform: uppercase; }
.fragrance-finder .fs__wrap--end-two-choice > span:nth-of-type(2) { display: none; }
.fragrance-finder__footer { text-align: center; margin-top: 3rem; }
.fragrance-finder__footer p { font-size: 1.125rem; margin-bottom: 1.75rem; }
@media (max-width: 767px) {
  .fragrance-finder-page .hero-page { grid-template-columns: minmax(0, 1fr); }
  .fragrance-finder .fs__wrap,
  .fragrance-finder .fs__wrap--two,
  .fragrance-finder .fs__wrap--end-two-choice { grid-template-columns: minmax(0, 1fr); max-width: 25rem; margin: auto; }
  .fragrance-finder .fs__wrap h3 { font-size: 1.125rem; }
  .fragrance-finder .fs__wrap--end-two article { flex-direction: column; }
  .fragrance-finder .fs__col:first-of-type { padding: 2.5rem 1.5rem; }
  .fragrance-finder .fs__col img:not(.fs__ribbon) { height: auto; }
  .fragrance-finder .fs__wrap--end-two-choice > span:first-of-type { display: none; }
  .fragrance-finder .fs__wrap--end-two-choice > span:nth-of-type(2) { display: block; text-align: center; text-transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fragrance-finder__panel { transition-duration: 0ms !important; }
}

/* Original fragrance colors. */
.fragrance-finder .fs__border-garrigue {
  border: 6px solid #4f543d;
}
.fragrance-finder .fs__border-garrigue h3 {
  color: #4f543d;
}
.fragrance-finder .fs__border-cloud {
  border: 6px solid #e9e9e9;
}
.fragrance-finder .fs__border-cloud h3 {
  color: #e9e9e9;
}
.fragrance-finder .fs__border-olive-wood {
  border: 6px solid #3d342b;
}
.fragrance-finder .fs__border-olive-wood h3 {
  color: #3d342b;
}
.fragrance-finder .fs__border-white-cedar {
  border: 6px solid #705c49;
}
.fragrance-finder .fs__border-white-cedar h3 {
  color: #705c49;
}
.fragrance-finder .fs__border-feather {
  border: 6px solid #5c5241;
}
.fragrance-finder .fs__border-feather h3 {
  color: #5c5241;
}
.fragrance-finder .fs__border-tonka-tea {
  border: 6px solid #452b1e;
}
.fragrance-finder .fs__border-tonka-tea h3 {
  color: #452b1e;
}
.fragrance-finder .fs__border-lavender {
  border: 6px solid #72526c;
}
.fragrance-finder .fs__border-lavender h3 {
  color: #72526c;
}
.fragrance-finder .fs__border-olive {
  border: 6px solid #665d57;
}
.fragrance-finder .fs__border-olive h3 {
  color: #665d57;
}
.fragrance-finder .fs__border-neroli {
  border: 6px solid #766004;
}
.fragrance-finder .fs__border-neroli h3 {
  color: #766004;
}
.fragrance-finder .fs__border-bergamot {
  border: 6px solid #766004;
}
.fragrance-finder .fs__border-bergamot h3 {
  color: #766004;
}
.fragrance-finder .fs__border-bergamot {
  border: 6px solid #a49f6b;
}
.fragrance-finder .fs__border-bergamot h3 {
  color: #a49f6b;
}
.fragrance-finder .fs__border-verbena {
  border: 6px solid #758623;
}
.fragrance-finder .fs__border-verbena h3 {
  color: #758623;
}
.fragrance-finder .fs__border-old-rose {
  border: 6px solid #aa7c7b;
}
.fragrance-finder .fs__border-old-rose h3 {
  color: #aa7c7b;
}
.fragrance-finder .fs__border-peony {
  border: 6px solid #c1417c;
}
.fragrance-finder .fs__border-peony h3 {
  color: #c1417c;
}
.fragrance-finder .fs__border-mellow-fig {
  border: 6px solid #6b343f;
}
.fragrance-finder .fs__border-mellow-fig h3 {
  color: #6b343f;
}
.fragrance-finder .fs__border-provence-nights {
  border: 6px solid #3d3d21;
}
.fragrance-finder .fs__border-provence-nights h3 {
  color: #3d3d21;
}
