/* =========================================================
   ACSpareparts — shared stylesheet
   Design tokens, layout, components, animations
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* brand */
    /*--y: #FFD23F;
    --y-deep: #F5B400;*/
    --y: #C9DEFE;
    --y-deep: #033787;
    --y-soft: #FFE680;
    /*--y-tint: #FFF6CC;*/
    --y-tint: #C9DEFE;
    /* ink */
    /* --ink: #0E0E10;*/
    --ink: #033787;
    --ink-2: #1B1B1F;
    --ink-3: #54545A;
    --ink-4: #9A9AA1;
    /* surfaces */
    --bg: #FAFAF7;
    --card: #FFFFFF;
    --line: #EFEFEA;
    /* status */
    --ok: #19B26B;
    --warn: #F59E0B;
    --danger: #E84545;
    --info: #2D7BFF;
    /* shadows */
    --shadow-1: 0 1px 2px rgba(20,20,24,.04), 0 2px 6px rgba(20,20,24,.04);
    --shadow-2: 0 4px 14px rgba(20,20,24,.08), 0 1px 3px rgba(20,20,24,.06);
    --shadow-3: 0 14px 40px rgba(20,20,24,.18), 0 4px 12px rgba(20,20,24,.08);
    /* radius */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 22px;
    --r-2xl: 28px;
    /* timing */
    --t-fast: 160ms cubic-bezier(.2,.8,.2,1);
    --t-med: 280ms cubic-bezier(.2,.8,.2,1);
    --t-slow: 520ms cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{height:100%}
body{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background:#1a1a1f;
  font-size:14px;
  line-height:1.45;
  min-height:100dvh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  overscroll-behavior-y:contain;
}

button{font:inherit;color:inherit;border:0;background:transparent;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-family:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;font-weight:700;letter-spacing:-.01em;margin:0}

/* ============================================================
   App shell — phone frame, max 480px on tablet+ desktop
   ============================================================ */
.app{
  width:100%;
  max-width:480px;
  min-height:100dvh;
  background:var(--bg);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
@media (min-width:520px){
  body{padding:24px 16px;background:radial-gradient(120% 120% at 50% 0%,#28282e 0%,#101013 80%)}
  .app{
    min-height:calc(100dvh - 48px);
    border-radius:32px;
    box-shadow:var(--shadow-3),0 0 0 1px rgba(255,255,255,.04);
    overflow:hidden;
  }
}

/* ============================================================
   Page entrance animations
   ============================================================ */
@keyframes pageFadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulseRing{
  0%{transform:scale(.6);opacity:.8}
  100%{transform:scale(1.6);opacity:0}
}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

.page{
  animation:pageFadeUp .42s cubic-bezier(.2,.8,.2,1) both;
  padding-bottom:120px;       /* clearance for floating tab bar */
  min-height:100dvh;
}
.stagger > *{opacity:0;animation:slideUp .5s cubic-bezier(.2,.8,.2,1) both}
.stagger > *:nth-child(1){animation-delay:.04s}
.stagger > *:nth-child(2){animation-delay:.10s}
.stagger > *:nth-child(3){animation-delay:.16s}
.stagger > *:nth-child(4){animation-delay:.22s}
.stagger > *:nth-child(5){animation-delay:.28s}
.stagger > *:nth-child(6){animation-delay:.34s}
.stagger > *:nth-child(7){animation-delay:.40s}
.stagger > *:nth-child(8){animation-delay:.46s}
.stagger > *:nth-child(9){animation-delay:.52s}
.stagger > *:nth-child(n+10){animation-delay:.58s}

/* ============================================================
   Yellow header — curved bottom, search, bell
   ============================================================ */
.hdr{
  background:linear-gradient(180deg,var(--y) 0%,var(--y) 70%,var(--y-deep) 130%);
  padding:18px 18px 28px;
  border-radius:0 0 28px 28px;
  position:relative;
  color:var(--ink);
}
.hdr::after{
  content:"";
  position:absolute;left:0;right:0;top:0;height:80px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.35),transparent 60%);
  pointer-events:none;
  border-radius:inherit;
}
.hdr-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;position:relative;z-index:1}
.hdr-top .hello{flex:1;min-width:0}
.hdr-top .hello small{display:block;font-size:11px;font-weight:600;opacity:.65;letter-spacing:.04em;text-transform:uppercase}
.hdr-top .hello h2{font-size:18px;line-height:1.2;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bell{
  width:42px;height:42px;border-radius:14px;
  background:rgba(0,0,0,.08);
  display:grid;place-items:center;
  position:relative;
  transition:transform var(--t-fast),background var(--t-fast);
}
.bell:hover{background:rgba(0,0,0,.12)}
.bell:active{transform:scale(.9)}
.bell::after{
  content:"";position:absolute;top:8px;right:8px;
  width:9px;height:9px;border-radius:50%;
  background:var(--danger);
  box-shadow:0 0 0 2px var(--y);
}
.search{
  background:var(--ink);
  color:#fff;
  border-radius:18px;
  padding:12px 16px;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  position:relative;z-index:1;
}
.search svg{flex:0 0 auto;opacity:.7}
.search input{
  flex:1;border:0;background:transparent;outline:0;
  color:#fff;font-size:14px;
}
.search input::placeholder{color:rgba(255,255,255,.55)}
.search .mic{
  width:28px;height:28px;border-radius:10px;
  background:var(--y);color:var(--ink);
  display:grid;place-items:center;
  transition:transform var(--t-fast);
}
.search .mic:active{transform:scale(.88)}

/* Header variant: simple page header with back button */
.hdr-page {
    /*background:linear-gradient(180deg,var(--y) 0%,var(--y) 70%,var(--y-deep) 130%);*/
    background-color: #eaf0fe;
    padding: 18px 18px 24px;
    /*border-radius:0 0 28px 28px;*/
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
}
.hdr-page::after{
  content:"";position:absolute;left:0;right:0;top:0;height:80px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.35),transparent 60%);
  pointer-events:none;border-radius:inherit;
}
.back-btn {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    /*background:rgba(0,0,0,.1);*/
    background-color: #C9DEFE;
    display: grid;
    place-items: center;
    transition: transform var(--t-fast),background var(--t-fast);
    position: relative;
    z-index: 1;
}
    .back-btn:hover {
        background: rgba(0,0,0,.16);
        color: #C9DEFE;
    }
.back-btn:active{transform:scale(.9)}
.hdr-page h1 {
    font-size: 17px;
    font-weight: 700;
    flex: 1;
    text-align: center;
    margin-right: 40px;
    position: relative;
    z-index: 1;
    color: #033787 !important;
}
.hdr-page .icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    /*background:rgba(0,0,0,.1);*/
    background-color: #C9DEFE;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 1;
    transition: transform var(--t-fast),background var(--t-fast);
}
.hdr-page .icon-btn:active{transform:scale(.9)}

.hdr-pageh1 {
    color: #C9DEFE!important;
}

/* ============================================================
   Section headers, content padding
   ============================================================ */
.content {
    padding: 1px 16px 18px
}
.section{margin-bottom:22px}
.section-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:0 4px}
.section-h h3{font-size:15px;font-weight:700;letter-spacing:-.01em}
.section-h .see-all{
  font-size:12px;font-weight:600;color:var(--ink-3);
  display:flex;align-items:center;gap:4px;
  padding:4px 6px;border-radius:8px;
  transition:background var(--t-fast),color var(--t-fast);
}
.section-h .see-all:hover{background:var(--y-tint);color:var(--ink)}

/* ============================================================
   Category pill carousel (home)
   ============================================================ */
