/* The live store's shop: homepage carousel, /library grid and /product/<slug> pages (public/js/store.js). Phones first. */
.store-carousel{padding:56px 0 8px}
.store-carousel__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.store-carousel__head .section-heading{margin-bottom:24px;flex:1}
.store-carousel__head>h2{margin:0 0 20px;font-size:26px;line-height:1.15;letter-spacing:-.02em}
.store-carousel__nav{display:none;gap:10px;margin-bottom:28px}
.store-carousel__nav .circle-button:disabled{opacity:.35;cursor:default}
.store-carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--mobile-gutter,20px);padding:4px var(--mobile-gutter,20px) 20px;scrollbar-width:none}
.store-carousel__track::-webkit-scrollbar{display:none}
.store-carousel__track>.shop-card{scroll-snap-align:start}
.store-carousel__track:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:24px}
.store-carousel__foot{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.store-carousel__foot .button{width:100%;max-width:360px}

.shop-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:24px;background:var(--surface);overflow:hidden}
.shop-card__art{position:relative;display:flex;align-items:center;justify-content:center;height:230px;padding:42px 0 14px;background:radial-gradient(circle at 50% 46%,#fff 0,#eef7fd 46%,#dcf0fb 100%)}
.shop-card__art img{height:100%;width:auto;max-width:80%;object-fit:contain}
.shop-card__chip{position:absolute;top:12px;left:12px;padding:4px 10px;border:1px solid #d7e4ec;border-radius:99px;background:#fff;font-size:12px;font-weight:500;color:#1d3a4a;line-height:1.5}
.shop-card__body{display:flex;flex-direction:column;flex:1;padding:16px 16px 18px}
.shop-card h3{margin:0;font-size:17px;line-height:1.3;letter-spacing:-.01em}
.shop-card h3 a{display:block;padding:2px 0}
.shop-card__sub{margin:2px 0 10px;font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere;min-height:36px}
.shop-card__price{margin:auto 0 12px;font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.shop-card__price small{font-size:12px;font-weight:400;color:var(--muted)}
.shop-card__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shop-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ink);font:500 14px/1 var(--font);white-space:nowrap}
.shop-btn .icon{width:16px;height:16px}
.shop-btn--dark{background:var(--ink);border-color:var(--ink);color:#fff}
.shop-btn:disabled{opacity:.45;cursor:not-allowed}
@media (hover:hover){.shop-btn:not(:disabled):hover{border-color:var(--ink)}}
/* One button across the store: 14px, 500, pill. */
html[data-site="store"] .button:not(.small){font-size:14px}
/* Store controls answer a press and, with a mouse, a hover. */
.shop-card{transition:border-color .2s,box-shadow .2s}
.shop-btn,.pp-btn,.pp-size,.pp-sticky-size,.pp-tier,.pp-share,.shop-chips button,.pp-qty button{transition:transform .12s var(--ease),background-color .15s,border-color .15s,color .15s}
@media (prefers-reduced-motion:no-preference){:is(.shop-btn,.pp-btn,.pp-size,.pp-sticky-size,.pp-tier,.pp-share,.shop-chips button,.pp-qty button,.promo-bar__link,.store-cat,.menu-cats a,html[data-site="store"] .button):not(:disabled):active{transform:scale(.97)}}
@media (hover:hover){
 .shop-card:hover{border-color:#b9d3e0;box-shadow:0 8px 22px #10293614}
 .shop-card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
 :is(.shop-btn--dark,.pp-btn--dark):not(:disabled):hover,html[data-site="store"] .button.primary:hover{background:#1b3163;border-color:#1b3163}
 .pp-btn:not(.pp-btn--dark,.pp-btn--light,:disabled):hover,.pp-size:not([aria-checked="true"]):hover,.pp-tier:not([aria-pressed="true"]):hover,.shop-chips button:not(.active):hover{border-color:var(--ink)}
 .pp-btn--light:hover{background:#e3edf8;border-color:#e3edf8}
 .pp-qty button:not(:disabled):hover{border-radius:99px;background:#eef3f7}
 .promo-bar__link:hover{background:#ffffff33}
}

.shop{padding-block:32px 56px}
.shop-head h1{margin:8px 0 6px;font-size:34px;line-height:1.1;letter-spacing:-.03em}
.shop-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.shop-tools{display:grid;grid-template-columns:1fr;gap:10px;margin:22px 0 14px}
.shop-tools .search-box{width:100%}
.shop-tools .search-box input{min-height:48px;padding-block:0}
.shop-sort select{width:100%;min-height:48px;padding:0 40px 0 16px;border:1px solid #7a8fa3;border-radius:99px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102044' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px;font:400 16px var(--font);color:var(--ink);appearance:none}
.shop-chips{display:flex;gap:8px;overflow-x:auto;margin:0 calc(-1 * var(--mobile-gutter,20px));padding:2px var(--mobile-gutter,20px) 6px;scrollbar-width:none}
.shop-chips::-webkit-scrollbar{display:none}
.shop-chips button{flex:none;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:99px;background:#fff;font:500 13px var(--font);color:var(--ink)}
.shop-chips button.active{background:var(--ink);border-color:var(--ink);color:#fff}
.shop-count{margin:10px 0 14px;font-size:12px;color:var(--muted)}
.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.shop-grid .shop-card{border-radius:20px}
.shop-grid .shop-card__art{height:180px;padding-top:36px}
.shop-grid .shop-card__body{padding:12px 12px 14px}
.shop-grid .shop-card h3{font-size:15px}
.shop-grid .shop-card__price{font-size:17px}
.shop-grid .shop-card__actions{grid-template-columns:1fr}
.shop-grid .shop-btn{min-height:44px}
/* Compact library cards (LIB_CARDS in store.js): on phones and tablets, where the two buttons stack, only Add shows. */
@media (max-width:899px){.shop[data-cards="compact"] .shop-grid .shop-card__actions>a.shop-btn{display:none}}
.shop-empty{grid-column:1/-1;padding:40px 0;text-align:center;color:var(--muted)}
.shop-empty p{margin:0}
.shop-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.shop-empty__actions .shop-btn{padding:0 18px}

.pp{padding:12px 0 24px}
.pp-top{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.pp-stage{--stage-top:18px;--stage-bottom:58px;position:relative;aspect-ratio:1/1;max-width:100%;border:1px solid var(--line);border-radius:28px;background:radial-gradient(circle at 50% 44%,#fff 0,#eef7fd 44%,#d7eefb 100%);overflow:hidden}
/* Absolute, not a percent height: iPhones ignore height:100% in a box sized by aspect-ratio and show the bottle zoomed and cropped. */
.pp-stage__img{position:absolute;top:var(--stage-top);left:0;right:0;width:100%;height:calc(100% - var(--stage-top) - var(--stage-bottom));object-fit:contain}
.pp-stage__img.is-swapped{animation:pp-swap .42s cubic-bezier(.2,.8,.2,1)}
@keyframes pp-swap{from{opacity:.25;transform:translateY(10px) scale(.95)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pp-stage__img.is-swapped{animation:none}}
.pp-chips{position:absolute;left:12px;bottom:12px;right:12px;display:flex;flex-wrap:wrap;gap:6px}
.pp-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid #d7e4ec;border-radius:99px;background:#ffffffe6;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#1d3a4a}
.pp-chip i{width:7px;height:7px;border-radius:50%;background:#2fb67c}
.pp-buy{border:1px solid var(--line);border-radius:28px;background:#fff;padding:22px 18px}
.pp-title{min-width:0;margin:0;font-size:36px;line-height:1.05;letter-spacing:-.035em;overflow-wrap:break-word}
.pp-sub{margin:6px 0 0;font-size:14px;color:var(--muted)}
.pp-option{display:flex;flex-direction:column;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.pp-label{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pp-sizes{display:flex;flex-wrap:wrap;gap:8px}
.pp-size{min-height:44px;min-width:76px;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:#fff;font:600 14px var(--font);color:var(--ink);text-transform:uppercase}
.pp-size small{display:block;font-size:12px;font-weight:500;text-transform:none;color:var(--muted)}
.pp-size[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pp-size[aria-checked="true"] small{color:#ffffffb3}
.pp-size[data-soldout]:not([aria-checked="true"]){color:var(--muted)}
.pp-price{margin:0;font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.pp-per{margin:2px 0 0;font-size:12px;color:var(--muted)}
.pp-qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:99px;flex:none}
.pp-qty button{display:grid;place-items:center;width:44px;height:46px;border:0;background:none;color:var(--ink)}
.pp-qty button:disabled{opacity:.3}
.pp-qty .icon{width:18px;height:18px}
.pp-qty output{min-width:24px;text-align:center;font-weight:600}
.pp-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:18px}
.pp-actions .pp-btn--dark{order:-1}
.pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 18px;border:1px solid var(--line);border-radius:99px;background:#fff;font:500 14px var(--font);color:var(--ink);white-space:nowrap}
.pp-btn .icon{width:18px;height:18px}
.pp-btn--dark{background:var(--ink);border-color:var(--ink);color:#fff}
.pp-btn:disabled{opacity:.5;cursor:not-allowed}
.pp-trust{list-style:none;margin:18px 0 0;padding:0;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.pp-trust li{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-top:1px solid var(--line);background:#fbfdfe}
.pp-trust li:first-child{border-top:0;background:#effaf5}
.pp-trust .pp-trust__foot{align-items:center;gap:8px;padding:11px 14px}
.pp-trust__foot .icon{width:16px;height:16px;margin:0}
.pp-trust__foot b{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#3d5168}
.pp-trust .pp-trust__foot span{margin-left:auto;font-size:12px}
.pp-trust .icon{width:20px;height:20px;margin-top:1px;color:#2a8f6a}
.pp-trust strong{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.pp-trust span{display:block;font-size:12px;line-height:1.5;color:var(--muted)}
.pp-specs{margin:0}
.pp-specs div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line);font-size:13px}
.pp-specs div:first-child{border-top:0;padding-top:2px}
.pp-specs dt{flex:none;font-weight:600;color:var(--ink)}
.pp-specs dd{margin:0;text-align:right;color:#2c4057;overflow-wrap:anywhere}
.pp-related{padding-top:44px}
.pp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;flex-direction:column;gap:10px;padding:12px var(--mobile-gutter,20px) calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -12px 30px #1733401a;transform:translateY(110%);transition:transform .28s var(--ease)}
.pp-sticky.is-visible{transform:none}
.pp-sticky .pp-btn{min-height:46px;padding:0 22px}
body[data-page="product"] .footer{padding-bottom:140px}
.pp-missing,.store-unavailable{padding:72px var(--mobile-gutter,20px);text-align:center}
.pp-missing h1,.store-unavailable h1{font-size:30px;letter-spacing:-.02em}
.pp-missing p,.store-unavailable p{color:var(--muted);margin-bottom:24px}
.basket-lines .cart-row img{height:96px;width:auto}
.basket-lines .cart-name a{color:inherit}
.basket-lines .quantity .icon{width:16px;height:16px}
.basket-lines .quantity button:disabled{opacity:.35}

@media (min-width:600px){
 .store-carousel__track{grid-auto-columns:44%}
 .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
 .shop-tools{grid-template-columns:1fr 240px}
 .pp-actions{grid-template-columns:auto minmax(0,1fr)}
 .pp-actions .pp-btn--dark{order:0}
}
@media (min-width:900px){
 .store-carousel{padding-top:84px}
 .store-carousel__nav{display:flex}
 .store-carousel__track{--edge:max(40px,calc((100vw - 1380px) / 2 + 40px));grid-auto-columns:calc((min(100vw,1380px) - 80px - 60px) / 4);gap:20px;padding-inline:var(--edge);scroll-padding-inline:var(--edge)}
 .store-carousel__head>h2{font-size:32px}
 .shop-card__art{height:260px}
 .shop{padding-block:48px 80px}
 .shop-head h1{font-size:48px}
 .shop-chips{margin:0;padding:2px 0 6px;flex-wrap:wrap;overflow:visible}
 .shop-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
 .shop-grid .shop-card__art{height:230px}
 .shop-grid .shop-card__actions{grid-template-columns:1fr 1fr}
 .pp{padding-top:28px}
 .pp-top{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:24px;align-items:start}
 .pp-gallery{position:sticky;top:96px}
 .pp-stage{--stage-top:48px;--stage-bottom:72px;aspect-ratio:auto;height:min(640px,calc(100vh - 140px));min-height:480px}
 .pp-buy{padding:32px}
 .pp-title{font-size:48px}
 .pp-sticky{display:none}
 body[data-page="product"] .footer{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){.pp-sticky{transition:none}}

/* Homepage categories (renderCategories). */
.store-cats{padding-block:44px 8px}
.store-cats .section-heading{margin-bottom:18px}
.store-cats__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.store-cat{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:88px;padding:14px 40px 14px 14px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(circle at 100% 100%,#e3f3fc 0,#fff 62%);color:var(--ink);overflow:hidden;transition:border-color .2s,box-shadow .2s}
@media (hover:hover){.store-cat:hover{border-color:var(--ink);box-shadow:0 10px 24px #10293614}}
/* The bottle has two placements, picked by data-art on .store-cats (CAT_ART in store.js; ?tiles=classic or ?tiles=raised previews either):
   classic is the launch placement, cropped at the bottom; raised (2026-10-31) shows the cap and the whole label and scales with the tile from 320 up. */
.store-cats{--art-h:84px;--art-right:0px;--art-bottom:-14px}
/* Raised grows with the screen from 320 to 390 (the tile from 80 to 88 tall, the bottle from 56 to 82), so the cap stays inside and the longest name, Secretagogue, keeps 4px or more from the glass at every width. */
.store-cats[data-art="raised"]{--art-h:clamp(56px,calc(37.14vw - 62.9px),82px);--art-right:clamp(-5px,calc(14.29vw - 50.7px),5px);--art-bottom:clamp(-1px,calc(58.4px - 15.23vw),10px)}
@media (max-width:899px){.store-cats[data-art="raised"] .store-cat{min-height:clamp(80px,calc(11.43vw + 43.4px),88px)}}
.store-cat__art{position:absolute;right:var(--art-right);bottom:var(--art-bottom);rotate:12deg;pointer-events:none}
.store-cat__art img{display:block;height:var(--art-h);width:auto;max-width:none}
.store-cat__text{display:flex;flex-direction:column;min-width:0}
.store-cat__text strong{font-size:clamp(12.5px,3.6vw,15px);font-weight:600;line-height:1.25;white-space:nowrap}
.store-cat__text span{margin-top:2px;font-size:12px;line-height:1.5;color:var(--muted)}
.store-cat>.icon{display:none}

/* The phone menu's search and category links. */
.menu-search{padding:10px 0 12px}
.menu-search .search-box{width:100%}
.menu-search input{width:100%}
/* Categories as an even grid of three across; a short last row splits its width, so no chip sits alone on a line. */
.menu-cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:2px 0 14px}
.menu-cats a{grid-column:span 2;display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:0 6px;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:13px;font-weight:500;line-height:1.15;text-align:center;color:var(--ink)}
.menu-cats a:nth-child(3n+1):nth-last-child(2),.menu-cats a:nth-child(3n+2):last-child{grid-column:span 3}
.menu-cats a:nth-child(3n+1):last-child{grid-column:1/-1}
/* Small phones: two across, and an odd last chip takes the full row. */
@media (max-width:359px){.menu-cats{grid-template-columns:repeat(2,minmax(0,1fr))}.menu-cats a,.menu-cats a:is(:nth-child(3n+1):nth-last-child(2),:nth-child(3n+2):last-child,:nth-child(3n+1):last-child){grid-column:auto}.menu-cats a:nth-child(odd):last-child{grid-column:1/-1}}

/* Product page share button. */
.pp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pp-share{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-2px -4px 0 0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink)}
@media (hover:hover){.pp-share:hover{border-color:var(--ink)}}
.pp-share .icon{width:18px;height:18px}

/* The add confirmation panel (app.js showAdded). Phones: above the bottom edge; desktop: under the header. */
.added-sheet{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:140;opacity:0;transform:translateY(calc(100% + 24px));transition:transform .28s var(--ease),opacity .2s}
.added-sheet.is-visible{opacity:1;transform:none}
.added-sheet[hidden]{display:none}
.added-sheet__card{display:grid;grid-template-columns:40px minmax(0,1fr) 44px;gap:2px 12px;align-items:center;padding:12px 8px 14px 16px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 18px 48px #0b1f4433}
.added-sheet__card>img{width:40px;height:76px;object-fit:contain}
.added-sheet__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.added-sheet__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#237a5b}
.added-sheet__eyebrow .icon{width:14px;height:14px}
.added-sheet__text strong{overflow:hidden;font-size:15px;color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.added-sheet__text>span:last-child{font-size:12px;color:var(--muted)}
.added-sheet__close{align-self:start;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--muted)}
.added-sheet__close .icon{width:18px;height:18px}
.added-sheet__actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.25fr;gap:8px;margin:10px 8px 0 0}
@media (prefers-reduced-motion:reduce){.added-sheet{transition:none}}

/* Basket: count, the Research Water line, and the quote form's summary and confirmation. */
.basket-count{margin:-8px 0 0;font-size:13px;color:var(--muted)}
.basket-addon{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:16px;padding:12px 14px;border:1px dashed #b9d3e0;border-radius:16px;background:#f5fbfe}
.basket-addon img{width:34px;height:64px;object-fit:contain}
.basket-addon strong{display:block;font-size:14px;color:var(--ink)}
.basket-addon span{display:block;font-size:12px;line-height:1.45;color:var(--muted)}
.basket-addon .shop-btn{min-height:44px;padding:0 14px;font-size:12px}
.quote-summary{margin:18px 0 4px;padding:14px 16px 4px;border:1px solid var(--line);border-radius:18px;background:#f8fbfd}
.quote-summary ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.quote-summary li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px;color:#2c4057}
.quote-summary li img{width:24px;height:46px;object-fit:contain}
.quote-summary li strong,.quote-summary li b{font-weight:600;color:var(--ink)}
.quote-summary__total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.quote-summary__total strong{font-size:18px;color:var(--ink)}
.field-optional{font-size:12px;font-weight:400;color:var(--muted)}
.quote-dialog .form-grid{margin-top:18px}
.quote-steps{display:grid;gap:12px;width:100%;margin:4px 0 18px;padding:0;list-style:none;counter-reset:step}
.quote-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;font-size:13px;line-height:1.5;color:var(--muted);counter-increment:step}
.quote-steps li::before{content:counter(step);grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e4f6ee;color:#19493c;font-size:12px;font-weight:600}
.quote-steps strong{font-weight:600;color:var(--ink)}

@media (max-width:760px){
 html[data-site="store"] #toast{top:auto;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,20px)}
 html[data-site="store"] #toast.visible{transform:translate(-50%,0)}
 html[data-site="store"] body[data-page="product"] #toast{bottom:calc(136px + env(safe-area-inset-bottom))}
}
/* The carousel's first card starts on the same left edge as .wrap, and four cards span .wrap's content width. */
@media (min-width:761px){.store-carousel__track{--edge:5vw;padding-inline:var(--edge);scroll-padding-inline:var(--edge)}}
@media (min-width:900px){.store-carousel__track{grid-auto-columns:calc((90vw - 60px) / 4)}}
@media (min-width:1600px){.store-carousel__track{--edge:calc((100vw - 1500px) / 2 + 40px);grid-auto-columns:calc((1420px - 60px) / 4)}}
@media (max-width:360px){
 .store-cat{min-height:80px;padding:12px 26px 12px 12px}
 .store-cat__text strong{font-size:13px}
 .store-cats{--art-h:64px;--art-right:-4px;--art-bottom:-12px}
}
@media (min-width:760px){
 .added-sheet{top:96px;right:max(24px,5vw,calc((100vw - 1500px) / 2 + 75px));bottom:auto;left:auto;width:380px;transform:translateY(-12px)}
}
@media (min-width:900px){
 .store-cats{padding-top:72px}
 .store-cats__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
 /* Four tiles get narrower under 1140, so the bottle and the label shrink with them, all the way down to 900, and the label keeps clear of the bottle. */
 .store-cat{min-height:116px;padding:20px clamp(60px,calc(10vw - 30px),84px) 20px 22px}
 .store-cats{--art-h:clamp(88px,calc(11.667vw - 17px),116px);--art-right:clamp(2px,calc(5vw - 43px),14px);--art-bottom:-18px}
 .store-cats[data-art="raised"]{--art-h:clamp(88px,calc(11.667vw - 17px),116px);--art-right:clamp(10px,calc(5vw - 35px),22px);--art-bottom:clamp(-8px,calc(129.8px - 12.09vw),21px)}
 .store-cat__text strong{font-size:clamp(14.5px,calc(1.458vw + 1.375px),18px)}
 .store-cat__text span{font-size:13px}
}

/* Restock emails for sold-out sizes. */
.pp-actions .pp-restock{order:-1;grid-column:1/-1}
.pp-restock[hidden]{display:none}
.restock-dialog form{display:grid;gap:16px;margin-top:20px}
.restock-consent{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;font-size:12px;line-height:1.6;color:#2c4057;cursor:pointer}
.restock-consent input{flex:none;width:22px;height:22px;margin-top:0;accent-color:#102936}
.restock-dialog .form-status{min-height:0;margin:0}
.restock-dialog .form-status:empty{margin-top:-16px}
.pp-size{position:relative}
.pp-sticky [hidden]{display:none}
.pp-sticky__notify .icon{width:18px;height:18px}
/* States drawn by store.js and app.js: whole compound names, arrows and steppers at their limit, sold-out products, basket lines that can't be bought, the pinned basket total, sending forms, errors under a field. */
.name-word{white-space:nowrap}
/* Screen-reader text is absolutely positioned: these keep it inside their scrolling rows, or it widens the whole page. */
.shop-card,.pp-tier,.pp-sticky-size{position:relative}
.store-carousel__nav .circle-button[aria-disabled="true"]{opacity:.35;cursor:default}
.pp-qty button[aria-disabled="true"]{opacity:.3;cursor:default}
.pp-option[hidden],.pp-tiers[hidden],.pp-tiers-label[hidden],.pp-btn[hidden],.pp-chip[hidden]{display:none}
.pp-chip--out{border-color:var(--ink);background:var(--ink);color:#fff}
.pp-actions .pp-btn--dark.pp-restock{order:-1}
.pp-actions:has(.pp-restock:not([hidden])){grid-template-columns:minmax(0,1fr)}
.second-vial--out{padding-block:1px}
.cart-flag,.quote-summary li b.cart-flag{font-weight:600;color:#8a5a00}
[data-theme="tidal-form"] .cart-row--gone{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name remove" "price price"}
.cart-row--gone small{color:#8a5a00}
.dialog .quote-summary .quote-summary__warn{margin:10px 0 0;font-size:12px;line-height:1.5;color:#8a5a00}
.added-sheet__warn{grid-column:1/-1;margin:8px 8px 0 0;font-size:12px;line-height:1.45;color:#8a5a00}
.field-error{display:block;margin-top:2px;font-size:12px;font-weight:500;line-height:1.45;color:#aa334c}
/* The dialog gives up its bottom padding: a sticky footer stops at that padding, and the lines would show through underneath. */
.basket-dialog:has(.basket-foot){padding-bottom:0;scroll-padding-bottom:150px}
.basket-foot{position:sticky;bottom:0;z-index:2;margin:18px -40px 0;padding:14px 40px 20px;border-top:1px solid var(--line);background:var(--surface)}
.basket-foot .cart-subtotal{margin:0 0 10px}
.basket-foot .button{width:100%}
.button[aria-disabled="true"]{opacity:.6;cursor:progress}
#dialog-title:focus{outline:none}
/* The welcome gate opens on its first checkbox with no ring, like every other popup; the ring appears once a key is pressed. */
#gate-age[data-quiet-focus]:focus-visible{outline:none}
.footer .footer-title{margin:0 0 20px;font-size:13px;font-weight:500;color:#fff}
.footer-motion{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
.cart-line--save b,.quote-summary__save b{white-space:nowrap}
@media (hover:hover){.footer-motion:hover{color:#fff}}
@media (max-width:760px){.basket-foot{margin:14px -22px 0;padding:12px 22px 16px}.footer .footer-title{margin-bottom:10px}}
@media (max-width:360px){.basket-addon{grid-template-columns:34px minmax(0,1fr)}.basket-addon .shop-btn{grid-column:1/-1}}
@media (min-width:761px){.shop-tools .search-box input,.shop-sort select{font-size:14px}}
/* Keyboard focus never lands under the bottom bar. */
@media (max-width:899px){html:has(.pp-sticky.is-visible){scroll-padding-bottom:130px}}
/* Phones: the category chips stay under the sticky header while the grid scrolls. */
@media (max-width:899px){.shop-chips{position:sticky;top:86px;z-index:6;padding-top:8px;padding-bottom:8px;background:var(--page);box-shadow:0 1px 0 var(--line)}}
@media (max-width:760px){.shop-chips{top:66px}}

/* ---- 2-for-1, quantity pricing and the product page sections (2026-10-30) */
.promo-coin{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe7a3 0,#f3c159 45%,#d79a2b 100%);box-shadow:inset 0 0 0 3px #ffffff59,0 6px 16px #a0680d40;font:700 12px/1.05 var(--font);letter-spacing:.04em;text-transform:uppercase;text-align:center;color:#5b3600}
.shop-card__art{position:relative}
.shop-card__art .promo-coin{position:absolute;top:10px;right:10px;width:56px;height:56px;font-size:12px;letter-spacing:0;z-index:1}
.second-vial{margin:2px 0 12px;font-size:12px;color:var(--muted);white-space:nowrap}
.second-vial s,.pp-second s{margin-left:2px}
.second-vial b,.pp-second b,.pp-sticky__second i{display:inline-block;padding:1px 6px;border-radius:5px;background:#f3c159;font-style:normal;font-weight:700;color:#5b3600}
.promo-bar{background:linear-gradient(90deg,#0d1a3a,#16295a);color:#e9f2ff}
.promo-bar__inner{display:flex;align-items:center;gap:14px;min-height:56px;padding-block:8px}
.promo-coin--bar{width:56px;height:56px;font-size:12px;letter-spacing:0;flex:none}
.promo-bar p{flex:1;margin:0;font-size:13px;line-height:1.45}
.promo-bar p span{color:#b9cbe6}
.promo-bar__link{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:0 14px;border-radius:99px;background:#ffffff1f;font-size:12px;font-weight:600;color:#fff;text-decoration:none}
.promo-bar__link .icon{width:14px;height:14px}
.promo-bar a:focus-visible{outline-color:#48b89e}
.promo-coin--stage{position:absolute;top:16px;right:16px;z-index:2}

.pp-config{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"size size" "price qty" "offer offer";gap:14px 12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.pp-config__rows{display:contents}
.pp-config .pp-option{grid-area:size;margin:0;padding:0;border:0}
.pp-config .pp-option--qty{grid-area:qty;align-self:center}
.pp-option--qty .pp-label{display:none}
.pp-pricebox{grid-area:price;min-width:0}
.pp-second{margin:3px 0 0;font-size:12px;color:var(--muted)}
.pp-second span{color:#1f7a5a;font-weight:600}
.pp-offer{grid-area:offer;margin:0;font-size:12px;line-height:1.55;color:var(--muted)}
.pp-offer strong{color:var(--ink);font-weight:600}
.pp-tiers-label{margin:18px 0 8px}
.pp-tiers{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--mobile-gutter,20px) * -1 + 2px);padding:2px calc(var(--mobile-gutter,20px) - 2px) 6px;scrollbar-width:none}
.pp-tiers::-webkit-scrollbar{display:none}
.pp-tier{display:flex;align-items:center;gap:10px;min-width:150px;min-height:72px;padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:#fff;font:inherit;text-align:left;color:var(--ink);scroll-snap-align:start;cursor:pointer}
.pp-tier[aria-pressed="true"]{border-color:var(--ink);background:#fff6e0;box-shadow:inset 0 0 0 1px var(--ink)}
.pp-tier__art{display:flex;flex:none}
.pp-tier__art img{width:22px;height:42px;object-fit:contain}
.pp-tier__art img+img{margin-left:-9px}
/* Ten visible units: three in back, three in the middle, four in front. */
.pp-tier__art[data-stack="10"]{display:grid;grid-template-columns:repeat(3,13px) 22px;grid-template-rows:9px 9px 42px}
.pp-tier__art[data-stack="10"] img{position:relative;grid-row:3;z-index:2;max-width:none;margin:0}
.pp-tier__art[data-stack="10"] img:nth-child(3n+1){grid-column:1}
.pp-tier__art[data-stack="10"] img:nth-child(3n+2){grid-column:2}
.pp-tier__art[data-stack="10"] img:nth-child(3n){grid-column:3}
.pp-tier__art[data-stack="10"] img:nth-child(10){grid-column:4}
.pp-tier__art[data-stack="10"] img:nth-child(-n+6){grid-row:2;z-index:1;transform:translateX(6.5px);filter:brightness(.96) saturate(.95)}
.pp-tier__art[data-stack="10"] img:nth-child(-n+3){grid-row:1;z-index:0;filter:brightness(.92) saturate(.9)}
.pp-tier__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pp-tier__text strong{font-size:13px;font-weight:600}
.pp-tier__price{display:flex;flex-wrap:wrap;gap:0 5px;font-size:12px;white-space:nowrap}
.pp-tier__price b{font-weight:700}
.pp-tier__price s{color:var(--muted)}
.pp-tier__text em{align-self:flex-start;padding:1px 7px;border-radius:5px;background:#f3c159;font-size:12px;font-style:normal;font-weight:700;color:#5b3600}

.pp-eyebrow{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.pp-eyebrow--accent{color:#1f7a5a}
.pp-program{margin-top:44px;text-align:center}
.pp-program__card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;align-items:center;padding:20px;border:1px solid #e6dcc4;border-radius:24px;background:linear-gradient(110deg,#fffbe9 0,#f2f8ff 55%,#f1efff 100%);text-align:left}
/* The volume seal: a navy coin with a gold hairline ring and gold figures, the 2-for-1 coin's partner. */
.pp-program__badge{position:relative;display:grid;place-content:center;justify-items:center;gap:2px;width:68px;height:68px;border-radius:50%;background:radial-gradient(circle at 32% 24%,#2f5596 0,#15306a 42%,#0b1f44 100%);box-shadow:0 0 0 4px #fff,0 0 0 5px #e6dcc4,0 12px 24px -6px #0b1f4466;isolation:isolate}
.pp-program__badge::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid #f3c15999;box-shadow:inset 0 0 0 3px #0b1f44,inset 0 0 0 4px #f3c15933;z-index:-1}
.pp-program__badge::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse 70% 45% at 40% 8%,#ffffff2e,#fff0 70%);pointer-events:none}
.pp-program__badge b{display:flex;align-items:flex-start;font:700 22px/.9 var(--font);letter-spacing:-.04em;color:#f3c159;background:linear-gradient(180deg,#fff1c4 0,#f3c159 55%,#dc9e35 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pp-program__badge b i{margin:1px 0 0 1px;font-size:12px;font-style:normal;letter-spacing:0}
.pp-program__badge small{font:600 9px/1 var(--font);letter-spacing:.28em;margin-right:-.28em;text-transform:uppercase;color:#d9eee9}
@media (forced-colors:active){.pp-program__badge{border:2px solid CanvasText}.pp-program__badge b{-webkit-text-fill-color:currentColor}}
.pp-program__text h2{margin:0 0 4px;font-size:19px;letter-spacing:-.02em}
.pp-program__text p{margin:0;font-size:13px;line-height:1.6;color:#3d5168}
.pp-program__card .pp-btn{grid-column:1/-1}

.pp-testing{margin-top:44px}
.pp-testing__panel{padding:34px 18px 18px;border-radius:32px;background:#eef3f7;text-align:center}
.pp-testing__panel h2{margin:0;font-size:30px;line-height:1.12;letter-spacing:-.03em}
.pp-testing__panel h2 span{white-space:nowrap}
.pp-testing__lead{max-width:560px;margin:12px auto 0;font-size:14px;line-height:1.7;color:#3d5168}
.pp-testing__grid{display:grid;gap:14px;margin-top:26px;text-align:left}
.pp-testing__dark{position:relative;overflow:hidden;padding:26px 22px;border-radius:24px;background:radial-gradient(circle at 85% 10%,#1d3a78 0,#102936 55%);color:#fff}
.pp-testing__kicker{display:block;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#9fb6d9}
.pp-testing__big{display:block;margin:6px 0 2px;font-size:88px;line-height:1;letter-spacing:-.05em;background:linear-gradient(120deg,#8fd3f4,#a5e5c9);-webkit-background-clip:text;background-clip:text;color:transparent}
.pp-testing__dark dl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 22px;padding-top:20px;border-top:1px solid #ffffff26}
.pp-testing__dark dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9fb6d9}
.pp-testing__dark dd{margin:4px 0 0;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.pp-btn--light{width:100%;border-color:#fff;background:#fff;color:var(--ink)}
.pp-testing__steps{padding:24px 22px;border:1px solid var(--line);border-radius:24px;background:#fff}
.pp-testing__steps ol{list-style:none;margin:14px 0 0;padding:0;counter-reset:step}
.pp-testing__steps li{position:relative;padding:14px 0 14px 46px;border-top:1px solid var(--line);counter-increment:step}
.pp-testing__steps li:first-child{border-top:0}
.pp-testing__steps li:before{content:counter(step);position:absolute;left:0;top:14px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e6f7ee;font-size:13px;font-weight:700;color:#1f7a5a}
.pp-testing__steps strong{display:block;font-size:14px}
.pp-testing__steps span{display:block;margin-top:2px;font-size:13px;line-height:1.55;color:var(--muted)}

.pp-compound{margin-top:52px}
.pp-display{margin:0 0 18px;font-size:30px;letter-spacing:-.03em}
.pp-display em{font-family:Georgia,'Times New Roman',serif;font-weight:400}
.pp-compound__card{padding:24px 20px;border:1px solid var(--line);border-radius:24px;background:#fff}
.pp-compound__card h3{margin:0 0 8px;font-size:20px;letter-spacing:-.02em}
.pp-compound__card>p{margin:0 0 16px;font-size:14px;line-height:1.75;color:#2c4057}
.pp-compound__card h4{margin:22px 0 6px;font-size:14px}
.pp-compound__card .pp-specs{margin-top:8px}
.pp-notice{margin-top:20px}
.pp-notice__card{padding:20px;border:1px solid var(--line);border-radius:20px;background:#fbfdfe}
.pp-notice__card p{margin:0 0 8px;font-size:12px;line-height:1.7;color:#3d5168}
.pp-notice__card p:last-child{margin:0}
.pp-notice__card .pp-eyebrow{margin-bottom:8px}

.pp-cta{position:relative;margin-top:56px;padding:64px 0;overflow:hidden;background:linear-gradient(120deg,#e8f6ff 0,#eafaf3 50%,#f2efff 100%)}
.pp-cta__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.pp-cta h2{position:relative;z-index:1;max-width:680px;margin:0;font-size:28px;line-height:1.25;letter-spacing:-.03em}
.pp-cta h2 span{background:linear-gradient(transparent 62%,#99e2d7 62%)}
.pp-cta .button{position:relative;z-index:1}
.pp-cta__vial{position:absolute;width:86px;height:auto;opacity:.9}
.pp-cta__vial--a{left:-14px;top:-40px;rotate:-24deg}
.pp-cta__vial--b{right:-10px;bottom:-56px;rotate:18deg}
.pp-news{margin-top:28px}
.pp-news__card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:24px 20px;border-radius:24px;background:linear-gradient(110deg,#eef5ff 0,#f4efff 100%);border:1px solid #e1e3f5}
.pp-news__copy h2{margin:0 0 6px;font-size:22px;letter-spacing:-.02em}
.pp-news__copy p{margin:0;font-size:13px;line-height:1.6;color:#3d5168}
.pp-news__form{position:relative;z-index:1}
.pp-news__row{display:flex;gap:8px}
.pp-news__row input{flex:1;min-width:0;min-height:50px;padding:0 18px;border:1px solid #7a8fa3;border-radius:99px;background:#fff;font:16px var(--font);color:var(--ink)}
.pp-news__row .pp-btn{min-height:50px}
.pp-news__consent{display:flex;gap:12px;align-items:flex-start;margin-top:6px;padding-block:8px;min-height:44px;font-size:12px;line-height:1.5;color:#3d5168;cursor:pointer}
.pp-news__consent input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--ink)}
.pp-news .form-status{margin:8px 0 0;font-size:12px;color:var(--muted)}
/* An empty status line takes no room, so the sign-up card ends where its consent line does. */
.pp-news .form-status:empty{min-height:0;margin:0}
.pp-news__vial{display:none}

.pp-sticky__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pp-sticky__top strong{min-width:0;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-sticky__price{flex:none;font-size:12px;color:var(--muted)}
.pp-sticky__price b{margin-right:4px;font-size:16px;color:var(--ink)}
.pp-sticky__row{display:flex;align-items:center;gap:8px}
.pp-sticky__sizes{display:flex;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}
.pp-sticky__sizes::-webkit-scrollbar{display:none}
.pp-sticky-size,.pp-sticky__size{flex:none;min-height:46px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:#fff;font:600 13px var(--font);text-transform:uppercase;color:var(--ink)}
.pp-sticky__size{display:inline-grid;place-items:center}
.pp-sticky-size[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pp-sticky-size[data-soldout]:not([aria-checked="true"]){color:var(--muted)}
/* Forced colors drop the dark fill, so selected sizes, tiers and chips need a system highlight to read as selected. */
@media (forced-colors:active){
 .pp-size[aria-checked="true"],.pp-sticky-size[aria-checked="true"],.pp-tier[aria-pressed="true"],.shop-chips button[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
 .pp-size[aria-checked="true"] small,.pp-tier[aria-pressed="true"] :is(s,em){background:none;color:HighlightText}
}
.pp-sticky__row .pp-btn{flex:1 0 auto;min-width:0;padding:0 16px}
.pp-sticky__sizes{flex:0 1 auto}
@media (max-width:389px){.pp-sticky__total{display:none}.pp-sticky-size{padding:0 10px}}

.cart-deal{display:block;margin-top:2px;font-size:12px;font-weight:600;color:#8a5a00}
.cart-deal s,.cart-line s{font-weight:400;color:var(--muted)}
.cart-line{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:13px;color:var(--muted)}
.cart-line--save b{color:#1f7a5a}
.ship-meter{margin:12px 0 4px}
.ship-meter p{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:12px;font-weight:600;color:var(--ink)}
.ship-meter p .icon{width:16px;height:16px;color:#2a8f6a}
.ship-meter__bar{display:block;height:6px;border-radius:99px;background:#e7eef3;overflow:hidden}
.ship-meter__bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8fd3f4,#a5e5c9)}
.ship-meter.is-free .ship-meter__bar i{background:#2fb67c}
.quote-summary__save{display:flex;justify-content:space-between;gap:12px;padding-top:8px;font-size:13px;color:var(--muted)}
.quote-summary__save b{color:#1f7a5a}
.quote-summary li b s{font-weight:400;color:var(--muted)}

@media (max-width:600px){.promo-bar p span{display:none}.promo-bar__inner{min-height:50px}}
@media (min-width:600px){
 .pp-program__card{grid-template-columns:auto minmax(0,1fr) auto;padding:22px 26px}
 .pp-program__card .pp-btn{grid-column:auto}
 .pp-testing__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
 .pp-news__card{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;padding:30px 32px}
}
@media (min-width:900px){
 .pp-config{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"size size" "qty price" "offer offer";gap:16px 20px;align-items:center}
 .pp-config .pp-option,.pp-config .pp-option--qty{flex-direction:row;align-items:center;gap:16px}
 .pp-option--qty .pp-label{display:block}
 .pp-config .pp-label{flex:none;width:76px}
 .pp-config .pp-option--qty{justify-self:start}
 .pp-pricebox{text-align:right}
 .pp-tiers{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:0;padding:0}
 .pp-tier{flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:12px}
 .pp-program,.pp-testing{margin-top:72px}
 .pp-testing__panel{padding:56px 48px 48px}
 .pp-testing__panel h2{font-size:44px}
 .pp-testing__dark{padding:34px 32px}
 .pp-testing__steps{padding:32px}
 /* The three steps share the card's height, so it doesn't end in empty space beside the taller dark card. */
 .pp-testing__steps{display:flex;flex-direction:column}
 .pp-testing__steps ol{flex:1;display:grid;grid-auto-rows:1fr}
 .pp-testing__steps li{display:flex;flex-direction:column;justify-content:center}
 .pp-testing__steps li:before{top:50%;margin-top:-15px}
 [data-theme="tidal-form"] .pp-compound{margin-top:84px}
 .pp-display{font-size:40px;text-align:left}
 /* Desktop: the compound card uses the page's full width, the description on the left and the specs on the right. */
 .pp-compound__card{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:repeat(4,auto) 1fr;column-gap:56px;align-items:start;padding:36px 40px}
 .pp-compound__card>*{grid-column:1}
 .pp-compound__card .pp-specs{grid-column:2;grid-row:1/-1;margin:0}
 .pp-compound__card h4{margin-top:10px}
 .pp-compound__card>p:last-child{margin:0}
 .pp-notice{margin-top:24px}
 .pp-notice__card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;padding:24px 40px}
 .pp-notice__card .pp-eyebrow{grid-column:1/-1}
 .pp-notice__card p{margin:0}
 .pp-cta{margin-top:84px;padding:110px 0}
 .pp-cta h2{font-size:40px}
 .pp-cta__vial{width:150px}
 .pp-cta__vial--a{left:4%;top:-30px}
 .pp-cta__vial--b{right:5%;bottom:-70px}
 .pp-news__vial{display:block;position:absolute;right:-6px;bottom:-60px;width:110px;height:auto;rotate:16deg;opacity:.9}
 .pp-news__form{margin-right:96px}
}

/* Bottles are clean transparent cut-outs. A CSS shadow shows through the glass, and iPhones draw it as a box behind the vial. */
html[data-site="store"] .hero-vial,html[data-site="store"] .gate-vials img{filter:none}
/* Fast taps on steppers and sizes never trigger iPhone double-tap zoom. */
html[data-site="store"] :is(a,button,input,select,label){touch-action:manipulation}
@media (min-width:1200px){
 .pp-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
 .pp-stage{height:min(720px,calc(100vh - 128px))}
}
@media (min-width:1360px){
 .pp-config{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"size price" "qty price" "offer offer";gap:12px 24px}
 .pp-config .pp-option{align-self:start}
 .pp-config .pp-option--qty{align-self:start}
 .pp-offer{text-align:right}
 .pp-offer strong{display:block;font-weight:500;color:var(--muted)}
 .pp-tier{flex-direction:row;align-items:center;gap:8px;padding:10px}
 .pp-tier__art img{width:18px;height:35px}
 .pp-tier__art img+img{margin-left:-7px}
}
/* Beside the bottle the buy card is under 540 wide until 1360, so it keeps the phone layout. */
@media (min-width:900px) and (max-width:1359px){
 .pp-title{font-size:clamp(34px,3.7vw,44px)}
 .pp-config{grid-template-areas:"size size" "price qty" "offer offer";gap:14px 12px;align-items:start}
 .pp-config .pp-option,.pp-config .pp-option--qty{flex-direction:column;align-items:stretch;gap:10px}
 .pp-config .pp-option--qty{justify-self:end;align-self:center}
 .pp-option--qty .pp-label{display:none}
 .pp-config .pp-label{width:auto}
 .pp-pricebox{text-align:left}
 .pp-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pp-tier{flex-direction:row;align-items:center;gap:10px;padding:10px}
 .pp-wide{display:none}
}
/* Tablets: all four tiles sit inside the full-width card, and a shorter stage keeps the name near the fold. */
@media (min-width:600px) and (max-width:899px){
 .pp-tiers{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;scroll-snap-type:none;margin:0;padding:0}
 .pp-tier{flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:10px}
 .pp-stage{aspect-ratio:auto;height:min(460px,56vh)}
}
/* Under 700 two columns clip "Request the testing record", squeeze the volume text and crush the email field. */
@media (min-width:600px) and (max-width:699px){
 .pp-program__card{grid-template-columns:auto minmax(0,1fr)}
 .pp-program__card .pp-btn{grid-column:1/-1}
 .pp-testing__grid,.pp-news__card{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:599px){
 .pp-actions{grid-template-columns:auto minmax(0,1fr)}
 .pp-actions .pp-btn--dark{order:0;padding:0 14px}
 .pp-actions .pp-btn:not(.pp-btn--dark){padding:0 14px;font-size:13px}
 .pp-actions .pp-restock{grid-column:1/-1}
 .pp-wide{display:none}
 .pp-second span{display:block;margin-top:2px}
 /* All four quantity tiles in view, nothing to scroll and nothing cut off at the card edge. */
 .pp-tiers{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none;margin:0;padding:0}
 .pp-tier{min-width:0;padding:10px}
}
/* Phones and tablets: the band's vials sit in its padding, above the headline and below the button. */
@media (max-width:899px){
 .pp-cta{padding:92px 0 104px}
 .pp-cta__vial{width:64px}
 .pp-cta__vial--a{top:-96px}
 .pp-cta__vial--b{bottom:-104px}
}
@media (min-width:900px) and (max-width:1023px){
 .pp-cta__vial{width:112px}
 .pp-cta__vial--a{left:0;top:-14px}
 .pp-cta__vial--b{right:0;bottom:-40px}
}
/* The trust footer's two labels stack cleanly where one row can't hold them. */
@media (max-width:459px),(min-width:900px) and (max-width:1099px){
 .pp-trust__foot{flex-wrap:wrap;gap:2px 8px}
 .pp-trust__foot b{letter-spacing:.08em}
 .pp-trust .pp-trust__foot span{margin-left:28px}
}
@media (max-width:360px){
 .pp-tier{flex-direction:column;align-items:flex-start;gap:6px}
 .pp-actions{grid-template-columns:minmax(0,1fr)}
 .pp-actions .pp-btn--dark{order:-1}
 /* The smallest phones: compound names stay whole and nothing touches a card edge. */
 .pp-title{font-size:28px}
 .pp-second{white-space:nowrap}
 .pp-second b{padding-inline:4px}
 .pp-testing__dark .pp-btn--light{padding-inline:12px;font-size:13px}
 .second-vial b{padding-inline:4px}
}

/* Phone menu: scrolls inside itself when it's taller than the screen, and never shows above the phone layout. */
@media (max-width:760px){.mobile-links:not([hidden]){max-height:calc(100vh - 67px);max-height:calc(100dvh - 67px);overflow-y:auto;overscroll-behavior:contain}}
@media (min-width:761px){.mobile-links{display:none}}
.promo-coin[hidden],.pp-offer[hidden],.pp-second[hidden],.pp-sticky__second[hidden]{display:none}
@media (max-width:420px){.pp-news__row{flex-wrap:wrap}.pp-news__row input{flex:1 1 100%}.pp-news__row .pp-btn{flex:1}}
/* Bottom bar: three sizes leave no room for the total, which the row above shows anyway. */
.pp-sticky__row:has(.pp-sticky-size:nth-child(3)) .pp-sticky__total{display:none}
@media (max-width:360px){.pp-sticky__row{gap:6px}.pp-sticky__sizes{gap:4px}.pp-sticky-size{padding:0 7px;font-size:12px}}
/* The smallest phones: the offer and the added panel's eyebrow each keep to their one line. */
@media (max-width:360px){.promo-bar__inner{gap:10px}.promo-bar__link{padding:0 12px}.promo-bar__link .icon{display:none}.added-sheet__eyebrow{font-size:10px;letter-spacing:.04em}}
/* Phone on its side: the whole bottle fits between the header and the bar. */
@media (orientation:landscape) and (max-height:500px) and (max-width:899px){.pp-stage{aspect-ratio:auto;height:280px}}
/* Short screens (a phone on its side, a zoomed page): the header and chips scroll away and the bottom bar is one slim row. Very short ones drop the bar; the page's own Add stays. */
@media (max-height:500px){
 html[data-site="store"] .site-header,.shop-chips{position:static}
 html[data-site="store"] .promo-bar{display:none}
 html[data-site="store"]{scroll-padding-top:12px}
}
@media (max-height:500px) and (max-width:899px){
 html:has(.pp-sticky.is-visible){scroll-padding-bottom:84px}
 .pp-sticky__top{display:none}
 .pp-sticky{padding-block:8px calc(8px + env(safe-area-inset-bottom))}
 body[data-page="product"] .footer{padding-bottom:84px}
}
@media (max-height:299px) and (max-width:899px){
 .pp-sticky{display:none}
 html:has(.pp-sticky.is-visible){scroll-padding-bottom:0}
 body[data-page="product"] .footer{padding-bottom:0}
}
/* A dialog's top line is a solid band: the close button stays in reach while a long dialog scrolls, and nothing slides under it or shows through. */
/* The dialog gives up its top padding to the band, as it does at the bottom for .basket-foot: a sticky box stops at its scroller's padding. */
html[data-site="store"] .dialog{padding-top:0;scroll-padding-top:104px}
.dialog-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;margin-inline:-40px;padding:10px 20px 10px 40px;background:var(--surface);transition:box-shadow .15s}
.dialog-head .close-dialog{position:static;flex:none}
/* Store dialogs open with the official logo in place of a typed "StimuTide". */
.dialog-brand{display:block;line-height:0}
.dialog-head .dialog-brand .brand{width:138px}
@media (max-width:370px){.dialog-head .dialog-brand .brand{width:122px}}
.dialog.is-scrolled .dialog-head{box-shadow:0 1px 0 var(--line)}
.dialog-head+h2{margin-top:10px;padding-right:0}
@media (max-width:760px){.dialog-head{min-height:56px;margin-inline:-22px;padding:6px 12px 6px 22px}}
/* Success screens are short flex columns: the close button stays in the corner, not under the check mark, and the check stays round. */
html[data-site="store"] .dialog:has(>.success-mark){padding-top:40px}
@media (max-width:760px){html[data-site="store"] .dialog:has(>.success-mark){padding-top:32px}}
.dialog:has(>.success-mark) .dialog-head{display:contents}
.dialog:has(>.success-mark) .dialog-head .close-dialog{position:absolute}
/* A phone on its side: the band and the pinned total leave the lines as much room as they can. */
@media (max-height:500px){
 html[data-site="store"] .dialog{scroll-padding-top:60px}
 .basket-dialog:has(.basket-foot){scroll-padding-bottom:84px}
 .dialog-head{min-height:52px;padding-block:4px}
 .basket-foot{display:flex;align-items:center;gap:20px;padding-block:10px 12px}
 .basket-foot .cart-subtotal{flex:none;gap:14px;margin:0;font-size:18px}
 .basket-foot .button{flex:1;width:auto;min-height:46px}
}
.dialog>.success-mark{flex:none}
/* Library cards on small phones: the coin and the lab-tested chip don't overlap. */
@media (max-width:430px),(min-width:600px) and (max-width:680px){.shop-grid .shop-card__chip{top:8px;left:8px;padding:3px 8px;font-size:12px}.shop-grid .shop-card__art .promo-coin{top:6px;right:6px;width:54px;height:54px;font-size:12px;letter-spacing:0}}
/* Up to 400px a 12px chip and coin don't fit side by side on a library card, so the coin sits under the chip. */
@media (max-width:400px){.shop-grid .shop-card__art .promo-coin{top:42px}}
@media (max-width:349px){.shop-grid .shop-card__chip{display:none}}
/* iPhone details: no zoom on focus at any size, dialogs don't drag the page, no heavy filter on the animated hero waves. */
@media (pointer:coarse){html[data-site="store"] :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px!important}}
.overlay,.dialog{overscroll-behavior:contain}
html:has(body.locked){overflow:hidden}
html[data-site="store"]{touch-action:manipulation}
html[data-site="store"] .hero-tidal-waves{filter:none}

/* The top bar is solid white: nothing shows through it while the page scrolls, and there is no blur to repaint. */
html[data-site="store"] .site-header{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line)}
/* Opening a dialog never nudges the page sideways where scrollbars take up space. */
html[data-site="store"]{scrollbar-gutter:stable}
/* Phones skip the blur behind dialogs, so a long basket scrolls smoothly. */
@media (max-width:760px){html[data-site="store"] .overlay:not(.verification){-webkit-backdrop-filter:none;backdrop-filter:none;background:#061725b8}}
/* Text links keep their look but get a finger-sized tap area on touch screens. */
@media (pointer:coarse){html[data-site="store"] .vt-inline-link{padding-block:9px;margin-block:-9px}.shop-card h3 a{display:block;padding-block:10px;margin-block:-10px}.basket-lines .cart-name a{display:inline-block;padding-block:10px;margin-block:-10px}.footer-legal a{padding-inline:8px;margin-inline:-8px}}
/* At 320px the logo and three buttons need a little less room, or the right edge loses its margin. */
@media (max-width:330px){.site-header .brand{width:122px}.site-header .nav-inner{gap:10px}}

/* "No discounts needed": one quiet line where people think about price. */
.hero-proof{margin:18px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.hero-proof b{font-weight:600;color:var(--ink)}
.promo-bar p em{font-style:normal;color:#b9cbe6}
@media (max-width:600px){.promo-bar p em{display:block;font-size:12px}}
.cart-note{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}

/* Card checkout: copy drawn both ways (byCheckout in store.js) shows one side at a time, whatever display its class gives it. */
[data-checkout][hidden]{display:none!important}
.pp-trust .pp-trust__pair{display:contents}
.basket-actions{display:grid;gap:2px}
.basket-actions .button{width:100%}
.basket-actions .basket-quote{justify-self:center;min-height:44px;padding:0 14px;font-size:13px;color:var(--muted);text-decoration:none}
.basket-actions .basket-quote span{text-align:center;text-wrap:balance}.basket-actions .basket-quote u{color:var(--ink);text-underline-offset:3px}
@media (max-height:500px){.basket-foot .basket-actions{flex:1;grid-template-columns:1fr auto;align-items:center;gap:8px}}
.added-sheet__actions a.shop-btn{text-decoration:none}
/* The free Research Water line in the basket, once the order reaches $200. */
.basket-gift{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:16px;padding:12px 14px;border:1px solid #bfe6d3;border-radius:16px;background:#effaf5}
.basket-gift img{width:34px;height:64px;object-fit:contain}
.basket-gift strong{display:block;font-size:14px;color:var(--ink)}
.basket-gift span{display:block;font-size:12px;line-height:1.45;color:var(--muted)}
.basket-gift>b{font-size:13px;font-weight:700;color:#237a5b}
/* "We accept" card marks in the footer (paymentMarks in store.js), shown while card checkout is on. */
.pay-marks{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:18px}
.pay-marks__label{font-size:12px;color:#9cb6c0}
.pay-marks__row{display:flex;gap:6px}
.pay-mark{display:block;width:46px;height:30px}

/* Layout pass (2026-11-01). Small phones: the tilted bottle sat 2px into "Secretagogue". A long notice reads in measured lines on
   wide screens. A touch phone held sideways gets the desktop footer, so its links keep phone-sized tap areas. */
@media(max-width:380px){.store-cats[data-art="raised"]{--art-right:-14px}}
/* With wider text spacing (a reader's own setting) a category name draws over the glass instead of being cut off under it. */
.store-cat__text{position:relative;z-index:1}
.pp-notice__card p{max-width:90ch}
@media (pointer:coarse){html[data-site="store"] .footer-grid li a,html[data-site="store"] .footer-grid li button{display:flex;align-items:center;min-height:44px}html[data-site="store"] .vt-text-link{min-height:44px}}
/* The quote form's reminder note sits just under the email field (outside its label, so the field's spoken name stays short) and
   takes no room when a deployment sends no reminders. */
#quote-reminder-hint{display:block;margin-top:-6px}
#quote-reminder-hint:empty{display:none}
/* The generated pages arrive drawn (tools/build-store-pages.mjs). Their researcher check shows from the first paint only when
   /js/first-paint.js finds no recent pass, and a filtered link's drawn page waits for app.js to draw the right list (or 8 s). */
#overlay-root>[data-static-gate]{display:none}
html[data-gate] #overlay-root>[data-static-gate]{display:flex}
html[data-gate] body{overflow:hidden}
html[data-stale] #main{visibility:hidden;animation:vt-stale-show 0s 8s forwards}
@keyframes vt-stale-show{to{visibility:visible}}
/* The basket and quote form share the customer pages' controls (tokens in base.css): inputs a full control tall with the same
   radius, label, error text and focus ring as checkout, account and track order. */
[data-theme="tidal-form"] .dialog .field{font-weight:600}
[data-theme="tidal-form"] .dialog .field .field-optional{font-weight:400}
[data-theme="tidal-form"] .dialog .field input,[data-theme="tidal-form"] .dialog .field textarea{min-height:var(--vt-control);padding:13px 14px;border-color:var(--vt-field);border-radius:var(--vt-radius-sm);background:#fff;font-weight:400;font-size:16px;transition:border-color .15s,box-shadow .15s}
[data-theme="tidal-form"] .dialog .field textarea{min-height:110px}
[data-theme="tidal-form"] .dialog .field input:focus,[data-theme="tidal-form"] .dialog .field textarea:focus{outline:none;border-color:var(--vt-focus-color);box-shadow:var(--vt-focus-ring)}
[data-theme="tidal-form"] .dialog .field input[aria-invalid="true"],[data-theme="tidal-form"] .dialog .field textarea[aria-invalid="true"]{border-color:var(--vt-red)}
.field-error{margin-top:4px;font-size:13px;color:var(--vt-red)}
[data-theme="tidal-form"] .dialog .button.primary{min-height:var(--vt-control)}

/* StimuTide packaging uses native 4:5 transparent canvases. Keep Valuetide's
   layout while giving the visible bottles the same scale and exact-count tier art. */
.pp .pp-stage__img{object-fit:contain;filter:none}
.pp .pp-tier__art{height:42px;align-items:center}
.pp .pp-tier__art img{flex:none;width:44px;max-width:none;height:55px;margin:-6.5px -11px;object-fit:contain}
.pp .pp-tier__art img+img{margin-left:-20px}
.pp .pp-tier__art[data-stack="10"] img{margin:-6.5px -11px}
.pp-source{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.pp-source a{display:inline-flex;align-items:center;gap:8px;text-decoration:underline;text-underline-offset:4px}
.pp-source small{font-size:12px;color:var(--muted);line-height:1.6}
.pp-reference .pp-buy{align-self:start}
.pp-reference .pp-compound__card{margin-top:24px;padding:24px}
.pp-reference .pp-compound__card h2{font-size:24px;line-height:1.25}
.pp-reference .pp-compound__card>.button{margin-top:22px;white-space:normal;text-align:center}
.pp-testing__big{letter-spacing:-.06em}
.shop-card--reference .shop-card__actions{grid-template-columns:1fr}
.shop-card--reference .shop-card__price{font-size:17px}
.shop[data-cards="compact"] .shop-grid .shop-card--reference .shop-card__actions>a.shop-btn{display:inline-flex}
.store-cat__art{rotate:0deg}
.store-cats[data-art="raised"] .store-cat__art{right:calc(var(--art-right) - 8px)}
.store-cats .store-cat__text strong{white-space:normal}
html[data-site="store"] .gate-vials img{rotate:0deg}
.pp-cta__vial,.pp-news__vial{rotate:0deg}
@media(min-width:1360px){
 .pp .pp-tier__art{height:35px}
 .pp .pp-tier__art img{width:36px;height:45px;margin:-5px -9px}
 .pp .pp-tier__art img+img{margin-left:-16px}
}

.basket-lines .cart-row>img{width:80px;height:100px;max-width:none;object-fit:contain;margin-inline:-12px;background:transparent}
.added-sheet__card>img{width:80px;height:100px;margin-inline:-20px;object-fit:contain}
.basket-addon>img,.basket-gift>img{width:68px;height:85px;margin-inline:-17px;object-fit:contain}
.quote-summary li>img{width:48px;height:60px;margin-inline:-12px;object-fit:contain}

/* Discounted quantity options share artwork, price and savings rows at every
   breakpoint. The single unit centers its shorter content without empty rows. */
.pp .pp-tier{display:grid;grid-template-rows:60px auto;justify-items:center;align-items:start;gap:6px;min-width:0;min-height:0;padding:12px 10px;text-align:center}
.pp .pp-tier__art{height:60px;align-items:center;align-content:center;justify-self:center}
.pp .pp-tier__art[data-stack="10"]{height:60px;align-items:start;align-content:center}
.pp .pp-tier__text{display:grid;grid-template-rows:18px 32px 20px;justify-items:center;align-items:center;gap:3px;width:100%;min-width:0;text-align:center}
.pp .pp-tier__text strong{font-size:13px;line-height:18px}
.pp .pp-tier__price{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:0;align-self:start;width:100%;font-size:12px;line-height:16px}
.pp .pp-tier__price b{font-size:13px;line-height:16px}
.pp .pp-tier__price s{line-height:16px}
.pp .pp-tier__text em{justify-self:center;align-self:center;margin:0;line-height:18px}
.pp .pp-tier[data-pp-tier="1"]{grid-template-rows:60px max-content;align-content:center}
.pp .pp-tier[data-pp-tier="1"] .pp-tier__text{grid-template-rows:18px 16px}
/* Desktop keeps the compact side-by-side layout, with each group centered. */
@media(min-width:900px){
 .pp .pp-tier,.pp .pp-tier[data-pp-tier="1"]{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto;align-items:center;align-content:center;padding:8px;gap:6px}
 .pp .pp-tier__art{height:42px}
 .pp .pp-tier__art[data-stack="10"]{height:60px;grid-template-columns:repeat(3,12px) 22px}
 .pp .pp-tier__art[data-stack="10"] img:nth-child(-n+6){transform:translateX(6px)}
}
@media(min-width:1360px){
 .pp .pp-tier__art{height:31px}
 .pp .pp-tier__art img{width:32px;height:40px;margin:-4.5px -8px}
 .pp .pp-tier__art img+img{margin-left:-15px}
 .pp .pp-tier__art[data-stack="10"]{height:47px;grid-template-columns:repeat(3,7px) 16px;grid-template-rows:8px 8px 31px}
 .pp .pp-tier__art[data-stack="10"] img{margin:-4.5px -8px}
 .pp .pp-tier__art[data-stack="10"] img:nth-child(-n+6){transform:translateX(3.5px)}
}

/* Explicitly labeled, browser-only activity preview. */
.demo-activity{position:fixed;z-index:35;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:min(360px,calc(100vw - 40px));padding:16px;border:1px solid #d9e4e8;border-radius:20px;background:#fff;color:var(--ink,#141a3c);box-shadow:0 12px 44px #12274220;font:400 13px/1.45 var(--font,sans-serif);isolation:isolate}
.demo-activity[hidden]{display:none}
.demo-activity__header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.demo-activity__label{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#775318}
.demo-activity__label::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:#dba44a;box-shadow:0 0 0 4px #fff5dd}
.demo-activity__content{display:flex;align-items:center;gap:12px;min-width:0}
.demo-activity__image{flex:none;width:42px;height:68px;object-fit:contain}
.demo-activity__body{flex:1;min-width:0}
.demo-activity__person{margin:0 0 3px;font-size:14px;font-weight:650;line-height:1.4;overflow-wrap:anywhere}
.demo-activity__product{display:block;margin:0;color:#415d70;font-size:12px;line-height:1.5;text-decoration:none;overflow-wrap:anywhere}
.demo-activity__product:hover{text-decoration:underline}
.demo-activity__total{margin:5px 0 0;font-size:12px;color:#415d70;font-variant-numeric:tabular-nums}
.demo-activity__total strong{font-size:14px;color:var(--ink,#141a3c);font-weight:700}
.demo-activity__disclosure{margin:12px 0 0;padding-top:10px;border-top:1px solid #e5ecef;color:#526778;font-size:11px;line-height:1.5}
.demo-activity__controls{display:flex;gap:7px;margin-top:10px}
.demo-activity__button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 13px;border:1px solid #dce5e9;border-radius:11px;background:#f7fafb;color:var(--ink,#141a3c);font:600 12px/1.2 var(--font,sans-serif);cursor:pointer}
.demo-activity__button:disabled{opacity:.65;cursor:default}
.demo-activity__button:hover{background:#edf4f5;border-color:#bbced5}
.demo-activity__button:focus-visible,.demo-activity__product:focus-visible{outline:3px solid #467d75;outline-offset:3px}
.demo-activity__header .demo-activity__button{margin:-10px -8px -6px 0;border-color:transparent;background:transparent;font-size:18px;padding:0}
@media(max-width:599px){.demo-activity{left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:calc(100vw - 24px);max-width:360px;padding:13px 14px;border-radius:17px}.demo-activity__header{margin-bottom:6px}.demo-activity__controls{margin-top:8px}.demo-activity__disclosure{margin-top:9px;padding-top:8px}}
@media(prefers-reduced-motion:reduce){.demo-activity,.demo-activity *{animation:none!important;transition:none!important}}
@media(forced-colors:active){.demo-activity,.demo-activity__button{border:1px solid CanvasText}.demo-activity__label::before{background:CanvasText;box-shadow:none}}
@media print{.demo-activity{display:none!important}}

/* Long-running demo controls and multi-product example orders. */
.demo-activity{max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.demo-activity__items{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.demo-activity__item[hidden]{display:none}
.demo-activity__item+.demo-activity__item{padding-top:5px;border-top:1px solid #eef2f4}
.demo-activity__context{margin:7px 0 0;color:#526778;font-size:11px}
.demo-activity__controls{align-items:end;flex-wrap:wrap}
.demo-activity__pace-label{display:flex;flex:1;flex-direction:column;gap:3px;min-width:100px;margin-left:auto;color:#526778;font-size:10px;line-height:1.3}
.demo-activity__pace{width:100%;min-height:44px;padding:0 10px;border:1px solid #dce5e9;border-radius:11px;background:#f7fafb;color:var(--ink,#141a3c);font:600 12px/1.2 var(--font,sans-serif);cursor:pointer}
.demo-activity__pace:focus-visible{outline:3px solid #467d75;outline-offset:3px}
@media(forced-colors:active){.demo-activity__pace{border:1px solid CanvasText}}