/* ==== Objednávkový formulár podľa prototypu (pages-cart.jsx CheckoutPage) - MAIN_CFG_ND_CHECKOUT_V2 ====
   Načítava ho layout_head.php len v nd so zapnutým prepínačom; všetko je pod body.nd-co2 (trieda na <body>).
   Šablóna template/default/order.php pridáva pri nd_checkout_v2() obaly: .nd-co-steps (kroky 1-2-3), .nd-co-layout
   (.nd-co-main so sekciami #nd_co_sec1 Účet - len anonymný - a #nd_co_sec2 krajina, doprava a údaje .nd-co-details,
   .nd-co-rail so súhrnom .basket, #nd_co_sec3 platba, rekapitulácia, súhlasy a tlačidlo), ikony kariet dopravy a platby
   (.nd-co-ico). Polia, id a JS háčiky (front.js, F36, koncept) sú pôvodné.
   Sprievodca (skript v order.php) pridá #order_form.nd-co-wizard a data-nd-co-step; bez JS je formulár jedna stránka.
   Postup nákupu .nd-flow štýluje nd_basket.css. Prefix body.nd.nd-co2 #order_form prebije pravidlá pokladne v nd.css. */

/* starý postup (page.php, helpers_show_order_progress) nahrádza .nd-flow, ktorý order.php presunie na jeho miesto */
body.nd-co2.page-order .mainContainer:has(.nd-flow) .order-progress { display: none; }
/* pôvodný úvod stránky z page.php (zdieľanie, H1 Objednávka, text z CMS s pásom registrácie a Čítajte viac, panel prihlásenia):
   prototyp má nad formulárom len omrvinky a postup nákupu, prihlásenie a registrácia sú v kroku 1. Prihlasovací formulár
   ostáva v DOM (krok 1 do seba presunie jeho polia s atribútom form=), skrytý je len jeho obal. */
/* len so sprievodcom (#order_form.nd-co-wizard pridá skript v order.php); bez JS ostáva pôvodný panel prihlásenia */
body.nd-co2.page-order .mainContainer:has(#order_form.nd-co-wizard) > .order-progress + .clearfix { display: none; }

/* ---- kroky formulára 1-2-3 ---- */
body.nd.nd-co2 #order_form .nd-co-steps {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none;
}
body.nd.nd-co2 #order_form .nd-co-step { display: flex; align-items: center; gap: 8px; margin: 0; }
/* od 600 px krúžky krokov pod stredom krúžkov hornej lišty košíka (nd_basket.css .nd-flow-step padding 6px + krúžok 34px =
   stred 23px; tu krúžok 26px = stred 13px, teda +10px). Pod 600 px je horná lišta v stĺpcoch a bez paddingu. */
body.nd.nd-co2 #order_form .nd-co-step + .nd-co-step::before {
  content: ""; width: 28px; height: 1px; background: var(--nd-line);
}
/* spojnica k dosiahnutému kroku zelená ako v hornej lište košíka */
body.nd.nd-co2 #order_form .nd-co-step:is(.is-done, .is-active) + .nd-co-step:is(.is-done, .is-active)::before { background: var(--nd-ok); }
@media (min-width: 600px) {
  /* lišta cez celú šírku (12.11.2026, 28 px spojnice pôsobili krátko): prvý krok vľavo, posledný vpravo,
     spojnice 2 px sa natiahnu medzi nimi */
  body.nd.nd-co2 #order_form .nd-co-steps { flex-wrap: nowrap; gap: 12px; padding: 0 10px; }
  body.nd.nd-co2 #order_form .nd-co-step { flex: 0 0 auto; gap: 12px; }
  body.nd.nd-co2 #order_form .nd-co-step + .nd-co-step { flex: 1 1 0; min-width: 0; }
  body.nd.nd-co2 #order_form .nd-co-step + .nd-co-step::before { flex: 1 1 auto; width: auto; min-width: 24px; height: 2px; border-radius: 1px; }
  body.nd.nd-co2 #order_form .nd-co-step a { flex: 0 0 auto; white-space: nowrap; }
}
body.nd.nd-co2 #order_form .nd-co-step a {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 400; line-height: 1.25;
  color: var(--nd-muted-2) !important;	/* .mainContainer a(:hover) { color: #000 !important } */
  text-decoration: none !important;	/* .mainContainer a má v style.css underline !important */
}
/* ešte nedosiahnutý krok sivý, aktuálny tučný (krúžok vo farbe akcentu), hotový s fajkou */
body.nd.nd-co2 #order_form .nd-co-step:is(.is-active, .is-done) a { color: var(--nd-ink) !important; }
body.nd.nd-co2 #order_form .nd-co-step.is-active a { font-weight: 700; }
body.nd.nd-co2 #order_form .nd-co-step a:hover .nd-co-step-label { text-decoration: underline; }
@media (max-width: 599px) {
  /* úzky displej ako horná lišta .nd-flow: 3 rovnako široké stĺpce, krúžok nad popisom, popis zalomený len medzi slovami.
     Spojnica je čiara vo výške stredu krúžkov od predošlého krúžku po tento (4 px od okraja), mimo flexu:
     percentá sú zo šírky kroku, stred predošlého krúžku je 50 % + medzera (6 px) vľavo, polomer krúžku 11 px. */
  body.nd.nd-co2 #order_form .nd-co-steps { flex-wrap: nowrap; align-items: flex-start; gap: 6px; }
  body.nd.nd-co2 #order_form .nd-co-step { position: relative; flex: 1 1 0; min-width: 0; gap: 0; }
  body.nd.nd-co2 #order_form .nd-co-step + .nd-co-step::before {
    position: absolute; top: 10.5px; left: calc(-50% - 6px + 15px); right: calc(50% + 15px); width: auto;
  }
  body.nd.nd-co2 #order_form .nd-co-step a {
    display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; gap: 5px;
    font-size: 12px; line-height: 1.2; text-align: center;
  }
  body.nd.nd-co2 #order_form .nd-co-step .nd-co-dot { width: 22px; height: 22px; font-size: 12px; }
  body.nd.nd-co2 #order_form .nd-co-step-label { max-width: 100%; overflow-wrap: normal; word-break: normal; hyphens: none; }
}
body.nd.nd-co2 #order_form .nd-co-dot {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--nd-surface-3); color: var(--nd-muted); font-size: 13px; font-weight: 700; line-height: 1;
}
body.nd.nd-co2 #order_form .nd-co-dot .nd-ico { display: none; }
body.nd.nd-co2 #order_form .is-active > a > .nd-co-dot, body.nd.nd-co2 #order_form .nd-co-sec.is-active .nd-co-dot { background: var(--nd-accent); color: var(--nd-on-accent, #fff); }
body.nd.nd-co2 #order_form .is-done > a > .nd-co-dot, body.nd.nd-co2 #order_form .nd-co-sec.is-done .nd-co-dot { background: var(--nd-ok); color: #fff; }
body.nd.nd-co2 #order_form :is(.nd-co-step, .nd-co-sec).is-done .nd-co-dot .nd-co-n { display: none; }
body.nd.nd-co2 #order_form :is(.nd-co-step, .nd-co-sec).is-done .nd-co-dot .nd-ico { display: block; }

/* ---- dva stĺpce: formulár | súhrn 340 px ---- */
body.nd.nd-co2 #order_form .nd-co-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start;
}
body.nd.nd-co2 #order_form .nd-co-main { grid-column: 1; grid-row: 1; display: grid; gap: 24px; min-width: 0; }
body.nd.nd-co2 #order_form .nd-co-rail { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
body.nd.nd-co2 #order_form .nd-co-actions { grid-column: 1; grid-row: 2; }
@media (min-width: 992px) and (min-height: 700px) {
  body.nd.nd-co2 #order_form .nd-co-rail { position: sticky; top: calc(var(--nd-nav-bot, var(--nd-hdr-vis, 0px)) + 16px); align-self: start; }
}
@media (max-width: 991px) {
  /* jeden stĺpec: údaje, doprava a platba, súhrn, súhlasy a odoslanie (súhrn pred tlačidlom) */
  body.nd.nd-co2 #order_form .nd-co-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.nd.nd-co2 #order_form .nd-co-main { gap: 16px; }
  body.nd.nd-co2 #order_form :is(.nd-co-main, .nd-co-rail, .nd-co-actions) { grid-column: 1; grid-row: auto; }
}

/* ---- karty sekcií ---- */
body.nd.nd-co2 #order_form .nd-co-card {
  min-width: 0; padding: 24px; border: 1px solid var(--nd-line); border-radius: var(--nd-r-lg); background: var(--nd-surface);
  scroll-margin-top: calc(var(--nd-nav-bot, var(--nd-hdr-vis, 80px)) + 16px);	/* odkaz z krokov 1-2-3 nezájde pod hlavičku */
}
body.nd.nd-co2 #order_form .nd-co-h {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-family: var(--nd-font-display); font-size: 22px;
  font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--nd-ink);
}
@media (max-width: 767px) {
  body.nd.nd-co2 #order_form .nd-co-card { padding: 18px 16px; }
  body.nd.nd-co2 #order_form .nd-co-h { font-size: 19px; }
}
/* panely vnútri sekcie bez rámika a farebnej hlavičky, pod sebou na celú šírku */
body.nd.nd-co2 #order_form .nd-co-sec > .row { display: block; margin: 0; }
body.nd.nd-co2 #order_form .nd-co-sec > .row::before, body.nd.nd-co2 #order_form .nd-co-sec > .row::after { content: none; }
body.nd.nd-co2 #order_form .nd-co-sec > .row > [class*="col-"] { float: none; width: auto; min-height: 0; padding: 0; }
body.nd.nd-co2 #order_form .nd-co-sec .panel { margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.nd.nd-co2 #order_form .nd-co-sec > .row > [class*="col-"] + [class*="col-"] .panel,
body.nd.nd-co2 #order_form .nd-co-sec > .row + .row .panel { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--nd-line); }
body.nd.nd-co2 #order_form .nd-co-sec .panel-heading { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.nd.nd-co2 #order_form .nd-co-sec .panel-heading h3 {
  margin: 0 0 12px; padding: 0; font-family: var(--nd-font-display); font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--nd-ink);
}
body.nd.nd-co2 #order_form .nd-co-sec .panel-body { padding: 0; }
/* „Doplnkové služby" je nadpis kroku 2 rovnako ako „Spôsob doručenia" a „Krajina doručenia" (.nd-co-h, aj mobilná veľkosť) */
body.nd.nd-co2 #order_form .nd-co-sec .additional-services > .panel > .panel-heading h3 { margin: 0 0 16px; font-size: 22px; line-height: 1.2; }
@media (max-width: 767px) {
  body.nd.nd-co2 #order_form .nd-co-sec .additional-services > .panel > .panel-heading h3 { font-size: 19px; }
}

