/* ══ MTB FLOW — PRINT WIZARD (Stage 1b, build step 1) ══════════════════════════════════════════════
   Elements: four-step accordion · panel · swatch group · price bar (mtb-frame/includes/print-wizard.php); buttons are
   the Flow Button (blocks/button/style.css). Scoped to .mf-pw so it outranks the legacy .omtb-pb sheet
   in cinematic-gallery.css (0,1,0) without !important.
   Values from docs/ops/DESIGN.md: Ink #0A0A0A (R=G=B), Bone #EDE7D8 (1 / .70 / .44), Ember fill #FF5B04,
   Ember text #FF7D11; radius --r-ctl 999 / --r-panel 14 / --r-tip 8, photographs 0 (D1); dark glass for
   surfaces that sit on content (D2); Hanken Grotesk display + tracked-caps labels, Instrument Sans body,
   no mono (D7); one ease, 180 / 320 / 600, exits a step faster (D4). */
.mf-pw {
  --pw-ink: #0A0A0A; --pw-bone: #EDE7D8; --pw-bone-2: rgba(237, 231, 216, .70); --pw-bone-3: rgba(237, 231, 216, .44);
  --pw-line: rgba(237, 231, 216, .13); --pw-line-2: rgba(237, 231, 216, .26);
  --pw-ember: #FF5B04; --pw-ember-t: #FF7D11;
  --pw-r-ctl: var(--r-ctl, 999px); --pw-r-panel: var(--r-panel, 14px); --pw-r-tip: var(--r-tip, 8px);
  --pw-ease: var(--ease, cubic-bezier(.16, 1, .3, 1));
  --pw-s: var(--dur-s, 180ms); --pw-m: var(--dur-m, 320ms); --pw-s-out: var(--dur-s-out, 120ms);
  --pw-disp: "Hanken Grotesk", system-ui, sans-serif; --pw-body: "Instrument Sans", "Hanken Grotesk", system-ui, sans-serif;
  --pb-bg: rgba(26, 26, 26, .46); --pb-line: var(--pw-line); --pb-muted: var(--pw-bone-3); --pb-text: var(--pw-bone);
  --pb-accent: var(--pw-ember); --pb-accent-text: var(--pw-ember-t);
  color: var(--pw-bone); font-family: var(--pw-body); box-sizing: border-box;
  /* P5 fluid unit — mirror of DESIGN.md § Type "Fluid unit"; honeywreck has no site-chrome, so the clamp rides here */
  --pw-u: var(--mb-u, clamp(10px, 6.143px + 0.2679vw, 13px));
}
/* Break out of the shop wrapper (.omtb-woowrap caps content at 1100 px) to the full viewport (P3 6a: the
   1440 cap left the print at ~20% of a 1728 screen). Margins, not a transform: a transform would capture the
   phone bar's position:fixed. One gutter below the masthead. */
.omtb-pb.mf-pw, .omtb-book.mf-pw {
  width: 100vw; max-width: none;
  margin: 16px calc(50% - 50vw) 0; padding: 0 clamp(16px, 2vw, 32px) 24px;
}
.mf-pw *, .mf-pw *::before, .mf-pw *::after { box-sizing: border-box; }

/* ── LAYOUT: desktop preview ~60% left, panel right; both pinned under the masthead ───────────────── */
.mf-pw .mf-pw__grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--pw-side); gap: clamp(16px, 1.6vw, 28px); align-items: start; }
/* the side column: 440 holds two 200 px type tiles at 1024 (7c); 26vw from 1692 up (28vw left the print
   under 55% of a 1728 screen once a paper border was drawn); 520 at most */