.cat-row{
  display:flex;gap:10px;overflow-x:auto;
  padding:4px 16px 8px;margin:0 -16px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.cat-row::-webkit-scrollbar{display:none}
.cat-pill{
  flex:0 0 auto;
  background:var(--card);border:1px solid var(--line);
  padding:10px 14px 10px 10px;border-radius:14px;
  display:flex;align-items:center;gap:8px;
  scroll-snap-align:start;
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
  cursor:pointer;
}
.cat-pill:hover{box-shadow:var(--shadow-2);border-color:var(--y)}
.cat-pill:active{transform:scale(.96)}
.cat-pill .ic{
  width:34px;height:34px;border-radius:10px;
  background:var(--y-tint);
  display:grid;place-items:center;color:var(--ink);
}
.cat-pill .lab{font-size:12px;font-weight:600;white-space:nowrap}

/* ============================================================
   Featured product grid (horizontal scroller)
   ============================================================ */
.feat-row{
  display:flex;gap:12px;overflow-x:auto;
  padding:4px 16px 8px;margin:0 -16px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.feat-row::-webkit-scrollbar{display:none}
.feat-card{
  flex:0 0 220px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  display:flex;flex-direction:column;
  scroll-snap-align:start;
  cursor:pointer;
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.feat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.feat-card .img{
  height:130px;
  background:linear-gradient(135deg,var(--y) 0%,var(--y-deep) 120%);
  position:relative;display:grid;place-items:center;
}
.feat-card .img svg{width:75%;height:75%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.feat-card .img .badge{
  position:absolute;top:10px;left:10px;
  background:var(--ink);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:4px 8px;border-radius:8px;
}
.feat-card .img .heart{
  position:absolute;top:10px;right:10px;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.94);
  display:grid;place-items:center;
  transition:transform var(--t-fast);
}
.feat-card .img .heart.active svg path{fill:var(--danger);stroke:var(--danger)}
.feat-card .img .heart.bumping{animation:pop .35s}
.feat-card .body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px}
.feat-card .name{font-size:13px;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:34px;
}
.feat-card .meta{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.feat-card .price{font-size:14px;font-weight:800;font-family:'Bricolage Grotesque'}
.feat-card .add{
  width:30px;height:30px;border-radius:10px;
  background:var(--ink);color:var(--y);
  display:grid;place-items:center;
  transition:transform var(--t-fast),background var(--t-fast);
}
.feat-card .add:hover{background:var(--y);color:var(--ink)}
.feat-card .add:active{transform:scale(.86) rotate(-90deg)}

/* ============================================================
   Product list rows (full-width cards)
   ============================================================ */
.prod-list{display:flex;flex-direction:column;gap:10px}
.prod-row{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  display:grid;grid-template-columns:84px 1fr auto;gap:12px;align-items:center;
  cursor:pointer;
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
}
.prod-row:hover{box-shadow:var(--shadow-2);border-color:var(--y)}
    .prod-row .thumb {
        width: 84px;
        height: 84px;
        border-radius: 14px;
        /*background:linear-gradient(135deg,var(--y) 0%,var(--y-deep) 120%);*/
        background-color: #eaf0fe;
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
    }
.prod-row .thumb svg{width:75%;height:75%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.16))}
.prod-row .info{min-width:0;display:flex;flex-direction:column;gap:4px}
.prod-row .info .cat{font-size:10px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.prod-row .info .name{font-size:13.5px;font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.prod-row .info .pp{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.prod-row .info .price{font-family:'Bricolage Grotesque';font-weight:700;font-size:15px}
.prod-row .info .stock{font-size:10.5px;font-weight:600;color:var(--ok);display:flex;align-items:center;gap:3px}
.prod-row .info .stock.out{color:var(--danger)}
.prod-row .info .stock::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.prod-row .add{
  width:38px;height:38px;border-radius:13px;
  background:var(--y);color:var(--ink);
  display:grid;place-items:center;
  transition:transform var(--t-fast),background var(--t-fast);
}
.prod-row .add:hover{background:var(--ink);color:var(--y)}
.prod-row .add:active{transform:scale(.86) rotate(-90deg)}

/* ============================================================
   Categories list (full grid)
   ============================================================ */
.cat-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.cat-tile{
  background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:14px;
  display:flex;flex-direction:column;gap:10px;
  cursor:pointer;
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
}
.cat-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--y)}
.cat-tile .ic{
  width:46px;height:46px;border-radius:14px;
  background:linear-gradient(135deg,var(--y) 0%,var(--y-deep) 120%);
  display:grid;place-items:center;color:var(--ink);
}
.cat-tile h4{font-size:14px;font-weight:700}
.cat-tile .count{font-size:11px;color:var(--ink-3);font-weight:600}

/* ============================================================
   Filter chips (orders, listings)
   ============================================================ */
.chips{
  display:flex;gap:8px;overflow-x:auto;
  padding:4px 16px 12px;margin:0 -16px 4px;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;
  background:var(--card);border:1px solid var(--line);
  border-radius:14px;
  padding:8px 14px;
  font-size:12px;font-weight:600;
  color:var(--ink-3);
  transition:all var(--t-fast);
}
.chip:active{transform:scale(.94)}
.chip.active{
  background:var(--ink);color:var(--y);border-color:var(--ink);
  box-shadow:0 4px 12px rgba(14,14,16,.18);
}

/* ============================================================
   Product Details
   ============================================================ */
.pd-img {
    /*background:linear-gradient(135deg,var(--y) 0%,var(--y-deep) 120%);*/
    background-color: #eaf0fe;
    height: 280px;
    display: grid;
    place-items: center;
    position: relative;
    /*border-radius: 0 0 28px 28px;*/
}
.pd-img svg{width:62%;height:62%;filter:drop-shadow(0 14px 22px rgba(0,0,0,.2))}
.pd-img .top-row{
  position:absolute;top:14px;left:14px;right:14px;
  display:flex;justify-content:space-between;align-items:center;
}
.pd-img .heart{
  width:42px;height:42px;border-radius:14px;
  background:rgba(255,255,255,.92);
  display:grid;place-items:center;
  transition:transform var(--t-fast);
}
.pd-img .heart:active{transform:scale(.9)}
.pd-img .heart.active svg path{fill:var(--danger);stroke:var(--danger)}
.pd-img .heart.bumping{animation:pop .35s}
.pd-body{padding:18px 18px 0}
.pd-cat{font-size:11px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.pd-name{font-size:22px;font-weight:800;margin:6px 0 8px;line-height:1.2;
         color:black;
}
.pd-pricing{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pd-price{font-family:'Bricolage Grotesque';font-weight:700;font-size:26px}
.pd-price .ex{font-size:14px;color:var(--ink-4);text-decoration:line-through;margin-left:8px;font-weight:500}
.pd-stock-pill{
  background:var(--y-tint);color:var(--ink);
  border-radius:10px;padding:6px 10px;
  font-size:11px;font-weight:700;
  display:flex;align-items:center;gap:5px;
}
.pd-stock-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}

.pd-stock-pill-out {
    background: var(--y-tint);
    color: var(--ink);
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .pd-stock-pill-out::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #b21919;
    }

.qty-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.qty-label{font-size:13px;font-weight:600;color:var(--ink-3)}
.qty-stepper{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:4px;
}
.qty-stepper button{
  width:32px;height:32px;border-radius:8px;
  display:grid;place-items:center;
  font-size:18px;font-weight:600;
  color:var(--ink);
  transition:background var(--t-fast),transform var(--t-fast);
}
.qty-stepper button:hover{background:var(--y-tint)}
.qty-stepper button:active{transform:scale(.85)}
.qty-stepper .v{min-width:20px;text-align:center;font-weight:700;font-family:'Bricolage Grotesque';font-size:15px}
.pd-section{
  background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:14px;margin-bottom:12px;
}
.pd-section h4{font-size:13px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.pd-section p{font-size:13px;color:var(--ink-3);line-height:1.55;margin:0}
.pd-spec{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.pd-spec div{display:flex;flex-direction:column;gap:2px}
.pd-spec dt{font-size:11px;font-weight:600;color:var(--ink-4);text-transform:uppercase;letter-spacing:.04em}
.pd-spec dd{font-size:13px;font-weight:600;margin:0}
.pd-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 4px}
.btn-target{
  background:var(--card);border:1.5px solid var(--ink);
  border-radius:14px;padding:13px;
  font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:transform var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.btn-target:hover{background:var(--ink);color:var(--y)}
.btn-target:active{transform:scale(.96)}
.btn-cart {
    background: var(--y);
    color: var(--ink);
    border-radius: 14px;
    padding: 13px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 6px 16px #dbeafe;
    transition: transform var(--t-fast),box-shadow var(--t-fast);
}
    .btn-cart:hover {
        box-shadow: 0 10px 24px #dbeafe;
    }
.btn-cart:active{transform:scale(.96)}

/* ============================================================
   Forms (target price, etc.)
   ============================================================ */
.form-stack{display:flex;flex-direction:column;gap:14px}
.field label{
  display:block;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  color:black;margin-bottom:6px;padding-left:2px;
}
.field input, .field textarea, .field select {
    width: 100%;
    background:var(--card);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 13px 14px;
    font-size: 14px;
    font-weight: 500;
    outline: 0;
    transition: border-color var(--t-fast),box-shadow var(--t-fast);
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--y);box-shadow:0 0 0 4px rgba(255,210,63,.18);
}
.field textarea{resize:vertical;min-height:88px}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}
.form-card h4{font-size:14px;font-weight:700;margin-bottom:12px}
.form-product-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    /*background: var(--y-tint);*/
    background-color: #C9DEFE;
    border-radius: 14px;
    padding: 10px;
    margin-bottom: 14px;
}
    .form-product-preview .thumb {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        /*background: linear-gradient(135deg,var(--y) 0%,var(--y-deep) 120%);*/
        background-color: #C9DEFE;
        display: grid;
        place-items: center;
        flex: 0 0 60px;
    }
.form-product-preview .thumb svg{width:75%;height:75%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.18))}
.form-product-preview .info{flex:1;min-width:0}
.form-product-preview .info .name{font-size:13px;font-weight:700;line-height:1.3}
.form-product-preview .info .price{font-size:12px;color:var(--ink-3);margin-top:2px}

