:root{
    --bg:#FFFDF6;
    --card:#FFFFFF;
    --card-hi:#FFF8E4;
    --line:#F0E4C4;
    --yellow:#FDC202;
    --yellow-deep:#E8A400;
    --green:#4CAF6D;
    --green-light:#EAF7ED;
    --green-dim:#3C9257;
    --ink:#2B2410;
    --muted:#8A7F60;
    --danger:#E0503C;
    --radius:5px;
    --radius-sm:5px;
    --nav-h:76px;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{height:100%; overscroll-behavior:none;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Poppins','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    overscroll-behavior:none;
    -webkit-font-smoothing:antialiased;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none;
  }
  /* allow text selection only where explicitly needed (inputs, textareas) */
  input, textarea, [contenteditable="true"]{
    -webkit-user-select:text; user-select:text; -webkit-touch-callout:default;
  }
  /* delivery ETA — plain colored text inline in the topbar row, no card/bg */
  .eta-text{
    display:none; align-items:center; gap:4px; font-weight:800; font-size:12px;
    position:relative; z-index:1; cursor:pointer; white-space:nowrap;
  }
  .eta-text.show{display:flex;}
  .eta-text.red{color:#B33224;}
  .eta-text.amber{color:#8A5900;}
  .eta-text.green{color:var(--green-dim);}
  .eta-text .eta-dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; animation:etaPulse 1.2s infinite ease-in-out;}
  @keyframes etaPulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(.7);}}
  .eta-text.arrived{animation:etaArrive .6s ease;}
  @keyframes etaArrive{0%{transform:scale(1);} 30%{transform:scale(1.04);} 100%{transform:scale(1);}}
  .delivery-anim-overlay{
    position:fixed; inset:0; background:rgba(43,36,16,.55); z-index:9999;
    display:none; align-items:center; justify-content:center;
  }
  .delivery-anim-overlay.show{display:flex;}
  .delivery-anim-card{
    background:var(--card); border-radius:12px; padding:28px 24px; text-align:center;
    max-width:300px; width:88%;
  }
  .delivery-anim-icon{font-size:48px; animation:bikeBounce 1s infinite ease-in-out;}
  @keyframes bikeBounce{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}
  #app{
    display:flex; flex-direction:column; height:100vh; height:100dvh;
    max-width:480px; margin:0 auto; position:relative; overflow:hidden;
    box-shadow:0 0 50px rgba(43,36,16,.08);
    background:var(--bg);
  }

  /* ---------- TOP BAR ---------- */
  .topbar{
    flex-shrink:0; padding:16px 18px 14px;
    background:linear-gradient(160deg,var(--yellow) 0%,#FFCE33 55%,var(--yellow) 100%);
    border-radius:0 0 5px 5px;
    box-shadow:0 6px 18px rgba(232,164,0,.18);
    position:relative; overflow:hidden;
  }
  .topbar::after{
    content:''; position:absolute; right:-40px; top:-50px; width:160px; height:160px;
    border-radius:50%; background:rgba(255,255,255,.18);
  }
  .topbar-row{display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1;}
  .brand{display:flex; align-items:center; gap:10px;}
  .brand-icon{
    width:50px; height:50px;
    display:flex; align-items:center; justify-content:center;
    overflow:visible; flex-shrink:0;
  }
  .brand-icon img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));}
  .brand-text{display:flex; flex-direction:column; line-height:1.15;}
  .brand-title{font-size:17px; font-weight:800; letter-spacing:-.2px; color:#1E1806;}
  .brand-sub{font-size:11px; color:#5A4E1F; font-weight:600; display:flex; align-items:center; gap:5px; margin-top:2px;}
  .brand-sub .dot{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px #4caf6d88;}

  .topbar-icons{display:flex; gap:10px;}
  .icon-btn{
    width:38px; height:38px; border-radius:5px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.55); border:none; color:#3A3110; cursor:pointer; position:relative;
  }
  .icon-btn .badge{
    position:absolute; top:-4px; right:-4px; background:var(--green); color:#fff;
    font-size:9.5px; font-weight:700; min-width:15px; height:15px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; padding:0 3px;
    border:2px solid var(--yellow);
  }

  .addr-row{
    margin-top:14px; display:flex; align-items:center; gap:6px;
    font-size:12.5px; font-weight:600; color:#3A3110; position:relative; z-index:1;
    flex-wrap:nowrap; min-width:0;
  }
  .addr-row span{flex-shrink:0;}
  .addr-row #addrLabel{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1 1 auto;
  }
  .addr-row .chev{flex-shrink:0;}
  .addr-row svg{flex-shrink:0;}
  .addr-row b{font-weight:700;}
  .addr-row .chev{margin-left:2px; opacity:.6;}

  /* ---------- COMPACT NAV SEARCH (expands from the icon, no permanent bar) ---------- */
  .nav-search-wrap{ position:relative; display:flex; align-items:center; }
  .nav-search-wrap .icon-btn{ transition:opacity .18s ease, transform .18s ease; }
  .nav-search-wrap.open .icon-btn{ opacity:0; transform:scale(.6); pointer-events:none; }

  .nav-search-box{
    position:absolute; top:50%; right:0; transform:translateY(-50%);
    display:flex; align-items:center; gap:8px;
    background:#FFFFFF; border-radius:20px; padding:0 8px 0 14px;
    box-shadow:0 6px 18px rgba(0,0,0,.14);
    width:38px; height:38px; overflow:hidden;
    opacity:0; pointer-events:none;
    transition:width .32s cubic-bezier(.4,0,.2,1), opacity .22s ease, box-shadow .32s ease;
    z-index:5;
  }
  .nav-search-wrap.open .nav-search-box{
    width:min(78vw, 320px); opacity:1; pointer-events:auto;
  }
  .nav-search-box svg{flex-shrink:0; color:var(--muted);}
  .nav-search-box input{
    border:none; outline:none; flex:1; font-size:14px; font-family:inherit; color:var(--ink); background:transparent;
    min-width:0;
  }
  .nav-search-box input::placeholder{color:#B5A778;}
  .nav-search-suggest{
    position:fixed; /* escapes .topbar's overflow:hidden, which was clipping/garbling this */
    background:#FFFFFF; border-radius:14px;
    box-shadow:0 10px 26px rgba(0,0,0,.25); overflow:hidden; z-index:500;
  }
  .nav-search-suggest .nss-item{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 14px; font-size:13.5px; color:var(--ink); cursor:pointer; border-bottom:1px solid #F1EAD8;
  }
  .nav-search-suggest .nss-item:last-child{border-bottom:none;}
  .nav-search-suggest .nss-item:active{background:#FBF6E9;}
  .nav-search-suggest .nss-item span.nss-cat{color:var(--muted); font-size:11.5px; text-transform:capitalize;}
  .nav-search-suggest .nss-empty{padding:12px 14px; font-size:13px; color:var(--muted);}
  .nav-search-close{
    flex-shrink:0; width:26px; height:26px; border:none; background:transparent; color:var(--muted);
    display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:50%;
  }
  .nav-search-close:active{ background:rgba(0,0,0,.06); }

  /* ---------- SCREEN TRANSITIONS ---------- */
  .screen{
    flex:1; overflow-y:auto; padding:18px 18px calc(var(--nav-h) + 20px); -webkit-overflow-scrolling:touch;
    display:none;
  }
  .screen.active{display:block; animation:screenIn .28s ease;}

  @keyframes screenIn{
    from{opacity:0; transform:translateY(10px);}
    to{opacity:1; transform:translateY(0);}
  }

  /* ---------- PRODUCTS GRID SCREEN ---------- */
  .cat-chip-row{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin-bottom:16px;}
  .cat-chip-row::-webkit-scrollbar{display:none;}
  .cat-chip{
    flex:0 0 auto; padding:8px 16px; border-radius:5px; background:var(--card-hi);
    font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; border:1px solid var(--line);
    transition:all .15s;
  }
  .cat-chip.active{background:var(--yellow); color:#231C08; border-color:transparent;}
  .prod-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px;}
  .prod-card.grid{width:auto; transform:scale(.96); transform-origin:top center;}
  .prod-card.hidden{display:none;}

  /* ---------- CART / ORDERS SCREEN ---------- */
  .cart-item{
    display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:12px; margin-bottom:10px; box-shadow:0 2px 10px rgba(43,36,16,.05);
    animation:cartItemIn .25s ease;
  }
  @keyframes cartItemIn{ from{opacity:0; transform:translateX(-8px);} to{opacity:1; transform:translateX(0);} }
  .cart-item-ic{width:44px; height:44px; border-radius:5px; background:var(--card-hi); display:flex; align-items:center; justify-content:center; color:var(--green-dim); flex-shrink:0;}
  .cart-item-info{flex:1; min-width:0;}
  .cart-item-name{font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .cart-item-price{font-size:12px; color:var(--muted); margin-top:2px;}
  .cart-item-qty{display:flex; align-items:center; gap:8px; background:var(--card-hi); border-radius:5px; padding:4px 6px;}
  .cart-item-qty button{width:20px; height:20px; border-radius:5px; border:none; background:#fff; color:var(--ink); font-weight:800; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.08); transition:transform .12s;}
  .cart-item-qty button:active{ transform:scale(.85); }
  .cart-item-qty span{font-size:12.5px; font-weight:700; min-width:14px; text-align:center; display:inline-block;}
  /* Qty number pulse on +/- instead of re-animating/blinking the whole card */
  .cart-qty-num.qty-bump{ animation:qtyBump .28s ease; }
  @keyframes qtyBump{
    0%{ transform:scale(1); }
    45%{ transform:scale(1.35); color:var(--green-dim); }
    100%{ transform:scale(1); }
  }
  /* Row removal (qty hits 0) - fade/shrink out instead of an abrupt disappear */
  .cart-item-out{ animation:cartItemOut .18s ease forwards; }
  @keyframes cartItemOut{ from{opacity:1; transform:translateX(0);} to{opacity:0; transform:translateX(-8px);} }
  .cart-empty{display:flex; flex-direction:column; align-items:center; text-align:center; padding:40px 20px; gap:10px;}
  .cart-empty-title{font-size:14.5px; font-weight:800; color:var(--ink);}
  .cart-empty-sub{font-size:12px; color:var(--muted); max-width:220px; line-height:1.4;}

  /* Generic empty state - used by Manage Subscriptions (no active plan)
     and Payment Methods (no completed order yet) */
  .sub-empty{display:flex; flex-direction:column; align-items:center; text-align:center; padding:48px 24px 30px; gap:6px;}
  .sub-empty-ic{width:64px; height:64px; border-radius:50%; background:var(--card-hi); display:flex; align-items:center; justify-content:center; margin-bottom:8px;}
  .sub-empty-title{font-size:15px; font-weight:800; color:var(--ink);}
  .sub-empty-sub{font-size:12.5px; color:var(--muted); max-width:260px; line-height:1.5;}
  .cart-summary{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:14px 0 6px;}
  .cart-row{display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted); margin-bottom:6px;}
  .cart-row b{color:var(--ink); font-weight:800;}
  .cart-row .free{color:var(--green-dim);}

  .order-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin-bottom:12px; box-shadow:0 2px 10px rgba(43,36,16,.05);}
  .order-top{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:8px;}
  .order-id{font-size:13px; font-weight:800;}
  .order-date{font-size:11px; color:var(--muted); margin-top:2px;}
  .order-status{font-size:9.5px; font-weight:800; text-transform:uppercase; padding:4px 8px; border-radius:5px; background:var(--green-light); color:var(--green-dim);}
  .order-items{font-size:12px; color:var(--muted); margin-bottom:10px; line-height:1.4;}
  .order-bottom{display:flex; align-items:center; justify-content:space-between;}
  .order-bottom b{font-size:14px; font-weight:800;}
  .order-link{font-size:12px; font-weight:700; color:var(--green-dim); cursor:pointer;}

  /* ---------- ACCOUNT SCREEN ---------- */
  .account-header{display:flex; align-items:center; gap:14px; margin-bottom:20px;}
  .account-avatar{width:56px; height:56px; border-radius:5px; background:linear-gradient(150deg,var(--yellow),var(--yellow-deep)); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:#231C08;}
  .account-name{font-size:16px; font-weight:800;}
  .account-phone{font-size:12px; color:var(--muted); margin-top:2px;}
  .settings-group{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(43,36,16,.06);}
  .settings-row{padding:15px 16px; border-bottom:1px solid var(--line); font-size:13.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; transition:background .12s;}
  .settings-row:last-child{border-bottom:none;}
  .settings-row:active{background:var(--card-hi);}
  .settings-row::after{content:''; flex-shrink:0; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(-45deg); opacity:.6;}
  #accountLogoutRow::after{display:none;}

  /* ---------- FLY TO CART ANIMATION ---------- */
  .fly-dot{
    position:fixed; z-index:999; border-radius:50%; background:var(--green);
    pointer-events:none; box-shadow:0 2px 8px rgba(76,175,109,.5);
  }
  .cart-pulse{ animation:cartPulse .4s ease; }
  @keyframes cartPulse{
    0%{transform:scale(1);}
    30%{transform:scale(1.35);}
    60%{transform:scale(0.92);}
    100%{transform:scale(1);}
  }
  .add-pop{ animation:addPop .3s ease; }
  @keyframes addPop{
    0%{transform:scale(1);}
    40%{transform:scale(.8); background:var(--green) !important; color:#fff !important;}
    100%{transform:scale(1);}
  }

  .section-head{display:flex; align-items:baseline; justify-content:space-between; margin:22px 0 12px;}
  .section-head:first-child{margin-top:2px;}
  .section-title{font-size:17px; font-weight:800; letter-spacing:-.2px;}
  .section-title span{color:var(--green-dim);}
  .section-link{font-size:12px; font-weight:700; color:var(--green-dim); display:flex; align-items:center; gap:3px; cursor:pointer;}

  /* ---------- CATEGORY RAIL (auto-scroll) ---------- */
  .cat-rail-outer{overflow:hidden; margin:0 -18px; padding:0 18px;}
  .cat-rail{
    display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
  }
  .cat-rail::-webkit-scrollbar{display:none;}
  .cat-card{
    flex:0 0 auto; width:92px; height:104px; border-radius:var(--radius-sm);
    background:var(--green-light); border:1px solid #DCEFDF;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    padding:10px; cursor:pointer; transition:transform .15s;
  }
  .cat-card:active{transform:scale(.94);}
  .cat-card .cat-ic{
    width:38px; height:38px; border-radius:5px; background:#fff;
    display:flex; align-items:center; justify-content:center; color:var(--green-dim);
    box-shadow:0 2px 6px rgba(76,175,109,.15);
  }
  .cat-card .cat-label{font-size:11px; font-weight:700; text-align:center; color:#3A5842; line-height:1.25;}

  /* ---------- PROMO BANNER (auto-scroll, rectangular) ---------- */
  .promo-outer{overflow:hidden; margin-top:16px;}
  .promo-rail{display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth; scroll-snap-type:x mandatory;}
  .promo-rail::-webkit-scrollbar{display:none;}
  .promo-card{
    flex:0 0 auto; width:100%; scroll-snap-align:start;
    border-radius:var(--radius); overflow:hidden; position:relative;
    height:132px; display:flex; align-items:center; padding:0 20px;
  }
  .promo-card.p1{background:linear-gradient(120deg,#FFD84D,#FDC202);}
  .promo-card.p2{background:linear-gradient(120deg,#6FCB88,#4CAF6D);}
  .promo-card.p3{background:linear-gradient(120deg,#FFE38A,#FFCE33);}
  .promo-copy{position:relative; z-index:1;}
  .promo-eyebrow{font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; opacity:.75;}
  .promo-title{font-size:18px; font-weight:800; margin-top:4px; letter-spacing:-.3px; max-width:90%; line-height:1.25;}
  .promo-sub{font-size:11.5px; font-weight:600; margin-top:5px; opacity:.85;}
  .promo-blob{position:absolute; right:-20px; bottom:-30px; width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,.22);}
  .promo-blob2{position:absolute; right:30px; top:-40px; width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,.18);}
  .promo-dots{display:flex; gap:5px; justify-content:center; margin-top:10px;}
  .promo-dot{width:6px; height:6px; border-radius:50%; background:var(--line);}
  .promo-dot.active{background:var(--yellow-deep); width:16px; border-radius:3px;}

  /* Image-type banners: image fills the card edge-to-edge, no text drawn
     over it (any text is already part of the uploaded image). */
  .promo-card.promo-img{padding:0;}
  .promo-card.promo-img img{width:100%; height:100%; object-fit:cover; display:block;}
  .promo-card.promo-img .promo-copy-fallback{display:none;}
  /* If an image fails to load, onerror removes the <img> and adds this
     class - the card then shows the color+title fallback instead of a
     broken-image icon, never a blank/broken card. */
  .promo-card.promo-img.promo-fallback{padding:0 20px;}
  .promo-card.promo-img.promo-fallback .promo-copy-fallback{display:block; position:relative; z-index:1;}

  /* Coded placeholder banner - shown only until the admin adds a real one */
  .promo-card.promo-placeholder{padding:0 20px;}
  .promo-placeholder-svg{position:absolute; inset:0; width:100%; height:100%; z-index:0;}
  .promo-card.promo-placeholder .promo-copy{position:relative; z-index:1;}

  /* ---------- PACKAGE / PLAN CARDS (horizontal scroll rail) ----------
     Center-focused carousel: the card in the middle of the viewport is
     shown big/full-opacity, the cards peeking in on either side are
     scaled down and dimmed - like a coverflow. JS (plan.js) toggles
     .is-active on whichever card is currently centered as you scroll. */
  .pkg-rail-outer{position:relative;}
  .pkg-rail{
    display:flex; align-items:center; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:14px 22% 10px; margin:0 -2px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .pkg-rail::-webkit-scrollbar{display:none;}
  .pkg-card{
    flex:0 0 76%; max-width:280px; scroll-snap-align:center;
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; position:relative;
    box-shadow:0 2px 10px rgba(43,36,16,.06);
    display:flex; flex-direction:column;
    transform:scale(.86); opacity:.55;
    transition:transform .28s cubic-bezier(.25,.8,.4,1), opacity .28s ease;
  }
  .pkg-card.is-active{
    transform:scale(1); opacity:1;
    box-shadow:0 8px 22px rgba(43,36,16,.14);
  }
  .pkg-card.featured{border-color:transparent;}

  /* Top half: image (or gradient fallback if a plan has none yet) */
  .pkg-thumb{
    position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
    background:linear-gradient(155deg,#EFE6C4,#E4D6A0);
  }
  .pkg-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .pkg-thumb-fallback{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#B8A667;}
  .pkg-tag{
    position:absolute; top:10px; left:10px; z-index:1;
    display:inline-flex; font-size:9.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
    background:rgba(255,255,255,.92); color:var(--green-dim); padding:4px 8px; border-radius:5px;
  }
  .pkg-card.featured .pkg-tag{background:var(--yellow); color:#231C08;}
  .pkg-drop{position:absolute; top:10px; right:10px; z-index:1; color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));}

  /* Bottom half: info panel */
  .pkg-body{padding:12px 14px 14px; flex:1; display:flex; flex-direction:column;}
  .pkg-name{font-size:14.5px; font-weight:800; margin-bottom:2px; color:var(--ink);}
  .pkg-desc{font-size:11px; color:var(--muted); line-height:1.4; margin-bottom:12px; flex:1;}
  .pkg-price{font-size:19px; font-weight:800; color:var(--ink);}
  .pkg-price span{font-size:11px; font-weight:600; color:var(--muted);}
  .pkg-btn{
    margin-top:12px; width:100%; padding:9px; border-radius:5px; border:none;
    background:var(--yellow); color:#231C08; font-weight:800; font-size:12.5px; cursor:pointer;
  }
  .pkg-card.featured .pkg-btn{background:var(--green); color:#fff;}
  /* Brief "Added ✓" pop right after Subscribe is tapped */
  .pkg-btn-added{
    background:var(--green) !important; color:#fff !important; display:flex; align-items:center;
    justify-content:center; gap:5px; cursor:default; animation:addedPopIn .25s cubic-bezier(.3,1.4,.5,1);
  }
  /* Persistent "Subscribed" state once the plan is actually in the cart -
     stays until it's removed from the cart, per this account/session. */
  .pkg-btn-subscribed{
    background:var(--green-light) !important; color:var(--green-dim) !important;
    display:flex; align-items:center; justify-content:center; gap:5px; border:1px solid var(--green-dim);
    opacity:1; cursor:default;
  }

  .pkg-dots{display:flex; justify-content:center; gap:5px; margin-top:8px;}
  .pkg-dots span{width:5px; height:5px; border-radius:50%; background:var(--line);}
  .pkg-dots span.active{background:var(--green); width:14px; border-radius:3px;}
  .pkg-empty{padding:24px 4px; text-align:center; color:var(--muted); font-size:12.5px;}

  /* ---------- PRODUCT CARDS RAIL ---------- */
  .prod-rail-outer{overflow:hidden; margin:0 -18px; padding:0 18px;}
  .prod-rail{display:flex; gap:13px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px;}
  .prod-rail::-webkit-scrollbar{display:none;}
  .prod-card{
    flex:0 0 auto; width:164px; background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); overflow:hidden; box-shadow:0 2px 10px rgba(43,36,16,.05);
    transition:transform .15s;
  }
  .prod-card:active{transform:scale(.97);}
  .prod-card.prod-search-hit{outline:2.5px solid var(--brand,#f5a623); outline-offset:2px; box-shadow:0 0 0 6px rgba(245,166,35,.18); transition:box-shadow .3s, outline-color .3s;}
  .prod-thumb{
    height:110px; background:var(--card-hi); display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  /* Product photo fills the thumb box behind the disc/fav badges - needs to
     be explicitly positioned+z-indexed under them, otherwise an uploaded
     image (painted after them in DOM) visually covers the badges even
     though they're position:absolute. */
  .prod-thumb > img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  }
  .prod-thumb .fav{
    position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%;
    background:rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center; color:var(--muted);
    z-index:2;
  }
  .prod-thumb .disc{
    position:absolute; top:8px; left:8px; background:var(--green); color:#fff; font-size:9.5px; font-weight:800;
    padding:3px 7px; border-radius:5px; z-index:2;
  }
  .prod-car{width:100%; height:100%; position:relative;}
  .prod-car-track{
    width:100%; height:100%; display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .prod-car-track::-webkit-scrollbar{display:none;}
  .prod-car-slide{flex:0 0 100%; scroll-snap-align:start; height:100%;}
  .prod-car-slide img{width:100%; height:100%; object-fit:cover; display:block;}
  .prod-car-dots{
    position:absolute; bottom:6px; left:0; right:0; display:flex; justify-content:center; gap:4px; z-index:2;
  }
  .prod-car-dot{
    width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.6);
    box-shadow:0 0 0 .5px rgba(0,0,0,.1); transition:background .2s, transform .2s;
  }
  .prod-car-dot.active{background:#fff; transform:scale(1.3);}
  .prod-body{padding:10px 12px 12px;}
  .prod-name{font-size:12.5px; font-weight:700; line-height:1.3; margin-bottom:2px;}
  .prod-meta{font-size:10.5px; color:var(--muted); margin-bottom:8px;}
  .prod-bottom{display:flex; align-items:center; justify-content:space-between;}
  .prod-price{font-size:13.5px; font-weight:800;}
  .prod-price s{font-size:10px; font-weight:500; color:var(--muted); margin-right:4px;}
  .prod-add{
    width:26px; height:26px; border-radius:5px; background:var(--yellow); border:none;
    display:flex; align-items:center; justify-content:center; color:#231C08; cursor:pointer; flex-shrink:0;
  }

  /* Brief "Added ✓" confirmation shown right after the first tap, before
     settling into the persistent -/qty/+ stepper. */
  .prod-added{
    display:flex; align-items:center; gap:4px; padding:0 10px; height:26px; border-radius:6px;
    background:var(--green); border:none; color:#fff; font-size:10.5px; font-weight:800;
    flex-shrink:0; white-space:nowrap; cursor:default;
    animation:addedPopIn .25s cubic-bezier(.3,1.4,.5,1);
  }
  .prod-added svg{flex-shrink:0;}
  @keyframes addedPopIn{
    0%{transform:scale(.5); opacity:0;}
    60%{transform:scale(1.1); opacity:1;}
    100%{transform:scale(1);}
  }

  /* Live +/qty/- stepper that replaces .prod-add once an item is in the cart */
  .prod-stepper{
    display:flex; align-items:center; gap:0; background:var(--yellow); border-radius:6px;
    flex-shrink:0; overflow:hidden; animation:stepperPopIn .22s cubic-bezier(.3,1.4,.5,1);
  }
  .prod-step-btn{
    width:24px; height:26px; border:none; background:transparent; color:#231C08; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; line-height:1;
  }
  .prod-step-btn:active{ background:rgba(0,0,0,.08); }
  .prod-step-btn[disabled]{ opacity:.4; cursor:not-allowed; }
  .prod-step-qty{
    min-width:16px; text-align:center; font-size:12.5px; font-weight:800; color:#231C08;
    animation:stepperQtyBump .22s ease;
  }
  @keyframes stepperPopIn{
    0%{transform:scale(.6); opacity:0;}
    60%{transform:scale(1.08); opacity:1;}
    100%{transform:scale(1);}
  }
  @keyframes stepperQtyBump{
    0%{transform:scale(1.4);}
    100%{transform:scale(1);}
  }

  /* ---------- TRUST STRIP ---------- */
  .trust-strip{
    display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px;
  }
  .trust-item{
    background:var(--green-light); border-radius:var(--radius-sm); padding:14px 8px;
    display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  }
  .trust-item .ic{width:34px; height:34px; border-radius:5px; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--green-dim);}
  .trust-item span{font-size:10.5px; font-weight:700; color:#3A5842; line-height:1.3;}

  /* ---------- BOTTOM NAV ---------- */
  .bottomnav{
    position:absolute; left:0; right:0; bottom:0; height:var(--nav-h);
    background:#fff; border-top:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-around;
    padding-bottom:env(safe-area-inset-bottom); z-index:20;
    transition:transform .22s ease;
  }
  /* While a text field is focused (soft keyboard open), the nav is slid
     fully off-screen instead of being squashed/floated above the keyboard.
     #app's height shrinks with the keyboard on some browsers (dvh), which
     otherwise drags this bottom:0 bar up into the middle of the screen. */
  .bottomnav.kb-hidden{ transform:translateY(120%); }
  .nav-item{display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--muted); cursor:pointer; position:relative;}
  .nav-item.active{color:var(--green-dim);}
  .nav-item span{font-size:10px; font-weight:700;}
  .nav-item .nav-cart-badge{
    position:absolute; top:-6px; right:-10px; background:var(--yellow-deep); color:#231C08;
    font-size:9px; font-weight:800; min-width:15px; height:15px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; padding:0 3px;
  }
  .nav-fab{
    width:66px; height:66px; border-radius:18px; background:linear-gradient(150deg,var(--yellow),var(--yellow-deep));
    display:flex; align-items:center; justify-content:center; color:#231C08; margin-top:-33px;
    box-shadow:0 6px 16px rgba(232,164,0,.35); cursor:pointer; position:relative;
    transition:transform .18s cubic-bezier(.34,1.56,.64,1);
  }
  .nav-fab svg{width:28px; height:28px;}
  .nav-fab:active{transform:scale(.9);}
  .nav-fab .fab-cart-badge{
    position:absolute; top:-6px; right:-6px; background:var(--danger); color:#fff;
    font-size:10px; font-weight:800; min-width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; padding:0 3px; border:2px solid var(--bg);
  }

  /* ---------- WISHLIST HEART ---------- */
  .fav{cursor:pointer; transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
  .fav.liked{color:var(--danger); fill:var(--danger);}
  .fav.pop{animation:heartPop .4s cubic-bezier(.34,1.56,.64,1);}
  @keyframes heartPop{
    0%{transform:scale(1);}
    35%{transform:scale(1.5);}
    60%{transform:scale(.85);}
    100%{transform:scale(1);}
  }
  .icon-btn.pulse2{animation:iconPulse .4s ease;}
  @keyframes iconPulse{
    0%{transform:scale(1);} 40%{transform:scale(1.25);} 100%{transform:scale(1);}
  }

  /* ---------- CART / WISHLIST / PAYMENT SCREENS ---------- */
  .screen-header-row{display:flex; align-items:center; gap:10px; margin-bottom:4px;}
  .back-btn{
    width:34px; height:34px; border-radius:50%; background:var(--card-hi); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--ink); cursor:pointer; flex-shrink:0;
  }
  .wish-grid{display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:14px;}
  .wish-empty, .cart-empty{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:60px 20px; text-align:center; gap:8px; color:var(--muted);
  }
  .wish-empty-title{font-weight:800; font-size:15px; color:var(--ink);}
  .wish-empty-sub{font-size:12.5px; max-width:220px;}

  /* Payment screen */
  .pay-summary-card{
    background:var(--card); border:1px solid var(--line); border-radius:5px; padding:16px; margin-top:14px;
  }
  .pay-row{display:flex; justify-content:space-between; font-size:13px; padding:6px 0; color:var(--muted);}
  .pay-row b{color:var(--ink);}
  .pay-row.total{border-top:1px dashed var(--line); margin-top:6px; padding-top:12px; font-size:15px; font-weight:800; color:var(--ink);}
  .pay-methods{margin-top:18px; display:flex; flex-direction:column; gap:10px;}
  .pay-method{
    display:flex; align-items:center; gap:12px; padding:14px; border-radius:5px; border:1.5px solid var(--line);
    background:var(--card); cursor:pointer; transition:all .15s;
  }
  .pay-method.selected{border-color:var(--yellow-deep); background:var(--card-hi); box-shadow:0 2px 10px rgba(232,164,0,.15);}
  .pay-method .pm-ic{
    width:38px; height:38px; border-radius:5px; background:var(--card-hi); display:flex; align-items:center;
    justify-content:center; flex-shrink:0; color:var(--yellow-deep);
  }
  .pay-method .pm-label{font-weight:700; font-size:13.5px;}
  .pay-method .pm-sub{font-size:11px; color:var(--muted); margin-top:1px;}
  .pay-method .pm-radio{
    margin-left:auto; width:18px; height:18px; border-radius:50%; border:2px solid var(--line); flex-shrink:0;
    position:relative;
  }
  .pay-method.selected .pm-radio{border-color:var(--yellow-deep);}
  .pay-method.selected .pm-radio::after{
    content:''; position:absolute; inset:3px; border-radius:50%; background:var(--yellow-deep);
  }
  .pay-cta{
    margin-top:22px; width:100%; padding:15px; border-radius:5px; border:none; background:var(--green);
    color:#fff; font-weight:800; font-size:14.5px; cursor:pointer; box-shadow:0 6px 16px rgba(76,175,109,.35);
    transition:transform .12s;
  }
  .pay-cta:active{transform:scale(.97);}

  /* Success overlay */
  .success-overlay{
    position:absolute; inset:0; background:rgba(255,253,246,.97); z-index:50; display:none;
    flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px;
  }
  .success-overlay.show{display:flex; animation:fadeIn .3s ease;}
  @keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
  .success-check{
    width:84px; height:84px; border-radius:50%; background:var(--green-light); display:flex; align-items:center;
    justify-content:center; margin-bottom:18px; animation:checkPop .5s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes checkPop{0%{transform:scale(0);} 70%{transform:scale(1.15);} 100%{transform:scale(1);}}
  .success-title{font-weight:800; font-size:18px; margin-bottom:6px;}
  .success-sub{font-size:13px; color:var(--muted); max-width:260px; margin-bottom:22px;}
  .success-cta{padding:13px 26px; border-radius:5px; border:none; background:var(--yellow); font-weight:800; cursor:pointer;}

  /* =========================================================
     SUBSCRIPTION MANAGEMENT
  ========================================================= */
  .sub-topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 16px 6px;}
  .sub-topbar h2{font-size:17px; margin:0;}
  .sub-bell{position:relative; width:38px; height:38px; border-radius:50%; background:var(--card-hi); display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid var(--line);}
  .sub-bell svg{width:18px; height:18px;}
  .sub-bell-dot{position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%; background:var(--danger); border:2px solid var(--card); display:none;}
  .sub-bell-dot.show{display:block;}
  .sub-bell.ring svg{animation:bellRing .5s ease;}
  @keyframes bellRing{0%,100%{transform:rotate(0);} 20%{transform:rotate(-14deg);} 40%{transform:rotate(12deg);} 60%{transform:rotate(-8deg);} 80%{transform:rotate(5deg);}}

  .sub-plan-card{margin:10px 16px 4px; padding:16px; border-radius:12px; background:linear-gradient(135deg,var(--green),var(--green-dim)); color:#fff; position:relative; overflow:hidden;}
  .sub-plan-card::after{content:''; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.08);}
  .sub-plan-name{font-weight:800; font-size:15px; margin-bottom:2px;}
  .sub-plan-sub{font-size:11.5px; opacity:.85; margin-bottom:12px;}
  .sub-plan-stats{display:flex; gap:18px;}
  .sub-plan-stat b{display:block; font-size:16px;}
  .sub-plan-stat span{font-size:10.5px; opacity:.8;}

  .sub-legend{display:flex; gap:14px; padding:14px 16px 4px; font-size:11px; color:var(--muted); flex-wrap:wrap;}
  .sub-legend-item{display:flex; align-items:center; gap:5px;}
  .sub-legend-dot{width:9px; height:9px; border-radius:3px;}

  .sub-cal-wrap{padding:8px 16px 4px;}
  .sub-cal-head{display:flex; align-items:center; justify-content:space-between; padding:6px 2px 10px; font-weight:800; font-size:13.5px;}
  .sub-cal-nav{width:28px; height:28px; border-radius:50%; background:var(--card-hi); display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid var(--line);}
  .sub-cal-dow{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:10px; color:var(--muted); font-weight:700; margin-bottom:6px;}
  .sub-cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
  .sub-day{aspect-ratio:1; border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:12px; font-weight:700; cursor:pointer; position:relative; background:var(--card-hi); border:1px solid var(--line); color:var(--ink); transition:transform .12s;}
  .sub-day:active{transform:scale(.9);}
  .sub-day.empty{background:transparent; border:none; cursor:default;}
  .sub-day.past-delivered{background:var(--green-light); border-color:#CFEBD8; color:var(--green-dim);}
  .sub-day.past-skipped{background:#FBE4E0; border-color:#F5CFC8; color:var(--danger);}
  .sub-day.today{outline:2px solid var(--yellow-deep); outline-offset:1px;}
  .sub-day.upcoming-normal{background:var(--card); }
  .sub-day.upcoming-skip{background:#FBE4E0; border-color:#F5CFC8; color:var(--danger);}
  .sub-day .sub-day-dot{width:5px; height:5px; border-radius:50%; margin-top:2px;}
  .sub-day .sub-day-qty{font-size:7.5px; font-weight:800; color:var(--yellow-deep); margin-top:1px; letter-spacing:.2px;}
  .sub-day.past-delivered .sub-day-dot{background:var(--green-dim);}
  .sub-day.past-skipped .sub-day-dot{background:var(--danger);}
  .sub-day.locked{opacity:.55;}
  .sub-day.just-updated{animation:dayPulse .5s ease;}
  @keyframes dayPulse{0%{transform:scale(1);} 40%{transform:scale(1.22);} 100%{transform:scale(1);}}

  .sub-cutoff-note{display:flex; align-items:center; gap:8px; margin:14px 16px 0; padding:10px 12px; border-radius:8px; background:var(--card-hi); font-size:11.5px; color:var(--muted); border:1px solid var(--line);}

  /* Day adjust bottom sheet */
  .sheet-backdrop{position:fixed; inset:0; background:rgba(43,36,16,.45); z-index:210; display:none; align-items:flex-end; justify-content:center;}
  .sheet-backdrop.show{display:flex; animation:fadeIn .2s ease;}
  .adjust-sheet{background:var(--card); width:100%; max-width:480px; border-radius:16px 16px 0 0; padding:20px 18px 24px; animation:slideUp .28s cubic-bezier(.22,.9,.3,1);}
  .adjust-sheet-handle{width:36px; height:4px; border-radius:2px; background:var(--line); margin:0 auto 14px;}
  .adjust-sheet h3{margin:0 0 3px; font-size:15.5px;}
  .adjust-sheet p{margin:0 0 16px; font-size:12px; color:var(--muted);}
  .adjust-toggle{display:flex; background:var(--card-hi); border-radius:10px; padding:4px; margin-bottom:16px;}
  .adjust-toggle-btn{flex:1; text-align:center; padding:10px 4px; border-radius:8px; font-size:12.5px; font-weight:700; cursor:pointer; color:var(--muted);}
  .adjust-toggle-btn.active{background:var(--card); color:var(--ink); box-shadow:0 2px 6px rgba(0,0,0,.06);}
  .adjust-days-label{font-size:12px; font-weight:700; color:var(--muted); margin-bottom:8px;}
  .adjust-days-row{display:flex; gap:8px; margin-bottom:18px;}
  .adjust-day-chip{flex:1; text-align:center; padding:10px 4px; border-radius:9px; border:1.5px solid var(--line); font-size:12.5px; font-weight:700; cursor:pointer; background:var(--card);}
  .adjust-qty-chip{flex:1; text-align:center; padding:10px 4px; border-radius:9px; border:1.5px solid var(--line); font-size:12.5px; font-weight:700; cursor:pointer; background:var(--card); color:var(--ink);}
  .adjust-qty-chip.selected{border-color:var(--green-dim); background:var(--green-light); color:var(--green-dim);}
  .adjust-day-chip.selected{border-color:var(--danger); background:#FBE4E0; color:var(--danger);}
  .adjust-day-chip[disabled]{opacity:.4; pointer-events:none;}
  .lock-icon{width:56px; height:56px; border-radius:50%; background:#FBE4E0; display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}
  .custom-days-stepper{display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:10px;}
  .custom-days-btn{width:38px; height:38px; border-radius:50%; background:var(--card-hi); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; cursor:pointer; color:var(--ink); user-select:none;}
  .custom-days-btn:active{background:var(--line);}
  .custom-days-value{font-size:22px; font-weight:800; min-width:32px; text-align:center;}
  .adjust-range-preview{text-align:center; font-size:12px; color:var(--muted); margin-bottom:14px; padding:8px; background:var(--card-hi); border-radius:8px;}
  .adjust-extend-note{font-size:11px; color:var(--muted); background:var(--green-light); border:1px solid #CFEBD8; border-radius:8px; padding:8px 10px; margin-bottom:16px; line-height:1.4;}

  .swipe-track{position:relative; height:52px; border-radius:26px; background:var(--card-hi); border:1.5px solid var(--line); overflow:hidden; user-select:none;}
  .swipe-track-label{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; color:var(--muted); letter-spacing:.3px; pointer-events:none;}
  .swipe-fill{position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,#FBE4E0,#F5CFC8); border-radius:26px; pointer-events:none; transition:width .05s linear;}
  .swipe-thumb{position:absolute; top:3px; left:3px; width:46px; height:46px; border-radius:50%; background:var(--danger); display:flex; align-items:center; justify-content:center; cursor:grab; box-shadow:0 3px 10px rgba(224,80,60,.4); touch-action:none;}
  .swipe-thumb svg{width:20px; height:20px; stroke:#fff;}
  .swipe-thumb.snapping{transition:left .25s cubic-bezier(.22,.9,.3,1);}
  .swipe-track.locked .swipe-thumb{background:var(--muted); cursor:not-allowed; box-shadow:none;}
  .swipe-track.locked .swipe-track-label{opacity:.6;}
  .swipe-cutoff-msg{margin-top:10px; font-size:11.5px; color:var(--danger); text-align:center; display:none;}
  .swipe-cutoff-msg.show{display:block;}
  .adjust-cancel{width:100%; text-align:center; margin-top:14px; font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; padding:6px;}

  /* Confirmation tick overlay (reuses success-overlay pattern but scoped) */
  .adjust-confirm-overlay{position:fixed; inset:0; background:rgba(255,253,246,.97); z-index:220; display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px;}
  .adjust-confirm-overlay.show{display:flex; animation:fadeIn .25s ease;}

  /* Notifications panel */
  .notif-backdrop{position:fixed; inset:0; background:rgba(43,36,16,.4); z-index:200; display:none; align-items:stretch; justify-content:flex-end;}
  .notif-backdrop.show{display:flex; animation:fadeIn .2s ease;}
  .notif-panel{background:var(--card); width:86%; max-width:360px; height:100%; margin-top:0; border-radius:0; padding:0; max-height:none; overflow-y:auto; animation:notifSlideIn .28s cubic-bezier(.22,.9,.3,1); box-shadow:-8px 0 24px rgba(0,0,0,.18); display:flex; flex-direction:column;}
  @keyframes notifSlideIn{from{transform:translateX(100%);} to{transform:translateX(0);}}
  .notif-panel-header{display:flex; align-items:center; justify-content:space-between; padding:16px 16px 14px; border-bottom:1px solid var(--line); flex-shrink:0; position:sticky; top:0; background:var(--card); z-index:1;}
  .notif-panel-header h4{margin:0; font-size:15.5px;}
  .notif-panel-close{width:32px; height:32px; border-radius:50%; background:var(--card-hi); display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid var(--line); flex-shrink:0;}
  .notif-panel-close svg{width:15px; height:15px;}
  .notif-panel-body{padding:10px 6px 20px; flex:1;}
  .notif-item{display:flex; gap:10px; padding:10px 12px; border-radius:10px; margin:0 6px 4px;}
  .notif-item:active{background:var(--card-hi);}
  .notif-icon{width:34px; height:34px; border-radius:50%; background:var(--card-hi); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .notif-icon svg{width:16px; height:16px;}
  .notif-text{font-size:12px;}
  .notif-title{font-weight:700; margin-bottom:2px;}
  .notif-time{color:var(--muted); font-size:10.5px; margin-top:2px;}
  .notif-empty{text-align:center; padding:30px 10px; color:var(--muted); font-size:12.5px;}

  /* Renewal reminder popup */
  .renew-backdrop{position:fixed; inset:0; background:rgba(43,36,16,.5); z-index:215; display:none; align-items:center; justify-content:center; padding:20px;}
  .renew-backdrop.show{display:flex; animation:fadeIn .25s ease;}
  .renew-card{background:var(--card); width:100%; max-width:340px; border-radius:16px; padding:24px 20px; text-align:center; animation:checkPop .4s cubic-bezier(.34,1.56,.64,1);}
  .renew-icon{width:64px; height:64px; border-radius:50%; background:#FFF3D6; display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}
  .renew-icon svg{width:30px; height:30px; stroke:var(--yellow-deep);}
  .renew-card h3{margin:0 0 6px; font-size:16px;}
  .renew-card p{margin:0 0 20px; font-size:12.5px; color:var(--muted);}
  .renew-btns{display:flex; gap:10px;}
  .renew-btn{flex:1; padding:12px 6px; border-radius:9px; border:none; font-weight:800; font-size:12.5px; cursor:pointer;}
  .renew-btn.primary{background:var(--yellow); color:var(--ink);}
  .renew-btn.ghost{background:var(--card-hi); color:var(--muted); border:1px solid var(--line);}

  /* Location modal */
  .loc-modal-backdrop{
    position:absolute; inset:0; background:rgba(43,36,16,.45); z-index:60; display:none;
    align-items:flex-end; justify-content:center;
  }
  .loc-modal-backdrop.show{display:flex; animation:fadeIn .2s ease;}
  .loc-modal{
    background:var(--card); width:100%; max-width:480px; border-radius:16px 16px 0 0; padding:22px 20px 26px;
    animation:slideUp .28s cubic-bezier(.22,.9,.3,1);
  }
  @keyframes slideUp{from{transform:translateY(100%);} to{transform:translateY(0);}}
  .loc-modal h3{margin:0 0 6px; font-size:16px;}
  .loc-modal p{margin:0 0 18px; font-size:12.5px; color:var(--muted);}
  .loc-current{
    display:flex; align-items:center; gap:10px; padding:12px; border-radius:5px; background:var(--card-hi);
    margin-bottom:14px; font-size:13px; font-weight:600;
  }
  .loc-btn{
    width:100%; padding:14px; border-radius:5px; border:none; background:var(--yellow); font-weight:800;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px;
  }
  .loc-btn.loading{opacity:.75; pointer-events:none;}

  /* ---------- DETAILS SCREEN ---------- */
  .det-block{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:14px; margin-bottom:12px;
  }
  .det-block-title{font-size:13px; font-weight:800; margin-bottom:10px;}
  .det-addr-card{
    display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:var(--radius-sm);
    border:1.5px solid var(--line); margin-bottom:8px; cursor:pointer; transition:border-color .15s, background .15s;
  }
  .det-addr-card.selected{border-color:var(--green-dim); background:var(--green-light);}
  .det-addr-card .det-addr-ic{flex-shrink:0; margin-top:2px;}
  .det-addr-card .det-addr-label{font-weight:700; font-size:13.5px;}
  .det-addr-card .det-addr-full{font-size:12px; color:var(--muted); margin-top:2px; line-height:1.4;}
  .det-addr-card .det-addr-radio{
    width:18px; height:18px; border-radius:50%; border:2px solid var(--line); flex-shrink:0; margin-top:2px;
    display:flex; align-items:center; justify-content:center;
  }
  .det-addr-card.selected .det-addr-radio{border-color:var(--green-dim);}
  .det-addr-card.selected .det-addr-radio::after{content:''; width:9px; height:9px; border-radius:50%; background:var(--green-dim);}
  .det-add-btn{
    width:100%; background:none; border:1.5px dashed var(--line); border-radius:var(--radius-sm);
    padding:10px; font-weight:700; font-size:13px; color:var(--green-dim); cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .det-input{
    width:100%; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px;
    font-family:inherit; font-size:13.5px; margin-bottom:8px; background:var(--bg); color:var(--ink); resize:vertical;
  }
  .det-input:last-child{margin-bottom:0;}
  .det-input:focus{outline:none; border-color:var(--yellow-deep);}
  /* Address text field while it's being re-fetched after a pin drag */
  .det-input.addr-updating{
    border-color:var(--green-dim); background:var(--green-light);
    animation:addrUpdatingPulse 1s ease-in-out infinite;
  }
  @keyframes addrUpdatingPulse{
    0%,100%{ opacity:1; }
    50%{ opacity:.6; }
  }
  .det-field-row{display:flex; gap:8px; margin-bottom:8px;}
  .det-field-row .det-input{margin-bottom:0;}
  .det-geo-status{
    display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--green-dim);
    font-weight:700; margin-bottom:8px; padding:6px 10px; background:var(--green-light); border-radius:var(--radius-sm);
  }
  .det-geo-status .geo-dot{width:6px; height:6px; border-radius:50%; background:var(--green-dim); flex-shrink:0; animation:etaPulse 1.2s infinite ease-in-out;}
  .det-geo-map-wrap{
    position:relative; width:100%; height:200px; border-radius:var(--radius-sm); margin-bottom:10px;
    overflow:hidden; border:1.5px solid var(--line);
  }
  .det-geo-map{ width:100%; height:100%; }
  .det-geo-map .leaflet-control-attribution{font-size:9px;}
  /* Google-Maps-style "you are here" blue dot, drawn at the raw GPS fix
     (not the adjustable green pin). Pulsing halo mirrors the live-location
     marker people already recognize from Google Maps/Uber. */
  .gps-blue-dot{
    width:16px; height:16px; border-radius:50%; background:#4285F4; border:3px solid #fff;
    box-shadow:0 0 0 2px rgba(66,133,244,.35), 0 1px 4px rgba(0,0,0,.35);
    position:relative;
  }
  .gps-blue-dot::after{
    content:''; position:absolute; inset:-10px; border-radius:50%; background:rgba(66,133,244,.35);
    animation:gpsDotPulse 1.8s ease-out infinite;
  }
  @keyframes gpsDotPulse{
    0%{ transform:scale(.4); opacity:.8; }
    100%{ transform:scale(1.8); opacity:0; }
  }
  /* Pin stays visually fixed at the exact center of the card. Its SVG tip
     (bottom point) is what marks the true lat/lng — translate so the tip,
     not the whole icon, sits on the center point. */
  .det-geo-pin{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-100%);
    z-index:500; pointer-events:none; transition:transform .15s cubic-bezier(.34,1.56,.64,1);
    filter:drop-shadow(0 3px 4px rgba(43,36,16,.35));
  }
  .det-geo-pin.dragging{ transform:translate(-50%,-118%) scale(1.06); }
  .det-geo-recenter{
    position:absolute; right:8px; bottom:8px; width:34px; height:34px; border-radius:50%;
    background:#fff; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center;
    color:var(--green-dim); cursor:pointer; z-index:500; box-shadow:0 2px 6px rgba(43,36,16,.18);
  }
  .det-geo-recenter:active{transform:scale(.92);}
  .det-inline-actions{display:flex; gap:8px; margin-top:4px;}
  .det-cancel-btn, .det-save-btn{
    flex:1; padding:10px; border-radius:var(--radius-sm); font-weight:700; font-size:13px; border:none; cursor:pointer;
  }
  .det-cancel-btn{background:var(--card-hi); color:var(--muted);}
  .det-save-btn{background:var(--green-dim); color:#fff;}
  .det-note-chips{display:flex; flex-wrap:wrap; gap:8px;}
  .det-chip{
    border:1.5px solid var(--line); background:var(--bg); border-radius:20px; padding:7px 13px;
    font-size:12px; font-weight:600; color:var(--ink); cursor:pointer;
  }
  .det-chip.selected{background:var(--yellow); border-color:var(--yellow-deep); color:var(--ink);}
  .det-time-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
  .time-chip.selected{background:var(--green-dim); border-color:var(--green-dim); color:#fff;}
  .det-skip-row{display:flex; align-items:center; justify-content:space-between; gap:12px;}
  .det-skip-title{font-weight:700; font-size:13px;}
  .det-skip-sub{font-size:11.5px; color:var(--muted); margin-top:2px;}
  .det-skip-btn{
    flex-shrink:0; padding:8px 18px; border-radius:5px; border:1.5px solid var(--line);
    background:var(--bg); color:var(--ink); font-weight:700; font-size:12.5px; cursor:pointer;
  }
  .det-skip-btn.active{background:var(--danger); border-color:var(--danger); color:#fff;}
  .loc-cancel{
    width:100%; padding:12px; margin-top:8px; border-radius:5px; border:none; background:transparent;
    color:var(--muted); font-weight:700; cursor:pointer; font-size:13px;
  }
  .spinner{
    width:15px; height:15px; border-radius:50%; border:2px solid rgba(35,28,8,.25); border-top-color:#231C08;
    animation:spin .7s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}

  /* Toast */
  .toast{
    position:absolute; left:50%; bottom:calc(var(--nav-h) + 14px); transform:translateX(-50%) translateY(20px);
    background:#2B2410; color:#fff; padding:11px 18px; border-radius:5px; font-size:12.5px; font-weight:600;
    box-shadow:0 8px 20px rgba(0,0,0,.25); z-index:70; opacity:0; pointer-events:none; transition:all .3s ease;
    white-space:nowrap;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  /* Ripple for buttons */
  .ripple{position:relative; overflow:hidden;}
  .ripple-effect{
    position:absolute; border-radius:50%; background:rgba(255,255,255,.55); transform:scale(0);
    animation:rippleAnim .5s ease-out; pointer-events:none;
  }
  @keyframes rippleAnim{to{transform:scale(2.6); opacity:0;}}

  .nav-item{transition:transform .15s;}
  .nav-item:active{transform:scale(.92);}

  /* ---------- LOGIN GATE ---------- */
  .login-gate{
    position:fixed; inset:0; z-index:10000; background:var(--bg);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:32px 28px; max-width:480px; margin:0 auto;
  }
  .login-gate{display:none;}
  .login-gate.show{display:flex;}
  .login-logo{width:88px; height:88px; margin-bottom:18px;}
  .login-logo img{width:100%; height:100%; object-fit:contain;}
  .login-title{font-size:20px; font-weight:800; margin-bottom:4px; text-align:center;}
  .login-sub{font-size:13px; color:var(--muted); text-align:center; margin-bottom:28px; line-height:1.5;}
  .google-btn{
    width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
    background:#fff; border:1.5px solid var(--line); border-radius:var(--radius);
    padding:13px; font-weight:700; font-size:14px; color:var(--ink); cursor:pointer;
  }
  .google-btn:active{transform:scale(.98);}
  .phone-login-btn{
    width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--card-hi); border:1.5px solid var(--line); border-radius:var(--radius);
    padding:13px; font-weight:700; font-size:14px; color:var(--ink); cursor:pointer; margin-top:10px;
  }
  .phone-login-btn:active{transform:scale(.98);}
  .login-step{width:100%; display:none;}
  .login-step.active{display:block;}
  .login-divider{display:flex; align-items:center; gap:10px; margin:16px 0; color:var(--muted); font-size:12px; width:100%;}
  .login-divider::before, .login-divider::after{content:''; flex:1; height:1px; background:var(--line);}
  .login-gate-back{position:absolute; top:22px; left:22px; cursor:pointer; padding:6px;}
  .login-gate-back svg{display:block;}
  .login-otp-boxes{display:flex; gap:8px; justify-content:center; margin-bottom:16px;}
  .login-otp-boxes input{
    width:42px; height:48px; text-align:center; font-size:18px; font-weight:700;
    border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--ink);
  }
  .login-otp-boxes input:focus{outline:none; border-color:var(--yellow-deep);}
  .login-link-btn{background:none; border:none; color:var(--green-dim); font-weight:700; font-size:12.5px; cursor:pointer; display:block; margin:12px auto 0; text-align:center;}

  /* =========================================================
     PAYMENT RESUME BANNER (failed / abandoned payment, 2-min window)
  ========================================================= */
  .pay-resume-banner{
    display:none; align-items:center; gap:10px; background:#FFF3EC; border:1px solid #F6C7B2;
    border-radius:var(--radius); padding:12px 12px; margin:2px 0 14px;
  }
  .pay-resume-banner.show{display:flex; animation:screenIn .25s ease;}
  .pay-resume-ic{width:32px; height:32px; border-radius:50%; background:#FFE1D1; color:var(--danger); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .pay-resume-text{flex:1; min-width:0;}
  .pay-resume-title{font-size:12.5px; font-weight:800; color:var(--ink);}
  .pay-resume-sub{font-size:11px; color:var(--muted); margin-top:1px;}
  .pay-resume-sub b{color:var(--danger);}
  .pay-resume-btn{
    flex-shrink:0; background:var(--ink); color:#fff; border:none; border-radius:var(--radius-sm);
    font-size:12px; font-weight:800; padding:9px 14px; cursor:pointer;
  }
  .success-cta.ghost{background:transparent; color:var(--ink); box-shadow:none; border:1.5px solid var(--line);}

  /* =========================================================
     LIVE TRACKING SCREEN
  ========================================================= */
  .track-map-wrap{position:relative; border-radius:14px; overflow:hidden; height:260px; margin-bottom:14px; border:1px solid var(--line); box-shadow:0 2px 10px rgba(43,36,16,.06);}
  .track-map{width:100%; height:100%; background:var(--card-hi);}
  .track-eta-pill{
    position:absolute; top:12px; left:12px; background:rgba(43,36,16,.88); color:#fff; font-size:12px; font-weight:800;
    padding:7px 12px; border-radius:20px; z-index:500; backdrop-filter:blur(4px);
  }
  .rider-marker{
    width:34px; height:34px; border-radius:50%; background:var(--green-dim); border:3px solid #fff;
    box-shadow:0 3px 10px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; color:#fff;
    transition:transform 1s linear;
  }
  .rider-marker svg{width:18px; height:18px;}
  .home-marker{
    width:26px; height:26px; border-radius:50% 50% 50% 0; background:var(--yellow-deep); border:2px solid #fff;
    transform:rotate(-45deg); box-shadow:0 2px 6px rgba(0,0,0,.25);
  }
  .track-progress{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; padding:4px 2px;}
  .track-step{flex:1; text-align:center; position:relative;}
  .track-step::before{
    content:''; position:absolute; top:7px; left:-50%; width:100%; height:2px; background:var(--line); z-index:0;
  }
  .track-step:first-child::before{display:none;}
  .track-step-dot{
    width:16px; height:16px; border-radius:50%; background:#fff; border:2.5px solid var(--line); margin:0 auto 6px;
    position:relative; z-index:1; transition:background .3s, border-color .3s;
  }
  .track-step.done .track-step-dot{background:var(--green-dim); border-color:var(--green-dim);}
  .track-step.done::before{background:var(--green-dim);}
  .track-step.active .track-step-dot{background:var(--yellow); border-color:var(--yellow-deep); box-shadow:0 0 0 4px rgba(253,194,2,.25); animation:pulseDot 1.2s ease-in-out infinite;}
  @keyframes pulseDot{0%,100%{box-shadow:0 0 0 4px rgba(253,194,2,.25);} 50%{box-shadow:0 0 0 8px rgba(253,194,2,.08);}}
  .track-step-label{font-size:10px; font-weight:700; color:var(--muted); line-height:1.25;}
  .track-step.done .track-step-label, .track-step.active .track-step-label{color:var(--ink);}
  .track-rider-card{
    display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:13px; box-shadow:0 2px 10px rgba(43,36,16,.05);
  }
  .track-rider-avatar{width:42px; height:42px; border-radius:50%; background:var(--green-light); color:var(--green-dim); font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .track-rider-info{flex:1; min-width:0;}
  .track-rider-name{font-size:13.5px; font-weight:800; color:var(--ink);}
  .track-rider-sub{font-size:11.5px; color:var(--muted); margin-top:1px;}
  .track-rider-call{width:40px; height:40px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}

  /* order cards: status variants + actions row */
  .order-status.pending{background:#FFF3EC; color:var(--danger);}
  .order-status.active{background:rgba(253,194,2,.18); color:var(--yellow-deep);}
  .order-actions{display:flex; gap:8px; margin-top:8px;}
  .order-actions .order-link{border:1px solid var(--line); border-radius:var(--radius-sm); padding:6px 10px;}
  .order-empty{text-align:center; color:var(--muted); font-size:12.5px; padding:40px 10px;}

  /* ---------- Live delivery card (Orders screen) ----------
     One rich card per delivery slot (morning/afternoon), each with its
     own embedded mini live-tracking map, distance/ETA readout and a
     direct call button - shown for any order currently out for delivery. */
  .live-order-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:14px; margin-bottom:14px; box-shadow:0 2px 12px rgba(43,36,16,.07);
  }
  .live-order-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px;}
  .live-order-slot{font-size:13.5px; font-weight:800; color:var(--ink);}
  .live-order-window{font-size:11px; color:var(--muted); margin-top:2px;}
  .live-order-eta-pill{
    background:rgba(253,194,2,.18); color:var(--yellow-deep); font-size:11px; font-weight:800;
    padding:5px 10px; border-radius:20px; white-space:nowrap; flex-shrink:0;
  }
  .live-order-eta-pill.delivered{background:var(--green-light); color:var(--green-dim);}
  .live-order-map{width:100%; height:150px; border-radius:12px; overflow:hidden; background:var(--card-hi); margin-bottom:10px; position:relative;}
  /* Compact Leaflet zoom control for the small mini-maps - default
     Leaflet buttons are sized for full-screen maps and look oversized here. */
  .live-order-map .leaflet-control-zoom{ transform:scale(.8); transform-origin:bottom right; margin:0 4px 4px 0 !important; }
  .live-order-map .leaflet-control-zoom a{ box-shadow:0 1px 4px rgba(0,0,0,.2); }
  .live-order-stats{display:flex; gap:8px; margin-bottom:12px;}
  .live-order-stat{
    flex:1; text-align:center; background:var(--card-hi); border-radius:var(--radius-sm); padding:8px 6px; min-width:0;
  }
  .live-order-stat span{display:block; font-size:12.5px; font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .live-order-stat small{display:block; font-size:9.5px; color:var(--muted); margin-top:2px;}
  .live-order-rider{display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:10px;}
  .live-order-rider-avatar{width:36px; height:36px; border-radius:50%; background:var(--green-light); color:var(--green-dim); font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .live-order-rider-info{flex:1; min-width:0;}
  .live-order-rider-name{font-size:12.5px; font-weight:800; color:var(--ink);}
  .live-order-rider-sub{font-size:10.5px; color:var(--muted); margin-top:1px;}
  .live-order-call-btn{
    display:flex; align-items:center; gap:5px; background:var(--green); color:#fff; font-size:11.5px; font-weight:800;
    padding:8px 12px; border-radius:20px; flex-shrink:0; text-decoration:none;
  }
  .live-order-call-btn:active{transform:scale(.95);}
  .live-order-actions{display:flex; gap:8px;}
  .live-order-actions .order-link{border:1px solid var(--line); border-radius:var(--radius-sm); padding:6px 10px; font-size:11.5px;}

  /* Delivery-bike marker used inside the mini live-tracking map - a small
     moving icon riding the route toward the house, Swiggy/Zomato style. */
  .order-bike-marker{
    width:30px; height:30px; border-radius:50%; background:var(--yellow-deep); border:2.5px solid #fff;
    box-shadow:0 2px 8px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; color:#231C08;
    transition:transform .7s linear; animation:bikeBob 1s ease-in-out infinite;
  }
  @keyframes bikeBob{0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); }}

  /* =========================================================
     BILL / INVOICE MODAL
  ========================================================= */
  .bill-backdrop{
    position:fixed; inset:0; background:rgba(20,15,4,.55); z-index:900; display:none;
    align-items:flex-end; justify-content:center;
  }
  .bill-backdrop.show{display:flex; animation:fadeIn .2s ease;}
  .bill-sheet{width:100%; max-width:420px; max-height:88vh; overflow-y:auto; background:var(--bg); border-radius:18px 18px 0 0; padding:16px 16px 22px; position:relative; animation:sheetUp .25s ease;}
  @keyframes sheetUp{from{transform:translateY(30px); opacity:.4;} to{transform:translateY(0); opacity:1;}}
  .bill-close{position:absolute; top:14px; right:14px; z-index:2; width:30px; height:30px; border-radius:50%; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .bill-paper{
    background:#fff; border-radius:10px; padding:22px 18px; position:relative; overflow:hidden;
    box-shadow:0 4px 20px rgba(43,36,16,.10); border:1px solid var(--line);
  }
  .bill-stamp{
    position:absolute; top:56px; right:8px; border:3px solid var(--green-dim); color:var(--green-dim);
    font-size:20px; font-weight:900; letter-spacing:2px; padding:6px 14px; border-radius:8px;
    transform:rotate(-18deg); opacity:.75; text-transform:uppercase;
  }
  .bill-stamp.failed{border-color:var(--danger); color:var(--danger);}
  .bill-head{text-align:center; margin-bottom:14px;}
  .bill-logo{width:36px; height:36px; border-radius:8px; object-fit:cover; margin-bottom:6px;}
  .bill-brand{font-size:16px; font-weight:800; color:var(--ink);}
  .bill-brand-sub{font-size:10.5px; color:var(--muted); margin-top:2px;}
  .bill-meta{display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; font-size:11px; margin-bottom:10px;}
  .bill-meta div{display:flex; flex-direction:column; gap:2px;}
  .bill-meta span{color:var(--muted);}
  .bill-meta b{color:var(--ink); font-size:12px;}
  .bill-divider{border-top:1px dashed var(--line); margin:12px 0;}
  .bill-table{width:100%; border-collapse:collapse; font-size:12px;}
  .bill-table th{text-align:left; color:var(--muted); font-weight:700; font-size:10.5px; padding-bottom:6px; text-transform:uppercase;}
  .bill-table td{padding:5px 0; color:var(--ink);}
  .bill-table th:last-child, .bill-table td:last-child{text-align:right;}
  .bill-table th:nth-child(2), .bill-table td:nth-child(2){text-align:center;}
  .bill-totals div{display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-bottom:5px;}
  .bill-totals b{color:var(--ink);}
  .bill-grand{font-size:14.5px !important; margin-top:6px; padding-top:8px; border-top:1px solid var(--line);}
  .bill-grand b{color:var(--green-dim); font-weight:900;}
  .bill-foot{text-align:center; font-size:10px; color:var(--muted); margin-top:16px; line-height:1.4;}
  .bill-print-btn{
    width:100%; margin-top:14px; background:var(--yellow); border:none; border-radius:var(--radius);
    padding:13px; font-weight:800; font-size:13.5px; color:#231C08; cursor:pointer;
  }
  @media print{
    body > *:not(.bill-backdrop){display:none !important;}
    .bill-backdrop{position:static; background:none; display:block !important;}
    .bill-close, .bill-print-btn{display:none !important;}
    .bill-sheet{max-height:none; box-shadow:none;}
  }

  /* saved-address card: delete icon */
  .det-addr-delete{
    flex-shrink:0; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:var(--danger); background:transparent; margin-left:2px;
  }
  .det-addr-delete:active{background:#FFE1D1;}

  /* =========================================================
     HELP & SUPPORT (Orders screen)
  ========================================================= */
  .help-support-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px; margin-top:6px; box-shadow:0 2px 10px rgba(43,36,16,.05);
  }
  .help-sub{font-size:12px; color:var(--muted); margin-bottom:14px; line-height:1.45;}
  .help-actions{display:flex; flex-direction:column; gap:9px;}
  .help-btn{
    display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius-sm);
    font-size:13.5px; font-weight:700; border:1.5px solid var(--line); color:var(--ink);
  }
  .help-btn.whatsapp{background:#E7F8EE; border-color:#BFE9CE; color:#1F7A43;}
  .help-btn.email{background:var(--card-hi); border-color:var(--line); color:var(--ink);}
  .help-btn.call{background:#FFF3EC; border-color:#F6C7B2; color:#C4512D;}
  .help-btn:active{transform:scale(.98);}
  .help-hours{text-align:center; font-size:10.5px; color:var(--muted); margin-top:12px;}