@charset "UTF-8";
/* PH-VZHLED 2026-10-23 (druhe kolo, blize mockupu ze 17. 10.). Uplna nahrada ph-vzhled-20261022c.css.
Vraceni: v radku PH-VZHLED v Zahlavi vratit odkaz na ph-vzhled-20261022c.css.
Jen CSS, zadne JS, zadna uprava sablony. Pravidla (cross-val Astra 22. 10.):
- telo pokladny (.ordering-process: /kosik/, /objednavka/) se nemeni; hlavicka na nich ano;
- bannery (#carousel, .next-to-carousel-banners, .body-banners, .footer-banners) a medaile (.flags) netknute;
- :has() jen uvnitr @supports selector(:has(*)); :focus-visible u novych ovladacich prvku; cile 44 px na mobilu;
- zadne prevody na verzalky / mala pismena (jen text-transform: none = vraceni textu z adminu);
- texty v content: maji alternativni text (content: "..." / "..."), ikony bez textu content: "" / "".
Bloky: 0 tokeny | 1 podklad | 2 horni lista | 3 hlavicka (pocitac) | 4 lista vyhod | 5 hlavicka (mobil)
6 nadpisy | 7 karty | 8 dostupnost | 9 vypis: podkategorie a razeni | 10 bocni panel a filtry
11 varianta B: typ vina v popisu kategorie | 12 detail | 13 drobeckova navigace | 14 fokus | 15 mobil
16 paticka (prevzato beze zmeny z verze c) */
/* 0 Tokeny (podle mockupu) */
:root {
--ph-bg: #FAF7F2; --ph-paper: #FFFFFF; --ph-ink: #211A17; --ph-muted: #6E645D; --ph-line: #E7E0D6; --ph-sand: #F1EBE1;
--ph-radius: 14px; --ph-brown: #8c6a3c; --ph-brown-2: #74572f;
--ph-rule: #6B1E2E; --ph-rule-hp: #B69C75; --ph-accent: #6B1E2E; --ph-link: #6B1E2E; --ph-wine-2: #8C2F41; --ph-ok: #2E7D32;
--ph-serif: Roboto, "Helvetica Neue", Arial, sans-serif;
--ph-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211A17' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");
--ph-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211A17' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.5 20.5c.6-4 3.7-6.2 7.5-6.2s6.9 2.2 7.5 6.2'/%3E%3C/svg%3E");
--ph-i-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211A17' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M5 8.5h14l-1.1 12H6.1L5 8.5Z'/%3E%3Cpath d='M9 8.5V7a3 3 0 0 1 6 0v1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* 1 Podklad: kremovy jen na vyctu typu stranek (titulni, kategorie, detail, znacka, vyhledavani).
Pokladna, clanky a ostatni zustavaji bile. Bannery maji vlastni pozadi, fotky produktu lezi na bilych plochach karet. */
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) { background-color: var(--ph-bg) !important; } /* sablona: bila s !important */
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .breadcrumbs-wrapper::before { background-color: transparent; background-image: none; } /* sablona: piskovy pas bc-bg.png */
/* 2 Horni lista (pocitac): klidna, bez verzalek, tenka linka */
@media (min-width: 768px) {
html .top-navigation-bar { background-color: var(--ph-paper); border-bottom: 1px solid var(--ph-line); }
html .top-navigation-bar .site-msg.information, html .top-navigation-bar .site-msg.information * { background-color: transparent; color: var(--ph-muted); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
html .top-navigation-bar .msg-part { min-width: 0; }
html .top-navigation-bar .site-msg.information .container { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .top-navigation-bar .top-navigation-bar-menu a { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ph-muted); }
html .top-navigation-bar .top-navigation-bar-menu a:hover { color: var(--ph-ink); }
}
/* 3 Hlavicka (pocitac): bila; logo | kompaktni hledani | prihlaseni a kosik jako ikony; kategorie v jednom radku pod tim */
@media (min-width: 768px) {
html #header .navigation-wrapper { background-color: var(--ph-paper); } /* ne na #header: ten je v sablone vyssi nez obsah */
html #header .header-top { gap: 8px; }
/* hledani: pole s lupou, bez velkeho tlacitka; tlacitko jen vizualne skryte (Enter odesle, ctecka ho najde) */
html #header .search { flex: 0 1 380px; margin-left: auto; margin-right: 16px; }
html #header .search form, html #header .search fieldset { position: relative; width: 100%; }
html #header .search .search-input {
height: 44px; width: 100%; padding: 0 16px 0 44px; border: 1px solid var(--ph-line); border-radius: 999px;
background: var(--ph-bg) var(--ph-i-search) no-repeat 16px 50% / 18px 18px; color: var(--ph-ink); font-size: 14px; box-shadow: none;
}
html #header .search .search-input::placeholder { color: var(--ph-muted); opacity: 1; }
html #header .search .search-input:focus { border-color: var(--ph-muted); background-color: var(--ph-paper); outline: none; }
html #header .search .search-input:focus-visible { outline: 2px solid var(--ph-ink); outline-offset: 2px; }
html #header .search button[type="submit"] {
position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0 !important;
}
html #header .search button[type="submit"]:focus-visible {
width: auto !important; height: 32px !important; padding: 0 12px !important; margin: 0 !important; right: 6px; top: 6px; clip: auto; clip-path: none;
background: var(--ph-paper) !important; color: var(--ph-ink) !important; -webkit-text-fill-color: var(--ph-ink) !important; border-radius: 999px; outline: 2px solid var(--ph-ink); z-index: 2;
}
/* prihlaseni: ikonka 44 px, text jen pro ctecky */
html #header .top-nav-button-login { width: 44px; height: 44px; min-height: 44px; padding: 0 !important; margin: 0; border-radius: 50%; }
html #header .top-nav-button-login::before {
content: "" / ""; left: 0 !important; top: 0 !important; width: 44px !important; height: 44px !important; border-radius: 50%;
background: transparent var(--ph-i-user) no-repeat 50% 50% / 22px 22px !important; /* sablona: sedy kruh s obrazkem */
}
html #header .top-nav-button-login:hover::before { background-color: var(--ph-sand) !important; }
html #header .top-nav-button-login > span {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* kosik: ikonka; prazdny = jen ikonka, plny = ikonka + cena + pocet */
html #header .navigation-buttons { order: 3; }
html #header .cart-count { display: flex; align-items: center; min-width: 44px; height: 44px; min-height: 44px; padding: 0 0 0 44px !important; border-radius: 999px; background: transparent; }
html #header .cart-count::before { content: "" / ""; left: 0 !important; top: 0 !important; width: 44px !important; height: 44px !important; border-radius: 50%; background: transparent var(--ph-i-bag) no-repeat 50% 50% / 22px 22px !important; } /* sablona: piskovy kruh s bilou ikonou */
html #header .cart-count:hover::before { background-color: var(--ph-sand) !important; }
html #header .cart-count:not(.full) > span, html #header .cart-count > .sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
html #header .cart-count.full { padding-right: 12px !important; }
html #header .cart-count.full .cart-price { display: inline-block; color: var(--ph-ink) !important; font-size: 14px; font-weight: 600; line-height: 20px; margin: 0; font-variant-numeric: tabular-nums; }
html #header .cart-count.full > i {
position: absolute; left: 26px; top: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
background: var(--ph-brown); color: #fff; font-style: normal; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
/* kategorie: bila rada s jemnymi linkami, tmavy text; texty z adminu beze zmeny */
/* pas pod kategoriemi: sablona ho kresli jako #header::before s top: 100 %, coz by s listou vyhod sjelo dolu;
misto toho bila plocha primo z #navigation (stin do stran, orez jen svisle = bez vodorovneho preteceni) */
html #header::before { display: none; }
html #navigation { background-color: var(--ph-paper) !important; box-shadow: 0 0 0 100vmax var(--ph-paper); clip-path: inset(0 -100vmax); }
html #navigation .menu-level-1 > li > a, html #navigation .menu-level-1 > li > a .submenu-arrow { color: var(--ph-ink); }
html #navigation .menu-level-1 > li > a b { color: var(--ph-ink); font-weight: 500; }
html #navigation .menu-level-1 > li > a:hover b, html #navigation .menu-level-1 > li > a.active b { box-shadow: inset 0 -2px 0 var(--ph-accent); }
html #header .menu-helper::after { filter: brightness(0); opacity: .8; }
}
/* 4 Lista vyhod: pseudo-prvek s textem (zadny zasah do obsahu). Pocitac = pod radou kategorii, na cele sirce.
Na pokladne (.ordering-process) se nezobrazuje. Ctecky ctou alternativni text za lomitkem. */
@media (min-width: 768px) {
html body:not(.ordering-process) #header::after {
content: "\2713 Prodejna v Pardubic\ED ch, hodnocen\ED 4,9 \2713 Osobn\ED odb\11B r zdarma \2713 D\E1 rkov\E9 krabice na v\ED no \2713 V\ED na z italsk\FD ch vina\159 stv\ED ";
content: "\2713 Prodejna v Pardubic\ED ch, hodnocen\ED 4,9 \2713 Osobn\ED odb\11B r zdarma \2713 D\E1 rkov\E9 krabice na v\ED no \2713 V\ED na z italsk\FD ch vina\159 stv\ED " / "Prodejna v Pardubic\ED ch, hodnocen\ED 4,9. Osobn\ED odb\11B r zdarma. D\E1 rkov\E9 krabice na v\ED no. V\ED na z italsk\FD ch vina\159 stv\ED .";
display: block; margin-top: 42px; /* 42 px = vyska rady kategorii (#navigation), ktera v sablone lezi pres tok */
height: 40px; line-height: 40px; white-space: pre; overflow: hidden; text-overflow: ellipsis; text-align: center;
font-size: 13px; font-weight: 500; color: #5A4A3A; background-color: var(--ph-sand); /* kolo 2b: piskovy pas, aby lista nesplyvala s bilym menu */
box-shadow: inset 0 1px 0 var(--ph-line);
}
}
/* pri posunu stranky sablona prepne hlavicku na pevnou (#header.fixed-menu, jen rada kategorii) - lista vyhod se tam neukazuje */
@media (min-width: 768px) {
html body:not(.ordering-process) #header.fixed-menu::after { display: none; }
/* sablona nahradi hlavicku pevnym odsazenim 115 px (bez listy) -> 40 px doplnit, aby obsah neposkocil */
html body:not(.ordering-process) #header.fixed-menu + * { margin-top: 40px; }
}
/* 5 Hlavicka (mobil): bily pas misto piskoveho; hamburger tmavy; kosik obrysovy s ikonkou (prazdny = jen ikonka) */
@media (max-width: 767px) {
html #header { background-color: var(--ph-paper) !important; box-shadow: inset 0 -1px 0 var(--ph-line), inset 0 1px 0 var(--ph-line); }
html .responsive-tools > a[data-target="navigation"] { filter: brightness(0); opacity: .85; } /* ikona menu je bily obrazek */
/* hledani a prihlaseni v horni rade: stejne linkove ikony jako na pocitaci, bez sedych kruhu */
html .responsive-tools > a[data-target="search"]::before { background: transparent var(--ph-i-search) no-repeat 50% 50% / 22px 22px !important; content: "" / ""; }
html .responsive-tools > a[data-target="login"]::before { background: transparent var(--ph-i-user) no-repeat 50% 50% / 22px 22px !important; content: "" / ""; }
html .responsive-tools > a:is([data-target="search"], [data-target="login"]), html .responsive-tools > a:is([data-target="search"], [data-target="login"])::after { background-color: transparent !important; } /* sablona: sedy / piskovy kruh */
html .responsive-tools > a[data-target="search"]::before { transform: none !important; } /* sablona: zrcadlena lupa */
html .responsive-tools > a:focus-visible { outline: 2px solid var(--ph-ink); outline-offset: 2px; }
html #header .navigation-buttons { align-items: center; }
html #header .cart-count { background: transparent !important; border: 1px solid var(--ph-line); border-radius: 999px; min-width: 44px; min-height: 44px; height: 44px; margin: 0; padding: 0 14px 0 40px !important; }
html #header .cart-count::before { content: "" / ""; width: 40px !important; height: 42px !important; left: 2px !important; top: 0 !important; background: transparent var(--ph-i-bag) no-repeat 50% 50% / 22px 22px !important; }
html #header .cart-count .cart-price { color: var(--ph-ink) !important; -webkit-text-fill-color: var(--ph-ink); font-weight: 600; font-size: 14px; }
html #header .cart-count:not(.full) { padding: 0 !important; width: 44px; }
html #header .cart-count:not(.full)::before { left: 1px !important; }
html #header .cart-count:not(.full) > span, html #header .cart-count > .sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
html #header .cart-count:focus-visible { outline: 2px solid var(--ph-ink); outline-offset: 2px; }
/* lista vyhod na mobilu: dve kratke polozky v obsahu (fixni hlavicka se nemeni) */
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) #content-wrapper::before {
content: "\2713 Hodnocen\ED prodejny 4,9 \2713 Osobn\ED odb\11B r zdarma";
content: "\2713 Hodnocen\ED prodejny 4,9 \2713 Osobn\ED odb\11B r zdarma" / "Hodnocen\ED prodejny v Pardubic\ED ch 4,9. Osobn\ED odb\11B r zdarma.";
display: block; padding: 10px 0; white-space: pre; overflow: hidden; text-overflow: ellipsis; text-align: center;
font-size: 12.5px; line-height: 18px; font-weight: 500; color: #5A4A3A; background-color: var(--ph-sand); margin: 0 -15px 12px; /* kolo 2b: piskovy pas na celou sirku */
}
}
/* 6 Nadpisy: Roboto 600, tenka linka pod H1 (jako verze c) */
html h1.category-title, html .p-detail-inner-header h1, html .homepage-group-title.h4, html body.type-detail .p-detail h2.products-related-header,
html body.type-detail .shp-tabs-wrapper .basic-description h3, html body.type-detail .shp-tabs-wrapper .extended-description h3 {
font-family: var(--ph-serif) !important; font-weight: 600; color: var(--ph-ink); letter-spacing: -.01em;
}
html h1.category-title { font-size: 40px; line-height: 1.1; }
html .p-detail-inner-header h1 { font-size: 34px; line-height: 1.15; }
html .homepage-group-title.h4 { font-size: 30px; line-height: 1.15; }
html body.type-detail .p-detail h2.products-related-header, html body.type-detail .shp-tabs-wrapper .basic-description h3, html body.type-detail .shp-tabs-wrapper .extended-description h3 { font-size: 24px; line-height: 1.2; }
html h1.category-title::after, html .p-detail-inner-header h1::after, html body.type-detail .p-detail h2.products-related-header::after,
html body.type-detail .shp-tabs-wrapper .basic-description h3::before, html body.type-detail .shp-tabs-wrapper .extended-description h3::before { background-color: var(--ph-rule); }
html .type-index .homepage-group-title.h4::after { background-color: var(--ph-rule-hp); }
/* 7 Karty produktu (mimo pokladnu): ramecek shora dolu, radius 14; horni cast s lahvi na piskovem pasparte
(fotky jsou JPG na bile -> lezi jako bila plocha s radiusem, bez multiply), dolni cast bila;
misto "Do kosiku" kulate "+" (nazev pro ctecky zustava z aria-label), nedostupne zbozi "Detail". */
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p {
border: 1px solid var(--ph-line); border-radius: var(--ph-radius); padding: 0; margin: 0 6px; background: var(--ph-paper); text-align: left; overflow: hidden; box-shadow: none;
}
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p > a.image {
display: block; margin: 0; padding: 14px; background: var(--ph-sand); border-bottom: 1px solid var(--ph-line); isolation: isolate;
}
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p > a.image > img { border-radius: 0; background: transparent; mix-blend-mode: multiply; }
/* kolo 2b (Pavel 23. 10.): bila plocha fotky splyne s piskovou jako v mockupu. Multiply jen na ![]()
v karte vypisu, ne na detailu,
bannerech ani stitcich (.flags jsou sourozenci obrazku). Riziko: bile etikety a svetle obaly dostanou nadech #F1EBE1 (asi 5 %). */
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .p-in,
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .p-bottom { padding: 0 14px; text-align: left; align-items: flex-start; }
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .p-bottom { margin-top: auto; padding-bottom: 14px; }
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .p-in .p-bottom { padding-left: 0; padding-right: 0; } /* .p-bottom je uvnitr .p-in */
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .p-bottom .prices { margin-bottom: 0; }
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .p-bottom .price-final { margin: 0; }
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .name {
margin-top: 12px; text-align: left; font-family: Roboto, sans-serif; font-weight: 500; font-size: 15px; line-height: 21px; letter-spacing: 0; color: var(--ph-ink);
}
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .name:hover { color: var(--ph-link); }
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .p-in .ratings-wrapper,
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .p-in .availability,
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .prices { justify-content: flex-start; align-items: flex-start; text-align: left; }
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .prices .price-final strong { color: var(--ph-ink) !important; font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p-bottom > [data-micro="offer"] {
display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; width: 100%; /* wrap: v uzke karte se "Detail" zalomi pod cenu, cenu nezakryje */
}
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p-bottom .prices { flex: 1 0 auto; white-space: nowrap; }
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p-bottom .p-tools { flex: 0 0 auto; margin: 0; width: auto; }
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p-bottom .p-tools form { width: auto; margin: 0; }
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product { background: transparent; }
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .p-bottom { display: flex; flex-direction: column; align-items: stretch; width: 100%; box-sizing: border-box; }
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .p-bottom > div:first-child { width: 100%; }
/* "+" v kolecku, 44 px; barva z PH-TLACITKA (#8c6a3c) */
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p button.btn.add-to-cart-button {
position: relative; width: 44px !important; height: 44px !important; min-width: 44px; min-height: 44px; padding: 0 !important; margin: 0;
border-radius: 50% !important; font-size: 0 !important; line-height: 0 !important; color: #fff !important;
}
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p button.btn.add-to-cart-button > span {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p button.btn.add-to-cart-button::before {
content: "" / ""; display: block; position: absolute; inset: 0; width: auto; height: auto; margin: 0; border: 0; transform: none; opacity: 1 !important; z-index: 1; /* sablona: hover vrstva opacity .08, z -1 */
background: linear-gradient(#fff, #fff) no-repeat 50% 50% / 14px 2px, linear-gradient(#fff, #fff) no-repeat 50% 50% / 2px 14px;
}
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p button.btn.add-to-cart-button::after { content: none; display: none; }
/* nedostupne zbozi: srozumitelne "Detail" jako obrysove tlacitko */
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p a.btn:not(.btn-cart) {
background: var(--ph-paper) !important; color: var(--ph-ink) !important; border: 1px solid #CFC4B5 !important; border-radius: 999px !important;
width: auto !important; height: 44px !important; min-height: 44px; padding: 0 18px !important; line-height: 42px !important; font-size: 14px; font-weight: 600;
display: inline-flex !important; align-items: center; justify-content: center;
}
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p a.btn:not(.btn-cart):hover { border-color: var(--ph-ink) !important; }
/* 8 Dostupnost: #32cb00 v libovolnem zapisu (Shoptet nema stavovou tridu) */
html .products-block .product .availability span { font-size: 13.5px; font-weight: 500; }
html .products-block .product .availability span[style*="32cb00" i], html body.type-detail .availability-value .availability-label[style*="32cb00" i] { color: var(--ph-ok) !important; }
/* 9 Vypis: podkategorie jako textove pilulky v jedne rade (mobil: vodorovne posuvne), razeni jako kompaktni segment bez "Abecedne" */
html .type-category .subcategories.with-image { display: flex; flex-wrap: wrap; gap: 8px; width: auto !important; margin: 4px 0 24px !important; padding: 0; }
html .type-category .subcategories.with-image li { width: auto; max-width: none; flex: 0 0 auto; padding: 0; margin: 0; }
html .type-category .subcategories.with-image li a {
display: flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--ph-line); border-radius: 999px; background: var(--ph-paper); color: var(--ph-ink); box-shadow: none;
}
html .type-category .subcategories.with-image li a:hover { border-color: var(--ph-ink); }
html .type-category .subcategories.with-image li a .image { display: none; }
html .type-category .subcategories.with-image li a .text { display: block; padding: 0; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; overflow: visible; max-width: none; color: var(--ph-ink); }
@media (min-width: 768px) {
html .type-category #category-header { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 16px; }
html .type-category #category-header .listSorting .listSorting__controls {
display: inline-flex; gap: 2px; padding: 3px; margin: 0; border: 1px solid var(--ph-line); border-radius: 999px; background: var(--ph-paper); box-shadow: none; width: auto;
}
html .type-category #category-header .listSorting .listSorting__controls li { flex: 0 0 auto; width: auto; margin: 0; padding: 0; border: 0; }
html .type-category #category-header .listSorting .listSorting__control {
width: auto; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent !important; color: var(--ph-muted);
font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; box-shadow: none !important;
}
html .type-category #category-header .listSorting .listSorting__control::before, html .type-category #category-header .listSorting .listSorting__control::after { display: none; }
html .type-category #category-header .listSorting .listSorting__control:hover { color: var(--ph-ink); }
html .type-category #category-header .listSorting .listSorting__control--current { background: var(--ph-sand) !important; color: var(--ph-ink) !important; font-weight: 600; }
}
html .type-category #category-header .listSorting #listSortingControl-name { display: none; }
@supports selector(:has(*)) {
html .type-category #category-header .listSorting .listSorting__controls li:has(> #listSortingControl-name) { display: none; }
}
/* nacist dalsi / strankovani: tmavy text na bezove (jako verze c) */
html .listingControls .btn-secondary, html .pagination .pagination__currentPage { color: var(--ph-ink) !important; -webkit-text-fill-color: var(--ph-ink) !important; }
html .listingControls .loadMore__button { min-height: 44px; line-height: 44px; }
/* 10 Bocni panel na vypisu: vlevo, jen filtry (kosik, hledani a strom kategorii pryc - jsou v hlavicce a menu).
Filtry: Cena, Typ vina, Oceneni a zakladni volby; ostatni zustavaji sbalene pod "Rozbalit filtr" (mechanika sablony). */
html body:is(.type-category, .type-manufacturer-detail) .sidebar .cart-sidebar-box,
html body:is(.type-category, .type-manufacturer-detail) .sidebar .box-search,
html body:is(.type-category, .type-manufacturer-detail) .sidebar .box-categories { display: none !important; }
@media (min-width: 992px) {
html body:is(.type-category, .type-manufacturer-detail) .content-wrapper-in { gap: 40px; }
html body:is(.type-category, .type-manufacturer-detail) aside.sidebar { order: -1; flex: 0 0 248px; width: 248px !important; max-width: 248px; }
html body:is(.type-category, .type-manufacturer-detail) main#content { flex: 1 1 auto !important; min-width: 0; width: calc(100% - 288px) !important; max-width: none; } /* sablona: flex-grow 0 s !important */
html body:is(.type-category, .type-manufacturer-detail) .sidebar .sidebar-inner { margin-top: 0 !important; top: 0; padding-top: 4px; }
html body:is(.type-category, .type-manufacturer-detail) .sidebar .box-filters { padding: 0 !important; margin: 0; background: transparent !important; border: 0; box-shadow: none; }
html body:is(.type-category, .type-manufacturer-detail) .sidebar #filters { background: transparent !important; padding: 0 !important; }
html body:is(.type-category, .type-manufacturer-detail) .sidebar .filters-wrapper > h4 { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ph-muted); margin: 0 0 12px; padding: 0; }
}
/* poradi sekci: Cena (prvni, mimo .filter-sections) > Typ vina > Oceneni > zakladni volby > Rozbalit filtr > ostatni */
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-sections { display: flex; flex-direction: column; }
html body:is(.type-category, .type-manufacturer-detail) #filters #category-filter-hover { display: contents !important; }
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-section-parametric-id-18 { order: 1; }
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-section-parametric-id-143 { order: 2; }
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-section-boolean { order: 3; }
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-section-button { order: 4; }
html body:is(.type-category, .type-manufacturer-detail) #filters #category-filter-hover > .filter-section { order: 5; }
html body:is(.type-category, .type-manufacturer-detail) #filters #category-filter-hover > .filter-section-count { order: 6; }
html body:is(.type-category, .type-manufacturer-detail) #filters #category-filter-hover > .filter-section-parametric-id-18 { order: 1; }
html body:is(.type-category, .type-manufacturer-detail) #filters #category-filter-hover > .filter-section-parametric-id-143 { order: 2; }
/* sbaleno: ze "skryte" casti zustava videt jen Typ vina a Oceneni */
html body:is(.type-category, .type-manufacturer-detail) #filters #category-filter-hover:not(.visible) > .filter-section:not(.filter-section-parametric-id-18):not(.filter-section-parametric-id-143) { display: none; }
/* zakladni volby bez vnitrniho posuvniku; Doprodej a Sleva pryc (Akce staci) */
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-section-boolean form { height: auto !important; max-height: none !important; overflow: visible !important; }
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-section-boolean input[data-filter-code="dd"]:is([data-filter-id="118"], [data-filter-id="121"]),
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-section-boolean input[data-filter-code="dd"]:is([data-filter-id="118"], [data-filter-id="121"]) + label { display: none; }
@supports selector(:has(*)) {
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-section-boolean div:has(> input[data-filter-code="dd"]:is([data-filter-id="118"], [data-filter-id="121"])) { display: none; }
/* kde je parametr Oceneni (vina), medaile v zakladnich volbach duplikuji -> skryt; jinde (Darky) zustavaji */
html body:is(.type-category, .type-manufacturer-detail) #filters:has(.filter-section-parametric-id-143) .filter-section-boolean div:has(> input[data-filter-code="dd"]:is([data-filter-id="146"], [data-filter-id="149"], [data-filter-id="152"], [data-filter-id="155"], [data-filter-id="158"])) { display: none; }
}
/* vzhled sekci */
html .sidebar .filter-section h4, html .sidebar .slider-wrapper h4, html #filters .filter-section h4, html #filters .slider-wrapper h4 {
font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ph-ink); margin: 0 0 8px;
}
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-section, html body:is(.type-category, .type-manufacturer-detail) #filters .slider-wrapper { padding: 14px 0; margin: 0; border: 0; border-top: 1px solid var(--ph-line); background: transparent; }
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-section-button { border-top: 0; padding-top: 4px; }
html .sidebar .filter-section label, html #filters .filter-section label { color: var(--ph-ink); font-size: 14px; }
html #filters .filter-section label .filter-count { color: var(--ph-muted); }
html #filters .toggle-filters { color: var(--ph-ink); font-weight: 500; text-transform: none; letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px; }
html .sidebar .pageElement__heading, html .sidebar .filters-wrapper > h4 { font-family: Roboto, sans-serif; font-weight: 600; color: var(--ph-ink); }
/* 11 Varianta B: radek "Vse / Cervene / Bile / Ruzove / Sumive" vlozeny do popisu kategorie Vina (viz kategorie-vina_popis.html).
Aktivni stav podle zaskrtnuteho filtru pv18 (jen s podporou :has). Kdyz je radek v popisu, na /vina/ zmizi dlazdice
podkategorii a filtr Typ vina v bocnim panelu (stejna volba by byla dvakrat). Bez radku v popisu se nic nemeni. */
html .type-category .category-perex .ph-typ { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 24px; padding: 0; }
html .type-category .category-perex .ph-typ a {
display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 1px solid var(--ph-line); border-radius: 999px;
background: var(--ph-paper); color: var(--ph-ink); font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none; white-space: nowrap;
}
html .type-category .category-perex .ph-typ a:hover { border-color: var(--ph-ink); }
html .type-category .category-perex .ph-typ a:focus-visible { outline: 2px solid var(--ph-ink); outline-offset: 3px; }
@supports selector(:has(*)) {
html body:not(:has(.filter-section-parametric-id-18 input:checked)) .category-perex .ph-typ a.ph-typ-vse,
html body:has([id="pv[]18"]:checked) .category-perex .ph-typ a.ph-typ-18,
html body:has([id="pv[]15"]:checked) .category-perex .ph-typ a.ph-typ-15,
html body:has([id="pv[]21"]:checked) .category-perex .ph-typ a.ph-typ-21,
html body:has([id="pv[]24"]:checked) .category-perex .ph-typ a.ph-typ-24 { background: var(--ph-ink); border-color: var(--ph-ink); color: #fff; }
html body.id-673:has(.category-perex .ph-typ) .subcategories.with-image,
html body.id-673:has(.category-perex .ph-typ) #filters .filter-section-parametric-id-18 { display: none !important; }
}
/* 12 Detail produktu: fotka na bile plose (podklad stranky je kremovy), nakupni panel ramecek 1 px bez stinu */
html body.type-detail .p-image-wrapper { background: var(--ph-paper); border: 1px solid var(--ph-line); border-radius: var(--ph-radius); padding: 12px; }
html .type-detail .price-line { background: var(--ph-paper); border: 1px solid var(--ph-line); border-radius: var(--ph-radius); box-shadow: none; }
html .type-detail .p-final-price-wrapper .price-final { font-size: 32px; color: var(--ph-ink); }
html body.type-detail .availability-value .availability-label { font-size: 16px; }
html body.type-detail .p-detail-info > div:not(.flags):not(.stars-wrapper) > a, html #product-detail-form .p-info-wrapper > p > a.chevron-after { color: var(--ph-link); }
html body.type-detail .p-thumbnails .p-thumbnail { border-color: var(--ph-line); border-radius: 10px; background: var(--ph-paper); }
html body.type-detail .p-thumbnails .p-thumbnail.highlighted { border-color: var(--ph-ink); }
html .type-detail .tab-content .extended-description .detail-parameters { background: transparent; border-top: 1px solid var(--ph-line); border-radius: 0; }
html .type-detail .tab-content .extended-description .detail-parameters tr { border-bottom: 1px solid var(--ph-line); }
html .type-detail .tab-content .extended-description .detail-parameters tr th { padding: 12px 12px 12px 0 !important; background: transparent; }
html .type-detail .tab-content .extended-description .detail-parameters tr td { padding: 12px 0 12px 12px !important; background: transparent; color: var(--ph-ink); font-weight: 500; }
html .type-detail .tab-content .extended-description .detail-parameters tr th .row-header-label { color: var(--ph-muted); font-weight: 400; font-size: 14px; }
html .type-detail .tab-content .extended-description .detail-parameters tr td a { color: var(--ph-link); }
html .type-detail .shp-tabs-holder, html .type-detail .shp-tabs-holder ul.shp-tabs { background: transparent; box-shadow: inset 0 -1px 0 var(--ph-line); border-radius: 0; }
html .type-detail .shp-tabs-holder ul.shp-tabs li a { background: transparent; color: var(--ph-muted); }
html .type-detail .shp-tabs-holder ul.shp-tabs li.active a, html .type-detail .shp-tabs-holder ul.shp-tabs li a:hover { background: transparent; color: var(--ph-ink); box-shadow: inset 0 -2px 0 var(--ph-accent); }
/* 12b Vedlejsi tlacitka (prevzato z verze c, kontrast): tmavy text na bezove */
html .sidebar .search .btn-default, html #filters-wrapper .filters-unveil-button-wrapper a.btn.unveil-button,
html .listingControls .btn-secondary, html .pagination .pagination__currentPage { color: var(--ph-ink) !important; -webkit-text-fill-color: var(--ph-ink) !important; }
/* 13 Drobeckova navigace */
html .breadcrumbs-wrapper .breadcrumbs a, html .breadcrumbs-wrapper .breadcrumbs a span { color: var(--ph-link); }
html .breadcrumbs-wrapper .breadcrumbs a:hover { color: var(--ph-wine-2); }
html .breadcrumbs-wrapper .breadcrumbs > span:last-child [itemprop="name"] { color: var(--ph-muted); }
/* 14 Fokus z klavesnice na dotcenych prvcich */
html #navigation .menu-level-1 > li > a:focus-visible, html .top-navigation-bar a:focus-visible, html #header .top-nav-button-login:focus-visible, html #header .cart-count:focus-visible,
html .products-block.products .product .p a:focus-visible, html .products-block.products .product .p .btn:focus-visible,
html .type-category .subcategories.with-image li a:focus-visible, html #category-header .listSorting .listSorting__control:focus-visible,
html .sidebar a:focus-visible, html .sidebar .btn:focus-visible, html #filters input:focus-visible + label, html .breadcrumbs-wrapper a:focus-visible,
html .type-detail .shp-tabs-holder ul.shp-tabs li a:focus-visible, html .type-detail .add-to-cart-button:focus-visible,
html #product-detail-form a:focus-visible, html .listingControls .btn:focus-visible, html #filters-wrapper a.btn:focus-visible {
outline: 2px solid var(--ph-ink) !important; outline-offset: 3px;
}
/* 15 Mobil */
@media (max-width: 767px) {
html h1.category-title { font-size: 30px; margin-bottom: 16px; }
html .homepage-group-title.h4 { font-size: 24px; }
html .p-detail-inner-header h1 { font-size: 27px; }
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p { margin: 0 4px; }
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p > a.image { padding: 6px 0 0; overflow: hidden; } /* kolo 2b: vetsi fotka */
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p > a.image > img { display: block; width: 100%; height: auto; } /* fotka na plnou sirku karty bez orezu (orez 10:9 urizl siroke sady) */
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .p-in .name { height: auto !important; max-height: 63px; -webkit-line-clamp: 3 !important; line-clamp: 3; } /* 3 radky misto 2 */
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .p-in,
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .p-bottom { padding-left: 10px !important; padding-right: 10px !important; } /* sablona na mobilu nuluje padding s !important */
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .p-in .p-bottom { padding-left: 0 !important; padding-right: 0 !important; } /* .p-bottom je uvnitr .p-in, odsazeni jen jednou */
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .p .p-in .name { font-size: 15px !important; line-height: 21px; }
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) .products-block.products .product .prices .price-final strong { font-size: 17px; }
/* podkategorie a radek typu vina: kolo 2b - zalamuji se do radku (jako mockup), nic nepretece ze stranky */
html .type-category .subcategories.with-image, html .type-category .category-perex .ph-typ {
display: flex; flex-wrap: wrap; overflow: visible; gap: 8px; margin: 0 0 16px !important; padding: 2px 0 0;
}
html .type-category .subcategories.with-image::-webkit-scrollbar, html .type-category .category-perex .ph-typ::-webkit-scrollbar { display: none; }
html .type-category .subcategories.with-image li a, html .type-category .category-perex .ph-typ a { min-height: 44px; }
html #filters-wrapper .filters-unveil-button-wrapper a.btn.unveil-button { min-height: 44px; line-height: 44px; color: var(--ph-ink) !important; -webkit-text-fill-color: var(--ph-ink) !important; background: var(--ph-paper) !important; border: 1px solid var(--ph-line) !important; border-radius: 999px; }
}
/* ===== verze b (23. 10. 2026, Pavel: lista vyhod pryc) ===== */
/* lista vyhod vypnuta (pocitac i mobil); pravidla vyse ponechana kvuli snadnemu navratu */
@media (min-width: 768px) {
html body:not(.ordering-process) #header::after { content: none !important; display: none !important; }
html body:not(.ordering-process) #header.fixed-menu + * { margin-top: 0; }
}
@media (max-width: 767px) {
html body:is(.type-index, .type-category, .type-detail, .type-manufacturer-detail, .type-search) #content-wrapper::before { content: none !important; display: none !important; }
}
/* detail: radky Doplnkovych parametru bez bileho podkladu (sablona: tr rgba(255,255,255,.92)) - Pavel 23. 10. */
html .type-detail .tab-content .extended-description .detail-parameters tr { background: transparent !important; }
/* menu kategorii (pocitac): piskovy pas #F1EBE1 - Pavel 23. 10. zvolil variantu 2 */
@media (min-width: 768px) {
html #navigation { background-color: var(--ph-sand) !important; box-shadow: 0 0 0 100vmax var(--ph-sand); }
html #header .navigation-wrapper { box-shadow: inset 0 -1px 0 var(--ph-line); }
}
/* OPRAVA 23. 10. (verze c): clip-path na #navigation orezaval rozbalovaci nabidku menu (mega menu) na pocitaci.
Pas pod kategoriemi znovu kresli sablona pres #header::before (jako ve verzi 20261022c), #navigation bez stinu a orezu. */
@media (min-width: 768px) {
html #navigation { clip-path: none !important; box-shadow: none !important; background-color: var(--ph-sand) !important; }
html #header::before { display: block !important; background-color: var(--ph-sand) !important; background-image: none !important; box-shadow: inset 0 -1px 0 var(--ph-line), inset 0 1px 0 var(--ph-line); }
html #header .navigation-wrapper { box-shadow: none; }
}
/* OPRAVA 23. 10. (verze c): popisy vlozene z Google Prekladace jako (4 produkty, napr. Monviert) se nezalamovaly
a pretekaly do bocniho panelu -> zalomit a pismo jako ostatni text */
html .type-detail .p-short-description pre, html .type-detail .basic-description pre, html .type-detail .extended-description pre {
white-space: pre-wrap !important; overflow-wrap: anywhere; font-family: inherit !important; font-size: inherit; background: transparent; border: 0; padding: 0; margin: 0 0 14px;
}
html .type-detail .p-short-description pre span, html .type-detail .basic-description pre span { font-family: inherit !important; white-space: inherit !important; }
/* ===== verze d (23. 10. 2026): navigace podle kontroly 20261023_kontrola-navigace (Pavel souhlasi s postupem) ===== */
/* d1 Vina: vinarsky pruchod zpet - podkategorie (Podle oblasti, vinarstvi, cukru, BiB, Kegy, Sety, Ocenena) jako tichy
druhy radek textovych odkazu pod volbami typu. Prebiji skryti z varianty B. */
@supports selector(:has(*)) {
html body.id-673.type-category:has(.category-perex .ph-typ) .category-top .subcategories.with-image {
display: flex !important; flex-wrap: wrap; align-items: center; gap: 2px 18px; margin: -10px 0 26px !important; padding: 0;
}
html body.id-673.type-category:has(.category-perex .ph-typ) .category-top .subcategories.with-image::before {
content: "Proch\E1 zet:"; font-size: 14px; font-weight: 600; color: var(--ph-ink); margin-right: -6px;
}
html body.id-673.type-category:has(.category-perex .ph-typ) .category-top .subcategories.with-image li a {
border: 0 !important; background: transparent !important; padding: 6px 0 !important; min-height: 32px; border-radius: 0; box-shadow: none;
}
html body.id-673.type-category:has(.category-perex .ph-typ) .category-top .subcategories.with-image li a .text {
color: var(--ph-muted); font-size: 14px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--ph-line); text-underline-offset: 4px;
}
html body.id-673.type-category:has(.category-perex .ph-typ) .category-top .subcategories.with-image li a:hover .text { color: var(--ph-ink); text-decoration-color: currentColor; }
}
/* d2 Filtry: Oblast a Znacky (= vinarstvi) viditelne hned; poradi Typ > Oceneni > Oblast > Znacky > Na sklade/Akce...; zbytek pod "Dalsi filtry" */
html body:is(.type-category, .type-manufacturer-detail) #filters #category-filter-hover:not(.visible) > .filter-section:is(.filter-section-parametric-id-27, .filter-section-manufacturer) { display: block !important; }
html body:is(.type-category, .type-manufacturer-detail) #filters #category-filter-hover > .filter-section-parametric-id-27 { order: 3; }
html body:is(.type-category, .type-manufacturer-detail) #filters #category-filter-hover > .filter-section-manufacturer { order: 4; }
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-section-boolean { order: 5; }
html body:is(.type-category, .type-manufacturer-detail) #filters #category-filter-hover > .filter-section:not(.filter-section-parametric-id-18):not(.filter-section-parametric-id-143):not(.filter-section-parametric-id-27):not(.filter-section-manufacturer):not(.filter-section-count) { order: 6; }
html body:is(.type-category, .type-manufacturer-detail) #filters #category-filter-hover > .filter-section-count { order: 7; }
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-section-button { order: 8; }
/* d3 "Rozbalit filtr" -> zretelne tlacitko "Dalsi filtry" (po kliknuti sablona tlacitko skryje a ukaze zbytek filtru) */
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-section-button a.toggle-filters {
display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 16px;
border: 1px solid #CFC4B5; border-radius: 999px; background: var(--ph-paper); font-size: 0 !important; text-decoration: none !important; color: var(--ph-ink) !important;
}
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-section-button a.toggle-filters::before { content: "Dal\161 \ED filtry"; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ph-ink); }
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-section-button a.toggle-filters:hover { border-color: var(--ph-ink); }
html body:is(.type-category, .type-manufacturer-detail) #filters .filter-section-button a.toggle-filters:focus-visible { outline: 2px solid var(--ph-ink); outline-offset: 3px; }
/* d4 Detail: bocni panel (kosik, hledani, strom kategorii) pryc - cestu daji drobecky a menu; obsah na celou sirku */
@media (min-width: 768px) {
html body.type-detail .content-wrapper-in > .sidebar { display: none !important; }
html body.type-detail .content-wrapper-in > #content { flex: 1 1 100%; width: 100% !important; max-width: 100% !important; }
}
/* d5 Drobeckova navigace: tlumena hneda misto vinove, aktualni stranka tmava, oddelovace svetle */
html .breadcrumbs-wrapper .breadcrumbs a, html .breadcrumbs-wrapper .breadcrumbs a span { color: var(--ph-muted) !important; text-decoration: none; }
html .breadcrumbs-wrapper .breadcrumbs a:hover, html .breadcrumbs-wrapper .breadcrumbs a:hover span { color: var(--ph-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
html .breadcrumbs-wrapper .breadcrumbs > span:last-child [itemprop="name"] { color: var(--ph-ink) !important; font-weight: 500; }
html .breadcrumbs-wrapper .breadcrumbs .navigation-bullet { color: #B8AEA3; }
html .breadcrumbs-wrapper .breadcrumbs a:focus-visible { outline: 2px solid var(--ph-ink); outline-offset: 2px; }
/* d6 Mobil: radek "Prochazet" skryty (Pavel 23. 10.: tri radky, duplicita s "Otevrit filtr"; Oblast a Znacky jsou ve filtru, kategorie v menu) */
@media (max-width: 767px) {
html body.id-673.type-category .category-top .subcategories.with-image { display: none !important; }
@supports selector(:has(*)) {
html body.id-673.type-category:has(.category-perex .ph-typ) .category-top .subcategories.with-image { display: none !important; } /* stejna specificita jako d1, pozdeji v kaskade */
}
}
/* d7 Pocitac: razeni jako rozbalovaci vyber vpravo vedle nadpisu (radek razeni zmizi).
Zavreno = jen aktualni volba s sipkou; najeti mysi nebo fokus (Tab, dotyk) ukaze ostatni volby nad vypisem. */
@media (min-width: 768px) {
html body.type-category #content { position: relative; }
html body.type-category #content h1.category-title { padding-right: 240px; }
html body.type-category #content #category-header { display: block; min-height: 0; height: 0; margin: 0 !important; padding: 0 !important; border: 0; }
html body.type-category #content #category-header .listSorting { position: absolute; top: 6px; right: 0; z-index: 30; margin: 0; }
html body.type-category #content #category-header .listSorting .listSorting__controls {
display: flex; flex-direction: column; gap: 0; width: 220px; padding: 4px; border-radius: 14px; border: 1px solid var(--ph-line); background: var(--ph-paper);
}
html body.type-category #content #category-header .listSorting .listSorting__controls li { width: 100%; }
html body.type-category #content #category-header .listSorting .listSorting__control {
display: none; width: 100%; min-height: 40px; padding: 0 14px; border-radius: 10px; text-align: left; justify-content: flex-start;
}
html body.type-category #content #category-header .listSorting .listSorting__control--current { display: flex; align-items: center; background: transparent !important; font-weight: 600; }
html body.type-category #content #category-header .listSorting .listSorting__control--current::before {
display: inline !important; content: "\158 adit: "; position: static; width: auto; height: auto; background: none; opacity: 1; transform: none; border: 0;
margin-right: 4px; font-weight: 400; color: var(--ph-muted);
}
html body.type-category #content #category-header .listSorting .listSorting__control--current::after {
display: inline-block !important; content: ""; position: static; width: 8px; height: 8px; margin: -4px 0 0 auto; background: none; opacity: 1;
border-right: 1.5px solid var(--ph-ink); border-bottom: 1.5px solid var(--ph-ink); transform: rotate(45deg);
}
html body.type-category #content #category-header .listSorting:is(:hover, :focus-within) .listSorting__control { display: flex; align-items: center; }
html body.type-category #content #category-header .listSorting:is(:hover, :focus-within) .listSorting__control--current { background: var(--ph-sand) !important; }
html body.type-category #content #category-header .listSorting:is(:hover, :focus-within) .listSorting__control--current::after { transform: rotate(-135deg); margin-top: 4px; }
html body.type-category #content #category-header .listSorting:is(:hover, :focus-within) .listSorting__controls { border-color: #CFC4B5; }
html body.type-category #content #category-header .listSorting #listSortingControl-name { display: none !important; }
}
/* PH-VZHLED doplnek: kompaktni paticka 2026-10-22, nasazeno 22. 10. (Pavel: "paticka zmensena je fajn"). Nacitat ZA ph-vzhled-20261022.css.
Jen CSS, obsah polozek beze zmeny. Nesaha na pole Zapati (HTML kody) ani na .footer-banners.
Jedna zona: [znacka: logo, firma, ikony FB/IG] [Informace pro vas] [Kontakt: telefon, e-mail]
+ tenka spodni lista (copyright, cookies, podpis Shoptet/Shoptak, nahoru).
Slouceni: bloky .site-name a .custom-footer__contact se rozlozi (display: contents) do jedne mrizky.
Skryto: duplicitni e-mail a telefon v bloku Kontakt (zustava sada s ikonami), nadpis "Zakaznicka podpora:"
(nadpis Kontakt staci), widget Facebooku (ikona FB je v ikonach; ROZHODNUTI PRO PAVLA, viz navrh). */
/* zona */
html #footer { border-top: 1px solid #E7E0D6; }
html #footer .footer-rows { padding-top: 0; padding-bottom: 0; }
html #footer .custom-footer {
display: grid !important; gap: 4px 48px; padding: 32px 0 24px; align-items: start;
grid-template-columns: minmax(200px, 1fr) minmax(0, 1.4fr) minmax(200px, 1fr);
grid-template-areas: "logo ih kh" "firma il kont" "soc il kont";
}
html #footer .custom-footer > div, html #footer .site-name .inner-box { padding: 0; margin: 0; width: auto; max-width: none; }
html #footer .site-name, html #footer .site-name .inner-box, html #footer .custom-footer__contact, html #footer .contact-box, html #footer .custom-footer__articles { display: contents; }
html #footer .site-name .inner-box::before, html #footer .site-name .inner-box::after { display: none; }
html #footer .custom-footer__facebook, html #footer .contact-box > ul, html #footer .site-name .inner-box > strong { display: none !important; }
/* znacka */
html #footer .site-name .inner-box > a { grid-area: logo; display: block; margin: 0 0 8px; }
html #footer .site-name .inner-box > a img { width: 132px; height: auto; }
html #footer .contact-box > strong { grid-area: firma; font-size: 14px; font-weight: 500; color: #6E645D; margin: 0; }
html #footer .contact-socials { grid-area: soc; display: flex; gap: 4px; margin: 8px 0 0; }
html #footer .contact-socials span a { margin: 0; width: 44px; height: 44px; display: grid; place-items: center; }
/* Informace pro vas: odkazy ve dvou sloupcich */
html #footer .custom-footer__articles > h3 { grid-area: ih; }
html #footer .custom-footer__articles > ul { grid-area: il; columns: 2; column-gap: 32px; margin: 0; padding: 0; }
html #footer .custom-footer__articles li { break-inside: avoid; }
html #footer .custom-footer__articles a { display: inline-block; font-size: 14px; line-height: 20px; margin: 0; padding: 4px 0; color: #211A17; }
html #footer .custom-footer__articles a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* nadpisy bloku: male, bez carky */
html #footer .pageElement__heading { font-size: 15px; line-height: 20px; font-weight: 600; margin: 0 0 8px; padding: 0; color: #211A17; }
html #footer .pageElement__heading::before, html #footer .pageElement__heading::after { display: none !important; }
html #footer .custom-footer__contact > h3 { grid-area: kh; }
html #footer .custom-footer__articles > h3, html #footer .custom-footer__contact > h3 { align-self: end; margin-bottom: 4px; }
/* Kontakt: telefon a e-mail s ikonami */
html #footer .site-name .contacts { grid-area: kont; margin: 0; padding: 0; }
html #footer .site-name .contacts a { font-size: 15px; line-height: 20px; font-weight: 500; margin: 0; padding: 6px 0; min-height: 32px; align-items: center; color: #211A17; }
/* spodni lista: jedna tenka rada */
html #footer .footer-bottom {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
padding: 12px 40px !important; border-top: 1px solid #E7E0D6; text-align: left; /* sablona: 30px 20px !important */
}
html #footer .footer-bottom .copyright { order: 1; flex: 1 1 auto; min-width: 0; display: block; margin: 0; text-align: left; font-size: 12.5px; line-height: 18px; color: #6E645D; }
html #footer .footer-bottom .copyright a.cookies-settings { display: inline; margin-left: 10px; }
html #footer .footer-bottom .copyright .podpis a { display: inline; }
html #footer .footer-bottom .podpis { margin-left: 14px; }
html #footer .footer-bottom #signature { order: 2; flex: 0 0 auto; margin-left: auto; line-height: 0; }
html #footer .footer-bottom #signature img { width: 14px; height: 14px; }
html #footer .footer-bottom .copyright strong { color: #6E645D; font-weight: 500; }
html #footer .footer-bottom .copyright a.cookies-settings { color: #6E645D; text-decoration: underline; text-underline-offset: 2px; }
html #footer .footer-bottom .podpis { display: inline !important; margin: 0; font-size: 11.5px; color: #6E645D; text-align: left; } /* sablona: block !important */
html #footer .footer-bottom .podpis a { color: inherit; }
html #footer .footer-bottom .back-to-top { order: 3; position: static; width: 32px; height: 32px; padding: 0; margin: 0; display: grid; place-items: center; border-width: 1px; }
html #footer .footer-bottom .back-to-top img { width: 14px; height: 14px; }
/* od 1760 px sablona rusi bocni odsazeni kontejneru; spodni lista se zarovna stejne */
@media (min-width: 1760px) { html #footer .footer-bottom { padding-left: 0 !important; padding-right: 0 !important; } }
/* radek Adulto pod patickou (vklada doplnek, ponechan viditelny) */
html #adulto-footer { display: block; padding: 0 0 12px; font-size: 12px; color: #6E645D; }
/* fokus */
html #footer a:focus-visible { outline: 2px solid #211A17; outline-offset: 3px; }
/* mobil: kompaktni bloky pod sebou */
@media (max-width: 767px) {
html #footer .footer-rows { padding-left: 15px; padding-right: 15px; }
html #footer .custom-footer {
grid-template-columns: 1fr auto; gap: 4px 16px; padding: 24px 0 16px; text-align: left;
grid-template-areas: "logo soc" "firma soc" "kh kh" "kont kont" "ih ih" "il il";
}
html #footer .contact-socials { margin: 0; align-self: center; }
html #footer .custom-footer__contact > h3 { margin-top: 16px; }
html #footer .custom-footer__articles > h3 { margin-top: 16px; }
html #footer .custom-footer__articles ul { column-gap: 16px; }
html #footer .custom-footer__articles a { padding: 6px 0; min-height: 32px; }
html #footer .pageElement__heading, html #footer .custom-footer__articles > ul, html #footer .site-name .contacts a { text-align: left; justify-content: flex-start; }
html #footer .footer-bottom { padding: 10px 15px !important; gap: 6px 10px; }
html #footer .footer-bottom .copyright { flex: 1 1 0; }
html #footer .footer-bottom .copyright a.cookies-settings { margin-left: 6px; }
html #footer .footer-bottom .podpis { display: block !important; margin: 2px 0 0; }
html #footer .footer-bottom #signature { order: 2; margin: 0; }
}