/* ============================================================
   Cart
   ============================================================ */
.cart-list{display:flex;flex-direction:column;gap:10px}
.cart-row{
  background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:12px;
  display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;
}
    .cart-row .thumb {
        width: 72px;
        height: 72px;
        border-radius:14px;
        /*background:linear-gradient(135deg,var(--y) 0%,var(--y-deep) 120%);*/
        background-color: #C9DEFE;
        display: grid;
        place-items: center;
    }
.cart-row .thumb svg{width:75%;height:75%;filter:drop-shadow(0 3px 6px rgba(0,0,0,.16))}
.cart-row .info{min-width:0}
.cart-row .info .name{font-size:13px;font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.cart-row .info .price{font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;margin-top:4px}
.cart-row .ctrl{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cart-row .rm{
  width:28px;height:28px;border-radius:9px;
  background:transparent;color:var(--ink-4);
  display:grid;place-items:center;
  transition:background var(--t-fast),color var(--t-fast);
}
.cart-row .rm:hover{background:#FEE2E2;color:var(--danger)}
.cart-row .qty{
  display:flex;align-items:center;gap:8px;
  background:var(--bg);border-radius:10px;padding:3px;
}
.cart-row .qty button{
  width:24px;height:24px;border-radius:7px;
  background:var(--card);
  display:grid;place-items:center;font-size:14px;font-weight:600;
  transition:background var(--t-fast),transform var(--t-fast);
}
.cart-row .qty button:hover{background:var(--y-tint)}
.cart-row .qty button:active{transform:scale(.85)}
.cart-row .qty .v{min-width:14px;text-align:center;font-size:13px;font-weight:700;font-family:'Bricolage Grotesque'}

.summary{
  background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:16px;margin-top:14px;
}
.summary h4{font-size:13px;font-weight:700;margin-bottom:10px}
.summary-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;padding:6px 0;
}
.summary-row.total{
  margin-top:6px;padding-top:12px;
  border-top:1px dashed var(--line);
  font-size:15px;font-weight:800;
}
.summary-row.total .v{font-family:'Bricolage Grotesque';font-size:18px}

.empty-state{
  text-align:center;padding:60px 24px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.empty-state .ic{
  width:90px;height:90px;border-radius:30px;
  background:var(--y-tint);
  display:grid;place-items:center;
  animation:float-y 3s ease-in-out infinite;
}
.empty-state h3{font-size:18px}
.empty-state p{color:var(--ink-3);font-size:13px;max-width:240px}
.empty-state .btn-cart{padding:12px 22px}

/* ============================================================
   Bottom action bar (cart, checkout actions)
   ============================================================ */
.bottom-action{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;
  background:var(--card);
  border-top:1px solid var(--line);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  z-index:60;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 -8px 24px rgba(0,0,0,.06);
}
.bottom-action .total{flex:1;display:flex;flex-direction:column;gap:2px}
.bottom-action .total .lab{font-size:11px;color:var(--ink-3);font-weight:600}
.bottom-action .total .v{font-family:'Bricolage Grotesque';font-weight:800;font-size:14px}
.bottom-action .btn{
  background:var(--ink);color:var(--y);
  border-radius:14px;padding:13px 22px;
  font-size:14px;font-weight:700;
  display:flex;align-items:center;gap:6px;
  box-shadow:0 6px 16px rgba(14,14,16,.25);
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.bottom-action .btn:hover{box-shadow:0 10px 24px rgba(14,14,16,.4)}
.bottom-action .btn:active{transform:scale(.96)}

/* When fixed bottom-action present, push tabbar above */
body.has-bottom-action .tabbar{bottom:74px}

/* ============================================================
   Orders
   ============================================================ */
.order-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:14px;margin-bottom:10px;
  cursor:pointer;
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
}
.order-card:hover{box-shadow:var(--shadow-2);border-color:var(--y)}
.order-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:10px}
.order-id{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.05em}
.order-id strong{font-family:'Bricolage Grotesque';font-size:14px;color:var(--ink);display:block;margin-top:2px;letter-spacing:0}
.order-status{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:5px 9px;border-radius:8px;display:inline-flex;align-items:center;gap:4px;
}
.order-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.order-status.delivered{background:#D1FAE5;color:#0E7C46}
.order-status.shipped{background:#DBEAFE;color:#1E5BC6}
.order-status.transit{background:#DBEAFE;color:#1E5BC6}
.order-status.pending{background:#FEF3C7;color:#92590C}
.order-status.confirmed{background:var(--y-tint);color:#7A5A00}
.order-status.cancelled{background:#FEE2E2;color:#B91C1C}
.order-line{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.order-line .thumb{
  width:44px;height:44px;border-radius:11px;
  background:linear-gradient(135deg,var(--y) 0%,var(--y-deep) 120%);
  display:grid;place-items:center;flex:0 0 44px;
}
.order-line .thumb svg{width:75%;height:75%}
.order-line .info{flex:1;min-width:0}
.order-line .info .name{font-size:12.5px;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.order-line .info .qty{font-size:11px;color:var(--ink-3);margin-top:2px}
.order-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:10px;border-top:1px dashed var(--line);
}
.order-foot .date{font-size:11px;color:var(--ink-3)}
.order-foot .amt{font-family:'Bricolage Grotesque';font-weight:700;font-size:15px}

/* ============================================================
   Order tracking timeline (vertical)
   ============================================================ */
.tl-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:18px;margin-bottom:12px;
}
.tl{position:relative;padding-left:30px}
.tl::before{
  content:"";position:absolute;left:11px;top:8px;bottom:8px;
  width:2px;background:var(--line);
}
.tl-step{position:relative;padding:8px 0 18px}
.tl-step:last-child{padding-bottom:0}
.tl-step::before{
  content:"";position:absolute;left:-24px;top:10px;
  width:24px;height:24px;border-radius:50%;
  background:var(--card);
  border:2.5px solid var(--line);
  z-index:1;
}
.tl-step.done::before{
  background:var(--ok);border-color:var(--ok);
  box-shadow:0 0 0 4px rgba(25,178,107,.15);
}
.tl-step.done::after{
  content:"";position:absolute;left:-19px;top:14px;
  width:14px;height:14px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  z-index:2;
}
.tl-step.active::before{
  background:var(--y);border-color:var(--y);
  box-shadow:0 0 0 4px rgba(255,210,63,.3);
  animation:pulseDot 1.6s infinite;
}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 4px rgba(255,210,63,.3)}
  50%{box-shadow:0 0 0 8px rgba(255,210,63,.18)}
}
.tl-step h4{font-size:13.5px;font-weight:700;line-height:1.3;margin-bottom:2px}
.tl-step p{font-size:11.5px;color:var(--ink-3);margin:0}
.tl-step .when{font-size:10.5px;font-weight:600;color:var(--ink-4);margin-top:2px;text-transform:uppercase;letter-spacing:.04em}

/* Mini horizontal timeline (order details) */
.mini-tl{
  display:flex;align-items:center;gap:0;
  background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:18px 14px;margin-bottom:12px;
  overflow-x:auto;
}
.mini-tl::-webkit-scrollbar{display:none}
.mini-step{flex:1;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.mini-step:not(:last-child)::after{
  content:"";position:absolute;left:50%;top:11px;
  width:100%;height:2px;background:var(--line);
}
.mini-step.done:not(:last-child)::after{background:var(--ok)}
.mini-step .dot{
  width:24px;height:24px;border-radius:50%;
  background:var(--card);border:2.5px solid var(--line);
  position:relative;z-index:1;
  display:grid;place-items:center;
}
.mini-step.done .dot{background:var(--ok);border-color:var(--ok)}
.mini-step.done .dot::after{
  content:"";width:12px;height:12px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
.mini-step.active .dot{
  background:var(--y);border-color:var(--y);
  box-shadow:0 0 0 4px rgba(255,210,63,.3);
}
.mini-step .lab{font-size:10px;font-weight:600;text-align:center;color:var(--ink-3);line-height:1.2}
.mini-step.done .lab,.mini-step.active .lab{color:var(--ink)}

/* Partial delivery banner */
.banner-partial{
  background:#FEF3C7;border:1px solid #FCD34D;border-radius:14px;
  padding:12px;display:flex;gap:10px;align-items:flex-start;
  margin-bottom:12px;
}
.banner-partial .ic{
  width:32px;height:32px;border-radius:10px;
  background:var(--warn);color:#fff;
  display:grid;place-items:center;flex:0 0 32px;
}
.banner-partial .txt h4{font-size:12.5px;font-weight:700;color:#92590C;margin-bottom:2px}
.banner-partial .txt p{font-size:11.5px;color:#92590C;margin:0;line-height:1.4}

/* ============================================================
   Profile
   ============================================================ */
.profile-card {
    /*background:linear-gradient(135deg,var(--ink) 0%,#26262C 100%);*/
    background-color: #C9DEFE;
    color: #033787;
    border-radius: 22px;
    padding: 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
.profile-card::before{
  content:"";position:absolute;top:-40px;right:-30px;
  width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,210,63,.3),transparent 70%);
}
.profile-avatar{
  width:60px;height:60px;border-radius:18px;
  background:linear-gradient(135deg,var(--y) 0%,var(--y-deep) 100%);
  color:var(--ink);
  display:grid;place-items:center;
  font-family:'Bricolage Grotesque';font-weight:800;font-size:22px;
  flex:0 0 60px;
}
.profile-info{flex:1;min-width:0}
.profile-info .name{font-size:16px;font-weight:700;line-height:1.2}
.profile-info .role{font-size:12px;opacity:.7;margin-top:2px}
.profile-info .gst{font-size:11px;opacity:.6;margin-top:6px;font-family:'Bricolage Grotesque'}
.profile-info .gst strong{opacity:1;color:var(--y)}

.detail-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:14px;margin-bottom:10px;
}
.detail-card .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.detail-card .head h4{font-size:13px;font-weight:700}
.detail-card .edit{
  font-size:11px;font-weight:700;color:var(--ink);
  padding:5px 10px;border-radius:9px;
  background:var(--y-tint);
  display:flex;align-items:center;gap:4px;
  transition:background var(--t-fast),transform var(--t-fast);
}
.detail-card .edit:hover{background:var(--y)}
.detail-card .edit:active{transform:scale(.94)}
.detail-row{display:flex;gap:10px;padding:8px 0;border-top:1px dashed var(--line)}
.detail-row:first-of-type{border-top:0;padding-top:0}
.detail-row .ic{
  width:30px;height:30px;border-radius:9px;
  background:var(--bg);
  display:grid;place-items:center;flex:0 0 30px;color:var(--ink-3);
}
.detail-row .body{flex:1;min-width:0}
.detail-row .body dt{font-size:10.5px;color:var(--ink-4);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.detail-row .body dd{font-size:13px;font-weight:600;margin:1px 0 0}

.menu-list{
  background:var(--card);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;
  margin-bottom:10px;
}
.menu-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 14px;
  border-bottom:1px solid var(--line);
  transition:background var(--t-fast);
  cursor:pointer;
}
.menu-item:last-child{border-bottom:0}
.menu-item:hover{background:var(--bg)}
.menu-item:active{background:var(--y-tint)}
.menu-item .ic{
  width:34px;height:34px;border-radius:10px;
  background:var(--y-tint);color:var(--ink);
  display:grid;place-items:center;flex:0 0 34px;
}
.menu-item .lab{flex:1;font-size:13.5px;font-weight:600}
.menu-item .arrow{color:var(--ink-4)}
.menu-item.danger .ic{background:#FEE2E2;color:var(--danger)}
.menu-item.danger .lab{color:var(--danger)}

/* ============================================================
   Order confirmed (success page)
   ============================================================ */
.success-wrap{
  min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:40px 24px 140px;
  text-align:center;gap:16px;
}
.success-circle{
  width:120px;height:120px;border-radius:50%;
  background:var(--y);
  display:grid;place-items:center;
  position:relative;
  animation:pop .6s cubic-bezier(.2,.8,.2,1) both;
}
.success-circle::before{
  content:"";position:absolute;inset:-16px;border-radius:50%;
  background:rgba(255,210,63,.3);
  animation:pulseRing 2s ease-out infinite;
}
.success-circle::after{
  content:"";position:absolute;inset:-30px;border-radius:50%;
  background:rgba(255,210,63,.15);
  animation:pulseRing 2s ease-out .6s infinite;
}
.success-circle svg{width:60px;height:60px;color:var(--ink);position:relative;z-index:1}
.success-wrap h2{font-size:24px;animation:slideUp .5s .3s both}
.success-wrap p{font-size:14px;color:var(--ink-3);max-width:300px;animation:slideUp .5s .4s both}
.success-id{
  background:var(--card);border:1.5px dashed var(--line);
  border-radius:14px;padding:10px 16px;
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;
  animation:slideUp .5s .5s both;
}
.success-id strong{font-family:'Bricolage Grotesque';font-weight:800}
.success-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px;margin-top:8px;animation:slideUp .5s .6s both}
.success-actions .btn-primary{
  background:var(--ink);color:var(--y);
  padding:14px;border-radius:14px;font-weight:700;font-size:14px;
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.success-actions .btn-primary:hover{box-shadow:0 10px 24px rgba(0,0,0,.18)}
.success-actions .btn-primary:active{transform:scale(.97)}
.success-actions .btn-secondary{
  background:transparent;color:var(--ink);
  padding:14px;border-radius:14px;font-weight:700;font-size:14px;
  border:1.5px solid var(--line);
}

/* ============================================================
   Floating tab bar — glass, morphing pill, FAB
   ============================================================ */
.tabbar {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 28px);
    max-width: 452px;
    height: 64px;
    z-index: 50;
    /*background:rgba(20,20,24,.92);*/
    background-color: #BBCFFF;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-radius: 22px;
    box-shadow: 0 14px 36px rgba(0,0,0,.28),0 4px 12px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);
    display: grid;
    grid-template-columns: 1fr 1fr 86px 1fr 1fr;
    align-items: center;
    padding: 0 6px;
}
.tabbar .indicator{
  position:absolute;top:7px;height:50px;
  width:calc((100% - 86px - 12px) / 4);
  background:rgba(255,210,63,.16);
  border-radius:16px;
  transition:transform .42s cubic-bezier(.4,1.4,.5,1);
  pointer-events:none;
}
.tab {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #033787;
    position: relative;
    z-index: 1;
    transition: color var(--t-fast),transform var(--t-fast);
}
.tab:active{transform:scale(.92)}
.tab svg{width:22px;height:22px;transition:transform var(--t-fast)}
.tab .lab{font-size:9.5px;font-weight:700;letter-spacing:.02em;opacity:.7;transition:opacity var(--t-fast)}
    .tab.active {
        border-radius: 25px;
        background: var(--y);
        color: var(--y-deep)
    }
.tab.active .lab{opacity:1}
.tab.active svg{transform:translateY(-1px)}

.fab {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    /*background:linear-gradient(135deg,var(--y) 0%,var(--y-deep) 100%);*/
    background-color: var(--ink);
    color: #fff;
    display: grid;
    place-items: center;
    /*box-shadow: 0 8px 22px rgba(245,180,0,.45),0 2px 6px rgba(0,0,0,.2);*/
    box-shadow: 0 8px 22px #C9DEFE, 0 2px 6px rgba(0, 0, 0, .2);
    position: relative;
    margin: 0 auto;
    transform: translateY(-12px);
    transition: transform var(--t-fast),box-shadow var(--t-fast);
}
    .fab:hover {
        /*box-shadow:0 12px 28px rgba(245,180,0,.6),0 4px 8px rgba(0,0,0,.24)*/
        box-shadow: 0 12px 28px #033787, 0 4px 8px rgba(0, 0, 0, .24);
    }
.fab:active{transform:translateY(-12px) scale(.92)}
.fab.bumping{animation:fabBump .55s cubic-bezier(.4,1.6,.5,1)}
@keyframes fabBump{
  0%{transform:translateY(-12px) scale(1)}
  50%{transform:translateY(-18px) scale(1.12)}
  100%{transform:translateY(-12px) scale(1)}
}
.fab svg{width:26px;height:26px}
.fab .badge{
  position:absolute;top:-4px;right:-4px;
  min-width:22px;height:22px;padding:0 6px;
  background:var(--ink);color:var(--y);
  border-radius:11px;
  display:grid;place-items:center;
  font-size:11px;font-weight:800;
  border:2.5px solid var(--y);
  font-family:'Bricolage Grotesque';
}
.fab .badge.hidden{display:none}

/* Tabbar indicator positions — set via .active-N on tabbar element */
.tabbar.active-home .indicator{transform:translateX(0%)}
.tabbar.active-categories .indicator{transform:translateX(100%)}
.tabbar.active-orders .indicator{transform:translateX(calc(200% + 86px))}
.tabbar.active-profile .indicator{transform:translateX(calc(300% + 86px))}
.tabbar.active-none .indicator{opacity:0;transform:translateX(0)}

/* Indicator initial position calculation for grid:
   container width is W. indicator width = (W - 86 - 12)/4
   tab1 left = 6px, tab2 = 6+w, tab3 (FAB), tab4 = 6+w+w+86+12... let's use absolute %
   We use transform percentages relative to indicator's own width.
*/
.tabbar .indicator{left:6px}

/* ============================================================
   Toast
   ============================================================ */
.toast{
  position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;
  padding:11px 20px;border-radius:14px;
  font-size:13px;font-weight:600;
  box-shadow:var(--shadow-3);
  opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;
  z-index:90;
  display:flex;align-items:center;gap:8px;
  white-space:nowrap;
}
.toast svg{color:var(--y)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

/* ============================================================
   Splash screen
   ============================================================ */
.splash{
  position:fixed;inset:0;
  background:radial-gradient(120% 120% at 50% 30%,var(--y) 0%,var(--y-deep) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:200;
  overflow:hidden;
}
.splash::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.4),transparent),
    radial-gradient(2px 2px at 70% 70%,rgba(255,255,255,.3),transparent),
    radial-gradient(1px 1px at 40% 80%,rgba(255,255,255,.5),transparent),
    radial-gradient(2px 2px at 80% 20%,rgba(255,255,255,.35),transparent),
    radial-gradient(1px 1px at 60% 50%,rgba(255,255,255,.4),transparent);
  background-size:200px 200px;
  animation:float-y 6s ease-in-out infinite;
}
.splash-gear{
  position:relative;
  width:160px;height:160px;
  margin-bottom:32px;
  display:grid;place-items:center;
}
.splash-gear .ring{
  position:absolute;border-radius:50%;
  border:2px solid rgba(0,0,0,.1);
  animation:pulseRing 2.4s ease-out infinite;
}
.splash-gear .ring.r1{inset:6px;animation-delay:0s}
.splash-gear .ring.r2{inset:6px;animation-delay:.4s}
.splash-gear .ring.r3{inset:6px;animation-delay:.8s}
.splash-gear .gear{
  width:100px;height:100px;color:var(--ink);
  animation:spin 6s linear infinite;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.18));
  position:relative;z-index:2;
}
.splash-gear .spark{
  position:absolute;width:8px;height:8px;border-radius:50%;
  background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8);
  animation:sparkFloat 3s ease-in-out infinite;
  z-index:1;
}
.splash-gear .spark:nth-child(4){top:8%;left:78%;animation-delay:0s}
.splash-gear .spark:nth-child(5){top:84%;left:14%;animation-delay:.6s;width:6px;height:6px}
.splash-gear .spark:nth-child(6){top:50%;left:90%;animation-delay:1.2s;width:5px;height:5px}
.splash-gear .spark:nth-child(7){top:18%;left:12%;animation-delay:1.8s;width:7px;height:7px}
@keyframes sparkFloat{
  0%,100%{transform:translateY(0) scale(1);opacity:.9}
  50%{transform:translateY(-12px) scale(1.4);opacity:0}
}

.splash-logo{
  height:54px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));
  animation:slideUp .8s .3s cubic-bezier(.2,.8,.2,1) both;
  position:relative;z-index:1;
}
.splash-tag{
  margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(0,0,0,.65);
  animation:slideUp .8s .5s cubic-bezier(.2,.8,.2,1) both;
  position:relative;z-index:1;
}
.splash-progress{
  position:absolute;bottom:60px;left:50%;transform:translateX(-50%);
  width:160px;height:3px;background:rgba(0,0,0,.12);border-radius:2px;overflow:hidden;
  animation:fadeIn 1s .8s both;
}
.splash-progress::before{
  content:"";position:absolute;top:0;left:-30%;width:30%;height:100%;
  background:var(--ink);border-radius:2px;
  animation:loadbar 1.4s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes loadbar{
  0%{left:-30%}
  100%{left:100%}
}

/* ============================================================
   HOME PAGE — matching reference design
   ============================================================ */

/* Header v2: logo + bell, white pill search */
.hdr-home {
    /*background:linear-gradient(180deg,var(--y) 0%,var(--y) 75%,var(--y-deep) 130%);*/
    padding: 18px 18px 24px;
    /*border-radius: 0 0 28px 28px;*/
    position: relative;
    color: var(--ink);
    background-color: #033787;
}
.hdr-home::after{
  content:"";position:absolute;left:0;right:0;top:0;height:80px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.32),transparent 60%);
  pointer-events:none;border-radius:inherit;
}
.hdr-home .row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;position:relative;z-index:1;
}
    .hdr-home .logo {
        height: 38px;
        width: auto;
        display: block;
        margin-left: 25px;
    }
