/* ============================================================
   Košík, pokladňa a sledovanie objednávky
   Dopĺňa main.css — nikdy ho neprepisuje. Farby a tiene berie
   z tokenov v :root, takže tmavý režim funguje sám.

   WooCommerce tieto stránky vykresľuje vlastným markupom cez
   shortcode; téma pre ne nemá šablóny, takže sa štýluje len CSS.
   Preto sú tu selektory Woo tried, nie vlastných.
   ============================================================ */

/* ============================================================
   OZNAMY (chyby, upozornenia, potvrdenia)
   ============================================================ */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 18px;
  /* 44 px vľavo: Woo kreslí ikonu cez ::before absolútne na left 1.5em —
     s menším paddingom sedí na prvom písmene (rovnaká oprava v main.css) */
  padding: 13px 16px 13px 44px;
  border-radius: 8px;
  border-left: 4px solid var(--blue);
  background: var(--blue-soft);
  color: var(--grey-900); /* Woo má natvrdo #515151 — v tme nečitateľné */
  font-size: 14.5px;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { left: 14px; top: 50%; transform: translateY(-50%); }
.woocommerce-message { border-color: var(--green); background: rgba(46,125,50,.10); }
.woocommerce-error   { border-color: var(--red);   background: rgba(211,47,47,.10); }
.woocommerce-error li { list-style: none; }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

/* ============================================================
   KOŠÍK
   ============================================================ */
.woocommerce-cart-form table.shop_table { border-radius: 10px; overflow: hidden; }
.woocommerce table.shop_table td { vertical-align: middle; }

.woocommerce table.shop_table .product-thumbnail { width: 88px; }
.woocommerce table.shop_table .product-thumbnail img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  /* rovnaká podložka ako pri kartách produktov — rendery majú biele pozadie */
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  display: block;
}
.woocommerce table.shop_table .product-name a {
  color: var(--blue-ink);
  font-weight: 700;
  text-decoration: none;
}
.woocommerce table.shop_table .product-name a:hover { text-decoration: underline; }
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal { white-space: nowrap; font-variant-numeric: tabular-nums; }
.woocommerce table.shop_table .product-subtotal { font-weight: 800; color: var(--grey-900); }

