/* ============================================================
   JuiceBench — Frontend Design System  (Espresso & Amber)
   Premium, warm artisan-cafe look. Backend/content unchanged.
   ============================================================ */
:root{
  --jb-espresso:#2b211a;
  --jb-espresso-dark:#191109;
  --jb-amber:#bf7d3a;
  --jb-amber-dark:#9c5f23;
  --jb-amber-soft:#f3e4d2;
  --jb-cream:#f6efe6;
  --jb-card:#fffdf9;
  --jb-ink:#2b211a;
  --jb-muted:#8a7d6f;
  --jb-line:#e8ddcd;
  --jb-shadow:0 14px 38px rgba(43,33,26,.12);
  --jb-shadow-sm:0 5px 16px rgba(43,33,26,.08);
  --jb-radius:20px;
  --jb-radius-sm:14px;
  --jb-grad:linear-gradient(158deg,#33271e 0%,#1c1308 100%);
  --jb-grad-warm:linear-gradient(135deg,#c98a45 0%,#a9682c 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;margin:0;padding:0;background:var(--jb-cream);color:var(--jb-ink);-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,h5,.brand-font{font-family:'Poppins','Inter',sans-serif;}
img{max-width:100%}
a{text-decoration:none}

/* ---------- Header (premium espresso bar) ---------- */
.jb-header{position:sticky;top:0;z-index:1000;background:var(--jb-grad);border-bottom:1px solid rgba(191,125,58,.35);}
.jb-header .jb-inner{max-width:1140px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.jb-brand{display:flex;align-items:center;gap:13px;color:#fff;}
.jb-brand .jb-logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--jb-grad-warm);color:#fff;font-size:21px;box-shadow:0 6px 16px rgba(191,125,58,.4);}
.jb-brand .jb-name{font-weight:700;font-size:1.2rem;letter-spacing:.3px;line-height:1.05;text-transform:capitalize;color:#fff;font-family:'Poppins',sans-serif;}
.jb-brand .jb-sub{font-size:.68rem;color:var(--jb-amber);letter-spacing:.26em;text-transform:uppercase;font-weight:600;}
.jb-header .jb-tag{font-size:.76rem;font-weight:600;color:#f2e3d1;background:rgba(191,125,58,.18);border:1px solid rgba(191,125,58,.45);padding:8px 15px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;}

/* ---------- Hero ---------- */
.jb-hero{max-width:1140px;margin:22px auto 0;padding:0 20px;}
.jb-hero-card{position:relative;border-radius:26px;overflow:hidden;min-height:340px;display:flex;align-items:flex-end;box-shadow:var(--jb-shadow);background:var(--jb-grad);}
.jb-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);opacity:.9;}
.jb-hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,17,9,.25) 0%,rgba(25,17,9,.55) 55%,rgba(25,17,9,.88) 100%);}
.jb-hero-content{position:relative;z-index:2;padding:36px 32px;color:#fff;max-width:640px;}
.jb-hero-content .pill{display:inline-flex;align-items:center;gap:8px;background:rgba(191,125,58,.22);border:1px solid rgba(191,125,58,.5);padding:7px 15px;border-radius:999px;font-size:.76rem;font-weight:600;letter-spacing:.05em;margin-bottom:15px;color:#f3e0c8;}
.jb-hero-content h1{font-size:2.4rem;font-weight:700;margin:0 0 10px;line-height:1.08;font-family:'Poppins',sans-serif;}
.jb-hero-content p{font-size:1rem;opacity:.9;margin:0 0 22px;max-width:520px;}
.jb-btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;cursor:pointer;padding:13px 24px;border-radius:999px;border:none;font-size:.95rem;transition:.2s;}
.jb-btn-mango{background:var(--jb-grad-warm);color:#fff;box-shadow:0 8px 20px rgba(191,125,58,.4);}
.jb-btn-mango:hover{transform:translateY(-2px);color:#fff;}

/* promo strip */
.jb-promo{max-width:1140px;margin:18px auto 0;padding:0 20px;}
.jb-promo-inner{display:flex;align-items:center;gap:18px;background:var(--jb-card);border:1px solid var(--jb-line);border-radius:var(--jb-radius);padding:14px 18px;box-shadow:var(--jb-shadow-sm);}
.jb-promo-inner img{width:118px;height:72px;object-fit:cover;border-radius:12px;flex:none;}
.jb-promo-text{font-weight:600;color:var(--jb-espresso);}
.jb-promo-text small{display:block;color:var(--jb-muted);font-weight:500;}

/* ---------- Desktop category quick nav ---------- */
.jb-catnav{position:sticky;top:0;z-index:900;background:var(--jb-cream);border-bottom:1px solid var(--jb-line);}
.jb-catnav-inner{max-width:1140px;margin:0 auto;padding:12px 20px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;}
.jb-catnav-inner::-webkit-scrollbar{display:none}
.jb-chip{flex:none;padding:9px 18px;border-radius:999px;background:var(--jb-card);border:1px solid var(--jb-line);color:var(--jb-ink);font-weight:600;font-size:.88rem;white-space:nowrap;transition:.18s;}
.jb-chip:hover{border-color:var(--jb-amber);color:var(--jb-amber-dark);transform:translateY(-1px);}

/* ---------- Menu sections ---------- */
.jb-menu{max-width:1140px;margin:8px auto 40px;padding:0 20px;}
#menu{scroll-margin-top:64px;}
.jb-group{margin-top:42px;scroll-margin-top:72px;}
.jb-group-head{display:flex;align-items:center;gap:14px;margin-bottom:6px;}
.jb-group-head .bar{width:6px;height:30px;border-radius:6px;background:var(--jb-grad-warm);}
.jb-group-head h2{font-size:1.7rem;font-weight:700;margin:0;color:var(--jb-espresso);}
.jb-group-head .count{color:var(--jb-muted);font-size:.85rem;font-weight:600;background:var(--jb-card);border:1px solid var(--jb-line);padding:4px 12px;border-radius:999px;}

.jb-empty{background:var(--jb-card);border:1px dashed var(--jb-line);border-radius:var(--jb-radius);box-shadow:var(--jb-shadow-sm);margin-top:20px;padding:34px 18px;text-align:center;color:var(--jb-muted);font-weight:500;}
.jb-empty i{display:block;font-size:1.8rem;color:var(--jb-amber);margin-bottom:8px;}
.jb-sub{background:var(--jb-card);border:1px solid var(--jb-line);border-radius:var(--jb-radius);box-shadow:var(--jb-shadow-sm);overflow:hidden;margin-top:20px;}
.jb-sub-head{cursor:default;position:relative;}
.jb-sub-banner{position:relative;height:152px;background-size:cover;background-position:center;background-color:#efe6d8;}
.jb-sub-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(25,17,9,.78) 100%);}
.jb-sub-title{position:absolute;z-index:2;bottom:14px;left:18px;color:#fff;font-weight:700;font-size:1.2rem;text-transform:capitalize;letter-spacing:.3px;font-family:'Poppins',sans-serif;}
.jb-sub-title.no-img{position:static;color:var(--jb-espresso);padding:18px 18px 0;}
.jb-sub-chev{display:none;position:absolute;z-index:3;right:14px;top:14px;width:32px;height:32px;border-radius:50%;background:rgba(255,253,249,.94);color:var(--jb-amber-dark);align-items:center;justify-content:center;font-size:.82rem;transition:transform .25s;box-shadow:0 2px 7px rgba(0,0,0,.18);}
.jb-sub-head.collapsed .jb-sub-chev{transform:rotate(180deg);}
.jb-items{padding:8px 18px 16px;}
.jb-item{display:flex;align-items:flex-start;gap:13px;padding:14px 0;border-bottom:1px dashed var(--jb-line);}
.jb-item:last-child{border-bottom:none}
.jb-item-thumb{width:66px;height:66px;border-radius:15px;object-fit:cover;flex:none;background:var(--jb-amber-soft);}
.jb-item-thumb.ph{display:grid;place-items:center;color:var(--jb-amber);font-size:1.4rem;}
.jb-item-body{flex:1 1 auto;min-width:0;overflow:hidden;}
.jb-item-name{font-weight:600;font-size:1rem;font-family:'Poppins',sans-serif;color:var(--jb-espresso);overflow-wrap:anywhere;}
.jb-item-desc{color:var(--jb-muted);font-size:.85rem;margin-top:2px;line-height:1.35;overflow-wrap:anywhere;word-break:break-word;}
.jb-price{flex:0 0 auto;align-self:flex-start;margin-top:2px;font-weight:700;color:var(--jb-amber-dark);font-family:'Poppins',sans-serif;background:#f7ecdb;border:1px solid #ecdcc2;padding:7px 12px;border-radius:12px;font-size:.9rem;white-space:nowrap;}
.jb-price .cur{font-size:.68rem;color:var(--jb-espresso);font-weight:700;margin-right:3px;opacity:.7;}
@media (min-width:900px){.jb-items.cols{column-count:2;column-gap:34px;}.jb-items.cols .jb-item{break-inside:avoid;}}

/* ---------- Footer ---------- */
.jb-footer{background:var(--jb-grad);color:#fff;margin-top:50px;}
.jb-footer .jb-inner{max-width:1140px;margin:0 auto;padding:34px 20px;text-align:center;}
.jb-footer .jb-logo{width:50px;height:50px;border-radius:15px;display:inline-grid;place-items:center;background:var(--jb-grad-warm);font-size:23px;margin-bottom:12px;}
.jb-footer h3{font-weight:700;margin:0 0 6px;font-family:'Poppins',sans-serif;}
.jb-footer p{opacity:.82;margin:0 auto;max-width:560px;}
.jb-footer .jb-copy{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);font-size:.82rem;opacity:.75;}

/* ============================================================
   Mobile: Food/Drinks photo tabs + collapsible subcategories
   (Engage <992px; desktop stays fully expanded)
   ============================================================ */
.jb-tabs{display:none;}
.jb-tabs-inner{max-width:1140px;margin:0 auto;padding:12px 16px 11px;}
.jb-tabs-hint{font-size:.76rem;font-weight:600;color:var(--jb-muted);text-align:center;margin-bottom:9px;display:flex;align-items:center;justify-content:center;gap:7px;}
.jb-tabs-hint i{color:var(--jb-amber);}
.jb-tabs-row{display:flex;gap:10px;}
/* horizontal swipe row when there are 3+ main categories */
.jb-tabs-row.scroll{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
.jb-tabs-row.scroll::-webkit-scrollbar{display:none;}
.jb-tabs-row.scroll .jb-tab{flex:0 0 43%;scroll-snap-align:start;}
.jb-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 8px 10px;border-radius:15px;cursor:pointer;background:var(--jb-card);border:1px solid var(--jb-line);box-shadow:0 5px 13px rgba(43,33,26,.14);transition:.16s;position:relative;overflow:hidden;}
.jb-tab:active{transform:translateY(1px) scale(.99);box-shadow:0 2px 6px rgba(43,33,26,.14);}
.jb-tab-thumb{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--jb-amber-soft);display:grid;place-items:center;color:var(--jb-amber);font-size:1.1rem;border:2px solid var(--jb-line);}
.jb-tab-label{font-family:'Poppins',sans-serif;font-weight:600;font-size:.92rem;color:var(--jb-espresso);}
.jb-tab-go{font-size:.66rem;font-weight:600;color:var(--jb-amber-dark);display:flex;align-items:center;gap:4px;}
.jb-tab.active{background:var(--jb-grad);border-color:transparent;box-shadow:0 9px 22px rgba(43,33,26,.30);}
.jb-tab.active .jb-tab-label{color:#fff;}
.jb-tab.active .jb-tab-thumb{border-color:var(--jb-amber);}
.jb-tab.active .jb-tab-go{color:var(--jb-amber);}
.jb-tab.active::after{content:"";position:absolute;bottom:0;left:18%;right:18%;height:4px;border-radius:4px 4px 0 0;background:var(--jb-grad-warm);}

@media (max-width:991px){
  .jb-tabs{display:block;position:sticky;top:0;z-index:900;background:var(--jb-cream);border-bottom:1px solid var(--jb-line);}
  .jb-catnav{display:none;}
  .jb-group-head{display:none;}
  .jb-group{margin-top:8px;}
  .jb-sub-head{cursor:pointer;}
  .jb-sub-chev{display:flex;}
  .jb-sub-title.no-img{padding-right:54px;}
  .jb-promo{display:none;}
  .jb-hero{margin-top:12px;}
  .jb-hero-card{min-height:148px;border-radius:18px;background:var(--jb-espresso);align-items:center;}
  .jb-hero-bg{background-size:contain;background-repeat:no-repeat;background-position:center;opacity:1;transform:none;}
  .jb-hero-card::after{display:none;}
  .jb-hero-content{display:none;}
  .jb-header .jb-tag{display:none;}
}

/* Per-device homepage banner visibility (admin toggles) */
@media (min-width:992px){.jb-hero.jb-hide-desktop{display:none;}}
@media (max-width:991px){.jb-hero.jb-hide-mobile{display:none;}}