/* V0.5.22.68 — Unified responsive UI
   Visual layer only. Keeps existing IDs, functions and business logic intact. */

:root{
  --market-red:#b31217;
  --market-red-dark:#8e0e12;
  --market-soft:#fff7f7;
  --market-line:#eee5e5;
  --market-text:#262222;
  --market-muted:#716767;
  --market-surface:#ffffff;
  --market-shadow:0 10px 30px rgba(77,32,32,.08);
}

/* Overall visual direction */
body{
  background:#fbfaf9;
  color:var(--market-text);
  padding-bottom:92px;
}
.site-header{
  position:sticky;
  top:0;
  z-index:7000;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(179,18,23,.08);
  box-shadow:0 5px 22px rgba(60,25,25,.05);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.site-header .header-dashboard-nav{
  gap:14px;
  padding-top:10px;
  padding-bottom:10px;
}
.site-header .brand{
  min-width:max-content;
}
.site-header .logo{
  background:var(--market-red)!important;
  box-shadow:0 6px 18px rgba(179,18,23,.18);
}
.site-header .brand-copy b{color:#2c2525}
.site-header .brand-copy small{color:#817474}

/* Secondary navigation: same design language on all screen sizes */
.site-header .nav-actions{
  gap:7px!important;
  background:#fff;
  border:1px solid var(--market-line);
  border-radius:18px;
  padding:7px!important;
  box-shadow:0 5px 16px rgba(55,25,25,.035);
}
.site-header .nav-actions>button,
.site-header .nav-actions>.header-user-pill{
  border-radius:13px!important;
}
.site-header .nav-actions>.header-shortcut,
.site-header .nav-actions>.market-order-nav{
  min-height:44px;
}
.site-header .nav-actions .nav-ico{font-size:19px}
.site-header .nav-actions .nav-label{font-weight:700}
.site-header #addShopBtn{
  background:var(--market-red)!important;
  border-color:var(--market-red)!important;
  box-shadow:none!important;
}
.site-header #addShopBtn:hover{background:var(--market-red-dark)!important}

/* Hero stays recognizable, but cleaner and more app-like */
.hero{
  background:
    radial-gradient(circle at 92% 12%, rgba(179,18,23,.10), transparent 28%),
    linear-gradient(180deg,#fff 0%,#fff9f9 100%)!important;
  border-bottom:1px solid rgba(179,18,23,.07);
}
.hero .hero-grid{
  padding-top:26px;
  padding-bottom:26px;
}
.hero h1{
  letter-spacing:-.035em;
  line-height:1.08;
}
.hero h1 em{color:var(--market-red)!important}
.search-box{
  background:#fff!important;
  border:1px solid #eadfdf!important;
  box-shadow:0 10px 28px rgba(73,34,34,.06)!important;
}
.search-box button{
  background:var(--market-red)!important;
}
.chips button{
  border-color:#ebdddd!important;
  background:#fff!important;
}
.chips button:hover{
  border-color:var(--market-red)!important;
  color:var(--market-red)!important;
}

/* Cards and sections visually aligned across devices */
.section{
  scroll-margin-top:92px;
}
.card,.promo-card,.shop-card{
  border-color:#eee7e7!important;
  box-shadow:0 8px 25px rgba(70,35,35,.055)!important;
}
.section-head h2{letter-spacing:-.02em}
.eyebrow.red,.eyebrow{color:var(--market-red)}

/* Hide old floating 3-button control; unified app dock replaces it */
.floating-navigation{display:none!important}

/* Unified dock – same navigation concept on mobile, tablet and PC */
.unified-app-dock{
  position:fixed;
  z-index:8500;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  width:min(560px,calc(100vw - 28px));
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  padding:7px;
  background:rgba(255,255,255,.96);
  border:1px solid #ece4e4;
  border-radius:21px;
  box-shadow:0 14px 42px rgba(46,24,24,.16);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
}
.unified-app-dock button{
  appearance:none;
  border:0;
  background:transparent;
  color:#4c4444;
  min-width:0;
  min-height:54px;
  border-radius:15px;
  padding:5px 3px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;
  font-family:inherit;
  cursor:pointer;
}
.unified-app-dock button:hover{
  background:#fff3f3;
  color:var(--market-red);
}
.unified-app-dock button[data-dock-action="home"]{
  color:var(--market-red);
  background:#fff4f4;
}
.unified-app-dock .dock-icon{
  font-size:21px;
  line-height:1;
}
.unified-app-dock .dock-label{
  font-size:11px;
  font-weight:750;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* Tablet */
@media (min-width:761px) and (max-width:1100px){
  .site-header .header-dashboard-nav{
    grid-template-columns:1fr!important;
    align-items:stretch!important;
  }
  .site-header .nav-actions{
    width:100%;
    max-width:none!important;
    justify-self:stretch!important;
    display:flex!important;
    flex-wrap:wrap;
  }
  .site-header .nav-actions>button{flex:1 1 120px}
  .site-header #addShopBtn{flex:1 1 160px}
  .hero .hero-grid{padding-top:22px;padding-bottom:22px}
  .unified-app-dock{width:min(520px,calc(100vw - 40px))}
}

/* Mobile */
@media (max-width:760px){
  body{
    padding-bottom:calc(86px + env(safe-area-inset-bottom));
  }
  .site-header{
    position:sticky;
  }
  .site-header .header-dashboard-nav{
    display:block!important;
    padding:9px 12px!important;
  }
  .site-header .brand{
    display:flex!important;
    margin-bottom:8px;
  }
  .site-header .brand-copy small{font-size:10px}
  .site-header .nav-actions{
    display:flex!important;
    width:100%;
    overflow-x:auto;
    flex-wrap:nowrap!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:6px!important;
    border-radius:15px;
  }
  .site-header .nav-actions::-webkit-scrollbar{display:none}
  .site-header .nav-actions>button,
  .site-header .nav-actions>.header-user-pill{
    flex:0 0 auto!important;
    min-width:86px!important;
    min-height:44px!important;
    padding:6px 9px!important;
    grid-column:auto!important;
    grid-row:auto!important;
    order:initial!important;
    border-radius:11px!important;
  }
  .site-header .nav-actions .nav-ico{font-size:17px!important}
  .site-header .nav-actions .nav-label{
    font-size:11px!important;
    white-space:nowrap!important;
  }
  .site-header .guest-signup-btn small{display:none!important}
  .site-header #addShopBtn{
    min-width:102px!important;
    min-height:44px!important;
  }
  .site-header #addShopBtn .nav-label::after{content:""!important}
  .site-header #riderJoinBtn{
    min-width:100px!important;
    min-height:44px!important;
  }

  /* Do not hide useful guest shortcuts just because screen is small.
     Login/signup/add-shop remain visible; logged-in actions are still controlled by existing JS classes. */
  body.guest-session .site-header #nearBtn{display:flex!important}
  body.guest-session .site-header #riderJoinBtn{display:flex!important}

  .hero .hero-grid{
    padding:18px 12px 20px!important;
  }
  .hero h1{
    font-size:clamp(30px,10vw,43px)!important;
  }
  .hero p{font-size:14px}
  .search-box{
    border-radius:16px!important;
  }
  .section{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .unified-app-dock{
    left:8px;
    right:8px;
    bottom:calc(7px + env(safe-area-inset-bottom));
    transform:none;
    width:auto;
    border-radius:18px;
    padding:6px;
  }
  .unified-app-dock button{
    min-height:51px;
    border-radius:13px;
  }
  .unified-app-dock .dock-icon{font-size:20px}
  .unified-app-dock .dock-label{font-size:10px}
}

/* Wide desktop: a compact centered dock, never stretched excessively */
@media (min-width:1101px){
  .site-header .header-dashboard-nav{
    grid-template-columns:minmax(230px,.62fr) minmax(650px,1.38fr)!important;
  }
  .site-header .nav-actions{
    justify-self:end;
    max-width:920px;
  }
  .unified-app-dock{
    width:480px;
  }
}


/* V0.5.22.68 — Real Krathumbaen market photo banner supplied by project owner */
.market-photo-banner{
  position:relative;
  width:100%;
  height:clamp(190px,24vw,330px);
  overflow:hidden;
  background:#2c2424;
  border-bottom:1px solid rgba(179,18,23,.10);
}
.market-photo-banner img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 55%;
}
.market-photo-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.04) 20%,rgba(0,0,0,.58) 100%);
  pointer-events:none;
}
.market-photo-overlay{
  position:absolute;
  z-index:2;
  left:0;right:0;bottom:0;
  color:#fff;
}
.market-photo-copy{
  padding:22px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:2px;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.market-photo-copy b{
  font-size:clamp(24px,3vw,38px);
  line-height:1.1;
}
.market-photo-copy span{
  font-size:clamp(12px,1.5vw,17px);
  font-weight:600;
}
@media(max-width:760px){
  .market-photo-banner{height:190px}
  .market-photo-banner img{object-position:center 54%}
  .market-photo-copy{padding:16px 14px}
  .market-photo-copy b{font-size:25px}
  .market-photo-copy span{font-size:12px}
}
@media(min-width:761px) and (max-width:1100px){
  .market-photo-banner{height:250px}
}
@media(min-width:1101px){
  .market-photo-banner{height:300px}
}


/* V0.5.22.68 — Mobile top buttons: fixed grid, no horizontal sliding */
@media (max-width:760px){
  .site-header .nav-actions{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    overflow:visible!important;
    flex-wrap:initial!important;
    padding:6px!important;
  }

  .site-header .nav-actions>button,
  .site-header .nav-actions>.header-user-pill{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:54px!important;
    padding:6px 3px!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:3px!important;
  }

  .site-header .nav-actions .nav-ico{
    font-size:18px!important;
    line-height:1!important;
  }

  .site-header .nav-actions .nav-label{
    font-size:10px!important;
    line-height:1.15!important;
    white-space:normal!important;
    text-align:center!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  /* These 3 functions are already in the bottom dock on mobile.
     Hide only their duplicate top buttons to keep the header clean. */
  .site-header #marketOrdersBtn,
  .site-header #couponWalletBtn,
  .site-header #accountBtn{
    display:none!important;
  }

  /* Add shop stays clear and prominent but remains inside the grid */
  .site-header #addShopBtn{
    min-width:0!important;
    width:100%!important;
  }
}