.search-white{
  background:#fff;
  color:var(--ink);
  border-radius:30px;
  padding:13px 20px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  position:relative;z-index:1;
}
.search-white svg{flex:0 0 auto;color:var(--ink)}
.search-white input{
  flex:1;border:0;background:transparent;outline:0;
  color:var(--ink);font-size:13.5px;font-weight:500;
}
.search-white input::placeholder{color:var(--ink-4);font-weight:500}

/* Section header with optional subtitle */
.sec-h{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:14px;padding:0 4px;gap:12px;
}
.sec-h .lh h3{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.15; color:black;}
.sec-h .lh small{font-size:12px;color:var(--ink-3);font-weight:500;display:block;margin-top:3px}
.sec-h .see-all-v2{
  font-size:13px;font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:4px;
  padding:4px 6px;border-radius:8px;
  transition:background var(--t-fast);
}
.sec-h .see-all-v2:hover{background:rgba(0,0,0,.05)}

/* Big horizontal category cards (orange-amber gradient) */
.cat-cards{
  display:flex;gap:12px;overflow-x:auto;
  padding:4px 16px 6px;margin:0 -16px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.cat-cards::-webkit-scrollbar{display:none}
.cat-card {
    flex: 0 0 112px;
    height: 128px;
    /*background:linear-gradient(155deg,#F59E0B 0%,#FFB938 60%,#FFCB48 100%);*/
    background-color: #eaf0fe;
    border-radius: 18px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform var(--t-fast),box-shadow var(--t-fast);
}
    .cat-card:hover {
        transform: translateY(-2px);
        /*box-shadow: 0 10px 22px rgba(245,158,11,.32);*/
        box-shadow: 0 10px 22px #e1e7f3;
    }
.cat-card:active{transform:scale(.96)}
.cat-card::before{
  content:"";position:absolute;top:-20px;right:-20px;
  width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%);
  pointer-events:none;
}
.cat-card .name{
    text-transform:capitalize; text-align:center;
  font-size:11px;font-weight:700;color:black;
  position:relative;z-index:1;line-height:1.2;
}
.cat-card .img{
  flex:1;display:grid;place-items:center;
  margin-top:auto;
}
.cat-card .img svg{width:78%;height:78%;filter:drop-shadow(0 5px 9px rgba(0,0,0,.22))}

