/* =====================================================================
   Embers Grill & Burger — shared ordering + cart engine styles.
   Colour, font and radius come from --cc-* custom properties. Each
   concept's own stylesheet aliases these to its own tokens (loaded BEFORE
   this file), so the same markup reads as native to all three design
   systems. Deliberately no fallback block here: a self-referencing
   `--cc-x: var(--cc-x, #fff)` re-declared at :root in a file loaded AFTER
   the concept's own alias would win the cascade and, being a cyclic
   reference, resolve to nothing rather than the fallback — which silently
   drops every background/colour in this file. If this file is ever
   previewed standalone, use the browser devtools to stub the variables
   instead of reintroducing that pattern here.
   ===================================================================== */

/* ---------- category tabs ---------- */
.egc-menu{position:relative}
.egc-tabs{
  display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 2px 14px;
  position:sticky;top:var(--hd,72px);z-index:20;background:var(--cc-bg);margin-bottom:8px;
  scrollbar-width:none;
}
.egc-tabs::-webkit-scrollbar{display:none}
.egc-tab{
  flex:none;border:1.5px solid var(--cc-line);background:var(--cc-bg);color:var(--cc-text-2);
  font-family:var(--cc-font-body);font-weight:700;font-size:13.5px;letter-spacing:.01em;
  padding:11px 18px;border-radius:99px;cursor:pointer;min-height:44px;white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s;
}
.egc-tab.is-active{background:var(--cc-accent);border-color:var(--cc-accent);color:var(--cc-accent-ink)}

.egc-cat{scroll-margin-top:calc(var(--hd,72px) + 64px)}
.egc-cat + .egc-cat{margin-top:38px}
.egc-cat-title{font-family:var(--cc-font-display);font-size:24px;margin-bottom:4px}
.egc-cat-note{margin:0 0 16px;font-size:13.5px;color:var(--cc-text-2)}

/* ---------- item grid + card ---------- */
.egc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.egc-item{
  background:var(--cc-bg);border:1px solid var(--cc-line);border-radius:var(--cc-radius);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s;
}
.egc-item:not(.is-soldout):hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.12)}
.egc-item-img{position:relative;aspect-ratio:4/3;background:var(--cc-bg-2);overflow:hidden}
.egc-item-img img{width:100%;height:100%;object-fit:cover;display:block}
.egc-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--cc-text-2)}
.egc-noimg svg{width:34px;height:34px}
.egc-item.is-soldout .egc-item-img img{filter:grayscale(1) brightness(.62)}
.egc-item-soldband{
  position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.72);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;text-align:center;padding:7px 0;
}
.egc-item.is-soldout{opacity:.72}
.egc-item-b{padding:16px 16px 15px;display:flex;flex-direction:column;gap:8px;flex:1}
.egc-item-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.egc-item-top h4{font-family:var(--cc-font-display);font-size:16.5px;margin:0;line-height:1.25;color:var(--cc-text)}
.egc-tag{
  display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--cc-success);background:color-mix(in srgb, var(--cc-success) 16%, transparent);
  border-radius:99px;padding:2px 7px;margin-left:6px;vertical-align:middle;
}
.egc-price{font-weight:700;color:var(--cc-accent);font-size:14.5px;white-space:nowrap;font-family:var(--cc-font-body)}
.egc-item-b p{margin:0;font-size:13.5px;line-height:1.5;color:var(--cc-text-2);flex:1}
.egc-item-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}

/* admin sold-out toggle (concept two only) */
.egc-admin{display:flex;align-items:center;gap:8px;cursor:pointer}
.egc-admin-txt{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--cc-text-2);min-width:52px}
.egc-toggle{
  flex:none;position:relative;width:54px;height:34px;border-radius:99px;border:0;cursor:pointer;
  background:var(--cc-success);transition:background .3s;padding:0;
}
.egc-toggle::after{
  content:"";position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.egc-toggle[aria-pressed="false"]{background:#8a8a8a}
.egc-toggle[aria-pressed="false"]::after{transform:translateX(20px)}

/* add button / stepper */
.egc-add-wrap{display:flex;align-items:center;justify-content:flex-end;flex:1;min-width:0}
.egc-add{
  background:var(--cc-accent);color:var(--cc-accent-ink);border:0;border-radius:99px;font-weight:700;
  font-family:var(--cc-font-body);font-size:13.5px;padding:10px 20px;min-height:40px;cursor:pointer;
  transition:filter .18s,transform .18s;
}
.egc-add:hover{filter:brightness(1.08)}
.egc-add:active{transform:translateY(1px)}
.egc-add--sm{padding:8px 16px;min-height:40px;font-size:12.5px}
.egc-stepper{
  display:flex;align-items:center;gap:0;background:var(--cc-bg-2);border-radius:99px;overflow:hidden;
  border:1px solid var(--cc-line);
}
.egc-step-btn{
  background:transparent;border:0;width:38px;height:38px;min-width:38px;min-height:38px;
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--cc-accent);cursor:pointer;
}
.egc-step-btn:active{background:rgba(0,0,0,.06)}
.egc-step-qty{min-width:24px;text-align:center;font-weight:700;font-size:14px;color:var(--cc-text);font-variant-numeric:tabular-nums}
.egc-stepper--sm .egc-step-btn{width:40px;height:40px;min-width:40px;min-height:40px;font-size:16px}
.egc-soldout-pill{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cc-text-2);
  background:var(--cc-bg-2);border-radius:99px;padding:8px 14px;
}

/* ---------- hero mini order tiles ---------- */
.egc-item--mini{
  flex-direction:row;align-items:center;gap:0;border-radius:calc(var(--cc-radius) - 2px);
}
.egc-item--mini .egc-item-img{width:58px;height:58px;aspect-ratio:auto;flex:none;border-radius:8px;margin:8px}
.egc-item--mini .egc-item-b{flex-direction:row;align-items:center;padding:8px 10px 8px 0;gap:10px}
.egc-item--mini .egc-item-top{flex-direction:column;align-items:flex-start;gap:1px;flex:1;min-width:0}
.egc-item--mini .egc-item-top h4{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.egc-item--mini .egc-price{font-size:12.5px}
.egc-item--mini .egc-item-actions{margin:0;flex:none}
.egc-item--mini .egc-soldout-pill{padding:6px 10px;font-size:9.5px}

/* ---------- persistent cart bar ---------- */
.egc-bar{position:fixed;z-index:80;left:0;right:0;bottom:0}
.egc-bar-btn{
  width:100%;display:flex;align-items:center;gap:10px;border:0;cursor:pointer;
  background:var(--cc-accent);color:var(--cc-accent-ink);
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));min-height:56px;
  font-family:var(--cc-font-body);box-shadow:0 -12px 34px -14px rgba(0,0,0,.5);
}
.egc-bar-ico{display:flex;flex:none}
.egc-bar-ico svg{width:20px;height:20px}
.egc-bar-count{
  flex:none;background:rgba(255,255,255,.28);border-radius:99px;min-width:22px;height:22px;padding:0 6px;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
}
.egc-bar-txt{flex:1;text-align:left;font-weight:700;font-size:14.5px}
.egc-bar-total{flex:none;font-weight:800;font-size:15px}

@media(min-width:1041px){
  .egc-bar{left:auto;right:24px;bottom:auto;top:calc(var(--hd,74px) + 18px);width:280px}
  .egc-bar-btn{border-radius:99px;box-shadow:0 14px 34px -10px rgba(0,0,0,.4)}
}

/* ---------- overlay + drawer ---------- */
.egc-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s;
}
.egc-overlay.is-on{opacity:1}
.egc-drawer{
  position:fixed;z-index:95;background:var(--cc-bg);color:var(--cc-text);
  display:flex;flex-direction:column;
  left:0;right:0;bottom:0;max-height:86vh;border-radius:18px 18px 0 0;
  transform:translateY(100%);transition:transform .38s cubic-bezier(.16,.84,.28,1);
  box-shadow:0 -20px 60px rgba(0,0,0,.35);
}
.egc-drawer.is-on{transform:translateY(0)}
.egc-drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:1px solid var(--cc-line);flex:none;
}
.egc-drawer-head h3{font-family:var(--cc-font-display);font-size:19px;margin:0;color:var(--cc-text)}
.egc-close{
  background:var(--cc-bg-2);border:1px solid var(--cc-line);color:var(--cc-text);border-radius:99px;
  width:38px;height:38px;min-width:38px;min-height:38px;font-size:20px;line-height:1;cursor:pointer;
}
.egc-drawer-body{padding:16px 20px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;flex:1}