@media (max-width:420px){
  .site-header .nav-actions{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* V0.5.22.68 — Shortcut actions directly below market banner */
.below-banner-actions{background:#fff;border-bottom:1px solid rgba(179,18,23,.08);padding:10px 0 12px}
.below-banner-actions .nav-actions{
 display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px!important;
 width:100%!important;max-width:none!important;margin:0!important;padding:8px!important;overflow:visible!important;
 background:#fff!important;border:1px solid var(--market-line)!important;border-radius:18px!important;
 box-shadow:0 7px 22px rgba(55,25,25,.045)!important
}
.below-banner-actions .nav-actions>button,.below-banner-actions .nav-actions>.header-user-pill{
 width:100%!important;min-width:0!important;min-height:58px!important;margin:0!important;padding:7px 4px!important;
 display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
 gap:4px!important;border-radius:13px!important
}
.below-banner-actions .nav-ico{font-size:20px!important;line-height:1!important}
.below-banner-actions .nav-label{font-size:11px!important;line-height:1.15!important;text-align:center!important;white-space:normal!important}
@media(max-width:760px){
 .below-banner-actions{padding:8px 10px 10px}
 .below-banner-actions .container{padding:0!important}
 .below-banner-actions .nav-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;padding:7px!important}
 .below-banner-actions #marketOrdersBtn,.below-banner-actions #couponWalletBtn,.below-banner-actions #accountBtn{display:none!important}
 .below-banner-actions .nav-actions>button,.below-banner-actions .nav-actions>.header-user-pill{min-height:55px!important}
 .below-banner-actions .nav-label{font-size:10px!important}
}
@media(max-width:420px){.below-banner-actions .nav-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(min-width:761px) and (max-width:1100px){.below-banner-actions .nav-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important}}


/* V0.5.22.68 — Home flow: Market image → Search → Main categories → All categories → Functions */
.home-discovery{background:#fff;padding:14px 0 8px}
.home-search-card{
  border:1px solid #eee4e4;background:#fff;border-radius:20px;padding:12px;
  box-shadow:0 8px 24px rgba(65,28,28,.05)
}
.home-search-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;
  border:1px solid #e8dddd;border-radius:15px;padding:5px 5px 5px 12px;background:#fff
}
.home-search-icon{font-size:20px}
.home-search-row input{
  width:100%;border:0;outline:0;background:transparent;font:inherit;min-height:42px;color:#2d2929
}
.home-search-row button{
  border:0;background:var(--market-red);color:#fff;border-radius:11px;min-height:42px;padding:0 17px;font:700 13px inherit
}
.home-main-categories{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px
}
.home-main-categories button{
  border:1px solid #eadede;background:#fff;border-radius:14px;min-height:66px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font:700 12px inherit;color:#373131
}
.home-main-categories button:first-child{background:#fff7f7;border-color:#e9cccc}
.home-main-categories button span{line-height:1.15}
.all-categories-toggle{
  width:100%;margin-top:9px;min-height:42px;border:1px solid #eadede;border-radius:12px;
  background:#faf8f8;color:#4a4141;font:700 12px inherit
}
.all-categories-panel{
  margin-top:8px;padding:8px;border:1px solid #eee3e3;border-radius:13px;background:#fff;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px
}
.all-categories-panel[hidden]{display:none}
.all-categories-panel button{
  border:1px solid #eee3e3;background:#fff;border-radius:10px;min-height:40px;padding:6px;font:650 11px inherit
}
.function-shortcuts-section{background:#fff;padding:8px 0 0}
.function-shortcuts-title{display:flex;align-items:end;justify-content:space-between;padding:0 2px}
.function-shortcuts-title b{font-size:17px}
.function-shortcuts-title span{font-size:11px;color:#807474}

/* The real action buttons now sit under search/categories; arrange by usability */
.below-banner-actions{padding-top:6px!important}
.below-banner-actions .nav-actions{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
/* On all sizes, avoid duplicating the persistent dock actions */
.below-banner-actions #marketOrdersBtn,
.below-banner-actions #couponWalletBtn,
.below-banner-actions #accountBtn{display:none!important}

@media(max-width:760px){
  .market-photo-banner{height:180px}
  .market-photo-copy b{font-size:28px}
  .market-photo-copy span{font-size:14px}
  .home-discovery{padding:10px 10px 5px}
  .home-discovery .container{padding:0!important}
  .home-search-card{padding:9px;border-radius:17px}
  .home-search-row button{padding:0 13px}
  .home-main-categories{gap:6px;margin-top:9px}
  .home-main-categories button{min-height:59px;font-size:10.5px;border-radius:12px}
  .all-categories-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .function-shortcuts-section{padding:8px 10px 0}
  .function-shortcuts-section .container{padding:0!important}
  .below-banner-actions .nav-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:420px){
  .below-banner-actions .nav-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(min-width:761px) and (max-width:1100px){
  .home-main-categories{max-width:720px;margin-left:auto;margin-right:auto}
  .all-categories-panel{grid-template-columns:repeat(4,minmax(0,1fr))}
  .below-banner-actions .nav-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(min-width:1101px){
  .home-search-card{max-width:960px;margin:0 auto}
  .below-banner-actions .nav-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:960px!important;margin:0 auto!important}
}


/* V0.5.22.68 — Help shortcut + richer market palette */
.below-banner-actions .nav-actions>a.header-shortcut{
  width:100%!important;min-width:0!important;min-height:58px!important;margin:0!important;padding:7px 4px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:4px!important;border-radius:13px!important;text-decoration:none!important;box-sizing:border-box!important
}
.below-banner-actions .nav-actions>a.header-shortcut small{
  font-size:9px;line-height:1.1;color:#8a7777;text-align:center
}

/* Slightly stronger contrast without turning the page into a rainbow */
.market-photo-overlay{
  background:linear-gradient(to top,rgba(65,9,12,.78),rgba(65,9,12,.12) 70%,transparent)!important
}
.market-photo-copy b{
  text-shadow:0 2px 12px rgba(0,0,0,.28)
}
.home-search-card{
  border-color:#e8cfcf!important;
  box-shadow:0 10px 26px rgba(132,28,34,.09)!important
}
.home-search-row{
  background:#fffafa!important;
  border-color:#e4caca!important
}
.home-search-row:focus-within{
  border-color:var(--market-red)!important;
  box-shadow:0 0 0 3px rgba(179,18,23,.09)!important
}
.home-main-categories button{
  border-color:#ead2d2!important;
  background:linear-gradient(180deg,#fff,#fff8f8)!important;
  box-shadow:0 4px 12px rgba(103,39,39,.045)
}
.home-main-categories button:nth-child(1){
  background:linear-gradient(180deg,#fff5f5,#ffecec)!important
}
.home-main-categories button:nth-child(2){
  background:linear-gradient(180deg,#fff8f3,#fff0e7)!important
}
.home-main-categories button:nth-child(3){
  background:linear-gradient(180deg,#fff7fb,#fcecf4)!important
}
.home-main-categories button:nth-child(4){
  background:linear-gradient(180deg,#fff9ee,#fff2d8)!important
}
.home-main-categories button:active,
.home-main-categories button:hover{
  border-color:var(--market-red)!important;
  transform:translateY(-1px)
}
.all-categories-toggle{
  background:#fff4f4!important;
  border-color:#e8caca!important;
  color:#9f151b!important
}
.function-shortcuts-title b{color:#8f1117}
.below-banner-actions .nav-actions{
  border-color:#ead0d0!important;
  box-shadow:0 8px 22px rgba(115,28,33,.07)!important
}
.below-banner-actions .nav-actions>button,
.below-banner-actions .nav-actions>a.header-shortcut,
.below-banner-actions .nav-actions>.header-user-pill{
  border:1px solid #eddada!important;
  background:linear-gradient(180deg,#fff,#fff8f8)!important;
  color:#3b3030!important
}
.below-banner-actions #addShopBtn{
  background:linear-gradient(180deg,#c62027,#a80f16)!important;
  color:#fff!important;
  border-color:#a80f16!important
}
.below-banner-actions #addShopBtn .nav-label{color:#fff!important}
.below-banner-actions #missionBtn{
  background:linear-gradient(180deg,#fff6e8,#fff0d3)!important;
  border-color:#ecd39d!important
}
.below-banner-actions #favoritesBtn{
  background:linear-gradient(180deg,#fff4f6,#ffe9ed)!important;
  border-color:#ebc6cc!important
}
.below-banner-actions #riderJoinBtn{
  background:linear-gradient(180deg,#fff8e8,#ffefc8)!important;
  border-color:#ebd39a!important
}
.below-banner-actions #supportCenterBtn{
  background:linear-gradient(180deg,#f5f9ff,#eaf3ff)!important;
  border-color:#cbdcf0!important
}
@media(max-width:760px){
  .below-banner-actions .nav-actions>a.header-shortcut{min-height:55px!important}
}


/* V0.5.22.68 — Red brand header + remove duplicate discovery UI */

/* Strong, compact brand bar */
.site-header{
  background:linear-gradient(180deg,#bd171d 0%,#a90f15 100%)!important;
  border-bottom:0!important;
  box-shadow:0 3px 12px rgba(77,8,12,.16)!important;
}
.site-header .header-dashboard-nav{
  min-height:64px!important;
  padding-top:8px!important;
  padding-bottom:8px!important;
  display:flex!important;
  align-items:center!important;
}
.site-header .brand{
  color:#fff!important;
  text-decoration:none!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
.site-header .brand-copy b{
  color:#fff!important;
  font-weight:800!important;
  letter-spacing:.1px;
}
.site-header .brand-copy small{
  color:rgba(255,255,255,.84)!important;
}
.site-header .logo{
  background:#b31217!important;
  color:#fff!important;
  border:3px solid #fff!important;
  box-shadow:0 2px 9px rgba(62,5,8,.22)!important;
}

/* New discovery block under market photo is now the only visible search/category UI.
   Keep old Hero DOM hidden so existing search/category logic can still be proxied safely. */
.hero{
  display:none!important;
}

/* Install App now belongs with the function shortcuts */
.below-banner-actions .function-install-shortcut{
  min-width:0!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
}
.below-banner-actions .function-install-shortcut #installAppBtn{
  width:100%!important;
  min-width:0!important;
  min-height:58px!important;
  margin:0!important;
  padding:7px 4px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  border:1px solid #c9dfd4!important;
  border-radius:13px!important;
  background:linear-gradient(180deg,#f3fbf7,#e8f6ee)!important;
  color:#315a46!important;
  font:inherit!important;
}
.below-banner-actions .function-install-shortcut #installAppHint{
  display:none!important;
}

/* Keep shortcut order intuitive: discover/use → participate → create → install/help */
.below-banner-actions #nearBtn{order:1}
.below-banner-actions #favoritesBtn{order:2}
.below-banner-actions #missionBtn{order:3}
.below-banner-actions #riderJoinBtn{order:4}
.below-banner-actions #guestSignUpBtn{order:5}
.below-banner-actions #addShopBtn{order:6}
.below-banner-actions .function-install-shortcut{order:7}
.below-banner-actions #supportCenterBtn{order:8}
.below-banner-actions #headerUserName{order:9}

/* Existing bottom dock owns these actions; never duplicate them in the shortcut grid. */
.below-banner-actions #marketOrdersBtn,
.below-banner-actions #couponWalletBtn,
.below-banner-actions #accountBtn{
  display:none!important;
}

@media(max-width:760px){
  .site-header .header-dashboard-nav{
    min-height:60px!important;
    padding:7px 12px!important;
  }
  .site-header .logo{
    border-width:2.5px!important;
  }
  .site-header .brand-copy b{font-size:16px!important}
  .site-header .brand-copy small{font-size:10px!important}
  .below-banner-actions .function-install-shortcut #installAppBtn{
    min-height:55px!important;
  }
}

/* V0.5.22.68 — Account controls belong in the red header */
.site-header .header-dashboard-nav{
  justify-content:space-between!important;
  gap:12px!important;
}
.top-account-area{
  margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0
}
.top-account-area button{
  border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.10);color:#fff;
  min-height:36px;border-radius:999px;padding:7px 12px;font:700 11px inherit;cursor:pointer;
  white-space:nowrap
}
.top-account-area .top-signup-proxy{
  background:#fff;color:#a90f15;border-color:#fff
}
.top-account-area .top-display-name-proxy{
  max-width:210px;overflow:hidden;text-overflow:ellipsis
}
.top-account-area .top-display-name-proxy span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.top-account-area .hidden{display:none!important}

/* Original controls stay in DOM for app logic, but account UI is now in the header. */
.below-banner-actions #guestSignUpBtn,
.below-banner-actions #headerUserName{
  display:none!important
}

@media(max-width:760px){
  .site-header .header-dashboard-nav{flex-direction:row!important}
  .site-header .brand-copy small{display:none!important}
  .top-account-area{gap:5px}
  .top-account-area button{min-height:33px;padding:6px 9px;font-size:9.5px}
  .top-account-area .top-login-proxy{display:none}
  .top-account-area .top-display-name-proxy{max-width:125px}
}
@media(max-width:390px){
  .site-header .brand-copy b{font-size:14px!important}
  .site-header .logo{transform:scale(.92)}
  .top-account-area .top-signup-proxy{padding-left:8px;padding-right:8px}
}


/* V0.5.22.68 — Mobile cart visible above the app dock */
@media(max-width:760px){
  #marketCartBtn.mobile-floating-cart{
    position:fixed!important;
    right:14px!important;
    bottom:calc(82px + env(safe-area-inset-bottom))!important;
    left:auto!important;
    top:auto!important;
    z-index:10020!important;
    min-width:58px!important;
    height:58px!important;
    padding:0 13px!important;
    border:2px solid #fff!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#c62027,#a90f15)!important;
    color:#fff!important;
    box-shadow:0 8px 24px rgba(116,12,18,.28)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  #marketCartBtn.mobile-floating-cart .cart-icon{
    font-size:24px!important;
    line-height:1!important
  }
  #marketCartBtn.mobile-floating-cart .cart-label{
    display:none!important
  }
  #marketCartBtn.mobile-floating-cart .count{
    position:absolute!important;
    top:-5px!important;
    right:-3px!important;
    min-width:23px!important;
    height:23px!important;
    padding:0 5px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#b31217!important;
    border:2px solid #b31217!important;
    font-size:11px!important;
    font-weight:900!important;
    line-height:1!important
  }
  body.order-has-mobile-cart{
    padding-bottom:max(108px,calc(94px + env(safe-area-inset-bottom)))!important
  }
}


/* V0.5.22.68 — About project */
.about-project-btn{
  background:#fff7f7!important;
  border-color:#efc9cb!important;
  color:#8f1419!important
}
.about-project-modal{
  position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px
}
.about-project-modal.hidden{display:none!important}
.about-project-backdrop{
  position:absolute;inset:0;background:rgba(35,18,18,.55);backdrop-filter:blur(2px)
}
.about-project-panel{
  position:relative;z-index:1;width:min(92vw,680px);max-height:min(86vh,820px);overflow:auto;
  background:#fff;border-radius:24px;padding:28px 26px 24px;
  box-shadow:0 24px 70px rgba(40,17,17,.28);color:#2f2525;line-height:1.65
}
.about-project-close{
  position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;border-radius:999px;
  background:#f5eded;color:#6e292d;font-size:27px;line-height:1;cursor:pointer
}
.about-project-icon{font-size:31px;text-align:center;margin-top:2px}
.about-project-panel h2{
  margin:3px 0 4px;text-align:center;color:#a90f15;font-size:27px
}
.about-project-lead{
  margin:0 auto 18px;text-align:center;color:#6c5252;font-weight:700
}
.about-project-panel p{margin:0 0 14px}
.about-project-highlight{
  margin:16px 0;padding:15px 16px;border-radius:18px;background:#fff3f3;border:1px solid #f1d1d2
}
.about-project-highlight b{display:block;color:#9f151b;margin-bottom:4px}
.about-project-highlight span{display:block}
.about-project-maker{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0
}
.about-project-maker>div{
  padding:15px;border:1px solid #eadede;border-radius:17px;background:#fffafa
}
.about-project-maker small{
  display:block;color:#876b6b;margin-bottom:3px
}
.about-project-maker b{
  display:block;color:#7f1217
}
.about-project-maker span{
  display:block;font-size:13px;color:#745e5e;margin-top:2px
}
.about-project-ending{
  text-align:center;margin:18px 0 0!important;padding-top:16px;border-top:1px solid #eee1e1
}
body.about-project-open{overflow:hidden}

@media(max-width:600px){
  .about-project-modal{padding:10px}
  .about-project-panel{
    width:100%;max-height:90vh;border-radius:20px;padding:24px 18px 20px;font-size:14px
  }
  .about-project-panel h2{font-size:23px}
  .about-project-maker{grid-template-columns:1fr}
}

/* V0.5.22.68 — About button: explicit function-grid placement */
.below-banner-actions .nav-actions #aboutProjectBtn{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  align-items:center!important;
  justify-content:center!important;
}


/* V0.5.22.68 — Rider application mobile scroll + submit accessibility */
#riderApplyModal{
  overflow:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#riderApplyModal .modal-card{
  max-height:min(88vh,760px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:calc(24px + env(safe-area-inset-bottom))!important;
}
#riderApplyModal #riderApplyForm{
  padding-bottom:8px;
}
#riderApplyModal #riderApplyForm button[type="submit"]{
  width:100%!important;
  min-height:48px!important;
  margin-top:8px!important;
  position:sticky;
  bottom:0;
  z-index:2;
  box-shadow:0 -6px 16px rgba(255,255,255,.92);
}
#riderApplyModal .close{
  position:sticky!important;
  top:0!important;
  margin-left:auto!important;
  z-index:4!important;
}
@media(max-width:600px){
  #riderApplyModal{
    align-items:flex-start!important;
    padding:8px!important;
  }
  #riderApplyModal .modal-card{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 16px)!important;
    height:auto!important;
    margin:0!important;
    border-radius:18px!important;
    padding:18px 16px calc(22px + env(safe-area-inset-bottom))!important;
  }
  #riderApplyModal .section-head{
    margin-top:0!important;
  }
  #riderApplyModal input{
    font-size:16px!important; /* prevent iOS zoom that can trap viewport */
  }
  #riderApplyModal label.check{
    align-items:flex-start!important;
  }
}


