/* ═══════════════════════════════════════
      DrycleanEx Store — Clean Premium Theme
      Palette: White · Charcoal · Crimson
      Fully responsive — mobile-first
    ═══════════════════════════════════════ */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --bg:        #fafafa;
      --surface:   #ffffff;
      --surface2:  #f4f4f6;
      --border:    #e8e8ec;
      --border2:   #d4d4db;
      --text:      #1a1a24;
      --text2:     #52525e;
      --text3:     #9898a8;
      --crimson:   #e63950;
      --crimson-d: #c42d42;
      --crimson-lt:#fff0f2;
      --charcoal:  #2e2e38;
      --charcoal-d: #1a1a24;
      --gold:      #c8a96e;
      --sage:      #2a7a5a;
      --navy: #000080;
      --navy-mid: #1A1A6E;
      --navy-light: #2E2EA0;
      --green-india: #138808;
      --green-light: #1AAA0A;
      --blue: #0B63FF;
      --blue-d: #0055E3;
      --red: #D8272E;
      --red-d: #B91F22;
      --font-d:    'DM Serif Display', serif;
      --font:      'DM Sans', sans-serif;
      --font-reenie: 'Reenie Beanie', cursive;
      --mono:      'JetBrains Mono', monospace;
      --r:         16px;
      --r-sm:      10px;
      --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
      --shadow:    0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
      --shadow-lg: 0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
      --t:         .18s cubic-bezier(.4,0,.2,1);
      --nav-h:     64px;
    }
    html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
    body{
      font-family:var(--font);background:var(--bg);color:var(--text);
      min-height:100vh;-webkit-font-smoothing:antialiased;
      overflow-x:hidden;
      display:flex;flex-direction:column;  /* ← footer always at bottom */
    }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar{width:4px;height:4px}
    ::-webkit-scrollbar-track{background:transparent}
    ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

    /* ═══════════════════════════════════════
      TOPBAR / NAV
    ═══════════════════════════════════════ */
    #store-nav{
      background:rgba(255,255,255,.97);
      backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
      border-bottom:1px solid var(--border);
      position:sticky;top:0;z-index:300;
      /* Prevent content from sitting behind nav on iOS */
      padding-top:env(safe-area-inset-top);
      z-index:1000;

    }
    .sn-inner{
      max-width:1320px;margin:0 auto;
      display:flex;align-items:center;gap:0;
      height:var(--nav-h);padding:0 20px;
      overflow:hidden;          /* hard stop — nothing escapes the bar */
      min-width:0;
    }

    /* Logo */
    .sn-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
    .sn-logo img{height:44px;width:auto;max-width:160px;object-fit:contain}

    .sn-divider{width:1px;height:32px;background:var(--border);margin:0 18px;flex-shrink:0}

    /* Desktop nav links — hidden on mobile */
    .sn-links{display:flex;gap:2px;align-items:center}
    .sn-link{
      padding:7px 12px;border-radius:8px;font-size:13px;font-weight:500;
      color:var(--text2);text-decoration:none;transition:all var(--t);
      letter-spacing:.01em;display:inline-flex;align-items:center;gap:5px;
      white-space:nowrap;
    }
    .sn-link:hover{background:var(--surface2);color:var(--text)}
    .sn-link.on{background:var(--crimson-lt);color:var(--crimson);font-weight:600}

    /* Right cluster */
    .sn-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:1;min-width:0}

    /* Search — collapses on small screens */
    .sn-search{
      display:flex;align-items:center;gap:8px;
      background:var(--surface2);border:1px solid var(--border);
      border-radius:99px;padding:7px 14px;width:190px;
      transition:all var(--t);
    }
    .sn-search:focus-within{
      border-color:var(--crimson);
      box-shadow:0 0 0 3px rgba(230,57,80,.08);
      background:#fff;width:220px;
    }
    .sn-search input{
      background:none;border:none;outline:none;
      font-family:var(--font);font-size:13px;color:var(--text);width:100%;
      min-width:0; /* allows shrink */
    }
    .sn-search option{
      background:none;border:none;outline:none;
      font-family:var(--font);font-size:13px;color:var(--text);width:100%;
      min-width:0; /* allows shrink */
    }
    .sn-search input::placeholder{color:var(--text3)}

    /* Cart icon */
    .sn-cart{
      position:relative;width:40px;height:40px;border-radius:10px;
      background:var(--surface2);border:1px solid var(--border);
      display:flex;align-items:center;justify-content:center;
      font-size:17px;cursor:pointer;text-decoration:none;
      color:var(--text);transition:all var(--t);flex-shrink:0;
    }
    .sn-cart:hover{background:var(--crimson-lt);border-color:var(--crimson);color:var(--crimson)}
    .sn-cart-count{
      position:absolute;top:-5px;right:-5px;
      background:var(--crimson);color:#fff;font-size:9px;font-weight:700;
      width:17px;height:17px;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      font-family:var(--mono);pointer-events:none;
    }

    /* Nav buttons */
    .sn-btn{
      padding:8px 16px;border-radius:8px;font-family:var(--font);
      font-size:13px;font-weight:600;cursor:pointer;border:none;
      text-decoration:none;display:inline-flex;align-items:center;gap:6px;
      transition:all var(--t);letter-spacing:.01em;white-space:nowrap;
    }
    .sn-btn-p{background:var(--crimson);color:#fff;box-shadow:0 2px 8px rgba(230,57,80,.3)}
    .sn-btn-p:hover{background:var(--crimson-d);box-shadow:0 4px 14px rgba(230,57,80,.4);transform:translateY(-1px)}
    .sn-btn-g{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}
    .sn-btn-g:hover{background:var(--surface);color:var(--text)}

    /* Mobile hamburger */
    .sn-hamburger{
      display:none;flex-direction:column;gap:5px;
      background:none;border:none;cursor:pointer;
      padding:8px;border-radius:8px;
      transition:background var(--t);flex-shrink:0;
    }
    .sn-hamburger:hover{background:var(--surface2)}
    .sn-hamburger span{
      display:block;width:20px;height:2px;
      background:var(--text2);border-radius:2px;
      transition:all var(--t);transform-origin:center;
    }
    .sn-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .sn-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
    .sn-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

    /* Mobile drawer */
    .sn-mobile-menu{
      display:none;position:fixed;inset:0;z-index:250;
    }
    .sn-mobile-menu.open{display:block}
    .sn-mobile-backdrop{
      position:absolute;inset:0;background:rgba(0,0,0,.45);
      backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    }
    .sn-mobile-drawer{
      position:absolute;top:0;left:0;bottom:0;width:min(300px, 85vw);
      background:var(--surface);box-shadow:var(--shadow-lg);
      display:flex;flex-direction:column;
      animation:drawerSlideIn .22s cubic-bezier(.4,0,.2,1);
      overflow-y:auto;-webkit-overflow-scrolling:touch;
      padding-bottom:env(safe-area-inset-bottom);
    }
    @keyframes drawerSlideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
    .sn-drawer-head{
      padding:20px;border-bottom:1px solid var(--border);
      display:flex;align-items:center;justify-content:space-between;
      background:linear-gradient(135deg,var(--charcoal-d),var(--charcoal));
      z-index:1000;
    }
    .sn-drawer-logo img{height:28px;filter:brightness(0) invert(1)}
    .sn-drawer-close{
      background:rgba(255,255,255,.12);border:none;cursor:pointer;
      width:32px;height:32px;border-radius:8px;
      display:flex;align-items:center;justify-content:center;
      color:#fff;font-size:16px;transition:background var(--t);
    }
    .sn-drawer-close:hover{background:rgba(255,255,255,.2)}
    .sn-drawer-body{flex:1;padding:12px;z-index:999;}
    .sn-drawer-link{
      display:flex;align-items:center;gap:12px;
      padding:12px 14px;border-radius:10px;
      text-decoration:none;color:var(--text2);
      font-size:14px;font-weight:500;
      transition:all var(--t);margin-bottom:2px;
      z-index: inherit;
    }
    .sn-drawer-link:hover,.sn-drawer-link.on{background:var(--surface2);color:var(--text)}
    .sn-drawer-link.on{font-weight:600;background:var(--crimson-lt);color:var(--crimson)}
    .sn-drawer-divider{height:1px;background:var(--border);margin:10px 0}
    .sn-drawer-foot{
      padding:16px;border-top:1px solid var(--border);
      display:flex;flex-direction:column;gap:8px;
    }

    /* User avatar pill */
    .user-avatar{
      width:34px;height:34px;border-radius:9px;
      background:var(--charcoal);
      display:flex;align-items:center;justify-content:center;
      font-weight:700;color:#fff;font-size:12px;
      letter-spacing:.05em;flex-shrink:0;
    }

    /* ═══════════════════════════════════════
      PAGE WRAPPER
    ═══════════════════════════════════════ */
    #store-main{
      max-width:1320px;margin:0 auto;
      padding:28px 20px 80px;
      padding-left:max(20px, env(safe-area-inset-left));
      padding-right:max(20px, env(safe-area-inset-right));
      flex:1;          /* ← fills remaining space, pushes footer down */
      width:100%;
    }

    /* ═══════════════════════════════════════
      MESSAGES
    ═══════════════════════════════════════ */
    .s-msg{
      padding:13px 18px;border-radius:var(--r-sm);font-size:13px;
      margin-bottom:20px;display:flex;align-items:center;gap:10px;
    }
    .s-msg-ok {background:rgba(42,122,90,.06);color:var(--sage);border:1px solid rgba(42,122,90,.2)}
    .s-msg-err{background:var(--crimson-lt);color:var(--crimson);border:1px solid rgba(230,57,80,.2)}

    /* ═══════════════════════════════════════
      FORMS
    ═══════════════════════════════════════ */
    .s-inp{
      width:100%;padding:11px 15px;border:1px solid var(--border);
      border-radius:var(--r-sm);font-family:var(--font);font-size:14px;
      color:var(--text);background:var(--surface);outline:none;
      transition:all var(--t);
      /* Prevent iOS zoom on focus */
      font-size:max(16px, 14px);
    }
    .s-inp:focus{border-color:var(--crimson);box-shadow:0 0 0 3px rgba(230,57,80,.08)}
    .s-label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;display:block}
    .s-fg{margin-bottom:18px}

    /* ═══════════════════════════════════════
      BUTTONS (base)
    ═══════════════════════════════════════ */
    .s-btn-p{
      background:var(--crimson);color:#fff;border:none;border-radius:var(--r-sm);
      padding:13px 26px;font-family:var(--font);font-size:14px;font-weight:600;
      cursor:pointer;box-shadow:0 2px 10px rgba(230,57,80,.3);
      transition:all var(--t);display:inline-flex;align-items:center;gap:8px;
      text-decoration:none;letter-spacing:.01em;
      /* Full-width on very small screens unless overridden */
    }
    .s-btn-p:hover{background:var(--crimson-d);transform:translateY(-1px);box-shadow:0 4px 18px rgba(230,57,80,.4)}
    .s-btn-g{
      background:var(--surface2);color:var(--text2);border:1px solid var(--border);
      border-radius:var(--r-sm);padding:13px 26px;font-family:var(--font);
      font-size:14px;font-weight:500;cursor:pointer;
      transition:all var(--t);display:inline-flex;align-items:center;gap:8px;
      text-decoration:none;
    }
    .s-btn-g:hover{background:var(--surface);color:var(--text);border-color:var(--border2)}

    /* ═══════════════════════════════════════
      SERVICE BADGES
    ═══════════════════════════════════════ */
    .sc-badge{
      position:absolute;top:12px;right:12px;
      font-size:9px;font-weight:700;padding:3px 9px;
      border-radius:99px;letter-spacing:.5px;text-transform:uppercase;
      font-family:var(--mono);
    }
    .sc-badge-offer{background:var(--crimson-lt);color:var(--crimson);border:1px solid rgba(230,57,80,.25)}
    .sc-badge-express{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}

    /* ═══════════════════════════════════════
      CARDS
    ═══════════════════════════════════════ */
    .neu-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm)}
    .neu-card-sm{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:16px;box-shadow:var(--shadow-sm)}
    .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm)}

    /* ═══════════════════════════════════════
      GRID UTILITIES
    ═══════════════════════════════════════ */
    .g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

    /* ═══════════════════════════════════════
      SECTION HEADER / TYPOGRAPHY
    ═══════════════════════════════════════ */
    .sh{display:flex;justify-content:space-between;align-items:flex-start;
        margin-bottom:20px;gap:12px;flex-wrap:wrap}
    .st{font-size:20px;font-weight:700;color:var(--text)}
    .ss{font-size:13px;color:var(--text3);margin-top:3px}
    /* ═══════════════════════════════════════
      STORE FOOTER
    ═══════════════════════════════════════ */
    #store-footer{
      background:transparent;
      color:rgba(255,255,255,.6);
      margin-top:72px;
    }
    /* The dark background and border are scoped to the inner content width */
    .sf-inner{
      max-width:1320px;margin:0 auto;
      padding:56px 20px 40px;
      padding-left:max(20px, env(safe-area-inset-left));
      padding-right:max(20px, env(safe-area-inset-right));
      display:grid;
      grid-template-columns:260px repeat(4,1fr);
      gap:40px;
      background:var(--charcoal-d);
      border-top:1px solid rgba(255,255,255,.06);
      border-radius:16px 16px 0 0;
    }
    @media(max-width:1100px){
      .sf-inner{grid-template-columns:220px repeat(4,1fr);gap:24px}
    }
    @media(max-width:900px){
      .sf-inner{grid-template-columns:1fr 1fr;gap:32px 24px}
    }
    @media(max-width:520px){
      .sf-inner{grid-template-columns:1fr;gap:28px;padding:40px 20px 28px}
    }

    /* Brand */
    .sf-brand{grid-column:1}
    @media(max-width:900px){.sf-brand{grid-column:1 / -1}}
    .sf-logo{display:inline-block;margin-bottom:14px;opacity:.9;transition:opacity var(--t)}
    .sf-logo:hover{opacity:1}
    .sf-logo img{filter:brightness(0) invert(1);height:32px;width:auto}
    .sf-tagline{font-size:13px;color:rgba(255,255,255,.4);line-height:1.7;margin-bottom:18px;max-width:240px}
    .sf-social{display:flex;gap:8px}
    .sf-soc{
      display:flex;align-items:center;justify-content:center;
      width:34px;height:34px;border-radius:8px;
      background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
      color:rgba(255,255,255,.5);text-decoration:none;
      transition:all var(--t);
    }
    .sf-soc:hover{background:var(--crimson);border-color:var(--crimson);color:#fff}
    .sf-link{
      display:block;font-size:13px;color:rgba(255,255,255,.45);
      text-decoration:none;padding:4px 0;line-height:1.5;
      transition:color var(--t);
    }
    .sf-link:hover{color:rgba(255,255,255,.9)}
    .sf-link-ic{display:flex;align-items:center;gap:8px}
    .sf-link-ic svg{flex-shrink:0;opacity:.5}
    .sf-link-ic:hover svg{opacity:1}
    .sf-link:hover{color:rgba(255,255,255,.9)}
    .sf-link-ic{display:flex;align-items:center;gap:8px}
    .sf-link-ic svg{flex-shrink:0;opacity:.5}
    .sf-link-ic:hover svg{opacity:1}
    .sf-hours{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.35);margin-top:4px}
    .sf-hours svg{flex-shrink:0;opacity:.4}

    /* Bottom bar */
    .sf-bottom{
      background:transparent;
    }
    .sf-bottom-inner{
      max-width:1320px;margin:0 auto;
      padding:16px 20px;
      display:flex;align-items:center;justify-content:space-between;
      flex-wrap:wrap;gap:10px;
      background:var(--charcoal);
      border-radius:0 0 0 0;
    }
    .sf-copy{font-size:12px;color:rgba(255,255,255,.25)}
    .sf-legal-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .sf-legal-links a{
      font-size:12px;color:rgba(255,255,255,.3);text-decoration:none;
      transition:color var(--t);white-space:nowrap;
    }
    .sf-legal-links a:hover{color:var(--crimson)}
    .sf-sep{color:rgba(255,255,255,.15);font-size:11px}
    /* ═══════════════════════════════════════
      BUTTON VARIANTS (admin/till shared)
    ═══════════════════════════════════════ */
    .btn{
      display:inline-flex;align-items:center;gap:6px;
      padding:9px 18px;border-radius:var(--r-sm);border:none;cursor:pointer;
      font-family:var(--font);font-size:13px;font-weight:600;
      transition:all var(--t);text-decoration:none;white-space:nowrap;
    }
    .btn-p{background:var(--crimson);color:#fff;box-shadow:0 4px 14px rgba(230,57,80,.28)}
    .btn-p:hover{background:var(--crimson-d);color:#fff;transform:translateY(-1px)}
    .btn-g{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}
    .btn-g:hover{background:var(--border);color:var(--text)}
    .btn-d{background:rgba(239,68,68,.08);color:#ef4444;border:1px solid rgba(239,68,68,.2)}
    .btn-d:hover{background:rgba(239,68,68,.14)}
    .btn-sm{padding:6px 12px;font-size:12px}
    .btn-xs{padding:3px 8px;font-size:11px;border-radius:6px}

    /* ═══════════════════════════════════════
      CART ITEM ROW
    ═══════════════════════════════════════ */
    .ci{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)}
    .ci:last-child{border-bottom:none}
    .ci-ic{font-size:24px;flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:var(--surface2);border-radius:10px;border:1px solid var(--border)}
    .ci-info{flex:1;min-width:0}
    .ci-nm{font-size:14px;font-weight:600;color:var(--text)}
    .ci-pr{font-size:12px;color:var(--text3);margin-top:2px}

    /* Pay row */
    .pay-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:14px}
    .pay-row:last-child{border-bottom:none}

    /* ═══════════════════════════════════════
      STATUS BADGES
    ═══════════════════════════════════════ */
    .bd{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
    .bd-sage{background:rgba(42,122,90,.1);color:#2a7a5a;border:1px solid rgba(42,122,90,.2)}
    .bd-rose{background:rgba(230,57,80,.08);color:var(--crimson);border:1px solid rgba(230,57,80,.2)}
    .bd-brass{background:rgba(200,169,110,.1);color:#a07040;border:1px solid rgba(200,169,110,.2)}
    .bd-blue{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
    .bd-indigo{background:#eef2ff;color:#4338ca;border:1px solid #c7d2fe}
    .bd-amber{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
    .bd-grey{background:var(--surface2);color:var(--text3);border:1px solid var(--border)}

    /* ═══════════════════════════════════════
      FORM INPUTS (admin/till)
    ═══════════════════════════════════════ */
    .inp{
      width:100%;padding:9px 12px;background:var(--surface);
      border:1px solid var(--border);border-radius:var(--r-sm);
      color:var(--text);font-family:var(--font);font-size:14px;
      outline:none;transition:border-color var(--t);
      font-size:max(16px, 13px); /* Prevent iOS zoom */
    }
    .inp:focus{border-color:var(--crimson);box-shadow:0 0 0 3px rgba(230,57,80,.08)}
    .sel{
      width:100%;padding:9px 12px;background:var(--surface);
      border:1px solid var(--border);border-radius:var(--r-sm);
      color:var(--text);font-family:var(--font);font-size:14px;
      outline:none;cursor:pointer;
      font-size:max(16px, 13px);
    }
    .lbl{display:block;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:5px}

    /* ═══════════════════════════════════════
      TABLE WRAPPER
    ═══════════════════════════════════════ */
    .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .tw table{width:100%;border-collapse:collapse;min-width:480px}
    .tw th{text-align:left;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;padding:8px 12px;border-bottom:2px solid var(--border);white-space:nowrap}
    .tw td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text2)}
    .tw tr:last-child td{border-bottom:none}
    .tw tr:hover td{background:var(--surface2)}   

    /* Heart icon */
    .heroHeartIcon{width:auto;height:25px;display:block;flex-shrink:0}
    #heart-icon {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-right:-10px;
      margin-right:-20px;
      margin-top:-10px;
    }

    /* ═══════════════════════════════════════
      USER DROPDOWN
    ═══════════════════════════════════════ */
    .sn-dd-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--text2);transition:background var(--t);cursor:pointer}
    .sn-dd-item:hover{background:var(--surface2)}
    .sn-dd-item.sn-dd-danger{color:var(--crimson)}
    .sn-dd-item.sn-dd-danger:hover{background:var(--crimson-lt)}
    .sn-dd-ic{font-size:18px;width:26px;text-align:center;flex-shrink:0;line-height:1}
    .sn-dd-lbl{font-size:13px;font-weight:600;line-height:1.2;color:var(--text)}
    .sn-dd-sub{font-size:10px;color:var(--text3);margin-top:1px}
    .sn-dd-item.sn-dd-danger .sn-dd-lbl{color:var(--crimson)}
    .sn-dd-item.sn-dd-danger .sn-dd-sub{color:rgba(230,57,80,.6)}
    @keyframes snFadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

    /* ═══════════════════════════════════════
      ORDER STATUS PANEL  (staff roles)
    ═══════════════════════════════════════ */
    /* Floating panel button */
    .sn-orders-fab{
      display:none; /* shown for staff only via .staff-view class on body */
      position:fixed;
      bottom:max(24px, calc(24px + env(safe-area-inset-bottom)));
      right:20px;z-index:280;
      background:var(--charcoal);color:#fff;
      border:none;border-radius:14px;
      padding:13px 20px;font-family:var(--font);font-size:13px;font-weight:600;
      cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25);
      align-items:center;gap:8px;
      transition:all var(--t);
    }
    .staff-view .sn-orders-fab{display:flex}
    .sn-orders-fab:hover{background:var(--charcoal-d);transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.3)}
    .sn-orders-fab-badge{
      background:var(--crimson);color:#fff;font-size:10px;font-weight:800;
      width:18px;height:18px;border-radius:50%;
      display:flex;align-items:center;justify-content:center;font-family:var(--mono);
    }

    /* The drawer panel itself */
    .order-panel{
      position:fixed;inset:0;z-index:400;display:none;
    }
    .order-panel.open{display:block}
    .order-panel-backdrop{
      position:absolute;inset:0;background:rgba(10,10,18,.5);
      backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    }
    .order-panel-sheet{
      position:absolute;right:0;top:0;bottom:0;
      width:min(520px, 100vw);
      background:var(--bg);box-shadow:var(--shadow-lg);
      display:flex;flex-direction:column;
      animation:sheetIn .24s cubic-bezier(.4,0,.2,1);
      overflow:hidden;
    }
    @keyframes sheetIn{from{transform:translateX(100%)}to{transform:translateX(0)}}

    /* On small phones, full-screen sheet */
    @media(max-width:520px){
      .order-panel-sheet{width:100vw}
    }

    .op-head{
      display:flex;align-items:center;justify-content:space-between;
      padding:18px 20px;border-bottom:1px solid var(--border);
      background:var(--surface);flex-shrink:0;
    }
    .op-title{font-size:16px;font-weight:700;color:var(--text)}
    .op-subtitle{font-size:11px;color:var(--text3);margin-top:2px}
    .op-close{
      background:var(--surface2);border:1px solid var(--border);
      border-radius:8px;width:34px;height:34px;
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;font-size:14px;color:var(--text2);
      transition:all var(--t);flex-shrink:0;
    }
    .op-close:hover{background:var(--crimson-lt);color:var(--crimson);border-color:rgba(230,57,80,.2)}

    .op-toolbar{
      padding:12px 16px;background:var(--surface);
      border-bottom:1px solid var(--border);
      display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex-shrink:0;
    }
    .op-filter-chip{
      padding:5px 12px;border-radius:99px;font-size:12px;font-weight:600;
      border:1px solid var(--border);background:var(--surface2);
      color:var(--text2);cursor:pointer;transition:all var(--t);
    }
    .op-filter-chip.on{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
    .op-filter-chip:hover:not(.on){background:var(--border);color:var(--text)}

    .op-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px}

    /* Single order card in the panel */
    .op-order{
      background:var(--surface);border:1px solid var(--border);
      border-radius:var(--r);margin-bottom:10px;overflow:hidden;
      transition:box-shadow var(--t);
    }
    .op-order:hover{box-shadow:var(--shadow)}
    .op-order-head{
      display:flex;align-items:center;gap:12px;
      padding:12px 14px;cursor:pointer;
    }
    .op-order-num{font-size:13px;font-weight:700;color:var(--text);font-family:var(--mono)}
    .op-order-meta{flex:1;min-width:0}
    .op-order-cust{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .op-order-time{font-size:10px;color:var(--text3);margin-top:1px}
    .op-order-chevron{
      color:var(--text3);transition:transform var(--t);flex-shrink:0;
      width:16px;height:16px;
    }
    .op-order.expanded .op-order-chevron{transform:rotate(180deg)}

    /* Expandable detail */
    .op-order-detail{
      display:none;padding:0 14px 14px;
      border-top:1px solid var(--border);margin-top:0;
    }
    .op-order.expanded .op-order-detail{display:block}

    /* Track badge */
    .op-track-badge{
      display:inline-flex;align-items:center;gap:5px;
      padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;
      text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;margin-top:10px;
    }

    /* ── Workflow critical-path bar ── */
    .op-workflow{
      position:relative;
      padding:4px 0 16px;
      margin-bottom:14px;
    }
    /* Connecting line behind steps */
    .op-wf-track{
      position:absolute;
      top:14px; /* centre of the step circles */
      left:14px;right:14px;height:2px;
      background:var(--border);z-index:0;
    }
    .op-wf-track-fill{
      position:absolute;top:0;left:0;height:100%;
      background:var(--crimson);border-radius:2px;
      transition:width .4s ease;
    }
    .op-wf-steps{
      display:flex;justify-content:space-between;
      position:relative;z-index:1;gap:4px;
      overflow-x:auto;padding-bottom:4px;
      scrollbar-width:none;
    }
    .op-wf-steps::-webkit-scrollbar{display:none}
    .op-wf-step{
      display:flex;flex-direction:column;align-items:center;
      flex:1;min-width:52px;cursor:default;
    }
    .op-wf-dot{
      width:28px;height:28px;border-radius:50%;
      border:2px solid var(--border);background:var(--surface);
      display:flex;align-items:center;justify-content:center;
      font-size:11px;transition:all .2s ease;
      position:relative;z-index:1;flex-shrink:0;
    }
    .op-wf-step.done .op-wf-dot{
      background:var(--sage);border-color:var(--sage);color:#fff;
    }
    .op-wf-step.current .op-wf-dot{
      background:var(--crimson);border-color:var(--crimson);color:#fff;
      box-shadow:0 0 0 4px rgba(230,57,80,.15);
      animation:opPulse 2s infinite;
    }
    @keyframes opPulse{0%,100%{box-shadow:0 0 0 4px rgba(230,57,80,.15)}50%{box-shadow:0 0 0 7px rgba(230,57,80,.08)}}
    .op-wf-step.skipped .op-wf-dot{background:var(--surface2);border-color:var(--border2);opacity:.5}
    .op-wf-lbl{
      font-size:9px;font-weight:600;color:var(--text3);
      text-align:center;margin-top:5px;line-height:1.3;
      text-transform:uppercase;letter-spacing:.4px;
      max-width:56px;word-break:break-word;
    }
    .op-wf-step.done .op-wf-lbl{color:var(--sage)}
    .op-wf-step.current .op-wf-lbl{color:var(--crimson);font-weight:700}

    /* Status update controls */
    .op-status-row{
      display:flex;align-items:center;gap:8px;flex-wrap:wrap;
      padding-top:10px;border-top:1px solid var(--border);
    }
    .op-status-row label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;white-space:nowrap}
    .op-status-sel{
      flex:1;min-width:140px;padding:8px 12px;
      background:var(--surface2);border:1px solid var(--border);
      border-radius:var(--r-sm);color:var(--text);font-family:var(--font);
      font-size:13px;outline:none;cursor:pointer;
      font-size:max(16px, 13px);
    }
    .op-status-sel:focus{border-color:var(--crimson)}
    .op-update-btn{
      padding:8px 16px;background:var(--charcoal);color:#fff;
      border:none;border-radius:var(--r-sm);font-family:var(--font);
      font-size:13px;font-weight:600;cursor:pointer;
      transition:all var(--t);white-space:nowrap;
    }
    .op-update-btn:hover{background:var(--charcoal-d);transform:translateY(-1px)}
    .op-update-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

    /* Notes input inside panel */
    .op-notes-inp{
      width:100%;padding:8px 12px;margin-top:8px;
      background:var(--surface2);border:1px solid var(--border);
      border-radius:var(--r-sm);color:var(--text);font-family:var(--font);
      font-size:13px;outline:none;resize:vertical;min-height:56px;
      transition:border-color var(--t);
      font-size:max(16px, 13px);
    }
    .op-notes-inp:focus{border-color:var(--crimson)}

    /* Log timeline */
    .op-log{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
    .op-log-title{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
    .op-log-item{
      display:flex;gap:10px;padding:6px 0;
      border-bottom:1px solid var(--border);font-size:11px;
    }
    .op-log-item:last-child{border-bottom:none}
    .op-log-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);flex-shrink:0;margin-top:3px}
    .op-log-dot.done{background:var(--sage)}
    .op-log-info{flex:1;min-width:0}
    .op-log-status{font-weight:700;color:var(--text)}
    .op-log-by{color:var(--text3);margin-top:1px}

    /* Empty state */
    .op-empty{
      text-align:center;padding:48px 20px;
      color:var(--text3);font-size:14px;
    }
    .op-empty-icon{font-size:40px;margin-bottom:12px;opacity:.5}

    /* Toast */
    #toasts{
      position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
      z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;
      pointer-events:none;width:min(360px, 90vw);
      bottom:max(20px, calc(20px + env(safe-area-inset-bottom)));
    }
    .toast{
      background:var(--charcoal-d);color:#fff;
      padding:11px 18px;border-radius:10px;font-size:13px;font-weight:500;
      box-shadow:0 4px 20px rgba(0,0,0,.35);
      animation:toastIn .22s ease,toastOut .22s ease 2.8s forwards;
      pointer-events:none;text-align:center;
    }
    .no-print, .no-print *
        {
            display: none !important;
        }
    @keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
    @keyframes toastOut{from{opacity:1}to{opacity:0}}

    /* ═══════════════════════════════════════════════════════════════════════
      RESPONSIVE BREAKPOINTS — Mobile-First
      ─────────────────────────────────────
      Device viewport map (CSS px, portrait unless noted):
      ── Phones ───────────────────────────────────────────────────────────
      320px  iPhone SE 1st/2nd, Galaxy A series (very small)
      360px  Galaxy S23 FE, A54, Pixel 7a, Redmi Note 13
      375px  iPhone SE 3rd, iPhone 12/13/14 mini
      390px  iPhone 14, 15, 16
      393px  iPhone 16 (exact), Pixel 8
      412px  Galaxy S24, S25, Pixel 8 Pro, OnePlus 12
      414px  iPhone 6 Plus / 7 Plus / 8 Plus
      430px  iPhone 15 Plus, 16 Plus, 15 Pro Max landscape narrow
      480px  Landscape: 375/390 phones
      ── Small Tablets / large phones ────────────────────────────────────
      540px  Galaxy S series landscape, Surface Duo
      600px  Galaxy Tab A7 Lite portrait
      ── Tablets (portrait) ───────────────────────────────────────────────
      744px  iPad mini 6th gen
      768px  iPad 9th/10th gen, iPad Air 4 (legacy)
      820px  iPad Air 11" (M2/M3)
      834px  iPad Pro 11" (all gens)
      ── Tablets (landscape) / small desktops ─────────────────────────────
      1024px iPad Pro 12.9" portrait, iPad 10 landscape, laptop entry
      1180px iPad Pro 11" landscape
      1194px iPad Pro 12.9" landscape
      1280px MacBook Air 13", common laptop
      1366px Laptop common (HD)
      1440px MacBook Pro 14/16", widescreen laptop
      1920px Full HD desktop, large monitor
    ═══════════════════════════════════════════════════════════════════════ */

    /* ── Large tablets / small desktops: ≥ 1024px ── */
    @media (min-width: 1024px) {
      .sn-search { width: 200px }
    }

    /* ── Narrow desktop / wide tablet landscape: ≤ 1100px ── */
    @media (max-width: 1100px) {
      .sn-search { width: 150px }
      .sn-divider { margin: 0 12px }
    }

    /* ── Tablet portrait + small desktop: ≤ 960px ── */
    @media (max-width: 960px) {
      .sn-search { width: 140px }
      .sn-divider { margin: 0 10px }
    }

    /* ── Tablet portrait: 769px – 1023px (iPad mini, Air, Pro 11") ──
      Hamburger hidden; condensed desktop nav shown.
      2-column grids stay 2-column. ── */
    @media (min-width: 769px) and (max-width: 1023px) {
      .sn-links .sn-link { padding: 6px 9px; font-size: 12px }
      .sn-search { width: 130px }
      #store-main { padding: 22px 20px 80px }
      .g3 { grid-template-columns: 1fr 1fr }
    }

    /* ── iPad mini 6 (744px portrait) ──
      iPad mini sits just below 768, so needs explicit coverage. ── */
    @media (min-width: 700px) and (max-width: 768px) {
      .sn-links { display: flex }
      .sn-hamburger { display: none }
      .sn-btn { display: inline-flex }
      .sn-links .sn-link { padding: 6px 8px; font-size: 12px }
      .sn-search { width: 120px }
      .g2 { grid-template-columns: 1fr 1fr }
      .g3 { grid-template-columns: 1fr 1fr }
    }

    /* ── Mobile breakpoint (hamburger takes over): ≤ 768px ── */
    @media (max-width: 768px) {
      .sn-links  { display: none }
      .sn-search { display: none }
      .sn-divider { display: none }
      .sn-hamburger { display: flex }
      .sn-btn { display: none }   /* drawer handles auth */

      /* Avatar pill — icon only, no name */
      #sn-user-btn > div[style*="text-align:left"] { display: none }
      #sn-user-btn { padding: 4px; gap: 0; border-radius: 50% }

      .sn-right { gap: 6px }
      .sn-logo img { height: 34px }

      #store-main {
        padding: 18px 16px 80px;
        padding-left:  max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
      }

      .g2, .g3 { grid-template-columns: 1fr }
      .sh { flex-direction: column; align-items: flex-start; gap: 8px }
      .s-btn-p-full { width: 100%; justify-content: center }
      .tw th, .tw td { padding: 8px 10px; font-size: 12px }

      /* FAB button clear of bottom safe area */
      .sn-orders-fab {
        bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
        right: 16px;
        padding: 11px 16px;
      }
    }

    /* ── Large phone landscape / phablet portrait: 480px – 599px ── */
    @media (min-width: 480px) and (max-width: 599px) {
      .g2 { grid-template-columns: 1fr 1fr }   /* 2-col fits at 480 */
      .g3 { grid-template-columns: 1fr 1fr }
      #store-main { padding: 16px 14px 80px }
    }

    /* ── Standard phone portrait: 390px – 479px
      (iPhone 14/15/16, Galaxy S24, Pixel 8) ── */
    @media (max-width: 479px) {
      :root { --nav-h: 56px }
      .sn-inner { height: 56px; padding: 0 14px }
      .sn-logo img { height: 30px; max-width: 140px }
      .sn-cart { width: 38px; height: 38px; font-size: 16px }
      .sn-right { gap: 6px }

      #store-main {
        padding: 16px 14px 80px;
        padding-left:  max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
        padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
      }

      .neu-card, .card { padding: 16px }
      .neu-card-sm { padding: 12px }
      .g2, .g3 { grid-template-columns: 1fr; gap: 12px }

      /* Prevent iOS font size boost on inputs */
      .inp, .sel, .s-inp, .op-status-sel, .op-notes-inp { font-size: 16px }

      /* Slightly tighter footer FAB */
      .sn-orders-fab {
        right: 14px;
        padding: 10px 14px;
        font-size: 12px;
      }
    }

    /* ── Small phone portrait: 360px – 389px
      (Galaxy A54, Pixel 7a, Redmi Note 13) ── */
    @media (max-width: 389px) {
      :root { --nav-h: 52px }
      .sn-inner { height: 52px; padding: 0 12px }
      .sn-logo img { height: 26px; max-width: 120px }
      .sn-cart { width: 36px; height: 36px; font-size: 15px }
      .sn-hamburger { padding: 6px }
      .sn-right { gap: 5px }

      #store-main {
        padding: 14px 12px 80px;
        padding-left:  max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
      }

      .btn { padding: 8px 14px; font-size: 12px }
      .btn-sm { padding: 5px 10px; font-size: 11px }
    }

    /* ── Very small / legacy phones: ≤ 359px
      (iPhone SE 1st gen, Galaxy A03 core, budget Androids) ── */
    @media (max-width: 359px) {
      :root { --nav-h: 50px }
      .sn-inner { height: 50px; padding: 0 10px }
      .sn-logo img { height: 24px; max-width: 110px }
      .sn-cart { width: 34px; height: 34px }
      .sn-hamburger { padding: 5px }
      .sn-right { gap: 4px }

      #store-main { padding: 12px 10px 70px }

      .neu-card, .card { padding: 13px }
      .btn { padding: 7px 12px }
    }

    /* ── Landscape-specific: phones in landscape ──
      Handles the narrow height of landscape phone view. ── */
    @media (max-height: 500px) and (orientation: landscape) {
      :root { --nav-h: 48px }
      .sn-inner { height: 48px }
      #store-main { padding-top: 12px; padding-bottom: 60px }
      /* Shrink hero height in landscape — don't force-scroll to see content */
    }

    /* ── iPad-specific landscape: 1024px – 1194px ──
      iPad 10 / iPad Pro 11" landscape ── */
    @media (min-width: 1024px) and (max-width: 1194px) {
      .sn-search { width: 170px }
      .g2 { gap: 16px }
      .g3 { gap: 12px }
    }

    /* ── Footer responsive stacking ── */
    @media (max-width: 1024px) {
      .sf-inner {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
      }
      .sf-brand { grid-column: 1 / -1 }
    }

    @media (max-width: 600px) {
      .sf-inner {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 36px 16px 28px;
      }
      .sf-brand { grid-column: 1 }
      .sf-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px 16px;
      }
      .sf-legal-links { flex-wrap: wrap; gap: 4px }
    }

    .highlight {
      color: var(--Charcoal);
    }
    @media print
    {
      
        .no-print, .no-print *
        {
            display: none !important;
        }
        .page-break (
          break-after: always;
        )
        @page
        {
            size:104mm 164mm; /* half-letter, half-A5 */
            {% comment %} size: 297mm 210mm; /* landscape */ {% endcomment %}
            /* you can also specify margins here: */
            margin: 5mm;
            margin-right: 5mm; /* for compatibility with both A4 and Letter */
        }
            html
        {
            zoom: 80%;
        }
    }
    /* ═══════════════════════════════════════
      HIGHLIGHTER
    ═══════════════════════════════════════ */


    .highlighter {
    font-weight: bolder;
    {% comment %} background: linear-gradient(104deg, rgba(255, 1, 1, 0) 1%,rgba(255, 1, 1, 0) 0.9%, rgba(245, 15, 15, 0) 1%, rgba(245, 15, 15, 0) 2.4%, rgba(245, 15, 15, 0) 2.7%, rgba(245, 15, 15, 0) 2.9%, rgba(245, 15, 15, 0) 4%, rgba(255, 143, 130, 0.5) 5.8%, rgba(255, 130, 130, 0.1) 93%, rgba(255, 130, 130, 0.7) 96%, rgba(130, 255, 1732,0) 98%), linear-gradient(183deg, rgba(130, 255, 173,0) 0%, rgba(255, 240, 130, 0.3) 7.9%, rgba(130, 255, 173,0) 15%); {% endcomment %}
    padding: 0.05em 5.7px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    margin: 0;
    border-radius: 7.5px;
    text-shadow: -12px 12px 9.8px rgba(255, 213, 130, 0.7), 21px -18.1px 7.3px rgba(255, 255, 255,1), -18.1px -27.3px 30px rgba(255, 255, 255,1);
    }

    .highlighter__red{
      background: linear-gradient(104deg, rgba(255, 255, 255, 0) 0.1%, rgba(245, 15, 15, 0.05) 1.0%, rgba(245, 15, 15, 0.4) 2.0%, rgba(245, 15, 15, 0.17) 3%, rgba(245, 15, 15, 0.18) 3.2%, rgba(245, 15, 15, .1) 3.4%, rgba(255, 143, 130, 0.5) 5.8%, rgba(255, 130, 130, 0.1) 93%, rgba(255, 130, 130, 0.7) 96%, rgba(130, 255, 173,0) 98%), linear-gradient(183deg, rgba(130, 255, 173,0) 0%, rgba(255, 240, 130, 0.3) 7.9%, rgba(255, 130, 130, 0.2) 15%);

    }
    .highlighter__green{

      background: linear-gradient(104deg, rgba(149, 255, 1, 0.1) 0.1%, rgba(149, 255, 1, 0.3) 1%,rgba(149, 255, 1, 0.3) 0.85%, rgba(149, 255, 1, 0.2) 0.95%,rgba(1, 255, 26, 0.18) 0.8%,rgba(3, 150, 25, 0.18) 0.8%,rgba(2, 109, 25, 0.18) 0.9%,rgba(2, 71, 17, 0) 0.9%, rgba(15, 245, 53, 0) 1%, rgba(31, 187, 0, 0) 2.4%, rgba(31, 171, 0, 0) 2.4%, rgba(0, 128, 13, 0) 2.4%, rgba(1, 133, 12, 0) 2.4%, rgba(130, 255, 172, 0.5) 5.8%, rgba(130, 255, 151, 0.1) 93%, rgba(130, 255, 174, 0.7) 96%, rgba(130, 255, 173,0) 98%), linear-gradient(183deg, rgba(130, 255, 173,0) 0%, rgba(255, 240, 130, 0.3) .9%, rgba(130, 255, 173,0) 0.05%);

    }

    .redHigh{
      background: linear-gradient(104deg, rgba(255, 1, 1, 0.015) 1%,rgba(2, 137, 31, 0.18).9%,rgba(255, 1, 1, .18) 0.6%,rgba(255, 1, 1, .18) 0.8%,rgba(255, 1, 1, .18) 0.9%, rgba(245, 15, 15, 0.08) 1%, rgba(245, 15, 15, 0) 2.4%, rgba(245, 15, 15, 0) 2.4%, rgba(245, 15, 15, 0) 2.4%, rgba(245, 15, 15, 0) 2.4%, rgba(255, 143, 130, 0.5) 5.8%, rgba(255, 130, 130, 0.1) 93%, rgba(255, 130, 130, 0.7) 96%, rgba(255, 168, 130, 0) 98%), linear-gradient(183deg, rgba(130, 255, 173,0) 0%, rgba(255, 240, 130, 0.3) 7.9%, rgba(130, 255, 173,0) 15%);

    }
    .greenHigh {
      background: linear-gradient(104deg, rgba(149, 255, 1, 0.199) 1%, rgba(149, 255, 1, 0.2) 0.99%,rgba(149, 255, 1, 0.3) 0.99%,rgba(149, 255, 1, 0.3) 0.85%, rgba(149, 255, 1, 0.2) 0.95%,rgba(1, 255, 26, 0.18) 0.8%,rgba(3, 150, 25, 0.18) 0.8%,rgba(2, 109, 25, 0.18) 0.9%,rgba(2, 71, 17, 0) 0.9%, rgba(15, 245, 53, 0) 1%, rgba(31, 187, 0, 0) 2.4%, rgba(31, 171, 0, 0) 2.4%, rgba(0, 128, 13, 0) 2.4%, rgba(1, 133, 12, 0) 2.4%, rgba(130, 255, 172, 0.5) 5.8%, rgba(130, 255, 151, 0.1) 93%, rgba(130, 255, 174, 0.7) 96%, rgba(130, 255, 173,0) 98%), linear-gradient(183deg, rgba(130, 255, 173,0) 0%, rgba(255, 240, 130, 0.3) .9%, rgba(130, 255, 173,0) 0.05%);
    }

    .grey {
      color:#707070;
    }