/* CoreTech Shop, phone layout "P1 App tabs" (phones, short landscape and zoom). shop.html loads this file only when the
   --phone-media query (base.css) matches; js/phone.js drives the tabs, the sheet history and the keyboard inset.
   The body is an in-flow 100dvh column: demo bar, the store (one header row over one scroller), the chat while its tab
   is active, the floating cart bar and the tab bar. No bar is position:fixed (iOS 26 Safari misplaces fixed bottom bars
   and tints its toolbar from them); only dialogs and toasts float. */
:root {
  --header-height:65px;              /* one header row: logo and a 48px search, 8px above and below, hairline */
  --tabbar-height:56px;
  --cartbar-height:48px;
  --phone-target:44px;               /* every phone touch target */
  --phone-disc:52px;                 /* Нүүр category icon disc */
  --phone-rail-width:104px;          /* Ангилал text rail: fits "бүтээгдэхүүн" on one line */
  --phone-card-min:150px;            /* grid column minimum: 2 columns on phones, more in landscape */
  --phone-card-height:284px;         /* reserved grid row */
  --phone-photo:140px;               /* grid card photo well */
  --phone-band-height:356px;         /* recommendation band: title and hint lines above compact cards */
  --phone-band-rail:286px; --phone-band-card:276px; --phone-band-column:188px;
  --phone-band-photo:92px;           /* recommendation band photo well */
  --phone-sheet-gap:40px;            /* the store stays visible above the product sheet */
  --phone-sheet-in:var(--motion-panel);  /* the product sheet slides up */
  --phone-sheet-photo:220px;         /* the product photo in the sheet */
  --phone-tab-mark:3px;              /* the active tab's ink bar */
  --phone-gutter-left:max(12px, env(safe-area-inset-left));   /* page gutters clear a landscape notch */
  --phone-gutter-right:max(12px, env(safe-area-inset-right));
  --phone-composer-clearance:84px;   /* toasts on the AI tab sit above the composer */
  --phone-column-max:680px;          /* 600-900px windows: bars, the chat, the cart and History keep a centred column */
  --phone-sheet-max:720px;
  --phone-tab-max:120px;
  --fs-11:11px; --fs-14:14px;
  --keyboard-inset:0px;              /* phone.js: the part of the page the on-screen keyboard covers */
}

