/* CoreTech Shop, desktop layout "D1 Aisle rail + docked chat". shop.html loads this file only when the --phone-media
   query (base.css) does not match. The store column's own width (container queries) sets the rail, the header labels and
   the grid density, so the only reflow is the shopper's own chat open/close (the chat keeps one width). */
:root {
  --header-height:64px;  /* one-line header; the assistant header reads the same value, so the seams align */
  --rail-width:256px; --rail-collapsed:64px; --rail-row:36px;
  --logo-width:112px; --search-height:44px; --control-height:40px; --search-submit-height:36px;
  --rail-unfold:var(--motion-appear); --rail-unfold-delay:.12s;  /* the delay is hover intent, not motion */
  --grid-gap:12px; --card-height:312px; --card-photo:150px; --card-photo-narrow:116px; --band-height:364px; --cart-summary:340px;
  --fs-14:14px; --fs-24:24px; --fs-28:28px;
  --page-max:1180px;       /* page views (answer, product): the content column */
  --page-photo-top:88px;   /* the product photo sticks under the page head (64px) */
}

/* Shell: the assistant is a 420px sidebar that pushes the store while open; each column scrolls on its own. */
body { height:100dvh; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) var(--chat-width); grid-template-rows:auto minmax(0,1fr); transition:grid-template-columns var(--motion-panel) var(--ease-out); }
/* Store column: the thin header over the aisle rail and the main column. */
.storefront { min-width:0; min-height:0; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); overflow:hidden; container:store / inline-size; }
.storefront > header { grid-column:1 / -1; }
.storefront-stage { grid-column:2; grid-row:2; min-width:0; min-height:0; overflow:hidden; container:stage / inline-size; }
.storefront-view { width:100%; height:100%; min-width:0; min-height:0; }
.products-view { overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }

/* Expanded reading view: the store hides and the conversation takes the one column. */
body.assistant-expanded { grid-template-columns:minmax(0,1fr); }