/* V0.5.22.68 — Rider application: true mobile fullscreen layer
   Keep this modal above sticky header (7000), app dock (8500) and floating cart. */
#riderApplyModal:not(.hidden){
  position:fixed!important;
  inset:0!important;
  z-index:30000!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#fff!important;
  display:block!important;
}
#riderApplyModal:not(.hidden)>.backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  background:#fff!important;
}
#riderApplyModal:not(.hidden)>.modal-card{
  position:fixed!important;
  inset:0!important;
  z-index:1!important;
  box-sizing:border-box!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  border-radius:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  padding:
    calc(14px + env(safe-area-inset-top))
    16px
    calc(92px + env(safe-area-inset-bottom))
    16px!important;
  background:#fff!important;
}
#riderApplyModal:not(.hidden) .close{
  position:sticky!important;
  top:0!important;
  z-index:10!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:42px!important;
  height:42px!important;
  margin:0 0 4px auto!important;
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid #eadede!important;
  box-shadow:0 4px 14px rgba(50,25,25,.12)!important;
}
#riderApplyModal:not(.hidden) #riderApplyForm button[type="submit"]{
  position:sticky!important;
  bottom:calc(8px + env(safe-area-inset-bottom))!important;
  z-index:9!important;
  width:100%!important;
  min-height:52px!important;
  margin-top:14px!important;
  border-radius:14px!important;
  box-shadow:0 -10px 24px rgba(255,255,255,.98),0 5px 16px rgba(80,25,25,.14)!important;
}
#riderApplyModal:not(.hidden) input{
  font-size:16px!important;
}

