`, takze na nej dosahne `woocommerce.css`: `.woocommerce table.shop_table {border:1px solid …;border-radius:5px;border-collapse:separate; border-spacing:0;margin:0 -1px 24px 0}` (0,2,1). Trida `shop_table` je jak na tabulce polozek kosiku (cart.php), tak na souhrnu (`.cart-summary table.shop_table`) i na prehledu objednavky na pokladne - vsude z toho byl sedy ramecek se zaoblenim, ktery do designu nepatri (tema kresli vlastni oddelovace, viz `.cart-table` nize). Reset drzi SHODNY TVAR selektoru jako WC (2 tridy + 1 typ), takze pri stejne specificite vyhrava pozdejsim poradim v - bez `!important`. Pravidla nize, ktera si `margin` deklaruji sama (`.cart-summary table.shop_table`, `.woocommerce table.woocommerce-checkout-review-order-table`), jsou v souboru az za timhle resetem, takze jim ho nesebere. */ .woocommerce table.shop_table { border: 0; border-radius: 0; border-collapse: collapse; border-spacing: 0; margin: 0; } /* ========================================================================== Kosik (woocommerce/cart/cart.php, cart-totals.php, cart-empty.php, cross-sells.php) - polozky vlevo, souhrn vpravo. ========================================================================== */ /* --- Layout: polozky (form) + souhrn (.cart-collaterals) vedle sebe --- */ .cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-lg); align-items: start; } @media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } } /* --- Tabulka polozek --- */ .cart-table { width: 100%; border-collapse: collapse; } .cart-table thead th { padding: 0 0 var(--space-sm); border-bottom: 1px solid var(--c-border); font-family: var(--font-body); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--c-muted); text-align: left; } .cart-table tbody tr.woocommerce-cart-form__cart-item { border-bottom: 1px solid var(--c-border); } .cart-table td { padding: var(--space-sm) 0.6rem; vertical-align: middle; } .cart-table td.product-remove { padding-left: 0; width: 2.2rem; } .cart-table td.product-subtotal { text-align: right; white-space: nowrap; } /* Nahled produktu - WC vychozi `.woocommerce-cart table.cart img{width:32px}` ma tvar (2 tridy, 2 typy = table+img); nas selektor pouziva `.cart-table` misto `.cart` a stejny pocet trid/typu, aby pri stejne specificite vyhral pozdejsim poradim. */ .woocommerce-cart table.cart-table .product-thumbnail { min-width: 88px; } .woocommerce-cart table.cart-table img { width: 88px; height: auto; border-radius: var(--radius); box-shadow: none; } .cart-table .product-name a { font-family: var(--font-heading); color: var(--c-primary-ink); } .cart-table .product-name dl.variation, .cart-table .product-name .wc-item-meta { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--c-muted); } /* WC uz do `

` sam pripojuje dvojtecku (`cart/cart-item-data.php`: `

...zaklad...:

