/* Phase 6, feature 1 — the home page builder on the merchant side, and the one storefront block the
   merchant writes themselves. The builder is a list of cards: each card is a block, its position is a
   number, and everything else is a field inside it. */
.builder-form{display:grid;gap:16px;margin-bottom:16px}
.builder-note{display:grid;gap:6px}
.builder-note h2{margin:0}
.builder-note p{margin:0}
.builder-list{display:grid;gap:16px}
.builder-block{display:grid;gap:14px}
.builder-block-head{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between}
.builder-block-head h2{margin:0;font-size:1.02rem}
.builder-block-head p{margin:4px 0 0}
.builder-block-head>div{flex:1 1 260px}
.builder-position{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--muted,#78705f)}
.builder-position input{width:74px;min-height:44px;padding:8px 10px;border:1px solid var(--line,#e6ddcd);border-radius:10px;font:inherit;color:inherit}
.builder-fields{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.builder-fields .field-wide{grid-column:1/-1}
.builder-remove{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:.85rem;font-weight:600;color:#b4233c}
.builder-remove input{width:20px;height:20px;margin:0;accent-color:#b4233c}
.builder-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.builder-actions p{margin:0}
.builder-add,.builder-reset{display:grid;gap:10px}
.builder-add h2,.builder-reset h2{margin:0}
.builder-add-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.builder-add-row .field{margin:0;min-width:240px}/* Feature 21 — the share panel on a product page: quiet buttons, a QR a customer can scan, and the
   picture canvas which stays out of the way (it exists to be drawn on and downloaded). */
.product-share{display:grid;gap:14px}
.share-actions{display:flex;flex-wrap:wrap;gap:10px}
.share-actions .button{min-height:44px}
.product-qr{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line,#e6ddcd);border-radius:12px;background:var(--surface,#fff);width:max-content;max-width:100%}
.product-qr canvas{width:120px;height:120px;image-rendering:pixelated}
.product-qr small{color:var(--muted,#78705f);font-size:.82rem}
.share-canvas{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none}
/* The merchant's own block on the shop: plain text, generous line height, never a widowed word. */
.store-info-block .info-block-body{max-width:70ch;line-height:1.7;color:var(--muted,#78705f)}
.store-info-block .info-block-body br+br{margin-top:.6em}

/* The ready-made layout picker on Shop home page. Its rules used to live only in the storefront's
   template.css, which the merchant workspace never loads, so the radios sat flush against their text. */
.builder-presets{display:grid;gap:10px}
.builder-presets h2{margin:0}
.builder-preset-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.builder-preset{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line,#e2e2dd);border-radius:12px;background:#fff;cursor:pointer}
.builder-preset:hover{border-color:#ff5b1f}
.builder-preset:has(input:checked){border-color:#ff5b1f;background:#fff0e9}
.builder-preset input{width:20px;height:20px;margin:2px 0 0;accent-color:#ff5b1f;flex:0 0 auto}
.builder-preset span{display:grid;gap:3px;font-size:.9rem}
.builder-preset small{color:var(--muted,#6b7079);font-weight:500;line-height:1.45}
.builder-image{display:grid;gap:10px;padding:12px;border:1px dashed var(--line,#e6ddcd);border-radius:12px}
.builder-image>img,.builder-image-thumb{max-width:220px;max-height:140px;object-fit:cover;border-radius:10px;border:1px solid var(--line,#e6ddcd)}
.builder-image-empty{color:var(--muted,#6b7079);font-size:.85rem}
.builder-image-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.builder-file{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 14px;border:1px solid var(--line,#e6ddcd);border-radius:10px;font-size:.85rem;font-weight:600;color:var(--ink,#242018);cursor:pointer;background:#fff}
.builder-file input{max-width:230px;font-size:.8rem}
.builder-image p{margin:0;color:var(--muted,#6b7079)}
.builder-image [data-image-note].is-warning{color:#b4233c;font-weight:600}
.store-info-block .info-block-media{margin-top:20px}
.store-info-block .info-block-media img{width:100%;max-height:440px;object-fit:cover;border-radius:var(--radius,12px);display:block}
.builder-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:22px;align-items:start}
.builder-main{min-width:0}
.builder-preview{position:sticky;top:14px;display:grid;gap:10px;padding:10px;border:1px solid var(--line,#e6ddcd);border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.builder-preview-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;justify-content:space-between}
.builder-preview iframe{width:100%;height:min(72vh,640px);border:1px solid var(--line,#e6ddcd);border-radius:10px;background:#fff}
.builder-preview p{margin:0;color:var(--muted,#6b7079)}
@media (max-width:1100px){.builder-workspace{grid-template-columns:minmax(0,1fr)}.builder-preview{position:static;order:-1}}
.preview-focus-wrap{display:contents}
.preview-focus-wrap.is-focus>*{outline:3px solid #ff5b1f;outline-offset:6px;border-radius:6px}