/* Krížik na odobranie — Woo dáva holý odkaz „×" */
.woocommerce table.shop_table .product-remove { width: 44px; text-align: center; }
.woocommerce a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grey-100);
  color: var(--grey-700) !important;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.woocommerce a.remove:hover { background: var(--red); color: #fff !important; }

.woocommerce .quantity .qty {
  width: 74px;
  height: 40px;
  padding: 0 8px;
  text-align: center;
  border: 1px solid var(--grey-200);
  border-radius: 6px;
  background: var(--surface);
  color: var(--grey-900);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.woocommerce table.shop_table td.actions { padding: 16px 13px; background: var(--grey-50); }
.woocommerce .coupon { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.woocommerce .coupon .input-text {
  height: 42px;
  min-width: 190px;
  padding: 0 12px;
  border: 1px solid var(--grey-200);
  border-radius: 6px;
  background: var(--surface);
  color: var(--grey-900);
  font: inherit;
}

/* Woo tlačidlá — zjednotenie s .btn z main.css */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover { background: var(--blue-dark); color: #fff; }
.woocommerce .button:disabled,
.woocommerce .button[disabled] { opacity: .55; cursor: not-allowed; }

/* Hlavné CTA (Pokladňa, Objednať) — červené ako .btn-primary.
   Selektor musí niesť aj názov prvku: Woo má `.woocommerce a.button.alt`
   so špecificitou (0,3,1) a fialovou #7f54b3. Trojtriedny zápis (0,3,0) by
   prehral a tlačidlo by ostalo fialové — tá istá pasca ako pri
   `.single_add_to_cart_button` (viď denník 27. 8. 2026). */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.checkout-button,
.woocommerce #place_order {
  background: var(--red);
  color: #fff;
  box-shadow: 0 4px 12px rgba(211,47,47,.25);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover { background: var(--red-dark); color: #fff; }

/* Súčty košíka */
.cart-collaterals { margin-top: 26px; display: flex; justify-content: flex-end; }
.cart_totals {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.cart_totals h2 {
  font-size: 17px;
  margin: 0 0 14px;
  color: var(--blue-ink);
}
.cart_totals table.shop_table { border: 0; background: transparent; }
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
  border: 0;
  border-bottom: 1px solid var(--grey-100);
  padding: 10px 0;
  background: transparent;
  text-transform: none;
  font-size: 14.5px;
}
.cart_totals table.shop_table td { text-align: right; font-variant-numeric: tabular-nums; }
.cart_totals .order-total th,
.cart_totals .order-total td {
  border-bottom: 0;
  padding-top: 16px;
  font-size: 24px;
  font-weight: 900;
  color: var(--red-ink);
  line-height: 1.25;
}
/* Woo core má `.woocommerce-cart .wc-proceed-to-checkout a.checkout-button`
   (0,3,1) s display:block, paddingom 1em a fontom 1.25em — text 20 px sa
   pchal do boxu 42 px a liezol na hrany. Selektor s `.button` (0,4,1)
   prebíja core bez ohľadu na poradie enqueue. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--ui-h);
  margin-top: 16px;
  padding: 0 20px;
  font-size: 15.5px;
  line-height: 1;
  border-radius: 10px;
}
.woocommerce-shipping-destination { color: var(--grey-700); font-size: 12.5px; }

/* Prázdny košík */
.cart-empty {
  text-align: center;
  font-size: 17px;
  padding: 34px 20px 10px;
  color: var(--grey-700);
}
.return-to-shop { text-align: center; padding-bottom: 34px; }

/* ============================================================
   POKLADŇA
   ============================================================ */
/* ⚠ `main.css:1118` štýluje `form.checkout` ako úzku kartu (max-width 560 px)
   — pravidlo pochádza z pôvodného statického dema, kde to bol maketový
   formulár. Reálna pokladňa WooCommerce má tú istú triedu, takže by sa
   zmestila do 560 px stĺpca. Dvojtriedny selektor (0,2,1) to prebíja. */
.woocommerce form.checkout {
  max-width: none;
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.woocommerce-checkout .col2-set { display: grid; gap: 26px; }
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 { width: auto; float: none; }

/* Skrytý zberač zdroja objednávky by v mriežke zabral bunku a odsunul
   súhrn do ďalšieho riadka. Skryté polia sa odosielajú aj pri display:none. */
form.checkout > wc-order-attribution-inputs { display: none; }

@media (min-width: 900px) {
  /* Woo dáva stĺpcom float a percentá — grid ich potrebuje zrušiť,
     inak sa formulár a súhrn objednávky prekrývajú. Riadky sa priraďujú
     výslovne: pri automatickom ukladaní by nadpis obsadil prvý riadok
     druhého stĺpca a tabuľka objednávky by spadla pod celý formulár. */
  /* `grid-template-rows: auto 1fr` je nutné: fakturačné údaje preklenujú oba
     riadky a pri automatických výškach si grid ich výšku rozdelí na polovicu,
     čím by nadpis „Vaša objednávka" odplával do stredu stĺpca. */
  form.checkout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 12px 34px;
    align-items: start;
  }
  form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  form.checkout > h3#order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  form.checkout > #order_review { grid-column: 2; grid-row: 2; }
}

.woocommerce-checkout h3 {
  font-size: 18px;
  color: var(--blue-ink);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--grey-100);
}

.woocommerce form .form-row { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; }
.woocommerce form .form-row label { font-size: 13.5px; font-weight: 600; color: var(--grey-900); }
.woocommerce form .form-row .required { color: var(--red-ink); text-decoration: none; }
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--grey-200);
  border-radius: 6px;
  background: var(--surface);
  color: var(--grey-900);
  font: inherit;
}
.woocommerce form .form-row textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; }
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}
.woocommerce form .form-row.woocommerce-invalid .input-text { border-color: var(--red); }
/* Woo flotuje meno a priezvisko vedľa seba na akejkoľvek šírke — na telefóne
   z toho ostanú dve políčka po ~157 px. Pod 620 px teda idú pod seba. */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { float: none; width: 100%; margin-right: 0; }