/* ---- krok 2, Vaše údaje (pôvodné panely): pod sebou, kontakt prvý ako v prototype (e-mail na celý riadok) ---- */
body.nd.nd-co2 #order_form .nd-co-h2 { margin-top: 28px; }
body.nd.nd-co2 #order_form .nd-co-details { display: flex; flex-direction: column; gap: 12px; }	/* medzi kartami .nd-co-opt (nižšie) */
body.nd.nd-co2 #order_form .nd-co-details > .row { display: contents; }
body.nd.nd-co2 #order_form .nd-co-details > .row > [class*="col-"] { order: 2; float: none; width: auto; min-height: 0; padding: 0; }
body.nd.nd-co2 #order_form .nd-co-details > .row > [class*="col-"]:has(#email) { order: 1; }
/* clearfix ::before/::after obalu .row (display: contents) by boli prázdne položky flexu s order 0 nad kontaktom (4 medzery = prázdne miesto pod nadpisom) */
body.nd.nd-co2 #order_form .nd-co-details > .row::before, body.nd.nd-co2 #order_form .nd-co-details > .row::after { content: none; }
/* kontakt a adresa bez pôvodných podnadpisov (Kontaktné informácie, Dodacia / Fakturačná adresa) a bez deliacej čiary,
   jedna mriežka ako v prototype; podnadpis ostáva len pri voliteľných blokoch (iná dodacia adresa, doplňujúce údaje) */
body.nd.nd-co2 #order_form .nd-co-details .panel:is(:has(#email), :has(#first_name)) > .panel-heading { display: none; }
body.nd.nd-co2 #order_form .nd-co-details > .row > [class*="col-"]:has(#first_name) > .panel { padding-top: 0; border-top: 0; }
body.nd.nd-co2 #order_form .nd-co-details .panel-heading h3, body.nd.nd-co2 #order_form .nd-co-details h3.nd-co-blk-h {
  margin: 0 0 10px; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase;
  color: var(--nd-muted) !important;	/* základné CSS: .panel .panel-heading h3 { color: #000 !important } */
}
/* nadpis bloku (Kontakt, Fakturačná adresa) silnejší než podnadpis karty (15 px), inak bloky nepôsobia oddelene */
body.nd.nd-co2 #order_form .nd-co-details h3.nd-co-blk-h { font-family: var(--nd-font-display); font-size: 17px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--nd-ink) !important; }
body.nd.nd-co2 #order_form .nd-co-details .panel-heading h3 small { font-size: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; color: inherit; }

/* ---- polia: popis nad poľom, mriežka 2 stĺpce ---- */
body.nd.nd-co2 #order_form .nd-co-details .panel-body .row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin: 0;
}
body.nd.nd-co2 #order_form .nd-co-details .panel-body .row[hidden] { display: none; }	/* riadok, z ktorého skript presunul krajinu a PSČ */
body.nd.nd-co2 #order_form .nd-co-details .panel-body .row::before, body.nd.nd-co2 #order_form .nd-co-details .panel-body .row::after { content: none; }
body.nd.nd-co2 #order_form .nd-co-details .panel-body .row > * { float: none; width: auto; min-height: 0; margin: 0; padding: 0; left: auto; }
body.nd.nd-co2 #order_form .nd-co-details .panel-body .row > :not([class*="col-md-6"]):not([class*="col-xs-6"]),
body.nd.nd-co2 #order_form .nd-co-details .panel-body .row > :is(.input:has(> #email), .input:has(> #street)) { grid-column: 1 / -1; }
body.nd.nd-co2 #order_form .nd-co-details .panel-body > br { display: none; }
/* nápoveda v stĺpci vedľa poľa (Vaše číslo objednávky): na výšku poľa (40 px), nie hore pri jeho popise */
body.nd.nd-co2 #order_form .nd-co-details .panel-body .row > .input.help { align-self: end; font-size: 12.5px; line-height: 1.35; color: var(--nd-muted); top: 0; transform: translateY(calc(50% - 20px)); }	/* top: 0 ruší top:-5px zo starého .inline-right; spodkom na spodok poľa, potom posun o pol vlastnej výšky mínus pol poľa (40 px): stred textu = stred poľa pri ľubovoľnom počte riadkov */
body.nd.nd-co2 #order_form .nd-co-details #objednavka_na_firmu > br, body.nd.nd-co2 #order_form .nd-co-details .row > .input > br { display: none; }
body.nd.nd-co2 #order_form .nd-co-details #shipping_as_billing_box { margin-top: 14px; }
body.nd.nd-co2 #order_form .nd-co-details #objednavka_na_firmu .row + .row { margin-top: 14px; }
body.nd.nd-co2 #order_form .nd-co-details #shipping_address .row + .row { margin-top: 14px; }
/* bloky Vaše údaje (order.php ich poskladá do $nd_co_details, 12.11.2026): celé údaje sú jeden stĺpec sivých kariet
   12 px od seba. Kontakt a Fakturačná adresa (.nd-co-blk) sú karty s podnadpisom hore, vyzerajú ako zatvorená
   voliteľná karta, ale nemenia sa (nie sú prepínač). Voliteľné časti ako karty .nd-co-opt (firma, konto a newsletter -
   len anonymný, dodacia adresa, doplňujúce údaje): sivé, zaškrtnutá / rozbalená ostáva sivá a dostane zlatý rámik;
   polia firmy a dodacej adresy sú vnútri karty pod zaškrtávadlom, celý riadok zaškrtávadla je klikateľný.
   Polia v kartách sú biele (var(--nd-surface) nižšie), zablokovaný e-mail prihláseného tiež biely, len so sivým textom */
body.nd.nd-co2 #order_form .nd-co-details .nd-co-blk {
  margin: 0; padding: 16px; border: 1px solid var(--nd-line); border-radius: var(--nd-r-lg); background: var(--nd-surface-2);
}
body.nd.nd-co2 #order_form .nd-co-details .nd-co-blk > .row + .row { margin-top: 14px; }
body.nd.nd-co2 #order_form .nd-co-details :is(.nd-co-blk, .nd-co-opt) + :is(.nd-co-blk, .nd-co-opt) { margin-top: 12px; }
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt {
  position: relative; margin: 0; padding: 14px 16px; border: 1px solid var(--nd-line); border-radius: var(--nd-r-lg);
  background: var(--nd-surface-2); box-shadow: none; transition: border-color .15s, background .15s;
}
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt:is(.nd-co-opt-firm, .nd-co-opt-acc, .nd-co-opt-ship):hover { border-color: var(--nd-muted-2); }
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt-firm:has(#objednavka_na_firmu_check:checked),
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt-acc:has(input[type=checkbox]:checked),
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt-ship:has(#shipping_as_billing:not(:checked)) { border-color: var(--nd-accent); }	/* podklad ostáva sivý (12.11.2026) */
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt > .panel-heading h3 {
  margin: 0 0 10px; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--nd-ink) !important;
}
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt > .panel-heading h3 small { font-size: 13px; font-weight: 400; color: var(--nd-muted); }
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt label:is(.order-company-toggle, [for=create_account]) { font-size: 15px; font-weight: 700; }
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt input[type=checkbox] { position: relative; z-index: 1; cursor: pointer; }
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt label.label-inline { cursor: pointer; }
/* firma: zaškrtávadlo vľavo hore, popis na celú šírku karty (klik kdekoľvek v riadku), polia pod ním */
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt-firm { padding: 0; }
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt-firm > br { display: none; }
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt-firm > #objednavka_na_firmu_check { position: absolute; top: 16px; left: 16px; margin: 0; }
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt-firm > label.order-company-toggle { display: block; margin: 0; padding: 14px 16px 14px 42px; line-height: 1.35; cursor: pointer; }
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt-firm > #objednavka_na_firmu { margin: 0; padding: 2px 16px 16px; }
/* dodacia adresa a konto: riadok so zaškrtávadlom klikateľný po celej šírke karty (ako .additional-service) */
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt-ship .row > :has(> #shipping_as_billing),
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt-acc .row > .input { position: relative; }
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt-ship label[for=shipping_as_billing]::after,
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt-acc .row > .input > label.label-inline::after { content: ""; position: absolute; inset: -5px -16px; }
/* konto: nápoveda hneď pod Vytvoriť konto (odsadená na text popisu), newsletter pod ňou */
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt-acc .row { gap: 10px; }
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt-acc .row > .help { order: 1; padding-left: 26px; }
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt-acc .row > .help > br { display: none; }
body.nd.nd-co2 #order_form .nd-co-details .nd-co-opt-acc .row > .input:has(#newsletter) { order: 2; }
@media (max-width: 599px) {
  body.nd.nd-co2 #order_form .nd-co-details .panel-body .row { grid-template-columns: minmax(0, 1fr); }
}
body.nd.nd-co2 #order_form .nd-co-sec .panel-body label:not(.label-inline):not(.order-company-toggle),
body.nd.nd-co2 #order_form #nd_co_login label {
  display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--nd-ink-2);
}
body.nd.nd-co2 #order_form :is(.nd-co-sec .panel-body, .nd-co-country, #nd_co_login) :is(input.form-control, select.form-control, textarea.form-control) {
  width: 100%; height: auto; min-height: 40px; margin: 0; padding: 8px 12px; border: 1px solid var(--nd-line); border-radius: var(--nd-r);
  background: var(--nd-surface); color: var(--nd-ink); font-size: 15px; line-height: 1.4; box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