`) - vlastni `::after{content:": "}` by tam dala DRUHOU dvojtecku ("Styl::"). Kazda dvojice dt/dd ma byt pod sebou (ne carkou spojena do jednoho radku), proto misto pridavani carky pouzivame `dd::after{display:block}` - prazdny blokovy pseudo-element za kazdym `dd`, ktery jen zalomi radek pred DALSI dvojici (dt+dd samotne zustavaji inline vedle sebe na spolecnem radku). */ .cart-table .product-name dl.variation dt, .cart-table .product-name dl.variation dd { display: inline; margin: 0; } .cart-table .product-name dl.variation dt { font-weight: 600; } .cart-table .product-name dl.variation dd::after { content: ""; display: block; margin-bottom: 0.2rem; } .cart-table .product-name dl.variation dd:last-child::after { content: none; } /* Odebrat polozku - kolecko s krizkem. `.remove` nema na kosiku zadny konfliktni WC vychozi styl (ten je jen pod `.woocommerce` ancestor, ktery na /kosik/ neni na body), takze staci obycejna trida. */ .cart-table a.remove { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--c-border); color: var(--c-muted); font-size: 1.1rem; line-height: 1; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .cart-table a.remove:hover { background: var(--c-accent-deep); border-color: var(--c-accent-deep); color: #fff; text-decoration: none; } .cart-table a.remove:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } /* Mnozstvi - `.quantity .qty` ma vychozi WC styl jen pod `.woocommerce` ancestor (na kosiku neni na body), takze staci obycejna trida. */ .cart-table .quantity .qty { width: 4rem; font-family: var(--font-body); font-size: 1rem; color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.5rem 0.4rem; text-align: center; } .cart-table .quantity .qty:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-color: var(--c-primary); } /* --- Radek akci (kupon + aktualizace kosiku) --- */ .cart-actions { padding-top: var(--space-md); } .cart-actions .coupon { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: var(--space-sm); } /* Kuponove pole - WC vychozi `.woocommerce-cart table.cart td.actions .coupon .input-text{float:left;border:1px solid #cfc8d8;...}` ma tvar 5 trid + 2 typy (table, td). Nas selektor drzi stejny pocet (woocommerce-cart, cart-table, cart-actions, coupon, input-text / table, td), aby pri stejne specificite vyhral pozdejsim poradim. */ .woocommerce-cart table.cart-table td.cart-actions .coupon .input-text { float: none; font-family: var(--font-body); font-size: 1rem; color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.65rem 0.85rem; margin: 0; outline: 0; width: auto; max-width: 16rem; } .cart-actions .coupon .input-text:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-color: var(--c-primary); } .cart-actions .coupon .input-text::placeholder { color: var(--c-muted); } /* "Pouzit kupon" - vzhled `.btn--secondary` (obrys). */ .cart-actions .button { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; padding: 0.65rem 1.3rem; border-radius: var(--radius); border: 1.5px solid var(--c-primary); background: transparent; color: var(--c-primary-ink); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .cart-actions .button:hover { background: var(--c-plum-wash); text-decoration: none; } .cart-actions .button:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } /* "Aktualizovat kosik" - druhotna akce vuci kuponu, vzhled `.btn--ghost` (bez ramecku, jen barva pri hoveru). */ .cart-actions button[name="update_cart"] { margin-top: 0; border-color: transparent; background: transparent; padding-inline: 0.4rem; } .cart-actions button[name="update_cart"]:hover { background: transparent; color: var(--c-accent-deep); } @media (max-width: 640px) { .cart-actions .coupon { flex-direction: column; align-items: stretch; } .cart-actions .coupon .input-text { max-width: none; } } /* ========================================================================== Souhrn kosiku (.cart-collaterals > .cart_totals.cart-summary.card) Trida `.card` uz da pozadi/ramecek/zaobleni/padding (viz components.css) - tady jen stin navic, radky jako flex a titulek. ========================================================================== */ /* Bez ramecku - `.card` (components.css) dava border, tady ho rusime (souhrn drzi stin, dal pusobi jako karta). `.cart-summary` (0,1,0) = stejna specificita jako `.card`, vyhrava pozdejsim poradim souboru (#9). */ .cart-summary { box-shadow: var(--shadow-soft); border: 0; } .cart-summary__title { font-size: var(--step-2); margin-bottom: var(--space-sm); } .cart-summary table.shop_table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-sm); } .cart-summary table.shop_table tr { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); padding-block: 0.55rem; } .cart-summary table.shop_table tr:first-child { padding-top: 0; } /* Bunky souhrnu - WC vychozi `.cart_totals table th{width:35%}` a `.cart_totals tr td/th{border-top:1px solid #e9e6ed}` maji tvar 3 tridy + 2 typy (woocommerce-cart, cart-collaterals, cart_totals / table+th nebo tr+td). Selektory nize drzi stejny pocet (cart-collaterals nahrazujeme cart-summary), aby pri stejne specificite vyhraly pozdejsim poradim. */ .woocommerce-cart .cart-collaterals .cart-summary table th, .woocommerce-cart .cart-collaterals .cart-summary table td { width: auto; padding: 0; border: 0; vertical-align: baseline; text-align: left; font-weight: 400; color: var(--c-text); } .cart-summary .order-total th, .cart-summary .order-total td { font-family: var(--font-heading); font-size: var(--step-2); color: var(--c-primary-ink); font-weight: 400; } .cart-summary .cart-discount td { color: var(--c-botanical); } .cart-summary select { width: 100%; } /* Pokracovat k pokladne - WC vychozi `.wc-proceed-to-checkout a.checkout-button` ma tvar 3 tridy + 1 typ (woocommerce-cart, wc-proceed-to-checkout, checkout-button / a); nas selektor drzi stejny pocet (cart-summary misto woocommerce-cart), aby pri stejne specificite vyhral pozdejsim poradim. */ .cart-summary .wc-proceed-to-checkout { padding: var(--space-sm) 0 0; } .cart-summary .wc-proceed-to-checkout a.checkout-button { display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin-bottom: 0; font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1; padding: 1.05rem 2rem; border-radius: var(--radius); border: 1.5px solid transparent; background: var(--c-accent-deep); color: #fff; text-align: center; text-decoration: none; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .cart-summary .wc-proceed-to-checkout a.checkout-button:hover { background: var(--c-cta-hover); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-2); } .cart-summary .wc-proceed-to-checkout a.checkout-button:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } /* ========================================================================== Prazdny kosik (.cart-empty-cta) Vlastni trida, NE `.cart-empty` - tu pouziva uz wc_empty_cart_message() pro hlasku "Vas kosik je prazdny" (jinak by dostala nas padding/sirku). ========================================================================== */ .cart-empty-cta { max-width: 40rem; margin-inline: auto; padding: var(--space-xl) var(--space-lg); } .cart-empty__lead { color: var(--c-muted); font-size: var(--step-1); margin-bottom: var(--space-md); } /* ========================================================================== Cross-sells v kosiku (woocommerce/cart/cross-sells.php) - stejne karty jako "Hodi se k" na detailu (.grid-4/.product-card z components.css), jen oddeleni od kosiku nad sekci. ========================================================================== */ .cart-layout + .cross-sells { border-top: 1px solid var(--c-border); } /* ========================================================================== Woo formularova pole (billing/shipping/dotaznik na checkoutu) - F4 (davka B) `woocommerce-layout.css` je na kosiku/pokladne odhlasene (viz kop_dequeue_wc_layout_styles() v inc/enqueue.php) - dava float layout pro `.col2-set .col-1/.col-2` a `.form-row-first/-last/-wide`. Nahrazujeme vlastnim gridem. `woocommerce-general` (woocommerce.css) zustava a dava zaklad vstupu/textarea/selectu (barvy z `--wc-form-*`), tady jen dostylovavame na vzhled `.input/.select/.textarea` z pages.css. ========================================================================== */ /* Sjednoceni odsazeni radku formulare - WC vychozi `.form-row{padding:3px; margin:0 0 6px}` neni v nasem prostorovem rastru a zpusobovalo, ze radek se zaskrtavatkem ("Mam zajem o osobni konzultaci...") vypadal jinak (jine odsazeni) nez ostatni pole dotazniku - sjednoceno na `--space-sm` pro vsechny `.form-row` v checkoutu (bez ohledu na typ pole). */ .woocommerce-checkout .form-row { padding: 0; margin: 0 0 var(--space-sm); } .woocommerce-checkout .form-row:last-child { margin-bottom: 0; } /* Bez `woocommerce-layout.css` uz nic nenastavuje `label{display:block}` / `label.checkbox{display:inline}` - bez toho by label splynul s inputem na jednom radku. Bez ancestor tridy (misto `.woocommerce-checkout .form-row`), at spravne dopadne i na pripadny `.woocommerce-shipping-calculator` form-row na KOSIKU (ten po dequeue potrebuje stejnou opravu, kdyby byl niekdy zapnuty). */ .form-row label { display: block; margin-bottom: 0.35rem; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--c-text); } /* `align-items: center` (ne `flex-start`) - popisky checkboxu jsou jednoradkove a zaskrtavatko u nich pusobilo posunute nahoru. Plati na vsechny checkboxy dotazniku (`woocommerce_form_field()` v lh-svatby/Checkout.php) i na zpravodaj z pluginu ecomail - vsechny nesou na `` tridu `checkbox`. */ .form-row label.checkbox { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0; font-weight: 400; } .form-row label .required { color: var(--c-accent-deep); text-decoration: none; } /* Velikost zaskrtavatka sjednocena napric checkboxy dotazniku/podminek (bez toho by rozmer nechaval na vychozim, mezi prohlizeci ruzne velkem fontu zavislem stylu). `margin: 0` nuluje jak vychozi UA `margin`, tak WC `.woocommerce form .form-row .input-checkbox{margin:-2px 8px 0 0}`, takze odstup od textu drzi vyhradne `gap` labelu (jinak se 8px scitalo s gapem a `-2px` nahoru navic rozbijelo svisle centrovani). Puvodni `margin-top: 0.15rem` (kompenzace pro `align-items: flex-start`) uz neni potreba, label centruje. Druhy selektor ma SHODNY tvar s tim WC pravidlem (3 tridy) plus typ `input` navic - samotne `.form-row input.input-checkbox` (0,2,1) by prohralo (overeno v prohlizeci: `margin` zustaval `-2px 8px 0 0`). Prvni, obecnejsi varianta zustava kvuli pripadnym `.form-row` mimo `.woocommerce form`. */ .form-row input.input-checkbox, .woocommerce form .form-row input.input-checkbox { width: 1.05rem; height: 1.05rem; flex: none; margin: 0; accent-color: var(--c-primary); } /* `.col2-set` (billing/shipping sloupce v `#customer_details`, pripadne i `.col2-set` v kalkulacce dopravy na kosiku) - misto floatu jednoduse blok pod sebou (na checkoutu sloupce uz rozdeluje `.checkout-grid`, `.col2-set` tam jen drzi billing/shipping vedle sebe pri sirsim rozlozeni). */ .col2-set { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } .col2-set .col-1, .col2-set .col-2 { float: none; width: auto; } /* Dvojice poli na radek (jmeno/prijmeni, mesto/PSC...) - vlastni grid misto floatu z `woocommerce-layout.css`. */ .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-md); } /* Poznámka k objednávce je jediné pole sekce a nenese `.form-row-wide`, takže by v dvousloupcové mřížce zabrala jen polovinu - vlastní jednosloupcová. */ .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr; } .form-row-first, .form-row-last { grid-column: span 1; float: none; width: auto; overflow: visible; } .form-row-wide { grid-column: 1 / -1; float: none; width: auto; clear: none; } @media (max-width: 480px) { .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; } } /* "Doručit na jinou adresu?" (h3#ship-to-different-address v .col-2) má z woocommerce-general (zůstává enqueued) `float:left` NA ID SELEKTORU: `.woocommerce-checkout .checkout .col-2 h3#ship-to-different-address {float:left;clear:none}` - specificita s ID (1,3,1) nejde přebít bez ID nebo `!important` (oboji zakázáno), takže float na samotném h3 NEŘEŠÍME. Místo toho čistíme vše, co po něm následuje (`clear:both`) - `clear` na TĚCHTO elementech žádné konkurenční ID pravidlo nemá, obyčejná třída stačí. Bez toho se `.shipping_address` i pozdější `.woocommerce-additional- -fields` (textarea `#order_comments` - "Poznámky k objednávce") zalamovaly vedle floatu a zúžily na desítky pixelů. */ .woocommerce-shipping-fields, .woocommerce-shipping-fields .shipping_address, .woocommerce-additional-fields, .woocommerce-shipping-fields .form-row, .woocommerce-additional-fields .form-row { clear: both; width: 100%; } /* Vzhled vstupu/textarea - vychozi z woocommerce-general zustava funkcni (barvy, invalid/validated stavy), tady jen sladeni s `.input/.textarea`. */ .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .woocommerce-checkout .form-row select { font-family: var(--font-body); font-size: 1rem; color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.7rem 0.85rem; } .woocommerce-checkout .form-row textarea { width: 100%; } /* `.woocommerce-input-wrapper` je vychozi `` (inline) - `width` by na nem samotnem nic neudelal (na neblokove inline elementy width nepusobi), proto ho davame na block, at spravne obali i sirku textarea/inputu. */ .woocommerce-checkout .woocommerce-input-wrapper { display: block; width: 100%; } .woocommerce-checkout .form-row textarea { min-height: 100px; line-height: var(--lh-body); } .woocommerce-checkout .form-row input.input-text:focus-visible, .woocommerce-checkout .form-row textarea:focus-visible, .woocommerce-checkout .form-row select:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-color: var(--c-primary); } /* Select2 (zeme/kraj) - vychozi vzhled je z pluginoveho `select2.css` (`.select2-container--default .select2-selection--single` - 2 tridy); nas selektor prida `.woocommerce-checkout` navic, aby vyhral bez ohledu na poradi. */ .woocommerce-checkout .select2-container--default .select2-selection--single { height: auto; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.7rem 0.85rem; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; color: var(--c-text); line-height: 1.4; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: auto; top: 0; bottom: 0; right: 0.7rem; } .woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single, .woocommerce-checkout .select2-container--default .select2-selection--single:focus { border-color: var(--c-primary); } /* ========================================================================== Checkout (davka B) - woocommerce/checkout/{form-checkout,thankyou}.php. Stepper (`.lh_checkout_tabs`/`.lh_checkout_step*`) i tridy `lh_checkout_step_1_section`/`lh_checkout_step_2_section` jsou z pluginu lh-svatby (assets/lh-checkout-scripts.js + lh-checkout-styles.css) - NESAHAT na tridy/JS ani na inline `style="display:none"`, grid dostavame jen na vnorene divy (`.checkout-grid`), nikdy primo na `..._section` (jQuery fadeIn() by inline `display:block` prebilo nase pripadne `display:grid/flex`). `lh-checkout-styles.css` nema na `.lh_checkout_step` zaklad `!important`, takze staci stejna/vyssi specificita + pozdejsi poradi; `.lh-step-button-next` (float/margin-top) a `a.lh-step-button:hover` (barva) ANO maji `!important` - ty NEPREBIJIME, jen tvar/velikost. ========================================================================== */ /* --- Stepper --- */ .lh_checkout_tabs { border-radius: var(--radius-lg); overflow: hidden; } /* Na mobilu se delsi popisek ("Dokonceni objednavky") zalomi na dva radky - flex centrovani drzi kratsi tab svisle na stredu vedle nej. */ .lh_checkout_step { display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--c-border); font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; color: var(--c-muted); background: var(--c-surface); padding: 0.95rem var(--space-sm); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } /* Klikatelné taby (kop-checkout.js věší role="button"/tabindex + handlery na clickPrev()/clickNext() pluginu) - kurzor a viditelný fokus pro klávesnici (navazuje na WCAG pass z F8). Markup šablony zůstává 1:1, styl řešíme z CSS. */ .lh_checkout_step { cursor: pointer; } .lh_checkout_step:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } .lh_checkout_step + .lh_checkout_step { border-left: none; } .lh_checkout_step.active { background-color: var(--c-primary); border-color: var(--c-primary); color: #fff; } /* Krok 1 - svatebni dotaznik na PLNOU sirku `.wrap` (stejne jako taby `.lh_checkout_tabs` nad nim), viz bod 6a. Drive omezeny na 52rem, ale uzivatel chce dotaznik siroky jako taby. Vnitrni `.checkout-panel` je 100 %, takze karta i floatovane tlacitko "Dalsi" pod ni zaberou celou sirku. */ .lh_checkout_step_1_section { max-width: none; } /* Klidovy stav i `.lh-wedding-quest checkout-panel` - obe tridy soucasne, viz woocommerce/checkout/form-checkout.php, at plugin CSS neztrati kotvu `.lh-wedding-quest`). `border:0` tu cilene prebiji plugin `border`/`border-top` (zadny `!important`, stejna specificita 1 trida + pozdejsi poradi stac). */ .checkout-panel { border: 0; background: var(--c-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: var(--space-lg); margin-bottom: var(--space-md); } .checkout-panel__title { font-size: var(--step-2); margin-bottom: var(--space-md); } /* Clearfix - "Dalsi" tlacitko pod kartou je floated (plugin), sekci by jinak floatovany obsah "propadl" (0 vysky za kartou). */ .lh_checkout_step_1_section::after { content: ""; display: table; clear: both; } /* --- Tlacitka "Dalsi"/"Predchozi" (.lh-step-button) a #place_order - vsechny nesou `.button.alt` (WC zaklad). `woocommerce.css` ma na `.button.alt` selektor s TYPEM navic (`.woocommerce a.button.alt` / efektivne `.woocommerce button.button.alt` - druha varianta je schovana v `:where()`, ktery ma VZDY nulovou specificitu, takze fakticky pocita jen jako `.woocommerce button.button.alt`) - to je 3 tridy + 1 typ. Nas puvodni selektor `.woocommerce-checkout .button.alt` mel jen 3 tridy bez typu, tedy NIZSI specificitu (typ je az treti - a rozhodujici - slozka specificity) → prohraval bez ohledu na poradi, proto zustavala vychozi WC fialova. Pridanim typu (`a`/`button`) ted mame stejny "tvar" (3 tridy + 1 typ) → pri stejne specificite vyhrava pozdejsi poradi (nase checkout.css se enqueuuje az po woocommerce-general). Barvu HOVERU na `.lh-step-button` navic vynucuje plugin `!important` (`a.lh-step-button:hover`) - tu nepretezime, jen klidovy stav a tvar. */ .woocommerce-checkout a.button.alt, .woocommerce-checkout button.button.alt { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1; padding: 0.85rem 1.7rem; border-radius: var(--radius); border: 1.5px solid transparent; background: var(--c-accent-deep); color: #fff; cursor: pointer; text-decoration: none; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } /* Hover jen pro `button.button.alt` (#place_order) - u `a.button.alt` (lh-step-button next/prev) by stejne prohralo s pluginovym `!important` hoverem (viz komentar u "Predchozi" nize), takze pravidlo pro `a` tady zamerne nedavame (bylo by mrtve). */ .woocommerce-checkout button.button.alt:hover { background: var(--c-cta-hover); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-2); } .woocommerce-checkout a.button.alt:focus-visible, .woocommerce-checkout button.button.alt:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } /* "Predchozi" - druhotna akce (obrys misto vyplne). Pozor: plugin `a.lh-step-button:hover{background-color:#6c2c65!important;color:white!important}` plati na OBOU tlacitkach (next i prev) a `!important` nejde prebit bez vlastniho `!important` (zakazano) - vlastni `:hover` pravidlo pro "Predchozi" proto zamerne NEPRIDAVAME (bylo by mrtve, prohralo by u obou stavu barvy); idle stav (tvar nize) se ale prebije normalne. */ .woocommerce-checkout a.lh-step-button-prev.button.alt { background: transparent; color: var(--c-primary-ink); border-color: var(--c-primary); } .form-row.place-order .button.alt { width: 100%; margin-top: 0.5rem; } /* Hlaska "Pred odeslanim objednavky..." (kytky_cart_control_notice z lh-functions) - prosty `

` bez tridy pred tlacitkem "Potvrdte nakup". */ .form-row.place-order > p { font-size: 0.85rem; color: var(--c-muted); margin: 0 0 0.6rem; } /* --- Dvousloupcovy grid kroku 2: billing/shipping+kalendar vlevo, souhrn objednavky vpravo (sticky). Grid je na VNITRNIM divu, ne na `.lh_checkout_step_2_section` (viz komentar v hlavicce sekce). --- */ .checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--space-lg); align-items: start; } .checkout-grid__aside { position: sticky; /* 88px = priblizna vyska sticky `.site-header` (72px min-height + padding, viz base.css) - staci jako mezera, at souhrn nezajede pod hlavicku. */ top: calc(88px + var(--space-md)); } @media (max-width: 1000px) { .checkout-grid { grid-template-columns: 1fr; } .checkout-grid__aside { position: static; top: auto; } } .checkout-grid__main h3 { font-size: var(--step-2); margin: var(--space-md) 0 var(--space-sm); } .checkout-grid__main .woocommerce-billing-fields > h3:first-child, .checkout-grid__main .woocommerce-shipping-fields > h3:first-child { margin-top: 0; } .checkout-grid__aside > h3 { font-size: var(--step-2); margin: 0 0 var(--space-sm); } /* --- Kalendar terminu (lh_wedding_calendar() v lh-svatby/Checkout.php, sablona plugin templates/calendar.php) - presunuto (F5) do assets/css/calendar.css, sdileneho souboru pro kosik/pokladnu I stranku "Svatba na miru" (page-svatba-na-miru.php - viz [lh_wedding_calendar] tam). `calendar.css` se nacita PRED timhle souborem (viz inc/enqueue.php), takze poradi/specificita vuci pluginovemu CSS zustavaji stejne jako pred presunem. --- */ /* --- Souhrn objednavky (`#order_review.card`, viz form-checkout.php) --- `.card` uz da pozadi/ramecek/stin/padding (components.css). */ .woocommerce-checkout-review-order.card { box-shadow: var(--shadow-soft); } /* Tvar selektoru (2 tridy + 1 typ) je zamerne shodny s WC `.woocommerce table.shop_table` i s nasim resetem nahore - jinak by resetove `margin: 0` (vyssi specificita) sebralo tabulce spodni odsazeni od platebniho bloku. */ .woocommerce table.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-sm); } /* Hlavicka tabulky prehledu - skryta pro oko, pristupna pro ctecky (stejna technika jako `.screen-reader-text` z woocommerce-general). */ .woocommerce-checkout-review-order-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .woocommerce-checkout-review-order-table tbody tr, .woocommerce-checkout-review-order-table tfoot tr { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); padding-block: 0.55rem; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 0; border: 0; text-align: left; font-weight: 400; color: var(--c-text); } /* WC default (woocommerce.css) boldí hlavičky i tfoot buňky (`.woocommerce table.shop_table th / tfoot td / tfoot th{font-weight:700}`, specificita 0,2,3) - to jinak ztuční mezisoučet i dopravu. Přebíjíme přes `#order_review` (ID → specificita 1,x,y, vyhraje bez ohledu na pořadí souborů), ať položky/mezisoučet/doprava mají weight 400 (bod 7). */ #order_review .woocommerce-checkout-review-order-table tbody th, #order_review .woocommerce-checkout-review-order-table tbody td, #order_review .woocommerce-checkout-review-order-table tfoot th, #order_review .woocommerce-checkout-review-order-table tfoot td { font-weight: 400; } .woocommerce-checkout-review-order-table .product-name { min-width: 0; } .woocommerce-checkout-review-order-table .product-total { white-space: nowrap; font-weight: 400; } .woocommerce-checkout-review-order-table dl.variation, .woocommerce-checkout-review-order-table .wc-item-meta { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--c-muted); } /* Stejny princip jako u `.cart-table` vyse - WC uz do `

` pripojuje dvojtecku sam, takze zadny `::after`/`::before` s textovym obsahem (dvojtecka/carka) tu nedavame; jen zalomeni radku za kazdou dvojici pres prazdny blokovy pseudo-element. */ .woocommerce-checkout-review-order-table dl.variation dt, .woocommerce-checkout-review-order-table dl.variation dd { display: inline; margin: 0; } .woocommerce-checkout-review-order-table dl.variation dt { font-weight: 600; } .woocommerce-checkout-review-order-table dl.variation dd::after { content: ""; display: block; margin-bottom: 0.2rem; } .woocommerce-checkout-review-order-table dl.variation dd:last-child::after { content: none; } /* Doprava - misto radek label/hodnota je tu seznam metod (radio + label), proto blok misto flex. */ .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals { display: block; } .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th { margin-bottom: 0.5rem; font-weight: 600; } .woocommerce-shipping-methods { list-style: none; display: grid; gap: 0.5rem; margin: 0; padding: 0; } .woocommerce-shipping-methods li { display: flex; align-items: center; gap: 0.5rem; } .woocommerce-shipping-methods input.shipping_method { accent-color: var(--c-primary); } .woocommerce-shipping-destination { font-size: 0.8rem; color: var(--c-muted); margin: 0.4rem 0 0; } /* „Cena celkem" - stejný nadpisový font/velikost/barva jako u ostatních totalů, ale weight 400 na CELÉM řádku (Marcellus nemá tučný řez, `700` se renderoval synteticky - viz #11). `#order_review` + `.order-total` přebije jak WC default, tak náš 400 override výše. Samotnou částku v `` wrapperu řeší navíc `.woocommerce-Price-amount` pravidlo níže. */ #order_review .woocommerce-checkout-review-order-table .order-total th, #order_review .woocommerce-checkout-review-order-table .order-total td { font-family: var(--font-heading); font-size: var(--step-2); color: var(--c-primary-ink); font-weight: 400; } /* WC obaluje částku totalu do ``, který se renderuje synteticky tučně - un-bold i tady (košík i pokladna). Ostatní částky (mezisoučet/doprava) už weight 400 mají, takže se nezmění (#11). */ .cart-summary .woocommerce-Price-amount, #order_review .woocommerce-Price-amount { font-weight: 400; } /* Souhrn na pokladně bez rozlomeného rámečku nad totalem - WC default `table.shop_table td` (0,1,2) přebíjí theme `border:0` výše (0,1,1), přes flex mezeru pak border vypadá přerušeně. ID-prefixovaný override (1,1,1) ho smaže na všech řádcích souhrnu, stejně jako už je v košíku (#11). `.woocommerce-checkout-review-order-table` je vždy uvnitř `#order_review`. */ #order_review .woocommerce-checkout-review-order-table th, #order_review .woocommerce-checkout-review-order-table td { border: 0; } /* Hlaska o doprave z lh-functions (shipping_zone_targeted_postcodes_custom_notice) - vlozeny . */ .lh-shipping-notice { font-size: 0.85rem; color: var(--c-muted); } /* --- Platebni box (checkout/payment.php - neoverridujeme, jen WC tridy) --- POZOR na specificitu: `woocommerce.css` styluje CELY tenhle blok pres ID (`#payment`, `#payment ul.payment_methods`, `#payment div.payment_box` - tedy 1,x,y), takze puvodni pravidla tematu s jednou tridou (`.woocommerce-checkout-payment`/`.wc_payment_methods`/`.payment_box`) byla z velke casti mrtva a prosazovaly se vychozi WC barvy (fialkove pozadi `rgba(129,110,153,.14)`, sedy popisny box `#dcd7e2` s textem `#515151`). Element `#payment` NEVLASTNIME (je z `checkout/payment.php`, ktery neoverridujeme), takze ID v selektoru je tu - stejne jako u `#order_review` vyse - vedoma vyjimka; drzime SHODNY TVAR selektoru jako WC, aby se vyhravalo pozdejsim poradim, a zadny `!important`. Kazde z tech WC pravidel je zapsane jako TROJICE selektoru (`#payment, .woocommerce-cart #payment, .woocommerce-checkout #payment`) - pro specificitu se pocita ta nejsilnejsi varianta, ktera na element sedne, a `` pokladny tridu `woocommerce-checkout` ma. Samotne `#payment` (1,0,0) proto NESTACI (overeno v prohlizeci: pozadi zustavalo fialkove); vsechny selektory nize proto nesou stejny `.woocommerce-checkout` prefix. */ /* Layout: WC ma `` a `` jako SOUROZENCE primo v `
` (templates/checkout/payment-method.php). Puvodni `display: flex` na samotnem labelu z nej udelalo blok, ktery spadl POD inline radio - popisek metody se zalamoval na dalsi radek. Reseni je grid na `
` (obdoba dopravy u `.woocommerce-shipping-methods` vyse): 1. sloupec radio, 2. sloupec label + popisny box pod nim. */ .woocommerce-checkout-payment { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--c-border); } /* Kontejner plateb - WC `.woocommerce-checkout #payment{background;border-radius}`; `ul.payment_methods` ma navic `padding:1em` a spodni linku, ktere v nasi karte (`#order_review.card`) jen duplikuji odsazeni. */ .woocommerce-checkout #payment { background: transparent; border-radius: 0; } .woocommerce-checkout #payment ul.payment_methods { padding: 0; border-bottom: 0; } .woocommerce-checkout #payment div.form-row { padding: 0; } /* Clearfix pseudo-prvky WC (`content:" ";display:table`) by se v gridu staly plnohodnotnymi polozkami mrizky - prazdny radek navic nad/pod kazdou metodou. Rusime je stejnym tvarem selektoru, jaky ma WC. */ .woocommerce-checkout #payment ul.payment_methods::before, .woocommerce-checkout #payment ul.payment_methods::after, .woocommerce-checkout #payment ul.payment_methods li:not(.woocommerce-notice)::before, .woocommerce-checkout #payment ul.payment_methods li:not(.woocommerce-notice)::after { content: none; } .wc_payment_methods { list-style: none; display: grid; gap: 0.6rem; margin: 0 0 var(--space-sm); padding: 0; } /* Radek metody. `.wc_payment_method` (0,1,0) staci - WC na `
` zadny `display` nenastavuje (jen `line-height`/`text-align`/`margin`/`font-weight`). */ .wc_payment_method { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.5rem; } /* Vse krome radia (label i popisny box) do 2. sloupce - popis metody tak zacina zarovnany s jejim nazvem, ne pod zaskrtavatkem. */ .wc_payment_method > * { grid-column: 2; } .wc_payment_method > input.input-radio { grid-column: 1; grid-row: 1; } .wc_payment_method > label { grid-row: 1; display: flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 600; color: var(--c-text); cursor: pointer; } /* Radio - WC `.woocommerce-checkout #payment ul.payment_methods li input {margin:0 1em 0 0}` by jinak pricetlo k `column-gap` jeste 1em. */ .woocommerce-checkout #payment ul.payment_methods li input.input-radio { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--c-primary); } /* Comgate logo (filtr woocommerce_gateway_icon v lh-woo-comgate). Odsazeni resi `gap` labelu, proto se WC `margin:-2px 0 0 .5em` nuluje. */ .wc_payment_methods img { height: 1.4em; width: auto; } .woocommerce-checkout #payment ul.payment_methods li img { margin: 0; } /* Popisny box metody (`.payment_box`) - vychozi WC sede pozadi/text prebiji ID selektorem, jinak by v nasi karte zustal `#dcd7e2`/`#515151`. Levy odstup uz drzi grid (2. sloupec), takze `margin` uz jen svisly. */ .woocommerce-checkout #payment div.payment_box { margin: 0.5rem 0 0; padding: var(--space-sm); background: var(--c-surface-2); color: var(--c-muted); border-radius: var(--radius); font-size: 0.9rem; } /* Sipka nad boxem je WC `::before` s `border:1em solid #dcd7e2` (pruhledne krome spodni hrany) - prebarvujeme jen ji, at sedi na nove pozadi. */ .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--c-surface-2); } .woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; } /* --- Podminky (checkout/terms.php - neoverridujeme, jen WC tridy) --- */ .woocommerce-terms-and-conditions-wrapper { margin: var(--space-sm) 0; } /* `align-items: center` ze stejneho duvodu jako u `.form-row label.checkbox` vyse - toto pravidlo je specifictejsi (2 tridy), takze by jinak zaskrtavatko podminek zustalo zarovnane nahoru i po oprave tam. */ .woocommerce-terms-and-conditions-wrapper .form-row label { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; font-size: 0.9rem; } /* --- Mobilni prekloped tabulky souhrnu (stejny princip jako u .cart-table, viz vyse) - review-order tabulka je ale uz z principu uzka (sedi vzdy do ~24rem sloupce sidebaru), takze flex label/hodnota vzor pouzivame bez ohledu na sirku obrazovky (zadna dalsi @media potreba). --- */ @media (max-width: 760px) { .cart-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .cart-table tbody tr.woocommerce-cart-form__cart-item { position: relative; display: grid; grid-template-columns: 4.5rem 1fr; column-gap: var(--space-sm); row-gap: 0.3rem; padding-block: var(--space-md); } .cart-table td.product-remove { position: absolute; top: var(--space-md); right: 0; width: auto; padding: 0; } .cart-table td.product-thumbnail { grid-column: 1; grid-row: 1 / 5; padding: 0; } .woocommerce-cart table.cart-table img { width: 4.5rem; } .cart-table td.product-name { grid-column: 2; padding: 0 1.7rem 0 0; } .cart-table td.product-price, .cart-table td.product-quantity, .cart-table td.product-subtotal { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 0; text-align: left; } .cart-table td.product-price::before, .cart-table td.product-quantity::before, .cart-table td.product-subtotal::before { content: attr(data-title) ":"; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); } } /* --- Thank-you stranka (woocommerce/checkout/thankyou.php) --- */ .thankyou { max-width: 42rem; margin-inline: auto; } .thankyou__summary, .thankyou__details { box-shadow: var(--shadow-soft); margin-bottom: var(--space-md); } .thankyou__details:last-child { margin-bottom: 0; } /* order-received.php pouziva jinou skupinu trid (`.woocommerce-notice`) nez kosik/checkout notices (viz wp.css `.woocommerce-message` atp.), proto samostatne pravidlo tady - jen na thank-you strance. */ .woocommerce-notice--success, .woocommerce-notice--error { display: flex; align-items: flex-start; gap: 0.6rem; border-radius: var(--radius); padding: var(--space-sm) var(--space-md); margin: 0 0 var(--space-md); font-size: 0.95rem; color: var(--c-text); } .woocommerce-notice--success { background: color-mix(in oklab, var(--c-success) 12%, var(--c-surface)); border: 1px solid color-mix(in oklab, var(--c-success) 45%, transparent); } .woocommerce-notice--error { background: color-mix(in oklab, var(--c-error) 10%, var(--c-surface)); border: 1px solid color-mix(in oklab, var(--c-error) 40%, transparent); } .woocommerce-notice--success::before, .woocommerce-notice--error::before { flex: none; display: grid; place-items: center; margin-top: 0.05rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; font-size: 0.8rem; font-weight: 700; color: #fff; } .woocommerce-notice--success::before { content: "\2713"; background: var(--c-success); } .woocommerce-notice--error::before { content: "!"; background: var(--c-error); } .woocommerce-thankyou-order-failed-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; } .woocommerce-thankyou-order-failed-actions .button.pay { display: inline-flex; align-items: center; font-weight: 600; padding: 0.6rem 1.2rem; border-radius: var(--radius); background: var(--c-accent-deep); color: #fff; text-decoration: none; } .woocommerce-thankyou-order-failed-actions .button.pay:hover { background: var(--c-cta-hover); } .woocommerce-order-overview { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm) var(--space-lg); list-style: none; margin: var(--space-md) 0 0; padding: var(--space-md) 0 0; border-top: 1px solid var(--c-border); } .woocommerce-order-overview li { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-muted); } .woocommerce-order-overview li strong { display: block; font-family: var(--font-heading); font-size: var(--step-1); text-transform: none; letter-spacing: 0; color: var(--c-primary-ink); margin-top: 0.2rem; } @media (max-width: 560px) { .woocommerce-order-overview { grid-template-columns: 1fr; } } /* Tabulka objednavky (order/order-details.php - neoverridujeme) + tabulka svatebniho dotazniku (lh_thank_you_wedding() v lh-svatby, prosty bez tridy - barvy/velikost textu ma inline z pluginu, tady jen ramecky). Druhy selektor: `checkout.css` se nacita i na thank-you strance (`is_checkout()` je tam true), takze `order_details`/`customer_details` tabulky - obe nesou tridu `shop_table` - chyta spolecny reset z hlavicky souboru. Ten ma vyssi specificitu (0,2,1) nez `.thankyou__details table` (0,1,1) a sebral by jim horni odsazeni; shodny tvar (0,2,1) + pozdejsi poradi ho vraci. Ramecek jim reset odebira zamerne - bunky uz maji vlastni `border-bottom` nize a cela sekce je v `.card`. */ .thankyou__details table, .thankyou__details table.shop_table { width: 100%; border-collapse: collapse; margin: var(--space-sm) 0 0; } .thankyou__details table th, .thankyou__details table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--c-border); text-align: left; } .thankyou__details table tfoot th, .thankyou__details table tfoot td { border-bottom: 0; border-top: 1px solid var(--c-border); }