@media (min-width: 620px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { display: inline-grid; width: calc(50% - 7px); }
  .woocommerce form .form-row-first { margin-right: 10px; }
}

/* Woo obaľuje tlačidlo objednávky riadkom s vlastným paddingom — bez jeho
   zrušenia je CTA užšie než súhrn nad ním a opticky sa nezarovná. */
.woocommerce #payment .form-row.place-order { padding: 0; margin: 0; }

/* Súhrn objednávky */
#order_review {
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.woocommerce-checkout-review-order-table { border: 0 !important; background: transparent !important; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  border: 0 !important;
  border-bottom: 1px solid var(--grey-100) !important;
  padding: 10px 0 !important;
  background: transparent !important;
  font-size: 14.5px;
}
.woocommerce-checkout-review-order-table td { text-align: right; font-variant-numeric: tabular-nums; }
.woocommerce-checkout-review-order-table .product-name { text-align: left; }
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  border-bottom: 0 !important;
  padding-top: 16px !important;
  font-size: 24px;
  font-weight: 900;
  color: var(--red-ink);
  line-height: 1.25;
}

/* Platobné metódy */
#payment { margin-top: 18px; }
#payment ul.payment_methods {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}
#payment ul.payment_methods li {
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface);
}
#payment ul.payment_methods li label { font-weight: 700; cursor: pointer; }
#payment ul.payment_methods li input[type="radio"] { margin-right: 8px; }
#payment .payment_box {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--grey-50);
  color: var(--grey-700);
  font-size: 13.5px;
  line-height: 1.5;
}
#payment .payment_box p:last-child { margin-bottom: 0; }
#payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: 14px; font-size: 13.5px; }
#payment #place_order { width: 100%; height: var(--ui-h); font-size: 15.5px; }

/* ============================================================
   PO OBJEDNANÍ + SLEDOVANIE OBJEDNÁVKY
   ============================================================ */
.woocommerce-order-overview {
  list-style: none;
  margin: 0 0 26px;
  padding: 18px 20px;
  display: grid;
  gap: 14px;
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  border-radius: 12px;
}
@media (min-width: 700px) { .woocommerce-order-overview { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
.woocommerce-order-overview li {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--grey-700);
}
.woocommerce-order-overview li strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--grey-900);
}
.woocommerce-thankyou-order-received {
  font-size: 19px;
  font-weight: 800;
  color: var(--green-ink);
  margin-bottom: 18px;
}
.woocommerce-order-details h2,
.woocommerce-customer-details h2 { font-size: 18px; color: var(--blue-ink); margin: 26px 0 14px; }

.woocommerce form.track_order { display: grid; gap: 14px; max-width: 520px; }

/* ============================================================
   TMAVÝ REŽIM
   ============================================================ */