body.nd.nd-co2 #order_form :is(.nd-co-sec .panel-body, .nd-co-country, #nd_co_login) :is(input.form-control, select.form-control, textarea.form-control):focus {
  outline: none; border-color: var(--nd-accent); box-shadow: 0 0 0 3px var(--nd-accent-soft);
}
/* Vaše údaje na mobile (12.11.2026): pole 48 px a písmo 16 px (iOS pri menšom písme po ťuknutí priblíži stránku), popis
   tlmený, karty Kontakt a adresa s menším okrajom (14/16 px); #nd_co_details (id) prebije pravidlá polí vyššie.
   Rovnako prihlásenie v kroku 1 (#nd_co_login) a výber „Krajina doručenia" (jej štítok je nadpis, ten ostáva) */
@media (max-width: 599px) {
  body.nd.nd-co2 #order_form :is(#nd_co_details label:not(.label-inline):not(.order-company-toggle), #nd_co_login label) { color: var(--nd-muted); }
  body.nd.nd-co2 #order_form :is(#nd_co_details, #nd_co_login, .nd-co-country) :is(input.form-control, select.form-control) { min-height: 48px; padding: 11px 12px; font-size: 16px; line-height: 1.5; }
  body.nd.nd-co2 #order_form #nd_co_details textarea.form-control { font-size: 16px; }
  body.nd.nd-co2 #order_form #nd_co_details h3.nd-co-blk-h { margin-bottom: 12px; font-size: 16px; }
  body.nd.nd-co2 #order_form #nd_co_details .nd-co-blk { padding: 14px 16px; }	/* obsah zarovno s kartami .nd-co-opt (14px 16px) */
}
/* na mobile vedľa seba len DIČ | IČ DPH; meno a priezvisko aj mesto a PSČ pod sebou (rozhodnutie 12.11.2026, vedľa seba
   pôsobili stiesnene). Pod 340 px ostane všetko pod sebou (1 stĺpec vyššie). Chyba poľa (.order-field-error) je v obale poľa */
@media (min-width: 340px) and (max-width: 599px) {
  body.nd.nd-co2 #order_form #nd_co_details .panel-body .row:has(> .input > #company_dic) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px;
  }
}

/* krajina doručenia na začiatku kroku 2 (skript ju presunie z fakturačnej adresy) */
body.nd.nd-co2 #order_form .nd-co-country { margin: 0 0 22px; }
body.nd.nd-co2 #order_form .nd-co-country:empty { display: none; }
body.nd.nd-co2 #order_form .nd-co-country > .input { float: none; width: auto; max-width: 360px; min-height: 0; margin: 0; padding: 0; }
/* „Krajina doručenia" je nadpis kroku 2 rovnako ako „Spôsob doručenia" pod ním (.nd-co-h vyššie, aj jeho mobilná veľkosť) */
body.nd.nd-co2 #order_form .nd-co-country label {
  display: block; margin: 0 0 12px; font-family: var(--nd-font-display); font-size: 22px; font-weight: 700; line-height: 1.2;
  letter-spacing: 0; text-transform: none; color: var(--nd-ink);
}
@media (max-width: 767px) {
  body.nd.nd-co2 #order_form .nd-co-country label { font-size: 19px; }
}
/* prihlásený zákazník: krok 1 je hotový */
body.nd.nd-co2 #order_form .nd-co-who {
  display: flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 12px; border-radius: var(--nd-r);
  background: var(--nd-ok-soft); color: var(--nd-ink); font-size: 14px; line-height: 1.4;
}
body.nd.nd-co2 #order_form .nd-co-who > .nd-ico { flex: 0 0 auto; color: var(--nd-ok); }

/* ---- krok 1: hosť / prihlásenie, karty na výber ako v prototype ---- */
body.nd.nd-co2 #order_form .nd-co-acc { display: flex; flex-direction: column; gap: 12px; }
body.nd.nd-co2 #order_form .nd-co-acc-opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; margin: 0; padding: 16px; text-align: left;
  border: 2px solid var(--nd-line); border-radius: var(--nd-r-lg); background: var(--nd-surface); color: var(--nd-ink);
  font: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
body.nd.nd-co2 #order_form .nd-co-acc-opt:hover { border-color: var(--nd-muted-2); }
/* vybraná ako vybraná doprava / platba: accent rámik + accent-soft pozadie */
body.nd.nd-co2 #order_form .nd-co-acc-opt.is-sel { border-color: var(--nd-accent); background: var(--nd-accent-soft); }
body.nd.nd-co2 #order_form .nd-co-acc-opt:focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 2px; }
body.nd.nd-co2 #order_form .nd-co-radio {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; border: 2px solid var(--nd-muted-2); border-radius: 50%; background: var(--nd-surface);
}
body.nd.nd-co2 #order_form .nd-co-acc-opt.is-sel .nd-co-radio { border-color: var(--nd-accent); background: var(--nd-accent); box-shadow: inset 0 0 0 3px var(--nd-surface); }
body.nd.nd-co2 #order_form .nd-co-acc-t { display: block; min-width: 0; }
body.nd.nd-co2 #order_form .nd-co-acc-t > b { font-size: 16px; font-weight: 700; line-height: 1.35; }
body.nd.nd-co2 #order_form .nd-co-pill {
  display: inline-flex; align-items: center; margin-left: 8px; padding: 3px 8px; border-radius: 999px; background: var(--nd-ok-soft);
  color: var(--nd-ok); font-size: 12px; font-weight: 600; line-height: 1.2; vertical-align: 2px;
}
body.nd.nd-co2 #order_form .nd-co-acc-s { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--nd-muted); }
/* panel prihlásenia priamo pod voľbou „Prihlásiť sa / registrovať" (medzi kartami): otvorený nadväzuje na vybranú kartu
   (karta bez spodných rohov, panel bez horného okraja, medzera skupiny zrušená). Polia E-mail a Heslo vedľa seba
   (pod 600 px pod sebou), „Zabudnuté heslo?" vpravo v riadku štítku Heslo, pod čiarou odkaz na registráciu */
body.nd.nd-co2 #order_form .nd-co-acc-opt.is-sel[data-nd-co-acc=login] {
  border-bottom: 1px solid var(--nd-line); padding-bottom: 17px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
body.nd.nd-co2 #order_form .nd-co-login {
  margin-top: -12px; padding: 18px 20px; border: 2px solid var(--nd-accent); border-top: 0;
  border-radius: 0 0 var(--nd-r-lg, 12px) var(--nd-r-lg, 12px); background: var(--nd-surface-2);
}
body.nd.nd-co2 #order_form .nd-co-login[hidden] { display: none; }
body.nd.nd-co2 #order_form #nd_co_login .order_login_form_full { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 599px) {
  body.nd.nd-co2 #order_form #nd_co_login .order_login_form_full { grid-template-columns: minmax(0, 1fr); }
}
body.nd.nd-co2 #order_form #nd_co_login .form-group { min-width: 0; margin: 0; }
body.nd.nd-co2 #order_form #nd_co_login #form_login_box { position: relative; min-width: 0; }	/* kotva pre „Zabudnuté heslo?" */
body.nd.nd-co2 #order_form #nd_co_login #form_lost_password_box { grid-column: 1 / -1; }	/* obnova hesla: pod e-mailom na celú šírku */
body.nd.nd-co2 #order_form #nd_co_login #form_login_box button[name=login] { display: none; }	/* odošle ho Pokračovať */
/* !important: comco.css .btn.btn-link.btn-block { color: #000 !important; text-transform: none !important } */
body.nd.nd-co2 #order_form #nd_co_login :is(#form_lost_password_click, #form_login_click) {
  display: inline-block; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--nd-info) !important; font-size: 13px; font-weight: 500; line-height: 1.3; text-align: left; text-decoration: none; text-transform: none; transition: none;
}
body.nd.nd-co2 #order_form #nd_co_login :is(#form_lost_password_click, #form_login_click):hover { text-decoration: underline; }
body.nd.nd-co2 #order_form #nd_co_login :is(#form_lost_password_click, #form_login_click):focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 2px; }
body.nd.nd-co2 #order_form #nd_co_login #form_lost_password_click { position: absolute; top: 0; right: 0; }	/* v riadku štítku Heslo (13px / 1.3 ako štítok) */
body.nd.nd-co2 #order_form #nd_co_login #form_lost_password_click::after { content: "?"; }
body.nd.nd-co2 #order_form #nd_co_login .lost_password_text { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--nd-muted); }
body.nd.nd-co2 #order_form #nd_co_login button[name=reset_password] { display: none; }	/* nahrádza ho „Resetovať heslo" (AJAX) */
/* „Späť na prihlásenie" (text dáva order.php): odkaz späť so šípkou, väčšia klikacia plocha, odstup od textu nad ním;
   šípka je inline-block, takže ju podčiarknutie pri hover neprečiarkne */
body.nd.nd-co2 #order_form #nd_co_login #form_login_click {
  margin: 4px 0 0; padding: 6px 4px 6px 2px; border-radius: var(--nd-r); font-size: 14px; font-weight: 600; line-height: 1.3;
}
body.nd.nd-co2 #order_form #nd_co_login #form_login_click::before {
  content: "\2190"; content: "\2190" / ""; display: inline-block; margin-right: 6px; font-size: 16px; line-height: 1; vertical-align: -1px;
}
body.nd.nd-co2 #order_form #nd_co_login #form_login_click:hover { color: #0f4fa3 !important; text-decoration: underline; text-underline-offset: 3px; }
/* zabudnuté heslo (#nd_co_login.is-lp, order.php): e-mail na celú šírku, „Resetovať heslo" prilepené k poľu v jeho výške, pod ním hlásenie
   (aria-live, úspech zelený, chyba --nd-danger + červený rámik poľa cez aria-invalid). Pokračovať sa v tomto režime skryje. Pod 420 px tlačidlo pod poľom. */
