.store-app [hidden] { display: none !important; }
.store-app {
  --store-gold: #d3ae7d;
  --store-muted: #bdb5a8;
  --store-teal: #008c99;
  min-height: 100svh;
  background: #120f0b;
  color: #f7f0e7;
  font-family: Arial, Helvetica, sans-serif;
}
.store-app .app-shell {
  width: 100%; max-width: 820px; min-height: 100svh; margin: 0 auto;
  padding: 0; background: #100e0adf; box-shadow: 0 0 50px #0008;
}
.store-app .topbar {
  position: relative; inset: auto; transform: none; height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; gap: 6px; border: 0; background: #4e342e;
}
.store-brand { margin-right: auto; color: #f5ebdc; text-decoration: none; font-size: 17px; font-weight: 700; letter-spacing: .12em; }
.store-header-icon { position: relative; flex: none; width: 40px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: #f5ebdc; cursor: pointer; }
.store-header-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.store-header-icon:disabled { opacity: .4; }
#cartBadge { position: absolute; right: 0; top: 3px; min-width: 17px; height: 17px; padding: 0 3px; display: grid; place-items: center; border-radius: 10px; background: #5ed1d6; color: #101010; font: 700 10px Arial,sans-serif; }
.store-profile-menu { position: static; flex: none; }
.store-profile { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; color: #f5ebdc; cursor: pointer; list-style: none; }
.store-profile::-webkit-details-marker { display: none; }
.store-profile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.store-profile-menu[open] .store-profile { background: #241b14; color: #7cecf1; }
.store-profile-links { position: absolute; z-index: 20; top: calc(100% + 6px); right: 12px; display: grid; gap: 4px; width: min(304px,calc(100vw - 24px)); max-height: calc(100dvh - 76px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid #715b40; border-radius: 12px; background: #241b14; box-shadow: 0 10px 28px #0008; }
.store-profile-links a, .store-profile-links label { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; color: #f4eadc; font: 14px/1.4 Arial, sans-serif; text-decoration: none; cursor: pointer; }
.store-profile-links .store-app-link { justify-content: space-between; margin-bottom: 4px; background: #35261d; }
.store-app-link strong, .store-app-link small { display: block; }
.store-app-link strong { font-size: 15px; }
.store-app-link small { margin-top: 4px; color: #d4c2ad; font-size: 13px; }
.store-menu-arrow { flex: none; color: #7cecf1; font-size: 22px; }
.store-profile-links label:hover { background: #35261d; }
.store-profile-links input[type="checkbox"] { appearance: none; flex: 0 0 22px; width: 22px; height: 22px; margin: 0; border: 2px solid #cdbca7; border-radius: 4px; background: #120f0b; cursor: pointer; }
.store-profile-links input[type="checkbox"]:checked { border-color: #7cecf1; background: #7cecf1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4L19 6' fill='none' stroke='%23120f0b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat; }
.store-profile:focus-visible, .store-profile-links a:focus-visible, .store-profile-links input:focus-visible { outline: 2px solid #7cecf1; outline-offset: 3px; }
@media (forced-colors: active) { .store-profile-links input[type="checkbox"] { appearance: auto; } }
.store-profile-links a:hover, .store-profile-links a:focus-visible { background: #4e342e; }
.store-context { max-width: 30%; font-size: 11px; text-align: right; overflow-wrap: anywhere; }
.store-showing-results .store-context { display: none; }
.store-context small { display: block; font-size: 10px; color: var(--store-muted); }
.store-entry { display: flex; flex-direction: column; gap: 10px; height: calc(100dvh - 52px); min-height: 0; box-sizing: border-box; padding: 0 20px calc(12px + env(safe-area-inset-bottom)); }
.store-hero { flex: none; margin: 0 -20px; padding: 12px 20px 10px; background: linear-gradient(90deg,#120e0af5,#120e0aa0), url("../web/assets/background.webp") 72% 53% / cover; }
.store-hero h1, .store-results-hero h1, .store-dialog h2 { font-family: Georgia, serif; font-weight: 700; letter-spacing: -.025em; color: #fff7eb; }
.store-hero h1 { margin: 0 0 6px; font-size: clamp(32px,8vw,44px); line-height: 1.04; }
.store-lede { max-width: 480px; margin: 0; color: #d6cabc; font-size: 14px; line-height: 1.5; }
.store-wide-break { display: none; }
.store-step-heading { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; align-items: start; margin: 0 0 12px; }
.store-step-number { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #a38255; border-radius: 50%; color: var(--store-gold); font-size: 12px; }
.store-step-heading strong { display: block; padding-top: 2px; font-size: 16px; line-height: 1.3; }
.store-step-heading p { margin: 4px 0 0; color: var(--store-muted); font-size: 12px; line-height: 1.4; }
.store-bottle-step { flex: none; padding: 14px 14px; border: 1px solid transparent; background: linear-gradient(#120f0bed,#120f0bed) padding-box, linear-gradient(115deg,#4a9cff66,#f05b7066) border-box; box-shadow: -5px 0 18px #4a9cff18, 5px 0 18px #f05b7018; }
.store-owned-step, .store-bottle-step { position: relative; border-radius: 16px; transition: box-shadow .25s, border-color .25s; }
.store-owned-step { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 18px 14px; border: 1px solid #80623e33; background: #16120dcc; }
.store-considered { max-height: 84px; overflow-y: auto; overscroll-behavior-y: contain; }
.store-owned-step .store-entry-methods > button { min-height: 50px; }
.store-step-link { width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; font-family: inherit; cursor: pointer; }
.store-step-hint { display: block; margin-top: 4px; color: var(--store-muted); font-size: 12px; line-height: 1.4; }
.store-step-hint > span { color: #66d5c8; }
.store-bottle-step { scroll-margin-top: 18px; }
.store-owned-step[data-guided="true"], .store-bottle-step[data-guided="true"] { box-shadow: -5px 0 18px #4a9cff26, 5px 0 18px #f05b7026; }
.store-bottle-step[data-guided="true"] { background: linear-gradient(#120f0bed,#120f0bed) padding-box, linear-gradient(115deg,#4a9cff88,#f05b7088) border-box; }
.store-bottle-step[data-ready="true"] { background: linear-gradient(120deg,#171a2bf5,#24131ef5) padding-box, linear-gradient(115deg,#65caff,#9889ff 48%,#ff688b) border-box; box-shadow: -5px 0 26px #4a9cff32, 5px 0 26px #f05b7032; }
.store-bottle-step[data-ready="true"]::before { content: ''; position: absolute; inset: -1px; border: 1px solid #9597f266; border-radius: inherit; pointer-events: none; animation: store-scan-glow 3.6s ease-in-out infinite; }
.store-bottle-methods { display: grid; grid-template-columns: minmax(0,1fr) 44px 44px; align-items: stretch; gap: 7px; }
.store-bottle-methods > .store-secondary { display: grid; place-items: center; padding: 8px; }
.store-bottle-methods svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.store-step-link:focus-visible { outline: 2px solid #64d2c6; outline-offset: 6px; border-radius: 10px; }
.store-primary:not(:disabled) { transition: box-shadow .2s, border-color .2s; }
.store-primary:not(:disabled):hover, .store-primary:not(:disabled):focus-visible { box-shadow: 0 0 0 2px #64d2c644, 0 0 18px #64d2c62b; }
.store-chip-row > button { touch-action: manipulation; }
.store-entry-methods { display: grid; grid-template-columns: minmax(0,1fr) 48px 48px; gap: 8px; }
.store-primary, .store-secondary { min-height: 44px; padding: 10px 14px; border-radius: 12px; cursor: pointer; font: 600 14px Arial, sans-serif; }
.store-primary { border: 1px solid #18b4ba; background: var(--store-teal); color: #fff; }
.store-secondary { border: 1px solid #8b7153; background: #35261de0; color: #f7eddf; }
.store-primary:disabled, .store-secondary:disabled, .store-pager button:disabled { opacity: .4; cursor: default; }
.store-add-owned { display: flex; align-items: center; gap: 10px; text-align: left; }
.store-add-icon { font-size: 23px; line-height: 1; color: var(--store-gold); }
.store-entry-methods > button { padding: 9px; }
.store-entry-methods svg, .store-input-methods svg, .store-primary svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.store-entry-methods > button:not(.store-add-owned) { display: grid; place-items: center; }
.store-scan, .store-find { display: flex; width: 100%; gap: 10px; align-items: center; justify-content: center; min-height: 48px; border-radius: 28px; }
#scanBottle { position: relative; overflow: hidden; isolation: isolate; min-height: 58px; border: 1px solid transparent; background: linear-gradient(115deg,#24395e,#39305d 55%,#5b2b43) padding-box, linear-gradient(115deg,#71d3ff,#a493ff,#ff789a) border-box; color: #fff7f1; box-shadow: inset 0 1px 0 #ffffff15, 0 5px 18px #0004; }
#scanBottle > * { position: relative; z-index: 1; }
#scanBottle svg { color: #b9e5ff; }
#scanBottle::after { content: ''; position: absolute; inset: 0; transform: translateX(-130%) skewX(-20deg); background: linear-gradient(90deg,transparent,#ffffff18,transparent); pointer-events: none; }
.store-bottle-step[data-ready="true"] #scanBottle::after { animation: store-scan-shine 6s ease-in-out infinite; }
#scanBottle:not(:disabled):hover, #scanBottle:focus-visible { box-shadow: 0 0 0 2px #999dff44, -4px 0 24px #4a9cff40, 4px 0 24px #f05b7040; }
@keyframes store-scan-glow { 0%,100% { opacity: .35; box-shadow: -4px 0 12px #4a9cff18,4px 0 12px #f05b7018; } 50% { opacity: 1; box-shadow: -4px 0 22px #4a9cff38,4px 0 22px #f05b7038; } }
@keyframes store-scan-shine { 0%,65% { transform: translateX(-130%) skewX(-20deg); } 88%,100% { transform: translateX(130%) skewX(-20deg); } }
.store-text { border: 0; background: none; color: #64d2c6; padding: 6px 0; font: 13px Arial, sans-serif; cursor: pointer; }
.store-enter-bottle { display: block; min-height: 40px; margin: 2px auto 0; }
.store-count { padding: 3px 9px; border-radius: 20px; background: #ffffff20; font-size: 12px; }
.store-find { position: fixed; z-index: 8; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(780px,calc(100% - 32px)); min-height: 56px; margin: 0; box-shadow: 0 0 14px #4a9cff44, 0 0 18px #f05b7033, 0 6px 24px #000b; }
.store-can-find .store-entry { padding-bottom: 80px; }
.store-app:has(#resultsLayout:not([hidden])) .store-find { display: none; }
.store-photo-label { text-align: center; }
.store-status { margin: 8px 0 0; font-size: 12px; color: var(--store-muted); }
.store-status:empty { display: none; }
.store-small { margin: 8px 0; color: var(--store-muted); font-size: 12px; line-height: 1.45; }
.store-suggestion-label { display: flex; justify-content: space-between; gap: 8px; margin: 14px 0 8px; color: var(--store-muted); font-size: 11px; }
.store-suggestion-label small { font-size: 10px; }
.store-filled-chips { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.store-chips { margin-top: 10px; }
.store-chips:empty { display: none; }
.store-chip-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 7px; width: 100%; min-width: 0; }
.store-chip-row > button { flex: 0 0 auto; max-width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid #73634c; border-radius: 22px; background: #28231cdf; color: #f6ecdc; font: 12px Arial, sans-serif; cursor: pointer; }
.store-chip-row > .store-chip { border-color: #b7955c; }
.store-choices:not(.store-filled-chips) { display: flex; flex-wrap: wrap; gap: 7px; }
.store-choices:not(.store-filled-chips) > button { min-height: 40px; padding: 8px 12px; border: 1px solid #73634c; border-radius: 22px; background: #28231c; color: #f6ecdc; font: 12px Arial, sans-serif; cursor: pointer; }
.store-chip span { margin-left: 9px; color: var(--store-gold); }
.store-chip-measure { position: absolute; visibility: hidden; pointer-events: none; }
.store-considered .store-chip { border-color: #4ca9a0; }
.store-filters { display: flex; align-items: center; gap: 7px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 20px; }
.store-filters::-webkit-scrollbar, .store-carousel::-webkit-scrollbar { display: none; }
.store-filters button { flex: 0 0 auto; min-height: 36px; padding: 7px 13px; border: 1px solid #686868; border-radius: 22px; background: #262626; color: var(--filter-color,#eee); font: 12px Arial, sans-serif; cursor: pointer; }
.store-filters button[aria-pressed="true"] { color: #111; background: var(--filter-color,#fff); border-color: var(--filter-color,#fff); }
.store-filters [data-direction="tiki"] { --filter-color: #ff5722; }
.store-filters [data-direction="modern"] { --filter-color: #00bcd4; }
.store-filters [data-direction="dive"] { --filter-color: #a1887f; }
.store-filters [data-direction="low abv"] { --filter-color: #8bc34a; }
.store-filters [data-direction="boozy"] { --filter-color: #9575cd; }
.store-filters [data-direction="fruity"] { --filter-color: #ec407a; }
.store-filters [data-direction="sour"] { --filter-color: #ffeb3b; }
.store-filters [data-direction="spicy"] { --filter-color: #ef5350; }
.store-filters [data-direction="riff"] { --filter-color: #ffa726; }
.store-results-layout {
  height: calc(100dvh - 52px - env(safe-area-inset-bottom));
  display: grid; grid-template-rows: auto auto repeat(2,minmax(0,1fr));
  gap: 8px; padding: 8px 0 8px; min-width: 0;
}
.store-results-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 0 16px; }
.store-results-hero h1 { margin: 0 0 4px; font-size: clamp(24px,5.8vw,32px); line-height: 1.1; }
.store-results-totals { flex: 1; min-width: 0; margin: 0; color: #d1bd95; font-size: 11px; line-height: 1.3; }
.store-results-hero .store-text { flex: none; min-height: 32px; font-size: 12px; white-space: nowrap; }
.store-results { min-height: 0; min-width: 0; display: grid; grid-template-rows: 40px minmax(0,1fr); }
.store-result-section-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; }
.store-result-section-head > h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-result-section-head > #readyHeading { white-space: normal; overflow-wrap: anywhere; font-size: clamp(12px, 3.2vw, 16px); }
.store-results:not(.store-results-empty) { grid-template-rows: auto minmax(0,1fr); }
.store-results:not(.store-results-empty) > .store-result-section-head { min-height: 48px; padding-block: 5px; }
.store-one-away .store-result-section-head { flex-wrap: nowrap; }
.store-recommendation { min-width: 0; flex: 1; padding: 7px 12px; line-height: 1.25; }
.store-recommendation > span { display: block; font: 700 clamp(10px,2.8vw,13px)/1.3 Arial,sans-serif; color: #f4f0e9; }
.store-recommendation > strong { display: block; overflow-wrap: anywhere; font: 700 clamp(14px,3.8vw,20px)/1.2 Arial,sans-serif; color: #7cecf1; animation: store-bottle-name-pulse 1.8s ease-in-out infinite; }
.store-next-bottle { flex: none; width: 36px; height: 36px; border: 1px solid #796949; border-radius: 50%; background: #211b15; color: #7cecf1; font-size: 23px; cursor: pointer; }
.store-next-bottle:focus-visible { outline: 2px solid #7cecf1; outline-offset: 3px; }
.store-honey-syrup { display: flex; align-items: center; gap: 5px; color: #e9ddc8; font-size: 12px; }
.store-honey-syrup label { display: flex; align-items: center; gap: 7px; min-height: 34px; cursor: pointer; }
.store-honey-syrup input { accent-color: #7cecf1; }
.store-honey-syrup button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; background: none; color: #7cecf1; font: 700 13px Georgia,serif; cursor: pointer; }
.store-honey-syrup button::before { content: ""; position: absolute; width: 17px; height: 17px; border: 1px solid currentColor; border-radius: 50%; }
@keyframes store-bottle-name-pulse { 50% { color: #fff; text-shadow: 0 0 12px #42c9ed, 0 0 18px #ef4d8090; } }
.store-results h2 { margin: 0; color: #faf3e5; font: 700 clamp(14px,3.8vw,18px)/1.2 Arial, sans-serif; }
.store-pager { display: flex; align-items: center; gap: 5px; color: var(--store-muted); font-size: 11px; }
.store-pager span { min-width: 42px; text-align: center; }
.store-pager button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #2d2921; color: #e0c89f; font-size: 23px; cursor: pointer; }
.store-pager .sr-only { min-width: 0; }
.store-glow { border: 1px solid transparent; border-radius: 24px; background: linear-gradient(#181513,#181513) padding-box, linear-gradient(110deg,#42c9ed,#7994ed 48%,#ef4d80) border-box; box-shadow: -3px 0 12px #42c9ed20,3px 0 12px #ef4d8020; color: #f4f0e9; text-decoration: none; }
.store-glow:focus-visible { outline: 2px solid #66d5dc; outline-offset: 3px; }
.store-nearby { display: flex; align-items: center; gap: 9px; padding: 8px 12px; min-height: 38px; min-width: 0; flex: 1; font-size: 12px; }
.store-nearby > svg { width: 17px; height: 17px; fill: none; stroke: #6bd5db; stroke-width: 1.7; flex: none; }
.store-nearby > span:nth-child(2) { flex: 1; min-width: 0; }
.store-destination-name { display: block; font-size: 12px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.store-destination-disclosure { display: block; margin-top: 2px; font-size: 9px; color: var(--store-muted); }
.store-results > .store-small { margin: 10px 20px; align-self: start; }
.store-carousel {
  display: flex; align-items: stretch; gap: 18px; min-height: 0; min-width: 0;
  padding: 2px 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px; overscroll-behavior-x: contain; scrollbar-width: none;
}
.store-carousel::after { content: ''; flex: 0 0 var(--carousel-tail,20%); }
.store-cocktail-card {
  flex: 0 0 84%; width: 84%; max-width: 340px; height: 100%; min-height: 0;
  min-width: 0; display: grid; grid-template-columns: minmax(72px,30%) minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; overflow: hidden;
  padding: 0; border: 1px solid #3e382c; border-radius: 12px; background: #050505;
  scroll-snap-align: start; transform: none;
}
.store-results-layout[data-ready-empty="true"] { grid-template-rows: auto auto auto minmax(0,1fr); }
.store-results-layout[data-away-empty="true"] { grid-template-rows: auto auto minmax(0,1fr) auto; }
.store-results-layout[data-ready-empty="true"][data-away-empty="true"] { grid-template-rows: auto auto auto auto; align-content: start; }
.store-results-layout[data-ready-empty="true"][data-away-empty="false"] .store-one-away { height: 100%; max-height: 440px; align-self: start; }
.store-results.store-results-empty { grid-template-rows: auto auto; align-content: start; }
.store-results-empty #resultsSummary { margin: 6px 16px 8px; padding: 12px 14px; border: 1px solid #bca07830; border-radius: 12px; background: #241c16b8; color: #d8c8b2; }
.store-card-visual { position: relative; min-height: 0; min-width: 0; padding: 8px 4px; border-right: 1px solid #ffffff0b; }
.store-card-art { display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; background: #050505; cursor: pointer; }
.store-app .recipe-art { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; display: grid; place-items: center; background: #050505; overflow: hidden; }
.store-app .recipe-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; object-position: center; mix-blend-mode: normal; background: transparent; }
.store-art-placeholder { font: 60px Georgia, serif; color: #b49a65; }
.store-card-body { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 12px 10px 8px; gap: 8px; }
.store-card-heading { display: flex; align-items: start; gap: 6px; min-width: 0; }
.store-card-title { flex: 1; min-width: 0; border: 0; background: none; color: #fff7e7; padding: 0; text-align: left; cursor: pointer; }
.store-card-title h3 { margin: 0; font: 700 16px/1.18 Arial, sans-serif; text-transform: uppercase; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.store-favorite { flex: 0 0 36px; width: 36px; height: 36px; border: 0; background: none; color: #ffeb3b; font-size: 27px; line-height: 1; padding: 0; cursor: pointer; }
.store-card-tags { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; }
.store-tag { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--tag-color); background: #101010; color: var(--tag-color); }
.store-tag svg { width: 16px; height: 16px; }
.store-card-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-start; min-width: 0; min-height: 46px; padding: 4px 10px; border-top: 1px solid #ffffff0b; background: #0d0c09; }
.store-card-actions > button { flex: 0 0 auto; max-width: 100%; white-space: normal; line-height: 1.2; }
.store-card-actions > .store-view-recipe { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.store-card-ingredients { display: block; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: auto contain; touch-action: pan-y pinch-zoom; scrollbar-width: thin; }
.store-app .store-card-ingredients h4 { margin: 0 0 5px; color: #f7f0e7; font-size: 14px; }
.store-app .store-card-ingredients li { gap: 6px; margin: 0 0 4px; font-size: 13px; line-height: 1.3; }
.store-card-ingredients .ingredient-text { min-width: 0; font-size: inherit; font-weight: 400; line-height: inherit; overflow-wrap: anywhere; }
.ingredient-indicator svg { display: block; width: 16px; height: 16px; }
.store-ingredient-shopping { flex: 0 0 16px; width: 16px; min-height: 20px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.store-ingredient-shopping:focus-visible { outline: 2px solid #5bcac1; outline-offset: 2px; border-radius: 3px; }
.ingredient-indicator .shopping-check { display: block; width: 16px; height: 16px; color: #8fe2a5; font: 700 16px/16px Arial, sans-serif; text-align: center; }
.ingredient-indicator.shopping-added { color: #8fe2a5; }
.store-card-ingredients .ingredient-text.missing { color: #5bcac1; }
.store-card-ingredients .ingredient-original { font-size: 10px; }
.store-app .store-recipe-state, .store-app .store-card-description { margin: 0; color: #b6aaa0; font-size: 11px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.store-app .store-recipe-state { color: #65d4c8; }
.store-app .store-recipe-state.almost { color: #e2be7d; }
.store-view-recipe, .store-away-action { padding: 4px 10px; min-height: 32px; border: 1px solid #26b6bf; border-radius: 20px; background: none; color: #5ed1d6; font: 600 12px Arial, sans-serif; cursor: pointer; }
.store-app [data-shopping-added="true"] { color: #b7eee0; border-color: #5dab99; background: #24483b55; }
.store-app [data-shopping-added="true"]::before { content: '✓'; margin-right: 5px; }
.store-shopping-added { animation: store-shopping-confirm .43s ease-out; }
.store-cart-added { animation: store-cart-confirm .43s ease-out; }
.store-shopping-flight { position: fixed; z-index: 30; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #b7eee0; color: #193c32; box-shadow: 0 4px 16px #0005; pointer-events: none; }
.store-shopping-flight svg { width: 18px; height: 18px; }
@keyframes store-shopping-confirm { 0% { box-shadow: 0 0 0 0 #8edbc380; } 40% { box-shadow: 0 0 0 5px #8edbc325; } 100% { box-shadow: 0 0 0 9px #8edbc300; } }
@keyframes store-cart-confirm { 0%,100% { transform: scale(1); } 45% { transform: scale(1.16); } }
.store-app .store-away-missing { color: #cabda5; font-size: 12px; line-height: 1.3; margin: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.store-away-missing strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-away-utility { color: #64cfc3; font-size: 10px; }
.store-dialog {
  width: min(620px,calc(100% - 24px)); max-height: calc(100dvh - 24px);
  margin: auto; padding: 20px; border: 1px solid #9f7e58; border-radius: 20px;
  background: #241b14; color: #f4eadc; box-shadow: 0 20px 65px #0008; overflow-y: auto;
}
.store-dialog::backdrop { background: #0009; backdrop-filter: blur(4px); }
#cameraDialog[data-review="true"] #cameraDone { border-color: #6abda8; background: #2d6557; }
#cameraDialog[data-review="true"] .store-chip-pending { border-color: #9d96df; background: #302641; }
.store-dialog .dialog-header { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin: 0 0 10px; }
.store-dialog h2 { margin: 0; font-size: clamp(26px,6vw,36px); line-height: 1.1; }
.store-close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #d9cbb7; font-size: 28px; line-height: 1; cursor: pointer; }
.store-sheet-handle { width: 48px; height: 5px; border-radius: 8px; background: #796451; margin: -6px auto 16px; }
.store-eyebrow { color: #c9ac7f; font-size: 10px; letter-spacing: .14em; margin: 0 0 12px; }
.store-search { width: 100%; min-height: 46px; padding: 12px 14px; border: 1px solid #8b7254; border-radius: 12px; background: #30261d; color: #fff4e5; font: 14px Arial, sans-serif; }
.store-search-field { position: relative; }
.store-search-field > svg { position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; fill: none; stroke: #d9b783; stroke-width: 2; pointer-events: none; }
.store-search-field .store-search { padding-left: 43px; }
.store-search-link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 12px 14px; border: 1px solid #8b7254; border-radius: 12px; background: #30261d; color: #e5d5be; font: 14px Arial, sans-serif; text-align: left; cursor: pointer; }
.store-search-link svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #d9b783; stroke-width: 2; }
.store-enter-bottle { margin-top: 12px; }
.store-input-methods { display: flex; gap: 8px; margin-top: 12px; }
.store-input-methods button { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: center; gap: 8px; padding: 10px 8px; font-size: 12px; }
.store-app button[data-state="listening"] { border-color: #e3aa93; background: #713a30; color: #fff3ea; box-shadow: 0 0 0 3px #e3aa9324; }
.store-app button[data-state="listening"] > svg { animation: store-voice-pulse 1.2s ease-in-out infinite; }
.store-app button[data-state="matching"] { border-color: #78c9be; background: #24443e; color: #d5f5e9; opacity: 1; cursor: wait; }
.store-app button[data-state="matching"] > svg { animation: store-voice-pulse 1.2s ease-in-out infinite; }
#ingredientStatus:empty { display: none; }
#ingredientDialog:has([data-state="listening"]) #ingredientStatus { color: #efbaa6; }
#ingredientDialog:has([data-state="matching"]) #ingredientStatus { color: #9eddd1; }
.store-voice-suggestions { display: grid; gap: 8px; margin: 12px 0; }
.store-voice-suggestion { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #a58a6155; border-radius: 12px; background: #33281e; }
.store-voice-suggestion > span { flex: 1; min-width: 0; color: #f1dfc7; font-size: 13px; }
.store-voice-suggestion > button { flex: none; }
@keyframes store-voice-pulse { 50% { opacity: .45; transform: scale(.9); } }
#ingredientDone { width: 100%; min-height: 48px; margin-top: 12px; }
.store-app:has(#cameraDialog[open]) { overflow: hidden; }
#cameraDialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: auto; background: #16110d; color: #fff; }
#cameraDialog[open] { display: grid; grid-template-rows: minmax(0,1fr) minmax(170px,.5fr); overflow: hidden; }
.store-camera-toolbar { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: max(16px,env(safe-area-inset-right)); z-index: 5; }
.store-camera-toolbar .store-close { position: static; width: 44px; height: 44px; border-radius: 50%; background: #16110dbf; color: #fff6eb; backdrop-filter: blur(12px); }
.store-camera-capture { position: relative; display: grid; grid-template-rows: minmax(0,1fr) auto; min-height: 0; background: #241b14; }
.store-camera-frame { grid-area: 1 / 1; position: relative; min-height: 0; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #241b14; }
.store-camera-viewport { position: relative; width: 100%; height: 100%; overflow: hidden; }
#cameraVideo { display: block; width: 100%; height: 100%; object-fit: cover; }
.store-camera-controls { grid-area: 2 / 1; position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; padding: 16px max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left)); background: #241b14; }
#cameraStatus { width: 100%; margin: 0 0 8px; max-width: 440px; font-size: 13px; line-height: 1.4; color: #dbcdbd; text-align: left; }
#cameraStatus[data-tone="error"] { padding: 12px 14px; border: 1px solid #bd9570; border-radius: 12px; background: #33251fef; font-size: 16px; }
.store-zoom { position: absolute; top: calc(68px + env(safe-area-inset-top)); bottom: 16px; right: max(16px,env(safe-area-inset-right)); height: max-content; max-height: calc(100% - 84px - env(safe-area-inset-top)); margin-block: auto; z-index: 2; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 12px 0; border: 1px solid #ffffff24; border-radius: 28px; background: #16110dbf; backdrop-filter: blur(12px); font-size: 12px; color: #fff6eb; }
.store-zoom input { writing-mode: vertical-lr; direction: rtl; width: 44px; min-height: 44px; height: clamp(80px,18dvh,160px); margin: 0; accent-color: #b5d9cf; cursor: pointer; touch-action: none; }
.store-zoom input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 20px; }
.store-zoom output { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; }
.store-camera-photos { display: flex; align-self: stretch; justify-content: flex-start; gap: 8px; min-height: 56px; margin-bottom: 8px; }
.store-camera-photos:empty { display: none; }
.store-photo-preview { position: relative; width: 56px; height: 56px; border: 1px solid #8a7865; border-radius: 10px; overflow: hidden; background: #110f0c; }
.store-photo-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.store-photo-badge { position: absolute; bottom: 3px; left: 3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #28614f; color: #fff; font: 700 14px Arial, sans-serif; }
.store-photo-preview[data-status="error"] { border-color: #f3be7f; }
.store-photo-preview[data-status="error"] .store-photo-badge { background: #f3be7f; color: #281d13; }
.store-photo-preview[data-status="skipped"] { border-color: #8a7865; opacity: .72; }
.store-remove-photo { position: absolute; top: 0; right: 0; width: 32px; height: 32px; border: 0; border-radius: 0 0 0 12px; background: #0009; color: #fff; font-size: 22px; cursor: pointer; }
.store-retry-photo { position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; border: 0; border-radius: 10px 0 0; background: #21473c; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.store-camera-actions { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 24px; width: 100%; max-width: 440px; }
#uploadPhoto { display: grid; place-items: center; width: 48px; height: 48px; justify-self: center; padding: 0; border: 1px solid #88715b; border-radius: 16px; background: #30261d; color: #eee1d2; cursor: pointer; }
#uploadPhoto svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; }
#shutter { display: grid; place-items: center; width: 84px; height: 84px; justify-self: center; padding: 0; border: 5px solid #241b14; outline: 2px solid #f2e6d5; outline-offset: 2px; border-radius: 50%; background: #f2e6d5; color: #241b14; cursor: pointer; }
#shutter svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#cameraDone { display: flex; align-items: center; justify-content: center; width: 48px; min-width: 0; height: 48px; justify-self: center; padding: 0; border: 1px solid #5d9f8e; border-radius: 16px; background: #254e43; color: #e1f4eb; cursor: pointer; }
.store-photo-preview[data-status="ready"] { border-color: #67d282; box-shadow: 0 0 12px #67d28233; }
.store-camera[data-complete="true"] #cameraDone { opacity: 1; box-shadow: 0 0 0 5px #67d28233, 0 0 22px #67d28244; }
.store-camera[data-complete="true"] .store-progress-fill { stroke: #67d282; }
.store-camera[data-complete="true"] .store-progress-active { stroke: #91e4a4; }
.store-camera[data-complete="true"] #cameraBusyLabel { color: #91e4a4; }
.store-photo-suggestions { display: grid; gap: 8px; padding: 8px; max-height: 160px; overflow-y: auto; background: #141b16; border: 1px solid #69bca4; border-radius: 12px; }
.store-photo-suggestion { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.store-photo-suggestion > span { flex: 1; }
.store-photo-suggestion button { min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid #69bca4; border-radius: 10px; background: #21473c; color: #fff; cursor: pointer; }
.store-done-check { font: 26px Arial,sans-serif; }
#cameraDialog button:disabled { opacity: .4; cursor: default; }
#cameraDialog button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.store-camera-ingredients { min-height: 0; overflow-y: auto; padding: 24px max(24px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); border-top: 1px solid #ffffff1a; background: #241b14; scrollbar-width: thin; }
.store-camera-ingredients .store-chips { margin: 0; gap: 12px; }
.store-camera-ingredients .store-chip { min-height: 44px; }
#cameraConsidered:not(:empty) { margin-top: 16px; }
#cameraOwned:empty + #cameraConsideredLabel + #cameraConsidered { margin-top: 0; }
.store-camera-ingredients .store-search-link { margin-top: 24px; min-height: 48px; }
.store-camera-ingredients .store-small { margin: 8px 0; }
.store-camera-ingredients .store-chip-pending { border-color: #91e4a4; color: #d3f9dc; }
#cameraDialog .store-chip-pending:disabled { opacity: 1; }
.store-chip-flight { position: fixed; z-index: 8; display: grid; place-items: center; border: 1px solid #fff1a0; border-radius: 22px; background: #386342; color: #fff5c1; box-shadow: 0 0 24px #fff1a066; font: 12px Arial, sans-serif; pointer-events: none; }
.store-chip-arriving { animation: store-chip-arrive .65s ease-out both; }
@keyframes store-chip-arrive { from { opacity: 0; transform: translateY(-28px) scale(.75); box-shadow: 0 0 24px #fff1a0; } 65% { opacity: 1; transform: translateY(3px) scale(1.05); box-shadow: 0 0 16px #67d282; } to { opacity: 1; transform: none; box-shadow: none; } }
.store-camera-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.store-camera-busy { grid-area: 1 / 1; position: relative; min-height: 0; z-index: 3; display: grid; justify-items: center; align-content: center; gap: 10px; padding: 8px 20px; background: #241b14dc; backdrop-filter: blur(5px); text-align: center; }
.store-camera-progress { position: relative; width: 104px; height: 104px; filter: drop-shadow(0 0 12px #e7c99b55); }
.store-camera-progress::after { display: none; }
@keyframes store-sparkle { from { opacity: .4; transform: scale(.65) rotate(-15deg); } to { opacity: 1; transform: scale(1.1) rotate(15deg); } }
.store-camera-progress svg { display: block; width: 100%; height: 100%; overflow: visible; }
.store-camera-progress circle:not(.store-progress-icon) { fill: none; stroke-width: 6; }
.store-progress-track { stroke: #ffffff1c; }
.store-progress-fill { stroke: #55c9b3; stroke-dasharray: 263.9; stroke-dashoffset: 263.9; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .35s ease; }
.store-progress-active { stroke: #fff1a0; stroke-linecap: round; stroke-dasharray: 58 206; transform-origin: center; animation: store-progress-spin 1.4s linear infinite; }
.store-progress-icon { fill: none; stroke: #fff3c0; stroke-width: 2; stroke-linejoin: round; }
#cameraBusyLabel { margin: 0; font: 600 22px/1.3 Arial, sans-serif; color: #fff5e8; }
#cameraBusyDetail { margin: 8px 0 0; font: 16px/1.4 Arial, sans-serif; color: #ded2c1; }
#cameraDialog[aria-busy="true"] #cameraZoomTools { visibility: hidden; }
@keyframes store-progress-spin { to { transform: rotate(360deg); } }
.store-recipe-dialog .recipe-art { height: 170px; border-radius: 12px; margin-bottom: 16px; }
.store-recipe-content { display: grid; gap: 18px; }
.store-recipe-content h4 { margin: 0 0 8px; color: #d9b783; font-size: 13px; }
.store-recipe-content ul { margin: 0; padding: 0; list-style: none; }
.store-recipe-content li { display: flex; gap: 9px; align-items: start; margin: 7px 0; font-size: 13px; }
.store-recipe-content li > span:first-child { flex: none; }
.store-recipe-content small { color: #bdb19e; font-size: 11px; }
.ingredient-original { display: block; }
.ingredient-indicator { color: #64c488; }
.ingredient-indicator.missing { color: #5bcac1; }
.ingredient-indicator.riff { color: #dfa363; }
.ingredient-indicator.optional { color: #b7a791; }
.store-recipe-content p { font-size: 13px; margin: 0; }
.store-match-exact { color: #64c488; }
.store-match-riff { color: #dfa363; }
.store-match-missing { color: #5bcac1; }
.store-match-optional { color: #b7a791; }
.store-list-button { width: 100%; margin-top: 0; }
.store-recipe-shopping { display: grid; gap: 8px; margin-top: 18px; }
.store-shopping-list { list-style: none; padding: 0; margin: 18px 0; }
.store-shopping-list li { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #51412f; font-size: 15px; }
.store-shopping-list label { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; }
.store-shopping-list input { width: 20px; height: 20px; flex: none; accent-color: #62d4ce; }
.store-shopping-list .is-purchased label span { color: var(--store-muted); text-decoration: line-through; }
.store-shopping-remove { flex: none; width: 36px; height: 40px; border: 0; background: none; color: #d9cbb7; font-size: 24px; cursor: pointer; }
.store-shopping-add { display: grid; grid-template-columns: minmax(0,1fr) auto 44px 44px; gap: 6px; }
.store-shopping-add input { grid-column: 1 / -1; min-width: 0; }
.store-shopping-add > [type="submit"] { grid-column: 2; }
.store-shopping-method { width: 44px; padding: 9px; display: grid; place-items: center; }
.store-shopping-method svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.store-shopping-method[aria-pressed="true"] { color: #62d4ce; border-color: #62d4ce; }
.store-shopping-share { display: flex; gap: 8px; margin-top: 18px; }
.store-shopping-share button { flex: 1; }
.store-shopping-email { display: flex; gap: 8px; margin-top: 10px; }
.store-shopping-email input { flex: 1; min-width: 0; }
.store-shopping-email button { flex: none; }
#shoppingInputStatus:empty { display: none; }
@media (min-width: 480px) {
  .store-shopping-add input { grid-column: auto; }
  .store-shopping-add > [type="submit"] { grid-column: auto; }
}
.store-shopping-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 12px; }
.store-dialog .store-nearby { flex-direction: row; text-align: left; }
.store-app button:focus-visible, .store-app a:focus-visible, .store-carousel:focus-visible { outline: 2px solid #61dacc; outline-offset: 2px; }
@media (min-width: 650px) and (min-height: 650px) {
  .store-cocktail-card { flex-basis: 45%; width: 45%; }
}
@media (max-height: 650px) {
  .store-results-layout { gap: 5px; padding-top: 6px; }
  .store-results-totals { font-size: 11px; }
  .store-filters button { min-height: 36px; padding: 7px 12px; }
  .store-results { grid-template-rows: 32px minmax(0,1fr); }
  .store-cocktail-card { grid-template-rows: minmax(0,1fr) auto; }
  .store-card-body { padding: 8px 8px 6px; gap: 5px; }
  .store-card-title h3 { font-size: 15px; }
  .store-card-ingredients h4 { display: none; }
  .store-app .store-card-ingredients li { font-size: 11px; line-height: 1.25; margin-bottom: 3px; }
  .store-tag { width: 22px; height: 22px; }
  .store-card-tags { top: 3px; gap: 3px; }
  .store-tag svg { width: 14px; height: 14px; }
  .store-card-actions { min-height: 42px; padding: 3px 8px; }
  .store-favorite { width: 30px; height: 30px; flex-basis: 30px; }
  .store-view-recipe, .store-away-action { min-height: 28px; padding: 3px 9px; font-size: 11px; }
}
@media (max-height: 650px) {
  .store-camera-controls { padding-top: 8px; }
  .store-camera-photos { min-height: 48px; }
  .store-photo-preview { width: 48px; height: 48px; }
  .store-camera-controls { padding-bottom: 16px; }
  #shutter { width: 76px; height: 76px; }
  .store-camera-ingredients { padding-top: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .store-camera-busy { grid-template-columns: 88px minmax(0,1fr); gap: 12px; }
  .store-progress-copy { text-align: left; }
  .store-camera-progress { width: 88px; height: 88px; }
  #cameraBusyDetail { margin-top: 3px; }
}
@media (max-height: 500px) and (min-width: 650px) {
  #cameraDialog[open] { grid-template-columns: minmax(0,1fr) minmax(240px,32%); grid-template-rows: minmax(0,1fr); }
  .store-camera-toolbar { right: calc(32% + 16px); }
  .store-camera-frame { height: 100%; }
  .store-camera-controls { padding: 8px 24px 12px; }
  #shutter { width: 72px; height: 72px; }
  .store-zoom input { height: 80px; }
  .store-camera-busy { padding: 8px; }
  .store-camera-ingredients { border-top: 0; border-left: 1px solid #ffffff1a; padding: 24px 20px; }
  .store-camera-progress { width: 88px; height: 88px; }
}
@media (max-height: 500px) and (min-width: 650px) {
  .store-app .topbar { height: 44px; }
  .store-entry { height: calc(100dvh - 44px); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; }
  .store-hero { grid-column: 1 / -1; padding-top: 8px; padding-bottom: 6px; }
  .store-hero h1 { font-size: 30px; }
  .store-hero h1 br { display: none; }
  .store-bottle-step { min-height: 0; overflow-y: auto; }
  .store-status { grid-column: 1 / -1; }
  .store-results-layout { height: calc(100dvh - 44px - env(safe-area-inset-bottom)); grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto 36px minmax(0,1fr); }
  .store-results-layout[data-ready-empty="true"], .store-results-layout[data-away-empty="true"] { grid-template-columns: minmax(0,1fr); grid-template-rows: auto 36px auto minmax(0,1fr); }
  .store-results-layout[data-away-empty="true"] { grid-template-rows: auto 36px minmax(0,1fr) auto; }
  .store-results-layout[data-ready-empty="true"][data-away-empty="true"] { grid-template-rows: auto 36px auto auto; }
  .store-results-hero, .store-filters { grid-column: 1 / -1; }
  .store-results-hero { gap: 14px; }
  .store-results-hero .store-text { margin-left: auto; }
  .store-cocktail-card { flex-basis: 88%; width: 88%; }
  .store-results h2 { font-size: 16px; }
  .store-result-section-head { padding: 0 14px; }
  .store-carousel { padding-inline: 14px; scroll-padding-inline: 14px; }
  .store-dialog { max-height: calc(100dvh - 16px); padding: 16px; }
}
@media (max-width: 360px) {
  .store-results:not(.store-results-empty) { grid-template-rows: 52px minmax(0,1fr); }
  .store-one-away { grid-template-rows: 52px minmax(0,1fr); }
  .store-one-away .store-result-section-head { flex-wrap: wrap; justify-content: flex-start; align-content: center; column-gap: 8px; row-gap: 2px; }
  .store-one-away .store-result-section-head > h2 { flex: 0 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .store-recommendation > strong { animation: none; }
  .store-owned-step, .store-bottle-step, .store-primary { transition: none; }
  .store-cocktail-card, .store-progress-fill { transition: none; }
  .store-progress-active, .store-camera-progress::after, .store-chip-arriving { animation: none; }
  .store-bottle-step[data-ready="true"]::before, .store-bottle-step[data-ready="true"] #scanBottle::after { animation: none; }
  .store-shopping-added, .store-cart-added { animation: none; }
  .store-app button[data-state] > svg { animation: none; }
}

/* One decision at a time: introduction, home ingredients, then bottle photos. */
.store-entry { gap: 12px; background: #15110e; }
.store-intro { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(100px,1fr) auto; margin: 0 -20px; }
.store-intro-art { background: linear-gradient(0deg,#15110e,transparent 35%), url("../web/assets/background.webp") center 75% / cover; }
.store-intro-copy { width: 100%; max-width: 520px; margin: auto; padding: 8px 28px 20px; }
.store-intro h1 { margin: 0; color: #fff7eb; font: 700 clamp(36px,9vw,48px)/1.06 Georgia,serif; letter-spacing: -.035em; }
.store-intro-copy > p:not(.store-intro-path) { max-width: 390px; margin: 18px 0 24px; color: #d6cabc; font-size: 16px; line-height: 1.55; }
#welcomeStart, #goToBottles { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; padding: 14px 20px; border-radius: 28px; background: #087d82; border-color: #48b7b4; }
#welcomeStart > span, #goToBottles > span { font-size: 22px; line-height: 1; }
.store-intro-path { display: flex; justify-content: space-between; gap: 7px; margin: 18px 0 0; color: #b6a28b; font-size: 11px; line-height: 1.5; }
.store-intro-path > span { color: #8a745d; }
.store-entry-progress { flex: none; display: flex; gap: 20px; align-items: center; padding: 18px 0 0; margin: 0; list-style: none; }
.store-entry-progress li { display: flex; align-items: center; gap: 8px; color: #a99d8f; font-size: 12px; }
.store-entry-progress li + li::before { content: ''; width: 26px; height: 1px; margin-right: 12px; background: #615240; }
.store-entry-progress [aria-current="step"] { color: #f5ebdc; }
.store-entry-progress [aria-current="step"] .store-step-number { color: #f8e1b5; border-color: #d3ae7d; background: #473526; }
.store-entry-progress [data-complete="true"] .store-step-number { color: #a4e1cf; border-color: #67aa95; background: #233f35; }
.store-entry .store-hero { margin: 0; padding: 8px 0 2px; background: none; }
.store-entry .store-hero h1 { font-size: clamp(28px,7.5vw,36px); line-height: 1.12; }
.store-entry .store-lede { margin-top: 8px; font-size: 14px; }
.store-owned-step { border-color: #80623e55; background: #201912; }
.store-owned-step .store-entry-methods { position: sticky; top: 0; z-index: 1; padding-bottom: 6px; background: #201912; }
.store-owned-step[data-guided="true"], .store-bottle-step[data-guided="true"], .store-bottle-step[data-ready="true"] { box-shadow: none; }
.store-owned-actions { flex: none; display: grid; gap: 8px; padding-bottom: 2px; }
.store-home-progress { min-height: 18px; margin: 0; color: #a4e1cf; font-size: 12px; }
#skipIngredients { justify-self: center; min-height: 40px; color: #cdbba3; padding: 8px 20px; }
.store-entry .store-bottle-step { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 14px; overflow-y: auto; border: 1px solid #80623e55; background: #201912; box-shadow: none; }
.store-bottle-step[data-ready="true"]::before { display: none; }
.store-bottle-step[data-ready="true"] #scanBottle::after { animation: none; }
.store-home-summary { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid #80623e55; background: none; color: #a4e1cf; font: 12px Arial,sans-serif; text-align: left; cursor: pointer; }
.store-home-summary > span:last-child { color: #e3cba7; }
.store-bottle-art { flex: 1; min-height: 80px; border-radius: 10px; background: linear-gradient(0deg,#201912,transparent 22%), url("assets/bottle-camera.webp") center / cover; }
.store-bottle-methods { flex: none; }
.store-entry .store-considered { flex: none; margin-top: 0; }
.store-entry :is(.store-status,#retry) { flex: none; }
.store-app :is(#welcomeHeading,#entryHeading):focus { outline: none; }
.store-entry button:focus-visible { outline: 2px solid #a4e1cf; outline-offset: 3px; }
.store-entry-progress, .store-hero, .store-owned-step, .store-bottle-step { animation: store-entry-arrive .22s ease-out; }
@keyframes store-entry-arrive { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-height: 650px) {
  .store-intro-copy { padding: 4px 24px 10px; }
  .store-intro h1 { font-size: 36px; }
  .store-intro-copy > p:not(.store-intro-path) { margin: 12px 0 18px; font-size: 14px; }
  .store-intro-path { margin-top: 12px; font-size: 10px; }
  .store-entry-progress { padding-top: 12px; }
}
@media (max-height: 500px) and (min-width: 650px) {
  .store-entry { display: flex; gap: 8px; }
  .store-intro { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
  .store-intro-art { background-image: linear-gradient(90deg,transparent,#15110e), url("../web/assets/background.webp"); }
  .store-intro-copy { padding: 12px 24px 12px 8px; }
  .store-intro h1 { font-size: 32px; }
  .store-entry-progress { padding-top: 8px; }
  .store-entry .store-hero { padding-top: 0; }
  .store-entry .store-hero h1 { font-size: 28px; }
  .store-entry .store-lede { margin-top: 4px; font-size: 12px; }
  .store-owned-step { padding-block: 12px; }
  .store-owned-actions { grid-template-columns: 1fr 1fr; align-items: center; gap: 6px 20px; }
  #skipIngredients { grid-column: 1; grid-row: 1; justify-self: start; }
  #goToBottles { grid-column: 2; grid-row: 1; min-height: 48px; }
  .store-home-progress { grid-column: 1; grid-row: 1; }
  .store-entry .store-bottle-step { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0,1fr); align-items: center; gap: 8px 16px; }
  .store-home-summary { grid-column: 2; grid-row: 1; }
  .store-bottle-art { grid-column: 1; grid-row: 1 / 3; min-height: 0; height: 100%; }
  .store-bottle-methods { grid-column: 2; grid-row: 2; }
  .store-entry .store-considered { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .store-entry-progress, .store-hero, .store-owned-step, .store-bottle-step { animation: none; }
}