/* Shell: every bar in flow; the store stage is the one scroller and ends above the cart bar and the tab bar. */
body { display:flex; flex-direction:column; height:calc(100dvh - var(--keyboard-inset)); overflow:hidden; }
.demo-bar { flex:none; }
.demo-bar-inner { padding:2px var(--phone-gutter-right) 2px var(--phone-gutter-left); }
.persona-label select { height:var(--phone-target); }
.storefront { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.storefront > header { flex:none; }
.category-shell { display:none; }  /* categories are the Ангилал tab */
.storefront-stage { display:flex; flex-direction:column; flex:1; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; overflow-anchor:none; }
.storefront-view:not([hidden]) { flex:1 0 auto; height:auto; overflow:visible; }
.shell { width:auto; margin:0 var(--phone-gutter-right) 0 var(--phone-gutter-left); }
.storefront-layout { padding-top:14px; }

/* Header: logo and search with the camera; the tabs replace the AI button and the store nav; the keyboard's search key submits. */
.topbar { grid-template-columns:auto minmax(0,1fr); grid-template-areas:'brand search'; gap:10px; }
.topbar > :not(.brand):not(.search) { display:none; }
.brand-logo { width:88px; }
.search { height:48px; padding:0 2px 0 14px; }
.search-photo, .wishlist-toggle { width:var(--phone-target); height:var(--phone-target); }
#sortSelect { height:var(--phone-target); }
.search-submit { display:none; }
.search input, #chatInput, .receipt-workflow input:not([type="checkbox"]), .receipt-workflow select { font-size:var(--fs-16); }  /* no zoom on focus */

/* Tab bar: Нүүр · Ангилал · AI туслах (the one sparkle) · Сагс (count) · Миний. Active in ink. */
.phone-tabs { order:3; flex:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); border-top:1px solid var(--line); background:var(--surface); }
.phone-tabs button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; min-height:var(--tabbar-height); padding:6px 2px 4px; border:0; background:transparent; color:var(--muted); font-size:var(--fs-12); font-weight:500; line-height:1.1; }
.phone-tabs button > span:not(.count-pill) { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.phone-tabs .icon { width:24px; height:24px; }
.phone-tabs [aria-current="page"] { color:var(--ink); font-weight:700; }
.phone-tabs [aria-current="page"]::before { content:''; position:absolute; top:0; left:28%; right:28%; height:var(--phone-tab-mark); border-radius:0 0 var(--phone-tab-mark) var(--phone-tab-mark); background:var(--ink); }
.phone-tabs [data-phone-tab="ai"] .icon { color:var(--accent); }
.phone-tabs .count-pill { position:absolute; top:4px; left:calc(50% + 6px); box-shadow:0 0 0 2px var(--surface); }
.phone-tabs button:focus-visible { outline-offset:-3px; }

/* Floating cart bar after the first add, on Нүүр and Ангилал: in flow above the tabs, so it never covers a product. */
.phone-cartbar { order:2; flex:none; display:flex; align-items:center; gap:10px; min-height:var(--cartbar-height); margin:8px var(--phone-gutter-right) 8px var(--phone-gutter-left); padding:0 14px 0 16px; border:0; border-radius:var(--r-card); background:var(--ink); color:var(--surface); font-size:var(--fs-15); font-weight:600; text-align:left; box-shadow:var(--shadow-float); }
.phone-cartbar strong { margin-left:auto; font-variant-numeric:tabular-nums; }
.phone-cartbar[data-count="0"] { display:none; }
body:not([data-tab="home"]):not([data-tab="categories"]) .phone-cartbar { display:none; }
/* An on-screen keyboard owns the bottom while typing (touch screens only: a laptop window keeps its tabs). */
@media (pointer:coarse) {
  body.typing .phone-tabs, body.typing .phone-cartbar { display:none; }
}

/* AI туслах tab: the chat fills the space between the header and the tab bar; the store keeps its scroll underneath. */
body.chat-closed .assistant { display:none; }
body:not(.chat-closed) .storefront { flex:none; }
body:not(.chat-closed) .storefront-stage { flex:none; height:0; visibility:hidden; }
body:not(.chat-closed) .assistant { order:1; flex:1; min-height:0; padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
body:not(.chat-closed) .assistant-panel { height:100%; border:0; }
body:not(.chat-closed) .assistant-head { height:52px; padding:0 8px 0 16px; }
#speechStatus, #assistantExpand, .assistant-head .nav-label { display:none; }

/* Нүүр: search, a 2×4 grid of round category icons, perks and the member line, the one band, then the grid. */
.phone-home { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 0; margin:0 -6px 16px; }
.phone-home button { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; padding:0 2px; border:0; background:none; color:var(--ink-2); font-size:var(--fs-12); font-weight:500; line-height:1.25; letter-spacing:-.01em; text-align:center; }
.phone-home .disc { display:grid; place-items:center; width:var(--phone-disc); height:var(--phone-disc); border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface); color:var(--ink); }
.phone-home .disc .icon { width:24px; height:24px; }
.phone-home .label { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.products-view.searching .phone-home { display:none; }
.greeting { margin:0; }
.greeting h1 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }  /* the page heading and focus target, not shown */
#greetingText { display:none; }
body.phone-greeting #greetingText { display:block; max-width:100%; margin:0 0 12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--ink-2); font-size:var(--fs-13); font-weight:500; }
.greeting .perks { margin:0 0 12px; }
.greeting .ai-state { margin:0 0 12px; }
.rec-rail { height:var(--phone-band-height); margin-bottom:24px; padding:12px 12px 0; }
.rec-rail .section-head { flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:2px; margin-bottom:8px; }
.rec-rail .section-head h2, .rec-hint { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }
.rail { grid-auto-columns:var(--phone-band-column); height:var(--phone-band-rail); }
.rail > .product, .rail > .skeleton { height:var(--phone-band-card); }
.rail .photo { height:var(--phone-band-photo); }
.rail .because span { -webkit-line-clamp:1; }

/* Grid cards: 2 columns; the cart control sits on the photo's bottom corner, in the thumb's reach at 360px, and "Сагс"
   turns into − qty + in place. Band cards keep it in the price row (their photo is too short for it and the heart). */
.grid { grid-template-columns:repeat(auto-fill,minmax(var(--phone-card-min),1fr)); grid-auto-rows:var(--phone-card-height); gap:12px; }
.grid > .product, .grid > .adaptive-slot { height:var(--phone-card-height); }
.grid .photo { height:var(--phone-photo); }
.grid .body { padding:10px 12px 12px; }
.grid .product h3 { height:38px; font-size:var(--fs-14); }
.grid .price strong { font-size:var(--fs-16); }
.grid .because span { -webkit-line-clamp:1; }
.product:hover { border-color:var(--line); transform:none; box-shadow:none; }  /* no sticky hover lift after a tap */
.grid .cart-control { position:absolute; top:calc(var(--phone-photo) - var(--phone-target) - 8px); right:6px; z-index:3; }
.grid .wishlist-toggle { top:6px; right:6px; }
.grid .add { padding:0 14px 0 10px; border-radius:var(--r-pill); box-shadow:var(--shadow-card); }
.grid .stepper { border-radius:var(--r-pill); box-shadow:var(--shadow-card); }
.grid .stepper button { border-radius:var(--r-pill); }
.grid .add, .rec-rail .add, .grid .stepper, .rec-rail .stepper { height:var(--phone-target); }
.grid .stepper button, .rec-rail .stepper button { width:var(--phone-target); height:var(--phone-target); }

/* Ангилал tab: a left text rail of all categories beside a 2-column grid of the chosen one; each column scrolls. */
.phone-rail { display:none; }
body[data-tab="categories"] .storefront-stage { overflow:hidden; }
body[data-tab="categories"] .products-view:not([hidden]) { display:grid; grid-template-columns:var(--phone-rail-width) minmax(0,1fr); flex:1 1 0; min-height:0; }
body[data-tab="categories"] .phone-rail { display:block; min-height:0; padding-left:env(safe-area-inset-left); overflow-y:auto; overscroll-behavior:contain; border-right:1px solid var(--line); background:var(--surface); scrollbar-width:none; }
body[data-tab="categories"] .storefront-layout { width:auto; min-height:0; margin:0; padding:10px var(--phone-gutter-right) 8px 8px; overflow-y:auto; overscroll-behavior:contain; }
body[data-tab="categories"] .phone-home, body[data-tab="categories"] .greeting, body[data-tab="categories"] .rec-rail, body[data-tab="categories"] .products-view > footer { display:none; }
body[data-tab="categories"] .catalog-head { margin-bottom:10px; }
body[data-tab="categories"] .catalog-head h2 { font-size:var(--fs-17); }
body[data-tab="categories"] .grid { --phone-card-min:118px; --phone-photo:112px; --phone-card-height:258px; gap:8px; }
.phone-rail button { display:block; width:100%; min-height:var(--phone-target); padding:12px 6px 12px 10px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink-2); font-size:var(--fs-12); font-weight:500; line-height:1.3; text-align:left; overflow-wrap:anywhere; }
.phone-rail button[aria-pressed="true"] { background:var(--ink); color:var(--surface); font-weight:600; }