/* While rider form is open, remove competing fixed UI on browsers supporting :has(). */
body:has(#riderApplyModal:not(.hidden)) .site-header,
body:has(#riderApplyModal:not(.hidden)) .unified-app-dock,
body:has(#riderApplyModal:not(.hidden)) #marketCartBtn{
  visibility:hidden!important;
  pointer-events:none!important;
}

@media(min-width:761px){
  #riderApplyModal:not(.hidden){
    display:grid!important;
    place-items:center!important;
    padding:24px!important;
    background:rgba(35,18,18,.55)!important;
  }
  #riderApplyModal:not(.hidden)>.backdrop{
    background:rgba(35,18,18,.55)!important;
  }
  #riderApplyModal:not(.hidden)>.modal-card{
    position:relative!important;
    inset:auto!important;
    width:min(680px,92vw)!important;
    height:auto!important;
    max-height:88vh!important;
    border-radius:22px!important;
    padding:22px 22px 34px!important;
  }
}


/* V0.5.22.68 — Global modal/header isolation
   Any system modal must sit above the site header, bottom taskbar and cart. */
.modal:not(.hidden){
  z-index:30000!important;
}

/* Hide persistent navigation while a modal/page overlay is open.
   This prevents the red market header and bottom taskbar from covering titles,
   close buttons or submit buttons. */
