/**
 * Objednávkový tok — Košík, Pokladňa (Blocks), Ďakujeme (order-received),
 * Môj účet (vrátane detailu objednávky).
 *
 * ⚠️ ZMENA 30. 7. 2026 (Peter): podklad stránky je **canvas** (ako zvyšok webu)
 * a karty s obsahom sú **paper** — teda domáci vzor webu „paper karta na canvas
 * páse" (.hp-m-card, .os-card, .fnp sekcie). Predtým to bolo naopak: stránka
 * paper + BIELE vnútorné karty; biela sa v palete §7 nevyskytuje a obe košíkové
 * tabuľky pôsobili ako dva rôzne komponenty.
 * Vzor pravne.css (§18.9 lekcia: GP one-container reťaz + hex fallback +
 * !important). Enqueue len na is_cart / is_checkout / is_account_page
 * (functions.php), takže generické selektory sú bezpečné.
 */

/* ── Podklad: canvas na celej stránke toku ── */
body,
.site,
.grid-container,
.container,
.one-container .container,
.one-container .site-content,
.one-container .site-main,
.site-content,
.content-area,
.site-main { background: var(--canvas, #E7E2D9) !important; }
.inside-article { background: transparent !important; box-shadow: none; border: 0; }

/* ── Spoločný vzhľad kariet objednávkového toku ──
   Jedna deklarácia pre VŠETKY plochy s obsahom, nech sa nerozídu:
   košíková tabuľka, súčty, súhrn v pokladni, detail objednávky, zoznam
   objednávok v účte. */
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart_totals,
.woocommerce-order table.woocommerce-table--order-details,
.woocommerce-account table.woocommerce-table--order-details,
.woocommerce-order .woocommerce-table--custom-fields,
.woocommerce-account table.woocommerce-orders-table {
  background: var(--paper, #F2EEE7);
  border-radius: 12px;
  box-shadow: 0 18px 44px -30px rgba(33, 31, 28, .4);
}

/* ── Klasický košík ── */
/* Tabuľka položiek: kartu robí <form>, tabuľka je v nej priehľadná a bez
   vlastného rámu — inak by sa cez zaoblené rohy prekreslil ostrý roh. */
.woocommerce-cart .woocommerce-cart-form { overflow: hidden; margin-bottom: 30px; }
.woocommerce-cart table.cart,
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td,
.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td { background: transparent; }
.woocommerce-cart table.cart { margin: 0; border: 0; }
/* Náhľad položky — JEDNOTNE 110 × 110 pre všetky produkty.
   Zákaznícke fotky si veľkosť nesú v inline štýle z filtra
   `woocommerce_cart_item_thumbnail`, ale položky BEZ konfigurácie (Vzorky /
   Sample Pack, darčekové poukazy, edície) tým filtrom prejdú bez zmeny a
   dostanú default WooCommerce náhľad — ten bol viditeľne menší a riadky
   pôsobili rozhádzane. Veľkosť patrí do CSS, nie do PHP: platí naraz pre
   všetky typy položiek vrátane tých, ktoré pribudnú neskôr. */
.woocommerce-cart table.cart td.product-thumbnail img {
  width: 110px;
  height: 110px;
  min-width: 110px;
  object-fit: cover;
  border-radius: 4px;
}
/* linky v tabuľkách zladené s paletou (WC/GP dávajú šedú) */
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td,
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td { border-color: rgba(140, 133, 122, .28); }
/* hlavička tabuľky položiek — plná stone (Peter, 30. 7. 2026), svetlý text.
   ⚠️ MUSÍ byť ZA pravidlom pre linky vyššie: `…table.cart thead th` má rovnakú
   špecificitu (0,2,2) ako `…table.cart th`, takže rozhoduje poradie.
   ⚠️ Kontrast paper na stone = 3,15:1 — pod AA 4,5:1 pre bežný text. Ak by
   bola potrebná plná AA, text prehodiť na --ink (4,5:1). */
.woocommerce-cart table.cart thead th {
  background: var(--stone, #8C857A);
  color: var(--paper, #F2EEE7);
  font-weight: 700;
  border-color: rgba(242, 238, 231, .25);
}
/* Rovnaké odsadenie zhora aj zdola — nadpis „Sumár košíka" mal nad sebou len
   4 px a opticky visel na hornej hrane karty. */
.woocommerce-cart .cart_totals { padding: 24px; }
.woocommerce-cart .cart_totals h2 { color: var(--ink, #211F1C); }

/* ⚠️ Názov nahratého súboru (napr. „Gemini_Generated_Image_h2gsnwh2gs….png") je
   jeden nedeliteľný reťazec. Tabuľka s `table-layout: auto` sa nikdy nezmenší pod
   min-content, takže o taký názov PRETIEKLA vpravo (namerané +120 px na 375 px)
   a `overflow: hidden` na karte ju odrezala presne na hrane — vyzeralo to ako
   chýbajúci pravý padding. `overflow-wrap: anywhere` (na rozdiel od break-word)
   znižuje aj min-content, takže tabuľka ostane v karte. Rovnaká lekcia ako pri
   detaile objednávky nižšie. */
.woocommerce-cart table.cart td.product-name,
.woocommerce-cart table.cart td.product-name .variation dd,
.woocommerce-cart table.cart td.product-name .variation dd p { overflow-wrap: anywhere; }

/* Názov položky = kanonický textový odkaz (§17.1): sépia + 1px brass podčiarknutie,
   hover ink (text aj linka). Platí LEN na webe — tento CSS sa do mailov neenqueue-uje.
   Košík + klasický súhrn pokladne (a.cnf-product-name z filtra) aj detail objednávky
   (order-received + účet: WC linkuje názov cez <a href=permalink>, bez class → cez
   priameho potomka td.product-name, aby sa netrafili prípadné odkazy v item meta). */
a.cnf-product-name,
.woocommerce-order table.woocommerce-table--order-details td.product-name > a,
.woocommerce-account table.woocommerce-table--order-details td.product-name > a {
  color: var(--sepia, #4A3A2E);
  text-decoration: none;
  border-bottom: 1px solid var(--brass, #C9A368);
  transition: color .15s, border-color .15s;
}
a.cnf-product-name:hover,
.woocommerce-order table.woocommerce-table--order-details td.product-name > a:hover,
.woocommerce-account table.woocommerce-table--order-details td.product-name > a:hover {
  color: var(--ink, #211F1C);
  border-bottom-color: var(--ink, #211F1C);
}

/* Mobil: WC skladá riadok košíka pod seba — položka je na paper karte, stačí
   linka medzi položkami (predtým tu bola biela karta na paper podklade).
   ⚠️ Oddeľovač je box-shadow, NIE border: rám `<tr>` niekto prebíja cez
   !important (neprejde ani inline štýl — overené), tieň to obíde. */
@media (max-width: 768px) {
  /* Každá položka = vlastná TÓNOVANÁ kartička (Peter, 30. 7. 2026 — samotná
     medzera + linka mu na mobile nestačili, položky stále pôsobili načapené).
     `<tr>` je tu display:block, takže má vlastné pozadie, rádius aj padding.
     ⚠️ `!important` + `body.` prefix: WC responzívny košík si drží vlastné
     rozmery tiež cez !important, takže rozhoduje špecificita (0,4,3 > WC). */
  body.woocommerce-cart .woocommerce-cart-form table.cart tr.woocommerce-cart-form__cart-item {
    display: block;
    background: rgba(140, 133, 122, .1) !important;
    border-radius: 10px;
    box-shadow: none;
    padding: 16px 16px 18px !important;
    margin: 0 0 16px !important;
  }
  /* posledná položka — o niečo väčšia medzera pred kupónovým riadkom */
  body.woocommerce-cart .woocommerce-cart-form table.cart tr.woocommerce-cart-form__cart-item:nth-last-of-type(2) {
    margin-bottom: 22px !important;
  }
  /* kartička má vlastný padding → bunky bez zdvojeného odsadenia po stranách */
  body.woocommerce-cart .woocommerce-cart-form table.cart tr.woocommerce-cart-form__cart-item td {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* bez tohto by tónované kartičky siahali po hrany paper karty a pôsobili
     ako pruhy, nie ako karty v karte */
  body.woocommerce-cart .woocommerce-cart-form { padding: 14px; }

  /* WC responzívny košík dáva VŠETKÝM bunkám `text-align: right`. Pri jednom
     čísle je to v poriadku (štítok vľavo, hodnota vpravo), ale viacriadkový
     obsah — názov produktu s konfiguráciou, zoznam dopráv, adresa doručenia —
     tým dostane roztrhaný ľavý okraj. Blokovým bunkám preto vraciame vľavo,
     číselné (cena / počet / medzisúčet) nechávame vpravo. */
  /* ⚠️ `!important` je nutné — WC responzívne pravidlo má `text-align: right`
     TIEŽ ako !important, samotná vyššia špecificita ho neprebije. */
  .woocommerce-cart table.cart td.product-remove,
  .woocommerce-cart table.cart td.product-thumbnail,
  .woocommerce-cart table.cart td.product-name,
  .woocommerce-cart .cart_totals .shipping td,
  .woocommerce-cart .cart_totals .shipping td ul#shipping_method,
  .woocommerce-cart .cart_totals .shipping td ul#shipping_method li,
  .woocommerce-cart .cart_totals .shipping td .woocommerce-shipping-destination,
  .woocommerce-cart .cart_totals .shipping td .shipping-calculator-button { text-align: left !important; }
  /* obrázok aj krížik nech sedia na ľavej hrane bunky */
  .woocommerce-cart table.cart td.product-thumbnail img { margin-left: 0; }
  /* WC dáva štítok cez ::before (`data-title` + ": "); pri zarovnaní vpravo ho
     od hodnoty delila šírka bunky, po zarovnaní vľavo doliehal priamo na text
     („Produkt:Foto na plátno") → vlastná medzera. */
  .woocommerce-cart table.cart td.product-name::before { margin-right: 8px; }
  /* Štítok „Doprava:" WC floatuje doľava, takže si sadol na jeden riadok
     s prvou možnosťou dopravy a zvyšok sa okolo neho obtekal. Dostane
     vlastný riadok a zoznam dopráv začne pod ním. */
  .woocommerce-cart .cart_totals .shipping td::before {
    float: none;
    display: block;
    margin-bottom: 10px;
  }
}

/* ── Pokladňa (WC Blocks) ──
   OBA stĺpce = paper karta na canvas podklade (Peter, 30. 7. 2026 — predtým
   mala kartu len časť pravého stĺpca a text „plával" v pozadí stránky).

   ⚠️ Kde presne to sedí, je dôležité. WC Blocks robí medzeru medzi stĺpcami
   PADDINGOM samotných stĺpcov: `.wc-block-components-main` má width 65 % +
   `padding-right: 4.53%`, `.wc-block-components-sidebar` width 35 % +
   `padding-left: 2.26%`. Keby sme kartu (a jej padding) dali priamo na ľavý
   stĺpec, zmizne medzera a stĺpce sa dotknú. Preto:
   · ĽAVÁ karta = `.wc-block-checkout__form` (formulár VNÚTRI stĺpca) → gutter
     `padding-right` ostáva nedotknutý;
   · PRAVÁ karta = samotný `.wc-block-checkout__sidebar`, ktorého `padding-left`
     prepisujeme — medzeru už drží padding ľavého stĺpca, takže o nič neprídeme.

   ⚠️ Triedy overené na ŽIVEJ vykreslenej pokladni (WC 10.9.4): stĺpce nesú
   `wc-block-checkout__main|__sidebar|__form` a renderuje ich frontend bundle
   (`assets/client/blocks/checkout-frontend.js`). Blokové obaly
   `wp-block-woocommerce-checkout-*-block` v DOM tiež zostávajú, ale zámerne na
   nich neštýlujeme — sú to názvy z registrácie blokov, nie z UI vrstvy.
   ⚠️ Pokladňa sa vykresľuje až JavaScriptom, takže file:// snapshot (§18.8) je
   na ňu NEPOUŽITEĽNÝ — overovať treba v reálnom prehliadači. */
body.woocommerce-checkout .wc-block-checkout__form,
body.woocommerce-checkout .wc-block-checkout__sidebar {
  background: var(--paper, #F2EEE7);
  border-radius: 12px;
  box-shadow: 0 18px 44px -30px rgba(33, 31, 28, .4);
  padding: 28px;
}
/* Vnútorné karty súhrnu už netreba — inak by vznikla karta v karte rovnakej
   farby s viditeľným prechodom. */
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-sidebar-card,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-panel {
  background: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}
/* Rámovaný box súhrnu (`…checkout-order-summary-block`) má vlastný `padding: 0`,
   takže náhľady, ceny, riadok „Pridať kupóny" aj súčty doliehali priamo na jeho
   rám (namerané 1 px = hrúbka rámu). Odsadenie dávame jeho dvom vnútorným
   častiam — sú to stabilné `wc-block-*` triedy UI vrstvy, nie názvy z registrácie
   blokov. */
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title,
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content {
  padding-left: 18px;
  padding-right: 18px;
}
@media (max-width: 768px) {
  body.woocommerce-checkout .wc-block-checkout__form,
  body.woocommerce-checkout .wc-block-checkout__sidebar { padding: 20px; }
}

/* ── Ďakujeme (order-received) ──
   CELÝ blok objednávky = jedna paper karta (Peter, 30. 7. 2026 — kartu mala len
   tabuľka položiek, kým poďakovanie, prehľad objednávky, adresy, „Ďalšie
   informácie" a odkaz na faktúru „plávali" na canvas podklade).
   ⚠️ Prečo celý `.woocommerce-order` a nie jednotlivé časti: poďakovanie,
   prehľad aj pokyn k platbe sú tri SÚRODENCI (`p`, `ul`, `p`) — CSS ich nevie
   obaliť do jednej karty. Kartovať každý zvlášť by stránku roztrieštilo, takže
   je to jeden „doklad" a vnútorné tabuľky si nechávajú len svoje linky.
   ⚠️ Pozn.: táto stránka má v `<body>` AJ triedu `woocommerce-checkout`, preto
   je pravidlo viazané na `woocommerce-order-received`. */
body.woocommerce-order-received .woocommerce-order {
  background: var(--paper, #F2EEE7);
  border-radius: 12px;
  box-shadow: 0 18px 44px -30px rgba(33, 31, 28, .4);
  padding: 28px;
}
/* vnútorné tabuľky sú už na paper → vlastný tieň by robil kartu v karte */
body.woocommerce-order-received .woocommerce-order table.woocommerce-table--order-details,
body.woocommerce-order-received .woocommerce-order .woocommerce-table--custom-fields {
  box-shadow: none;
}
/* Odkazy v doklade (napr. „Faktúra na stiahnutie" zo Superfaktúry) chodia
   v defaultnej modrej → kanonický štýl textového odkazu §17.1.
   `:not(.button)` chráni hnedé tlačidlo „Faktúra". */
body.woocommerce-order-received .woocommerce-order a:not(.button):not(.wp-element-button) {
  color: var(--sepia, #4A3A2E);
  text-decoration: none;
  border-bottom: 1px solid var(--brass, #C9A368);
  transition: color .15s, border-color .15s;
}
body.woocommerce-order-received .woocommerce-order a:not(.button):not(.wp-element-button):hover {
  color: var(--ink, #211F1C);
  border-bottom-color: var(--ink, #211F1C);
}
@media (max-width: 768px) {
  body.woocommerce-order-received .woocommerce-order { padding: 20px; }
}

/* ── Môj účet ──
   Tabuľky sú v spoločnej deklarácii hore; tu už len mobilné doladenie. */

/* Mobil: WC tabuľku detailu objednávky core neskladá do stĺpca (na rozdiel od
   košíka) → na 375 px pretekala doprava. Menší padding + poistka: scroll vo
   VLASTNOM kontajneri tabuľky, stránka sama H-scroll nemá. */
@media (max-width: 640px) {
  .woocommerce table.woocommerce-table--order-details {
    display: block;
    overflow-x: auto;
    width: 100%;
  }
  .woocommerce table.woocommerce-table--order-details th,
  .woocommerce table.woocommerce-table--order-details td { padding: 8px 10px; white-space: normal; }
  .woocommerce table.woocommerce-table--order-details { font-size: 14px; }
  /* Dlhé nezalomiteľné meta (URL úschovne) inak nafúknu intrinsic šírku tabuľky —
     'anywhere' na rozdiel od break-word znižuje aj min-content. */
  .woocommerce table.woocommerce-table--order-details td { overflow-wrap: anywhere; }
}

/* ── Množstvo v košíku: vlastné tlačidlá − / + ────────────────
   Mobilné prehliadače natívny spinner pri input[type=number] vôbec
   nevykresľujú, takže zákazník nemal ako množstvo zmeniť inak než
   prepísaním čísla — a pri mazaní číslice sa spúšťal prepočet
   s prázdnou hodnotou a položka zmizla z košíka. */
.woocommerce-cart-form .quantity.cnl-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(33, 31, 28, .18);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
}
.woocommerce-cart-form .cnl-qty-btn {
  flex: none;
  width: 40px;
  border: 0;
  /* Symbol na stred oboma smermi. Vlastný padding tlačidla treba vynulovať —
     inak ho odsunie mimo osi a znak sedí mierne vyššie/vľavo. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--sepia);
  color: var(--paper);
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.woocommerce-cart-form .cnl-qty-btn:hover {
  background: var(--brass);
  color: var(--ink);
}
.woocommerce-cart-form .quantity.cnl-qty input.qty {
  width: 56px;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-size: 16px;   /* 16 px zabráni priblíženiu na iOS pri tapnutí */
  background: var(--paper);
  color: var(--ink);
}
/* Natívny spinner už netreba — máme vlastné tlačidlá. */
.woocommerce-cart-form .quantity.cnl-qty input.qty::-webkit-outer-spin-button,
.woocommerce-cart-form .quantity.cnl-qty input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.woocommerce-cart-form .quantity.cnl-qty input.qty {
  -moz-appearance: textfield;
  appearance: textfield;
}