body.nd.nd-co2 #order_form #nd_co_login.is-lp .order_login_form_full { grid-template-columns: minmax(0, 1fr); }
body.nd.nd-co2 #order_form #nd_co_login .nd-co-lp-row { display: flex; align-items: stretch; min-width: 0; }
body.nd.nd-co2 #order_form #nd_co_login .nd-co-lp-row input.form-control { flex: 1 1 auto; min-width: 0; }
body.nd.nd-co2 #order_form #nd_co_login:not(.is-lp) :is(.nd-co-lp-btn, .nd-co-lp-msg) { display: none; }
body.nd.nd-co2 #order_form #nd_co_login.is-lp .nd-co-lp-row input.form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.nd.nd-co2 #order_form #nd_co_login .nd-co-lp-btn {
  flex: 0 0 auto; margin: 0; padding: 0 18px; border-radius: 0 var(--nd-r) var(--nd-r) 0; background: var(--nd-accent); color: var(--nd-on-accent, #fff);
  font-size: 14.5px; cursor: pointer;
}
body.nd.nd-co2 #order_form #nd_co_login .nd-co-lp-btn:hover:not(:disabled) { background: var(--nd-accent-deep); }
body.nd.nd-co2 #order_form #nd_co_login .nd-co-lp-btn:focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 2px; }
body.nd.nd-co2 #order_form #nd_co_login .nd-co-lp-btn.is-busy { opacity: .7; cursor: progress; }
body.nd.nd-co2 #order_form #nd_co_login .nd-co-lp-btn.is-busy::before {
  content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: nd-co-lp-spin .7s linear infinite;
}
@keyframes nd-co-lp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body.nd.nd-co2 #order_form #nd_co_login .nd-co-lp-btn.is-busy::before { animation: none; } }
body.nd.nd-co2 #order_form #nd_co_login .nd-co-lp-msg { margin: 6px 0 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--nd-ok); }
body.nd.nd-co2 #order_form #nd_co_login .nd-co-lp-msg:empty { margin: 0; }	/* ostáva v strome (aria-live), len bez medzery */
body.nd.nd-co2 #order_form #nd_co_login .nd-co-lp-msg.is-err { color: var(--nd-danger); }
body.nd.nd-co2 #order_form #nd_co_sec1.nd-co-lp-on .nd-co-next { display: none; }	/* odkaz sa posiela len „Resetovať heslo" */
@media (max-width: 419px) {
  body.nd.nd-co2 #order_form #nd_co_login .nd-co-lp-row { flex-wrap: wrap; gap: 8px; }
  body.nd.nd-co2 #order_form #nd_co_login.is-lp .nd-co-lp-row input.form-control { flex-basis: 100%; border-radius: var(--nd-r); }
  body.nd.nd-co2 #order_form #nd_co_login .nd-co-lp-btn { flex-basis: 100%; min-height: 48px; border-radius: var(--nd-r); }	/* výška poľa nad ním */
}
body.nd.nd-co2 #order_form .nd-co-reg { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--nd-line); font-size: 13.5px; line-height: 1.45; color: var(--nd-muted); }
body.nd.nd-co2 #order_form .nd-co-reg a { font-weight: 600; color: var(--nd-info) !important; }	/* .mainContainer a: #000 !important */
/* automatické vyplnenie prehliadačom (krok 1 aj 2): bez svetlomodrého pozadia, rámik a focus ring ostávajú (:is() je zhovievavé k neznámej pseudotriede) */
body.nd.nd-co2 #order_form :is(.nd-co-sec, #nd_co_login) input:is(:-webkit-autofill, :autofill) {
  box-shadow: 0 0 0 1000px var(--nd-surface) inset; -webkit-text-fill-color: var(--nd-ink); caret-color: var(--nd-ink);
}
body.nd.nd-co2 #order_form :is(.nd-co-sec, #nd_co_login) input:is(:-webkit-autofill, :autofill):focus {
  box-shadow: 0 0 0 1000px var(--nd-surface) inset, 0 0 0 3px var(--nd-accent-soft);
}
/* zablokované pole (e-mail prihláseného) biele ako ostatné, len sivý text; #nd_co_details v :is() kvôli váhe - pravidlo polí má 2 id */
body.nd.nd-co2 #order_form :is(.nd-co-sec .panel-body, #nd_co_details) :is(input.form-control, select.form-control):disabled { background: var(--nd-surface); color: var(--nd-muted); cursor: not-allowed; }
body.nd.nd-co2 #order_form .nd-co-sec .help { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--nd-muted); }
body.nd.nd-co2 #order_form .nd-co-sec input[type=checkbox] { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--nd-accent); }
body.nd.nd-co2 #order_form .nd-co-sec label.label-inline, body.nd.nd-co2 #order_form label.order-company-toggle { font-size: 14.5px; font-weight: 600; color: var(--nd-ink); }

/* chybové stavy: ikona výkričníka v krúžku (maska = farba textu; -c farebná pre pozadie pseudoprvku s textom) */
body.nd.nd-co2 #order_form {
  --nd-co-err-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.1'/%3E%3C/svg%3E");
  --nd-co-err-ico-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8322b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.1'/%3E%3C/svg%3E");
}
/* chyba poľa (F36 front.js: .error-input / aria-invalid na poli, .error na popise, .order-field-error pod poľom;
   comco.css: border 1px solid red + ružové pozadie !important, popis red !important s bielym pozadím) */
body.nd.nd-co2 #order_form .error-input { border-color: var(--nd-danger) !important; }
body.nd.nd-co2 #order_form .nd-co-sec :is(input, select, textarea):is(.error-input, [aria-invalid="true"]) {
  border-color: var(--nd-danger) !important; background-color: var(--nd-surface, #fff) !important; box-shadow: none;
}
body.nd.nd-co2 #order_form .nd-co-sec :is(input, select, textarea):is(.error-input, [aria-invalid="true"]):focus {
  outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--nd-danger) 20%, transparent);
}
body.nd.nd-co2 #order_form .nd-co-sec label.error { color: var(--nd-danger) !important; background: transparent !important; }
/* hlásenie pod poľom (F36, chyba zo servera .nd-co-srv-err): 13 px, ikona vľavo; obsah ostáva v riadkovom toku (môže mať tlačidlo) */
body.nd.nd-co2 #order_form .nd-co-card .order-field-error {
  position: relative; margin: 6px 0 0; padding: 0 0 0 20px; border: 0; border-radius: 0; background: none;
  color: var(--nd-danger); font-size: 13px; font-weight: 500; line-height: 1.4;
}
body.nd.nd-co2 #order_form .nd-co-card .order-field-error::before,
body.nd.nd-co2 #order_form div.errors::before,
body.nd.nd-co2 #order_form #sq_no_delivery::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--nd-co-err-ico) center / contain no-repeat; mask: var(--nd-co-err-ico) center / contain no-repeat;
}
/* hlásenie kroku (nd-co-step-err pod nadpisom), doprava s platbou (order-dp-error), chyby zo servera nad formulárom (div.errors)
   a krajina bez dopravy (#sq_no_delivery): karta ako .nd-co-note, v červenom odtieni */
body.nd.nd-co2 #order_form .nd-co-card .order-field-error:is(.nd-co-step-err, .order-dp-error),
body.nd.nd-co2 #order_form div.errors,
body.nd.nd-co2 #order_form #sq_no_delivery {
  position: relative; margin: 0 0 16px; padding: 12px 14px 12px 42px;
  border: 1px solid color-mix(in srgb, var(--nd-danger) 35%, transparent); border-radius: var(--nd-r-md, 10px);
  background: var(--nd-danger-soft); color: var(--nd-ink-2, var(--nd-ink));
  font-size: var(--nd-fs-14, 14px); font-weight: 500; line-height: 1.45; text-align: left; box-shadow: none;
}
body.nd.nd-co2 #order_form .nd-co-card .order-field-error:is(.nd-co-step-err, .order-dp-error)::before,
body.nd.nd-co2 #order_form div.errors::before,
body.nd.nd-co2 #order_form #sq_no_delivery::before { left: 14px; top: 13px; width: 18px; height: 18px; color: var(--nd-danger); }
body.nd.nd-co2 #order_form div.errors { margin-bottom: 20px; }
body.nd.nd-co2 #order_form div.errors ul { margin: 0; padding: 0; list-style: none; }
body.nd.nd-co2 #order_form div.errors ul li { margin: 0; padding: 0; background: none; color: inherit; }
body.nd.nd-co2 #order_form div.errors ul li + li { margin-top: 4px; }
body.nd.nd-co2 #order_form .nd-co-card .order-field-error:empty { display: none; }

/* pokračovanie na ďalšiu sekciu (bez JS posun na stránke, so sprievodcom ďalší krok; formulár je jeden) */
body.nd.nd-co2 #order_form .nd-co-next { margin-top: 22px; }
/* Späť a hlavné tlačidlo vedľa seba vľavo (prototyp: .center, gap 12), na úzkom displeji sa zalomia */
body.nd.nd-co2 #order_form .nd-co-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; }

