/* ==========================================================================
   PREORDER MICROSITE — small additions on top of base.css + theme.css.
   Everything else on this page (hero, range cards, steps, stats, accordion,
   footer, buttons, forms) reuses the main site's existing component styles
   on purpose, so this page looks and feels like part of the same product.
   ========================================================================== */

.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{color:var(--ink-2);font-size:.93rem;font-weight:500;padding:9px 13px;border-radius:10px;text-decoration:none;transition:.18s}
.nav-links a:hover{background:var(--surface);color:var(--teal-700);text-decoration:none}
@media(max-width:760px){.nav-links{display:none}}

/* invite-code teaser box in the hero — deliberately reveals nothing */
.invite-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1.5px dashed var(--coral);border-radius:var(--r-lg);padding:14px 18px;margin-bottom:26px;box-shadow:var(--shadow)}
.invite-box .ib-icon{font-size:1.4rem;flex:0 0 auto}
.invite-box .ib-text b{display:block;font-size:.95rem;font-weight:800;color:var(--ink)}
.invite-box .ib-text span{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
.invite-btn{margin-left:auto}

/* countdown */
.countdown{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 0}
.cd-unit{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;min-width:74px;text-align:center;box-shadow:var(--shadow-sm)}
.cd-unit b{display:block;font-family:var(--font-head);font-size:1.5rem;font-weight:800;color:var(--teal-700)}
.cd-unit span{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}

/* order form promo feedback + live summary */
.promo-feedback{font-size:.82rem;margin-top:8px;font-weight:600;display:none}
.promo-feedback.show{display:block}
.promo-feedback.ok{color:#1B7A50}
.promo-feedback.bad{color:var(--muted)}
.order-summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;margin:16px 0;font-size:.9rem}
.order-summary .row{display:flex;justify-content:space-between;padding:5px 0}
.order-summary .row.total{border-top:1px dashed var(--line);margin-top:6px;padding-top:10px;font-weight:800;font-size:1.05rem;color:var(--teal-700)}

.order-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);align-items:start}
@media (max-width:860px){.order-wrap{grid-template-columns:1fr}}

/* inline order-form error (CSRF/validation/rate-limit failures from fetch) */
.form-error{display:none;align-items:flex-start;gap:8px;background:var(--red-50);border:1px solid #F3C6C6;color:#A23434;border-radius:var(--r);padding:12px 14px;font-size:.87rem;font-weight:600;margin:6px 0 16px}
.form-error.show{display:block}

/* ---------------------------------------------------- confirmation modal -- */
body.modal-open{overflow:hidden}
.modal-overlay{position:fixed;inset:0;background:rgba(8,34,43,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000;opacity:0;pointer-events:none;transition:opacity .22s var(--ease-soft,ease)}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal-card{position:relative;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);max-width:440px;width:100%;padding:34px 30px 26px;text-align:center;transform:translateY(14px) scale(.97);opacity:0;transition:transform .25s var(--ease-soft,ease),opacity .25s var(--ease-soft,ease);max-height:88vh;overflow-y:auto}
.modal-overlay.show .modal-card{transform:translateY(0) scale(1);opacity:1}
.modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:none;background:var(--surface);color:var(--muted);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.modal-close:hover{background:var(--surface-2);color:var(--ink)}
.modal-check{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:var(--green-50);color:var(--green);display:flex;align-items:center;justify-content:center}
.modal-card h3{font-family:var(--font-head);font-size:1.4rem;font-weight:800;color:var(--ink);margin:0 0 8px}
.modal-sub{color:var(--muted);font-size:.92rem;margin:0 0 20px;line-height:1.6}
.modal-summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;text-align:left;font-size:.9rem}
.modal-summary .row{display:flex;justify-content:space-between;gap:12px;padding:6px 0}
.modal-summary .row span:first-child{color:var(--muted)}
.modal-summary .row span:last-child{font-weight:700;color:var(--ink);text-align:right}
.modal-summary .row.total{border-top:1px dashed var(--line);margin-top:4px;padding-top:10px}
.modal-summary .row.total span:last-child{color:var(--teal-700);font-size:1.15rem}
.modal-note{display:flex;align-items:center;gap:7px;justify-content:center;color:#1B7A50;background:var(--green-50);border-radius:var(--r-sm);padding:9px 12px;font-size:.83rem;font-weight:700;margin-top:14px}
.modal-delivery{display:flex;align-items:center;gap:7px;justify-content:center;color:var(--muted);font-size:.85rem;margin:16px 0 0}
.modal-footnote{font-size:.76rem;color:var(--muted-2);margin:14px 0 0}
@media(max-width:480px){.modal-card{padding:28px 20px 22px}}