/* Full inventory uses the existing dark ground, two faces and hairline rhythm. */
.store-switch { display: flex; justify-content:center; gap: 0; padding: 0 max(16px,var(--safe-right)) 3px max(16px,var(--safe-left)); }
.store-switch button { min-height: 44px; padding: 4px 10px; color: var(--tr-dim); font: 500 15px var(--tr-sans); background: none; border: 0; border-bottom: 1px solid var(--tr-hair); cursor: pointer; }
#app .app-meta[hidden] { display:none; }
.store-switch button[aria-current="page"] { color: var(--tr-bone); border-bottom-color: var(--tr-hair-gold); }
.store-switch button:focus-visible { outline: 2px solid var(--tr-bone); outline-offset: -2px; }
/* 2026-10-03, Devin: on the phone the two tabs stay tucked away and come down only while
   the search field has focus (or a keyboard reaches the tabs); the seal and the scanner never open them, or the row would move under the finger, so the list gets the screen.
   The store PC room keeps them. --tr-switch-h is the tabs' height for the sticky offsets. */
#app { --tr-switch-h: 47px; }
@media not all and (min-width:900px) and (pointer:fine) {
  #app { --tr-switch-h: 0px; }
  #app:has(#search-input:focus, .store-switch :focus) { --tr-switch-h: 47px; }
  .store-switch { box-sizing:border-box; max-height:var(--tr-switch-h); padding-bottom:0; overflow:hidden; opacity:0; transition:max-height var(--tr-quick) var(--tr-ease), opacity var(--tr-quick) var(--tr-ease); }
  #app:has(#search-input:focus, .store-switch :focus) .store-switch { opacity:1; padding-bottom:3px; }
}
@media (prefers-reduced-motion:reduce) { .store-switch { transition:none; } }
@media (max-width:899px) {
  .app-header .search-row { display:grid;grid-template-columns:32px minmax(0,1fr) 44px;column-gap:10px;row-gap:4px; }
  .app-header .logo-mark { grid-area:1 / 1; }
  .app-header .search-shell { grid-area:1 / 2; }
  #app[data-mode="store"] .app-header .search-shell { grid-column:2 / 4; }
  .app-header .app-meta { grid-area:2 / 2 / 3 / 4;text-align:left;min-height:18px;white-space:nowrap; }
  .app-header .app-meta strong { display:inline; }
  .app-header .header-actions { grid-area:1 / 3; }
}
.search-wrap #search-input { box-sizing:border-box; width:100%; }
.search-shell .barcode-scan { position:relative; z-index:1; }
.app-header .barcode-panel { padding:8px 0 3px; animation:store-camera-in var(--tr-quick) var(--tr-ease); }
.app-header .barcode-panel video { max-height:145px; }
.app-header .barcode-panel p { margin:6px 0; }
@keyframes store-camera-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
#app[data-mode="bar"] .rack-header { top:calc(var(--safe-top) + var(--tr-header-h) + var(--tr-switch-h)); }
.store-main { min-width: 0; }
.store-list { padding: 0 max(16px,var(--safe-right)) calc(var(--safe-bottom) + 36px) max(16px,var(--safe-left)); }
.store-row { display:flex; align-items:center; gap:14px; width:100%; min-height:126px; padding:10px 0; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--tr-hair); color:var(--tr-bone); cursor:pointer; }
.store-row:active { background:var(--tr-hair); }
.store-row:focus-visible,.store-row.is-kbd-active { outline:2px solid var(--tr-bone); outline-offset:-2px; }
/* 40% bigger and zoomed past the render's empty margin (Devin's picks, 2026-10-11; was 76 x 106). */
.store-thumb { position:relative; flex:0 0 106px; height:148px; display:grid; place-items:center; text-align:center; overflow:hidden; -webkit-mask-image:radial-gradient(ellipse 60% 72% at 50% 50%,var(--tr-bone) 58%,transparent 100%); mask-image:radial-gradient(ellipse 60% 72% at 50% 50%,var(--tr-bone) 58%,transparent 100%); }
.store-thumb:before { content:"";position:absolute;inset:30% 0 5%;background:radial-gradient(ellipse at 50% 80%,var(--tr-bone-08),transparent 72%);pointer-events:none; }
.store-thumb img { position:relative; width:100%; height:100%; object-fit:contain; transform:scale(1.22); }
.store-photo-wait { position:relative; max-width:68px; color:var(--tr-dim); font:400 12px/1.25 var(--tr-sans); }
.store-row-body { flex:1; min-width:0; }
.store-row-body strong { display:block; font:500 19px/1.3 var(--tr-sans); overflow-wrap:anywhere; }
.store-row-body small { display:block; margin-top:4px; color:var(--tr-dim); font:400 15px/1.35 var(--tr-sans); overflow-wrap:anywhere; }
.store-row-body em { display:block; margin-top:5px; color:var(--tr-bone); font:500 15px/1.3 var(--tr-sans); }
.store-message,.store-empty { padding:24px 16px; color:var(--tr-dim); text-align:center; font:400 15px/1.5 var(--tr-sans); }
.store-message button,.store-more { min-height:44px; padding:8px 16px; border:1px solid var(--tr-hair); background:transparent; color:var(--tr-bone); font:500 14px var(--tr-sans); cursor:pointer; }
.store-more { display:block; margin:25px auto; }
.store-detail { position:fixed;inset:0;z-index:30;overflow-y:auto;overscroll-behavior-y:contain;background:var(--tr-bg);animation:store-in var(--tr-quick) var(--tr-ease); }
.store-main:has(.store-detail) .store-list { display:none; }
/* The bottle page on the phone (2026-10-05, Devin: "no sidebar that scrolls"): iOS draws its
   scroll bar on an overflow container unless the container hides it, as the Tasting bar's page
   does (detail.css). The page scrolls up and down only; the back flick moves it sideways
   (gesture/back-swipe.js) with a hairline on its leading edge, and Full inventory beneath it
   comes up where it was left (store-view.js peekBelow). The store PC keeps its thin bar below. */
