/* Drawn specimens give each ingredient a recognisable place on the label. */
.formula-explorer { --ingredient-ink:#44573a; --ingredient-wash:#e3e8d5; --ingredient-paper:#f6f6ef; }
.formula-content[data-product="biotin"] { --ingredient-ink:#345f6b; --ingredient-wash:#deebeb; }
.formula-content[data-product="collagen"] { --ingredient-ink:#54603e; --ingredient-wash:#e8ead8; }
.formula-tablet-art { width:49px; height:49px; color:var(--ingredient-ink); flex-shrink:0; }
body.immersive-theme .formula-explorer .formula-count { border:0; padding:0; gap:9px; }
.formula-explore-cue { display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid #d6ddca; padding:15px 0 20px; color:#536047; font-size:14px; line-height:1.5; }
.formula-cue-action { display:flex; align-items:center; gap:6px; font-size:12px; white-space:nowrap; }
.formula-cue-action svg { width:18px; height:18px; transform:rotate(45deg); }
body.immersive-theme .formula-explorer .formula-illustrated-table th:first-child { width:75%; padding-right:12px; }
body.immersive-theme .formula-explorer .formula-illustrated-table thead th { padding-bottom:11px; font-size:14px; }
body.immersive-theme .formula-explorer .formula-illustrated-table tbody th { padding:0 12px 0 0; }
body.immersive-theme .formula-explorer .formula-illustrated-table td { padding:16px 0; font-size:22px; line-height:1.35; }
.formula-ingredient-button { display:flex; align-items:center; gap:15px; width:100%; min-height:92px; margin:0; padding:10px 0; border:0; border-radius:0; text-align:left; background:transparent; color:#24301f; font:500 23px/1.25 var(--font-body); cursor:pointer; }
.formula-ingredient-button:focus-visible { outline:2px solid var(--ingredient-ink); outline-offset:3px; border-radius:4px; }
.formula-ingredient-art { flex:0 0 60px; width:60px; height:64px; color:var(--ingredient-ink); }
.formula-ingredient-art svg { width:100%; height:100%; display:block; }
.formula-ingredient-label { display:flex; flex-direction:column; gap:5px; min-width:0; }
.formula-ingredient-caption { color:#677259; font-size:10px; font-weight:600; letter-spacing:.075em; line-height:1.3; }
.formula-ingredient-toggle { display:grid; place-items:center; flex:0 0 24px; height:24px; margin-left:auto; color:#6a785d; font:400 23px/1 var(--font-body); transition:transform .25s,color .25s; }
.formula-ingredient-row.is-open .formula-ingredient-toggle { transform:rotate(45deg); color:var(--ingredient-ink); }
.formula-ingredient-row.is-open .formula-ingredient-button { color:var(--ingredient-ink); }
.formula-ingredient-row.is-open :is(th,td) { border-bottom-color:transparent; }
.formula-ingredient-detail[hidden] { display:none!important; }
body.immersive-theme .formula-explorer .formula-illustrated-table .formula-ingredient-detail td { padding:0 0 16px; white-space:normal; text-align:left; font:400 16px/1.6 var(--font-body); letter-spacing:0; }
.formula-detail-inner { display:grid; grid-template-columns:84px minmax(0,1fr); gap:18px; align-items:center; padding:18px; border-radius:6px; background:var(--ingredient-wash); }
.formula-detail-art { color:var(--ingredient-ink); display:block; }
.formula-detail-art svg { display:block; width:84px; height:84px; }
.formula-detail-inner p { margin:0; font-size:15px; line-height:1.55; color:#43503b; }
.formula-detail-inner .formula-detail-title { font-size:18px; font-family:var(--font-display); font-weight:600; line-height:1.3; margin-bottom:7px; color:#293821; }
.formula-bottle-controls button { display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.formula-bottle-controls svg { width:19px; height:22px; flex-shrink:0; }
@media(min-width:761px) { .formula-explorer-grid .formula-bottle { max-height:790px; } }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 .formula-ingredient-button:hover .formula-ingredient-art { transform:translateY(-2px) rotate(-4deg); }
 .formula-ingredient-button:hover .formula-ingredient-toggle { color:#24301f; }
 .formula-ingredient-button:hover .ingredient-art-detail { opacity:.65; }
}
@media (prefers-reduced-motion:no-preference) {
 .formula-ingredient-art { transition:transform .3s cubic-bezier(.2,.8,.2,1); }
 .formula-ingredient-button:focus-visible .formula-ingredient-art { transform:translateY(-2px) rotate(-4deg); }
 .formula-ingredient-detail:not([hidden]) .formula-detail-art { animation:specimen-appear .4s ease both; }
 @keyframes specimen-appear { from { opacity:0; transform:translateY(6px) rotate(-5deg); } to { opacity:1; transform:none; } }
}
@media(min-width:761px) and (max-width:1150px) {
 .formula-explorer-grid { grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:20px; }
 .formula-ingredient-button { font-size:20px; gap:10px; }
 .formula-ingredient-art { flex-basis:48px; width:48px; height:54px; }
 .formula-tablet-art { display:none; }
 .formula-cue-action { display:none; }
}
@media(max-width:760px) {
 .formula-ingredient-button { min-height:88px; font-size:21px; gap:12px; }
 .formula-ingredient-art { width:53px; flex-basis:53px; height:58px; }
 .formula-detail-inner { padding:16px; gap:13px; grid-template-columns:65px minmax(0,1fr); }
 .formula-detail-art svg { width:65px; height:65px; }
}
@media(max-width:450px) {
 .formula-tablet-art { width:35px; height:40px; }
 .formula-explore-cue { font-size:13px; padding-block:14px; }
 .formula-cue-action { font-size:0; gap:0; }
 .formula-cue-action svg { width:20px; height:20px; }
 body.immersive-theme .formula-explorer .formula-illustrated-table th:first-child { width:68%; padding-right:7px; }
 body.immersive-theme .formula-explorer .formula-illustrated-table tbody th { padding-right:7px; }
 body.immersive-theme .formula-explorer .formula-illustrated-table td { font-size:18px; }
 .formula-ingredient-button { font-size:19px; gap:9px; min-height:86px; }
 .formula-ingredient-art { width:41px; flex-basis:41px; height:49px; }
 .formula-ingredient-caption { font-size:9px; letter-spacing:.025em; }
 .formula-ingredient-toggle { flex-basis:15px; font-size:19px; }
 .formula-detail-inner { grid-template-columns:1fr; padding:17px; }
 .formula-detail-art { display:none; }
 .formula-detail-inner .formula-detail-title { font-size:18px; }
 .formula-detail-inner p { font-size:15px; }
}
@media(max-width:350px) {
 .formula-tablet-art { display:none; }
 .formula-ingredient-button { font-size:17px; gap:6px; }
 .formula-ingredient-art { width:34px; flex-basis:34px; height:44px; }
 .formula-ingredient-caption { display:none; }
 .formula-ingredient-toggle { flex-basis:12px; }
 body.immersive-theme .formula-explorer .formula-illustrated-table td { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) { .formula-ingredient-toggle { transition:none; } }