/* IB Store — shared design tokens + components (every customer page).
   Mobile-first, centred in a 640px column on wider screens. */
:root{
  --ink:#121116;
  --bg:#F5F4F7;
  --surface:#FFFFFF;
  --line:#E6E4EA;
  --muted:#6E6B76;
  --soft:#ECEBEF;
  --seg-bg:#EAE8EE;
  --disabled-bg:#E3E1E7;
  --radio-off:#CFCCD6;
  --toggle-off:#D9D7DE;
  --dashed:#BDBAC4;
  --dashed-strong:#9A97A3;
  --ok-bg:oklch(0.95 0.045 150);--ok-text:oklch(0.38 0.1 150);--ok-dot:oklch(0.62 0.16 150);
  --warn-bg:oklch(0.95 0.06 85);--warn-text:oklch(0.42 0.09 70);--warn-dot:oklch(0.72 0.15 70);
  --bad-bg:oklch(0.95 0.03 25);--bad-text:oklch(0.48 0.17 25);--bad-dot:oklch(0.6 0.2 25);
  --wa:#1fae60;
  --font:'Anton','SA Hazm',Tahoma,sans-serif;
  --page-x:20px;
  --col:640px;
  --tabbar-h:86px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:only light;background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
[hidden]{display:none!important}
.ltr{direction:ltr;unicode-bidi:isolate}
.num{font-family:var(--font);font-variant-numeric:tabular-nums}
.iqd{font-size:11px;color:var(--muted);margin-inline-start:3px}

/* page column */
.ib-page{width:100%;max-width:var(--col);margin:0 auto;padding:0 var(--page-x)}
body.has-tabbar{padding-bottom:calc(var(--tabbar-h) + 12px)}
body.has-cta{padding-bottom:calc(120px + var(--safe-b))}

/* header rows */
.ib-hdr{max-width:var(--col);margin:0 auto;padding:max(6px,env(safe-area-inset-top)) var(--page-x) 0;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.ib-logo{width:44px;height:44px;border-radius:14px;object-fit:cover;background:var(--ink);display:block;flex:none}
.ib-title{margin:0;font-size:27px;font-weight:700;line-height:1.2}
.ib-bar{max-width:var(--col);margin:0 auto;padding:max(6px,env(safe-area-inset-top)) var(--page-x) 0;display:flex;align-items:center;gap:12px;min-height:56px}
.ib-bar-title{flex:1;min-width:0;display:flex;flex-direction:column}
.ib-bar-title h1{margin:0;font-size:22px;font-weight:700;line-height:1.25}
.ib-bar-title small{font-size:12px;color:var(--muted)}
.ib-bar-end{font-size:15px;color:var(--muted)}

/* round icon button */
.ib-round{width:44px;height:44px;flex:none;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;position:relative;color:var(--ink);padding:0;text-decoration:none}
.ib-round svg{width:20px;height:20px}
.ib-round:active{transform:scale(.96)}
.ib-badge{position:absolute;top:-3px;left:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--ink);color:#fff;border:2px solid var(--bg);font-size:10px;line-height:1;display:flex;align-items:center;justify-content:center}
.ib-badge:empty,.ib-badge[data-n="0"]{display:none}
.ib-badge.bump{animation:ibBump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes ibBump{0%{transform:scale(.4)}60%{transform:scale(1.35)}100%{transform:scale(1)}}

/* buttons */
.ib-btn{height:56px;border:0;border-radius:18px;background:var(--ink);color:#fff;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 22px;text-decoration:none;width:100%;transition:transform .12s,background .15s}
.ib-btn:active{transform:scale(.985)}
.ib-btn:disabled,.ib-btn[aria-disabled="true"]{background:var(--disabled-bg);color:var(--muted);cursor:not-allowed;transform:none}
.ib-btn svg{width:20px;height:20px}
.ib-btn.outline{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.ib-btn.sm{height:44px;border-radius:14px;font-size:14px;width:auto}
.ib-pill-btn{height:36px;border-radius:99px;padding:0 16px;border:0;background:var(--ink);color:#fff;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.ib-pill-btn.outline{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.ib-link{background:none;border:0;padding:0;font-size:12px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* bottom CTA bar */
.ib-cta{position:fixed;left:0;right:0;bottom:0;z-index:300;background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:14px var(--page-x) max(30px,var(--safe-b));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ib-cta-inner{max-width:calc(var(--col) - 2 * var(--page-x));margin:0 auto;display:flex;align-items:center;gap:14px}
.ib-cta .ib-btn{flex:1}

/* bottom tab bar */
.ib-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:300;height:calc(var(--tabbar-h) - 20px + max(20px,var(--safe-b)));background:rgba(255,255,255,.96);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ib-tabbar-inner{max-width:var(--col);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);padding-top:10px}
.ib-tab{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);font-size:11px;text-decoration:none;position:relative;background:none;border:0;padding:0}
.ib-tab svg{width:24px;height:24px}
.ib-tab.active{color:var(--ink);font-weight:700}
.ib-tab.active svg{stroke-width:2.4}
.ib-tab .ib-badge{top:-4px;left:calc(50% - 22px);min-width:18px;height:18px;border-color:#fff}

/* cards, rows */
.ib-card{background:var(--surface);border:1px solid var(--line);border-radius:22px}
.ib-label{font-size:14px;font-weight:700;margin:0 0 10px}
.ib-muted{color:var(--muted)}
.ib-section-label{font-size:14px;font-weight:700;margin:22px 0 10px}

/* status / stock */
.ib-stock{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ok-text)}
.ib-stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok-dot);flex:none}
.ib-stock.low{color:var(--warn-text)}.ib-stock.low::before{background:var(--warn-dot)}
.ib-stock.out{color:var(--bad-text)}.ib-stock.out::before{background:var(--bad-dot)}
.ib-stock.coming{color:var(--muted)}.ib-stock.coming::before{background:var(--radio-off)}
.ib-status{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:99px;font-size:12px;font-weight:700;background:var(--soft);color:var(--ink);white-space:nowrap}
.ib-status.ok{background:var(--ok-bg);color:var(--ok-text)}
.ib-status.warn{background:var(--warn-bg);color:var(--warn-text)}
.ib-status.bad{background:var(--bad-bg);color:var(--bad-text)}

/* segmented control */
.ib-seg{display:flex;background:var(--seg-bg);border-radius:14px;padding:4px;gap:4px}
.ib-seg button{flex:1;min-width:0;height:38px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-size:14px;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-seg button.active,.ib-seg button[aria-checked="true"]{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 2px 8px rgba(18,17,22,.08)}

/* chips */
.ib-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 var(--page-x);margin:0 calc(-1 * var(--page-x))}
.ib-chips::-webkit-scrollbar{display:none}
.ib-chip{flex:none;height:40px;padding:0 16px;border-radius:99px;background:var(--surface);border:1px solid var(--line);display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);white-space:nowrap}
.ib-chip.active{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.ib-chip .n{opacity:.6;font-size:11px}

/* inputs */
.ib-input{width:100%;height:56px;border-radius:16px;border:1px solid var(--line);background:var(--surface);padding:0 18px;font-size:16px;color:var(--ink);outline:none;transition:border-color .15s}
.ib-input:focus{border:2px solid var(--ink);padding:0 17px}
.ib-input::placeholder{color:var(--muted)}

/* progress bar */
.ib-progress{height:6px;border-radius:3px;background:var(--seg-bg);overflow:hidden;direction:ltr}
.ib-progress > i{display:block;height:100%;background:var(--ink);border-radius:3px;margin-left:auto}

/* toast */
.ib-toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 16px);transform:translate(-50%,20px);z-index:70000;width:calc(100% - 2 * var(--page-x));max-width:calc(var(--col) - 2 * var(--page-x));min-height:52px;padding:12px 18px;border-radius:18px;background:var(--ink);color:#fff;font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s}
.ib-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.ib-toast button,.ib-toast a{flex:none;background:none;border:0;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:0;font-size:14px}
body.has-cta .ib-toast{bottom:calc(110px + var(--safe-b))}

/* empty state */
.ib-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:60px 10px 30px}
.ib-empty-ic{width:96px;height:96px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.ib-empty-ic svg{width:40px;height:40px}
.ib-empty h2{margin:0;font-size:24px;font-weight:700}
.ib-empty p{margin:10px 0 24px;font-size:14px;color:var(--muted)}
.ib-empty .ib-btn{max-width:220px}

/* skeleton */
.ib-skel{background:linear-gradient(90deg,#ecebef 0%,#f6f5f8 50%,#ecebef 100%);background-size:200% 100%;animation:ibSkel 1.2s ease-in-out infinite;border-radius:14px}
@keyframes ibSkel{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Smooth page switches: the tab bar stays put and the page cross-fades
   (Chrome / Safari 18.2+; other browsers just navigate normally). */
@view-transition{navigation:auto}
.ib-tabbar{view-transition-name:ib-tabbar}
::view-transition-old(root),::view-transition-new(root){animation-duration:.14s}