/* =========================================================================
VYROBIMENAMIRU.CZ – vlastní CSS
Nahrazuje původní <style> v Nastavení -> Editor -> HTML kódy -> Záhlaví.
Do Záhlaví patří jen:
<link rel="stylesheet" href="/user/documents/upload/style.css?v=1">
Při KAŽDÉ změně tohoto souboru zvedni verzi v URL (?v=1 -> ?v=2), jinak
prohlížeče budou servírovat starou verzi z roční cache.
========================================================================= */

/* -------------------------------------------------------------------------
1) PŮVODNÍ ÚPRAVY (beze změny obsahu, jen přesunuto ze Záhlaví)
------------------------------------------------------------------------- */

/* ZVĚTŠENÍ LOGA */
@media (min-width: 768px) {
#header .site-name a img {
max-height: 100px !important;
height: auto;
}
}
@media (max-width: 767px) {
#header .site-name a img {
max-height: 40px !important;
height: auto;
}
}

/* ZAOBLENÁ TLAČÍTKA */
.products-block > div .p .p-bottom > div .p-tools .btn.btn-cart.btn-primary,
.products-block > div .p .p-bottom > div .p-tools .btn.btn-primary {
line-height: 30px;
border-radius: 10px;
}

/* ODSAZENÍ SIDEBAR BLOKU NA DESKTOPU */
@media (min-width: 992px) {
.sidebar-inner {
padding-left: 10px;
}
}

/* ODSTRANĚNÍ ZBYTEČNÉHO ODSAZENÍ V ZOBRAZENÍ PRO TELEFONY */
@media (max-width: 991px) {
.overall-wrapper {
padding-top: 55px;
}
}

/* SJEDNOCENÉ STYLY PRO PŮVODNÍ SELECTY (VARIANTY A PŘÍPLATKY)
Zůstávají funkční jako záložní zobrazení, když je TILES_LIVE = false,
nebo když se dlaždicový JS z nějakého důvodu nenačte. */
.surcharge-list, .variant-list {
display: flex;
align-items: flex-start;
gap: 5px;
margin-bottom: 1px;
}

.surcharge-list .surcharge-label,
.surcharge-list .variant-label,
.variant-list .surcharge-label,
.variant-list .variant-label {
flex-basis: 200px;
flex-shrink: 0;
padding-top: 5px;
}

.surcharge-list select,
.variant-list select {
flex-grow: 1;
max-width: 250px;
height: 40px;
line-height: normal;
padding: 0 10px;
border-radius: 10px;
box-sizing: border-box;
}

@media (max-width: 767px) {
.surcharge-list, .variant-list {
flex-direction: column;
gap: 0;
}
.surcharge-list .surcharge-label,
.surcharge-list .variant-label,
.variant-list .surcharge-label,
.variant-list .variant-label {
flex-basis: auto;
padding-top: 0;
margin-bottom: 5px;
}
}

/* ZAOBLENÍ A BARVA KOŠÍKU */
.p-to-cart-block {
background-color: #f7f7f7;
border-radius: 10px;
}

.btn.btn-cart, .btn.btn-conversion, a.btn.btn-cart, a.btn.btn-conversion {
background-color: var(--color-secondary);
border-color: var(--color-secondary);
color: #1a1937;
border-radius: 10px;
}

/* ZMENŠENÍ ROZESTUPU NADPISU NA ÚVODNÍ STRÁNCE */
.homepage-group-title {
font-size: 34px;
margin-bottom: 10px;
margin-top: 10px;
text-align: center;
}

.flag.flag-new {
background-color: #a58d67;
}

/* ZAROVNÁNÍ HLAVNÍHO NADPISU NA STŘED */
#content h1 {
text-align: center !important;
margin-top: 10px;
margin-bottom: 20px;
color: #1a1937;
}

/* -------------------------------------------------------------------------
2) DLAŽDICOVÝ VÝBĚR VARIANT A PŘÍPLATKŮ
Vychází z verze nasazené na vendyshop.cz (v5, 23. 9. 2026), upraveno pro
tento e-shop. Skript (tiles.js) skryje původní <select> a vloží místo něj
.vnm-tiles blok se stejnou strukturou label + dlaždice.
------------------------------------------------------------------------- */

.vnm-tiles-wrap {
margin-bottom: 12px;
}

.vnm-tiles-label {
font-weight: 600;
margin-bottom: 6px;
color: #1a1937;
}

