/*
Theme Name: Boem 27
Author: Ales Boem
Description: Nová vylepšená šablona s pill designem, spodní bar ve skleněném (Apple-like) stylu
Text Domain: boem27
*/
/* ==============================================
1. FONT A ZÁKLADNÍ PROMĚNNÉ
Light řez (raptor-l.otf) je pryč, všechno teď jede na
raptor.otf (regular). 'ra' i 'ra-display' ukazují na
stejný soubor — 'ra-display' zůstává zapsaný jen proto,
že se na něj odkazuje spousta selektorů níž v souboru
(VELKÁ TYPOGRAFIE, Studio V2 atd.), ale fakticky už jde
o duplicitu, žádný rozdíl ve vzhledu to nedělá.
Proč ne přes font-weight: v souboru je přes dvacet pravidel
s natvrdo nastavenou vahou 400, 500 nebo normal. Kdyby se
řez vybíral podle váhy, muselo by se přepsat každé z nich
a každé budoucí pravidlo by na to muselo myslet. Takhle je
výchozí stav jeden řez a případný jiný se přidává jen tam,
kde se vyjmenuje.
Každý soubor je zapsaný pro váhy 200, normal i 500, aby ho
prohlížeč použil přímo a nedopočítával si ztučnění sám.
raptor-bold a raptor-boem zůstávají vypnuté.
============================================== */
/* @font-face { font-family: 'ra'; src: url('https://boem.co/webfont/raptor-bold.otf') format('opentype'); font-weight: 600; font-style: normal; } */
/* @font-face { font-family: 'ra'; src: url('https://boem.co/webfont/raptor-boem.otf') format('opentype'); font-weight: 900; font-style: normal; } */
@font-face { font-family: 'ra'; src: url('https://boem.co/webfont/raptor.otf') format('opentype'); font-weight: 200; font-style: normal; }
@font-face { font-family: 'ra'; src: url('https://boem.co/webfont/raptor.otf') format('opentype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'ra'; src: url('https://boem.co/webfont/raptor.otf') format('opentype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'ra-display'; src: url('https://boem.co/webfont/raptor.otf') format('opentype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'ra-display'; src: url('https://boem.co/webfont/raptor.otf') format('opentype'); font-weight: 500; font-style: normal; }
:root {
/* Šedá místo černé — spodní plovoucí bar, tlačítko filtru vedle
něj, sjednocená tlačítka webu (sekce na konci souboru), a teď
i každé dřívější čistě černé "black"/#000/#000000 v souboru
(odkazy, zvýraznění aktivní lekce v kurzu atd.) — všechno vede
přes tyhle dvě proměnné, takže se odstín mění na jednom místě.
--boem-gray-dark je teď záměrně "tmavá šedá", ne skoro černá;
--boem-gray (výchozí/světlejší stav) je citelně světlejší. */
--boem-gray: #6e6e73;
--boem-gray-dark: #3a3a3e;
/* Pro bílý/skleněný spodní pill: černá, ale průhledná, místo
plné šedé — čitelnější na skle a víc "liquid glass". */
--boem-glass-ink: rgba(0, 0, 0, 0.5);
--boem-glass-ink-strong: rgba(0, 0, 0, 0.85);
/* Tenké linky (stroke, fill="none" — např. držadlo tašky,
ouška u zámku) při stejném krytí jako plná plocha opticky
vždycky vypadají tmavší/výraznější, i když je to technicky
stejná currentColor. Mají proto vlastní, nižší krytí, ať
vizuálně "váží" stejně jako vyplněné tvary vedle nich. */
--boem-glass-ink-line: rgba(0, 0, 0, 0.35);
--boem-glass-ink-line-strong: rgba(0, 0, 0, 0.6);
--large-size: 50px;
--medium-size: 14px;
--normal-size: 14px;
--small-size: 12px;
--huge-size: 50px;
}
/* ==============================================
2. HLAVNÍ STRUKTURA A RESET
============================================== */
html, body { max-width: 100% !important; background-color: #efefef; }
body { font-family: "ra", sans-serif; margin: 0; padding: 0; }
a, button, .course-tree a, .nav a, .menu a, [role="button"] { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, fill 0.3s ease; }
a { text-decoration: none; color: var(--boem-gray-dark); }
ul { margin: 0px; padding: 0px; list-style: none; }
sup { line-height: 70%; }
.bold { font-weight: bold; }
.underline { border-bottom: 1px solid var(--boem-gray-dark); }
.color { color: blue; }
.float { float: left; }
.strike { opacity: 0.1 !important; }
.button {border-radius: 20px !important; text-align: center !important; font-weight: 500 !important}
/* Typografie */
h1 { font-size: var(--large-size); font-weight: 400; }
h2 { font-size: 14px; font-weight: 400; }
h3 { font-size: 14px; font-weight: normal; margin-top: 1.5em; margin-bottom: 0.5em; }
h6 { font-size: 14px; }
h2.has-huge-font-size { letter-spacing: -0.05em; margin-bottom: 0px !important; margin-top: 0px !important; }
.has-extra-small-font-size { font-size: 14px; }
.has-huge-font-size { font-size: 48px; }
/* Backgrounds & Colors */
.has-dark-gray-background-color { background-color: #111111; }
.has-yellow-background-color { background-color: #FFF500; padding: 0px none !important; }
.has-gray-background-color { background-color: #efefef; }
.has-white-background-color { background-color: #FFF; }
.post .has-blue-color { color: blue; }
/* ==============================================
3. MENU, HLAVIČKA, OVERLAY A RIGHT BLOK
============================================== */
#boem { font-size: 14px; font-weight: normal; margin-top: 0px; background-color: #efefef; }
#header { font-size: 35px; width: 100%; z-index: 2; position: fixed; left: 0; top: 0; margin: 30px 0 50px 0; }
/* Kontejner - drží pozici, ale už neblenduje */
.logo, #logo {
position: fixed;
left: 50%;
transform: translateX(-50%);
top: 25px;
/* Nad overlayem menu a filtru (Slidebars jim dává z-index 9999),
pod spodním barem (9999999). Logo je v header.php mimo
[canvas=container], takže se porovnává přímo s panely. */
z-index: 10000;
width: 75px;
background: transparent; /* Jistota */
/* mix-blend-mode: difference odstraněn */
/* Stín musí být tady, na HTML kontejneru, ne na cestách uvnitř SVG:
filtr na SVG elementu se ořezává na ohraničující obdélník tvaru
plus 10 %, takže se z rozostřeného stínu skoro nic nevykreslí.
Zároveň je oproti spodnímu baru mnohem těsnější. Bar je 50px
vysoká plocha, tam se 32px rozostření rozprostře a je vidět;
dříky loga mají pár pixelů a takový stín se na nich rozředí
do neexistence. Rozostření musí odpovídat tloušťce tvaru. */
filter: var(--logo-shadow);
}
/* Samotné SVG - tady se děje magie */
.logo svg {
display: block;
width: 100%;
height: auto;
overflow: visible; /* Aby se rozjetá písmena neořízla */
}
/* --- Logo ---------------------------------------------------------------
Bez obrysu, jen poloprůhledná bílá výplň a stín.
Vlastní proměnné, ať jde ladit nezávisle na nadpisech. */
:root {
--logo-a: 0.7; /* krytí výplně */
/* Těsný kontaktní stín. Vypneš hodnotou 'none'. */
--logo-shadow: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.logo svg path,
.logo svg g, .logo svg polygon {
fill: #ffffff;
fill-opacity: var(--logo-a);
stroke: none;
/* Stín sedí na kontejneru .logo, ne tady — viz komentář výše. */
transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}
/* Animace rozjezdu při hoveru na odkaz */
.logo a:hover #b { transform: translateX(-16px); }
.logo a:hover #o { transform: translateX(-6px); }
.logo a:hover #e { transform: translateX(6px); }
.logo a:hover #m { transform: translateX(18px); }
/* Odstranění zbytků starého stylu */
.logo img { display: none; } /* Kdyby tam náhodou zbyl starý tag */
/* Pravý blok a Hamburger */
#rght { position: fixed; z-index: 1002; width: 100%; right: 0; top: 0; height: 75px; background-color: #efefef; }
/* Boční padding 20px byl pryč: dřív posouval text hlavního menu o 20px
proti filtru, a ve sloupci na středu by rozhodil levou hranu. */
#rght a { font-family: var(--global--font-secondary); font-size: 16px; border-radius: 16px; display: block; padding: 5px 0; margin-bottom: 3px; }
#rght .menu-item-description { display: none; }
.flexmenu {
/* Omezí výšku menu na velikost obrazovky MÍNUS těch 75px hlavičky */
max-height: calc(100vh - 120px);
/* Povolí scrollování POUZE uvnitř samotného menu */
overflow-y: auto;
overflow-x: hidden;
}
#user { width: 30px; position: fixed; z-index: 1002; }
#kosik {display:none !important; width: 40px; position: fixed; z-index: 1002; text-align: right !important; mix-blend-mode: difference;}
#kosik img { filter: invert(1); }
/* Overlay menu (Sjíždí shora) */
.overlay { height: 0; width: 100%; border-bottom: solid 1px #ccc; position: fixed; z-index: 1; left: 0; top: 0; background-color: rgba(255,255,255, 0.95);
overflow-y: auto;
overflow-x: hidden; transition: 0.4s; }
.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; }
#closemenu { display: none; }
#mainmenu { display: inline-block; position: fixed; left: 81px; top: 33px; width: 90%; z-index: 1005; }
.menu-head { font-size: 16px; margin-left: 20px; margin-bottom: 15px; color: #666; }
.sub-menu-toggle, .menu-item-description { display: none; }
.odsazeno .sub-menu { padding-top: 10px !important; }
/* Side menu / Flexmenu — jeden sloupec na středu stránky
Dřív flex vedle sebe (hlavní menu vlevo, vedlejší vpravo), teď pod sebou.
Grid s jedinou stopou minmax(0, max-content): sloupec je široký jako
nejdelší položka a justify-content: center ho postaví doprostřed.
Hlavní menu i vedlejší pod ním sdílí jednu levou hranu, text zůstává
zarovnaný vlevo. Když se nejdelší položka nevejde, stopa se zúží
a text se zalomí, místo aby přetekl.
.flexmenu samo zůstává přes celou šířku panelu, takže se menu dá
scrollovat kolečkem kdekoli, ne jen nad textem. Název třídy zůstal
kvůli markupu v footer.php, i když už to flex není. */
.side-menu-container, .side-menu-rest { margin-bottom: 30px; }
.side-menu-tags { display: block; }
.flexmenu {
display: grid;
grid-template-columns: minmax(0, max-content);
justify-content: center;
padding: 30px;
}
/* Vyhledávání */
.boem-search { display: none; }
.search-products a { text-decoration: none !important; }
/* ==============================================
4. WOOCOMMERCE A OBCHOD
============================================== */
.stock {display: none}
.single-product .up-sells { display: none; }
.singleproduct-boem { background-color: #efefef; }
.woocommerce .product { margin: 0px 0px 30px 0px; }
.wc-block-grid__product-title { font-weight: 500 !important; font-size: var(--normal-size) !important; }
.wc-block-grid__product-onsale { display: none !important; }
.woocommerce-Price-amount, .ayudawp-prefix {font-size: 14px}
.posted_in { display: none; }
.variations tr { margin-bottom: 15px !important; border-spacing: 10px !important; }
.woocommerce-info {border: 0 !important; background-color: white !important; margin-right: 30px}
.woocommerce-info::before {display: none !important}
/* ==============================================
DOČASNÉ SKRYTÍ MNOŽSTVÍ (QUANTITY) V KOŠÍKU
============================================== */
.woocommerce-cart table.cart th.product-quantity,
.woocommerce-cart table.cart td.product-quantity {
display: none !important; width: 1px !important; padding: 0; margin: 0;
}
/* ==============================================
WOOCOMMERCE - DETAIL PRODUKTU (TEXTY, CENY, VARIACE, TLAČÍTKA)
============================================== */
/* ==============================================
OBŘÍ KRÁTKÝ POPIS PRODUKTU (Jako Huge Font Size)
============================================== */
/* Základní velikost (od 481px do 799px) */
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p {
font-size: 48px !important;
letter-spacing: -0.05em;
line-height: 1.1 !important; /* Mírně stažené řádkování, aby to u obřích textů vypadalo kompaktně */
font-weight: 400;
margin-top: 0;
}
/* Mobilní telefony (do 480px) */
@media (max-width: 480px) {
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p {
font-size: 34px !important;
}
}
/* Tablety a menší monitory (od 800px) */
@media (min-width: 800px) {
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p {
font-size: 70px !important;
}
}
/* Velké obrazovky a iMac (od 1400px) */
@media (min-width: 1400px) {
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p {
font-size: 96px !important;
letter-spacing: -2px !important; /* Větší smrsknutí písmen pro extra velký text, přesně podle vašeho kódu */
}
}
.woocommerce div.product div.summary {
float: none !important;
width: calc(100% - 60px);
padding: 30px
}
.related {display: none}
/* 1. NADPIS (TITLE) A META INFORMACE */
.woocommerce div.product .product_title {
font-size: var(--large-size);
margin-bottom: 6px;
width: auto;
}
.product_meta {
margin-bottom: 6px;
}
/* 2. CENA (PRICE) A ZLEVNĚNÉ CENY */
.woocommerce div.product p.price,
.single-product .woocommerce-Price-amount {
font-family: var(--global--font-primary);
color: var(--boem-gray-dark);
font-size: 13px;
margin-top: 0px;
}
.entry-summary p.price {
display: block;
font-weight: normal !important;
}
/* Zvýraznění akční ceny (ins) */
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
font-weight: 500 !important;
}
/* 3. VÁŠ VLASTNÍ POPIS PRODUKTU (BOEM DESCRIPTION) */
.product-description-boem {
font-size: var(--normal-size);
margin-bottom: 50px;
max-width: 800px;
}
.product-description-boem a {
text-decoration: none;
}
.product-description-boem p {
line-height: 25px !important;
}
/* Skrytí popisu pro "Private" produkty */
.Private .product-description-boem {
display: none;
}
/* 4. VARIABILNÍ PRODUKTY (VÝBĚR VARIACÍ) */
.woocommerce div.product form.cart .variations {
margin-bottom: 6px;
}
.variations tr {
margin-bottom: 15px !important;
border-spacing: 10px !important;
}
.variations td {
padding: 0px !important;
}
/* Štítky u variací */
.woocommerce div.product form.cart .variations label {
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Výběrová pole (Select) pro variace */
.woocommerce div.product form.cart .variations select {
width: auto;
background-color: white;
min-width: 0;
background-position: right 1rem top 50%;
}
/* Cena zobrazená po výběru konkrétní variace */
.woocommerce-variation-price {
font-size: 18px;
width: auto;
float: none;
text-align: left;
display: block;
padding: 5px 0px 12px 0px;
}
.woocommerce-variation-price .woocommerce-Price-amount {
float: none !important;
font-size: 17px !important;
}
/* Tlačítko pro resetování vybraných variací (např. 'Vymazat') */
.woocommerce div.product form.cart .reset_variations {
display: none !important;
}
/* 5. TLAČÍTKA "PŘIDAT DO KOŠÍKU" (ADD TO CART) */
.single_boem_button {
width: auto;
font-size: var(--normal-size);
margin-bottom: 15px;
padding: 5px 15px;
border-radius: 15px;
background-color: var(--light-blue) !important;
color: white !important;
border: 0px !important;
transition: all 0.3s ease;
}
.single_boem_button:hover {
background-color: white !important;
color: blue !important;
}
/* 6. DROBNÉ ÚPRAVY CEN V PRODUKTOVÝCH BLOCÍCH A HLEDÁNÍ */
.woocommerce ul.products li.product .price ins {
font-weight: normal;
font-size: 16px;
color: #666;
}
.wc-block-grid__product-price {
text-align: center ;
font-size: var(--small-size);
text-decoration: none;
}
.woocommerce ul.products li.product .price {
text-align: left !important;
font-size: var(--small-size);
text-decoration: none;
}
.page .price,
.search-products .price {
font-size: 12px !important;
color: var(--boem-gray-dark) !important;
}
/* Formuláře, Selecty a Tlačítka */
input { background-color: #efefef; border: 0px; border-bottom: 1px solid #CCC; height: 35px; }
select { border: 0px; border-radius: 15px; font-size: var(--normal-size); -moz-appearance: none; -webkit-appearance: none; appearance: none; padding: 6px 15px; background-color: rgb(224, 224, 224); background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 0rem top 50%; background-size: 0.65rem auto; }
select:focus { outline-offset: 2px; outline: 0px; }
.woocommerce form .form-row .input-text, .woocommerce form .form-row select { border: 0px !important; }
.qib-button:not(#qib_id):not(#qib_id) { border: 0px none !important; background-color: #efefef !important; border-radius: 15px !important; }
.qib-button:not(#qib_id):not(#qib_id):hover { background-color: #fff !important; }
.qib-container .quantity input.qty:not(#qib_id):not(#qib_id) { border: 0px none !important; }
#place_order { font-weight: bold !important; border-radius: 30px; background-color: blue; color: white; margin-top: 20px !important; padding: 15px 25px; width: 100%; }
#place_order:hover { background-color: var(--boem-gray-dark) !important; }
.edit-link {display: none}
/* Košík a Bannery */
.cart-contents-count { margin-top: -5px; }
.woocommerce-cart-form__cart-item .product-thumbnail img { margin-right: 20px !important; }
.wc-block-components-notice-banner { padding: 10px !important; border-radius: 20px !important; text-align: center; }
.wc-block-components-notice-banner.is-success { border: 0px; background-color: green !important; color: white; }
.wc-block-components-notice-banner.is-error { border: 0px; background-color: red !important; }
.wc-block-components-notice-banner.is-info { border: 0px; background-color: #efefef !important; }
.wc-block-components-notice-banner svg { display: none; }
.woocommerce .cross-sells ul.products li.product { margin: 0 30px 30px 0 !important; }
.woocommerce table.shop_table_responsive tbody th, .woocommerce-page table.shop_table_responsive tbody th { display: block; }
.woocommerce table.shop_table_responsive .product-price, { display: none; }
.woocommerce-terms-and-conditions-wrapper { margin-top: 50px; }
.wp-block-woocommerce-add-to-cart-form form.cart>* { grid-column: none !important; }
.wmc-currency select { width: 70px; background-color: #efefef; }
.wmc-currency a { padding: 2px 10px !important; text-transform: lowercase; }
/* ==============================================
ODSAZENÍ OBSAHU OD FIXNÍHO SPODNÍHO BARU (Oprava)
============================================== */
/* Zacílení přímo na samotné tělo stránky (Body) a hlavní WooCommerce kontejner */
.cart-collaterals {
padding-bottom: 120px !important;
}
/* Kdybyste to náhodou potřeboval i pro detail produktu nebo všechny stránky, stačí odkomentovat toto: */
/*
.single-product .site-content,
.page .site-content {
padding-bottom: 120px !important;
}
*/
/* ==============================================
WOOCOMMERCE - KOMPLETNÍ KOŠÍK (CART)
============================================== */
/* Zobrazení a struktura hlavních prvků */
.woocommerce-cart-form { max-width: 980px; margin: auto; }
.woocommerce .cart-collaterals, .woocommerce-page .cart-collaterals { max-width: 980px; margin: auto; }
.cart-contents-count { margin-top: -5px; }
.cart-contents { margin-top: 10px; }
.cart-empty, .return-to-shop { margin-left: 30px; }
.coupon label { display: none; }
.woocommerce-form-coupon-toggle { margin-left: 0px; }
.cart_totals h2 { display: none; }
/* ----------------------------------------------
TABULKA KOŠÍKU (Shop Table)
---------------------------------------------- */
.woocommerce table.shop_table { border: 0px none; }
.woocommerce table.shop_table th { padding: 10px 0px !important; }
.woocommerce table.shop_table td { padding: 10px 0px !important; border-top: 0 !important; }
.woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th { border: 0px none !important; font-weight: normal; }
.woocommerce table.shop_table_responsive tr td, .woocommerce-page table.shop_table_responsive tr td { text-align: left; }
.woocommerce table.shop_table_responsive tbody th, .woocommerce-page table.shop_table_responsive tbody th { display: block; }
/* 1. Odstranění bílého pozadí a zebrování ze všech Woo tabulek */
.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce table.shop_table tr,
.woocommerce table.shop_table tbody,
.woocommerce-page table.shop_table_responsive tr,
.woocommerce-page table.shop_table_responsive tr:nth-child(2n) {
background-color: transparent !important;
background: transparent !important;
}
/* Zarovnání cen a totals doprava */
.cart-subtotal td, .order-total td, .product-total, .shipping td { text-align: right !important; }
/* Fotky v košíku - Fixní šířka 200px */
.woocommerce-cart-form .product-thumbnail { width: 200px; }
.woocommerce-cart-form__cart-item .product-thumbnail img { margin-right: 20px !important; }
.woocommerce table.cart img, .woocommerce #content table.cart img, .woocommerce-page table.cart img, .woocommerce-page #content table.cart img {
width: 200px !important;
height: auto !important;
}
/* Skrytí produktového množství v košíku (vaše úprava) */
.cart_item .product-quantity { display: none; }
/* Tlačítko pro odstranění z košíku (křížek) */
.product-remove { text-align: right !important; }
.woocommerce a.remove { font-weight: normal; color: var(--boem-gray-dark) !important; display: inline-block; }
/* Pole a vstupy (Inputs/Coupons) v tabulce */
.woocommerce table.cart td.actions .input-text,
.woocommerce-page #content table.cart td.actions .input-text,
.woocommerce-page table.cart td.actions .input-text {
width: calc(100% - 170px);
height: 35px;
background: #efefef;
border-bottom: 0px !important;
color: var(--boem-gray-dark) !important;
}
/* ----------------------------------------------
CROSS-SELLS (Doporučené produkty pod košíkem)
---------------------------------------------- */
.woocommerce .cart-collaterals .cross-sells, .woocommerce-page .cart-collaterals .cross-sells { width: 100%; }
.woocommerce .cart-collaterals .cross-sells ul.products li, .woocommerce-page .cart-collaterals .cross-sells ul.products li { width: 15%; }
.woocommerce .cross-sells ul.products li.product { margin: 0 30px 30px 0 !important; }
/* ----------------------------------------------
RESPONZIVITA PRO KOŠÍK
---------------------------------------------- */
/* PC Breakpoint (Vytvoření místa pro totals vedle košíku) */
@media only screen and (min-width: 600px) {
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: none; width: auto; margin-left: 200px; }
}
/* Tablet a střední mobil Breakpoint (Předělání tabulky na řádky) */
@media only screen and (max-width: 768px) {
.woocommerce table.shop_table_responsive tr td, .woocommerce-page table.shop_table_responsive tr td { display: table-cell; }
.woocommerce table.shop_table_responsive tr .product-name, .woocommerce-page table.shop_table_responsive tr .product-name { display: table-cell; text-align: left !important; }
.woocommerce table.shop_table_responsive tr, .woocommerce-page table.shop_table_responsive tr { display: table-row; width: 100%; }
.woocommerce table.shop_table_responsive tr:nth-child(2n) td, .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td { background-color: transparent; }
.woocommerce table.shop_table_responsive thead, .woocommerce-page table.shop_table_responsive thead { display: table-header-group; }
/* Váš CSS trik pro odstranění výchozích labelů z mobilní tabulky */
.woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before { display: none; }
.woocommerce-cart-form__cart-item td::before { display: none !important; }
}
/* Úplně nejmenší mobil Breakpoint */
@media (max-width: 480px) {
/* Úprava šířky produktů v cross-sells aby na mobilu byly dva */
.woocommerce .cart-collaterals .cross-sells ul.products li, .woocommerce-page .cart-collaterals .cross-sells ul.products li { width: calc(49% - 30px) !important; }
}
/* 2. Oprava odsazení tlačítka "Proceed to checkout" na mobilech */
@media (max-width: 480px) {
.woocommerce-cart .wc-proceed-to-checkout {
padding-right: 30px !important; /* Odsazení od pravého okraje */
padding-left: 30px !important; /* Pro jistotu i zleva, aby to bylo symetrické */
box-sizing: border-box !important;
width: 100% !important;
}
/* Zajištění, že samotné tlačítko nepřeteče obal */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
}
/* ==============================================
WOOCOMMERCE - KOMPLETNÍ POKLADNA (CHECKOUT)
============================================== */
/* 1. HLAVNÍ STRUKTURA A ROZLOŽENÍ */
.woocommerce-checkout {
padding-bottom: 120px;
}
.woocommerce .checkout {
font-size: var(--small-size);
margin: 0px;
}
.checkout h3 {
font-size: 1.6rem;
letter-spacing: var(--heading--letter-spacing-h2);
padding: 15px 0px 20px 0px;
}
#order_review_heading {
padding-top: var(--global--spacing-vertical);
}
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
border: 0px;
}
/* Skrytí newsletteru v pokladně (Mailchimp) */
.woocommerce-billing-fields .mailchimp-newsletter {
display: none;
}
/* 2. FORMULÁŘOVÁ POLE (INPUTS & SELECTS) */
.checkout input {
font-size: var(--normal-size);
padding-top: 10px;
}
.checkout select {
background-color: #efefef;
padding: 15px 0px 5px !important;
border-bottom: 1px solid #CCC;
}
#billing_country {
border-radius: 0px !important;
}
/* 3. TLAČÍTKO "OBJEDNAT" (PLACE ORDER) */
/* Sjednoceno přes standardní ID i vaši custom třídu */
#place_order,
.single_boem_button_checkout,
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
font-size: var(--normal-size);
min-width: 270px;
width: 100%; /* Sjednoceno na 100% podle mobilních pravidel */
margin-top: 20px !important;
margin-bottom: 20px;
padding: 15px 25px;
background-color: blue !important;
color: white !important;
border: 0px;
border-radius: 30px; /* Použijeme hezčí, více kulaté (původně bylo 21px nebo 30px) */
float: none !important;
transition: background-color 0.3s ease;
}
#place_order:hover,
.single_boem_button_checkout:hover {
background-color: var(--boem-gray-dark) !important;
}
/* ==============================================
DISCOUNT / COUPON BAR VE STYLU "PILL" (ULTIMÁTNÍ FIX)
============================================== */
/* 1. Obal kupónu (Zacíleno přesnými selektory šablony) */
.woocommerce table.cart td.actions .coupon,
.woocommerce-page #content table.cart td.actions .coupon,
.woocommerce form.checkout_coupon,
.woocommerce-page form.checkout_coupon {
display: flex !important;
align-items: center !important;
background-color: #ffffff !important;
border-radius: 50px !important;
padding: 4px 6px !important;
width: 100% !important;
border: none !important;
margin: 0 auto 24px auto !important;
box-sizing: border-box !important;
float: none !important;
}
/* 2. Skrytí zbytečností (štítky, nápisy a odstavce) */
.woocommerce table.cart td.actions .coupon label,
.woocommerce form.checkout_coupon p:first-child,
.woocommerce form.checkout_coupon .clear {
display: none !important;
}
.woocommerce form.checkout_coupon p.form-row {
margin: 0 !important;
padding: 0 !important;
border: none !important;
display: block !important;
width: auto !important;
float: none !important;
flex: 1 1 0% !important;
}
/* 3. Textové pole (Přebití šedého pozadí a šířky z šablony) */
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce-page #content table.cart td.actions .input-text,
.woocommerce form.checkout_coupon input.input-text {
width: 100% !important;
flex: 1 1 0% !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--boem-gray-dark) !important;
padding: 0 16px !important;
font-family: 'ra', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
outline: none !important;
height: 34px !important;
margin: 0 !important;
min-width: 0 !important;
}
.woocommerce table.cart td.actions .coupon .input-text::placeholder,
.woocommerce form.checkout_coupon input.input-text::placeholder {
color: #999999 !important;
opacity: 1 !important;
}
/* 4. Tlačítko (Přebití bílé/šedé barvy a fixní šířky) */
.woocommerce table.cart td.actions .coupon .button,
.woocommerce-page #content table.cart td.actions .button,
.woocommerce form.checkout_coupon button.button {
background-color: var(--boem-gray-dark) !important;
color: #ffffff !important;
height: 34px !important;
border-radius: 40px !important;
padding: 0 20px !important;
font-family: 'ra', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
border: none !important;
margin: 0 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-transform: none !important;
width: auto !important;
float: none !important;
transition: background-color 0.3s ease, transform 0.2s ease !important;
}
/* Hover a klikací efekt */
.woocommerce table.cart td.actions .coupon .button:hover,
.woocommerce form.checkout_coupon button.button:hover {
background-color: #333333 !important;
color: #ffffff !important;
}
.woocommerce table.cart td.actions .coupon .button:active,
.woocommerce form.checkout_coupon button.button:active {
transform: scale(0.96) !important;
}
/* 4. BLOK S PLATEBNÍMI METODAMI (PAYMENT BOX) */
.woocommerce-checkout #payment {
background: transparent;
}
/* Samotné položky (Radio buttons pro platbu) */
.woocommerce-checkout #payment ul.payment_methods {
padding: 0px;
border-bottom: 0px;
}
.woocommerce-checkout #payment ul.payment_methods li input {
margin: 0px !important;
}
/* Vnitřní rámeček (box) pro zadání platebních údajů */
.woocommerce-checkout #payment div.payment_box {
background-color: #f7f7f7;
border-radius: 20px;
max-width: 700px;
padding: 30px;
}
/* Skrytí ošklivé šipky z výchozího Woo designu */
.woocommerce-checkout #payment div.payment_box::before {
display: none;
}
.woocommerce-checkout #payment div.payment_box fieldset {
border: 0px none;
}
.woocommerce-checkout #payment div.form-row {
padding: 0px !important;
}
/* 5. SPECIFICKÁ PRAVIDLA PRO STRIPE (Platba kartou) */
/* Skrytí ikonek karet od Stripe */
.woocommerce-checkout #payment ul.payment_methods li .stripe-credit-card-brand {
display: none !important;
}
/* Stylování Stripe políček pro zadání čísla karty */
.wc-stripe-elements-field {
border: 0px !important;
padding: 10px !important;
}
/* Box pro novou metodu u Stripe */
#wc-stripe-new-payment-method {
padding-left: 25px;
background: white;
}
/* Videa a galerie v produktech */
.rsfv-has-video video.rsfv-video, .rsfv-has-video iframe.rsfv-video { aspect-ratio: auto !important; }
.woocommerce ul.products li.product .woocommerce-product-gallery__image video.rsfv-video, .woocommerce div.product div.woocommerce-product-gallery figure.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image video.rsfv-video, .woocommerce ul.products li.product .woocommerce-product-gallery__image iframe.rsfv-video, .woocommerce div.product div.woocommerce-product-gallery figure.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image iframe.rsfv-video { aspect-ratio: 3/4 !important; object-fit: cover; border-radius: 20px; margin: 0 0 1em; }
.product-video-cover { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.product-video-cover video, .product-video-cover img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 100vh; object-fit: cover; z-index: 1; }
.video-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; text-align: center; z-index: 2; }
/* ==============================================
5. SPECIFICKÁ ID PŘÍSPĚVKŮ A CUSTOM OVERRIDES
============================================== */
.post-5285 .entry-title, .post-4660 .entry-title, .post-5583 .entry-title, .post-3582 .entry-title, .post-0 .entry-title { display: none; }
.post-5285 .wp-block-button a { background-color: var(--boem-gray-dark); }
.post-5285 .wp-block-button a:hover { color: white; background-color: blue; }
.type-post .entry-content { margin-top: 0px; }
.type-page .entry-content { margin-top: 90px; }
.type-post .wp-block-columns p { margin-block-start: 0px !important; }
#customer_login h2 { font-weight: 700; }
.businessaccount { font-weight: bold; margin-bottom: 15px; margin-top: 15px; pointer-events: none; }
/* ==============================================
6. POSTY
============================================== */
/* --- CATEGORIES POSTS --- */
/* ==============================================
COVER NADPISY H1, H2 a PRODUCT TITLE (Stejné jako Huge)
============================================== */
/* Základní velikost (pro obrazovky mezi 481px a 799px) */
.type-post .wp-block-cover h1,
.type-post .wp-block-cover h2,
.single-product .wp-block-cover h1,
.single-product .product-title,
.single-product .product_title {
font-size: 48px !important;
letter-spacing: -0.05em !important;
line-height: 1.1 !important;
font-weight: 400 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Mobilní telefony (do 480px) */
@media (max-width: 480px) {
.type-post .wp-block-cover h1,
.type-post .wp-block-cover h2,
.single-product .wp-block-cover h1,
.single-product .product-title,
.single-product .product_title, .boem-front-cover h2{
font-size: 34px !important;
}
}
/* Tablety a menší monitory (od 800px do 1399px) */
@media (min-width: 800px) {
.type-post .wp-block-cover h1,
.type-post .wp-block-cover h2,
.single-product .wp-block-cover h1,
.single-product .product-title,
.single-product .product_title {
font-size: 70px !important;
}
}
/* Velké obrazovky (od 1400px výše) */
@media (min-width: 1400px) {
.type-post .wp-block-cover h1,
.type-post .wp-block-cover h2,
.single-product .wp-block-cover h1,
.single-product .product-title,
.single-product .product_title {
font-size: 96px !important;
letter-spacing: -2px !important;
}
}
/* 1. Main container – Reset margins and 30px symmetry */
.archive-staggered-layout {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
margin: 120px 0 40px 0 !important;
padding: 0 30px !important; /* Symmetrical padding */
box-sizing: border-box !important;
}
/* 2. */
.archive-staggered-layout .archive-products {
display: flex !important;
width: 100% !important;
margin: 0 0 120px 0;
}
.archive-staggered-layout .entry-footer {display: none}
/* Alternating layout logic */
.archive-staggered-layout .archive-products:nth-child(3n+1) { justify-content: flex-end !important; }
.archive-staggered-layout .archive-products:nth-child(3n+2) { justify-content: flex-start !important; }
.archive-staggered-layout .archive-products:nth-child(3n) { justify-content: center !important; }
/* 3. Product card */
.archive-staggered-layout .archive-products article {
width: 100% !important;
max-width: min(55vh, 800px) !important;
position: relative !important;
margin: 0 !important;
line-height: 0 !important;
overflow: hidden !important;
}
/* 4. Media and blur effect (Speed 0.1s) */
.archive-staggered-layout .post-img-link {
display: block !important;
width: 100% !important;
aspect-ratio: 3 / 4 !important;
position: relative !important;
overflow: hidden !important;
}
.archive-staggered-layout .post-img-link img,
.archive-staggered-layout .post-img-link video {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: filter 0.1s ease-in-out !important; /* SPEED 0.1s */
backface-visibility: hidden;
will-change: filter;
/* Scroll-driven zaostřování — hodnotu píše JS (boem_scroll_blur_js)
podle vzdálenosti od středu obrazovky. Bez JS zůstává ostré. */
filter: blur(var(--boem-scroll-blur, 0px)) !important;
}
:root {
/* Max. rozostření na okraji viditelné obrazovky (post ještě je vidět) */
--boem-scroll-max-blur: 32px;
/* Max. rozostření, když je post úplně mimo obrazovku — výrazně víc */
--boem-scroll-max-blur-offscreen: 68px;
/* Kolem středu zůstává pás, kde je obrázek plně ostrý (podíl z poloviny
výšky viewportu) — bez něj je ostrý jen jediný přesný pixel */
--boem-scroll-sharp-zone: 0.16;
}
/* 5. HEADLINE FIX: Force white color for blend mode */
.archive-staggered-layout .post-text-content {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 90% !important;
z-index: 20 !important; /* Increased for safety */
text-align: center !important;
pointer-events: none !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 15px !important;
/* mix-blend-mode: difference odstraněn — barvu řeší sekce 6b (Liquid text) */
}
/* Titulky karet — barvu a stín řeší sekce 6b (Liquid text) */
.archive-staggered-layout .post-text-content a,
.archive-staggered-layout .boem-archive-title {
text-decoration: none !important;
font-size: inherit;
text-transform: none !important;
font-weight: 500;
margin: 0;
line-height: 1.2;
}
.archive-staggered-layout .wp-block-button a {
background-color: transparent !important;
color: white !important;
border: 1px solid white !important;
padding: 8px 18px;
font-size: 0.8rem;
text-transform: none !important;
}
/* 6. HOVER – Blur fix for both video and image */
.archive-staggered-layout article:hover .post-img-link img,
.archive-staggered-layout article:hover .post-img-link video {
filter: blur(60px) !important;
-webkit-filter: blur(60px) !important; /* Fix for some browsers */
opacity: 1 !important;
}
/* 7. Mobile responsiveness – karty od kraje ke kraji, přímo pod sebou
Layout vypadne z bočního odsazení (.site-content má 30px) pomocí
100vw + vycentrování, takže funguje bez ohledu na odsazení rodičů.
Žádný padding, žádná mezera mezi kartami — obrázky a videa na sebe
navazují (3/4 poměr stran zůstává). */
@media (max-width: 600px) {
.archive-staggered-layout {
margin-top: 0 !important; /* první karta začíná úplně nahoře (jen mobil, jen tady) */
margin-bottom: 0 !important;
padding: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
.archive-staggered-layout .archive-products {
justify-content: center !important;
margin-bottom: 0 !important;
}
.archive-staggered-layout .archive-products article {
max-width: 100% !important;
}
}
/* Clear default theme styles */
.archive .site-main > article {
max-width: none !important;
margin: 0 !important;
}
/* --- POSTS --- */
.post-cat {display: none}
/* Sjednocení .has-large-font-size v příspěvcích na 14px (Mobil i PC) */
.type-post .has-large-font-size,
.post .has-large-font-size {
font-size: 16px !important;
line-height: 1.5 !important; /* Přepíše původní obří řádkování z desktopu */
}
/* ==============================================
6b. LIQUID TEXT — TEXT NAD MÉDIEM
Nahrazuje mix-blend-mode: difference ve třech kontextech:
archivní karty na úvodní stránce, cover bloky v postech
a stránkách, a textový překryv nad produktovým videem.
Efekt je celý v písmu — pod textem není žádná vrstva
a podklad se nijak neupravuje. Glyfy jsou poloprůhledně
bílé, takže je skrz ně vidět fotka; hranu jim dává obtah
a stín je odsazuje od podkladu.
Průhlednost se řídí velikostí písma: čím větší, tím
průhlednější.
============================================== */
:root {
/* Velké nadpisy — skutečné hodnoty se nastavují níž v sekci nadpisů */
--glass-a: 0.6;
--glass-stroke: 0.75px;
/* Drobný text — titulky karet na úvodní stránce */
--glass-a-small: 0.92;
/* Drobný text v coveru (posty a stránky) — o něco průsvitnější,
nadpis vedle něj je velký a popisek mu nemá konkurovat */
--glass-a-small-cover: 0.80;
/* Bez stínu. Efekt nese jen průhlednost písma a obtah hrany.
Kdyby byl někdy potřeba, stačí sem dát hodnotu
(např. 0 1px 2px rgba(0, 0, 0, 0.28)) a projeví se všude. */
--glass-shadow: none;
}
/* mix-blend-mode: difference odstraněn z .wp-block-cover__inner-container,
.video-overlay i .archive-staggered-layout .post-text-content */
/* --- Nadpisy ----------------------------------------------------------- */
.wp-block-cover__inner-container h1,
.wp-block-cover__inner-container h2,
.wp-block-cover__inner-container p.has-huge-font-size,
.video-overlay h1,
.video-overlay h2 {
color: rgba(255, 255, 255, var(--glass-a)) !important;
/* Obtah hrany písma (rámeček kolem velkého fontu) odstraněn —
zůstává jen poloprůhledná výplň. */
-webkit-text-stroke: 0;
text-shadow: var(--glass-shadow);
}
/* --- Drobný text: úvodní stránka --------------------------------------- */
.archive-staggered-layout .post-text-content a,
.archive-staggered-layout .boem-archive-title {
color: rgba(255, 255, 255, var(--glass-a-small)) !important;
-webkit-text-stroke: 0;
text-shadow: var(--glass-shadow);
}
/* --- Drobný text: cover v postech a stránkách --------------------------
Vlastní hodnota, průsvitnější než na úvodní stránce. */
.wp-block-cover p,
.wp-block-cover a,
.wp-block-cover__inner-container p,
.wp-block-cover__inner-container p a,
.wp-block-cover__inner-container .has-extra-small-font-size,
.video-overlay p {
color: rgba(255, 255, 255, var(--glass-a-small-cover)) !important;
-webkit-text-stroke: 0;
text-shadow: var(--glass-shadow);
}
/* Podtržení odkazů ať nepřebíjí písmo, které je poloprůhledné */
.wp-block-cover a,
.wp-block-cover__inner-container p a {
border-bottom-color: rgba(255, 255, 255, calc(var(--glass-a-small-cover) * 0.55)) !important;
}
/* Tlačítka zůstávají plně krytá — jsou to malé plochy, které se klikají */
.archive-staggered-layout .wp-block-button a,
.wp-block-cover .wp-block-button a {
-webkit-text-stroke: 0;
text-shadow: var(--glass-shadow);
}
/* --- Nastavení nadpisů -------------------------------------------------
Jedna hodnota napříč všemi velikostmi. Dřív se odstupňovala podle
breakpointů; kdyby to bylo znovu potřeba, stačí sem přidat media
query se stejným selektorem a jiným --glass-a / --glass-stroke. */
.wp-block-cover__inner-container h1,
.wp-block-cover__inner-container h2,
.wp-block-cover__inner-container p.has-huge-font-size,
.video-overlay h1,
.video-overlay h2 {
--glass-a: 0.6;
--glass-stroke: 0.75px;
}
/* Na velkých monitorech se drobný text dřív zesvětloval na 0.70.
Zrušeno — právě tam byl nejhůř čitelný. */
/* Ovládací šipky swiper galerie */
.swiper-controls {
mix-blend-mode: difference;
}
/* ==============================================
7. LAYOUT, MARGINY A ZÁKLADNÍ RESPONZIVITA
============================================== */
.alignfull { margin: 30px; }
.full { margin: 0px !important; }
.alignfull.fullscreen { min-height: 100vh; margin: -90px 0px 0px 0px !important; padding: 0px !important; }
.wp-block-column { flex: 1; }
.wp-block-column img { width: 100% !important; height: auto; }
.flexibox { display: flex; flex-wrap: wrap; gap: 60px; align-items: flex-end; margin-left: 30px; margin-top: 30px; }
.flexibox img { width: 100% !important; height: auto; }
/* Responzivní pravidla (MOBIL do 480px) */
@media (max-width: 480px) {
:root { --large-size: 16px !important; --normal-size: 14px; }
.has-huge-font-size { font-size: 34px !important} p.has-huge-font-size {font-size: 34px !important; }
#menu { right: 10px; top: 25px; }
#kosik { right: 65px; top: 26px; }
#user { right: 55px; top: 28px; }
.alignfull { margin: 30px 20px }
.full { margin-top: 0px !important}
.page h1.entry-title { font-weight: normal !important; font-size: 50px; }
.wp-block-columns { display: block; margin: 30px 0px; }
.wc-block-grid.has-4-columns .wc-block-grid__product, .wc-block-grid.has-5-columns .wc-block-grid__product { flex: 1 0 50% !important; }
.woocommerce .cart-collaterals .cross-sells ul.products li { width: calc(49% - 30px) !important; }
/* Hlavní úroveň menu jede po stejné XL řadě jako .has-huge-font-size
a nadpisy v coverech: 34 / 48 / 70 / 96px na 480, 800 a 1400. */
.bigmenu a { font-size: 34px !important; letter-spacing: -0.05em; line-height: 1.1; padding-bottom: 10px !important; font-weight: 400; }
.sub-menu a { font-size: 22px !important; padding-bottom: 2px !important; font-weight: 500; }
.search-header { margin-left: 15px; margin-top: 80px; }
.search-header h1 { font-size: 28px !important; letter-spacing: -1px !important; }
.search-products { width: calc((100% / 2) - 60px); float: left; margin-left: 30px; padding-right: 30px; }
.wc-block-grid__products {
display: flex !important;
flex-wrap: wrap !important;
margin-top: 30px;
padding: 0px !important; /* Těchto 30px je od okraje stránky */
gap: 15px !important; /* Mezera UPROSTŘED mezi těmito dvěma produkty */
box-sizing: border-box !important;
}
/* Přesně 2 produkty vedle sebe (odečtena mezera) */
.wc-block-grid.has-4-columns .wc-block-grid__product,
.wc-block-grid.has-5-columns .wc-block-grid__product,
.wc-block-grid.has-6-columns .wc-block-grid__product {
flex: 1 1 calc(50% - 15px) !important;
max-width: calc(50% - 7.5px) !important;
padding: 0 !important; /* Žádný padding nezvětšuje produkt */
border: none !important; /* Odstraněn ten divný border */
margin-bottom: 30px !important;
}
}
/* Responzivní pravidla (TABLET a PC od 480px) */
@media (min-width: 480px) {
.page h1.entry-title { font-weight: normal !important; font-size: 70px; }
#menu { right: 15px; top: 25px; }
#kosik { right: 70px; top: 26px; }
#user { right: 60px; top: 28px; }
.wp-block-columns { display: flex; gap: 60px; margin: 30px 30px 60px 30px; }
.search-header { margin-left: 60px; margin-top: 60px; }
/* Základní stupeň XL řady */
.bigmenu a { font-size: 48px !important; letter-spacing: -0.05em; line-height: 1.1; padding-bottom: 10px !important; font-weight: 400; }
.sub-menu a { font-size: 22px !important; padding-bottom: 5px !important; font-weight: 500; }
.search-products { width: calc((100% / 4) - 60px); float: left; margin-left: 30px; padding-right: 30px; }
/* OPRAVENÉ ODSAZENÍ PRODUKTŮ - 30px zleva i zprava */
.wc-block-grid__products {
padding: 30px !important;
box-sizing: border-box !important;
}
/* Očištění jednotlivých produktů */
.wc-block-grid__product {
padding: 0 !important;
border: none !important; /* Zrušen divný border */
margin-bottom: 30px !important;
}
}
/* Velké obrazovky (od 800px a 1400px) */
@media (min-width: 800px) {
.page h1.entry-title { font-size: 96px; }
.search-header h1 { font-size: 96px !important; letter-spacing: -5px !important; }
.bigmenu a { font-size: 70px !important; }
.sub-menu a { font-size: 24px !important; }
}
@media (min-width: 1400px) {
.has-huge-font-size { font-size: 96px; letter-spacing: -2px; }
.bigmenu a { font-size: 96px !important; letter-spacing: -2px !important; }
/* OPRAVENÉ ODSAZENÍ PRODUKTŮ - zachována větší mezera dole (60px) pro ultraširoké monitory */
.wc-block-grid__product {
border: none;
padding-left: 30px;
padding-right: 30px;
margin-bottom: 60px;
}
}
/* Ostatní drobné modifikace */
.wp-block-button a, .page .wp-block-button a { color: white; font-size: 15px; background-color: blue; padding: 4px 15px 6px; border-radius: 20px; }
.wp-block-button a:hover { color: white; background-color: var(--boem-gray-dark); transition: all .15s ease-in-out; }
.yikes-easy-mc-form-2 { width: calc(100% - 60px) !important; border-radius: 15px; padding: 30px; background-color: #f7f7f7 !important; }
.term-description a { font-size: var(--normal-size); background-color: white; border-radius: 15px; padding: 4px 14px; }
.term-description a:hover { background-color: var(--light-blue); color: white; }
.wpcf7-submit { border-bottom: 0px !important; background-color: blue !important; color: white; padding: 4px 12px; margin-right: 15px; border-radius: 20px; font-size: 16px; cursor: pointer; height: 30px; }
.wpcf7-submit:hover { background-color: var(--boem-gray-dark); }
/* ==============================================
SKRYTÍ NATIVNÍCH WOOCOMMERCE PRVKŮ
(Cena, varianty a tlačítko nahrazeny spodním panelem)
============================================== */
/* Skryje hlavní cenu pod nadpisem produktu */
.woocommerce div.product .summary p.price {
display: none !important;
}
/* Skryje cenu, která se ukazuje po výběru varianty */
.woocommerce div.product .summary .woocommerce-variation-price {
display: none !important;
}
/* Skryje celý formulář pro přidání do košíku (výběr variant, množství a tlačítko Buy) */
.woocommerce div.product .summary form.cart {
display: none !important;
}
/* ==============================================
MOBILNÍ OPRAVY: COVER VS. TEXTY (Vložit do @media max-width: 480px)
============================================== */
/* 1. OPRAVA TEXTŮ (Přidání 30px odsazení pro běžný obsah) */
/* Tímto zajistíme, že všechny běžné texty, nadpisy a odstavce nebudou nalepené na kraj */
.type-post .entry-content,
.type-page .entry-content,
.site-content,
.wp-block-group__inner-container {
padding-left: 30px !important;
padding-right: 30px !important;
box-sizing: border-box !important;
}
/* Pro jistotu: Nulování odsazení specificky pro stránku produktu */
.single-product .entry-content,
.single-product .site-content {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ==============================================
1b. ČITELNOST BĚŽNÉHO TEXTU (stránky a posty)
Vyžaduje třídu .wp-block-paragraph, tedy skutečný blok
odstavce z editoru. Bez ní by se pravidlo chytilo i na
odstavce v menu, v patičce a všude jinde uvnitř obsahu.
Platí pro odstavce bez nastavené velikosti a pro velikost
Medium, což je základní velikost textu. Ostatní velikosti
(Small, Large, Huge) i zarovnané odstavce si drží svoje.
Stejně tak se vynechává všechno uvnitř cover bloku.
Velikost — clamp(14px, 0.6875rem + 0.625vw, 20px):
14px do šířky okna 480px, pak lineární růst, od 1440px výš
strop 20px. Chceš-li mobil zvednout, měň jen první číslo,
prostřední člen je sklon té přímky a zůstane platný.
Šířka — 68ch, tedy zhruba 66 znaků na řádek. Norma pro
jednosloupcovou sazbu je 45 až 75 znaků, WCAG 1.4.8 (AAA)
dává strop 80. Jednotka ch je odvozená z velikosti písma,
takže se blok rozšiřuje spolu s ním.
Strop sedí na odstavcích, ne na kontejnerech — cover bloky
a obrázky v alignfull zůstávají od kraje ke kraji.
============================================== */
:root {
--text-measure: 68ch;
--text-size: clamp(14px, 0.6875rem + 0.625vw, 20px);
}
/* bez nastavené velikosti */
.type-page .entry-content p.wp-block-paragraph:not([class*="font-size"]):not([class*="has-text-align"]):not(.wp-block-cover *),
.type-post .entry-content p.wp-block-paragraph:not([class*="font-size"]):not([class*="has-text-align"]):not(.wp-block-cover *),
/* a velikost Medium */
.type-page .entry-content p.wp-block-paragraph.has-medium-font-size:not([class*="has-text-align"]):not(.wp-block-cover *),
.type-post .entry-content p.wp-block-paragraph.has-medium-font-size:not([class*="has-text-align"]):not(.wp-block-cover *) {
font-size: var(--text-size);
line-height: 1.55;
max-width: var(--text-measure);
/* barva stejná jako --studio-ink-soft na stránce Studio (ta
světlejší z těch dvou — stejná jako popisky služeb ve
"What I do"). Bez !important schválně — na stránkách, co si
barvu textu řeší samy (např. Studio s .studio-ink/
.studio-ink-soft), musí mít přednost jejich vlastní
!important pravidlo, jinak by se dvě odlišné odstíny šedé
smáčkly do jedné. */
color: var(--studio-ink-soft);
}
/* 2. OPRAVA COVER BLOKU (Aby byl od kraje ke kraji) */
/* Prvky 'alignfull' se musí "vymanit" z toho 30px odsazení nastaveného výše pomocí záporných okrajů */
.wp-block-cover,
.wp-block-cover.alignfull {
width: calc(100% + 60px) !important; /* Roztáhneme šířku o 30px na každé straně */
max-width: calc(100% + 60px) !important;
margin-left: -30px !important; /* Posuneme o 30px doleva mimo kontejner */
margin-right: -30px !important; /* Posuneme o 30px doprava mimo kontejner */
padding-left: 0 !important; /* Ujistíme se, že cover nemá vnitřní odsazení */
padding-right: 0 !important;
border-radius: 0 !important; /* Na mobilu na full-width nevypadají kulaté rohy dobře, pro jistotu resetujeme */
}
.wp-block-cover.alignfull:last-child {margin-bottom: -30px}
/* Pojistka pro obrázky uvnitř coveru, aby se nedeformovaly */
.wp-block-cover img,
.alignfull img {
width: 100% !important;
object-fit: cover !important;
}
/* Barvu textu v coveru řeší sekce 6b (Liquid text).
Původní 'color: white !important' tady mělo stejnou specificitu
jako pravidlo v 6b, ale stálo níž v souboru, takže ho přebíjelo. */
.wp-block-cover a {border-bottom: 1px solid rgba(255, 255, 255, 0.45)}
/* ==============================================
SKRYTÍ NADPISŮ (Nahrazeny spodním panelem)
============================================== */
/* Košík, Pokladna, Detail produktu a Běžné stránky */
.woocommerce-cart .entry-title,
.woocommerce-cart .page-title,
.woocommerce-checkout .entry-title,
.woocommerce-checkout .page-title,
.single-product .product_title,
.single-product .entry-title,
.page .entry-title {
display: none !important;
}
/* ==============================================
WOOCOMMERCE HLÁŠKY (Globální Pill design)
============================================== */
/* 1. HLAVNÍ STYL PRO VŠECHNY BUBLINY (Košík, Pokladna, atd.) */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
/* Výchozí pozicování: Nahoře v toku stránky (vycentrováno s odsazením dolů) */
position: relative !important;
margin: 0 auto 30px auto !important;
/* Responzivní Pill design */
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
min-height: 40px !important;
height: auto !important;
box-sizing: border-box !important;
padding: 12px 25px !important;
border-radius: 30px !important;
border: none !important;
/* Typografie */
font-family: 'ra', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
text-align: center !important;
width: fit-content !important;
max-width: 85% !important;
box-shadow: none !important;
}
/* 2. PLOVOUCÍ UMÍSTĚNÍ POUZE PRO DETAIL PRODUKTU */
.single-product .woocommerce-error,
.single-product .woocommerce-info,
.single-product .woocommerce-message {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 999999 !important;
margin: 0 !important; /* Vypnutí marginu, centruje se přes transform */
}
/* 3. ZÁKLADNÍ BARVY (Info a Úspěch) */
.woocommerce-info,
.woocommerce-message {
background-color: #ffffff !important;
color: var(--boem-gray-dark) !important;
}
/* 4. CHYBOVÉ HLÁŠKY (Error) */
.woocommerce-error {
background-color: red !important;
color: #ffffff !important;
}
/* 5. ODSTRANĚNÍ VÝCHOZÍCH IKON A MEZER */
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
display: none !important;
content: none !important;
}
.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* 6. ÚPRAVA TLAČÍTEK UVNITŘ HLÁŠEK ("Zobrazit košík") */
.woocommerce-error .button,
.woocommerce-info .button,
.woocommerce-message .button {
border: none !important;
border-radius: 20px !important;
padding: 6px 16px !important;
font-size: 12px !important;
margin: 0 !important;
text-transform: none !important;
text-decoration: none !important;
white-space: nowrap !important;
/* Výchozí barvy (Bílé tlačítko pro červený Error box) */
background-color: #ffffff !important;
color: var(--boem-gray-dark) !important;
}
/* Pojistka pro tlačítko v BÍLÉ bublině (černé tlačítko) */
.woocommerce-info .button,
.woocommerce-message .button {
background-color: var(--boem-gray-dark) !important;
color: #ffffff !important;
}
.woocommerce-error .button:hover,
.woocommerce-info .button:hover,
.woocommerce-message .button:hover {
opacity: 0.7 !important;
}
/* ==============================================
BOEM FLOATING BOTTOM BAR (SEPARATED & REFINED)
============================================== */
.boem-blend-layer, .boem-solid-layer {
position: fixed;
bottom: 30px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
pointer-events: none;
}
/* --- Úprava hlavního panelu (odsazení 30px od krajů) --- */
.boem-floating-bar {
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: 10px; margin-right: 10px;
max-width: 750px;
min-width: 50px;
gap: 8px;
padding: 4px 6px;
border-radius: 50px;
font-family: 'ra', sans-serif;
transition: transform 0.3s ease;
}
/* --- TEXTY --- */
.boem-bar-item {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none !important;
font-size: 14px;
font-weight: 500;
cursor: pointer;
border: none;
outline: none;
background: transparent;
}
/* Trik pro středový text (Název stránky i Cena u produktů) */
.boem-page-title, .boem-price {
flex: 1 1 0%;
min-width: 0;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 6px;
font-size: 14px;
font-weight: 500;
cursor: default;
}
/* Na počítačích se zruší omezení a text se vypíše celý */
@media (min-width: 768px) {
.boem-page-title {
max-width: none;
}
}
/* Text v horní viditelné vrstvě */
.boem-solid-layer .boem-page-title {
color: var(--boem-glass-ink) !important;
}
/* --- TLAČÍTKA A IKONY (Zvětšeno na 34px) --- */
.boem-icon-btn {
width: 34px; /* Zvětšeno z 30px */
height: 34px; /* Zvětšeno z 30px */
border-radius: 50%;
transition: background-color 0.3s ease;
}
.boem-pill-btn {
height: 34px; /* Zvětšeno z 30px */
border-radius: 40px;
padding: 0 16px;
gap: 8px;
transition: background-color 0.3s ease, transform 0.2s ease;
}
/* --- 1. SPODNÍ VRSTVA (BLEND) --- */
/* Nepoužívá se. Původně držela bílou kopii panelu v mix-blend-mode: difference,
která vytvářela černou inverzi. Skleněný panel si čitelnost řeší průhledností,
takže je vrstva vypnutá (v šabloně zůstává kvůli zpětné kompatibilitě). */
.boem-blend-layer {
display: none;
}
/* --- 2. HORNÍ VRSTVA (SOLID) --- */
.boem-solid-layer {
z-index: 9999999;
}
.boem-solid-layer .boem-floating-bar {
background-color: rgba(250, 250, 252, 0.4);
-webkit-backdrop-filter: blur(7px) saturate(180%);
backdrop-filter: blur(7px) saturate(180%);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.14),
0 1px 2px rgba(0, 0, 0, 0.06);
pointer-events: auto;
}
/* Fallback pro prohlížeče bez backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.boem-solid-layer .boem-floating-bar {
background-color: rgba(245, 245, 247, 0.95);
}
}
.boem-solid-layer .boem-icon-btn,
.boem-solid-layer .boem-price {
color: var(--boem-glass-ink) !important;
background-color: transparent;
}
/* Jen čisté linky (fill="none" v markupu, viz DevTools u košíku —
držadlo je samostatný path bez výplně) dostávají nižší krytí.
Vyplněné tvary (rect/path s fill) necháváme na plné --boem-glass-ink,
která se jim na stroke stejně neuplatní, protože žádný nemají. */
.boem-solid-layer .boem-icon-btn svg [fill="none"] {
stroke: var(--boem-glass-ink-line) !important;
}
/* Tlačítka Menu a Zpět: jen glyf, bez vlastního podkladu.
Bílý kruh by na světlém skle zmizel. */
.boem-solid-layer .boem-menu-trigger,
.boem-solid-layer .boem-back-btn {
background-color: transparent !important;
color: var(--boem-glass-ink) !important;
}
.boem-solid-layer .boem-menu-trigger svg,
.boem-solid-layer .boem-back-btn svg {
stroke: var(--boem-glass-ink) !important;
}
/* Čistý hover efekt pro Menu a Zpět */
.boem-solid-layer .boem-menu-trigger:hover,
.boem-solid-layer .boem-back-btn:hover {
background-color: rgba(0, 0, 0, 0.07) !important;
color: var(--boem-glass-ink-strong) !important;
}
.boem-solid-layer .boem-menu-trigger:hover svg,
.boem-solid-layer .boem-back-btn:hover svg {
stroke: var(--boem-glass-ink-strong) !important;
}
/* Hover pro obecné ikonky (košík) */
.boem-solid-layer .boem-icon-btn:hover {
background-color: rgba(0, 0, 0, 0.07);
}
.boem-solid-layer .boem-icon-btn:hover svg [fill="none"] {
stroke: var(--boem-glass-ink-line-strong) !important;
}
/* Šedá pilulka "Buy" — jediná plná plocha v baru, drží roli hlavní akce */
.boem-solid-layer .boem-pill-btn {
background-color: var(--boem-gray) !important;
color: #ffffff !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}
.boem-solid-layer .boem-pill-btn svg {
stroke: #ffffff;
}
.boem-solid-layer .boem-pill-btn:hover {
background-color: var(--boem-gray-dark) !important;
color: #ffffff !important;
}
.boem-solid-layer .boem-pill-btn:hover svg {
stroke: #ffffff;
}
.boem-solid-layer .boem-pill-btn:active {
transform: scale(0.96);
}
/* --- KOŠÍK A POČET POLOŽEK --- */
.boem-cart-count {
font-size: 10px;
margin-left: 2px;
margin-top: 2px;
opacity: 0;
transition: opacity 0.3s ease;
display: inline-block;
}
.boem-cart-count.has-items {
opacity: 1;
}
.boem-solid-layer .boem-cart-count {
color: var(--boem-glass-ink);
}
.boem-solid-layer .boem-icon-btn:hover .boem-cart-count {
color: var(--boem-glass-ink-strong);
}
.boem-blend-layer .boem-cart-count {
color: transparent !important;
}
/* Zvětšený tvar košíku na 34px */
.boem-icon-btn.boem-cart-icon {
width: auto;
height: 34px; /* Zvětšeno z 30px */
padding: 0 10px;
min-width: 34px; /* Zvětšeno z 30px */
border-radius: 34px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
/* Prázdný košík se vrátí na kruh 34px */
.boem-icon-btn.boem-cart-icon:not(:has(.has-items)) {
padding: 0;
width: 34px; /* Zvětšeno z 30px */
}
.boem-cart-count:not(.has-items) {
display: none;
}
/* --- Úprava pravé strany panelu --- */
/* 1. Uživatelská ikona bude teď ta, která odtlačí zbytek doprava */
.boem-icon-btn.boem-user-icon {
margin-left: auto !important;
}
/* 2. Zruš margin-left u košíku, pokud tam ještě je, aby byl hned vedle usera */
.boem-icon-btn.boem-cart-icon {
margin-left: 0 !important;
}
/* 3. Barvy pro User ikonu (v solid vrstvě) */
.boem-solid-layer .boem-user-icon {
color: var(--boem-glass-ink) !important;
}
.boem-solid-layer .boem-user-icon svg {
stroke: var(--boem-glass-ink) !important;
}
/* Hover efekt */
.boem-solid-layer .boem-user-icon:hover {
background-color: rgba(0, 0, 0, 0.07) !important;
}
.boem-solid-layer .boem-user-icon:hover svg {
stroke: var(--boem-glass-ink-strong) !important;
}
/* ==============================================
SAMOSTATNÝ VÝBĚR VARIANT (Levituje nad panelem)
============================================== */
.boem-standalone-variation-wrapper {
position: fixed;
bottom: 80px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
z-index: 9999999;
pointer-events: none;
/* POZOR: mix-blend-mode tady být nesmí — blend na rodiči
vypne backdrop-filter u všech potomků. */
}
.boem-standalone-variation-pill {
position: relative;
height: 42px; /* Zvětšeno z 38px úměrně k hlavnímu panelu */
border-radius: 40px;
display: flex;
align-items: center;
pointer-events: auto;
transition: background-color 0.3s ease;
background-color: rgba(245, 245, 247, 0.5);
-webkit-backdrop-filter: blur(7px) saturate(180%);
backdrop-filter: blur(7px) saturate(180%);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.14),
0 1px 2px rgba(0, 0, 0, 0.06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.boem-standalone-variation-pill {
background-color: rgba(245, 245, 247, 0.95);
}
}
.boem-custom-variation-select {
background: transparent;
color: #1d1d1f;
border: none;
font-family: 'ra', sans-serif;
font-size: 14px;
font-weight: 500;
padding: 0 40px 0 20px;
cursor: pointer;
outline: none;
height: 100%;
appearance: none;
-webkit-appearance: none;
text-align: center;
}
.boem-custom-variation-select option {
color: var(--boem-gray-dark);
background-color: #ffffff;
}
.boem-select-arrow {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: #1d1d1f;
}
/* --- Vynucené natažení Checkout / Buy tlačítka jako pružina --- */
.boem-checkout-btn, .boem-place-order-btn {
flex: 1 1 0%;
justify-content: center;
white-space: nowrap;
}
/* --- Skrytí nativního tlačítka "Place order" v pokladně --- */
.woocommerce-checkout #place_order {
display: none !important;
}
/* --- Skrytí nativního tlačítka "Proceed to checkout" v košíku --- */
.single_boem_button_checkout {
display: none !important;
}
/* ==============================================
DISCOUNT / COUPON BAR VE STYLU "PILL"
(Košík a Pokladna)
============================================== */
/* 1. Hlavní obal slevového pole (stejný tvar jako náš spodní bar) */
.woocommerce-cart .coupon,
.woocommerce form.checkout_coupon {
display: flex !important;
align-items: center;
background-color: #ffffff !important;
border-radius: 50px !important;
padding: 4px 6px !important;
width: 100% !important;
max-width: 360px !important; /* Stejná šířka jako má bottom bar na PC */
border: none !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important; /* Lehký stín, ať to vystoupí do prostoru */
margin: 0 auto 24px auto !important; /* Vycentrování na střed */
box-sizing: border-box;
}
/* 2. Textové pole pro zadání kódu (flexibilní, průhledné, černý text) */
.woocommerce-cart .coupon input.input-text,
.woocommerce form.checkout_coupon input.input-text {
flex: 1 1 0% !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--boem-gray-dark) !important;
padding: 0 16px !important;
font-family: 'ra', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
outline: none !important;
height: 34px !important;
margin: 0 !important;
min-width: 0 !important;
}
/* Barva placeholderu (nápisu "Coupon code", než uživatel začne psát) */
.woocommerce-cart .coupon input.input-text::placeholder,
.woocommerce form.checkout_coupon input.input-text::placeholder {
color: #999999 !important;
opacity: 1 !important;
}
/* 3. Tlačítko pro odeslání kupónu (černé s bílým textem) */
.woocommerce-cart .coupon button.button,
.woocommerce form.checkout_coupon button.button {
background-color: var(--boem-gray-dark) !important;
color: #ffffff !important;
height: 34px !important;
border-radius: 40px !important;
padding: 0 20px !important;
font-family: 'ra', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
border: none !important;
margin: 0 !important;
cursor: pointer !important;
transition: background-color 0.3s ease, transform 0.2s ease !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-transform: none !important;
}
/* Hover a klikací efekt pro černé tlačítko kupónu */
.woocommerce-cart .coupon button.button:hover,
.woocommerce form.checkout_coupon button.button:hover {
background-color: #333333 !important;
}
.woocommerce-cart .coupon button.button:active,
.woocommerce form.checkout_coupon button.button:active {
transform: scale(0.96) !important;
}
li.wc-block-product h2 {text-align: center !important}
.menu-disable-link {cursor: not-allowed; text-decoration: none;}
/* ==============================================
LOGIN / REGISTER WOOCOMMERCE (400px, Pill, Bez rámečku)
============================================== */
/* Vycentrování formulářů a omezení šířky */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
max-width: 400px !important;
margin: 0 auto 40px auto !important;
border: none !important;
padding: 0 !important;
}
/* Skrytí původních nadpisů (labels) - kromě checkboxu */
.woocommerce form.login .woocommerce-form-row > label,
.woocommerce form.register .woocommerce-form-row > label {
display: none !important;
}
/* 1. OPRAVA POLÍ (Bílé pozadí, bez rámečku, vycentrovaný text) */
.woocommerce form.login input.input-text,
.woocommerce form.register input.input-text {
height: 38px !important;
line-height: 38px !important; /* Zarovná text přesně doprostřed na výšku */
box-sizing: border-box !important;
width: 100% !important;
border: none !important; /* Smazán černý rámeček */
border-radius: 20px !important;
padding: 0 20px !important;
font-family: 'ra', sans-serif !important;
font-size: 14px !important;
background-color: #ffffff !important; /* Bílé pozadí */
color: var(--boem-gray-dark) !important;
margin-bottom: 15px !important;
outline: none !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important; /* Super jemný stín, aby bílá pole na bílém pozadí nezmizela. Smaž tento řádek, pokud máš stránku šedou. */
}
/* 2. OPRAVA OČKA U HESLA (Zarovnání na střed) */
.woocommerce form.login .password-input,
.woocommerce form.register .password-input {
position: relative !important;
display: block !important;
width: 100% !important;
}
.woocommerce form.login .show-password-input,
.woocommerce form.register .show-password-input {
position: absolute !important;
right: 15px !important;
top: 50% !important;
transform: translateY(-50%) !important; /* Posune očko přesně na vertikální střed pole */
cursor: pointer !important;
z-index: 10 !important;
display: flex !important;
align-items: center !important;
height: auto !important;
}
/* 3. OPRAVA TLAČÍTEK (Srovnání textu) */
.woocommerce form.login button.button,
.woocommerce form.register button.button {
height: 38px !important;
line-height: 38px !important; /* Stejné zarovnání jako u polí */
box-sizing: border-box !important;
width: 100% !important;
border-radius: 20px !important;
background-color: var(--boem-gray-dark) !important;
color: #ffffff !important;
font-family: 'ra', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
border: none !important;
padding: 0 !important;
display: block !important; /* Změněno z flex, aby line-height bezpečně zafungoval */
text-align: center !important;
text-transform: none !important;
margin-top: 10px !important;
cursor: pointer !important;
}
.woocommerce form.login button.button:hover,
.woocommerce form.register button.button:hover {
opacity: 0.8 !important;
}
/* 4. OPRAVA CHECKBOXU "Remember me" (Větší černý čtverec) */
.woocommerce form.login .woocommerce-form-login__rememberme {
display: flex !important;
align-items: center !important;
font-size: 13px !important;
margin-top: 5px !important;
cursor: pointer !important;
}
.woocommerce form.login .woocommerce-form-login__rememberme input[type="checkbox"] {
appearance: none !important; /* Vypne výchozí vzhled prohlížeče */
-webkit-appearance: none !important;
width: 18px !important;
height: 18px !important;
background-color: #ffffff !important;
border: 0px !important;
border-radius: 0px !important;
margin: 0 10px 0 0 !important; /* Odsazení od textu */
position: relative !important;
cursor: pointer !important;
}
#customer_login h2 {font-weight: 500; text-align: center}
#customer_login {max-width: 900px; margin: 0 auto 60px; }
/* Zaškrtnutý stav checkboxu */
.woocommerce form.login .woocommerce-form-login__rememberme input[type="checkbox"]:checked {
background-color: var(--boem-gray-dark) !important;
}
/* Fajfka uvnitř checkboxu */
.woocommerce form.login .woocommerce-form-login__rememberme input[type="checkbox"]:checked::after {
content: '' !important;
position: absolute !important;
left: 6px !important;
top: 3px !important;
width: 4px !important;
height: 8px !important;
border: solid white !important;
border-width: 0 2px 2px 0 !important;
transform: rotate(45deg) !important;
}
/* Odkaz Zapomenuté heslo */
.woocommerce form.login .woocommerce-LostPassword {
text-align: center !important;
margin-top: 15px !important;
font-size: 13px !important;
}
.woocommerce form.login .woocommerce-LostPassword a {
color: var(--boem-gray-dark) !important;
text-decoration: none !important;
}
/* Schová 'View Cart' tlačítko, které WC cpe k tlačítku Buy */
.added_to_cart.wc-forward {
display: none !important;
}
/* ==========================================================================
COURSE MENU: LAYOUT, SIDEBAR & DYNAMIC BAR INTEGRATION
========================================================================== */
/* 1. ZÁKLADNÍ TYPOGRAFIE A LAYOUT */
.course-layout { font-family: "ra", sans-serif; width: 100%; box-sizing: border-box; background-color: #efefef; }
.course-layout .alignwide .has-huge-font-size { max-width: 1600px !important; }
.course-layout .alignwide .has-large-font-size { max-width: 1200px !important; }
@media (max-width: 1023px) { .course-layout p { font-size: 24px; } }
@media (min-width: 1024px) and (max-width: 1399px) { .course-layout p { font-size: 30px; } }
@media (min-width: 1400px) {
.course-layout p { font-size: 40px; max-width: 1500px !important; }
.course-layout p.has-extra-small-font-size {font-size: 18px}
.course-layout h2 {margin-top: 120px}
.course-layout .has-huge-font-size { font-size: 96px; }
}
/* 2. VIZUÁL STROMU LEKCÍ (SIDEBAR & OVERLAY) */
.mobile-course-nav { background: #efefef; z-index: 998; overflow-y: auto; scrollbar-width: thin; box-sizing: border-box; }
.mobile-course-tree, .mobile-course-tree ul { list-style: none; margin: 0; padding: 0; }
.mobile-course-tree { padding: 20px 15px 120px 15px; }
.mobile-course-tree li a { text-decoration: none; color: var(--boem-gray-dark); font-size: 13px; line-height: 1.4; display: block; transition: color 0.2s ease; }
.mobile-course-tree > li { margin-bottom: 16px; position: relative; }
.mobile-course-tree > li > a { position: relative; }
.mobile-course-tree ul li.current_page_item {
background: var(--boem-gray-dark);
color: white !important;
border-radius: 50px; /* Vytvoří pill tvar */
/* Vytvoří prostor okolo textu a posune celý prvek doleva pro zachování linie */
padding: 8px 16px 8px 30px !important;
margin-left: -20px !important;
}
/* Pill tvar pro hlavní nadřazené položky (názvy kapitol) */
.mobile-course-tree > li.current_page_item > a {
background: var(--boem-gray-dark);
color: white !important;
border-radius: 50px;
padding: 8px 16px !important; /* Odsazení textu bez modré tečky */
/* Posun celého bloku zpět doleva, aby text lícoval s neaktivními nadpisy */
margin-left: -16px !important;
}
/* Skrytí původní modré linky u aktivní hlavní kategorie */
.mobile-course-tree > li.current_page_item > a::before {
display: none !important;
}
.mobile-course-tree ul li.current_page_item > a {color: white !important; }
.mobile-course-tree > li.current_page_item > a::before { height: 3px; }
.mobile-course-tree ul li.current_page_item::before {height: 4px; left: 14px; width: 4px; }
.mobile-course-tree ul { padding-left: 10px; margin: 8px 0; }
.mobile-course-tree ul li { position: relative; margin: 8px 0; padding-left: 10px; }
.mobile-course-tree ul li::before { content: ""; position: absolute; left: -5px; top: 50%; width: 4px; height: 4px; background: var(--boem-gray-dark); border-radius: 50%; transform: translateY(-50%); }
/* 3. DESKTOP SETUP (SIDEBAR + TITULEK V BARU) */
@media only screen and (min-width: 1024px) {
.mobile-course-nav {
display: block !important;
position: fixed;
top: 20px;
left: 20px;
bottom: 20px;
width: 400px;
transform: none !important;
border-right: none;
/* Přesné rozměry a vizuál podle tvého nastavení */
background: #efefef;
border-radius: 45px;
padding: 15px 25px 25px 25px;
/* Prohlubeň (inset) podle tvých specifikací */
box-shadow: -9px -9px 11px rgba(255, 255, 255, 0.7),
3px 4px 11px rgba(0, 0, 0, 0.15);
}
/* Odsazení obsahu vpravo, aby sidebar nepřekrýval text */
.course-layout {
margin-left: 460px !important;
width: calc(100% - 460px) !important;
}
.mobile-course-toggle { display: none !important; }
.boem-course-title-desktop {
display: block !important;
flex: 1 1 0%;
text-align: center;
color: #fff !important;
font-size: 14px;
font-weight: 500;
}
}
/* 4. MOBILNÍ SETUP (OVERLAY + RED TOGGLE V BARU) */
@media only screen and (max-width: 1023px) {
.mobile-course-nav {
position: fixed; top: 0; bottom: 0; left: 0; width: 100%; height: 100vh;
padding-top: 50px; transform: translateY(100%);
transition: transform 0.35s cubic-bezier(.25,.8,.25,1);
}
.mobile-course-nav.is-open { transform: translateY(0); }
.boem-course-title-desktop { display: none !important; }
.mobile-course-toggle {
display: flex !important;
position: relative !important;
bottom: auto !important; left: auto !important; transform: none !important;
flex: 1 1 0% !important; /* Široká pilulka */
height: 34px;
background: transparent !important;
color: #1d1d1f !important;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
border-radius: 40px;
font-family: "ra", sans-serif;
font-size: 14px;
font-weight: 500;
justify-content: center;
align-items: center;
padding: 0 20px;
border: none;
z-index: 10;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Ikony uvnitř tlačítka */
.mobile-course-toggle .icon-lessons { display: block !important; margin-right: 8px; }
.mobile-course-toggle .icon-close { display: none !important; margin-right: 8px; }
/* !!! STAV OTEVŘENO !!! */
.mobile-course-toggle[aria-expanded="true"] {
background: #1d1d1f !important;
color: #ffffff !important;
stroke: #ffffff !important;
box-shadow: none !important;
flex: 1 1 0% !important; /* Zůstává široké */
width: auto !important;
}
/* Výměna ikon: schováme 4 čárky, ukážeme křížek */
.mobile-course-toggle[aria-expanded="true"] .icon-lessons { display: none !important; }
.mobile-course-toggle[aria-expanded="true"] .icon-close {
display: block !important;
stroke: white !important;
}
/* Fix nápisu Lessons: zajistíme, aby se nezmenšil */
.mobile-course-toggle[aria-expanded="true"] .btn-text {
font-size: 14px !important;
opacity: 1 !important;
display: inline-block !important;
}
}
/* 5. POJISTKA PRO BLEND VRSTVU */
.boem-blend-layer .mobile-course-toggle,
.boem-blend-layer .boem-course-title-desktop {
background-color: transparent !important;
color: transparent !important;
pointer-events: none;
}
/* Společné vlastnosti pro oba panely */
.check { border-radius: 30px; padding: 25px; box-shadow: 0 0px 12px rgba(0, 0, 0, 0.13); }
.check p {font-size: 14px !important; margin-top: 0px !important; color: #333; }
.practice {
border-radius: 30px;
padding: 20px 40px;
box-sizing: border-box;
color: var(--boem-gray-dark);
}
.check li {padding-bottom: 10px}
.practice p {font-size: 18px !important}
.practice {margin-bottom: 100px}
/* Responzivita pro menší displeje */
@media (max-width: 1024px) {
.check, .practice { width: 95% !important; padding: 25px; }
}
/* ==========================================================================
GTRANSLATE: DESKTOP (Pilulka s textem) vs MOBIL (Kruhová ikona)
========================================================================== */
/* 1. ZÁKLAD PRO DESKTOP (Bílá pilulka s textem a šipkou) */
.boem-gtranslate-wrapper {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 34px !important;
padding: 0 !important;
border-radius: 40px !important;
background: #ffffff !important;
flex-shrink: 0 !important;
margin: 0 4px !important;
transition: all 0.3s ease;
}
/* Skrytí defaultních obrázků vlajek a textů z pluginu */
.boem-gtranslate-wrapper img,
.boem-gtranslate-wrapper span {
display: none !important;
}
/* Styl Selectu na desktopu (viditelný text a SVG šipka na pozadí) */
.boem-gtranslate-wrapper select {
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center !important;
background-size: 14px !important;
border: none !important;
box-shadow: none !important;
font-family: "ra", sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--boem-gray-dark) !important;
cursor: pointer !important;
padding: 0 32px 0 16px !important;
margin: 0 !important;
outline: none !important;
-webkit-appearance: none !important;
appearance: none !important;
height: 100% !important;
line-height: 34px !important;
width: auto !important;
opacity: 1 !important;
}
/* 2. MOBILNÍ ZOBRAZENÍ (Změna na ikonu pod 1024px) */
@media only screen and (max-width: 1023px) {
.boem-gtranslate-wrapper {
flex: 0 0 34px !important;
width: 34px !important;
border-radius: 50% !important;
/* Ikona překladu A/文 nacpaná do pozadí wrapperu */
background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' stroke='%23000000' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l6 6'/%3E%3Cpath d='M4 14l6-6 2-3'/%3E%3Cpath d='M2 5h12'/%3E%3Cpath d='M7 2h1'/%3E%3Cpath d='M22 22l-5-10-5 10'/%3E%3Cpath d='M14 18h6'/%3E%3C/svg%3E") no-repeat center center !important;
}
/* Select na mobilu roztáhneme přes celou ikonu a zneviditelníme */
.boem-gtranslate-wrapper select {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
background: transparent !important;
opacity: 0 !important; /* Text a šipka zmizí, zůstane jen hitbox */
z-index: 2 !important;
}
}
/* 3. GTRANSLATE NA SKLE
Bílá pilulka uvnitř skleněné pilulky vypadá špatně — jen jemný tint. */
.boem-solid-layer .boem-gtranslate-wrapper {
background-color: rgba(0, 0, 0, 0.05) !important;
}
.boem-solid-layer .boem-gtranslate-wrapper:hover {
background-color: rgba(0, 0, 0, 0.09) !important;
}
.boem-solid-layer .boem-gtranslate-wrapper select {
color: var(--boem-glass-ink) !important;
}
/* ==============================================
FULLSCREEN HERO PRO ÚVODNÍ STRÁNKU
============================================== */
/* Násilné roztáhnutí obalu z jakéhokoliv kontejneru */
.boem-front-cover {
position: relative !important;
width: 100vw !important;
max-width: 100vw !important;
/* Zruší boční okraje a roztáhne na 100% monitoru */
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
/* Vytvoří prostor dole před prvním projektem (výpisem postů) */
margin-bottom: 60px !important;
height: 100vh !important;
z-index: 1 !important;
}
/* Reset samotného Gutenberg bloku uvnitř */
.boem-front-cover .wp-block-cover {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
}
/* Násilné roztiahnutie videa/obrázka na absolútne pozadie */
.boem-front-cover .wp-block-cover video,
.boem-front-cover .wp-block-cover img,
.boem-front-cover .wp-block-cover iframe {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
z-index: 0 !important;
}
/* Polopriehľadný prekryv (overlay), ak ho Gutenberg generuje */
.boem-front-cover .wp-block-cover .wp-block-cover__background,
.boem-front-cover .wp-block-cover span[aria-hidden="true"] {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 1 !important;
}
/* Dokonalé vycentrovanie nadpisu nad videom */
.boem-front-cover .wp-block-cover__inner-container {
position: relative !important;
z-index: 2 !important; /* Vynesie text nad video */
width: 100% !important;
text-align: center !important;
padding: 0 30px !important;
box-sizing: border-box !important;
}
/* ==============================================
TLAČÍTKO PRO ZVUK (Fullscreen Video - Ikona)
============================================== */
.boem-mute-btn {
position: absolute !important;
bottom: 30px !important;
right: 30px !important;
z-index: 10 !important;
/* Vzhled a Difference blend mode */
background-color: #ffffff !important;
color: var(--boem-gray-dark) !important;
border: none !important;
mix-blend-mode: difference !important;
/* Kruhový tvar pro SVG ikonu */
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: transform 0.2s ease, bottom 0.3s ease !important;
}
/* ODSTRANĚNO: .boem-mute-btn svg { display: block !important; } */
/* Necháme JS ovládat viditelnost pomocí inline style display:none/block */
/* === MOBILNÍ ÚPRAVA === */
@media (max-width: 480px) {
.boem-mute-btn {
/* Vypne zarovnání vpravo */
right: auto !important;
/* Absolutní centrování na střed obrazovky */
left: 50% !important;
transform: translateX(-50%) !important;
/* Posun nad hlavní spodní bar (podle screenshotu cca 140px) */
bottom: 140px !important;
}
}
.post-14495 .has-normal-font-size {font-size: 16px}
.post-14495 .wp-block-button a {background-color: var(--boem-gray-dark)}
.post-14495 .wp-block-button a:hover {background-color: blue}
@media (max-width: 480px) {
.post-14495 p.has-large-font-size {font-size: 20px !important}
}
.boembox {
background: #efefef;
border-radius: 45px; /* Odhadovaný rádius z obrázku */
padding: 25px 25px 25px 25px;
/* Složený stín podle specifikace */
box-shadow: -9px -9px 11px rgba(255, 255, 255, 0.7),
3px 4px 11px rgba(0, 0, 0, 0.15);
}
.boembox .has-normal-font-size {margin-top: 15px; margin-bottom: 6px}
.boemboxdva {
background: #efefef;
border-radius: 45px; /* Odhadovaný rádius z obrázku */
padding: 25px 25px 25px 25px;
height: 80px;
/* Složený stín podle specifikace */
box-shadow: inset -9px -9px 11px rgba(255, 255, 255, 0.7),
inset 3px 4px 11px rgba(0, 0, 0, 0.15);
}
.boemboxdva .has-normal-font-size {margin-top: 19px}
.boemboxin {
background: #efefef;
color: white;
text-shadow:
2px 2px 3px rgba(255, 255, 255, 0.9),
-1px -1px 3px rgba(0, 0, 0, 0.12);
border-radius: 20px; /* Odhadovaný rádius z obrázku */
text-align: center;
width: 18px;
padding: 6px;
/* Složený stín podle specifikace */
box-shadow: -9px -9px 11px rgba(255, 255, 255, 0.7),
3px 4px 11px rgba(0, 0, 0, 0.15);
}
.boemboxindva {
background: #efefef;
font-size: 16px;
border-radius: 20px; /* Odhadovaný rádius z obrázku */
padding: 6px;
/* Složený stín podle specifikace */
}
.wp-block-cover .wp-block-button a {background-color: white !important; color: var(--boem-gray-dark) !important}
input.sib-default-btn {background-color: blue; color: white; border-radius: 15px; height: 30px; border: 0px; font-size: 15px !important; text-decoration: lowercase; padding: 4px 15px 6px; margin: auto}
input.sib-email-area {border: 0px; font-size: 15px; border-radius: 45px; font-family: "ra"; min-width: 300px; max-width: 400px;
box-shadow: inset -9px -9px 11px rgba(255, 255, 255, 0.7),
inset 3px 4px 11px rgba(0, 0, 0, 0.15); }
sib-email-area {margin: auto}
input.sib-default-btn:hover {background-color: var(--boem-gray-dark)}
.sib-form-block,
.sib-email-area,
.sib-submit-area {
font-family: "ra";
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
/* Omezí šířku pole, aby nebylo přes celou obrazovku, když je na středu */
.sib-email-area input {
max-width: 400px !important;
margin: 0 auto !important;
}
.sib-default-btn {
font-family: "ra"; min-width: 300px;
max-width: 400px !important;
display: block !important;
margin: 0 auto !important;
}
.wp-block-cover .is-content-justification-center {display: block !important}
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* Kontejner */
.product-grid-gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
background-color: #efefef;
grid-auto-rows: min-content;
}
/* Obal položky */
.grid-item {
width: 100%;
}
/* Fix pro samotný obrázek */
.grid-image {
/* Změna: width: 100% !important zajistí, že fotka ignoruje
atributy šířky přímo v HTML tagu ![]()
*/
width: 100% !important;
height: auto !important;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: center top;
display: block;
}
/* DESKTOP LOGIKA */
@media (min-width: 769px) {
.product-grid-gallery {
padding: 30px;
}
.grid-item:nth-child(3n) {
grid-column: 1 / span 2;
}
.grid-item:nth-child(3n) .grid-image {
/* Tohle musí mít taky 100%, aby se to roztáhlo přes oba sloupce */
width: 100% !important;
aspect-ratio: 3 / 4;
}
}
/* MOBIL LOGIKA */
@media (max-width: 768px) {
.product-grid-gallery {
grid-template-columns: 1fr;
gap: 20px;
padding: 15px;
}
.grid-item:nth-child(3n) {
grid-column: span 1;
}
.grid-item:nth-child(3n) .grid-image {
aspect-ratio: 3 / 4;
}
}
.pum-theme-12992 .pum-container, .pum-theme-content-only .pum-container {box-shadow: none !important}
/* Globální úprava pro každý WordPress Audio blok */
.wp-block-audio {
background: var(--boem-gray-dark) !important; /* Bílá karta na tvém #efefef pozadí */
padding: 12px 20px !important;
border-radius: 40px !important; /* Čisté, mírně zaoblené hrany */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; /* Minimalistický stín */
margin: 2rem 0 !important;
box-sizing: border-box !important;
}
/* Úprava samotného syrového