/* Studio (customer order page) in the same look as the landing page. Loaded after app.css; light only. */
:root:root {
  color-scheme: light;
  --bg: #fffdfa;
  --surface: #ffffff;
  --surface-2: #f4eee6;
  --ink: #22302d;
  --ink-2: #52605c;
  --ink-3: #7f8b87;
  --line: #e2dcd2;
  --accent: #c2532f;
  --accent-ink: #ffffff;
  --accent-soft: #fbe6dc;
  --teal: #1e6f6a;
  --teal-soft: #e5f0ec;
  --teal-deep: #17403c;
  --mint: #e5f0ec;
  --warn: #9a6416; --warn-soft: #fbf0d9;
  --bad: #b3261e; --bad-soft: #fbe3e1;
  --good: #2e7d32; --good-soft: #e3f1e3;
  --radius: 16px;
  --hand: 'Sriracha', 'IBM Plex Sans Thai', cursive;
}
body { background: var(--bg); color: var(--ink); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
@media (min-width: 700px) { .wrap { padding: 0 28px; } }

/* ---------- nav (same as the landing page) ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(255, 253, 250, .92); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 20px; height: 62px; }
.nav .brand { font-size: 1.05rem; color: var(--teal-deep); }
.nav .brand-mark { width: 30px; height: 30px; font-size: .82rem; }
.nav-links { margin-left: auto; display: flex; gap: 4px; }
.nav-links a { text-decoration: none; color: var(--ink-2); padding: 6px 12px; border-radius: 8px; font-size: .97rem; }
.nav-links a:hover { color: var(--ink); background: var(--mint); }
.nav .brand, .nav-links a { white-space: nowrap; }
@media (max-width: 520px) { .nav-links { gap: 0; } .nav-links a { padding: 6px 8px; font-size: .9rem; } .nav-links a[href="/"] { display: none; } }

/* ---------- page header ---------- */
.s-hero { background: var(--mint); position: relative; overflow: hidden; }
.s-hero::before { content: ''; position: absolute; width: 760px; height: 760px; right: -200px; top: -420px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0)); pointer-events: none; }
.s-hero .wrap { position: relative; padding-top: 36px; padding-bottom: 34px; }
.s-hero h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem); line-height: 1.25; font-weight: 700; color: var(--teal-deep); margin: 0; }
.s-hero p { margin: 10px 0 0; color: var(--ink-2); max-width: 40em; font-size: 1.04rem; line-height: 1.7; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; padding: 28px 0 72px; align-items: start; }
.side { position: sticky; top: 80px; }
@media (max-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr); } .side { position: static; } } /* minmax(0,…): a wide scroller inside must not widen the page */
.layout > * { min-width: 0; }
.stack > * + * { margin-top: 16px; }