/* ---- sprievodca: #order_form.nd-co-wizard (skript v order.php), vidieť je len krok .is-current ---- */
body.nd.nd-co2 #order_form:not(.nd-co-wizard) .nd-co-wiz-only,
body.nd.nd-co2 #order_form.nd-co-wizard .nd-co-nowiz,
body.nd.nd-co2 #order_form.nd-co-wizard .nd-co-sec:not(.is-current),
body.nd.nd-co2 #order_form.nd-co-wizard[data-nd-co-step="3"] .nd-co-main { display: none; }
body.nd.nd-co2 #order_form .nd-co-steps { scroll-margin-top: calc(var(--nd-nav-bot, var(--nd-hdr-vis, 80px)) + 16px); }
body.nd.nd-co2 #order_form .nd-co-h:focus { outline: none; }
/* krok sa otvorí len hotový (späť); aktuálny a ďalšie nie sú odkaz */
body.nd.nd-co2 #order_form.nd-co-wizard .nd-co-step:not(.is-done) a { cursor: default; pointer-events: none; }
@media (min-width: 992px) {
  /* krok 3 hore v ľavom stĺpci, súhrn vpravo ostáva */
  body.nd.nd-co2 #order_form.nd-co-wizard[data-nd-co-step="3"] .nd-co-actions { grid-row: 1; }
}
@media (max-width: 991px) {
  /* mobil a tablet: súhrn až v kroku 3 nad súhlasmi a tlačidlom */
  body.nd.nd-co2 #order_form.nd-co-wizard:not([data-nd-co-step="3"]) .nd-co-rail { display: none; }
  /* krok 3 (aj bez JS, jedna stránka): karta platby s rekapituláciou hore, pod ňou súhrn a súhlasy s tlačidlom na konci
     (súhrn pred tlačidlom). Sekcia #nd_co_sec3 sa rozpadne na dve karty v mriežke .nd-co-layout, poradie cez order. */
  body.nd.nd-co2 #order_form:is(.nd-co-wizard[data-nd-co-step="3"], :not(.nd-co-wizard)) .nd-co-actions { display: contents; }
  body.nd.nd-co2 #order_form:is(.nd-co-wizard[data-nd-co-step="3"], :not(.nd-co-wizard)) :is(.nd-co-pay-part, .nd-co-actions .buttons) {
    min-width: 0; padding: 24px; border: 1px solid var(--nd-line); border-radius: var(--nd-r-lg); background: var(--nd-surface);
  }
  body.nd.nd-co2 #order_form:is(.nd-co-wizard[data-nd-co-step="3"], :not(.nd-co-wizard)) .nd-co-pay-part { order: 1; }
  body.nd.nd-co2 #order_form:is(.nd-co-wizard[data-nd-co-step="3"], :not(.nd-co-wizard)) .nd-co-rail { order: 2; }
  body.nd.nd-co2 #order_form:is(.nd-co-wizard[data-nd-co-step="3"], :not(.nd-co-wizard)) .nd-co-actions .buttons { order: 3; }
  body.nd.nd-co2 #order_form:is(.nd-co-wizard[data-nd-co-step="3"], :not(.nd-co-wizard)) .nd-co-pay-part .nd-co-review { margin-bottom: 0; }
}
@media (max-width: 767px) {
  body.nd.nd-co2 #order_form:is(.nd-co-wizard[data-nd-co-step="3"], :not(.nd-co-wizard)) :is(.nd-co-pay-part, .nd-co-actions .buttons) { padding: 18px 16px; }
}
/* kompaktná rekapitulácia kroku 2 v kroku 3: kontakt, adresa, doprava, každé so Zmeniť */
body.nd.nd-co2 #order_form .nd-co-review { margin: 22px 0 20px; padding: 2px 16px; border: 1px solid var(--nd-line); border-radius: var(--nd-r); background: var(--nd-surface-2); }
body.nd.nd-co2 #order_form .nd-co-review-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 10px 0; }
body.nd.nd-co2 #order_form .nd-co-review-row + .nd-co-review-row { border-top: 1px solid var(--nd-line); }
body.nd.nd-co2 #order_form .nd-co-review-k { font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--nd-muted); }
body.nd.nd-co2 #order_form .nd-co-review-row > a { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--nd-accent); }
body.nd.nd-co2 #order_form .nd-co-review-body { font-size: 14px; line-height: 1.5; color: var(--nd-ink); overflow-wrap: anywhere; }
@media (max-width: 479px) {
  body.nd.nd-co2 #order_form .nd-co-review-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  body.nd.nd-co2 #order_form .nd-co-review-k { grid-column: 1 / -1; }
}

/* ---- tlačidlá ---- */
body.nd.nd-co2 #order_form .nd-co-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px;
  border: 1px solid transparent; border-radius: var(--nd-r); font-size: 15px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
}
body.nd.nd-co2 #order_form .nd-co-btn-primary { padding: 15px 24px; font-size: 16px; background: var(--nd-accent); color: var(--nd-on-accent, #fff); }
body.nd.nd-co2 #order_form .nd-co-btn-primary:hover { background: var(--nd-accent-deep); color: var(--nd-on-accent, #fff); }
/* úzky mobil (320 px): dlhý popis „Pokračovať na dopravu a platbu" sa zalomí namiesto pretečenia */
@media (max-width: 400px) {
  body.nd.nd-co2 #order_form .nd-co-btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
  body.nd.nd-co2 #order_form .nd-co-btn-primary { padding: 13px 16px; }
}
body.nd.nd-co2 #order_form .nd-co-btn-ghost { border-color: var(--nd-line); background: var(--nd-surface); color: var(--nd-ink); }
body.nd.nd-co2 #order_form .nd-co-btn-ghost:hover { border-color: var(--nd-muted-2); background: var(--nd-surface-2); color: var(--nd-ink); }
@media (max-width: 599px) {
  /* mobil: „‹ Späť" (bez „do košíka") úzke vľavo, Pokračovať zvyšok riadku, obe rovnako vysoké; riadok sa nezalamuje */
  body.nd.nd-co2 #order_form .nd-co-btn-more { display: none; }
  body.nd.nd-co2 #order_form .nd-co-nav { flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  body.nd.nd-co2 #order_form .nd-co-nav .nd-co-btn-ghost { flex: 0 0 auto; padding: 12px 14px; gap: 6px; white-space: nowrap; }
  body.nd.nd-co2 #order_form .nd-co-nav .nd-co-btn-primary { flex: 1 1 auto; min-width: 0; padding: 13px 14px; gap: 6px; text-align: center; white-space: nowrap; }
}
@media (max-width: 400px) {
  body.nd.nd-co2 #order_form .nd-co-nav .nd-co-btn-primary { font-size: 15px; }
}
@media (max-width: 349px) {
  /* 320 px: popis sa radšej zalomí vnútri tlačidla, než by pretiekol */
  body.nd.nd-co2 #order_form .nd-co-nav .nd-co-btn-primary { white-space: normal; }
}
/* comco.css: .mainContainer a { text-decoration: underline !important } - tlačidlá a odkazy sprievodcu bez podčiarknutia,
   textové odkazy (Zmeniť, Upraviť, registrácia) podčiarknuté len pri hover */
body.nd.nd-co2 #order_form :is(a.nd-co-btn, .nd-co-step a, .nd-co-review-row > a, .nd-co-rail-h a, .nd-co-reg a) { text-decoration: none !important; }
body.nd.nd-co2 #order_form :is(.nd-co-review-row > a, .nd-co-rail-h a, .nd-co-reg a):hover { text-decoration: underline !important; }

/* ---- doprava a platba ako karty na výber ---- */
/* nadpis panelu nahrádza nadpis kroku (Spôsob doručenia v kroku 2, Platba v kroku 3) */
body.nd.nd-co2 #order_form :is(#nd_co_sec2 .delivery, #nd_co_sec3 .payment) > .panel > .panel-heading { display: none; }
body.nd.nd-co2 #order_form .delivery .panel-body > table, body.nd.nd-co2 #order_form .delivery .panel-body > table > tbody { display: block; width: 100%; }
body.nd.nd-co2 #order_form .delivery_tr {
  display: flex; align-items: flex-start; gap: 0; margin: 0 0 10px; border: 2px solid var(--nd-line); border-radius: var(--nd-r-lg);
  background: var(--nd-surface); cursor: pointer; transition: border-color .15s, background .15s;
}
body.nd.nd-co2 #order_form .delivery_tr > td { display: block; padding: 0; border: 0; }
body.nd.nd-co2 #order_form .delivery_tr > td:first-child { flex: 0 0 auto; padding: 0 0 0 14px; }
body.nd.nd-co2 #order_form .delivery_tr > td:last-child { flex: 1 1 auto; min-width: 0; }
body.nd.nd-co2 #order_form .delivery_tr .input { margin: 0; padding: 0; }
/* platba je v .nd-co-pay-part (nie priamo v .nd-co-sec), preto pravidlo .nd-co-sec > .row ju nezrovná: col-md-6 by ju od 992 px zúžil na polovicu karty */
body.nd.nd-co2 #order_form .nd-co-pay-part > .row { display: block; margin: 0; }
body.nd.nd-co2 #order_form .nd-co-pay-part > .row::before, body.nd.nd-co2 #order_form .nd-co-pay-part > .row::after { content: none; }
body.nd.nd-co2 #order_form .nd-co-pay-part > .row > [class*="col-"] { float: none; width: auto; min-height: 0; padding: 0; }
body.nd.nd-co2 #order_form .delivery_tr_p {
  display: flex; align-items: flex-start; margin: 0 0 10px; padding: 0 0 0 14px; border: 2px solid var(--nd-line); border-radius: var(--nd-r-lg);
  background: var(--nd-surface); cursor: pointer; transition: border-color .15s, background .15s;
  font-size: 0;	/* &nbsp; medzi rádiom a popisom by posunul text o ~3 px oproti doprave; popis má vlastnú veľkosť */
}
body.nd.nd-co2 #order_form :is(.delivery_tr, .delivery_tr_p):hover { border-color: var(--nd-muted-2); background: var(--nd-surface); }
body.nd.nd-co2 #order_form :is(.delivery_tr, .delivery_tr_p):has(input[type=radio]:checked) { border-color: var(--nd-accent); background: var(--nd-accent-soft); }	/* vybraná voľba ako v prototype: accent + accent-soft (doprava .delivery_tr aj platba .delivery_tr_p) */
body.nd.nd-co2 #order_form :is(.delivery_tr, .delivery_tr_p).order-opt-off { opacity: .5; cursor: not-allowed; }
/* vlastný krúžok, skutočný <input type=radio> ostáva (klávesnica, čítačka) */
body.nd.nd-co2 #order_form :is(.delivery_tr, .delivery_tr_p) input[type=radio] {
  -webkit-appearance: none; appearance: none; display: block; flex: 0 0 auto; width: 20px; height: 20px; margin: 0; padding: 0;
  border: 2px solid var(--nd-muted-2); border-radius: 50%; background: var(--nd-surface); cursor: pointer;
  /* stred krúžku = stred prvého riadku popisu (padding popisu 14 px + riadok 15 px × 1.35), v doprave aj platbe rovnako */
  /* !important: rádio platby má triedu .nomargin (comco.css {margin:0!important}); top:0 ruší posun z nd.css (position:relative; top) */
  margin-top: calc(14px + (15px * 1.35 - 20px) / 2) !important; top: 0;
}
body.nd.nd-co2 #order_form :is(.delivery_tr, .delivery_tr_p) input[type=radio]:checked {
  border-color: var(--nd-accent); background: var(--nd-accent); box-shadow: inset 0 0 0 3px var(--nd-surface);
}
body.nd.nd-co2 #order_form :is(.delivery_tr, .delivery_tr_p) input[type=radio]:focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 2px; }
body.nd.nd-co2 #order_form :is(.delivery_tr, .delivery_tr_p) input[type=radio]:disabled { cursor: not-allowed; }
@media (forced-colors: active) {
  body.nd.nd-co2 #order_form :is(.delivery_tr, .delivery_tr_p) input[type=radio] { -webkit-appearance: radio; appearance: auto; }
}
body.nd.nd-co2 #order_form :is(.delivery_tr, .delivery_tr_p) label.label-inline {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; margin: 0; padding: 14px 14px 14px 12px;
  font-size: 15px; font-weight: 400; line-height: 1.35; color: var(--nd-ink); cursor: pointer;
}
/* ikona vysoká ako prvý riadok popisu a v ňom na stred (rovnako ako krúžok) */
body.nd.nd-co2 #order_form .nd-co-ico { display: inline-grid; place-items: center; flex: 0 0 auto; height: 1.35em; margin: 0; color: var(--nd-ink-2); }
body.nd.nd-co2 #order_form .nd-co-ico svg { display: block; }
/* logo dopravcu (nd_co_db_icon, sada comco-logo): 24 px vysoké, najviac 64 px široké; záporný okraj, aby výška riadku ostala
   ako pri 20 px ikone. Keď je v doprave aspoň jedno logo, všetky ikony dopravy majú stĺpec 64 px (na stred), názvy začínajú
   na rovnakom mieste; platba ostáva bez zmeny */