body.market-modal-open .site-header,
body.market-modal-open .unified-app-dock,
body.market-modal-open #marketCartBtn,
body.market-modal-open .floating-navigation{
  visibility:hidden!important;
  pointer-events:none!important;
}

/* About page is a separate custom overlay, so apply the same isolation. */
body.about-project-open .site-header,
body.about-project-open .unified-app-dock,
body.about-project-open #marketCartBtn,
body.about-project-open .floating-navigation{
  visibility:hidden!important;
  pointer-events:none!important;
}

@media(max-width:760px){
  /* All modal-style pages become their own mobile screen, independent of header/dock. */
  .modal:not(.hidden){
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#fff!important;
    display:block!important;
  }

  .modal:not(.hidden)>.backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:0!important;
    background:#fff!important;
  }

  .modal:not(.hidden)>.modal-card{
    position:fixed!important;
    inset:0!important;
    z-index:1!important;
    box-sizing:border-box!important;
    width:100vw!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    border-radius:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    padding:
      calc(12px + env(safe-area-inset-top))
      16px
      calc(86px + env(safe-area-inset-bottom))
      16px!important;
    background:#fff!important;
  }

  .modal:not(.hidden)>.modal-card>.close,
  .modal:not(.hidden) .modal-card>.close{
    position:sticky!important;
    top:0!important;
    z-index:20!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:42px!important;
    height:42px!important;
    margin:0 0 4px auto!important;
    border-radius:999px!important;
    background:#fff!important;
    border:1px solid #eadede!important;
    box-shadow:0 4px 14px rgba(50,25,25,.12)!important;
  }

  .modal:not(.hidden) input,
  .modal:not(.hidden) select,
  .modal:not(.hidden) textarea{
    font-size:16px!important;
  }
}

