/* ─────────────────────────────────────────────────────────────────────────────
   The gift studio, wearing the site's clothes (Curtis, 12 Sep 2026).
   The prototype was built to own a whole screen in its own green palette. Here it
   sits under the real header, in the house browns and creams, with its duplicate
   header band gone and the mode switch moved into the picker where it belongs.
   ───────────────────────────────────────────────────────────────────────────── */

/* House palette over the prototype's greens. Same tokens the product pages use. */
:root{
  --ink:   #2C1810;   /* pp-brown-900  */
  --muted: #9A887A;   /* pp-text-muted */
  --line:  #EDE0D1;   /* pp-cream-300  */
  --cream: #FFF9F2;   /* pp-cream-100  */
  --green: #F5EDE3;   /* pp-cream-200, the soft ground the prototype used a green for */
}

body{ overflow:auto; }

/* Our banner + header sit above, so the studio takes the rest of the screen. --pp-chrome
   is measured on the page: the header is shorter on a phone and the bar is not always there. */
.studio{
  --pp-studio-gap:22px;
  --studio-vh: calc(100dvh - var(--pp-chrome,64px) - var(--pp-studio-gap));
  height: var(--studio-vh);
  margin-top: var(--pp-studio-gap);
  position: relative;
}
@media (max-width:700px){ .studio{ --pp-studio-gap:14px; } }

/* The prototype's own header band said PrimalPantry a second time under our nav. Gone, and its
   grid row with it — the three heights below mirror the prototype's own breakpoints. */
.studio > header{ display:none; }
.studio{ grid-template-rows: minmax(0,1fr) 92px; }
@media (max-width:700px){ .studio{ grid-template-rows: minmax(0,1fr) 105px; } }
@media (max-height:650px) and (min-width:701px){ .studio{ grid-template-rows: minmax(0,1fr) 80px; } }