.store-detail { scrollbar-width:none;touch-action:pan-y; }
.store-detail::-webkit-scrollbar { display:none;width:0;height:0; }
.store-detail.is-exiting-gesture { will-change:transform;box-shadow:-1px 0 0 var(--tr-hair); }
/* A Full inventory screen backs out the same way (2026-10-12, store-view wireScreenFlick): it
   slides over the screen it came from, which waits beneath as it was left. */
.store-main.is-exiting-gesture { position:relative;z-index:1;will-change:transform;box-shadow:-1px 0 0 var(--tr-hair); }
.store-beneath { position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--tr-bg); }
/* The kept screen lost #main with its id: it takes #main's own column (base.css). */
.store-beneath > .store-main { position:absolute;left:0;right:0;display:flex;flex-direction:column; }
.store-main.store-peek:has(.store-detail) .store-list { display:block; }
@keyframes store-in { from { opacity:.65; transform:translateY(6px); } to { opacity:1; transform:none; } }
.store-detail-chrome { position:sticky;top:0;z-index:19;height:calc(var(--safe-top) + 56px);margin-bottom:calc(-1 * (var(--safe-top) + 56px));background:var(--tr-bg);border-bottom:1px solid var(--tr-hair);pointer-events:none; }
.store-detail .detail-back,.store-detail .detail-edit { position:fixed; }
/* Phone landscape, as the Tasting bar's page (detail.css): the band backs the
   scrolling text column only, never the bottle render beside it. */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  .store-detail-chrome { margin-left:calc(68px + (100% - 80px) * 0.38); }
}
.store-detail .page-hero .hero-image .store-photo-wait { max-width:160px;font-size:14px;text-align:center; }
.store-detail .page-head .store-message { padding:0 0 16px;text-align:left; }
.store-detail .store-sample-status { margin:8px 0 0;color:var(--tr-bone);font:500 15px/1.45 var(--tr-sans); }
.store-edit { position:fixed;inset:0;z-index:40;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;background:var(--tr-bg);padding:0 max(18px,var(--safe-right)) calc(var(--safe-bottom) + 48px) max(18px,var(--safe-left)); }
.store-edit .edit-header { position:sticky;top:0;z-index:1;background:var(--tr-bg);padding-left:0;padding-right:0; }
/* .store-edit already holds the 18px (safe-area) gutter; the shared header and form must not add a second one. */
.store-edit .edit-form { padding-left:0;padding-right:0; }
.store-edit-form,.store-sample-edit { max-width:640px;margin:0 auto; }
.store-edit .edit-field { display:block; }
.store-edit .edit-field input,.store-edit .edit-field textarea,.store-edit .edit-field select { display:block;box-sizing:border-box;width:100%;min-height:44px; }
/* Plain fields (and Rack and Section, outside the form) take the edit form's own look. */
.store-edit .edit-field input:not([type]),.store-edit .edit-field select { background-color:transparent;color:var(--fg);border:1px solid var(--tr-bone-25);border-radius:0;padding:12px;font-size:16px;font-family:inherit; }
.store-edit .edit-field input:not([type]) { -webkit-appearance:none;appearance:none; }
/* Every picker here (Product category in the form, Section and Rack in the bar card) wears the
   edit form's one drawn chevron; the 12px padding above would otherwise run text under it. */
