/* =============================================================================
   Gadget Time — Interactive Touch Screen (ITS), in-store
   Primary target: 1920x1080 landscape.  Also supported: 1080x1920 portrait.
   Touch-only: no hover carries information, everything responds to :active.
   ============================================================================= */

/* ------------------------------------------------------------------ tokens */
:root{
  --bg:            #07080B;
  --bg-2:          #0C0E13;
  --surface:       #12151C;
  --surface-2:     #1A1E27;
  --surface-3:     #232833;
  --line:          #2A303C;
  --line-soft:     #1E232D;

  --ink:           #F2F5FA;
  --ink-2:         #AEB6C4;
  --ink-3:         #737D8D;

  /* Brand magenta, sampled from the real Gadget Time logo. */
  --accent:        #D91981;   /* brand base — fills, borders, active states  */
  --accent-bright: #F72C93;   /* interactive / glow / magenta-on-dark TEXT   */
  --accent-deep:   #A8125F;   /* pressed                                     */
  --accent-ink:    #FFFFFF;   /* text on top of an --accent fill (4.8:1)     */
  --accent-glow:   rgba(217,25,129,.18);
  --accent-soft:   rgba(217,25,129,.10);

  --ok:            #2BE08A;
  --ok-dim:        rgba(43,224,138,.14);
  --warn:          #FFB43A;
  --warn-dim:      rgba(255,180,58,.14);
  --off:           #5A6472;
  --off-dim:       rgba(90,100,114,.12);
  --danger:        #FF5F6D;

  --r-sm: 5px;
  --r:    10px;
  --r-lg: 14px;

  /* touch targets: 56px floor (ITS hard rule), 72px ceiling */
  --touch-min: 56px;
  --touch-max: 72px;

  --topbar-h: 88px;
  --buybar-h: 108px;

  --t-fast: 140ms cubic-bezier(.2,.7,.3,1);
  --t:      200ms cubic-bezier(.2,.7,.3,1);

  --font: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Clash Grotesk', 'Satoshi', system-ui, sans-serif;
}