/* Pagination dots under category row */
.cat-dots{
  display:flex;justify-content:center;gap:5px;
  margin-top:10px;
}
.cat-dots .dot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(0,0,0,.22);
  transition:all var(--t-fast);
}
.cat-dots .dot.active{
  width:18px;background:var(--ink);border-radius:3px;
}

/* Featured product cards (white cards with stock pill) */
.feat-cards{
  display:flex;gap:12px;overflow-x:auto;
  padding:4px 16px 8px;margin:0 -16px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.feat-cards::-webkit-scrollbar{display:none}
.feat-pro{
  flex:0 0 140px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  display:flex;flex-direction:column;
  scroll-snap-align:start;
  cursor:pointer;
  overflow:hidden;
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
}
.feat-pro:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--y)}
.feat-pro .img-wrap{
  position:relative;
  height:122px;
  background:#fff;
  display:grid;place-items:center;
  padding:14px 10px 6px;
}
.feat-pro .img-wrap svg{width:82%;height:82%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.16))}
.feat-pro .stock-pill{
  position:absolute;top:8px;left:8px;
  background:#fff;color:#0E7C46;
  padding:3px 8px;border-radius:7px;
  font-size:9.5px;font-weight:700;
  display:flex;align-items:center;gap:4px;
  border:1px solid #C7F2D9;
  letter-spacing:.01em;
}
.feat-pro .stock-pill::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#19B26B;
}
.feat-pro .heart{
  position:absolute;top:6px;right:6px;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:transparent;
  transition:transform var(--t-fast),background var(--t-fast);
}
.feat-pro .heart:hover{background:rgba(0,0,0,.04)}
.feat-pro .heart:active{transform:scale(.85)}
.feat-pro .heart.active svg path{fill:var(--danger);stroke:var(--danger)}
.feat-pro .heart.bumping{animation:pop .35s}
.feat-pro .body{padding:6px 12px 12px;display:flex;flex-direction:column;gap:1px}
    .feat-pro .name {
        font-size: 14px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -.01em;
        text-transform: capitalize;
        color: black;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
.feat-pro .desc{font-size:10.5px;color:var(--ink-3);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:1px;
}
.feat-pro .row{
  display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:6px;
}
.feat-pro .price{font-family:'Bricolage Grotesque';font-weight:800;font-size:13.5px}
    .feat-pro .add {
        width: 34px;
        height: 28px;
        border-radius: 8px;
        /*background:var(--y);color:var(--ink);*/
        background-color: #C9DEFE;
        display: grid;
        place-items: center;
        flex: 0 0 34px;
        transition: transform var(--t-fast),background var(--t-fast);
        box-shadow: 0 3px 8px #9eabca;
    }
        .feat-pro .add:hover {
            background: var(--y-deep);
            color: var(--y);
        }
.feat-pro .add:active{transform:scale(.85)}

/* All Products section header with Sort/Filters */
.sort-row{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:16px;padding:0 4px;gap:10px;
}
.sort-row .lh h3{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.sort-row .lh small{font-size:11.5px;color:var(--ink-3);font-weight:500;display:block;margin-top:3px}
.sort-row .actions{display:flex;gap:8px;flex-shrink:0}
.sort-btn{
  background:#fff;border:1px solid var(--line);
  padding:8px 12px;border-radius:9px;
  font-size:12px;font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:5px;
  transition:all var(--t-fast);
  cursor:pointer;
}
.sort-btn:hover{border-color:var(--y);background:var(--y-tint)}
.sort-btn:active{transform:scale(.96)}

/* Product list rows — yellow thumb + stock pill + bigger add button */
.prod-rows{display:flex;flex-direction:column;gap:18px}
.prod-pro{
  display:grid;grid-template-columns:96px 1fr auto;gap:14px;
  align-items:center;
  cursor:pointer;
}
    .prod-pro .thumb {
        width: 96px;
        height: 96px;
        border-radius: 14px;
        /*background:linear-gradient(135deg,var(--y) 0%,var(--y-deep) 130%);*/
        background-color: #eaf0fe;
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
    }
.prod-pro .thumb::before{
  content:"";position:absolute;top:-20px;right:-20px;
  width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%);
  pointer-events:none;
}
.prod-pro .thumb svg{width:78%;height:78%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.prod-pro .info{min-width:0;display:flex;flex-direction:column;gap:2px}
    .prod-pro .info .name {
        font-size: 15px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -.01em;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color:black;
    }
    .prod-pro .info .desc {
        font-size: 12px;
        color: var(--ink-3);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-top: 2px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
.prod-pro .info .price{font-family:'Bricolage Grotesque';font-weight:800;font-size:14.5px;margin-top:6px}
.prod-pro .right-col{
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.prod-pro .stock-pill{
  background:transparent;color:#0E7C46;
  padding:2px 0;
  font-size:11.5px;font-weight:700;
  display:flex;align-items:center;gap:5px;
  white-space:nowrap;
}
.prod-pro .stock-pill::before{
  content:"";width:8px;height:8px;border-radius:50%;background:#19B26B;
}
.prod-pro .stock-pill.out{color:#B91C1C}
.prod-pro .stock-pill.out::before{background:var(--danger)}
    .prod-pro .add-btn {
        width: 62px;
        height: 42px;
        border-radius: 11px;
        background: var(--y);
        color: var(--ink);
        display: grid;
        place-items: center;
        transition: transform var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
        box-shadow: 0 4px 12px #9eabca;
    }
    .prod-pro .add-btn:hover {
        background: var(--y-deep);
        /*box-shadow: 0 6px 16px rgba(245,180,0,.42);*/
        color: #C9DEFE;
    }
.prod-pro .add-btn:active{transform:scale(.92)}

/* Fly-to-cart */
.fly-clone{
  position:fixed;z-index:120;pointer-events:none;
  width:60px;height:60px;border-radius:14px;
  background:linear-gradient(135deg,var(--y) 0%,var(--y-deep) 100%);
  display:grid;place-items:center;
  box-shadow:0 12px 26px rgba(0,0,0,.25);
  transition:transform .65s cubic-bezier(.5,-.2,.6,1),opacity .65s ease-in,top .65s cubic-bezier(.5,-.2,.6,1),left .65s cubic-bezier(.5,-.2,.6,1);
}
.fly-clone svg{width:75%;height:75%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.18))}

/* ============================================================
   AUTH FLOW — login, registration steps, approval waiting
   ============================================================ */

body.auth-app{background:#fff}
body.auth-app .app{background:#fff}

/* ----- Login page ----- */
.login-hero {
    /*background:linear-gradient(180deg,var(--y) 0%,var(--y) 80%,var(--y-deep) 130%);*/
    background-color: #BBCFFF;
    padding: 60px 24px 56px;
    border-radius: 0 0 36px 36px;
    position: relative;
    text-align: center;
}
.login-hero::after{
  content:"";position:absolute;left:0;right:0;top:0;height:90px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.32),transparent 60%);
  pointer-events:none;border-radius:inherit;
}
.login-hero .logo{
  height:54px;max-width:240px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.10));
  position:relative;z-index:1;
  animation:slideUp .6s .1s cubic-bezier(.2,.8,.2,1) both;
}
.login-body{padding:36px 24px 30px}
.login-body .field-stack{display:flex;flex-direction:column;gap:18px}
.login-body .field-stack .field{animation:slideUp .5s cubic-bezier(.2,.8,.2,1) both}
.login-body .field-stack .field:nth-child(1){animation-delay:.20s}
.login-body .field-stack .field:nth-child(2){animation-delay:.28s}
.login-actions{display:flex;flex-direction:column;gap:14px;margin-top:32px}
.login-actions .btn-pill:nth-child(1){animation:slideUp .5s .36s cubic-bezier(.2,.8,.2,1) both}
.login-actions .btn-pill:nth-child(2){animation:slideUp .5s .42s cubic-bezier(.2,.8,.2,1) both}

/* Override field labels for auth (sentence-case bold, not uppercase) */
.auth-app .field label{
  font-size:13px;font-weight:700;
  color:black;
  text-transform:none;letter-spacing:0;
  margin-bottom:8px;padding-left:2px;
}
.auth-app .field input,
.auth-app .field select,
.auth-app .field textarea{
  border-radius:12px;
  padding:14px 16px;
  font-weight:500;
}
.auth-app .field input::placeholder,
.auth-app .field textarea::placeholder{color:var(--ink-4);font-weight:500}

/* Password input with eye toggle */
.pwd-wrap{position:relative}
.pwd-wrap input{padding-right:48px !important}
.pwd-eye{
  position:absolute;right:8px;top:50%;
  width:36px;height:36px;
  display:grid;place-items:center;
  color:var(--ink-3);background:transparent;
  border-radius:9px;
  transform:translateY(-50%);
  transition:background var(--t-fast),color var(--t-fast),transform .2s;
}
.pwd-eye:hover{background:var(--bg);color:var(--ink)}
.pwd-eye:active{transform:translateY(-50%) scale(.85)}
.pwd-eye svg{transition:transform .25s cubic-bezier(.4,1.4,.5,1)}
.pwd-eye.shown svg{transform:scale(1.08)}

.forgot-pw{
  display:block;text-align:right;
  font-size:12px;color:var(--ink-4);font-weight:500;
  margin-top:10px;padding:4px 4px;
  transition:color var(--t-fast);
}
.forgot-pw:hover{color:var(--ink-3);text-decoration:underline}

/* Pill buttons used across auth pages */
.btn-pill{
  width:100%;padding:16px 24px;
  border-radius:28px;
  font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),border-color var(--t-fast);
  text-decoration:none;cursor:pointer;
  font-family:inherit;
}
    .btn-pill.primary {
        background: var(--y);
        color: var(--ink);
        /*box-shadow: 0 6px 16px #a8bddc;*/
    }
        .btn-pill.primary:hover {
            background: var(--y-deep);
            /*box-shadow: 0 10px 24px rgba(245,180,0,.5);*/
            /*box-shadow: 0 6px 16px #a8bddc;*/
            color: #C9DEFE;
        }