.mf-pw { --pw-side: clamp(440px, 26vw, calc(var(--pw-u) * 52)); } /* P5: 520 cap at ≤1440, 665 at 2560 */
.mf-pw .mf-pw__stage {
  position: sticky; top: calc(var(--pw-top, 0px) + 16px); height: calc(100vh - var(--pw-top, 0px) - 32px - var(--pw-lead, 0px)); min-height: 460px;
  padding: calc(var(--pw-u) * 4) calc(var(--pw-u) * 3.2) calc(var(--pw-u) * 2.8); border-radius: var(--pw-r-panel); border: 1px solid var(--pw-line); overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7);
  /* the gallery wall: a calm graded field, light from above, a whisper of ember/teal at the corners */
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(237, 231, 216, .11), rgba(237, 231, 216, 0) 58%),
    radial-gradient(50% 60% at 98% 2%, rgba(255, 91, 4, .07), rgba(255, 91, 4, 0) 60%),
    radial-gradient(44% 56% at 0% 100%, rgba(52, 151, 143, .07), rgba(52, 151, 143, 0) 62%),
    linear-gradient(180deg, #242424 0%, #181818 66%, #0e0e0e 100%);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.mf-pw .omtb-pb__stage-foot { position: absolute; left: 0; right: 0; bottom: calc(var(--pw-u) * 1.8); display: flex; gap: calc(var(--pw-u) * 1.4); align-items: center; justify-content: center; margin: 0; }
.mf-pw .omtb-pb__dim { margin: 0; font: 600 calc(var(--pw-u) * 1.1)/1 var(--pw-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--pw-bone-3); }
/* ── Q3 row 12: the live crop frame (Adjust). Drawn inside the print element, over the whole photograph:
   a Bone hairline box, the photo outside it dimmed to ~45 %, eight handles with 44 px hit targets (corner
   brackets, edge ticks), thirds while a drag is on. Only the box takes touch (touch-action:none), so a phone
   drag anywhere else still scrolls the page. Hidden in Preview. */
.mf-pw .mf-pw-crop { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity var(--pw-s-out) var(--pw-ease), visibility 0s linear var(--pw-s-out); }
.mf-pw .mf-pw__stage.is-placed[data-pw-view="adjust"] .mf-pw-crop { opacity: 1; visibility: visible; transition: opacity var(--pw-m) var(--pw-ease) var(--pw-s), visibility 0s; }
.mf-pw .mf-pw-crop__shade { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mf-pw .mf-pw-crop__hole { position: absolute; box-shadow: 0 0 0 200vmax rgba(10, 10, 10, .55); }
.mf-pw .mf-pw-crop__box { position: absolute; pointer-events: auto; touch-action: none; cursor: move; outline: none;
  box-shadow: inset 0 0 0 1px rgba(237, 231, 216, .92), 0 0 0 1px rgba(10, 10, 10, .32); }
.mf-pw .mf-pw-crop__box:focus-visible { box-shadow: inset 0 0 0 1px rgba(237, 231, 216, .92), 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); }
.mf-pw .mf-pw__stage.is-live:not(.is-cropping) :is(.mf-pw-crop__box, .mf-pw-crop__hole) {
  transition: left var(--pw-m) var(--pw-ease), top var(--pw-m) var(--pw-ease), width var(--pw-m) var(--pw-ease), height var(--pw-m) var(--pw-ease); }
.mf-pw .mf-pw-crop__third { position: absolute; pointer-events: none; opacity: 0; transition: opacity var(--pw-s-out) var(--pw-ease); }
.mf-pw .mf-pw-crop__third--v { top: 0; bottom: 0; left: 33.333%; right: 33.333%; border-left: 1px solid rgba(237, 231, 216, .32); border-right: 1px solid rgba(237, 231, 216, .32); }
.mf-pw .mf-pw-crop__third--h { left: 0; right: 0; top: 33.333%; bottom: 33.333%; border-top: 1px solid rgba(237, 231, 216, .32); border-bottom: 1px solid rgba(237, 231, 216, .32); }
.mf-pw .mf-pw__stage.is-cropping .mf-pw-crop__third { opacity: 1; transition-duration: var(--pw-s); }
.mf-pw .mf-pw-crop__h { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; touch-action: none; }
.mf-pw .mf-pw-crop__h::after { content: ""; position: absolute; box-sizing: border-box; border: 0 solid var(--pw-bone); }
.mf-pw .mf-pw-crop__h--nw { left: 0; top: 0; cursor: nwse-resize; }
.mf-pw .mf-pw-crop__h--n  { left: 50%; top: 0; cursor: ns-resize; }
.mf-pw .mf-pw-crop__h--ne { left: 100%; top: 0; cursor: nesw-resize; }
.mf-pw .mf-pw-crop__h--e  { left: 100%; top: 50%; cursor: ew-resize; }
.mf-pw .mf-pw-crop__h--se { left: 100%; top: 100%; cursor: nwse-resize; }
.mf-pw .mf-pw-crop__h--s  { left: 50%; top: 100%; cursor: ns-resize; }
.mf-pw .mf-pw-crop__h--sw { left: 0; top: 100%; cursor: nesw-resize; }
.mf-pw .mf-pw-crop__h--w  { left: 0; top: 50%; cursor: ew-resize; }
/* corner brackets: 18 px arms, 3 px thick, their outer edge on the box line */
.mf-pw .mf-pw-crop__h--nw::after { left: 20px; top: 20px; width: 18px; height: 18px; border-width: 3px 0 0 3px; }
.mf-pw .mf-pw-crop__h--ne::after { left: 6px; top: 20px; width: 18px; height: 18px; border-width: 3px 3px 0 0; }
.mf-pw .mf-pw-crop__h--se::after { left: 6px; top: 6px; width: 18px; height: 18px; border-width: 0 3px 3px 0; }
.mf-pw .mf-pw-crop__h--sw::after { left: 20px; top: 6px; width: 18px; height: 18px; border-width: 0 0 3px 3px; }
/* edge ticks, centred on the line */
.mf-pw :is(.mf-pw-crop__h--n, .mf-pw-crop__h--s)::after { left: 11px; top: 20.5px; width: 22px; height: 3px; background: var(--pw-bone); }
.mf-pw :is(.mf-pw-crop__h--e, .mf-pw-crop__h--w)::after { left: 20.5px; top: 11px; width: 3px; height: 22px; background: var(--pw-bone); }
.mf-pw .omtb-pb__media.is-card { border-radius: 0; }

.mf-pw .mf-pw__side {
  /* P3: the steps flow with the page (no inner scroller that clips half a row) while the stage stays pinned;
     the price bar is fixed to the column's foot (below), so the column keeps room for it */
  position: relative; display: block; min-height: 0; padding-bottom: calc(var(--pw-bar-h, 76px) + 32px);
}
.mf-pw .mf-pw__head { padding: calc(var(--pw-u) * 1.6) 0 calc(var(--pw-u) * 1.4); }
.mf-pw .mf-pw__crumb { display: inline-flex; align-items: center; min-height: 32px; margin: 0 0 6px; padding: 0; color: var(--pw-bone-3);
  font: 600 calc(var(--pw-u) * 1.1)/1 var(--pw-disp); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.mf-pw .mf-pw__crumb::before { content: ""; width: .9em; height: .6em; margin-right: .6em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M22 7H1.8M7.8 1.1L1.8 7L7.8 12.9' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M22 7H1.8M7.8 1.1L1.8 7L7.8 12.9' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3C/svg%3E") center / contain no-repeat; }
.mf-pw .mf-pw__crumb:hover { color: var(--pw-bone); }
.mf-pw .mf-pw__kicker { display: block; margin: 0 0 6px; font: 600 calc(var(--pw-u) * 1.1)/1 var(--pw-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--pw-ember-t); }
.mf-pw .mf-pw__title { margin: 0; padding: 0; text-indent: 0; font: 800 min(max(24px, 1.7vw), calc(var(--pw-u) * 3))/1.08 var(--pw-disp); letter-spacing: -.025em; color: var(--pw-bone); }
.mf-pw .mf-pw__loc { margin: 6px 0 0; font-size: calc(var(--pw-u) * 1.4); color: var(--pw-bone-2); }

/* ── THE FOUR STEPS — an accordion (P3 7b) ───────────────────────────────────────────────────────────
   Three surfaces a person can tell apart (6c): the STEP (a raised neutral plate on the ink), the CHOICES
   inside it (a step lighter; the chosen one lighter again + the ember hairline), and the PRICE bar (the
   lightest glass, at the foot). All neutral greys (R=G=B), radii 14 / 999 / 8 / 0 (D1), no coloured blur. */
.mf-pw {
  --pw-s1: #161616;                       /* step plate: +12 over Ink */
  --pw-s2: rgba(237, 231, 216, .045);     /* a choice at rest, over the plate */
  --pw-s3: rgba(237, 231, 216, .13);      /* the chosen one */
}
.mf-pw .mf-pw__steps { position: relative; padding: calc(var(--pw-u) * 1.2) 0 0; display: flex; flex-direction: column; gap: calc(var(--pw-u) * 0.8); }
.mf-pw-panel[hidden] { display: none; }
.mf-pw-panel { flex: 0 0 auto; border-radius: var(--pw-r-panel); background: var(--pw-s1); box-shadow: inset 0 0 0 1px var(--pw-line);
  transition: box-shadow var(--pw-s-out) var(--pw-ease); }
.mf-pw-panel[data-pw-state="open"] { box-shadow: inset 0 0 0 1px var(--pw-line-2), inset 0 1px 0 rgba(237, 231, 216, .08); }
.mf-pw-panel[data-pw-state="locked"] { background: transparent; box-shadow: inset 0 0 0 1px var(--pw-line); }
.mf-pw-panel__head { margin: 0; padding: calc(var(--pw-u) * 0.8); font: inherit; }
.mf-pw-panel__btn { display: flex; align-items: center; gap: calc(var(--pw-u) * 1.2); width: 100%; min-height: max(44px, calc(var(--pw-u) * 4.4)); margin: 0; padding: 0 calc(var(--pw-u) * 0.8); border: 0; border-radius: var(--pw-r-tip);
  background: none; color: var(--pw-bone); text-align: left; cursor: pointer; font: inherit; font-size: calc(var(--pw-u) * 1.6); }
.mf-pw-panel__btn:disabled { cursor: default; }
.mf-pw-panel__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); }
.mf-pw-panel__n { flex: 0 0 auto; display: inline-grid; place-items: center; width: calc(var(--pw-u) * 2.6); height: calc(var(--pw-u) * 2.6); border-radius: var(--pw-r-ctl);
  font: 700 calc(var(--pw-u) * 1.2)/1 var(--pw-disp); color: var(--pw-bone-2); box-shadow: inset 0 0 0 1px var(--pw-line-2); }
.mf-pw-panel__title { flex: 1 1 auto; min-width: 0; font: 800 calc(var(--pw-u) * 1.9)/1.15 var(--pw-disp); letter-spacing: -.02em; color: var(--pw-bone); }
.mf-pw-panel__chip, .mf-pw-panel__edit { display: none; }
.mf-pw-panel[data-pw-state="open"] .mf-pw-panel__n { color: var(--pw-ink); background: var(--pw-bone); box-shadow: none; }
.mf-pw-panel[data-pw-state="locked"] .mf-pw-panel__title, .mf-pw-panel[data-pw-state="locked"] .mf-pw-panel__n { color: rgba(237, 231, 216, .34); }
.mf-pw-panel[data-pw-state="locked"] .mf-pw-panel__title { font-size: calc(var(--pw-u) * 1.6); font-weight: 700; }
/* a finished step is ONE line: a check, "Size", the choice, and Change */
.mf-pw-panel[data-pw-state="done"] .mf-pw-panel__title { display: none; }
.mf-pw-panel[data-pw-state="done"] .mf-pw-panel__btn { min-height: 40px; }
.mf-pw-panel[data-pw-state="done"] .mf-pw-panel__n { font-size: 0; color: var(--pw-bone); }
.mf-pw-panel[data-pw-state="done"] .mf-pw-panel__n::before { content: ""; width: 10px; height: 5px; margin-top: -3px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }
.mf-pw-panel[data-pw-state="done"] .mf-pw-panel__chip { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; overflow: hidden; }
.mf-pw-panel__chip-k { flex: 0 0 auto; font: 600 calc(var(--pw-u) * 1.05)/1 var(--pw-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--pw-bone-3); }
.mf-pw-panel__chip-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 600 calc(var(--pw-u) * 1.5)/1.2 var(--pw-body); color: var(--pw-bone); }
.mf-pw-panel[data-pw-state="done"] .mf-pw-panel__edit { display: inline; flex: 0 0 auto; font: 600 calc(var(--pw-u) * 1.05)/1 var(--pw-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--pw-bone-3); }
@media (hover: hover) { .mf-pw-panel[data-pw-state="done"] .mf-pw-panel__btn:hover .mf-pw-panel__edit, .mf-pw-panel[data-pw-state="ready"] .mf-pw-panel__btn:hover .mf-pw-panel__title { color: var(--pw-ember-t); } }
.mf-pw-panel__body { padding: 0 calc(var(--pw-u) * 1.6) calc(var(--pw-u) * 1.8); animation: mf-pw-in var(--pw-m) var(--pw-ease) both; }
.mf-pw-panel__body[hidden] { display: none; }
@keyframes mf-pw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mf-pw-panel__lede { margin: 0 0 calc(var(--pw-u) * 1.2); font-size: calc(var(--pw-u) * 1.4); line-height: 1.5; color: var(--pw-bone-2); }
.mf-pw .omtb-pb__hint, .mf-pw .omtb-pb__sizes-note { font-size: calc(var(--pw-u) * 1.3); line-height: 1.5; color: var(--pw-bone-3); margin: 12px 0 0; }

/* Step 1 — type tiles (P3 7c): the photo painted as that medium on top at full tile width, then the name
   and "from $X". Two per row everywhere; no "why" line. */
