/* ============================================================
   GRAINATION — FILM DEVELOPING ORDER BUILDER  (PPOM-shaped)
   Scoped to .fdb-*. Loads after fullframe.css + subpage.css.
   Single vertical column of question sections (progressive
   disclosure) + live "Your Order" summary. Regular + NERD tiers.
   Cobalt on light only · acid on the dark summary only.
   ============================================================ */

.fdb-wrap{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:clamp(24px,3vw,40px);align-items:start;}

/* preview toggle (demo affordance — two PPOM products share one layout) */
.fdb-preview{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:3px;background:var(--bone);padding:11px 15px;margin-bottom:6px;}
.fdb-preview .pv-k{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);}
.fdb-seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden;}
.fdb-seg button{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--paper);color:var(--ink);border:0;padding:8px 15px;cursor:pointer;transition:background .14s,color .14s;}
.fdb-seg button[aria-pressed="true"]{background:var(--cobalt);color:#fff;}
.fdb-preview .pv-note{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--mut);margin-left:auto;text-transform:uppercase;}

/* member badge near the form head */
.fdb-mbadge{display:none;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt);margin-bottom:14px;}
.fdb-mbadge i{width:7px;height:7px;border-radius:50%;background:var(--cobalt);}
body.nerd .fdb-mbadge{display:inline-flex;}

/* ---- form + sections (auto-renumbered via CSS counters) ---- */
.fdb-form{counter-reset:sec;min-width:0;}
.fdb-sec{display:none;border-top:1px solid var(--line);padding:clamp(22px,3vw,32px) 0;}
.fdb-sec.on{display:block;counter-increment:sec;}
.fdb-sec:first-of-type{border-top:0;padding-top:4px;}
.fdb-q{display:flex;align-items:baseline;gap:14px;margin:0 0 4px;}
.fdb-q::before{content:counter(sec,decimal-leading-zero);font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.1em;color:var(--cobalt);flex:none;padding-top:6px;}
.fdb-q h2{font-family:var(--grot);font-weight:800;font-size:clamp(21px,3vw,30px);letter-spacing:-.02em;line-height:1.02;margin:0;}
.fdb-help{font-family:var(--sans);font-size:13px;line-height:1.5;color:#5a5852;margin:2px 0 16px 32px;max-width:60ch;}

/* ---- option cards ---- */
.fdb-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-left:32px;}
.fdb-opts.two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}

/* format picker — smart bento: 35mm hero · 120 + Disposable popular · rest small. No empty space. */
.fdb-opts.fdb-fmt{grid-template-columns:repeat(12,1fr);grid-auto-rows:1fr;
  grid-template-areas:
    "m m m m m m a a a a a a"
    "m m m m m m b b b b b b"
    "c c c d d d e e e f f f";}
