/* ===== MingleWear order page ===== */
.order-page { background: var(--cream); }
.order-hero { padding: clamp(2rem, 5vw, 3.5rem) 0 1rem; background:
  radial-gradient(600px 260px at 95% 0%, rgba(242,102,95,.16), transparent 70%),
  radial-gradient(480px 220px at 0% 100%, rgba(232,184,74,.16), transparent 70%); }
.order-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: .3em; }
.order-hero .lead { max-width: 52ch; margin: 0; }
.order-hero .lead strong { color: var(--coral-deep); }
.nav-links a[aria-current="page"] { color: var(--coral-deep); }

.order-section { padding: 1.5rem 0 clamp(3rem, 7vw, 5rem); }
.order-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }

/* ---------- Preview ---------- */
.preview { min-width: 0; align-self: stretch; }
.preview-sticky { position: sticky; top: 88px; background: var(--white); border-radius: 28px; padding: 1.2rem 1.2rem 1rem; box-shadow: var(--shadow); border-top: 8px solid var(--coral); }
.preview-tab-label { font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--coral-deep); }
.shirts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .6rem; }
.shirt { margin: 0; position: relative; aspect-ratio: 300 / 330; container-type: inline-size; }
.shirt-svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 10px 14px rgba(47,49,51,.22)); }
.shirt-body { fill: var(--shirt, #1d1e20); stroke: rgba(0,0,0,.12); stroke-width: 1.5; transition: fill .2s ease; }
.shirt-collar { stroke: rgba(0,0,0,.18); }
.shirt-shade { stroke: rgba(0,0,0,.08); }
.shirt[data-light="true"] .shirt-body { stroke: rgba(47,49,51,.25); }
.shirt figcaption { position: absolute; left: 0; right: 0; bottom: -1.6rem; text-align: center; font-weight: 800; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Print area: the chest box of the tee. Font sizes are in em off a
   container-relative base so order.js can shrink (--k) to fit long text. */
.print { position: absolute; left: 25%; right: 25%; top: 27%; bottom: 5%; color: var(--ink, #fff);
  display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; transition: color .2s ease;
  font-size: calc(var(--k, 1) * 1cqi); }
.print-front { justify-content: flex-start; padding-top: 8em; font-family: var(--font-display); font-weight: 700; line-height: 1.02; }
.print-front .l-small { font-size: 7.5em; font-weight: 600; }
.print-front .l-big { font-size: 14em; letter-spacing: .01em; }
.print-front .l-mid { font-size: 10.5em; }
.print-front .l-sub { font-family: var(--font-body); font-weight: 800; font-size: 6em; margin-top: .6em; }
.print-front .l-custom { font-size: 10em; overflow-wrap: anywhere; max-width: 100%; }
.print-back { justify-content: flex-start; padding-top: 1em; font-family: var(--font-body); }
.print-back p { margin: 0; }
.pv-name { font-family: var(--font-display); font-weight: 700; font-size: 11em; line-height: 1; letter-spacing: .03em; overflow-wrap: anywhere; max-width: 100%; }
.pv-town { font-size: 4.6em; font-weight: 700; margin-top: .3em !important; opacity: .92; overflow-wrap: anywhere; }
.pv-rule { width: 55%; border: 0; border-top: .5em solid currentColor; opacity: .7; margin: 2.4em auto; }
.pv-list { margin: 0; display: grid; gap: 1.8em; width: 100%; font-size: 1em; }
.pv-list dt { font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: 3.3em; opacity: .85; }
.pv-list dd { margin: .1em 0 0; font-size: 4.2em; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.pv-qr { margin-top: 2.6em; width: 12em; flex: none; }
.pv-qr svg { width: 100%; height: auto; border: .5em solid #fff; border-radius: .8em; }

.preview-summary { margin: 2.4rem 0 .2rem; text-align: center; font-weight: 800; font-size: .95rem; }
.preview-disclaimer { margin: 0; text-align: center; color: var(--muted); font-size: .82rem; }
.contrast-note { margin: .4rem 0; padding: .5rem .8rem; background: #fff3d6; border-radius: 12px; font-size: .88rem; font-weight: 700; text-align: center; }

/* ---------- Form ---------- */
.design-form { min-width: 0; display: grid; gap: 1.1rem; }
.card { background: var(--white); border: 0; border-radius: 22px; padding: 1.3rem clamp(1.1rem, 3vw, 1.7rem) 1.1rem; margin: 0; box-shadow: 0 8px 24px -16px rgba(47,49,51,.35); min-width: 0; }
.card legend { float: left; width: 100%; padding: 0; margin-bottom: 1rem; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; display: flex; align-items: center; gap: .6rem; }
.card legend + * { clear: both; }
.legend-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--charcoal); color: var(--gold); font-size: 1.05rem; flex: none; }
.field { margin-bottom: 1rem; min-width: 0; }
.field:last-child { margin-bottom: .2rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.label { display: block; font-weight: 800; margin-bottom: .4rem; font-size: .98rem; }
.req { color: var(--coral-deep); }
.optional { font-weight: 600; color: var(--muted); font-size: .9rem; }
.hint { margin: .3rem 0 0; font-size: .85rem; color: var(--muted); }
.field-error { margin: .3rem 0 0; font-size: .88rem; font-weight: 700; color: var(--coral-deep); min-height: 0; }
.field-error:empty { display: none; }

input[type="text"], input[type="email"], input[type="url"], input[type="date"], .design-form select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--charcoal); background: var(--cream);
  border: 2px solid rgba(47,49,51,.16); border-radius: 14px; padding: .7rem .9rem; transition: border-color .15s, background .15s;
}
input[type="date"] { min-height: 3rem; }
input:focus, .design-form select:focus { outline: none; border-color: var(--charcoal); background: var(--white); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--coral-deep); background: #fff4f2; }
.design-form select { min-height: 3rem; cursor: pointer; appearance: none; padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--charcoal) 50%), linear-gradient(135deg, var(--charcoal) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%; background-size: 6px 6px; background-repeat: no-repeat; }

/* Pills & swatches: visually-hidden radios */
.pill input, .swatch input, .slogan-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill-group, .swatch-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill span, .swatch { cursor: pointer; }
.pill span { display: inline-block; padding: .5rem .95rem; border-radius: 999px; border: 2px solid rgba(47,49,51,.2); font-weight: 800; font-size: .95rem; background: var(--cream); transition: all .15s; }
.pill input:checked + span { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); }
.pill input:focus-visible + span, .swatch input:focus-visible ~ .dot, .slogan-opt input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.swatch { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem .35rem .4rem; border-radius: 999px; border: 2px solid rgba(47,49,51,.2); background: var(--cream); font-weight: 800; font-size: .92rem; }
.swatch .dot { width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(47,49,51,.3); flex: none; }
.swatch:has(input:checked) { border-color: var(--charcoal); background: var(--white); box-shadow: 3px 3px 0 var(--coral); }

.slogan-group { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.slogan-opt-custom { grid-column: 1 / -1; }
.slogan-opt span small { display: block; font-family: var(--font-body); font-weight: 700; font-size: .78rem; color: var(--muted); }
.slogan-opt { position: relative; cursor: pointer; }
.slogan-opt span { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: .7rem 1rem .7rem 2.6rem; border-radius: 14px; border: 2px solid rgba(47,49,51,.16); background: var(--cream); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; position: relative; transition: all .15s; }
.slogan-opt span::before { content: ""; position: absolute; left: .9rem; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid var(--charcoal); background: var(--white); }
.slogan-opt input:checked + span { border-color: var(--charcoal); background: var(--white); box-shadow: 3px 3px 0 var(--coral); }
.slogan-opt input:checked + span::before { background: var(--coral-deep); box-shadow: inset 0 0 0 3px var(--white); }

.check { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; font-weight: 600; }
.check input { width: 22px; height: 22px; margin: .15rem 0 0; accent-color: var(--coral-deep); flex: none; }

.warn-box { background: #fff3d6; border-left: 6px solid var(--gold); border-radius: 12px; padding: .7rem .9rem; margin-bottom: 1rem; font-size: .92rem; font-weight: 600; }
.warn-box ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.form-alert { background: #fff4f2; border: 2px solid var(--coral); color: var(--charcoal); font-size: .95rem; border-radius: 16px; padding: .9rem 1.1rem; font-weight: 700; }
/* Screen-reader-only text */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.card-intro { margin: -.4rem 0 .9rem; color: var(--muted); font-size: .92rem; font-weight: 600; }

/* Surprise me */
.surprise-bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1rem; flex-wrap: wrap;
  background: linear-gradient(120deg, #fff3d6, #ffe4e1); border: 2px dashed rgba(194,65,58,.45); border-radius: 22px; padding: .9rem clamp(1rem, 3vw, 1.4rem); }
.surprise-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.surprise-sub { margin: .1rem 0 0; font-size: .88rem; color: var(--muted); font-weight: 600; }
.btn-surprise { display: inline-flex; align-items: center; gap: .45rem; border: 0; cursor: pointer; background: var(--charcoal); color: var(--white); padding: .7rem 1.2rem; font-size: 1.05rem; white-space: nowrap; }
.btn-surprise:hover { background: #1f2022; }

/* Idea chips */
.idea-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.idea-chips[hidden] { display: none; }
.chip { font: inherit; font-size: .85rem; font-weight: 700; line-height: 1.2; color: var(--charcoal); cursor: pointer;
  background: var(--white); border: 1.5px solid rgba(47,49,51,.28); border-radius: 999px; padding: .38rem .75rem; min-height: 2rem; transition: background .15s, border-color .15s; }
.chip:hover { border-color: var(--charcoal); background: #fff7ef; }
.chip[aria-pressed="true"] { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.chip:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Fun extras */
.fun-count { margin: -.3rem 0 .8rem; font-weight: 800; font-size: .9rem; color: var(--coral-deep); }
.fun-grid { display: grid; gap: .8rem; }
.fun-line { border: 2px solid rgba(47,49,51,.12); border-radius: 16px; padding: .8rem .9rem .7rem; background: var(--cream); transition: border-color .15s, box-shadow .15s, background .15s; min-width: 0; }
.fun-line.is-picked { border-color: var(--charcoal); background: var(--white); box-shadow: 3px 3px 0 var(--coral); }
.fun-line input[type="text"], .fun-line select { background: var(--white); }
.fun-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.fun-head .label { margin: 0; }
.fun-toggle { position: relative; display: inline-flex; cursor: pointer; flex: none; }
.fun-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fun-toggle > span { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem .3rem .45rem; border-radius: 999px; border: 2px solid rgba(47,49,51,.25); background: var(--white); font-weight: 800; font-size: .85rem; }
.fun-toggle > span::before { content: ""; width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--charcoal); background: var(--white); flex: none; }
.fun-toggle input:checked + span { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); }
.fun-toggle input:checked + span::before { background: var(--gold); border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--charcoal); }
.fun-toggle input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.fun-toggle input:disabled + span { opacity: .45; cursor: not-allowed; }
.fun-line .hint { margin-top: .35rem; }

.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.checkout-bar { background: var(--charcoal); color: var(--white); border-radius: 24px; padding: 1.3rem clamp(1.1rem, 3vw, 1.7rem); display: grid; gap: .8rem; }
.checkout-price { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.price-big { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--gold); }
.price-sub { color: #e8e4de; font-weight: 700; font-size: .95rem; }
.checkout-bar .btn-primary { font-size: 1.15rem; padding: 1rem 1.4rem; border: 0; }
.checkout-bar .btn-primary[disabled] { opacity: .7; cursor: progress; transform: none; }
.fine { margin: 0; font-size: .84rem; color: #d9d4cc; }

@media (max-width: 900px) {
  .order-grid { grid-template-columns: 1fr; }
  .preview { align-self: start; }
  .preview-sticky { position: static; }
  .shirts { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; }
  .surprise-bar .btn-surprise { width: 100%; justify-content: center; }
  .chip { font-size: .82rem; }
  .preview-sticky { padding: 1rem .7rem .9rem; border-radius: 22px; }
  .site-header .btn-small { display: none; }
}

/* Success page */
.success-card { max-width: 620px; margin: clamp(2.5rem, 7vw, 5rem) auto; background: var(--white); border-radius: 28px; padding: clamp(1.8rem, 5vw, 2.8rem); box-shadow: var(--shadow); border-top: 8px solid var(--coral); text-align: center; }
.success-card h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.success-icon { width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%; background: var(--charcoal); display: grid; place-items: center; }
.success-steps { text-align: left; list-style: none; padding: 0; margin: 1.4rem 0 1.6rem; }
.success-steps li { padding: .65rem 0 .65rem 2rem; border-bottom: 1px dashed rgba(47,49,51,.15); position: relative; font-weight: 600; }
.success-steps li::before { content: "★"; position: absolute; left: .2rem; color: var(--gold); }
.order-ref { font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; margin-top: 1rem; }