/* AI Photographer embed: shared styles. Tokens follow the approved brand (O-output/aiphotographer/10-brand.md, 2026-09-10). */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@700&display=swap");

:root {
  --accent: #123F8C;          /* Passport Blue: links, primary (advance) buttons, selected states */
  --accent-dark: #0C2D68;     /* hover and pressed on primary */
  --accent-soft: #E8EEF9;     /* selected-card tint */
  --cta: #E9740F;             /* Shutter Orange: the pay button and the shutter confirm only */
  --cta-hover: #D5680B;
  --cta-press: #C25E0A;
  --cta-edge: rgba(12, 45, 104, 0.25);
  --ground: #F4F6FA;          /* Canvas */
  --ink: #16213A;
  --muted: #4B5568;           /* Slate */
  --rule: #D9DDE3;
  --rule-soft: #EEF1F5;
  --radio: #C5CAD3;
  --disabled: #C5CAD3;
  --good: #147A3F;            /* Pass Green */
  --warn: #D98E04;            /* Caution Amber, always with ink text and the dark border */
  --warn-edge: #8A5A00;
  --warn-soft: #FBF1DC;
  --bad: #C8321F;             /* Fail Red */
  --bad-soft: #FBEAE7;
  --white: #fff;
  --font-body: "Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-head: "Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-cam: "Atkinson Hyperlegible Next", "Public Sans", Arial, sans-serif;
  --halo: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink), 0 0 2px var(--ink);
  --tap: 44px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ground);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
button { font: inherit; color: inherit; }
img, video, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Focus is always visible: 2px Shutter Orange outside a 2px white gap, the same on blue, white and the camera */
:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white); }
.cam :focus-visible { outline-color: var(--cta); }

