/* ============================================ PRESTASHOP ÚPRAVY - custom.css v9 ============================================ */ /* ============================================ IMPORT FONTU - Space Grotesk ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap'); /* ============================================ 0. DEFINICE PROMĚNNÝCH (Barvy a stíny) ============================================ */ :root { --primary-color: #24b9d7; /* Světle modrá (košík, focus, aktivní prvky) */ --hover-color: #0068a5; /* Tmavší modrá pro hover efekty */ --border-color: #e0e0e0; /* Standardní barva rámečků */ --bg-light: #f6f6f6; /* Světle šedé pozadí (inputy, pole) */ --bg-body: #f0f0f0; /* Celkové pozadí stránky */ --bg-subtle: #f5f5f5; /* Velmi světlá šedá pro pomocné bloky */ --white: #ffffff; /* Čistě bílá */ --black: #000000; /* Čistě černá */ --text-main: #333333; /* Hlavní barva textu */ --text-muted: #7a7a7a; /* Ztlumený/vedlejší text */ --card-shadow: 0 2px 8px rgba(0,0,0,0.07); /* Jemný stín pro boxy a karty */ --modal-shadow: 0 12px 40px rgba(0,0,0,0.25); /* Výrazný stín pro vyskakovací okna */ --border-radius: 9px; /* Jednotný radius pro zaoblení rohů */ --border-radius-sm: 8px; /* Menší radius pro vnitřní prvky */ } /* Definice proměnných pro tmavý režim */ /* Tyto proměnné přepíší výchozí hodnoty, pokud je na nebo nastaven data-theme="dark" */ [data-theme="dark"] { --primary-color: #24b9d7; /* Světle modrá (košík, focus, aktivní prvky) - může zůstat stejná */ --hover-color: #4ec0e0; /* Světlejší modrá pro hover efekty v tmavém režimu */ --border-color: #444444; /* Tmavší barva rámečků */ --bg-light: #333333; /* Tmavší pozadí (inputy, pole) */ --bg-body: #1a1a1a; /* Tmavé celkové pozadí stránky */ --bg-subtle: #222222; /* Tmavší subtilní pozadí */ --white: #1a1a1a; /* Bílá se stane tmavým pozadím */ --black: #f0f0f0; /* Černá se stane světlým textem */ --text-main: #cccccc; /* Světlý text pro hlavní obsah */ --text-muted: #999999; /* Světlejší ztlumený text */ --card-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Výraznější stín pro tmavý režim */ --modal-shadow: 0 12px 40px rgba(0,0,0,0.5); /* Výraznější stín pro modální okna */ } /* ============================================ 1. STICKY HEADER ============================================ */ #header { position: sticky !important; top: 0 !important; z-index: 1000 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.10) !important; background-color: var(--white) !important; height: auto !important; min-height: 0 !important; } /* Modal musí být nad headerem */ #product-modal, .modal.fade.js-product-images-modal { z-index: 1100 !important; } #product-modal .modal-dialog { z-index: 1101 !important; } /* Backdrop — nižší než všechny modaly */ .modal-backdrop { z-index: 1039 !important; } /* Cart modal */ #blockcart-modal { z-index: 1050 !important; } /* Quickview modal */ .quickview, .modal.quickview { z-index: 1050 !important; } /* Product images modal */ #product-modal { z-index: 1050 !important; } #blockcart-modal .modal-dialog { border-radius: var(--border-radius) !important; overflow: hidden !important; } #blockcart-modal .modal-content { border-radius: var(--border-radius) !important; border: none !important; box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important; overflow: hidden !important; } #blockcart-modal .modal-header { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; } #blockcart-modal .modal-footer { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; } #header-nav, .header-nav, .header-top, nav#header { background-color: var(--white) !important; } .header-nav { padding: 0 !important; min-height: 0 !important; max-height: 28px !important; /* Natvrdo omezíme maximální výšku lišty */ border-bottom: 1px solid var(--bg-body) !important; } .header-nav a, .header-nav .contact-link, .header-nav .user-info, .header-nav #_desktop_contact_link, .header-nav #contact-link { padding: 5px !important; font-size: 14px !important; /* Zvětšení písma */ height: 28px !important; /* Sjednocení výšky s košíkem pro dokonalý střed */ line-height: 1 !important; display: inline-flex !important; align-items: center !important; margin: 0 !important; } /* Zarovnání položky "Kontaktujte nás" přesně k levému okraji */ .header-nav #_desktop_contact_link, .header-nav #_desktop_contact_link a, .header-nav #contact-link, .header-nav .contact-link { padding-left: 0 !important; } /* Sjednocení košíku (prázdný i aktivní) */ .header-nav .blockcart.cart-preview, .header-nav .blockcart.cart-preview .header, .header-nav .blockcart.cart-preview .header a { padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; /* Sjednocení velikosti textu */ line-height: 1 !important; height: 28px !important; /* Vynutíme výšku přesně podle lišty */ min-height: 0 !important; position: static !important; /* Zrušíme případné absolutní pozicování */ text-decoration: none !important; border: none !important; box-shadow: none !important; background: transparent !important; /* Resetujeme všechna pozadí */ } /* Prázdný košík - šedé pozadí */ .header-nav .blockcart.cart-preview.inactive .header { background: var(--bg-subtle) !important; /* Ploché šedé pozadí */ color: var(--text-muted) !important; padding: 0 12px !important; /* Odsazení definujeme zde */ gap: 8px !important; } /* Aktivní košík - světle modré pozadí */ .header-nav .blockcart.cart-preview.active .header, .header-nav .blockcart.cart-preview.active .header a { background: var(--primary-color) !important; /* Ploché modré pozadí */ color: var(--white) !important; padding: 0 12px !important; /* Stejné odsazení jako u prázdného */ gap: 8px !important; } /* Odstranění všech mezer u odkazu uvnitř aktivního košíku */ .header-nav .blockcart.cart-preview.active .header a { background: transparent !important; padding: 0 !important; margin: 0 !important; height: 28px !important; width: 100% !important; display: flex !important; } .header-nav .blockcart.cart-preview .header i.material-icons, .header-nav .blockcart.cart-preview .header a i.material-icons { font-size: 18px !important; /* Sjednocení velikosti ikonky */ margin: 0 !important; line-height: 1 !important; color: inherit !important; } .product-images>li.thumb-container .thumb { margin-bottom: 0px; cursor: pointer } /* uprava rychly nahled miniatury */ .quickview .images-container .product-images>li.thumb-container .thumb { width: 100%; max-width: 4.938rem; height: auto; margin-bottom: 0px; background: var(--white); } .quickview .images-container { z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 1.88rem; } .header-nav .material-icons { font-size: 18px !important; /* Zvětšení ikonek */ vertical-align: middle !important; margin-right: 5px !important; /* Mezera mezi ikonkou a textem */ } /* Menu — může zalamovat do více řádků */ #_desktop_top_menu ul#top-menu { flex-wrap: wrap !important; row-gap: 2px !important; } /* Search widget — původní šířka, bez flex manipulace */ #search_widget, #_desktop_search_widget, .search-widgets, div#search_widget { position: relative !important; overflow: visible !important; } /* ============================================ ucet po prihlseni ============================================ */ .page-my-account #content .links a span.link-item { display: block; height: 100%; padding: 1rem; border-radius: var(--border-radius-sm) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--card-shadow) !important; transition: box-shadow 0.2s ease, transform 0.2s ease !important; } /* Odstranění šedé linky pod položkami (např. seznam přání) v sekci Můj účet */ .page-my-account #content .links li, .page-my-account #content .links a, .wishlist-list-item, .wishlist-list-item::after, .wishlist-list-item::before { border: none !important; text-decoration: none !important; box-shadow: none !important; background: transparent !important; } /* Resetování kontejnerů wishlistu, aby nevykukovalo bílé pozadí */ .wishlist-list-container, .wishlist-container, #wishlist-list-container, .wishlist-products-container, .wishlist-products-container-header, #wishlist-list-container, .wishlist-list-container .card, .wishlist-list-container .card-block, .wishlist-list-container ul, .wishlist-list, .page-my-account #content .card, .wishlist-products-container .card.card-block { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Styl pro boxy v seznamu přání (Wishlist) - sjednocení s designem webu */ .wishlist-list-item-link { background: var(--white) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--card-shadow) !important; transition: box-shadow 0.2s ease, transform 0.2s ease !important; border-radius: var(--border-radius) !important; padding: 1.25rem !important; margin-bottom: 1rem !important; display: flex !important; justify-content: space-between !important; align-items: center !important; text-decoration: none !important; } .wishlist-list-item-title { margin: 0 !important; } /* Styl pro zprávu o prázdném seznamu přání - sjednocení s kartami */ .wishlist-list-empty { background: var(--white) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--card-shadow) !important; transition: box-shadow 0.2s ease, transform 0.2s ease !important; border-radius: var(--border-radius) !important; padding: 1.25rem !important; margin-top: 1rem !important; /* Ponecháme horní mezeru */ margin-left: auto !important; /* Vycentrování horizontálně */ margin-right: auto !important; /* Vycentrování horizontálně */ max-width: 450px !important; /* Omezení maximální šířky, aby nebyla přes celou stránku */ text-align: center !important; /* Vycentrování textu uvnitř karty */ } /* Styl pro bílý box na DETAILNÍ stránce seznamu přání (po rozkliknutí) */ .wishlist-container, .wishlist-view { background: var(--white) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--card-shadow) !important; border-radius: var(--border-radius) !important; padding: 1.5rem !important; margin-top: 1rem !important; margin-bottom: 1.5rem !important; } /* Sjednocení karet produktů v Seznamu přání (Wishlist) s designem webu */ .wishlist-products-list { list-style: none !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 1rem !important; /* Mezera mezi kartami */ } .wishlist-product { background: var(--white) !important; border: 1px solid var(--border-color) !important; border-radius: var(--border-radius) !important; box-shadow: var(--card-shadow) !important; transition: box-shadow 0.2s ease, transform 0.2s ease !important; padding: 0.5rem !important; /* Zmenšení paddingu pro obrázek */ height: 100% !important; display: flex !important; flex-direction: column !important; } .wishlist-product:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.13) !important; transform: translateY(-3px) !important; } /* Reset odkazu a kontejneru obrázku pro sjednocení okrajů */ .wishlist-product-link { display: block !important; padding: 0 !important; margin-top: 0 !important; } .wishlist-product-image { width: 100% !important; display: block !important; overflow: hidden !important; margin-top: 0 !important; height: 220px !important; /* Fixní výška pro všechny obrázky, aby karty byly stejné */ } .wishlist-product-image img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; border-radius: var(--border-radius-sm) !important; margin-bottom: 0.5rem !important; } /* Odsazení textových informací a tlačítek, aby nebyly nalepené na krajích */ .wishlist-product-right { padding: 0 0.5rem !important; } .wishlist-product-bottom { padding: 0.5rem !important; margin-top: auto !important; /* Zarovná tlačítka na spodní okraj karty */ } /* Odstranění černého rámečku (outline) při kliknutí/focusu pro desktop i mobil */ a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus, [role="button"]:focus, [role="link"]:focus { outline: none !important; box-shadow: none !important; } /* Reset pro aktivní stav (stisknutí prvku) */ a:active, button:active, input:active, select:active, textarea:active { outline: none !important; box-shadow: none !important; } /* ============================================ 2. MŘÍŽKA NA POZADÍ - všude včetně kategorie ============================================ */ body { font-family: 'Space Grotesk', sans-serif !important; background-color: var(--bg-body) !important; } .blockreassurance, .custom-text, #custom-text { background-color: var(--white) !important; border-radius: var(--border-radius) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--card-shadow) !important; } /* Banner (modul ps_banner) */ a.banner, .banner-img { display: block !important; border-radius: var(--border-radius) !important; overflow: hidden !important; border: 1px solid var(--border-color) !important; box-shadow: var(--card-shadow) !important; } body#checkout .cart-grid-right .card .cart-summary-subtotals-container { padding: 1rem 0; border-top: 1px solid #dddddd00; border-bottom: 1px solid #dddddd00; } #order-items { border-right: #f6f6f600 1px solid; } footer, .footer-container .block_newsletter { background-color: hsla(258, 78%, 49%, 0) !important; } .forgotten-password .form-fields label.required { width: 180px; } .block_newsletter { float: inherit; width: 100%; max-width: 50rem; margin: auto; margin-bottom: .625rem; clear: both; font-size: .875rem; background: #ffffff00 } .carousel { margin-bottom: 5px; } /* Sekce produktů */ section.featured-products, .featured-products, #products, section#products { background: var(--white) !important; /* Keep original background */ border-radius: var(--border-radius) !important; /* Keep original border-radius */ padding: 28px 28px 20px !important; margin-bottom: 1.5rem !important; border: 1px solid var(--border-color) !important; box-shadow: var(--card-shadow) !important; } /* ============================================ 3. KONTAKTNÍ STRÁNKA — levý panel v rámečku ============================================ */ .page-contact .contact-rich, .contact-rich, #contact .contact-rich { background: var(--white) !important; border-radius: var(--border-radius) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--card-shadow) !important; /* Keep original box-shadow */ padding: 24px 20px !important; margin-bottom: 5px !important; } /* Odstranění duplicitního rámečku z #content na kontaktní stránce */ .page-contact #content { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; } /* Formulářový box vpravo — rámeček */ .page-contact .contact-form { background: var(--white) !important; border-radius: var(--border-radius) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--card-shadow) !important; padding: 28px !important; } /* ============================================ KONTAKTNÍ FORMULÁŘ - Oprava polí a zarovnání ============================================ */ @media (min-width: 768px) { /* Vertikální vycentrování popisků vůči polím (řeší "utopený" text u e-mailu) */ .page-contact .contact-form .form-group.row { display: flex !important; align-items: center !important; } /* Zvětšení pole pro E-mail na šířku pole pro Zprávu (z col-md-6 na col-md-9) */ .page-contact .contact-form .form-group:has(input[name="from"]) div.col-md-6 { flex: 0 0 75% !important; max-width: 75% !important; } .page-contact .contact-form .form-control-label { text-align: right !important; padding-right: 15px !important; /* Menší mezera mezi textem a polem */ line-height: 1.2 !important; } /* Offset pro nadpis "Kontaktujte nás" aby lícoval s boxy */ .page-contact .contact-form .col-md-offset-3 { margin-left: 25% !important; } } /* ============================================ 4. KOŠÍK — zaoblené rohy + bílé pozadí bloků ============================================ */ /* Hlavní tabulka košíku */ .cart-grid-body, #cart .cart-grid-body { background: var(--white) !important; border-radius: var(--border-radius) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--card-shadow) !important; padding: 20px !important; margin-bottom: 16px !important; } /* Pravý panel — jeden společný rámeček */ .cart-grid-right, #cart .cart-grid-right { background: var(--white) !important; border-radius: var(--border-radius) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--card-shadow) !important; padding: 20px !important; display: flex !important; flex-direction: column !important; gap: 0 !important; margin-top: 0 !important; } /* Mezera mezi levým a pravým blokem košíku */ #cart .cart-grid-body { margin-bottom: 0 !important; } /* sipky */ .bootstrap-touchspin .input-group-btn-vertical i { top: .0625rem; left: .1875rem; font-size: 20px } .product-quantity .input-group-btn-vertical .btn i { top: .125rem; left: .1875rem; font-size: 20px; } /* Zaoblení obrázků produktů v košíku a v potvrzovacím modalu */ .cart-item .product-image img, #blockcart-modal .product-image img { border-radius: 8px !important; } .cart-grid, #cart .cart-grid.row { gap: 20px !important; align-items: flex-start !important; } /* Souhrn — bez vlastního rámečku, je uvnitř .cart-grid-right */ .cart-summary, .cart-detailed-totals, #cart .cart-summary, .cart-grid-right .cart-summary { background: transparent !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Zásady — bez vlastního rámečku, oddělovač nahoře */ .cart-grid-right .block-reassurance, .cart-grid-right .blockreassurance, #cart .cart-grid-right .block-reassurance, #cart .cart-grid-right .blockreassurance { background: transparent !important; border-radius: 0 !important; border: none !important; border-top: 1px solid var(--bg-body) !important; box-shadow: none !important; padding: 16px 0 0 0 !important; margin-top: 16px !important; } /* Tlačítko Pokračovat do pokladny */ .cart-grid-right .checkout a, .cart-grid-right .text-sm-center a, #cart .checkout .btn { border-radius: var(--border-radius) !important; display: block !important; width: 100% !important; } /* ============================================ CAROUSEL — všechny viewporty podle desktopu ============================================ */ /* Wrapper — všechny viewporty */ #carousel, .carousel.slide { border-radius: var(--border-radius) !important; overflow: hidden !important; left: auto !important; width: 100% !important; margin-left: 0 !important; padding-bottom: 0 !important; background-color: transparent !important; border: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* Inner — ořez při přechodu včetně animace */ .carousel .carousel-inner { overflow: hidden !important; border-radius: var(--border-radius) !important; position: relative !important; border: none !important; box-shadow: none !important; /* Oprava ostrých rohů během GPU animace */ -webkit-mask-image: -webkit-radial-gradient(white, black) !important; mask-image: radial-gradient(white, black) !important; transform: translateZ(0) !important; will-change: transform !important; } /* Každý item */ .carousel .carousel-item, .carousel-inner > .item { height: auto !important; font-size: 0 !important; line-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Figure a odkaz uvnitř — bez mezer */ .carousel .carousel-item figure, .carousel .carousel-item > a, .carousel .carousel-item > a > figure { display: block !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; font-size: 0 !important; } /* Obrázek — bez vlastního radiusu */ .carousel .carousel-item img { width: 100% !important; height: auto !important; display: block !important; border-radius: 0 !important; object-fit: cover !important; } /* Přijíždějící/odjíždějící slide */ .carousel .carousel-item.next, .carousel .carousel-item.prev, .carousel-inner > .item.next, .carousel-inner > .item.prev { display: block !important; position: absolute !important; top: 0 !important; width: 100% !important; } /* Šipky — průhledné na všech viewportech */ .carousel .carousel-control, .carousel .direction a, .carousel .carousel-control.left, .carousel .carousel-control.right { background: transparent !important; background-image: none !important; box-shadow: none !important; border: none !important; } .carousel .carousel-control i, .carousel .carousel-control i.material-icons, .carousel .direction a i { background: transparent !important; background-color: transparent !important; color: #ffffff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important; } /* Tečky — skryté na tabletu i mobilu */ @media (max-width: 1199px) { .carousel .carousel-indicators { display: none !important; } } /* Tablet a mobil — přebití theme.css který carousel deformuje */ @media (max-width: 1199px) { .carousel.slide { left: auto !important; width: 100% !important; margin-left: 0 !important; padding-bottom: 0 !important; background-color: transparent !important; } .carousel .direction { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 100% !important; left: 0 !important; } } @media all and (transform-3d),(-webkit-transform-3d) { .carousel-inner>.carousel-item { -webkit-transition: -webkit-transform .6s ease-in-out; transition: transform .6s ease-in-out; transition: transform .6s ease-in-out,-webkit-transform .6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px } .carousel-inner>.carousel-item.active.right,.carousel-inner>.carousel-item.next { left: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } .carousel-inner>.carousel-item.active.left,.carousel-inner>.carousel-item.prev { left: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } .carousel-inner>.carousel-item.active,.carousel-inner>.carousel-item.next.left,.carousel-inner>.carousel-item.prev.right { left: 0; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); border-radius: var(--border-radius); } } .carousel-inner>.carousel-item>a>img,.carousel-inner>.carousel-item>img,.img-fluid,.img-thumbnail { max-width: 100%; height: auto; border-radius: var(--border-radius); } /* ============================================ 5. LEVÝ SLOUPEC - kategorie + filtry ============================================ */ #left-column .block-categories { background: #ffffff !important; border-radius: var(--border-radius) !important; border: 1px solid var(--border-color) !important; /* Keep original border */ box-shadow: var(--card-shadow) !important; padding: 18px 5px 18px 15px !important; margin-bottom: 5px !important; box-sizing: border-box !important; } #left-column #search_filters, #left-column .search-filters { background: #ffffff !important; border-radius: var(--border-radius) !important; border: 1px solid var(--border-color) !important; /* Keep original border */ box-shadow: var(--card-shadow) !important; padding: 18px 16px !important; margin-bottom: 5px !important; box-sizing: border-box !important; } /* Sekce filtrů uvnitř — bez vlastního rámečku */ #left-column #search_filters .facet, #left-column .search-filters .facet { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 0 12px 0 !important; margin: 0 0 12px 0 !important; } #left-column #search_filters .facet:last-child { padding-bottom: 0 !important; margin-bottom: 0 !important; } #left-column #search_filters .facet + .facet { border-top: 1px solid var(--bg-body) !important; padding-top: 12px !important; } /* Nadpisy */ #left-column .block-title, #left-column .facet-title, #left-column h2, #left-column h3, #left-column h4 { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--text-main) !important; margin-bottom: 10px !important; } /* Kategorie seznam */ #left-column .block-categories ul { padding: 0 !important; margin: 0 !important; list-style: none !important; } #left-column .block-categories ul li a { display: block !important; padding: 5px 0 !important; color: var(--text-muted) !important; font-size: 14px !important; text-decoration: none !important; } #left-column .block-categories ul li a:hover, #left-column .block-categories ul li.current > a { color: var(--hover-color) !important; font-weight: 600 !important; } /* ============================================ 6. PRODUKTOVÉ KARTY ============================================ */ article.product-miniature { background: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; overflow: visible !important; position: relative !important; z-index: 1 !important; padding: 4px !important; } article.product-miniature:hover { z-index: 10 !important; } article.product-miniature .thumbnail-container { border-radius: var(--border-radius) !important; overflow: hidden !important; background: var(--white) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--card-shadow) !important; transition: box-shadow 0.2s ease, transform 0.2s ease !important; display: flex !important; flex-direction: column !important; } article.product-miniature:hover .thumbnail-container { box-shadow: 0 6px 24px rgba(0,0,0,0.13) !important; transform: translateY(-3px) !important; } article.product-miniature .thumbnail-top { overflow: hidden !important; background: var(--bg-subtle) !important; display: block !important; line-height: 0 !important; border: none !important; margin: 0 !important; padding: 0 !important; } article.product-miniature .thumbnail-top img, article.product-miniature .thumbnail-top picture img { display: block !important; width: 100% !important; height: auto !important; border-radius: 0 !important; margin: 0 !important; } article.product-miniature .highlighted-informations { background: #f9f9f9 !important; border: none !important; border-top: 1px solid #eee !important; padding: 6px 12px !important; margin: 0 !important; } article.product-miniature .product-description { background: var(--white) !important; /* padding: 12px 14px 16px !important; */ border: none !important; border-top: 1px solid #eee !important; margin: 0 !important; flex: 1 !important; } .card-block { padding: 1.25rem 1.25rem .5rem; /* Keep original padding */ border-radius: 9px !important; } /* ============================================ 7. registr page, login page - rámeček kolem obsahu ============================================ */ .page-authentication #content,.page-registration #content { padding: 1rem; /* Keep original padding */ background: var(--white); max-width: 640px; margin: 0 auto; border: 1px solid #e0e0e0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important; transition: box-shadow 0.2s ease, transform 0.2s ease !important; } .page-customer-account #content { padding: 1rem; background: #fff; font-size: .875rem; border-radius: 9px !important; color: #7a7a7a; border: 1px solid #e0e0e0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important; transition: box-shadow 0.2s ease, transform 0.2s ease !important; } .form-control { display: block; width: 100%; font-size: 1rem; line-height: 1.25; background-color: #f6f6f6; background-image: none; background-clip: padding-box; border-radius: 8px } #subcategories { display: none !important; } .page-content.page-cms { padding: 1.25rem; text-align: justify; background: #fff; border: 1px solid var(--border-color) !important; box-shadow: var(--card-shadow) !important; transition: box-shadow 0.2s ease, transform 0.2s ease !important; border-radius: var(--border-radius); } /* ============================================ 7. MENU DROPDOWN ============================================ */ #_desktop_top_menu ul#top-menu > li, ul.top-menu > li { position: relative !important; } #_desktop_top_menu ul#top-menu > li > ul, #_desktop_top_menu ul#top-menu > li > .sub-menu, #_desktop_top_menu ul#top-menu > li > .collapse, ul.top-menu > li > ul, ul.top-menu > li > .sub-menu, ul.top-menu > li > .collapse, ul[data-depth="0"] > li > ul[data-depth="1"] { position: absolute !important; top: 100% !important; left: 0 !important; width: auto !important; min-width: 180px !important; max-width: 280px !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; background: var(--white) !important; border-radius: var(--border-radius) !important; box-shadow: 0 8px 28px rgba(0,0,0,0.13) !important; border: 1px solid rgba(0,0,0,0.08) !important; padding: 6px 0 !important; z-index: 99999 !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.15s ease, visibility 0.15s ease !important; height: auto !important; max-height: 9999px !important; overflow: visible !important; } #_desktop_top_menu ul#top-menu > li:hover > ul, #_desktop_top_menu ul#top-menu > li:hover > .sub-menu, #_desktop_top_menu ul#top-menu > li:hover > .collapse, ul.top-menu > li:hover > ul, ul.top-menu > li:hover > .sub-menu, ul.top-menu > li:hover > .collapse, ul[data-depth="0"] > li:hover > ul[data-depth="1"], ul.top-menu > li.show > .collapse, ul.top-menu > li.open > ul { visibility: visible !important; opacity: 1 !important; pointer-events: all !important; } #_desktop_top_menu ul#top-menu > li > ul > li, #_desktop_top_menu ul#top-menu > li > .sub-menu li, #_desktop_top_menu ul#top-menu > li > .collapse li, ul.top-menu > li > ul > li, ul.top-menu > li > .sub-menu li, ul.top-menu > li > .collapse li, ul[data-depth="1"] > li { display: block !important; float: none !important; width: 100% !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } #_desktop_top_menu ul#top-menu > li > ul > li > a, #_desktop_top_menu ul#top-menu > li > .sub-menu li a, #_desktop_top_menu ul#top-menu > li > .collapse li a, ul.top-menu > li > ul > li > a, ul.top-menu > li > .sub-menu li a, ul.top-menu > li > .collapse li a, ul[data-depth="1"] > li > a { display: block !important; padding: 10px 20px !important; color: var(--text-main) !important; font-size: 14px !important; text-decoration: none !important; white-space: nowrap !important; transition: background 0.12s ease, color 0.12s ease !important; } /* Změna barvy textu na světle modrou při najetí myší v podmenu */ #_desktop_top_menu ul#top-menu > li > ul > li > a:hover, #_desktop_top_menu ul#top-menu > li > .sub-menu li a:hover, #_desktop_top_menu ul#top-menu > li > .collapse li a:hover, ul.top-menu > li > ul > li > a:hover, ul.top-menu > li > .sub-menu li a:hover, ul.top-menu > li > .collapse li a:hover, ul[data-depth="1"] > li > a:hover { background: transparent !important; /* Odstraní stín/pozadí při najetí */ color: #24b9d7 !important; /* Změní text na světle modrou */ box-shadow: none !important; /* Pro jistotu odstraní i skutečný stín, pokud ho tam šablona dává */ } /* ============================================ 8. PRODUKTOVÁ STRÁNKA ============================================ */ .product-cover { border-radius: 9px !important; overflow: hidden !important; border: 1px solid #ffffff !important; box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important; transition: box-shadow 0.2s ease, transform 0.2s ease !important; background: #ffffff !important; /* Vyplní prázdná místa, která mohou prosvítat v ohybu */ isolation: isolate !important; /* Pomáhá k čistšímu vykreslení zaobleného ořezu (maskování) */ } .product-flags { position: absolute; top: 0; left: 2px; z-index: 2; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; pointer-events: none } /* pading all */ /* pading all*/ .product-cover img { display: block !important; width: 100% !important; border-radius: 0px !important; border: none !important; /* Odstraní případnou linku, která se doplňuje přímo k obrázku */ } /* Odstranění případného rámečku z vrstvy lupy (layer), který často způsobuje "zdvojení" */ .product-cover .layer { border: none !important; } .product-images { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 0px 0 12px !important; margin: 0 !important; list-style: none !important; } .product-images > li.thumb-container { border-radius: var(--border-radius-sm) !important; overflow: hidden !important; border: 2px solid var(--border-color) !important; cursor: pointer !important; transition: border-color 0.15s !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; display: block !important; } .product-images > li.thumb-container img { display: block !important; width: 100% !important; } .product-images > li.thumb-container.selected, .product-images > li.thumb-container:hover, .product-images > li.thumb-container .thumb.selected, .product-images > li.thumb-container .thumb:hover { border-color: var(--primary-color) !important; box-shadow: 0 0 0 2px rgba(36, 185, 215, 0.2) !important; outline: none !important; } /* Úplné odstranění vnitřních linek u miniatur */ .product-images > li.thumb-container .thumb { border: none !important; } .js-qv-mask { overflow: visible !important; } .product-information { background: #ffffff !important; border-radius: 9px !important; padding: 24px !important; border: 1px solid #e0e0e0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important; transition: box-shadow 0.2s ease, transform 0.2s ease !important; } .block-category { min-height: 13.75rem; border: 1px solid #e0e0e0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important; transition: box-shadow 0.2s ease, transform 0.2s ease !important; background-color: #ffffff !important; } .product-actions .add-to-cart { height: 2.75rem !important; padding-top: .625rem; line-height: inherit } .product-comment-list-item { padding: 26px 0; margin: 0 0 20px; background-color: #ffffff; text-align: left; border: 1px solid #e0e0e0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important; transition: box-shadow 0.2s ease, transform 0.2s ease !important; border-radius: 9px; } /* ============================================ 9. TLAČÍTKA, INPUTY ============================================ */ .btn, button:not(.wishlist-button-add):not(.btn-wishlist), input[type="submit"], input[type="button"], .btn-primary, .btn-secondary, .add-to-cart { border-radius: 8px !important; } input[type="text"], input[type="email"], input[type="tel"], .field-phone, textarea, select { border-radius: 8px !important; border: 1px solid var(--border-color) !important; transition: border-color 0.2s, box-shadow 0.2s !important; } /* Focus efekt pro všechny inputy (text, email, textarea, select) */ input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, .field-phone:focus, textarea:focus, select:focus { border: 1px solid #24b9d7 !important; /* Modrá barva ladící k vašemu webu */ box-shadow: 0 0 0 2px rgba(36, 185, 215, 0.2) !important; outline: none !important; /* Odstranění výchozího obrysu prohlížeče */ background-color: var(--white) !important; /* Zajištění bílého pozadí při focusu */ } .block_newsletter input[type="email"] { border-radius: 8px 8px 8px 8px !important; } .block_newsletter button { border-radius: 8px 8px 8px 8px !important; } .wishlist-button-add, .btn-wishlist { border-radius: 50% !important; } .badge, .product-flag { border-radius: 6px !important; } .alert { border-radius: 10px !important; } .cart-preview .dropdown-menu, .blockcart .dropdown-menu { border-radius: 9px !important; overflow: hidden !important; } /* ============================================ VÝŠKA HEADERŮ ============================================ */ /* Druhý pruh: Logo + menu + search — vše v jednom řádku */ .header-top, #header .header-top { padding-top: 2px !important; padding-bottom: 2px !important; min-height: 0 !important; height: auto !important; } /* Desktop header row — vše v jednom řádku */ @media (min-width: 992px) { .header-top .container > .row, #header .header-top .container > .row { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; min-height: 0 !important; } /* Ensure mobile menu wrapper is completely hidden on desktop */ #mobile_top_menu_wrapper, #_mobile_top_menu_wrapper { display: none !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; } .header-top .col-md-2, #_desktop_logo { flex: 0 0 auto !important; width: auto !important; padding-right: 16px !important; } #_desktop_logo img { max-height: 42px !important; width: auto !important; display: block !important; } .header-top-right, .header-top .col-md-10, .header-top .col-sm-12 { flex: 1 1 auto !important; display: flex !important; align-items: center !important; flex-wrap: nowrap !important; } #_desktop_top_menu, .menu.js-top-menu-position-static { flex: 1 1 auto !important; min-width: 0 !important; } #_desktop_top_menu ul#top-menu { flex-wrap: nowrap !important; /* Vynutí jeden řádek */ margin-bottom: 0 !important; /* Odstraní mezeru pod menu */ } #_desktop_top_menu ul#top-menu > li > a { padding: 1px 10px !important; /* Malý padding jako na tabletu */ } #search_widget, #_desktop_search_widget, .search-widgets { flex: 0 0 auto !important; width: 200px !important; min-width: 160px !important; margin-left: 12px !important; position: relative !important; } #search_widget input, .search-widgets input { height: 36px !important; font-size: 13px !important; width: 100% !important; padding-right: 36px !important; box-sizing: border-box !important; } } ul#top-menu > li > a, .top-menu > li > a { padding-top: 8px !important; padding-bottom: 8px !important; font-size: 14px !important; } /* Responzivní — při zúžení */ @media (max-width: 991px) { .header-top .container > .row, #header .header-top .container > .row { flex-wrap: wrap !important; } #_desktop_logo { flex: 0 0 auto !important; } .header-top-right, .header-top .col-md-10 { flex: 0 1 auto !important; } #search_widget, .search-widgets { width: 100% !important; margin-left: 0 !important; margin-top: 8px !important; } } /* ============================================ DETAIL PRODUKTU - počet kusů + tlačítko ============================================ */ /* Celý bootstrap-touchspin wrapper — zaoblený box */ .bootstrap-touchspin, .input-group.bootstrap-touchspin { /* Keep original styles */ border-radius: 10px !important; overflow: hidden !important; border: 1px solid #d0d0d0 !important; display: inline-flex !important; align-items: stretch !important; width: auto !important; float: none !important; } /* Input uvnitř */ .bootstrap-touchspin input.form-control, input#quantity_wanted { width: 3rem !important; height: 2.75rem !important; border: none !important; border-radius: 0 !important; text-align: center !important; font-size: 15px !important; font-weight: 600 !important; box-shadow: none !important; background: #fff !important; padding: 0 !important; float: none !important; } /* Wrapper svislých šipek */ .bootstrap-touchspin .input-group-btn-vertical { display: flex !important; flex-direction: column !important; width: 28px !important; border-left: 1px solid #e0e0e0 !important; } /* Obě šipky */ .bootstrap-touchspin .input-group-btn-vertical .btn, .bootstrap-touchspin .bootstrap-touchspin-up, .bootstrap-touchspin .bootstrap-touchspin-down { border: none !important; border-radius: 0 !important; background: #f5f5f5 !important; color: #555 !important; width: 28px !important; flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; min-height: 0 !important; box-shadow: none !important; cursor: pointer !important; transition: background 0.12s !important; } .bootstrap-touchspin .bootstrap-touchspin-down { border-top: 1px solid #e0e0e0 !important; } .bootstrap-touchspin .input-group-btn-vertical .btn:hover { background: #e0e0e0 !important; } /* Skryté prefix/postfix spany */ .bootstrap-touchspin .input-group-addon { display: none !important; } /* Tlačítko přidat do košíku — změna textu přes CSS */ button.add-to-cart .material-icons { display: none !important; } button.add-to-cart { font-size: 0 !important; letter-spacing: 0 !important; } button.add-to-cart::after { content: "Do košíku" !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; } /* Ikona košíku zpět viditelná */ button.add-to-cart .material-icons { display: inline-block !important; font-size: 18px !important; vertical-align: middle !important; margin-right: 6px !important; } /* Mezera mezi tlačítkem košíku a srdíčkem */ .product-add-to-cart .add, .js-product-add-to-cart .add { gap: 6px !important; } .wishlist-button-product, .wishlist-button-add.wishlist-button-product { margin-left: 6px !important; } /* ============================================ OPRAVY - ikona košíku + zoom modal + miniatury ============================================ */ /* Ikona košíku vertikálně na střed s textem */ button.add-to-cart { display: inline-flex !important; align-items: center !important; gap: 6px !important; } button.add-to-cart .material-icons { font-size: 18px !important; line-height: 1 !important; flex-shrink: 0 !important; } /* product-modal styly odstraněny */ /* ============================================ PRODUCT MODAL - oprava theme.css hodnot theme.css: modal-body { position:relative; padding:35px; margin-left:-35% } ============================================ */ /* Přebití špatných theme.css hodnot na modal-body */ #product-modal .modal-body { position: static !important; padding: 12px !important; margin-left: 0 !important; display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: center !important; /* Vycentruje obrázek a miniatury k sobě */ gap: 12px !important; background: var(--white) !important; } /* Modal dialog - centrovaný */ #product-modal .modal-dialog { margin: 30px auto !important; max-width: 700px !important; width: 90vw !important; } /* Zvětšení modalu a obrázku pro Desktop */ @media (min-width: 992px) { #product-modal .modal-dialog { max-width: 95vw !important; /* Keep original max-width */ width: fit-content !important; /* Okno se stáhne podle šířky obrázku a miniatur */ } #product-modal .modal-content { width: fit-content !important; } #product-modal .modal-body img.js-modal-product-cover, #product-modal .modal-body .product-cover-modal { max-height: 80vh !important; } } /* Bílé pozadí + radius */ #product-modal .modal-content { background: #ffffff !important; border-radius: 9px !important; border: none !important; box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important; overflow: hidden !important; } /* figure s obrázkem */ #product-modal .modal-body figure { flex: 0 1 auto !important; /* Zabrání zbytečnému roztahování, které odsouvá miniatury */ min-width: 0 !important; margin: 0 !important; } /* Obrázek - přebití inline 800x800 */ #product-modal .modal-body img.js-modal-product-cover, #product-modal .modal-body .product-cover-modal { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 80vh !important; /* Využije více výšky na obrazovce */ width: 100% !important; /* Vynutí roztažení do šířky figure */ display: block !important; border-radius: 8px !important; object-fit: contain !important; } /* Popisek */ #product-modal .modal-body figcaption, #product-modal .image-caption { padding: 8px 0 0 !important; border-top: none !important; /* Odstraní linku nad popiskem v náhledu */ font-size: 13px !important; color: #555 !important; } /* Miniatury - sloupec vpravo */ #product-modal aside#thumbnails, #product-modal .js-thumbnails { flex-shrink: 0 !important; width: 80px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; overflow-y: auto !important; max-height: 60vh !important; } #product-modal .js-modal-mask, #product-modal .mask { overflow: visible !important; white-space: normal !important; width: auto !important; } #product-modal .js-modal-product-images { display: flex !important; flex-direction: column !important; gap: 8px !important; list-style: none !important; padding: 4px !important; /* Přidáno, aby modrý "glow" efekt a okraj nebyly oříznuty okrajem panelu */ margin: 0 !important; } #product-modal .js-thumb-container { width: 72px !important; height: 72px !important; border-radius: 8px !important; overflow: hidden !important; border: 2px solid var(--border-color) !important; cursor: pointer !important; flex-shrink: 0 !important; display: block !important; } #product-modal .js-thumb-container.selected, #product-modal .js-thumb-container:hover, #product-modal .js-thumb-container .thumb.selected, #product-modal .js-thumb-container .thumb:hover { border-color: var(--primary-color) !important; box-shadow: 0 0 0 3px rgba(36, 185, 215, 0.2) !important; outline: none !important; } /* Odstranění vnitřních linek u miniatur v modalu */ #product-modal .js-thumb-container .thumb { border: none !important; } #product-modal .js-thumb-container img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* ============================================ MOBILNÍ MENU - obsah zůstane viditelný pod menu ============================================ */ /* Menu wrapper - absolutní pozice místo fixed/overlay */ @media (max-width: 991px) { /* Mobilní menu se zobrazí jako dropdown nad obsahem */ #mobile_top_menu_wrapper, #_mobile_top_menu_wrapper { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; z-index: 9000 !important; background: var(--white) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; border-radius: 9px !important; /* Zaobleny všechny rohy */ overflow: visible !important; /* Zamezí ořezávání obsahu */ } /* Header musí být relative aby absolute menu fungovalo */ #header { position: sticky !important; overflow: visible !important; } /* Stránka se neposunuje ani nepřekrývá */ body.menu-open, body[class*="modal-open"] { overflow: auto !important; position: static !important; } /* Overlay/backdrop za mobilním menu zrušíme */ #_mobile_top_menu_wrapper ~ .modal-backdrop, .js-top-menu-mobile ~ .modal-backdrop { display: none !important; } } /* ============================================ MOBILNÍ KOŠÍK MODAL - oprava rozpadání ============================================ */ @media (max-width: 991px) { /* Modal přes celou šířku */ #blockcart-modal .modal-dialog { margin: 10px !important; width: auto !important; max-width: calc(100vw - 20px) !important; } #blockcart-modal .modal-content { border-radius: 9px !important; overflow: hidden !important; } /* Modal body — sloupce pod sebou na mobilu */ #blockcart-modal .modal-body .row { display: flex !important; flex-direction: column !important; } #blockcart-modal .modal-body .col-md-7, #blockcart-modal .modal-body .col-md-5 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; } /* Oddělovač mezi sekcemi */ #blockcart-modal .modal-body .col-md-5 { border-top: 1px solid #f0f0f0 !important; padding-top: 12px !important; margin-top: 12px !important; } /* Tlačítka — plná šířka */ #blockcart-modal .modal-footer, #blockcart-modal .cart-content-btn { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 12px !important; } #blockcart-modal .modal-footer .btn, #blockcart-modal .cart-content-btn .btn { width: 100% !important; text-align: center !important; white-space: normal !important; padding: 12px !important; font-size: 14px !important; } /* Produkt v košíku — obrázek a info vedle sebe */ #blockcart-modal .product-image { width: 80px !important; height: 80px !important; flex-shrink: 0 !important; } #blockcart-modal .product-image img { width: 80px !important; height: 80px !important; object-fit: cover !important; border-radius: 8px !important; } } /* ============================================ TABLET LAYOUT (768px - 991px) ============================================ */ @media (min-width: 768px) and (max-width: 991px) { /* Mobilní menu wrapper — skrýt, způsobuje bílý pruh */ #mobile_top_menu_wrapper { display: none !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; } /* Wrapper a footer — zobrazit (JS je skrývá) */ #wrapper, section#wrapper, #footer, footer.js-footer { display: block !important; } /* Hlavní row — flex, vše na střed */ #header .header-top .container > .row { display: flex !important; flex-wrap: nowrap !important; /* Keep logo, menu, search in one row */ align-items: center !important; justify-content: space-between !important; } /* Logo */ #header .header-top #_desktop_logo { flex: 0 0 auto !important; width: auto !important; align-self: center !important; padding-right: 8px !important; } #header .header-top #_desktop_logo img { max-height: 40px !important; width: auto !important; } /* header-top-right — roste, flex wrap */ #header .header-top .header-top-right { flex: 1 1 auto !important; display: flex !important; flex-wrap: wrap !important; /* This makes menu and search wrap within header-top-right */ flex-wrap: nowrap !important; /* Keep menu and search in one row within header-top-right */ align-items: center !important; min-width: 0 !important; align-self: center !important; justify-content: space-between !important; /* Distribute menu and search within header-top-right */ } /* Desktop menu — order 1, plná šířka */ #header .header-top #_desktop_top_menu { order: 1 !important; margin: 0 !important; padding: 0 !important; flex: 1 1 auto !important; /* Menu takes up available space in the middle */ min-width: 0 !important; /* Allow menu to shrink if needed */ /* Removed margin-top, border-top, padding-top as menu is now in the same row */ } /* Search — order 2, vedle loga (přesuneme před menu vizuálně) */ #header .header-top .search-widgets { order: 2 !important; flex: 0 0 auto !important; width: 200px !important; margin-left: auto !important; width: 200px !important; /* Keep the wider search field */ align-self: center !important; position: relative !important; } /* Menu ul — 2 sloupce */ #header .header-top ul#top-menu { display: flex !important; flex-wrap: wrap !important; margin: 0 !important; padding: 0 !important; justify-content: flex-start !important; /* Zarovnání vlevo */ column-gap: 20px !important; /* Svislá mezera mezi sloupci */ row-gap: 0 !important; /* Žádná mezera mezi řádky */ } #header .header-top ul#top-menu > li { flex: 0 0 calc(50% - 10px) !important; /* Adjust width for gap */ max-width: calc(50% - 10px) !important; /* Adjust width for gap */ box-sizing: border-box !important; /* Removed border-bottom to eliminate gray lines */ text-align: left !important; /* Text vlevo */ padding: 0 !important; } #header .header-top ul#top-menu > li > a { padding: 1px !important; /* Minimální padding */ font-weight: 600 !important; display: block !important; text-align: left !important; /* Odkaz vlevo */ } } /* ============================================ TABLET LAYOUT (768px - 991px) - Oprava vyhledávacího pole ============================================ */ @media (min-width: 768px) and (max-width: 991px) { /* Zarovnání celého widgetu */ #search_widget, .search-widgets { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } /* Zarovnání formuláře a vnitřní ikony */ #search_widget form, .search-widgets form { display: flex !important; align-items: center !important; position: relative !important; /* Nutné pro správné umístění ikony */ width: 100% !important; } /* Oprava pozice ikony lupy na tabletu - přesun vlevo */ #search_widget i.search, #search_widget button[type="submit"], .search-widgets i.search { position: absolute !important; left: 1px !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; /* Dokonalý střed */ margin: 0 !important; height: auto !important; display: flex !important; align-items: center !important; } #search_widget input, .search-widgets input { height: 36px !important; /* Sjednotíme výšku s desktopem */ font-size: 13px !important; /* Sjednotíme velikost písma s desktopem */ line-height: 36px !important; /* Vertikálně vycentruje text uvnitř pole */ padding-left: 36px !important; /* Prostor pro ikonu lupy vlevo */ padding-right: 10px !important; box-sizing: border-box !important; /* Zajistíme konzistentní model boxu */ } /* Oprava customizace pro tablety - aby se pole nesmršťovalo */ .product-customization .custom-file { max-width: 100% !important; width: 100% !important; } .product-customization .custom-file > .js-file-name { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; line-height: 38px !important; /* Výška minus okraje pro svislý střed */ } } /* ============================================ OPRAVA: Odstranění černého rámečku na tabletu při kliknutí/focusu ============================================ */ @media (min-width: 768px) and (max-width: 991px) { /* Odstranění výchozího focus outline pro všechny interaktivní prvky */ a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus, /* Pro prvky, které jsou focusovatelné, ale nejsou nativní formulářové prvky */ [role="button"]:focus, /* Pro prvky, které se chovají jako tlačítka */ [role="link"]:focus { /* Pro prvky, které se chovají jako odkazy */ outline: none !important; box-shadow: none !important; /* Pro jistotu odstraníme i případný box-shadow */ } /* Pro aktivní stav (při držení tlačítka myši/dotyku) */ a:active, button:active, input:active, select:active, textarea:active { outline: none !important; box-shadow: none !important; } } /* ============================================ OPRAVY - Přihlásit / Košík mezera, mobilní menu ============================================ */ /* 1. Mezera mezi tlačítkem Přihlásit se a Košíkem */ #header-nav .user-info, .header-nav .user-info, #header-nav #_desktop_user_info, .header-nav #_desktop_user_info { margin-right: 0px !important; } /* Alternativní selektor pokud je to přímý sourozenec */ #header-nav .container > div + div, .header-nav .container > * + * { margin-left: 12px !important; } /* Přesnější — mezera vpravo od "Přihlásit se" */ #header-nav a[href*="prihlasit"], #header-nav a[href*="login"], #header-nav a[href*="authentication"], .header-nav a[href*="authentication"] { margin-right: 16px !important; display: inline-block !important; } /* 2. MOBILNÍ MENU - oprava ořezu submenu */ @media (max-width: 767px) { /* Reset výšky horní lišty na mobilu, aby se do ní vešlo logo a hamburger */ .header-nav { max-height: none !important; height: auto !important; padding: 8px 0 !important; margin: 0 !important; /* Odstraní případný bílý proužek nad lištou */ } .header-nav .container, .header-nav .row { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; /* Držíme vše v jedné řadě (hamburger, logo, ikony) */ justify-content: space-between !important; width: 100% !important; } /* Zvětšení prvků v horní liště (přihlášení a košík) pro mobil */ .header-nav a, .header-nav .user-info, .header-nav .blockcart.cart-preview, .header-nav .blockcart.cart-preview .header, .header-nav .blockcart.cart-preview .header a { height: 44px !important; font-size: 15px !important; margin: 0 !important; padding: 0 5px !important; } /* Seskupení panáčka a košíku vpravo */ #_mobile_user_info, #_mobile_cart, #_mobile_user_info .user-info, .header-nav .user-info, .header-nav .blockcart { display: flex !important; align-items: center !important; order: 10 !important; /* Posune je až na konec řady vpravo */ } /* První ikona v pravé skupině (panáček) dostane margin-left: auto, aby odtlačila zbytek */ #_mobile_user_info, .header-nav .user-info { margin-left: auto !important; } .header-nav .blockcart { margin-left: 8px !important; /* Mezera mezi panáčkem a košíkem */ } .header-nav .material-icons { font-size: 28px !important; /* Výrazně větší ikony pro mobil (hamburger, košík, panáček) */ } /* Mobilní menu wrapper — plná výška, scroll */ #mobile_top_menu_wrapper, #_mobile_top_menu_wrapper { position: absolute !important; /* Změněno z fixed na absolute */ top: 100% !important; /* Zobrazí menu pod hlavičkou */ left: 0 !important; right: 0 !important; overflow: visible !important; /* Změna z auto na visible pro dynamický růst */ height: auto !important; max-height: none !important; border-radius: 9px !important; z-index: 9500 !important; background: #ffffff !important; padding-top: 10px !important; } /* Submenu — viditelné, neořezané */ #mobile_top_menu_wrapper .collapse, #mobile_top_menu_wrapper .popover, #mobile_top_menu_wrapper .sub-menu, #mobile_top_menu_wrapper .js-sub-menu { overflow: visible !important; max-height: none !important; height: auto !important; } /* 3. Hamburger a logo ve stejném bloku */ #header .header-nav #menu-icon, .header-nav #menu-icon, #header #menu-icon, #header .header-banner #menu-icon { display: flex !important; align-items: center !important; order: 1 !important; margin-right: 10px !important; cursor: pointer !important; } /* Logo vedle hamburgeru - uprostřed mezi hamburgerem a ikonami vpravo */ #header .header-nav #_desktop_logo, .header-nav #_desktop_logo, #header #_desktop_logo { order: 2 !important; flex: 0 1 auto !important; display: block !important; } #header .header-nav #_desktop_logo img, #header #_desktop_logo img { max-height: 40px !important; /* Velikost loga na mobilu */ width: auto !important; } /* 4. Vyhledávací pole — plná šířka na mobilu */ #header .header-top, #header .header-top .container, #header .header-top .row { width: 100% !important; } /* Search wrapper plná šířka */ #search_widget, #_desktop_search_widget, .search-widgets, #header .search-widget { width: calc(100% - 30px) !important; /* Zajistí stejné odsazení z obou stran */ margin: 10px 15px !important; /* Symetrický okraj 15px zleva i zprava */ min-width: 0 !important; box-sizing: border-box !important; display: block !important; position: relative !important; } /* Oprava ikony lupy ve vyhledávání */ #search_widget form, .search-widgets form { position: relative !important; width: 100% !important; } #search_widget i.search { position: absolute !important; left: 10px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 2 !important; font-size: 20px !important; color: #999 !important; margin: 0 !important; pointer-events: none !important; /* Aby šlo kliknout skrz lupu do pole */ } #search_widget input, .search-widgets input { width: 100% !important; box-sizing: border-box !important; height: 44px !important; /* Vyšší vyhledávací pole */ font-size: 16px !important; /* Zabrání automatickému přibližování na iPhone */ padding-left: 38px !important; /* Dostatečný prostor pro ikonu lupy */ padding-right: 15px !important; } } /* ============================================ MOBILNÍ HEADER - oprava zarovnání Struktura: hamburger vlevo | logo střed | panáček+košík vpravo ============================================ */ @media (max-width: 767px) { /* Wrapper mobilního headeru — flex, centrované */ .header-nav .container, nav.header-nav .container { padding-left: 15px !important; padding-right: 15px !important; } /* Row v header-nav */ .header-nav .container .row, nav.header-nav .container .row { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; margin: 0 !important; padding: 0 !important; } #header .header-nav #menu-icon .material-icons { line-height: 35px; } /* Skryjeme desktop sloupec */ .header-nav .container .row .hidden-sm-down, nav.header-nav .container .hidden-sm-down { display: none !important; } /* Mobilní blok — plná šířka, flex */ .header-nav .hidden-md-up, nav.header-nav .hidden-md-up { display: flex !important; align-items: center !important; width: 100% !important; padding: 0 !important; flex-wrap: nowrap !important; } /* Hamburger — vlevo */ #menu-icon, .float-xs-left#menu-icon { float: none !important; order: 1 !important; flex: 0 0 auto !important; margin-right: 0 !important; } /* Logo — vlevo, roste */ #_mobile_logo, .top-logo#_mobile_logo { float: none !important; order: 2 !important; flex: 1 1 auto !important; text-align: left !important; margin-left: 0px !important; /* Zmenšena mezera k hamburger menu */ } /* Panáček — vpravo */ #_mobile_user_info, .float-xs-right#_mobile_user_info { float: none !important; order: 3 !important; flex: 0 0 auto !important; margin-left: 8px !important; } /* Košík — úplně vpravo */ #_mobile_cart, .float-xs-right#_mobile_cart { float: none !important; order: 4 !important; flex: 0 0 auto !important; margin-left: 8px !important; } /* clearfix — skrýt */ .header-nav .clearfix { display: none !important; } /* ============================================ VYHLEDÁVACÍ POLE — plná šířka, ikona lupy na střed ============================================ */ /* header-top plná šířka */ #header .header-top, .header-top { padding: 8px 5px !important; box-sizing: border-box !important; } #header .header-top .container, .header-top .container { padding: 0 !important; width: 100% !important; max-width: 100% !important; } #header .header-top .row, .header-top .row { margin: 0 !important; width: 100% !important; } /* Search widget — plná šířka */ #search_widget, .search-widgets, #_desktop_search_widget { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; margin: 0 !important; position: relative !important; display: block !important; box-sizing: border-box !important; } /* Input plná šířka */ #search_widget input, .search-widgets input, #search_widget input[type="text"], #search_widget input[name="s"] { width: 100% !important; box-sizing: border-box !important; padding-right: 40px !important; /* místo pro lupu */ padding-top: 8px !important; padding-bottom: 8px !important; height: 40px !important; line-height: 40px !important; } /* Ikona lupy — vertikálně na střed */ #search_widget .material-icons.search, .search-widgets .material-icons.search, #search_widget i.search, #search_widget button { position: absolute !important; right: 8px !important; top: 50% !important; transform: translateY(-50%) !important; height: auto !important; line-height: 1 !important; display: flex !important; align-items: center !important; } /* Logo v header-top skrýt (je v header-nav) */ #header .header-top #_desktop_logo, .header-top #_desktop_logo { display: none !important; } /* Desktop menu v header-top skrýt */ #header .header-top #_desktop_top_menu, .header-top #_desktop_top_menu { display: none !important; } } /* ============================================ MOBILNÍ HEADER v2 - oprava paddingů a zarovnání ============================================ */ @media (max-width: 767px) { /* Odstraníme bílé místo nahoře */ #header { padding-top: 0 !important; margin-top: 0 !important; } /* header-nav — žádný padding nahoře */ nav.header-nav, .header-nav { padding-top: 0 !important; margin-top: 0 !important; } .header-nav .container, nav.header-nav .container { padding-left: 5px !important; padding-right: 5px !important; } /* Mobilní row — align center, žádný margin */ .header-nav .hidden-md-up { padding: 6px 0 !important; margin: 0 !important; align-items: center !important; } /* Hamburger — vertikálně na střed */ #menu-icon { display: flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; margin-top: 0 !important; padding: 0 !important; } /* Panáček a košík — vertikálně na střed */ #_mobile_user_info, #_mobile_cart { display: flex !important; align-items: center !important; align-self: center !important; } /* Logo — vertikálně na střed, zarovnáno vlevo */ #_mobile_logo { display: flex !important; align-items: center !important; justify-content: flex-start !important; align-self: center !important; } /* header-top container — menší padding */ #header .header-top .container, .header-top .container { padding-left: 5px !important; padding-right: 5px !important; } /* header-top-right col — žádný extra padding */ .header-top-right, .header-top .col-md-10, .header-top .col-sm-12 { padding-left: 0 !important; padding-right: 0 !important; } /* Search input padding doladění */ #search_widget input, .search-widgets input { padding-left: 50px !important; padding-right: 0px !important; } } /* ============================================ 10. HESLO - ikonka oka + oprava focusu ============================================ */ /* Odstranění výchozího rámečku z celé skupiny (obal PrestaShopu) */ .input-group, .input-group.js-parent-focus.focus { border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important; } /* Rámeček a radius pouze pro samotný input box (v klidovém stavu) */ .input-group input.form-control { border: 1px solid #e0e0e0 !important; border-radius: var(--border-radius-sm) !important; transition: border-color 0.2s, box-shadow 0.2s !important; } /* Změna textu "Zobrazit" na ikonku oka */ [data-action="show-password"] { font-size: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; padding: 0 12px !important; color: var(--text-muted) !important; cursor: pointer !important; } [data-action="show-password"]::after { content: "\e8f4" !important; /* Hex kód pro oko (visibility) */ font-family: "Material Icons" !important; font-size: 24px !important; visibility: visible !important; text-transform: none !important; /* Důležité, aby se text nezměnil na velká písmena */ } /* Dynamická změna ikony: Pokud je input přepnutý na text (heslo je vidět), ukaž přeškrtnuté oko */ .input-group input[type="text"] ~ .input-group-btn [data-action="show-password"]::after, .input-group input[type="text"] ~ [data-action="show-password"]::after { content: "\e8f5" !important; /* Hex kód pro přeškrtnuté oko (visibility_off) */ } /* Focus efekt pouze na samotném inputu */ .input-group.js-parent-focus.focus input.form-control { border: 1px solid #24b9d7 !important; /* Modrá barva ladící k vašemu webu */ box-shadow: 0 0 0 2px rgba(36, 185, 215, 0.2) !important; border-radius: var(--border-radius-sm) !important; background-color: var(--white) !important; position: relative; z-index: 2; } /* ============================================ 11. FORMULÁŘE - úpravy ============================================ */ /* Označení povinných polí červenou hvězdičkou */ label.required::after { content: " *" !important; color: #e74c3c !important; /* Červená barva */ margin-left: 4px !important; font-weight: normal !important; /* Aby hvězdička nebyla tučná jako label */ } /* Skrytí textu "Volitelné" (předpokládá se, že je v .form-control-comment) */ .form-control-comment { display: none !important; } /* Vycentrování hlavního tlačítka na konci formulářů (Přihlásit se, Registrovat) */ .form-footer { text-align: center !important; } /* ============================================ 12. STAV PŘIHLÁŠENÍ - zvýraznění ikony ============================================ */ /* Ikona panáčka se po přihlášení zbarví do modra POUZE na mobilu */ #_mobile_user_info:has(.logout) i.material-icons { color: #24b9d7 !important; } /* Na desktopu a tabletu zůstane ikona panáčka černá */ #_desktop_user_info:has(.logout) i.material-icons, .user-info:has(.logout) i.material-icons { color: var(--black) !important; } /* Jméno uživatele (text) se na desktopu a tabletu zbarví do modra */ #_desktop_user_info:has(.logout) a:not(.logout), .user-info:has(.logout) a:not(.logout) { color: #24b9d7 !important; } /* ============================================ 13. MOBILNÍ HEADER - ikona odhlášení ============================================ */ @media (max-width: 767px) { /* Zajistíme, aby se obsah (přihlášení/odhlášení) centroval na střed svého bloku */ #_mobile_user_info { display: flex !important; align-items: center !important; } /* Skryjeme původní ikonku (panáčka) uvnitř odkazu pro odhlášení, aby tam nebyla dvakrát */ #_mobile_user_info .logout i { display: none !important; } /* Skryjeme text "Odhlásit" a nahradíme ho ikonou */ #_mobile_user_info .logout { display: flex !important; /* Vynutí zobrazení, PrestaShop ho na mobilu standardně schovává */ font-size: 0 !important; /* Skryje text "Odhlásit" */ align-items: center !important; justify-content: center !important; width: 28px !important; /* Velikost pro ikonu */ height: 28px !important; /* Velikost pro ikonu */ padding: 0 !important; margin-left: 8px !important; /* Mezera od ikony panáčka */ color: var(--text-muted) !important; /* Výchozí barva ikony */ text-decoration: none !important; } #_mobile_user_info .logout::before { content: "exit_to_app" !important; /* Ikona pro odhlášení (Material Icons) */ font-family: "Material Icons" !important; font-size: 24px !important; /* Velikost ikony */ line-height: 1 !important; color: inherit !important; /* Dědí barvu z rodiče */ } #_mobile_user_info .logout:hover { color: #24b9d7 !important; /* Barva ikony při najetí myší */ } } /* ============================================ 15. CHYBOVÉ HLÁŠENÍ - promo kód ============================================ */ /* Kontejner pro promo kód - hlavní obal */ .block-promo { display: flex !important; flex-direction: column !important; align-items: center !important; /* Vycentruje input-group i hlášení pod ním */ } /* Samotný box s kódem - flex pouze když je vidět (pro správnou funkci collapse) */ #promo-code.collapse.show { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; } /* Odkaz "Máte slevový kód?" - stylování a centrování */ .promo-discounts .collapse-button { display: inline-block !important; margin-bottom: 10px !important; color: var(--primary-color) !important; font-weight: 600 !important; cursor: pointer !important; text-decoration: none !important; } /* Přizpůsobení šířky a pozice chybového hlášení */ .block-promo .alert.alert-danger.js-error, #promo-code .alert.alert-danger.js-error { display: none; /* Skryjeme bez !important, aby to JavaScript mohl přebít */ align-items: center !important; padding: 8px 12px !important; border-radius: 6px !important; max-width: 100% !important; /* Aby nepřeteklo z rodiče */ width: auto !important; /* Důležité pro přizpůsobení šířky */ margin-top: 8px !important; /* Mezera od inputu */ margin-left: auto !important; margin-right: auto !important; position: relative !important; /* Zachováme relativní pozicování pro případnou šipku */ left: 20px !important; /* Posunutí hlášení o 20px doprava */ transform: none !important; /* Reset transform */ } /* Když JavaScript hlášení zobrazí (odstraní display:none), vynutíme náš flex vzhled */ .block-promo .alert.alert-danger.js-error[style*="display: block"], .block-promo .alert.alert-danger.js-error[style*="display: inline-block"] { display: inline-flex !important; } /* Oprava ikony uvnitř chybového hlášení */ .block-promo .alert.alert-danger.js-error i.material-icons, #promo-code .alert.alert-danger.js-error i.material-icons { font-size: 18px !important; margin-right: 6px !important; line-height: 1 !important; } /* Oprava textu uvnitř chybového hlášení */ .block-promo .alert.alert-danger.js-error .js-error-text, #promo-code .alert.alert-danger.js-error .js-error-text { font-size: 13px !important; line-height: 1.4 !important; } /* ============================================ 14. PROMO KÓD - mezera mezi polem a tlačítkem ============================================ */ /* Kontejner pro input a tlačítko - flexbox pro mezeru */ .block-promo .input-group, #promo-code .input-group { display: flex !important; gap: 6px !important; /* Mezera mezi inputem a tlačítkem */ width: 100% !important; /* Zajistí, že input-group zabere celou šířku rodiče */ max-width: 450px !important; /* Zvětšeno, aby box nebyl příliš úzký */ } /* Vynucení radiusu na všech rozích inputu */ .block-promo .promo-input, #promo-code .promo-input { border-radius: 8px !important; flex: 1 !important; margin-right: 0 !important; /* Zrušíme margin-right, protože teď používáme gap */ } /* Vynucení radiusu na všech rozích tlačítka "Přidat" */ .block-promo .input-group-btn .btn, #promo-code .input-group-btn .btn { border-radius: 8px !important; margin-left: 0 !important; /* Zrušíme případné překrývání okrajů */ flex-shrink: 0 !important; /* Zabráníme zmenšování tlačítka */ } /* Tlačítko "Zavřít" pod boxem s kódem */ .block-promo .promo-code-close, #promo-code .promo-code-close { margin-top: 10px !important; font-size: 13px !important; color: var(--text-muted) !important; cursor: pointer !important; background: transparent !important; border: none !important; text-decoration: underline !important; } /* ============================================ 16. CUSTOMIZACE PRODUKTU (Textarea & Soubor) ============================================ */ /* Zvětšení prostoru: zrušíme velké vnitřní okraje bílé karty */ .product-customization .card.card-block { padding: 5px !important; } /* Oprava textarea - odsazení textu od zaoblených rohů */ .product-customization textarea.product-message { padding: 12px !important; scrollbar-width: thin !important; /* Pro Firefox */ scrollbar-color: var(--text-muted) transparent !important; } /* Moderní a zaoblený scrollbar pro Chrome, Edge a Safari */ .product-customization textarea.product-message::-webkit-scrollbar { width: 8px !important; } .product-customization textarea.product-message::-webkit-scrollbar-thumb { background-color: var(--text-muted) !important; /* Sjednocená šedá */ border-radius: 10px !important; border: 2px solid var(--white) !important; /* Vytvoří jemný okraj kolem posuvníku */ } /* Přisunutí popisků k polím v customizaci */ .product-customization label { margin-bottom: 4px !important; display: inline-block !important; } /* Kontejner pro nahrání souboru - flex pro mezeru a zarovnání */ .product-customization .custom-file { position: relative !important; display: flex !important; align-items: center !important; gap: 10px !important; /* Mezera mezi polem a tlačítkem */ margin-top: 4px !important; /* Snížení mezery, aby byl box blíže k textu */ margin-bottom: 2px !important; /* Zmenšení mezery pod boxem, aby text nebyl tak nízko */ flex-wrap: nowrap !important; /* Vynutíme jeden řádek */ max-width: 450px !important; /* Omezení šířky celého prvku */ cursor: pointer !important; background: transparent !important; /* Odstraní šedou barvu, která dělala špičky v rozích */ border: none !important; } /* Styl pro textové pole s názvem souboru (přidání rámečku a radiusu) */ .product-customization .custom-file > .js-file-name { /* Zvýšená specifičnost */ flex: 1 !important; background: var(--bg-light) !important; border: 1px solid #e0e0e0 !important; border-radius: var(--border-radius-sm) !important; padding: 0 12px !important; /* Horní a dolní padding na 0 pro dokonalý flex střed */ font-size: 14px !important; color: var(--text-muted) !important; height: 40px !important; /* Fixní výška pro odstranění "vysokého" pole */ min-height: 40px !important; display: block !important; /* Nutné pro funkční text-overflow: ellipsis */ line-height: 38px !important; /* Svislé vycentrování v block režimu */ box-sizing: border-box !important; /* Ensure padding is included in width */ overflow: hidden !important; /* Zajišťuje, že border-radius je viditelný */ box-shadow: none !important; /* Odstraní případné vnitřní stíny způsobující špičky */ white-space: nowrap !important; /* Zabrání zalamování textu pod sebe */ text-overflow: ellipsis !important; /* Přidá tři tečky, pokud je text moc dlouhý */ padding: 0 12px !important; /* Horní/dolní padding musí být 0 pro line-height střed */ text-indent: 0 !important; /* Reset případného odsazení prvního řádku */ } /* Skutečný neviditelný input přes celou plochu pro funkčnost kliku */ .product-customization .custom-file > .file-input { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; /* Neviditelný, ale funkční */ cursor: pointer !important; z-index: 5 !important; /* Musí být nad tlačítkem a polem */ display: block !important; } /* Úprava a zúžení tlačítka pro výběr souboru */ .product-customization .custom-file > button.btn { /* Zvýšená specifičnost */ width: 100px !important; /* Pevná šířka tlačítka pro stabilitu */ padding-left: 20px !important; padding-right: 20px !important; height: 40px !important; font-size: 0 !important; /* Skryje původní text */ flex-shrink: 0 !important; /* Zabrání zmenšování tlačítka */ position: relative !important; z-index: 1 !important; } /* Nový text pro tlačítko */ .product-customization .custom-file > button.btn::after { /* Zvýšená specifičnost */ content: "Soubor" !important; font-size: 14px !important; text-transform: none !important; display: block !important; /* Zajišťuje, že pseudo-element je viditelný */ } /* Přidání mezery pod "Max. 250 znaků" */ .product-customization-item .product-message + small { display: block !important; float: none !important; text-align: right !important; margin-bottom: 15px !important; } /* Oprava popisku povolených formátů pod nahráváním */ .product-customization-item .custom-file + small.float-xs-right { float: none !important; display: block !important; margin-top: 0 !important; margin-left: 15px !important; /* Odsazení 15px od levého okraje, jak bylo požadováno */ text-align: left !important; font-size: 0 !important; /* Skryje původní dlouhý seznam přípon */ } .product-customization-item .custom-file + small.float-xs-right::after { content: "Doporučený formát: .jpg, .png, .webp" !important; font-size: 12px !important; color: #7a7a7a !important; } /* ============================================ 17. ZÁLOŽKY PRODUKTU (Popis & Detaily) ============================================ */ /* Záložky jsou nyní v product.tpl přesunuty pod .row.product-container — grid hack již není potřeba, stačí základní šířka a odsazení */ .tabs.product-tabs-fullwidth { width: 100% !important; margin-top: 30px !important; } /* Vzhled karty pro záložky (sjednocení s designem webu) */ .product-tabs, .tabs { background: #ffffff !important; border: 1px solid #e0e0e0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important; border-radius: 9px !important; padding: 24px !important; margin-bottom: 2rem !important; } /* Úprava navigace záložek (čistší vzhled bez defaultních čar) */ .tabs .nav-tabs { border: none !important; margin-bottom: 20px !important; } .tabs .nav-tabs .nav-link { border: none !important; border-radius: var(--border-radius-sm) !important; transition: all 0.2s ease !important; color: var(--text-muted) !important; } .tabs .nav-tabs .nav-link.active { background: var(--primary-color) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(36, 185, 215, 0.2) !important; } /* ============================================ 18. PŘIZPŮSOBENÍ PRODUKTU — dvousloupcový grid ============================================ */ /* Dvousloupcový grid pro pole s nahráváním souborů */ @media (min-width: 768px) { ul.customization-fields-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px 24px !important; list-style: none !important; padding: 0 !important; margin-top: 16px !important; } /* Textové pole zabere celou šířku (přes oba sloupce) */ ul.customization-fields-grid .product-customization-item:not(.customization-item-file) { grid-column: 1 / -1 !important; } /* Každé file pole — kompaktnější vzhled */ ul.customization-fields-grid .customization-item-file { background: #f8f8f8; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px !important; } ul.customization-fields-grid .customization-item-file label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; color: #333; } ul.customization-fields-grid .customization-item-file .custom-file { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } ul.customization-fields-grid .customization-item-file .js-file-name { font-size: 0.8rem; color: #888; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ul.customization-fields-grid .customization-item-file .btn { font-size: 0.8rem; padding: 4px 10px; white-space: nowrap; } ul.customization-fields-grid .customization-item-file small { font-size: 0.75rem; color: #aaa; width: 100%; } } /* Tablet — stále dvousloupcový ale trochu užší */ @media (min-width: 768px) and (max-width: 991px) { ul.customization-fields-grid { grid-template-columns: 1fr 1fr !important; } } /* Mobil — jeden sloupec */ @media (max-width: 767px) { ul.customization-fields-grid { list-style: none !important; padding: 0 !important; } } /* ============================================ MEZERY MEZI SEKCEMI PRODUKTŮ NA HOMEPAGE ============================================ */ section.featured-products.clearfix.mt-3, .featured-products.mt-3 { margin-top: 8px !important; }