/* ==========================================================================
UNIPA – harmonizace UI (v1.3.0)
Zdroj návrhu: Claude Design, „UNIPA Style Guide", css/unipa-harmonizace.css.
Načítá se ZA style.css a components.css (viz enqueue_theme_styles()).
ODCHYLKY OD NÁVRHU (vědomé, rozhodnuto 15. 10. 2026):
- `--u-orange-ink` je #bd4118, v návrhu #c4441a. Návrhová hodnota dává na
tónovaném podkladu #ffe9e0 jen 4,29:1; #bd4118 splní 4,5:1 na bílé i na
všech teplých podkladech (5,34 / 4,82 / 4,57).
- Plná tlačítka používají `--u-orange-btn` = #ff602e, tedy barvu značky a
patičky, s bílým textem (3,0:1, pod AA 4,5:1). Rozhodnuto 15. 10. 2026
po dvou kolech: #bd4118 a pak #d04519 (4,6:1) byly pro značku příliš
tmavé. Dluh je v BACKLOGu. Oranžový text na světlém (titulky karet,
odkazy, štítky) zůstává `--u-orange-ink` #bd4118 (≥ 4,5:1).
- Globální `a` a `img` jsou zúžené na obsah (`.obsah-page-in`), aby se
nezměnila navigace, patička, loga partnerů ani pluginy.
- Fokus tlačítek zůstává kontrastní ring ze style.css (3 px #1a1a1a + bílý
stín). Návrhový `--u-focus` (28% oranžová) nesplňuje 3:1 pro netextové
prvky a rozbil by smoke test „tlačítka mají viditelný fokus ring".
- Barvy tlačítek jsou zapsané jen pro varianty, které web používá
(`.btn`, `.btn.oranz`, `.btn.podpora`, WC `.button`); outline varianta
je sekundární tlačítko z návrhu.
- Karty obsahu se rozpoznají podle struktury, ne podle `.obsah-page-in .card`
(to by zasáhlo profily PA, kontakty, filtr Odborné sekce i karty v Mém účtu):
`.row > .col > .card.h-100` s obrázkem na prvním místě, bez `.d-flex`
a bez `.wpmc-profile-photo-circle`. Vyžaduje `:has()` (Chrome 105+,
Safari 15.4+, Firefox 121+).
- Titulek karty je `--u-orange-ink`, ne `--u-orange` (kontrast, viz výše).
- Poznámka „Členky UNIPA získají slevu" v e-shopu vypisuje plugin
wp-membership-2 s inline `style="color:#77a464"` (2,8:1). Šablona ji
přebíjí přes `!important`, text zůstává z pluginu. `.wpmc-price-table`
z návrhu je v pluginu „STARÝ LAYOUT (deprecated)" a aktuální výpisy ho
nepoužívají.
- Tlačítka v hero homepage mají barvu z ACF jako inline styl (`#ff602e` nebo
`#fff`). Fáze 2 je omylem všechna přebarvila na oranžovou; od fáze 5 se
bílá varianta (`background-color:#fff`) zachovává jako sekundární tlačítko.
Fáze: 1 tokeny + typografie, 2 tlačítka + štítky + formuláře,
3 karty obsahu + boční panel + homepage, 4 e-shop + košík + pokladna.
========================================================================== */
/* 1) TOKENY --------------------------------------------------------------- */
:root {
/* značka */
--u-orange: #ff602e; /* plochy, nadpisy H1, ikony (bez malého textu) */
--u-orange-ink: #bd4118; /* text a plné plochy s bílým textem (kontrast ≥ 4,5:1) */
--u-orange-ink-hover: #a63a16;
--u-orange-surface: #cf4416; /* A11Y-2: plochy s bílým textem (tlačítka, patička, menu); bílá 4,68:1 (AA); značková #ff602e má jen 3,02:1 */
--u-orange-btn: var(--u-orange-surface);
--u-orange-btn-hover: #b73c12;
--u-orange-hover: #e8521f; /* hover ploch bez textu */
--u-orange-soft: #ffe9e0;
--u-yellow: #f19c27;
/* teplé neutrály */
--u-ink: #2a2422;
--u-ink-2: #4a423f;
--u-muted: #786d68;
--u-line: #ece3de;
--u-line-strong: #d9ccc5;
--u-warm-0: #fcf8f6;
--u-warm-1: #f9f2ee;
--u-warm-2: #f7eeea; /* stávající .hpkal */
/* stavy */
--u-green: #2e6b37; --u-green-soft: #e5f3e7;
--u-slate: #3f4a51; --u-slate-soft: #eceff1;
--u-amber: #7a5100; --u-amber-soft: #fdf0dc;
/* tvar */
--u-r-sm: 6px; /* tlačítka, inputy, štítky */
--u-r-md: 12px; /* karty, obrázky */
--u-r-lg: 20px; /* panely, sidebar */
--u-shadow-1: 0 1px 2px rgba(42,36,34,.05), 0 4px 14px rgba(42,36,34,.06);
--u-focus: 0 0 0 3px rgba(255,96,46,.28);
/* mezery (4px rytmus) */
--u-s1: 4px; --u-s2: 8px; --u-s3: 12px; --u-s4: 16px;
--u-s5: 24px; --u-s6: 32px; --u-s7: 48px; --u-s8: 72px;
--u-gap: 24px;
}
@media (min-width: 992px) { :root { --u-gap: 28px; } }
/* 2) ZÁKLAD + TYPOGRAFIE ------------------------------------------------- */
body { color: var(--u-ink); line-height: 1.6; }
/* odkazy jen v obsahu; navigace, patička a tlačítka si drží vlastní barvy */
.obsah-page-in a:not(.btn):not(.button):not(.page-link):not(.nav-link):not(.dropdown-item) {
color: var(--u-orange-ink);
text-underline-offset: .18em;
}
.obsah-page-in a:not(.btn):not(.button):not(.page-link):not(.nav-link):not(.dropdown-item):hover {
color: var(--u-orange-ink-hover);
}
/* zaoblení obrázků v obsahu; loga, ikony a partneři zůstávají beze změny */
.obsah-page-in img,
.obsah-page-in-eshop img { border-radius: var(--u-r-md); }
.obsah-page-in h1,
.obsah-page-in-eshop h1 {
font-size: clamp(1.875rem, 1.35rem + 1.6vw, 2.5rem);
line-height: 1.2;
font-weight: 500;
margin: 0 0 var(--u-s5);
text-wrap: balance;
}
h2 { font-size: clamp(1.5rem, 1.25rem + .8vw, 1.875rem); line-height: 1.25; }
h3 { font-size: 1.375rem; line-height: 1.3; }
/* A11Y-3 auditu: sémantická úroveň nadpisu se liší od vzhledu (např. `
`).
Třídy .h2/.h3 z Bootstrapu mají jiné velikosti než tagy výše, proto je sjednocujeme. */
h1.h2 { font-size: clamp(1.5rem, 1.25rem + .8vw, 1.875rem); line-height: 1.25; margin-bottom: .5em; }
h2.h3 { font-size: 1.375rem; line-height: 1.3; }
.obsah-page-in p { line-height: 1.75; margin-bottom: 1.25em; }
.obsah-page-in.kalendar p { line-height: 1.6; }
/* 3) TLAČÍTKA – jeden tvar všude (radius 6 px, bez verzálek) ------------- */
/* Tvar: starý `.btn { radius 25px; uppercase; min-width 120px }` je ze
style.css a critical.css odstraněný, tady je jediný zdroj pravdy. */
.btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: .9375rem;
line-height: 1.2;
text-transform: none;
letter-spacing: 0;
min-height: 44px;
min-width: 0;
padding: .7rem 1.25rem;
border-radius: var(--u-r-sm) !important;
border: 1px solid transparent;
box-shadow: none;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Barva: --u-orange-btn (A11Y-2: o odstín tmavší než značková #ff602e, aby bílý text splnil AA 4,5:1) */
.btn, .btn.oranz, .btn.podpora,
.hpkalendar a.btn.oranz, .hpaktuality a.btn.oranz,
.user-webinars .btn-primary,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
background-color: var(--u-orange-btn) !important;
color: #fff !important;
}
.btn:hover, .btn.oranz:hover, .btn.podpora:hover,
.hpkalendar a.btn.oranz:hover, .hpaktuality a.btn.oranz:hover,
.user-webinars .btn-primary:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
background-color: var(--u-orange-btn-hover) !important;
border-color: transparent;
color: #fff !important;
transform: none;
}
.hlavicka .btn:hover, .kraje-buttons-flex .btn:hover { transform: none; box-shadow: none; }
/* sekundární: bílé / obrysové (hero „Mapa PA", „Odstoupit od smlouvy", filtry) */
.btn-outline-primary,
.woocommerce a.button.u-secondary {
background-color: #fff !important;
color: var(--u-orange-ink) !important;
border-color: var(--u-line-strong) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
.user-webinars .btn-outline-primary:hover {
background-color: var(--u-orange-soft) !important;
border-color: var(--u-orange) !important;
color: var(--u-orange-ink-hover) !important;
}
.btn-sm { min-height: 36px; padding: .45rem .9rem; font-size: .8125rem; }
.btn-lg { min-height: 52px; padding: .9rem 1.75rem; font-size: 1rem; }
/* neaktivní (Aktualizovat košík, Přidat do košíku bez varianty) */
.btn:disabled, .btn.disabled,
.woocommerce button.button:disabled, .woocommerce button.button.disabled,
.woocommerce a.button.disabled, .woocommerce button.button:disabled[disabled] {
background-color: var(--u-orange-soft) !important;
color: var(--u-orange-ink) !important;
border-color: transparent !important;
opacity: 1 !important;
cursor: not-allowed;
}
/* hero na HP – tlačítka v jedné řadě, stejná výška */
.hlavicka .btn { margin: 0; font-weight: 600; }
.hlavicka .d-flex { gap: var(--u-s3); }
.hpkalendar a.btn.oranz, .hpaktuality a.btn.oranz { display: inline-flex; font-size: .9375rem; }
/* 4) FILTRY (Odborná sekce) – „chipy" ------------------------------------ */
/* jen filtrační pilulky (`.d-flex.flex-wrap.gap-2` v category-odborna-sekce.php);
„Zobrazit profil" v mapě PA je také .btn-sm.btn-outline-primary a pilulka nemá být */
.obsah-page-in .d-flex.flex-wrap.gap-2 > .btn-sm.btn-outline-primary,
.obsah-page-in .d-flex.flex-wrap.gap-2 > .btn-sm.btn-primary {
border-radius: 999px !important;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: .8125rem;
gap: var(--u-s2);
}
.obsah-page-in .d-flex.flex-wrap.gap-2 > .btn-sm .badge {
margin: 0; background: var(--u-warm-2) !important; color: var(--u-ink-2) !important;
border-radius: 999px; padding: .2rem .5rem;
}
.obsah-page-in .d-flex.flex-wrap.gap-2 > .btn-sm.btn-primary .badge { background: rgba(255,255,255,.25) !important; color: #fff !important; }
/* 5) ŠTÍTKY ---------------------------------------------------------------- */
.badge, .hpkalendar .datumudalosti {
border-radius: var(--u-r-sm);
font-family: "DM Sans", sans-serif;
font-size: .75rem; font-weight: 600; line-height: 1;
padding: .35rem .6rem; margin: 0;
}
/* Štítky u událostí (datum, Akce UNIPA, Odborná garance, Pro členky) mají zpět výrazné
plné barvy původní šablony – na kalendáři se podle nich akce rozlišují na první pohled.
Text je bílý (vedení spolku schválilo původní vzhled): bílá na #f19c27 má jen ~2:1 a na #ff602e ~3:1,
vědomý dluh vůči A11Y; „Pro členky" (žlutá) zůstává s černým textem, jinak by nebyla čitelná. */
.datumudalosti, .hpkalendar .datumudalosti, .u-badge-date {
display: inline-block;
background: #f19c27; color: #fff;
padding: .4rem .8rem; border-radius: .375rem;
font-size: .75rem; font-weight: 700; line-height: 1;
}
.badge.text-bg-unipa, .badge.text-bg-secondary, .badge.text-bg-warning { padding: .4rem .8rem; font-weight: 600; }
.text-bg-unipa { background: #ff602e !important; color: #fff !important; }
.text-bg-secondary { background: #6c757d !important; color: #fff !important; }
.text-bg-warning { background: #ffc107 !important; color: #000 !important; }
.u-badge-member { background: var(--u-green-soft); color: var(--u-green); } /* „Členky −20 %" */
.badge-container { gap: var(--u-s2); margin: var(--u-s2) 0; }
/* 9) FORMULÁŘE ------------------------------------------------------------ */
/* `.unipa-searchbox__input` je pilulka vyhledávání s vlastním vzhledem */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce .quantity .qty,
.form-control:not(.unipa-searchbox__input), .form-select, .coupon .input-text {
min-height: 44px;
padding: .6rem .8rem;
border: 1px solid var(--u-line-strong) !important;
border-radius: var(--u-r-sm) !important;
background-color: #fff;
font-size: 1rem;
color: var(--u-ink);
}
.woocommerce .quantity .qty { padding: .6rem .4rem; }
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered { line-height: 28px; padding: 0; }
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow { height: 42px; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.form-control:not(.unipa-searchbox__input):focus, .form-select:focus {
border-color: var(--u-orange) !important; box-shadow: var(--u-focus); outline: 0;
}
.woocommerce form .form-row label { font-size: .875rem; font-weight: 500; color: var(--u-ink-2); margin-bottom: var(--u-s1); }
.woocommerce form .form-row { margin-bottom: var(--u-s4); padding: 0; }
.woocommerce-checkout h3 { font-size: 1.375rem; margin: 0 0 var(--u-s4); }
/* 6) KARTY OBSAHU (Odborná sekce, V médiích, Kalendář, Aktuality) --------- */
.obsah-page-in .row > .col.mb-4 { margin-bottom: var(--u-gap) !important; }
.obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)) {
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r-md);
overflow: hidden;
transition: border-color .15s ease, box-shadow .15s ease;
}
.obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)):hover { border-color: var(--u-line-strong); box-shadow: var(--u-shadow-1); transform: none; }
.obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)) > a > img,
.obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)) > img {
display: block; width: 100%;
/* 1.5.6: poměr náhledu obsah_nahledovy-thumb (370×200). Dřívější 3 / 2 ořezával
obrázky po stranách o dalších ~19 % a s nimi text v bannerech akcí. */
aspect-ratio: 370 / 200; object-fit: cover;
border-radius: 0 !important;
}
/* 1.5.6: štítek členství ve výpisech. wp-membership-2 (od 2.7.6x) obaluje štítek do
.wpmc-membership-badge-anchor s inline position:relative kvůli detailu příspěvku,
ale stejné HTML vkládá JS i do karet. Štítek se pak kotvil ke spodku card-body a
karta s overflow:hidden ho ořízla. V kartě obal pozici nedostane, takže se štítek
kotví ke kartě (pravý horní roh), jak plugin pro výpisy počítá. */
/* 1.5.7: na detailu příspěvku plugin vkládá štítek na začátek obsahu do obalu s nulovou
výškou a štítek (position:absolute; top/right 10px z pluginu) visel přes pravý konec
prvního odstavce — podle délky řádku se textu dotýkal. Štítek je teď na vlastním řádku
vpravo nad textem. */
.wpmc-membership-badge-anchor { display: flex; justify-content: flex-end; margin: 0 0 var(--u-s3); }
.wpmc-membership-badge-anchor > .wpmc-membership-badge { position: static; }
.card.wpmc-has-badge { position: relative; }
.card.wpmc-has-badge .wpmc-membership-badge-anchor { position: static !important; display: block; margin: 0; }
.card.wpmc-has-badge .wpmc-membership-badge-anchor > .wpmc-membership-badge { position: absolute; }
.obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)) .card-body { padding: var(--u-s4) var(--u-s5) var(--u-s5); gap: var(--u-s2); }
.obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)) .card-title { margin: 0; font-size: 1.0625rem; line-height: 1.35; font-weight: 600; }
.obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)) .card-title a {
color: var(--u-orange-ink);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)) .datum { font-size: .8125rem; color: var(--u-muted); margin: 0; }
/* perex hned pod datem (dřív margin-top:auto → nestejné mezery) */
.obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)) .card-text { margin-top: 0 !important; }
.obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)) .card-text a { color: var(--u-ink-2) !important; }
.obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)) .card-text,
.obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)) .card-text p {
font-size: .9375rem; line-height: 1.6 !important; margin-bottom: 0 !important;
}
.obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)) .card-text {
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
/* varianta B – teplý podklad, bez okraje (zapíná se třídou body.u-cards-soft; výchozí je A) */
body.u-cards-soft .obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)) { background: var(--u-warm-1); border-color: transparent; padding: var(--u-s3); }
body.u-cards-soft .obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)):hover { background: var(--u-warm-2); box-shadow: none; }
body.u-cards-soft .obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)) > a > img { border-radius: 8px !important; }
body.u-cards-soft .obsah-page-in .row > .col > .card.h-100:has(> a > img, > img):not(.d-flex):not(:has(.wpmc-profile-photo-circle)) .card-body { padding: var(--u-s4) var(--u-s2) var(--u-s2); }
/* postranní panel (Kalendář – záznamy webinářů) */
.aktuality-sidebar { background: var(--u-warm-1); border-radius: var(--u-r-lg); padding: var(--u-s5); }
.aktuality-sidebar .card { border: 0; background: #fff; border-radius: var(--u-r-md); overflow: hidden; }
.aktuality-sidebar .card:hover { transform: none; box-shadow: var(--u-shadow-1); }
.aktuality-sidebar .card-img-top { height: auto; aspect-ratio: 3 / 2; border-radius: 0; }
.aktuality-sidebar .card-text { -webkit-line-clamp: 3; }
/* 7) HOMEPAGE ------------------------------------------------------------- */
.hpkal { border-radius: var(--u-r-lg); padding: var(--u-s5) !important; background: var(--u-warm-1); }
.hpkalendar h3, .hpaktuality h3 { text-transform: none; font-size: 1.5rem; font-weight: 500; }
.hpkalendar h4, .hpaktuality h4 { font-size: 1rem; line-height: 1.4; }
.hpaktuality .card { margin: 0 0 var(--u-s5); }
.hpaktuality a img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--u-r-md); }
.hpaktuality a > img:hover { filter: none; opacity: .88; }
/* 8) E-SHOP --------------------------------------------------------------- */
.custom-cart { border-bottom: 1px solid var(--u-line); padding-bottom: var(--u-s3); margin-bottom: var(--u-s5); }
.cart-count { width: 20px; height: 20px; font-size: .75rem; top: -1px; right: 0; margin-left: 4px; box-shadow: none; }
/* dlaždice kategorií */
.woocommerce ul.products li.product-category a img { aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: var(--u-s3) !important; }
.woocommerce-loop-category__title { font-family: "Montserrat", sans-serif; font-size: 1rem !important; font-weight: 600 !important; color: var(--u-ink); }
.woocommerce-loop-category__title mark.count { background: none; color: var(--u-muted); font-weight: 500; }
/* produktové karty – stejná výška, tlačítko vždy dole */
.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--u-gap); }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
width: auto !important; margin: 0 !important; float: none !important;
display: flex; flex-direction: column; height: 100%;
background: #fff; border: 1px solid var(--u-line); border-radius: var(--u-r-md);
padding: 0 0 var(--u-s4); overflow: hidden;
}
.woocommerce ul.products li.product a img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; margin: 0 0 var(--u-s3) !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
min-height: 0; padding: 0 var(--u-s4) !important; margin: 0 0 var(--u-s2);
font-family: "Montserrat", sans-serif; font-size: 1rem !important; font-weight: 600; line-height: 1.35; color: var(--u-orange-ink);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
height: calc(2 * 1.35em);
}
.woocommerce ul.products li.product .price { padding: 0 var(--u-s4); color: var(--u-ink) !important; font-weight: 600; font-size: .9375rem !important; }
/* poznámka pluginu wp-membership-2 – přebití inline stylu (barva #77a464 má 2,8:1) */
.woocommerce ul.products li.product .membership-note {
display: inline-block; margin-top: var(--u-s2);
padding: .3rem .55rem; border-radius: var(--u-r-sm);
background: var(--u-green-soft); color: var(--u-green) !important;
font-family: "DM Sans", sans-serif; font-size: .75rem !important; font-weight: 600; line-height: 1.2;
}
/* Cena se slevou pro členky ve výpisu: plugin vykresluje u jednoduchého produktu zelený box
(.wpmc-guest-price-compact), u variabilního jen poznámku .membership-note. Ve výpisu obojí
vypadá stejně: cena na řádku + zelený štítek. Věta „mají X % slevu po přihlášení“ zůstává
jen na detailu produktu. */
.woocommerce ul.products li.product .wpmc-member-price,
.woocommerce ul.products li.product .wpmc-guest-price-compact {
display: block; margin: 0 !important; padding: 0 !important;
background: none !important; border: 0 !important; border-radius: 0; box-shadow: none !important;
}
.woocommerce ul.products li.product .wpmc-price-sentence {
display: block; margin: 0; font-size: inherit; line-height: inherit; color: inherit;
}
.woocommerce ul.products li.product .wpmc-price-sentence > strong,
.woocommerce ul.products li.product .wpmc-price-sentence strong {
display: block; color: var(--u-ink); font-weight: 600; font-size: inherit;
}
.woocommerce ul.products li.product .wpmc-member-discount-info {
display: inline-block; margin: var(--u-s2) 0 0; padding: .3rem .55rem; border-radius: var(--u-r-sm);
background: var(--u-green-soft); color: var(--u-green); font-size: .75rem; font-weight: 600; line-height: 1.2;
}
.woocommerce ul.products li.product .wpmc-guest-member-hint { display: none; }
/* Související produkty / podobné: nadpis i karty na střed. Grid se tu mění na flex, aby méně karet
než sloupců zůstalo uprostřed (v gridu by se zarovnaly doleva); šířka karty = jeden ze 4 sloupců. */
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2,
.woocommerce .cross-sells > h2 { text-align: center; }
.woocommerce .related.products ul.products,
.woocommerce .upsells.products ul.products {
display: flex !important; flex-wrap: wrap; justify-content: center;
}
.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product {
flex: 0 1 100%; height: auto; max-width: 100%;
}
@media (min-width: 576px) {
.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product { flex-basis: calc((100% - var(--u-gap)) / 2); max-width: calc((100% - var(--u-gap)) / 2); }
}
@media (min-width: 992px) {
.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product { flex-basis: calc((100% - 3 * var(--u-gap)) / 4); max-width: calc((100% - 3 * var(--u-gap)) / 4); }
}
.woocommerce ul.products li.product .button { margin: auto var(--u-s4) 0 !important; width: auto; }
body.u-cards-soft .woocommerce ul.products li.product { background: var(--u-warm-1); border-color: transparent; padding: var(--u-s3) var(--u-s3) var(--u-s4); }
body.u-cards-soft .woocommerce ul.products li.product a img { border-radius: 8px; }
/* detail produktu */
.woocommerce div.product div.images img { padding: 0; border-radius: var(--u-r-md); }
/* galerie produktu: miniatury s mezerami (obrázky jsou zaoblené, bez mezer na sebe naléhaly) */
.woocommerce div.product div.images .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--u-s2); margin: var(--u-s2) 0 0; padding: 0; }
.woocommerce div.product div.images.woocommerce-product-gallery--columns-3 .flex-control-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce div.product div.images.woocommerce-product-gallery--columns-5 .flex-control-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.woocommerce div.product div.images .flex-control-thumbs li { float: none; width: auto; margin: 0; }
.woocommerce div.product .product_title { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1.2; }
.woocommerce div.product p.price { color: var(--u-ink); font-weight: 600; font-size: 1.375rem; }
.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { padding: 0 0 var(--u-s3); vertical-align: middle; }
/* štítek varianty drží výšku roletky (ne střed buňky, ve které je i skrytý odkaz „Vyčistit“); skrytý odkaz nezabírá místo */
.woocommerce div.product form.cart .variations th.label { vertical-align: top; }
.woocommerce div.product form.cart .variations th.label label { display: block; margin: 0; line-height: 34px; }
.woocommerce div.product form.cart .variations a.reset_variations[style*="hidden"] { display: none; }
.woocommerce div.product form.cart .variations a.reset_variations { display: inline-block; margin-top: var(--u-s1); font-size: .875rem; }
/* Roletky variant: select s dlouhým textem volby („mentolová XL (biobavlna) - poslední kus“) si vynutil
vlastní šířku (auto), tabulka variant se roztáhla za sloupec a stránka přetékala (390 px → 454 px).
Šířka v % dovolí selectu v buňce tabulky zúžit se a ořezat text. */
.woocommerce div.product form.cart .variations { width: 100%; }
.woocommerce div.product form.cart .variations select { width: 100%; min-width: 0; max-width: 100%; margin-right: 0; }
/* Obrázek .alignnone z editoru má v style.css margin-right 20 px; při šířce 100 % mu to na mobilu
přidá 20 px přetečení (inline odkaz kolem obrázku je pak širší než sloupec). */
@media (max-width: 767.98px) {
.alignnone, a img.alignnone { margin-right: 0; }
}
/* dlouhý odkaz / e-mail / URL v popisu produktu se zalomí, místo aby protlačil stránku do šířky */
.woocommerce div.product .woocommerce-tabs .panel { overflow-wrap: anywhere; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; border-bottom: 1px solid var(--u-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 var(--u-s5) 0 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: var(--u-s3) 0; font-weight: 600; color: var(--u-muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--u-ink); box-shadow: inset 0 -2px 0 var(--u-orange); }
.cart .quantity .input-text.qty, .cart .single_add_to_cart_button { height: 44px; border-radius: var(--u-r-sm); }
/* „Členky UNIPA mají slevu až X %" – plugin píše inline #77a464 (2,8:1) */
.woocommerce div.product .member-discount-info { color: var(--u-green) !important; font-weight: 600; }
/* lišta Obchodní podmínky / Odstoupit */
.woocommerce .btn-outline-primary.btn-sm { font-size: .8125rem; }
/* 10) KOŠÍK + POKLADNA ---------------------------------------------------- */
.woocommerce-info, .woocommerce-message, .woocommerce-error {
border: 1px solid var(--u-line) !important; border-top: 1px solid var(--u-line) !important;
background: var(--u-warm-0); color: var(--u-ink-2);
border-radius: var(--u-r-md); padding: var(--u-s4) var(--u-s5) var(--u-s4) 3.25rem;
margin-bottom: var(--u-s4);
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--u-orange); top: 1rem; }
.woocommerce table.shop_table {
border: 1px solid var(--u-line); border-radius: var(--u-r-md);
border-collapse: separate; overflow: hidden; margin-bottom: var(--u-s5);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: var(--u-s4) var(--u-s4); border-top-color: var(--u-line); vertical-align: middle; }
.woocommerce table.shop_table thead th { background: var(--u-warm-0); font-size: .8125rem; font-weight: 600; color: var(--u-muted); text-transform: none; }
.woocommerce table.shop_table td.product-name a { color: var(--u-ink); text-decoration: none; font-weight: 500; }
.woocommerce table.shop_table img { width: 56px; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; }
.woocommerce table.shop_table .order-total th, .woocommerce table.shop_table .order-total td { font-size: 1.125rem; }
.woocommerce a.remove { color: var(--u-muted) !important; font-weight: 400; }
.woocommerce a.remove:hover { background: var(--u-orange-soft) !important; color: var(--u-orange-ink) !important; }
/* „Celkem k platbě" – zrušit béžový pill z .obsah-page-in h2 */
.woocommerce .cart_totals h2, .woocommerce-checkout h3#order_review_heading {
background: none !important; padding: 0 !important; border-radius: 0 !important;
font-size: 1.375rem !important; margin-bottom: var(--u-s4);
}
.woocommerce .cart-collaterals .cart_totals { background: var(--u-warm-1); border-radius: var(--u-r-lg); padding: var(--u-s5); }
.woocommerce .cart-collaterals .cart_totals table.shop_table { background: #fff; }
.woocommerce-cart table.cart td.actions .coupon .input-text { width: 11rem; }
.wc-proceed-to-checkout a.checkout-button { width: 100%; min-height: 52px; font-size: 1rem !important; }
/* doprava – kompaktní volby, menší logo Zásilkovny */
.woocommerce ul#shipping_method li { margin-bottom: var(--u-s2); line-height: 1.45; }
.woocommerce ul#shipping_method li img, .woocommerce-shipping-methods img { max-height: 40px; width: auto; border-radius: 6px; }
.woocommerce ul#shipping_method .button, .packeta-widget-button button { min-height: 36px !important; font-size: .8125rem !important; }
/* Zásilkovna v pokladně: logo a tlačítko v jednom řádku pod názvem dopravy, odsazené od radia;
prázdné odstavce widgetu (adresa, místo, info) nezabírají místo, dokud se nevyplní */
.woocommerce ul#shipping_method li > label { font-weight: 500; }
.woocommerce ul#shipping_method .packetery-widget-button-wrapper { margin: var(--u-s2) 0 var(--u-s2) 1.6rem; }
.woocommerce ul#shipping_method .packeta-widget { margin: 0; padding: 0; }
.woocommerce ul#shipping_method .packetery-widget-button-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s3); }
.woocommerce ul#shipping_method .packetery-widget-button-logo { width: 32px; height: 32px; max-height: none; border-radius: 6px; flex: none; }
.woocommerce ul#shipping_method .packeta-widget-button button { width: auto; margin: 0; padding: 0 var(--u-s4); }
.woocommerce ul#shipping_method .packeta-widget p { margin: var(--u-s2) 0 0; font-size: .875rem; line-height: 1.4; color: var(--u-ink-2); }
.woocommerce ul#shipping_method .packeta-widget p:empty { display: none; }
/* platba */
.woocommerce-checkout #payment { background: var(--u-warm-1) !important; border-radius: var(--u-r-lg) !important; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--u-line) !important; padding: var(--u-s5) !important; }
.woocommerce-checkout #payment ul.payment_methods li { padding: var(--u-s2) 0; line-height: 1.4; }
.woocommerce-checkout #payment ul.payment_methods li img { max-height: 22px; border-radius: 0; vertical-align: middle; }
/* ikony GP webpay (viz unipa_gateway_icon): ořezané PNG bez podkladu, jednotná výška */
.woocommerce-checkout #payment ul.payment_methods li img.unipa-platba-ikona { height: 24px; width: auto; max-height: none; max-width: none; margin: 0 0 0 .75em; padding: 0; vertical-align: middle; }
.woocommerce-checkout #payment ul.payment_methods li.payment_method_gpwebpaygpebinder img.unipa-platba-ikona { height: 22px; }
.woocommerce-checkout #payment ul.payment_methods li.payment_method_gpwebpaygpebinderqrcode img.unipa-platba-ikona,
.woocommerce-checkout #payment ul.payment_methods li.payment_method_gpwebpaygpebinderbankall img.unipa-platba-ikona { height: 26px; }
.woocommerce-checkout #payment div.form-row { padding: var(--u-s5) !important; }
.woocommerce-checkout #payment div.payment_box { background: #fff !important; border-radius: var(--u-r-sm); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff !important; }
#place_order { width: 100%; min-height: 52px; font-size: 1rem !important; float: none !important; }
.woocommerce-terms-and-conditions-wrapper p { font-size: .875rem; line-height: 1.6; }
/* HERO NA HOMEPAGE – původní vzhled tlačítek (vedení spolku schválilo původní) -- */
/* Tlačítka z ACF: pilulka, verzálky, tučně, barva přímo z ACF (inline `!important`
ve front-page.php přebíjí obecné `.btn`), po dvou v řadě (vnější box má inline
`max-width:420px`, třetí tlačítko se zalomí na další řadu) a při najetí zvětšení. */
.hlavicka .btn.text-center {
border-radius: 25px !important;
text-transform: uppercase;
font-weight: 700;
font-size: 1rem;
line-height: 1.5;
min-height: 0;
padding: .8em;
margin: .5em;
border-color: transparent;
transition: transform .2s ease-in-out;
}
.hlavicka .btn.text-center:hover { transform: scale(1.05); }
.hlavicka .text .d-flex { gap: 0; }
/* 11) STRÁNKOVÁNÍ --------------------------------------------------------- */
.pagination, ul.page-numbers { gap: var(--u-s2); }
.pagination .page-link, .page-numbers {
min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--u-line) !important; border-radius: var(--u-r-sm) !important;
margin: 0; color: var(--u-ink-2); font-family: "DM Sans", sans-serif; font-weight: 500;
}
.pagination .page-item.active .page-link, .page-numbers.current { background: var(--u-orange-btn); border-color: var(--u-orange-btn) !important; color: #fff; }
.pagination .page-link:hover { background: var(--u-orange-soft); color: var(--u-orange-ink); border-color: var(--u-orange-soft) !important; }
/* 12) HLAVIČKA, SOCIÁLNÍ LIŠTA, PARTNEŘI, PATIČKA ------------------------- */
.navbar { box-shadow: 0 1px 0 var(--u-line); }
.navbar-nav > .nav-item > .nav-link:hover,
.navbar-nav > .nav-item > .nav-link:focus-visible,
.navbar-nav > .nav-item > .nav-link.show,
.navbar-nav > .nav-item > .nav-link.active,
.navbar-nav > .nav-item.active > .nav-link {
text-decoration: none; box-shadow: inset 0 -2px 0 var(--u-orange);
color: var(--u-orange-ink) !important; /* #ff602e na bílé má 3,0:1 */
}
.dropdown-menu { border-radius: var(--u-r-md); border: 1px solid var(--u-line); box-shadow: var(--u-shadow-1); padding: var(--u-s2); }
.dropdown-item { border-radius: var(--u-r-sm); padding: .5rem .75rem; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active,
.navbar-nav .dropdown-menu .dropdown-item:hover, .navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar-nav .dropdown-menu .dropdown-item.active {
background: var(--u-orange-soft); color: var(--u-orange-ink) !important;
}
/* sociální sítě: beze změny oproti původnímu vzhledu (barevné ikony 47 px, viz style.css).
Monochrom z návrhu se nepřevzal; zmenšení přes width/height navíc ořezávalo SVG bez viewBox. */
.partneri { padding: var(--u-s8) 0 var(--u-s7); border-top: 1px solid var(--u-line); }
.partneri h4, .partneri h2.h4 { font-size: 1.125rem; color: var(--u-muted); font-weight: 500; line-height: 1.2; }
.partneri img { opacity: .7; }
/* Patička: plocha --u-orange-surface (A11Y-2), viz blok na konci souboru */
.navigacni-paticka { padding: var(--u-s7) 0 var(--u-s6); line-height: 1.7; }
.navigacni-paticka h4 { font-size: .8125rem; letter-spacing: .04em; margin-bottom: var(--u-s3); }
.kredity { border-top: 1px solid rgba(255,255,255,.25); font-size: .8125rem; }
/* 13) MOBIL ---------------------------------------------------------------- */
@media (max-width: 767.98px) {
:root { --u-gap: 16px; }
.obsah-page-in .card-body { padding: var(--u-s3) var(--u-s4) var(--u-s4); }
.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .9375rem !important; }
.woocommerce table.shop_table_responsive tr td { padding: var(--u-s2) var(--u-s4); }
.hpkal { border-radius: var(--u-r-md); }
}
/* MAPA PA (page-profily-pa.php) – filtr ------------------------------------ */
/* Popisek „Smlouva s pojišťovnou pro okres:" se na užším displeji zalomí na dva
řádky; s výchozím `align-items: stretch` pak třetí roletka sedí níž než první
dvě. Všechny prvky řádku se zarovnají ke spodní hraně (s tlačítkem Filtrovat). */
.profily-filter form > .row { align-items: flex-end; }
/* v1.5.3: dvě skupiny filtru (kraj × smlouva s pojišťovnou). Obě mají stejné odsazení
a rámeček (u první průhledný), liší se jen podkladem — jinak by roletky neseděly na
jedné čáře. Skupiny se natáhnou na stejnou výšku a roletky se odsunou ke spodní hraně,
i když se nadpis druhé skupiny zalomí. */
.profily-filter form > .row > [class*="col-lg"] { align-self: stretch; }
/* Rámeček a podklad nese obal, ne