.h { font-family: var(--font-head); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
.mono { font-family: ui-monospace, Menlo, monospace; }
.muted { color: var(--muted); }
.good { color: var(--good); }
.warn { color: var(--warn-edge); }
.bad { color: var(--bad); }

/* App shell */
#app { min-height: 100vh; display: flex; flex-direction: column; }
.view { display: flex; flex-direction: column; min-height: 100vh; width: 100%; max-width: 520px; margin: 0 auto; background: var(--ground); position: relative; }
.view.wide { max-width: none; }
/* Inside the store's iframe the widget reports its own height to the page (views.js), so nothing here may stretch to the frame */
html.framed body, html.framed #app, html.framed .view:not(.cam) { min-height: 0; }
.skel-bar { display: inline-block; width: 200px; height: 26px; border-radius: 6px; background: linear-gradient(90deg, var(--rule-soft), var(--rule), var(--rule-soft)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* Picker: the URL asked for a photo type the service does not have */
.picker { gap: 10px; }
.picker .pick { height: auto; min-height: 64px; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 20px; text-align: left; border-radius: 16px; }
.picker .pick .lbl { font-size: 17px; }
.picker .pick .muted { font-weight: 400; font-size: 14px; }

/* Header row with back arrow */
.top { display: flex; align-items: center; gap: 10px; padding: 18px 20px 8px; }
.top .h { font-size: 16px; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border: 0; background: transparent; border-radius: 10px; cursor: pointer; margin-left: -11px; color: var(--accent); }
.iconbtn:hover { background: var(--accent-soft); }

/* Sections */
.sec { padding: 12px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.sec.tight { gap: 6px; }
h1.h { font-size: 32px; line-height: 1.125; font-weight: 800; text-wrap: balance; }
.price-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-line .big { font-size: 28px; }
.price-line .muted { font-size: 16px; }

/* Buttons. Primary (advance, continue, retake as the safe default) is Passport Blue. */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; height: 52px; border-radius: 999px; border: 0; background: var(--accent); color: var(--white); font-weight: 600; font-size: 17px; cursor: pointer; padding: 0 20px; text-decoration: none; }
.btn:hover { background: var(--accent-dark); }
.btn:active { background: var(--accent-dark); }
.btn:disabled { background: var(--disabled); color: var(--muted); cursor: not-allowed; }
.btn.tall { height: 56px; font-size: 18px; }
/* Shutter Orange is for money and for the shutter confirm only: Pay, "Use this photo". Ink text, never white. One per screen. */
.btn#pay, .btn.cta { background: var(--cta); color: var(--ink); border: 1px solid var(--cta-edge); }
.btn#pay:hover, .btn.cta:hover { background: var(--cta-hover); }
.btn#pay:active, .btn.cta:active { background: var(--cta-press); }
.btn#pay:disabled, .btn.cta:disabled { background: var(--disabled); color: var(--muted); border-color: transparent; }
/* Secondary: white, 1.5px Passport Blue border, Passport Blue text */
.btn2 { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; height: 48px; border-radius: 999px; border: 1.5px solid var(--accent); background: var(--white); color: var(--accent); font-weight: 600; font-size: 16px; cursor: pointer; padding: 0 20px; text-decoration: none; }
.btn2:hover { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-dark); }
.btn2.ghost { background: transparent; border: 1.5px solid var(--accent); }
.btn2.ghost:hover { background: var(--white); }
.btn2.small { height: 44px; min-height: 44px; font-size: 15px; }
.btn.small { height: 44px; min-height: 44px; font-size: 14px; padding: 0 18px; width: auto; }
.btn-row { display: flex; gap: 10px; }
.btn-row > * { flex: 1; }
.inline-btn { width: auto; }

/* Cards: white, 1px rule, radius 12 */
.card { border: 1px solid var(--rule); border-radius: 12px; padding: 14px; background: var(--white); display: flex; gap: 12px; align-items: center; }
.card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.panel { background: var(--white); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.panel .h { font-size: 16px; }
.note { display: flex; gap: 12px; align-items: center; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; font-size: 16px; line-height: 1.35; }
.note svg { flex: 0 0 auto; color: var(--accent); }
.tick { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; }
.tick svg { flex: 0 0 18px; margin-top: 3px; color: var(--good); }
.center { text-align: center; }
/* Text floor: body 16px, helper and fine print never under 14px */
.small { font-size: 14px; }
.tiny { font-size: 14px; }

/* Radio cards (real radio inputs, visually a dot) */
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--radio); flex: 0 0 22px; }
.choice input:checked ~ .dot { border: 7px solid var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.choice:has(input:focus-visible) { outline: 2px solid var(--cta); outline-offset: 2px; }
.choice .body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.choice .title { font-weight: 600; font-size: 16px; }
.choice .desc { font-size: 14px; color: var(--muted); }
.choice .price { font-family: var(--font-head); font-weight: 700; font-size: 17px; }

/* Checkbox rows */
.check-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; cursor: pointer; font-size: 16px; line-height: 1.35; }
.check-row input { width: 22px; height: 22px; margin: 0; flex: 0 0 22px; accent-color: var(--accent); }

/* Chips (toggle buttons for marketplaces and options; not status chips) */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1.5px solid var(--rule); background: var(--white); border-radius: 999px; padding: 0 16px; min-height: var(--tap); font-size: 14px; font-weight: 600; cursor: pointer; color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.chip:disabled { opacity: 0.6; cursor: default; }

/* Inputs */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 14px; }
.input { height: var(--tap); border: 1.5px solid var(--rule); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 16px; background: var(--white); color: var(--ink); width: 100%; }
.input:focus { border-color: var(--accent); }
.row { display: flex; gap: 8px; align-items: center; }
.row .input { flex: 1; }

