/* Studio v2 — PHONE COMFORT layer (loaded last). Owner feedback on an iPhone 16 (2026-09-30):
   "not comfortable" — the first choice was below the fold, the pinned 3D stage + floating bar
   left half the screen for choosing, and two huge cards per screen meant 4–5 screens of scrolling
   for step 1. Phones only; nothing here changes what is chosen, sent or priced — layout only.
   Goal: see a choice as soon as the page opens, and finish step 1 in about one screen. */
@media (max-width: 760px) {
  /* 2026-09-30 entry-screen pass (owner brief): less height for the header, repeated titles,
     frames and gaps, so the dish, the base choices and the next action show up sooner.
     The stage is no longer pinned while scrolling (it took a third of the screen for good). */
  :root { --stage-h: clamp(180px, 24svh, 220px); --bar-h: 64px; }
  body { padding-bottom: calc(var(--bar-h) + 14px + env(safe-area-inset-bottom)); }

  /* ── Header: 60px — wordmark, a small open/closed pill, the bag as an icon with its count ── */
  header { height: 60px; padding: 0 4%; gap: 10px; padding-top: env(safe-area-inset-top); box-sizing: content-box; }
  header .brand { min-height: 44px; }
  header .brand-word { font-size: 21px; }
  header .brand-word small { display: none; }
  header .brand-logo { height: 34px; }
  header .shop-status { display: inline-flex; margin-inline-start: auto; padding: 5px 9px; font-size: 11.5px; white-space: nowrap; }
  header .bag {
    position: relative; flex: none; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; gap: 0; border-radius: 14px;
  }
  header .bag svg { width: 21px; height: 21px; }
  header .bag .bag-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* still read by screen readers */
  header .bag #cart-count {
    position: absolute; top: -4px; inset-inline-end: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
    background: #fff; color: var(--ink); font-size: 11px; font-weight: 800; box-shadow: 0 0 0 2px var(--night);
  }

  /* ── One compact headline ───────────────────────────────────────────────────── */
  .intro { padding: 10px 2px 8px; }
  .intro .eyebrow, .intro #v2-hero-sub, .intro .location { display: none; }
  .intro h1 { margin: 0; font-size: clamp(21px, 5.8vw, 25px); line-height: 1.1; letter-spacing: -.7px; }

  /* ── Pizza | Pasta: a full-width switch, 44px tabs, one light track (no nested frames) ── */
  .v2-studio .visual-top { display: block; padding: 8px 8px 8px; background: #fff; }
  .v2-studio .visual-top .pill, .v2-studio .visual-top .small-label { display: none; }
  /* A quiet segmented control: the selected side is a white tile with green text, so the one
     green button on the screen is the primary action in the bar (not this switch). */
  .v2-studio .visual-top .mode-switch { display: grid; width: 100%; padding: 3px; border-radius: 13px; background: #ebe5d9; box-shadow: none; }
  .v2-studio .visual-top .mode-switch [data-mode-tab] {
    min-width: 0; min-height: 44px; padding: 0 10px; border-radius: 10px; gap: 7px;
    font-size: 15px; font-weight: 650; color: #6f6a61;
  }
  .v2-studio .visual-top .mode-switch [data-mode-tab][aria-selected=true] { color: var(--brand-dark); font-weight: 800; }
  .v2-studio .visual-top .mode-switch .mode-emoji { font-size: 18px; }
  .v2-studio .visual-top .mode-switch [aria-selected=true] .mode-emoji { transform: scale(1.08); }
  .v2-studio .visual-top .mode-switch .mode-switch-thumb {
    top: 3px; bottom: 3px; inset-inline-start: 3px; width: calc(50% - 3px); border-radius: 10px;
    background: #fff; box-shadow: 0 1px 2px #1c1a1726, 0 3px 8px -4px #1c1a1740, inset 0 0 0 1px #17915a2e;
    transition: transform .32s cubic-bezier(.3, 1.1, .4, 1);
  }
  .v2-studio .visual-top .mode-switch.single .mode-switch-thumb { width: calc(100% - 6px); }
  .v2-studio .stage-switch, .v2-studio .stage-float { display: none; }

  /* ── The dish: 180–220px, in the page flow (scrolls away with it), nothing over the food ── */
  .v2-studio .pizza-stage {
    position: relative; top: auto; height: var(--stage-h); min-height: 0;
    background: radial-gradient(ellipse at 50% 46%, #fffdf8 0, #f6f1e7 62%, #efe8db 100%); border-bottom: 0;
  }
  .v2-studio .pizza-stage::before { display: none; }

  /* No second title under the dish (the base is named in its card, the price in the bar).
     Only the chosen toppings stay here, as the quick "remove" chips. */
  .v2-studio .pizza-caption { display: block; padding: 0; background: #fff; border: 0; text-align: center; }
  .v2-studio .pizza-caption .eyebrow.mp-badge, .v2-studio .pizza-caption #pizza-title,
  .v2-studio .pizza-caption #pizza-description, .v2-studio .pizza-caption .stamp { display: none; }
  .v2-studio .pizza-caption .mp-toppings { margin: 0; padding: 8px 10px; gap: 6px; justify-content: center; border-bottom: 1px solid var(--line); }
  .v2-studio .pizza-caption .mp-toppings:empty { display: none; }
  .v2-studio .mp-chip { position: relative; height: 32px; font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--line); background: #faf8f3; }
  .v2-studio .mp-chip::after { content: ''; position: absolute; inset: -6px -2px; } /* 44px tap area */
  .v2-studio .mp-chip svg { width: 20px; height: 20px; }

  /* ── Steps: one compact row "1 Base → 2 Toppings → 3 Finish", with the one reset at its end.
     ("Let's build your pizza" repeated the headline, so it is hidden on phones.) ───────── */
  .v2-studio .builder-controls {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 4px 14px 0;
  }
  .v2-studio .builder-controls > * { grid-column: 1 / -1; min-width: 0; }
  .v2-studio .builder-heading { display: contents; }
  .v2-studio .builder-heading #builder-title { display: none; }
  .v2-studio .builder-heading #start-over {
    grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0;
    border-radius: 12px; font-size: 0; color: #777164; /* the words stay for screen readers; the ↺ is the button */
  }
  .v2-studio .builder-heading #start-over span { display: block; font-size: 19px; line-height: 1; }
  /* (wraps onto a second line instead of colliding when the text is enlarged or the phone is very narrow) */
  .v2-studio .steps { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0; margin: 0; min-height: 44px; border: 0; }
  .v2-studio .steps button {
    flex: 0 1 auto; flex-direction: row; align-items: center; gap: 6px; min-height: 44px; padding: 0; font-size: 0; font-weight: 600; color: #a49e93;
  }
  .v2-studio .steps button::after, .v2-studio .steps button[aria-selected=true]::after { content: none; display: none; }
  .v2-studio .steps button + button::before { content: '→'; margin: 0 7px; font-size: 13px; font-weight: 600; color: #cbc4b7; }
  .v2-studio .steps button b { width: 22px; height: 22px; margin: 0; font-size: 12px; box-shadow: none; transform: none; }
  .v2-studio .steps button span { font-size: 0; }
  .v2-studio .steps button span::after { font-size: 13.5px; }
  .v2-studio .steps button[data-step=base] span::after { content: 'Base'; }
  .v2-studio .steps button[data-step=toppings] span::after { content: 'Toppings'; }
  .v2-studio .steps button[data-step=finish] span::after { content: 'Finish'; }
  .v2-studio .steps button[aria-selected=true] { color: var(--ink); font-weight: 800; }
  .v2-studio .steps button[aria-selected=true] b { box-shadow: 0 0 0 3px #17915a24; }
  .v2-studio .steps button[data-done=true] { color: #666055; }

  /* Section heads: title only (the helper sentence and "01 / 03" repeat the steps row). */
  .v2-studio .step-panel > .section-title { margin: 4px 0 8px; }
  .v2-studio .step-panel > .section-title h3 { font-size: 17px; }
  .v2-studio .step-panel > .section-title > span:not([id]):not([class]) { display: none; }
  .v2-studio .step-panel > .section-title + p.muted,
  .v2-studio .step-panel > .pasta-shape-head + p.muted { display: none; }
  .v2-studio #pizza-panel-base > .section-title h3 { font-size: 0; }
  .v2-studio #pizza-panel-base > .section-title h3::after { content: 'Choose your base'; font-size: 17px; }

  /* ── Step 1: one base per row — small photo, name, short description, price, ✓.
     About 70px tall, and free to grow when the text needs it (nothing is cut off). ───── */
  .v2-studio .base-grid.sauce-grid,
  .v2-studio #panels-pizza .base-grid { grid-template-columns: 1fr; gap: 8px; }
  .v2-studio .base-grid.sauce-grid .base-card,
  .v2-studio #panels-pizza .base-grid .base-card {
    flex-direction: row; align-items: center; gap: 11px; min-height: 70px; padding: 9px 44px 9px 10px; border-radius: 14px;
    border-width: 1.5px; box-shadow: none;
  }
  .v2-studio .base-grid.sauce-grid .base-card img,
  .v2-studio #panels-pizza .base-grid .base-card img { flex: none; width: 50px; height: 50px; margin: 0; box-shadow: none; }
  .v2-studio .base-grid.sauce-grid .base-card > span,
  .v2-studio #panels-pizza .base-grid .base-card > span {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 2px; min-width: 0;
  }
  .v2-studio .base-grid.sauce-grid .base-card strong,
  .v2-studio #panels-pizza .base-grid .base-card strong { grid-column: 1; font-size: 15px; line-height: 1.2; }
  .v2-studio .base-grid.sauce-grid .base-card small,
  .v2-studio #panels-pizza .base-grid .base-card small { grid-column: 1; display: block; font-size: 12.5px; line-height: 1.3; }
  .v2-studio .base-grid.sauce-grid .base-card b,
  .v2-studio #panels-pizza .base-grid .base-card b { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 15px; white-space: nowrap; }
  .v2-studio .base-grid.sauce-grid .base-card i,
  .v2-studio #panels-pizza .base-grid .base-card i { top: 50%; right: 12px; width: 22px; height: 22px; margin-top: -11px; }
  .v2-studio .base-grid .base-card.selected { transform: none; box-shadow: none; border-color: var(--brand); background: #f4faf6; }

  /* Pasta shapes: all four in one row of small tiles (they are all "Included"). */
  .v2-studio .pasta-panel .pasta-shape-head { margin-top: 18px; }
  .v2-studio .pasta-panel .base-grid:not(.sauce-grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .v2-studio .pasta-panel .base-grid:not(.sauce-grid) .base-card {
    align-items: center; gap: 5px; padding: 9px 3px 8px; border-radius: 16px; text-align: center;
  }
  .v2-studio .pasta-panel .base-grid:not(.sauce-grid) .base-card .shape-art { width: 42px; height: 42px; }
  .v2-studio .pasta-panel .base-grid:not(.sauce-grid) .base-card .shape-art svg { width: 34px; height: 34px; }
  .v2-studio .pasta-panel .base-grid:not(.sauce-grid) .base-card > span { align-items: center; }
  .v2-studio .pasta-panel .base-grid:not(.sauce-grid) .base-card strong { font-size: 12px; line-height: 1.15; overflow-wrap: normal; }
  .v2-studio .pasta-panel .base-grid:not(.sauce-grid) .base-card small,
  .v2-studio .pasta-panel .base-grid:not(.sauce-grid) .base-card b,
  .v2-studio .pasta-panel .base-grid:not(.sauce-grid) .base-card i { display: none; }

  /* ── Step 2: toppings as small tiles, two per row. Tap the tile to add (the "+" says so);
     once added, the − n + stepper appears under it. Half the scrolling of the big cards. ── */
  .v2-studio .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; align-items: start; }
  .v2-studio .tp { display: flex; flex-direction: column; align-items: stretch; border-radius: 16px; border-width: 1.5px; }
  .v2-studio .tp-main { flex-direction: row; align-items: center; gap: 7px; min-height: 54px; padding: 7px 8px 7px 9px; }
  .v2-studio .tp-icon, .v2-studio .tp-icon svg { width: 28px; height: 28px; }
  .v2-studio .tp-text { min-width: 0; flex: 1; }
  .v2-studio .tp-text strong { display: block; font-size: 13px; line-height: 1.18; font-weight: 700; overflow-wrap: anywhere; }
  .v2-studio .tp-text small { font-size: 12px; }
  .v2-studio .tp-check, .v2-studio .tp-add-btn { display: none; }
  .v2-studio .tp-main::after {
    content: '+'; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--tint-2, #dff0e6); color: var(--brand-dark); font-size: 17px; font-weight: 700; line-height: 1;
  }
  .v2-studio .tp.selected .tp-main::after { display: none; }
  .v2-studio .tp.selected .tp-main { min-height: 0; padding-bottom: 5px; }
  .v2-studio .tp .tp-stepper { margin: 0 6px 6px; min-height: 0; padding: 0; }
  .v2-studio .tp .tp-stepper button { width: 44px; height: 44px; min-height: 0; font-size: 18px; }
  .v2-studio .tp .tp-stepper .stepper-num { font-size: 14.5px; }
  .v2-studio .tp-group .group-title { margin-top: 12px; }
  .v2-studio .chips { margin-bottom: 4px; }

  /* ── Step 3: smaller extras, shorter side photos, shorter note box ───────────── */
  .v2-studio .upgrade {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 9px; row-gap: 8px;
    height: auto; min-height: 0; padding: 10px 11px;
  }
  .v2-studio .upgrade .up-icon, .v2-studio .upgrade .up-icon svg { width: 32px; height: 32px; }
  .v2-studio .upgrade strong { font-size: 13.5px; line-height: 1.2; text-align: start; }
  .v2-studio .upgrade small { display: none; }
  .v2-studio .upgrade .up-foot { grid-column: 1 / -1; margin: 0; }
  .v2-studio .upsell-img, .v2-studio .upsell-img img { height: 78px; }
  .v2-studio .step-panel textarea { min-height: 64px; }
  .v2-studio .summary .stepper button { min-width: 44px; min-height: 44px; }

  /* ── The action bar: docked to the bottom edge — the price and ONE primary action.
     (Reset lives at the end of the steps row; back = the ← that appears after step 1.) ── */
  .action-bar {
    left: 0; right: 0; bottom: 0; gap: 12px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
    border: 0; border-top: 1px solid #ffffffd0; border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 28px -18px #1b493470;
  }
  .action-bar #bar-back[aria-label="Start over"] { display: none; } /* step 1: no reset in the bar */
  .bar-secondary { width: 46px; height: 48px; border-radius: 14px; font-size: 18px; }
  .action-info { justify-content: center; }
  .v2-studio[data-active-step=base] .action-bar #bar-name { display: none; } /* the price alone: the base is named in its card */
  .bar-primary { flex: 1 1 auto; max-width: 62%; min-height: 48px; border-radius: 14px; justify-content: center; }
  .bar-primary .long { display: none; }
  .bar-primary .short { display: inline; }
  #bar-total { font-size: 23px; }
  #bar-name { font-size: 12px; }
  /* "View order" sits on the bar's corner like a tab, instead of floating over the choices. */
  .bar-cart {
    top: -31px; left: auto; right: 14px; transform: none; min-height: 32px; padding: 0 12px;
    border-radius: 12px 12px 0 0; font-size: 12.5px; box-shadow: 0 -6px 14px -8px #0006;
  }
  #toast { bottom: calc(var(--bar-h) + 56px + env(safe-area-inset-bottom)); }
  #toast .toast-action { min-height: 44px; min-width: 44px; }
}
@media (max-width: 380px) {
  .v2-studio .builder-controls { padding: 4px 12px 0; }
  .v2-studio .steps button { gap: 5px; }
  .v2-studio .steps button + button::before { margin: 0 3px; }
  .v2-studio .steps button span::after { font-size: 13px; }
}
@media (max-width: 345px) {
  /* very narrow phones: drop the arrows so the three steps still fit on one line */
  .v2-studio .steps button + button::before { content: ''; margin: 0 0 0 9px; }
}