.btn-pill.primary:active{transform:scale(.97)}
.btn-pill.outline{
  background:#fff;color:var(--ink);
  border:1.5px solid var(--line);
}
.btn-pill.outline:hover{border-color:var(--ink-3);background:var(--bg)}
.btn-pill.outline:active{transform:scale(.97)}

/* ----- Registration top bar ----- */
.reg-topbar {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    /*background:#fff;*/
    background-color: #BBCFFF;
}
.reg-topbar .logo{
  height:30px;display:block;
  animation:slideUp .5s cubic-bezier(.2,.8,.2,1) both;
}

/* Step tabs (4-tab horizontal stepper) */
.step-tabs{
  display:flex;gap:8px;
  padding:14px 16px 16px;
  overflow-x:auto;
  scrollbar-width:none;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.step-tabs::-webkit-scrollbar{display:none}
.step-tab{
  flex:0 0 auto;
  padding:9px 16px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--line);
  font-size:12.5px;font-weight:600;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
  transition:all var(--t-fast);
  cursor:pointer;
  font-family:inherit;
  animation:slideUp .4s cubic-bezier(.2,.8,.2,1) both;
}
.step-tab:nth-child(1){animation-delay:.05s}
.step-tab:nth-child(2){animation-delay:.10s}
.step-tab:nth-child(3){animation-delay:.15s}
.step-tab:nth-child(4){animation-delay:.20s}
.step-tab:hover{border-color:var(--ink-4)}
    .step-tab.active {
        background: var(--y);
        border-color: var(--y);
        font-weight: 700;
        box-shadow: 0 4px 10px #c3cadc;
    }