.fdb-fmt .fdb-opt:nth-child(1){grid-area:m;min-height:154px;padding:34px 20px 18px;}
.fdb-fmt .fdb-opt:nth-child(2){grid-area:a;padding-top:32px;}
.fdb-fmt .fdb-opt:nth-child(3){grid-area:b;padding-top:32px;}
.fdb-fmt .fdb-opt:nth-child(4){grid-area:c;}
.fdb-fmt .fdb-opt:nth-child(5){grid-area:d;}
.fdb-fmt .fdb-opt:nth-child(6){grid-area:e;}
.fdb-fmt .fdb-opt:nth-child(7){grid-area:f;}
.fdb-fmt .fdb-opt:nth-child(1) .o-t{font-size:clamp(22px,2.4vw,28px);}
.fdb-fmt .fdb-opt:nth-child(1) .o-d{font-size:13px;}
/* tier badges (no markup change) */
.fdb-fmt .fdb-opt:nth-child(1)::before,
.fdb-fmt .fdb-opt:nth-child(2)::before,
.fdb-fmt .fdb-opt:nth-child(3)::before{position:absolute;top:14px;left:16px;
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.fdb-fmt .fdb-opt:nth-child(1)::before{content:"Most shot";color:var(--cobalt);}
.fdb-fmt .fdb-opt:nth-child(2)::before,
.fdb-fmt .fdb-opt:nth-child(3)::before{content:"Popular";color:var(--mut);}
.fdb-fmt .fdb-opt.sel:nth-child(1),
.fdb-fmt .fdb-opt.sel:nth-child(2),
.fdb-fmt .fdb-opt.sel:nth-child(3){padding-left:20px;}
@media(max-width:900px){
  .fdb-opts.fdb-fmt{grid-template-columns:repeat(4,1fr);
    grid-template-areas:"m m a a" "m m b b" "c c d d" "e e f f";}
}
@media(max-width:520px){
  .fdb-opts.fdb-fmt{grid-template-columns:1fr 1fr;
    grid-template-areas:"m m" "a b" "c d" "e f";}
  .fdb-fmt .fdb-opt:nth-child(1){min-height:0;}
}
.fdb-opt{position:relative;display:flex;flex-direction:column;gap:5px;
  border:1.5px solid var(--line);border-radius:2px;background:var(--paper);
  padding:15px 16px 14px;cursor:pointer;min-height:44px;transition:border-color .14s,background .14s,box-shadow .16s;}
.fdb-opt input{position:absolute;opacity:0;width:0;height:0;}
.fdb-opt:hover{border-color:var(--ink);box-shadow:3px 4px 0 -1px rgba(19,19,19,.10);}
.fdb-opt .o-t{font-family:var(--grot);font-weight:800;font-size:15px;letter-spacing:-.01em;text-transform:uppercase;padding-right:26px;}
.fdb-opt .o-d{font-family:var(--sans);font-size:12px;line-height:1.45;color:#6a685f;}
.fdb-opt .o-p{margin-top:auto;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding-top:6px;}
.fdb-opt .o-p.inc{color:var(--mut);}
/* check square — non-colour cue (glyph) top-right */
.fdb-opt .o-tick{position:absolute;top:12px;right:12px;width:19px;height:19px;border:1.5px solid var(--line);border-radius:2px;
  display:flex;align-items:center;justify-content:center;transition:background .14s,border-color .14s;}
.fdb-opt .o-tick::after{content:"✓";font-size:12px;font-weight:800;color:#fff;opacity:0;transform:scale(.5);transition:opacity .14s,transform .14s;}
/* selected — cobalt border + pale fill + filled check + inset bar (not colour alone) */
.fdb-opt.sel{border-color:var(--cobalt);border-width:2px;background:#eef3ff;box-shadow:inset 3px 0 0 var(--cobalt);padding-left:15px;}
.fdb-opt.sel .o-tick{background:var(--cobalt);border-color:var(--cobalt);}
.fdb-opt.sel .o-tick::after{opacity:1;transform:scale(1);}
.fdb-opt:focus-within{outline:2px solid var(--cobalt);outline-offset:2px;}
.fdb-opt[hidden]{display:none;}

/* member price tag (NERD tier) — strikethrough regular + member price */
.fdb-opt .o-mtag{display:none;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.fdb-opt .o-mtag s{color:var(--mut);text-decoration:line-through;margin-right:6px;font-weight:400;}
.fdb-opt .o-mtag b{color:var(--cobalt);}
body.nerd .fdb-opt.has-save .o-p{display:none;}
body.nerd .fdb-opt.has-save .o-mtag{display:block;margin-top:auto;padding-top:6px;}

/* ---- advanced sub-panel (quiet tier) ---- */
.fdb-adv{margin:14px 0 0 32px;border:1px solid var(--line);border-radius:3px;background:var(--bone);padding:16px 16px 4px;}
.fdb-adv[hidden]{display:none;}
.fdb-sub{margin-bottom:16px;}
.fdb-sub .s-h{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:9px;display:flex;gap:8px;align-items:baseline;}
.fdb-sub .s-h .s-hint{color:var(--mut);font-weight:400;letter-spacing:.04em;}
.fdb-sub .fdb-opts{margin-left:0;}
.fdb-sub[hidden]{display:none;}

/* push/pull — pill row */
.fdb-pills{display:flex;flex-wrap:wrap;gap:8px;}
.fdb-pill{position:relative;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);
  padding:9px 15px;cursor:pointer;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;transition:border-color .14s,background .14s;}
.fdb-pill input{position:absolute;opacity:0;width:0;height:0;}
.fdb-pill .p-p{color:var(--mut);}
.fdb-pill:hover{border-color:var(--ink);}
.fdb-pill.sel{border-color:var(--cobalt);border-width:2px;background:#eef3ff;padding:8px 14px;}
.fdb-pill.sel .p-p{color:var(--cobalt);}
.fdb-pill:focus-within{outline:2px solid var(--cobalt);outline-offset:2px;}

/* push / pull — stepped slider */
.fdb-ppslider{max-width:540px;}
.pps-read{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;}
.pps-read .pps-name{font-family:var(--grot);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:-.01em;}
.pps-read .pps-price{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt);}
.pps-track{position:relative;height:34px;cursor:pointer;touch-action:none;}
.pps-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);background:var(--line-2);border-radius:2px;}
.pps-fill{position:absolute;left:0;top:50%;height:3px;transform:translateY(-50%);background:var(--cobalt);border-radius:2px;width:20%;transition:width .18s cubic-bezier(.4,0,.2,1);}
.pps-tick{position:absolute;top:50%;width:2px;height:8px;transform:translate(-50%,-50%);background:var(--line-2);border-radius:1px;}
.pps-knob{position:absolute;top:50%;left:20%;width:22px;height:22px;transform:translate(-50%,-50%);background:#fff;border:2px solid var(--cobalt);border-radius:50%;box-shadow:0 1px 5px rgba(0,0,0,.2);transition:left .18s cubic-bezier(.4,0,.2,1);z-index:2;}
.pps-track:focus-visible{outline:2px solid var(--cobalt);outline-offset:5px;border-radius:6px;}
.pps-labels{position:relative;height:13px;margin-top:12px;}
.pps-labels span{position:absolute;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--mut);white-space:nowrap;transform:translateX(-50%);transition:color .14s;}
.pps-labels span:nth-child(1){left:0;transform:none;}
.pps-labels span:nth-child(2){left:20%;}
.pps-labels span:nth-child(3){left:40%;}
.pps-labels span:nth-child(4){left:60%;}
.pps-labels span:nth-child(5){left:80%;}
.pps-labels span:nth-child(6){left:100%;transform:translateX(-100%);}
.pps-labels span.on{color:var(--cobalt);}
.pps-inputs{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0;pointer-events:none;}
@media(prefers-reduced-motion:reduce){.pps-fill,.pps-knob{transition:none;}}

/* checkbox add-on row */
.fdb-check{display:flex;align-items:center;gap:12px;margin-left:32px;border:1.5px solid var(--line);border-radius:2px;
  background:var(--paper);padding:14px 16px;cursor:pointer;transition:border-color .14s,background .14s;position:relative;}
.fdb-check input{position:absolute;opacity:0;width:0;height:0;}
.fdb-check .o-tick{width:19px;height:19px;border:1.5px solid var(--line);border-radius:2px;flex:none;display:flex;align-items:center;justify-content:center;}
.fdb-check .o-tick::after{content:"✓";font-size:12px;font-weight:800;color:#fff;opacity:0;transform:scale(.5);transition:opacity .14s,transform .14s;}
.fdb-check.sel{border-color:var(--cobalt);border-width:2px;background:#eef3ff;}
.fdb-check.sel .o-tick{background:var(--cobalt);border-color:var(--cobalt);}
.fdb-check.sel .o-tick::after{opacity:1;transform:scale(1);}
.fdb-check .c-t{font-family:var(--grot);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:-.01em;}
.fdb-check .c-d{font-family:var(--sans);font-size:12px;color:#6a685f;}
.fdb-check .c-p{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;color:var(--ink);}
.fdb-check[hidden]{display:none;}

/* ---- totals + quantity + add to cart (PPOM footer) ---- */
.fdb-foot{border-top:1.5px solid var(--ink);margin-top:8px;padding-top:20px;}
.fdb-qty{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.fdb-qty .q-l{font-family:var(--grot);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:-.01em;}
.fdb-qty .q-l small{display:block;font-family:var(--sans);font-weight:400;font-size:12px;text-transform:none;color:#6a685f;letter-spacing:0;margin-top:2px;}
.fdb-stepper{display:inline-flex;border:1.5px solid var(--ink);border-radius:2px;overflow:hidden;}
.fdb-stepper button{width:44px;height:44px;border:0;background:var(--paper);font-size:19px;cursor:pointer;color:var(--ink);}
.fdb-stepper button:hover{background:var(--bone);}
.fdb-stepper input{width:52px;height:44px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;font-family:var(--mono);font-size:15px;font-weight:700;-moz-appearance:textfield;}
.fdb-stepper input::-webkit-outer-spin-button,.fdb-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* ---- live "Your Order" summary — dark panel (desktop) ---- */
.fdb-sum{position:sticky;top:88px;background:var(--void);color:#fff;border-radius:4px;overflow:hidden;}
.fdb-sum-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #242424;}
.fdb-sum-h .sh-k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);}
.fdb-sum-h .sh-live{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acid);display:inline-flex;align-items:center;gap:6px;}
.fdb-sum-h .sh-live i{width:6px;height:6px;border-radius:50%;background:var(--acid);}
.fdb-rows{padding:8px 18px;min-height:60px;}
.fdb-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid #1c1c1c;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;}
.fdb-row:last-child{border-bottom:0;}
.fdb-row .r-k{color:rgba(255,255,255,.82);text-transform:uppercase;}
.fdb-row .r-k small{display:block;color:rgba(255,255,255,.4);font-size:9.5px;letter-spacing:.06em;margin-top:2px;}
.fdb-row .r-v{color:#fff;white-space:nowrap;}
.fdb-row .r-v.inc{color:rgba(255,255,255,.4);}
.fdb-empty{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.4);text-transform:uppercase;padding:14px 0;line-height:1.6;}
.fdb-tot{padding:14px 18px;border-top:1px solid #242424;}
.fdb-save{display:none;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;margin-bottom:12px;
  border:1px solid rgba(182,255,0,.34);border-radius:3px;background:rgba(182,255,0,.07);}
.fdb-save .sv-k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acid);}
.fdb-save .sv-v{font-family:var(--grot);font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--acid);}
.fdb-save.teaser{border-style:dashed;background:transparent;}
.fdb-save.teaser .sv-v{display:none;}
body.nerd .fdb-save{display:flex;}
.fdb-tot-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.fdb-tot-row .t-k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);}
.fdb-tot-row .t-v{font-family:var(--grot);font-weight:900;font-size:32px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.fdb-tot .t-note{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:4px;}
.fdb-sum-cta{padding:0 18px 18px;}
.fdb-sum-cta .qc{width:100%;justify-content:center;}
/* dark machine surface → acid accent (colour protocol): CTA on the void panels is acid/ink, press flips black↔acid
   Design source: ui_kits/fullframe/fd-builder.css (+8, design-sync 2026-07-19), shipped 2026-07-22 (WO-006).
   DEVIATION from the design file's exact text: the press/focus declarations carry !important. The design
   assumes these are the only press rules, but Button Study v3 asserts the generic contact-flip
   (`.qc.accent.press{background:#FBFAF6 !important}`) from gn2-base.css — so shipped verbatim, every rule
   below the first two would have been silently inert. Both important, specificity decides, and
   `.fdb-sum-cta .qc.accent:active` (0,4,0) outranks `.qc.accent.press` (0,3,0). */
.fdb-sum-cta .qc.accent,.fdb-bar-cta .qc.accent{background:var(--acid);border-color:var(--acid);color:var(--ink);}
.fdb-sum-cta .qc.accent .arw,.fdb-bar-cta .qc.accent .arw{color:var(--ink);}
.fdb-sum-cta .qc.accent:active,.fdb-sum-cta .qc.accent.press,.fdb-sum-cta .qc.accent.tapped,
.fdb-bar-cta .qc.accent:active,.fdb-bar-cta .qc.accent.press,.fdb-bar-cta .qc.accent.tapped{background:var(--void) !important;border-color:var(--acid) !important;color:var(--acid) !important;}
.fdb-sum-cta .qc.accent:active .arw,.fdb-sum-cta .qc.accent.press .arw,.fdb-sum-cta .qc.accent.tapped .arw,
.fdb-bar-cta .qc.accent:active .arw,.fdb-bar-cta .qc.accent.press .arw,.fdb-bar-cta .qc.accent.tapped .arw{color:var(--acid) !important;}
.fdb-sum-cta .qc.accent:focus-visible,.fdb-bar-cta .qc.accent:focus-visible{outline:2px solid var(--acid);outline-offset:3px;}
/* …and the same press flip against the markup the builder ACTUALLY emits (round 27).
   fd-builder.js/PPOM generate `<button type="button" data-review><span>…</span></button>` — no `.qc
   accent` classes — and the order-builder handoff puts that generated markup off limits, so the skin
   comes to the markup rather than the other way round. The rules above are kept for the day the two
   agree; these are the ones that fire today.
   Scope is press/focus ONLY: rest-state acid is already correct on both visible CTAs (verified live —
   desktop `.fdb-sum-cta` at 1440, mobile `.fdb-bar-cta` at 390), so re-asserting it would be churn.
   No !important needed: the v3 contact-flip that forced it on the `.qc` form only matches `.qc`, and
   nothing else defines a state for these buttons. border-color is set for completeness but is not
   visible — these buttons compute border-width:0; the flip the eye sees is acid bg → void bg with the
   label inheriting acid (the label <span> carries no colour of its own). */
.fdb-sum-cta button[data-review]:active,.fdb-sum-cta button[data-review].press,.fdb-sum-cta button[data-review].tapped,
.fdb-bar-cta button[data-add-m]:active,.fdb-bar-cta button[data-add-m].press,.fdb-bar-cta button[data-add-m].tapped{background:var(--void);border-color:var(--acid);color:var(--acid);}
.fdb-sum-cta button[data-review]:focus-visible,.fdb-bar-cta button[data-add-m]:focus-visible{outline:2px solid var(--acid);outline-offset:3px;}

/* ---- mobile bottom bar ---- */
.fdb-bar{display:none;}
@media(max-width:900px){
  .fdb-wrap{grid-template-columns:1fr;}
  .fdb-sum{display:none;}
  .fdb-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--void);color:#fff;
    border-top:1px solid #2a2a2a;box-shadow:0 -12px 30px -18px rgba(0,0,0,.6);}
  .fdb-bar-top{display:flex;align-items:center;gap:14px;padding:12px 16px;cursor:pointer;}
  .fdb-bar-tot{font-family:var(--grot);font-weight:900;font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
  .fdb-bar-save{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--acid);display:none;}
  body.nerd .fdb-bar-save{display:inline;}
  .fdb-bar-exp{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:8px;}
  .fdb-bar-cta{padding:0 16px 14px;}
  .fdb-bar-cta .qc{width:100%;justify-content:center;height:50px;}
  .fdb-bar-rows{display:none;padding:4px 16px 10px;max-height:44vh;overflow:auto;}
  .fdb-bar.open .fdb-bar-rows{display:block;}
  .fdb-bar .fdb-row{border-bottom-color:#1c1c1c;}
  .fdb-form{padding-bottom:150px;}
  .fdb-opts,.fdb-help,.fdb-adv,.fdb-check{margin-left:0;}
  .fdb-q::before{padding-top:5px;}
}
@media(max-width:460px){
  .fdb-opts:not(.fdb-fmt),.fdb-opts.two{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .fdb-opt,.fdb-opt .o-tick,.fdb-opt .o-tick::after,.fdb-check .o-tick::after{transition:none;}
}

/* WO-008 (2026-07-23) — Flextight hyper-res pixelated cobalt fire. Verbatim from design
   fd-builder.css; makeFire() in fd-builder.js mounts the canvas + adds .fdb-firehost. */
/* ---- Flextight hyper-resolution: pixelated cobalt fire (blue = hottest flame) ---- */
/* fire lives INSIDE the hyper-res option card: above its opaque selected fill, below the text */
.fdb-firehost{position:relative;overflow:hidden;}
.fdb-firehost > .o-t,.fdb-firehost > .o-d,.fdb-firehost > .o-p,.fdb-firehost > .o-mtag{position:relative;z-index:2;}
.fdb-firehost > .o-t{padding-right:38px;}
.fdb-firehost > .o-tick{position:absolute;top:12px;right:12px;z-index:2;}
.fdb-fire{position:absolute;top:0;right:0;bottom:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;opacity:.96;pointer-events:none;z-index:1;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%);}
@media (prefers-reduced-motion:reduce){.fdb-fire{opacity:.85;}}

/* ── Film-format picker fix · Neil mobile review 2026-07-27 ─────────────────
   The live film-developing builder is PPOM-rendered (product 108959, #ppom-box-20).
   Its film-format .fdb-opts never receives the `fdb-fmt` class that the generated
   #fdb-form path (fd-builder.js:218 → [data-sec="film"]) would add, because that
   markup doesn't exist here. Result: the option cards carry named grid-areas
   (m/a/b/c/d/e/f) but the container has no matching grid-template, so they collapse
   to uneven implicit columns (~82px/242px) on mobile — the "squished cards" defect.
   Bind the designed bento template directly to the live PPOM selector at every
   breakpoint (mirrors .fdb-opts.fdb-fmt above). Appended last so it wins the
   @460 `:not(.fdb-fmt){1fr}` collapse on source order. */
.ppom-input-film_format .fdb-opts{grid-template-columns:repeat(12,1fr);grid-auto-rows:1fr;
  grid-template-areas:"m m m m m m a a a a a a" "m m m m m m b b b b b b" "c c c d d d e e e f f f";}
@media(max-width:900px){.ppom-input-film_format .fdb-opts{grid-template-columns:repeat(4,1fr);
  grid-template-areas:"m m a a" "m m b b" "c c d d" "e e f f";}}
@media(max-width:520px){.ppom-input-film_format .fdb-opts{grid-template-columns:1fr 1fr;
  grid-template-areas:"m m" "a b" "c d" "e f";}}

/* ── Film-dev add-to-cart · Neil defect 1c (2026-07-28) ─────────────────────
   The LIVE builder is PPOM (#ppom-box-20); its add-to-cart is the raw Woo
   .single_add_to_cart_button (.button.alt = theme black) inside .fdb-wrap › form.cart › .fdb-foot.
   The designed cobalt .qc.accent#fdb-add lives on the GENERATED #fdb-form, which is dead here.
   Measured: bg #131313 / white at rest AND active (no press treatment). Style the real button as the
   designed full-width cobalt bar — cobalt/white at rest, paper/cobalt on press (matches .qc.accent
   line 393). Scoped to the builder; !important beats the theme .button.alt default. */
.fdb-wrap form.cart .single_add_to_cart_button.button.alt{background-color:var(--cobalt)!important;border:1px solid var(--cobalt)!important;color:#fff!important;width:100%;justify-content:center;}
.fdb-wrap form.cart .single_add_to_cart_button.button.alt:hover{background-color:var(--cobalt-700)!important;border-color:var(--cobalt-700)!important;}
.fdb-wrap form.cart .single_add_to_cart_button.button.alt:active{background-color:var(--paper)!important;border-color:var(--paper)!important;color:var(--cobalt)!important;}
.fdb-wrap .single_add_to_cart_button:focus-visible{outline:2px solid var(--cobalt)!important;outline-offset:2px;}