.store-edit .edit-field select { -webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5l4.5 4.5L11.5 5' fill='none' stroke='%23f2ede4' stroke-opacity='.55' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px 14px;padding-right:36px;cursor:pointer; }
/* Edit Sample's Remove from bar and Back on the bar sit in a .store-sample-actions row too
   (2026-10-05), so both editors draw their bar buttons from this one rule. */
.store-save,.store-sample-edit button,.store-sample-actions button { min-height:44px; margin:12px 0; padding:9px 17px; background:transparent;border:1px solid var(--tr-bone);color:var(--tr-bone);font:500 14px var(--tr-sans);cursor:pointer; }
/* The Tasting bar card leads the editor (2026-10-03): where the bottle stands, then its
   two actions side by side; a hairline closes it off from the bottle's facts. */
.store-sample-edit { margin-bottom:28px;padding:18px 0 14px;border-bottom:1px solid var(--tr-hair); }
.store-sample-edit .store-sample-state { margin:0 0 4px;color:var(--tr-bone);font:400 22px/1.25 var(--tr-serif); }
.store-sample-rack { color:var(--tr-dim);font:400 17px var(--tr-sans);white-space:nowrap; }
.store-sample-actions { display:flex;flex-wrap:wrap;gap:0 12px; }
.store-sample-edit .store-remove { border-color:var(--tr-bad-hair);color:var(--tr-bad-text); }
.store-sample-edit button.is-confirming { border-color:var(--tr-bad);color:var(--tr-bad-text); }
.store-sample-edit p,.store-edit-status { color:var(--tr-dim);font:400 14px/1.5 var(--tr-sans); }
/* The photo that comes with an add (2026-10-03): Take photo is one of the card's own
   buttons, left aligned; Retry and New source photo stay plain words. */
.store-sample-photo { margin:4px 0 0; }
.store-sample-photo :is(.store-sample-photo-line,.store-sample-sealed) { margin:8px 0 0; }
.store-sample-edit .photo-upload { align-items:flex-start;margin:0; }
.store-sample-edit .photo-upload-btn { width:auto; }
.store-sample-edit .photo-upload-status { padding:0;text-align:left;font:400 14px/1.5 var(--tr-sans); }
.store-sample-edit .photo-upload-preview { align-items:flex-start; }
.store-sample-edit .photo-upload-link { min-height:var(--tr-tap);margin:0;padding:6px 0;border:0;color:var(--tr-dim);font:500 14px var(--tr-sans); }
/* Send to Studio queue (Devin's pick A, 2026-10-15): the card's quiet second action, words only,
   as drawn beside Add to tasting bar; dim while it waits for a new photo or an answer. On a bar
   bottle it shares a row with the photo it sends. */
.store-sample-edit .store-studio-send { padding:9px 0;border:0;color:var(--tr-bone); }
.store-sample-edit .store-studio-send:disabled { color:var(--tr-dim);cursor:default; }
.store-sample-edit .store-studio-row { align-items:center;gap:0 24px; }
.store-sample-edit .store-studio-row .store-studio-send { margin:0; }
.store-sample-edit :is(.store-sample-photo-line,.store-studio-line):empty { display:none; }
@media (min-width:900px) and (pointer:fine) {
  #app[data-mode="store"] .store-main:has(.store-detail) .store-list { display:block; }
  #app[data-mode="store"] .store-detail { inset:0 0 0 var(--tr-rail);z-index:5;border-left:1px solid var(--tr-hair);scrollbar-width:thin;scrollbar-color:var(--tr-bone-25) transparent; }
  #app[data-mode="store"] .store-detail::-webkit-scrollbar { display:block;width:6px;height:6px; }
  #app[data-mode="store"] .store-detail::-webkit-scrollbar-track { background:transparent; }
  #app[data-mode="store"] .store-detail::-webkit-scrollbar-thumb { background:var(--tr-bone-20); }
  #app[data-mode="store"] .store-detail-chrome { margin-left:38%; }
  #app[data-mode="store"] .store-detail .page { display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);column-gap:40px;max-width:1180px;margin:0 auto;padding:76px 40px 70px; }
  #app[data-mode="store"] .store-detail .page-first { display:contents; }
  #app[data-mode="store"] .store-detail .page-hero { grid-column:1;grid-row:1 / span 6;position:sticky;top:76px;height:min(74vh,680px);min-height:0;margin:0; }
  #app[data-mode="store"] .store-detail .page-head,#app[data-mode="store"] .store-detail .page-notes,#app[data-mode="store"] .store-detail .page-story,#app[data-mode="store"] .store-detail .page-tags,#app[data-mode="store"] .store-detail .page-specs,#app[data-mode="store"] .store-detail .page > :is(.taste-profile,[data-sweetness-mount]) { grid-column:2; }
  #app[data-mode="store"] .store-detail .detail-back { position:sticky;left:auto;display:flex;margin:0 0 -44px calc(38% + var(--safe-left) + 2px); }
  #app[data-mode="store"][data-view="detail"] .store-row[aria-current="true"] { background:var(--tr-hair); }
  /* The bar's rail scrolls on its own here, so its rack line sticks at the top (desktop.css). */
  #app[data-mode="bar"] .rack-header { top:-1px; }
  /* Type grows on the PC, never shrinks: the same step as the Tasting bar's rows and page (desktop.css). */
  #app[data-mode="store"] .store-row-body strong { font-size:20px; }
  #app[data-mode="store"] .store-row-body :is(small,em) { font-size:16px; }
  #app[data-mode="store"] .store-detail .page-title { font-size:34px; }
  #app[data-mode="store"] .store-detail :is(.page-meta,.page-spec dt,.page-spec dd) { font-size:16px; }
  #app[data-mode="store"] .store-detail .page-facts { font-size:24px; }
  #app[data-mode="store"] .store-detail :is(.page-facts .stock-word,.page-lead) { font-size:18px; }
  #app[data-mode="store"] .store-detail .page-notes { font-size:20px; }
  #app[data-mode="store"] .store-detail :is(.page-h,.page-notes-label,.page-funfact-label) { font-size:22px; }
  #app[data-mode="store"] .store-detail :is(.page-prose,.page-funfact) { font-size:17px; }
  #app[data-mode="store"] .store-detail .page-tags { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) { .store-detail,.app-header .barcode-panel { animation:none; } }

/* Full inventory browse: one grammar on every screen. A back row that names
   where it goes, the place title, removable choices, stable tabs, counted
   choices, then the bottles. Hairlines only; gold marks what is chosen. */
.store-up { display:flex;align-items:center;gap:6px;min-height:44px;margin:4px 0 0;padding:6px 0;background:none;border:0;color:var(--tr-dim);font:400 15px/1.3 var(--tr-sans);text-align:left;cursor:pointer;max-width:100%;overflow-wrap:anywhere; }
.store-up span { font-size:20px;line-height:1; }
.store-title { margin:2px 0 12px;font:400 31px/1.15 var(--tr-serif);overflow-wrap:anywhere; }
.store-title-search { font-size:27px; }
.store-note { margin:-4px 0 12px;color:var(--tr-dim);font:400 14px/1.45 var(--tr-sans); }
.store-departments { display:block;margin-top:6px; }
.store-department { display:flex;align-items:baseline;justify-content:space-between;gap:16px;width:100%;min-height:64px;padding:16px 0 14px;background:none;border:0;border-bottom:1px solid var(--tr-hair);color:var(--tr-bone);text-align:left;cursor:pointer; }
.store-department-name { font:400 27px/1.2 var(--tr-serif); }
.store-department-n { color:var(--tr-dim);font:400 15px var(--tr-sans);font-variant-numeric:tabular-nums; }
.store-department-all .store-department-name { font:500 17px/1.3 var(--tr-sans); }
.store-scope { display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin:0 0 4px; }
.store-token { display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 0 6px;background:none;border:0;border-bottom:1px solid var(--tr-bone-25);color:var(--tr-bone);font:500 16px/1.25 var(--tr-sans);text-align:left;cursor:pointer;max-width:100%;overflow-wrap:anywhere; }
.store-token span { color:var(--tr-dim);font-size:19px;line-height:1; }
.store-text-action { min-width:44px;min-height:44px;padding:10px 0;background:none;border:0;color:var(--tr-dim);font:500 15px/1.35 var(--tr-sans);text-align:left;cursor:pointer; }
.store-tabs { display:flex;gap:0 20px;margin-top:4px;border-bottom:1px solid var(--tr-hair); }
.store-tab { min-width:44px;min-height:46px;margin-bottom:-1px;padding:12px 0 10px;background:none;border:0;border-bottom:1px solid transparent;color:var(--tr-dim);font:500 16px/1.25 var(--tr-sans);cursor:pointer; }
.store-tab[aria-current="true"] { color:var(--tr-bone);border-bottom-color:var(--tr-hair-gold); }
/* Wine: Types and Regions, two words under the title (Devin, 2026-10-12): the open one carries the tab's gold hairline. */
.store-wine-switch { display:flex;gap:24px;margin:-6px 0 10px; }
.store-switch-word { min-width:44px;min-height:44px;padding:10px 0 8px;background:none;border:0;border-bottom:1px solid transparent;color:var(--tr-dim);font:500 16px/1.25 var(--tr-sans);cursor:pointer; }
.store-switch-word[aria-current="true"] { color:var(--tr-bone);border-bottom-color:var(--tr-hair-gold); }
/* Organic, natural, vegan ... above every wine list (2026-10-12): the switch's words, wrapping on the phone. */
.store-claim-words { display:flex;flex-wrap:wrap;gap:0 12px;margin:-4px 0 6px; }
.store-choice-panel { padding:2px 0 8px; }
.store-choice-note { margin:0;padding:14px 0;color:var(--tr-dim);font:400 15px/1.45 var(--tr-sans); }
.store-choices { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px; }
.store-choices-apart { margin-top:10px; }
.store-choice,.store-chooser-row { display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:50px;padding:10px 0;background:none;border:0;border-bottom:1px solid var(--tr-hair);color:var(--tr-bone);font:400 17px/1.3 var(--tr-sans);text-align:left;cursor:pointer; }
.store-choice-label { min-width:0;overflow-wrap:break-word; }
.store-choice-label small { display:block;margin-top:2px;color:var(--tr-dim);font:400 13px/1.35 var(--tr-sans); }
.store-choice-n { flex-shrink:0;color:var(--tr-dim);font:400 14px var(--tr-sans);font-variant-numeric:tabular-nums; }
.store-choice[aria-pressed="true"],.store-chooser-row[aria-pressed="true"] { border-bottom-color:var(--tr-hair-gold);font-weight:600; }
.store-choice[aria-pressed="true"] .store-choice-n,.store-chooser-row[aria-pressed="true"] .store-choice-n { color:var(--tr-bone); }
.store-all-choices { display:block;margin-top:2px;color:var(--tr-bone); }
/* A department or a choice answers a press as a Tasting bar row does (V1, 2026-10-05): the
   hairline ground at once, fading back on release over --tr-quick (120 ms with reduced
   motion). The ground reaches past the words: a department's and a chooser row's to the
   screen's gutter, a choice's to the middle of the column gap. It is painted by a layer
   under the words, never a shadow (design law: no shadows on rows). */
.store-department,.store-chooser-row,.store-choice { position:relative;isolation:isolate; }
.store-department::before,.store-chooser-row::before,.store-choice::before { content:"";position:absolute;inset:0 -16px;z-index:-1;background:var(--tr-hair);opacity:0;transition:opacity var(--tr-quick) var(--tr-ease);pointer-events:none; }
.store-choice::before { inset:0 -10px; }
.store-department:active::before,.store-chooser-row:active::before,.store-choice:active::before { opacity:1;transition:none; }
/* A hairline under the field, not a box (2026-10-11; Devin called a boxed search "AI generated" on 2026-10-03). */
.store-facet-search { display:block;box-sizing:border-box;width:100%;min-height:48px;margin:0 0 8px;padding:10px 0;border:0;border-bottom:1px solid var(--tr-bone-25);border-radius:0;background:none;color:var(--tr-bone);font:400 17px/1.4 var(--tr-sans); }
.store-facet-search::placeholder { color:var(--tr-dim);opacity:1; }
.store-facet-search:focus { outline:none;border-color:var(--tr-bone-40); }
.store-title:focus { outline:none; }
.store-chooser { padding-bottom:8px; }
.store-chooser-row { min-height:54px; }
.store-suggestions { margin:0 0 6px;border-top:1px solid var(--tr-hair); }
.store-suggestion { display:block;width:100%;min-height:58px;padding:11px 0 10px;background:none;border:0;border-bottom:1px solid var(--tr-hair);color:var(--tr-bone);text-align:left;cursor:pointer; }
.store-suggestion span { display:block;font:400 21px/1.25 var(--tr-serif);overflow-wrap:anywhere; }
.store-suggestion small { display:block;margin-top:3px;color:var(--tr-dim);font:400 14px/1.35 var(--tr-sans); }
.store-suggestion.is-kbd-active { outline:2px solid var(--tr-bone);outline-offset:-2px; }
.store-results-head { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;margin-top:10px;border-bottom:1px solid var(--tr-hair); }
.store-total { margin:0;font:500 17px/1.3 var(--tr-sans);font-variant-numeric:tabular-nums; }
/* In stock lives in the drop-down beside the two tabs (Devin's pick, 2026-10-11): the tabs
   at the left, In stock at the right end of the same hairline, Full inventory only. The tabs sit at the left on both tabs, so nothing shifts when you switch. */
.store-top-row { display:flex;align-items:center;gap:12px; }
.store-switch { justify-content:flex-start; }
.store-switch:before { content:"";order:2;flex:1;border-bottom:1px solid var(--tr-hair); }
.store-switch [data-store-stock-head] { order:3;gap:8px;padding:4px 0 4px 10px;font-size:14px; }
#app[data-mode="bar"] .store-switch [data-store-stock-head] { display:none; }
/* On the phone an open bottle covers the list, so its In stock switch steps aside (2026-10-11). */
@media not all and (min-width:900px) and (pointer:fine) { #app:has(.store-detail) .store-switch [data-store-stock-head] { display:none; } }
.store-stock { display:inline-flex;align-items:center;gap:10px;flex-shrink:0;min-height:44px;padding:8px 0;background:none;border:0;color:var(--tr-dim);font:500 15px/1.3 var(--tr-sans);cursor:pointer; }
.store-stock-mark { position:relative;width:16px;height:16px;border:1px solid var(--tr-dim); }
.store-stock[aria-checked="true"] { color:var(--tr-bone); }
.store-stock[aria-checked="true"] .store-stock-mark { border-color:var(--tr-bone); }
.store-stock[aria-checked="true"] .store-stock-mark:after { content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid var(--tr-bone);border-width:0 1.5px 1.5px 0;transform:rotate(45deg); }
.store-row-price { color:var(--tr-bone); }
.store-results { scroll-margin-top:calc(var(--safe-top) + var(--tr-header-h) + var(--tr-switch-h) + 1px); }
.store-results[aria-busy="true"] :is(.store-row,.store-pagination,.store-total),.store-navigation[aria-busy="true"] .store-choices { opacity:.5;transition:opacity var(--tr-quick) var(--tr-ease); }
.store-empty .store-more { margin:14px auto 0; }
.store-pagination { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px; }
.store-pagination .store-more { margin:20px 0;font-size:16px; }
.store-pagination .store-more[data-store-more] { justify-self:end; }
.store-pagination > :first-child { justify-self:start; }
.store-range { color:var(--tr-dim);font:400 14px var(--tr-sans);font-variant-numeric:tabular-nums;text-align:center; }
@media (max-width:339px) {
  .store-choices { grid-template-columns:minmax(0,1fr); }
  .store-tabs { column-gap:20px; }
  .store-title { font-size:28px; }
}
@media (hover:hover) {
  .store-main :is(.store-choice,.store-chooser-row,.store-suggestion,.store-department,.store-tab,.store-switch-word,.store-up,.store-text-action,.store-token):hover { color:var(--tr-bone); }
}
.store-opening { position:fixed;inset:0;z-index:30;display:grid;place-content:center;background:var(--tr-bg);color:var(--tr-dim);font:400 16px/1.5 var(--tr-sans); }
.store-opening p { max-width:32ch;margin:0;padding:24px;text-align:center; }
.store-opening .store-more { justify-self:center; }
.store-more[hidden] { display:none; }
.store-main :is(.store-row,.store-more,.store-save,.store-sample-edit button):focus-visible { outline:2px solid var(--tr-bone);outline-offset:2px; }
.store-main :is(.store-detail,.store-edit,.store-opening,.store-navigation,.store-results):focus { outline:none; }
.store-edit [disabled] { cursor:default;opacity:0.6; }
.store-main :is(.store-choice,.store-chooser-row,.store-suggestion,.store-department,.store-tab,.store-switch-word,.store-token,.store-up,.store-text-action,.store-stock,.store-facet-search):focus-visible { outline:2px solid var(--tr-bone);outline-offset:2px; }
@media (min-width:900px) and (pointer:fine) { .store-opening { left:var(--tr-rail); } }

.app-header .app-meta { display:none; }
/* 2026-10-03, Devin picked C over the outlined box ("looks odd, AI generated"): on the
   phone the seal sits inside one rounded capsule with the field and the scanner. A 24px
   radius keeps a pill at one line and soft corners when chips wrap it taller. Last in the file so it follows the grid rules above. The seal
   stays the settings button; its 32px disc sits 8px in, centred on the 48px field. */
@media not all and (min-width:900px) and (pointer:fine) {
  .app-header .search-row { position:relative; }
  .app-header .logo-mark { position:absolute; left:9px; top:8px; z-index:2; }
  #app .app-header .search-shell { grid-column:1 / 3; padding-left:48px; border-radius:24px; background:var(--tr-bg-2); border-color:var(--tr-bone-16); }
  #app[data-mode="store"] .app-header .search-shell { grid-column:1 / 4; }
  #app .app-header .search-shell:focus-within { border-color:var(--tr-bone-40); }
}
/* The smallest phones (Q48, 2026-10-05): at 320 px the Tasting bar's open-all chevron takes a
   column and "Search or barcode" was cut off after "barco". Under 360 px the header's edges and
   gaps narrow and the field's words drop to 16 px (still clear of the iOS focus zoom; the
   ghost completion keeps in step), so the words fit whole with room to spare. */
@media (max-width:359px) {
  .app-header { padding-left:max(10px,var(--safe-left)); padding-right:max(10px,var(--safe-right)); }
  .app-header .search-row { column-gap:6px; }
  #app .app-header .search-shell { column-gap:2px; }
  #search-input,.search-ghost { font-size:16px; }
}