.bouquet-tags { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.bouquet-tag { border-radius:20px; background:var(--paper, #f6f3ef); padding:7px 12px; font-size:14px; }
.size-picker { border:0; padding:0; margin:16px 0; min-width:0; }
.size-picker legend { font-weight:600; margin-bottom:12px; }
.size-option { display:flex; align-items:center; gap:12px; border:1px solid #ddd4cd; border-radius:12px; padding:12px 16px; margin-bottom:8px; cursor:pointer; }
.size-option:has(input:checked) { border-color:#8c2944; background:#fcf4f6; }
.size-option input { width:auto; margin:0; accent-color:#8c2944; }
.size-option strong { margin-left:auto; white-space:nowrap; }
.size-dialog { border:0; border-radius:20px; padding:24px; width:min(420px, calc(100% - 32px)); max-height:90vh; overflow:auto; color:inherit; }
.size-dialog::backdrop { background:rgb(30 15 20 / 45%); }
.size-dialog-heading { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.size-dialog-heading h2 { margin:0 0 12px; font-size:22px; }
.size-dialog-heading button { background:transparent; border:0; font-size:28px; cursor:pointer; padding:0 4px; }
.field [id="id_tags"], .field [id="id_sizes"] { display:flex; flex-wrap:wrap; gap:8px 16px; }
.field [id="id_tags"] label, .field [id="id_sizes"] label { display:flex; align-items:center; gap:8px; }
.field [id="id_tags"] input, .field [id="id_sizes"] input { width:auto; }
.basket-size { display:block; font-size:14px; margin-top:4px; }
.field [id="id_wrapping_options"] { display:flex; flex-wrap:wrap; gap:8px 16px; }
.field [id="id_wrapping_options"] label { display:flex; align-items:center; gap:8px; }
.field [id="id_wrapping_options"] input { width:auto; }

/* Wrapping colour circles and the postcard on the bouquet page (Flower Shop.pdf, page 7). */
.wrapping-picker { border:0; padding:0; margin:18px 0 0; min-width:0; }
.wrapping-picker legend, .size-picker legend { margin-bottom:12px; font:500 14px/1.2 var(--sans); letter-spacing:.04em; text-transform:uppercase; color:var(--text-soft); }
.wrapping-swatches { display:flex; flex-wrap:wrap; gap:12px; }
.wrapping-swatch { position:relative; display:grid; place-items:center; width:44px; height:44px; border:2px solid transparent; border-radius:50%; cursor:pointer; }
.wrapping-swatch input { position:absolute; opacity:0; pointer-events:none; }
.wrapping-dot { width:34px; height:34px; border:1px solid rgb(0 0 0 / 12%); border-radius:50%; background:var(--swatch); }
.wrapping-dot.is-none { background:linear-gradient(135deg, #fff 45%, #c4283a 46% 54%, #fff 55%); }
.wrapping-swatch:has(input:checked) { border-color:var(--forest); }
.wrapping-swatch:has(input:focus-visible) { outline:2px solid var(--forest); outline-offset:2px; }
.wrapping-chosen { margin-top:6px; font-size:14px; color:var(--text-soft); }
.postcard-option { margin:18px 0 6px; }
.postcard-toggle { display:inline-flex; align-items:center; gap:12px; font-size:16px; color:var(--text-soft); cursor:pointer; }
.postcard-toggle input { width:20px; height:20px; }
.postcard-toggle .icon { width:24px; height:24px; color:var(--text); }
.postcard-chosen { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin:8px 0 0 32px; font-size:14px; color:var(--text); }
.postcard-dialog { width:min(1100px, calc(100% - 32px)); max-height:92vh; padding:28px; border:0; border-radius:20px; overflow:auto; color:inherit; background:#fff; }
.postcard-dialog::backdrop { background:rgb(30 30 25 / 45%); }
.postcard-dialog-head { display:flex; justify-content:space-between; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.postcard-dialog-head h2 { font:500 clamp(24px, 2.4vw, 32px)/1.2 var(--pdf-serif, "Lora", serif); color:var(--text); }
.postcard-dialog-head p { margin-top:6px; font-size:15px; color:var(--text-soft); }
.postcard-close { display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; background:var(--cream); }
.postcard-dialog-body { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:28px; margin-top:20px; }
.postcard-occasions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.postcard-occasions button { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid var(--border); border-radius:12px; background:var(--cream); font-weight:600; }
.postcard-occasions button[aria-pressed="true"] { border-color:#f4c9c9; background:#fde8e8; color:#b5283a; }
.postcard-templates { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.postcard-template { display:grid; gap:6px; padding:14px 16px; border:1px solid var(--border); border-radius:14px; background:var(--cream); text-align:left; }
.postcard-template[aria-pressed="true"] { border:2px solid var(--forest); }
.postcard-template strong { font-weight:600; color:var(--text); }
.postcard-template span { font-size:14px; color:var(--text-soft); }
.postcard-own { display:block; margin:20px 0 8px; padding-top:16px; border-top:1px solid var(--border); font:600 18px/1.3 var(--pdf-serif, "Lora", serif); }
.postcard-option textarea { width:100%; border-radius:12px; background:var(--cream); }
.postcard-count { margin-top:4px; text-align:right; font-size:13px; color:var(--muted); }
.postcard-preview { position:relative; display:grid; gap:12px; align-content:start; margin:0; }
.postcard-preview-label { position:absolute; top:12px; left:12px; z-index:1; padding:6px 12px; border-radius:999px; background:#fff; font-size:14px; font-weight:600; }
.postcard-card { display:grid; place-items:center; aspect-ratio:4/5; padding:48px 28px; border-radius:16px; background:radial-gradient(circle at 20% 15%, #f7c5cf 0 12%, transparent 13%), radial-gradient(circle at 85% 88%, #f2b8c4 0 10%, transparent 11%), linear-gradient(160deg, #fdeef0, #f8dde2); }
.postcard-card p { max-width:100%; font:italic 500 clamp(22px, 2.2vw, 30px)/1.3 "Cormorant Garamond", "Lora", serif; color:#9b3b4f; text-align:center; overflow-wrap:anywhere; white-space:pre-line; }
.postcard-preview figcaption { font-size:14px; color:var(--text-soft); }
.postcard-dialog-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:20px; }
.postcard-dialog-actions .button { border-radius:8px; }
/* Without JavaScript the dialog content stays in the form as an ordinary field. */
html:not(.js) .postcard-dialog { position:static; display:block; width:auto; margin-top:12px; padding:16px; border:1px solid var(--border); }
html:not(.js) .postcard-dialog-actions, html:not(.js) .postcard-close, html:not(.js) .postcard-occasions, html:not(.js) .postcard-templates, html:not(.js) .postcard-preview { display:none; }
html:not(.js) .postcard-dialog-body { display:block; }
@media (max-width:759px) {
  .postcard-dialog { padding:18px; }
  .postcard-dialog-body { grid-template-columns:minmax(0, 1fr); }
  .postcard-templates { grid-template-columns:minmax(0, 1fr); }
  .postcard-preview { display:none; }
}
/* Basket lines: wrapping and postcard text. */
.basket-extras { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:6px; font-size:14px; color:var(--text-soft); }
.basket-extras .wrapping-dot { width:16px; height:16px; }
.basket-extras span { display:inline-flex; align-items:center; gap:6px; }
.basket-postcard { display:grid; gap:6px; margin-top:10px; }
.basket-postcard label { font-size:14px; font-weight:600; color:var(--text); }
.basket-postcard textarea { min-height:64px; border-radius:10px; background:#fff; font-size:14px; }
.basket-postcard-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.basket-postcard .postcard-count { margin:0; }