.step-tab.done{border-color:var(--ink-3);color:var(--ink)}
.step-tab:active{transform:scale(.96)}

/* Registration body */
.reg-body{padding:22px 22px 30px}
.reg-title{
  font-size:24px;font-weight:700;
  letter-spacing:-.01em;line-height:1.2;
  margin-bottom:6px;
  animation:slideUp .4s .05s cubic-bezier(.2,.8,.2,1) both;
}
.reg-subtitle{
  font-size:13px;color:var(--ink-3);
  font-weight:500;line-height:1.4;
  margin-bottom:24px;
  animation:slideUp .4s .12s cubic-bezier(.2,.8,.2,1) both;
}
.reg-body .field-stack{display:flex;flex-direction:column;gap:18px}
.reg-body .field-stack .field{animation:slideUp .4s cubic-bezier(.2,.8,.2,1) both}
.reg-body .field-stack .field:nth-child(1){animation-delay:.18s}
.reg-body .field-stack .field:nth-child(2){animation-delay:.22s}
.reg-body .field-stack .field:nth-child(3){animation-delay:.26s}
.reg-body .field-stack .field:nth-child(4){animation-delay:.30s}
.reg-body .field-stack .field:nth-child(5){animation-delay:.34s}
.reg-body .field-stack .field:nth-child(6){animation-delay:.38s}
.reg-body .field-stack .field:nth-child(7){animation-delay:.42s}
.reg-body .field-stack .field:nth-child(8){animation-delay:.46s}
.reg-body .field-stack .field:nth-child(9){animation-delay:.50s}
.reg-body .field-stack .field:nth-child(10){animation-delay:.54s}