[data-theme="dark"] .woocommerce table.shop_table td.actions,
[data-theme="dark"] #payment .payment_box,
[data-theme="dark"] .woocommerce-order-overview { background: rgba(255,255,255,.04); }
[data-theme="dark"] .woocommerce a.remove { background: rgba(255,255,255,.10); color: #e7ecf2 !important; }
[data-theme="dark"] .woocommerce a.remove:hover { background: var(--red); color: #fff !important; }
/* fotky produktov majú biele pozadie — podložka musí zostať svetlá */
[data-theme="dark"] .woocommerce table.shop_table .product-thumbnail img { background: #e6ebf1; }

/* ============================================================
   OS NÁKUPU — Košík → Doprava a platba → Hotovo
   ============================================================ */
/* Anglické nadpisy stránok (Cart, Checkout) nahrádza os krokov —
   premenovanie stránok je v backlogu §6, dovtedy sa H1 nezobrazuje. */
.woocommerce-cart .site-main > .container > article > .page-title,
.woocommerce-checkout .site-main > .container > article > .page-title { display: none; }

/* `nav.` je nutné: ucet.css má vlastný komponent `.sp-kroky` (návod v účte,
   display: grid) a načítava sa globálne — holá trieda by prehrala súboj
   o poradie enqueue a os by spadla pod seba. */
nav.sp-kroky {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-radius: 10px;
}
.sp-krok { display: inline-flex; align-items: center; gap: 9px; color: var(--grey-700); font-size: 14px; font-weight: 600; text-decoration: none; }
.sp-krok-c {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--grey-100); color: var(--grey-700);
  font-size: 13.5px; font-weight: 800;
}
.sp-krok.je-aktivny { color: var(--blue-ink); }
.sp-krok.je-aktivny .sp-krok-c { background: var(--blue); color: #fff; }
.sp-krok.je-hotovy { color: var(--green-ink); }
.sp-krok.je-hotovy .sp-krok-c { background: var(--green); color: #fff; }
a.sp-krok.je-hotovy:hover { text-decoration: underline; }
.sp-krok-ciara { flex: 1; height: 2px; min-width: 18px; background: var(--grey-200); border-radius: 1px; }
@media (max-width: 620px) {
  nav.sp-kroky { gap: 8px; padding: 12px 12px; }
  .sp-krok { font-size: 12.5px; gap: 6px; }
  .sp-krok:not(.je-aktivny) .sp-krok-t { display: none; } /* na mobile len aktívny krok s textom */
}

/* ============================================================
   KOŠÍK — spodná lišta a doplnky
   ============================================================ */
.sp-spat-nakup {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; padding: 0 20px; height: 42px;
  border: 1px solid var(--blue); border-radius: 6px;
  color: var(--blue-ink); font-weight: 700; font-size: 14px;
  text-decoration: none; transition: background .15s;
}
.sp-spat-nakup:hover { background: var(--blue-soft); }

/* kupón vľavo, „Aktualizovať košík" vpravo — ako spodná lišta Alzy */
.woocommerce table.shop_table td.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.woocommerce table.shop_table td.actions .coupon { margin-right: auto; }

.sp-doplnky { margin-top: 34px; }
.sp-doplnky h2 { font-size: 19px; margin: 0 0 14px; }
.sp-doplnky-rad { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.sp-doplnok {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--grey-200);
  border-radius: 10px; padding: 14px; gap: 10px;
}
.sp-doplnok-telo { display: flex; flex-direction: column; gap: 8px; flex: 1; color: var(--grey-900); text-decoration: none; }
.sp-doplnok-telo b { font-size: 13.5px; line-height: 1.35; font-weight: 700; }
.sp-doplnok-telo img { width: 100%; height: 110px; object-fit: contain; background: #fff; border: 1px solid var(--grey-100); border-radius: 8px; }
.sp-doplnok-bezfoto { display: flex; align-items: center; justify-content: center; height: 110px; font-size: 40px; background: var(--grey-50); border-radius: 8px; }
.sp-doplnok-cena { color: var(--red-ink); font-weight: 800; font-size: 14.5px; margin-top: auto; }
.sp-doplnok-pridat {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; border-radius: 6px; border: 1px solid var(--red);
  color: var(--red-ink); font-weight: 700; font-size: 13.5px;
  text-decoration: none; transition: background .15s, color .15s;
}
.sp-doplnok-pridat:hover { background: var(--red); color: #fff; }
[data-theme="dark"] .sp-doplnok-telo img { background: #e6ebf1; }

/* ============================================================
   BLOKOVÁ POKLADŇA — riadky dopravy a platby ako v Alze
   Pokladňa je Woo blok (React); štýlujú sa jeho stabilné triedy.
   ============================================================ */
.wp-block-woocommerce-checkout { padding-top: 0; }
.wc-block-components-checkout-step { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
.wc-block-components-checkout-step__title { color: var(--blue-ink); }

/* Platobné metódy majú akordeónový variant triedy (…-accordion-option),
   doprava obyčajný — karty musia niesť oba selektory. */
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  padding: 14px 16px 14px 44px;
  margin-bottom: 8px;
  background: var(--surface);
  transition: border-color .15s, background .15s;
}
.wc-block-components-radio-control__option:hover,
.wc-block-components-radio-control-accordion-option:hover { border-color: var(--blue); }
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option.checked { border-color: var(--blue); background: var(--blue-soft); }
.wc-block-components-radio-control__secondary-label { color: var(--green-ink); font-weight: 700; }

/* bočný súhrn ako karta */
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

/* Platba sa vyroluje po výbere dopravy (assets/js/kosik.js).
   Fail-open: bez JS alebo pri zmene tried Woo blokov sa platba zobrazí normálne. */
.sp-platba-schovana { max-height: 0; overflow: hidden; opacity: 0; margin: 0; }
.sp-platba-odkryta { animation: sp-vyrolovanie .45s ease; }
@keyframes sp-vyrolovanie {
  from { max-height: 0; opacity: 0; }
  to { max-height: 1400px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-platba-odkryta { animation: none; }
}

/* ============================================================
   BLOKOVÁ POKLADŇA A KOŠÍK — formulárové polia a CTA
   Woo bloky si nesú vlastné CSS: biele pozadie polí (aj v tmavom
   režime, kde label dedil --grey-900 → biely text na bielom poli),
   4px rohy a sivé hranaté CTA z .wp-element-button. Všetky
   selektory nesú predka .wc-block-components-sidebar-layout
   (spoločný obal košíka aj pokladne), aby vyhrali špecificitou
   a nerozhodovalo poradie enqueue. Farby idú cez tokeny,
   tmavý režim sa tak prepína sám.
   ============================================================ */
/* Polia sú v OBOCH režimoch svetlé s tmavým textom — ako vyhľadávanie
   v hlavičke. Preto natvrdo, nie cez tokeny: tie by v tmavom režime
   prevrátili text na biely a na bielom poli by zmizol (presne chyba,
   ktorú toto rieši). `input[type]` dvíha špecificitu nad Woo pravidlá
   s `input[type="text"]`, ktoré by inak vyhrali poradím enqueue. */
.wc-block-components-sidebar-layout .wc-block-components-text-input input[type],
.wc-block-components-sidebar-layout .wc-block-components-textarea,
.wc-block-components-sidebar-layout .wc-blocks-components-select__container {
  background: #fff;
  color: #15191f;
  border: 1px solid #d8dee5;
  border-radius: 10px;
}
.wc-block-components-sidebar-layout .wc-blocks-components-select__select {
  background: transparent;
  color: #15191f;
  border: 0;
  border-radius: 10px;
}
.wc-block-components-sidebar-layout .wc-block-components-text-input input[type]:focus,
.wc-block-components-sidebar-layout .wc-block-components-textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-soft);
  outline: none;
}
.wc-block-components-sidebar-layout .wc-blocks-components-select__container:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-soft);
}
.wc-block-components-sidebar-layout .wc-block-components-text-input label,
.wc-block-components-sidebar-layout .wc-blocks-components-select__label { color: #4a5560; }
.wc-block-components-sidebar-layout .wc-blocks-components-select__expand { fill: #4a5560; }
.wc-block-components-sidebar-layout .wc-block-components-address-form__address_2-toggle { color: var(--blue-ink); }
.wc-block-components-sidebar-layout .wc-block-components-validation-error p { color: var(--red-ink); }

/* zaškrtávacie políčka (poznámka, súhlasy) — svetlé ako polia */
.wc-block-components-sidebar-layout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
  background: #fff;
  border: 1.5px solid var(--grey-300);
  border-radius: 5px;
}
.wc-block-components-sidebar-layout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
  background: var(--blue);
  border-color: var(--blue);
}
.wc-block-components-sidebar-layout .wc-block-components-checkbox__mark { color: #fff; fill: #fff; }

/* tlačidlá blokov — modré ako zvyšok webu, hlavné CTA červené */
.wc-block-components-sidebar-layout .wc-block-components-button.wp-element-button {
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  transition: background .15s;
}
.wc-block-components-sidebar-layout .wc-block-components-button.wp-element-button:hover { background: var(--blue-dark); color: #fff; }
.wc-block-components-sidebar-layout .wc-block-components-button.wc-block-components-checkout-place-order-button,
.wc-block-components-sidebar-layout .wc-block-components-button.wc-block-cart__submit-button {
  background: var(--red);
  min-height: var(--ui-h);
  font-size: 15.5px;
  box-shadow: 0 4px 12px rgba(211,47,47,.25);
}
.wc-block-components-sidebar-layout .wc-block-components-button.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-sidebar-layout .wc-block-components-button.wc-block-cart__submit-button:hover { background: var(--red-dark); }

/* súhrn objednávky — nadpis a súčty ako v cart_totals */
.wc-block-components-sidebar-layout .wc-block-components-checkout-order-summary__title-text,
.wc-block-components-sidebar-layout .wc-block-cart__totals-title { color: var(--blue-ink); }
.wc-block-components-sidebar-layout .wc-block-components-totals-wrapper { border-top: 1px solid var(--grey-100); }
.wc-block-components-sidebar-layout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-weight: 900; }
.wc-block-components-sidebar-layout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--red-ink);
  font-weight: 900;
}
.wc-block-components-sidebar-layout .wc-block-components-product-name { color: var(--blue-ink); font-weight: 700; }
.wc-block-components-sidebar-layout .wc-block-components-address-card__edit { color: var(--blue-ink); }
.wc-block-components-sidebar-layout .wc-block-components-notice-banner { border-radius: 10px; }

/* fotky v súhrne a v blokovom košíku — rendery majú biele pozadie */
.wc-block-components-sidebar-layout .wc-block-components-order-summary-item__image img,
.wc-block-components-sidebar-layout .wc-block-cart-item__image img {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
}
[data-theme="dark"] .wc-block-components-sidebar-layout .wc-block-components-order-summary-item__image img,
[data-theme="dark"] .wc-block-components-sidebar-layout .wc-block-cart-item__image img { background: #e6ebf1; }

/* blokový košík (na produkcii) — tabuľka a počet kusov */
.wp-block-woocommerce-cart table.wc-block-cart-items th { color: var(--grey-700); }
.wp-block-woocommerce-cart table.wc-block-cart-items th,
.wp-block-woocommerce-cart table.wc-block-cart-items td { border-color: var(--grey-100); }
.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
  border: 1px solid #d8dee5;
  border-radius: 8px;
  background: #fff;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  color: #15191f;
  background: transparent;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { color: #4a5560; }
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link { color: var(--grey-700); }
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover { color: var(--red-ink); }

/* Osobný odber — adresa predajne pod voľbou dopravy (inc/packeta.php).
   WooCommerce pri osobnom odbere nezobrazuje nič okrem názvu metódy. */
.sp-odber-info {
  margin: 4px 0 6px 26px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey-700);
}
.sp-odber-info span { display: block; }
.sp-odber-adresa { font-weight: 700; }
.sp-odber-pozn a { color: var(--blue-ink); text-decoration: underline; }
@media (max-width: 600px) {
  .sp-odber-info { margin-left: 0; }
}
/* ============================================================
   PANEL „DO DOPRAVY ZDARMA VÁM CHÝBA…"
   ============================================================ */
/* Farby idú zo sémantických tokenov, nie z `--grey-*` napevno — tie sa
   v tmavom režime prehadzujú a text by na paneli splynul s pozadím. */
.sp-dz {
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 1px solid var(--grey-200);
  border-left: 4px solid var(--blue-ink);
  border-radius: 10px;
  background: var(--surface);
}
.sp-dz.je-hotovo { border-left-color: var(--green-ink); }
.sp-dz-text { margin: 0 0 10px; font-size: 15px; color: var(--grey-900); }
.sp-dz-text strong { font-weight: 700; }
.sp-dz.je-hotovo .sp-dz-text strong { color: var(--green-ink); }
/* Woo vypisuje cenu ako <span class="woocommerce-Price-amount">, ktorý by
   zdedil farbu odkazov z `.entry-content a`. */
.sp-dz-text .woocommerce-Price-amount { color: inherit; }
.sp-dz-pas {
  height: 8px;
  border-radius: 999px;
  background: var(--grey-100);
  overflow: hidden;
}
.sp-dz-pas span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--blue-ink);
  transition: width .3s ease;
}
.sp-dz.je-hotovo .sp-dz-pas span { background: var(--green-ink); }
.sp-dz-odkaz {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-ink);
}
@media (prefers-reduced-motion: reduce) {
  .sp-dz-pas span { transition: none; }
}