body.nd.nd-co2 #order_form .nd-co-ico svg.nd-co-ico-logo { max-width: 64px; margin: -2px 0; }
body.nd.nd-co2 #order_form:has(.delivery_tr .nd-co-ico-logo) .delivery_tr .nd-co-ico { width: 64px; }
/* názov vľavo, cena vpravo, výber výdajného miesta pod nimi */
body.nd.nd-co2 #order_form .delivery_tr label.label-inline > strong {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; flex: 1 1 auto; min-width: 0; font-weight: 700;
}
body.nd.nd-co2 #order_form .delivery_tr label.label-inline > strong > :is(#packeta_box, #balikovo_box, .gls_box) { grid-column: 1 / -1; margin-top: 10px; font-weight: 400; }
/* výber výdajného miesta (Packeta, Balíkovo, GLS; tlačidlo a popis #…_miesto plní skript v order.php): tlačidlo ako sekundárne nd,
   výzva „Zvoľte výdajné miesto“ (.order-pick-warn, aj chyba pri Pokračovať) ako jemné hlásenie namiesto červeného pruhu, vybrané miesto s fajkou */
body.nd.nd-co2 #order_form .delivery_tr :is(#packeta_box, #balikovo_box, .gls_box) > .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
body.nd.nd-co2 #order_form .delivery_tr :is(#packeta_box, #balikovo_box, .gls_box) > .row::before,
body.nd.nd-co2 #order_form .delivery_tr :is(#packeta_box, #balikovo_box, .gls_box) > .row::after { content: none; }
body.nd.nd-co2 #order_form .delivery_tr :is(#packeta_box, #balikovo_box, .gls_box) > .row > [class*="col-"] { float: none; width: auto; min-height: 0; }
/* padding: 0 nie na popis miesta (je tiež col-*): toto pravidlo je špecifickejšie a prebilo by jeho odsadenie pre ikonu (ikona na texte) */
body.nd.nd-co2 #order_form .delivery_tr :is(#packeta_box, #balikovo_box, .gls_box) > .row > [class*="col-"]:not(#packeta_miesto, #balikovo_miesto, .gls_miesto) { padding: 0; }
body.nd.nd-co2 #order_form .delivery_tr :is(#packeta_box, #balikovo_box, .gls_box) > .row > [class*="col-"]:first-child { flex: 0 0 auto; max-width: 100%; }
body.nd.nd-co2 #order_form .delivery_tr :is(.packeta_btn, .balikovo_btn, .gls_btn) {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 40px; margin: 0; padding: 8px 14px;
  border: 1px solid var(--nd-line); border-radius: var(--nd-r); background: var(--nd-surface); color: var(--nd-ink); box-shadow: none;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
body.nd.nd-co2 #order_form .delivery_tr :is(.packeta_btn, .balikovo_btn, .gls_btn):hover { border-color: var(--nd-muted-2); background: var(--nd-surface-2); }
body.nd.nd-co2 #order_form .delivery_tr :is(.packeta_btn, .balikovo_btn, .gls_btn):focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 2px; }
body.nd.nd-co2 #order_form .delivery_tr :is(.packeta_btn, .balikovo_btn, .gls_btn) svg { display: block; flex: 0 0 auto; color: var(--nd-ink-2); }
/* „Zmeniť výdajné miesto“, keď popis miesta nesie vybrané miesto (neprázdny a bez výzvy) */
body.nd.nd-co2 #order_form .delivery_tr .nd-co-pick-chg,
body.nd.nd-co2 #order_form .delivery_tr :is(#packeta_box, #balikovo_box, .gls_box):has(:is(#packeta_miesto, #balikovo_miesto, .gls_miesto):not(:empty):not(.order-pick-warn)) .nd-co-pick-new { display: none; }
body.nd.nd-co2 #order_form .delivery_tr :is(#packeta_box, #balikovo_box, .gls_box):has(:is(#packeta_miesto, #balikovo_miesto, .gls_miesto):not(:empty):not(.order-pick-warn)) .nd-co-pick-chg { display: inline; }
body.nd.nd-co2 #order_form .delivery_tr :is(#packeta_miesto, #balikovo_miesto, .gls_miesto) {
  position: relative; flex: 1 1 200px; min-width: 0; margin: 0; padding: 0 0 0 22px; border-radius: 0; background: none;
  color: var(--nd-ink); font-size: 13.5px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere;
}
body.nd.nd-co2 #order_form .delivery_tr :is(#packeta_miesto, #balikovo_miesto, .gls_miesto):empty { display: none; }
body.nd.nd-co2 #order_form .delivery_tr :is(#packeta_miesto, #balikovo_miesto, .gls_miesto)::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; background: var(--nd-ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* výzva: text začína &nbsp; (skript), preto menší ľavý okraj za ikonou */
body.nd.nd-co2 #order_form .delivery_tr :is(#packeta_miesto, #balikovo_miesto, .gls_miesto).order-pick-warn {
  flex: 0 1 auto; padding: 6px 10px 6px 28px; border-radius: var(--nd-r); background: var(--nd-danger-soft); color: var(--nd-danger);
  font-size: 13px; font-weight: 600;
}
body.nd.nd-co2 #order_form .delivery_tr :is(#packeta_miesto, #balikovo_miesto, .gls_miesto).order-pick-warn::before {
  left: 10px; top: calc(50% - 7px); width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--nd-co-err-ico) center / contain no-repeat; mask: var(--nd-co-err-ico) center / contain no-repeat;
}
@media (max-width: 767px) {
  body.nd.nd-co2 #order_form .delivery_tr :is(.packeta_btn, .balikovo_btn, .gls_btn) { min-height: 44px; }
}
body.nd.nd-co2 #order_form .delivery_tr_p label.label-inline > strong { flex: 1 1 auto; min-width: 0; font-weight: 700; }
body.nd.nd-co2 #order_form :is(.delivery_tr, .delivery_tr_p) .price {
  justify-self: end; flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--nd-ink); white-space: nowrap;
}
body.nd.nd-co2 #order_form :is(.delivery_tr, .delivery_tr_p) .nd-co-sl { display: none; }
body.nd.nd-co2 #order_form :is(.delivery_tr, .delivery_tr_p) .price.nd-co-free,
body.nd.nd-co2 #order_form .delivery_tr .sq_price[data-free]:empty::after {
  display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: var(--nd-ok-soft); color: var(--nd-ok);
  font-size: 12px; font-weight: 600; line-height: 1;
}
body.nd.nd-co2 #order_form .delivery_tr .sq_price[data-free]:empty::after { content: attr(data-free); }
body.nd.nd-co2 #order_form .delivery_tr .sq_price { justify-self: end; }
/* mobil: ikona/logo (stĺpec až 64 px) a cena vedľa názvu nechali na 360 px názvu ~60 px (slovo na riadok).
   Pod 600 px je mriežkou celý štítok: názov | cena v prvom riadku, ikona/logo pod názvom, výber výdajného miesta pod nimi.
   <strong> je display: contents (tučné písmo dedí ďalej); názov bez obalu .sq_name (text) padne do jedinej voľnej bunky 1/1 */
@media (max-width: 599px) {
  body.nd.nd-co2 #order_form .delivery_tr > td:first-child { padding-left: 12px; }
  body.nd.nd-co2 #order_form .delivery_tr label.label-inline {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px; align-items: start; padding: 14px 12px 14px 10px;
  }
  body.nd.nd-co2 #order_form .delivery_tr label.label-inline > strong { display: contents; }
  body.nd.nd-co2 #order_form .delivery_tr label.label-inline > strong > .sq_name { grid-area: 1 / 1; overflow-wrap: break-word; }
  body.nd.nd-co2 #order_form .delivery_tr label.label-inline > strong > :is(.sq_price, .price) { grid-area: 1 / 2; }
  body.nd.nd-co2 #order_form .delivery_tr label.label-inline > .nd-co-ico,
  body.nd.nd-co2 #order_form:has(.delivery_tr .nd-co-ico-logo) .delivery_tr label.label-inline > .nd-co-ico { grid-area: 2 / 1; justify-self: start; width: auto; }
  body.nd.nd-co2 #order_form .delivery_tr label.label-inline > strong > :is(#packeta_box, #balikovo_box, .gls_box) { grid-area: 3 / 1 / auto / -1; margin-top: 4px; }
}
body.nd.nd-co2 #order_form .delivery .ajaxbasket-warning-thin { display: block; margin: 0 0 12px; }
/* hláška o objemnej objednávke v kroku 2: jemná karta s ikonou namiesto červeného pruhu, oddelená od zoznamu dopráv */
body.nd.nd-co2 #order_form .order-overweight.nd-co-note {
	display: flex; align-items: flex-start; gap: 10px;
	margin: 0 0 20px; padding: 12px 14px;
	background: var(--nd-warn-soft); color: var(--nd-ink-2, var(--nd-ink));
	border: 1px solid color-mix(in srgb, var(--nd-warn) 35%, transparent); border-radius: var(--nd-r-md, 10px);
	font-size: var(--nd-fs-14, 14px); line-height: 1.45;
}
body.nd.nd-co2 #order_form .order-overweight.nd-co-note > svg { flex: none; margin-top: 1px; color: var(--nd-warn); }

