/* ============================================================ VAKOKUR — MODRÁ VERZE ============================================================ */ :root{ --vk-bg:#ffffff; --vk-bg-soft:#f6f6f4; --vk-accent:#1060a0; --vk-accent-dk:#0c4c7d; --vk-accent-lt:#2080c0; --vk-on-accent:#ffffff; --vk-ink:#232323; --vk-line:#e2e2e2; --vk-sale:#e53935; } /* ---------- 1) POZADÍ ---------- */ html, body, #main-wrapper, #main-wrapper-in, #main { background: var(--vk-bg) !important; } #header, #header-in { background: var(--vk-bg) !important; } .header-info { background: var(--vk-accent) !important; } body { color: var(--vk-ink); } /* ---------- 2) HLAVIČKA + VYHLEDÁVÁNÍ ---------- */ .header-info { padding:4px 0; font-size:12px; line-height:1.5; } .header-info, .header-info a { color: var(--vk-on-accent) !important; } /* modrý pruh na celou šířku okna */ /* clip, NE hidden: overflow-x:hidden na udělá z rootu scroll-container a na iOS Safari tím rozbíjí position:fixed – fixed prvky (cookie modal #cboxContent.cookiesDialog, login modal) se pozicují vůči dokumentu místo viewportu, takže při odscrollované stránce skončí mimo obraz (vidět je jen tmavý backdrop → stránka „zamrzne"). overflow-x:clip ořízne přetečení 100vw lišty stejně, ale scroll-container nevytváří. */ html, body { overflow-x:clip; } .header-info { position:relative; width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; } #top-links .box-account-links a { font-weight:600; text-decoration:none; } #top-links .box-account-links a:hover { text-decoration:underline; } /* ikona účtu před PŘIHLÁŠENÍ — bílá, aby byla vidět na modré liště */ .header-info .icon-account-login::before, #top-links .icon-account-login::before { color: var(--vk-on-accent) !important; } /* posun přihlášení/registrace od pravého kraje (zarovnání s obsahem) */ .header-info .top-links-holder { padding-right:max(15px, calc(50vw - 595px)) !important; } .header-center { padding:4px 0; } #logo, #logo a { display:block; width:100%; margin:0; padding:0; line-height:0; } #logo img { display:block; width:100%; max-width:340px; height:auto; max-height:none; margin:0; } /* výška pole i lupy řízená proměnnou → responzivně zmenšujeme níž */ .header-center .searchform { width:100%; --vk-sh:36px; } .searchform .s-word { width:100%; box-sizing:border-box; height:var(--vk-sh); box-shadow:none; border:1px solid var(--vk-line); border-radius:calc(var(--vk-sh) / 2); padding:0 18px; background:#fff; color:var(--vk-ink); font-size:14px; line-height:normal; } .searchform .s-word:focus { border-color:var(--vk-accent); outline:none; } /* lupa = KRUH stejné výšky jako pole → vždy zarovnaná, menší než dřív (zrušit motiví top:.4375rem) */ .searchform .b-search { position:relative; top:0; box-sizing:border-box; vertical-align:top; height:var(--vk-sh); width:var(--vk-sh); min-width:0; padding:0; margin:0; border:none; cursor:pointer; border-radius:50%; background-color:var(--vk-accent); background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cline%20x1='21'%20y1='21'%20x2='16.65'%20y2='16.65'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:18px 18px; color:transparent; font-size:0; font-weight:700; } .searchform .b-search:hover { background-color:var(--vk-accent-dk); } .searchform .tar { background:transparent !important; } .header-cart-price { font-weight:800; color:var(--vk-accent); } /* ---------- 3) KATEGORIE = MODRÉ PILULKY ---------- */ #categories .categories { margin-bottom:8px; } #categories .categories .topic a { display:block; padding:11px 16px; border-radius:22px; font-weight:700; text-decoration:none; color:var(--vk-on-accent); line-height:1.25; transition:background .15s ease; } #categories .categories.cat-01 .topic a { background:var(--vk-accent); } #categories .categories.cat-02 .topic a { background:var(--vk-accent-lt); } #categories .categories .topic a:hover { background:var(--vk-accent-dk); } #categories .categories.cat-active .topic a { box-shadow:inset 0 0 0 2px rgba(255,255,255,.85); } #categories .categories ul.noDisplay { margin:4px 0 0 8px; } #categories .categories ul li a { display:block; padding:4px 10px; border-radius:8px; color:var(--vk-ink); text-decoration:none; font-weight:500; } #categories .categories ul li a:hover { background:var(--vk-bg-soft); } /* ---------- 4) PRODUKTOVÉ KARTY ---------- */ .products .product > .columns { background:#fff; border:1px solid var(--vk-line); border-radius:12px; padding:14px; height:100%; position:relative; } .products .p-image { text-align:center; } .products .p-image img { max-width:100%; height:auto; } .products .p-name { display:block; margin:10px 0 6px; min-height:2.6em; font-weight:600; line-height:1.3; color:var(--vk-ink); text-decoration:none; text-align:center; } .products .p-name:hover { color:var(--vk-accent); } .products .p-det-main-price { font-weight:800; font-size:18px; color:var(--vk-ink); } .products .p-standard-price { color:#999; text-decoration:line-through; font-size:13px; } .products .product > .columns .flags { position:absolute; top:10px; left:10px; z-index:3; } .products .flag { display:inline-block; background:var(--vk-sale); color:#fff; font-size:11px; font-weight:700; padding:3px 9px; border-radius:12px; text-transform:uppercase; letter-spacing:.3px; margin-bottom:4px; } /* zaoblit obě vlajky (AKCE i NOVINKA) */ .products .product .bool-icon-single { display:inline-block !important; border-radius:12px !important; margin-bottom:4px !important; } /* ---------- 5) HORNÍ MENU: SKRÝT LIŠTU (hamburger zůstává) ---------- */ #menu > ul.inline-list { display:none !important; } #menu { border:none !important; padding:0 !important; margin:0 !important; min-height:0 !important; } /* ---------- 6) ZRUŠIT OVERLAY → STATICKÁ KARTA ---------- */ .products .product .product-card-outer{ position:static !important; width:auto !important; left:auto !important; z-index:auto !important; border:none !important; } .products .product .product-card-inner{ border:none !important; } .products .product .product-card-content{ border:none !important; padding:0 !important; background:transparent !important; } .products .product .product-card-hover-content{ display:block !important; float:none !important; width:100% !important; } .products .product:hover .product-card-outer{ position:static !important; } .products .product:hover .product-card-inner, .products .product:hover .product-card-content{ border:none !important; padding:0 !important; } .products .product:hover > .columns{ box-shadow:0 6px 20px rgba(0,0,0,.08) !important; border-color:var(--vk-line) !important; } .products .product .p-image a:before, .products .product .p-image a:after, .products .product:hover .p-image a:before, .products .product:hover .p-image a:after{ content:none !important; display:none !important; } .products .product .rating{ display:none !important; } .products .product .shortDescription{ display:none !important; } .products .product .p-cat-hover-info{ display:none !important; } .products .product .p-cat-availability{ display:block; text-align:center; margin:6px 0; } /* ---------- 7) JEMNÝ ZOOM OBRÁZKU NA HOVERU ---------- */ .products .product .p-image{ overflow:hidden; border-radius:8px; } .products .product .p-image img{ transition: transform .3s ease; } .products .product:hover .p-image img{ transform: scale(1.06); } /* ---------- 8) KOŠÍKOVÝ ŘÁDEK: počet kusů [-] [n] [+] + DO KOŠÍKU ---------- */ .products .product .p-cart-button{ display:flex !important; align-items:stretch; gap:6px; width:100% !important; margin:12px 0 0 !important; padding:0 14px !important; border:none !important; box-sizing:border-box !important; } /* obal počtu kusů = zaoblený stepper */ .products .product .field-pieces-wrap{ display:inline-flex !important; align-items:center !important; flex:0 0 auto !important; width:auto !important; height:38px !important; position:static !important; float:none !important; margin:0 !important; padding:0 !important; border:1px solid var(--vk-line) !important; border-radius:19px !important; overflow:hidden !important; background:#fff !important; } /* tlačítka + a - */ .products .product .field-pieces-wrap .add-pcs, .products .product .field-pieces-wrap .remove-pcs{ position:relative !important; top:auto !important; right:auto !important; display:flex !important; align-items:center; justify-content:center; width:30px !important; height:38px !important; margin:0 !important; padding:0 !important; font-weight:700 !important; line-height:1 !important; color:var(--vk-accent) !important; text-decoration:none !important; cursor:pointer; background:var(--vk-bg-soft) !important; font-size:0 !important; } .products .product .field-pieces-wrap .add-pcs:hover, .products .product .field-pieces-wrap .remove-pcs:hover{ background:#e9eef3 !important; color:var(--vk-accent-dk) !important; } .products .product .field-pieces-wrap .remove-pcs{ order:1; } .products .product .field-pieces-wrap .add-pcs{ order:3; } /* glyphy + a - (motiv má ::before position:absolute → vracíme do toku, jinak utečou ven) */ .products .product .field-pieces-wrap .add-pcs::before, .products .product .field-pieces-wrap .remove-pcs::before{ position:static !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; width:auto !important; height:auto !important; display:inline-block !important; border:0 !important; background:none !important; color:var(--vk-accent) !important; font-size:18px !important; line-height:1 !important; } .products .product .field-pieces-wrap .remove-pcs::before{ content:"\2212"; } .products .product .field-pieces-wrap .add-pcs::before{ content:"+"; } /* pojistka: žádné trojúhelníky/šipky z ::after ani tooltipy */ .products .product .field-pieces-wrap .add-pcs::after, .products .product .field-pieces-wrap .remove-pcs::after{ content:none !important; display:none !important; border:0 !important; } .products .product .field-pieces-wrap .show-tooltip{ display:none !important; } /* pole s číslem */ .products .product input.pcs, .products .product input.amount, .products .product input.field-text, .products .product input.field-text-product{ order:2; float:none !important; display:block !important; width:34px !important; height:38px !important; line-height:38px !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; text-align:center !important; border:none !important; border-left:1px solid var(--vk-line) !important; border-right:1px solid var(--vk-line) !important; background:#fff !important; font-weight:700 !important; color:var(--vk-ink) !important; border-radius:0 !important; -moz-appearance:textfield; } .products .product input.amount::-webkit-outer-spin-button, .products .product input.amount::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } /* tlačítko DO KOŠÍKU = zaoblené, vyplní zbytek řádku */ .products .product .b-cart, .products .product .button-cart-advanced-wrap, .products .product .button-success-wrap, .products .product .button-product-wrap, .products .product .button-wrap, .products .product .b-cart-right{ border:none !important; box-shadow:none !important; background:transparent !important; padding:0 !important; flex:1 1 auto !important; display:flex !important; min-width:0 !important; } .products .product input.b-cart2, .products .product input.button.success{ width:100% !important; height:38px !important; border:none !important; border-radius:19px !important; background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; font-weight:700 !important; font-size:13px !important; cursor:pointer; box-sizing:border-box !important; white-space:nowrap; } .products .product input.b-cart2:hover, .products .product input.button.success:hover{ background:var(--vk-accent-dk) !important; } /* ---------- 9) TOP 10: ZAOBLENÁ ČÍSLA (1–3 = modré kolečko) ---------- */ #top10 ol li:nth-of-type(-n+3):before{ content:counter(li,decimal) !important; /* bez tečky */ background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; width:22px !important; height:22px !important; line-height:22px !important; border-radius:50% !important; padding:0 !important; text-align:center !important; font-weight:700 !important; font-size:.75rem !important; } /* ---------- 10) PŘIHLÁŠENÍ V MODALU (scope: #colorbox.vk-modal) ---------- */ /* 10a) vyčistit azurový 9-slice rámeček colorboxu → čistý bílý box */ /* jen vypnout azurové pozadí dílků – ROZMĚRY nechat, jinak se karta posune mimo střed (colorbox počítá šířku #colorboxu vč. těchto okrajů) */ #colorbox.vk-modal #cboxTopLeft, #colorbox.vk-modal #cboxTopRight, #colorbox.vk-modal #cboxBottomLeft, #colorbox.vk-modal #cboxBottomRight, #colorbox.vk-modal #cboxTopCenter, #colorbox.vk-modal #cboxBottomCenter, #colorbox.vk-modal #cboxMiddleLeft, #colorbox.vk-modal #cboxMiddleRight{ background:none !important; } /* vycentrovat napevno (přebíjí colorboxí inline left/top → funguje na všech šířkách) */ #colorbox.vk-modal{ position:fixed !important; left:50% !important; top:50% !important; right:auto !important; bottom:auto !important; transform:translate(-50%,-50%) !important; max-width:94vw !important; overflow:visible !important; } /* ať se stín karty neořízne */ #colorbox.vk-modal #cboxWrapper, #colorbox.vk-modal #cboxMiddleCenter{ overflow:visible !important; } /* #cboxContent necháváme průhledný a bez paddingu – ať colorbox změří výšku správně. Vizuální kartu tvoří náš vlastní div .vk-login-modal (viz 10c). */ #colorbox.vk-modal #cboxContent{ position:relative !important; background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; overflow:visible !important; } #colorbox.vk-modal #cboxLoadedContent{ overflow:visible !important; margin:0 !important; } /* 10b) zaoblené brandové „X" zavření */ #colorbox.vk-modal #cboxClose{ position:absolute !important; top:12px !important; right:12px !important; z-index:10 !important; width:30px !important; height:30px !important; border:none !important; border-radius:50% !important; background:var(--vk-bg-soft) !important; background-image:none !important; text-indent:0 !important; font-size:0 !important; padding:0 !important; } #colorbox.vk-modal #cboxClose::before{ content:"\00d7"; font-size:20px; line-height:30px; color:var(--vk-accent); display:block; text-align:center; font-weight:700; } #colorbox.vk-modal #cboxClose:hover{ background:var(--vk-accent) !important; } #colorbox.vk-modal #cboxClose:hover::before{ color:var(--vk-on-accent); } /* 10c) obsah formuláře */ .vk-login-modal{ background:#fff; border-radius:18px; box-shadow:0 12px 40px rgba(0,0,0,.18); padding:30px 32px; box-sizing:border-box; } /* 10c-GEN) obecné styly obsahu modalu – platí pro login i Shoptet modaly (dotaz…) */ .vk-login-modal h1, .vk-login-modal h2, .vk-login-modal h3, .vk-login-modal header h1, .vk-login-modal legend{ color:var(--vk-accent) !important; -webkit-text-fill-color:var(--vk-accent) !important; -webkit-text-stroke:0 !important; text-shadow:none !important; background:none !important; margin:0 0 16px !important; font-size:22px !important; font-weight:800 !important; text-align:center; } .vk-login-modal input[type="text"], .vk-login-modal input[type="email"], .vk-login-modal input[type="tel"], .vk-login-modal input[type="password"], .vk-login-modal input[type="number"], .vk-login-modal textarea, .vk-login-modal select{ width:100% !important; box-sizing:border-box !important; border:1px solid var(--vk-line) !important; border-radius:18px !important; padding:11px 16px !important; font-size:14px !important; background:#fff !important; } .vk-login-modal textarea{ border-radius:14px !important; min-height:110px; resize:vertical; } .vk-login-modal input:focus, .vk-login-modal textarea:focus, .vk-login-modal select:focus{ border-color:var(--vk-accent) !important; outline:none !important; box-shadow:0 0 0 3px rgba(16,96,160,.12) !important; } .vk-login-modal input[type="submit"], .vk-login-modal button[type="submit"], .vk-login-modal .b-send{ border:none !important; border-radius:22px !important; background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; font-weight:700 !important; font-size:14px !important; padding:12px 30px !important; cursor:pointer; box-shadow:none !important; } .vk-login-modal input[type="submit"]:hover, .vk-login-modal button[type="submit"]:hover, .vk-login-modal .b-send:hover{ background:var(--vk-accent-dk) !important; } .vk-login-modal a{ color:var(--vk-accent) !important; } .vk-login-modal__title{ margin:0 0 20px; font-size:22px; font-weight:800; color:var(--vk-accent); text-align:center; letter-spacing:.3px; } .vk-login-modal #login-form fieldset.f-border{ border:none !important; padding:0 !important; margin:0 !important; } .vk-login-modal #login-form legend, .vk-login-modal #login-form .no-css{ display:none !important; } .vk-login-modal #login-form .columns.left-50{ width:100% !important; padding:0 !important; float:none !important; } .vk-login-modal #login-form table, .vk-login-modal #login-form col, .vk-login-modal #login-form tbody, .vk-login-modal #login-form tr{ display:block !important; width:100% !important; } .vk-login-modal #login-form td{ display:block !important; width:100% !important; text-align:left !important; padding:0 !important; } .vk-login-modal #login-form td.tari{ margin-top:14px; } .vk-login-modal #login-form label .required-asterisk{ font-weight:600; color:var(--vk-ink); font-size:13px; } .vk-login-modal #login-form input[type="text"], .vk-login-modal #login-form input[type="password"]{ width:100% !important; box-sizing:border-box !important; height:auto !important; border:1px solid var(--vk-line) !important; border-radius:22px !important; padding:11px 18px !important; margin-top:6px !important; font-size:14px !important; background:#fff !important; } .vk-login-modal #login-form input[type="text"]:focus, .vk-login-modal #login-form input[type="password"]:focus{ border-color:var(--vk-accent) !important; outline:none !important; box-shadow:0 0 0 3px rgba(16,96,160,.12) !important; } .vk-login-modal #login-form .login-sys-buttons{ display:flex !important; align-items:center; justify-content:space-between; gap:14px; margin-top:22px; flex-wrap:wrap; } .vk-login-modal #login-form .login-sys-buttons > div{ margin:0 !important; } .vk-login-modal #login-form .login-sys-buttons a{ color:var(--vk-accent) !important; font-size:13px; text-decoration:none; line-height:1.6; } .vk-login-modal #login-form .login-sys-buttons a:hover{ text-decoration:underline; } .vk-login-modal #login-form input[type="submit"].b-send{ border:none !important; border-radius:22px !important; background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; font-weight:700 !important; font-size:14px !important; padding:12px 30px !important; cursor:pointer; box-shadow:none !important; } .vk-login-modal #login-form input[type="submit"].b-send:hover{ background:var(--vk-accent-dk) !important; } /* ---------- 11) DETAIL PRODUKTU ---------- */ /* 11a) název produktu = plný brandový text v modré (oprava „duhového" obrysu) */ .p-detail h1, .p-detail-inner h1, h1[data-testid="textProductName"], h1[itemprop="name"]{ color:var(--vk-accent) !important; -webkit-text-fill-color:var(--vk-accent) !important; -webkit-text-stroke:0 !important; text-shadow:none !important; background:none !important; font-weight:800 !important; } /* 11c) vlajky AKCE / NOVINKA / TIP na detailu = zaoblené (jako na úvodní) */ .boolean-icons .bool-icon-single{ display:inline-block !important; border-radius:12px !important; padding:4px 12px !important; margin-bottom:5px !important; font-size:11px !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.3px; line-height:1.2 !important; } /* 11b) košíkový řádek na detailu = stepper [-] [n] [+] + DO KOŠÍKU Layout přes inline-block + calc() (NE flex na ) → drží na všech breakpointech. Pevný stepper 128px + 8px mezera; tlačítko vyplní zbytek. */ .detail-shopping-cart{ font-size:0 !important; white-space:nowrap !important; } .detail-shopping-cart > .field-pieces-wrap{ display:inline-flex !important; align-items:center !important; vertical-align:middle !important; float:none !important; width:128px !important; height:46px !important; margin:0 8px 0 0 !important; padding:0 !important; position:static !important; box-sizing:border-box !important; border:1px solid var(--vk-line) !important; border-radius:23px !important; overflow:hidden !important; background:#fff !important; } .detail-shopping-cart > .button-cart-wrap{ display:inline-block !important; vertical-align:middle !important; float:none !important; width:calc(100% - 136px) !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; } /* + a − tlačítka stepperu */ .detail-shopping-cart .field-pieces-wrap .remove-pcs, .detail-shopping-cart .field-pieces-wrap .add-pcs{ position:static !important; top:auto !important; right:auto !important; left:auto !important; bottom:auto !important; display:flex !important; align-items:center; justify-content:center; flex:0 0 38px !important; width:38px !important; height:46px !important; margin:0 !important; padding:0 !important; border:none !important; background:var(--vk-bg-soft) !important; color:var(--vk-accent) !important; text-decoration:none !important; cursor:pointer; font-size:0 !important; } .detail-shopping-cart .field-pieces-wrap .remove-pcs{ order:1; } .detail-shopping-cart .field-pieces-wrap .add-pcs{ order:3; } .detail-shopping-cart .field-pieces-wrap .remove-pcs:hover, .detail-shopping-cart .field-pieces-wrap .add-pcs:hover{ background:#e9eef3 !important; color:var(--vk-accent-dk) !important; } .detail-shopping-cart .field-pieces-wrap .remove-pcs:before, .detail-shopping-cart .field-pieces-wrap .add-pcs:before{ position:static !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; width:auto !important; height:auto !important; margin:0 !important; border:0 !important; background:none !important; color:var(--vk-accent) !important; font-size:20px !important; line-height:1 !important; font-weight:700; } .detail-shopping-cart .field-pieces-wrap .remove-pcs:before{ content:"\2212" !important; } .detail-shopping-cart .field-pieces-wrap .add-pcs:before{ content:"+" !important; } .detail-shopping-cart .field-pieces-wrap .remove-pcs:after, .detail-shopping-cart .field-pieces-wrap .add-pcs:after{ content:none !important; display:none !important; } .detail-shopping-cart .field-pieces-wrap .show-tooltip{ display:none !important; } /* pole s číslem */ .detail-shopping-cart input.amount.pcs{ order:2 !important; flex:1 1 auto !important; float:none !important; display:block !important; width:auto !important; min-width:0 !important; height:46px !important; line-height:46px !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; text-align:center !important; border:none !important; border-left:1px solid var(--vk-line) !important; border-right:1px solid var(--vk-line) !important; background:#fff !important; font-weight:700 !important; font-size:14px !important; color:var(--vk-ink) !important; border-radius:0 !important; -moz-appearance:textfield !important; } .detail-shopping-cart input.amount.pcs::-webkit-outer-spin-button, .detail-shopping-cart input.amount.pcs::-webkit-inner-spin-button{ -webkit-appearance:none !important; margin:0 !important; } /* DO KOŠÍKU = zaoblené brandové tlačítko přes zbytek šířky */ .detail-shopping-cart input#addToCartButton, .detail-shopping-cart input.add-to-cart-button.b-cart2{ width:100% !important; height:46px !important; padding:0 !important; border:none !important; border-radius:23px !important; box-shadow:none !important; background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; font-weight:700 !important; font-size:14px !important; cursor:pointer; white-space:nowrap !important; text-transform:uppercase; box-sizing:border-box !important; } .detail-shopping-cart input#addToCartButton:hover, .detail-shopping-cart input.add-to-cart-button.b-cart2:hover{ background:var(--vk-accent-dk) !important; } /* ---------- 12) DISKUZE / KOMENTÁŘE ---------- */ /* „Přidat komentář" = brandové zaoblené tlačítko */ .add-comment .link-like.icon-comment, .add-comment [data-testid="buttonAddComment"]{ display:inline-flex !important; align-items:center; gap:6px; background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; border-radius:22px !important; padding:10px 22px !important; font-weight:700 !important; cursor:pointer; text-decoration:none !important; } .add-comment .link-like.icon-comment:hover, .add-comment [data-testid="buttonAddComment"]:hover{ background:var(--vk-accent-dk) !important; } .add-comment .link-like.icon-comment:before{ color:var(--vk-on-accent) !important; } /* pole formuláře diskuze = zaoblená, ladí s modaly */ #discussion-form input[type="text"], #discussion-form input[type="email"], #discussion-form textarea{ width:100% !important; box-sizing:border-box !important; border:1px solid var(--vk-line) !important; border-radius:18px !important; padding:11px 16px !important; background:#fff !important; } #discussion-form textarea{ border-radius:14px !important; } #discussion-form input:focus, #discussion-form textarea:focus{ border-color:var(--vk-accent) !important; outline:none !important; box-shadow:0 0 0 3px rgba(16,96,160,.12) !important; } #discussion-form input[type="submit"], #discussion-form button[type="submit"], #discussion-form .b-send{ border:none !important; border-radius:22px !important; background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; font-weight:700 !important; padding:12px 28px !important; cursor:pointer; box-shadow:none !important; } #discussion-form input[type="submit"]:hover, #discussion-form button[type="submit"]:hover, #discussion-form .b-send:hover{ background:var(--vk-accent-dk) !important; } /* ---------- 13) KATEGORIE: pryč tvrdé modré čáry (hlavně mobilní „‹ ASIE") ---------- */ /* desktopové pilulky mají barvu na .topic a, takže rámeček na .topic je zbytečný */ #categories, #categories .categories, #categories .categories .topic, #categories .cat-active{ border-top:none !important; border-bottom:none !important; border-left:none !important; border-right:none !important; } /* ---------- 14) MOBIL: „‹ Asie" (zpět do kategorie) – bez čar, přesunuto nad obrázek ---------- */ .navigation-menu-product-detail-wrap{ border:none !important; margin:0 0 10px !important; padding:0 !important; } .navigation-menu-product-detail-wrap a{ color:var(--vk-accent) !important; font-weight:600 !important; } .navigation-menu-product-detail-wrap .icon-menu-arrow-left:before, .navigation-menu-product-detail-wrap .icon-menu-arrow:before{ color:var(--vk-accent) !important; } /* zrušit modrý blok na hoveru u šipky */ .navigation-menu-product-detail-wrap .icon-menu-arrow:hover{ background-color:transparent !important; } .navigation-menu-product-detail-wrap .icon-menu-arrow:hover:before{ color:var(--vk-accent-dk) !important; } .navigation-menu-product-detail-wrap a:hover{ text-decoration:none !important; color:var(--vk-accent-dk) !important; } /* ---------- 15) CENOVÝ FILTR (posuvník + tlačítko) ---------- */ /* tlačítko „Položek k zobrazení" = zaoblená brandová pilulka */ a.show-filter-button, a.show-filter-button.button{ border:none !important; border-radius:22px !important; background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; } a.show-filter-button:hover{ background:var(--vk-accent-dk) !important; } /* úchyty posuvníku = kulaté brandové knoflíky místo trojúhelníků */ #slider-range .ui-slider-handle, #slider-range .ui-slider-handle:last-of-type{ width:18px !important; height:18px !important; top:-7px !important; margin-left:-9px !important; border:2px solid var(--vk-accent) !important; border-radius:50% !important; background:#fff !important; box-shadow:0 1px 3px rgba(0,0,0,.25) !important; } #slider-range .ui-slider-handle:last-of-type{ margin-left:-9px !important; } /* aktivní (vyplněná) část rozsahu v brandové modré */ #slider-range .ui-slider-range{ background:var(--vk-accent) !important; } /* skrýt :before úchytů (zbytek po trojúhelníkových šipkách → modrý obdélník) */ #slider-range .ui-slider-handle:before, #slider-range .ui-slider-handle:after, #slider-range .ui-slider-handle:last-of-type:before, #slider-range .ui-slider-handle:last-of-type:after{ content:none !important; display:none !important; } /* ---------- 16) „NEJPRODÁVANĚJŠÍ" v kategorii – kulatá modrá čísla ---------- */ .top-in-cat-iteration{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:24px !important; height:24px !important; padding:0 !important; border-radius:50% !important; background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; font-weight:700 !important; font-size:.75rem !important; line-height:1 !important; text-align:center !important; } /* nadpis bloku v brandové modré (oprava „duhového" textu) */ #category-top10 h3{ color:var(--vk-accent) !important; -webkit-text-fill-color:var(--vk-accent) !important; -webkit-text-stroke:0 !important; text-shadow:none !important; background:none !important; } /* ---------- 17) PATIČKA: spodní lišta = modrá jako hlavička, bez „Vytvořil Shoptet" ---------- */ #copyright{ background:var(--vk-accent) !important; padding:14px 0 !important; margin-top:24px !important; width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; } #copyright, #copyright .copy, #copyright a{ color:var(--vk-on-accent) !important; } #copyright a{ text-decoration:underline; } #copyright a:hover{ opacity:.85; } #copyright .row{ align-items:center; } /* vycentrovat copyright text */ #copyright .copy{ width:100% !important; float:none !important; text-align:center !important; } /* „Vytvořil Shoptet" zůstává viditelné (vyžadují to obch. podmínky Shoptetu, čl. 11.3), jen vycentrované a bílým textem, ať ladí s modrou lištou */ #copyright .sign{ width:100% !important; float:none !important; text-align:center !important; margin:6px 0 0 !important; padding:0 !important; } #copyright #signature a, #copyright #signature .title{ color:var(--vk-on-accent) !important; } /* „Informace pro vás" přesunuté do modré lišty – bílý vycentrovaný text */ #copyright #articles{ display:block !important; text-align:center !important; margin:0 0 10px !important; padding:0 !important; background:none !important; border:none !important; } #copyright #articles .topic{ color:var(--vk-on-accent) !important; -webkit-text-fill-color:var(--vk-on-accent) !important; -webkit-text-stroke:0 !important; text-shadow:none !important; background:none !important; font-size:15px !important; font-weight:700 !important; margin:0 0 6px !important; text-align:center !important; } #copyright #articles ul{ margin:0 !important; padding:0 !important; text-align:center !important; } #copyright #articles li{ display:inline-block !important; margin:0 10px !important; } #copyright #articles a{ color:var(--vk-on-accent) !important; text-decoration:none !important; } #copyright #articles a:hover{ text-decoration:underline !important; } /* ---------- 18) MOBILNÍ MENU (hamburger) – modré pilulky ---------- */ #menu-helper-box{ border:none !important; margin:0 !important; padding:8px 8px !important; background:#fff !important; } #menu-helper-box li{ border:none !important; height:auto !important; line-height:normal !important; margin:0 0 8px !important; } #menu-helper-box li:last-child{ margin-bottom:0 !important; } #menu-helper-box li a{ display:block !important; padding:12px 18px !important; margin:0 !important; border-radius:24px !important; background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; font-weight:700 !important; font-size:13px !important; line-height:1.2 !important; text-transform:uppercase; text-decoration:none !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; } #menu-helper-box li a:hover, #menu-helper-box li:hover a{ background:var(--vk-accent-dk) !important; color:var(--vk-on-accent) !important; text-decoration:none !important; } /* podmenu (pokud je) – jemnější odsazené pilulky, bez modrého overlay a oddělovačů */ #menu-helper-box li ul{ margin:8px 0 0 12px !important; } #menu-helper-box li ul:before{ display:none !important; } #menu-helper-box li li{ border:none !important; } #menu-helper-box li li:first-child{ border-top:none !important; } #menu-helper-box li ul a{ background:var(--vk-accent-lt) !important; font-weight:600 !important; } /* šipka rozbalení – bez modrého bloku na hoveru */ #menu-helper-box .icon-menu-arrow:hover{ background-color:transparent !important; } /* skrýt v mobilním menu položky „Obchodní podmínky" a „Kontakty" (zůstávají dostupné v patičce „Informace pro vás"). Cílíme dvojím způsobem – přes Shoptetí třídu i přes href – ať to platí, i kdyby helper-box při klonování třídy nezachoval. */ #menu-helper-box li.menu-item-39, #menu-helper-box li.menu-item-29, #menu-helper-box li:has(> a[href="/obchodni-podminky/"]), #menu-helper-box li:has(> a[href="/kontakty/"]){ display:none !important; } /* ---------- 19) MOBILNÍ DROPDOWN ÚČTU (ikona panáčka): Přihlášení/Registrace ---------- */ /* Stejné ul.box-account-links se na desktopu používá jako inline odkazy v modré liště (sekce 2), proto styling uzavíráme do mobilní media query. */ @media only screen and (max-width:40em){ /* vyhledávač na mobilu tenčí – stejná výška jako hranaté ikony účet/menu (motiv rezervuje vpravo 83px pro ikony; výška laděná podle nich) POZOR: nutná stejná specificita jako základ (.header-center .searchform) */ .header-center .searchform{ --vk-sh:30px; } #top-links .box-account-links{ position:static !important; float:none !important; top:0 !important; margin:8px 0 0 !important; padding:8px !important; list-style:none !important; background:#fff !important; border:1px solid var(--vk-line) !important; border-radius:16px !important; box-shadow:0 8px 24px rgba(0,0,0,.12) !important; box-sizing:border-box !important; } #top-links .box-account-links li{ margin:0 0 8px !important; padding:0 !important; border:none !important; list-style:none !important; } #top-links .box-account-links li:last-child{ margin-bottom:0 !important; } /* skrýt oddělovač „ |" mezi odkazy */ #top-links .box-account-links li > span{ display:none !important; } /* odkazy = modré brandové pilulky (jako hamburger menu) */ #top-links .box-account-links a{ display:block !important; padding:11px 18px !important; margin:0 !important; border-radius:24px !important; background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; font-weight:700 !important; font-size:13px !important; line-height:1.2 !important; text-transform:uppercase; text-align:center !important; text-decoration:none !important; white-space:nowrap !important; } #top-links .box-account-links a:hover{ background:var(--vk-accent-dk) !important; } /* ikonka panáčka u „Přihlášení" bílá, ať je vidět na modré pilulce */ #top-links .box-account-links a.icon-account-login::before{ color:var(--vk-on-accent) !important; } #top-links .box-account-links a.icon-account-login span{ vertical-align:middle; } } /* ---------- 20) STRÁNKA REGISTRACE (body.in-registrace) ---------- */ /* nadpis = brandová modrá místo „duhového" textu (jako 11a/16) */ body.in-registrace header h1, body.in-registrace h1#h1-system-8{ color:var(--vk-accent) !important; -webkit-text-fill-color:var(--vk-accent) !important; -webkit-text-stroke:0 !important; text-shadow:none !important; background:none !important; font-weight:800 !important; } /* sekční rámečky = jemné zaoblené karty, nadpisy sekcí v brandové modré */ #reg-form fieldset.f-border{ border:1px solid var(--vk-line) !important; border-radius:14px !important; padding:18px 20px !important; margin:0 0 18px !important; background:#fff !important; } #reg-form fieldset.f-border legend{ color:var(--vk-accent) !important; -webkit-text-fill-color:var(--vk-accent) !important; -webkit-text-stroke:0 !important; background:none !important; font-weight:800 !important; font-size:15px !important; padding:0 6px !important; } /* vstupní pole = zaoblená brandová (honeypot .no-css NEstylovat) */ #reg-form input[type="text"]:not(.no-css), #reg-form input[type="email"], #reg-form input[type="password"], #reg-form input[type="tel"], #reg-form textarea, #reg-form select{ box-sizing:border-box !important; height:auto !important; border:1px solid var(--vk-line) !important; border-radius:18px !important; padding:10px 16px !important; font-size:14px !important; background:#fff !important; } #reg-form input[type="text"]:not(.no-css):focus, #reg-form input[type="email"]:focus, #reg-form input[type="password"]:focus, #reg-form input[type="tel"]:focus, #reg-form textarea:focus, #reg-form select:focus{ border-color:var(--vk-accent) !important; outline:none !important; box-shadow:0 0 0 3px rgba(16,96,160,.12) !important; } #reg-form input.no-css{ display:none !important; } /* honeypot zůstává skrytý */ /* odkazy (obch. podmínky, ochrana údajů) v brandové modré */ #reg-form a{ color:var(--vk-accent) !important; } /* tlačítko REGISTROVAT = zaoblená brandová pilulka */ #reg-form input[type="submit"].b-send{ border:none !important; border-radius:24px !important; background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; font-weight:700 !important; font-size:14px !important; padding:13px 34px !important; text-transform:uppercase; cursor:pointer; box-shadow:none !important; } #reg-form input[type="submit"].b-send:hover{ background:var(--vk-accent-dk) !important; } /* ---------- 21) NÁKUPNÍ KOŠÍK (body.in-kosik) ---------- */ /* hlavička tabulky položek = brandová modrá místo černé. Tabulka položek nemá id; souhrnné tabulky (#cart-price-summary, #additional-stuff-in-cart) id mají → cílíme jen table:not([id]). */ body.in-kosik table:not([id]) thead th{ background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; border:none !important; } body.in-kosik table:not([id]) thead th:first-child{ border-top-left-radius:10px !important; } body.in-kosik table:not([id]) thead th:last-child{ border-top-right-radius:10px !important; } /* MNOŽSTVÍ = brandový zaoblený stepper [−][n][+] (jako sekce 8). Reálná struktura: form > fieldset > div.relative > (šipky, tooltipy, input). Flex kontejner proto musí být div.relative, ne form. */ body.in-kosik form[action*="setCartItemAmount"]{ display:inline-block !important; margin:0 auto !important; padding:0 !important; } body.in-kosik form[action*="setCartItemAmount"] fieldset{ border:none !important; margin:0 !important; padding:0 !important; } body.in-kosik form[action*="setCartItemAmount"] .relative{ display:inline-flex !important; align-items:stretch !important; flex-wrap:nowrap !important; width:auto !important; height:38px !important; padding:0 !important; position:relative !important; box-sizing:border-box !important; border:1px solid var(--vk-line) !important; border-radius:19px !important; overflow:hidden !important; background:#fff !important; } body.in-kosik form[action*="setCartItemAmount"] .remove-pcs, body.in-kosik form[action*="setCartItemAmount"] .add-pcs{ position:static !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; display:flex !important; align-items:center !important; justify-content:center !important; width:32px !important; height:38px !important; flex:0 0 32px !important; margin:0 !important; padding:0 !important; border:none !important; background:var(--vk-bg-soft) !important; color:var(--vk-accent) !important; text-decoration:none !important; cursor:pointer !important; font-size:0 !important; } body.in-kosik form[action*="setCartItemAmount"] .remove-pcs{ order:1 !important; } body.in-kosik form[action*="setCartItemAmount"] .add-pcs{ order:3 !important; } body.in-kosik form[action*="setCartItemAmount"] .remove-pcs:hover, body.in-kosik form[action*="setCartItemAmount"] .add-pcs:hover{ background:#e9eef3 !important; color:var(--vk-accent-dk) !important; } /* glyfy +/− místo arrow-up/down + zrušit trojúhelníkové ::before/::after z motivu */ body.in-kosik form[action*="setCartItemAmount"] .remove-pcs::before, body.in-kosik form[action*="setCartItemAmount"] .add-pcs::before{ position:static !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; width:auto !important; height:auto !important; margin:0 !important; border:0 !important; background:none !important; display:inline-block !important; color:inherit !important; font-family:inherit !important; font-size:18px !important; line-height:1 !important; font-weight:700 !important; } body.in-kosik form[action*="setCartItemAmount"] .remove-pcs::before{ content:"\2212" !important; } body.in-kosik form[action*="setCartItemAmount"] .add-pcs::before{ content:"+" !important; } body.in-kosik form[action*="setCartItemAmount"] .remove-pcs::after, body.in-kosik form[action*="setCartItemAmount"] .add-pcs::after{ content:none !important; display:none !important; } body.in-kosik form[action*="setCartItemAmount"] .show-tooltip{ display:none !important; } /* pole s číslem */ body.in-kosik form[action*="setCartItemAmount"] input.pcs{ order:2 !important; width:42px !important; height:38px !important; flex:0 0 42px !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; text-align:center !important; border:none !important; border-left:1px solid var(--vk-line) !important; border-right:1px solid var(--vk-line) !important; background:#fff !important; font-weight:700 !important; color:var(--vk-ink) !important; border-radius:0 !important; -moz-appearance:textfield !important; } body.in-kosik form[action*="setCartItemAmount"] input.pcs::-webkit-outer-spin-button, body.in-kosik form[action*="setCartItemAmount"] input.pcs::-webkit-inner-spin-button{ -webkit-appearance:none !important; margin:0 !important; } /* mazací „x" = jemné kulaté brandové tlačítko místo modrého čtverce */ body.in-kosik form[action*="deleteCartItem"] input.b-delete{ width:38px !important; height:38px !important; padding:0 !important; border:none !important; border-radius:50% !important; box-shadow:none !important; background:var(--vk-bg-soft) !important; color:var(--vk-accent) !important; font-weight:700 !important; font-size:16px !important; line-height:1 !important; cursor:pointer !important; } body.in-kosik form[action*="deleteCartItem"] input.b-delete:hover{ background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; } /* tlačítko POKRAČOVAT = zaoblená brandová pilulka */ body.in-kosik #continue-order-button{ border:none !important; border-radius:24px !important; box-shadow:none !important; background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; font-weight:700 !important; text-transform:uppercase; padding:13px 34px !important; } body.in-kosik #continue-order-button:hover{ background:var(--vk-accent-dk) !important; } /* ---------- 22) OBJEDNÁVKA – kroky platba/doprava/info (body.ordering-process) ---------- */ /* sekční rámečky = jemné zaoblené karty, nadpisy sekcí v brandové modré */ body.ordering-process fieldset.f-border, body.ordering-process .f-border{ border:1px solid var(--vk-line) !important; border-radius:14px !important; } body.ordering-process .f-border legend{ color:var(--vk-accent) !important; -webkit-text-fill-color:var(--vk-accent) !important; -webkit-text-stroke:0 !important; text-shadow:none !important; background:none !important; font-weight:800 !important; } /* tlačítka POKRAČOVAT (krok 2/3 = .b-next, košík = #continue-order-button) = zaoblené brandové pilulky */ body.ordering-process input[type="submit"].b-next, body.ordering-process input.button.success.js-orderFormSubmit, body.ordering-process #continue-order-button{ border:none !important; border-radius:24px !important; box-shadow:none !important; background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; font-weight:700 !important; text-transform:uppercase; padding:13px 34px !important; cursor:pointer !important; } body.ordering-process input[type="submit"].b-next:hover, body.ordering-process input.button.success.js-orderFormSubmit:hover, body.ordering-process #continue-order-button:hover{ background:var(--vk-accent-dk) !important; } /* ============================================================ 23) MINI-KOŠÍK (#cart-recapitulation) — rozbalovací náhled po najetí myší na ikonu košíku. Sjednotit do brandového vzhledu. ============================================================ */ /* panel = zaoblená bílá karta se stínem */ #cart-recapitulation{ border:1px solid var(--vk-line) !important; border-radius:16px !important; box-shadow:0 14px 34px rgba(16,96,160,.16) !important; overflow:hidden !important; padding:6px 0 !important; } /* položka košíku – jemné oddělovače */ #cart-recapitulation .cart-reca-single{ border-color:var(--vk-line) !important; } #cart-recapitulation .cart-reca-single-href:hover .cr-name{ color:var(--vk-accent) !important; } /* "1x" počet kusů zvýraznit brandově */ #cart-recapitulation .cr-name small{ color:var(--vk-accent) !important; font-weight:700 !important; } /* cena položky */ #cart-recapitulation .cr-price{ color:var(--vk-ink) !important; font-weight:700 !important; } /* mazací "x" = kulaté jemné brandové tlačítko (jako v košíku) */ #cart-recapitulation form[action*="deleteCartItem"] input.b-delete{ width:26px !important; height:26px !important; line-height:1 !important; padding:0 !important; min-width:0 !important; margin:0 !important; border:none !important; border-radius:50% !important; box-shadow:none !important; background:var(--vk-bg-soft) !important; color:var(--vk-accent) !important; font-size:14px !important; font-weight:700 !important; cursor:pointer !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; transition:background .15s, color .15s !important; } #cart-recapitulation form[action*="deleteCartItem"] input.b-delete:hover{ background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; } /* řádek "MÁTE DOPRAVU ZDARMA" / mezisoučty */ #cart-recapitulation .cart-reca-single.darken{ background:var(--vk-bg-soft) !important; color:var(--vk-ink) !important; font-weight:600 !important; } /* řádek s tlačítkem dolů, ale na střed (přebije .tar = doprava) */ #cart-recapitulation .cart-reca-single.last{ text-align:center !important; } /* tlačítko POKRAČOVAT V OBJEDNÁVCE = brandová pilulka */ #cart-recapitulation .cart-reca-single.last a.button{ display:inline-block !important; border:none !important; border-radius:22px !important; box-shadow:none !important; background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.02em; padding:11px 22px !important; cursor:pointer !important; transition:background .15s !important; } #cart-recapitulation .cart-reca-single.last a.button:hover{ background:var(--vk-accent-dk) !important; color:var(--vk-on-accent) !important; } /* ============================================================ 24) TOP 10 widget na TABLETU — oprava rozbitého layoutu. Motiv řeší položky přes position:absolute (číslo) + float:right (obrázek), což se na užším tabletovém sloupci rozpadne. Srovnáme každou položku do jednoho flex řádku: [číslo] [název+cena] [obrázek]. Rozsah = medium breakpoint motivu (40.063em–64em); desktop nech být. ============================================================ */ @media only screen and (min-width:40.063em) and (max-width:64em){ /* vyhledávač na tabletu (tenký, jako jinde) + posun doprava od loga (vpravo je místo). width:150% nechá pole přetéct sloupec doprava do volného místa; padding-left chrání logo. (motiv má .searchform{overflow:visible} → přetečení neovlivní okolní sloupce) */ .header-center .searchform{ --vk-sh:36px; box-sizing:border-box !important; padding-left:36px !important; width:150% !important; } /* lupa blíž k poli – tlačítko v jeho sloupci zarovnat doleva (motiv má .tar=doprava) */ .header-center .searchform .tar{ text-align:left !important; padding-left:8px !important; } #top10 ol li{ display:flex !important; align-items:center !important; gap:10px !important; margin:0 0 6px 0 !important; padding:5px 6px !important; position:relative !important; min-height:46px !important; } /* číslo: z absolutního do toku, pevná šířka, vlevo */ #top10 ol li:before{ position:static !important; left:auto !important; top:auto !important; order:1 !important; flex:0 0 24px !important; width:24px !important; margin:0 !important; text-align:center !important; } /* kolečka 1–3 vycentrovat ve flexu */ #top10 ol li:nth-of-type(-n+3):before{ height:22px !important; line-height:22px !important; } /* text uprostřed – roztáhne se, název se nezalamuje přehnaně */ #top10 ol li div{ order:2 !important; flex:1 1 auto !important; min-width:0 !important; margin:0 !important; } #top10 ol li div a{ line-height:1.2 !important; display:inline-block !important; } #top10 ol li div span{ margin:2px 0 0 !important; } /* obrázek vpravo, pevná velikost, bez floatu */ #top10 ol li .a-img{ order:3 !important; float:none !important; flex:0 0 auto !important; margin:0 !important; } #top10 ol li .a-img img{ max-height:40px !important; width:auto !important; display:block !important; } } /* ============================================================ 25) Záložky sekcí na homepage (#tabs: AKČNÍ ZBOŽÍ / NOVINKY) – sjednotit do modrého „pill" designu eshopu ============================================================ */ /* lišta: zrušit ostré linky motivu, vycentrovat, mezera dole */ #tabs{ border-top:0 !important; border-bottom:1px solid var(--vk-line) !important; margin:0 0 1.5rem 0 !important; padding:0 0 12px 0 !important; text-align:center !important; display:flex !important; justify-content:center !important; gap:10px !important; flex-wrap:wrap !important; } #tabs li{ padding:0 !important; margin:0 !important; list-style:none !important; display:inline-flex !important; } /* odkaz = pilulka; neutralizovat případný gradient/obrys textu motivu */ #tabs li a{ display:inline-block !important; padding:8px 22px !important; border-radius:22px !important; background:var(--vk-bg-soft) !important; color:var(--vk-ink) !important; -webkit-text-fill-color:var(--vk-ink) !important; background-clip:border-box !important; -webkit-background-clip:border-box !important; border:1px solid var(--vk-line) !important; font-weight:700 !important; font-size:14px !important; letter-spacing:.04em !important; text-transform:uppercase !important; line-height:1.2 !important; text-decoration:none !important; transition:background-color .15s, color .15s, border-color .15s !important; } #tabs li a:hover{ background:#e9eef4 !important; color:var(--vk-accent) !important; -webkit-text-fill-color:var(--vk-accent) !important; border-color:var(--vk-accent-lt) !important; } /* aktivní záložka = plná modrá pilulka, bez spodního borderu motivu */ #tabs .ui-state-active, #tabs li a.ui-state-active{ margin-bottom:0 !important; } #tabs .ui-state-active a, #tabs li a.ui-state-active{ background:var(--vk-accent) !important; color:var(--vk-on-accent) !important; -webkit-text-fill-color:var(--vk-on-accent) !important; border-color:var(--vk-accent) !important; border-bottom:1px solid var(--vk-accent) !important; } #tabs .ui-state-active a:hover, #tabs li a.ui-state-active:hover{ background:var(--vk-accent-dk) !important; color:var(--vk-on-accent) !important; -webkit-text-fill-color:var(--vk-on-accent) !important; border-color:var(--vk-accent-dk) !important; } /* obě span varianty viditelné stejně (motiv jednu skrývá pozicí) */ #tabs li a .stronger{ position:static !important; } /* ============================================================ 26) Šipky banneru (#prev-carousel / #next-carousel) – skrýt, zobrazit jen po najetí na banner + modrý kruh dle eshopu ============================================================ */ /* kulaté modré tlačítko místo bílého čtverce motivu */ #prev-carousel, #next-carousel{ width:42px !important; height:42px !important; top:50% !important; bottom:auto !important; margin:0 !important; transform:translateY(-50%) !important; border-radius:50% !important; background-color:var(--vk-accent) !important; box-shadow:0 2px 8px rgba(0,0,0,.25) !important; border:2px solid rgba(255,255,255,.85) !important; /* defaultně skryté – objeví se po najetí na banner */ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transition:opacity .2s ease, background-color .15s ease, transform .15s ease !important; } #prev-carousel{ left:14px !important; right:auto !important; } #next-carousel{ right:14px !important; left:auto !important; } /* odsadit od krajů a bílá ikona šipky */ #prev-carousel:before, #next-carousel:before{ color:#fff !important; font-size:18px !important; line-height:18px !important; } /* zobrazit šipky při najetí na banner */ #homepage-banner:hover #prev-carousel, #homepage-banner:hover #next-carousel, #carousel-banner:hover #prev-carousel, #carousel-banner:hover #next-carousel{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; } /* hover přímo na tlačítku – tmavší modrá + lehké zvětšení */ #prev-carousel:hover, #next-carousel:hover{ background-color:var(--vk-accent-dk) !important; transform:translateY(-50%) scale(1.08) !important; } #prev-carousel:hover:before, #next-carousel:hover:before{ color:#fff !important; } /* na tabletu a telefonu (do 64em) šipky úplně skrýt – jen desktop */ @media only screen and (max-width:64em){ #prev-carousel, #next-carousel{ display:none !important; } }