.mf-pw .omtb-pb__products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--pw-u) * 0.8); }
.mf-pw .omtb-pb__tile {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; min-width: 0; overflow: hidden;
  border: 0; border-radius: var(--pw-r-panel); text-align: left; text-decoration: none; cursor: pointer; color: var(--pw-bone);
  background: var(--pw-s2); box-shadow: inset 0 0 0 1px var(--pw-line);
  transition: box-shadow var(--pw-s-out) var(--pw-ease), background var(--pw-s-out) var(--pw-ease); transform: none;
}
@media (hover: hover) { .mf-pw .omtb-pb__tile:not(.is-off):hover { transform: none; background: rgba(237, 231, 216, .08); box-shadow: inset 0 0 0 1px rgba(237, 231, 216, .34); } }
.mf-pw .omtb-pb__tile.is-active { background: var(--pw-s3); box-shadow: inset 0 0 0 1px rgba(255, 125, 17, .82), inset 0 1px 0 rgba(255, 217, 176, .16); }
.mf-pw .omtb-pb__tile:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--pw-line-2), 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); }
.mf-pw .omtb-pb__tile.is-off { opacity: .42; cursor: not-allowed; }
.mf-pw .omtb-pb__tile-ph { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; }
.mf-pw .omtb-pb__tile-ph--look { position: relative; background: linear-gradient(180deg, #2E2E2E, #242424); }
.mf-pw .omtb-pb__tile-ph--look .mf-pw-look { position: absolute; inset: 0; }
.mf-pw .omtb-pb__tile-ph--book { position: relative; border: 0; box-shadow: none; background: linear-gradient(180deg, #2E2E2E, #242424) !important; }
/* the book: a closed volume on the same backing as the painted prints — cover photo, a dark spine, a page edge */
.mf-pw .omtb-pb__tile--book .omtb-pb__tile-ph i { position: absolute; inset: 14% 30%; background: var(--pw-book) center / cover;
  box-shadow: inset 5px 0 0 rgba(0, 0, 0, .55), 3px 3px 0 #D9D4C7, 4px 6px 14px rgba(0, 0, 0, .5); }
.mf-pw .omtb-pb__tile-ph i { border-radius: 0; }
.mf-pw .omtb-pb__tile-ph--acrylic, .mf-pw .omtb-pb__tile-ph--canvas, .mf-pw .omtb-pb__tile-ph--metal, .mf-pw .omtb-pb__tile-ph--book { border-radius: 0; }
.mf-pw .omtb-pb__tile-txt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: calc(var(--pw-u) * 0.8); row-gap: calc(var(--pw-u) * 0.4); min-width: 0; padding: calc(var(--pw-u) * 1) calc(var(--pw-u) * 1.2) calc(var(--pw-u) * 1.2); }
.mf-pw .omtb-pb__tile-label { flex: 1 1 auto; font: 700 calc(var(--pw-u) * 1.4)/1.2 var(--pw-disp); letter-spacing: -.005em; text-align: left; color: var(--pw-bone); }
.mf-pw .omtb-pb__tile-from { flex: 0 0 auto; font: 600 calc(var(--pw-u) * 1.2)/1 var(--pw-body); text-align: left; color: var(--pw-bone-2); font-variant-numeric: tabular-nums; }
.mf-pw .omtb-pb__tile.is-active .omtb-pb__tile-from { color: var(--pw-ember-t); }
.mf-pw .omtb-pb__tile.is-off .omtb-pb__tile-from { flex-basis: 100%; }

/* Step 2 — size chips */
.mf-pw .omtb-pb__sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--pw-u) * 12.4), 1fr)); gap: calc(var(--pw-u) * 0.8); }
.mf-pw .omtb-pb__chip {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: calc(var(--pw-u) * 0.6); min-height: calc(var(--pw-u) * 6.4); padding: calc(var(--pw-u) * 1.2) calc(var(--pw-u) * 1.6);
  border: 0; border-radius: var(--pw-r-panel); cursor: pointer; color: var(--pw-bone);
  background: var(--pw-s2); box-shadow: inset 0 0 0 1px var(--pw-line);
  transition: box-shadow var(--pw-s-out) var(--pw-ease), background var(--pw-s-out) var(--pw-ease);
}
.mf-pw .omtb-pb__chip span { font: 700 calc(var(--pw-u) * 1.5)/1 var(--pw-disp); letter-spacing: -.01em; }
.mf-pw .omtb-pb__chip small { font: 600 calc(var(--pw-u) * 1.2)/1 var(--pw-body); color: var(--pw-bone-2); }
@media (hover: hover) { .mf-pw .omtb-pb__chip:hover { box-shadow: inset 0 0 0 1px rgba(237, 231, 216, .34); } }
.mf-pw .omtb-pb__chip.is-active { background: var(--pw-s3); box-shadow: inset 0 0 0 1px rgba(255, 125, 17, .82), inset 0 1px 0 rgba(255, 217, 176, .16); }
.mf-pw .omtb-pb__chip.is-active small { color: var(--pw-ember-t); }
/* Server-rendered chips for every product; only the chosen product's are shown (photo-builder.js renderSizes). */
.mf-pw .omtb-pb__chip[hidden], .mf-pw [data-pw-sizes-empty][hidden], .mf-pw .omtb-pb__tile[hidden] { display: none; }
.mf-pw .omtb-pb__chip:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--pw-line-2), 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); }

/* ── SWATCH GROUP (steps 3 + 4) — native radios, styled ─────────────────────────────────────────── */
.mf-pw-swatches { margin: 0 0 calc(var(--pw-u) * 2.2); padding: 0; border: 0; min-width: 0; }
.mf-pw-swatches[hidden] { display: none; }
.mf-pw-swatches__legend { padding: 0; margin: 0 0 10px; font: 600 calc(var(--pw-u) * 1.1)/1 var(--pw-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--pw-bone-3); }
.mf-pw-swatches__list { display: flex; flex-wrap: wrap; gap: calc(var(--pw-u) * 0.8); }
.mf-pw-swatch {
  position: relative; display: inline-flex; align-items: center; gap: calc(var(--pw-u) * 1); min-height: max(44px, calc(var(--pw-u) * 4.4)); padding: 0 calc(var(--pw-u) * 1.6) 0 calc(var(--pw-u) * 0.6);
  border-radius: var(--pw-r-ctl); cursor: pointer; color: var(--pw-bone);
  background: var(--pw-s2); box-shadow: inset 0 0 0 1px var(--pw-line);
  transition: box-shadow var(--pw-s-out) var(--pw-ease), background var(--pw-s-out) var(--pw-ease);
}
.mf-pw-swatch.is-chip { padding-left: calc(var(--pw-u) * 1.6); }
.mf-pw-swatch__in { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.mf-pw-swatch__sw {
  flex: 0 0 auto; width: max(32px, calc(var(--pw-u) * 3.2)); height: max(32px, calc(var(--pw-u) * 3.2)); border-radius: var(--pw-r-ctl);
  background: var(--sw-img, none) center / cover no-repeat, var(--sw, #2a2a2a);
  box-shadow: inset 0 0 0 1px rgba(237, 231, 216, .22);
}
.mf-pw-swatch__in[data-mirror] + .mf-pw-swatch__sw { transform: scaleX(-1); }
/* a frame swatch reads as moulding around a picture, not a dot */
/* frames, mats and photo swatches depict physical things / photographs: square (law D1) */
[data-pw-group="frame"] .mf-pw-swatch__sw { background: rgba(237, 231, 216, .16); box-shadow: inset 0 0 0 6px var(--sw, #2a2a2a), inset 0 0 0 7px rgba(237, 231, 216, .22); border-radius: 0; }
[data-pw-group="matting"] .mf-pw-swatch__sw { border-radius: 0; }
.mf-pw-swatch__sw[style*="--sw-img"] { border-radius: 0; }
.mf-pw-swatch__t { font: 600 calc(var(--pw-u) * 1.4)/1.1 var(--pw-body); white-space: nowrap; }
.mf-pw-swatch__p { font: 600 calc(var(--pw-u) * 1.2)/1 var(--pw-body); color: var(--pw-bone-3); }
@media (hover: hover) { .mf-pw-swatch:hover { box-shadow: inset 0 0 0 1px rgba(237, 231, 216, .34); } }
.mf-pw-swatch:has(.mf-pw-swatch__in:checked) { background: var(--pw-s3); box-shadow: inset 0 0 0 1px rgba(255, 125, 17, .82), inset 0 1px 0 rgba(255, 217, 176, .16); }
.mf-pw-swatch:has(.mf-pw-swatch__in:checked) .mf-pw-swatch__p { color: var(--pw-ember-t); }
.mf-pw-swatch:has(.mf-pw-swatch__in:focus-visible) { box-shadow: inset 0 0 0 1px var(--pw-line-2), 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); }
.mf-pw .omtb-pb__msg { width: 100%; max-width: 420px; padding: 12px 14px; border: 0; border-radius: var(--pw-r-panel); resize: vertical;
  background: rgba(26, 26, 26, .46); box-shadow: inset 0 0 0 1px var(--pw-line-2); color: var(--pw-bone); font: calc(var(--pw-u) * 1.5)/1.5 var(--pw-body); }
.mf-pw .omtb-pb__msg:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--pw-bone-2), 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); }

/* ── REVIEW ───────────────────────────────────────────────────────────────────────────────────────── */
.mf-pw-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 0 0 18px; }
.mf-pw-sum > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--pw-line); }
.mf-pw-sum dt { font: 600 calc(var(--pw-u) * 1.05)/1 var(--pw-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--pw-bone-3); }
.mf-pw-sum dd { margin: 0; font: 600 calc(var(--pw-u) * 1.5)/1.3 var(--pw-body); color: var(--pw-bone); }
.mf-pw-break { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: calc(var(--pw-u) * 1.4); }
.mf-pw-break__cap { caption-side: top; text-align: left; padding: 0 0 8px; font: 600 calc(var(--pw-u) * 1.1)/1 var(--pw-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--pw-bone-3); }
.mf-pw-break th { text-align: left; font-weight: 500; color: var(--pw-bone-2); padding: 7px 0; }
.mf-pw-break td { text-align: right; color: var(--pw-bone); padding: 7px 0; font-variant-numeric: tabular-nums; }
.mf-pw-break .is-sub th, .mf-pw-break .is-sub td { color: var(--pw-bone-3); }
.mf-pw-break .is-total th, .mf-pw-break .is-total td { border-top: 1px solid var(--pw-line-2); padding-top: 10px; font: 700 calc(var(--pw-u) * 1.6)/1.2 var(--pw-disp); color: var(--pw-bone); }
.mf-pw .mf-pw-qty { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.mf-pw .mf-pw-qty label { font: 600 calc(var(--pw-u) * 1.1)/1 var(--pw-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--pw-bone-3); }
.mf-pw-qty__row { display: inline-flex; align-items: center; border-radius: var(--pw-r-ctl); background: rgba(26, 26, 26, .46); box-shadow: inset 0 0 0 1px var(--pw-line-2); }
.mf-pw-qty__b { width: max(44px, calc(var(--pw-u) * 4.4)); height: max(44px, calc(var(--pw-u) * 4.4)); border: 0; background: none; color: var(--pw-bone); font: 500 calc(var(--pw-u) * 2)/1 var(--pw-body); cursor: pointer; border-radius: var(--pw-r-ctl); }
.mf-pw-qty__b:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); }
.omtb-pb.mf-pw .mf-pw-qty input { box-shadow: none; outline: 0; border-radius: 0; margin: 0; width: calc(var(--pw-u) * 5.2); height: max(44px, calc(var(--pw-u) * 4.4)); padding: 0; border: 0; background: none; text-align: center; color: var(--pw-bone);
  font: 700 calc(var(--pw-u) * 1.6)/1 var(--pw-disp); -moz-appearance: textfield; appearance: textfield; }