/* doplnkové služby: zaškrtávacie karty */
body.nd.nd-co2 #order_form .nd-co-sec > #additional_services_block .panel { margin-top: 24px; }
body.nd.nd-co2 #order_form .additional-service {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; padding: 14px; border: 2px solid var(--nd-line); border-radius: var(--nd-r-lg);
}
/* zaškrtnutá ako vybraná voľba v prototype (pages-cart.jsx: rámik accent + pozadie accent-soft) */
body.nd.nd-co2 #order_form .additional-service:has(input:checked) { border-color: var(--nd-accent); background: var(--nd-accent-soft); }
body.nd.nd-co2 #order_form .additional-service input[type=checkbox] { position: relative; z-index: 1; flex: 0 0 auto; margin: 2px 0 0; cursor: pointer; }
/* stred zaškrtávadla na stred 1. riadku názvu: nd.css ho posúva o (--nd-opt-lh × --nd-opt-fs − 18) / 2, ale --nd-fs-14-5
   je na mobile 16 px (3 px), kým názov služby ostáva 14,5 px / 21,75 px (1,875 px) – pevný 1 px sedí na všetkých šírkach.
   margin 2px vyššie je mŕtvy (.nomargin má margin: 0 !important) */
body.nd.nd-co2 #order_form .additional-service input[type=checkbox] { top: 1px; }
body.nd.nd-co2 #order_form .additional-service label { margin: 0; font-weight: 400; cursor: pointer; }
/* klik kdekoľvek na karte: ::after štítku (label for=) ju celú prekryje, klik naň prepne zaškrtávadlo */
body.nd.nd-co2 #order_form .additional-service { position: relative; cursor: pointer; transition: border-color .15s, background .15s; }
body.nd.nd-co2 #order_form .additional-service:not(:has(input:checked)):hover { border-color: var(--nd-muted-2); }
/* ikona služby na mieste ikony dopravy (12 px za zaškrtávadlom, názov 12 px za ikonou), popis pod názvom, nie pod ikonou:
   visiaci prvý riadok (text-indent) – label ostane bez position, jeho ::after kryje celú kartu */
body.nd.nd-co2 #order_form .additional-service label:has(> .additional-service-icon) { margin-left: 4px; padding-left: 32px; text-indent: -32px; }
body.nd.nd-co2 #order_form .additional-service .additional-service-icon { margin-right: 12px; text-indent: 0; vertical-align: -4px !important; }
body.nd.nd-co2 #order_form .additional-service .additional-service-icon svg { display: block; width: 20px; height: 20px; }
body.nd.nd-co2 #order_form .additional-service label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
body.nd.nd-co2 #order_form .additional-service a { position: relative; z-index: 1; }
body.nd.nd-co2 #order_form .additional-service-desc { font-size: 12.5px; font-weight: 400; color: var(--nd-muted); }	/* label dedí 600 zo spoločného pravidla pre labely kroku 2, popis má byť obyčajný */
@media (min-width: 768px) { body.nd.nd-co2 #order_form .additional-service-desc { font-size: 14px; line-height: 1.45; } }

/* ---- súhrn vpravo „Vaša objednávka · N položiek“ (ten istý .basket, sumy prepočítava front.js recalcPrice) ---- */
body.nd.nd-co2 #order_form .nd-co-rail {
  padding: 18px; border: 1px solid var(--nd-line); border-radius: var(--nd-r-lg); background: var(--nd-surface);
}
body.nd.nd-co2 #order_form .nd-co-rail-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
body.nd.nd-co2 #order_form .nd-co-rail-h h3 {
  margin: 0; padding: 0; font-family: var(--nd-font-display); font-size: 17px; font-weight: 700; line-height: 1.25; text-transform: none; color: var(--nd-ink);
}
body.nd.nd-co2 #order_form .nd-co-rail-h a { font-size: 12.5px; font-weight: 400; color: var(--nd-muted) !important; white-space: nowrap; }	/* .mainContainer a: #000 !important */
body.nd.nd-co2 #order_form .nd-co-rail .basket { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.nd.nd-co2 #order_form .nd-co-rail .basket > .row-fluid { padding-left: 0; padding-right: 0; }
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products-title { display: none; }
body.nd.nd-co2 #order_form .nd-co-rail .nd-co-items {
  display: flex; flex-direction: column; gap: 12px; max-height: 300px; margin: 0 0 14px; padding: 0 4px 0 0; overflow-y: auto; scrollbar-width: thin;
}
/* položka: obrázok | názov, pod ním cena za kus · množstvo · spolu (poradie stĺpcov ako v ostatných súhrnoch) */
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:not(.gray-bg):not(.total) {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 3px; align-items: baseline;
  margin: 0; padding: 0; border: 0; background: none; font-size: 12.5px; line-height: 1.3;
}
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:not(.gray-bg):not(.total)::before,
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:not(.gray-bg):not(.total)::after { content: none; }
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:not(.gray-bg):not(.total) > div {
  float: none; width: auto; min-height: 0; margin: 0; padding: 0; left: auto; text-align: left; font-size: 12.5px; color: var(--nd-ink);
}
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:not(.gray-bg):not(.total) > :nth-child(1) { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:not(.gray-bg):not(.total) > :nth-child(2) { grid-column: 2 / -1; grid-row: 1; font-size: 13px; font-weight: 500; }
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:not(.gray-bg):not(.total) > :nth-child(2) a { font-weight: 500; font-size: 13px; }
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:not(.gray-bg):not(.total) > .price-before { grid-column: 2; grid-row: 3; color: var(--nd-muted); text-decoration: line-through; }
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:not(.gray-bg):not(.total) > :nth-last-child(3) { grid-column: 2; grid-row: 2; font-size: 13px; color: var(--nd-muted); white-space: nowrap; }
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:not(.gray-bg):not(.total) > :nth-last-child(2) { grid-column: 3; grid-row: 2; color: var(--nd-muted); text-align: right; white-space: nowrap; }
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:not(.gray-bg):not(.total) > :last-child { grid-column: 4; grid-row: 2; font-size: 13px; font-weight: 600; text-align: right; white-space: nowrap; }
body.nd.nd-co2 #order_form .nd-co-rail .basket .img_basket { display: block; width: 44px; height: 44px; object-fit: contain; border-radius: var(--nd-r-sm); background: #fff; }
body.nd.nd-co2 #order_form .nd-co-rail .basket .ajaxbasket-warning-thin { display: inline-block; margin-top: 4px; font-size: 12px; }
/* zaškrtnutá doplnková služba pod tovarom (mimo posuvného .nd-co-items): dlaždica s ikonou 44 px ako obrázok | názov | suma;
   okraje sa zlejú s .nd-co-items (14 − 2 = 12 px ako medzi položkami), skrytá (display:none) miesto nezaberá */
body.nd.nd-co2 #order_form .nd-co-rail .basket .nd-co-as-line {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 10px; align-items: center;
  margin: -2px 0 14px; padding: 0; font-size: 13px; line-height: 1.3; color: var(--nd-ink);
}
body.nd.nd-co2 #order_form .nd-co-rail .basket .nd-co-as-icon {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--nd-r-sm); background: var(--nd-accent-soft); color: var(--nd-accent-ink);	/* ako prototyp (pages-cart.jsx: accent-soft / accent-ink) */
}
body.nd.nd-co2 #order_form .nd-co-rail .basket .nd-co-as-icon svg { display: block; width: 20px; height: 20px; }
body.nd.nd-co2 #order_form .nd-co-rail .basket .nd-co-as-name { min-width: 0; font-weight: 500; }
body.nd.nd-co2 #order_form .nd-co-rail .basket .nd-co-as-price { font-weight: 600; text-align: right; white-space: nowrap; }
/* riadky súčtov: popis vľavo, suma vpravo */
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:is(.gray-bg, .total) {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 4px 0;
  border: 0 !important; border-radius: 0; background: none; font-size: 13.5px; line-height: 1.35;
}
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:is(.gray-bg, .total)::before,
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:is(.gray-bg, .total)::after { content: none; }
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:is(.gray-bg, .total) > div {
  float: none; width: auto; min-height: 0; padding: 0; left: auto; font-size: 13.5px; line-height: 1.35;
}
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:is(.gray-bg, .total) > :first-child { flex: 1 1 auto; min-width: 0; padding: 0; text-align: left; color: var(--nd-muted); }
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products:is(.gray-bg, .total) > :last-child { flex: 0 0 auto; min-width: 0; padding: 0; text-align: right; white-space: nowrap; color: var(--nd-ink); font-weight: 400; }
body.nd.nd-co2 #order_form .nd-co-rail .basket #order_delivery_row { padding-top: 12px; border-top: 1px solid var(--nd-line) !important; }
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products.total-last { margin-top: 8px; padding: 12px 0 0; border-top: 1px solid var(--nd-line) !important; }
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products.total-last > :is(:first-child, :last-child) { font-size: 18px; font-weight: 700; color: var(--nd-ink); }
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products.total-last .price,
body.nd.nd-co2 #order_form .nd-co-rail .basket .basket-products.total-last .price span { font-family: var(--nd-font-display); font-size: 18px; font-weight: 700; color: var(--nd-ink); }
/* doprava / platba za 0: štítok „ZADARMO“ namiesto 0,00 € (text sumy ostáva, front.js ho prepisuje) */
body.nd.nd-co2 #order_form .nd-co-rail :is(#delivery_price, #payment_price).nd-co-free { font-size: 0; }
body.nd.nd-co2 #order_form .nd-co-rail :is(#delivery_price, #payment_price).nd-co-free::after {
  content: attr(data-free); display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px;
  background: var(--nd-ok-soft); color: var(--nd-ok); font-size: 12px; font-weight: 600; line-height: 1;
}