/* Product detail: a full-height bottom sheet everywhere (grid, band, chat), with the product page's sections in one column
   (views.js): close at the top, the related rows below, the add button pinned at the bottom. */
#productDetail { --sheet-left:max(16px, env(safe-area-inset-left)); --sheet-right:max(16px, env(safe-area-inset-right)); display:flex; flex-direction:column; width:100%; max-width:100%; height:calc(100dvh - var(--phone-sheet-gap)); max-height:none; margin:auto 0 0; padding:0; overflow:hidden; border-radius:var(--r-dialog) var(--r-dialog) 0 0; transition:translate var(--phone-sheet-in) var(--ease-out); }
#productDetail > .close { position:absolute; top:10px; right:var(--sheet-right); z-index:2; width:var(--phone-target); height:var(--phone-target); margin:0; }
#detailContent { flex:1; min-height:0; display:flex; flex-direction:column; padding:20px var(--sheet-right) 0 var(--sheet-left); overflow-y:auto; overscroll-behavior:contain; }
#detailContent .pp-main, #detailContent .pp-buy { display:contents; }
#detailContent .crumbs { min-height:var(--phone-target); padding-right:calc(var(--phone-target) + 8px); }  /* clear of the close button */
#detailContent .crumbs ol { min-height:var(--phone-target); }
#detailContent .pp-photo { flex:none; height:var(--phone-sheet-photo); margin:4px 0 12px; }
#detailContent .pp-row { flex:none; margin-top:24px; }
#detailContent .pp-row > h3 { font-size:var(--fs-17); }
#detailContent .pp-row :is(.add, .stepper) { height:var(--phone-target); }  /* 44px targets in the sheet's rows */
#detailContent .pp-row .stepper button { width:var(--phone-target); height:var(--phone-target); }
#detailContent .detail-actions { order:9; position:sticky; bottom:0; z-index:5; margin:auto calc(0px - var(--sheet-right)) 0 calc(0px - var(--sheet-left)); padding:12px var(--sheet-right) calc(12px + env(safe-area-inset-bottom)) var(--sheet-left); border-top:1px solid var(--line); background:var(--surface); }
#detailContent .detail-actions .detail-cart { flex:1; display:flex; }
#detailContent .detail-cart .add, #detailContent .detail-cart .stepper { flex:1; justify-content:space-between; }
#detailContent .detail-cart .add { justify-content:center; }
#detailContent .wishlist-detail-toggle { min-height:var(--phone-target); }
dialog { padding:20px; }

