/* ============================================================
   PHONE VERSION + GUEST BANNER + SELLER DASHBOARD LOOK
   EDIT HERE: colours come from styles.css variables. Phone rules are inside @media (max-width:700px).
   ============================================================ */
.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;flex:none}

/* guest banner */
.guestbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:#0B1220;color:#fff;font-size:14px;flex-wrap:wrap}
.guestbar[hidden]{display:none}
.gb-t{display:flex;gap:8px;align-items:center}
.gb-b{display:flex;gap:8px}
.gb{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;border-radius:999px;padding:8px 16px;font:600 13px inherit;font-family:inherit;cursor:pointer;transition:transform .15s,background .15s}
.gb:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.gb.primary{background:#F5A524;border-color:#F5A524;color:#1A1203}
.gb.primary:hover{background:#ffb83d}
.gate-msg{display:flex;gap:8px;align-items:flex-start;background:#FFF7E6;border:1px solid #F5D9A0;color:#5A3B00;border-radius:12px;padding:10px 12px;font-size:14px;margin:8px 0 12px}

/* seller dashboard: obviously clickable */
.tabs.dash{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:#EEF2F6;padding:5px;border-radius:14px}
.tabs.dash button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:10px;font-size:12.5px;font-weight:600;color:#3B4656;border:0;background:transparent;cursor:pointer;transition:background .15s,transform .12s,box-shadow .15s}
.tabs.dash button .ic{width:20px;height:20px}
.tabs.dash button:hover{background:#fff;box-shadow:0 2px 8px rgba(11,18,32,.1);transform:translateY(-1px)}
.tabs.dash button:active{transform:scale(.96)}
.tabs.dash button.on{background:#0B7A53;color:#fff;box-shadow:0 4px 12px rgba(11,122,83,.35)}
.dash-body{margin-top:14px}
.btn.cta{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:#0B7A53;color:#fff;border:0;border-radius:12px;padding:13px;font-weight:700;margin-bottom:12px;box-shadow:0 6px 16px rgba(11,122,83,.3);cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn.cta:hover{background:#075E40;transform:translateY(-2px);box-shadow:0 10px 22px rgba(11,122,83,.38)}
.btn.cta:active{transform:scale(.98)}
.pl{transition:box-shadow .15s,transform .15s,border-color .15s}
.pl:hover{box-shadow:0 6px 18px rgba(11,18,32,.1);transform:translateY(-1px);border-color:#0B7A53}
.btn.sm{display:inline-flex;align-items:center;gap:5px;cursor:pointer;transition:transform .12s,background .15s,color .15s}
.btn.sm:hover{background:#0B7A53;color:#fff;border-color:#0B7A53}
.btn.sm:active{transform:scale(.95)}
.stats{display:grid;gap:10px}
.stat{background:#fff;border:1px solid #E3E8EF;border-radius:14px;padding:14px 16px;transition:transform .15s,box-shadow .15s}
.stat:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,18,32,.08)}
.stat small{display:block;color:#5B6575;font-size:13px}
.stat b{font-size:22px;color:#0B1220}
.stat:nth-child(2) b{color:#0B7A53}
.ord{transition:box-shadow .15s}.ord:hover{box-shadow:0 4px 14px rgba(11,18,32,.08)}
input[type=file]{border:2px dashed #B8C2D0;border-radius:12px;padding:14px;width:100%;background:#F8FAFC;cursor:pointer}
input[type=file]:hover{border-color:#0B7A53;background:#F0FAF5}

/* bottom bar is hidden on big screens */
.bnav{display:none}

@media (max-width:700px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .topbar{font-size:12px;padding:6px 12px}
  .guestbar{padding:10px 14px;font-size:13px}
  .gb-b{width:100%}.gb{flex:1;padding:10px}
  /* header: logo + search only, other buttons live in the bottom bar */
  .hdr{padding:10px 12px;gap:10px;flex-wrap:wrap}
  .hdr #sellBtn,.hdr #acctBtn,.hdr #trackBtn,.hdr #cartBtn{display:none}
  .hdr .search,.hdr form{flex:1 1 100%;order:3}
  #q{font-size:16px;min-height:46px;border-radius:14px}
  #cats{overflow-x:auto;white-space:nowrap;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:8px 12px;scrollbar-width:none}
  #cats::-webkit-scrollbar{display:none}
  #cats>*{scroll-snap-align:start}
  .hero{border-radius:18px;margin:10px 12px}
  h1,.hero h1{font-size:28px;line-height:1.15}
  #grid{grid-template-columns:repeat(2,1fr)!important;gap:10px;padding:0 12px}
  .card{border-radius:16px}
  .card:active{transform:scale(.98)}
  .card .btn{min-height:44px;font-size:14px}
  .btn,button{min-height:44px}
  /* popups become bottom sheets */
  .modal{align-items:flex-end;z-index:80}
  .box{width:100%;max-height:92vh;border-radius:22px 22px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom));animation:sheetUp .28s cubic-bezier(.2,.8,.2,1)}
  .box::before{content:"";display:block;width:42px;height:4px;border-radius:4px;background:#CBD3DE;margin:-6px auto 12px}
  .drawer{z-index:70;width:100%;border-radius:22px 22px 0 0;top:auto;height:86vh;bottom:0}
  .mobbar{bottom:calc(64px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(140px + env(safe-area-inset-bottom))}
  .wa{bottom:calc(150px + env(safe-area-inset-bottom))!important}
  input,select,textarea{font-size:16px}
  .tabs.dash button span{font-size:11.5px}
  footer{padding-bottom:20px}

  .bnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid #E3E8EF;padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(11,18,32,.08)}
  .bnav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;color:#5B6575;font:600 11px inherit;font-family:inherit;padding:6px 0;border-radius:12px;min-height:50px;cursor:pointer;transition:color .15s,background .15s,transform .12s}
  .bnav button .ic{width:23px;height:23px}
  .bnav button:active{transform:scale(.92);background:#F0F4F8}
  .bnav button.on{color:#0B7A53}
  .bnav button[data-nav=sell]{color:#fff}
  .bnav button[data-nav=sell] .ic{background:#0B7A53;color:#fff;border-radius:50%;padding:7px;width:38px;height:38px;margin-top:-18px;box-shadow:0 6px 14px rgba(11,122,83,.4);border:3px solid #fff;box-sizing:border-box}
  .bnav button[data-nav=sell] .bl{color:#0B7A53}
  .bb{position:absolute;top:2px;left:calc(50% + 6px);background:#F5A524;color:#1A1203;font-style:normal;font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
  .bb[hidden]{display:none}
}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.box{animation:none}*{transition:none!important}}

.linkbtn{background:none;border:0;color:#0B7A53;font:600 14px inherit;font-family:inherit;text-decoration:underline;cursor:pointer;padding:6px 2px;min-height:auto}
.linkbtn:hover{color:#075E40}

/* iPhone (Safari) + Android (Chrome) polish */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,input,select,.card,[data-add],[data-heart]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input,select,textarea,button{-webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,#5B6575 50%),linear-gradient(135deg,#5B6575 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:34px}
@media (max-width:700px){
  .box{max-height:92vh;max-height:92dvh;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .drawer{height:86vh;height:86dvh;overscroll-behavior:contain}
  body.modal-open{overflow:hidden}
}