/* Desktop/tablet stay modal-style but always clear of the sticky header. */
@media(min-width:761px){
  .modal:not(.hidden){
    z-index:30000!important;
  }
  .modal:not(.hidden)>.modal-card{
    max-height:88vh!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
}


/* V0.5.22.68 — Order modal must appear above shop-detail modal.
   V0.5.22.47 raised normal .modal layers to 30000, so the order UI needs
   its own higher layer or “ดูสินค้าและสั่งซื้อ” appears to do nothing. */
#marketOrderModal:not(.hidden),
.market-order-modal:not(.hidden){
  z-index:40000!important;
}

/* Order flow is its own active screen: persistent navigation must stay out. */
body.market-order-open .site-header,
body.market-order-open .unified-app-dock,
body.market-order-open #marketCartBtn,
body.market-order-open .floating-navigation{
  visibility:hidden!important;
  pointer-events:none!important;
}


/* V0.5.22.68 — Shop detail -> order flow
   When user opens products from shop detail, the shop detail layer is closed first
   so the order screen becomes the only active overlay. */
#shopDetailModal.hidden{
  display:none!important;
  pointer-events:none!important;
}


/* V0.5.22.68 — Final combined overlay/navigation behavior
   Product browsing: hide site header + bottom dock, KEEP cart visible.
   Other order screens/checkout: cart may be hidden to avoid obstruction. */
body.market-order-open .site-header,
body.market-order-open .unified-app-dock,
body.market-order-open .floating-navigation{
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Default order flow: no floating cart (checkout/order management). */
body.market-order-open #marketCartBtn{
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Product catalogue: cart is essential feedback/navigation, so restore it. */
body.market-order-open.market-order-product-view #marketCartBtn{
  visibility:visible!important;
  pointer-events:auto!important;
  display:flex!important;
  z-index:41000!important;
}

/* On phones keep cart clear of product content and safe-area.
   There is no bottom taskbar while the product catalogue is open. */
@media(max-width:760px){
  body.market-order-open.market-order-product-view #marketCartBtn{
    position:fixed!important;
    right:14px!important;
    bottom:calc(18px + env(safe-area-inset-bottom))!important;
    left:auto!important;
    top:auto!important;
  }
}


/* V0.5.22.68 — Mobile promotion carousel discoverability */
.promotion-swipe-hint{display:none}
@media(max-width:760px){
  .promo-mobile-shell{
    width:100%;
    overflow:visible;
  }
  #promotionGrid.promo-grid{
    display:flex!important;
    grid-template-columns:none!important;
    gap:12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory;
    scroll-padding-left:0;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:2px 10% 8px 0!important;
  }
  #promotionGrid.promo-grid::-webkit-scrollbar{display:none}
  #promotionGrid.promo-grid>.promo-card{
    flex:0 0 90%!important;
    width:90%!important;
    min-width:90%!important;
    max-width:90%!important;
    scroll-snap-align:start;
  }
  .promotion-swipe-hint:not(.hidden){
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin:5px 0 2px;
    color:#8b7373;
    font-size:12px;
    font-weight:700;
    text-align:center;
    transition:opacity .25s ease;
  }
  .promotion-swipe-hint.has-swiped>span{
    opacity:.42;
  }
  .promotion-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:8px;
  }
  .promotion-dots i{
    display:block;
    width:6px;
    height:6px;
    border-radius:999px;
    background:#d9cccc;
    transition:width .2s ease,background .2s ease;
  }
  .promotion-dots i.active{
    width:18px;
    background:#b31217;
  }
}