/* Сагс and Миний: the tab bar is the way between views; the checkout sticks above it. */
.view-back { display:none; }
.view-head { min-height:56px; }
.view-head, .cart-scroll, .cart-foot, .order-history, .wishlist-items { padding-left:var(--phone-gutter-left); padding-right:var(--phone-gutter-right); }
.cart-scroll, .history-modal-body, .wishlist-items { flex:1 0 auto; overflow:visible; }
.cart-foot { position:sticky; bottom:0; z-index:5; box-shadow:var(--shadow-up); }
#userDrawer .view-head h2, #wishlistDialog .view-head h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }  /* the switch names the view */
.phone-segments { display:flex; flex:1; gap:4px; padding:3px; border-radius:var(--r-pill); background:var(--sunken); }
.phone-segments button { flex:1; min-height:var(--phone-target); padding:0 12px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--ink-2); font-size:var(--fs-13); font-weight:600; }
.phone-segments [aria-pressed="true"] { background:var(--ink); color:var(--surface); }
.wishlist-line { grid-template-columns:56px minmax(0,1fr); }
.wishlist-line img { width:56px; height:56px; }
.wishlist-line-actions { grid-column:1 / -1; }
.order-items li { grid-template-columns:1fr; }
.order-item-actions { justify-content:space-between; }
.order-card-actions { align-items:stretch; flex-direction:column; }
.history-add-all { width:100%; }

