/* The counter-card companion: readable product comparisons, generous touch targets. */
.counter-wrap { max-width: 1060px; margin: auto; padding-inline: 32px; }
.counter-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1280px; margin: auto; padding: 20px 32px; }
.counter-nav img { width: 178px; height: auto; }
.shop-link { display: inline-flex; gap: 16px; align-items: center; min-height: 44px; font: 500 15px var(--sans-cond); letter-spacing: .07em; text-transform: uppercase; color: var(--forest); }
.skip-link { position: absolute; top: -100px; left: 20px; padding: 12px 20px; z-index: 200; background: var(--cream); }
.skip-link:focus { top: 12px; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 5px; }
.counter-hero { position: relative; overflow: hidden; color: var(--cream); background: var(--forest); padding: 58px 0 35px; }
.counter-hero .counter-wrap { position: relative; z-index: 1; }
.counter-hero h1 { font-size: clamp(42px,6vw,72px); line-height: 1.08; font-weight: 400; margin: 14px 0 24px; }
.counter-hero h1 em { color: var(--gold-soft); }
.hero-intro { font-size: 20px; line-height: 1.5; color: var(--cream); }
.hero-emblem { position: absolute; width: 390px; height: 390px; right: 5%; top: 15px; opacity: .08; }
.occasion-nav { display: flex; flex-wrap: wrap; gap: 8px 30px; border-top: 1px solid var(--rule-light); margin-top: 35px; padding-top: 18px; }
.occasion-nav a { font: 500 15px var(--sans-cond); text-transform: uppercase; letter-spacing: .09em; display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid transparent; }
.occasion-nav a:hover { color: var(--gold-soft); border-bottom-color: var(--gold); }
.lineup-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 34px 0 20px; border-bottom: 1px solid var(--rule); scroll-margin-top: 25px; }
.lineup-heading p { margin: 0; }
.lineup-heading p:last-child { font-size: 14px; color: var(--ink-soft); }
.tincture { display: grid; grid-template-columns: 32% 1fr; gap: 54px; padding: 42px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 24px; }
.tincture:last-child { border-bottom: 0; margin-bottom: 24px; }
.product-photo { display: flex; align-items: center; justify-content: center; }
.product-photo svg { width: 190px; height: 300px; mix-blend-mode: multiply; }
.occasion { color: var(--accent); font: 600 14px var(--sans-cond); letter-spacing: .13em; text-transform: uppercase; margin: 0 0 9px; }
.product-number { display: inline-block; margin-right: 14px; font-weight: 400; }
.product-copy h2 { color: var(--forest); font-size: clamp(30px,4vw,44px); line-height: 1.15; margin-bottom: 14px; }
.formula-line { display: flex; gap: 12px; align-items: baseline; margin: 0 0 16px; }
.formula-line strong { font-family: var(--serif); font-weight: 500; color: var(--accent); font-size: 27px; }
.formula-line span { font-size: 15px; }
.dropper { display: flex; flex-wrap: wrap; column-gap: 7px; margin: 0 0 6px; line-height: 1.45; }
.dropper strong { font-weight: 500; }
.dropper span { color: var(--ink-soft); }
.flavor { font-size: 15px; color: var(--ink-soft); margin: 0 0 14px; }
.flavor span { margin-inline: 5px; }
.product-copy details { border-block: 1px solid var(--rule); margin: 16px 0 10px; font-size: 15px; }
.product-copy summary { cursor: pointer; padding: 13px 0; min-height: 48px; color: var(--forest); }
.product-copy details div { padding: 5px 0 10px; }
.product-copy details p { margin-bottom: 10px; }
.product-link { color: var(--accent); font: 500 14px var(--sans-cond); text-transform: uppercase; letter-spacing: .08em; display: inline-flex; align-items: center; gap: 22px; min-height: 44px; }
.product-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.howto { background: var(--forest-deep); color: var(--cream); padding-block: 64px; }
.howto-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; }
.howto h2 { font-size: 43px; line-height: 1.1; margin: 18px 0 24px; }
.howto h2 em { color: var(--gold-soft); }
.howto-note { color: var(--cream); font-size: 16px; margin-bottom: 0; }
.howto-steps > div { display: flex; gap: 22px; border-top: 1px solid var(--rule-light); padding: 20px 0; }
.howto-steps > div:last-child { padding-bottom: 0; }
.step-num { color: var(--gold-soft); font: 500 15px var(--sans-cond); padding-top: 3px; }
.howto-steps p { margin: 0; font-size: 19px; line-height: 1.45; }
.howto-steps small { display: block; color: rgba(247,244,239,.8); font-size: 15px; line-height: 1.5; margin-top: 8px; }
.finish { padding-block: 65px 72px; text-align: center; }
.finish h2 { font-size: clamp(38px,5vw,55px); line-height: 1.1; color: var(--forest); margin: 18px 0 22px; }
.finish p:not(.eyebrow) { color: var(--ink-soft); }
.finish .btn { margin-top: 8px; letter-spacing: .09em; }
.counter-footer { border-top: 1px solid var(--rule); padding-block: 30px; }
.counter-footer img { margin-bottom: 22px; height: auto; }
.counter-footer p { color: var(--ink-soft); font-size: 14px; }
.counter-footer .counter-wrap > div { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14px; align-items: center; }
.counter-footer a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
.counter-footer span { margin-right: auto; }
@media(max-width: 600px) {
 .counter-wrap { padding-inline: 22px; }
 .counter-nav { padding: 14px 22px; }
 .counter-nav img { width: 150px; }
 .shop-link { font-size: 13px; gap: 8px; }
 .counter-hero { padding-top: 36px; padding-bottom: 23px; }
 .counter-hero h1 { font-size: clamp(37px,9.5vw,53px); }
 .hero-intro { font-size: 17px; }
 .hero-emblem { width: 280px; right: -130px; top: 5px; }
 .occasion-nav { gap: 0 23px; margin-top: 23px; padding-top: 14px; }
 .occasion-nav a { font-size: 13px; }
 .lineup-heading { display: block; padding-top: 25px; }
 .lineup-heading p:last-child { font-size: 13px; margin-top: 7px; }
 .tincture { grid-template-columns: 92px minmax(0,1fr); gap: 20px; padding-block: 29px; }
 .product-photo { align-items: flex-start; padding-top: 35px; }
 .product-photo svg { width: 92px; height: 152px; }
 .occasion { font-size: 12px; letter-spacing: .1em; }
 .product-number { display: none; }
 .product-copy h2 { font-size: 29px; }
 .formula-line { display: block; line-height: 1.3; }
 .formula-line strong { font-size: 25px; }
 .formula-line span { display: block; margin-top: 4px; font-size: 13px; }
 .dropper { display: block; font-size: 16px; }
 .dropper span { display: block; font-size: 14px; margin-top: 3px; }
 .flavor { font-size: 14px; }
 .product-copy summary { font-size: 13px; }
 .product-copy details div { font-size: 14px; }
 .product-link { font-size: 13px; letter-spacing: .035em; gap: 8px; }
 .howto { padding-block: 43px; }
 .howto-grid { grid-template-columns: 1fr; gap: 30px; }
 .howto h2 { font-size: 38px; }
 .howto-steps p { font-size: 18px; }
 .finish { padding-block: 44px 48px; }
 .finish .eyebrow { font-size: 12px; letter-spacing: .09em; }
 .counter-footer span { flex-basis: 100%; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }