:root{--bg:#f7f5ef;--surface:#fff;--surface-soft:#f1eee5;--text:#171714;--muted:#706f67;--line:#dedbd1;--accent:#1f5a3b;--accent-soft:#e4efe8;--danger:#9f3e36;--danger-soft:#f6e5e2;--shadow:0 18px 50px rgba(31,31,25,.10);--shadow-small:0 10px 24px rgba(31,31,25,.08);--radius-xl:30px;--radius-lg:22px;--radius-md:16px;--radius-sm:12px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 0%,rgba(255,255,255,.98),transparent 32%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}.hidden{display:none!important}.topbar{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:16px;padding:18px clamp(18px,4vw,54px);background:rgba(247,245,239,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(222,219,209,.76)}.brand-block{text-align:center;justify-self:center}.restaurant-name{font-weight:800;letter-spacing:-.02em}.table-badge{margin-top:3px;display:inline-block;font-size:12px;color:var(--muted)}.icon-button,.cart-button,.toggle-button,.text-button,.secondary-button,.danger-soft-button,.primary-button{border:0;border-radius:999px}.icon-button{width:44px;height:44px;display:grid;place-items:center;background:var(--surface);color:var(--text);font-size:24px;box-shadow:var(--shadow-small)}.back-button{font-size:28px;line-height:1}.cart-button{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 13px 0 14px;background:var(--text);color:#fff;font-weight:700}.cart-icon{font-size:16px}.count-badge{min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:#fff;color:var(--text);font-size:12px}main{width:min(1220px,calc(100% - 32px));margin:0 auto;padding:34px 0 96px}.screen{display:none}.screen.active{display:block;animation:fadeIn 220ms ease}@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.hero{max-width:780px;margin:40px auto 48px;text-align:center}.eyebrow,.modal-kicker,.popover-kicker{margin:0 0 8px;color:var(--accent);text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800}.hero h1{margin:0;font-size:clamp(42px,7vw,76px);line-height:.97;letter-spacing:-.055em}.hero-copy{max-width:650px;margin:22px auto 0;color:var(--muted);font-size:clamp(16px,2vw,20px);line-height:1.6}.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.category-tile{min-height:220px;padding:30px;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-small);display:flex;align-items:flex-end;justify-content:space-between;text-align:left;transition:180ms ease}.category-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.category-tile h3{margin:0;font-size:clamp(28px,4vw,46px);letter-spacing:-.04em}.category-arrow{font-size:32px}.home-note{margin:22px auto 0;padding:18px 22px;max-width:760px;color:var(--muted);background:rgba(255,255,255,.68);border:1px solid var(--line);border-radius:var(--radius-md);line-height:1.55;text-align:center}.analytics-link{display:block;margin:22px auto 0}.text-button{padding:10px 4px;background:transparent;color:var(--accent);font-weight:800}.screen-heading{max-width:740px;margin:30px 0}.screen-heading h2,.customizer-heading h2{margin:0;font-size:clamp(38px,6vw,64px);letter-spacing:-.05em;line-height:1}.screen-heading p:not(.eyebrow),.food-description{color:var(--muted);line-height:1.6}.food-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,420px));gap:22px}.food-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-small);transition:180ms ease}.food-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.food-card-image{position:relative;aspect-ratio:4/3;background:var(--surface-soft);overflow:hidden}.food-card-image img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}.image-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:24px;color:var(--muted);font-weight:800;text-align:center;background:linear-gradient(135deg,#eee9de,#f8f6f0)}.food-card-body{padding:22px}.food-card-body h3{margin:0 0 8px;font-size:24px}.food-card-body p{margin:0 0 18px;color:var(--muted);line-height:1.5}.food-card-footer{display:flex;align-items:center;justify-content:space-between;gap:14px}.price{font-weight:900}.customizer-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:28px 0 24px}.customizer-heading>div:first-child{max-width:760px}.view-toggle{display:inline-flex;padding:4px;border:1px solid var(--line);background:var(--surface);border-radius:999px}.toggle-button{padding:10px 14px;background:transparent;color:var(--muted);font-weight:800}.toggle-button.active{background:var(--text);color:#fff}.customizer-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;align-items:start}.stack-panel,.side-panel>*{border:1px solid var(--line);background:rgba(255,255,255,.82);box-shadow:var(--shadow-small)}.stack-panel{min-height:720px;border-radius:var(--radius-xl);padding:clamp(18px,3vw,30px)}.stack-helper{margin-bottom:18px;padding:13px 16px;border-radius:var(--radius-sm);background:var(--accent-soft);color:#244c34;line-height:1.45;font-size:14px}.ingredient-stack{display:flex;flex-direction:column;gap:14px;transition:220ms ease}.ingredient-row{min-height:118px;display:grid;grid-template-columns:minmax(180px,1fr) 270px;gap:18px;align-items:center;transition:opacity 180ms ease,transform 220ms ease,min-height 220ms ease,margin 220ms ease}.ingredient-stack.compact{gap:2px}.ingredient-stack.compact .ingredient-row{min-height:80px}.ingredient-stack.compact .ingredient-photo{max-height:72px}.ingredient-stack.compact .ingredient-info{padding-top:10px;padding-bottom:10px}.ingredient-visual{position:relative;min-height:94px;display:grid;place-items:center;user-select:none;touch-action:none;cursor:grab}.ingredient-visual:active{cursor:grabbing}.visual-stack{position:relative;width:min(92%,560px);height:96px;display:grid;place-items:center;transition:transform 180ms ease}.ingredient-photo{position:absolute;left:50%;top:50%;max-width:100%;max-height:92px;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.10));pointer-events:none;transition:180ms ease}.visual-stack.light .ingredient-photo{transform:translate(-50%,-50%) scaleY(.68) scaleX(.94);opacity:.9}.visual-stack.more .ingredient-photo,.visual-stack.extra .ingredient-photo,.visual-stack.counted .ingredient-photo{transform:translate(calc(-50% + var(--copy-x,0px)),calc(-50% + var(--copy-y,0px))) rotate(var(--copy-rotation,0deg)) scale(var(--copy-scale,1))}.ingredient-visual:hover .visual-stack{transform:scale(1.025)}.layer-fallback{position:absolute;inset:12px 8%;border:2px dashed #c6c2b7;border-radius:999px;display:grid;place-items:center;color:var(--muted);background:#f5f2ea;font-size:13px;font-weight:800;text-align:center;padding:10px}.copy-badge{position:absolute;right:8%;bottom:2px;padding:5px 9px;border-radius:999px;background:var(--text);color:#fff;font-size:12px;font-weight:900}.ingredient-info{width:100%;padding:15px 16px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--text);text-align:left;box-shadow:0 8px 18px rgba(31,31,25,.05);transition:180ms ease}.ingredient-info:hover{border-color:#b8b3a6;transform:translateX(2px)}.ingredient-name{font-weight:900}.ingredient-calories{color:var(--muted);font-size:13px}.ingredient-status{grid-column:1/-1;margin-top:4px;color:var(--accent);font-size:12px;font-weight:800}.side-panel{position:sticky;top:96px;display:grid;gap:14px}.trash-button{position:relative;width:100%;min-height:194px;padding:20px;display:grid;place-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);color:var(--text);transition:180ms ease}.trash-button.empty{opacity:.72}.trash-button.has-items{border-color:#d6aea7;background:linear-gradient(180deg,#fff 0%,#fbefed 100%);box-shadow:0 16px 38px rgba(159,62,54,.15);animation:curiosityPulse 2.1s ease-in-out infinite}@keyframes curiosityPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}.trash-button.drag-over{transform:scale(1.03);border-color:var(--danger);background:var(--danger-soft)}.trash-visual{width:70px;height:82px;position:relative}.trash-lid{position:absolute;top:5px;left:10px;width:50px;height:10px;border:4px solid var(--text);border-radius:8px;background:#fff}.trash-can{position:absolute;left:14px;top:19px;width:42px;height:56px;overflow:hidden;border:4px solid var(--text);border-radius:8px 8px 14px 14px;background:#fff}.trash-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:#d76d61;transition:height 220ms ease}.trash-button.has-items .trash-fill{height:62%}.trash-lines:before,.trash-lines:after{content:"";position:absolute;top:10px;bottom:8px;width:3px;border-radius:99px;background:var(--text);opacity:.8}.trash-lines:before{left:11px}.trash-lines:after{right:11px}.trash-copy{display:grid;gap:4px;text-align:center}.trash-copy span{color:var(--muted);font-size:12px;line-height:1.35}.trash-count{position:absolute;top:14px;right:14px;min-width:26px;height:26px;padding:0 8px;display:grid;place-items:center;border-radius:999px;background:var(--danger);color:#fff;font-weight:900;font-size:12px}.order-summary-card,.side-tip{padding:18px;border-radius:var(--radius-lg)}.order-summary-card{display:grid;gap:5px}.order-summary-card span,.order-summary-card small,.side-tip span{color:var(--muted)}.order-summary-card strong{font-size:28px}.side-tip{display:grid;gap:8px;line-height:1.5}.bottom-order-bar{position:sticky;bottom:16px;z-index:30;margin-top:20px;padding:12px;display:flex;justify-content:center;gap:14px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;backdrop-filter:blur(16px);box-shadow:var(--shadow)}.item-quantity{display:inline-grid;grid-template-columns:48px 52px 48px;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}.item-quantity button{height:50px;border:0;background:transparent;font-size:22px}.item-quantity span{text-align:center;font-weight:900}.primary-button{min-height:50px;padding:0 24px;background:var(--text);color:#fff;font-weight:900}.secondary-button,.danger-soft-button{min-height:46px;padding:0 18px;font-weight:800}.secondary-button{background:var(--surface-soft);color:var(--text)}.danger-soft-button{background:var(--danger-soft);color:var(--danger)}.popover{position:fixed;z-index:90;width:min(360px,calc(100vw - 28px));padding:22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow)}.popover h3{margin:0;padding-right:28px;font-size:26px;letter-spacing:-.03em}.popover p{color:var(--muted);line-height:1.55}.popover-calories{margin-top:6px;font-size:13px;color:var(--muted)}.popover-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:999px;background:var(--surface-soft);font-size:22px}.popover-controls{margin-top:16px}.amount-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.amount-option{padding:9px 4px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);font-size:11px;font-weight:900}.amount-option.active{background:var(--text);color:#fff;border-color:var(--text)}.count-control{display:grid;grid-template-columns:54px 1fr 54px;align-items:center;border:1px solid var(--line);border-radius:16px;overflow:hidden}.count-control button{height:48px;border:0;background:var(--surface-soft);font-size:22px}.count-control strong{text-align:center;font-size:20px}.fixed-control{padding:12px 14px;border-radius:12px;background:var(--surface-soft);color:var(--muted);font-size:13px}.modal-overlay{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:18px;background:rgba(22,22,19,.46);backdrop-filter:blur(7px)}.modal-card{width:min(620px,100%);max-height:min(84vh,800px);overflow:auto;padding:28px;border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow)}.modal-card h3{margin:0;font-size:32px;letter-spacing:-.04em}.modal-card p{color:var(--muted);line-height:1.6}.reason-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.modal-description{margin-top:8px}.trash-exploded-stack{margin-top:20px;display:grid;gap:12px}.trash-item{display:grid;grid-template-columns:140px 1fr auto;align-items:center;gap:16px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fffaf9}.trash-item-image{position:relative;height:78px;display:grid;place-items:center}.trash-item-image img{max-width:100%;max-height:70px;object-fit:contain}.trash-item strong{display:block}.trash-item small{color:var(--muted)}.restore-button{border:0;border-radius:999px;padding:9px 12px;background:var(--accent-soft);color:var(--accent);font-weight:900}.drawer-overlay{position:fixed;inset:0;z-index:120;background:rgba(22,22,19,.34)}.cart-drawer{position:fixed;top:0;right:0;z-index:130;width:min(470px,100vw);height:100vh;padding:24px;display:grid;grid-template-rows:auto 1fr auto;background:var(--surface);box-shadow:-24px 0 70px rgba(22,22,19,.16);transform:translateX(104%);transition:transform 240ms ease}.cart-drawer.open{transform:translateX(0)}.drawer-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid var(--line)}.drawer-header h3{margin:0;font-size:30px}.cart-items{overflow:auto;padding:18px 2px}.empty-cart{padding:60px 10px;text-align:center;color:var(--muted)}.cart-line-item{padding:16px 0;border-bottom:1px solid var(--line)}.cart-line-top{display:flex;justify-content:space-between;gap:14px}.cart-line-top strong{font-size:17px}.cart-modifiers{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.5}.remove-cart-item{margin-top:10px;padding:0;border:0;background:transparent;color:var(--danger);font-weight:800}.cart-footer{padding-top:16px;border-top:1px solid var(--line)}.cart-total-line{display:flex;justify-content:space-between;margin-bottom:14px;font-size:18px}.cart-footer .primary-button{width:100%}.cart-footer small{display:block;margin-top:10px;color:var(--muted);text-align:center}.confirmation-card{text-align:center}.confirmation-icon{width:66px;height:66px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:30px;font-weight:900}.drag-ghost{position:fixed;z-index:200;width:min(360px,42vw);height:130px;display:grid;place-items:center;pointer-events:none;transform:translate(-50%,-50%) scale(1.03);filter:drop-shadow(0 20px 28px rgba(0,0,0,.18))}.drag-ghost img{max-width:100%;max-height:120px;object-fit:contain}.toast{position:fixed;z-index:250;left:50%;bottom:28px;transform:translateX(-50%);max-width:min(480px,calc(100vw - 30px));padding:13px 18px;border-radius:999px;background:var(--text);color:#fff;box-shadow:var(--shadow);font-weight:800;text-align:center}.analytics-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}.metric-card{padding:20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-small)}.metric-card span{display:block;color:var(--muted);font-size:13px}.metric-card strong{display:block;margin-top:8px;font-size:32px}.analytics-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.analytics-panel{padding:20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-small)}.analytics-panel h3{margin:0 0 14px}.analytics-row{padding:10px 0;display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #eeeae1}.analytics-row:last-child{border-bottom:0}.analytics-row span{color:var(--muted)}#resetAnalyticsButton{margin-top:18px}@media(max-width:900px){.customizer-layout{grid-template-columns:1fr}.side-panel{position:static;grid-template-columns:repeat(3,1fr)}.trash-button{min-height:160px}.analytics-cards{grid-template-columns:repeat(2,1fr)}.analytics-panels{grid-template-columns:1fr}}@media(max-width:700px){.topbar{grid-template-columns:44px 1fr auto;padding:12px 14px}.restaurant-name{font-size:14px}.cart-button>span:nth-child(2){display:none}main{width:min(100% - 20px,1220px);padding-top:18px}.hero{margin-top:24px}.category-grid{grid-template-columns:1fr}.category-tile{min-height:150px}.customizer-heading{align-items:flex-start;flex-direction:column}.view-toggle{width:100%}.toggle-button{flex:1}.stack-panel{padding:14px}.ingredient-row{min-height:144px;grid-template-columns:1fr;gap:7px}.ingredient-info{width:min(100%,430px);justify-self:center}.side-panel{grid-template-columns:1fr}.trash-button{min-height:140px;grid-template-columns:auto 1fr auto;text-align:left}.trash-copy{text-align:left}.bottom-order-bar{bottom:8px;border-radius:22px;flex-direction:column}.item-quantity{width:100%;grid-template-columns:1fr 1fr 1fr}.primary-button{width:100%}.popover{left:14px!important;right:14px!important;bottom:14px!important;top:auto!important;width:auto}.amount-options{grid-template-columns:repeat(5,1fr)}.trash-item{grid-template-columns:90px 1fr}.trash-item .restore-button{grid-column:1/-1}.analytics-cards{grid-template-columns:1fr 1fr}}


/* ===== V2: live calories, macros, and sauce picker ===== */
.current-item-values{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}.current-item-values strong{font-size:28px}.current-item-values .current-calories{font-size:20px;color:var(--accent);letter-spacing:-.02em}.popover-macros{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.macro-chip{padding:9px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);text-align:center}.macro-chip strong{display:block;font-size:15px}.macro-chip span{display:block;margin-top:2px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.control-section{margin-top:14px}.control-label{display:block;margin-bottom:8px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:900}.sauce-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.sauce-option{min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--muted);font-size:12px;font-weight:900;text-align:left}.sauce-option.active{background:var(--accent-soft);border-color:#a9c7b3;color:var(--accent)}.sauce-current-note{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.4}.ingredient-status .sauce-name{color:var(--text)}
@media(max-width:700px){.current-item-values{align-items:center}.current-item-values .current-calories{font-size:18px}.popover-macros{grid-template-columns:repeat(3,1fr)}.sauce-options{grid-template-columns:1fr 1fr}}


/* ============================================================
   V3 — MINIMAL EXPLODED LABELS + PLATE VIEW
   ============================================================ */

.ingredient-stack {
  gap: 6px;
}

.ingredient-row {
  min-height: 112px;
  grid-template-columns: minmax(260px, 1fr) minmax(230px, 330px);
  gap: 0;
}

.ingredient-visual {
  min-height: 108px;
}

.visual-stack {
  width: min(96%, 610px);
  height: 104px;
}

.ingredient-photo {
  max-height: 100px;
  filter: drop-shadow(0 7px 12px rgba(0,0,0,.07));
}

.ingredient-info {
  position: relative;
  width: 100%;
  min-height: 72px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(58px, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  text-align: left;
  transition: opacity 160ms ease, transform 160ms ease;
}

.ingredient-info:hover {
  border-color: transparent;
  transform: translateX(4px);
  opacity: .72;
}

.ingredient-connector {
  width: 100%;
  height: 1px;
  border-top: 2px dotted #aaa79f;
  align-self: center;
}

.ingredient-label-copy {
  min-width: 155px;
  display: grid;
  line-height: 1.06;
}

.ingredient-calories {
  color: #56554f;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 900;
  letter-spacing: -.035em;
}

.ingredient-name {
  margin-top: 4px;
  color: #686760;
  font-size: 15px;
  font-weight: 750;
}

.ingredient-status {
  display: none;
}

.plate-view {
  min-height: 650px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  padding: 22px;
}

.plate-image-wrap {
  position: relative;
  width: min(100%, 820px);
  min-height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
}

.plate-image-wrap img {
  width: 100%;
  max-height: 600px;
  object-fit: contain;
  display: block;
}

.plate-view-fallback {
  width: min(560px, calc(100% - 40px));
  padding: 50px 30px;
  border: 2px dashed var(--line);
  border-radius: 24px;
  color: var(--muted);
  background: var(--surface-soft);
  text-align: center;
  line-height: 1.55;
}

.plate-view-caption {
  width: min(720px, 100%);
  display: grid;
  gap: 5px;
  text-align: center;
}

.plate-view-caption > span {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 900;
}

.plate-view-caption strong {
  font-size: 24px;
  letter-spacing: -.025em;
}

.plate-view-caption small {
  max-width: 560px;
  margin: 2px auto 0;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .ingredient-row {
    min-height: 128px;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 0;
  }

  .ingredient-info {
    width: 100%;
    grid-template-columns: minmax(30px, 1fr) auto;
    gap: 8px;
  }

  .ingredient-label-copy {
    min-width: 112px;
  }

  .ingredient-calories {
    font-size: 20px;
  }

  .ingredient-name {
    font-size: 12px;
  }

  .ingredient-connector {
    border-top-width: 1.5px;
  }

  .plate-view {
    min-height: 500px;
    padding: 6px;
  }

  .plate-image-wrap {
    min-height: 330px;
    border-radius: 20px;
  }
}


/* ============================================================
   V4 — TIGHTER CALLOUTS + STRONGER HOVER + OPEN TRASH LID
   ============================================================ */

/* Bring the dotted leader line much closer to the ingredient image. */
.ingredient-row {
  grid-template-columns: minmax(220px, .72fr) minmax(340px, 1.28fr);
}

.ingredient-info {
  grid-template-columns: minmax(90px, 1fr) auto;
  gap: 10px;
}

.ingredient-label-copy {
  min-width: 145px;
  gap: 3px;
  line-height: 1.12;
}

/* Item name first, calories second, both smaller than V3. */
.ingredient-name {
  margin-top: 0;
  color: #56554f;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.ingredient-calories {
  color: #77746c;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
}

/* Make ingredient hover feel intentional and obvious. */
.ingredient-visual {
  overflow: visible;
  z-index: 1;
}

.ingredient-visual:hover {
  z-index: 5;
}

.ingredient-visual:hover .visual-stack {
  transform: scale(1.30);
}

.ingredient-visual:hover .ingredient-photo {
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.16));
}

/* Animate the trash lid open as soon as an actual drag begins. */
.trash-lid {
  transform-origin: 8px 50%;
  transition: transform 180ms ease, top 180ms ease, left 180ms ease;
  z-index: 3;
}

.trash-button.drag-active .trash-lid {
  top: -1px;
  left: 6px;
  transform: rotate(-32deg) translateY(-4px);
}

/* Open a little farther when the dragged ingredient is over the can. */
.trash-button.drag-over .trash-lid {
  top: -5px;
  left: 3px;
  transform: rotate(-48deg) translateY(-7px);
}

.trash-button.drag-active {
  opacity: 1;
}

@media (max-width: 700px) {
  .ingredient-row {
    grid-template-columns: minmax(0, .78fr) minmax(180px, 1.22fr);
  }

  .ingredient-info {
    grid-template-columns: minmax(44px, 1fr) auto;
    gap: 8px;
  }

  .ingredient-label-copy {
    min-width: 116px;
  }

  .ingredient-name {
    font-size: 12px;
  }

  .ingredient-calories {
    font-size: 11px;
  }

  .ingredient-visual:hover .visual-stack {
    transform: scale(1.20);
  }
}


/* ============================================================
   V4 UPDATED — INGREDIENT-FIRST COMPOSITION + VISUAL CART
   ============================================================ */

/* Make the food itself the primary focus: larger, nearer the center,
   with compact callouts similar to a classic exploded-food diagram. */
.customizer-layout {
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 18px;
}

.stack-panel {
  padding-left: clamp(18px, 2.3vw, 28px);
  padding-right: clamp(18px, 2.3vw, 28px);
}

.ingredient-stack {
  gap: 8px;
}

.ingredient-row {
  min-height: 154px;
  grid-template-columns: minmax(430px, 1fr) minmax(205px, 245px);
  gap: 2px;
}

.ingredient-visual {
  min-height: 148px;
  justify-items: end;
  padding-right: 2px;
  overflow: visible;
}

.visual-stack {
  width: min(100%, 570px);
  height: 146px;
}

.ingredient-photo {
  max-width: 100%;
  max-height: 138px;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.09));
}

/* Shorter, quieter leader line. */
.ingredient-info {
  min-height: 70px;
  grid-template-columns: 76px auto;
  gap: 10px;
  align-self: center;
}

.ingredient-connector {
  border-top: 1.5px dotted #aaa79f;
}

.ingredient-label-copy {
  min-width: 120px;
  gap: 2px;
}

.ingredient-name {
  font-size: 14px;
  line-height: 1.1;
}

.ingredient-calories {
  font-size: 11px;
  line-height: 1.2;
}

/* Keep the stronger V4 hover while starting from a larger base size. */
.ingredient-visual:hover .visual-stack {
  transform: scale(1.27);
}

/* Trash lid now opens toward the LEFT: right side acts as the hinge. */
.trash-lid {
  transform-origin: calc(100% - 6px) 50%;
}

.trash-button.drag-active .trash-lid {
  top: -1px;
  left: 7px;
  transform: rotate(34deg) translateY(-4px);
}

.trash-button.drag-over .trash-lid {
  top: -6px;
  left: 4px;
  transform: rotate(52deg) translateY(-7px);
}

/* Visual-first cart: each ordered item gets a mini exploded preview. */
.cart-drawer {
  width: min(560px, 100vw);
}

.cart-line-item {
  padding: 22px 0;
}

.cart-line-calories {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.cart-visual-preview {
  margin-top: 14px;
  padding: 14px 14px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, #fbfaf6 100%);
}

.cart-visual-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.cart-visual-caption strong {
  font-size: 13px;
}

.cart-visual-caption span {
  color: var(--muted);
  font-size: 11px;
}

.cart-preview-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 4px 0;
}

.cart-preview-layer {
  position: relative;
  width: min(88%, 390px);
  height: 54px;
  display: grid;
  place-items: center;
}

.cart-preview-layer img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 100%;
  max-height: 52px;
  object-fit: contain;
  transform: translate(calc(-50% + var(--cart-copy-x, 0px)), calc(-50% + var(--cart-copy-y, 0px))) rotate(var(--cart-copy-rotation, 0deg));
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.08));
}

.cart-preview-layer.light img {
  transform: translate(calc(-50% + var(--cart-copy-x, 0px)), calc(-50% + var(--cart-copy-y, 0px))) rotate(var(--cart-copy-rotation, 0deg)) scale(.82,.70);
  opacity: .88;
}

.cart-preview-badge {
  position: absolute;
  right: 5%;
  bottom: 2px;
  min-width: 28px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.cart-preview-fallback {
  position: absolute;
  inset: 8px 18%;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.cart-active-notes {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.cart-active-notes span {
  display: block;
  margin-bottom: 2px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.cart-active-notes p {
  margin: 0;
}

.cart-removed-summary {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eeeae1;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.cart-removed-summary.has-removed {
  color: #7d514c;
}

.cart-removed-summary strong {
  color: var(--text);
}

@media (max-width: 900px) {
  .customizer-layout {
    grid-template-columns: 1fr;
  }

  .ingredient-row {
    grid-template-columns: minmax(420px, 1fr) minmax(190px, 230px);
  }
}

@media (max-width: 700px) {
  .ingredient-row {
    min-height: 132px;
    grid-template-columns: minmax(0, 1fr) 154px;
    gap: 0;
  }

  .ingredient-visual {
    min-height: 126px;
    justify-items: center;
    padding-right: 0;
  }

  .visual-stack {
    width: min(100%, 360px);
    height: 124px;
  }

  .ingredient-photo {
    max-height: 116px;
  }

  .ingredient-info {
    grid-template-columns: 42px auto;
    gap: 7px;
  }

  .ingredient-label-copy {
    min-width: 104px;
  }

  .ingredient-name {
    font-size: 12px;
  }

  .ingredient-calories {
    font-size: 10px;
  }

  .ingredient-visual:hover .visual-stack {
    transform: scale(1.16);
  }

  .cart-visual-caption {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .cart-preview-layer {
    width: 96%;
    height: 48px;
  }

  .cart-preview-layer img {
    max-height: 46px;
  }
}

/* ==========================================================
   V5 — visual category tiles
   The food artwork is a replaceable image layer inside each
   category card. Swap files in assets/category/ to restyle it.
   ========================================================== */
.category-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 220px;
}

.category-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.93) 36%, rgba(255,255,255,.55) 100%);
}

.category-graphic {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(72px, 12%, 118px);
  width: clamp(150px, 30%, 225px);
  max-height: 78%;
  object-fit: contain;
  transform: translateY(-50%) scale(1);
  transform-origin: center;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
  transition: transform 220ms ease, filter 220ms ease;
  filter: saturate(.96) contrast(.98);
}

.category-tile h3,
.category-arrow {
  position: relative;
  z-index: 2;
}

.category-tile:hover .category-graphic {
  transform: translateY(-50%) scale(1.08);
  filter: saturate(1.04) contrast(1.02);
}

.category-arrow {
  flex: 0 0 auto;
}

@media (max-width: 700px) {
  .category-tile {
    min-height: 170px;
    padding: 24px;
  }

  .category-graphic {
    right: 62px;
    width: min(42%, 180px);
    max-height: 72%;
  }

  .category-tile::before {
    background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.91) 44%, rgba(255,255,255,.50) 100%);
  }
}

/* ============================================================
   V6 — MOBILE REMOVE MODE
   On mobile, selecting/holding an ingredient temporarily replaces
   the quantity + add-to-order controls with one centered trash icon.
   ============================================================ */
.mobile-remove-trash {
  display: none;
  width: 82px;
  height: 82px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  place-items: center;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.mobile-trash-visual {
  position: relative;
  width: 58px;
  height: 66px;
  display: block;
  pointer-events: none;
}

.mobile-trash-lid {
  position: absolute;
  top: 5px;
  left: 8px;
  width: 44px;
  height: 9px;
  border: 4px solid var(--text);
  border-radius: 8px;
  background: #fff;
  transform-origin: calc(100% - 5px) 50%;
  transition: transform 160ms ease, top 160ms ease, left 160ms ease;
  z-index: 3;
}

.mobile-trash-can {
  position: absolute;
  left: 11px;
  top: 18px;
  width: 38px;
  height: 48px;
  overflow: hidden;
  border: 4px solid var(--text);
  border-radius: 8px 8px 13px 13px;
  background: #fff;
}

.mobile-trash-lines::before,
.mobile-trash-lines::after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 7px;
  width: 3px;
  border-radius: 99px;
  background: var(--text);
  opacity: .78;
}

.mobile-trash-lines::before { left: 9px; }
.mobile-trash-lines::after { right: 9px; }

@media (max-width: 700px) {
  body.mobile-remove-mode .bottom-order-bar {
    min-height: 96px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
  }

  body.mobile-remove-mode .bottom-order-bar .item-quantity,
  body.mobile-remove-mode .bottom-order-bar #addToOrderButton {
    display: none;
  }

  body.mobile-remove-mode .mobile-remove-trash {
    display: grid;
  }

  body.mobile-remove-mode .ingredient-row {
    opacity: .34;
  }

  body.mobile-remove-mode .ingredient-row.mobile-remove-source {
    opacity: 1;
  }

  body.mobile-remove-mode .ingredient-row.mobile-remove-source .visual-stack {
    transform: scale(1.08);
  }

  .mobile-remove-trash.drag-active .mobile-trash-lid,
  body.mobile-remove-mode .mobile-remove-trash .mobile-trash-lid {
    top: 0;
    left: 6px;
    transform: rotate(34deg) translateY(-3px);
  }

  .mobile-remove-trash.drag-over {
    transform: scale(1.10);
    background: var(--danger-soft);
    box-shadow: 0 0 0 7px rgba(159,62,54,.10);
  }

  .mobile-remove-trash.drag-over .mobile-trash-lid {
    top: -4px;
    left: 3px;
    transform: rotate(52deg) translateY(-6px);
  }

  /* Keep the selected-item popover above the sticky remove icon. */
  body.mobile-remove-mode .popover:not(.hidden) {
    bottom: 112px !important;
  }
}
.drag-ghost.pending { opacity: 0; }
@media (max-width: 700px) {
  body.mobile-remove-mode .ingredient-row { opacity: .44; }
  body.mobile-remove-mode .ingredient-row.mobile-remove-source { opacity: 1; }
}


/* ============================================================
   FINAL DEMO — SINGLE PERMANENT BOTTOM-BAR TRASH
   Only layout/interaction placement overrides below.
   ============================================================ */

/* The one trash target permanently occupies the left third. The
   quantity and Add button stay stacked in the right two thirds. */
.bottom-order-bar {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) minmax(0, 2fr);
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: 10px 12px;
  border-radius: 30px;
}

.bottom-order-bar .trash-button {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 100%;
  min-height: 126px;
  height: 100%;
  padding: 8px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  animation: none;
}

.bottom-order-bar .trash-copy {
  display: none;
}

.bottom-order-bar .trash-visual {
  width: 70px;
  height: 82px;
}

.bottom-order-bar .trash-count {
  top: 8px;
  right: 8px;
}

.bottom-order-bar .item-quantity {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-height: 52px;
  grid-template-columns: 1fr 1fr 1fr;
}

.bottom-order-bar #addToOrderButton {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
}

/* Keep the trash lid shut at rest. It opens only when JS adds
   drag-active after the ingredient has actually started moving. */
.bottom-order-bar .trash-lid {
  top: 5px;
  left: 10px;
  transform: none;
}

.bottom-order-bar .trash-button.drag-active .trash-lid {
  top: -1px;
  left: 7px;
  transform: rotate(34deg) translateY(-4px);
}

.bottom-order-bar .trash-button.drag-over .trash-lid {
  top: -6px;
  left: 4px;
  transform: rotate(52deg) translateY(-7px);
}

/* Ingredient details now appear directly below the clicked food image. */
.popover {
  position: absolute;
}

@media (max-width: 700px) {
  .bottom-order-bar {
    bottom: 8px;
    display: grid;
    grid-template-columns: minmax(88px, 1fr) minmax(0, 2fr);
    grid-template-rows: auto auto;
    flex-direction: initial;
    padding: 10px;
    border-radius: 24px;
  }

  .bottom-order-bar .trash-button {
    min-height: 124px;
    border-radius: 18px;
    grid-template-columns: initial;
    text-align: center;
  }

  .bottom-order-bar .item-quantity {
    width: 100%;
  }

  .bottom-order-bar .primary-button {
    width: 100%;
  }

  .popover {
    position: absolute !important;
    right: auto !important;
    bottom: auto !important;
    width: min(360px, calc(100vw - 28px));
  }
}

/* ============================================================
   FINAL DEMO 5 — UNIFIED VISUAL BUILD-YOUR-OWN BURRITO
   Skeleton layers sit directly on the burrito on desktop/mobile.
   Completed layers replace empty "Pick ..." layers in place.
   ============================================================ */
.builder-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin:28px 0 22px;
}
.builder-heading h2{margin:4px 0 8px;font-size:clamp(32px,5vw,58px);letter-spacing:-.045em;line-height:1}
.builder-progress-card{
  flex:0 0 auto;
  min-width:205px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.8);
  box-shadow:var(--shadow-small);
  display:grid;
  gap:2px;
}
.builder-progress-card span,.builder-progress-card small{color:var(--muted);font-size:12px}
.builder-progress-card strong{font-size:24px;letter-spacing:-.03em}

/* Same single visual composition on web and mobile. */
.builder-layout{
  width:min(680px,100%);
  margin:0 auto 24px;
}
.builder-composer-card{
  padding:20px;
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:var(--shadow-small);
  overflow:hidden;
}
.builder-preview-heading{display:grid;gap:3px;margin-bottom:6px}
.builder-preview-heading span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--accent)}
.builder-preview-heading strong{font-size:24px;letter-spacing:-.035em}
.builder-composer-intro,
.builder-composer-card>p#builderPreviewHint{margin:8px 2px 0;color:var(--muted);font-size:12px;line-height:1.5}
.builder-composer-intro{margin-bottom:14px}

.builder-live-visual{
  position:relative;
  min-height:650px;
  padding:34px clamp(14px,4vw,34px) 92px;
  border-radius:25px;
  background:linear-gradient(180deg,#fbfaf6 0%,#f0ece2 100%);
  overflow:hidden;
  isolation:isolate;
}
.builder-live-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.88),transparent 48%);
  pointer-events:none;
  z-index:0;
}
.builder-tortilla-shell{
  position:absolute;
  z-index:0;
  left:50%;
  bottom:28px;
  width:min(88%,560px);
  height:76%;
  transform:translateX(-50%);
  border-radius:48% 48% 31% 31% / 23% 23% 39% 39%;
  background:linear-gradient(180deg,#efd49f 0%,#e4bc7b 68%,#d8a75f 100%);
  border:2px solid #ca9146;
  box-shadow:inset 0 16px 28px rgba(255,255,255,.30),0 18px 32px rgba(76,54,27,.12);
  opacity:.88;
}
.builder-live-visual.has-food .builder-tortilla-shell{opacity:.94}

.builder-skeleton{
  position:relative;
  z-index:2;
  width:min(94%,520px);
  margin:0 auto;
  display:grid;
  gap:9px;
}
.builder-section-card{
  position:relative;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 18px;
  gap:9px;
  align-items:center;
  min-height:66px;
  padding:7px 11px 7px 8px;
  border:1px solid rgba(219,214,202,.95);
  border-radius:18px;
  background:rgba(255,255,255,.88);
  box-shadow:0 7px 18px rgba(31,31,25,.055);
  backdrop-filter:blur(8px);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
  cursor:pointer;
  touch-action:pan-y;
  -webkit-touch-callout:none;
  user-select:none;
}
.builder-section-card:hover,.builder-section-card:focus-visible{
  transform:translateY(-1px);
  border-color:#c5beb0;
  box-shadow:0 11px 24px rgba(31,31,25,.085);
  outline:none;
}
.builder-section-card.complete{
  min-height:82px;
  border-color:#a9cbb5;
  background:rgba(247,252,248,.94);
}
.builder-section-index{font-size:10px;font-weight:850;color:#a19b8e;text-align:center;letter-spacing:.08em}
.builder-section-content{min-width:0;display:grid;gap:5px}
.builder-section-category-label{font-size:9px;text-transform:uppercase;letter-spacing:.10em;font-weight:850;color:var(--accent)}
.builder-pick-layer{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  color:#5f5c54;
  font-size:16px;
  font-weight:850;
  letter-spacing:-.015em;
}
.builder-empty-plus{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  border:1px dashed #bdb6a8;
  background:rgba(247,243,234,.82);
  color:#8f897d;
  font-size:24px;
  font-weight:300;
  line-height:1;
}
.builder-section-selected-items{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  overflow-x:auto;
  padding:1px 1px 3px;
  scrollbar-width:none;
}
.builder-section-selected-items::-webkit-scrollbar{display:none}
.builder-selected-food{
  flex:0 0 auto;
  min-width:112px;
  max-width:150px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  align-items:center;
  gap:7px;
  padding:5px 8px 5px 5px;
  border:1px solid #dce7df;
  border-radius:13px;
  background:#fff;
}
.builder-selected-food-image{
  position:relative;
  width:48px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#f6f1e7;
  overflow:hidden;
}
.builder-selected-food-image img{width:100%;height:100%;object-fit:contain}
.builder-selected-food.amount-light .builder-selected-food-image{opacity:.62;transform:scale(.88)}
.builder-selected-food.amount-more .builder-selected-food-image::after,
.builder-selected-food.amount-extra .builder-selected-food-image::after{
  position:absolute;
  right:3px;
  bottom:3px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--text);
  color:#fff;
  font-size:9px;
  font-weight:900;
}
.builder-selected-food.amount-more .builder-selected-food-image::after{content:"2×"}
.builder-selected-food.amount-extra .builder-selected-food-image::after{content:"3×"}
.builder-selected-food-copy{min-width:0;display:grid;gap:1px}
.builder-selected-food-copy strong{font-size:11px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.builder-selected-food-copy small{font-size:9px;color:var(--muted);font-weight:700}
.builder-section-arrow{font-size:26px;color:#948d81;font-weight:300}
.builder-all-skipped{padding:34px 20px;text-align:center;display:grid;gap:8px;border:1px dashed var(--line);border-radius:20px;color:var(--muted);background:rgba(255,255,255,.86)}
.builder-all-skipped strong{color:var(--text)}

/* Narrow, visually-led ingredient picker. */
.builder-choice-card{
  width:min(500px,calc(100vw - 24px));
  max-height:min(90vh,860px);
  overflow:auto;
  padding:20px;
  border-radius:26px;
}
.builder-option-flow{
  width:min(390px,100%);
  margin:15px auto 0;
  display:grid;
  grid-template-columns:1fr;
  gap:11px;
}
.builder-choice-option{
  min-width:0;
  border:1px solid var(--line);
  border-radius:19px;
  background:var(--surface);
  overflow:hidden;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.builder-choice-option.selected{border-color:#9fc4aa;box-shadow:0 0 0 2px rgba(31,90,59,.05)}
.builder-choice-option.editing{border-color:var(--accent);box-shadow:0 10px 28px rgba(31,90,59,.10)}
.builder-choice-tile{
  position:relative;
  width:100%;
  border:0;
  padding:9px 9px 12px;
  background:transparent;
  display:grid;
  gap:6px;
  justify-items:center;
  text-align:center;
}
.builder-choice-image{
  width:100%;
  aspect-ratio:2.15;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#f7f3e9;
  overflow:hidden;
}
.builder-choice-image img{width:100%;height:100%;object-fit:contain;padding:4px}
.builder-choice-tile>strong{font-size:15px;line-height:1.2}
.builder-selected-check{
  position:absolute;
  top:15px;
  right:15px;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:13px;
  font-weight:900;
  box-shadow:0 3px 10px rgba(31,90,59,.25);
}
.builder-selected-amount{font-size:10px;font-weight:850;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.builder-amount-box{
  border-top:1px solid var(--line);
  padding:11px;
  background:#faf9f5;
  display:grid;
  gap:9px;
}
.builder-amount-box .control-label{color:var(--muted);font-size:10px;font-weight:750;text-align:center}
.builder-amount-options{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.builder-amount-option{
  min-height:39px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  font-size:11px;
  font-weight:750;
}
.builder-amount-option.active{background:var(--accent);border-color:var(--accent);color:#fff}
.builder-remove-draft{border:0;background:transparent;color:var(--danger);font-size:11px;font-weight:750;justify-self:center;padding:2px 0}
.builder-choice-footer{
  position:sticky;
  bottom:-20px;
  z-index:4;
  margin:18px -20px -20px;
  padding:12px 20px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.90),#fff 32%);
  border-top:1px solid rgba(222,219,209,.8);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.builder-choice-footer>span{font-size:11px;color:var(--muted);line-height:1.35}
.builder-check-button{
  flex:0 0 auto;
  width:52px;
  height:52px;
  border:0;
  border-radius:50%;
  background:#2d8a52;
  color:#fff;
  font-size:27px;
  font-weight:850;
  box-shadow:0 8px 18px rgba(45,138,82,.24);
  transition:transform .15s ease,opacity .15s ease;
}
.builder-check-button:hover:not(:disabled){transform:scale(1.04)}
.builder-check-button:disabled,.builder-check-button.disabled{opacity:.35;box-shadow:none;cursor:default}

.builder-bottom-order-bar #builderAddToOrderButton{grid-column:2;grid-row:2;width:100%}
.builder-bottom-order-bar #builderTrashButton{grid-column:1;grid-row:1/3}
.builder-drag-ghost{
  position:fixed;
  z-index:500;
  pointer-events:none;
  width:150px;
  transform:translate(-50%,-50%) rotate(-2deg);
  padding:12px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 16px 35px rgba(20,20,18,.18);
  display:grid;
  gap:2px;
}
.builder-drag-ghost.pending{opacity:0}
.builder-drag-ghost strong{font-size:14px}.builder-drag-ghost span{font-size:10px;color:var(--muted)}
.builder-trash-placeholder{
  width:68px;
  height:58px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#f1eee5;
  color:#827f76;
  font-weight:900;
  font-size:22px;
}

/* Cart: vertical categories, horizontal choices within each category. */
.builder-cart-preview{padding-bottom:12px}
.builder-cart-categories{display:grid;gap:9px}
.builder-cart-category{
  display:grid;
  grid-template-columns:70px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:7px 0;
  border-top:1px solid #eeeae1;
}
.builder-cart-category:first-child{border-top:0}
.builder-cart-category-label{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--accent)}
.builder-cart-category-items{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:1px 0 3px;
  scrollbar-width:none;
}
.builder-cart-category-items::-webkit-scrollbar{display:none}
.builder-cart-ingredient{
  flex:0 0 auto;
  width:108px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:6px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.builder-cart-ingredient-image{width:42px;height:38px;display:grid;place-items:center;border-radius:9px;background:#f6f1e7;overflow:hidden}
.builder-cart-ingredient-image img{width:100%;height:100%;object-fit:contain}
.builder-cart-ingredient.amount-light .builder-cart-ingredient-image{opacity:.65;transform:scale(.9)}
.builder-cart-ingredient-copy{min-width:0;display:grid;gap:1px}
.builder-cart-ingredient-copy strong{font-size:9px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.builder-cart-ingredient-copy small{font-size:8px;color:var(--muted)}

@media(max-width:700px){
  .builder-heading{display:grid;gap:12px}
  .builder-progress-card{width:100%;grid-template-columns:1fr auto;align-items:center}
  .builder-progress-card strong{grid-column:2;grid-row:1/3}
  .builder-progress-card small{grid-column:1}
  .builder-layout{width:100%}
  .builder-composer-card{padding:12px;border-radius:23px}
  .builder-preview-heading{padding:2px 3px 0}
  .builder-composer-intro{padding:0 3px}
  .builder-live-visual{min-height:570px;padding:26px 7px 74px;border-radius:20px}
  .builder-tortilla-shell{bottom:22px;width:94%;height:78%}
  .builder-skeleton{width:96%;gap:7px}
  .builder-section-card{grid-template-columns:25px minmax(0,1fr) 16px;min-height:58px;padding:6px 8px 6px 5px;border-radius:15px}
  .builder-section-card.complete{min-height:72px}
  .builder-pick-layer{min-height:38px;font-size:14px;gap:8px}
  .builder-empty-plus{width:31px;height:31px;border-radius:10px;font-size:22px}
  .builder-selected-food{min-width:101px;max-width:124px;grid-template-columns:42px minmax(0,1fr);gap:5px;padding:4px 6px 4px 4px}
  .builder-selected-food-image{width:42px;height:38px}
  .builder-selected-food-copy strong{font-size:10px}
  .builder-selected-food-copy small{font-size:8px}
  .builder-section-arrow{font-size:23px}
  .builder-choice-card{width:calc(100vw - 14px);max-height:93vh;border-radius:22px;padding:14px}
  .builder-option-flow{width:100%;gap:9px}
  .builder-choice-image{aspect-ratio:2.35}
  .builder-choice-footer{margin:14px -14px -14px;padding:10px 14px 13px}
  .builder-check-button{width:50px;height:50px}
  .builder-bottom-order-bar{bottom:8px}
  .builder-cart-category{grid-template-columns:58px minmax(0,1fr);gap:6px}
  .builder-cart-ingredient{width:96px;grid-template-columns:36px minmax(0,1fr);gap:5px}
  .builder-cart-ingredient-image{width:36px;height:34px}
}


/* ============================================================
   FINAL DEMO 6 — BUILT SECTIONS BECOME FOOD
   Empty sections remain skeleton controls. Once confirmed, the
   section card disappears visually and is replaced by the food
   itself in the same vertical spot on the burrito.
   ============================================================ */
.builder-section-card.complete.builder-food-layer{
  display:block;
  min-height:84px;
  padding:0 10px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  overflow:visible;
}
.builder-section-card.complete.builder-food-layer:hover,
.builder-section-card.complete.builder-food-layer:focus-visible{
  transform:scale(1.015);
  border-color:transparent;
  box-shadow:none;
  outline:none;
}
.builder-built-layer{
  position:relative;
  min-height:84px;
  display:grid;
  align-items:center;
  justify-items:center;
  padding:8px 4px 14px;
}
.builder-built-layer-label{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:var(--accent);
  font-size:8px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  box-shadow:0 2px 7px rgba(31,31,25,.05);
  pointer-events:none;
}
.builder-built-food-row{
  width:100%;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  overflow:visible;
}
.builder-built-food{
  position:relative;
  flex:0 1 165px;
  min-width:68px;
  max-width:185px;
  min-height:64px;
  display:grid;
  grid-template-rows:54px auto;
  place-items:center;
  gap:0;
}
.builder-built-food:only-child{
  flex-basis:270px;
  max-width:300px;
}
.builder-built-food-visual{
  position:relative;
  width:100%;
  height:58px;
  display:block;
  transform-origin:center;
  pointer-events:none;
}
.builder-built-food-visual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 7px 5px rgba(72,50,25,.13));
  transform-origin:center;
}
.builder-built-food.amount-light .builder-built-food-visual{
  transform:scale(.76);
}
.builder-built-food-visual.copies-2 img:nth-child(1){transform:translateX(-12%) rotate(-2deg) scale(.94)}
.builder-built-food-visual.copies-2 img:nth-child(2){transform:translateX(12%) rotate(2deg) scale(.94)}
.builder-built-food-visual.copies-3 img:nth-child(1){transform:translateX(-20%) rotate(-3deg) scale(.88)}
.builder-built-food-visual.copies-3 img:nth-child(2){transform:translateX(0) scale(.92)}
.builder-built-food-visual.copies-3 img:nth-child(3){transform:translateX(20%) rotate(3deg) scale(.88)}
.builder-built-food-caption{
  min-width:0;
  max-width:100%;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:4px;
  padding:0 4px;
  color:#4f4b43;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
}
.builder-built-food-caption strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:9px;
  line-height:1.1;
}
.builder-built-food-caption small{
  flex:0 0 auto;
  color:var(--muted);
  font-size:8px;
  font-weight:750;
}
.builder-built-layer-edit{
  position:absolute;
  right:2px;
  top:50%;
  transform:translateY(-50%);
  color:#969084;
  font-size:8px;
  font-weight:750;
  opacity:.42;
  pointer-events:none;
}
.builder-section-card.complete.builder-food-layer:hover .builder-built-layer-edit,
.builder-section-card.complete.builder-food-layer:focus-visible .builder-built-layer-edit{opacity:.85}

@media(max-width:700px){
  .builder-section-card.complete.builder-food-layer{
    min-height:76px;
    padding:0 3px;
  }
  .builder-built-layer{min-height:76px;padding:7px 2px 12px}
  .builder-built-food-row{min-height:58px;gap:2px}
  .builder-built-food{
    flex-basis:126px;
    min-width:56px;
    max-width:142px;
    min-height:58px;
    grid-template-rows:49px auto;
  }
  .builder-built-food:only-child{flex-basis:220px;max-width:240px}
  .builder-built-food-visual{height:52px}
  .builder-built-layer-label{font-size:7px;padding:2px 6px}
  .builder-built-food-caption strong{font-size:8px}
  .builder-built-food-caption small{font-size:7px}
  .builder-built-layer-edit{display:none}
}


/* ============================================================
   FINAL DEMO 7 — BURRITO VISUAL CONTINUITY
   Removes the tortilla backdrop and gives confirmed burrito
   ingredients the same exploded-food callout language used by
   the pre-established dish customizer: ingredient art, dotted
   leader, name, calories and compact macros.
   ============================================================ */
.builder-live-visual{
  min-height:650px;
  padding:34px clamp(14px,4vw,34px) 44px;
  background:#fff;
  overflow:visible;
}
.builder-live-visual::before{display:none}
.builder-tortilla-shell{display:none!important}

.builder-skeleton{
  width:min(96%,580px);
  gap:12px;
}

/* Empty build slots remain the only boxed controls. */
.builder-section-card.empty{
  background:rgba(255,255,255,.96);
}

/* Confirmed layers become an exploded-food diagram rather than cards. */
.builder-section-card.complete.builder-food-layer{
  min-height:112px;
  padding:0;
  overflow:visible;
}
.builder-built-layer{
  min-height:112px;
  padding:8px 0 12px;
  justify-items:stretch;
}
.builder-built-layer-label{
  top:1px;
  left:10px;
  transform:none;
  padding:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--accent);
  font-size:8px;
  letter-spacing:.11em;
}
.builder-built-food-row{
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 18px;
  overflow:visible;
  padding-top:10px;
}
.builder-built-food{
  flex:1 1 240px;
  min-width:210px;
  max-width:100%;
  min-height:82px;
  display:grid;
  grid-template-columns:minmax(108px,1.35fr) minmax(118px,.95fr);
  grid-template-rows:1fr;
  align-items:center;
  gap:10px;
  place-items:initial;
}
.builder-built-food:only-child{
  flex-basis:100%;
  max-width:100%;
}
.builder-built-food-visual{
  width:100%;
  height:78px;
  display:block;
}
.builder-built-food.amount-light .builder-built-food-visual{transform:scale(.76)}
.builder-built-food-visual img{
  filter:drop-shadow(0 10px 10px rgba(31,31,25,.10));
}
.builder-built-food-info{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(28px,1fr) auto;
  align-items:center;
  gap:9px;
  color:var(--text);
  pointer-events:none;
}
.builder-built-food-connector{
  width:100%;
  height:1px;
  border-top:1.5px dotted #aaa79f;
}
.builder-built-food-label-copy{
  min-width:108px;
  display:grid;
  gap:2px;
  line-height:1.08;
  text-align:left;
}
.builder-built-food-name{
  color:#4f4d47;
  font-size:12px;
  font-weight:850;
  line-height:1.1;
}
.builder-built-food-calories{
  color:#66645d;
  font-size:10px;
  font-weight:750;
}
.builder-built-food-macros{
  color:#8a877e;
  font-size:8px;
  font-weight:750;
  letter-spacing:.01em;
  white-space:nowrap;
}
/* Old below-image caption is no longer used in Demo 7. */
.builder-built-food-caption{display:none!important}
.builder-built-layer-edit{
  right:0;
  color:#9a968c;
}

/* Multiple choices stay visually grouped in their category without
   turning back into white ingredient cards. */
.builder-built-food-row .builder-built-food:not(:only-child){
  flex-basis:calc(50% - 10px);
  min-width:230px;
}

@media(max-width:700px){
  .builder-live-visual{
    min-height:570px;
    padding:26px 4px 42px;
  }
  .builder-skeleton{width:100%;gap:10px}
  .builder-section-card.complete.builder-food-layer{
    min-height:96px;
    padding:0;
  }
  .builder-built-layer{
    min-height:96px;
    padding:7px 0 9px;
  }
  .builder-built-food-row{
    min-height:78px;
    gap:6px;
    padding-top:9px;
  }
  .builder-built-food,
  .builder-built-food:only-child,
  .builder-built-food-row .builder-built-food:not(:only-child){
    flex-basis:100%;
    min-width:0;
    max-width:100%;
    min-height:74px;
    grid-template-columns:minmax(104px,1.35fr) minmax(112px,.95fr);
    gap:7px;
  }
  .builder-built-food-visual{height:68px}
  .builder-built-food-info{
    grid-template-columns:minmax(22px,1fr) auto;
    gap:7px;
  }
  .builder-built-food-label-copy{min-width:106px}
  .builder-built-food-name{font-size:11px}
  .builder-built-food-calories{font-size:9px}
  .builder-built-food-macros{font-size:7px}
  .builder-built-layer-label{left:6px;font-size:7px}
}


/* ============================================================
   USER FEEDBACK PASS — compact, visual-first ordering experience
   ============================================================ */

/* 7 — compact food-bag cart affordance in the header. */
.topbar{grid-template-columns:52px 1fr 52px}
.cart-button{
  position:relative;
  width:48px;
  height:48px;
  min-height:48px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow-small);
}
.cart-button:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.food-bag-icon{width:30px;height:30px;display:block}
.cart-button .count-badge{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  background:var(--accent);
  color:#fff;
  border:2px solid var(--bg);
  font-size:10px;
}

/* 5 — remove tutorial-style confirmation card; keep only useful totals. */
.side-panel{grid-template-columns:1fr}

/* 4 — bottom action bars are about half the old visual footprint. */
.bottom-order-bar,
.builder-bottom-order-bar{
  grid-template-columns:minmax(66px,.78fr) minmax(0,2.22fr);
  grid-template-rows:40px 44px;
  gap:6px 8px;
  padding:7px;
  border-radius:20px;
}
.bottom-order-bar .trash-button{
  min-height:90px;
  padding:4px;
  border-radius:15px;
}
.bottom-order-bar .trash-visual{width:42px;height:50px;transform:scale(.74)}
.bottom-order-bar .trash-count{top:5px;right:5px;min-width:20px;height:20px;padding:0 5px;font-size:9px}
.bottom-order-bar .item-quantity{min-height:40px;height:40px}
.bottom-order-bar .item-quantity button{min-height:40px;height:40px}
.bottom-order-bar .primary-button{min-height:44px;padding:8px 16px;font-size:14px}

/* 11 — prebuilt exploded meals are closer together and easier to scan. */
.ingredient-stack{gap:0}
.ingredient-row{
  min-height:116px;
  grid-template-columns:minmax(390px,1fr) minmax(205px,245px);
}
.ingredient-visual{min-height:108px}
.visual-stack{height:108px}
.ingredient-photo{max-height:102px}
.stack-panel{min-height:0}

/* 2 — explicit green confirmation after a prebuilt ingredient adjustment. */
.amount-options.with-confirm{grid-template-columns:repeat(5,minmax(0,1fr)) 46px}
.popover-confirm-change{
  min-width:44px;
  min-height:40px;
  border:0;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  font-size:22px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(31,90,59,.22);
}
.popover-confirm-change:hover{transform:translateY(-1px)}
.popover-controls>.popover-confirm-change{justify-self:end;width:52px;height:46px}

/* 1 — selected BYO ingredients toggle off by tapping the image again. */
.builder-edit-amount{
  margin:0 auto 4px;
  padding:4px 9px;
  border:0;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* 6 — build summary is the last checkpoint beneath the food visual. */
.builder-heading{display:block}
.builder-progress-bottom{
  width:min(680px,100%);
  margin:-8px auto 14px;
  grid-template-columns:1fr auto;
  align-items:center;
}
.builder-progress-bottom strong{grid-column:2;grid-row:1/3}
.builder-progress-bottom small{grid-column:1}

/* 8/9/12 — compact BYO visual; completed food remains direct-manipulation UI. */
.builder-live-visual{
  min-height:0;
  padding:22px 8px 24px;
}
.builder-skeleton{width:min(96%,560px);gap:4px}
.builder-section-card.empty{min-height:54px;padding-top:5px;padding-bottom:5px}
.builder-section-card.complete.builder-food-layer{min-height:82px}
.builder-built-layer{min-height:82px;padding:5px 0 6px}
.builder-built-food-row{min-height:70px;gap:3px 8px;padding-top:7px}
.builder-built-food{
  min-height:68px;
  grid-template-columns:minmax(125px,170px) minmax(150px,190px);
  justify-content:center;
  gap:0;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
}
.builder-built-food:active{cursor:grabbing}
.builder-built-food-visual{height:64px}
.builder-built-food-info{
  grid-template-columns:34px auto;
  gap:5px;
}
.builder-built-food-connector{min-width:28px}
.builder-built-food-label-copy{min-width:0}
.builder-built-layer-label{left:4px;top:0}
.builder-built-layer-edit{right:2px}
.builder-section-card{touch-action:pan-y}

/* Long-press drag ghost supports both empty sections and actual ingredients. */
.builder-drag-ghost img{width:82px;height:48px;object-fit:contain}
.builder-drag-ghost{gap:3px}

/* 12/13 — cart previews match the compact visual the user just built. */
.cart-visual-preview{position:relative;padding:12px 12px 10px;margin-top:10px}
.cart-visual-caption{padding-right:62px;margin-bottom:4px}
.cart-preview-stack{gap:0;padding:0}
.cart-preview-layer{height:38px;width:min(86%,350px)}
.cart-preview-layer img{max-height:38px}
.cart-preview-layer.light img{transform:translate(calc(-50% + var(--cart-copy-x,0px)),calc(-50% + var(--cart-copy-y,0px))) rotate(var(--cart-copy-rotation,0deg)) scale(.82,.70)}
.cart-edit-button{
  position:absolute;
  top:9px;
  right:10px;
  z-index:3;
  width:52px;
  min-height:54px;
  padding:2px 3px;
  display:grid;
  place-items:center;
  gap:0;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--accent);
  font-size:9px;
  font-weight:900;
}
.cart-edit-button:hover{background:var(--accent-soft)}
.cart-edit-tools{width:31px;height:31px}
.cart-edit-button span{line-height:1;text-transform:uppercase;letter-spacing:.05em}
.builder-cart-preview{padding-bottom:10px}
.builder-cart-categories{gap:3px;padding-top:2px}
.builder-cart-category{padding:3px 0;grid-template-columns:62px minmax(0,1fr);gap:5px}
.builder-cart-category-items{gap:4px;padding:0;overflow-x:auto}
.builder-cart-ingredient{width:88px;min-height:42px;padding:3px;grid-template-columns:34px minmax(0,1fr);gap:4px}
.builder-cart-ingredient-image{width:34px;height:32px}
.cart-line-item{padding:16px 0}
.cart-active-notes{margin-top:8px}
.cart-removed-summary{margin-top:8px;padding-top:8px}

@media(max-width:700px){
  .topbar{grid-template-columns:44px 1fr 48px;padding:10px 12px}
  .cart-button{width:44px;height:44px;min-height:44px}
  .food-bag-icon{width:28px;height:28px}

  .bottom-order-bar,
  .builder-bottom-order-bar{
    bottom:6px;
    grid-template-columns:64px minmax(0,1fr);
    grid-template-rows:38px 42px;
    gap:5px 7px;
    padding:6px;
    border-radius:18px;
  }
  .bottom-order-bar .trash-button{min-height:85px;border-radius:14px}
  .bottom-order-bar .trash-visual{width:40px;height:48px;transform:scale(.68)}
  .bottom-order-bar .item-quantity,
  .bottom-order-bar .item-quantity button{min-height:38px;height:38px}
  .bottom-order-bar .primary-button{min-height:42px;font-size:13px;padding:7px 12px}

  .ingredient-row{
    min-height:102px;
    grid-template-columns:minmax(0,1fr) 150px;
    gap:0;
  }
  .ingredient-visual{min-height:96px}
  .visual-stack{height:96px;width:min(100%,340px)}
  .ingredient-photo{max-height:90px}
  .ingredient-info{min-height:58px;grid-template-columns:34px auto;gap:5px;padding:9px 8px}
  .ingredient-label-copy{min-width:104px}
  .ingredient-name{font-size:11px}
  .ingredient-calories{font-size:9px}

  .amount-options.with-confirm{grid-template-columns:repeat(5,minmax(46px,1fr)) 44px;overflow-x:auto;padding-bottom:2px}
  .amount-option{min-width:46px}

  .builder-progress-bottom{width:100%;margin:-6px auto 10px;padding:10px 12px}
  .builder-live-visual{min-height:0;padding:18px 2px 20px}
  .builder-skeleton{gap:3px}
  .builder-section-card.empty{min-height:50px}
  .builder-section-card.complete.builder-food-layer{min-height:76px}
  .builder-built-layer{min-height:76px;padding:4px 0}
  .builder-built-food-row{min-height:66px;gap:2px;padding-top:6px}
  .builder-built-food,
  .builder-built-food:only-child,
  .builder-built-food-row .builder-built-food:not(:only-child){
    min-height:64px;
    grid-template-columns:minmax(112px,150px) minmax(125px,155px);
    justify-content:center;
    gap:0;
  }
  .builder-built-food-visual{height:58px}
  .builder-built-food-info{grid-template-columns:28px auto;gap:4px}
  .builder-built-food-label-copy{min-width:0}
  .builder-built-food-name{font-size:10px}
  .builder-built-food-calories{font-size:8px}
  .builder-built-food-macros{font-size:7px}
  .builder-built-layer-label{left:2px;font-size:6.5px}

  .cart-visual-preview{padding:10px 9px 8px}
  .cart-visual-caption{padding-right:54px}
  .cart-preview-layer{height:34px;width:92%}
  .cart-preview-layer img{max-height:34px}
  .cart-edit-button{top:7px;right:7px;width:48px;min-height:50px}
  .cart-edit-tools{width:28px;height:28px}
  .builder-cart-category{grid-template-columns:54px minmax(0,1fr);gap:4px;padding:2px 0}
  .builder-cart-ingredient{width:82px;min-height:38px;grid-template-columns:31px minmax(0,1fr)}
  .builder-cart-ingredient-image{width:31px;height:29px}
}
/* Preserve the mobile scroll fix: normal swipes scroll; press-and-hold starts drag. */
.ingredient-visual{touch-action:pan-y}


/* ============================================================
   USER FEEDBACK ROUND 2 — consistency, compactness, live cart
   ============================================================ */

/* 1 + 6 — fixed header placement: brand stays left/center lane, bag is always far right,
   and the live item-count badge remains visible on mobile. */
.topbar{
  grid-template-columns:auto minmax(0,1fr) auto !important;
}
.back-button{grid-column:1;justify-self:start}
.brand-block{grid-column:2;justify-self:start;text-align:left}
.cart-button{grid-column:3;justify-self:end}
.cart-button .count-badge{
  display:grid !important;
  top:-8px;
  right:-8px;
  min-width:22px;
  height:22px;
  z-index:2;
}

/* 3 — visually center the trash illustration inside its tile. */
.bottom-order-bar .trash-button,
.builder-bottom-order-bar .trash-button{
  place-items:center;
  align-content:center;
  justify-content:center;
}
.bottom-order-bar .trash-visual,
.builder-bottom-order-bar .trash-visual{
  margin:auto;
  transform-origin:center center;
  justify-self:center;
  align-self:center;
}

/* 4 + 5 — larger food, less dead space, tighter vertical rhythm everywhere. */
.ingredient-stack{gap:0}
.ingredient-row{
  min-height:88px;
  margin:0;
  align-items:center;
}
.ingredient-visual{min-height:82px}
.visual-stack{
  height:82px;
  width:min(108%,620px);
  overflow:visible;
}
.ingredient-photo{
  max-height:118px;
  max-width:112%;
}
.ingredient-info{
  min-height:48px;
  padding-top:7px;
  padding-bottom:7px;
}

/* BYO uses the same dense, food-forward visual language. */
.builder-live-visual{padding-top:14px;padding-bottom:14px}
.builder-skeleton{gap:0}
.builder-section-card.empty{min-height:46px;margin:0}
.builder-section-card.complete.builder-food-layer{min-height:70px;margin:0}
.builder-built-layer{min-height:70px;padding:1px 0 2px}
.builder-built-food-row{min-height:66px;gap:0 6px;padding-top:4px}
.builder-built-food,
.builder-built-food:only-child,
.builder-built-food-row .builder-built-food:not(:only-child){
  min-height:64px;
  grid-template-columns:minmax(145px,190px) minmax(122px,160px);
  gap:0;
}
.builder-built-food-visual{height:72px;overflow:visible}
.builder-built-food-visual img{max-height:88px;max-width:116%}
.builder-built-food-info{grid-template-columns:22px auto;gap:4px}
.builder-built-food-connector{min-width:18px}
.builder-built-layer-label{top:-1px}

/* 7 — purposeful cart exit. */
.order-more-button{
  min-height:42px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:850;
  white-space:nowrap;
}
.order-more-button:hover{filter:brightness(.98);transform:translateY(-1px)}

/* 8 — the action bar is the actual end of ordering pages; remove trailing page padding. */
main{padding-bottom:0}
#customizerScreen,#builderScreen{padding-bottom:0;margin-bottom:0}
.bottom-order-bar,.builder-bottom-order-bar{margin-bottom:0}

/* 9 — default Regular remains visually quiet; only non-default amounts get the modifier pill. */
.builder-edit-amount{box-shadow:none}

/* 11 — cart change summaries scan vertically rather than reading across. */
.cart-active-notes,
.cart-removed-summary{
  display:grid;
  gap:5px;
}
.cart-active-notes>span,
.cart-change-heading{
  color:var(--accent);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.cart-change-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:4px;
}
.cart-change-list li{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.cart-change-list li strong{color:var(--text);font-size:12px}
.cart-change-list li small{color:#8d5b55;font-size:10px}

/* 12 — checkout visual uses the same image → dotted line → name/calories/macros language. */
.cart-preview-labeled-stack{
  width:100%;
  align-items:stretch;
  gap:0;
}
.cart-preview-layer.cart-preview-labeled-layer{
  width:100%;
  min-height:52px;
  height:52px;
  display:grid;
  grid-template-columns:minmax(128px,1fr) 28px minmax(108px,132px);
  align-items:center;
  gap:4px;
  padding:0 4px;
}
.cart-preview-layer-visual{
  position:relative;
  width:100%;
  height:50px;
  display:grid;
  place-items:center;
  overflow:visible;
}
.cart-preview-layer.cart-preview-labeled-layer img{
  position:absolute;
  left:50%;
  top:50%;
  max-width:112%;
  max-height:62px;
  object-fit:contain;
  transform:translate(calc(-50% + var(--cart-copy-x,0px)),calc(-50% + var(--cart-copy-y,0px))) rotate(var(--cart-copy-rotation,0deg));
}
.cart-preview-layer.cart-preview-labeled-layer.light img{
  transform:translate(calc(-50% + var(--cart-copy-x,0px)),calc(-50% + var(--cart-copy-y,0px))) rotate(var(--cart-copy-rotation,0deg)) scale(.82,.70);
}
.cart-preview-connector{
  width:100%;
  border-top:1.5px dotted #aaa79f;
}
.cart-preview-label-copy{
  min-width:0;
  display:grid;
  gap:1px;
  line-height:1.08;
  text-align:left;
}
.cart-preview-label-copy strong{font-size:10px;color:#4f4d47}
.cart-preview-label-copy span{font-size:9px;color:#66645d;font-weight:750}
.cart-preview-label-copy small{font-size:7px;color:#8a877e;font-weight:750;white-space:nowrap}
.cart-preview-layer-visual .cart-preview-badge{right:2px;bottom:0}

/* BYO cart: category order remains vertical, multiple choices stay horizontal,
   but each choice now carries the same dotted-line label and nutrition treatment. */
.builder-cart-categories{gap:2px}
.builder-cart-category{
  grid-template-columns:1fr;
  align-items:start;
  gap:2px;
  padding:4px 0;
}
.builder-cart-category-label{padding-left:4px}
.builder-cart-category-items{gap:8px;padding:0 0 2px}
.builder-cart-ingredient{
  width:210px;
  min-height:54px;
  padding:1px 3px;
  border:0;
  border-radius:0;
  background:transparent;
  grid-template-columns:minmax(80px,98px) 20px minmax(82px,1fr);
  gap:3px;
}
.builder-cart-ingredient-image{
  width:100%;
  height:52px;
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.builder-cart-ingredient-image img{width:112%;height:100%;object-fit:contain}
.builder-cart-ingredient.amount-light .builder-cart-ingredient-image{opacity:.78;transform:scale(.88)}
.builder-cart-ingredient-connector{width:100%;border-top:1.5px dotted #aaa79f}
.builder-cart-ingredient-copy{display:grid;gap:1px;line-height:1.05;text-align:left}
.builder-cart-ingredient-copy strong{font-size:10px;white-space:normal;overflow:visible;text-overflow:clip;color:#4f4d47}
.builder-cart-ingredient-copy span{font-size:8px;color:#66645d;font-weight:750}
.builder-cart-ingredient-copy small{font-size:7px;color:#8a877e;white-space:nowrap}

@media(max-width:700px){
  .topbar{grid-template-columns:auto minmax(0,1fr) auto !important;padding:10px 12px}
  .brand-block{justify-self:start;text-align:left}
  .cart-button{justify-self:end}
  .cart-button .count-badge{display:grid !important;top:-7px;right:-7px}

  .ingredient-row{min-height:80px;grid-template-columns:minmax(0,1fr) 142px}
  .ingredient-visual{min-height:76px}
  .visual-stack{height:76px;width:110%}
  .ingredient-photo{max-height:108px;max-width:116%}
  .ingredient-info{min-height:44px;padding:6px 6px;grid-template-columns:28px auto}

  .builder-live-visual{padding:10px 0 10px}
  .builder-section-card.empty{min-height:43px}
  .builder-section-card.complete.builder-food-layer{min-height:66px}
  .builder-built-layer{min-height:66px;padding:0}
  .builder-built-food-row{min-height:62px;padding-top:3px}
  .builder-built-food,
  .builder-built-food:only-child,
  .builder-built-food-row .builder-built-food:not(:only-child){
    min-height:60px;
    grid-template-columns:minmax(126px,154px) minmax(112px,138px);
  }
  .builder-built-food-visual{height:68px}
  .builder-built-food-visual img{max-height:82px;max-width:118%}
  .builder-built-food-info{grid-template-columns:18px auto;gap:3px}
  .builder-built-food-connector{min-width:14px}

  .order-more-button{min-height:40px;padding:0 12px;font-size:12px}

  .cart-preview-layer.cart-preview-labeled-layer{
    min-height:48px;
    height:48px;
    grid-template-columns:minmax(116px,1fr) 22px minmax(98px,116px);
    gap:3px;
    padding:0 2px;
  }
  .cart-preview-layer-visual{height:46px}
  .cart-preview-layer.cart-preview-labeled-layer img{max-height:58px;max-width:116%}
  .cart-preview-label-copy strong{font-size:9px}
  .cart-preview-label-copy span{font-size:8px}
  .cart-preview-label-copy small{font-size:6.5px}

  .builder-cart-ingredient{width:196px;grid-template-columns:78px 17px minmax(82px,1fr);min-height:50px}
  .builder-cart-ingredient-image{height:48px}
}

/* ============================================================
   PRE-ROUND-2 REFINEMENT PASS
   ============================================================ */

/* 1 — count ingredients keep confirmation on the SAME line as − count +. */
.count-confirm-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 50px;
  align-items:center;
  gap:8px;
  width:100%;
}
.count-confirm-row .count-control{width:100%;min-width:0}
.count-confirm-row .popover-confirm-change{
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  padding:0;
  justify-self:end;
  align-self:center;
  border-radius:14px;
}

/* 2 — correct ONLY the trash illustration's left/right optical centering.
   Vertical placement is intentionally untouched. */
.bottom-order-bar .trash-visual,
.builder-bottom-order-bar .trash-visual{
  transform:translateX(-10px) scale(.74);
}

/* 3 + 9 — removed reasons are recognizable, compact badges on the SAME line. */
.cart-removed-list{gap:6px}
.cart-change-list li.cart-removed-line{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:8px;
}
.cart-removed-line strong{
  min-width:0;
  color:var(--text);
  font-size:12px;
  line-height:1.2;
}
.removal-reason-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  line-height:1;
  font-weight:850;
  white-space:nowrap;
}
.removal-reason-badge.allergy{
  background:var(--danger-soft);
  color:#a9342b;
  font-weight:950;
}
.removal-reason-badge.preference{
  background:var(--surface-soft);
  color:var(--text);
  font-weight:850;
}

/* 5 — every choice modal begins at the top; modal contents keep normal page-like scrolling. */
.builder-choice-card{scroll-behavior:auto}

/* 6 — cart food previews are view-only. The cart itself can scroll; the food cannot. */
.cart-preview-stack,
.builder-cart-categories{
  pointer-events:none;
  user-select:none;
  touch-action:pan-y;
}
.builder-cart-category-items{
  overflow:visible !important;
  flex-wrap:wrap;
  touch-action:pan-y;
  scrollbar-width:none;
}
.builder-cart-category-items::-webkit-scrollbar{display:none}
.cart-edit-button{pointer-events:auto}

/* 7 + 8 + 10 — simplified removal dialog and a consistent red close X everywhere. */
.reason-card{
  position:relative;
  padding-top:34px;
}
.reason-card h3{padding-right:50px}
.reason-card .reason-buttons{margin-top:24px}
.modal-close-x,
.popover-close.modal-close-x{
  color:#b43a31 !important;
  background:#f8e6e3 !important;
  border:1px solid #f0cbc6 !important;
  font-weight:900 !important;
  box-shadow:none;
}
.modal-close-x:hover,
.popover-close.modal-close-x:hover{
  background:#f4d8d4 !important;
  color:#9d2f27 !important;
}
.reason-close-x{
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:999px;
  font-size:25px;
  line-height:1;
}

/* 11 — keep the approved compact vertical rhythm, but center each prebuilt
   exploded meal composition horizontally as one image→line→label unit. */
.ingredient-row{
  width:min(100%,760px);
  margin-left:auto;
  margin-right:auto;
  grid-template-columns:minmax(360px,500px) minmax(170px,205px);
  justify-content:center;
  column-gap:0;
}
.ingredient-visual{
  justify-items:end;
  padding-right:0;
}
.ingredient-info{justify-self:start}

/* 12 — count visuals show every selected item; no ×N badge substitutes. */
.visual-stack.counted{overflow:visible}

@media(max-width:700px){
  .count-confirm-row{
    grid-template-columns:minmax(0,1fr) 46px;
    gap:7px;
  }
  .count-confirm-row .popover-confirm-change{
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
  }

  /* Maintain the exact vertical trash position while fixing horizontal optical center. */
  .bottom-order-bar .trash-visual,
  .builder-bottom-order-bar .trash-visual{
    transform:translateX(-10px) scale(.68);
  }

  .ingredient-row{
    width:min(100%,460px);
    grid-template-columns:minmax(0,1fr) 136px;
    justify-content:center;
    column-gap:0;
  }
  .ingredient-visual{padding-right:0}

  .reason-card{padding-top:32px}
  .reason-close-x{top:12px;right:12px;width:36px;height:36px;font-size:23px}
}


/* Demo 14 — customized pill styling refined */
.cart-customized-list li{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  color:var(--text);
}
.cart-change-highlight{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-width:40px;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:var(--surface-soft);
  color:#111;
  font-size:12px;
  line-height:1;
  font-weight:850;
}
.cart-change-remainder{
  color:#111;
  font-size:12px;
  line-height:1.3;
  font-weight:700;
  text-transform:none !important;
}

/* Demo 14 — after an edit, the top-right close button becomes the green confirm button. */
.popover-close.confirm-mode{
  background:var(--accent) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 8px 18px rgba(31,90,59,.22) !important;
  font-weight:900 !important;
}
.popover-close.confirm-mode:hover{
  background:#184d32 !important;
  color:#fff !important;
}

/* Demo 15 — center the customized modifier/quantity text exactly inside its highlight pill. */
.cart-customized-list .cart-change-highlight{
  display:grid !important;
  place-items:center !important;
  box-sizing:border-box;
  height:32px;
  min-height:32px;
  min-width:40px;
  padding:0 12px !important;
  line-height:32px !important;
  text-align:center !important;
  vertical-align:middle;
}


/* Demo 17 — make the customized ingredient names black in cart checkout. */
.cart-customized-list .cart-change-remainder,
.cart-active-notes .cart-change-remainder{
  color:#111 !important;
  font-weight:700 !important;
  text-transform:none !important;
  align-self:center;
}
.cart-customized-list li{
  align-items:center;
}


/* Demo 18 — keep highlighted words consistently on the left and make Preference green. */
.cart-customized-list li,
.cart-change-list li.cart-removed-line{
  justify-content:flex-start;
}
.cart-customized-list .cart-change-highlight,
.cart-removed-line .removal-reason-badge{
  order:0;
}
.cart-customized-list .cart-change-remainder,
.cart-removed-line strong{
  order:1;
}
.removal-reason-badge.preference{
  background:var(--surface-soft);
  color:var(--accent) !important;
  font-weight:900;
}

/* Demo 19 — match Customized and Removed ingredient-name typography.
   Use the smaller existing text treatment for both sections. */
.cart-customized-list .cart-change-remainder,
.cart-active-notes .cart-change-remainder,
.cart-change-list li.cart-removed-line strong,
.cart-removed-line strong{
  color:#111 !important;
  font-size:10px !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}


/* iPhone Pro Max cart viewport fix — Aug 28, 2026
   Keep the cart footer inside Safari/in-app browsers' *visible* viewport,
   prevent rubber-band scroll from pushing it underneath browser chrome,
   and keep the Send order button fully visible/clickable. */
.cart-drawer{
  height:100vh; /* fallback */
  height:100dvh;
  max-height:100dvh;
  overflow:hidden;
  overscroll-behavior:none;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
}
.cart-items{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
}
.cart-footer{
  position:relative;
  z-index:6;
  flex-shrink:0;
  background:var(--surface);
  opacity:1 !important;
  filter:none !important;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}
.cart-footer .primary-button{
  position:relative;
  z-index:7;
  opacity:1 !important;
  filter:none !important;
  -webkit-tap-highlight-color:transparent;
}

@media(max-width:700px){
  .cart-drawer{
    width:100vw;
    height:100dvh;
    max-height:100dvh;
    padding-top:18px;
    padding-left:18px;
    padding-right:18px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .cart-items{
    padding-bottom:18px;
  }
  .cart-footer{
    padding-top:12px;
  }
}


/* ============================================================
   V21 — category artwork cleanup (poke rename, burrito graphic,
   and cover images blended more naturally into the cards)
   ============================================================ */

.category-graphic {
  background: transparent;
  filter: saturate(.98) contrast(.99);
}

.category-tile.category-burritos .category-graphic,
.category-tile.category-sushi .category-graphic {
  mix-blend-mode: normal;
}

.food-card-image {
  background: linear-gradient(180deg, #f7f4ec 0%, #f5f2ea 100%);
}

.food-card-image img {
  mix-blend-mode: multiply;
  background: transparent;
}

.food-card:hover .food-card-image img {
  transform: scale(1.01);
}


/* ============================================================
   Demo 22 — sauce visual scale + optically centered back arrow
   ============================================================ */

/* Keep the new wide sauce artwork from visually overpowering the
   rest of the exploded ingredients. Poke intentionally keeps the
   larger sauce presentation because it fits that composition. */
.visual-stack.compact-sauce-visual .ingredient-photo{
  max-width:46% !important;
  max-height:72px !important;
}

.visual-stack.compact-sauce-visual.light .ingredient-photo{
  transform:translate(-50%,-50%) scaleY(.68) scaleX(.94);
}

/* BYO burrito sauce layer uses the same restrained scale. */
.builder-built-food-visual.builder-sauce-visual{
  width:60% !important;
  max-width:60% !important;
  margin-left:auto;
  margin-right:auto;
}
.builder-built-food-visual.builder-sauce-visual img{
  max-width:100% !important;
  max-height:58px !important;
}

/* Use an SVG arrow rather than a text glyph so the arrow is geometrically
   centered inside the circular back button on iOS and desktop browsers. */
.back-button{
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  line-height:0 !important;
  font-size:0 !important;
}
.back-arrow-icon{
  width:24px;
  height:24px;
  display:block;
  margin:0;
  transform:none;
}

@media(max-width:700px){
  .visual-stack.compact-sauce-visual .ingredient-photo{
    max-width:55% !important;
    max-height:64px !important;
  }
  .builder-built-food-visual.builder-sauce-visual{
    width:58% !important;
    max-width:58% !important;
  }
  .builder-built-food-visual.builder-sauce-visual img{
    max-height:52px !important;
  }
}


/* ============================================================
   Demo 23 — finer category-specific sauce scaling + arrow tune
   ============================================================ */

/* Burger sauces should sit as a thin condiment layer rather than a main
   ingredient. Scale them to about half the previous perceived size. */
.visual-stack.compact-sauce-visual.sauce-burger .ingredient-photo{
  max-width:24% !important;
  max-height:36px !important;
}
.visual-stack.compact-sauce-visual.sauce-burger.light .ingredient-photo{
  transform:translate(-50%,-50%) scaleX(.86) scaleY(.56);
}

/* Pasta sauces should read clearly but stay smaller than the meatballs and
   noodle bed. */
.visual-stack.compact-sauce-visual.sauce-pasta .ingredient-photo{
  max-width:38% !important;
  max-height:58px !important;
}
.visual-stack.compact-sauce-visual.sauce-pasta.light .ingredient-photo{
  transform:translate(-50%,-50%) scaleX(.94) scaleY(.68);
}

/* Nacho sauces can be a little larger than burger/pasta so they still feel
   like a drizzle over chips, but not oversized. */
.visual-stack.compact-sauce-visual.sauce-appetizers .ingredient-photo{
  max-width:54% !important;
  max-height:78px !important;
}
.visual-stack.compact-sauce-visual.sauce-appetizers.light .ingredient-photo{
  transform:translate(-50%,-50%) scaleX(1.02) scaleY(.82);
}

/* Nudge the back arrow head left while giving the shaft a bit more extension
   to the right for the optical balance the user requested. */
.back-arrow-icon{
  width:26px;
  height:26px;
  display:block;
  margin:0;
  transform:translateX(-1px);
}

@media(max-width:700px){
  .visual-stack.compact-sauce-visual.sauce-burger .ingredient-photo{
    max-width:26% !important;
    max-height:32px !important;
  }
  .visual-stack.compact-sauce-visual.sauce-pasta .ingredient-photo{
    max-width:42% !important;
    max-height:52px !important;
  }
  .visual-stack.compact-sauce-visual.sauce-appetizers .ingredient-photo{
    max-width:60% !important;
    max-height:68px !important;
  }
}


/* ============================================================
   Demo 26 — colored category art + burger sauce only
   ============================================================ */

/* Front category cards: the new colored artwork is distinct enough on its own. */
.category-tile{
  border:0 !important;
}

/* Burger sauce ONLY: 0.66 × the generic compact sauce dimensions.
   Other category sauce sizing is intentionally untouched. */
.visual-stack.compact-sauce-visual.sauce-burgers .ingredient-photo{
  max-width:30.36% !important;
  max-height:47.52px !important;
}

@media(max-width:700px){
  .visual-stack.compact-sauce-visual.sauce-burgers .ingredient-photo{
    max-width:36.3% !important;
    max-height:42.24px !important;
  }
}


/* ============================================================
   Demo 28 — cart sauce preview sizing fix
   Keep sauce artwork at the same restrained relative scale used
   in the exploded customizer. Only cart sauce images are affected.
   ============================================================ */

/* Burger sauce — cart-only sizing. */
.cart-preview-layer.cart-sauce-layer.sauce-burgers .cart-preview-layer-visual img{
  max-width:20.04% !important;
  max-height:31.36px !important;
}

/* Pasta sauce — mirrors the current pasta exploded-view scale. */
.cart-preview-layer.cart-sauce-layer.sauce-pasta .cart-preview-layer-visual img{
  max-width:38% !important;
  max-height:58px !important;
}

/* Nachos/appetizers sauce — cart-only sizing. */
.cart-preview-layer.cart-sauce-layer.sauce-appetizers .cart-preview-layer-visual img{
  max-width:37.8% !important;
  max-height:43.4px !important;
}

/* Poke intentionally keeps its larger sauce presentation, matching the customizer. */
.cart-preview-layer.cart-sauce-layer.sauce-sushi .cart-preview-layer-visual img{
  max-width:100% !important;
  max-height:62px !important;
}

@media(max-width:700px){
  .cart-preview-layer.cart-sauce-layer.sauce-burgers .cart-preview-layer-visual img{
    max-width:23.96% !important;
    max-height:27.88px !important;
  }
  .cart-preview-layer.cart-sauce-layer.sauce-pasta .cart-preview-layer-visual img{
    max-width:42% !important;
    max-height:52px !important;
  }
  .cart-preview-layer.cart-sauce-layer.sauce-appetizers .cart-preview-layer-visual img{
    max-width:42% !important;
    max-height:40.6px !important;
  }
  .cart-preview-layer.cart-sauce-layer.sauce-sushi .cart-preview-layer-visual img{
    max-width:100% !important;
    max-height:58px !important;
  }
}

/* ============================================================
   Demo 30 — mobile category text color fix only
   Prevent iOS/Safari from applying the system blue button color.
   ============================================================ */
.category-tile,
.category-tile h3,
.category-tile .category-arrow{
  color:var(--text) !important;
  -webkit-text-fill-color:var(--text) !important;
}

.category-tile{
  -webkit-appearance:none;
  appearance:none;
}

/* ============================================================
   Version 2 usability test — mobile swipe gestures
   Swipe left = remove; swipe right = add more.
   Desktop drag-to-trash remains unchanged.
   ============================================================ */
@media(max-width:700px){
  .ingredient-visual{
    touch-action:pan-y;
    will-change:transform,opacity;
  }

  .ingredient-visual.swiping{
    z-index:18;
  }

  .ingredient-visual.swiping::before,
  .ingredient-visual.swiping::after{
    position:absolute;
    top:50%;
    z-index:20;
    padding:7px 10px;
    border-radius:999px;
    font-size:10px;
    font-weight:950;
    letter-spacing:.08em;
    pointer-events:none;
    opacity:0;
    transform:translateY(-50%) scale(.92);
    transition:opacity 90ms ease,transform 90ms ease;
    box-shadow:0 8px 18px rgba(31,31,25,.10);
  }

  .ingredient-visual.swiping::before{
    content:"REMOVE";
    right:8px;
    color:#8f3029;
    background:#f8e3df;
    border:1px solid #e8b7af;
  }

  .ingredient-visual.swiping::after{
    content:"MORE";
    left:8px;
    color:#1f5a3b;
    background:#e4efe8;
    border:1px solid #bad3c3;
  }

  .ingredient-visual.swiping.swipe-left::before,
  .ingredient-visual.swiping.swipe-right::after{
    opacity:.96;
    transform:translateY(-50%) scale(1);
  }
  .ingredient-visual.swiping.swipe-more-disabled.swipe-right::after{
    content:"FIXED";
    color:#66645d;
    background:#f1eee5;
    border-color:#d4d0c6;
  }
}


.swipe-trash-flyer{
  position:fixed;
  z-index:310;
  width:58px;
  height:42px;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.18));
  transform-origin:center;
}

.trash-button.swipe-receiving{
  border-color:#d6aea7;
  background:linear-gradient(180deg,#fff 0%,#fbefed 100%);
}

.trash-button.swipe-drop{
  animation:swipeTrashDrop 240ms ease;
}

@keyframes swipeTrashDrop{
  0%{transform:scale(1)}
  45%{transform:scale(1.055)}
  100%{transform:scale(1)}
}


/* ============================================================
   Usability Test 4 — premium motion refinement only
   Smooth removal condensation + smoother swipe-right volume update.
   ============================================================ */
.ingredient-row.ingredient-condense-out{
  pointer-events:none;
  transform-origin:center top;
  will-change:height,opacity,transform;
}

@media(max-width:700px){
  .visual-stack.swipe-volume-refresh{
    transform-origin:center;
    opacity:.72;
    transform:scale(.965);
    filter:drop-shadow(0 7px 12px rgba(0,0,0,.06));
    transition:
      transform 340ms cubic-bezier(.16,1,.3,1),
      opacity 220ms ease,
      filter 340ms ease;
  }

  .visual-stack.swipe-volume-refresh.swipe-volume-refresh-active{
    opacity:1;
    transform:scale(1);
    filter:drop-shadow(0 10px 16px rgba(0,0,0,.09));
  }
}

@media(prefers-reduced-motion:reduce){
  .ingredient-row.ingredient-condense-out,
  .visual-stack.swipe-volume-refresh{
    transition-duration:1ms !important;
    animation-duration:1ms !important;
  }
}

/* ============================================================
   Usability Test 5 — premium swipe motion refinement
   - no zombie flash on swipe-left removal
   - loftier gap closing
   - swipe-right stretch + materialize-behind volume animation
   ============================================================ */
@media (max-width:700px){
  .ingredient-row.swipe-removal-hold .ingredient-visual,
  .ingredient-row.swipe-removal-hold .ingredient-info{
    opacity:0;
  }

  .ingredient-row.swipe-removal-hold .ingredient-visual,
  .ingredient-row.swipe-removal-hold .ingredient-info,
  .ingredient-row.swipe-removal-restore .ingredient-visual,
  .ingredient-row.swipe-removal-restore .ingredient-info{
    transition:opacity 220ms ease;
  }

  .ingredient-row.swipe-removal-restore .ingredient-visual,
  .ingredient-row.swipe-removal-restore .ingredient-info{
    opacity:1;
  }

  .ingredient-row.ingredient-condense-out{
    will-change:height,opacity,transform;
  }

  .visual-stack.swipe-volume-refresh{
    transform-origin:center;
    opacity:.9;
    transform:scale(1);
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.06));
    transition:
      transform 460ms cubic-bezier(.16,1,.24,1),
      opacity 260ms ease,
      filter 460ms ease;
  }

  .visual-stack.swipe-volume-refresh.swipe-volume-refresh-active{
    opacity:1;
    transform:scale(1);
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.09));
  }

  .ingredient-photo.copy-materializing{
    z-index:1 !important;
    opacity:0;
    animation:materializeCopyBehind 420ms cubic-bezier(.16,1,.24,1) forwards;
    animation-delay:var(--materialize-delay, 0ms);
  }

  @keyframes materializeCopyBehind{
    from{
      opacity:0;
      transform:translate(calc(-50% + var(--copy-x,0px) - 18px), calc(-50% + var(--copy-y,0px))) rotate(calc(var(--copy-rotation,0deg) * .65)) scale(calc(var(--copy-scale,1) * .82));
      filter:drop-shadow(0 6px 10px rgba(0,0,0,.05));
    }
    55%{
      opacity:.82;
    }
    to{
      opacity:1;
      transform:translate(calc(-50% + var(--copy-x,0px)), calc(-50% + var(--copy-y,0px))) rotate(var(--copy-rotation,0deg)) scale(var(--copy-scale,1));
      filter:drop-shadow(0 12px 18px rgba(0,0,0,.10));
    }
  }
}

@media (prefers-reduced-motion:reduce){
  .ingredient-row.swipe-removal-hold .ingredient-visual,
  .ingredient-row.swipe-removal-hold .ingredient-info,
  .ingredient-row.swipe-removal-restore .ingredient-visual,
  .ingredient-row.swipe-removal-restore .ingredient-info,
  .ingredient-photo.copy-materializing{
    transition-duration:1ms !important;
    animation-duration:1ms !important;
  }
}


/* ============================================================
   EXPERIMENTAL V3 — VERTICAL ROTISSERIE CATEGORY REEL
   ============================================================ */

.category-grid {
  display: block;
}

.category-reel-shell {
  max-width: 900px;
  margin: 0 auto;
}

.category-reel-header {
  max-width: 760px;
  margin: 0 auto 20px;
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.category-reel-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: var(--shadow-small);
}

.category-reel-header p {
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  line-height: 1.55;
}

.category-reel-viewport {
  position: relative;
  height: 640px;
  padding: 6px 18px;
  perspective: 1200px;
  overflow: hidden;
  outline: none;
  touch-action: pan-y;
  user-select: none;
}

.category-reel-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.category-reel-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100%, 760px);
  min-height: 244px;
  padding: 28px 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 24px;
  align-items: center;
  border: 1px solid rgba(222,219,209,.92);
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(250,248,242,.98));
  box-shadow: 0 26px 54px rgba(31,31,25,.12);
  text-align: left;
  transition: transform 420ms cubic-bezier(.2,.88,.2,1), opacity 320ms ease, filter 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
  will-change: transform, opacity;
}

.category-reel-card.is-active {
  box-shadow: 0 34px 72px rgba(31,31,25,.16);
  border-color: rgba(198,193,181,.95);
}

.category-reel-card.is-nearby {
  cursor: pointer;
}

.category-reel-card.is-hidden {
  visibility: hidden;
}

.category-reel-card-copy {
  display: grid;
  gap: 10px;
  align-content: center;
}

.category-reel-kicker {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 900;
}

.category-reel-card h3 {
  margin: 0;
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -.055em;
  line-height: .95;
}

.category-reel-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.category-reel-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--accent);
  font-weight: 900;
}

.category-reel-visual-wrap {
  min-height: 180px;
  display: grid;
  place-items: center;
}

.category-reel-card .category-graphic {
  width: min(100%, 230px);
  height: auto;
  max-height: 176px;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.12));
  transition: transform 380ms cubic-bezier(.2,.88,.2,1), filter 260ms ease;
}

.category-reel-card.is-active .category-graphic {
  transform: scale(1.03);
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.14));
}

.category-reel-footer {
  margin-top: 16px;
  display: grid;
  gap: 14px;
  justify-items: center;
}

.category-reel-caption {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.category-reel-dots {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-small);
}

.category-reel-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ccc7bb;
  transition: transform 220ms ease, background 220ms ease, width 220ms ease;
}

.category-reel-dot.active {
  width: 28px;
  background: var(--accent);
}

@media (hover: hover) {
  .category-reel-card.is-active:hover {
    transform: translate(-50%, -50%) translateY(0) scale(1.015) rotateX(0deg) rotateZ(0deg) !important;
  }
}

@media (max-width: 700px) {
  .category-reel-shell {
    max-width: 100%;
  }

  .category-reel-header {
    margin-bottom: 12px;
  }

  .category-reel-viewport {
    height: 520px;
    padding: 0 8px;
  }

  .category-reel-card {
    width: min(100%, 96vw);
    min-height: 212px;
    padding: 22px 20px;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .category-reel-card-copy {
    gap: 8px;
  }

  .category-reel-card h3 {
    font-size: 40px;
  }

  .category-reel-card p {
    font-size: 14px;
  }

  .category-reel-visual-wrap {
    order: -1;
    min-height: 132px;
  }

  .category-reel-card .category-graphic {
    width: min(100%, 180px);
    max-height: 126px;
  }

  .category-reel-caption {
    font-size: 13px;
    padding: 0 10px;
  }
}

/* ============================================================
   EXPERIMENTAL V3.1 — CATEGORY ART ABOVE COPY
   Keeps the V3 reel intact while preventing category artwork
   from overlapping the title/description text.
   ============================================================ */
.category-reel-card .category-graphic {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  z-index: 1;
  transform: none;
  mix-blend-mode: normal;
  pointer-events: none;
}

.category-reel-card.is-active .category-graphic {
  transform: scale(1.03);
}

@media (max-width: 700px) {
  .category-reel-visual-wrap {
    order: -1;
    min-height: 132px;
    transform: translateX(8%);
  }

  .category-reel-card .category-graphic {
    width: min(100%, 180px);
    max-height: 126px;
  }
}


/* ============================================================
   EXPERIMENTAL V3.2 — FULL-SCREEN HOME CAROUSEL
   - Removes page-like scrolling on the home screen
   - Lets the category reel own the full viewport under the header
   - Keeps vertical swipe dedicated to reel motion only
   ============================================================ */
body.home-carousel-mode {
  overflow: hidden;
}

body.home-carousel-mode main {
  width: min(1220px, calc(100% - 20px));
  height: calc(100dvh - var(--home-topbar-height, 88px));
  padding: 10px 0 0;
  overflow: hidden;
}

body.home-carousel-mode #homeScreen.active {
  display: block;
  height: 100%;
}

body.home-carousel-mode .category-grid {
  height: 100%;
}

body.home-carousel-mode .category-reel-shell {
  height: 100%;
  max-width: 980px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: stretch;
}

body.home-carousel-mode .category-reel-viewport {
  height: 100%;
  min-height: 0;
  padding: 8px 10px 0;
  touch-action: none;
}

body.home-carousel-mode .category-reel-footer {
  margin-top: 0;
  padding: 10px 0 8px;
}

body.home-carousel-mode .category-reel-dots {
  background: rgba(255,255,255,.9);
}

.category-reel-stage {
  transition: transform 0ms linear;
  will-change: transform;
}

.category-reel-card {
  transition: transform 500ms cubic-bezier(.22,.9,.2,1), opacity 320ms ease, filter 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
}

@media (max-width: 700px) {
  body.home-carousel-mode main {
    width: min(100% - 14px, 1220px);
    height: calc(100dvh - var(--home-topbar-height, 70px));
    padding-top: 8px;
  }

  body.home-carousel-mode .category-reel-shell {
    max-width: 100%;
  }

  body.home-carousel-mode .category-reel-viewport {
    padding: 2px 4px 0;
  }

  body.home-carousel-mode .category-reel-footer {
    padding: 8px 0 6px;
  }
}


/* ============================================================
   EXPERIMENTAL V3.3 — LOFTY / LUXURY REEL MOTION
   The card positions are now animated frame-by-frame in JS so the release
   continues directly from the finger with no rigid transition handoff.
   ============================================================ */
