/* House style for the inner pages, taken from home draft D (chosen 22 October 2026):
   warm paper background, Instrument Serif headings, rose accent, white rounded cards. */
body { background: #FBF8F5; }
main h1, .co-head h1, .shop-head h1, .crumbs + .pdp h1, .buy h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.04; }
.buy h1 { font-size: clamp(44px, 5vw, 68px); }
.co-head h1, .shop-head h1 { font-size: clamp(40px, 5vw, 64px) !important; }
main h2:not(.two-tone) { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.co-head .eyebrow, .shop-head .eyebrow { color: var(--rose-3, #b0675a); }
.co-box, .ladder, .setc, .fbt, .batchcard, .pairs, .panel, .card.buy, .shipopt, .program { background-color: #fff; }
.co-sum .co-box { background: #fff; }
.ladder { background: linear-gradient(135deg, #f6efe8, #fff); border-color: #ece5da; }
.ladd.hot, .setc.rec, .shipopt.on, .quickpicks button.on { border-color: #3b211a; box-shadow: inset 0 0 0 1px #3b211a; }
.ladd em, .setc em, .pack .flag { background: var(--rose-2, #d6a08f); }
.rbar { background: #f6efe8; }
.rtrack i, .shipbar .track i { background: linear-gradient(90deg, #e4b395, #b98672); }
.rstop.on { background: #b98672; border-color: #b98672; }
.dnote, .tiernudge { background: #f3ece6; color: #4a2f25; }
.bump { background: #f6efe8; border-color: #ead9cc; }
.demo-strip { background: #f4e6d2; }
.field { background: #fff; }
.fchip.on { background: #3b211a; border-color: #3b211a; }
.field.search { width: min(460px, 100%); }

/* Product page, decluttered (2 November 2026): one buy box, one tabbed add-on panel, proof grouped below. */
.proofline { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 9px 12px; border: 1px solid #ece5da; border-radius: 10px; background: #fbf8f5; color: var(--ink-2); }
.proofline svg { width: 16px; height: 16px; color: #b98672; }
.proofline b { font-weight: 600; text-decoration: underline; }
.tiers-pick { display: grid; gap: 10px; }
.tp-head b { display: block; font-size: 14px; font-weight: 600; }
.tp-head small { color: var(--muted); font-size: 12px; }
.tp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tp { position: relative; display: grid; gap: 2px; text-align: left; padding: 12px 10px 10px; border: 1px solid #d9d2c8; border-radius: 12px; background: #fff; cursor: pointer; font: inherit; }
.tp b { font-size: 14px; font-weight: 600; }
.tp span { font-size: 12px; color: #2e6a4c; font-weight: 500; }
.tp small { font: 500 11.5px var(--mono); color: var(--ink-2); }
.tp.on { border-color: #3b211a; box-shadow: inset 0 0 0 1px #3b211a; }
.tp em { position: absolute; top: -9px; right: 8px; background: var(--rose-2, #d6a08f); color: #3a1d16; font: 600 9px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; border-radius: 999px; font-style: normal; }
.tp-other { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.tp-other .qstep { margin: 0; }
.buyrow { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; border-top: 1px solid var(--line); padding-top: 16px; }
.buyrow .btn { height: 52px; }
.trustrow { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: var(--ink-2); }
.trustrow > span { display: inline-flex; align-items: center; gap: 6px; }
.trustrow svg { width: 15px; height: 15px; color: #b98672; }
.ctabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ctabs button { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid #d9d2c8; background: #fff; font: inherit; font-size: 13.5px; cursor: pointer; }
.ctabs button.on { background: #3b211a; border-color: #3b211a; color: #fff; }
.cpane { display: none; }
.cpane.on { display: block; }
.complete .fbt-row { max-width: 900px; }
@media (max-width: 560px) { .tp-row { grid-template-columns: repeat(2, 1fr); } .buyrow { grid-template-columns: 1fr; } }

/* Audit additions (2 November 2026) */
.tp-save { font-style: normal; font-size: 11px; font-weight: 600; color: #7a4a3d; }
.labelmap { display: grid; gap: 6px; }
.labelmap svg { width: 100%; max-width: 360px; height: auto; }
table.why th, table.why td { vertical-align: top; }
table.why thead th { font-weight: 600; }

/* Shop filter bar, cleaned up (2 November 2026): one line of topics, compact tools, one deal line. */
.shop-head { align-items: end; }
.shop-head .field.search { width: min(420px, 100%); }
.filterbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; border-top: 1px solid #ece5da; border-bottom: 1px solid #ece5da; padding: 12px 0; margin-bottom: 14px; }
.filterbar .topics { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; margin: 0; padding-bottom: 2px; scrollbar-width: thin; }
.filterbar .topics .fchip { flex: none; height: 34px; font-size: 12.5px; }
.fb-tools { display: flex; gap: 8px; flex: none; }
.fb-tools .field { height: 38px; font-size: 13px; padding: 0 12px; }
.fb-tools .stock-toggle { height: 38px; font-size: 12.5px; padding: 0 12px; }
.dealline { font-size: 12.5px; color: #4a2f25; background: #f3ece6; border-radius: 999px; padding: 8px 16px; margin-bottom: 24px; display: inline-block; }
@media (max-width: 900px) { .filterbar { flex-direction: column; align-items: stretch; } .fb-tools { flex-wrap: wrap; } }
/* Topics fully visible: tools on their own line at the right, all topics wrap below them. */
.filterbar { flex-wrap: wrap; }
.filterbar .fb-tools { order: -1; margin-left: auto; }
.filterbar .topics { flex: 1 1 100%; flex-wrap: wrap; overflow: visible; }
/* "What you get" block on the product page (2 November 2026) */
.incl-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.incl-card { background: #fff; border: 1px solid #ece5da; border-radius: 14px; padding: 14px; display: grid; gap: 4px; align-content: start; }
.incl-card b { font-size: 13.5px; font-weight: 600; }
.incl-card small { font-size: 12px; color: var(--ink-2); }
@media (max-width: 900px) { .incl-grid { grid-template-columns: 1fr 1fr; } }
/* Buy box: "Just this compound" or "Research sets" (2 November 2026, like Gya Labs routines) */
.mode { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; border: 1px solid #d9d2c8; border-radius: 999px; padding: 3px; background: #fbf8f5; }
.mode button { height: 38px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 13.5px; cursor: pointer; color: var(--ink-2); }
.mode button.on { background: #3b211a; color: #fff; font-weight: 500; }
.mode em { font-style: normal; font-size: 11px; color: #b98672; margin-left: 4px; }
.mode button.on em { color: #f1d3c6; }
.tp-row.sets { grid-template-columns: 1fr 1fr; }
.tp-names { font: 400 11px var(--sans) !important; color: var(--muted) !important; }
.tp-other[hidden] { display: none; }
/* Three buy-box choices (2 November 2026): the saving sits on its own small line */
.mode button { height: auto; min-height: 40px; padding: 5px 6px; line-height: 1.2; }
.mode em { display: block; margin-left: 0; font-size: 10.5px; }
/* Buy box as visible option cards, like Gya Labs "Choose a routine" (2 November 2026) */
.pick { display: grid; gap: 10px; }
.pick-head, .ships-head { display: grid; gap: 2px; }
.pick-head b, .ships-head b { font-size: 14px; font-weight: 600; }
.pick-head small, .ships-head small { font-size: 12px; color: var(--muted); }
.opts { display: grid; gap: 8px; }
.opts .opt { position: relative; display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 8px; padding: 12px 14px; border: 1px solid #d9d2c8; border-radius: 14px; background: #fff; cursor: pointer; }
.opt.on { border-color: #3b211a; box-shadow: inset 0 0 0 1px #3b211a; background: #fffdfb; }
.opt-top { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.opt-top b { font-size: 14.5px; font-weight: 600; display: block; }
.opt-top small { font-size: 12px; color: var(--muted); }
.rd { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #b9ad9f; }
.opt.on .rd { border: 5px solid #3b211a; }
.opt-pr { text-align: right; font-weight: 600; font-size: 15px; display: grid; }
.opt-pr s { font-weight: 400; font-size: 12px; color: var(--muted); }
.opt-tag { position: absolute; top: -9px; right: 12px; background: var(--rose-2, #d6a08f); color: #3a1d16; font: 600 9px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; font-style: normal; }
.opt-perks { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 26px; }
.opt-perks span { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: #f6efe8; color: var(--ink-2); }
.opt-perks .save { background: #eef6f1; color: #2e6a4c; font-weight: 600; }
.opt-perks .perk { background: #f8e9e2; color: #7a4a3d; font-weight: 500; }
.opt-names { padding-left: 26px; font-size: 11.5px; color: var(--muted); }
.inside { margin-left: 26px; padding: 10px 12px; border-radius: 12px; background: #f6efe8; display: grid; gap: 6px; }
.inside > b { font-size: 12.5px; font-weight: 600; }
.inside p { font-size: 12px; color: var(--ink-2); margin: 0; }
.inside ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.inside li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; }
.inside li .thumb { width: 26px; height: 30px; border-radius: 6px; background: var(--tint); display: grid; place-items: center; overflow: hidden; }
.inside li .thumb .bottle.sm { height: 26px; width: auto; }
.inside li small { font: 500 10.5px var(--mono); color: var(--muted); }
.qchips { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 6px; padding-left: 26px; align-items: stretch; }
.qc { position: relative; display: grid; gap: 1px; padding: 9px 6px 6px; border: 1px solid #d9d2c8; border-radius: 10px; background: #fff; cursor: pointer; font: inherit; text-align: center; }
.qc b { font-size: 12.5px; font-weight: 600; }
.qc small { font-size: 10.5px; color: #2e6a4c; }
.qc.on { border-color: #3b211a; box-shadow: inset 0 0 0 1px #3b211a; }
.qc em { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--rose-2, #d6a08f); color: #3a1d16; font: 600 8px/1 var(--mono); text-transform: uppercase; padding: 3px 5px; border-radius: 999px; font-style: normal; }
.qchips .tp-other { display: grid; gap: 2px; justify-items: center; font-size: 10.5px; color: var(--muted); }
.ships { display: grid; gap: 8px; padding-top: 4px; }
.ships-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sh { display: grid; gap: 1px; padding: 8px 6px; border: 1px solid #d9d2c8; border-radius: 10px; background: #fff; cursor: pointer; font: inherit; }
.sh b { font-size: 12.5px; font-weight: 600; }
.sh small { font-size: 10.5px; color: #2e6a4c; }
.sh.on { border-color: #3b211a; box-shadow: inset 0 0 0 1px #3b211a; }
.ships-note { font-size: 12px; color: var(--ink-2); }
.paynow { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
@media (max-width: 560px) { .qchips { grid-template-columns: repeat(2, 1fr); padding-left: 0; } .qchips .tp-other { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; gap: 8px; align-items: center; } .opt-perks, .opt-names, .inside { padding-left: 0; margin-left: 0; } }
.ships[hidden] { display: none; }