.reg-actions{
  display:flex;flex-direction:column;gap:12px;
  margin-top:28px;
}
.reg-body .reg-actions .btn-pill:nth-child(1){animation:slideUp .5s .55s cubic-bezier(.2,.8,.2,1) both}
.reg-body .reg-actions .btn-pill:nth-child(2){animation:slideUp .5s .60s cubic-bezier(.2,.8,.2,1) both}

/* Map mock for Location step */
.map-mock{
  width:100%;height:280px;
  border-radius:16px;
  background:linear-gradient(135deg,#DDE7F4 0%,#C5D5E8 100%);
  position:relative;overflow:hidden;
  cursor:pointer;
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  animation:slideUp .5s .15s cubic-bezier(.2,.8,.2,1) both;
}
.map-mock::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.5) 0%, transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.35) 0%, transparent 30%);
}
.map-mock svg.map-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-mock .pin{
  position:absolute;
  transform:translate(-50%,-100%);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.22));
  z-index:2;
}
.map-mock .pin.p1{top:30%;left:24%;animation:pinDrop .6s .3s cubic-bezier(.4,1.4,.5,1) both}
.map-mock .pin.p2{top:28%;left:78%;animation:pinDrop .6s .45s cubic-bezier(.4,1.4,.5,1) both}
.map-mock .pin.p3{top:50%;left:50%;animation:pinDrop .6s .6s cubic-bezier(.4,1.4,.5,1) both}
.map-mock .pin.p4{top:62%;left:80%;animation:pinDrop .6s .75s cubic-bezier(.4,1.4,.5,1) both}
.map-mock .pin.selected{
  top:42%;left:64%;
  animation:pinDrop .6s .9s cubic-bezier(.4,1.4,.5,1) both,
            pinFloat 2.4s 1.6s ease-in-out infinite;
  z-index:3;
}
@keyframes pinDrop{
  from{transform:translate(-50%,-220%) scale(.4);opacity:0}
  to{transform:translate(-50%,-100%) scale(1);opacity:1}
}
@keyframes pinFloat{
  0%,100%{transform:translate(-50%,-100%) scale(1)}
  50%{transform:translate(-50%,-115%) scale(1.06)}
}
.map-hint{
  font-size:11.5px;color:var(--ink-3);
  margin-top:10px;text-align:center;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:6px;
  animation:slideUp .5s .9s cubic-bezier(.2,.8,.2,1) both;
}

/* ----- Approval waiting screen ----- */
.approval-page{
  min-height:100dvh;
  background:#fff;
  padding:60px 24px 40px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  text-align:center;gap:18px;
}
.approval-illustration{
  width:220px;height:220px;
  position:relative;
  margin-bottom:8px;
  animation:popIn .7s cubic-bezier(.4,1.4,.5,1) both;
}
@keyframes popIn{
  0%{transform:scale(.5);opacity:0}
  60%{transform:scale(1.06);opacity:1}
  100%{transform:scale(1)}
}
.approval-illustration svg{width:100%;height:100%;display:block}
.approval-illustration .clock-hour{
  transform-origin:100px 100px;
  animation:rotateHour 12s linear infinite;
}
.approval-illustration .clock-min{
  transform-origin:100px 100px;
  animation:rotateMin 3s linear infinite;
}
@keyframes rotateHour{to{transform:rotate(360deg)}}
@keyframes rotateMin{to{transform:rotate(360deg)}}
.approval-illustration .hg-wrap{
  transform-origin:142px 138px;
  animation:hgFlip 3.5s ease-in-out infinite;
}
@keyframes hgFlip{
  0%,30%{transform:rotate(0)}
  50%,80%{transform:rotate(180deg)}
  100%{transform:rotate(360deg)}
}
.approval-illustration .sparkle{
  transform-origin:center;
  animation:twinkle 2.4s ease-in-out infinite;
}
.approval-illustration .sparkle.s2{animation-delay:.5s}
.approval-illustration .sparkle.s3{animation-delay:1s}
.approval-illustration .sparkle.s4{animation-delay:1.5s}
@keyframes twinkle{
  0%,100%{opacity:.35;transform:scale(.7)}
  50%{opacity:1;transform:scale(1.15)}
}
.approval-illustration .orbit-ring{
  transform-origin:100px 100px;
  animation:orbit 40s linear infinite;
}
@keyframes orbit{to{transform:rotate(360deg)}}

.approval-title{
  font-size:22px;font-weight:800;
  letter-spacing:-.01em;line-height:1.25;
  max-width:340px;
  animation:slideUp .5s .25s cubic-bezier(.2,.8,.2,1) both;
}
.pending-pill{
  display:inline-flex;align-items:center;gap:7px;
  background:#FEF3C7;
  color:#B45309;
  padding:6px 14px;
  border-radius:14px;
  font-size:13px;font-weight:700;
  letter-spacing:.01em;
  animation:slideUp .5s .35s cubic-bezier(.2,.8,.2,1) both;
}
.pending-pill::before{
  content:"";width:7px;height:7px;
  border-radius:50%;
  background:#F59E0B;
  animation:pulseDotY 1.5s ease-in-out infinite;
}
@keyframes pulseDotY{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(245,158,11,.6)}
  50%{opacity:.8;transform:scale(1.3);box-shadow:0 0 0 6px rgba(245,158,11,0)}
}
.approval-msg{
  font-size:13.5px;color:var(--ink-3);
  line-height:1.6;max-width:320px;
  animation:slideUp .5s .45s cubic-bezier(.2,.8,.2,1) both;
}
.approval-action{
  margin-top:18px;
  width:100%;max-width:320px;
  animation:slideUp .5s .55s cubic-bezier(.2,.8,.2,1) both;
}

.swal2-popup {
    width: 28em!important;
}

.button-action {
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: 480px;
    background: var(--card);
    border-top: 1px solid var(--line);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .06);
    justify-content: flex-end;
}

.button-action .btn {
    background: var(--ink);
    color: var(--y);
    border-radius: 14px;
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 6px 16px rgba(14, 14, 16, .25);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}