/* Drop zone */
.drop { border: 2px dashed var(--accent); border-radius: 14px; background: var(--white); padding: 26px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.drop.over { background: var(--accent-soft); }
.drop .h { font-size: 17px; }

/* Sample grid */
.samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.samples button { aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--rule); background: var(--white); padding: 0; cursor: pointer; }
.samples button svg, .samples button img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Preview block with watermark and dimension overlay */
.preview-row { display: flex; gap: 14px; align-items: center; }
.preview-box { position: relative; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; flex: 0 0 132px; width: 132px; height: 132px; background: var(--white); }
.preview-box.portrait { height: 165px; }
.preview-box img { width: 100%; height: 100%; object-fit: cover; }
.preview-box .wm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.preview-box .wm span { transform: rotate(-30deg); font-size: 22px; font-weight: 700; color: rgba(22, 33, 58, 0.22); letter-spacing: 0.12em; }
.preview-box svg.dims { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.checks { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.checks .summary { font-size: 14px; color: var(--muted); }
.checks .summary button { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font-size: inherit; min-height: 24px; }
.before-after { display: flex; gap: 12px; align-items: stretch; }
.before-after > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.before-after .label { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.before-after .frame { aspect-ratio: 1; border-radius: 6px; overflow: hidden; border: 1px solid var(--rule); position: relative; background: var(--white); }
.before-after .frame.after { border: 1.5px solid var(--accent); }
.before-after .frame img { width: 100%; height: 100%; object-fit: contain; }

/* Full check list */
.check-list { display: flex; flex-direction: column; gap: 0; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.check-list .item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-top: 1px solid var(--rule-soft); font-size: 14px; }
.check-list .item:first-child { border-top: 0; }
.check-list .item svg { flex: 0 0 18px; margin-top: 2px; }
.check-list .fix { color: var(--muted); font-size: 14px; }
.fail-card { background: var(--bad-soft); border: 1.5px solid var(--bad); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.fail-card .h { font-size: 16px; color: var(--bad); }
.warn-card { background: var(--warn-soft); border: 1.5px solid var(--warn-edge); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.warn-card .h { font-size: 16px; color: var(--warn-edge); }

/* Delivery sub-panels (attach under the selected card) */
.subpanel { margin: -6px 0 0; border: 1.5px solid var(--accent); border-top: 0; border-radius: 0 0 12px 12px; background: var(--white); overflow: hidden; display: flex; flex-direction: column; }
.subpanel .head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--rule); font-size: 16px; }
.subpanel .head .input { height: 40px; }
.map { height: 170px; background: var(--rule-soft); }
/* "Finding locations near you": shown in the map box and the list while the location and the store search run */
.finding { display: flex; align-items: center; justify-content: center; gap: 10px; height: 100%; min-height: 44px; color: var(--muted); font-size: 14px; }
.finding .ring { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--accent); border-top-color: transparent; flex: 0 0 22px; animation: spin 0.9s linear infinite; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; min-height: 0; }
.stores { display: flex; flex-direction: column; }
.store { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-top: 1px solid var(--rule-soft); cursor: pointer; position: relative; min-height: var(--tap); }
.store:first-child { border-top: 0; }
.store input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.store .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--radio); flex: 0 0 22px; }
.store input:checked ~ .dot { border: 7px solid var(--accent); }
.store:has(input:checked) { background: var(--accent-soft); }
.store:has(input:focus-visible) { outline: 2px solid var(--cta); outline-offset: -3px; }
.store .body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.store .name { font-weight: 600; font-size: 16px; }
.store .meta { font-size: 14px; color: var(--muted); }
.store .ready { font-size: 14px; white-space: nowrap; color: var(--muted); }
.store:has(input:checked) .ready { font-weight: 600; color: var(--good); }
.subpanel .pad { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.prints { display: flex; gap: 8px; }
.prints .choice { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1.5px solid var(--rule); border-radius: 8px; padding: 8px; text-align: center; font-size: 14px; background: var(--white); min-height: var(--tap); }
.prints .choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.prints .choice .dot { display: none; }
.prints .choice .sub { font-size: 14px; color: var(--muted); }

/* Sticky pay bar: white so the orange button edge clears 3:1 */
.spacer { flex: 1; }
.paybar { position: sticky; bottom: 0; background: var(--white); padding: 12px 20px 26px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: 14px; color: var(--muted); }

/* Processing */
.processing { align-items: center; gap: 22px; padding: 40px 24px; }
.processing .h { font-size: 24px; }
.thumb { width: 200px; height: 200px; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); position: relative; background: var(--white); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .sweep { position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, rgba(18, 63, 140, 0.35), rgba(18, 63, 140, 0)); animation: sweep 2.4s ease-in-out infinite; }
@keyframes sweep { 0% { top: 0; } 50% { top: 60%; } 100% { top: 0; } }
.steps { width: 100%; display: flex; flex-direction: column; }
.step { display: flex; gap: 14px; align-items: center; padding: 12px 0; font-size: 17px; color: var(--muted); }
.step .ring { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--radio); flex: 0 0 28px; display: flex; align-items: center; justify-content: center; }
.step.done .ring { background: var(--good); border-color: var(--good); }
.step.active { color: var(--ink); font-weight: 600; }
.step.active .ring { border: 3px solid var(--accent); border-top-color: transparent; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Listing pack card (product photos, after payment) */
.lpack .lform { display: grid; gap: 10px; }
.lpack .lform label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.lpack .lform .input { width: 100%; box-sizing: border-box; }
.lpack .pack { display: grid; gap: 10px; margin-top: 4px; }
.lpack .mk { border-top: 1px solid var(--rule); padding-top: 10px; display: grid; gap: 8px; }
.lpack .mkh { font-weight: 700; font-size: 16px; }
.lpack .fld { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: start; }
.lpack .fld .lbl { grid-column: 1 / 3; font-size: 13px; color: var(--muted); }
.lpack .fld .val { font-size: 15px; line-height: 1.45; background: var(--ground); border-radius: 8px; padding: 8px 10px; min-width: 0; overflow-wrap: anywhere; }
.lpack .fld .val.pre { white-space: pre-wrap; }
.lpack .fld .copy { font: inherit; font-size: 14px; font-weight: 600; padding: 0 12px; min-height: 40px; height: 40px; border: 1.5px solid var(--accent); color: var(--accent); background: var(--white); border-radius: 999px; cursor: pointer; }

/* Camera view. Text over the feed is white with an ink halo; chips are solid, never translucent. */
.cam { position: fixed; inset: 0; background: #0E1013; color: #fff; display: flex; flex-direction: column; z-index: 20; max-width: none; min-height: 0; }
.cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam video.mirror { transform: scaleX(-1); }
.cam canvas.overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cam .bar { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 0; z-index: 2; }
.cam .bar .title { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-family: var(--font-cam); text-shadow: var(--halo); }
.cam .bar .title b { font-weight: 700; font-size: 16px; }
.cam .bar .title span { color: #fff; font-size: 14px; }
.cam .bar .title span.guide { font-size: 14px; line-height: 1.3; max-width: 260px; }
.cam .iconbtn { color: #fff; margin: 0; background: rgba(22, 33, 58, 0.55); border-radius: 50%; }
.cam .iconbtn:hover { background: rgba(22, 33, 58, 0.8); }
/* Live guidance layout. The state pill sits directly under the header, the ready dot in the top right corner, the chips in a
   narrow column on the right edge below them, over the oval's right edge and never over the face (the oval is centered on the screen).
   No scrim band over the oval. The hold-to-override note lives inside the shutter bar. */
.cam { --ctl-h: 150px; }
.cam .vf-top { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 8px 48px 0; }
.cam .vf-top .status:empty { display: none; }
.cam .pill { background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px 12px; font-family: var(--font-cam); font-weight: 700; font-size: 14px; display: inline-flex; gap: 8px; align-items: center; min-height: 28px; max-width: 100%; line-height: 1.25; box-shadow: 0 2px 6px rgba(22, 33, 58, 0.45); }
.cam .pill #pillText { text-align: center; }
.cam .pill .led { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); border: 1.5px solid var(--warn-edge); display: inline-block; flex: 0 0 10px; }
.cam .pill.ok { background: var(--good); color: var(--white); border-color: var(--white); }
.cam .pill.ok .led { background: var(--white); border-color: var(--white); }
/* Ready dot: the shutter's twin. .ok = Pass Green with a check, .off = Fail Red with an X. Ink halo so it reads on any feed. */
.cam .ready-dot { position: absolute; right: 12px; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--ink), 0 2px 6px rgba(22, 33, 58, 0.5); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cam .ready-dot.ok { background-color: var(--good); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5 6.5 12.5 13.5 4' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cam .hints { position: relative; z-index: 2; align-self: flex-end; width: 120px; margin: 6px 8px 0 auto; pointer-events: none; }
.cam .chiprow { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* Camera chips: Atkinson Hyperlegible Next 700, 12px, 22px tall, solid fill, 1.5px ink outline, icon plus word, each on its own pill,
   at most the lane's 120px (a long label ellipsizes; the full text is in the title). ok = Pass Green with a check, no = Fail Red with an X,
   anything else = Caution Amber (adjust) with a triangle. */
.cam .cchip { display: block; max-width: 100%; min-height: 22px; border-radius: 999px; padding: 2px 8px 2px 6px; font-family: var(--font-cam); font-size: 12px; font-weight: 700; line-height: 16px; color: var(--ink); background: var(--warn); border: 1.5px solid var(--ink); box-shadow: 0 2px 6px rgba(22, 33, 58, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam .cchip::before { content: ""; display: inline-block; vertical-align: -1px; width: 11px; height: 11px; margin-right: 4px; background-repeat: no-repeat; background-size: 11px 11px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 15 14H1z' fill='none' stroke='%2316213A' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.5' stroke='%2316213A' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12' r='1.1' fill='%2316213A'/%3E%3C/svg%3E"); }
.cam .cchip.ok { background: var(--good); color: var(--white); }
.cam .cchip.ok::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5 6.5 12.5 13.5 4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cam .cchip.no { background: var(--bad); color: var(--white); }
.cam .cchip.no::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cam .controls { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ctl-h); display: flex; justify-content: space-between; align-items: center; padding: 0 28px 12px; z-index: 2; background: rgba(22, 33, 58, 0.7); }
.cam .ctl { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: #fff; font-family: var(--font-cam); font-weight: 700; font-size: 14px; cursor: pointer; padding: 0; min-width: var(--tap); text-shadow: var(--halo); }
.cam .ctl .box { width: var(--tap); height: var(--tap); border-radius: 10px; background: rgba(255, 255, 255, 0.18); border: 1.5px solid rgba(255, 255, 255, 0.6); display: flex; align-items: center; justify-content: center; }
.cam .ctl .box.round { border-radius: 50%; }
.cam .ctl .box.on { background: var(--accent); border-color: var(--white); }
.cam .shutter { width: 78px; height: 78px; border-radius: 50%; border: 5px solid #fff; background: transparent; box-shadow: 0 0 0 1.5px var(--ink), inset 0 0 0 1.5px var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.cam .shutter span { width: 60px; height: 60px; border-radius: 50%; background: #fff; opacity: 0.7; display: block; }
.cam .shutter:hover span, .cam .shutter:focus-visible span { opacity: 1; }
/* The hold-to-override note: a second small line inside the shutter bar, under the shutter, only while not ready */
.cam .controls .hold-note { position: absolute; left: 12px; right: 12px; bottom: 5px; font-size: 12px; line-height: 1.25; text-shadow: none; color: rgba(255, 255, 255, 0.92); }
.cam .controls { padding-bottom: 34px; }
@media (max-height: 720px) {
  .cam { --ctl-h: 128px; }
  .cam .shutter { width: 64px; height: 64px; }
  .cam .shutter span { width: 48px; height: 48px; }
  .cam .controls { padding-bottom: 30px; }
}
@media (max-height: 620px) {
  .cam .bar { padding-top: 8px; }
  .cam .bar .title span { font-size: 13px; }
  .cam .vf-top { padding-top: 4px; }
  .cam .pill { min-height: 26px; font-size: 13px; }
}
.cam .countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-cam); font-size: 120px; font-weight: 700; color: #fff; text-shadow: var(--halo), 0 2px 20px rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 3; }
.cam .flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 4; }
.cam .flash.go { animation: flash 0.35s ease-out; }
@keyframes flash { 0% { opacity: 0.9; } 100% { opacity: 0; } }
.cam .loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-cam); font-weight: 700; font-size: 16px; text-shadow: var(--halo); z-index: 1; }

/* Review view */
.review-img { width: 100%; max-height: 60vh; object-fit: contain; background: #0E1013; border-radius: 12px; }

/* Desktop layout */
.desk-head { border-bottom: 1px solid var(--rule); background: var(--white); }
.desk-head .in { display: flex; justify-content: space-between; align-items: center; padding: 22px 64px; max-width: 1240px; margin: 0 auto; }
.desk-head .brand { font-size: 20px; }
.desk-head nav { display: flex; gap: 28px; font-size: 16px; font-weight: 600; }
.desk-head nav a { text-decoration: none; color: var(--muted); }
.desk-head nav a:hover { color: var(--accent-dark); }
.desk-head nav a[aria-current="page"] { color: var(--ink); }
.desk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding: 56px 64px 40px; align-items: start; max-width: 1240px; margin: 0 auto; width: 100%; }
.desk-grid h1.h { font-size: 48px; }
.desk-grid .price-line .big { font-size: 30px; }
.desk-grid .price-line .muted { font-size: 16px; }
.desk-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.qr-card { background: var(--white); border: 1.5px solid var(--accent); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.qr-card .h { font-size: 18px; }
.qr-card .qr { padding: 8px; border: 1px solid var(--rule); border-radius: 10px; width: 194px; height: 194px; background: var(--white); }
.qr-card .qr img { width: 176px; height: 176px; }
.qr-card .waiting { font-size: 14px; color: var(--accent); font-weight: 600; }
.qr-card .or { width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.qr-card .or div { flex: 1; height: 1px; background: var(--rule); }
.qr-card .sms { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.upload-card { background: var(--white); border: 2px dashed var(--radio); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.upload-card.over { border-color: var(--accent); background: var(--accent-soft); }
.upload-card .h { font-size: 18px; }
.desk-steps { padding: 8px 64px 48px; max-width: 1240px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.desk-steps .panel h3 { font-size: 16px; margin: 0 0 6px; }
.desk-steps .panel p { margin: 0; font-size: 16px; color: var(--muted); }
.desk-result { max-width: 520px; margin: 0 auto; width: 100%; }
@media (max-width: 960px) {
  .desk-grid { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
  .desk-grid h1.h { font-size: 36px; }
  .desk-head .in { padding: 16px 24px; }
  .desk-head nav { display: none; }
  .desk-steps { grid-template-columns: 1fr; padding: 8px 24px 40px; }
}
@media (max-width: 640px) { .desk-cards { grid-template-columns: 1fr; } }

/* Status and error text */
.status { font-size: 14px; color: var(--muted); min-height: 1.2em; }
.status.error { color: var(--bad); }
.error-view { padding: 40px 24px; gap: 14px; align-items: flex-start; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .thumb .sweep, .step.active .ring, .cam .flash.go, .skel-bar { animation: none; }
  .step.active .ring { border-top-color: var(--accent); }
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Fallback for browsers without :has(): the script mirrors the checked state onto the label */
.choice.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.choice.on .dot { border: 7px solid var(--accent); }
.prints .choice.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.store.on { background: var(--accent-soft); }
.store.on .dot { border: 7px solid var(--accent); }
.store.on .ready { font-weight: 600; color: var(--good); }

/* Product listing set (dormant): marketplace chips, the set card, tiles, batch upload review */
.set-card .h { font-size: 16px; }
.shotlist { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.shotlist li::marker { color: var(--muted); }
.tiles { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; }
.tile { flex: 0 0 92px; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; text-align: center; }
.tile .box { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--white); border: 2px dashed var(--radio); display: flex; align-items: center; justify-content: center; color: var(--muted); font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.tile.done .box { border: 2px solid var(--good); }
.tile.current .box { box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 3.5px var(--accent); }
.tile .box img { width: 100%; height: 100%; object-fit: cover; }
.tile .lbl { font-size: 14px; line-height: 1.2; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; }
.tile.done .lbl { color: var(--ink); font-weight: 600; }
.tile.todo { cursor: default; }
.batch { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.batch .item { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--rule-soft); font-size: 14px; }
.batch .item:first-child { border-top: 0; }
.batch .item img { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; border: 1px solid var(--rule); flex: 0 0 56px; }
.batch .item .muted { font-size: 14px; }
.btn2[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent-dark); }