/* ---------- cards & steps ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: 0 1px 2px rgba(23,64,60,.04); }
.step-title { gap: 12px; margin-bottom: 16px; }
.step-num { width: 32px; height: 32px; background: var(--mint); color: var(--teal-deep); font-weight: 700; font-size: .95rem; }
.step-title h2, .preview-card h2 { font-size: 1.16rem; font-weight: 700; color: var(--teal-deep); }

/* chips: chosen = deep teal */
.chip { border-color: var(--line); background: #fff; color: var(--ink); padding: 8px 15px; font-size: .93rem; transition: border-color .15s, background .15s; }
.chip:hover { border-color: var(--teal); }
.chip.on { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.size-chip { border-radius: 12px; padding: 7px 15px; text-align: center; line-height: 1.3; }
.size-chip small { display: block; font-size: .74rem; opacity: .8; }

/* buttons */
.btn { border-radius: 12px; min-height: 42px; padding: 9px 18px; font-weight: 500; border-color: var(--line); }
.btn:hover { border-color: var(--teal); }
.btn.primary { background: var(--accent); border-color: var(--accent); box-shadow: 0 6px 16px rgba(194, 83, 47, .22); }
.btn.primary:hover { background: #ab4626; filter: none; }
.btn.primary:disabled { box-shadow: none; }
.btn.big { min-height: 54px; font-size: 1.06rem; font-weight: 600; }
.btn.ghost { border-color: var(--teal-deep); color: var(--teal-deep); }

/* drop zones */
.drop { border: 1.5px dashed #a9c9c0; background: #f3f9f7; border-radius: 14px; padding: 24px 18px; color: var(--ink-2); transition: border-color .15s, background .15s; }
.drop:hover { border-color: var(--teal); background: var(--mint); color: var(--ink); }
.drop strong { color: var(--teal-deep); font-size: 1.04rem; }

/* fields */
label.field > span { font-size: .9rem; color: var(--ink-2); }
input[type=text], input[type=url], input[type=email], input[type=tel], select, textarea { width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; }
input[type=text]:focus, input[type=url]:focus, input[type=email]:focus, input[type=tel]:focus, textarea:focus, select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(30,111,106,.15); }
input[type=range] { accent-color: var(--teal); }
.cropbox { border-radius: 12px; max-width: 460px; margin-inline: auto; } /* keeps a tall portrait crop from filling the whole screen */
.video-ctrl { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.video-ctrl .time { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--ink-2); min-width: 86px; text-align: right; }
/* trim bar: tap/drag to seek, drag the two pins to choose where the video starts and ends */
.trim-box { background: #f3f9f7; border: 1px solid #cfe2dc; border-radius: 12px; padding: 14px 16px; }
.trim-box .video-ctrl { margin-top: 0; }
.trim { position: relative; height: 46px; touch-action: none; cursor: pointer; outline: none; }
.trim:focus-visible { box-shadow: 0 0 0 3px rgba(30,111,106,.25); border-radius: 8px; }
.trim > i { position: absolute; top: 50%; transform: translateY(-50%); display: block; pointer-events: none; }
.trim-track { left: 0; right: 0; height: 8px; border-radius: 99px; background: #d9e6e1; }
.trim-sel { height: 8px; background: var(--teal); }
.trim-head { width: 3px; height: 30px; margin-left: -1.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(16,48,44,.55); }
.trim-box .video-ctrl { align-items: flex-start; }
.trim-box #playBtn { margin-top: 1px; }
.trim-col { display: flex; flex-direction: column; min-width: 0; }
.trim-ends { display: flex; justify-content: space-between; margin-top: -4px; font-size: .84rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.trim-len { font-weight: 700; color: var(--teal-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trim-box > .trim-hint { margin: 2px 0 0; }
.pin-ico { display: inline-block; width: 10px; height: 15px; border-radius: 3px; background: var(--teal-deep); vertical-align: -2px; }
/* step 4: the picture that is printed, with its own slider */
.pick { margin-top: 12px; }
.pick-empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; }
.pick-body { display: grid; grid-template-columns: minmax(100px, 38%) minmax(0, 1fr); gap: 12px 14px; align-items: start; }
.pick-body[hidden] { display: none; }
.pick-view { border-radius: 10px; overflow: hidden; background: #111; box-shadow: 0 1px 5px rgba(0,0,0,.18); }
.pick-view canvas { display: block; width: 100%; height: auto; }
.pick-side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.pick-side b { color: var(--teal-deep); font-variant-numeric: tabular-nums; }
.pick-side p { margin: 0; }
.pick-sec { display: block; font-variant-numeric: tabular-nums; }
.pick-side .btn[hidden] { display: none; }
.pick-scrub { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.pick-scrub input[type=range] { flex: 1 1 auto; min-width: 0; height: 32px; margin: 0; }
.pick-step { flex: none; width: 44px; min-height: 40px; padding: 0; font-size: 1.35rem; line-height: 1; }
.trim-h { position: absolute; top: 50%; width: 22px; height: 38px; margin-left: -11px; transform: translateY(-50%); border-radius: 8px;
  background: var(--teal-deep); box-shadow: 0 2px 6px rgba(23,64,60,.3); cursor: ew-resize; touch-action: none; }
.trim-h::before, .trim-h::after { content: ''; position: absolute; top: 11px; bottom: 11px; width: 2px; border-radius: 1px; background: rgba(255,255,255,.75); }
.trim-h::before { left: 7px; } .trim-h::after { right: 7px; }
.trim-h.dragging { background: var(--accent); }
/* fixed widths: the bar must not change size while the time text changes (pins would drift under the finger) */
.video-ctrl .time { flex: none; min-width: 0; width: 10ch; white-space: nowrap; }
#playBtn { flex: none; width: 44px; padding-inline: 0; }
@media (max-width: 520px) { .video-ctrl .time { font-size: .78rem; } .trim-btns .btn { flex: 1 1 auto; } }
.badge { background: var(--surface-2); }
.badge.teal { background: var(--mint); color: var(--teal-deep); }

/* frame templates + colours */
.frame-pick > * + * { margin-top: 10px; }
.frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.frame-tile { position: relative; appearance: none; border: 2px solid transparent; border-radius: 12px; background: #f6f2ec; padding: 6px 6px 5px; cursor: pointer; font: inherit; color: var(--ink-2); text-align: center; transition: border-color .15s, transform .15s; }
.frame-tile:hover { border-color: #b8d3cb; transform: translateY(-2px); }
.frame-tile.on { border-color: var(--teal-deep); background: #fff; color: var(--teal-deep); }
.frame-tile canvas { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 1px 3px rgba(23,64,60,.2); background: #eee; }
.frame-tile span { display: block; font-size: .78rem; margin-top: 5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame-tile.on span { font-weight: 600; }
.frame-tile .tag { position: absolute; top: 2px; right: 2px; font-size: .62rem; font-weight: 600; background: var(--accent); color: #fff; border-radius: 6px; padding: 1px 5px; }
@media (max-width: 560px) {
  .frame-grid { display: flex; overflow-x: auto; gap: 8px; padding: 2px 2px 8px; margin-inline: -2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .frame-tile { flex: 0 0 76px; scroll-snap-align: start; }
}
.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatch { appearance: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,0,0,.14); background: var(--c); cursor: pointer; padding: 0; position: relative; box-shadow: 0 0 0 2px #fff, 0 0 0 2px transparent; transition: box-shadow .15s; }
.swatch.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--teal-deep); }
.swatch.auto { width: auto; border-radius: 99px; padding: 0 12px 0 32px; font: inherit; font-size: .8rem; color: var(--ink); background: #fff; }
.swatch.auto::before { content: ''; position: absolute; left: 6px; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0,0,0,.14); }
.swatch.custom { background: conic-gradient(#e94f6b, #f6a623, #f3e05a, #3fae6a, #2bb3c0, #7b61c9, #e94f6b); overflow: hidden; }
.swatch.custom.on { background: var(--c); }
.swatch.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.swatch.custom::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.1rem; text-shadow: 0 1px 2px rgba(0,0,0,.4); pointer-events: none; }
.swatch.custom.on::after { content: '✎'; font-size: .9rem; }

/* shop-only settings, shown on the shop's computer */
.shop-box { border: 1.5px dashed #d9cfc1; background: #faf7f2; border-radius: 12px; padding: 14px 16px; }
.shop-label { margin: 0 0 10px; font-size: .86rem; font-weight: 600; color: var(--ink-3); }

/* ---------- preview: the print lying on the mint table ---------- */
.preview-wrap { position: relative; background: var(--mint); border-radius: 14px; padding: 26px; display: grid; place-items: center; overflow: hidden; }
.preview-wrap::before { content: ''; position: absolute; inset: -40% -20% auto auto; width: 120%; height: 120%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,0)); pointer-events: none; }
.preview-wrap canvas { position: relative; max-width: 100%; max-height: 60vh; height: auto; border-radius: 2px; background: #fff;
  box-shadow: 0 1px 2px rgba(23,64,60,.18), 0 12px 26px rgba(23,64,60,.16), 0 30px 60px rgba(23,64,60,.1); }
/* in a frame ("ลองใส่กรอบ"): the canvas holds the frame too and is see-through around acrylic and the stand's
   base, so the shadow follows the object's own outline */
.preview-wrap canvas#preview.framed { background: transparent; box-shadow: none; border-radius: 0;
  filter: drop-shadow(0 1px 1.5px rgba(23,64,60,.22)) drop-shadow(0 10px 16px rgba(23,64,60,.16)) drop-shadow(0 24px 36px rgba(23,64,60,.08)); }
.preview-wrap .dots { position: absolute; pointer-events: none; box-shadow: none; background: transparent; }
.preview-wrap .fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; pointer-events: none; box-shadow: none; background: transparent; border-radius: 0; z-index: 1; }
/* 2D / 3D switch, and the 3D card the customer can turn around */
.view-toggle { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border-radius: 999px; }
.view-toggle button { appearance: none; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: .84rem; font-weight: 600;
  min-width: 44px; min-height: 30px; padding: 2px 12px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.view-toggle button:hover { color: var(--ink); }
.view-toggle button.on { background: var(--teal-deep); color: #fff; }
.view-toggle button:disabled { cursor: progress; opacity: .7; }
@media (max-width: 460px) { .preview-head > h2 { flex-basis: 100%; } } /* title on its own line, switch + size below */
.preview-wrap.is-3d > #preview { visibility: hidden; }
.preview-wrap.is-3d > .fx-canvas, .preview-wrap.is-3d > .dots { display: none; }
.preview-wrap .p3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; box-shadow: none; background: transparent;
  border-radius: 0; z-index: 2; cursor: grab; touch-action: pan-y; outline-offset: -3px; }
.preview-wrap:not(.is-3d) .p3d-canvas { display: none; }
.preview-wrap .p3d-canvas.grabbing { cursor: grabbing; }
.stack > .p3d-bar { margin-top: 10px; }
.p3d-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.p3d-bar .p3d-hint { flex: 1 1 auto; }
.p3d-bar .chip { padding: 6px 13px; font-size: .86rem; }
/* once they have turned it (or opened the gift), make room for the buttons */
.p3d-stage.p3d-touched:not(.p3d-wrapped) + .p3d-bar .p3d-hint, .p3d-stage.p3d-unwrapped + .p3d-bar .p3d-hint { display: none; }
/* gift wrap on the 3D card: "tap to unwrap" while wrapped, a rewrap button once it is open */
.p3d-bar .h-wrap, .p3d-bar #p3dRewrap { display: none; }
.p3d-stage.p3d-wrapped + .p3d-bar .h-turn { display: none; }
.p3d-stage.p3d-wrapped + .p3d-bar .h-wrap { display: inline; color: var(--teal-deep); font-weight: 600; }
.p3d-stage.p3d-unwrapped + .p3d-bar #p3dRewrap { display: inline-block; }
.hand-note { margin: 0; font-family: var(--hand); color: var(--teal); font-size: 1.05rem; line-height: 1.4; }

/* progress + result */
.progress { background: var(--surface-2); }
.progress > i { background: var(--teal); }
.steps-list li.done { color: var(--teal); }
.progress-text { margin: 0; color: var(--teal-deep); font-weight: 500; }
.progress-text.bad { color: var(--bad); }
.result-links { display: grid; gap: 8px; }
.order-done { background: var(--mint); border-radius: 14px; padding: 18px; }
.order-done .k { margin: 0; font-weight: 600; color: var(--teal); }
.order-done .id { margin: 4px 0 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 1.7rem; font-weight: 700; color: var(--teal-deep); letter-spacing: .01em; }
.order-done .id .btn { font-size: .88rem; min-height: 34px; padding: 4px 12px; background: #fff; }
.order-done p { margin: 0 0 12px; color: var(--ink-2); line-height: 1.65; }
.order-done p:last-child { margin-bottom: 0; }

/* footer */
.foot { background: #d6e7e1; color: var(--ink-2); font-size: .92rem; }
.foot-in { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; padding-top: 20px; padding-bottom: 24px; }
.foot a { color: var(--ink-2); }

/* price summary */
.price-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; font-size: .97rem; }
.price-box .row { gap: 12px; }
.price-box .total { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 4px; font-weight: 700; color: var(--teal-deep); font-size: 1.12rem; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.stepper button { appearance: none; border: 0; background: #fff; width: 40px; height: 40px; font-size: 1.2rem; color: var(--teal-deep); cursor: pointer; }
.stepper button:hover { background: var(--mint); }
.stepper input[type=number] { width: 64px; height: 40px; border: 0; border-inline: 1px solid var(--line); border-radius: 0; text-align: center; font: inherit; font-weight: 600; padding: 0; box-shadow: none; }

/* ---------- packages ---------- */
.pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 620px) { .pkg-grid { grid-template-columns: minmax(0, 1fr); } }
.pkg { appearance: none; position: relative; text-align: left; font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 16px 14px 14px; cursor: pointer; display: grid; gap: 2px; align-content: start; transition: border-color .15s, box-shadow .15s, background .15s; }
.pkg:hover { border-color: var(--teal); }
.pkg.on { border-color: var(--teal-deep); background: #f3f9f7; box-shadow: 0 0 0 2px var(--teal-deep) inset; }
.pkg-name { font-size: 1rem; color: var(--teal-deep); }
.pkg-price { font-size: 1.55rem; font-weight: 700; line-height: 1.2; color: var(--ink); }
.pkg ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .86rem; color: var(--ink-2); line-height: 1.45; }
.pkg li { padding-left: 18px; position: relative; }
.pkg li::before { content: '✓'; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.pkg-badge { position: absolute; top: -10px; right: 10px; font-style: normal; font-size: .74rem; font-weight: 600; background: var(--accent); color: #fff; border-radius: 99px; padding: 2px 9px; }
.pkg.on .pkg-name::after { content: ' ✓'; }
@media (max-width: 620px) {
  .pkg { grid-template-columns: 1fr auto; column-gap: 12px; padding: 14px; }
  .pkg-price { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 1.35rem; }
  .pkg ul { grid-column: 1 / -1; margin-top: 6px; }
}
.set-banner { background: var(--mint); border-radius: 12px; padding: 12px 14px; line-height: 1.6; color: var(--teal-deep); }
.set-banner a { color: var(--teal-deep); font-weight: 600; }
.pkg-grid:not([hidden]) + .set-banner { margin-top: 12px; }
/* the photos of a set: made (picture + ✓), being made, still to make */
.set-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; margin: 10px 0 8px; max-width: 360px; }
.set-slot { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; border: 1.5px dashed #b9d6cd; background: #fff; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--ink-3); overflow: hidden; }
.set-slot b { font-size: 1.15rem; line-height: 1; }
.set-slot small { font-size: .72rem; line-height: 1.2; }
.set-slot.now { border: 2px solid var(--teal-deep); color: var(--teal-deep); background: #f3faf7; }
.set-slot.done { border: 1px solid #cfe2dc; padding: 0; }
.set-slot.done img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.set-slot.done i { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--teal-deep); color: #fff; font-style: normal; font-size: .72rem; display: grid; place-items: center; }
.set-slot.done small { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.88); color: var(--ink-2); padding: 2px 0; }
.price-box .set-note { color: var(--teal-deep); font-weight: 600; }
/* step 1: give up the set (back to choosing a package) */
.step-title .set-cancel { margin-left: auto; }
.set-cancel[hidden] { display: none; }
/* a saved photo can be tapped to edit it; the one being edited is outlined */
a.set-slot { text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a.set-slot:active { transform: scale(.97); }
a.set-slot:not(.done) { border-color: var(--teal-deep); color: var(--teal-deep); }
.set-slot.done.editing { outline: 3px solid var(--teal-deep); outline-offset: 1px; }
.set-slot.done.editing i { background: var(--accent, #c2532f); }
.set-slot.done.editing small { color: var(--teal-deep); font-weight: 600; }
/* arriving from the previous photo: its ✓ and the new photo's slot pop in */
.set-banner.arrive .set-slot.now { animation: set-pop .7s cubic-bezier(.2,.8,.3,1.25) .25s both; }
.set-banner.arrive .set-slot.last i { animation: set-tick .5s cubic-bezier(.2,.8,.3,1.4) .05s both; }
@keyframes set-pop { from { transform: scale(.82); opacity: .3; } }
@keyframes set-tick { from { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) { .set-banner.arrive .set-slot.now, .set-banner.arrive .set-slot.last i { animation: none; } }

/* a feature the chosen package doesn't have, with an upgrade button */
.lock-note { background: var(--warn-soft); color: #6b4a12; border-radius: 12px; padding: 10px 14px; font-size: .92rem; line-height: 1.6; }
.lock-note .up-btn { display: inline-flex; margin: 6px 0 0; min-height: 34px; padding: 4px 12px; font-size: .88rem; background: #fff; border-color: #e6cf9f; color: var(--teal-deep); font-weight: 600; }
.lock-note.flash { animation: lock-flash .9s ease; }
@keyframes lock-flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--accent); } }
/* frames / colours the chosen package does not include: dimmed, with a lock (tapping offers the upgrade) */
.frame-tile.locked { opacity: .45; filter: grayscale(.6); }
.frame-tile.locked::after { content: '🔒'; position: absolute; left: 4px; top: 3px; font-size: .68rem; line-height: 1; filter: none; }
.swatches.locked .swatch { opacity: .45; filter: grayscale(.6); }
.swatches.locked .swatch.on { opacity: 1; filter: none; }
.caption-fields.locked { opacity: .5; }
/* font of the name / message: one row per style that scrolls sideways; each button shows the customer's text */
.font-title { display: block; font-size: .9rem; color: var(--ink-2); margin-bottom: 4px; }
.font-title small { font-size: .8rem; }
.font-field { min-width: 0; }
.font-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } /* minmax: the rows scroll instead of widening the card */
.font-group-name { display: block; font-size: .76rem; color: var(--ink-3); margin: 0 0 2px 2px; }
.font-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.font-opt { flex: 0 0 140px; min-width: 0; scroll-snap-align: start; appearance: none; text-align: left; font: inherit; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 7px 10px 6px; display: grid; gap: 1px; cursor: pointer; transition: border-color .15s, background .15s; }
.font-opt:hover:not(:disabled) { border-color: var(--teal); }
.font-opt.on { border-color: var(--teal-deep); background: #f3f9f7; box-shadow: inset 0 0 0 1px var(--teal-deep); }
.font-opt:disabled { cursor: not-allowed; }
.font-sample { font-size: 1.14rem; line-height: 1.55; color: #1f1b16; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.font-opt small { font-size: .72rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trim-cut { height: 8px; border-radius: 0 99px 99px 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg, #e7b9a8 0 4px, #f6ddd3 4px 8px); }
.date-row { gap: 10px 16px; }
.date-row input[type=date] { width: auto; min-width: 11em; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .95rem; }
.check input { width: 18px; height: 18px; accent-color: var(--teal-deep); margin: 0; }
.step-aside { margin-left: auto; }

/* ---------- add-ons ---------- */
.addons { display: grid; gap: 10px; }
.addon { border: 1.5px solid var(--line); border-radius: 14px; background: #fff; transition: border-color .15s, background .15s; }
.addon.on { border-color: var(--teal-deep); background: #f3f9f7; }
.addon-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer; }
.addon-row input { width: 20px; height: 20px; flex: none; accent-color: var(--teal-deep); margin: 0; }
.addon-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.addon-text b { font-size: .98rem; color: var(--ink); }
.addon-text small { color: var(--ink-2); font-size: .84rem; line-height: 1.5; }
.addon-price { font-weight: 700; color: var(--teal-deep); white-space: nowrap; }
.addon-more { padding: 0 14px 14px 46px; display: grid; gap: 10px; }
@media (max-width: 520px) { .addon-more { padding-left: 14px; } }
.addon-more textarea { width: 100%; font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; resize: vertical; background: #fff; color: var(--ink); }
.addon-more .btn.ghost { justify-self: start; }
.gift-names { gap: 10px; }
.gift-names .field { min-width: 9em; }

/* "ลองใส่กรอบ": physical frame options under the preview (the frame itself is drawn in 3D) */
.stack > .phys { margin-top: 14px; }
.phys { display: grid; gap: 10px; }
.phys-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.phys-head b { font-size: 1rem; }
.phys-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.phys-opt { position: relative; appearance: none; text-align: left; font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 10px 11px 9px; display: grid; gap: 2px; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.phys-opt:hover:not(:disabled) { border-color: var(--teal); }
.phys-opt:active:not(:disabled) { transform: scale(.98); }
.phys-opt.on { border-color: var(--teal-deep); background: #f3f9f7; box-shadow: inset 0 0 0 1px var(--teal-deep); }
.phys-opt b { font-size: .9rem; line-height: 1.3; }
.phys-opt small { font-size: .76rem; color: var(--ink-2); line-height: 1.35; }
.phys-opt .phys-price { font-size: .84rem; font-weight: 600; color: var(--teal-deep); margin-top: 3px; }
.phys-opt:disabled { cursor: not-allowed; opacity: .55; background: var(--surface-2); }
.phys-badge { position: absolute; top: -8px; right: 8px; font-style: normal; font-size: .68rem; font-weight: 600; background: var(--accent, #c2532f); color: #fff; padding: 1px 8px; border-radius: 999px; }
.phys-info { margin: 0; }
@media (max-width: 420px) { .phys-list { grid-template-columns: 1fr 1fr; } }

/* delivery address (shown when a print + frame is chosen) */
.ship-box { border: 1.5px solid var(--teal-deep); border-radius: 14px; padding: 12px 14px 14px; margin: 4px 0 0; display: grid; gap: 10px; background: #f6fbf9; scroll-margin-top: 84px; }
.ship-box.flash { animation: ship-flash 1.6s ease .35s; }
@keyframes ship-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(30,111,106,0); } 25%, 60% { box-shadow: 0 0 0 4px rgba(30,111,106,.35); } }
@media (prefers-reduced-motion: reduce) { .ship-box.flash { animation: none; } }
.ship-box legend { font-weight: 600; padding: 0 6px; }
.ship-box textarea { width: 100%; font: inherit; resize: vertical; min-height: 72px; }
.ship-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ship-zip { max-width: 180px; }
@media (max-width: 480px) { .ship-grid { grid-template-columns: 1fr; } }

/* 3D view: a pop-up window (full screen on phones), so dragging to turn the print never scrolls the page */
html.p3d-lock, html.p3d-lock body { overflow: hidden; }
/* "ชำระเงิน" → the summary first */
.pay-confirm { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 20px; border: 0; border-radius: 18px;
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(20,17,14,.3); overflow: auto; }
.pay-confirm[open] { display: grid; gap: 14px; animation: pc-in .22s ease-out; }
.pay-confirm::backdrop { background: rgba(20, 17, 14, .55); }
@keyframes pc-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pay-confirm[open] { animation: none; } }
.pay-confirm h2 { margin: 0; font-size: 1.2rem; color: var(--teal-deep); }
.pc-head { display: flex; gap: 14px; align-items: center; }
.pc-head canvas { flex: none; width: 76px; height: auto; border-radius: 3px; box-shadow: 0 1px 2px rgba(23,64,60,.18), 0 6px 14px rgba(23,64,60,.14); background: #fff; }
.pc-what { display: grid; gap: 2px; min-width: 0; line-height: 1.45; }
.pc-what b { color: var(--teal-deep); }
.pc-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #f3f9f7; border: 1px solid #cfe2dc; }
.pc-row[hidden] { display: none; }
.pc-ico { font-size: 1.25rem; line-height: 1.3; flex: none; }
.pc-body { display: grid; gap: 2px; min-width: 0; }
.pc-body b { font-size: 1.02rem; color: var(--ink); overflow-wrap: anywhere; }
.pc-mail { font-size: 1.08rem !important; color: var(--teal-deep) !important; }
.pc-edit { justify-self: start; appearance: none; border: 0; background: none; padding: 2px 0; margin-top: 2px; font: inherit; font-size: .86rem; color: var(--teal); text-decoration: underline; cursor: pointer; }
.pc-total { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 2px 0; }
.pc-total span { color: var(--ink-2); }
.pc-total b { font-size: 1.5rem; color: var(--teal-deep); }
.pc-note { margin: -6px 0 0; line-height: 1.55; }
.pc-actions { display: grid; gap: 8px; }

.p3d-modal { width: min(820px, calc(100vw - 32px)); height: min(860px, calc(100dvh - 32px)); max-width: none; max-height: none; padding: 0; border: 0;
  border-radius: 20px; background: #fff; color: var(--ink); overflow: hidden; box-shadow: 0 24px 60px rgba(20,17,14,.35); }
.p3d-modal[open] { display: flex; flex-direction: column; }
.p3d-modal::backdrop { background: rgba(20, 17, 14, .55); }
.p3d-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); }
.p3d-head b { font-size: 1.02rem; }
.p3d-x { appearance: none; border: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 1.05rem; cursor: pointer; flex: none; }
.p3d-x:hover { background: var(--line); }
.p3d-stage { position: relative; flex: 1 1 auto; min-height: 0; background: var(--mint); touch-action: none; overscroll-behavior: contain; -webkit-user-select: none; user-select: none; }
.p3d-stage .p3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; outline-offset: -3px; }
.p3d-stage .p3d-canvas.grabbing { cursor: grabbing; }
.p3d-modal .p3d-bar { padding: 10px 14px; border-top: 1px solid var(--line); }
.p3d-phys { padding: 0 14px calc(12px + env(safe-area-inset-bottom)); }
.p3d-phys:empty { display: none; }
.p3d-phys .phys { margin: 0; gap: 6px; }
.p3d-phys .phys-head { padding-top: 10px; }
/* the frames in one row that scrolls sideways, so the 3D view keeps most of the window */
.p3d-phys .phys-list { display: flex; overflow-x: auto; gap: 8px; padding: 9px 2px 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.p3d-phys .phys-opt { flex: 0 0 146px; scroll-snap-align: start; }
/* wide screens: the frames go in a column on the right, the 3D view keeps the whole height */
@media (min-width: 900px) {
  .p3d-modal { width: min(1120px, calc(100vw - 48px)); height: min(780px, calc(100dvh - 48px)); }
  .p3d-modal[open] { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto minmax(0, 1fr) auto; }
  .p3d-head { grid-column: 1 / -1; }
  .p3d-stage { grid-column: 1; grid-row: 2 / 4; }
  .p3d-phys { grid-column: 2; grid-row: 2; overflow-y: auto; border-left: 1px solid var(--line); padding: 0 16px 14px; }
  .p3d-phys:empty { display: block; }
  .p3d-modal .p3d-bar { grid-column: 2; grid-row: 3; border-left: 1px solid var(--line); justify-content: flex-start; }
  .p3d-phys .phys-list { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; padding-top: 10px; }
  .p3d-phys .phys-opt { flex: none; }
}
@media (max-width: 640px) {
  .p3d-modal { width: 100vw; height: 100dvh; border-radius: 0; box-shadow: none; }
  .p3d-modal .p3d-bar .chip { padding: 6px 11px; }
}

/* the customer's e-mail: a typo in a common domain, or a domain that takes no mail */
.email-hint { margin: -4px 0 0; line-height: 1.6; }
.email-hint.bad { color: var(--bad); }
.email-hint.warn { color: #8a5a12; }
.linkish { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; font-weight: 600; }

/* the "pay by slip" link under the pay button, and the video's upload note (it goes up as soon as it is picked) */
.slip-link { justify-self: center; margin: -2px auto 0; display: block; color: var(--ink-2); }
.pre-up { margin: 0; color: var(--ink-2); }
.pre-up.good { color: var(--good); }
.pre-up.bad { color: #8a5a12; }