/* ---- sekcia 3: súhlasy a odoslanie ---- */
body.nd.nd-co2 #order_form .nd-co-actions .buttons { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: left; }
body.nd.nd-co2 #order_form .nd-co-actions .buttons > .row-fluid { display: flex; flex-direction: column; gap: 18px; margin: 0; }
body.nd.nd-co2 #order_form .nd-co-actions .buttons > .row-fluid::before, body.nd.nd-co2 #order_form .nd-co-actions .buttons > .row-fluid::after { content: none; }
body.nd.nd-co2 #order_form .nd-co-actions .buttons > .row-fluid > div { float: none; width: auto; min-height: 0; padding: 0; text-align: left; }
/* súhlasy: riadky tabuľky ako flex (oba riadky rovnako: zaškrtávadlo 18 px + medzera 12 px, zarovnané s prvým riadkom textu) */
body.nd.nd-co2 #order_form .nd-co-actions .table-order-confirm { display: block; float: none; width: 100%; margin: 0; }
body.nd.nd-co2 #order_form .nd-co-actions .table-order-confirm > tbody { display: block; }
body.nd.nd-co2 #order_form .nd-co-actions .table-order-confirm tr { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; }
body.nd.nd-co2 #order_form .nd-co-actions .table-order-confirm td { display: block; padding: 0; vertical-align: top; }
body.nd.nd-co2 #order_form .nd-co-actions .table-order-confirm td:first-child { flex: none; width: 18px; padding-top: 1px; }
body.nd.nd-co2 #order_form .nd-co-actions .table-order-confirm td:last-child { flex: 1 1 auto; min-width: 0; }
body.nd.nd-co2 #order_form .nd-co-actions .table-order-confirm input[type=checkbox] { display: block; width: 18px; height: 18px; margin: 0; accent-color: var(--nd-accent); }
body.nd.nd-co2 #order_form .nd-co-actions label.order-confirm { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--nd-ink); }
/* nezaškrtnutý súhlas pri odoslaní (front.js: .error-input na riadku, .error na popise; comco.css: červený rám, ružové pozadie,
   červený popis s bielym pozadím, všetko !important): jemná karta, popis ostáva tmavý, pod ním krátke hlásenie. Záporný okraj
   = text a zaškrtávadlo sa neposunú. Zaškrtnutím chyba zmizne hneď (:has), front.js triedy zhodí až pri ďalšom odoslaní. */
body.nd.nd-co2 #order_form .nd-co-actions .table-order-confirm tr.error-input {
  margin: 0 -14px 12px; padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--nd-danger) 45%, transparent) !important; border-radius: var(--nd-r-md, 10px);
  background-color: var(--nd-danger-soft) !important;
}
body.nd.nd-co2 #order_form .nd-co-actions .table-order-confirm label.order-confirm.error { color: var(--nd-ink) !important; background: transparent !important; }
body.nd.nd-co2 #order_form .nd-co-actions .table-order-confirm tr.error-input input[type=checkbox]:not(:checked) { outline: 1.5px solid var(--nd-danger); outline-offset: 0; border-radius: 3px; }
body.nd.nd-co2 #order_form .nd-co-actions .table-order-confirm tr.error-input > td:last-child::after {
  content: "Pre odoslanie objednávky je potrebný súhlas."; display: block; margin-top: 8px; padding-left: 20px;
  background: no-repeat 0 2px / 14px 14px var(--nd-co-err-ico-c);
  font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--nd-danger);
}
body.nd.nd-co2 #order_form .nd-co-actions .table-order-confirm tr.error-input:has(input[type=checkbox]:checked) {
  margin: 0 0 12px; padding: 0; border: 0 !important; border-radius: 0; background-color: transparent !important;
}
body.nd.nd-co2 #order_form .nd-co-actions .table-order-confirm tr.error-input:has(input[type=checkbox]:checked) > td:last-child::after { content: none; }
/* desktop: Späť vľavo v bežnej výške, odoslanie hneď vedľa, Späť zvisle na stred vyššieho odoslania */
body.nd.nd-co2 #order_form .nd-co-actions .order_buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; }
body.nd.nd-co2 #order_form .nd-co-actions .order_buttons > .nd-co-back { flex: 0 0 auto; }
/* hlavná výzva: vzhľad ako .nd-co-btn-primary (akcent, polomer, písmo), vyššia; zámok na stred oboch riadkov,
   vedľa neho blok zarovnaný vľavo („Odoslať objednávku · suma“, pod ním podnadpis), celá skupina na stred tlačidla */
body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order] {
  display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center; column-gap: 12px;
  min-width: 300px; min-height: 58px; margin: 0; padding: 10px 26px; border: 1px solid var(--nd-accent) !important; border-radius: var(--nd-r);
  background: var(--nd-accent); color: var(--nd-on-accent, #fff); font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.25;
  text-align: left; white-space: normal; box-shadow: none; transition: background .15s, border-color .15s, box-shadow .15s;
}
body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order]:hover:not(:disabled) {
  background: var(--nd-accent-deep); border-color: var(--nd-accent-deep) !important; color: var(--nd-on-accent, #fff);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--nd-accent-deep) 35%, transparent);
}
body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order]:active:not(:disabled) { box-shadow: none; }
/* krúžok pri ovládaní klávesnicou cez box-shadow: base/style.css .btn má outline: 0 !important */
body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order]:focus-visible:not(:disabled) { box-shadow: 0 0 0 2px var(--nd-surface, #fff), 0 0 0 4px var(--nd-ink); }
body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order]:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order] > br { display: none; }
body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order] > svg { flex: 0 0 auto; width: 22px; height: 22px; }
/* odosiela sa (trieda z order.php, ochrana pred dvojitým odoslaním): akcent ostáva (nie .5 ako :disabled), klik ani hover
   už nereaguje; namiesto zámku krúžok 20 px s okrajom 1 px = rovnakých 22 px, tlačidlo nemení rozmer */
body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order].is-sending { pointer-events: none; box-shadow: none; }
body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order] > .nd-co-spin { display: none; }
body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order].is-sending > svg { display: none; }
/* pri odosielaní len „Odosiela sa… · suma" na stred, bez podnadpisu o povinnosti platby; veľkosť tlačidla drží
   skript (inline min-width/min-height nastavené pred zmenou textu) */
body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order].is-sending .nd-co-sub { display: none; }
body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order].is-sending > .nd-co-spin {
  display: block; flex: 0 0 auto; box-sizing: border-box; width: 20px; height: 20px; margin: 1px;
  border: 2.5px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; border-radius: 50%;
  animation: nd-co-lp-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order].is-sending > .nd-co-spin { animation-duration: 2.4s; }
}
body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order] .nd-co-submit-text { display: flex; flex-direction: column; align-items: flex-start; row-gap: 2px; min-width: 0; text-align: left; }
body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order] .nd-co-submit-main { display: block; }
body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order] .nd-co-total { white-space: nowrap; }	/* bodka a suma sa zalomia spolu, nikdy osamotená „·“ */
body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order] .nd-co-sub { display: block; font-size: 13px; font-weight: 500; line-height: 1.3; opacity: .72; }
@media (max-width: 599px) {
  /* mobil: odoslanie prvé na celú šírku, pod ním Späť (celý popis „Späť do košíka“, miesta je dosť) ako tichšie tlačidlo na celú šírku */
  body.nd.nd-co2 #order_form .nd-co-actions .order_buttons { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order] { order: -1; width: 100%; min-width: 0; padding: 10px 16px; }
  body.nd.nd-co2 #order_form .nd-co-actions .order_buttons > .nd-co-back { width: 100%; max-width: none; padding: 13px 16px; }
  body.nd.nd-co2 #order_form .nd-co-actions .nd-co-btn-more { display: inline; }
}
@media (max-width: 359px) {
  body.nd.nd-co2 #order_form .nd-co-actions button[name=submit_order] { padding: 10px 12px; column-gap: 10px; font-size: 16px; }
}

/* ---- okno chyby pri odoslaní (#popup_element v order.php, otvára ho front.js cez bPopup: „Vyplňte všetky povinné polia!",
   „vyberte dopravu a platbu", „Platba zlyhala"). bPopup ho presúva do body a centruje podľa outerWidth skrytého prvku,
   preto šírka bez percent rodiča. V nd-co2 front.js vynechá predponu „CHYBA:", ikona hovorí to isté. ---- */
body.nd.nd-co2 #popup_element {
  box-sizing: border-box; width: min(420px, calc(100vw - 32px)); min-width: 0; min-height: 0;	/* comco-templates.css:3259 min-width 400px / min-height 180px: na 390 px okno presahovalo cez okraje */
  padding: 28px 24px 22px; border: 0; border-radius: var(--nd-r-lg);
  background: var(--nd-surface); box-shadow: var(--nd-shadow-lg, 0 20px 50px rgba(0,0,0,.25)); text-align: center;
}
body.nd.nd-co2 #popup_element > div::before {
  content: ""; display: block; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--nd-danger-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8322b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 26px no-repeat;
}
body.nd.nd-co2 #popup_element h2.popup_title {
  margin: 0 0 20px; font-family: var(--nd-font-display); font-size: 21px; font-weight: 700; line-height: 1.25;
  letter-spacing: 0; text-transform: none; color: var(--nd-ink);
}
body.nd.nd-co2 #popup_element br { display: none; }
body.nd.nd-co2 #popup_element .b-close { display: block; text-decoration: none !important; }
body.nd.nd-co2 #popup_element .b-close .btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 200px; padding: 12px 22px; border: 0; border-radius: var(--nd-r);
  background: var(--nd-accent); color: var(--nd-on-accent, var(--nd-ink)); font-family: var(--nd-font-body); font-size: 15px; font-weight: 700;
  line-height: 1.2; text-transform: none; box-shadow: none;
}
body.nd.nd-co2 #popup_element .b-close .btn:hover { background: var(--nd-accent-deep); }
@media (max-width: 599px) {
  body.nd.nd-co2 #popup_element { padding: 24px 18px 18px; }
  body.nd.nd-co2 #popup_element .b-close .btn { width: 100%; }
}