/* All-promotions modal remains a normal grid; only the homepage strip swipes. */
@media(max-width:760px){
  #allPromotionsGrid.promo-grid{
    display:grid!important;
    overflow:visible!important;
    padding:0!important;
  }
  #allPromotionsGrid.promo-grid>.promo-card{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
  }
}


/* V0.5.22.68 — Recommended shops use same mobile swipe pattern as promotions */
.recommended-swipe-hint{display:none}
@media(max-width:760px){
  .recommended-mobile-shell{
    width:100%;
    overflow:visible;
  }

  #recommendedGrid.recommended-slider{
    display:flex!important;
    grid-template-columns:none!important;
    gap:12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory;
    scroll-padding-left:0;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:2px 10% 8px 0!important;
  }

  #recommendedGrid.recommended-slider::-webkit-scrollbar{display:none}

  #recommendedGrid.recommended-slider>.recommended-compact-card{
    flex:0 0 90%!important;
    width:90%!important;
    min-width:90%!important;
    max-width:90%!important;
    scroll-snap-align:start;
  }

  .recommended-swipe-hint:not(.hidden){
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin:5px 0 2px;
    color:#8b7373;
    font-size:12px;
    font-weight:700;
    text-align:center;
    transition:opacity .25s ease;
  }

  .recommended-swipe-hint.has-swiped>span{
    opacity:.42;
  }

  .recommended-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:8px;
  }

  .recommended-dots i{
    display:block;
    width:6px;
    height:6px;
    border-radius:999px;
    background:#d9cccc;
    transition:width .2s ease,background .2s ease;
  }

  .recommended-dots i.active{
    width:18px;
    background:#b31217;
  }
}


/* V0.5.22.68 — Larger category icon + label, same button height */
.home-main-categories button{
  font-size:25px!important;            /* emoji/icon */
  line-height:1!important;
  font-weight:700!important;
}
.home-main-categories button span{
  font-size:14.5px!important;          /* category name */
  line-height:1.1!important;
  font-weight:800!important;
}

/* Make the secondary category names easier to read too,
   without changing their button dimensions. */
.all-categories-toggle{
  font-size:13.5px!important;
  font-weight:800!important;
}
.all-categories-panel button{
  font-size:12.5px!important;
  font-weight:750!important;
}

@media(max-width:760px){
  /* Keep the existing mobile min-height (59px); only enlarge content. */
  .home-main-categories button{
    min-height:59px!important;
    font-size:23px!important;
  }
  .home-main-categories button span{
    font-size:13.5px!important;
  }
  .all-categories-toggle{
    min-height:42px!important;
    font-size:13px!important;
  }
  .all-categories-panel button{
    min-height:40px!important;
    font-size:12.5px!important;
  }
}

@media(min-width:761px){
  /* Keep the existing desktop/tablet min-height (66px). */
  .home-main-categories button{
    min-height:66px!important;
  }
}


/* V0.5.22.68 — Mission stays a popup on every screen size.
   This intentionally overrides the global mobile fullscreen-modal rule. */
#missionModal:not(.hidden){
  position:fixed!important;
  inset:0!important;
  z-index:42000!important;
  display:grid!important;
  place-items:center!important;
  padding:18px!important;
  overflow:hidden!important;
}
#missionModal:not(.hidden)>.backdrop{
  position:fixed!important;
  inset:0!important;
  background:rgba(35,18,18,.58)!important;
}
#missionModal:not(.hidden)>.mission-modal-card{
  position:relative!important;
  inset:auto!important;
  z-index:1!important;
  width:min(620px,calc(100vw - 28px))!important;
  height:auto!important;
  max-height:min(82dvh,760px)!important;
  margin:auto!important;
  padding:20px 18px 24px!important;
  border-radius:22px!important;
  background:#fff!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  box-shadow:0 20px 60px rgba(30,10,10,.28)!important;
}
#missionModal:not(.hidden)>.mission-modal-card>.close{
  position:sticky!important;
  top:0!important;
  z-index:12!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:40px!important;
  height:40px!important;
  margin:0 0 4px auto!important;
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid #eadede!important;
  box-shadow:0 3px 12px rgba(50,25,25,.12)!important;
}
@media(max-width:760px){
  #missionModal:not(.hidden){
    padding:14px!important;
  }
  #missionModal:not(.hidden)>.mission-modal-card{
    width:calc(100vw - 28px)!important;
    max-width:560px!important;
    max-height:78dvh!important;
    border-radius:20px!important;
    padding:16px 14px calc(22px + env(safe-area-inset-bottom))!important;
  }
}


/* V0.5.22.68 — Show both Sign up and Login in mobile header */
@media(max-width:760px){
  .top-account-area .top-login-proxy{
    display:inline-flex!important;
  }
  .top-account-area{
    gap:4px!important;
    flex-wrap:nowrap!important;
  }
  .top-account-area .top-signup-proxy,
  .top-account-area .top-login-proxy{
    min-height:32px!important;
    padding:5px 7px!important;
    font-size:9.5px!important;
    white-space:nowrap!important;
  }
}
@media(max-width:390px){
  .top-account-area .top-signup-proxy,
  .top-account-area .top-login-proxy{
    padding-left:6px!important;
    padding-right:6px!important;
    font-size:9px!important;
  }
}