.mf-pw .mf-pw-qty input::-webkit-inner-spin-button, .mf-pw .mf-pw-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mf-pw .mf-pw-qty input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); border-radius: var(--pw-r-tip); }
.mf-pw .omtb-pb__msg-line { min-height: 0; margin: 0 0 8px; font-size: calc(var(--pw-u) * 1.3); font-weight: 600; color: var(--pw-bone-2); }
.mf-pw .omtb-pb__msg-line:empty { display: none; }
.mf-pw .omtb-pb__trust { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 0; padding: 0; list-style: none; }
.mf-pw .omtb-pb__trust li { font-size: calc(var(--pw-u) * 1.25); color: var(--pw-bone-3); }
.mf-pw .omtb-pb__trust li::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 8px 2px 0; border-radius: var(--pw-r-ctl); background: var(--pw-bone-3); }
.mf-pw .omtb-pb__links { margin-top: 12px; }
.mf-pw .omtb-pb__links a { font: 600 calc(var(--pw-u) * 1.1)/1 var(--pw-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--pw-ember-t); text-decoration: none; }

/* ── REVIEW: one gentle suggestion row (mtb_frame_pw_upsell_html; photo-builder.js fills it) ─────────
   A second size, matching cards, two photos from the same collection. Each offer: the print drawn by
   print-look.js on the left; the title owns the whole text column (two lines max, shortened at a word
   boundary by the shop so a clamp never cuts a word); price and the Flow Button Add share the row under
   it, so nothing ever sits on the title. No box of its own (no flat panel on black): a hairline above. */
