/* Before and After Photo Maker: live canvas card, two photo slots, layout / size / colour pickers. */
.ba-wrap { --st-c: #1F5EFF; --st-on: #fff; }
.ba-wrap .st-top { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.ba-board { margin: 0; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 16px; }
.ba-board canvas { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 28px 46px -26px rgba(20,20,40,.55); background: var(--bg-card-subtle); }
.ba-board.ba-tall canvas { max-width: 320px; margin-inline: auto; }
.ba-board figcaption { font-size: 13px; line-height: 1.45; color: var(--ink-muted); text-align: center; }
.ba-for { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-light); color: var(--accent-ink); font-size: 14px; line-height: 1.45; }
.ba-for[hidden] { display: none; }
.ba-for a { color: inherit; font-weight: 700; }
.ba-drops { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ba-drop { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 2px dashed var(--outline); border-radius: 16px; background: var(--bg-card); cursor: pointer; transition: border-color .15s ease; }
.ba-drop:hover, .ba-drop.is-over { border-color: var(--accent); }
.ba-drop:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.ba-drop.has-photo { border-style: solid; }
.ba-drop-pic { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--bg-card-subtle); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ba-drop-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-drop-pic img[hidden] { display: none; }
.ba-plus { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 28px/46px var(--font-body); text-align: center; }
.ba-drop.has-photo .ba-plus { display: none; }
.ba-drop-t b { display: block; font: 800 17px/1.2 var(--font-display); color: var(--ink-primary); }
.ba-drop-t small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-secondary); }
.ba-mini { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: -8px; }
.ba-link { min-height: 40px; padding: 0; border: 0; background: none; color: var(--accent-ink); font: 600 14px var(--font-body); text-decoration: underline; cursor: pointer; }
.ba-link[hidden] { display: none; }
.ba-sw { width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.ba-sw-cream { background: #F7F6F2; }
.ba-sw-night { background: #141417; }
.ba-sw-blue { background: #1F5EFF; }
.ba-checks { display: flex; flex-direction: column; gap: 2px; }
.ba-check { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14.5px; font-weight: 600; color: var(--ink-primary); cursor: pointer; }
.ba-check input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.ba-wrap .st-acts .st-btn { min-height: 50px; padding: 0 22px; font-size: 15.5px; }

@media (max-width: 860px) {
  .ba-wrap .st-top { grid-template-columns: 1fr; }
  .ba-board { position: static; max-width: 400px; width: 100%; margin-inline: auto; }
}