/* V0.5.22.68 — High contrast floating cart: white cart on red button */
#marketCartBtn.mobile-floating-cart,
body.market-order-open.market-order-product-view #marketCartBtn{
  background:#b31217!important;
  border:2px solid #fff!important;
  color:#fff!important;
  box-shadow:0 7px 22px rgba(112,15,20,.30)!important;
}
#marketCartBtn.mobile-floating-cart .cart-icon,
body.market-order-open.market-order-product-view #marketCartBtn .cart-icon{
  color:#fff!important;
  font-size:0!important;
  width:29px!important;
  height:29px!important;
  display:block!important;
  position:relative!important;
}
/* CSS cart icon, so it is truly white instead of a platform-dependent emoji. */
#marketCartBtn.mobile-floating-cart .cart-icon::before,
body.market-order-open.market-order-product-view #marketCartBtn .cart-icon::before{
  content:""!important;
  position:absolute!important;
  left:4px!important;
  top:5px!important;
  width:18px!important;
  height:12px!important;
  border:3px solid #fff!important;
  border-top:0!important;
  border-radius:2px 2px 5px 5px!important;
  transform:skew(-7deg)!important;
}
#marketCartBtn.mobile-floating-cart .cart-icon::after,
body.market-order-open.market-order-product-view #marketCartBtn .cart-icon::after{
  content:"••"!important;
  position:absolute!important;
  left:5px!important;
  top:13px!important;
  color:#fff!important;
  font-size:17px!important;
  font-weight:900!important;
  letter-spacing:7px!important;
  line-height:1!important;
}
#marketCartBtn.mobile-floating-cart .cart-label,
body.market-order-open.market-order-product-view #marketCartBtn .cart-label{
  color:#fff!important;
  font-weight:800!important;
}
#marketCartBtn.mobile-floating-cart .count,
body.market-order-open.market-order-product-view #marketCartBtn .count{
  background:#fff!important;
  color:#b31217!important;
  border:2px solid #b31217!important;
  font-weight:900!important;
}


/* V0.5.22.68 — Clear standard shopping-cart icon.
   Overrides the abstract V0.5.22.55 CSS drawing; cart behavior is unchanged. */
#marketCartBtn.mobile-floating-cart .cart-icon,
body.market-order-open.market-order-product-view #marketCartBtn .cart-icon{
  width:32px!important;
  height:32px!important;
  font-size:0!important;
  display:block!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:30px 30px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.25' fill='%23fff'/%3E%3Ccircle cx='19' cy='20' r='1.25' fill='%23fff'/%3E%3Cpath d='M2.5 3.5h2.4l2.15 10.1a2 2 0 0 0 1.95 1.58h8.75a2 2 0 0 0 1.95-1.56L21.2 7H6.05'/%3E%3Cpath d='M8 11h11.9'/%3E%3C/svg%3E")!important;
  position:relative!important;
}
/* Disable old pseudo-elements from 22.55. */
#marketCartBtn.mobile-floating-cart .cart-icon::before,
#marketCartBtn.mobile-floating-cart .cart-icon::after,
body.market-order-open.market-order-product-view #marketCartBtn .cart-icon::before,
body.market-order-open.market-order-product-view #marketCartBtn .cart-icon::after{
  content:none!important;
  display:none!important;
}


/* V0.5.22.68 — Approved rider profile editor */
.rider-profile-summary{
  display:grid;
  gap:8px;
  margin:14px 0;
}
.rider-profile-summary>div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:10px 12px;
  border:1px solid rgba(120,70,55,.14);
  border-radius:12px;
  background:#fffafa;
}
.rider-profile-summary span{
  font-size:12px;
  opacity:.7;
}
.rider-profile-summary b{
  text-align:right;
  word-break:break-word;
}
.rider-approved-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.rider-approved-actions button{
  flex:1 1 180px;
}


/* v0.5.22.68 — Rider job inbox */
.rider-job-panel{margin-top:16px;border-top:1px solid #eee;padding-top:14px}
.rider-job-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.rider-job-panel-head>div{display:flex;flex-direction:column;gap:2px}
.rider-job-panel-head small{color:#777}
.rider-job-inbox{display:grid;gap:12px}
.rider-job-card{border:1px solid #e5e5e5;border-radius:16px;padding:14px;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.05)}
.rider-job-card.waiting{border-color:#ffb3b3;background:#fffafa}
.rider-job-card.mine{border-color:#b8d8ff;background:#fbfdff}
.rider-job-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.rider-job-card-head>div:first-child{display:flex;flex-direction:column}
.rider-job-card-head small{color:#666;margin-top:2px}
.rider-job-price{font-weight:800;font-size:18px;color:#c40000;white-space:nowrap}
.rider-job-meta{font-size:13px;color:#666;margin:6px 0 10px}
.rider-job-section{padding:10px 0;border-top:1px dashed #ddd;font-size:14px;display:grid;gap:5px}
.rider-job-section>strong{margin-bottom:2px}
.rider-stop{display:grid;gap:2px;padding:5px 0}
.rider-stop small{color:#666}
.rider-stop a,.rider-job-section a{color:#1467c9;text-decoration:none}
.rider-accept-job{width:100%;margin-top:8px;min-height:46px;font-size:16px;font-weight:800}
.rider-job-owned{margin-top:8px;padding:10px;border-radius:10px;background:#eef6ff;font-weight:700;text-align:center}
.rider-job-empty{padding:18px 10px;text-align:center;color:#666;background:#fafafa;border-radius:12px}
@media(max-width:760px){
  .rider-job-panel{margin-top:12px}
  .rider-job-card{border-radius:14px;padding:12px}
  .rider-job-price{font-size:17px}
}


/* v0.5.22.68 Rider navigation + workflow */
.rider-contact-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.rider-mini-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 11px;border:1px solid #ddd;border-radius:10px;background:#fff;color:#222!important;text-decoration:none!important;font-weight:700;font-size:13px}
.rider-mini-btn.map{border-color:#b9d6ff;background:#eef6ff;color:#0756a8!important}
.rider-next-job{width:100%;min-height:48px;margin-top:9px;font-size:15px;font-weight:800}
.rider-job-section small{line-height:1.45}


/* v0.5.22.68 Rider delivery proof */
.rider-proof-action{display:grid;gap:6px;margin-top:9px}
.rider-proof-action small{color:#666;text-align:center}
.rider-proof-action .rider-next-job{margin-top:0}

.rider-push-card{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px;margin:12px 0;border:1px solid #e6e6e6;border-radius:14px;background:#fff}
.rider-push-card small{color:#666}.rider-push-card button{flex:0 0 auto}
@media(max-width:760px){.rider-push-card{align-items:stretch;flex-direction:column}.rider-push-card button{width:100%}}

.switch-pickup-wrap{display:grid;gap:5px;margin-top:10px}
.switch-pickup-wrap small{color:#777;text-align:center}
.switch-pickup-btn{width:100%;border-color:#c83b32}