.mf-pw-up { margin: 18px 0 14px; padding-top: 16px; border-top: 1px solid var(--pw-line); }
.mf-pw-up[hidden] { display: none; }
.mf-pw-up__title { margin: 0 0 12px; font: 600 calc(var(--pw-u) * 1.1)/1 var(--pw-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--pw-bone-3); }
.mf-pw-up__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px 18px; }
.mf-pw-up__item {
  display: grid; grid-template-columns: calc(var(--pw-u) * 6.4) minmax(0, 1fr) auto; grid-template-areas: "look body body" "look price add";
  column-gap: 12px; row-gap: 6px; align-items: center; min-width: 0;
}
.mf-pw-up__look { grid-area: look; width: calc(var(--pw-u) * 6.4); height: calc(var(--pw-u) * 6.4); border-radius: var(--pw-r-tip);
  background: radial-gradient(120% 90% at 50% 40%, #1d1d1d 0%, #121212 70%, #0d0d0d 100%); }
.mf-pw-up__body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-self: end; }
.mf-pw-up__t { font: 600 calc(var(--pw-u) * 1.45)/1.3 var(--pw-disp); letter-spacing: -.005em; color: var(--pw-bone);
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: normal; word-break: normal; text-wrap: pretty; }
.mf-pw-up__sub { font-size: calc(var(--pw-u) * 1.3); line-height: 1.35; color: var(--pw-bone-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-pw-up__price { grid-area: price; font: 600 calc(var(--pw-u) * 1.4)/1 var(--pw-disp); color: var(--pw-bone-2); font-variant-numeric: tabular-nums; }
.mf-pw-up__item > .mf-btn { grid-area: add; justify-self: end; }
.mf-pw-up__item.is-added > .mf-btn { pointer-events: none; opacity: .72; }

/* ── PRICE BAR — the panel foot (desktop), the viewport bottom (phone) ────────────────────────────── */
.mf-pw .mf-pw-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--pw-u) * 1.4); margin: 0; padding: calc(var(--pw-u) * 1.4) calc(var(--pw-u) * 1.6);
  border: 0; border-radius: var(--pw-r-panel); flex-wrap: nowrap;
  /* the third surface: the lightest glass on the page, so the price reads as its own thing (6c) */
  background: linear-gradient(rgba(52, 52, 52, .74), rgba(40, 40, 40, .78)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px var(--pw-line-2), inset 0 1px 0 rgba(237, 231, 216, .16), 0 18px 40px -20px rgba(0, 0, 0, .8);
}
.mf-pw-bar__price { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.mf-pw-bar__from { font: 600 calc(var(--pw-u) * 1.05)/1 var(--pw-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--pw-bone-3); }
.mf-pw-bar__from[hidden] { display: none; }
.mf-pw-bar__amt { font: 800 calc(var(--pw-u) * 2.6)/1 var(--pw-disp); letter-spacing: -.02em; color: var(--pw-bone); font-variant-numeric: tabular-nums; }
.mf-pw-bar__note { font-size: calc(var(--pw-u) * 1.2); color: var(--pw-bone-3); }
.mf-pw-bar__note:empty { display: none; }
.mf-pw-bar__acts { flex: 0 1 auto; }
.mf-pw-bar__acts .mf-btn[hidden] { display: none; }
.mf-pw-bar__acts [data-pb-add] { min-width: calc(var(--pw-u) * 14.8); }

/* toast: the photo is a photograph (radius 0, law D1) and the card is dark glass */
.omtb-pb-toast { background: linear-gradient(rgba(30, 30, 30, .7), rgba(8, 8, 8, .86)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 0; box-shadow: inset 0 0 0 1px rgba(237, 231, 216, .13), 0 18px 44px rgba(0, 0, 0, .5); color: #EDE7D8; }
.omtb-pb-toast__thumb { border-radius: 0; }
/* The toast never sits over a control. Bottom-right it covered the price bar, the upsell ADD buttons and
   VIEW CART; top-right it covered the step rail (critic 2026-11-07). Desktop: inside the preview stage,
   bottom-left, above the stage foot (size caption and notes) — the stage's only free ground. At 390 it
   clears the view toggle and sits over the preview photograph, above the foot. */
html body .omtb-pb-toast { top: auto; bottom: 96px; left: 56px; right: auto; transform: translateY(12px); }
html body .omtb-pb-toast.is-on { transform: none; }
@media (max-width: 860px) { html body .omtb-pb-toast { top: 108px; bottom: auto; left: 16px; right: 16px; width: auto; transform: translateY(-12px); } }
.omtb-pb-toast__title { font-family: "Hanken Grotesk", system-ui, sans-serif; }
.omtb-pb-toast__spec { color: rgba(237, 231, 216, .70); }

/* ── PHONE: preview pinned at ~45vh, steps scroll beneath, bar fixed to the viewport bottom ───────── */
@media (max-width: 860px) {
  .omtb-pb.mf-pw { padding: 0; margin-top: 0; } /* was -40 against a 40 px wrapper pad that is gone: it hid "← Gallery" under the pinned stage */
  .mf-pw .mf-pw__grid { display: block; }
  .mf-pw .mf-pw__stage {
    position: sticky; top: var(--pw-top, 0px); z-index: 3; height: 45vh; height: 45svh; min-height: 0;
    padding: 18px 16px 44px; border-radius: 0; border: 0; border-bottom: 1px solid var(--pw-line);
  }
  .mf-pw .omtb-pb__stage-foot { bottom: 10px; }
  .mf-pw .mf-pw__side { position: static; height: auto; min-height: 0; max-height: none; display: block; padding: 0 16px; }
  .mf-pw .mf-pw__head { padding: 18px 0 10px; }
  .mf-pw .mf-pw__title { font-size: 26px; }
  .mf-pw .mf-pw__steps { overflow: visible; padding: 8px 0 24px; }
  .mf-pw-panel__head { padding: 8px; }
  .mf-pw-panel__btn { padding: 0 6px; }
  .mf-pw-panel__body { padding: 2px 12px 16px; }
  .mf-pw-panel__title { font-size: 18px; }
  .mf-pw-panel[data-pw-state="done"] .mf-pw-panel__edit { display: none; }
  .mf-pw .omtb-pb__tile-txt { padding: 8px 10px 10px; }
  .mf-pw .omtb-pb__tile-label { font-size: 13.5px; }
  .mf-pw .omtb-pb__sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf-pw-sum { grid-template-columns: 1fr 1fr; }
  .mf-pw .mf-pw-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; border-radius: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) 16px; gap: 10px;
    background: linear-gradient(rgba(46, 46, 46, .94), rgba(38, 38, 38, .96));
    box-shadow: inset 0 1px 0 var(--pw-line-2), 0 -10px 30px rgba(0, 0, 0, .45);
  }
  .mf-pw-bar__amt { font-size: 21px; }
  .mf-pw-bar__note { display: none; }
  .mf-pw-bar__acts [data-pb-add] { min-width: 0; }
  .mf-pw-bar__acts [data-pw-back] { padding: 0 12px; }
  body.omtb-pb-docked { padding-bottom: var(--pb-dock-h, 0px); }
}
@media (max-width: 860px) { .mf-pw-bar__acts [data-pw-back]:disabled { display: none; } .mf-pw-panel { scroll-margin-top: calc(var(--pw-top, 0px) + 45svh + 8px); } }
@media (max-width: 380px) { .mf-pw-bar__acts [data-pw-back] { display: none; } }
/* the cart page's own title band (its H1 is already hidden) leaves an empty strip above the wizard */
body.woocommerce-cart:has(#omtb-pb) .omtb-page-hero { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mf-pw-panel__body { animation: none; }
}
/* keyboard focus and scroll-into-view land BELOW the pinned preview + rail, never under them */
@media (max-width: 860px) {
  .mf-pw .omtb-pb__tile, .mf-pw .omtb-pb__chip, .mf-pw .mf-pw-swatch, .mf-pw .mf-pw-panel__title, .mf-pw .mf-pw-qty, .mf-pw .omtb-pb__msg {
    scroll-margin-top: calc(var(--pw-top, 0px) + 45svh + 12px); scroll-margin-bottom: calc(var(--pb-dock-h, 0px) + 12px);
  }
}
/* desktop: the side column is 440-520 px, so the bar's three buttons sit compact (they overflowed at 449) */
@media (min-width: 861px) {
  /* fixed to the foot of the side column; photo-builder.js lifts it with the column's end so it never
     rides onto the footer (--pw-bar-lift) */
  .mf-pw .mf-pw-bar { position: fixed; z-index: 20; bottom: 16px; right: clamp(16px, 2vw, 32px); width: var(--pw-side);
    transform: translateY(var(--pw-bar-lift, 0px)); }
  .mf-pw .mf-pw-bar { padding: var(--mb-sp-3, calc(var(--pw-u) * 1.2)) var(--mb-sp-3, calc(var(--pw-u) * 1.2)) var(--mb-sp-3, calc(var(--pw-u) * 1.2)) var(--mb-sp-4, calc(var(--pw-u) * 1.6)); gap: calc(var(--pw-u) * 1); }
  .mf-pw-bar__acts.mf-btn-group { gap: calc(var(--pw-u) * 0.6); flex-wrap: nowrap; }
  /* P5: the Flow Button grows with the unit only inside the wizard (honeywreck's buttons elsewhere untouched) */
  .mf-pw-bar__acts .mf-btn { padding: 0 calc(var(--pw-u) * 1.4); min-height: max(44px, calc(var(--pw-u) * 4.4)); font-size: calc(var(--pw-u) * 1.2); }
  .mf-pw-bar__acts [data-pb-add] { min-width: 0; }
  .mf-pw-bar__acts [data-pw-back]:disabled { display: none; }
}
@media (min-width: 861px) and (max-width: 1240px) {
  .mf-pw .mf-pw__grid { gap: 16px; }
  .mf-pw-bar__amt { font-size: 22px; }
}
/* groups whose swatches are square (frames, mats, the photo for an image/mirror wrap) use the tooltip
   step of the radius scale for the whole chip, so a square never pokes out of a pill */
:is([data-pw-group="frame"], [data-pw-group="matting"], [data-pw-group="canvas_edge"]) .mf-pw-swatch { border-radius: var(--pw-r-tip); }
[data-pw-group="canvas_edge"] .mf-pw-swatch__sw { border-radius: 0; }

/* ══ PREVIEW STAGE (build step 2) ══════════════════════════════════════════════════════════════════════
   photo-builder.js places the ONE print element (.omtb-pb__art) for the current view (Q3 row 13): Adjust —
   the whole photograph with the crop frame; Preview — the crop at px-per-inch, dressed per medium: mat board
   + bevel, canvas wrap faces, metal sheen, acrylic glaze + clear edge, birch edge grain, mitred moulding. */
.mf-pw { --pw-l: var(--dur-l, 600ms); --pw-teal: #34978F; }
.mf-pw-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mf-pw .mf-pw__stage.is-placed .omtb-pb__art { position: absolute; z-index: 2; margin: 0; max-width: none; transition: none; }
.mf-pw .mf-pw__stage .omtb-pb__mat, .mf-pw .mf-pw__stage .omtb-pb__media, .mf-pw .mf-pw__stage .omtb-pb__media.is-print .omtb-pb__img { transition: none; }
.mf-pw .omtb-pb__media { box-shadow: none; }
.mf-pw .omtb-pb__mat { background-repeat: repeat; }
/* paper fibre: a faint, fine speckle on the paper border only (the photo sits on top of the mat) */
.mf-pw .omtb-pb__mat.is-paper {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .27 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* the frame's shadow falls on the mat */
.mf-pw .omtb-pb__mat.is-mat { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(0, 0, 0, .06); }
.mf-pw .omtb-pb__sheen { mix-blend-mode: screen; transition: opacity var(--pw-m) var(--pw-ease); }
.mf-pw-wash { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.mf-pw .mf-pw__stage.is-live .omtb-pb__art { transition: left var(--pw-m) var(--pw-ease), top var(--pw-m) var(--pw-ease), border-width var(--pw-m) var(--pw-ease), border-color var(--pw-m) var(--pw-ease), box-shadow var(--pw-m) var(--pw-ease); }
.mf-pw .mf-pw__stage.is-live .omtb-pb__mat { transition: padding var(--pw-m) var(--pw-ease), background-color var(--pw-m) var(--pw-ease); }
.mf-pw .mf-pw__stage.is-live .omtb-pb__media { transition: width var(--pw-m) var(--pw-ease), height var(--pw-m) var(--pw-ease), box-shadow var(--pw-m) var(--pw-ease); }
.mf-pw .mf-pw__stage.is-live .omtb-pb__media.is-print .omtb-pb__img { transition: width var(--pw-m) var(--pw-ease), height var(--pw-m) var(--pw-ease), left var(--pw-m) var(--pw-ease), top var(--pw-m) var(--pw-ease), filter var(--pw-m) var(--pw-ease); }
.mf-pw .mf-pw__stage.is-live .mf-pw-side { transition: width var(--pw-m) var(--pw-ease), height var(--pw-m) var(--pw-ease); }
/* a view change is a shot, not a cut: the same print travels on the long duration */
.mf-pw .mf-pw__stage.is-live.is-moving :is(.omtb-pb__art, .omtb-pb__mat, .omtb-pb__media, .omtb-pb__img, .mf-pw-side) { transition-duration: var(--pw-l); }

/* Edge faces: oblique, depth running down-right, in the shade of a light from the upper left. */
.mf-pw-side { position: absolute; z-index: -1; pointer-events: none; overflow: hidden; transform-origin: 0 0; }
.mf-pw-side[hidden] { display: none; }
.mf-pw-side > i { position: absolute; inset: 0; display: block; }
.mf-pw-side::after { content: ""; position: absolute; inset: 0; }
.mf-pw-side--r { left: calc(100% + var(--fw, 0px)); top: calc(-1 * var(--fw, 0px)); width: var(--d); height: calc(100% + 2 * var(--fw, 0px)); transform: skewY(26.565deg); }
.mf-pw-side--b { top: calc(100% + var(--fw, 0px)); left: calc(-1 * var(--fw, 0px)); height: calc(var(--d)); width: calc(100% + 2 * var(--fw, 0px)); transform: skewX(63.435deg); }
.mf-pw-side--r::after { background: linear-gradient(90deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .5)); }
.mf-pw-side--b::after { background: rgba(0, 0, 0, .56); }
.mf-pw-side.is-color.mf-pw-side--r::after { background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .34)); }
.mf-pw-side.is-metal > i { background: linear-gradient(90deg, #E2E2E2, #9A9A9A); }
.mf-pw-side.is-metal::after { background: none; }
.mf-pw-side--b.is-metal > i { background: #8A8A8A; }
.mf-pw-side.is-acrylic > i { background: linear-gradient(90deg, rgba(232, 246, 243, .92), rgba(170, 206, 200, .42)); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .9); }
.mf-pw-side.is-acrylic::after { background: none; }
.mf-pw-side--b.is-acrylic > i { background: rgba(160, 196, 190, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.mf-pw-side.is-wood > i::after { content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='220'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .022' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E") 0 0 / 48px 220px; }
.mf-pw-side--b.is-wood > i::after { background-size: 220px 48px; transform: none; }
.mf-pw-side.is-wood.mf-pw-side--r::after { background: linear-gradient(90deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .3)); }


/* ── View toggle: "Adjust | Preview", one dense dark pill over the stage (D2) ─────────────────────── */
.mf-pw-views {
  position: absolute; top: 16px; left: 50%; z-index: 4; transform: translateX(-50%);
  display: flex; gap: 2px; margin: 0; padding: 4px; border: 0; min-inline-size: 0; border-radius: var(--pw-r-ctl);
  background: linear-gradient(rgba(26, 26, 26, .58), rgba(10, 10, 10, .7)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--pw-line), inset 0 1px 0 rgba(237, 231, 216, .14), 0 10px 24px -12px rgba(0, 0, 0, .6);
}
.mf-pw-views__opt { position: relative; display: inline-flex; align-items: center; min-height: calc(var(--pw-u) * 4); padding: 0 calc(var(--pw-u) * 1.6); border-radius: var(--pw-r-ctl); cursor: pointer;
  color: var(--pw-bone-2); font: 600 calc(var(--pw-u) * 1.1)/1 var(--pw-disp); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: color var(--pw-s-out) var(--pw-ease), background var(--pw-s-out) var(--pw-ease), box-shadow var(--pw-s-out) var(--pw-ease); }
.mf-pw-views__in { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
@media (hover: hover) { .mf-pw-views__opt:hover { color: var(--pw-bone); } }
.mf-pw-views__opt:has(.mf-pw-views__in:checked) { color: var(--pw-bone); background: rgba(237, 231, 216, .12); box-shadow: inset 0 0 0 1px rgba(237, 231, 216, .26), inset 0 1px 0 rgba(237, 231, 216, .14); }
.mf-pw-views__opt:has(.mf-pw-views__in:focus-visible) { box-shadow: 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); }

/* Recommended: a quiet tracked-caps line in the tile's text column (never on the photo, D8) */
.mf-pw .omtb-pb__tile-rec { display: inline-flex; align-items: center; gap: 7px; font: 600 10px/1 var(--pw-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--pw-bone-2); }
.mf-pw .omtb-pb__tile-rec::before { content: ""; width: 6px; height: 6px; border-radius: var(--pw-r-ctl); background: var(--pw-teal); }
/* the badge rides the mockup's top-left corner on a glass chip, so every tile's name sits on one baseline */
.mf-pw .omtb-pb__tile { position: relative; }
.mf-pw .omtb-pb__tile-txt .omtb-pb__tile-rec { position: absolute; top: 8px; left: 8px; padding: 5px 8px; border-radius: var(--pw-r-ctl);
  background: rgba(14, 14, 14, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--pw-line-2); color: var(--pw-bone); }

@media (max-width: 860px) {
  .mf-pw-views { top: 10px; padding: 3px; }
  .mf-pw-views__opt { min-height: 38px; padding: 0 12px; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
  .mf-pw .mf-pw__stage.is-live :is(.omtb-pb__art, .omtb-pb__mat, .omtb-pb__media, .omtb-pb__img, .mf-pw-side, .mf-pw-crop, .mf-pw-crop__box, .mf-pw-crop__hole) { transition: none !important; }
}
/* ══ EMBED (Stage 1b step 3) — the wizard inside the gallery's print overlay ═══════════════════════════
   html.omtb-pw-embed is set by an inline script in the wizard markup before first paint. The site chrome
   goes; the wizard owns the frame. The overlay's close sits top-right, so the panel head keeps clear of it. */
html.omtb-pw-embed .omtb-ih, html.omtb-pw-embed .mb2-nav__ia, html.omtb-pw-embed .mb2-nav__trigger, html.omtb-pw-embed [class^="mb2-nav"], html.omtb-pw-embed [data-omtb-sc-bar], html.omtb-pw-embed .omtb-skip-link,
html.omtb-pw-embed .omtb-page-hero, html.omtb-pw-embed .frame-region--footer, html.omtb-pw-embed #wpadminbar,
html.omtb-pw-embed footer:not(.mf-pw *) { display: none !important; }
html.omtb-pw-embed, html.omtb-pw-embed body { margin-top: 0 !important; padding-top: 0 !important; background: #0A0A0A !important; }
html.omtb-pw-embed .omtb-woowrap { padding-top: 0 !important; margin-top: 0 !important; }
/* the theme's main pads 60 px for the masthead the embed hides: the stage started 76 px down and ran off the
   overlay's floor at 1440, and a bare ink band sat over it at 390 */
html.omtb-pw-embed .frame-zero-main { padding-top: 0 !important; }
html.omtb-pw-embed .omtb-pb.mf-pw { margin-top: 0; padding-top: 16px; }
html.omtb-pw-embed .mf-pw__head { padding-right: 56px; }

/* ══ LOOK THUMBNAILS — the same layers as the stage, painted small by print-look.js ═════════════════════
   Cart lines, the cart upsell and the checkout summary. The photo is never rounded (D1). */
.mf-pw-look { position: relative; display: block; overflow: visible; }
.mf-pw-look .omtb-pb__art { position: absolute; display: block; margin: 0; max-width: none; border-style: solid; border-width: 0;
  border-color: transparent; background: transparent; transition: none; }
.mf-pw-look .omtb-pb__mat { display: block; max-width: none; transition: none; background-repeat: repeat; }
.mf-pw-look .omtb-pb__mat.is-paper {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .27 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 120px 120px; }
.mf-pw-look .omtb-pb__mat.is-mat { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(0, 0, 0, .06); }
.mf-pw-look .omtb-pb__media { position: relative; display: block; overflow: hidden; line-height: 0; max-width: none; border-radius: 0; transition: none; }
.mf-pw-look .omtb-pb__img { position: absolute; display: block; max-width: none; max-height: none; border-radius: 0; transition: none; }
.mf-pw-look .omtb-pb__sheen { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.mf-pw-look:not(.is-painted) .omtb-pb__art { visibility: hidden; }

/* 390 overlay: the centred view toggle ran to 4 px from the overlay's close button; it steps to the gutter */
@media (max-width: 860px) { html.omtb-pw-embed .mf-pw-views { left: 16px; transform: none; top: 12px; } }
/* phone: the admin "Edit page" pill (page-entry.php, fixed bottom-right) sat on the docked price bar's
   Add to cart, and lifted above the bar it sat on the right-hand size chip instead — on a 390 screen there is
   no free corner while the wizard is docked. The page is edited from desktop; on the docked phone wizard it goes. */
body.omtb-pb-docked .mtb-edit-pill { display: none; }
/* P3: the desktop bar is fixed bottom-right too, so the pill would sit on Add to cart there as well */
body:has(#omtb-pb .mf-pw-bar) .mtb-edit-pill { display: none; }

/* the menu dot means "your cart has items" — the bar already says so with its count badge, so the dot
   stands down while the badge shows (critic 2026-11-07; nav.css is homepage-owned, so the rule lives here) */
.mb2-nav-root:has(.mb2-cart__n:not([hidden])) .mb2-nav__dot { display: none !important; }

/* ══ MULTI-PHOTO STRIP (P3 6e → Q5 item 11) — the photos of the order as their own band at the stage's floor,
   under the print and its caption row (photo-builder.js stageBox() measures the foot, so nothing overlaps). Thumbs
   are photographs (radius 0, D1) at row 9's token: 9.6u tall (96.0 at 1440, 124.8 at 2560), 48 px on a phone.
   NONE is dimmed — the Bone ring alone marks the one on the stage (Carter has rejected dimming three times). The
   pip carries the state by SHAPE: filled Bone = ready, a hollow Bone ring = needs a look (no Ember, no colour code). */
.mf-pw { --pw-strip-th: calc(var(--pw-u) * 9.6); --pw-strip-pad: calc(var(--pw-u) * 1); --pw-strip-gut: calc(var(--pw-u) * 1.6); }
.mf-pw-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; gap: calc(var(--pw-u) * 0.8); max-width: none;
  padding: var(--pw-strip-pad) var(--pw-strip-gut); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-padding: 0 var(--pw-strip-gut);
  border-radius: 0; background: none; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* critic r1 + gate: a thumb parked at a scroll end read as a sliver. The band rests on WHOLE thumbs — photo-builder.js
     sizes them so a whole number fills the band (--pw-strip-w) and snaps to them; a thumb wholly outside is not painted. */
  scroll-snap-type: x mandatory;
  /* the gutters frame the whole thumbs; what scrolls into them is not drawn */
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--pw-strip-gut) - 1px), #000 var(--pw-strip-gut), #000 calc(100% - var(--pw-strip-gut)), transparent calc(100% - var(--pw-strip-gut) + 1px));
  mask-image: linear-gradient(90deg, transparent calc(var(--pw-strip-gut) - 1px), #000 var(--pw-strip-gut), #000 calc(100% - var(--pw-strip-gut)), transparent calc(100% - var(--pw-strip-gut) + 1px)); }
.mf-pw-strip__item { scroll-snap-align: start; }
/* the band's ground and its hairline belong to the stage, full width (the strip itself is masked to its gutters) */
.mf-pw .mf-pw__stage:has(.mf-pw-strip)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: calc(var(--pw-strip-th) + 2 * var(--pw-strip-pad));
  background: rgba(10, 10, 10, .42); box-shadow: inset 0 var(--pw-hl, 1px) 0 var(--pw-line); pointer-events: none; }
.mf-pw-strip__item.is-out { visibility: hidden; }
.mf-pw-strip::-webkit-scrollbar { display: none; }
.mf-pw-strip__item { position: relative; flex: 0 0 auto; width: var(--pw-strip-w, calc(var(--pw-strip-th) * 1.5)); height: var(--pw-strip-th); padding: 0; border: 0; border-radius: 0; background: #1a1a1a; cursor: pointer; opacity: 1; }
.mf-pw-strip__th { position: absolute; inset: 0; background-size: cover; background-position: center; border-radius: 0; }
/* the disc is drawn by ::before AROUND the digit's own box, so the box that carries the type sits wholly on the disc */
.mf-pw-strip__n { position: absolute; z-index: 0; left: calc(var(--pw-u) * 1.7); bottom: calc(var(--pw-u) * 1.15); transform: translateX(-50%); display: block; padding: 0; color: var(--pw-ink); font: 700 calc(var(--pw-u) * 1.1)/1 var(--pw-disp); font-variant-numeric: tabular-nums; }
.mf-pw-strip__n::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: max(calc(var(--pw-u) * 2.2), calc(100% + var(--pw-u) * 1.2)); height: calc(var(--pw-u) * 2.2); transform: translate(-50%, -50%);
  border-radius: var(--pw-r-ctl); background: var(--pw-bone); box-shadow: 0 0 0 1px rgba(10, 10, 10, .55); }
.mf-pw-strip__item.is-need .mf-pw-strip__n { color: var(--pw-bone); }
.mf-pw-strip__item.is-need .mf-pw-strip__n::before { background: rgba(10, 10, 10, .82); box-shadow: inset 0 0 0 2px var(--pw-bone), 0 0 0 1px rgba(10, 10, 10, .55); }
/* the ring is drawn INSIDE the thumb, so the gaps stay even (critic r1) */
.mf-pw-strip__item::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.mf-pw-strip__item.is-on::after { box-shadow: inset 0 0 0 2px var(--pw-bone), inset 0 0 0 3.5px rgba(10, 10, 10, .7); }
.mf-pw-strip__item:focus-visible { outline: none; }
.mf-pw-strip__item:focus-visible::after { box-shadow: inset 0 0 0 2px var(--pw-ink), inset 0 0 0 4px var(--pw-bone); }
/* the caption row and the notes sit on the band; on a desktop the size and the watermark line share ONE row
   (probe C: two rows above a 96 px band left the 1440 crop frame at 85.3 % of its old long edge) */
.mf-pw__stage:has(.mf-pw-strip) .omtb-pb__stage-foot { bottom: calc(var(--pw-strip-th) + 2 * var(--pw-strip-pad) + var(--pw-u) * 1.2); }
@media (min-width: 861px) {
  .mf-pw__stage:has(.mf-pw-strip) .omtb-pb__stage-foot { flex-wrap: nowrap; align-items: baseline; }
  .mf-pw__stage:has(.mf-pw-strip) :is(.omtb-pb__wm-note, .omtb-pb__res-note) { flex: 0 1 auto; padding: 0; text-align: left; }
}
@media (max-width: 860px) {
  .mf-pw { --pw-strip-th: 48px; --pw-strip-pad: 8px; --pw-strip-gut: 16px; }
  .mf-pw-strip { gap: 6px; }
  .mf-pw-strip__n { left: 13px; bottom: 8px; font-size: 10px; }
  .mf-pw-strip__n::before { width: max(18px, calc(100% + 10px)); height: 18px; }
  .mf-pw__stage:has(.mf-pw-strip) .omtb-pb__dim { display: none; }
  .mf-pw__stage:has(.mf-pw-strip) .omtb-pb__stage-foot { bottom: calc(48px + 16px + 6px); }
}

/* ── Q2 row 10 (docs/ops/requests/2026-11-08-photos-round2.md): one quiet line under the preview — the stamp
   is a preview mark and never reaches the print. Instrument Sans at --mb-t-sm (1.2u), Bone-70 on the dark
   stage, Ink-70 on the light wall (DESIGN.md muted copy). It wraps to its own row under the size / crop row.
   Scoped to the wizard's own markup (.mf-pw .omtb-pb__wm-note), which only /print/ renders. */
.mf-pw .omtb-pb__stage-foot { flex-wrap: wrap; row-gap: calc(var(--pw-u) * .8); }
.mf-pw .omtb-pb__res-note[hidden] { display: none; }
.mf-pw .omtb-pb__wm-note, .mf-pw .omtb-pb__res-note {
  flex: 0 0 100%; margin: 0; padding: 0 calc(var(--pw-u) * 1.6); text-align: center;
  font: 400 calc(var(--pw-u) * 1.2)/1.35 var(--pw-body); letter-spacing: .01em; color: var(--pw-bone-2);
}
@media (max-width: 860px) {
  .mf-pw .omtb-pb__stage-foot { row-gap: 4px; }
  .mf-pw .omtb-pb__wm-note, .mf-pw .omtb-pb__res-note { font-size: 11px; }
}

/* ══ Q3 row 16 — crisp hairlines (probe A: docs/ops/logs/2026-11-08-photos-r2/q3/probeA/) ══════════════════
   Measured on live: at DPR 2 a 1 px inset shadow paints TWO device rows and the 1 px top lip lights the row
   beside it, so the edge read as a soft 2-px band; and the bar's backdrop blur did not hold back the tiles
   scrolling under it (headless Chromium at DPR 2, WebKit at every DPR), so "book" / "build" read through the
   disabled Add button at opacity .5. Now: the edge is ONE device pixel at every DPR (--pw-hl), the lip goes,
   buttons in the bar drop their own blur, the bar and the toggle are dense enough to hide what passes under
   them, and disabled is a dim label + quiet line, never opacity on glass. All scoped to .mf-pw: the Flow
   Button's own sheet (blocks/button/style.css, shared with honeywreck) is untouched. */
.mf-pw { --pw-hl: 1px; }
@media (min-resolution: 2dppx) { .mf-pw { --pw-hl: .5px; } }
.mf-pw .mf-btn { box-shadow: inset 0 0 0 var(--pw-hl) var(--mf-line), var(--mf-drop); }
.mf-pw .mf-btn:focus-visible { box-shadow: inset 0 0 0 var(--pw-hl) var(--mf-line), 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); }
.mf-pw .mf-pw-bar .mf-btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
.mf-pw .mf-btn:disabled, .mf-pw .mf-btn[aria-disabled="true"] { opacity: 1; color: var(--pw-bone-3); --mf-line: var(--pw-line); --mf-arrow: var(--pw-bone-3); --mf-lift: rgba(237, 231, 216, 0); }
.mf-pw .mf-pw-bar { background: linear-gradient(rgba(46, 46, 46, .96), rgba(38, 38, 38, .97));
  box-shadow: inset 0 0 0 var(--pw-hl) var(--pw-line-2), 0 18px 40px -20px rgba(0, 0, 0, .8); }
@media (max-width: 860px) { .mf-pw .mf-pw-bar { box-shadow: inset 0 var(--pw-hl) 0 var(--pw-line-2), 0 -10px 30px rgba(0, 0, 0, .45); } }
.mf-pw .omtb-pb__chip, .mf-pw .mf-pw-swatch { box-shadow: inset 0 0 0 var(--pw-hl) var(--pw-line); }
@media (hover: hover) {
  .mf-pw .omtb-pb__chip:hover, .mf-pw .mf-pw-swatch:hover { box-shadow: inset 0 0 0 var(--pw-hl) rgba(237, 231, 216, .34); }
}
.mf-pw .omtb-pb__chip.is-active, .mf-pw .mf-pw-swatch:has(.mf-pw-swatch__in:checked) { box-shadow: inset 0 0 0 var(--pw-hl) rgba(255, 125, 17, .82); }
.mf-pw .omtb-pb__chip:focus-visible, .mf-pw .mf-pw-swatch:has(.mf-pw-swatch__in:focus-visible) { box-shadow: inset 0 0 0 var(--pw-hl) var(--pw-line-2), 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); }
/* a type tile's mockup fills its top edge-to-edge and painted OVER an inset shadow (wizard-q3 16: the active tile's
   ember line vanished along its top and left at DPR 2, leaving only the corner arc); its hairline is drawn on top */
.mf-pw .omtb-pb__tile { --pw-tile-line: var(--pw-line); box-shadow: none; }
.mf-pw .omtb-pb__tile::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 var(--pw-hl) var(--pw-tile-line); transition: box-shadow var(--pw-s-out) var(--pw-ease); }
@media (hover: hover) { .mf-pw .omtb-pb__tile:not(.is-off):hover { --pw-tile-line: rgba(237, 231, 216, .34); box-shadow: none; } }
.mf-pw .omtb-pb__tile.is-active, .mf-pw .omtb-pb__tile.is-active:not(.is-off):hover { --pw-tile-line: rgba(255, 125, 17, .82); box-shadow: none; }
.mf-pw .omtb-pb__tile:focus-visible { --pw-tile-line: var(--pw-line-2); box-shadow: 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); }
.mf-pw .mf-pw-panel { box-shadow: inset 0 0 0 var(--pw-hl) var(--pw-line); }
.mf-pw .mf-pw-panel[data-pw-state="open"] { box-shadow: inset 0 0 0 var(--pw-hl) var(--pw-line-2); }
.mf-pw .mf-pw-views { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(rgba(26, 26, 26, .84), rgba(10, 10, 10, .9));
  box-shadow: inset 0 0 0 var(--pw-hl) var(--pw-line), 0 10px 24px -12px rgba(0, 0, 0, .6); }
.mf-pw .mf-pw-views__opt:has(.mf-pw-views__in:checked) { box-shadow: inset 0 0 0 var(--pw-hl) rgba(237, 231, 216, .26); }
.mf-pw .mf-pw-views__opt:has(.mf-pw-views__in:focus-visible) { box-shadow: 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); }

/* ══ Q3 row 15 — the mat swatches: the board around a dark window, thin or wide ══════════════════════════ */
.mf-pw [data-pw-group="matting"] .mf-pw-swatch__sw { background: #2E2E2E; box-shadow: inset 0 0 0 5px var(--sw, #2a2a2a), inset 0 0 0 6px rgba(237, 231, 216, .22); }
.mf-pw [data-pw-group="matting"] .mf-pw-swatch:has(input[value^="wide_"]) .mf-pw-swatch__sw { box-shadow: inset 0 0 0 9px var(--sw, #2a2a2a), inset 0 0 0 10px rgba(237, 231, 216, .22); }
/* frames and mats: an even two-column grid, so the group reads as a set instead of a ragged 2 / 1 / 2 / 1 wrap
   (critic r1, Q3); a long name wraps inside its own swatch rather than pushing the row */
.mf-pw :is([data-pw-group="frame"], [data-pw-group="matting"]) .mf-pw-swatches__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* inside a cell the name owns its line and the add-on price sits under it (critic r2: a wrapped name pushed the
   price mid-cell); "None" takes the whole first row so the four mat boards sit 2 x 2 */
.mf-pw :is([data-pw-group="frame"], [data-pw-group="matting"]) .mf-pw-swatch { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto; align-content: center; column-gap: calc(var(--pw-u) * 1); row-gap: 3px; padding-top: calc(var(--pw-u) * 0.6); padding-bottom: calc(var(--pw-u) * 0.6); }
.mf-pw :is([data-pw-group="frame"], [data-pw-group="matting"]) .mf-pw-swatch__sw { grid-row: 1 / span 2; align-self: center; }
.mf-pw :is([data-pw-group="frame"], [data-pw-group="matting"]) .mf-pw-swatch__t { grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mf-pw :is([data-pw-group="frame"], [data-pw-group="matting"]) .mf-pw-swatch__p { grid-column: 2; }
.mf-pw :is([data-pw-group="frame"], [data-pw-group="matting"]) .mf-pw-swatch.is-chip .mf-pw-swatch__t { grid-column: 1 / -1; }
.mf-pw :is([data-pw-group="frame"], [data-pw-group="matting"]) .mf-pw-swatch:not(:has(.mf-pw-swatch__p)) .mf-pw-swatch__t { grid-row: 1 / span 2; align-self: center; }
.mf-pw [data-pw-group="matting"] .mf-pw-swatch:has(input[value="none"]) { grid-column: 1 / -1; }
/* phone: frame names ("Wide Black Gallery") do not fit half a 358 px panel, so frames run one per row there */
@media (max-width: 520px) { .mf-pw [data-pw-group="frame"] .mf-pw-swatches__list { grid-template-columns: minmax(0, 1fr); } }

/* ══ Q5 bulk prints (docs/ops/specs/2026-11-10-q5-bulk-prints.md) ═══════════════════════════════════════════
   The scope control in the head — "All N photos | This photo" — is the Adjust | Preview recipe set in the column
   (one dense dark pill, the chosen half a raised Bone-12 plate). Under it ONE quiet line, only when something
   needs a look; it is a text button that takes you there. */
.mf-pw .mf-pw-scope { display: inline-flex; gap: 2px; margin: calc(var(--pw-u) * 1.4) 0 0; padding: 4px; border: 0; min-inline-size: 0; border-radius: var(--pw-r-ctl);
  background: linear-gradient(rgba(26, 26, 26, .84), rgba(10, 10, 10, .9)); box-shadow: inset 0 0 0 var(--pw-hl) var(--pw-line); }
.mf-pw .mf-pw-scope[hidden] { display: none; }
.mf-pw-scope__opt { position: relative; display: inline-flex; align-items: center; min-height: max(40px, calc(var(--pw-u) * 4)); padding: 0 calc(var(--pw-u) * 1.6); border-radius: var(--pw-r-ctl); cursor: pointer;
  color: var(--pw-bone-2); font: 600 calc(var(--pw-u) * 1.1)/1 var(--pw-disp); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: color var(--pw-s-out) var(--pw-ease), background var(--pw-s-out) var(--pw-ease), box-shadow var(--pw-s-out) var(--pw-ease); }
.mf-pw-scope__in { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
@media (hover: hover) { .mf-pw-scope__opt:hover { color: var(--pw-bone); } }
.mf-pw-scope__opt:has(.mf-pw-scope__in:checked) { color: var(--pw-bone); background: rgba(237, 231, 216, .12); box-shadow: inset 0 0 0 var(--pw-hl) rgba(237, 231, 216, .26); }
.mf-pw-scope__opt:has(.mf-pw-scope__in:focus-visible) { box-shadow: 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); }
.mf-pw .mf-pw-attn { display: flex; align-items: center; gap: calc(var(--pw-u) * 0.8); min-height: 44px; margin: calc(var(--pw-u) * 0.4) 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 calc(var(--pw-u) * 1.4)/1.2 var(--pw-body); color: var(--pw-bone); text-decoration: underline; text-decoration-thickness: var(--pw-hl); text-underline-offset: 4px; text-decoration-color: rgba(237, 231, 216, .44); }
.mf-pw .mf-pw-attn::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: var(--pw-r-ctl); box-shadow: inset 0 0 0 1.5px var(--pw-bone); }
.mf-pw .mf-pw-attn[hidden] { display: none; }
.mf-pw .mf-pw-attn:hover { text-decoration-color: currentColor; }
.mf-pw .mf-pw-attn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); border-radius: var(--pw-r-tip); }
/* item 8: a size not every photo can take says so on the chip, in its own line */
.mf-pw .omtb-pb__chip-n { font: 500 calc(var(--pw-u) * 1.15)/1.2 var(--pw-body); font-style: normal; color: var(--pw-bone-2); }
.mf-pw .omtb-pb__chip-n[hidden] { display: none; }

/* item 12: Review is the set — one row per photo, a bottom hairline only (no boxes, Q4 row 21's rule) */
.mf-pw .mf-pw-set[hidden], .mf-pw .mf-pw-qty[hidden], .mf-pw .mf-pw-sum[hidden], .mf-pw .mf-pw-break[hidden] { display: none; }
.mf-pw .mf-pw-set { margin: 0 0 calc(var(--pw-u) * 1.8); }
.mf-pw .mf-pw-set__each { padding: 0 0 calc(var(--pw-u) * 1.2); margin: 0; border-bottom: var(--pw-hl) solid var(--pw-line-2); }
.mf-pw .mf-pw-set__k { font: 600 calc(var(--pw-u) * 1.1)/1 var(--pw-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--pw-bone-3); }
.mf-pw .mf-pw-set__v { display: inline-grid; place-items: center; min-width: calc(var(--pw-u) * 3.6); font: 700 calc(var(--pw-u) * 1.5)/1 var(--pw-disp); color: var(--pw-bone); font-variant-numeric: tabular-nums; }
.mf-pw .mf-pw-set__list { list-style: none; margin: 0; padding: 0; }
.mf-pw .mf-pw-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "go go p" "q q rm"; align-items: center; column-gap: calc(var(--pw-u) * 1.2); row-gap: calc(var(--pw-u) * 0.6);
  margin: 0; padding: calc(var(--pw-u) * 1) 0; border-bottom: var(--pw-hl) solid var(--pw-line); }
.mf-pw .mf-pw-row__go { grid-area: go; display: flex; align-items: center; gap: calc(var(--pw-u) * 1.2); min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; border-radius: var(--pw-r-tip); }
.mf-pw .mf-pw-row__go:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); }
.mf-pw .mf-pw-row__th { flex: 0 0 auto; position: relative; width: calc(var(--pw-u) * 7.2); height: calc(var(--pw-u) * 7.2); overflow: hidden; background: #1a1a1a; border-radius: 0; }
.mf-pw .mf-pw-row.is-on .mf-pw-row__th { box-shadow: 0 0 0 2px rgba(10, 10, 10, .9), 0 0 0 3.5px var(--pw-bone); }
.mf-pw .mf-pw-row__th img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 0; }
.mf-pw .mf-pw-row__txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mf-pw .mf-pw-row__t { font: 600 calc(var(--pw-u) * 1.45)/1.25 var(--pw-disp); color: var(--pw-bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-pw .mf-pw-row__s { font-size: calc(var(--pw-u) * 1.3); line-height: 1.3; color: var(--pw-bone-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-pw .mf-pw-row__w { display: inline-flex; align-items: center; gap: 6px; font: 600 calc(var(--pw-u) * 1.05)/1 var(--pw-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--pw-bone); }
.mf-pw .mf-pw-row__w::before { content: ""; width: 8px; height: 8px; border-radius: var(--pw-r-ctl); box-shadow: inset 0 0 0 1.5px var(--pw-bone); }
.mf-pw .mf-pw-row__p { grid-area: p; justify-self: end; font: 700 calc(var(--pw-u) * 1.5)/1 var(--pw-disp); color: var(--pw-bone); font-variant-numeric: tabular-nums; }
.mf-pw .mf-pw-row__q { grid-area: q; justify-self: start; margin-left: calc(var(--pw-u) * 8.4); }
.mf-pw .mf-pw-row__rm { grid-area: rm; min-height: 44px; min-width: 44px; margin: 0; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: 600 calc(var(--pw-u) * 1.05)/1 var(--pw-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--pw-bone-3); border-radius: var(--pw-r-tip); }
.mf-pw .mf-pw-row__rm:hover { color: var(--pw-bone); }
.mf-pw .mf-pw-row__rm:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pw-ink), 0 0 0 4px var(--pw-bone); }
@media (max-width: 860px) {
  .mf-pw .mf-pw-row__th { width: 56px; height: 56px; }
  .mf-pw .mf-pw-row__q { margin-left: calc(56px + var(--pw-u) * 1.2); }
  .mf-pw .mf-pw-scope__opt { min-height: 44px; padding: 0 14px; letter-spacing: .12em; }
}
/* Q5: with Back + Next + "Add 3 to cart" the desktop bar ran 17 px past its own edge at 1728 (the 26vw column is
   449 px there; single-photo "Add to cart" already ran 2 px over). photo-builder.js fitBar() measures it: when the
   last button would cross the bar's padding, Back steps out (.is-tight below); button sizes stay P5's. */
.mf-pw .mf-pw-bar.is-tight [data-pw-back] { display: none; }
/* the set's steppers are a hairline pill with no fill (rows carry no boxes) */
.mf-pw .mf-pw-set .mf-pw-qty__row { background: transparent; box-shadow: inset 0 0 0 var(--pw-hl) var(--pw-line-2); }
/* Q5 item 16: every control >= 44 px on the phone — a finished step's one-line head was 40 (print wizard only) */
.omtb-pb.mf-pw .mf-pw-panel[data-pw-state="done"] .mf-pw-panel__btn { min-height: 44px; }
/* Q5 critic r2: a long set scrolled through the 16 px under the floating bar — the gap below it is Ink, so only the
   bar floats; and a phone Review row shows the whole title on two lines (its number is what differs) */
@media (min-width: 861px) {
  .omtb-pb.mf-pw .mf-pw-bar::after { content: ""; position: absolute; left: -4px; right: -4px; top: 100%; height: 16px; background: var(--pw-ink); pointer-events: none; }
  /* a 4 px Ink ring round the bar, so the Review card's side hairlines stop at the bar instead of showing in its corners */
  .omtb-pb.mf-pw .mf-pw-bar { box-shadow: inset 0 0 0 var(--pw-hl) var(--pw-line-2), 0 0 0 4px var(--pw-ink), 0 18px 40px -20px rgba(0, 0, 0, .8); }
}
.mf-pw .mf-pw-row__t { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-wrap: pretty; }