.category-reel-card {
  transition: box-shadow 300ms ease, border-color 300ms ease !important;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.category-reel-card .category-graphic {
  transition: filter 280ms ease !important;
  will-change: transform;
}

.category-reel-card-copy {
  transform: translateZ(14px);
}

.category-reel-visual-wrap {
  transform-style: preserve-3d;
}

.category-reel-card.is-active {
  box-shadow: 0 38px 82px rgba(31,31,25,.17);
}

.category-reel-card.is-nearby {
  box-shadow: 0 20px 44px rgba(31,31,25,.10);
}

.category-reel-card.is-drag-anchor {
  box-shadow: 0 42px 90px rgba(31,31,25,.18) !important;
  border-color: rgba(198,193,181,.98) !important;
}

@media (prefers-reduced-motion: reduce) {
  .category-reel-card,
  .category-reel-card .category-graphic {
    transition-duration: 1ms !important;
  }
}


/* ============================================================
   EXPERIMENTAL V3.8 — FOCUSED ACTIVE TILE / SOFT PREV-NEXT PREVIEWS
   - Keeps the center tile dominant longer during a swipe
   - Only allows one clear card ahead and one behind
   - Makes surrounding cards quieter and less distracting
   ============================================================ */
.category-reel-viewport {
  isolation: isolate;
}

.category-reel-stage {
  overflow: visible;
}

.category-reel-card {
  overflow: hidden;
}

.category-reel-card.is-nearby {
  box-shadow: 0 15px 34px rgba(31,31,25,.085);
}

.category-reel-card.is-hidden {
  visibility: hidden;
}

.category-reel-card:not(.is-active) .category-reel-card-copy {
  opacity: .72;
}

.category-reel-card.is-active .category-reel-card-copy {
  opacity: 1;
}

.category-reel-card.is-nearby .category-reel-open {
  opacity: .52;
}

@media (max-width: 700px) {
  .category-reel-viewport {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .category-reel-card {
    min-height: 208px;
  }
}

/* ============================================================
   EXPERIMENTAL V3.9 — INTRO CARD / HEAVIER RESISTANCE SUPPORT
   ============================================================ */
.category-reel-intro-card {
  grid-template-columns: 1fr;
  text-align: center;
}

.category-reel-intro-copy {
  max-width: 520px;
  margin: 0 auto;
  justify-items: center;
}

.category-reel-intro-card .category-reel-kicker {
  letter-spacing: .18em;
}

.category-reel-intro-card h3 {
  font-size: clamp(34px, 5vw, 50px);
}

.category-reel-intro-card p {
  max-width: 28ch;
  font-size: 16px;
}

.category-reel-intro-card .category-reel-open {
  margin-top: 10px;
}

@media (max-width: 700px) {
  .category-reel-intro-card {
    min-height: 216px;
    padding-inline: 24px;
  }

  .category-reel-intro-card p {
    font-size: 15px;
  }
}


/* ============================================================
   EXPERIMENTAL V3.12 — STABLE ART / FOOD-FIRST PEEK
   - Locks food art to the card to remove jitter during swipes
   - Removes obvious card-size changes between active/preview states
   - Lets the next card peek with more of the food artwork visible first
   ============================================================ */
.category-reel-card .category-graphic,
.category-reel-card.is-active .category-graphic {
  transform-origin: center center;
  transition: opacity 220ms ease, filter 220ms ease !important;
}

.category-reel-visual-wrap {
  align-content: start;
}

@media (max-width: 700px) {
  .category-reel-visual-wrap {
    min-height: 136px;
    align-content: start;
  }

  .category-reel-card .category-graphic {
    width: min(100%, 184px);
    max-height: 128px;
  }
}


/* ============================================================
   EXPERIMENTAL V3.13 — ANCHORED ART / STRONGER FOOD-FIRST PEEK
   - Food art stays on one fixed anchor in every state
   - The next card sits lower so its food image peeks first
   ============================================================ */
@media (max-width: 700px) {
  .category-reel-visual-wrap {
    min-height: 128px;
    margin-top: -2px;
  }

  .category-reel-card .category-graphic,
  .category-reel-card.is-active .category-graphic {
    width: min(100%, 188px);
    max-height: 126px;
  }
}

/* ============================================================
   V3.14 — CATEGORY TILES + BYO PROTEIN/SALSA CAROUSEL
   The reel no longer lives on the category screen. Categories are clear,
   conventional tiles; the premium swipe interaction is reserved for ingredient
   choice where it adds value.
   ============================================================ */
body.home-carousel-mode { overflow: auto !important; }
body.home-carousel-mode main {
  width: min(1220px, calc(100% - 32px));
  height: auto;
  padding: 34px 0 96px;
  overflow: visible;
}
body.home-carousel-mode #homeScreen.active,
body.home-carousel-mode .category-grid { height: auto; }

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.category-home-tile {
  position: relative;
  min-height: 245px;
  padding: 22px 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 210px);
  grid-template-areas: "copy art";
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: linear-gradient(145deg, #fff, #faf8f1);
  box-shadow: var(--shadow-small);
  color: var(--text);
  text-align: left;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, border-color 220ms ease;
}
.category-home-tile:hover {
  transform: translateY(-3px);
  border-color: #c9c4b8;
  box-shadow: var(--shadow);
}
.category-home-copy {
  grid-area: copy;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
}
.category-home-kicker {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.category-home-copy strong {
  font-size: clamp(32px, 4vw, 48px);
  line-height: .96;
  letter-spacing: -.045em;
}
.category-home-copy > span:last-child {
  max-width: 34ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.category-home-art-wrap {
  grid-area: art;
  min-height: 180px;
  display: grid;
  place-items: center;
}
.category-home-art {
  width: min(100%, 205px);
  max-height: 175px;
  object-fit: contain;
  filter: drop-shadow(0 16px 25px rgba(0,0,0,.12));
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
.category-home-tile:hover .category-home-art { transform: translateY(-3px) scale(1.02); }
.category-home-arrow {
  position: absolute;
  right: 20px;
  bottom: 17px;
  color: var(--accent);
  font-size: 25px;
  font-weight: 800;
}

.builder-carousel-option-flow {
  width: 100%;
  max-width: none;
  margin-top: 8px;
  display: block;
}
.builder-carousel-shell {
  width: 100%;
  display: grid;
  gap: 8px;
}
.builder-carousel-hint {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}
.builder-ingredient-carousel-viewport {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  perspective: 1000px;
  touch-action: none;
  user-select: none;
  isolation: isolate;
}
.builder-ingredient-carousel-stage {
  position: relative;
  width: 100%;
  height: 100%;
}
.builder-carousel-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(360px, calc(100% - 20px));
  min-height: 230px;
  padding: 16px 18px 17px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(180deg, #fff, #faf8f2);
  box-shadow: 0 18px 38px rgba(31,31,25,.10);
  color: var(--text);
  text-align: center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}
.builder-carousel-card.is-active {
  border-color: #c6c0b3;
  box-shadow: 0 28px 58px rgba(31,31,25,.16);
}
.builder-carousel-card.selected { border-color: #8fb89c; }
.builder-carousel-food-wrap {
  width: 100%;
  height: 120px;
  display: grid;
  place-items: center;
}
.builder-carousel-food-wrap img {
  width: min(100%, 230px);
  max-height: 116px;
  object-fit: contain;
  pointer-events: none;
  transform: translateZ(0);
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.11));
}
.builder-carousel-kicker {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.builder-carousel-card strong {
  font-size: 23px;
  line-height: 1;
  letter-spacing: -.025em;
}
.builder-carousel-meta {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.builder-carousel-selected {
  margin-top: 3px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
}
.builder-carousel-active-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}
.builder-carousel-amount-panel {
  width: min(390px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 7px;
}
.builder-carousel-amount-panel:empty { display: none; }
.builder-carousel-amount-panel .control-label {
  margin: 0;
  text-align: center;
}

@media (max-width: 700px) {
  .category-grid { grid-template-columns: 1fr; gap: 14px; }
  .category-home-tile {
    min-height: 205px;
    padding: 19px;
    grid-template-columns: minmax(0, 1fr) 135px;
    gap: 10px;
    border-radius: 25px;
  }
  .category-home-copy strong { font-size: 34px; }
  .category-home-copy > span:last-child { font-size: 12px; }
  .category-home-art-wrap { min-height: 140px; }
  .category-home-art { width: min(100%, 150px); max-height: 130px; }
  .builder-choice-card { overflow: hidden; }
  .builder-ingredient-carousel-viewport { height: 405px; }
  .builder-carousel-card {
    width: calc(100% - 16px);
    min-height: 220px;
    border-radius: 23px;
  }
  .builder-carousel-food-wrap { height: 112px; }
  .builder-carousel-food-wrap img { max-height: 108px; }
}


/* ============================================================
   Pizza demo — Meat Lovers exploded-view sizing
   Wide pizza-topping artwork is tuned for clean mobile scale.
   ============================================================ */
.visual-stack.compact-sauce-visual.sauce-pizza .ingredient-photo{
  max-width:76% !important;
  max-height:68px !important;
}

.cart-preview-layer.cart-sauce-layer.sauce-pizza .cart-preview-layer-visual img{
  max-width:72% !important;
  max-height:58px !important;
}

.category-home-tile.category-pizza .category-home-art{
  width:min(100%, 190px);
  max-height:160px;
}

@media(max-width:700px){
  .visual-stack.compact-sauce-visual.sauce-pizza .ingredient-photo{
    max-width:82% !important;
    max-height:60px !important;
  }

  .cart-preview-layer.cart-sauce-layer.sauce-pizza .cart-preview-layer-visual img{
    max-width:78% !important;
    max-height:52px !important;
  }

  .category-home-tile.category-pizza .category-home-art{
    width:min(100%, 156px);
    max-height:132px;
  }
}