/* ========================================================================== cykloerben.cz — custom overrides Breakpoints follow Shoptet: the mobile header/layout applies at <= 767px, the .footer-banner desktop grid (col-lg-0.8) only at >= 1200px. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Manufacturer logos above the footer Below 1200px the only grid class on .footer-banner is col-sm-12 (= 100%), so every logo got its own full-width row at its raw pixel size. -------------------------------------------------------------------------- */ @media (max-width: 1199px) { .footer-banners.row { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 18px 10px; align-items: center; margin: 30px 0 0 !important; } /* Bootstrap .row clearfix pseudo-elements become grid items — kill them, or ::before occupies cell 1 and pushes the first logo to cell 2 */ .footer-banners.row::before, .footer-banners.row::after { content: none !important; display: none !important; } .footer-banners .footer-banner { float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; min-width: 0; } .footer-banners .footer-banner a { display: block; width: 100%; } /* fixed height + contain = the 603x200 logos (Rascal, Superior) sit at the same optical size as the 223x74 ones */ .footer-banners .footer-banner img { display: block; width: 100% !important; height: 44px !important; max-width: 100%; object-fit: contain; object-position: center; } } @media (min-width: 480px) and (max-width: 1199px) { .footer-banners.row { grid-template-columns: repeat(3, 1fr); } .footer-banners .footer-banner img { height: 52px !important; } } @media (min-width: 768px) and (max-width: 1199px) { .footer-banners.row { grid-template-columns: repeat(4, 1fr); gap: 24px 16px; } .footer-banners .footer-banner img { height: 60px !important; } } /* -------------------------------------------------------------------------- 2. Free-shipping flag label: "ZDARMA ČR" -> "DOPRAVA ZDARMA" All viewports. Wraps to two lines so it fits inside the 75px desktop circle. The proper place for this is the Shoptet admin label, if it is editable there — this override is the belt-and-braces version. -------------------------------------------------------------------------- */ .flag-freeshipping .flag-text { display: block !important; /* inline + block ::after = a 13px empty line box above the text */ font-size: 0 !important; line-height: 0 !important; } .flag-freeshipping .flag-text::after { content: "DOPRAVA ZDARMA"; display: block; font-size: 9px; line-height: 1.1; max-width: 52px; margin: 0 auto; white-space: normal; word-break: keep-all; } /* -------------------------------------------------------------------------- 3. Mobile (<= 767px) Below this width Shoptet swaps in its mobile header: #header collapses to height 0 and .top-navigation-bar becomes the fixed 50px bar that carries the logo and the icons. -------------------------------------------------------------------------- */ @media (max-width: 767px) { /* 3a. Dark header, matching desktop. The theme ships , so the mobile bar is white and the logo PNG's baked-in black background shows as a block. */ .top-navigation-bar { background-color: #000 !important; } .top-navigation-bar .responsive-tools .toggle-window, .top-navigation-bar .responsive-tools .toggle-window::before, #header .navigation-buttons .cart-count, #header .navigation-buttons .cart-count::before { color: #fff !important; } /* hamburger: drop the grey disc, white glyph on black. Delete the background-color line to keep the disc as a tap affordance. */ .top-navigation-bar .responsive-tools .toggle-window[data-target="navigation"]::before { background-color: transparent !important; color: #fff !important; } /* 3b. Homepage: only the main carousel banner, full width */ .banners-row .col-sm-4 { display: none !important; } .banners-row .col-sm-8 { width: 100% !important; float: none !important; } /* 3c. Product tiles: one per row, big image, everything else tightened. The image is the height here — change the 200px below to trade image size against list length (160px -> ~257 tall, 252px -> ~349 tall). */ .products.products-block .product { width: 100% !important; padding: 6px 0 !important; } .products.products-block .product .p { flex-direction: column !important; } .products.products-block .product .image { margin: 0 0 6px 0 !important; } .products.products-block .product .image img { width: 100% !important; height: 200px !important; object-fit: contain !important; } /* the name box is a hard 45px (3 clipped lines) by default */ .products.products-block .product .name { font-size: 14px !important; line-height: 1.3 !important; height: auto !important; margin-bottom: 4px !important; } /* reserves 48px for a star-rating widget this shop does not show */ .products.products-block .product .ratings-wrapper { min-height: 0 !important; padding-bottom: 4px !important; } .products.products-block .product .availability { font-size: 12px !important; } /* price and cart button on one line instead of stacked */ .products.products-block .product .p-bottom > div { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 8px !important; } .products.products-block .product .prices { flex: 0 1 auto !important; width: auto !important; text-align: left !important; } .products.products-block .product .p-tools { flex: 0 0 auto !important; width: auto !important; } .products.products-block .product .btn-cart { width: auto !important; } /* 3d. Corner badges as pills rather than circles — less of the bike covered, and the longer label fits on one line. Delete this block for circles. */ .products.products-block .product .flags-extra { flex-direction: column !important; align-items: flex-end !important; width: auto !important; } .products.products-block .product .flags-extra .flag { width: auto !important; height: auto !important; min-width: 0 !important; border-radius: 3px !important; padding: 3px 7px !important; font-size: 11px !important; line-height: 14px !important; margin: 0 0 3px 0 !important; display: block !important; text-align: center !important; } /* both pills on one type scale so they come out the same height (20px). Explicit values, not `inherit` — .flag-text above is font-size: 0. */ .products.products-block .product .flags-extra .flag .price-save { display: block !important; font-size: 11px !important; line-height: 14px !important; } .products.products-block .product .flags-extra .flag .icon-van { display: none !important; } /* struck-through price is already shown below the tile */ .products.products-block .product .flags-extra .flag .price-standard { display: none !important; } .products.products-block .product .flags-extra .flag-text::after { max-width: none !important; white-space: nowrap !important; font-size: 11px !important; line-height: 14px !important; } .products.products-block .product .flags-default .flag { font-size: 11px !important; padding: 3px 6px !important; } /* 3e. Tighter section headings */ .homepage-group-title { margin-top: 24px !important; margin-bottom: 12px !important; font-size: 22px !important; } } /* -------------------------------------------------------------------------- 4. Footer text on the black background (all viewports — desktop had the same problem: headings were #1f1f1f on #000, a contrast ratio of 1.3:1) -------------------------------------------------------------------------- */ #footer .pageElement__heading { color: #fff !important; } #footer, #footer strong, #footer .copyright { color: #b3b3b3 !important; } #footer .title { color: #d6d6d6 !important; }