/* =====================================================================
   13.0 — Product ordering (design preview, 27 October 2026)
   The order panel on every product page, the ordering routes on the
   products overview, and the cart, checkout, quotation and documents pages.
   Builds on the 11.0 palette: white working panels on the mint page, one
   navy "ticket" per view for the selection and totals, and the brand
   gradient for the primary action. Loaded only where ordering appears.
   ===================================================================== */

:root {
  --ord-line: #dae5ee;
  --ord-line-strong: #c4d4e3;
  --ord-soft: #f4f8fa;
  --ord-ok: #0b8577;
  --ord-ok-bg: rgba(0, 169, 154, 0.13);
  --ord-quote: #0b5d93;
  --ord-quote-bg: rgba(11, 114, 183, 0.1);
  --ord-made: #a8640a;
  --ord-err: #b42318;
  --ord-ticket: radial-gradient(420px 240px at 100% 0%, rgba(0, 169, 154, 0.26), transparent 62%), linear-gradient(165deg, #10325a 0%, #0b2242 55%, #08182e 100%);
  --ord-panel-shadow: 0 1px 2px rgba(11, 34, 66, 0.04), 0 18px 40px -30px rgba(11, 72, 120, 0.45);
}

/* ---- utilities ---- */
/* Components below set their own display, so restate what the hidden attribute means. */
:is(.ord-mount, .shop-root, .sg-toast, .pay-sheet, .card-packs) [hidden], .card-packs[hidden] { display: none !important; }
.sg-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sg-ico { width: 18px; height: 18px; flex-shrink: 0; }
.mono { font-family: var(--font-body); font-size: 0.92em; letter-spacing: 0.01em; }
.num { font-variant-numeric: tabular-nums; }

/* ---- preview-only annotations (never rendered on the live site) ---- */
.pv-tag {
  display: inline-flex; align-items: center; margin-left: 8px; vertical-align: 1px;
  padding: 1px 7px; border-radius: 999px;
  font: 600 10.5px/1.6 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase;
  color: #8a5300; background: #fff3d6; border: 1px dashed #e2b04f;
}
.pv-note {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 12px; padding: 9px 11px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.45; color: #6d4a07;
  background: #fff8e8; border: 1px dashed #e7bf6a;
}
.pv-note .sg-ico { width: 15px; height: 15px; margin-top: 1px; color: #b07a12; }
.ord-ticket .pv-tag { color: #ffd98c; background: rgba(255, 196, 84, 0.12); border-color: rgba(255, 210, 120, 0.55); }
.ord-ticket .pv-note { color: #ffe3a8; background: rgba(255, 200, 90, 0.08); border-color: rgba(255, 210, 120, 0.4); }
.ord-ticket .pv-note .sg-ico { color: #ffd27a; }

/* ===================================================================== */
/* Product page: order section                                            */
/* ===================================================================== */
.section--order { padding-top: 72px; }
.section--order + .section { padding-top: 0; }
.ord-head { max-width: 760px; margin-bottom: 30px; }
.ord-head h2 { font-size: clamp(27px, 3.4vw, 40px); margin-bottom: 12px; text-wrap: balance; }
.ord-intro { color: var(--ink-soft); font-size: 16.5px; max-width: 680px; }
.ord-noscript, .ord-fail {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 22px 24px; border-radius: 18px; background: #fff; border: 1px solid var(--ord-line);
  color: var(--ink-soft);
}
.ord-fail > .sg-ico { width: 22px; height: 22px; color: var(--ord-made); }
.ord-fail a, .ord-noscript a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ord-mount:empty { min-height: 420px; border-radius: 22px; background: linear-gradient(110deg, rgba(255,255,255,0.5) 30%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.5) 70%) 0 0 / 300% 100%; animation: ord-shimmer 1.6s linear infinite; }
@keyframes ord-shimmer { to { background-position: -150% 0; } }

.ord-shell { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: 24px; align-items: start; }
.ord-config {
  position: relative; min-width: 0;
  background: #fff;
  border: 1px solid var(--box-line, rgba(11,114,183,0.13));
  border-radius: 22px;
  padding: 28px 30px 26px;
  box-shadow: var(--ord-panel-shadow);
}
.ord-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.ord-step + .ord-step, .ord-config > .ord-step + div > .ord-step:first-child { border-top: 1px solid #e6eef4; margin-top: 24px; padding-top: 24px; }
/* A floated legend sits inside the fieldset instead of on its top border. */
.ord-legend {
  float: left; width: 100%;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 17px; color: var(--ink);
  margin-bottom: 14px; padding: 0;
}
.ord-legend + * { clear: both; }
.ord-n {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  font: 700 12.5px/1 var(--font-body); color: #fff;
  background: linear-gradient(140deg, var(--teal), var(--blue));
}
.ord-basis { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--ink-faint); }

/* product choice */
.ord-variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ord-variant {
  position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 14px 16px 14px 14px; border-radius: 16px; cursor: pointer;
  background: var(--ord-soft); border: 1.5px solid var(--ord-line);
  transition: border-color 0.2s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.35s var(--spring);
}
.ord-variant:hover { border-color: var(--ord-line-strong); transform: translateY(-1px); }
.ord-variant img { width: 46px; height: 70px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(11,34,66,0.16)); }
.ord-variant-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 18px; }
.ord-variant-name { font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--ink); }
.ord-variant-short { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.ord-variant .ord-badge { margin-top: 6px; align-self: flex-start; }
.ord-variant:has(input:checked) { background: linear-gradient(160deg, #e2f5f1 0%, #e8f0fa 100%); border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,169,154,0.12); }
.ord-variant:has(input:focus-visible), .ord-pack:has(input:focus-visible), .pay-option:has(input:focus-visible), .doc-pick:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.ord-tick {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  color: #fff; background: var(--teal); transform: scale(0.4); opacity: 0;
  transition: transform 0.35s var(--spring), opacity 0.2s var(--ease);
}
.ord-tick .sg-ico { width: 13px; height: 13px; stroke-width: 2.6; }
:is(.ord-variant, .ord-pack):has(input:checked) .ord-tick { transform: scale(1); opacity: 1; }

/* badges */
.ord-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.ord-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ord-badge--buy { color: var(--ord-ok); background: var(--ord-ok-bg); }
.ord-badge--quote { color: var(--ord-quote); background: var(--ord-quote-bg); }
.ord-badge--arrange { color: var(--ink-soft); background: rgba(11,34,66,0.07); }

/* pack sizes */
.ord-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ord-pack {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0;
  min-height: 138px; padding: 16px 16px 14px; border-radius: 16px; cursor: pointer;
  background: var(--ord-soft); border: 1.5px solid var(--ord-line);
  transition: border-color 0.2s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.35s var(--spring);
}
.ord-pack:hover { border-color: var(--ord-line-strong); transform: translateY(-2px); }
.ord-pack:has(input:checked) { background: linear-gradient(165deg, #e2f5f1 0%, #e9f1fa 100%); border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,169,154,0.12), 0 16px 26px -22px rgba(11,72,120,0.6); }
.ord-pack-amt { font-family: var(--font-head); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ord-pack-amt small { font-size: 15px; font-weight: 600; letter-spacing: 0; margin-left: 4px; color: var(--ink-soft); }
.ord-pack .ord-pack-amt--text { font-size: 17px; line-height: 1.25; letter-spacing: -0.01em; padding-right: 22px; overflow-wrap: break-word; }
.ord-pack-detail { font-size: 12.5px; color: var(--ink-faint); }
.ord-pack-foot { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ord-pack-sku { font-family: var(--font-body); font-size: 11px; color: var(--ink-faint); }
.ord-pack-price { font-weight: 700; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ord-pack.is-quote .ord-pack-price, .ord-pack--bulk .ord-pack-price { color: var(--ord-quote); font-weight: 600; }
.ord-pack--bulk { background: #fff; border-style: dashed; }
.ord-packnote { margin-top: 12px; font-size: 13px; color: var(--ink-faint); max-width: 720px; }

/* callouts and facts */
.ord-callout {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 20px; padding: 14px 16px; border-radius: 14px;
  font-size: 14px; color: var(--ink-soft);
  background: linear-gradient(120deg, #e3f5f2 0%, #e7eff9 100%);
  border: 1px solid rgba(11,114,183,0.12);
}
.ord-callout > .sg-ico { color: var(--teal-ink, #067a71); margin-top: 1px; }
.ord-callout--blue { margin-top: 0; padding: 18px 20px; }
.ord-callout-title { font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.ord-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 22px; border-top: 1px solid #e6eef4; padding-top: 18px; }
.ord-fact { padding: 0 16px 0 0; min-width: 0; }
.ord-fact + .ord-fact { padding-left: 16px; border-left: 1px solid #e6eef4; }
.ord-fact dt { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.ord-fact dd { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.ord-fact dd.is-muted, .ord-fact .is-muted { color: var(--ink-faint); font-weight: 400; }
.ord-facts:has(.ord-fact:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ord-facts--wide { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 32px; margin-top: 0; border-top: 0; padding-top: 0; }
.ord-facts--wide .ord-fact { padding: 14px 0; border-left: 0; border-bottom: 1px solid #e6eef4; }
.ord-facts--wide .ord-fact + .ord-fact { padding-left: 0; }
.ord-facts--wide dd { font-size: 14.5px; }

.ord-sub { margin: 4px 0 10px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.ord-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ord-chip {
  padding: 7px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--ord-line-strong);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.ord-chip:hover { border-color: var(--teal); color: var(--ink); }
.ord-chip.is-on { background: var(--teal); border-color: var(--teal); color: #fff; }
.ord-chips--dark .ord-chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.86); }
.ord-chips--dark .ord-chip:hover { border-color: var(--teal-dim); color: #fff; }
.ord-chips--dark .ord-chip.is-on { background: var(--teal-dim); border-color: var(--teal-dim); color: var(--ink); }
.ord-chip-static { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ord-quote); background: var(--ord-quote-bg); white-space: nowrap; }

/* ---- the ticket: selection, price and actions ---- */
.ord-ticket {
  position: sticky; top: 92px;
  min-width: 0;
  padding: 24px 24px 20px;
  border-radius: 22px;
  color: rgba(255,255,255,0.9);
  background: var(--ord-ticket);
  box-shadow: 0 30px 60px -34px rgba(7,19,34,0.85);
}
.ord-ticket h2, .ord-ticket h3 { color: #fff; }
.ord-ticket-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-dim); margin-bottom: 8px; }
.ord-ticket-kicker .pv-tag { margin-left: 0; }
/* kicker and currency switch share the ticket's first row */
.ord-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ord-ticket-head .ord-ticket-kicker { margin-bottom: 0; }
.sg-cur { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); }
.sg-cur button { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: rgba(255,255,255,0.72); transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.sg-cur button:hover { color: #fff; }
.sg-cur button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.ord-panel .sg-cur, .shop-panel .sg-cur { background: var(--ord-soft); border-color: var(--ord-line); }
.ord-panel .sg-cur button, .shop-panel .sg-cur button { color: var(--ink-soft); }
.ord-panel .sg-cur button[aria-pressed="true"], .shop-panel .sg-cur button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.shop-sum-note { margin: 2px 0 6px; font-size: 12.5px; color: rgba(255,255,255,0.6); }
.ord-panel-head--formats { margin-bottom: 14px; }
.ord-panel-head--formats .ord-panel-intro { margin-bottom: 0; }
.ord-ticket-name { font-size: 23px; letter-spacing: -0.02em; }
.ord-ticket-pack { margin-top: 4px; font-size: 14px; color: rgba(255,255,255,0.75); }
.ord-ticket-sku { margin-top: 8px; font-size: 12.5px; color: rgba(255,255,255,0.55); }
.ord-ticket-sku span { font-family: var(--font-body); color: var(--teal-dim); margin-left: 4px; }
.ord-ticket-price { margin: 18px 0 16px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); }
.ord-price { font-family: var(--font-head); font-weight: 700; font-size: 38px; line-height: 1.05; letter-spacing: -0.035em; color: #fff; font-variant-numeric: tabular-nums; }
.ord-price--text { font-size: 26px; letter-spacing: -0.02em; }
.ord-price-sub { margin-top: 6px; font-size: 13px; color: rgba(255,255,255,0.68); }
.ord-ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ord-ticket-label { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.8); }
.ord-ticket-hint { margin-top: 8px; font-size: 12.5px; color: rgba(255,255,255,0.55); text-align: right; }
.ord-ticket-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-size: 13px; color: rgba(255,255,255,0.65); font-variant-numeric: tabular-nums; }
.ord-ticket-total strong { font-family: var(--font-head); font-size: 20px; color: #fff; }
.ord-ticket-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 18px; }
.ord-ticket-actions .btn { padding: 15px 24px; }
.ord-linkbtn {
  align-self: center; padding: 4px 2px;
  font-size: 13.5px; font-weight: 600; color: var(--teal-dim);
  text-decoration: underline; text-decoration-color: rgba(127,224,207,0.4); text-underline-offset: 4px;
}
.ord-linkbtn:hover { color: #fff; text-decoration-color: currentColor; }
.ord-linkbtn--ink { color: var(--ord-quote); text-decoration-color: rgba(11,93,147,0.35); }
.ord-linkbtn--ink:hover { color: var(--ink); }
.ord-ticket-error { margin-top: 10px; font-size: 13px; font-weight: 600; color: #ffb4a8; text-align: center; }
.ord-ticket-meta { display: grid; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 13px; color: rgba(255,255,255,0.78); }
.ord-ticket-meta li { display: flex; align-items: flex-start; gap: 9px; }
.ord-ticket-meta .sg-ico { width: 16px; height: 16px; margin-top: 2px; color: var(--teal-dim); }
.ord-ticket-pay { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; font-size: 12.5px; color: rgba(255,255,255,0.6); }
.ord-ticket-pay .sg-ico { width: 15px; height: 15px; margin-top: 2px; color: var(--teal-dim); }
.ord-ticket-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); }
.ord-ticket-links a, .ord-ticket-links button { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.86); }
.ord-ticket-links a:hover, .ord-ticket-links button:hover { color: var(--teal-dim); }
.ord-ticket-links .sg-ico { width: 15px; height: 15px; color: var(--teal-dim); }
.ord-ticket .btn-ghost { justify-content: center; }
.ord-ticket .btn-primary:focus-visible, .ord-ticket a:focus-visible, .ord-ticket button:focus-visible { outline-color: var(--teal-dim); }
.ord-ticket-bulk { display: grid; gap: 12px; }

/* quantity stepper */
.sg-stepper { display: inline-flex; align-items: center; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); }
.sg-stepper-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; transition: background 0.2s var(--ease); }
.sg-stepper-btn:hover:not(:disabled) { background: rgba(255,255,255,0.12); }
.sg-stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.sg-stepper-btn .sg-ico { width: 16px; height: 16px; stroke-width: 2.2; }
.sg-stepper-input {
  width: 44px; height: 100%; border: 0; background: transparent; text-align: center;
  font: 700 16px/1 var(--font-body); color: #fff; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.sg-stepper-input::-webkit-outer-spin-button, .sg-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sg-stepper-input:focus { outline: none; }
.sg-stepper:focus-within { border-color: var(--teal-dim); box-shadow: 0 0 0 3px rgba(127,224,207,0.2); }
.shop-panel .sg-stepper, .cart-line .sg-stepper { background: #fff; border-color: var(--ord-line-strong); height: 40px; }
.shop-panel .sg-stepper-btn, .cart-line .sg-stepper-btn { color: var(--ink); width: 38px; height: 38px; }
.shop-panel .sg-stepper-btn:hover:not(:disabled), .cart-line .sg-stepper-btn:hover:not(:disabled) { background: var(--ord-soft); }
.shop-panel .sg-stepper-input, .cart-line .sg-stepper-input { color: var(--ink); font-size: 15px; width: 38px; }
.shop-panel .sg-stepper:focus-within, .cart-line .sg-stepper:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,169,154,0.16); }

/* availability dots */
.sg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 8px 1px 0; flex-shrink: 0; align-self: center; }
.sg-dot--stock { background: #2fd1b8; box-shadow: 0 0 0 3px rgba(47,209,184,0.18); }
.sg-dot--made { background: #f2a93b; box-shadow: 0 0 0 3px rgba(242,169,59,0.2); }
.ord-ticket-meta li:has(.sg-dot) { align-items: center; }

/* ---- tabs below the configurator ---- */
.ord-tabs { position: relative; margin-top: 24px; background: #fff; border: 1px solid var(--box-line, rgba(11,114,183,0.13)); border-radius: 22px; box-shadow: var(--ord-panel-shadow); overflow: hidden; }
.ord-tablist { display: flex; gap: 4px; padding: 8px; overflow-x: auto; scrollbar-width: none; background: linear-gradient(120deg, #e1f4f0 0%, #e5eef9 100%); border-bottom: 1px solid rgba(11,114,183,0.1); }
.ord-tablist::-webkit-scrollbar { display: none; }
.ord-tab { flex-shrink: 0; padding: 10px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.ord-tab:hover { color: var(--ink); background: rgba(255,255,255,0.5); }
.ord-tab[aria-selected="true"] { color: var(--ink); background: #fff; box-shadow: 0 1px 2px rgba(11,34,66,0.08), 0 6px 14px -10px rgba(11,72,120,0.4); }
.ord-panel { padding: 24px 28px 28px; }
.ord-panel-intro { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 16px; max-width: 760px; }
.ord-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 6px; }
.ord-panel-head h3 { font-size: 19px; }
.ord-panel-foot { margin-top: 12px; font-size: 12.5px; color: var(--ink-faint); }

/* tables (builds on the site table style) */
/* relative: visually hidden labels inside the scroller stay clipped by it on phones */
.ord-table { position: relative; border-radius: 14px; border-color: rgba(11,114,183,0.14); }
.ord-table table { min-width: 640px; }
.ord-table thead th { padding: 12px 16px; font-size: 11.5px; letter-spacing: 0.07em; }
.ord-table td { padding: 12px 16px; font-size: 14px; vertical-align: middle; }
.ord-table--formats td { white-space: nowrap; }
.ord-table--formats td:nth-child(5) { white-space: normal; min-width: 170px; }
.ord-table td.mono { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.ord-table td.num, .ord-table td:nth-child(2) { white-space: nowrap; }
.ord-table tr.is-selected { background: linear-gradient(90deg, rgba(0,169,154,0.14), rgba(11,114,183,0.08)) !important; box-shadow: inset 3px 0 0 var(--teal); }
.ord-table .ord-tr-bulk td { color: var(--ink-soft); }
.ord-td-sub { display: block; font-size: 12px; color: var(--ink-faint); font-weight: 400; }
.ord-td-muted { font-size: 12.5px; color: var(--ink-faint); font-weight: 400; }
.ord-table td > .ord-td-sub { margin-top: 1px; }
.ord-td-act { text-align: right; width: 1%; white-space: nowrap; }
.ord-select {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ord-quote); background: var(--ord-quote-bg);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.ord-select:hover { background: var(--blue); color: #fff; }
tr.is-selected .ord-select { background: var(--teal); color: #fff; }

/* documents tab */
.ord-doc-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ord-docs { display: grid; gap: 10px; }
.ord-doc { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--ord-soft); border: 1px solid var(--ord-line); }
.ord-doc-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #fff; background: linear-gradient(140deg, var(--teal), var(--blue)); }
.ord-doc-copy { display: flex; flex-direction: column; min-width: 0; }
.ord-doc-name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.ord-doc-meta { font-size: 12.5px; color: var(--ink-faint); }
.ord-coa { padding: 20px; border-radius: 16px; background: linear-gradient(150deg, #e2f5f1, #e8f0fa); border: 1px solid rgba(11,114,183,0.12); }
.ord-coa-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--ink); }
.ord-coa-title .sg-ico { color: var(--teal-ink, #067a71); }
.ord-coa-sub { margin: 6px 0 14px; font-size: 13px; color: var(--ink-soft); }
.ord-coa .btn { margin-top: 4px; }

/* ===================================================================== */
/* Forms on light panels                                                  */
/* ===================================================================== */
.sg-form .sg-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.sg-form .sg-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-form .sg-row--4 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr) minmax(0, 0.85fr) minmax(0, 1.1fr); }
.sg-field { margin-bottom: 16px; min-width: 0; }
.sg-field--wide { grid-column: 1 / -1; }
.sg-field label, .sg-radios legend { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--ink); }
.sg-req { color: var(--ord-err); }
.sg-opt { font-weight: 500; font-size: 11.5px; color: var(--ink-faint); margin-left: 4px; }
.sg-field input, .sg-field select, .sg-field textarea, .sg-combo input, .sg-combo select {
  width: 100%; padding: 11px 13px; border-radius: 10px;
  font: 400 14.5px/1.4 var(--font-body); color: var(--ink);
  background: #fff; border: 1px solid #c9d7e4;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.sg-field select, .sg-combo select {
  -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%233f4557' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.sg-field textarea { resize: vertical; min-height: 90px; }
.sg-field input::placeholder, .sg-field textarea::placeholder, .sg-combo input::placeholder { color: #95a1b2; }
.sg-field input:focus, .sg-field select:focus, .sg-field textarea:focus, .sg-combo input:focus, .sg-combo select:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,169,154,0.17);
}
.sg-field [aria-invalid="true"] { border-color: #e17b6f; box-shadow: 0 0 0 3px rgba(225,123,111,0.15); }
.sg-hint { margin-top: 6px; font-size: 12.5px; color: var(--ink-faint); }
.sg-error { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--ord-err); }
.sg-combo { display: grid; grid-template-columns: minmax(0, 1fr) 92px; }
.sg-combo input { border-radius: 10px 0 0 10px; }
.sg-combo select { border-radius: 0 10px 10px 0; border-left: 0; background-color: var(--ord-soft); }
.sg-field--dark label { color: rgba(255,255,255,0.8); }
.sg-field--dark { margin-bottom: 0; }
.sg-field--dark .sg-combo input, .sg-field--dark .sg-combo select { background-color: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); color: #fff; }
.sg-field--dark .sg-combo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sg-field--dark .sg-combo select option { color: var(--ink); }
.sg-field--dark .sg-combo input::placeholder { color: rgba(255,255,255,0.45); }
.sg-field--dark .sg-combo input:focus, .sg-field--dark .sg-combo select:focus { border-color: var(--teal-dim); box-shadow: 0 0 0 3px rgba(127,224,207,0.2); }
.sg-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.sg-check input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--teal); }
.sg-check a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.sg-check--terms { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--ord-soft); border: 1px solid var(--ord-line); }
.sg-radios { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.sg-radios legend { width: 100%; }
.sg-radios label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--ord-line-strong); background: #fff; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.sg-radios label:has(input:checked) { border-color: var(--teal); background: #e3f5f1; color: var(--ink); font-weight: 600; }
.sg-radios input { accent-color: var(--teal); }
.sg-alert { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; padding: 14px 16px; border-radius: 14px; background: #e6f4fb; border: 1px solid rgba(11,114,183,0.18); color: var(--ink); font-size: 14px; }
.sg-alert > .sg-ico { color: var(--blue); margin-top: 1px; }
.sg-alert--warn { background: #fff6e6; border-color: #f0cf8d; }
.sg-alert--warn > .sg-ico { color: var(--ord-made); }
.sg-alert .btn { margin-top: 10px; }
.sg-disclaimer { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; padding: 12px 14px; border-radius: 12px; font-size: 13px; color: var(--ink-soft); background: #e6f3f2; border: 1px solid var(--box-line, rgba(11,114,183,0.13)); }
.sg-disclaimer .sg-ico { color: var(--teal-ink, #067a71); margin-top: 1px; }

/* ===================================================================== */
/* Toast                                                                  */
/* ===================================================================== */
.sg-toast {
  position: fixed; z-index: 400; top: 84px; right: max(20px, env(safe-area-inset-right, 0px));
  width: min(380px, calc(100vw - 32px));
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px; gap: 12px; align-items: start;
  padding: 16px 14px 16px 16px; border-radius: 18px;
  background: #fff; border: 1px solid var(--ord-line);
  box-shadow: 0 30px 60px -28px rgba(7,19,34,0.55), 0 2px 6px rgba(11,34,66,0.06);
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.98);
  transition: opacity 0.25s var(--ease), transform 0.35s var(--spring), visibility 0.25s;
}
.sg-toast.is-on { opacity: 1; visibility: visible; transform: none; }
.sg-toast-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: linear-gradient(140deg, var(--teal), var(--blue)); }
.sg-toast-ico .sg-ico { width: 17px; height: 17px; stroke-width: 2.4; }
.sg-toast-title { font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--ink); }
.sg-toast-body { margin-top: 2px; font-size: 13.5px; color: var(--ink-soft); }
.sg-toast-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sg-toast-actions a { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink); border: 1px solid var(--ord-line-strong); }
.sg-toast-actions a:hover { border-color: var(--blue); color: var(--blue); }
.sg-toast-actions a.is-primary { color: #fff; border-color: transparent; background: var(--gradient-brand); }
.sg-toast-x { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink-faint); }
.sg-toast-x:hover { background: var(--ord-soft); color: var(--ink); }

/* ===================================================================== */
/* Products overview                                                      */
/* ===================================================================== */
.section--routes { padding: 56px 0 30px; }
.route-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.route-card { padding: 24px 24px 22px; }
.route-card .card-icon { margin-bottom: 14px; }
.route-card h3 { font-size: 18px; margin-bottom: 6px; }
.route-card p { font-size: 14px; }
.route-card .card-link::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.route-card .card-link:focus-visible { outline: none; }
.route-card:has(.card-link:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.card-packs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
.card-packs-text { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.card-packs-text .sg-ico { width: 16px; height: 16px; color: var(--teal-ink, #067a71); }
:is(.card):is(:hover, :has(a:focus-visible)) .card-packs { color: rgba(255,255,255,0.9); }
:is(.card):is(:hover, :has(a:focus-visible)) .card-packs .sg-ico { color: #fff; }
:is(.card):is(:hover, :has(a:focus-visible)) .card-packs .ord-badge { color: #fff; background: rgba(255,255,255,0.18); }

/* ===================================================================== */
/* Cart, checkout, quotation and documents pages                          */
/* ===================================================================== */
.page-header--shop { padding-bottom: 56px; }
.page-header--shop .page-header-grid { grid-template-columns: 1fr; max-width: 820px; }
.shop-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.shop-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 7px; border-radius: 999px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.shop-steps li span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11.5px; background: rgba(255,255,255,0.1); }
.shop-steps li.is-now { color: #fff; border-color: rgba(127,224,207,0.6); background: rgba(127,224,207,0.12); }
.shop-steps li.is-now span { background: var(--teal); color: #fff; }
.shop-steps li.is-done span { background: rgba(127,224,207,0.25); color: var(--teal-dim); }
.section--shop { padding: 48px 0 96px; }
.shop-root:empty { min-height: 460px; border-radius: 22px; background: linear-gradient(110deg, rgba(255,255,255,0.5) 30%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.5) 70%) 0 0 / 300% 100%; animation: ord-shimmer 1.6s linear infinite; }
.shop-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.shop-main { position: relative; display: grid; gap: 20px; min-width: 0; }
.shop-panel {
  min-width: 0; padding: 26px 28px;
  background: #fff; border: 1px solid var(--box-line, rgba(11,114,183,0.13)); border-radius: 22px;
  box-shadow: var(--ord-panel-shadow);
}
.shop-panel h3 { font-size: 18px; margin-bottom: 14px; }
.shop-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.shop-panel-head h2 { font-size: 22px; letter-spacing: -0.02em; }
.shop-panel-head p { margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
.shop-step { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; }
.shop-count { flex-shrink: 0; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); background: var(--ord-soft); border: 1px solid var(--ord-line); }
.shop-panel--quote { background: linear-gradient(170deg, #ffffff 0%, #f6fafc 100%); }
.shop-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px; border-radius: 16px; background: var(--ord-soft); border: 1px dashed var(--ord-line-strong); color: var(--ink-soft); font-size: 14px; }
.shop-empty > .sg-ico { width: 22px; height: 22px; color: var(--teal-ink, #067a71); }
.shop-empty--page { align-items: center; text-align: center; padding: 56px 28px; border-style: solid; background: #fff; }
.shop-empty--page > .sg-ico { width: 34px; height: 34px; }
.shop-empty--page h2 { font-size: 24px; color: var(--ink); }
.shop-empty--page p { max-width: 460px; }
.shop-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* cart lines */
.cart-lines { display: grid; }
.cart-line { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 128px; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid #e8eff4; }
.cart-line:first-child { border-top: 0; padding-top: 4px; }
.cart-line--quote { grid-template-columns: 44px minmax(0, 1fr) auto; }
.cart-thumb { width: 44px; height: 66px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(11,34,66,0.15)); align-self: start; }
.cart-line-main { min-width: 0; }
.cart-line-name { font-family: var(--font-head); font-weight: 600; font-size: 16.5px; color: var(--ink); }
.cart-line-name:hover { color: var(--blue); }
.cart-line-pack { margin-top: 2px; font-size: 13.5px; color: var(--ink-soft); }
.cart-line-fields { margin-top: 4px; font-size: 12.5px; color: var(--ink-faint); }
.cart-line-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 12.5px; color: var(--ink-faint); }
.cart-line-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.cart-line-meta .sg-dot { margin: 0; }
.cart-line-meta .sg-ico { width: 14px; height: 14px; color: var(--teal-ink, #067a71); }
.cart-line-actions { display: flex; gap: 16px; margin-top: 8px; }
.cart-line-actions button { font-size: 12.5px; font-weight: 600; color: var(--ord-quote); text-decoration: underline; text-decoration-color: rgba(11,93,147,0.3); text-underline-offset: 3px; }
.cart-line-actions button:hover { color: var(--ink); }
.cart-line-qty { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cart-line-limit { font-size: 11.5px; color: var(--ink-faint); }
.cart-line-price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.cart-line-total { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cart-line-each { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 6px; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.cart-line-each .pv-tag { margin: 0; }

/* quick add */
.shop-quick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px 24px; align-items: end; padding: 22px 28px; background: linear-gradient(120deg, #e3f5f2 0%, #e7eff9 100%); box-shadow: none; }
.shop-quick h2 { font-size: 18px; }
.shop-quick-copy p { margin-top: 2px; font-size: 13.5px; color: var(--ink-soft); }
.shop-quick-fields { display: grid; grid-template-columns: minmax(0, 1fr) 82px auto; gap: 10px; align-items: end; }
.shop-quick-fields .sg-field { margin-bottom: 0; }
.shop-quick-fields .btn { height: 44px; background: #fff; }
.shop-quick .sg-error { grid-column: 1 / -1; }

/* summary ticket */
.shop-summary { top: 96px; }
.shop-sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; font-size: 14px; color: rgba(255,255,255,0.82); font-variant-numeric: tabular-nums; }
.shop-sum-row strong { font-family: var(--font-head); font-size: 18px; color: #fff; }
.shop-sum-row--muted { color: rgba(255,255,255,0.55); }
.sum-sub { display: block; font-size: 12px; color: rgba(255,255,255,0.5); }
.shop-sum-sep { height: 1px; margin: 18px 0 12px; background: rgba(255,255,255,0.12); }
.shop-sum-total { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.16); font-size: 14px; color: rgba(255,255,255,0.8); }
.shop-sum-total strong { font-family: var(--font-head); font-size: 30px; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.sum-foot { margin: -8px 0 16px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.72); }
.sum-pending { font-size: 13px; color: rgba(255,255,255,0.55); }
.shop-summary .btn-block { margin-top: 14px; }
.shop-summary .btn[disabled], .shop-summary .btn.is-disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.shop-summary .btn.is-disabled::after { display: none; }
.shop-summary .ord-linkbtn { display: block; margin: 10px auto 0; text-align: center; }
.shop-summary .sg-error { color: #ffb4a8; text-align: center; }
.sum-lines { display: grid; gap: 12px; margin: 6px 0 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.sum-lines li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.sum-lines img { width: 30px; height: 44px; object-fit: contain; }
.sum-line-copy { display: flex; flex-direction: column; min-width: 0; }
.sum-line-name { font-weight: 600; font-size: 14px; color: #fff; }
.sum-line-pack { font-size: 12px; color: rgba(255,255,255,0.6); }
.sum-line-price { font-size: 13px; color: rgba(255,255,255,0.85); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sum-lines--light { border-color: #e8eff4; }
.sum-lines--light .sum-line-name { color: var(--ink); }
.sum-lines--light .sum-line-pack { color: var(--ink-faint); }
.sum-lines--light .sum-line-price { color: var(--ink-soft); }
.shop-panel .shop-sum-row { color: var(--ink-soft); }
.shop-panel .sum-sub { color: var(--ink-faint); }
.shop-panel .shop-sum-total { color: var(--ink-soft); border-color: #e8eff4; margin-bottom: 0; }
.shop-panel .shop-sum-total strong { color: var(--ink); font-size: 24px; }
.shop-aside .aside-title { font-family: var(--font-head); font-weight: 600; font-size: 16px; color: #fff; margin-bottom: 10px; }
.aside-list { display: grid; gap: 8px; font-size: 13.5px; color: rgba(255,255,255,0.78); }
.aside-list li { position: relative; padding-left: 16px; }
.aside-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-dim); }
.aside-list--ink { color: var(--ink-soft); font-size: 14.5px; }
.aside-list--ink li::before { background: var(--teal); }

/* payment choice */
.pay-options { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.pay-option {
  position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 16px 18px; border-radius: 16px; cursor: pointer;
  background: var(--ord-soft); border: 1.5px solid var(--ord-line);
  transition: border-color 0.2s var(--ease), background 0.25s var(--ease);
}
.pay-option:has(input:checked) { border-color: var(--teal); background: linear-gradient(160deg, #e2f5f1 0%, #e9f1fa 100%); box-shadow: 0 0 0 3px rgba(0,169,154,0.12); }
.pay-option-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: linear-gradient(140deg, var(--teal), var(--blue)); }
.pay-option-copy { display: flex; flex-direction: column; min-width: 0; }
.pay-option-name { font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--ink); }
.pay-option-sub { font-size: 13px; color: var(--ink-soft); }
.pay-marks { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pay-marks span { padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-soft); background: #fff; border: 1px solid var(--ord-line); }

/* simulated payment sheet (preview only) */
body.has-sheet { overflow: hidden; }
.pay-sheet { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 20px; background: rgba(7,19,34,0.55); backdrop-filter: blur(6px); animation: sheet-in 0.25s var(--ease); }
@keyframes sheet-in { from { opacity: 0; } }
.pay-card { width: min(420px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 22px 24px 20px; border-radius: 22px; background: #fff; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6); animation: card-in 0.4s var(--spring); }
@keyframes card-in { from { transform: translateY(16px) scale(0.97); opacity: 0; } }
.pay-head { display: flex; align-items: center; gap: 8px; }
.pay-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; color: var(--ink); }
.pay-brand .sg-ico { color: var(--teal-ink, #067a71); }
.pay-head .pv-tag { margin-left: 0; }
.pay-x { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ink-faint); }
.pay-x:hover { background: var(--ord-soft); color: var(--ink); }
.pay-amount { margin-top: 16px; font-family: var(--font-head); font-weight: 700; font-size: 34px; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pay-ref { font-size: 13px; color: var(--ink-faint); }
.pay-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 18px 0 14px; padding: 5px; border-radius: 14px; background: var(--ord-soft); }
.pay-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.pay-tabs button .sg-ico { width: 15px; height: 15px; }
.pay-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(11,34,66,0.1); }
.pay-note { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 16px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; color: #6d4a07; background: #fff8e8; border: 1px dashed #e7bf6a; }
.pay-note .sg-ico { width: 15px; height: 15px; margin-top: 1px; color: #b07a12; }
.pay-actions { display: grid; gap: 8px; justify-items: center; }

/* confirmation */
.confirm { display: grid; gap: 20px; }
.confirm-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; align-items: start; padding: 30px 32px; background: radial-gradient(520px 240px at 100% 0%, rgba(0,169,154,0.12), transparent 70%), #fff; }
.confirm-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; background: linear-gradient(140deg, var(--teal), var(--blue)); box-shadow: 0 14px 26px -14px rgba(11,114,183,0.8); }
.confirm-ico .sg-ico { width: 26px; height: 26px; stroke-width: 2.4; }
.confirm-ref { font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.confirm-ref .mono { letter-spacing: 0.02em; text-transform: none; font-size: 14px; color: var(--ink); margin-left: 4px; }
.confirm-head h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 8px; text-wrap: balance; }
.confirm-head p { color: var(--ink-soft); }
.confirm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.confirm-addr { font-size: 14.5px; color: var(--ink); margin-bottom: 16px; }
.confirm-steps { display: grid; gap: 10px; margin-bottom: 18px; font-size: 14px; color: var(--ink-soft); }
.confirm-steps li { display: flex; gap: 10px; align-items: flex-start; }
.confirm-steps .sg-ico { color: var(--teal-ink, #067a71); margin-top: 2px; }
.confirm-p { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 10px; }

/* status track: state pills, no connector bars */
.sg-track { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-track li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-faint); background: #fff; border: 1px solid var(--ord-line); }
.sg-track-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ord-soft); border: 1.5px solid var(--ord-line-strong); }
.sg-track-ico .sg-ico { width: 12px; height: 12px; stroke-width: 2.8; }
.sg-track li.is-done { color: var(--ink-soft); }
.sg-track li.is-done .sg-track-ico { color: #fff; background: var(--teal); border-color: var(--teal); }
.sg-track li.is-now { color: var(--ink); border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,169,154,0.12); }
.sg-track li.is-now .sg-track-ico { border-color: var(--teal); background: radial-gradient(circle, var(--teal) 0 4px, #fff 5px); }
.sg-track--v { flex-direction: column; gap: 8px; margin-bottom: 4px; }
.ord-ticket .sg-track li { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.6); }
.ord-ticket .sg-track li.is-now { color: #fff; border-color: rgba(127,224,207,0.65); box-shadow: none; background: rgba(127,224,207,0.1); }
.ord-ticket .sg-track-ico { background: transparent; border-color: rgba(255,255,255,0.3); }
.ord-ticket .sg-track li.is-now .sg-track-ico { border-color: var(--teal-dim); background: radial-gradient(circle, var(--teal-dim) 0 4px, transparent 5px); }

/* quotation items */
.q-item { position: relative; border: 1px solid var(--ord-line); border-radius: 18px; padding: 20px 20px 6px; margin: 0 0 14px; min-width: 0; background: linear-gradient(170deg, #fbfdfe 0%, #f5f9fb 100%); }
.q-item-legend { padding: 0 8px; margin-left: -8px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.q-item-legend span { margin-left: 8px; font-family: var(--font-head); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.q-remove { position: absolute; top: 12px; right: 14px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-faint); }
.q-remove .sg-ico { width: 14px; height: 14px; }
.q-remove:hover { color: var(--ord-err); background: #fdeceb; }
.q-pack { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; font-size: 13px; color: var(--ink-soft); }
.q-pack .sg-ico { width: 15px; height: 15px; color: var(--teal-ink, #067a71); }
.q-tech { margin: 0 0 14px; border-radius: 12px; background: #fff; border: 1px solid var(--ord-line); }
.q-tech summary { cursor: pointer; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--ink); list-style-position: inside; }
.q-tech summary span { font-weight: 400; font-size: 12.5px; color: var(--ink-faint); margin-left: 6px; }
.q-tech[open] summary { border-bottom: 1px solid var(--ord-line); }
.q-tech .sg-row { padding: 14px 14px 0; }
.q-add { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ord-quote); border: 1.5px dashed rgba(11,114,183,0.4); }
.q-add:hover { background: var(--ord-quote-bg); border-style: solid; }
.q-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.q-submit .sg-error { margin: 0; }
.field-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* documents */
.doc-picks { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.doc-picks legend { width: 100%; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.doc-pick { cursor: pointer; }
.doc-pick input { position: absolute; opacity: 0; pointer-events: none; }
.doc-pick span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); background: #fff; border: 1.5px solid var(--ord-line-strong); transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); }
.doc-pick span .sg-ico { width: 15px; height: 15px; }
.doc-pick span em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.doc-pick:has(input:checked) span { color: #fff; background: var(--teal); border-color: var(--teal); }
.doc-pick:has(input:checked) span em { color: rgba(255,255,255,0.8); }
.doc-hint { margin: -4px 0 16px; font-size: 13.5px; color: var(--ink-faint); }
.doc-kinds { display: grid; gap: 14px; margin-bottom: 4px; }
.doc-kinds li { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: rgba(255,255,255,0.68); }
.doc-kinds li .sg-ico { color: var(--teal-dim); margin-top: 2px; }
.doc-kinds strong { display: block; font-size: 14px; color: #fff; }
.doc-library { margin-top: 24px; }
.doc-cell { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ord-quote); background: var(--ord-quote-bg); white-space: nowrap; margin: 2px 4px 2px 0; }
.doc-cell:hover { background: var(--blue); color: #fff; }
.doc-cell--wide { white-space: normal; text-align: left; }

/* ===================================================================== */
/* Responsive                                                             */
/* ===================================================================== */
@media (max-width: 1180px) {
  .ord-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ord-facts, .ord-facts:has(.ord-fact:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .ord-fact:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 1020px) {
  .ord-shell, .shop-grid { grid-template-columns: 1fr; }
  .ord-ticket, .shop-summary { position: static; }
  .ord-ticket-hint { text-align: left; }
  .route-strip { grid-template-columns: 1fr; }
  .shop-quick { grid-template-columns: 1fr; }
  .ord-doc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .section--order { padding-top: 52px; }
  .ord-config { padding: 22px 18px 20px; border-radius: 18px; }
  .ord-variants { grid-template-columns: 1fr; }
  .ord-pack { min-height: 118px; padding: 14px; }
  .ord-pack-amt { font-size: 26px; }
  .ord-pack .ord-pack-amt--text { font-size: 16px; }
  .ord-panel { padding: 20px 16px 22px; }
  .ord-ticket { padding: 22px 20px 18px; border-radius: 18px; }
  .shop-panel { padding: 22px 18px; border-radius: 18px; }
  .sg-form .sg-row, .sg-form .sg-row--3 { grid-template-columns: 1fr; }
  .sg-form .sg-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-line { grid-template-columns: 44px minmax(0, 1fr); gap: 10px 14px; }
  .cart-line-qty { grid-column: 2; flex-direction: row; align-items: center; gap: 10px; justify-self: start; }
  .cart-line-price { grid-column: 2; align-items: flex-start; text-align: left; }
  .cart-line-each { justify-content: flex-start; }
  .cart-line--quote .cart-line-price { grid-column: 2; }
  .shop-quick-fields { grid-template-columns: minmax(0, 1fr) 72px; }
  .shop-quick-fields .btn { grid-column: 1 / -1; justify-content: center; }
  .pay-option { grid-template-columns: 42px minmax(0, 1fr); }
  .pay-marks { grid-column: 2; justify-content: flex-start; }
  .confirm-grid { grid-template-columns: 1fr; }
  .confirm-head { grid-template-columns: 1fr; padding: 24px 20px; }
  .ord-doc { grid-template-columns: 36px minmax(0, 1fr); }
  .ord-doc .ord-select { grid-column: 2; justify-self: start; }
  .ord-doc-ico { width: 36px; height: 36px; }
  .sg-toast { top: 74px; }
  .page-header--shop { padding-bottom: 40px; }
}
@media (max-width: 420px) {
  .ord-packs { gap: 10px; }
  .ord-pack-amt { font-size: 23px; }
  .ord-pack-foot { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ord-facts, .ord-facts:has(.ord-fact:nth-child(5)), .ord-facts--wide { grid-template-columns: 1fr !important; }
  .ord-fact + .ord-fact { padding-left: 0; border-left: 0; }
  .sg-form .sg-row--4 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ord-mount:empty, .shop-root:empty { animation: none; }
  .sg-toast, .pay-sheet, .pay-card { transition: none; animation: none; }
}

/* 14.0 catalogue expansion: text-only product cards and inline links (images to follow) */
.product-line-card { display: flex; flex-direction: column; gap: 10px; }
.product-line-card h3 { margin: 0; }
.product-line-card p { margin: 0; color: var(--ink-soft); }
.product-line-card .text-link { margin-top: auto; padding-top: 6px; }
.inline-link { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.inline-link:hover { color: var(--teal-ink); }
.cat-block { scroll-margin-top: 96px; }
.cat-block + .cat-block { margin-top: 64px; }
.cat-head { margin-bottom: 22px; }
.cat-intro { margin: 8px 0 0; max-width: 640px; color: var(--ink-soft); }
.card-vial--placeholder { display: flex; align-items: center; justify-content: center; height: 132px; border-radius: 14px; background: linear-gradient(160deg, #e0f4f0 0%, #e8f0fa 100%); }
.card-vial--placeholder svg { width: 42px; height: 88px; fill: rgba(6,122,113,0.14); stroke: var(--teal-ink, #067a71); stroke-width: 1.6; }
.card-vial--placeholder .ph-line { fill: none; stroke-opacity: 0.5; }
:is(.card):is(:hover, :has(a:focus-visible)) .card-vial--placeholder { background: rgba(255,255,255,0.12); }
:is(.card):is(:hover, :has(a:focus-visible)) .card-vial--placeholder svg { fill: rgba(255,255,255,0.14); stroke: #fff; }
.ord-variant-ph { display: flex; align-items: center; justify-content: center; width: 46px; height: 70px; }
.ord-variant-ph svg { width: 26px; height: 55px; fill: rgba(6,122,113,0.12); stroke: var(--teal-ink, #067a71); stroke-width: 1.6; }