/* Trolley visual + mobile system — GenAiMakers
   Tokens, aisle cards, sticky summary, thumb-zone bar, sheets, a11y, print. */
:root{
  --ok:#1f6b45;
  --ok-soft:#e7f4ec;
  --ok-ink:#0f3d27;
  --danger:#8a3b2a;
  --radius-card:16px;
  --radius-row:12px;
  --shadow-card:0 8px 24px rgba(45,43,43,.08);
  --touch:48px;
  --tap-gap:8px;
  --thumb-bar:72px;
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --type-item:16px;
  --type-qty:14px;
  --type-aisle:18px;
}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ font-size:16px !important; line-height:1.55; padding-bottom:0; }
.btn,.chip{
  min-height:44px; min-width:44px;
  font-size:16px; padding:10px 16px;
}
.btn-primary:active,.btn-secondary:active,.btn-ghost:active,.chip:active,
.shop-row:active,.trolley-bar button:active{
  transform:scale(.98);
  background:rgba(182,130,53,.18);
}
.btn-primary:active{ background:rgba(182,130,53,.22); }
.input{ font-size:16px; min-height:44px; }
.check{
  width:22px; height:22px; border-radius:6px; border:1.5px solid var(--n400);
  display:inline-flex; align-items:center; justify-content:center;
  flex:none; background:#fff;
}
.check.on{
  background:var(--ok); border-color:var(--ok);
  box-shadow:none;
}
.check.on::after{
  content:"";
  width:12px; height:7px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(0,-1px);
}

/* Sticky in-aisle summary */
.trolley-summary{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px;
  padding:10px 14px;
  margin:0 0 var(--s4);
  background:rgba(243,242,242,.94);
  backdrop-filter:blur(12px);
  border:1px solid var(--div);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
.trolley-ring{
  width:44px; height:44px; flex:none; position:relative;
}
.trolley-ring svg{ display:block; width:44px; height:44px; transform:rotate(-90deg); }
.trolley-ring .ring-bg{ fill:none; stroke:var(--n300); stroke-width:4; }
.trolley-ring .ring-fg{ fill:none; stroke:var(--ok); stroke-width:4; stroke-linecap:round; transition:stroke-dashoffset .35s ease; }
.trolley-ring .ring-label{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--a800);
}
.trolley-summary h2{ font-size:18px; margin:0; line-height:1.2; }
.trolley-summary .meta{
  display:flex; flex-wrap:wrap; gap:6px 12px;
  font-size:14px; color:var(--n700);
}
.trolley-summary .meta b{ color:var(--text); font-weight:600; }
.trolley-celebrate{
  margin-left:auto;
  font-size:13px; color:var(--ok-ink);
  background:var(--ok-soft);
  border-radius:999px; padding:6px 12px;
  white-space:nowrap;
}

