.order-confirmation { border:1px solid #cdd9b9; border-radius:16px; padding:20px; margin-bottom:16px; background:#eff4e6; color:#293c1c; overflow-wrap:anywhere; }
.order-confirmation--warning { background:#fff4e3; border-color:#ead3ab; color:#5c3e1b; }
.order-confirmation--neutral { background:#f4f3ee; border-color:#deded3; color:var(--ink); }
.order-confirmation p { color:inherit; }
.order-confirmation .order-confirmation-code { margin:0 0 10px; font-size:12px; }
.order-confirmation-code strong { display:inline-block; margin-left:4px; font-variant-numeric:tabular-nums; }
.order-confirmation h3 { margin:0; font:500 29px/1.16 var(--serif); letter-spacing:-.5px; }
.order-confirmation .order-confirmation-message { margin:10px 0 16px; }
.order-confirmation-appointment { border-top:1px solid #cdd9b9; padding-top:14px; }
.order-confirmation--warning .order-confirmation-appointment { border-color:#ead3ab; }
.order-confirmation--neutral .order-confirmation-appointment { border-color:#deded3; }
.order-confirmation-appointment>strong { font-size:12px; }
.order-confirmation-appointment p { margin:5px 0; }
.order-confirmation .order-confirmation-date { font-size:20px; line-height:1.3; font-weight:650; }
.order-confirmation .order-confirmation-window { font-size:18px; font-weight:650; }
.order-confirmation .order-confirmation-validity { margin:16px 0 0; font-size:13px; line-height:1.55; }
.order-confirmation-actions { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.order-confirmation-actions button,.order-confirmation-actions a { min-height:44px; white-space:normal; }
.order-confirmation-calendar-note,.order-confirmation-mail { font-size:13px; color:#565e4b; overflow-wrap:anywhere; }
.order-confirmation-calendar-note { margin:0 0 18px; }
.order-confirmation-mail { margin:16px 0; }
.order-confirmation-mail strong { color:var(--ink); }
.order-confirmation-products>h3 { margin-top:24px; }
@media(max-width:520px) {
  .order-confirmation { padding:17px; }
  .order-confirmation h3 { font-size:26px; }
  .order-confirmation-actions>* { flex:1 1 140px; text-align:center; }
}


/* Terza macroarea, punto 3: la conferma grande, prima e da sola. */
.big-confirm{text-align:center;padding:10px 4px 6px}
.big-confirm h2{font-size:min(9vw,34px);line-height:1.15;margin:8px 0 12px}
.big-confirm-message{font-size:min(5.5vw,21px);line-height:1.4;margin:0 0 18px}
.big-confirm .big-ok{width:100%;min-height:64px;font-size:22px}