/* Targets and toasts: 44px everywhere; toasts sit above the bottom bars, never over the composer or the checkout. */
.nav-btn, .icon-btn, .tool-button, .send, .panel-action, .voice-bar button { min-width:44px; min-height:44px; }
.voice-bar .voice-done span { display:none; }  /* the hint line explains; the phone keeps the ✓ as a 44px target */
.voice-bar .voice-done { padding:0; }
.qty button { width:44px; height:44px; }
.prompt-chip { min-height:44px; }
#toast { top:auto; left:12px; right:12px; bottom:calc(var(--tabbar-height) + var(--cartbar-height) + 24px + env(safe-area-inset-bottom)); max-width:none; transform:none; }
body:not(.chat-closed) #toast { top:auto; bottom:calc(var(--tabbar-height) + var(--phone-composer-clearance) + env(safe-area-inset-bottom)); }
body:has(dialog[open]) #toast { top:calc(12px + env(safe-area-inset-top)); bottom:auto; }  /* a sheet covers the bottom */

@starting-style { #productDetail[open] { translate:0 100%; } }

/* 600-900px windows (the demo shows the shop beside the back office on one laptop): the same app composed for the
   width, not a stretched phone. Bars, the chat and the cart keep a centred column; the grids gain columns. */
@media (min-width:600px) {
  :root { --phone-rail-width:148px; --phone-card-min:160px; }
  .phone-home { grid-template-columns:repeat(8,minmax(0,1fr)); margin:0 0 20px; }
  .phone-tabs { grid-template-columns:repeat(5,minmax(0,var(--phone-tab-max))); justify-content:center; }
  .phone-cartbar { align-self:center; width:min(var(--phone-column-max), calc(100% - 24px)); }
  .phone-rail button { padding:12px 10px 12px 14px; font-size:var(--fs-13); }
  #productDetail { width:min(var(--phone-sheet-max), 100%); margin:auto auto 0; }
  .view-head, .cart-scroll, .cart-foot, .order-history, .wishlist-items { padding-left:max(var(--phone-gutter-left), calc((100% - var(--phone-column-max))/2)); padding-right:max(var(--phone-gutter-right), calc((100% - var(--phone-column-max))/2)); }
  body:not(.chat-closed) .assistant { justify-content:center; }
  body:not(.chat-closed) .assistant-panel { max-width:var(--phone-column-max); border-left:1px solid var(--line); border-right:1px solid var(--line); }
}
@media (max-width:370px) {
  :root { --phone-rail-width:96px; }
  .phone-home button { font-size:var(--fs-11); }
}
@media (max-width:480px) {
  .demo-bar-label { display:none; }
  .title-brand { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .persona-label { flex:1; min-width:0; justify-content:space-between; }
  .persona-label > span { white-space:nowrap; }
  .persona-label select { flex:1; width:auto; min-width:0; max-width:260px; }
}
/* Short landscape: compact bars (icon beside a small label), a compact sheet; the content keeps the height. */
@media (max-height:560px) {
  :root { --header-height:57px; --tabbar-height:44px; --cartbar-height:40px; --phone-sheet-gap:12px; }
  .search { height:44px; }
  .phone-tabs button { flex-direction:row; gap:6px; padding:0 4px; }
  .phone-tabs .icon { width:20px; height:20px; }
  .phone-tabs .count-pill { top:2px; left:auto; right:4px; }
  .phone-cartbar { margin-top:4px; margin-bottom:4px; }
  .phone-home { grid-template-columns:repeat(8,minmax(0,1fr)); }  /* one row of categories */
  body:not(.chat-closed) .assistant-head { height:44px; }
  :root { --phone-sheet-photo:112px; }
  #detailContent { padding-top:12px; }
  #detailContent .crumbs { display:none; }  /* short landscape: name, price and the add bar come first */
}
/* Very short (landscape phones, a zoomed window): the open chat takes the demo bar's and the header's room. */
@media (max-height:420px) {
  body:not(.chat-closed) .demo-bar, body:not(.chat-closed) .storefront > header { display:none; }
}