/* Oprava #4: vždy viditelný text s názvem aktuálně vybrané barvy (dřív šel
poznat jen z hover tooltipu na PC, na mobilu vůbec). */
.vnm-tiles-selected-color {
font-size: 13px;
color: #55524f;
margin-top: -2px;
margin-bottom: 6px;
min-height: 16px;
}

.vnm-tiles {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

/* Skrytí originálního řádku (select + label), když jsou dlaždice aktivní.
Element se jen skryje přes JS přidáním této třídy - v DOM zůstává. */
.vnm-original-hidden {
display: none !important;
}

/* --- Základní dlaždice (textové: velikost, střih, příplatky) --- */
.vnm-tile {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 40px;
padding: 0 14px;
border: 2px solid #d8d8d8;
border-radius: 10px;
background: #fff;
color: #1a1937;
font-size: 14px;
line-height: 1;
cursor: pointer;
user-select: none;
transition: border-color .15s ease, background-color .15s ease, color .15s ease;
box-sizing: border-box;
}

.vnm-tile:hover:not(.vnm-tile--unavailable) {
border-color: var(--color-primary, #003f56);
}

.vnm-tile.vnm-tile--active {
border-color: var(--color-secondary, #a58d67);
background: var(--color-secondary, #a58d67);
color: #fff;
}

.vnm-tile.vnm-tile--unavailable {
position: relative;
color: #b3b3b3;
border-color: #ececec;
background: #f7f7f7;
cursor: not-allowed;
}

.vnm-tile.vnm-tile--unavailable::after {
content: "";
position: absolute;
left: 6%;
right: 6%;
top: 50%;
border-top: 1.5px solid #c2c2c2;
transform: rotate(-8deg);
}

/* Příplatek s cenou: hlavní text + cena na druhém řádku */
.vnm-tile--surcharge {
flex-direction: column;
height: auto;
min-height: 40px;
padding: 6px 14px;
line-height: 1.3;
text-align: center;
}

.vnm-tile--surcharge .vnm-tile-price {
font-size: 12px;
opacity: .8;
}

.vnm-tile.vnm-tile--active .vnm-tile-price {
opacity: 1;
}

/* Piktogram umístění potisku (silueta trika s tečkou) */
.vnm-tile--surcharge-icon {
padding-top: 8px;
}

.vnm-tile-icon {
width: 26px;
height: 30px;
margin-bottom: 2px;
}

.vnm-icon-body {
fill: none;
stroke: #b9b9b9;
stroke-width: 1.5;
}

.vnm-icon-dot {
fill: var(--color-secondary, #a58d67);
}

.vnm-tile.vnm-tile--active .vnm-icon-body {
stroke: #fff;
}

.vnm-tile.vnm-tile--active .vnm-icon-dot {
fill: #fff;
}

.vnm-tile--unavailable .vnm-icon-dot {
fill: #c2c2c2;
}

/* --- Barevné dlaždice (kruhové vzorky) --- */
.vnm-tiles--colors {
max-width: 368px;
}

.vnm-tile--color {
width: 40px;
height: 40px;
min-width: 40px;
padding: 0;
border-radius: 50%;
border: 2px solid #e2e2e2;
overflow: hidden;
position: relative;
}

.vnm-tile--color .vnm-swatch {
position: absolute;
inset: 3px;
border-radius: 50%;
}

/* Dvoubarevné/pruhované vzorky (např. "námořní modrá/bílá") */
.vnm-tile--color .vnm-swatch--split {
background: linear-gradient(
to bottom,
var(--vnm-c1) 0 50%,
var(--vnm-c2) 50% 100%
);
}

.vnm-tile--color.vnm-tile--active {
border-color: var(--color-secondary, #a58d67);
background: #fff;
}

.vnm-tile--color.vnm-tile--active .vnm-swatch {
inset: 4px;
}

.vnm-tile--color.vnm-tile--unavailable .vnm-swatch {
opacity: .35;
}

.vnm-tile--color.vnm-tile--unavailable::after {
left: 15%;
right: 15%;
}

/* Barva, která chybí v tabulce hex kódů -> textová dlaždice se jménem */
.vnm-tile--color-text {
width: auto;
border-radius: 10px;
padding: 0 10px;
font-size: 12px;
}

@media (min-width: 768px) {
.vnm-tiles--colors {
/* 2 řady po 7 (7 x 44px šířka dlaždice + gap ~8px = ~364px) */
}
}

@media (max-width: 767px) {
.vnm-tiles--colors {
max-width: 100%;
}
.vnm-tile--color,
.vnm-tile {
min-width: 40px;
}
}

/* -------------------------------------------------------------------------
3) OPRAVY DLE DESIGN SYSTÉMU (UX/UI review 27. 9. 2026)
Sjednocení barev, které byly mimo paletu manuálu.
------------------------------------------------------------------------- */

/* Štítek "Lze potisknout" byl plnou cizí zelenou (#84bf18), mimo paletu,
a bil se se štítkem Novinka (plná zlatá). Nahrazeno obrysovou variantou
v barvě primární tmavě modré - stejná gramatika jako ostatní štítky,
ale nekonkuruje "Novince" o pozornost.

28. 9. 2026 - DŮLEŽITÁ OPRAVA: administrace Shoptetu (Nastavení příznaku
"Lze potisknout" -> Barva příznaku) posílá na element ještě VLASTNÍ
inline styl "background-color: #003f56" (tmavě modrá). Inline styl má
vždy přednost před obyčejným pravidlem ve stylesheetu, takže bez
"!important" u background-color se bílé pozadí níže vůbec neuplatnilo -
zůstalo tmavě modré pozadí, ale barva textu z tohoto pravidla (taky tmavě
modrá, aby ladila s bílým pozadím) se uplatnila. Výsledek: tmavě modrý
text na tmavě modrém pozadí = neviditelný text (hlášeno jako "na mobilu
je celý modrý a text není vidět"). Přidáním "!important" k background-color
se teď bílé pozadí prosadí vždy, bez ohledu na barvu nastavenou v adminu. */
.flag.flag-custom1 {
background-color: #ffffff !important;
border: 1.5px solid var(--color-primary, #003f56);
color: var(--color-primary, #003f56);
border-radius: 10px;
}

/* Tlačítko "Nahrát soubor s motivem" bylo černé - jediné černé místo na
celém webu. Manuál: černá se používá jen výjimečně, nahrazuje ji tmavě
modrá. Přebarveno na primární tmavě modrou, stejné zaoblení jako ostatní
tlačítka a dlaždice. */
label.dkLabFileButton {
background-color: var(--color-primary, #003f56) !important;
border-radius: 10px;
}

/* Jemný brandový pruh nad patičkou - přechod přes celou paletu, aby konec
stránky navazoval na barevnost zbytku webu (hero bannery, dlaždice). */
#footer {
border-top: 3px solid #003f56;
border-image: linear-gradient(90deg, #003f56, #005d81, #407e8d, #a58d67) 1;
}

/* -------------------------------------------------------------------------
4) OPRAVA #5 - vyskakovací košík mimo obrazovku po scrollu (28. 9. 2026)

Element vyskakovacího košíku (#cart-widget) je "position: absolute" a jeho
"top" je spočítaný jednou vůči celému dokumentu (podle pozice ikony košíku
v hlavičce). Pokud zákazník klikne na "Do košíku" až po odscrollování dolů
(běžné u delšího popisu produktu), zůstane okno fyzicky vysoko nad
viditelnou částí stránky - vypadá to, že se nic nezobrazilo, i když je
okno ve skutečnosti otevřené, jen mimo obrazovku.

Zkoušeli jsme řešit přidaným JS scrollováním stránky nahoru při otevření
okna, ale Shoptet má vlastní blokování scrollu pozadí, dokud je okno
košíku otevřené (aby se stránka pod modálním oknem nehýbala) - to naše
scrollování rovnou potlačí zpět.

Spolehlivější řešení: když je okno košíku otevřené (Shoptet přidává třídu
"cart-window-visible" na <body>), přepneme #cart-widget z "position:
absolute" na "position: fixed" s pevnou pozicí vzhledem k oknu prohlížeče.
Tím je okno vždy viditelné bez ohledu na to, jak je stránka odscrollovaná -
není totiž vázané na polohu v dokumentu, ale na viewport. */
body.cart-window-visible #cart-widget.cart-widget {
position: fixed !important;
top: 90px !important;
right: 5% !important;
left: auto !important;
bottom: auto !important;
max-height: calc(100vh - 110px) !important;
overflow-y: auto !important;
}

@media (max-width: 767px) {
body.cart-window-visible #cart-widget.cart-widget {
top: 70px !important;
right: 4% !important;
left: 4% !important;
width: auto !important;
max-height: calc(100vh - 90px) !important;
box-sizing: border-box !important;
}
}

/* -------------------------------------------------------------------------
8) OPRAVA #10 - i po opravě #9 zůstával pruh "doprava zdarma" schovaný pod
vlastní lištou mobilního Safari (28. 9. 2026)

"100vh" v mobilním Safari počítá s NEJVĚTŠÍ možnou výškou okna prohlížeče -
tedy se stavem, kdy je adresní řádek/dolní lišta Safari schovaná (po
scrollu). Hned po načtení stránky nebo po interakci ale Safari svoji lištu
obvykle ukazuje, takže skutečně viditelná plocha je NIŽŠÍ než 100vh - popup
počítaný podle "calc(100vh - 90px)" tak byl vyšší, než kolik se reálně
vejde na obrazovku, a jeho spodní část (tlačítko + pruh dopravy zdarma)
zůstávala fyzicky pod lištou Safari, i když je uvnitř popupu (flex) správně
"přilepená" dole - problém nebyl ve flexboxu, ale v tom, že celý popup byl
posazený moc vysoko.

Oprava: "100dvh" (dynamic viewport height) - novější jednotka, kterou
mobilní Safari (od verze 15.4) přepočítává podle AKTUÁLNĚ viditelné plochy,
ne podle té největší možné. Ponecháno i původní "100vh" pravidlo řádek
předtím jako zálohu pro prohlížeče, které "dvh" neznají (ty si ho prostě
nevšimnou a zůstane jim platit "vh" verze). */
@media (max-width: 767px) {
body.cart-window-visible #cart-widget.cart-widget {
max-height: calc(100dvh - 90px) !important;
}
}

/* -------------------------------------------------------------------------
6) OPRAVA #6 - v okně "Objednejte ještě za X Kč a budete mít dopravu
ZDARMA" nešel přečíst text zvýrazněný tučně (částka a slovo "ZDARMA") a
ukazatel průběhu (šedý pruh) byl skoro neviditelný (28. 9. 2026)

Shoptetova výchozí šablona pro tento textový blok počítá s tím, že se
zobrazuje na barevném (např. oranžovém) podkladu - tučně zvýrazněná
částka a slovo "ZDARMA" jsou proto nastavené na bílou barvu textu a
ukazatel průběhu je taky bílý na světle šedém podkladu. V našem
vyskakovacím košíku (bílé pozadí) tak byl tučný text i ukazatel prakticky
neviditelný - zůstal viditelný jen běžný (netučný) text kolem něj. */
#cart-widget .cart-free-shipping strong {
color: #003f56 !important;
}
#cart-widget .cart-free-shipping .price-range {
background: #e2e2e2 !important;
}
#cart-widget .cart-free-shipping .price-range > div {
background: #a58d67 !important;
}

/* -------------------------------------------------------------------------
7) OPRAVA #9 - na mobilu bylo nutné popup košíku scrollovat, aby šel vidět
text "Objednejte ještě za X Kč a budete mít dopravu ZDARMA" úplně dole
(28. 9. 2026)

S více položkami v košíku je obsah popupu (seznam produktů + tlačítko +
text o dopravě zdarma) vyšší, než kolik se vejde do dostupné výšky na
mobilu. Seznam produktů (".cart-widget-products") i tlačítko s textem o
dopravě zdarma (".cart-widget-bottom") byly součástí jednoho a téhož
scrollovacího kontejneru (celé okno popupu), takže se text o dopravě
zdarma odscrolloval pryč spolu se seznamem produktů - zákazník ho viděl,
jen když si popup sám doscrolloval na konec.

Oprava: na mobilu se z popupu udělá svislý flex kontejner - seznam
produktů (".cart-widget-products") se scrolluje sám uvnitř své vlastní
části (roste/mrská se podle místa), zatímco tlačítko "Pokračovat do
košíku" a text o dopravě zdarma (".cart-widget-bottom") zůstávají vždycky
napevno vidět dole, bez ohledu na to, kolik má zákazník položek v košíku
a jestli si seznam nad tím odscrolloval. */
@media (max-width: 767px) {
body.cart-window-visible #cart-widget.cart-widget {
display: flex !important;
flex-direction: column !important;
}
#cart-widget .cart-widget-inner {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
}
#cart-widget .cart-widget-products {
overflow-y: auto !important;
flex: 1 1 auto !important;
max-height: none !important;
min-height: 0 !important;
}
#cart-widget .cart-widget-bottom {
flex: 0 0 auto !important;
}
}