/* Aisle cards */
.shop-board{
  display:flex; flex-direction:column; gap:14px;
}
@media (min-width:980px){
  .shop-board{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
}
.aisle-card{
  background:#fff;
  border:1px solid var(--div);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  break-inside:avoid;
  transition:max-height .4s ease, opacity .35s ease, transform .35s ease;
}
.aisle-card.is-collapsed .aisle-body{ max-height:0; opacity:.45; }
.aisle-head{
  display:flex; align-items:center; gap:10px;
  width:100%; min-height:var(--touch);
  padding:12px 14px;
  background:transparent; border:0; text-align:left;
  font:inherit; color:inherit; cursor:pointer;
  gap:12px;
}
.aisle-icon{
  width:36px; height:36px; flex:none;
  border-radius:10px;
  background:var(--a100);
  color:var(--a800);
  display:flex; align-items:center; justify-content:center;
}
.aisle-icon svg{ width:22px; height:22px; display:block; }
.aisle-h{
  font-family:var(--fh); font-size:var(--type-aisle);
  margin:0; color:var(--a800); font-weight:600; line-height:1.2;
}
.aisle-count{
  margin-left:auto;
  font-size:13px; color:var(--n700);
  background:var(--n100);
  border-radius:999px; padding:4px 10px;
  min-height:28px; display:inline-flex; align-items:center;
}
.aisle-card.is-done .aisle-count{
  background:var(--ok-soft); color:var(--ok-ink);
}
.aisle-body{ overflow:hidden; max-height:2400px; transition:max-height .4s ease, opacity .35s ease; }
.shop-row{
  display:flex; align-items:center; gap:var(--tap-gap);
  width:100%; min-height:var(--touch);
  padding:10px 14px;
  background:#fff; border:0; border-top:1px solid var(--div);
  text-align:left; font:inherit; color:inherit; cursor:pointer;
  touch-action:pan-y;
  position:relative;
  user-select:none; -webkit-user-select:none;
}
.shop-row .name{
  flex:1; font-size:var(--type-item); font-weight:600; line-height:1.3;
  color:var(--text);
}
.shop-row .qty{
  font-size:var(--type-qty); font-weight:400; color:var(--n700);
  margin-left:6px;
}
.shop-row .price{
  font-size:13px; color:var(--n700); font-variant-numeric:tabular-nums;
  min-width:2.4em; text-align:right;
}
.shop-row.is-ticked .name,
.shop-row.have-it .name{
  text-decoration:line-through;
  color:var(--n700);
  font-weight:400;
  opacity:.72;
}
.shop-row.is-ticked .check,
.shop-row.have-it .check{ background:var(--ok); border-color:var(--ok); }
.shop-row.is-ticked .check::after,
.shop-row.have-it .check::after{
  content:"";
  width:12px; height:7px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(0,-1px);
}
.shop-row.tick-pop .check{ animation:tick-pop .28s ease; }
.shop-edit{
  flex:none; min-width:44px; min-height:44px;
  border:0; background:transparent; color:var(--n700);
  font-size:18px; cursor:pointer; border-radius:8px;
}
.shop-edit:active{ background:var(--n200); }
.swipe-hint{
  position:absolute; inset:0 auto 0 0; width:72px;
  background:var(--ok-soft); color:var(--ok-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; opacity:0; pointer-events:none;
}
.shop-row.swiping-right .swipe-hint{ opacity:1; }
.shop-row.swiping-left{
  background:#f8ece9;
}

/* Empty + loading */
.trolley-empty, .trolley-skel{
  text-align:center;
  padding:32px 20px;
  background:#fff;
  border:1px dashed var(--n300);
  border-radius:var(--radius-card);
}
.trolley-empty svg{ width:96px; height:96px; margin:0 auto 12px; display:block; }
.trolley-empty h3{ margin:0 0 8px; font-size:22px; }
.trolley-empty p{ margin:0 auto; max-width:28em; color:var(--n700); font-size:16px; }
.skel-line{
  height:14px; border-radius:8px; background:linear-gradient(90deg,var(--n200),var(--n100),var(--n200));
  background-size:200% 100%;
  animation:skel 1.2s ease infinite;
  margin:10px 0;
}
.skel-card{ padding:14px; border:1px solid var(--div); border-radius:var(--radius-card); background:#fff; }

/* Thumb-zone action bar */
.trolley-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  padding:8px 12px calc(8px + var(--safe-bottom));
  background:rgba(243,242,242,.96);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--div);
  gap:8px;
}
.trolley-bar button{
  flex:1; min-height:48px;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-family:var(--fh); font-weight:600; font-size:13px; line-height:1.15;
  color:var(--text); background:#fff;
  border:1px solid var(--div); border-radius:14px;
  cursor:pointer;
}
.trolley-bar button.primary{
  color:#fff; background:var(--accent); border-color:var(--accent);
}
.trolley-bar .ico{ font-size:16px; line-height:1; }
body.has-trolley-bar{ padding-bottom:calc(var(--thumb-bar) + var(--safe-bottom) + 12px); }
@media (max-width:900px){
  .trolley-bar{ display:flex; }
  .hero-grid,.chat-grid,.split-2,.grid4{ grid-template-columns:1fr; }
  .shop-board{ display:flex; flex-direction:column; }
  .desktop-shop-actions{ display:none !important; }
  h1{ font-size:32px; }
}

/* Bottom sheets (mobile) / centered dialogs (desktop) */
.backdrop{
  align-items:end;
  padding:0;
}
.dialog, .sheet{
  width:100%;
  max-height:min(88vh, 720px);
  border-radius:20px 20px 0 0;
  padding:12px 18px calc(18px + var(--safe-bottom));
  animation:sheet-up .28s ease both;
}
.sheet-handle, .dialog::before{
  content:"";
  display:block;
  width:40px; height:4px;
  background:var(--n400);
  border-radius:4px;
  margin:4px auto 14px;
}
@media (min-width:901px){
  .backdrop{ align-items:center; padding:var(--s4); }
  .dialog, .sheet{
    width:min(560px,100%);
    border-radius:16px;
    animation:rise .28s ease both;
    padding:var(--s4);
  }
  .dialog::before, .sheet-handle{ display:none; }
}
.qty-stepper{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:12px 0;
}
.qty-stepper button{
  width:48px; height:48px; border-radius:14px;
  border:1px solid var(--div); background:#fff;
  font-size:22px; cursor:pointer;
}
.qty-stepper .val{ min-width:4em; text-align:center; font-size:20px; font-weight:600; }

/* Snackbar undo */
.trolley-snack{
  position:fixed; left:12px; right:12px; bottom:calc(var(--thumb-bar) + var(--safe-bottom) + 12px);
  z-index:45;
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; min-height:48px;
  background:#2a2726; color:#f8f4f4;
  border-radius:14px; box-shadow:var(--shadow-card);
  font-size:15px;
}
.trolley-snack button{
  margin-left:auto; min-height:44px; min-width:64px;
  background:transparent; border:0; color:var(--a300);
  font:inherit; font-weight:600; cursor:pointer;
}
@media (min-width:901px){
  .trolley-snack{ left:auto; right:24px; bottom:24px; width:min(380px, calc(100% - 48px)); }
}

/* Screen-reader + focus */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.shop-row:focus-visible, .aisle-head:focus-visible, .trolley-bar button:focus-visible,
.shop-edit:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

@keyframes tick-pop{
  0%{ transform:scale(.6); }
  70%{ transform:scale(1.12); }
  100%{ transform:scale(1); }
}
@keyframes sheet-up{
  from{ transform:translateY(24px); opacity:0; }
  to{ transform:none; opacity:1; }
}
@keyframes skel{
  0%{ background-position:100% 0; }
  100%{ background-position:-100% 0; }
}

@media (prefers-reduced-motion: reduce){
  .shop-row, .aisle-card, .aisle-body, .dialog, .sheet, .trolley-ring .ring-fg,
  .bubble-bot, .bubble-user, .skel-line{
    animation:none !important;
    transition:none !important;
  }
  .btn,.chip,.shop-row,.trolley-bar button{ transform:none !important; }
}

/* Print / PDF parity — same cards, icons, ticks, branded header */
@media print{
  :root{ --shadow-card:none; }
  body{ background:#fff; color:#201f1d; font-size:12pt; padding:0 !important; }
  header.site, footer.site, .studio, [data-noprint], .trolley-bar, .trolley-snack, .backdrop{ display:none !important; }
  .trolley-summary{ position:static; box-shadow:none; border:1px solid #d7d3d3; }
  .shop-board{ display:block; }
  .aisle-card{ box-shadow:none; break-inside:avoid; margin-bottom:12pt; border:1px solid #d7d3d3; }
  .aisle-card.is-done .aisle-body, .aisle-card.is-collapsed .aisle-body{ max-height:none; opacity:1; }
  .shop-row{ break-inside:avoid; min-height:28px; padding:6px 10px; }
  .print-brand{ display:flex !important; align-items:center; gap:10px; margin:0 0 16pt; }
  a{ color:inherit; }
}
.print-brand{ display:none; }

@media (max-width:900px){
  .chat-card{ min-height:auto; }
  .week-viz{ grid-template-columns:repeat(7,1fr); }
}