/* homepage: shop by ingredient + find your scent */
#ingredients, #quiz{ background:#F3EFE8; color:#1d1712 }

/* ---------- shop by ingredient ---------- */
.ing-sec{ padding:clamp(80px,11vw,150px) clamp(16px,4vw,56px) clamp(40px,6vw,80px) }
.ing-head{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px 40px; margin-bottom:clamp(30px,4vw,50px) }
.ing-head .eyebrow{ grid-column:1 / -1 }
.ing-head h2{ font-family:var(--display); font-weight:400; font-size:clamp(30px,4.6vw,72px); line-height:1.02; text-transform:uppercase; max-width:14ch }
.ing-hint{ max-width:30ch; font-size:15px; opacity:.7; line-height:1.5 }
.ing-chips{ display:flex; gap:10px; overflow-x:auto; padding:6px 2px 22px; scrollbar-width:thin; overscroll-behavior-x:contain }
.ing-chip{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:8px; width:104px; padding:14px 8px 12px;
  border-radius:18px; border:1px solid rgba(29,23,18,.14); background:#fff; position:relative;
  transition: transform .35s var(--ease), background-color .3s, border-color .3s, box-shadow .3s }
.ing-chip img{ width:58px; height:58px; object-fit:contain; filter:drop-shadow(0 8px 8px rgba(0,0,0,.15)); transition: transform .5s var(--ease) }
.ing-chip span{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; text-align:center; line-height:1.35 }
.ing-chip i{ position:absolute; top:8px; right:10px; font-style:normal; font-size:10px; opacity:.45 }
.ing-chip:hover{ transform:translateY(-4px); box-shadow:0 14px 28px -16px rgba(0,0,0,.35) }
.ing-chip:hover img{ transform:rotate(-10deg) scale(1.08) }
.ing-chip.on{ background:#1d1712; color:#F3EFE8; border-color:#1d1712 }

.ing-res{ margin-top:clamp(20px,3vw,34px) }
.ing-res.pop .ir-grid a{ animation: irpop .7s cubic-bezier(.22,1,.36,1) both }
.ing-res.pop .ir-grid a:nth-child(2){ animation-delay:.05s } .ing-res.pop .ir-grid a:nth-child(3){ animation-delay:.1s }
.ing-res.pop .ir-grid a:nth-child(4){ animation-delay:.15s } .ing-res.pop .ir-grid a:nth-child(n+5){ animation-delay:.2s }
@keyframes irpop{ from{ opacity:0; transform:translateY(30px) } to{ opacity:1; transform:none } }
.ir-head{ display:flex; align-items:center; gap:16px; margin-bottom:22px }
.ir-head img{ width:72px; height:72px; object-fit:contain; filter:drop-shadow(0 10px 10px rgba(0,0,0,.18)) }
.ir-head b{ display:block; font-family:var(--display); font-weight:400; font-size:clamp(18px,2vw,26px); text-transform:uppercase }
.ir-head span{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; opacity:.6 }
.ir-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:clamp(10px,1.4vw,18px) }
.ir-grid a{ background:var(--c); padding:18px 16px 16px; display:flex; flex-direction:column; align-items:flex-start }
.ir-grid img{ height:150px; width:auto; align-self:center; margin:6px 0 16px; filter:drop-shadow(0 18px 18px rgba(0,0,0,.25)) }
.ir-grid b{ font-family:var(--display); font-weight:400; font-size:13px; text-transform:uppercase; margin-bottom:4px }
.ir-grid span{ font-size:12px; letter-spacing:.06em; opacity:.75 }

/* ---------- quiz ---------- */
.quiz{ padding:clamp(70px,10vw,140px) clamp(16px,4vw,56px) }
.quiz-in{ background:#1d1712; color:#F3EFE8; border-radius:28px; padding:clamp(34px,6vw,80px) clamp(20px,5vw,72px); text-align:center; overflow:hidden }
.quiz h2{ font-family:var(--display); font-weight:400; font-size:clamp(28px,4.4vw,66px); line-height:1.02; text-transform:uppercase; margin:0 auto clamp(30px,4vw,50px); max-width:16ch }
.quiz .eyebrow{ opacity:.6 }
.qz-prog{ display:flex; justify-content:center; align-items:center; gap:8px; margin-bottom:24px }
.qz-prog i{ width:34px; height:3px; border-radius:3px; background:rgba(243,239,232,.2); transition: background-color .4s }
.qz-prog i.on{ background:#F3EFE8 }
.qz-prog span{ margin-left:10px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.6 }
.qz-q{ font-size:clamp(18px,1.8vw,24px); margin-bottom:26px }
.qz-opts{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; animation: irpop .6s cubic-bezier(.22,1,.36,1) both }
.qz-opt{ width:clamp(130px,15vw,180px); padding:22px 12px 18px; border-radius:20px; border:1px solid rgba(243,239,232,.22); color:#F3EFE8;
  display:flex; flex-direction:column; align-items:center; gap:12px; transition: background-color .3s, border-color .3s, transform .35s var(--ease) }
.qz-opt img{ width:70px; height:70px; object-fit:contain; transition: transform .5s var(--ease) }
.qz-opt span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; line-height:1.4 }
.qz-opt:hover{ background:rgba(243,239,232,.08); border-color:rgba(243,239,232,.6); transform:translateY(-4px) }
.qz-opt:hover img{ transform:scale(1.1) rotate(-8deg) }
.qz-opt.on{ background:#F3EFE8; color:#1d1712 }
.qz-back, .qz-again{ margin-top:24px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#F3EFE8; opacity:.7; text-decoration:underline; text-underline-offset:4px }
.qz-again{ display:inline-block; margin-top:30px }
.qr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; text-align:left; animation: irpop .8s cubic-bezier(.22,1,.36,1) both }
.qr-grid a{ background:var(--c); color:#1d1712; border-radius:20px; padding:18px 18px 20px; display:flex; flex-direction:column }
.qr-grid a:first-child{ outline:2px solid #F3EFE8; outline-offset:4px }
.qr-grid em{ font-style:normal; font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.7 }
.qr-grid img{ height:170px; width:auto; align-self:center; margin:10px 0 18px; filter:drop-shadow(0 20px 20px rgba(0,0,0,.25)) }
.qr-grid b{ font-family:var(--display); font-weight:400; font-size:14px; text-transform:uppercase; margin-bottom:4px }
.qr-grid span{ font-size:13px; opacity:.8 }
.qr-grid .qr-price{ margin-top:10px; font-family:var(--display); font-size:13px; opacity:1 }

@media (max-width: 720px){
  .ing-head{ grid-template-columns:1fr }
  .qr-grid{ grid-template-columns:1fr }
  .qr-grid img{ height:130px }
  .qz-opt{ width:calc(50% - 6px) }
}
.ing-chip.on img{ background:#F3EFE8; border-radius:50%; padding:6px }
.qz-opt img{ background:#F3EFE8; border-radius:50%; padding:9px }
.qz-opt.on img{ background:#fff }