/* ------------------------------------------------------------- ITS reset */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{
  height:100%; margin:0; padding:0;
  background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:18px; font-weight:400; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
body{
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  cursor:default;
}
img{ display:block; max-width:100%; -webkit-user-drag:none; user-select:none; }
button{
  font:inherit; color:inherit; background:none; border:0; margin:0;
  cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,p{ margin:0; }
:focus{ outline:none; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:99px; }
::-webkit-scrollbar-track{ background:transparent; }
.scroll-y{ overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

/* -------------------------------------------------------------- primitives */
.screen{ display:none; position:fixed; inset:var(--topbar-h) 0 0 0; }
.screen.is-active{ display:flex; }
.screen--attract.is-active{ display:block; inset:0; }

.screen-title{
  font-family:var(--font-display); font-weight:600;
  font-size:36px; line-height:1.08; letter-spacing:-.02em;
}
.screen-sub{ font-size:17px; font-weight:400; color:var(--ink-2); margin-top:10px; max-width:64ch; }

.price{
  font-family:var(--font-display); font-weight:700; font-size:34px;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.price-was{
  font-size:19px; color:var(--ink-3); text-decoration:line-through;
  font-variant-numeric:tabular-nums;
}
.save-flag{
  font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#FFD9DD; background:rgba(255,95,109,.16); border:1px solid rgba(255,95,109,.4);
  padding:6px 12px; border-radius:99px;
}

.btn-primary{
  min-height:var(--touch-min); max-height:var(--touch-max); padding:0 24px;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  background:var(--accent); color:var(--accent-ink);
  font-weight:600; font-size:19px; letter-spacing:.005em;
  border-radius:var(--r); box-shadow:0 0 0 0 var(--accent-glow);
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.btn-primary:active{ transform:scale(.965); background:var(--accent-bright); box-shadow:0 0 0 12px var(--accent-glow); }
.btn-primary[disabled]{ background:var(--surface-3); color:var(--ink-3); box-shadow:none; }

.btn-ghost{
  min-height:var(--touch-min); max-height:var(--touch-max); padding:0 20px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:1.5px solid var(--line); border-radius:var(--r);
  color:var(--ink-2); font-weight:500; font-size:17px;
  background:var(--surface);
  transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.btn-ghost:active{ transform:scale(.965); background:var(--surface-2); border-color:var(--accent); color:var(--ink); }

.btn-icon{
  min-width:var(--touch-min); min-height:var(--touch-min); display:inline-flex; align-items:center;
  justify-content:center; gap:10px; border-radius:var(--r); color:var(--ink);
  transition:transform var(--t-fast), background var(--t-fast);
}
.btn-icon:active{ transform:scale(.93); background:var(--surface-2); }

.dot-sep{ width:5px; height:5px; border-radius:99px; background:var(--ink-3); display:inline-block; }

/* ===========================================================================
   1 · ATTRACT SCREEN
   =========================================================================== */
.screen--attract{ background:#000; overflow:hidden; }
.attract__stage{ position:absolute; inset:0; }
.attract__slide{
  position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center;
  transition:opacity 1400ms ease;
  will-change:transform,opacity;
}
.attract__slide.is-on{ opacity:1; animation:kenburns 11s ease-out forwards; }
@keyframes kenburns{
  from{ transform:scale(1.30) translate3d(1%,0,0); }
  to  { transform:scale(1.50) translate3d(-2%,-1.5%,0); }
}
.attract__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(94deg, rgba(4,5,8,.96) 0%, rgba(4,5,8,.86) 34%, rgba(4,5,8,.28) 62%, rgba(4,5,8,.62) 100%),
    linear-gradient(0deg, rgba(4,5,8,.92) 0%, rgba(4,5,8,0) 42%);
}
.attract__content{
  position:absolute; left:88px; top:50%; transform:translateY(-54%);
  max-width:52%;
}
.attract__brand{ margin-bottom:38px; }
.brandmark{ display:block; width:auto; height:52px; }
.attract__brand .brandmark{ height:64px; }
.attract__headline{
  font-family:var(--font-display); font-weight:600;
  font-size:76px; line-height:1.02; letter-spacing:-.03em;
}
.attract__line{ display:block; }
.attract__line--accent{ color:var(--accent-bright); }
.attract__sub{ margin-top:24px; font-size:21px; font-weight:400; color:var(--ink-2); max-width:30ch; }
.attract__ticker{
  margin-top:38px; display:flex; gap:12px; flex-wrap:wrap;
}
.attract__chip{
  font-size:14px; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  padding:9px 15px; border-radius:99px;
  border:1px solid var(--line); background:rgba(18,21,28,.72); color:var(--ink-2);
  backdrop-filter:blur(6px);
}
.attract__chip strong{ color:var(--accent-bright); }

.attract__foot{
  position:absolute; left:0; right:0; bottom:0; height:150px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 88px;
}
.attract__store{
  display:flex; align-items:center; gap:14px;
  font-size:19px; font-weight:500; color:var(--ink-2);
}
.dot-live{
  width:12px; height:12px; border-radius:99px; background:var(--ok);
  box-shadow:0 0 0 0 rgba(43,224,138,.6); animation:live 2.4s infinite;
}
@keyframes live{ 70%{ box-shadow:0 0 0 14px rgba(43,224,138,0);} 100%{ box-shadow:0 0 0 0 rgba(43,224,138,0);} }
.attract__cta{
  display:flex; align-items:center; gap:20px;
  font-family:var(--font-display); font-weight:600; font-size:26px; letter-spacing:-.01em;
  color:var(--ink);
  padding:16px 30px; border-radius:99px;
  border:2px solid var(--accent); background:rgba(217,25,129,.06);
  animation:breathe 2.6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ box-shadow:0 0 0 0 rgba(217,25,129,.34); transform:translateY(0); }
  50%    { box-shadow:0 0 0 22px rgba(217,25,129,0); transform:translateY(-4px); }
}
.attract__pulse{
  width:15px; height:15px; border-radius:99px; background:var(--accent);
  box-shadow:0 0 22px var(--accent);
}

/* ===========================================================================
   SHARED TOP BAR
   =========================================================================== */
.topbar{
  position:fixed; inset:0 0 auto 0; height:var(--topbar-h); z-index:40;
  display:flex; align-items:center; gap:20px; padding:0 26px;
  background:rgba(10,12,17,.94); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.topbar[hidden]{ display:none; }
.btn-back{ padding:0 16px; font-weight:500; font-size:17px; color:var(--ink-2); border:1.5px solid var(--line); }
.btn-back:active{ color:var(--ink); border-color:var(--accent); }
.topbar__brand{
  display:flex; align-items:center; min-height:var(--touch-min); padding:0 8px;
  transition:transform var(--t-fast);
}
.topbar__brand:active{ transform:scale(.94); }
.topbar__brand .brandmark{ height:34px; }

.tabs{ display:flex; gap:10px; margin-left:8px; }
.tab{
  min-height:var(--touch-min); max-height:var(--touch-max); padding:0 20px; border-radius:var(--r);
  font-weight:500; font-size:17px; color:var(--ink-2);
  border:1.5px solid transparent; background:var(--surface);
  transition:transform var(--t-fast), background var(--t-fast), color var(--t-fast);
  white-space:nowrap;
}
.tab:active{ transform:scale(.96); }
.tab.is-on{ background:var(--accent); color:var(--accent-ink); font-weight:600; }

.topbar__right{ margin-left:auto; display:flex; align-items:center; gap:18px; flex:0 0 auto; }
.topbar__store{ text-align:right; line-height:1.15; }
.topbar__store-label{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.topbar__store-name{ display:block; font-size:18px; font-weight:600; }
.btn-cart{
  position:relative; min-height:var(--touch-min); min-width:var(--touch-min); padding:0 18px;
  display:inline-flex; align-items:center; gap:10px;
  border-radius:var(--r); border:1.5px solid var(--line); background:var(--surface);
  font-weight:500; font-size:17px;
  transition:transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.btn-cart:active{ transform:scale(.95); background:var(--surface-2); }
.btn-cart.has-items{ border-color:var(--accent); color:var(--accent-bright); }
.badge{
  position:absolute; top:-9px; right:-9px; min-width:28px; height:28px; padding:0 8px;
  display:flex; align-items:center; justify-content:center;
  border-radius:99px; background:var(--accent); color:var(--accent-ink);
  font-weight:700; font-size:16px; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 3px var(--bg);
}
.badge.pop{ animation:pop 260ms cubic-bezier(.3,1.6,.4,1); }
@keyframes pop{ 0%{transform:scale(.4);} 60%{transform:scale(1.22);} 100%{transform:scale(1);} }

/* ===========================================================================
   2 · CATEGORY SELECT
   =========================================================================== */
.screen--category{ flex-direction:column; padding:38px 48px 48px; }
.cat__head{ margin-bottom:34px; }
.cat__grid{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; min-height:0; }
.cat-card{
  position:relative; overflow:hidden; text-align:left;
  border-radius:var(--r-lg); border:1.5px solid var(--line);
  background:var(--surface);
  transition:transform var(--t-fast), border-color var(--t-fast);
  display:flex; flex-direction:column;
}
.cat-card:active{ transform:scale(.982); border-color:var(--accent); }
.cat-card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cat-card__scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(6,8,11,.97) 12%, rgba(6,8,11,.55) 48%, rgba(6,8,11,.12) 100%);
}
.cat-card__body{ position:relative; margin-top:auto; padding:32px; }
.cat-card__name{ font-family:var(--font-display); font-weight:600; font-size:38px; letter-spacing:-.025em; line-height:1.02; }
.cat-card__blurb{ font-size:17px; color:var(--ink-2); margin-top:8px; }
.cat-card__count{
  margin-top:20px; display:inline-flex; align-items:center; gap:10px;
  font-size:18px; font-weight:600; color:var(--accent-bright);
  font-variant-numeric:tabular-nums;
}
.cat-card__go{
  position:absolute; right:28px; bottom:30px;
  width:60px; height:60px; border-radius:99px;
  display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink);
}

/* ===========================================================================
   3 · BROWSE GRID
   =========================================================================== */
.screen--browse{ display:none; }
.screen--browse.is-active{ display:flex; }

.filters{
  width:296px; flex:0 0 296px; height:100%;
  border-right:1px solid var(--line-soft); background:var(--bg-2);
  display:flex; flex-direction:column;
}
.filters__scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:26px 22px 10px; }
.filters__clear{ margin:12px 22px 22px; }
.filters__head, .filters__apply{ display:none; }
.fgroup{ margin-bottom:26px; }
.fgroup__title{
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:10px;
}
.fchips{ display:flex; flex-wrap:wrap; gap:9px; }
.fchip{
  min-height:var(--touch-min); padding:0 14px; border-radius:var(--r);
  border:1.5px solid var(--line); background:var(--surface);
  color:var(--ink-2); font-weight:500; font-size:16px;
  display:inline-flex; align-items:center; gap:9px;
  transition:transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.fchip:active{ transform:scale(.95); }
.fchip.is-on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.fchip__n{ font-size:13px; opacity:.7; font-variant-numeric:tabular-nums; }
.ftoggle{
  width:100%; min-height:68px; padding:0 18px; border-radius:var(--r);
  border:1.5px solid var(--line); background:var(--surface);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  text-align:left; transition:border-color var(--t-fast), background var(--t-fast);
}
.ftoggle:active{ transform:scale(.98); }
.ftoggle__label{ font-weight:600; font-size:17px; color:var(--ink); }
.ftoggle__sub{ display:block; font-size:14px; color:var(--ink-3); font-weight:500; }
.switch{
  width:60px; height:34px; border-radius:99px; background:var(--surface-3);
  position:relative; flex:0 0 auto; transition:background var(--t-fast);
}
.switch::after{
  content:''; position:absolute; top:4px; left:4px; width:26px; height:26px;
  border-radius:99px; background:var(--ink-2); transition:transform var(--t), background var(--t);
}
.ftoggle.is-on .switch{ background:var(--accent); }
.ftoggle.is-on .switch::after{ transform:translateX(26px); background:var(--accent-ink); }
.ftoggle.is-on{ border-color:var(--accent); }

.browse__main{ flex:1; min-width:0; display:flex; flex-direction:column; padding:22px 30px 26px; }
.browse__bar{ display:flex; align-items:center; gap:20px; margin-bottom:18px; }
.browse__title{ font-family:var(--font-display); font-weight:600; font-size:31px; letter-spacing:-.02em; }
.browse__count{ font-size:16px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.btn-filtertoggle{ display:none; }
.filter-pill{
  min-width:26px; height:26px; padding:0 7px; border-radius:99px;
  background:var(--accent); color:var(--accent-ink); font-size:14px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
.pager{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.pager__label{ font-size:17px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; min-width:66px; text-align:center; }
.btn-page{
  width:60px; height:60px; border-radius:var(--r);
  border:1.5px solid var(--line); background:var(--surface);
  display:grid; place-items:center; color:var(--ink);
  transition:transform var(--t-fast), background var(--t-fast), opacity var(--t-fast);
}
.btn-page:active{ transform:scale(.93); background:var(--surface-2); }
.btn-page[disabled]{ opacity:.3; }

.grid{
  flex:1; min-height:0;
  display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr);
  gap:22px;
}
.card{
  position:relative; overflow:hidden; text-align:left;
  border-radius:var(--r-lg); border:1.5px solid var(--line-soft);
  background:var(--surface); display:flex; flex-direction:column;
  transition:transform var(--t-fast), border-color var(--t-fast);
  animation:cardin 220ms cubic-bezier(.2,.7,.3,1) both;
}
@keyframes cardin{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.card:active{ transform:scale(.975); border-color:var(--accent); }
.card__media{ position:relative; flex:1; min-height:0; background:#0A0C10; overflow:hidden; }
.card__img{ width:100%; height:100%; object-fit:cover; }
.card__body{ padding:16px 18px 18px; border-top:1px solid var(--line-soft); }
.card__name{
  font-weight:600; font-size:20px; line-height:1.2; letter-spacing:-.005em;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  min-height:2.36em; overflow-wrap:break-word;
}
.card__meta{ margin-top:4px; font-size:14px; color:var(--ink-3); }
.card__row{ margin-top:12px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.card__price{ font-family:var(--font-display); font-weight:700; font-size:25px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.card__was{ font-size:14px; color:var(--ink-3); text-decoration:line-through; margin-left:8px; }
.dots{ display:flex; gap:7px; align-items:center; margin-top:12px; }
.dots__d{ width:22px; height:22px; border-radius:6px; background-size:cover; background-position:center; border:1.5px solid rgba(255,255,255,.14); }
.dots__more{ font-size:13px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums; }

.stockbadge{
  position:absolute; left:14px; top:14px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:99px;
  font-size:13px; font-weight:600; letter-spacing:.02em;
  backdrop-filter:blur(8px);
}
.stockbadge::before{ content:''; width:8px; height:8px; border-radius:99px; background:currentColor; }
.stockbadge--here{  color:var(--ok);   background:rgba(9,32,22,.86); border:1px solid rgba(43,224,138,.45); }
.stockbadge--online{ color:var(--accent-bright); background:rgba(28,7,18,.88); border:1px solid rgba(247,44,147,.45); }
.stockbadge--none{  color:#FF8A94; background:rgba(30,10,13,.88); border:1px solid rgba(255,95,109,.45); }
.saleflag{
  position:absolute; right:14px; top:14px; z-index:2;
  padding:6px 11px; border-radius:99px; font-size:13px; font-weight:600;
  background:rgba(255,95,109,.92); color:#2A0308; letter-spacing:.04em;
}

.empty{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; color:var(--ink-3); text-align:center; padding:40px;
}
.empty h3{ font-family:var(--font-display); font-weight:600; font-size:28px; color:var(--ink); }
.empty p{ font-size:17px; max-width:44ch; }
.empty .btn-primary{ margin-top:12px; }

/* ===========================================================================
   4 · PRODUCT DETAIL
   =========================================================================== */
.screen--detail{ display:none; }
.screen--detail.is-active{ display:grid; }
.screen--detail{
  grid-template-columns:minmax(0,1fr) 660px;
  grid-template-rows:minmax(0,1fr) var(--buybar-h);
  grid-template-areas:"media panel" "buybar panel";
}
.detail__media{
  grid-area:media; min-width:0; min-height:0;
  display:flex; flex-direction:column; padding:26px 26px 0 30px; gap:18px;
}
.detail__imgwrap{
  position:relative; flex:1; min-height:0; border-radius:var(--r-lg);
  overflow:hidden; background:#0A0C10; border:1px solid var(--line-soft);
  transition:transform var(--t-fast);
}
.detail__imgwrap:active{ transform:scale(.99); }
.detail__img{ width:100%; height:100%; object-fit:cover; transition:opacity var(--t); }
.detail__img.is-swapping{ opacity:0; }
.btn-zoom{
  position:absolute; right:18px; bottom:18px;
  min-height:var(--touch-min); padding:0 18px; display:inline-flex; align-items:center; gap:9px;
  border-radius:99px; background:rgba(10,12,17,.82); border:1px solid var(--line);
  color:var(--ink); font-weight:500; font-size:16px; backdrop-filter:blur(8px);
}
.btn-zoom:active{ transform:scale(.94); background:var(--surface-2); }
.detail__thumbs{ display:flex; gap:12px; height:100px; overflow-x:auto; padding-bottom:8px; }
.thumb{
  flex:0 0 128px; height:84px; border-radius:var(--r); overflow:hidden;
  border:2.5px solid transparent; background:#0A0C10; position:relative;
  transition:transform var(--t-fast), border-color var(--t-fast);
}
.thumb:active{ transform:scale(.95); }
.thumb.is-on{ border-color:var(--accent); }
.thumb img{ width:100%; height:100%; object-fit:cover; }

.detail__panel{
  grid-area:panel; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  background:var(--bg-2); border-left:1px solid var(--line-soft);
}
.detail__panelinner{ padding:26px 32px 34px; }
.detail__panelpad{ height:20px; }
.detail__eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:14px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-bright);
}
.detail__name{
  font-family:var(--font-display); font-weight:600; font-size:40px; line-height:1.06;
  letter-spacing:-.03em; margin-top:10px; overflow-wrap:break-word; hyphens:none;
}
.detail__pricerow{ margin-top:16px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

.section{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft); }
.section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:16px; }
.section__head h3{ font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.section__meta{ font-size:14px; color:var(--ink-3); font-variant-numeric:tabular-nums; }

.swatches{ display:flex; flex-wrap:wrap; gap:10px; }
.swatch{
  width:76px; height:76px; border-radius:var(--r); overflow:hidden;
  border:2.5px solid var(--line); background:#0A0C10; position:relative;
  transition:transform var(--t-fast), border-color var(--t-fast);
}
.swatch:active{ transform:scale(.93); }
.swatch img{ width:100%; height:100%; object-fit:cover; }
.swatch.is-on{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-glow); }
.swatch.is-on::after{
  content:''; position:absolute; right:4px; bottom:4px; width:20px; height:20px;
  border-radius:99px; background:var(--accent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5L19 7'/></svg>");
  background-size:13px; background-position:center; background-repeat:no-repeat;
}
.swatch__out{
  position:absolute; inset:0; background:rgba(7,8,11,.55);
}
.swatch-name{ margin-top:12px; font-size:19px; font-weight:600; }

/* ── stock panel ── */
.section--stock{ }
.stock-hero{
  border-radius:var(--r-lg); padding:18px 20px; border:1.5px solid;
  display:flex; align-items:center; gap:16px;
}
.stock-hero__icon{ width:44px; height:44px; flex:0 0 44px; border-radius:99px; display:grid; place-items:center; }
.stock-hero__txt{ min-width:0; display:block; }
.stock-hero__big{ display:block;
  font-family:var(--font-display); font-weight:600; font-size:26px; line-height:1.12; letter-spacing:-.02em;
  overflow-wrap:break-word;
}
.stock-hero__sub{ display:block; font-size:16px; font-weight:400; margin-top:5px; color:var(--ink-2); }
.stock-hero--yes{ background:var(--ok-dim); border-color:rgba(43,224,138,.45); }
.stock-hero--yes .stock-hero__big{ color:var(--ok); }
.stock-hero--yes .stock-hero__icon{ background:rgba(43,224,138,.18); color:var(--ok); }
.stock-hero--low{ background:var(--warn-dim); border-color:rgba(255,180,58,.45); }
.stock-hero--low .stock-hero__big{ color:var(--warn); }
.stock-hero--low .stock-hero__icon{ background:rgba(255,180,58,.18); color:var(--warn); }
.stock-hero--no{ background:var(--off-dim); border-color:var(--line); }
.stock-hero--no .stock-hero__big{ color:var(--ink); }
.stock-hero--no .stock-hero__icon{ background:var(--surface-2); color:var(--ink-3); }

.stock-hero--order{ background:var(--accent-soft); border-color:rgba(247,44,147,.42); }
.stock-hero--order .stock-hero__big{ color:var(--accent-bright); }
.stock-hero--order .stock-hero__icon{ background:rgba(217,25,129,.20); color:var(--accent-bright); }

/* Shop Online offer — sits directly under the stock hero when the colourway
   is not on the shelf at this store. */
.stock-online{
  margin-top:14px; padding:16px 18px; border-radius:var(--r);
  border:1px solid rgba(247,44,147,.34); background:rgba(217,25,129,.07);
  display:flex; flex-direction:column; gap:8px;
}
.stock-online__tag{
  font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent); align-self:flex-start;
  padding:6px 12px; border-radius:99px;
}
.stock-online__txt{ font-size:17px; line-height:1.45; color:var(--ink-2); }

/* Fixed mousepad spec line — no size/finish choice exists, so it is stated
   once as a fact rather than laid out as a table of options. */
.specfixed{ display:flex; flex-direction:column; gap:7px; padding-bottom:14px; }
.specfixed__line{
  font-family:var(--font-display); font-weight:600; font-size:20px;
  letter-spacing:-.01em; color:var(--ink); overflow-wrap:break-word;
}
.specfixed__note{ font-size:15px; line-height:1.45; color:var(--ink-3); }


/* .stock-others / .srow styles removed with the other-store grid (revision 01).
   Only THIS store's exact quantity and a warehouse availability flag are shown. */

.spectable{ width:100%; border-collapse:collapse; }
.spectable td{ padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:17px; vertical-align:top; }
.spectable td:first-child{ color:var(--ink-3); width:38%; }
.spectable td:last-child{ font-weight:500; overflow-wrap:break-word; }
.tagrow{ margin-top:16px; display:flex; flex-wrap:wrap; gap:9px; }
.tag{
  font-size:14px; font-weight:500; padding:7px 13px; border-radius:99px;
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line-soft);
}

.reco{ display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; }
.reco__card{
  flex:0 0 164px; text-align:left; border-radius:var(--r); overflow:hidden;
  border:1.5px solid var(--line-soft); background:var(--surface);
  transition:transform var(--t-fast), border-color var(--t-fast);
}
.reco__card:active{ transform:scale(.96); border-color:var(--accent); }
.reco__card img{ width:100%; height:100px; object-fit:cover; }
.reco__body{ padding:12px 14px 14px; }
.reco__name{
  font-size:15px; font-weight:500; line-height:1.24;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:2.4em;
}
.reco__price{ margin-top:6px; font-weight:600; font-size:18px; color:var(--accent-bright); font-variant-numeric:tabular-nums; }

.buybar{
  grid-area:buybar; display:flex; align-items:center; gap:18px;
  padding:0 30px; border-top:1px solid var(--line-soft); background:var(--bg-2);
}
.qty{ display:flex; align-items:center; gap:6px; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r); padding:6px; }
.qty__btn{
  width:60px; height:60px; border-radius:var(--r-sm); background:var(--surface-2);
  font-size:28px; font-weight:500; line-height:1; color:var(--ink);
  display:grid; place-items:center;
  transition:transform var(--t-fast), background var(--t-fast);
}
.qty__btn:active{ transform:scale(.92); background:var(--accent); color:var(--accent-ink); }
.qty__btn[disabled]{ opacity:.32; }
.qty__max{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.qty__val{
  min-width:64px; text-align:center; font-family:var(--font-display);
  font-weight:600; font-size:28px; font-variant-numeric:tabular-nums;
}
.btn-add{ margin-left:auto; flex:0 1 auto; min-width:min(420px,46%); min-height:64px; max-height:72px;
  font-size:19px; justify-content:space-between; gap:20px; padding:0 24px; text-align:left; }
.btn-add #btnAddLabel{ overflow-wrap:break-word; }
.btn-add__price{ font-variant-numeric:tabular-nums; }

/* ===========================================================================
   5 · CART
   =========================================================================== */
.screen--cart{ display:none; }
.screen--cart.is-active{ display:grid; }
.screen--cart{ grid-template-columns:minmax(0,1fr) 560px; }
.cart__left{ padding:30px 30px 26px 40px; display:flex; flex-direction:column; min-height:0; }
.cart__lines{ margin-top:26px; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-right:8px; display:flex; flex-direction:column; gap:16px; }
.line{
  display:flex; align-items:center; gap:18px; padding:14px 16px;
  border-radius:var(--r-lg); border:1px solid var(--line-soft); background:var(--surface);
  animation:cardin 200ms ease both;
}
/* Mixed baskets are grouped so a COLLECT NOW item is never mistaken for a
   parcel that is still sitting in the Montague Gardens warehouse. */
.cgroup{ display:flex; flex-direction:column; gap:14px; }
.cgroup + .cgroup{ margin-top:26px; }
.cgroup__head{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:0 2px 10px; border-bottom:1px solid var(--line-soft);
}
.cgroup__title{
  font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-.01em;
}
.cgroup--collect .cgroup__title{ color:var(--ok); }
.cgroup--online  .cgroup__title{ color:var(--accent-bright); }
.cgroup__sub{ font-size:14px; color:var(--ink-3); }

.line__tag{
  display:inline-block; margin-bottom:7px;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 9px; border-radius:99px;
}
.line__tag--here{ color:var(--ok); background:rgba(43,224,138,.13); border:1px solid rgba(43,224,138,.34); }
.line__tag--online{ color:var(--accent-bright); background:rgba(217,25,129,.13); border:1px solid rgba(247,44,147,.38); }
.line--online{ border-color:rgba(247,44,147,.28); }
.line__fulfil{ margin-top:6px; font-size:14px; color:var(--ink-3); }
.line__fulfil--online{ color:var(--accent-bright); }

.line__img{ width:116px; height:86px; flex:0 0 116px; border-radius:var(--r); object-fit:cover; background:#0A0C10; }
.line__info{ flex:1; min-width:0; }
.line__name{ font-size:20px; font-weight:600; line-height:1.15; overflow-wrap:break-word; }
.line__cw{ margin-top:4px; font-size:16px; color:var(--ink-2); }
.line__bin{ margin-top:6px; font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.line__qty{ display:flex; align-items:center; gap:4px; background:var(--surface-2); border-radius:var(--r); padding:5px; }
.line__qtybtn{ width:56px; height:56px; border-radius:var(--r-sm); font-size:26px; font-weight:500; display:grid; place-items:center; background:var(--surface-3); }
.line__qtybtn:active{ transform:scale(.92); background:var(--accent); color:var(--accent-ink); }
.line__qtyval{ min-width:46px; text-align:center; font-weight:600; font-size:21px; font-variant-numeric:tabular-nums; }
.line__money{ text-align:right; min-width:124px; }
.line__each{ font-size:14px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.line__sub{ font-family:var(--font-display); font-weight:700; font-size:23px; font-variant-numeric:tabular-nums; }
.line__del{
  width:56px; height:56px; border-radius:var(--r); display:grid; place-items:center;
  border:1.5px solid var(--line); color:var(--ink-3);
  transition:transform var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.line__del:active{ transform:scale(.92); color:var(--danger); border-color:var(--danger); }

.cart__side{
  border-left:1px solid var(--line-soft); background:var(--bg-2);
  padding:30px 32px; display:flex; flex-direction:column; gap:18px;
  overflow-y:auto; overscroll-behavior:contain;
}
.summary{ border:1px solid var(--line-soft); border-radius:var(--r-lg); background:var(--surface); padding:22px 24px; }
.summary__title{ font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:18px; }
.summary__row{ display:flex; justify-content:space-between; gap:14px; font-size:17px; color:var(--ink-2); padding:8px 0; font-variant-numeric:tabular-nums; }
.summary__total{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  margin-top:14px; padding-top:18px; border-top:1px solid var(--line);
  font-family:var(--font-display); font-weight:700; font-size:31px; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.summary__note{ margin-top:10px; font-size:14px; color:var(--ink-3); }
.mixnote{
  margin-top:14px; padding:11px 13px; border-radius:var(--r-sm);
  border:1px solid rgba(247,44,147,.30); background:rgba(217,25,129,.08);
  font-size:15px; line-height:1.4; color:var(--accent-bright);
}

.field,
.phone{ border:1px solid var(--line-soft); border-radius:var(--r-lg); background:var(--surface); padding:20px 22px; }
.field[hidden]{ display:none; }
.field__head h3,
.phone__head h3{ font-size:18px; font-weight:600; display:flex; align-items:center; gap:10px; }
.field__head p{ margin-top:6px; font-size:15px; color:var(--ink-3); line-height:1.4; }
.req{
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent); padding:4px 9px; border-radius:99px;
}
.field__display{
  margin-top:14px; width:100%; min-height:64px; padding:0 18px;
  display:flex; align-items:center; gap:14px;
  border-radius:var(--r); border:1.5px solid var(--line); background:var(--surface-2);
  font-family:var(--font-display); font-weight:600; font-size:22px;
  text-align:left; transition:transform var(--t-fast), border-color var(--t-fast);
}
.field__display:active{ transform:scale(.98); border-color:var(--accent); }
.field__value{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.field__value.is-empty{ color:var(--ink-3); font-size:18px; font-family:var(--font); font-weight:500; }
.field__caret{ width:2px; height:26px; background:var(--accent); opacity:0; }

/* Delivery choice. Collect-at-store is first and pre-selected: a return visit
   is worth more to the branch than a courier drop. */
.delivery{ margin-top:14px; display:flex; flex-direction:column; gap:12px; }
.dcard{
  position:relative; text-align:left; padding:15px 16px 15px 52px;
  min-height:var(--touch-min);
  border-radius:var(--r); border:1.5px solid var(--line); background:var(--surface-2);
  display:flex; flex-direction:column; gap:5px;
  transition:transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.dcard:active{ transform:scale(.985); }
.dcard__tick{
  position:absolute; left:16px; top:17px; width:24px; height:24px; border-radius:99px;
  border:2px solid var(--line); transition:border-color var(--t-fast), background var(--t-fast);
}
.dcard__title{ font-size:18px; font-weight:600; line-height:1.2; }
.dcard__sub{ font-size:14px; line-height:1.4; color:var(--ink-3); overflow-wrap:break-word; }
.dcard.is-on{ border-color:var(--accent); background:rgba(217,25,129,.08); }
.dcard.is-on .dcard__tick{ border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 4px var(--surface-2); }
.dcard.is-on .dcard__title{ color:var(--accent-bright); }
.opt{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line); padding:4px 9px; border-radius:99px; }
.phone__head p{ margin-top:6px; font-size:15px; color:var(--ink-3); line-height:1.4; }
.phone__display{
  margin-top:14px; width:100%; min-height:64px; padding:0 18px;
  display:flex; align-items:center; gap:14px;
  border-radius:var(--r); border:1.5px solid var(--line); background:var(--surface-2);
  font-family:var(--font-display); font-weight:600; font-size:24px; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; text-align:left;
  transition:transform var(--t-fast), border-color var(--t-fast);
}
.phone__display:active{ transform:scale(.98); border-color:var(--accent); }
.phone__prefix{ color:var(--ink-3); }
.phone__digits{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.phone__digits.is-empty{ color:var(--ink-3); font-size:18px; font-family:var(--font); font-weight:500; }
.phone__caret{ width:2px; height:26px; background:var(--accent); animation:blink 1.1s steps(2) infinite; opacity:0; }
.phone.is-editing .phone__caret{ opacity:1; }
@keyframes blink{ 50%{ opacity:0; } }

.btn-confirm{ min-height:68px; max-height:72px; font-size:21px; margin-top:auto; }
.btn-keepshopping{ width:100%; }

/* ===========================================================================
   6 · CONFIRMATION
   =========================================================================== */
.screen--confirm{ display:none; }
.screen--confirm.is-active{ display:flex; }
.screen--confirm{ align-items:flex-start; justify-content:center; overflow-y:auto; }
.confirm__inner{
  width:min(880px, 92%); padding:40px 0 60px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.tick{ color:var(--ok); }
.tick__ring{ stroke-dasharray:214; stroke-dashoffset:214; animation:draw 520ms cubic-bezier(.2,.7,.3,1) forwards; }
.tick__path{ stroke-dasharray:56; stroke-dashoffset:56; animation:draw 320ms cubic-bezier(.2,.7,.3,1) 380ms forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.confirm__title{ margin-top:14px; font-family:var(--font-display); font-weight:600; font-size:42px; letter-spacing:-.03em; }
.confirm__sub{ margin-top:8px; font-size:19px; color:var(--ink-2); max-width:46ch; }

.slip{
  margin-top:24px; width:100%; text-align:left;
  background:#FFFFFF; color:#0B0D11; border-radius:var(--r-lg);
  padding:28px 30px 26px; box-shadow:0 22px 52px rgba(0,0,0,.5);
}
.slip__brandline{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.slip__brandmark{ height:26px; width:auto; display:block; }
.slip__store{ font-size:16px; font-weight:600; color:#4A5260; }
.slip__ordernum{
  margin-top:16px; font-family:var(--font-display); font-weight:700;
  font-size:38px; letter-spacing:-.01em; font-variant-numeric:tabular-nums;
  overflow-wrap:break-word;
}
.barcode{ margin-top:14px; height:70px; display:flex; align-items:stretch; gap:0; }
.barcode i{ display:block; background:#0B0D11; }
.slip__meta{ margin-top:10px; display:flex; justify-content:space-between; gap:16px; font-size:15px; color:#4A5260; font-variant-numeric:tabular-nums; }
.slip__items{ margin-top:22px; border-top:2px solid #0B0D11; padding-top:14px; }
.slipitem{ display:flex; gap:16px; padding:13px 0; border-bottom:1px dashed #C7CDD6; }
.slipitem__q{ font-weight:700; font-variant-numeric:tabular-nums; min-width:3ch; font-size:17px; }
.slipitem__t{ flex:1; min-width:0; display:block; }
.slipitem__n{ display:block; font-weight:600; font-size:17px; line-height:1.2; overflow-wrap:break-word; }
.slipitem__c{ display:block; font-size:15px; color:#4A5260; margin-top:3px; }
.slipitem__bin{
  margin-top:5px; display:inline-block; font-size:13px; font-weight:700; letter-spacing:.08em;
  background:#0B0D11; color:#fff; padding:4px 9px; border-radius:4px;
}
/* Two-section slip: what staff fetch now vs what the warehouse ships. */
.sliphead{
  margin:6px 0 2px; padding:9px 0 7px;
  font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  text-align:center; color:#0B0D11;
}
.sliphead--ship{ margin-top:20px; border-top:2px solid #0B0D11; }
.slipitem__note{ display:block; margin-top:5px; font-size:14px; font-weight:600; color:#4A5260; }
.slipmeta{ margin-top:12px; display:flex; flex-direction:column; gap:5px; }
.slipmeta div{ display:flex; justify-content:space-between; gap:16px; font-size:15px; }
.slipmeta span:first-child{ color:#4A5260; }
.slipmeta span:last-child{ font-weight:600; text-align:right; }
.slipstaff{
  margin-top:12px; padding:10px 12px; border:1.5px dashed #0B0D11; border-radius:5px;
  font-size:14px; line-height:1.4; font-weight:600;
}
.slipitem__p{ font-weight:700; font-size:17px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.slip__totals{ margin-top:16px; }
.slip__row{ display:flex; justify-content:space-between; gap:16px; font-size:16px; padding:5px 0; color:#4A5260; font-variant-numeric:tabular-nums; }
.slip__row--total{ margin-top:8px; padding-top:12px; border-top:2px solid #0B0D11; color:#0B0D11; font-weight:700; font-size:22px; }
.slip__foot{ margin-top:14px; font-size:13px; color:#6B7382; letter-spacing:.02em; }

.confirm__actions{ margin-top:28px; display:flex; gap:16px; align-items:center; }
.countdown{
  min-width:36px; height:30px; padding:0 9px; margin-left:8px; border-radius:99px;
  background:var(--surface-2); color:var(--ink-2);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-variant-numeric:tabular-nums; font-size:15px;
}

/* --- on-screen alphabet keyboard (collect name for online orders) --------- */
.alpha__card{
  width:min(880px,94vw); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px 24px 24px;
  animation:rise 200ms cubic-bezier(.2,.7,.3,1) both;
}
.alpha__value{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--font-display); font-weight:600; letter-spacing:.01em;
}
.alpha__keys{ margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.akrow{ display:flex; gap:9px; justify-content:center; }
.akrow--1{ padding:0 4%; }
.akrow--2{ padding:0 2%; }
.akey{
  flex:1 1 0; min-width:0; height:var(--touch-min); border-radius:var(--r-sm);
  background:var(--surface-3); border:1px solid var(--line-soft);
  font-family:var(--font-display); font-weight:600; font-size:22px;
  display:grid; place-items:center;
  transition:transform var(--t-fast), background var(--t-fast);
}
.akey:active{ transform:scale(.94); background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.akey--fn{ flex:0 0 116px; font-size:14px; font-weight:600; letter-spacing:.08em; color:var(--ink-2); background:var(--surface-2); }
.akey--del{ flex:0 0 92px; }
.akey--space{ flex:1 1 auto; font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.alpha__save{ margin-top:18px; width:100%; }

/* ===========================================================================
   OVERLAYS
   =========================================================================== */
.overlay{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,5,8,.86); backdrop-filter:blur(10px);
  animation:fade 160ms ease both;
}
.overlay[hidden]{ display:none; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }

.keypad__card{
  width:min(560px,92vw); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px 26px 26px;
  animation:rise 200ms cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(24px) scale(.98);} to{ opacity:1; transform:none;} }
.keypad__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.keypad__head h3{ font-family:var(--font-display); font-weight:600; font-size:25px; letter-spacing:-.02em; }
.keypad__readout{
  margin-top:16px; min-height:72px; padding:0 20px; border-radius:var(--r);
  background:var(--bg); border:1.5px solid var(--accent);
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-display); font-weight:600; font-size:32px;
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
}
.keypad__prefix{ color:var(--ink-3); }
.keypad__value{ flex:1; min-width:0; overflow:hidden; white-space:nowrap; }
.keypad__cursor{ width:2px; height:34px; background:var(--accent); animation:blink 1.1s steps(2) infinite; }
.keypad__hint{ margin-top:10px; font-size:15px; color:var(--ink-3); min-height:1.4em; }
.keypad__hint.is-error{ color:var(--danger); }
.keypad__keys{ margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.key{
  height:64px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--line);
  font-family:var(--font-display); font-weight:500; font-size:26px;
  display:grid; place-items:center; font-variant-numeric:tabular-nums;
  transition:transform 90ms ease, background 90ms ease;
}
.key:active{ transform:scale(.93); background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.key--fn{ font-size:15px; font-family:var(--font); font-weight:600; color:var(--ink-2); }
.keypad__save{ margin-top:16px; width:100%; }
.keypad__skip{ margin-top:10px; width:100%; }

.overlay--zoom{ background:rgba(3,4,6,.96); }
.zoom__img{ width:auto; height:74vh; max-width:92vw; object-fit:contain; border-radius:var(--r); }
.zoom__close{ position:absolute; top:28px; right:28px; background:var(--surface); border:1px solid var(--line); }
.zoom__caption{ position:absolute; bottom:44px; font-size:19px; font-weight:500; color:var(--ink-2); }

.idle__card{
  width:min(560px,90vw); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:36px; text-align:center;
  animation:rise 200ms cubic-bezier(.2,.7,.3,1) both;
}
.idle__card h3{ font-family:var(--font-display); font-weight:600; font-size:32px; letter-spacing:-.02em; }
.idle__card p{ margin-top:10px; font-size:18px; color:var(--ink-2); }
.idle__card .btn-primary{ margin-top:26px; width:100%; }
#idleCount{ color:var(--accent-bright); font-weight:700; font-variant-numeric:tabular-nums; }

.toast{
  position:fixed; left:50%; bottom:calc(var(--buybar-h) + 34px); transform:translateX(-50%);
  z-index:200; display:flex; align-items:center; gap:14px;
  padding:14px 24px; border-radius:99px;
  background:var(--ok); color:#052A18; font-weight:600; font-size:18px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  animation:toastin 220ms cubic-bezier(.2,.7,.3,1) both;
}
.toast[hidden]{ display:none; }
@keyframes toastin{ from{ opacity:0; transform:translate(-50%,22px);} to{ opacity:1; transform:translate(-50%,0);} }

/* ===========================================================================
   PORTRAIT — 1080 x 1920 (vertically mounted ITS screens)
   =========================================================================== */
@media (orientation:portrait){
  :root{ --topbar-h:96px; --buybar-h:118px; }
  html,body{ font-size:19px; }

  /* attract */
  .attract__content{ left:64px; right:64px; max-width:none; top:auto; bottom:300px; transform:none; }
  .attract__headline{ font-size:84px; }
  .attract__sub{ font-size:24px; max-width:36ch; }
  .attract__brand .brandmark{ height:74px; }
  .attract__scrim{
    background:
      linear-gradient(0deg, rgba(4,5,8,.97) 22%, rgba(4,5,8,.42) 52%, rgba(4,5,8,.06) 100%),
      linear-gradient(180deg, rgba(4,5,8,.45) 0%, rgba(4,5,8,0) 26%);
  }
  .attract__foot{ height:190px; padding:0 64px; flex-direction:column; justify-content:center; gap:26px; align-items:flex-start; }
  .attract__cta{ align-self:stretch; justify-content:center; font-size:28px; }

  /* topbar: store block drops the label, tabs stay one row */
  .topbar{ padding:0 20px; gap:14px; }
  body.has-tabs .topbar__store{ display:none; }
  body.has-tabs .topbar__brand{ display:none; }
  .topbar__store-label{ display:none; }
  .topbar__store-name{ white-space:nowrap; font-size:17px; }
  .topbar__right{ flex:0 0 auto; gap:12px; }
  .tab{ padding:0 18px; font-size:17px; }
  .btn-back span{ display:none; }
  .btn-back{ padding:0 18px; }

  /* category: 3 stacked rows */
  .screen--category{ padding:34px 40px 40px; }
  .cat__grid{ grid-template-columns:1fr; grid-template-rows:repeat(3,1fr); gap:24px; }
  .cat-card__name{ font-size:42px; }
  .cat-card__body{ padding:30px; }

  /* browse: filters become a slide-over drawer */
  .filters{
    position:fixed; z-index:80; left:0; top:var(--topbar-h); bottom:0; height:auto; width:min(560px,88vw);
    transform:translateX(-102%); transition:transform var(--t);
    box-shadow:34px 0 70px rgba(0,0,0,.6); flex:0 0 auto;
  }
  body.filters-open .filters{ transform:none; }
  body.filters-open::after{
    content:''; position:fixed; inset:var(--topbar-h) 0 0 0; z-index:45;
    background:rgba(4,5,8,.7); pointer-events:none;
  }
  .btn-filtertoggle{ display:inline-flex; min-height:var(--touch-min); }
  .filters__head{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 22px 4px;
  }
  .filters__headtitle{ font-family:var(--font-display); font-size:26px; font-weight:600; }
  .filters__close{ background:var(--surface); border:1px solid var(--line); }
  .filters__apply{ display:block; margin:0 22px 26px; width:calc(100% - 44px); flex:0 0 auto; }
  .filters__clear{ margin:0 22px 14px; flex:0 0 auto; }
  .filters__head{ flex:0 0 auto; }
  .browse__main{ padding:20px 26px 24px; }
  .browse__title{ font-size:28px; }
  .browse__count{ display:none; }
  .grid{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr); gap:20px; }
  .card__name{ font-size:21px; }
  .card__price{ font-size:26px; }

  /* detail: media on top, panel below, buybar pinned */
  .screen--detail{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,44%) minmax(0,1fr) var(--buybar-h);
    grid-template-areas:"media" "panel" "buybar";
  }
  .detail__media{ padding:22px 26px 0; }
  .detail__thumbs{ height:96px; }
  .thumb{ flex:0 0 124px; height:80px; }
  .detail__panel{ border-left:0; border-top:1px solid var(--line-soft); }
  .detail__panelinner{ padding:22px 26px 30px; }
  .detail__name{ font-size:38px; }
  .buybar{ padding:0 26px; }

  /* delivery cards & alphabet keyboard get a bit more room in portrait */
  .dcard__title{ font-size:19px; }
  .alpha__card{ width:min(1000px,94vw); }
  .akey{ height:64px; font-size:24px; }
  .akey--fn{ flex:0 0 130px; }
  .akey--del{ flex:0 0 104px; }

  /* cart: stack */
  .screen--cart{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; overflow-y:auto; }
  .cart__left{ padding:26px 28px 18px; }
  .cart__side{ border-left:0; border-top:1px solid var(--line-soft); padding:24px 28px 28px; }
  .btn-confirm{ margin-top:8px; }
  .line__img{ width:104px; height:78px; flex:0 0 104px; }

  .confirm__inner{ width:min(860px,92%); margin:auto 0; }
  .reco__name{ -webkit-line-clamp:2; }
  .toast{ bottom:calc(var(--buybar-h) + 40px); }
}

/* Narrow-but-landscape safety (e.g. 1366x768 shop units) */
@media (orientation:landscape) and (max-width:1500px){
  .screen--detail{ grid-template-columns:minmax(0,1fr) 560px; }
  .screen--cart{ grid-template-columns:minmax(0,1fr) 500px; }
  .grid{ grid-template-columns:repeat(3,1fr); }
  .detail__name{ font-size:34px; }
}

/* On screen only — the print sheet lives in receipt.css */
@media print{ body > *{ display:none !important; } }

/* ---------------------------------------------- cart line fulfilment notes */
.line__fulfil{
  margin-top:6px; font-size:15px; font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
}
.line__fulfil::before{ content:''; width:9px; height:9px; border-radius:99px; background:currentColor; }
.line__fulfil--here{ color:var(--ok); }
.line__fulfil--online{ color:var(--accent-bright); }