@media(min-width:1041px){
  .egc-drawer{
    left:auto;top:0;bottom:0;right:0;width:420px;max-height:none;border-radius:0;
    transform:translateX(100%);
  }
  .egc-drawer.is-on{transform:translateX(0)}
}

/* ---------- cart lines ---------- */
.egc-lines{display:flex;flex-direction:column;gap:14px}
.egc-line{display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--cc-line)}
.egc-line-img{width:52px;height:52px;flex:none;border-radius:8px;overflow:hidden;background:var(--cc-bg-2)}
.egc-line-img img{width:100%;height:100%;object-fit:cover}
.egc-line-img .egc-noimg svg{width:22px;height:22px}
.egc-line-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.egc-line-b b{font-size:14.5px;color:var(--cc-text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.egc-line-unit{font-size:12px;color:var(--cc-text-2)}
.egc-line-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.egc-line-total{font-weight:800;font-size:14.5px;color:var(--cc-text)}
.egc-line-remove{
  background:none;border:0;color:var(--cc-text-2);font-size:11.5px;text-decoration:underline;cursor:pointer;
  padding:6px 0;min-height:32px;
}
.egc-line-remove:hover{color:var(--cc-accent)}

.egc-subtotal{
  display:flex;justify-content:space-between;align-items:center;padding:16px 0 4px;
  font-weight:800;font-size:16.5px;color:var(--cc-text);font-family:var(--cc-font-display);
}
.egc-fine{font-size:12px;color:var(--cc-text-2);margin:6px 0 16px}

.egc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:99px;
  font-family:var(--cc-font-body);font-weight:700;font-size:14.5px;cursor:pointer;min-height:48px;
  padding:12px 22px;border:1.5px solid transparent;width:100%;
}
.egc-btn--pri{background:var(--cc-accent);color:var(--cc-accent-ink)}
.egc-btn--pri:hover{filter:brightness(1.06)}
.egc-btn--gho{background:transparent;border-color:var(--cc-line);color:var(--cc-text)}
.egc-drawer-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}

/* checkout summary */
.egc-summary-list{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.egc-line--summary{display:flex;justify-content:space-between;font-size:14.5px;color:var(--cc-text)}
.egc-subtotal--summary{border-top:1px solid var(--cc-line);margin-top:8px;padding-top:16px}
.egc-note{
  display:flex;gap:10px;align-items:flex-start;background:var(--cc-bg-2);border:1px solid var(--cc-line);
  border-radius:10px;padding:14px 16px;margin:16px 0 4px;font-size:13px;line-height:1.55;color:var(--cc-text-2);
}
.egc-note svg{width:18px;height:18px;color:var(--cc-accent);flex:none;margin-top:1px}
.egc-note b{color:var(--cc-text)}

/* empty state */
.egc-empty{text-align:center;padding:36px 10px}
.egc-empty-ico{
  display:inline-flex;width:56px;height:56px;border-radius:50%;background:var(--cc-bg-2);color:var(--cc-text-2);
  align-items:center;justify-content:center;margin-bottom:16px;
}
.egc-empty-ico svg{width:24px;height:24px}
.egc-empty p{color:var(--cc-text-2);font-size:14.5px;margin:0 0 20px}

body.egc-lock{overflow:hidden}

/* toast */
.egc-toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);z-index:98;
  background:var(--cc-text);color:var(--cc-bg);font-size:13.5px;font-weight:600;
  padding:12px 18px;border-radius:99px;opacity:0;transition:opacity .26s,transform .26s;
  max-width:88vw;text-align:center;box-shadow:0 14px 34px rgba(0,0,0,.3);
}
.egc-toast.is-on{opacity:1;transform:translate(-50%,0)}
@media(min-width:1041px){
  .egc-toast{left:auto;right:24px;bottom:24px;transform:translateY(12px)}
  .egc-toast.is-on{transform:translateY(0)}
}

/* ---------- mobile ---------- */
@media(max-width:1040px){
  .egc-bar{padding-bottom:0}
}
@media(max-width:640px){
  .egc-tabs{top:var(--hd,64px)}
  .egc-grid{grid-template-columns:1fr}
  .egc-cat + .egc-cat{margin-top:30px}
  .egc-item--mini .egc-item-top h4{max-width:120px}
  .egc-drawer-body{padding:14px 16px calc(18px + env(safe-area-inset-bottom))}
  .egc-line-b b{max-width:150px}
}