/* The mode switch moves into the top of the picker (see the script on the page). */
.picker-top .mode-switch{ display:flex; width:100%; margin:0 0 14px; border:1px solid var(--line); border-radius:100px; background:#fff; overflow:hidden; }
.picker-top .mode-switch button{ flex:1; border:0; background:none; padding:9px 12px; font:600 13px/1.2 'DM Sans',system-ui,sans-serif; color:var(--muted); cursor:pointer; }
.picker-top .mode-switch button[aria-pressed="true"], .picker-top .mode-switch button.on, .picker-top .mode-switch button.active{ background:var(--ink); color:#FFF9F2; border-radius:100px; }

/* The bottom bar: charges spread across the free width instead of bunching left, and the right
   side keeps clear of the floating chat bubble so it never sits on the button. */
.studio > footer{ padding-right:104px; }
.studio > footer .summary{ flex:1 1 auto; justify-content:space-between; max-width:820px; gap:14px; }
.studio > footer .summary > *{ flex:0 0 auto; }
@media (max-width:1050px){ .studio > footer .summary{ max-width:560px; } }
@media (max-width:700px){
  .studio > footer{ padding-right:18px; padding-bottom:78px; }   /* the bubble sits bottom-right on a phone */
  .studio > footer .summary{ max-width:none; width:100%; }
}

/* Bootstrap arrives with the site header; keep its reboot off the studio's own controls. */
.studio button, .studio input, .studio select, .studio textarea{ font-family:inherit; }
.studio img{ max-width:none; }

/* The photo is the point of the page, so it leads: the switch sits above it on the cream, the
   heading is trimmed to what the box needs, and the box fills the top (Curtis, 12 Sep 2026). */
.studio .visual .mode-switch{ align-self:center; display:inline-flex; margin:0 0 10px; border:1px solid var(--line); border-radius:100px; background:#fff; overflow:hidden; }
.studio .visual .mode-switch button{ border:0; background:none; padding:8px 18px; font:600 13px/1.2 'DM Sans',system-ui,sans-serif; color:var(--muted); cursor:pointer; border-radius:100px; }
.studio .visual .mode-switch button[aria-pressed="true"], .studio .visual .mode-switch button.on, .studio .visual .mode-switch button.active{ background:var(--ink); color:#FFF9F2; }
.studio .visual-heading{ margin-bottom:6px; }
.studio .visual-heading h1{ margin:2px 0 4px; }
@media (max-width:700px){
  .studio .visual-heading .eyebrow, .studio .visual-heading p{ display:none; }   /* the box, not the copy, on a phone */
  .studio .visual-heading h1{ font-size:21px; margin:0 0 4px; }
  .studio .visual .mode-switch{ margin-bottom:6px; }
  .picker-top .mode-switch{ display:none; }
}

/* ─── The box leads (Curtis, 12 Sep 2026) ────────────────────────────────────
   The photo was letterboxing: the scene box was wider than the height left for
   it, so the 4:3 picture shrank to fit and left bars down each side. Two halves
   to the fix — take back the vertical space the heading was spending (the site
   header above already says whose page this is), then set each breakpoint's
   width constant to footer + what is left, so the scene ends up exactly the
   height available and the picture fills it edge to edge. */
.studio .visual{ padding:10px 16px 6px; }
.studio .visual-heading{ margin-bottom:0; }
.studio .visual-heading .eyebrow,
.studio .visual-heading p{ display:none; }
.studio .visual-heading h1{ font:500 clamp(22px,2.1vw,30px)/1.15 'Playfair Display',Georgia,serif; margin:0 0 4px; }
.studio .visual .mode-switch{ margin:0 0 8px; }
.studio .visual .mode-switch button{ padding:6px 16px; }
.studio .scene-bottom{ padding:2px 5px 4px; }

/* width = (studio height − N) × 4/3, so N is everything that is not the scene:
   the footer plus the visual's own padding, switch, heading, hint row and chips. */
.studio .scene{ width:min(100%,calc((var(--studio-vh,100dvh) - 265px)*1.333)); max-width:1120px; }
@media (min-width:1500px){ .studio .scene{ width:min(100%,calc((var(--studio-vh,100dvh) - 265px)*1.333)); } }
@media (max-width:1050px){ .studio .scene{ width:min(100%,calc((var(--studio-vh,100dvh) - 240px)*1.333)); } }
@media (max-height:650px) and (min-width:701px){ .studio .scene{ width:min(100%,calc((var(--studio-vh,100dvh) - 220px)*1.333)); } }

/* On a phone the picture had 43% of the screen and the picker 57%. Hand the box
   back the larger share — the picker scrolls, the photo cannot. */
@media (max-width:700px){
  .studio > main{ grid-template-rows:54% 46%; }
  .studio .visual{ padding:4px 8px 2px; }
  .studio .scene{ height:calc(100% - 52px); width:auto; max-width:100%; }
}

/* ─── The bottom bar says the total, not the arithmetic (Curtis, 12 Sep 2026) ──
   The per-line breakdown (base, products, customising, wrapping, shipping) is
   still built and still shown in the review dialog — it just does not need a
   whole banner of its own down there. What survives is the number and the one
   thing worth knowing beside it. */
.studio > footer .summary{ display:none; }
.studio > footer{ justify-content:flex-end; padding-right:104px; }
.studio > footer .total-row{ display:flex; align-items:center; gap:10px; }
.ships-free{
  font:600 12px/1 'DM Sans',system-ui,sans-serif; letter-spacing:.3px; white-space:nowrap;
  color:#2C1810; background:#F5EDE3; border:1px solid #EDE0D1;
  border-radius:100px; padding:6px 12px;
}
@media (max-width:700px){
  .studio > footer{ justify-content:stretch; padding-right:18px; padding-bottom:78px; grid-template-rows:auto; }
  .ships-free{ font-size:11px; padding:5px 10px; }
}

/* With the breakdown gone the bar only carries the total and the button, so it
   gives its spare height back to the picture above it. */
.studio{ grid-template-rows: minmax(0,1fr) 80px; }
@media (max-width:700px){ .studio{ grid-template-rows: minmax(0,1fr) 76px; } }
@media (max-height:650px) and (min-width:701px){ .studio{ grid-template-rows: minmax(0,1fr) 72px; } }

/* Phone: the switch sits above the box, so the scene has to leave room for it and
   for the chip strip underneath, or the pill gets clipped by the visual's overflow. */
@media (max-width:700px){
  .studio > main{ grid-template-rows:56% 44%; }
  .studio .scene{ height:calc(100% - 78px); }
}

/* ─── The box is the workspace (Curtis, 12 Sep 2026) ──────────────────────────
   People should be choosing and editing inside the picture, not in a row of
   chips under it. So the mode pill and the chip strip go, the controls move onto
   the photo itself, and the picture takes nearly the whole left-hand side.

   The controls sit in a frame AROUND the scene rather than inside it: app.js
   rewrites the scene's own innerHTML on every render, so anything parked in
   there would be wiped the first time a product changed. */
.studio .visual{
  --scene-w: min(100%, 1120px, calc((var(--studio-vh,100dvh) - 136px)*1.333));
  position:relative;
}
.studio .visual .mode-switch,
.studio .picker-top .mode-switch{ display:none; }   /* the entry link carries the mode */

.studio .scene-frame{ position:relative; width:var(--scene-w); margin:auto; flex-shrink:1; min-height:0; }
.studio .scene{ width:100%; max-width:none; }

/* Only the add control survives from the chip strip, and it sits on the photo. */
.studio .selection-strip{ position:absolute; left:14px; bottom:12px; width:auto; margin:0; padding:0; }
.studio .selection-chip{ display:none; }
.studio .selection-chip.extra{
  display:inline-flex; border:1px solid #EDE0D1; border-radius:100px; background:#fff;
  color:#2C1810; font:600 13px/1 'DM Sans',system-ui,sans-serif; padding:9px 15px;
  box-shadow:0 2px 8px #2C181018;
}
.studio .scene-bottom{
  position:absolute; right:14px; bottom:12px; left:auto; width:auto; max-width:none;
  flex-direction:row; align-items:center; gap:14px; padding:0; top:auto;
}
.studio .scene-hint{ margin:0; color:#2C1810; background:#FFFCF7CC; border-radius:100px; padding:6px 12px; }
.studio .view-switch{ background:#fff; border:1px solid #EDE0D1; box-shadow:0 2px 8px #2C181018; }

@media (max-width:700px){
  .studio .visual{ --scene-w:100%; }
  .studio .scene-frame{ width:auto; max-width:100%; height:100%; }
  .studio .scene{ height:100%; }
  .studio .selection-strip{ left:10px; bottom:10px; }
  .studio .scene-bottom{ right:10px; bottom:10px; }
  .studio .selection-chip.extra{ font-size:12px; padding:8px 13px; }
}

/* On a phone the picture is limited by screen width, not height, so let it take
   its natural 4:3 height and hand the rest of the screen to the picker. Forcing
   it to fill a fixed row put bars above and below the photo, which walks the
   numbered hotspots off the products they point at. */
@media (max-width:700px){
  .studio > main{ grid-template-rows:auto minmax(0,1fr); }
  .studio .visual{ height:auto; overflow:visible; }
  .studio .scene-frame{ width:100%; height:auto; }
  .studio .scene{ height:auto; }
}

/* ─── One base price, then build out (Curtis, 12 Sep 2026) ───────────────────
   The two tier cards are gone: there is one giftbox with a starting price, and
   everything after that is an addition. The row that held them now states that
   price, so the eye goes image → price → products, wrap, vouchers. */
.studio .starting-price{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:8px; background:#FFFCF7; padding:9px 12px;
}
.studio .starting-price span{ font-size:12px; color:var(--muted); }
.studio .starting-price strong{ font:600 19px/1 'Playfair Display',Georgia,serif; color:var(--ink); }
.studio .starting-price small{ font-size:11px; color:var(--muted); margin-left:auto; }

/* A choice shows what the product costs, and underneath, what it does to the
   box — only when that is an increase. Same price, no noise. */
.studio .choice-delta{ font-size:11px; line-height:1.25; color:var(--muted); display:block; margin-top:2px; }
.studio .choice-delta.up{ color:#9B5B2C; font-weight:600; }
.studio .choice-delta.on{ color:var(--ink); font-weight:600; }
.studio .choice-delta.full{ color:#9A887A; }

/* The bottom bar keeps the total, and names the two fees while they apply. */
.studio > footer .summary{ display:none; }
.studio > footer .summary.has-fees{ display:flex; align-items:center; margin-right:16px; }
.studio .fee-note{ font-size:11px; color:var(--muted); white-space:nowrap; }
@media (max-width:700px){
  .studio > footer .summary.has-fees{ margin-right:0; }
  .studio .starting-price small{ margin-left:0; flex-basis:100%; }
}

/* The fee note belongs beside the total, not stranded at the far edge: an
   earlier rule let the summary stretch across the bar. */
.studio > footer .summary.has-fees{ flex:0 0 auto; max-width:none; margin-left:auto; }

/* ─── Start with someone in mind (Curtis, 12 Sep 2026) ───────────────────────
   The box opens under a chooser: pick who it is for, the chooser clears, the
   products drop into the box on the normal swap animation, and a quiet line
   fades in to say the rest is yours to change. */
.studio .preset-overlay{
  position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(44,24,16,.34); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .32s ease;
}
.studio .preset-overlay.is-in{ opacity:1; }
.studio .preset-overlay.is-going{ opacity:0; }
.studio .preset-card{
  width:min(440px,100%); background:#FFFCF7; border:1px solid var(--line); border-radius:14px;
  padding:20px 20px 16px; box-shadow:0 18px 50px rgba(44,24,16,.22); text-align:center;
}
.studio .preset-eyebrow{ margin:0; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.studio .preset-h{ margin:5px 0 14px; font:500 25px/1.15 'Playfair Display',Georgia,serif; color:var(--ink); }
.studio .preset-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:12px; }
.studio .preset-choice{
  border:1px solid var(--line); border-radius:9px; background:#fff; padding:11px 10px;
  position:relative; text-align:left; cursor:pointer; transition:border-color .15s, background .15s;
}
.studio .preset-choice:hover{ border-color:var(--ink); background:#F5EDE3; }
.studio .preset-choice strong{ display:block; font-size:14px; color:var(--ink); }
.studio .preset-choice small{ display:block; margin-top:3px; font-size:11px; line-height:1.3; color:var(--muted); }
/* A short label on a pack, from its pill field in catalogue.js. It sits inside the card's
   top corner: hanging over the edge, the card cut it off. */
.studio .preset-pill{
  position:absolute; top:6px; right:6px; z-index:1; padding:3px 7px; border-radius:999px; background:var(--ink);
  color:#FFFCF7; font:600 9px/1 'DM Sans',system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase;
}

/* The line that arrives once the box is filled. It lives at the top of the picker,
   not over the photo: on the photo it landed on top of Add, the hint and the
   Inside/Closed switch, all of which float down there. */
.studio .customise-note{
  margin:0; padding:9px 20px 0; font:600 12px/1.2 'DM Sans',system-ui,sans-serif; color:var(--ink);
  opacity:0; transform:translateY(4px); transition:opacity .45s ease, transform .45s ease;
}
.studio .customise-note.is-in{ opacity:1; transform:none; }

@media (max-width:700px){
  .studio .preset-card{ padding:16px 14px 12px; }
  .studio .preset-h{ font-size:21px; margin-bottom:11px; }
  .studio .preset-grid{ gap:7px; }
  .studio .preset-choice{ padding:9px 8px; }
  .studio .preset-choice strong{ font-size:13px; }
  .studio .customise-note{ bottom:46px; font-size:11px; }
}
@media (prefers-reduced-motion: reduce){
  .studio .preset-overlay, .studio .customise-note{ transition:none; }
}

/* The chooser covers the whole studio, not just the box: it is a decision about
   the page, so the picker and the bar behind it should not look available yet. */
.studio > .preset-overlay{ position:absolute; inset:0; z-index:9; padding:24px; }
.studio > .preset-overlay .preset-card{ width:min(520px,100%); }
@media (max-width:700px){ .studio > .preset-overlay{ padding:14px; } }

/* The card must never outgrow the studio: on a narrow or short screen the four
   options wrap tall, and a clipped heading reads as a broken page. */
.studio > .preset-overlay{ overflow-y:auto; align-items:center; }
.studio .preset-card{ max-height:100%; overflow-y:auto; }
@media (max-width:460px), (max-height:620px){
  .studio .preset-grid{ grid-template-columns:1fr; gap:6px; }
  .studio .preset-choice{ padding:8px 10px; }
  .studio .preset-choice small{ margin-top:1px; }
  .studio .preset-h{ font-size:19px; margin:4px 0 9px; }
}

/* ─── The chooser cards show the box, not just its name ──────────────────────
   Four cards, two columns at every size, each leading with the actual products
   so the choice is made on the contents rather than the label. */
.studio .preset-grid{ grid-template-columns:1fr 1fr !important; gap:10px; }
.studio .preset-choice{
  padding:0; overflow:hidden; display:flex; flex-direction:column;
  border-radius:11px; background:#fff;
}
.studio .preset-thumbs{
  display:flex; align-items:center; justify-content:center; gap:2px;
  background:#F5EDE3; padding:8px 6px; min-height:62px;
}
.studio .preset-thumbs img{
  width:34%; max-width:56px; aspect-ratio:1; object-fit:cover; border-radius:7px;
  mix-blend-mode:multiply;
}
.studio .preset-choice strong{ padding:9px 11px 0; font-size:14px; }
.studio .preset-choice small{ padding:2px 11px 10px; }
.studio .preset-choice:hover .preset-thumbs{ background:#EDE0D1; }

@media (max-width:460px), (max-height:620px){
  .studio .preset-grid{ gap:7px; }
  .studio .preset-thumbs{ min-height:50px; padding:6px 4px; }
  .studio .preset-thumbs img{ max-width:42px; }
  .studio .preset-choice strong{ padding:7px 8px 0; font-size:13px; }
  .studio .preset-choice small{ padding:1px 8px 8px; font-size:10.5px; }
}

/* ─── The right side is the bar (Curtis, 12 Sep 2026) ────────────────────────
   The picture takes the full height down the left. Everything you operate sits
   in one column on the right: the picker scrolls inside it, and the total and
   the button stay pinned to the bottom of that column rather than running the
   whole width underneath.

   main is display:contents so the picture, the picker and the bar become direct
   children of the studio grid, without moving any markup. */
.studio{
  display:grid;
  grid-template-columns: minmax(0,1fr) 400px;
  grid-template-rows: minmax(0,1fr) auto;
  height: var(--studio-vh);
}
.studio > main{ display:contents; }
.studio .visual{ grid-column:1; grid-row:1 / span 2; min-height:0; }
.studio .picker{ grid-column:2; grid-row:1; min-height:0; overflow:hidden; }
.studio > footer{ grid-column:2; grid-row:2; box-shadow:none; border-left:1px solid var(--line); }

/* the panel is the only thing that scrolls, so a short window scrolls the list
   and not the page underneath it */
.studio .picker-panel{ min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.studio, body{ overflow:hidden; }

/* the bar is narrow now, so it stacks its two halves instead of spreading */
.studio > footer{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:12px 18px; justify-content:space-between; padding-right:18px; }
.studio > footer .checkout{ width:100%; justify-content:space-between; gap:12px; }
.studio > footer .summary.has-fees{ width:100%; margin:0; order:-1; }

@media (min-width:1500px){ .studio{ grid-template-columns: minmax(0,1fr) 460px; } }
@media (max-width:1050px){ .studio{ grid-template-columns: minmax(0,1fr) 350px; } }
@media (max-width:700px){
  .studio{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr) auto; }
  .studio .visual{ grid-column:1; grid-row:1; }
  .studio .picker{ grid-column:1; grid-row:2; }
  .studio > footer{ grid-column:1; grid-row:3; border-left:0; border-top:1px solid var(--line); }
}

/* Phone: the row under the picture was a title with a price card beside it and
   a third of the width left empty, sitting under a gap. Close the gap, let the
   price fill the row. */
@media (max-width:700px){
  .studio{ --pp-studio-gap:6px; }
  .studio .picker-top{ display:flex; align-items:center; gap:10px; padding:8px 12px; }
  .studio .picker h2{ flex:0 0 auto; max-width:none; font-size:16px; line-height:1.15; }
  .studio #tier-picker{ flex:1 1 auto; min-width:0; }
  .studio .starting-price{ width:100%; padding:7px 11px; gap:7px; }
  .studio .starting-price small{ display:none; }
  .studio .starting-price strong{ font-size:17px; margin-left:auto; }
}

/* That row was a two-column grid built to hold two tier cards. It holds one
   price now, so the second column was the blank half. */
.studio #tier-picker{ display:block !important; }

/* The price was on the page twice: once as a starting price above the tabs and
   again in the bar. The bar says it, and says when it has stopped being the
   starting price, so the row goes and the product list gets its height back. */
.studio #tier-picker{ display:none !important; }
.studio .picker-top{ padding:12px 20px 10px; }
@media (max-width:700px){ .studio .picker-top{ padding:8px 12px; } }

/* ─── Short windows: give the height to the list ─────────────────────────────
   On a laptop at half height the column is about 480px and the product list was
   getting 251 of it, the rest going to a heading, the tabs and the bar. The
   heading repeats what the page already says on the left, and the bar can carry
   its own weight in less room. */
@media (max-height:780px) and (min-width:701px){
  .studio .picker h2{ display:none; }
  .studio .picker-top{ padding:0; }
  .studio > footer{ padding:8px 16px; gap:4px 10px; }
  .studio > footer .checkout{ gap:10px; }
  .studio .checkout strong{ font-size:22px; }
  .studio .checkout small{ font-size:8px; }
  .studio .primary{ padding:11px 16px; }
  .studio .steps button{ padding:9px 4px; }
}

/* ─── Three steps, in order (Curtis, 12 Sep 2026) ────────────────────────────
   Products, then wrapping and the message, then the cards. Every step can be
   pressed at any time; a finished one shows a tick. */
.studio .steps button{ display:flex; align-items:center; justify-content:center; gap:6px; }
.studio .steps button i{
  font-style:normal; font-size:10px; font-weight:700; line-height:1;
  width:18px; height:18px; border-radius:50%; display:grid; place-items:center;
  background:#EDE0D1; color:var(--muted); flex:0 0 auto;
}
.studio .steps button.active i{ background:var(--ink); color:#FFF9F2; }
.studio .steps button.done i{ background:#6E7D45; color:#fff; }
.studio .steps button.done i::after{ content:'✓'; font-size:10px; }
.studio .steps button.done i{ font-size:0; }
.studio .steps button:disabled{ opacity:.4; cursor:not-allowed; }
.studio .steps button:disabled:hover{ background:none; }
@media (max-width:700px){
  .studio .steps button{ gap:4px; }
  .studio .steps button i{ width:16px; height:16px; font-size:9px; }
}

/* Wrap and message runs to two lines in a narrow column; use the short form there. */
.studio .steps .s-short{ display:none; }
@media (max-width:1050px){
  .studio .steps .s-long{ display:none; }
  .studio .steps .s-short{ display:inline; }
}

/* What the box holds, and what it does not: anything else in the order is packed
   on its own and is not wrapped. Worth saying where the products are chosen. */
.studio .box-scope{
  margin:0; padding:9px 20px; font-size:11.5px; line-height:1.45; color:var(--muted);
  background:#FBF7EF; border-bottom:1px solid var(--line);
}
.studio .box-scope b{ color:var(--ink); font-weight:600; }
@media (max-width:700px){ .studio .box-scope{ padding:7px 12px; font-size:11px; } }

/* Both of these used to sit in the photo frame and collided with the floating
   controls. They belong in the column where the choosing happens. */
.studio .customise-note{ position:static; left:auto; bottom:auto; background:none; border:0; border-radius:0; pointer-events:auto; }
.studio .box-scope{ border-top:1px solid var(--line); }
@media (max-width:700px){ .studio .customise-note{ padding:7px 12px 0; font-size:11px; } }

/* ─── Phone: let the page be as long as the list (Curtis, 12 Sep 2026) ───────
   Holding the whole studio inside one screen works on a desktop, where the
   picker gets its own tall column. On a phone it left the product list about
   245px to scroll in, inside a page that could not scroll itself. So on a phone
   the studio stops being a fixed-height app: the picture keeps its size, the
   list runs to its natural length down the page, and the total and the button
   stay reachable by sticking to the bottom of the screen. */
@media (max-width:700px){
  html, body{ overflow:auto; }
  .studio{ height:auto; grid-template-rows:auto auto auto; }
  .studio .visual{ height:auto; }
  .studio .picker{ overflow:visible; min-height:0; }
  .studio .picker-panel{ overflow:visible; max-height:none; min-height:0; }
  .studio > footer{
    position:sticky; bottom:0; z-index:7;
    box-shadow:0 -6px 22px rgba(44,24,16,.10);
  }
  /* the chooser covers the screen rather than the now-taller page */
  .studio > .preset-overlay{ position:fixed; }
}

/* ─── Clear next steps (Curtis, 13 Sep 2026) ─────────────────────────────────
   The picker opens on what is in the box, each product with its own Swap and the
   way on to wrapping right under them. Swapping is something you choose, with a
   way back out, and the step tabs look like the buttons they are. */
.studio .steps button{ cursor:pointer; transition:background .15s; }
.studio .steps button:hover{ background:#F5EDE3; }
.studio .steps button.next > span::after{ content:'\2192'; margin-left:5px; }

.studio .swap-done{ margin:0 0 12px; padding:9px 12px; border-radius:8px; background:#EEF2E6; color:#3F4A26; font-size:12.5px; line-height:1.4; }
.studio .swap-done b{ font-weight:600; }
.studio .box-list{ list-style:none; margin:4px 0 10px; padding:0; display:grid; gap:6px; }
.studio .box-list li{ display:flex; align-items:center; gap:10px; padding:6px 8px 6px 6px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.studio .box-list img{ width:44px; height:44px; object-fit:cover; border-radius:7px; background:#F5EDE3; mix-blend-mode:multiply; flex:0 0 auto; }
.studio .box-list span{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.studio .box-list b{ font-size:13px; font-weight:600; color:var(--ink); }
.studio .box-list small{ font-size:11px; color:var(--muted); }
.studio .swap-button{ flex:0 0 auto; padding:7px 13px; border:1px solid var(--ink); border-radius:100px; background:#fff; color:var(--ink); font:600 12px/1 'DM Sans',system-ui,sans-serif; cursor:pointer; }
.studio .swap-button:hover{ background:var(--ink); color:#FFF9F2; }
.studio .add-more{ display:inline-block; margin:0 0 14px; }
.studio .next-bar{ margin:0 0 12px; }
.studio .next-bar .primary{ width:100%; }
.studio .panel-actions{ display:flex; gap:14px; align-items:flex-start; flex:0 0 auto; }

/* The swap hint sits under the headline, where it is read before anything is
   touched, instead of down on the photo beside the switch. */
.studio .visual-heading .scene-hint{
  display:inline-block; margin:2px auto 8px; padding:5px 12px;
  border:1px solid #EDE0D1; background:#FFFCF7; color:var(--ink);
  font:600 12px/1.2 'DM Sans',system-ui,sans-serif;
}
@media (max-width:700px){ .studio .visual-heading .scene-hint{ font-size:11px; padding:4px 10px; margin:0 auto 6px; } }

/* Each pack shows what it costs. */
.studio .preset-price{ margin-top:auto; padding:0 11px 11px; font:600 14px/1 'DM Sans',system-ui,sans-serif; color:var(--ink); font-variant-numeric:tabular-nums; }
@media (max-width:460px), (max-height:620px){ .studio .preset-price{ padding:0 8px 9px; font-size:13px; } }

/* ─── A longer page, never a cropped chooser (Curtis, 13 Sep 2026) ───────────
   Six packs run taller than a laptop window. While the chooser is open the studio
   grows to fit the card and the page scrolls, instead of the card scrolling inside
   a window cut to the studio's height. Choosing a pack puts the studio back. On a
   phone the chooser is fixed to the screen and scrolls there. */
@media (min-width:701px){
  .studio.is-choosing{ min-height:var(--chooser-h,auto); }
  .studio.is-choosing > .preset-overlay{ overflow:visible; }
  .studio.is-choosing .preset-card{ max-height:none; overflow:visible; }
  html.gs-choosing, html.gs-choosing body{ overflow:auto; }
}

/* On a phone the headline over the photo is hidden, so the swap hint sits under the
   picker's own title instead (Curtis, 13 Sep 2026). */
.studio .picker-hint{ display:none; }
@media (max-width:700px){
  .studio .picker-top{ flex-direction:column; align-items:flex-start; gap:5px; }
  .studio .picker-hint{
    display:inline-block; margin:0; padding:4px 10px; border:1px solid #EDE0D1; border-radius:100px;
    background:#FFFCF7; color:var(--ink); font:600 11px/1.2 'DM Sans',system-ui,sans-serif;
  }
}

/* Dark steps (Curtis, 13 Sep 2026): a step switched off in FEATURES leaves the tab row,
   and with only one step left the row itself goes. */
.studio .steps[hidden], .studio .steps button[hidden]{ display:none !important; }

/* Clearer box list (Curtis, 13 Sep 2026): "swap swap swap" read as a wall of buttons and the add
   link was easy to miss on a phone. One obvious add button now sits above the list, and each row is
   itself the way to change that product, with a quiet "Change" on the right. */
.studio .add-more-button{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:4px 0 10px;
  padding:12px 14px; border:1.5px dashed #C9A96E; border-radius:10px; background:#FFFCF7; color:var(--ink);
  font:600 14px/1.2 'DM Sans',system-ui,sans-serif; cursor:pointer;
}
.studio .add-more-button span{ font-size:19px; line-height:1; font-weight:500; }
.studio .add-more-button:hover{ background:#F5EDE3; border-style:solid; }
.studio .box-list li{ display:block; padding:0; }
.studio .box-list li:hover{ border-color:var(--ink); }
.studio .box-item{
  display:flex; align-items:center; gap:10px; width:100%; padding:6px 10px 6px 6px;
  border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer;
}
/* the Change label is a span inside .box-list, whose spans stack in a column; the extra class keeps it on one line */
.studio .box-list .box-item-change{ flex:0 0 auto; display:inline-flex; flex-direction:row; align-items:center; gap:3px; white-space:nowrap; font-size:12px; font-weight:600; color:var(--muted); }
.studio .box-item-change i{ font-style:normal; font-size:17px; line-height:1; }
@media (max-width:700px){
  .studio .add-more-button{ padding:14px; font-size:15px; }
}