/* Closed assistant: full-width store, one labelled way back. */
body.chat-closed { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
body.chat-closed .storefront { grid-column:1 / -1; }
body.chat-closed .assistant { position:fixed; right:24px; bottom:24px; z-index:60; }
/* Desktop has one AI entry, the header button; the floating launcher is the phone entry only. */
/* Opening, the dock slides in beside the store (the store reflows at once). The column clips the slide, so the page never
   grows a horizontal scrollbar while it moves. */
body:not(.chat-closed) .assistant-panel { animation:m-slide var(--motion-panel) var(--ease-out); }
.assistant { overflow-x:clip; }
@keyframes m-slide { from { opacity:0; translate:var(--motion-rise) 0; } }

/* Header, one line: logo, wide search, the one AI entry, then history, saved and the cart with its running total. */
.topbar { gap:12px; }
.brand-logo { width:var(--logo-width); }
.search { height:var(--search-height); }
.search-submit { height:var(--search-submit-height); padding:0 16px; background:var(--sunken); color:var(--ink); }  /* red is for add, send, checkout, counts */
.search-submit:hover { background:var(--line); }
.header-ai { height:var(--control-height); }
.store-nav { gap:4px; }
.nav-btn { flex-direction:row; gap:8px; min-width:var(--control-height); height:var(--control-height); padding:0 12px; border-radius:var(--r-pill); font-size:var(--fs-14); white-space:nowrap; }
.nav-btn .count-pill { position:static; box-shadow:none; }
#cartOpen { box-shadow:inset 0 0 0 1px var(--line-strong); }  /* last in the nav, as a bordered pill */
.nav-total { font-weight:600; font-variant-numeric:tabular-nums; }
.nav-total::before { content:'· ' / ''; color:var(--muted); font-weight:400; }  /* silent separator */
@container store (width < 1180px) {
  #userOpen .nav-label, #wishlistOpen .nav-label { display:none; }  /* icon buttons; aria-label and title name them */
  #userOpen, #wishlistOpen { padding:0 10px; }
}
@container store (width < 900px) {
  #cartOpen .nav-label { display:none; }
  .nav-total::before { content:none; }
}
@media (min-width:1101px) {
  @container store (width < 800px) { .search-submit { display:none; } }  /* Enter searches; the field keeps its room */
}
/* Projector widths (1024): two header rows; the assistant header follows --header-height. */
@media (max-width:1100px) {
  :root { --header-height:112px; }
  .topbar { grid-template-columns:auto minmax(0,1fr) auto auto; grid-template-rows:var(--search-height) var(--search-height); grid-template-areas:'brand . ai nav' 'search search search search'; row-gap:8px; padding:7px 0 8px; }
}

/* Aisle rail: "Бүгд" and every category, one line each, beside the main column with its own scroll. */
.category-shell { position:relative; grid-column:1; grid-row:2; width:var(--rail-width); min-height:0; border-bottom:0; }
.category-rail.shell { width:100%; height:100%; margin:0; padding:8px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; border-right:1px solid var(--line); background:var(--paper); scrollbar-width:thin; scrollbar-color:var(--scroll) transparent; }
.categories { flex-direction:column; align-items:stretch; gap:0; padding:0; }
.categories .chip { width:100%; height:var(--rail-row); padding:0 6px 0 12px; gap:8px; border:0; border-radius:var(--r-control); background:transparent; color:var(--ink-2); font-size:var(--fs-13); scroll-snap-align:none; }
.categories .chip .icon { width:18px; height:18px; }
.categories .chip span { min-width:0; overflow:hidden; text-overflow:ellipsis; transition:opacity var(--motion-press); }
.categories .chip:hover { background:var(--sunken); color:var(--ink); }
.categories .chip.active { background:var(--ink); color:var(--surface); }
.categories .chip:focus-visible { outline-offset:-2px; }
.categories .chip.more { display:flex; }
.categories .chip.all-categories { display:none; }  /* the rail lists every category */
/* A narrow store column (chat open at 1024-1280): the rail folds to its icons and unfolds over the grid on hover or
   keyboard focus (not after a click, so a picked aisle is not covered). */
@container store (width < 840px) {
  .category-shell { width:var(--rail-collapsed); }
  .categories .chip { padding-left:15px; }  /* icons centred in the folded rail */
  .category-rail.shell { position:absolute; inset:0 auto 0 0; z-index:25; width:var(--rail-collapsed); transition:width var(--rail-unfold) var(--ease-out), box-shadow var(--rail-unfold); }
  .category-shell:is(:hover,:has(:focus-visible)) .category-rail { width:var(--rail-width); box-shadow:var(--shadow-float); transition-delay:var(--rail-unfold-delay); }
  .category-shell:not(:hover,:has(:focus-visible)) .chip span { opacity:0; }
}

/* Main column: a compact persona line, the band as one row, then the catalog. */
.storefront-layout { padding-top:16px; }
.greeting { gap:6px 12px; margin:0 0 14px; }
.greeting h1 { font-size:var(--fs-20); }
.greeting p { font-size:var(--fs-14); }
.greeting .perks { align-items:center; gap:8px; margin:0; counter-reset:perks -1; }
.perk { counter-increment:perks; }
.perk:not(:first-child) { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }  /* read, not shown */
.perks:has(.perk:nth-child(2))::after { content:'+' counter(perks) / ''; color:var(--success); font-size:var(--fs-13); font-weight:600; }
.perk { flex-wrap:nowrap; min-height:28px; padding:3px 12px; white-space:nowrap; }
.perk .icon { display:none; }  /* decorative */
/* A guest has no server greeting: no persona line; the h1 stays for focus and headings. */
.greeting.generic { margin:0; }
.greeting.generic h1 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.greeting.generic > p:not(.ai-state) { display:none; }
.greeting .ai-state { margin-top:0; }
.products-view.in-category .rec-rail { display:none; }  /* a rail pick opens its aisle */
.products-view.in-category .greeting { position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip:rect(0,0,0,0); }  /* h1 stays focusable */
.rec-rail { height:var(--band-height); margin:0 0 28px; padding:14px 16px 0; }
.rec-rail .section-head { flex-wrap:nowrap; margin-bottom:10px; }
.rec-rail .section-head h2 { flex:none; font-size:var(--fs-20); }
.rec-hint { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:right; }
.rec-rail .rail { gap:var(--grid-gap); grid-auto-columns:calc((100% - (var(--cols) - 1) * var(--grid-gap)) / var(--cols)); }
.catalog-head { align-items:center; margin:0 0 14px; }
.catalog-head > div { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; min-width:0; }
.catalog-head h2 { font-size:var(--fs-24); }
.catalog-head p { margin:0; font-size:var(--fs-14); }
#resultMeta::before { content:'· ' / ''; }

/* Grocery density: designed column counts with fixed card heights (5 at 1440 closed, 4 open); page views keep it. */
.products-view, .page-view { --cols:5; }
@container stage (width < 1000px) { .products-view, .page-view { --cols:4; } }
@container stage (width < 760px) { .products-view, .page-view { --cols:3; } }  /* 1440 open: 764 (4) */
@container stage (width < 560px) { .products-view, .page-view { --cols:2; } }
.grid { grid-template-columns:repeat(var(--cols),minmax(0,1fr)); grid-auto-rows:var(--card-height); gap:var(--grid-gap); }
.grid > .product, .grid > .adaptive-slot { height:var(--card-height); }
.grid .photo { height:var(--card-photo); }
.grid .body { padding:10px 12px 12px; }
.grid .product h3 { height:38px; font-size:var(--fs-14); }
.grid .because span, .rec-rail .because span { -webkit-line-clamp:1; }
.rec-rail .product h3 { height:38px; font-size:var(--fs-14); }
/* Narrow cards stack price over the add control, so every card in a row reads the same. */
.storefront .product { container:card / inline-size; }
@container card (width < 200px) { .price-row { flex-direction:column; align-items:flex-start; } .discount-label { display:none; } }
@container card (width < 212px) {  /* a grid card needs about 206px for price + stepper on one line */
  .grid .price-row { flex-direction:column; align-items:flex-start; }
  .grid .photo { height:var(--card-photo-narrow); }
  .grid .discount-label { display:none; }  /* the struck-through price stays; a wrapped price line would not fit the fixed row */
}
.storefront .product .meta { flex:none; }  /* the pack size never shrinks away in a fixed-height card */
/* A card in the cart reads across the grid: the stepper plus an ink ring. */
.storefront .product:has(.stepper) { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.storefront .product:has(.stepper):hover { box-shadow:0 0 0 1px var(--ink), var(--shadow-card); }

/* Cart: lines on the left, the summary with checkout on the right when the column allows. */
@container stage (width >= 760px) {
  #cartDrawer:not([hidden]) { display:grid; grid-template-columns:minmax(0,1fr) var(--cart-summary); grid-template-rows:auto minmax(0,1fr); }
  #cartDrawer .view-head { grid-column:1 / -1; padding-inline:24px; }
  #cartDrawer .cart-scroll { padding:4px 8px 24px 24px; }
  #cartDrawer .cart-foot { align-self:start; margin:16px 24px 0 8px; padding:16px 18px 18px; border:1px solid var(--line); border-radius:var(--r-card); }
}

/* Page views (REDESIGN-V): the answer view and the product page fill the main column and scroll on their own; the head
   (back, breadcrumb) stays at the top. The product page is white, so its photo sits edge to edge; answers sit on paper. */
.page-view { overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.page-view .view-head { position:sticky; top:0; z-index:5; gap:16px; padding-inline:max(24px, calc((100% - var(--page-max)) / 2)); }
.page-body { padding:0 max(24px, calc((100% - var(--page-max)) / 2)) 48px; }
.product-page { background:var(--surface); }
.pp-main { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:48px; align-items:start; padding:28px 0 36px; }
.pp-photo { position:sticky; top:var(--page-photo-top); aspect-ratio:1; border-radius:var(--r-card); }
.pp-buy h2 { font-size:var(--fs-28); }
.pp-price strong { font-size:var(--fs-28); }
.pp-buy .detail-actions { position:static; padding:0; }
.pp-row { padding:24px 0 8px; border-top:1px solid var(--line); }
.pp-row .rail { gap:var(--grid-gap); grid-auto-columns:calc((100% - (var(--cols) - 1) * var(--grid-gap)) / var(--cols)); }
.answer-page-head { padding:28px 0 8px; }
.answer-page-head h2 { font-size:var(--fs-28); }
.answer-group { margin-top:28px; }
@container stage (width < 760px) { .pp-main { gap:28px; } }
/* A page view appears with the shop's fade (motion tokens; nothing under reduced motion). */
.page-view:not([hidden]) { animation:m-fade var(--motion-appear) var(--ease-out); }