/* Order page. */
.order { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); gap: 20px; align-items: start; padding-bottom: var(--section); }
.order__steps { display: grid; gap: 16px; min-width: 0; }
.ostep { padding: clamp(20px, 3vw, 34px); border-radius: var(--r-xl); border: 0; margin: 0; min-width: 0; }
.ostep > h2, .ostep > legend { display: flex; align-items: center; gap: 12px; padding: 0; font: 600 1.45rem/1.15 var(--font-display); letter-spacing: -0.02em; margin: 0 0 18px; float: left; width: 100%; }
.ostep > legend + * { clear: both; }
.ostep__n { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.65); box-shadow: var(--glass-edge); font-size: 1rem; }

/* Large pick cards for style and size; sibling glass in one shared container. */
.picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; clear: both; }
.pick { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pick__face { display: flex; flex-direction: column; height: 100%; padding: 14px 16px 16px; border-radius: 22px; background: rgb(255 255 255 / 0.3); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.55); transition: transform 0.5s var(--spring), background 0.25s, box-shadow 0.25s; }
.pick:hover .pick__face { transform: translateY(-2px); }
.pick input:checked + .pick__face { background: rgb(255 255 255 / 0.72); box-shadow: inset 0 0 0 2px var(--peach-deep), 0 16px 30px -18px rgb(214 110 75 / 0.8); }
.pick input:focus-visible + .pick__face { outline: 2px solid var(--sage-deep); outline-offset: 3px; }
.pick__art { height: 150px; padding: 8px; border-radius: 16px; background: linear-gradient(170deg, #d6e1ce, #aebba6); object-fit: contain; width: 100%; margin-bottom: 10px; filter: drop-shadow(0 10px 8px rgb(50 40 30 / 0.25)); }
.pick__title { font: 600 1.15rem/1.2 var(--font-display); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; white-space: nowrap; }
.pick__blurb { margin-top: 4px; font-size: 0.9rem; line-height: 1.35; color: var(--ink-soft); }

.drop { position: relative; display: flex; align-items: center; gap: 18px; padding: 20px; min-height: 130px; border-radius: 22px; background: rgb(255 255 255 / 0.3); border: 1.5px dashed rgb(43 45 44 / 0.35); cursor: pointer; transition: background 0.25s, border-color 0.25s; clear: both; }
.drop:hover, .drop[data-over='true'] { background: rgb(255 255 255 / 0.6); border-color: var(--peach-deep); }
.drop:focus-within { outline: 2px solid var(--sage-deep); outline-offset: 3px; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop__thumb { flex: none; width: 88px; height: 88px; border-radius: 18px; object-fit: cover; display: grid; place-items: center; background: rgb(255 255 255 / 0.6); }
.drop__thumb svg { width: 32px; height: 32px; }
.drop strong { display: block; font: 600 1.05rem/1.3 var(--font-display); overflow-wrap: anywhere; }
.drop small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.35; }

.fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 12px; clear: both; }
.field { grid-column: span 6; display: grid; gap: 6px; }
.field--3 { grid-column: span 3; }
.field--2 { grid-column: span 2; }
.field--4 { grid-column: span 4; }
.field label { font-weight: 600; font-size: 0.92rem; }
.field label span { font-weight: 400; color: var(--ink-soft); }
.field input, .field select {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 0;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.62);
  color: var(--ink);
  font: 400 1rem var(--font-body);
  box-shadow: inset 0 1px 3px rgb(60 45 30 / 0.14), inset 0 0 0 1px rgb(255 255 255 / 0.6);
  transition: background 0.2s, box-shadow 0.2s;
}
.field input:focus, .field select:focus { outline: none; background: rgb(255 255 255 / 0.92); box-shadow: inset 0 0 0 2px var(--sage-deep); }
.field[data-invalid='true'] input, .field[data-invalid='true'] select { box-shadow: inset 0 0 0 2px var(--danger); }
.err { color: var(--danger); font-size: 0.87rem; font-weight: 500; }
.err:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) { .field--3, .field--2, .field--4 { grid-column: span 6; } }

.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: 0.94rem; line-height: 1.4; cursor: pointer; }
.consent input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--peach-deep); }

.summary { position: sticky; top: 94px; padding: 14px; border-radius: var(--r-xl); }
.summary__art { position: relative; height: 350px; border-radius: 28px; overflow: hidden; background: linear-gradient(170deg, #f8d3c0, #eeb49c); }
.summary[data-style='realistic'] .summary__art { background: linear-gradient(170deg, #d6e1ce, #aebba6); }
.summary__fig { position: absolute; left: 36%; bottom: 16px; height: 86%; width: auto; max-width: 62%; object-fit: contain; object-position: bottom; transform: translateX(-50%) scale(var(--fig-scale, 1)); transform-origin: 50% 100%; filter: drop-shadow(0 14px 12px rgb(50 40 30 / 0.34)); transition: transform 0.7s var(--spring); }
.summary__pots { position: absolute; right: 8px; bottom: 12px; width: 44%; height: auto; filter: drop-shadow(0 10px 8px rgb(50 40 30 / 0.3)); }
.summary__brushes { position: absolute; right: 8%; bottom: 62px; width: 27%; height: auto; filter: drop-shadow(0 8px 6px rgb(50 40 30 / 0.28)); }
.summary[data-size='100'] { --fig-scale: 0.68; }
.summary__tag { position: absolute; left: 10px; top: 10px; padding: 7px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.summary__body { padding: 18px 10px 8px; }
.summary dl { margin: 0; display: grid; gap: 7px; font-size: 0.97rem; }
.summary dl div { display: flex; justify-content: space-between; gap: 12px; }
.summary dt { color: var(--ink-soft); }
.summary dd { margin: 0; font-weight: 600; text-align: right; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 16px; padding-top: 14px; border-top: 1px solid rgb(43 45 44 / 0.15); font: 700 2rem/1 var(--font-display); letter-spacing: -0.03em; }
.summary__total span:first-child { font: 500 1rem var(--font-body); letter-spacing: 0; color: var(--ink-soft); }
.summary__trust { margin-top: 12px; text-align: center; font-size: 0.85rem; line-height: 1.4; color: var(--ink-soft); }
.form-error { margin-bottom: 12px; padding: 12px 14px; border-radius: 16px; background: rgb(169 58 34 / 0.12); color: var(--danger); font-size: 0.93rem; font-weight: 500; }
.form-error:empty { display: none; }
.notice { padding: 14px 20px; border-radius: 20px; margin-bottom: 16px; font-weight: 500; }

@media (max-width: 940px) {
  .order { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  .summary__art { height: 240px; }
}