/* HOCKEYLAND CUSTOM CSS v.315 - 2026-10-22. * Stable cards, consistent header, account dialog and smooth interactions. * Pair with hockeyland-custom-v.60.js; replaces v.314. */ /* HOCKEYLAND – SHARED ACTION BUTTON TOKENS */ :root { --hl-button-font: "Poppins", sans-serif; --hl-button-font-size: 14px; --hl-button-main-font-size: 16px; --hl-button-weight: 400; --hl-button-main-weight: 500; --hl-button-height: 40px; --hl-button-main-height: 48px; --hl-button-line-height: 20px; --hl-button-radius: 999px; --hl-button-border: 1px; --hl-button-space-x: 18px; --hl-button-padding-y: 8px; --hl-button-background: #fff; --hl-button-text: #303030; --hl-button-hover: #f7f7f7; --hl-button-primary-bg: #f19210; --hl-button-primary-hover: #ffaf41; --hl-button-primary-text: #fff; --hl-button-quiet-text: #303030; --hl-button-quiet-border: #c9c9c9; --hl-button-focus: rgba(120, 120, 120, 0.35); --hl-checkout-actions-gap: 12px; --hl-button-hover-duration: 160ms; --hl-button-hover-easing: ease-out; --hl-button-transition: color var(--hl-button-hover-duration) var(--hl-button-hover-easing), border-color var(--hl-button-hover-duration) var(--hl-button-hover-easing), background-color var(--hl-button-hover-duration) var(--hl-button-hover-easing); } @media (max-width: 767px) { :root { --hl-button-height: 44px; --hl-button-padding-y: 10px; --hl-checkout-actions-gap: 10px; } } /* Respektovat omezení animací pouze u této rodiny tlačítek. */ @media (prefers-reduced-motion: reduce) { :root { --hl-button-hover-duration: 0s; } } /* CONTENT SIDE SPACING */ #content-wrapper.container:not(.orderWithdraw__container) { padding-left: 16px !important; padding-right: 16px !important; } @media (max-width: 767px) { #content-wrapper.container:not(.orderWithdraw__container) { padding-left: 8px !important; padding-right: 8px !important; } } /* HEADER / NAVIGATION */ #navigation a, #navigation li > a { transition: color 0.25s ease !important; } #navigation a:hover, #navigation li:hover > a { color: #f19210 !important; } .navigation-buttons a, .navigation-buttons button, .navigation-buttons a::before, .navigation-buttons a::after, .navigation-buttons button::before, .navigation-buttons button::after, .navigation-buttons svg, .navigation-buttons path, .navigation-buttons i { transition: color 0.25s ease, fill 0.25s ease, stroke 0.25s ease, opacity 0.25s ease !important; } .navigation-buttons a[data-target="search"]:hover, .navigation-buttons a[data-target="search"]:hover::before, .navigation-buttons a[data-target="search"]:hover::after { color: #f19210 !important; fill: #f19210 !important; stroke: #f19210 !important; } .navigation-buttons .top-nav-button-login:hover, .navigation-buttons .top-nav-button-login:hover::before, .navigation-buttons .top-nav-button-login:hover::after { color: #f19210 !important; fill: #f19210 !important; stroke: #f19210 !important; } .navigation-buttons a[data-testid="headerCart"] { border: 0 !important; } .navigation-buttons a[data-testid="headerCart"]:hover, .navigation-buttons a[data-testid="headerCart"]:hover::before, .navigation-buttons a[data-testid="headerCart"]:hover::after { color: #f19210 !important; fill: #f19210 !important; stroke: #f19210 !important; background: transparent !important; box-shadow: none !important; } .navigation-buttons a[data-testid="headerCart"] i[data-testid="headerCartCount"] { letter-spacing: 0 !important; } .navigation-buttons a[data-testid="headerCart"]:hover i[data-testid="headerCartCount"] { background: #f19210 !important; color: #ffffff !important; } /* Skrytí "Vytvořeno Shoptetem" – pouze konkrétní odkaz, bez zásahu do právních odkazů */ footer a[href*="shoptet"] { display: none !important; } /* NEWSLETTER */ .container.footer-newsletter { display: none !important; } /* Newsletter box / sidebar tlačítko */ #formNewsletterWidget button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button)), .box-newsletter button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button)), .newsletter-widget button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button)) { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: #f19210 !important; border-color: #f19210 !important; color: transparent !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; outline: none !important; transition: var(--hl-button-transition) !important; } #formNewsletterWidget button.btn.btn-default.btn-arrow-right:hover:not(:where(.loadMore__button)), #formNewsletterWidget button.btn.btn-default.btn-arrow-right:active:not(:where(.loadMore__button)), #formNewsletterWidget button.btn.btn-default.btn-arrow-right:focus:not(:where(.loadMore__button)), .box-newsletter button.btn.btn-default.btn-arrow-right:hover:not(:where(.loadMore__button)), .box-newsletter button.btn.btn-default.btn-arrow-right:active:not(:where(.loadMore__button)), .box-newsletter button.btn.btn-default.btn-arrow-right:focus:not(:where(.loadMore__button)), .newsletter-widget button.btn.btn-default.btn-arrow-right:hover:not(:where(.loadMore__button)), .newsletter-widget button.btn.btn-default.btn-arrow-right:active:not(:where(.loadMore__button)), .newsletter-widget button.btn.btn-default.btn-arrow-right:focus:not(:where(.loadMore__button)) { background-color: #ffaf41 !important; border-color: #ffaf41 !important; color: transparent !important; box-shadow: none !important; outline: none !important; } #formNewsletterWidget button.btn.btn-default.btn-arrow-right .sr-only, .box-newsletter button.btn.btn-default.btn-arrow-right .sr-only, .newsletter-widget button.btn.btn-default.btn-arrow-right .sr-only { display: none !important; } #formNewsletterWidget button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button))::before, .box-newsletter button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button))::before, .newsletter-widget button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button))::before { content: "" !important; display: none !important; } #formNewsletterWidget button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button))::after, .box-newsletter button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button))::after, .newsletter-widget button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button))::after { content: "" !important; display: block !important; width: 22px !important; height: 22px !important; background-size: 22px 22px !important; background-repeat: no-repeat !important; background-position: center !important; background-image: url("data:image/svg+xml;utf8,") !important; } /* Footer newsletter na mobilu */ @media (max-width: 768px) { .container.footer-newsletter { display: block !important; } .container.footer-newsletter button.btn-arrow-right .sr-only { display: none !important; } .container.footer-newsletter button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button)) { background-color: #f19210 !important; border-color: #f19210 !important; color: transparent !important; } .container.footer-newsletter button.btn.btn-default.btn-arrow-right:hover:not(:where(.loadMore__button)), .container.footer-newsletter button.btn.btn-default.btn-arrow-right:active:not(:where(.loadMore__button)), .container.footer-newsletter button.btn.btn-default.btn-arrow-right:focus:not(:where(.loadMore__button)) { background-color: #ffaf41 !important; border-color: #ffaf41 !important; color: transparent !important; } .container.footer-newsletter button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button))::before { content: "" !important; display: none !important; } .container.footer-newsletter button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button))::after { content: "" !important; display: block !important; width: 22px !important; height: 22px !important; background-size: 22px 22px !important; background-repeat: no-repeat !important; background-position: center !important; background-image: url("data:image/svg+xml;utf8,") !important; } } /* LINKA POD HOMEPAGE TEXTEM */ .homepage-texts-wrapper { border-bottom: 1px solid #eee !important; padding-bottom: 18px !important; } @media (max-width: 767px) { .homepage-texts-wrapper { padding-bottom: 14px !important; } } /* HERO CAROUSEL */ #carousel { position: relative; } /* Společný vzhled tlačítek */ #carousel .hl-carousel-button { position: absolute !important; left: 8.51% !important; top: 69.62% !important; width: auto !important; height: 10.09% !important; min-width: 0 !important; min-height: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 2em !important; font-family: "Poppins", sans-serif !important; font-size: clamp(10px, 1.05vw, 16px) !important; line-height: 1.15 !important; font-weight: 600 !important; letter-spacing: 0 !important; text-align: center !important; text-decoration: none !important; white-space: nowrap !important; box-shadow: none !important; cursor: pointer !important; z-index: 25 !important; transition: filter 0.2s ease, transform 0.2s ease !important; } #carousel .hl-carousel-button:hover, #carousel .hl-carousel-button:focus { text-decoration: none !important; filter: brightness(0.96) !important; } #carousel .hl-carousel-button:active { transform: scale(0.98) !important; } /* 1. banner */ /* 2. banner */ /* 3. banner */ /* Mobil – šablona banneru 4000 × 5200 px */ @media (max-width: 767px) { #carousel .hl-carousel-button { left: 12% !important; top: 41.42% !important; width: auto !important; height: 7.31% !important; padding: 0 2em !important; font-size: clamp(10px, 3.2vw, 14px) !important; } } #carousel .carousel-control.left, #carousel .carousel-control.right { position: absolute; top: 54% !important; transform: translateY(-50%) !important; width: 36px !important; height: 36px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; text-shadow: none !important; opacity: 1 !important; z-index: 30 !important; overflow: visible !important; } #carousel .carousel-control.left { left: 45px !important; } #carousel .carousel-control.right { right: 45px !important; } #carousel .carousel-control span, #carousel .carousel-control i { display: none !important; } #carousel .carousel-control.left::before, #carousel .carousel-control.right::before { content: none !important; } #carousel .carousel-control.left::after, #carousel .carousel-control.right::after { display: block !important; font-family: "Poppins", sans-serif !important; font-size: 36px !important; font-weight: 300 !important; line-height: 1 !important; color: rgba(255, 255, 255, 0.65) !important; text-shadow: 0 0 6px rgba(0, 0, 0, 0.25); transition: color 0.25s ease, transform 0.25s ease; } #carousel .carousel-control.left::after { content: "‹"; transform: translate(-1px, -2px); } #carousel .carousel-control.right::after { content: "›"; transform: translate(1px, -2px); } #carousel .carousel-control.left:hover::after, #carousel .carousel-control.right:hover::after { color: rgba(255, 255, 255, 0.92) !important; } @media (max-width: 767px) { #carousel .carousel-control.left, #carousel .carousel-control.right { display: none !important; } } /* Tečky pod hero carouselem */ #carousel-dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 18px 0 0 !important; padding: 0 !important; line-height: 1; transform: none !important; } #carousel-dots button { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font-family: "Poppins", sans-serif; font-size: 18px; line-height: 1; font-weight: 400; color: rgba(0, 0, 0, 0.38); transition: color 0.2s ease, transform 0.2s ease, font-size 0.2s ease, font-weight 0.2s ease; } #carousel-dots button:hover { color: rgba(0, 0, 0, 0.6); transform: scale(1.1); } #carousel-dots button.is-active { color: #000000; font-size: 22px; font-weight: 600; } @media (max-width: 767px) { #carousel-dots { gap: 8px; margin: 6px 0 0 !important; transform: translateY(-6px) !important; } #carousel-dots button { font-size: 16px; } #carousel-dots button.is-active { font-size: 19px; } } /* * Výchozí stav formuláře na ostatních místech webu. * Formulář nikdy nepřesáhne šířku svého sloupce. */ .search-form.compact-form, .search-form.js-search-main { display: block !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* * Rozšíření a vycentrování pouze v hlavním vyhledávacím panelu, * který obsahuje také sekci doporučených produktů. * Tím se pravidlo nepoužije na vyhledávání v prázdném košíku. */ .search:has(> .recommended-products) > .search-form.compact-form, .search:has(> .recommended-products) > .search-form.js-search-main { width: 560px !important; max-width: calc(100vw - 40px) !important; margin-left: auto !important; margin-right: auto !important; } .search-form.compact-form fieldset, .search-form.js-search-main fieldset { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-sizing: border-box !important; } .search-form.compact-form input[data-testid="searchInput"], .search-form.js-search-main input[data-testid="searchInput"], .search-form.compact-form .query-input, .search-form.js-search-main .query-input { display: block !important; width: 100% !important; max-width: none !important; height: 60px !important; margin: 0 !important; padding-right: 70px !important; box-sizing: border-box !important; } .search-form.compact-form button[data-testid="searchBtn"], .search-form.js-search-main button[data-testid="searchBtn"], .search-form.compact-form .btn-arrow-right.btn-lg, .search-form.js-search-main .btn-arrow-right.btn-lg { position: absolute !important; top: 0 !important; right: 0 !important; left: auto !important; bottom: auto !important; transform: none !important; width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: #f19210 !important; border-color: #f19210 !important; color: transparent !important; z-index: 10 !important; line-height: 1 !important; transition: var(--hl-button-transition) !important; } .search-form.compact-form button[data-testid="searchBtn"]:hover, .search-form.js-search-main button[data-testid="searchBtn"]:hover, .search-form.compact-form .btn-arrow-right.btn-lg:hover, .search-form.js-search-main .btn-arrow-right.btn-lg:hover { background-color: #ffaf41 !important; border-color: #ffaf41 !important; } .search-form.compact-form button[data-testid="searchBtn"]::before, .search-form.js-search-main button[data-testid="searchBtn"]::before, .search-form.compact-form .btn-arrow-right.btn-lg::before, .search-form.js-search-main .btn-arrow-right.btn-lg::before { content: "" !important; display: none !important; } .search-form.compact-form button[data-testid="searchBtn"]::after, .search-form.js-search-main button[data-testid="searchBtn"]::after, .search-form.compact-form .btn-arrow-right.btn-lg::after, .search-form.js-search-main .btn-arrow-right.btn-lg::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; display: block !important; width: 23px !important; height: 23px !important; background-size: 23px 23px !important; background-repeat: no-repeat !important; background-position: center !important; background-image: url("data:image/svg+xml;utf8,") !important; } .search-form.compact-form .search-whisperer, .search-form.js-search-main .search-whisperer { position: absolute !important; left: 0 !important; right: 0 !important; top: 100% !important; width: 100% !important; z-index: 20 !important; } @media (max-width: 767px) { .search:has(> .recommended-products) > .search-form.compact-form, .search:has(> .recommended-products) > .search-form.js-search-main { width: calc(100vw - 32px) !important; max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; } } /* TYPOGRAFIE */ :root { --fs-h1: 25px; --fs-h2: 21px; --fs-h3: 18px; --fs-h4: 16px; --fs-body: 15px; --fs-small: 14px; --fs-price: 16px; --lh-h1: 1.15; --lh-h2: 1.22; --lh-h3: 1.28; --lh-h4: 1.3; --lh-body: 1.55; } main h1, #content h1, .content-wrapper h1, .content-inner h1, article h1, section h1 { font-size: var(--fs-h1) !important; line-height: var(--lh-h1) !important; } main h2, #content h2, .content-wrapper h2, .content-inner h2, article h2, section h2 { font-size: var(--fs-h2) !important; line-height: var(--lh-h2) !important; } main h3, #content h3, .content-wrapper h3, .content-inner h3, article h3, section h3 { font-size: var(--fs-h3) !important; line-height: var(--lh-h3) !important; } main h4, #content h4, .content-wrapper h4, .content-inner h4, article h4, section h4 { font-size: var(--fs-h4) !important; line-height: var(--lh-h4) !important; } main p, main li, main dt, main dd, main blockquote, #content p, #content li, #content dt, #content dd, #content blockquote, .content-wrapper p, .content-wrapper li, .content-wrapper dt, .content-wrapper dd, .content-wrapper blockquote, .content-inner p, .content-inner li, .content-inner dt, .content-inner dd, .content-inner blockquote, article p, article li, article dt, article dd, article blockquote, section p, section li, section dt, section dd, section blockquote { font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; } .news-item .title, .news-item h2, .news-item h3, .blog-title { font-size: calc(var(--fs-h3) + 1px) !important; } .news-item p, .blog-perex { font-size: var(--fs-small) !important; } .product-name { font-size: var(--fs-small) !important; } .price-final, .price { font-size: var(--fs-price) !important; } /* PRODUCT DETAIL – PRICE EMPHASIS */ #product-detail-form .p-final-price-wrapper > strong.price-final { font-size: 28px !important; font-weight: 700 !important; line-height: 1.15 !important; color: #303030 !important; } #product-detail-form .p-final-price-wrapper .pr-list-unit { font-size: 14px !important; font-weight: 500 !important; line-height: 1.2 !important; color: #666666 !important; } @media (max-width: 767px) { #product-detail-form .p-final-price-wrapper > strong.price-final { font-size: 25px !important; } #product-detail-form .p-final-price-wrapper .pr-list-unit { font-size: 13px !important; } } .newsletter-header h3, .newsletter-header h4, .newsletter-header .topic, .box-newsletter .topic, .footer-newsletter .topic { font-size: var(--fs-h2) !important; } .newsletter-header p, .box-newsletter p, .footer-newsletter p { font-size: var(--fs-body) !important; } main .h1, #content .h1, .content-wrapper .h1, .content-inner .h1, article .h1, section .h1 { font-size: 25px !important; line-height: 1.15 !important; } main .h2, #content .h2, .content-wrapper .h2, .content-inner .h2, article .h2, section .h2 { font-size: 21px !important; line-height: 1.22 !important; } main .h3, #content .h3, .content-wrapper .h3, .content-inner .h3, article .h3, section .h3 { font-size: 18px !important; line-height: 1.28 !important; } @media (max-width: 767px) { :root { --fs-h1: 21.5px; --fs-h2: 18px; --fs-h3: 15.5px; --fs-h4: 14px; --fs-body: 13.5px; --fs-small: 13px; --fs-price: 14.5px; } main .h1, #content .h1, .content-wrapper .h1, .content-inner .h1, article .h1, section .h1 { font-size: 21.5px !important; } main .h2, #content .h2, .content-wrapper .h2, .content-inner .h2, article .h2, section .h2 { font-size: 18px !important; } main .h3, #content .h3, .content-wrapper .h3, .content-inner .h3, article .h3, section .h3 { font-size: 15.5px !important; } .newsletter-header h3, .newsletter-header h4, .newsletter-header .topic, .box-newsletter .topic, .footer-newsletter .topic { font-size: 20px !important; line-height: 1.2 !important; } } /* Košík – nadpis */ .cart-heading.h1::before, .cart-heading::before { display: inline-block !important; vertical-align: middle !important; } @media (max-width: 767px) { .cart-heading.h1::before, .cart-heading::before { font-size: 22px !important; } } /* Odsazení FAQ při přechodu přes kotvu #faq */ .hl-faq-section { background: #fff !important; margin-top: 120px !important; margin-bottom: 64px !important; padding: 0 20px !important; } .hl-faq-inner { max-width: 920px !important; margin: 0 auto !important; } .hl-faq-title { margin: 0 0 10px !important; text-align: center !important; font-size: 28px !important; line-height: 1.25 !important; font-weight: 700 !important; } .hl-faq-subtitle { max-width: 620px !important; margin: 0 auto 28px !important; text-align: center !important; font-size: 15px !important; line-height: 1.6 !important; color: #666 !important; } .hl-faq-item { border-bottom: 1px solid #e6e6e6 !important; padding: 17px 0 !important; } .hl-faq-item:first-of-type { border-top: 1px solid #e6e6e6 !important; } .hl-faq-question { cursor: pointer !important; list-style: none !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.45 !important; color: #111 !important; padding-right: 34px !important; position: relative !important; } .hl-faq-question::-webkit-details-marker { display: none !important; } .hl-faq-question::after { content: "+" !important; position: absolute !important; right: 2px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 24px !important; line-height: 1 !important; font-weight: 400 !important; color: #f19210 !important; } .hl-faq-item[open] .hl-faq-question::after { content: "−" !important; } .hl-faq-answer { margin: 12px 0 0 !important; max-width: 760px !important; font-size: 15px !important; line-height: 1.65 !important; color: #444 !important; } @media (max-width: 767px) { .hl-faq-section { margin-top: 85px !important; margin-bottom: 48px !important; padding: 0 16px !important; } .hl-faq-title { font-size: 24px !important; } .hl-faq-subtitle { font-size: 14px !important; margin-bottom: 22px !important; } .hl-faq-question { font-size: 15px !important; } .hl-faq-answer { font-size: 14px !important; } } /* FOOTER CUSTOMER LINKS */ #footer .custom-footer__articles ul { margin-left: 0 !important; padding-left: 0 !important; } #footer .custom-footer__articles ul > li { margin-left: 0 !important; padding-left: 0 !important; list-style: none !important; } #footer .custom-footer__articles ul > li::before, #footer .custom-footer__articles ul > li:before, #footer .custom-footer__articles ul > li > a::before, #footer .custom-footer__articles ul > li > a:before { content: none !important; display: none !important; } #footer .custom-footer__articles ul > li > a, #footer .custom-footer__articles ul > li > a:visited, #footer .custom-footer__articles .hl-footer-faq-link, #footer .custom-footer__articles .hl-footer-faq-link:visited { color: #303030 !important; text-decoration: none !important; } #footer .custom-footer__articles ul > li > a:hover, #footer .custom-footer__articles ul > li > a:focus, #footer .custom-footer__articles .hl-footer-faq-link:hover, #footer .custom-footer__articles .hl-footer-faq-link:focus { color: #787878 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* SCROLL TO TOP BUTTON */ /* PRODUCT CARD */ .products-block .product, .products .product, .product-list .product { --hl-product-card-padding-x: 22px; --hl-product-card-title-availability-padding-x: 32px; } /* Jednotná levá osa pro textové prvky v produktové kartě */ .products-block .product .p-in .name, .products .product .p-in .name, .product-list .product .p-in .name, .products-block .product .p-in .availability, .products .product .p-in .availability, .product-list .product .p-in .availability, .products-block .product .p-in .prices, .products .product .p-in .prices, .product-list .product .p-in .prices, .products-block .product .p-in .p-tools, .products .product .p-in .p-tools, .product-list .product .p-in .p-tools, .products-block .product .p-in .p-desc, .products .product .p-in .p-desc, .product-list .product .p-in .p-desc, .products-block .product .p-in p.p-desc[data-testid="productCardShortDescr"], .products .product .p-in p.p-desc[data-testid="productCardShortDescr"], .product-list .product .p-in p.p-desc[data-testid="productCardShortDescr"] { box-sizing: border-box !important; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: var(--hl-product-card-padding-x) !important; padding-right: var(--hl-product-card-padding-x) !important; text-align: left !important; transform: none !important; } /* Název produktu + skladovost – jemně doprava oproti ceně/tlačítku/popisku */ .products-block .product .p-in .name, .products .product .p-in .name, .product-list .product .p-in .name, .products-block .product .p-in .availability, .products .product .p-in .availability, .product-list .product .p-in .availability { padding-left: var(--hl-product-card-title-availability-padding-x) !important; padding-right: var(--hl-product-card-padding-x) !important; text-align: left !important; } .products-block .product .p-in .name span, .products .product .p-in .name span, .product-list .product .p-in .name span, .products-block .product .p-in .availability span, .products .product .p-in .availability span, .product-list .product .p-in .availability span { text-align: left !important; } /* Cena */ .products-block .product .p-in .prices, .products .product .p-in .prices, .product-list .product .p-in .prices, .products-block .product .p-in .prices *, .products .product .p-in .prices *, .product-list .product .p-in .prices * { text-align: left !important; } /* Tlačítka DETAIL / DO KOŠÍKU */ .products-block .product .p-in .p-tools, .products .product .p-in .p-tools, .product-list .product .p-in .p-tools { display: flex !important; justify-content: flex-start !important; align-items: flex-start !important; } .products-block .product .p-in .p-tools .btn:not(:where(.loadMore__button)), .products .product .p-in .p-tools .btn:not(:where(.loadMore__button)), .product-list .product .p-in .p-tools .btn:not(:where(.loadMore__button)), .products-block .product .p-in .p-tools a.btn:not(:where(.loadMore__button)), .products .product .p-in .p-tools a.btn:not(:where(.loadMore__button)), .product-list .product .p-in .p-tools a.btn:not(:where(.loadMore__button)) { margin-left: 0 !important; margin-right: auto !important; } /* Mobilní DETAIL: vlastní šířka podle textu, obsah uprostřed obrysu. */ @media (max-width: 767px) { .products-block .product .p-in .p-tools a.btn.btn-primary:not([hidden]):not(:where(.loadMore__button)), .products .product .p-in .p-tools a.btn.btn-primary:not([hidden]):not(:where(.loadMore__button)), .product-list .product .p-in .p-tools a.btn.btn-primary:not([hidden]):not(:where(.loadMore__button)) { /* Native inline/important hiding rules remain stronger than this display. */ display: inline-flex; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; min-height: var(--hl-button-height) !important; height: auto !important; padding: var(--hl-button-padding-y) var(--hl-button-space-x) !important; text-align: center !important; text-indent: 0 !important; white-space: nowrap !important; } } /* Krátký produktový popisek – finální vzhled */ .products-block .product .p-in .p-desc, .products .product .p-in .p-desc, .product-list .product .p-in .p-desc, .products-block .product .p-in p.p-desc, .products .product .p-in p.p-desc, .product-list .product .p-in p.p-desc, .products-block .product .p-in p.p-desc[data-micro="description"], .products .product .p-in p.p-desc[data-micro="description"], .product-list .product .p-in p.p-desc[data-micro="description"], .products-block .product .p-in p.p-desc[data-testid="productCardShortDescr"], .products .product .p-in p.p-desc[data-testid="productCardShortDescr"], .product-list .product .p-in p.p-desc[data-testid="productCardShortDescr"], .products-block .product .p-in p[data-micro="description"], .products .product .p-in p[data-micro="description"], .product-list .product .p-in p[data-micro="description"], .products-block .product .p-in p[data-testid="productCardShortDescr"], .products .product .p-in p[data-testid="productCardShortDescr"], .product-list .product .p-in p[data-testid="productCardShortDescr"] { --fs-body: 13px !important; --fs-small: 13px !important; --font-size: 13px !important; --product-card-description-font-size: 13px !important; display: block !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: var(--hl-product-card-padding-x) !important; padding-right: var(--hl-product-card-padding-x) !important; color: #787878 !important; font-family: "Poppins", sans-serif !important; font-size: 13px !important; line-height: 1.38 !important; font-weight: 400 !important; text-align: left !important; transform: none !important; opacity: 1 !important; } /* Kdyby Shoptet uvnitř popisku vytvořil span / strong / jiné potomky */ .products-block .product .p-in .p-desc *, .products .product .p-in .p-desc *, .product-list .product .p-in .p-desc *, .products-block .product .p-in p[data-micro="description"] *, .products .product .p-in p[data-micro="description"] *, .product-list .product .p-in p[data-micro="description"] *, .products-block .product .p-in p[data-testid="productCardShortDescr"] *, .products .product .p-in p[data-testid="productCardShortDescr"] *, .product-list .product .p-in p[data-testid="productCardShortDescr"] * { --fs-body: 13px !important; --fs-small: 13px !important; --font-size: 13px !important; --product-card-description-font-size: 13px !important; font-size: 13px !important; line-height: 1.38 !important; } /* Mobil */ @media (max-width: 767px) { .products-block .product, .products .product, .product-list .product { /* Obsah karty zarovnat na levou hranu příznaku nad fotografií. */ --hl-product-card-padding-x: 0px; --hl-product-card-title-availability-padding-x: 10px; } .products-block .product .p-in .p-desc, .products .product .p-in .p-desc, .product-list .product .p-in .p-desc, .products-block .product .p-in p.p-desc, .products .product .p-in p.p-desc, .product-list .product .p-in p.p-desc, .products-block .product .p-in p.p-desc[data-micro="description"], .products .product .p-in p.p-desc[data-micro="description"], .product-list .product .p-in p.p-desc[data-micro="description"], .products-block .product .p-in p.p-desc[data-testid="productCardShortDescr"], .products .product .p-in p.p-desc[data-testid="productCardShortDescr"], .product-list .product .p-in p.p-desc[data-testid="productCardShortDescr"], .products-block .product .p-in p[data-micro="description"], .products .product .p-in p[data-micro="description"], .product-list .product .p-in p[data-micro="description"], .products-block .product .p-in p[data-testid="productCardShortDescr"], .products .product .p-in p[data-testid="productCardShortDescr"], .product-list .product .p-in p[data-testid="productCardShortDescr"] { --fs-body: 12px !important; --fs-small: 12px !important; --font-size: 12px !important; --product-card-description-font-size: 12px !important; font-size: 12px !important; line-height: 1.36 !important; } .products-block .product .p-in .p-desc *, .products .product .p-in .p-desc *, .product-list .product .p-in .p-desc *, .products-block .product .p-in p[data-micro="description"] *, .products .product .p-in p[data-micro="description"] *, .product-list .product .p-in p[data-micro="description"] *, .products-block .product .p-in p[data-testid="productCardShortDescr"] *, .products .product .p-in p[data-testid="productCardShortDescr"] *, .product-list .product .p-in p[data-testid="productCardShortDescr"] * { --fs-body: 12px !important; --fs-small: 12px !important; --font-size: 12px !important; --product-card-description-font-size: 12px !important; font-size: 12px !important; line-height: 1.36 !important; } } /* SITE INFORMATION MESSAGE */ .site-msg.information { position: fixed !important; left: 24px !important; right: auto !important; bottom: 24px !important; width: auto !important; max-width: 540px !important; transform: none !important; z-index: 2147483647 !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; pointer-events: auto !important; } /* Vnitřní box informační zprávy */ .site-msg.information > .container { position: relative !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 16px 52px 16px 20px !important; box-sizing: border-box !important; background: #5f5f5f !important; border: none !important; border-radius: 14px !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important; } /* Text informační zprávy */ .site-msg.information .text { display: block !important; margin: 0 !important; padding: 0 !important; max-width: none !important; color: #ffffff !important; font-family: "Poppins", sans-serif !important; font-size: 14.5px !important; line-height: 1.45 !important; font-weight: 600 !important; text-align: left !important; text-shadow: none !important; } .site-msg.information .text div, .site-msg.information .text p, .site-msg.information .text span, .site-msg.information .text strong, .site-msg.information .text a { color: #ffffff !important; font-family: "Poppins", sans-serif !important; font-size: 14.5px !important; line-height: 1.45 !important; font-weight: 600 !important; text-align: left !important; } .site-msg.information .text strong { font-weight: 700 !important; } .site-msg.information .text a { color: #ffffff !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* Zavírací tlačítko */ .site-msg.information .close, .site-msg.information .js-close-information-msg { position: absolute !important; top: 50% !important; right: 14px !important; width: 28px !important; height: 28px !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 999px !important; color: #ffffff !important; opacity: 1 !important; cursor: pointer !important; } .site-msg.information .close:hover, .site-msg.information .js-close-information-msg:hover { opacity: 0.75 !important; } .site-msg.information .close::before, .site-msg.information .close::after, .site-msg.information .js-close-information-msg::before, .site-msg.information .js-close-information-msg::after { color: #ffffff !important; } /* Mobil */ @media (max-width: 767px) { .site-msg.information { left: 14px !important; right: 14px !important; bottom: 16px !important; width: auto !important; max-width: none !important; transform: none !important; } .site-msg.information > .container { padding: 14px 44px 14px 16px !important; border-radius: 13px !important; background: #5f5f5f !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24) !important; } .site-msg.information .text, .site-msg.information .text div, .site-msg.information .text p, .site-msg.information .text span, .site-msg.information .text strong, .site-msg.information .text a { font-size: 12.8px !important; line-height: 1.42 !important; font-weight: 600 !important; } .site-msg.information .text strong { font-weight: 700 !important; } .site-msg.information .close, .site-msg.information .js-close-information-msg { right: 10px !important; width: 26px !important; height: 26px !important; } } /* PRODUCT DETAIL */ .social-buttons-wrapper .print, .social-buttons-wrapper .chat, .social-buttons-wrapper .share, .social-buttons-wrapper a.link-icon.print, .social-buttons-wrapper a.link-icon.chat, .social-buttons-wrapper a.link-icon.share { display: none !important; } /* Kdyby po skrytí nezůstalo prázdné místo */ .social-buttons-wrapper { min-height: 0 !important; } .social-buttons.no-display { display: none !important; } /* CATEGORY FILTERS – COLLAPSIBLE GROUPS */ .filter-sections .filter-section.hl-filter-section { border-bottom: 1px solid #e6e6e6 !important; } /* PRODUCT FLAGS – MOBILE SEPARATE ROW */ @media (max-width: 767px) { .product .image:has(> .flags) { position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; height: auto !important; min-height: 0 !important; box-sizing: border-box !important; overflow: visible !important; } /* Pseudoelementy odkazu nesmí vstoupit do flex layoutu jako samostatný řádek */ .product .image:has(> .flags)::before, .product .image:has(> .flags)::after { position: absolute !important; } /* Samostatný horní řádek pro všechny typy vlaječek: RAPTOR X, TIP, AKCE, NOVINKA… */ .product .image:has(> .flags) > .flags { position: static !important; order: 1 !important; align-self: flex-start !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: auto !important; max-width: 100% !important; height: auto !important; margin: 0 0 22px 0 !important; padding: 0 !important; transform: none !important; z-index: 2 !important; } /* Fotografie začíná až pod řádkem s vlaječkou */ .product .image:has(> .flags) > img { position: relative !important; order: 2 !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; transform: none !important; z-index: 1 !important; } } /* PRODUCT DETAIL – STICKY ADD TO CART BAR */ .hl-sticky-cart { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; background: rgba(255, 255, 255, 0.96) !important; border-top: 1px solid #eeeeee !important; box-shadow: 0 -8px 28px rgba(48, 48, 48, 0.12) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.28s ease, opacity 0.22s ease, visibility 0.22s ease !important; z-index: 9999 !important; } .hl-sticky-cart.is-visible { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; } .hl-sticky-cart__inner { width: 100% !important; max-width: 1170px !important; min-height: 82px !important; margin: 0 auto !important; padding: 12px 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; box-sizing: border-box !important; } .hl-sticky-cart__info { min-width: 0 !important; display: flex !important; align-items: center !important; gap: 14px !important; } .hl-sticky-cart__image { width: 56px !important; height: 56px !important; min-width: 56px !important; display: block !important; object-fit: contain !important; background: #ffffff !important; border: 1px solid #eeeeee !important; border-radius: 8px !important; padding: 4px !important; box-sizing: border-box !important; } .hl-sticky-cart__text { min-width: 0 !important; } .hl-sticky-cart__name { max-width: 560px !important; margin: 0 0 3px !important; color: #303030 !important; font-family: "Poppins", sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .hl-sticky-cart__price { margin: 0 !important; color: #303030 !important; font-family: "Poppins", sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.2 !important; } .hl-sticky-cart__button { flex: 0 0 auto !important; margin: 0 !important; cursor: pointer !important; } @media (max-width: 767px) { .hl-sticky-cart { padding-bottom: env(safe-area-inset-bottom) !important; } .hl-sticky-cart__price { white-space: nowrap !important; } } /* Když je nákupní lišta viditelná, vytáhne scroll-to-top nad ni. */ @media (max-width: 767px) { .hl-sticky-cart__inner { min-height: 82px !important; padding: 9px 12px !important; gap: 10px !important; } .hl-sticky-cart__info { flex: 1 1 auto !important; min-width: 0 !important; gap: 9px !important; } .hl-sticky-cart__image { display: block !important; width: 46px !important; height: 46px !important; min-width: 46px !important; padding: 3px !important; border-radius: 7px !important; } .hl-sticky-cart__text { min-width: 0 !important; flex: 1 1 auto !important; } .hl-sticky-cart__name { display: block !important; max-width: 100% !important; margin: 0 0 2px !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.25 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .hl-sticky-cart__price { font-size: 14px !important; line-height: 1.2 !important; } .hl-sticky-cart__button { flex: 0 0 auto !important; min-width: 112px !important; } } @media (max-width: 390px) { .hl-sticky-cart__image { width: 42px !important; height: 42px !important; min-width: 42px !important; } .hl-sticky-cart__name { font-size: 10px !important; } .hl-sticky-cart__price { font-size: 13px !important; } .hl-sticky-cart__button { min-width: 102px !important; } } /* SCROLL-TO-TOP */ /* Jakmile Shoptet vloží obsah "advanced-order", jeho velký popup nepotřebujeme. JS jej po úspěšném otevření odstraní z pohledu uživatele. */ .hl-cart-toast { position: fixed !important; top: 22px !important; right: 22px !important; display: flex !important; align-items: center !important; gap: 10px !important; max-width: calc(100vw - 44px) !important; padding: 13px 17px !important; border-radius: 8px !important; font-size: 14px !important; line-height: 1.25 !important; font-weight: 600 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-10px) !important; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease !important; z-index: 100000 !important; } .hl-cart-toast.is-visible { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } .hl-cart-toast__text { display: block !important; } @media (max-width: 767px) { .hl-cart-toast { right: 12px !important; left: 12px !important; max-width: none !important; padding: 12px 14px !important; font-size: 13px !important; } } /* ADD TO CART – HARD HIDE SHOPTET ADVANCED ORDER */ #colorbox:has(.advanced-order) { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } body:has(#colorbox .advanced-order) #cboxOverlay { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* CART TOAST – CLEAN CHECKMARK */ .hl-cart-toast__check { border-radius: 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-weight: 400 !important; transform: none !important; } /* CART TOAST – GEOMETRIC CHECKMARK */ .hl-cart-toast__check { position: relative !important; font-size: 0 !important; line-height: 0 !important; } /* Desktop / větší obrazovky */ @media (min-width: 768px) { .hl-cart-toast { top: 66px !important; } } /* Telefony */ @media (max-width: 767px) { .hl-cart-toast { top: 66px !important; } } /* CART TOAST – LIGHT MODERN PALETTE */ .hl-cart-toast { background: #f5f3f0 !important; color: #303030 !important; border: 1px solid #e2dfda !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05) !important; } /* Fajfka i text jsou záměrně jednobarevné. */ .hl-cart-toast__text { color: #303030 !important; } /* CART TOAST – SVG CHECKMARK */ .hl-cart-toast__check { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 20px !important; width: 20px !important; height: 20px !important; background: transparent !important; color: #303030 !important; } .hl-cart-toast__check::before { content: none !important; display: none !important; } .hl-cart-toast__check svg { display: block !important; width: 18px !important; height: 18px !important; overflow: visible !important; } .hl-cart-toast__check svg path { fill: none !important; stroke: currentColor !important; stroke-width: 2.25 !important; stroke-linecap: round !important; stroke-linejoin: round !important; vector-effect: non-scaling-stroke !important; } /* Kontejner štítků */ .flags.flags-default { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 7px !important; width: auto !important; max-width: 100% !important; } /* Samotný štítek */ .flags.flags-default .flag { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: 28px !important; min-height: 28px !important; margin: 0 !important; padding: 0 13px !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; font-size: 12px !important; line-height: 28px !important; font-weight: 600 !important; letter-spacing: 0.15px !important; text-transform: none !important; white-space: nowrap !important; background-image: none !important; } /* Úplně odstraníme původní trojúhelníkové / vlaječkové konce Shoptetu. */ .flags.flags-default .flag::before, .flags.flags-default .flag::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; border: 0 !important; background: none !important; } /* Raptor X – zachování firemní oranžové, ale v čistém pill provedení. */ .flags.flags-default .flag.flag-raptor-x { background: #f19210 !important; color: #ffffff !important; } /* Obecné zjemnění dalších barevných Shoptet štítků. Jejich vlastní background-color z administrace zůstává zachován. */ .flags.flags-default .flag:not(.flag-raptor-x) { color: #ffffff !important; } /* Produktové karty – o něco menší pill, aby nepřebíjel produkt. */ .products .flags.flags-default .flag, .product .flags.flags-default .flag { height: 25px !important; min-height: 25px !important; padding-left: 11px !important; padding-right: 11px !important; font-size: 11px !important; line-height: 25px !important; } /* Detail produktu – lehce větší a čitelnější. */ .p-detail .flags.flags-default .flag, .product-detail .flags.flags-default .flag { height: 28px !important; min-height: 28px !important; padding-left: 13px !important; padding-right: 13px !important; font-size: 12px !important; line-height: 28px !important; } @media (max-width: 767px) { .flags.flags-default { gap: 6px !important; } .flags.flags-default .flag, .p-detail .flags.flags-default .flag, .product-detail .flags.flags-default .flag { height: 26px !important; min-height: 26px !important; padding-left: 11px !important; padding-right: 11px !important; font-size: 11px !important; line-height: 26px !important; } } /* PRODUCT FLAGS – CARD EDGE SPACING */ .products .product .flags.flags-default, .products-block .product .flags.flags-default, .product .flags.flags-default { margin-top: 10px !important; margin-left: 10px !important; margin-right: 10px !important; } /* Na detailu produktu ponecháváme původní umístění bez tohoto odsazení. */ .p-detail .flags.flags-default, .product-detail .flags.flags-default { margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } @media (max-width: 767px) { .products .product .flags.flags-default, .products-block .product .flags.flags-default, .product .flags.flags-default { margin-top: 8px !important; margin-left: 8px !important; margin-right: 8px !important; } .p-detail .flags.flags-default, .product-detail .flags.flags-default { margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } } /* PRODUCT DETAIL – FLAG / PHOTO SPACING */ .p-detail .p-image { display: flex !important; flex-direction: column !important; align-items: stretch !important; } .p-detail .p-image > .flags.flags-default { position: static !important; order: 1 !important; align-self: flex-start !important; width: auto !important; max-width: 100% !important; margin: 0 0 14px 0 !important; transform: none !important; z-index: 2 !important; } .p-detail .p-image > a.p-main-image { order: 2 !important; display: block !important; width: 100% !important; } /* PRODUCT FLAGS – IMAGE SPACING DESKTOP */ @media (min-width: 768px) { .product .image:has(> .flags) > .flags { margin-bottom: 6px !important; } } /* PRODUCT FLAGS – DESKTOP SEPARATE ROW */ @media (min-width: 768px) { .product .image:has(> .flags) { position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; height: auto !important; min-height: 0 !important; box-sizing: border-box !important; overflow: visible !important; } .product .image:has(> .flags)::before, .product .image:has(> .flags)::after { position: absolute !important; } .product .image:has(> .flags) > .flags { position: static !important; order: 1 !important; align-self: flex-start !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; width: auto !important; max-width: calc(100% - 20px) !important; height: auto !important; margin: 10px 10px 22px 10px !important; padding: 0 !important; transform: none !important; z-index: 2 !important; } .product .image:has(> .flags) > img { position: relative !important; order: 2 !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; transform: none !important; z-index: 1 !important; } } /* Shoptet používá .flag-discount pro kruhový štítek v různých typech produktových bloků. */ .flag-discount { display: none !important; } /* Prázdný obal po skrytí samotného slevového štítku už nezabírá místo. */ .flags-extra:has(.flag-discount):not(:has(.flag:not(.flag-discount))) { display: none !important; } /* Procentní sleva zůstává viditelná přímo u ceny a je tučná. */ .p-final-price-wrapper .price-save, .prices .price-save { font-weight: 700 !important; } /* Cena jako jeden čistý řádek. */ .products .product .p-in .prices, .products-block .product .p-in .prices, .product-list .product .p-in .prices { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 8px !important; } /* Původní cena vložená JS. */ .hl-card-original-price { display: inline-block !important; margin: 0 !important; padding: 0 !important; color: #8a8a8a !important; font-size: 14px !important; line-height: 1.25 !important; font-weight: 500 !important; text-decoration-line: line-through !important; text-decoration-thickness: 1px !important; text-decoration-color: currentColor !important; white-space: nowrap !important; } /* Aktuální cena zůstává hlavní vizuální informací. */ .products .product .p-in .prices .price-final, .products-block .product .p-in .prices .price-final, .product-list .product .p-in .prices .price-final { display: inline-block !important; width: auto !important; margin: 0 !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.2 !important; color: #303030 !important; } /* Na mobilu o chlup kompaktnější mezera. */ @media (max-width: 767px) { .products .product .p-in .prices, .products-block .product .p-in .prices, .product-list .product .p-in .prices { gap: 6px !important; } .products .product .p-in .prices .price-final, .products-block .product .p-in .prices .price-final, .product-list .product .p-in .prices .price-final { font-size: 17px !important; } .hl-card-original-price { font-size: 13px !important; } } /* PRODUCT CARD – DISCOUNT PRICE AS ONE UNIT */ .products .product .p-in .prices:has(.hl-card-original-price), .products-block .product .p-in .prices:has(.hl-card-original-price), .product-list .product .p-in .prices:has(.hl-card-original-price) { gap: 8px !important; } .products .product .p-in .prices:has(.hl-card-original-price) .hl-card-original-price, .products .product .p-in .prices:has(.hl-card-original-price) .price-final, .products-block .product .p-in .prices:has(.hl-card-original-price) .hl-card-original-price, .products-block .product .p-in .prices:has(.hl-card-original-price) .price-final, .product-list .product .p-in .prices:has(.hl-card-original-price) .hl-card-original-price, .product-list .product .p-in .prices:has(.hl-card-original-price) .price-final { flex: 0 0 auto !important; white-space: nowrap !important; } @media (max-width: 767px) { .products .product .p-in .prices:has(.hl-card-original-price), .products-block .product .p-in .prices:has(.hl-card-original-price), .product-list .product .p-in .prices:has(.hl-card-original-price) { gap: 6px !important; } } /* PRODUCT CARD – DISCOUNT PRICE ALIGNMENT */ .products .product .p-in .prices:has(.hl-card-original-price), .products-block .product .p-in .prices:has(.hl-card-original-price), .product-list .product .p-in .prices:has(.hl-card-original-price) { display: flex !important; flex-wrap: nowrap !important; align-items: baseline !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; white-space: nowrap !important; } .products .product .p-in .prices:has(.hl-card-original-price) .hl-card-original-price, .products .product .p-in .prices:has(.hl-card-original-price) .price-final, .products-block .product .p-in .prices:has(.hl-card-original-price) .hl-card-original-price, .products-block .product .p-in .prices:has(.hl-card-original-price) .price-final, .product-list .product .p-in .prices:has(.hl-card-original-price) .hl-card-original-price, .product-list .product .p-in .prices:has(.hl-card-original-price) .price-final { text-align: left !important; } /* PRODUCT CARDS – ROUNDED CORNERS */ .products .product, .products-block .product, .product-list .product { border-radius: 14px !important; overflow: hidden !important; } /* PRODUCT CARDS – ACTUAL CARD BORDER RADIUS */ .products .product > .p, .products-block .product > .p, .product-list .product > .p, .products .product > .p.swap-images, .products-block .product > .p.swap-images, .product-list .product > .p.swap-images { border-radius: 14px !important; overflow: hidden !important; } /* SEARCH BAR – PILL SHAPE */ #formSearchForm.search-form { border-radius: 999px !important; } #formSearchForm.search-form fieldset { border-radius: 999px !important; overflow: hidden !important; } #formSearchForm.search-form .search-input { border-radius: 999px 0 0 999px !important; } #formSearchForm.search-form button[type="submit"], #formSearchForm.search-form .btn-arrow-right { border-radius: 0 999px 999px 0 !important; } /* SEARCH BAR – INPUT TEXT SPACING */ #formSearchForm.search-form .search-input { padding-left: 28px !important; } /* SEARCH – NEW PRODUCTS RECOMMENDATIONS */ /* SEARCH – NEW PRODUCTS IMAGE FIX */ /* Search formulář držíme přesně na horizontálním středu. */ .search-window-in #formSearchForm.search-form { margin-left: auto !important; margin-right: auto !important; } /* Nadpis sekce pod vyhledáváním. */ .search-window-in .search > h3 { width: 100% !important; max-width: 760px !important; margin: 30px auto 18px !important; text-align: center !important; } /* Grid Novinek na stejné středové ose jako search bar. */ /* Obsah karet necháváme vlevo – měníme pouze polohu celého gridu. */ @media (max-width: 767px) { .search-window-in .search > h3 { margin-bottom: 14px !important; } } /* SEARCH – MORE SPACE BEFORE NOVINKY */ .search-window-in .search > h3 { margin-top: 42px !important; } @media (max-width: 767px) { .search-window-in .search > h3 { margin-top: 32px !important; } } /* HEADER – ACCOUNT + CART ICONS */ .navigation-buttons button.top-nav-button.top-nav-button-login, .navigation-buttons a[data-testid="headerCart"] { position: relative !important; background: transparent !important; background-image: none !important; box-shadow: none !important; transform: none !important; scale: 1 !important; -webkit-tap-highlight-color: transparent; } /* Remove all native icon artwork first. */ .navigation-buttons button.top-nav-button.top-nav-button-login::before, .navigation-buttons button.top-nav-button.top-nav-button-login::after, .navigation-buttons a[data-testid="headerCart"]::before, .navigation-buttons a[data-testid="headerCart"]::after { content: none !important; display: none !important; } /* ACCOUNT: its own layer only. */ .navigation-buttons button.top-nav-button.top-nav-button-login::before { content: "" !important; display: block !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important; background-color: #111111 !important; transform: translate(-50%, -50%) !important; pointer-events: none !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2210%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M7%2027c.7-5.5%204.1-8.5%209-8.5s8.3%203%209%208.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2210%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M7%2027c.7-5.5%204.1-8.5%209-8.5s8.3%203%209%208.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") !important; -webkit-mask-position: center !important; mask-position: center !important; -webkit-mask-size: 28px 28px !important; mask-size: 28px 28px !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; transition: background-color 0.25s ease !important; } /* CART: its own layer only. */ .navigation-buttons a[data-testid="headerCart"]::after { content: "" !important; display: block !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 29px !important; height: 29px !important; margin: 0 !important; padding: 0 !important; background-color: #111111 !important; transform: translate(-50%, -50%) !important; pointer-events: none !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M4.2%205.7h2.1c1.1%200%202%20.8%202.2%201.9l2%2010.6c.2%201.2%201.3%202.1%202.5%202.1h9.1c1.1%200%202.1-.7%202.5-1.8l3-8.2c.5-1.4-.5-2.9-2-2.9H10%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.15%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Ccircle%20cx%3D%2213.3%22%20cy%3D%2225.6%22%20r%3D%221.75%22%20fill%3D%22black%22/%3E%3Ccircle%20cx%3D%2223.1%22%20cy%3D%2225.6%22%20r%3D%221.75%22%20fill%3D%22black%22/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M4.2%205.7h2.1c1.1%200%202%20.8%202.2%201.9l2%2010.6c.2%201.2%201.3%202.1%202.5%202.1h9.1c1.1%200%202.1-.7%202.5-1.8l3-8.2c.5-1.4-.5-2.9-2-2.9H10%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.15%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Ccircle%20cx%3D%2213.3%22%20cy%3D%2225.6%22%20r%3D%221.75%22%20fill%3D%22black%22/%3E%3Ccircle%20cx%3D%2223.1%22%20cy%3D%2225.6%22%20r%3D%221.75%22%20fill%3D%22black%22/%3E%3C/svg%3E") !important; -webkit-mask-position: center !important; mask-position: center !important; -webkit-mask-size: 29px 29px !important; mask-size: 29px 29px !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; transition: background-color 0.25s ease !important; } @media (hover: hover) and (pointer: fine) { .navigation-buttons button.top-nav-button.top-nav-button-login:hover::before, .navigation-buttons a[data-testid="headerCart"]:hover::after { background-color: #f19210 !important; } } .navigation-buttons button.top-nav-button.top-nav-button-login:focus-visible::before, .navigation-buttons button.top-nav-button.top-nav-button-login:active::before, .navigation-buttons a[data-testid="headerCart"]:focus-visible::after, .navigation-buttons a[data-testid="headerCart"]:active::after { background-color: #f19210 !important; } /* SEARCH: remove native Shoptet artwork completely. */ .navigation-buttons a[data-target="search"] { position: relative !important; background: transparent !important; background-image: none !important; box-shadow: none !important; transform: none !important; scale: 1 !important; -webkit-tap-highlight-color: transparent; } .navigation-buttons a[data-target="search"]::before, .navigation-buttons a[data-target="search"]::after { content: none !important; display: none !important; } /* One clean custom magnifier layer. */ .navigation-buttons a[data-target="search"]::before { content: "" !important; display: block !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 29px !important; height: 29px !important; margin: 0 !important; padding: 0 !important; background-color: #111111 !important; transform: translate(-50%, -50%) !important; transform-origin: center !important; pointer-events: none !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%228.2%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.15%22/%3E%3Cpath%20d%3D%22M20.1%2020.1L26.3%2026.3%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.15%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%228.2%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.15%22/%3E%3Cpath%20d%3D%22M20.1%2020.1L26.3%2026.3%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.15%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") !important; -webkit-mask-position: center !important; mask-position: center !important; -webkit-mask-size: 29px 29px !important; mask-size: 29px 29px !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; transition: background-color 0.25s ease !important; } @media (hover: hover) and (pointer: fine) { .navigation-buttons a[data-target="search"]:hover::before { background-color: #f19210 !important; } } .navigation-buttons a[data-target="search"]:focus-visible::before, .navigation-buttons a[data-target="search"]:active::before { background-color: #f19210 !important; } .navigation-buttons a[data-testid="headerCart"] { position: relative !important; } .navigation-buttons a[data-testid="headerCart"] i[data-testid="headerCartCount"] { position: absolute !important; top: 18px !important; right: 14px !important; left: auto !important; bottom: auto !important; z-index: 5 !important; min-width: 18px !important; width: auto !important; height: 18px !important; margin: 0 !important; padding: 0 5px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; background: #f19210 !important; color: #ffffff !important; border: 0 !important; border-radius: 999px !important; font-family: "Poppins", sans-serif !important; font-size: 10.5px !important; font-weight: 500 !important; line-height: 18px !important; transform: none !important; } /* DESKTOP STICKY HEADER – NATIVE 80 PX GEOMETRY */ @media (min-width: 992px) { #header.hl-sticky { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; margin: 0 !important; background: #e6e6e6 !important; z-index: 1000 !important; animation: hlStickyIn 0.22s ease-out both; } /* * Keep the existing Shoptet container geometry. * Only extend the requested background through the complete bar. */ #header.hl-sticky > .container.navigation-wrapper { background: #e6e6e6 !important; } /* * Remove decorative pseudo-elements that can visually continue * below the fixed header. No dimensions/display of real elements * are changed. */ #header.hl-sticky::after, #header.hl-sticky > .container.navigation-wrapper::before, #header.hl-sticky > .container.navigation-wrapper::after { content: none !important; display: none !important; } } @keyframes hlStickyIn { from { transform: translateY(-100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { #header.hl-sticky { animation: none !important; } } /* DESKTOP STICKY HEADER – FLOW PLACEHOLDER */ .hl-header-placeholder { display: none; } @media (min-width: 992px) { .hl-header-placeholder.hl-header-placeholder--active { display: block; width: 100%; margin: 0; padding: 0; border: 0; visibility: hidden; pointer-events: none; } } /* BUTTON SYSTEM */ .btn:not(.toggle-window):not(.btn-arrow-right):not([data-testid="searchBtn"]):not(:where(.loadMore__button)), .btn.btn-cart:not(:where(.loadMore__button)), .btn.btn-conversion:not(:where(.loadMore__button)), .hl-sticky-cart__button, #cart-widget .cart-window-in > button.toggle-window[data-target="cart"] { box-sizing: border-box !important; align-items: center !important; justify-content: center !important; align-content: center !important; vertical-align: middle !important; min-width: 0 !important; min-height: var(--hl-button-height) !important; height: auto !important; padding: var(--hl-button-padding-y) var(--hl-button-space-x) !important; box-shadow: none !important; font-family: var(--hl-button-font) !important; font-size: var(--hl-button-font-size) !important; font-weight: var(--hl-button-weight) !important; line-height: var(--hl-button-line-height) !important; letter-spacing: 0 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; white-space: normal !important; transition: var(--hl-button-transition) !important; } #product-detail-form .btn.add-to-cart-button:not(:where(.loadMore__button)), .hl-sticky-cart__button { min-height: var(--hl-button-main-height) !important; padding: 12px 22px !important; font-size: var(--hl-button-main-font-size) !important; font-weight: var(--hl-button-main-weight) !important; } @media (max-width: 767px) { /* Compact primary size for the narrow sticky purchase bar. */ .hl-sticky-cart__button { min-height: var(--hl-button-height) !important; padding: 10px 14px !important; font-size: var(--hl-button-font-size) !important; } } .btn:not(.toggle-window):not(.btn-arrow-right):not([data-testid="searchBtn"]):is( :disabled, [aria-disabled="true"] ):not(:where(.loadMore__button)), .btn.btn-cart:is(:disabled, [aria-disabled="true"]):not(:where(.loadMore__button)), .btn.btn-conversion:is(:disabled, [aria-disabled="true"]):not(:where(.loadMore__button)), .hl-sticky-cart__button:is(:disabled, [aria-disabled="true"]), #cart-widget .cart-window-in > button.toggle-window[data-target="cart"]:is(:disabled, [aria-disabled="true"]) { opacity: 0.55 !important; cursor: not-allowed !important; } /* REMOVE LEGACY BUTTON ARROWS */ .btn:not(:where(.loadMore__button))::before, .btn:not(:where(.loadMore__button))::after { content: none !important; display: none !important; } /* FREE SHIPPING PROGRESS BAR */ .extra.delivery .price-range, .extra.delivery .price-range > div { border-radius: 9999px !important; overflow: hidden !important; } /* MODERN CHECKOUT STEPPER */ /* HOMEPAGE PILL TABS */ .shp-tabs-holder:has(> ul#homepage-tabs) { display: flex !important; justify-content: center !important; margin: 0 0 28px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } ul#homepage-tabs.shp-tabs { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 5px !important; border: 0 !important; background: #eeeeee !important; box-shadow: none !important; list-style: none !important; } ul#homepage-tabs.shp-tabs::before, ul#homepage-tabs.shp-tabs::after { content: none !important; display: none !important; } ul#homepage-tabs.shp-tabs > li.shp-tab { position: relative !important; float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 9999px !important; background: transparent !important; box-shadow: none !important; } ul#homepage-tabs.shp-tabs > li.shp-tab::before, ul#homepage-tabs.shp-tabs > li.shp-tab::after { content: none !important; display: none !important; } ul#homepage-tabs.shp-tabs > li.shp-tab > a { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 42px !important; margin: 0 !important; padding: 9px 20px !important; text-decoration: none !important; transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important; } ul#homepage-tabs.shp-tabs > li.shp-tab > a::before, ul#homepage-tabs.shp-tabs > li.shp-tab > a::after { content: none !important; display: none !important; } ul#homepage-tabs.shp-tabs > li.shp-tab.active { background: transparent !important; } ul#homepage-tabs.shp-tabs > li.shp-tab.active > a { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09) !important; } @media (max-width: 767px) { .shp-tabs-holder:has(> ul#homepage-tabs) { overflow-x: auto !important; justify-content: flex-start !important; margin-left: -4px !important; margin-right: -4px !important; padding: 0 4px 4px !important; scrollbar-width: none; } .shp-tabs-holder:has(> ul#homepage-tabs)::-webkit-scrollbar { display: none; } ul#homepage-tabs.shp-tabs { flex: 0 0 auto !important; margin: 0 !important; } ul#homepage-tabs.shp-tabs > li.shp-tab > a { min-height: 38px !important; padding: 8px 16px !important; } } /* CHECKOUT STEPPER INNER RESET / POLISH */ /* ---------- 1. Stepper: all checkout pages ---------- */ /* ---------- 2. Checkout cards / sections ---------- */ /* ---------- 3. Country selector / form controls ---------- */ /* ---------- 4. Delivery + payment option rows ---------- */ /* ---------- 5. Delivery/payment form layout ---------- */ /* ---------- 6. Order summary ---------- */ /* ---------- 7. Bottom navigation ---------- */ /* ---------- 8. Mobile checkout ---------- */ /* PRICE FILTER SLIDER HANDLES */ #slider .ui-slider-handle { border-radius: 50% !important; } /* PRICE FILTER TRACK, FINAL STRUCTURE */ #filters .slider-content { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* Fixed full-scale track */ #filters .slider-content > #slider.param-price-filter { width: calc(100% - 20px) !important; margin-left: 10px !important; margin-right: 10px !important; background-image: none !important; border: 0 !important; border-radius: 9999px !important; box-shadow: none !important; } /* Selected interval between both handles */ #filters .slider-content > #slider.param-price-filter > .ui-slider-range { top: 0 !important; height: 100% !important; background-image: none !important; border: 0 !important; border-radius: 9999px !important; box-shadow: none !important; } /* The native handle is positioned by its centre around left: x%. Undo the track inset for the endpoint geometry so min/max handles still visually sit at the ends of the original slider area. */ #filters .slider-content > #slider.param-price-filter > .ui-slider-handle { z-index: 2 !important; border-radius: 50% !important; } /* PRICE FILTER RANGE CONTRAST */ #filters .slider-content > #slider.param-price-filter { background: #eeeeee !important; } #filters .slider-content > #slider.param-price-filter > .ui-slider-range { background: #cfcfcf !important; } /* PICKUP POINT MODAL INPUTS */ .content-modal .delivery-point-form input.form-control.ui-autocomplete-input, .content-modal .delivery-point-form input.form-control.zip-code { border-radius: 9999px !important; padding-left: 18px !important; padding-right: 18px !important; } /* PICKUP POINT MODAL CONTAINER */ #colorbox #cboxLoadedContent, #colorbox #cboxContent, #colorbox .content-modal { border-radius: 18px !important; } /* COLORBOX MODAL: ALL FOUR CORNERS */ #colorbox, #colorbox #cboxWrapper, #colorbox #cboxContent, #colorbox #cboxLoadedContent { border-radius: 18px !important; } #colorbox #cboxWrapper, #colorbox #cboxContent, #colorbox #cboxLoadedContent { overflow: hidden !important; } /* Colorbox helper/background layers must not paint a square corner over the rounded modal. */ #colorbox #cboxTopLeft, #colorbox #cboxTopCenter, #colorbox #cboxTopRight, #colorbox #cboxMiddleLeft, #colorbox #cboxMiddleRight, #colorbox #cboxBottomLeft, #colorbox #cboxBottomCenter, #colorbox #cboxBottomRight { background: transparent !important; } /* CATEGORY SORTING SEGMENTED PILL */ #category-header .listSorting { border: 0 !important; background: transparent !important; } #category-header .listSorting__controls { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px !important; width: fit-content !important; max-width: 100% !important; margin: 0 !important; padding: 5px !important; list-style: none !important; box-shadow: none !important; } #category-header .listSorting__controls > li { float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #category-header .listSorting__control { min-height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 8px 16px !important; background-image: none !important; box-shadow: none !important; text-decoration: none !important; white-space: nowrap !important; transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important; } #category-header .listSorting__control::before, #category-header .listSorting__control::after { content: none !important; display: none !important; } /* CATEGORY SORTING / MOBILE */ #category-header, #category-header .listSorting { border-bottom: 0 !important; } #category-header::after, #category-header .listSorting::after, #category-header .listSorting__controls::after { content: none !important; display: none !important; border: 0 !important; } @media (max-width: 767px) { #category-header .listSorting { width: 100% !important; } #category-header .listSorting__controls { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; } #category-header .listSorting__controls > li { width: 100% !important; min-width: 0 !important; } #category-header .listSorting__control { width: 100% !important; min-width: 0 !important; min-height: 42px !important; padding: 8px 10px !important; font-size: 13px !important; line-height: 1.15 !important; text-align: center !important; white-space: normal !important; } #category-header .listSorting__control--current { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important; } /* Fifth item spans the row instead of leaving an awkward empty cell. */ #category-header .listSorting__controls > li:last-child:nth-child(odd) { grid-column: 1 / -1 !important; } } /* HOMEPAGE TABS / MOBILE CENTERING */ @media (max-width: 767px) { .homepage-tabs-wrapper .shp-tabs-row { display: flex !important; justify-content: center !important; } .homepage-tabs-wrapper .shp-tabs-holder { width: auto !important; margin-left: auto !important; margin-right: auto !important; } .homepage-tabs-wrapper ul#homepage-tabs { width: max-content !important; margin-left: auto !important; margin-right: auto !important; } } /* REMOVE MOBILE TAP HIGHLIGHT */ *, *::before, *::after { -webkit-tap-highlight-color: transparent !important; } /* Keep homepage tabs completely clean when tapped. */ #homepage-tabs a { -webkit-tap-highlight-color: transparent !important; } #homepage-tabs button, .homepage-tabs-wrapper a, .homepage-tabs-wrapper button { -webkit-tap-highlight-color: transparent !important; } /* REMOVE FOCUS / TAP OUTLINES */ @media (hover: none), (pointer: coarse) { a:focus, a:focus-visible, button:focus, button:focus-visible, input:focus, input:focus-visible, select:focus, select:focus-visible, textarea:focus, textarea:focus-visible, [role="button"]:focus, [role="button"]:focus-visible, [role="tab"]:focus, [role="tab"]:focus-visible { outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent !important; } #homepage-tabs a:focus, #homepage-tabs a:focus-visible, #homepage-tabs .shp-tab-link:focus, #homepage-tabs .shp-tab-link:focus-visible { box-shadow: none !important; -webkit-tap-highlight-color: transparent !important; } } /* REMOVE SHOPTET TAB FOCUS FRAME */ #tab-content, #tab-content:focus, #tab-content:focus-visible, #tab-content[tabindex]:focus, #tab-content[tabindex]:focus-visible, .homepage-tabs-wrapper, .homepage-tabs-wrapper:focus, .homepage-tabs-wrapper:focus-visible, .homepage-tabs-wrapper [role="tabpanel"], .homepage-tabs-wrapper [role="tabpanel"]:focus, .homepage-tabs-wrapper [role="tabpanel"]:focus-visible, .homepage-tabs-wrapper .tab-pane, .homepage-tabs-wrapper .tab-pane:focus, .homepage-tabs-wrapper .tab-pane:focus-visible { outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent !important; } /* NEWSLETTER INPUT / ALL SCREEN SIZES */ #rmNewsletterWidget .form-control-wrapper, #rmNewsletterWidget .js-validated-element-wrapper, #newsletterWidget { border-radius: 12px !important; } #rmNewsletterWidget .form-control-wrapper, #rmNewsletterWidget .js-validated-element-wrapper { overflow: hidden !important; } /* FOOTER NEWSLETTER INPUT */ #newsletter, #newsletterWidget { border-radius: 12px !important; -webkit-appearance: none !important; appearance: none !important; } /* Keep both Shoptet newsletter wrappers clipped to the same radius. */ #formNewsletter .form-control-wrapper, #rmNewsletterWidget .form-control-wrapper { border-radius: 12px !important; overflow: hidden !important; } /* HEADER CART / REMOVE FOCUS RECTANGLE */ .navigation-buttons a.toggle-window.cart-count, .navigation-buttons a.toggle-window.cart-count:focus, .navigation-buttons a.toggle-window.cart-count:focus-visible, .navigation-buttons a.toggle-window.cart-count:active, a[data-testid="headerCart"], a[data-testid="headerCart"]:focus, a[data-testid="headerCart"]:focus-visible, a[data-testid="headerCart"]:active { outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent !important; } /* GLOBAL REMOVE BROWSER FOCUS / TAP FRAMES */ html { -webkit-tap-highlight-color: transparent !important; } a, button, input, select, textarea, summary, label, [role="button"], [role="tab"], [tabindex] { -webkit-tap-highlight-color: transparent !important; } a:focus, a:focus-visible, a:active, button:focus, button:focus-visible, button:active, input:focus, input:focus-visible, select:focus, select:focus-visible, textarea:focus, textarea:focus-visible, summary:focus, summary:focus-visible, [role="button"]:focus, [role="button"]:focus-visible, [role="tab"]:focus, [role="tab"]:focus-visible, [tabindex]:focus, [tabindex]:focus-visible { outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; -webkit-tap-highlight-color: transparent !important; } /* Remove browser focus rings that are implemented as shadows, while leaving ordinary non-focus component shadows untouched. */ a:focus, a:focus-visible, button:focus, button:focus-visible, [role="button"]:focus, [role="button"]:focus-visible, [role="tab"]:focus, [role="tab"]:focus-visible, [tabindex]:focus, [tabindex]:focus-visible { box-shadow: none !important; } /* CHECKOUT / MATCHED BACK AND FORWARD BUTTON SIZE */ /* Equal row height in all three observed checkout wrappers. Keep both lines of the final order action; the back action stretches to match it. Existing inline/important hiding rules remain effective. */ /* CHECKOUT STEPPER / TOP SPACING */ /* CHECKOUT / FINAL ORDER BUTTON CENTERING */ .hl-checkout-payment-note { display: block !important; box-sizing: border-box !important; position: static !important; float: none !important; width: 100% !important; max-width: none !important; margin: 12px 0 0 !important; padding: 0 !important; color: #666666 !important; font-family: var(--hl-button-font) !important; font-size: var(--hl-button-font-size) !important; font-weight: 400 !important; line-height: 1.5 !important; text-align: left !important; white-space: normal !important; } @media (max-width: 767px) { .hl-checkout-payment-note { max-width: none !important; } } /* FILTERS / CLEAR FILTERS ALIGNMENT */ #filters #clear-filters { text-align: left !important; } #filters #clear-filters > a { display: inline-flex !important; justify-content: flex-start !important; margin-left: 0 !important; margin-right: auto !important; text-align: left !important; } /* FILTERS / CLEAR FILTERS CROSS FIX */ #filters #clear-filters > a.close-after { position: relative !important; } /* FILTERS / CLEAR FILTERS CROSS CENTERING */ #filters #clear-filters > a.close-after::after { margin-top: 0 !important; margin-bottom: 0 !important; line-height: 1 !important; } /* FILTERS / CLEAR FILTERS CROSS FINAL ALIGNMENT */ #filters #clear-filters > a.close-after { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; padding-right: 0 !important; gap: 7px !important; vertical-align: middle !important; } #filters #clear-filters > a.close-after::after { position: static !important; display: inline-block !important; flex: 0 0 auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin: 0 !important; transform: none !important; vertical-align: middle !important; } /* PRODUCT DETAIL TABS / PILL STYLE */ .p-detail-tabs { display: inline-flex !important; align-items: center !important; gap: 4px !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 5px !important; border: 0 !important; background: #eeeeee !important; box-shadow: none !important; } .p-detail-tabs > .shp-tab { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } .p-detail-tabs > .shp-tab > .shp-tab-link { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 40px !important; margin: 0 !important; padding: 9px 16px !important; line-height: 1.2 !important; text-decoration: none !important; white-space: nowrap !important; box-shadow: none !important; } .p-detail-tabs > .shp-tab.active > .shp-tab-link { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important; } /* Remove the old rectangular tab separators/backgrounds. */ .p-detail-tabs > .shp-tab::before, .p-detail-tabs > .shp-tab::after, .p-detail-tabs > .shp-tab > .shp-tab-link::before, .p-detail-tabs > .shp-tab > .shp-tab-link::after { content: none !important; display: none !important; } /* Mobile: keep the pills in one horizontal row and let Shoptet's existing responsive navigation handle items that do not fit. */ @media (max-width: 767px) { .shp-tabs-row:has(.p-detail-tabs) .shp-tabs-holder { overflow: hidden !important; border: 0 !important; background: transparent !important; } .p-detail-tabs { gap: 2px !important; padding: 4px !important; } .p-detail-tabs > .shp-tab > .shp-tab-link { min-height: 38px !important; padding: 8px 13px !important; font-size: 14px !important; } } /* PRODUCT DETAIL TABS / SHOW ALL 5 PILLS */ @media (max-width: 767px) { .p-detail-tabs-wrapper .shp-tabs-row.responsive-nav { overflow: visible !important; } .p-detail-tabs-wrapper .shp-tabs-holder { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; } .p-detail-tabs-wrapper .shp-tabs-holder::-webkit-scrollbar { display: none !important; } .p-detail-tabs-wrapper .p-detail-tabs { flex-wrap: nowrap !important; max-width: none !important; } .p-detail-tabs-wrapper .p-detail-tabs > .shp-tab { display: block !important; visibility: visible !important; flex: 0 0 auto !important; } .p-detail-tabs-wrapper .p-detail-tabs > .shp-tab > .shp-tab-link { padding-left: 13px !important; padding-right: 13px !important; white-space: nowrap !important; } /* Shoptet no longer needs the overflow/hamburger control here, because all product-detail tabs remain available in the pill row. */ } /* PRODUCT DETAIL TABS / RESTORE HIDDEN TABS */ @media (max-width: 767px) { .p-detail-tabs-wrapper .navigation-btn { display: none !important; } .p-detail-tabs-wrapper .hidden-links { clear: both !important; align-items: center !important; border: 0 !important; list-style: none !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } .p-detail-tabs-wrapper .hidden-links > li { display: block !important; position: static !important; float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; visibility: visible !important; opacity: 1 !important; } .p-detail-tabs-wrapper .hidden-links > li > a { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 38px !important; padding: 8px 13px !important; color: #444444 !important; font-size: 14px !important; line-height: 1.2 !important; text-decoration: none !important; white-space: nowrap !important; } } /* PRODUCT DETAIL TABS / INDIVIDUAL PILLS */ .p-detail-tabs-wrapper .p-detail-tabs { justify-content: flex-start !important; gap: 7px !important; padding: 0 !important; background: transparent !important; } .p-detail-tabs-wrapper .p-detail-tabs > .shp-tab.active > .shp-tab-link { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important; } @media (max-width: 767px) { .p-detail-tabs-wrapper .shp-tabs-row.responsive-nav, .p-detail-tabs-wrapper .shp-tabs-holder { text-align: left !important; } .p-detail-tabs-wrapper .p-detail-tabs { margin-left: 0 !important; margin-right: 0 !important; background: transparent !important; } .p-detail-tabs-wrapper .hidden-links { max-width: 100% !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } } /* PRODUCT DETAIL TABS / MOBILE POLISH */ @media (max-width: 767px) { /* Shoptet's Bootstrap row has negative side margins. Neutralize them so both pill rows share the content edge. */ .p-detail-tabs-wrapper > .row { margin-left: 0 !important; margin-right: 0 !important; } .p-detail-tabs-wrapper .shp-tabs-row.responsive-nav { float: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .p-detail-tabs-wrapper .shp-tabs-holder { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; text-align: left !important; } .p-detail-tabs-wrapper .p-detail-tabs { display: flex !important; justify-content: flex-start !important; width: max-content !important; margin: 0 !important; padding: 0 !important; gap: 8px !important; overflow: visible !important; } .p-detail-tabs-wrapper .hidden-links { position: static !important; display: flex !important; float: none !important; justify-content: flex-start !important; width: max-content !important; margin: 8px 0 0 0 !important; padding: 0 !important; gap: 8px !important; text-align: left !important; } /* Every item is a standalone pill. */ .p-detail-tabs-wrapper .p-detail-tabs > .shp-tab > .shp-tab-link { box-shadow: none !important; transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important; } .p-detail-tabs-wrapper .hidden-links > li > a { background: #eeeeee !important; border: 1px solid transparent !important; border-radius: 9999px !important; box-shadow: none !important; transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important; } /* Hover must remain visibly grey instead of disappearing into the white page background. */ .p-detail-tabs-wrapper .p-detail-tabs > .shp-tab:not(.active) > .shp-tab-link:hover { box-shadow: none !important; } .p-detail-tabs-wrapper .hidden-links > li:not(.active) > a:hover { background: #dddddd !important; border-color: #d3d3d3 !important; color: #111111 !important; box-shadow: none !important; } /* Active tab: white, but still visibly separated from the page. */ .p-detail-tabs-wrapper .hidden-links > li.active > a, .p-detail-tabs-wrapper .hidden-links > li > a.active { background: #ffffff !important; border-color: #e2e2e2 !important; color: #111111 !important; } } /* PRODUCT DETAIL TABS / CLEAN ACTIVE PILL */ @media (max-width: 767px) { .p-detail-tabs-wrapper .p-detail-tabs > .shp-tab.active > .shp-tab-link { box-shadow: none !important; } .p-detail-tabs-wrapper .hidden-links > li.active > a, .p-detail-tabs-wrapper .hidden-links > li > a.active { box-shadow: none !important; } } /* PRODUCT DETAIL TABS / DESKTOP ALIGNMENT */ @media (min-width: 768px) { .p-detail-tabs-wrapper .shp-tabs-row.responsive-nav, .p-detail-tabs-wrapper .shp-tabs-holder { justify-content: flex-start !important; text-align: left !important; } } /* Remove the divider below product-detail tabs on all screen sizes. */ .p-detail-tabs-wrapper .shp-tabs-row.responsive-nav, .p-detail-tabs-wrapper .shp-tabs-holder, .p-detail-tabs-wrapper #p-detail-tabs { border-bottom: 0 !important; box-shadow: none !important; } .p-detail-tabs-wrapper .shp-tabs-row.responsive-nav::before, .p-detail-tabs-wrapper .shp-tabs-row.responsive-nav::after, .p-detail-tabs-wrapper .shp-tabs-holder::before, .p-detail-tabs-wrapper .shp-tabs-holder::after, .p-detail-tabs-wrapper #p-detail-tabs::before, .p-detail-tabs-wrapper #p-detail-tabs::after { border-bottom: 0 !important; box-shadow: none !important; } /* PRODUCT RATING FORM / ROUNDED FIELDS */ #formRating input#ratingName.form-control, #formRating input#ratingEmail.form-control, #formRating textarea.form-control { border-radius: 12px !important; } /* Active pill: unmistakable active state, including hover/focus. */ .p-detail-tabs-wrapper #p-detail-tabs > .shp-tab.active > .shp-tab-link, .p-detail-tabs-wrapper #p-detail-tabs > .shp-tab.active > .shp-tab-link:hover, .p-detail-tabs-wrapper #p-detail-tabs > .shp-tab.active > .shp-tab-link:focus { box-shadow: none !important; } .p-detail-tabs-wrapper .hidden-links > li.active > a, .p-detail-tabs-wrapper .hidden-links > li.active > a:hover, .p-detail-tabs-wrapper .hidden-links > li.active > a:focus, .p-detail-tabs-wrapper .hidden-links > li > a.active, .p-detail-tabs-wrapper .hidden-links > li > a.active:hover, .p-detail-tabs-wrapper .hidden-links > li > a.active:focus { background: #f19210 !important; border-color: #f19210 !important; color: #ffffff !important; box-shadow: none !important; } /* Inactive hover must never turn white. */ .p-detail-tabs-wrapper #p-detail-tabs > .shp-tab:not(.active) > .shp-tab-link:hover, .p-detail-tabs-wrapper #p-detail-tabs > .shp-tab:not(.active) > .shp-tab-link:focus { box-shadow: none !important; } .p-detail-tabs-wrapper .hidden-links > li:not(.active) > a:hover, .p-detail-tabs-wrapper .hidden-links > li:not(.active) > a:focus { background: #d9d9d9 !important; border-color: #d9d9d9 !important; color: #111111 !important; box-shadow: none !important; } /* Desktop: line the pills up with the product description/images column. */ @media (min-width: 768px) { .p-detail-tabs-wrapper .shp-tabs-holder { margin-left: 0 !important; margin-right: auto !important; } } /* PRODUCT DETAIL TABS / DESKTOP POSITION TWEAK */ @media (min-width: 768px) { .p-detail-tabs-wrapper > .row > .shp-tabs-row.responsive-nav { padding-left: 40px !important; padding-right: 30px !important; } } /* PRODUCT DETAIL TABS / REAL BOTTOM SPACING */ .p-detail-tabs-wrapper { margin-top: 24px !important; margin-bottom: 0 !important; padding-bottom: 24px !important; } /* PRODUCT DETAIL TABS / SPACE BEFORE TAB CONTENT */ .p-detail-tabs-wrapper > .row > .shp-tabs-row.responsive-nav + .col-sm-12 { padding-top: 24px !important; } /* PRODUCT DETAIL TABS / MOBILE OFFSET TWEAK */ @media (max-width: 767px) { .p-detail-tabs-wrapper .shp-tabs-holder, .p-detail-tabs-wrapper .hidden-links { padding-left: 10px !important; } } /* CATEGORY SORTING / ACTIVE STATE */ #category-header .listSorting__control--current, #category-header .listSorting__control--current:hover, #category-header .listSorting__control--current:focus { box-shadow: none !important; } #category-header .listSorting__control:not(.listSorting__control--current):hover, #category-header .listSorting__control:not(.listSorting__control--current):focus { box-shadow: none !important; } /* PRODUCT VARIANT SELECTS / ROUNDED CORNERS */ .p-variants-block table.detail-parameters select.form-control { border-radius: 12px !important; } /* PRODUCT VARIANTS / CLEAN MOBILE STACK */ @media (max-width: 767px) { .p-variants-block table.detail-parameters, .p-variants-block table.detail-parameters > tbody { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border-spacing: 0 !important; } .p-variants-block table.detail-parameters tr.variant-list { display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 12px 0 !important; padding: 0 !important; gap: 0 !important; border: 0 !important; } .p-variants-block table.detail-parameters tr.variant-list > th, .p-variants-block table.detail-parameters tr.variant-list > td { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } .p-variants-block table.detail-parameters tr.variant-list > th { margin-bottom: 6px !important; } .p-variants-block table.detail-parameters tr.variant-list > th > label { display: block !important; margin: 0 !important; padding: 0 !important; } .p-variants-block table.detail-parameters tr.variant-list > td > select.form-control { display: block !important; width: 100% !important; margin: 0 !important; } } /* PRODUCT VARIANTS / MOBILE GROUP SPACING */ @media (max-width: 767px) { .p-variants-block table.detail-parameters tr.variant-list { margin-bottom: 20px !important; } .p-variants-block table.detail-parameters tr.variant-list:last-of-type { margin-bottom: 0 !important; } } /* PRODUCT VARIANTS / DESKTOP GROUP SPACING */ @media (min-width: 768px) { .p-variants-block table.detail-parameters tr.variant-list + tr.variant-list > th, .p-variants-block table.detail-parameters tr.variant-list + tr.variant-list > td { padding-top: 20px !important; } } /* PRODUCT VARIANTS / DESKTOP VERTICAL ALIGNMENT */ @media (min-width: 768px) { .p-variants-block table.detail-parameters tr.variant-list > th, .p-variants-block table.detail-parameters tr.variant-list > td { vertical-align: middle !important; } } /* PRODUCT VARIANTS / DESKTOP TRUE CENTERING */ @media (min-width: 768px) { .p-variants-block table.detail-parameters tr.variant-list > th { height: 48px !important; padding-top: 0 !important; padding-bottom: 0 !important; vertical-align: middle !important; } .p-variants-block table.detail-parameters tr.variant-list > th > label { display: flex !important; align-items: center !important; width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } } /* MOBILE HAMBURGER MENU / STRONGER SEPARATION */ @media (max-width: 991px) { /* Login is visually moved into the upper utility section. The DOM stays untouched; only mobile presentation changes. */ #navigation .navigation-in.menu > .navigationActions > li > a { display: flex !important; align-items: center !important; min-height: 41px !important; width: 100% !important; margin: 0 !important; padding: 0 24px !important; font-weight: 700 !important; color: #111111 !important; background: transparent !important; text-decoration: none !important; } #navigation .navigation-in.menu > .navigationActions > li > a:hover, #navigation .navigation-in.menu > .navigationActions > li > a:focus { background: #eeeeee !important; color: #111111 !important; } } /* MOBILE HAMBURGER / LOGIN VISUAL MATCH */ @media (max-width: 991px) { #navigation .navigation-in.menu > .navigationActions, #navigation .navigation-in.menu > .navigationActions > li { box-shadow: none !important; } #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"]:hover, #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"]:focus, #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"]:active { background: transparent !important; box-shadow: none !important; color: #111111 !important; } } /* MOBILE HAMBURGER / CLEAN INFORMATION HIERARCHY */ @media (max-width: 991px) { /* Overall mobile menu rhythm */ #navigation .navigation-in.menu { display: flex !important; flex-direction: column !important; } /* Account action: intentional standalone pill */ #navigation .navigation-in.menu > .navigationActions { order: 0 !important; width: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #navigation .navigation-in.menu > .navigationActions > li { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"] { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; width: 100% !important; min-height: 44px !important; margin: 0 !important; padding: 0 16px !important; border: 1px solid #dddddd !important; border-radius: 9999px !important; background: #eeeeee !important; box-shadow: none !important; color: #111111 !important; font-weight: 700 !important; text-decoration: none !important; } #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"]::before { background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14Z'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14Z'/%3E%3C/svg%3E") center / contain no-repeat !important; } #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"] > span { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: inherit !important; font: inherit !important; font-weight: 700 !important; line-height: 1.2 !important; } #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"]:hover, #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"]:focus { background: #dddddd !important; border-color: #d2d2d2 !important; color: #111111 !important; } /* Main list follows account action */ #navigation .navigation-in.menu > .menu-level-1 { order: 1 !important; width: 100% !important; } /* Utility links before appended categories: compact, aligned */ #navigation .menu-level-1 > li:not(.appended-category) { margin: 0 !important; padding: 0 !important; } #navigation .menu-level-1 > li:not(.appended-category) > a { display: flex !important; align-items: center !important; min-height: 46px !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Strong but clean boundary between utility and shop navigation */ #navigation .menu-level-1 > li:not(.appended-category) + li.appended-category { position: relative !important; margin-top: 18px !important; padding-top: 18px !important; border-top: 0 !important; } #navigation .menu-level-1 > li:not(.appended-category) + li.appended-category::before { content: "" !important; position: absolute !important; top: 0 !important; left: 24px !important; right: 24px !important; height: 1px !important; background: #d7d7d7 !important; } } /* MOBILE HAMBURGER / TOP AIR + ACCOUNT ICON */ @media (max-width: 991px) { /* Reserve a clean top zone for the close button. */ /* Reuse the desktop account icon artwork. */ #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"]::before { content: "" !important; display: block !important; position: static !important; flex: 0 0 28px !important; width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important; background-color: currentColor !important; transform: none !important; pointer-events: none !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2210%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M7%2027c.7-5.5%204.1-8.5%209-8.5s8.3%203%209%208.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2210%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M7%2027c.7-5.5%204.1-8.5%209-8.5s8.3%203%209%208.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") !important; -webkit-mask-position: center !important; mask-position: center !important; -webkit-mask-size: 28px 28px !important; mask-size: 28px 28px !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; } } /* MOBILE HAMBURGER / LOGIN PILL FINE ALIGNMENT */ @media (max-width: 991px) { #navigation .navigation-in.menu > .navigationActions { margin: 72px 24px 14px 20px !important; } } /* EMPTY CART SEARCH / MATCH MAIN SEARCH BAR */ #formSearchFormContent.search-form { width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 9999px !important; } #formSearchFormContent.search-form fieldset { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 9999px !important; overflow: hidden !important; } #formSearchFormContent.search-form input[data-testid="searchInput"], #formSearchFormContent.search-form .query-input, #formSearchFormContent.search-form .search-input { display: block !important; width: 100% !important; height: 60px !important; margin: 0 !important; padding: 0 76px 0 28px !important; border-radius: 9999px !important; box-sizing: border-box !important; } #formSearchFormContent.search-form button[data-testid="searchBtn"], #formSearchFormContent.search-form .btn-arrow-right { position: absolute !important; top: 0 !important; right: 0 !important; bottom: auto !important; left: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 60px !important; min-width: 60px !important; height: 60px !important; min-height: 60px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #f19210 !important; color: transparent !important; box-shadow: none !important; transform: none !important; z-index: 2 !important; transition: var(--hl-button-transition) !important; } #formSearchFormContent.search-form button[data-testid="searchBtn"]:hover, #formSearchFormContent.search-form .btn-arrow-right:hover { background: #ffaf41 !important; } #formSearchFormContent.search-form button[data-testid="searchBtn"]::before, #formSearchFormContent.search-form .btn-arrow-right::before { content: none !important; display: none !important; } #formSearchFormContent.search-form button[data-testid="searchBtn"]::after, #formSearchFormContent.search-form .btn-arrow-right::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 23px !important; height: 23px !important; background: center / 23px 23px no-repeat url("data:image/svg+xml;utf8,") !important; transform: translate(-50%, -50%) !important; } /* EMPTY CART SEARCH / EXACT MAIN SEARCH GEOMETRY */ #formSearchFormContent.search-form.compact-form { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } #formSearchFormContent.search-form.compact-form input[data-testid="searchInput"] { min-width: 0 !important; box-sizing: border-box !important; } /* EMPTY CART SEARCH / WHITE MAGNIFIER ACTION */ #formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"] { align-self: center !important; } /* EMPTY CART SEARCH / REFERENCE DESIGN */ #formSearchFormContent.search-form.compact-form fieldset { display: flex !important; align-items: center !important; } #formSearchFormContent.search-form.compact-form input[data-testid="searchInput"] { flex: 1 1 auto !important; width: auto !important; } #formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"] { flex: none !important; color: transparent !important; } #formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]::before { box-sizing: border-box !important; } #formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]::after { position: absolute !important; top: 50% !important; left: 50% !important; width: 9px !important; height: 2px !important; margin: 0 !important; border: 0 !important; border-radius: 9999px !important; background-image: none !important; transform: translate(2px, 5px) rotate(45deg) !important; transform-origin: left center !important; } /* EMPTY CART SEARCH / BRAND PALETTE */ #formSearchFormContent.search-form.compact-form fieldset { border-color: #b7b7b7 !important; } #formSearchFormContent.search-form.compact-form input[data-testid="searchInput"] { color: #222222 !important; } #formSearchFormContent.search-form.compact-form input[data-testid="searchInput"]::placeholder { color: #8a8a8a !important; opacity: 1 !important; } #formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]::before { border-color: #ffffff !important; } #formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]::after { background: #ffffff !important; } /* EMPTY CART SEARCH / CLEAN SINGLE OUTLINE + ICON */ #formSearchFormContent.search-form.compact-form { height: 60px !important; border: 0 !important; border-radius: 9999px !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; } #formSearchFormContent.search-form.compact-form fieldset { position: relative !important; width: 100% !important; height: 60px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #b7b7b7 !important; border-radius: 9999px !important; background: #ffffff !important; background-image: none !important; box-shadow: none !important; outline: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } #formSearchFormContent.search-form.compact-form input[data-testid="searchInput"] { height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 76px 0 24px !important; border: 0 !important; border-radius: 9999px !important; background: transparent !important; background-image: none !important; box-shadow: none !important; outline: 0 !important; -webkit-appearance: none !important; appearance: none !important; } #formSearchFormContent.search-form.compact-form input[data-testid="searchInput"]:focus { border: 0 !important; box-shadow: none !important; outline: 0 !important; } #formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"] { position: absolute !important; top: 50% !important; right: 6px !important; width: 46px !important; min-width: 46px !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #f19210 !important; background-image: none !important; box-shadow: none !important; outline: 0 !important; transform: translateY(-50%) !important; overflow: hidden !important; } #formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 22px !important; height: 22px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: #ffffff !important; box-shadow: none !important; transform: translate(-50%, -50%) !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.35-4.35m2.35-5.65a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.35-4.35m2.35-5.65a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z'/%3E%3C/svg%3E") center / contain no-repeat !important; } #formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]::after { content: none !important; display: none !important; } /* MAIN SEARCH OVERLAY / SAME SEARCH BAR AS CART */ .content-window.search-window #formSearchForm.search-form.compact-form, .search-window-in #formSearchForm.search-form.compact-form { height: 60px !important; border: 0 !important; border-radius: 9999px !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; } .content-window.search-window #formSearchForm.search-form.compact-form fieldset, .search-window-in #formSearchForm.search-form.compact-form fieldset { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; height: 60px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #b7b7b7 !important; border-radius: 9999px !important; background: #ffffff !important; background-image: none !important; box-shadow: none !important; outline: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } .content-window.search-window #formSearchForm.search-form.compact-form input[data-testid="searchInput"], .search-window-in #formSearchForm.search-form.compact-form input[data-testid="searchInput"] { flex: 1 1 auto !important; width: auto !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 76px 0 24px !important; border: 0 !important; border-radius: 9999px !important; background: transparent !important; background-image: none !important; color: #222222 !important; box-shadow: none !important; outline: 0 !important; -webkit-appearance: none !important; appearance: none !important; } .content-window.search-window #formSearchForm.search-form.compact-form input[data-testid="searchInput"]::placeholder, .search-window-in #formSearchForm.search-form.compact-form input[data-testid="searchInput"]::placeholder { color: #8a8a8a !important; opacity: 1 !important; } .content-window.search-window #formSearchForm.search-form.compact-form input[data-testid="searchInput"]:focus, .search-window-in #formSearchForm.search-form.compact-form input[data-testid="searchInput"]:focus { border: 0 !important; box-shadow: none !important; outline: 0 !important; } .content-window.search-window #formSearchForm.search-form.compact-form button[data-testid="searchBtn"], .search-window-in #formSearchForm.search-form.compact-form button[data-testid="searchBtn"] { position: absolute !important; top: 50% !important; right: 6px !important; flex: none !important; width: 46px !important; min-width: 46px !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #f19210 !important; background-image: none !important; color: transparent !important; box-shadow: none !important; outline: 0 !important; transform: translateY(-50%) !important; overflow: hidden !important; } .content-window.search-window #formSearchForm.search-form.compact-form button[data-testid="searchBtn"]::before, .search-window-in #formSearchForm.search-form.compact-form button[data-testid="searchBtn"]::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 22px !important; height: 22px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: #ffffff !important; box-shadow: none !important; transform: translate(-50%, -50%) !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.35-4.35m2.35-5.65a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.35-4.35m2.35-5.65a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z'/%3E%3C/svg%3E") center / contain no-repeat !important; } .content-window.search-window #formSearchForm.search-form.compact-form button[data-testid="searchBtn"]::after, .search-window-in #formSearchForm.search-form.compact-form button[data-testid="searchBtn"]::after { content: none !important; display: none !important; } /* SEARCH BUTTON HOVER */ #formSearchForm.search-form.compact-form button[data-testid="searchBtn"]:hover, #formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"]:hover { background: #ffaf41 !important; } /* SEARCH BUTTON HOVER / BOTH SEARCH BARS */ #formSearchFormContent button[data-testid="searchBtn"]:hover, #formSearchForm button[data-testid="searchBtn"]:hover { background-color: #ffaf41 !important; } /* HEADER SEARCH / EXACT SEARCH BUTTON HOVER */ .content-window.search-window #formSearchForm button.btn.btn-default.btn-arrow-right.btn-lg[data-testid="searchBtn"]:hover:not(:where(.loadMore__button)), .content-window-in.search-window-in #formSearchForm button.btn.btn-default.btn-arrow-right.btn-lg[data-testid="searchBtn"]:hover:not(:where(.loadMore__button)), #formSearchForm.search-form.compact-form.js-search-main button.btn.btn-default.btn-arrow-right.btn-lg[data-testid="searchBtn"]:hover:not(:where(.loadMore__button)) { background: #ffaf41 !important; background-color: #ffaf41 !important; } /* SCROLL TO TOP / HOVER MICRO-ANIMATION */ /* SCROLL TO TOP / COLOR-ONLY HOVER TRANSITION */ /* LOGIN MODAL / ROUNDED EMAIL + PASSWORD */ /* LOGIN MODAL / MATCH STANDALONE LOGIN LINKS */ /* Empty cart heading – suppress Shoptet's old icon-font basket and use the exact same visual language as the header icon. */ .cart-heading.h1::before, .cart-heading::before { content: "" !important; width: 30px !important; height: 30px !important; margin-right: 11px !important; background-color: currentColor !important; font-size: 0 !important; line-height: 0 !important; transform: translateY(-1px) !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M4.5%206h2.2c.9%200%201.7.6%201.9%201.5l1.8%209.2c.2%201.1%201.2%201.9%202.3%201.9h9c1%200%201.9-.7%202.2-1.7l2.4-7.2c.3-1-.4-2-1.5-2H9%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2224.5%22%20r%3D%221.5%22%20fill%3D%22black%22/%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2224.5%22%20r%3D%221.5%22%20fill%3D%22black%22/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M4.5%206h2.2c.9%200%201.7.6%201.9%201.5l1.8%209.2c.2%201.1%201.2%201.9%202.3%201.9h9c1%200%201.9-.7%202.2-1.7l2.4-7.2c.3-1-.4-2-1.5-2H9%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2224.5%22%20r%3D%221.5%22%20fill%3D%22black%22/%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2224.5%22%20r%3D%221.5%22%20fill%3D%22black%22/%3E%3C/svg%3E") !important; -webkit-mask-position: center !important; mask-position: center !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-size: 30px 30px !important; mask-size: 30px 30px !important; } @media (max-width: 767px) { .cart-heading.h1::before, .cart-heading::before { width: 26px !important; height: 26px !important; margin-right: 9px !important; transform: translateY(-1px) !important; -webkit-mask-size: 26px 26px !important; mask-size: 26px 26px !important; } } /* EMPTY CART / HIDE CATEGORY SUGGESTION LIST */ #cart-widget .cart-empty .empty-cart-boxes > .col-md-6:first-child { display: none !important; } /* EMPTY CART SEARCH / LARGER VERTICAL SPACING */ #cart-widget .cart-empty .empty-cart-boxes > .col-md-6:last-child { margin-top: 36px !important; margin-bottom: 36px !important; } /* MOBILE SEARCH BARS / CONTAIN TO CONTENT WIDTH */ @media (max-width: 767px) { #formSearchFormContent.search-form.compact-form, .content-window.search-window #formSearchForm.search-form.compact-form, .search-window-in #formSearchForm.search-form.compact-form { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } #formSearchFormContent.search-form.compact-form fieldset, .content-window.search-window #formSearchForm.search-form.compact-form fieldset, .search-window-in #formSearchForm.search-form.compact-form fieldset { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #formSearchFormContent.search-form.compact-form input[data-testid="searchInput"], .content-window.search-window #formSearchForm.search-form.compact-form input[data-testid="searchInput"], .search-window-in #formSearchForm.search-form.compact-form input[data-testid="searchInput"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } } /* EMPTY CART HELP / ALIGN BELOW SEARCH */ #cart-widget .cart-empty .cart-row > .col-xl-offset-1.col-xl-4 { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; float: none !important; } #cart-widget .cart-empty .cart-row > .col-xl-offset-1.col-xl-4 > .cart-content { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } #cart-widget .cart-empty .cart-row > .col-xl-offset-1.col-xl-4 > .cart-content > h2 { margin-bottom: 18px !important; } #cart-widget .cart-empty .cart-row > .col-xl-offset-1.col-xl-4 .contact-box { margin-top: 0 !important; } /* EMPTY CART HELP / PLACE DIRECTLY BELOW SEARCH */ @media (min-width: 1200px) { #cart-widget .cart-empty .cart-row > .col-xl-offset-1.col-xl-4 { float: left !important; clear: both !important; width: 58.33333333% !important; max-width: 58.33333333% !important; margin-left: 0 !important; margin-top: 0 !important; } } @media (max-width: 1199px) { #cart-widget .cart-empty .cart-row > .col-xl-offset-1.col-xl-4 { float: none !important; clear: both !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; } } /* EMPTY CART / MORE SPACE BELOW SEARCH */ #cart-widget .cart-empty .cart-row > .col-xl-offset-1.col-xl-4 { margin-top: 34px !important; } /* CHECKOUT / REMOVE REDUNDANT INNER CARD BORDERS */ /* SOCIAL LOGIN / ROUNDED GOOGLE + SEZNAM BUTTONS */ .social-login-buttons > .form-group, .social-login > .form-group { border-radius: 12px !important; } .social-login-buttons > .form-group, .social-login > .form-group { overflow: hidden !important; } /* Text sociálních tlačítek centrovat vůči celému tlačítku, ne až za ikonou. */ .social-login-buttons a.login-btn:not([hidden]), .social-login a.login-btn:not([hidden]) { box-sizing: border-box !important; /* Inline display:none and Shoptet's important hiding rules still take precedence. */ display: flex; align-items: center !important; justify-content: center !important; height: auto !important; min-height: 48px !important; padding: 10px 44px !important; text-align: center !important; align-content: center !important; transition: var(--hl-button-transition) !important; } .social-login-buttons a.login-btn > strong, .social-login a.login-btn > strong { box-sizing: border-box !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; text-align: center !important; white-space: normal !important; overflow-wrap: anywhere !important; transition: none !important; } .social-login-buttons a.login-btn > .login-google-icon, .social-login-buttons a.login-btn > .login-seznam-icon, .social-login a.login-btn > .login-google-icon, .social-login a.login-btn > .login-seznam-icon { top: 0 !important; bottom: 0 !important; left: 0 !important; width: 44px !important; height: auto !important; background-position: center !important; } /* ACTION BUTTON LAYOUT / ACCOUNT + CART */ :is( #formLogin, #formLoginIncluded, #register-form, #formForgottenPassword, #formNewsletterWidget, #formNewsletter, #formRating ) .btn.btn-primary:not(:where(.loadMore__button)) { width: auto !important; min-width: 0 !important; } #cart-widget .cart-window-in > button.toggle-window[data-target="cart"] { margin-top: 18px !important; margin-bottom: 24px !important; column-gap: 4px !important; } #cart-widget .cart-window-in > button.toggle-window[data-target="cart"] > span, .btn.add-to-cart-button > span { color: inherit !important; -webkit-text-fill-color: currentColor !important; font: inherit !important; text-transform: inherit !important; } #cart-widget .cart-window-in > button.toggle-window[data-target="cart"] > span { display: inline !important; position: static !important; width: auto !important; height: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* GLOBAL QUANTITY CONTROL / CIRCULAR UI */ /* QUANTITY / EMPHASIZE CURRENT VALUE */ /* QUANTITY / STRONGER CURRENT VALUE EMPHASIS */ /* CART / EMPHASIZE CURRENT QUANTITY VALUE */ /* PRODUCT DETAIL – MOBILE PURCHASE ROW ALIGNMENT */ @media (max-width: 767px) { #product-detail-form .p-add-to-cart-wrapper { margin-left: 0 !important; margin-right: auto !important; } } /* CATEGORY MENU / MINIMAL TREE */ .box-categories > h3.pageElement__heading { margin-bottom: 12px !important; color: #787878 !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } #categories > .categories { margin: 0 0 2px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #categories .topic { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #categories .topic > a, #categories ul li > a { position: relative !important; display: block !important; box-sizing: border-box !important; margin: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: #303030 !important; font-family: "Poppins", sans-serif !important; text-decoration: none !important; text-align: left !important; white-space: normal !important; transition: background-color 0.18s ease, color 0.18s ease !important; } #categories .topic > a { min-height: 36px !important; padding: 8px 42px 8px 12px !important; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; } #categories ul { list-style: none !important; margin: 4px 0 8px 12px !important; padding: 0 0 0 10px !important; border: 0 !important; border-left: 1px solid #e9e9e9 !important; background: transparent !important; } #categories ul li { list-style: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #categories ul li > a { min-height: 32px !important; padding: 6px 38px 6px 10px !important; color: #666666 !important; font-size: 13px !important; font-weight: 400 !important; line-height: 20px !important; } #categories .topic > a:hover, #categories ul li > a:hover { background: #f4f4f4 !important; color: #303030 !important; } #categories .topic.active > a, #categories .topic.child-active > a { background: #fff4e4 !important; color: #303030 !important; font-weight: 600 !important; } #categories ul li.active > a { background: #f4f4f4 !important; color: #303030 !important; font-weight: 500 !important; } #categories a:focus-visible { outline: 2px solid #f19210 !important; outline-offset: 2px !important; } /* Replace the tiny leading glyph with the original control on the right. */ #categories .cat-trigger { display: none !important; } #categories .categories.expandable > .topic > a > .cat-trigger, #categories li.expandable > a > .cat-trigger { position: absolute !important; display: block !important; top: 50% !important; right: 6px !important; bottom: auto !important; left: auto !important; width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #8a8a8a !important; font-size: 0 !important; line-height: 0 !important; transform: translateY(-50%) !important; cursor: pointer !important; } #categories .cat-trigger::before, #categories .cat-trigger::after { content: "" !important; position: absolute !important; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: currentColor !important; font-size: 0 !important; line-height: 0 !important; transform: translate(-50%, -50%) !important; transform-origin: center !important; transition: transform 0.18s ease !important; } #categories .cat-trigger::before { top: 50% !important; left: 50% !important; width: 10px !important; height: 1px !important; } #categories .cat-trigger::after { top: 50% !important; left: 50% !important; width: 1px !important; height: 10px !important; } #categories .categories.expanded > .topic > a > .cat-trigger::after, #categories li.expanded > a > .cat-trigger::after { transform: translate(-50%, -50%) scaleY(0) !important; } #categories .categories.expandable > .topic > a > .cat-trigger:hover, #categories li.expandable > a > .cat-trigger:hover { background: #eaeaea !important; color: #303030 !important; } /* The mobile category tree is a separate Shoptet navigation structure. */ @media (max-width: 991px) { #navigation .menu-level-1 > li.appended-category > a { position: relative !important; display: block !important; box-sizing: border-box !important; width: calc(100% - 24px) !important; min-height: 44px !important; margin: 0 12px !important; padding: 11px 48px 11px 12px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #303030 !important; font-size: 15px !important; font-weight: 500 !important; line-height: 22px !important; text-decoration: none !important; white-space: normal !important; transition: background-color 0.18s ease, color 0.18s ease !important; } #navigation .appended-category > a > b { font: inherit !important; color: inherit !important; } #navigation .appended-category > a::before, #navigation .menu-level-2-appended a::before { content: none !important; display: none !important; } #navigation .menu-level-1 > li.appended-category > a:hover, #navigation .menu-level-2.menu-level-2-appended > li > a:hover { background: #f4f4f4 !important; color: #303030 !important; } #navigation .menu-level-1 > li.appended-category > a[aria-expanded="true"] { background: #fff4e4 !important; font-weight: 600 !important; } #navigation .menu-level-2.menu-level-2-appended { margin: 4px 24px 12px !important; padding: 0 0 0 12px !important; border: 0 !important; border-left: 1px solid #e9e9e9 !important; background: transparent !important; box-shadow: none !important; } #navigation .menu-level-2.menu-level-2-appended > li > a { display: block !important; min-height: 40px !important; margin: 0 !important; padding: 9px 12px !important; border: 0 !important; border-radius: 7px !important; color: #666666 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 22px !important; text-decoration: none !important; white-space: normal !important; } #navigation .appended-category a:focus-visible { outline: 2px solid #f19210 !important; outline-offset: -2px !important; } #navigation .appended-category > a > .submenu-arrow { position: absolute !important; display: block !important; top: 50% !important; right: 0 !important; bottom: auto !important; left: auto !important; width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #8a8a8a !important; font-size: 0 !important; transform: translateY(-50%) !important; } #navigation .appended-category > a > .submenu-arrow::before, #navigation .appended-category > a > .submenu-arrow::after { content: "" !important; position: absolute !important; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: currentColor !important; font-size: 0 !important; transform: translate(-50%, -50%) !important; transform-origin: center !important; transition: transform 0.18s ease !important; } #navigation .appended-category > a > .submenu-arrow::before { top: 50% !important; left: 50% !important; width: 10px !important; height: 1px !important; } #navigation .appended-category > a > .submenu-arrow::after { top: 50% !important; left: 50% !important; width: 1px !important; height: 10px !important; } #navigation .appended-category > a[aria-expanded="true"] > .submenu-arrow::after { transform: translate(-50%, -50%) scaleY(0) !important; } } /* BREADCRUMBS / QUIET SLASH SEPARATORS */ .breadcrumbs { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 4px 0 !important; height: auto !important; min-height: 0 !important; max-width: 100% !important; padding: 12px 0 !important; color: #787878 !important; font-size: 12px !important; line-height: 1.6 !important; white-space: normal !important; } .breadcrumbs > span[itemprop="itemListElement"] { display: inline-flex !important; align-items: baseline !important; align-self: baseline !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; white-space: normal !important; } .breadcrumbs a { display: inline !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #787878 !important; font: inherit !important; text-decoration: none !important; white-space: normal !important; overflow-wrap: anywhere !important; transition: color 0.18s ease !important; } .breadcrumbs a::after { content: none !important; display: none !important; } .breadcrumbs .navigation-bullet { display: inline-block !important; flex: 0 0 auto !important; margin: 0 9px !important; padding: 0 !important; color: #c4c4c4 !important; font-family: inherit !important; font-size: inherit !important; font-weight: 400 !important; line-height: inherit !important; } .breadcrumbs > span[itemprop="itemListElement"] > span[itemprop="name"] { display: inline !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; color: #303030 !important; font-weight: 500 !important; white-space: normal !important; overflow-wrap: anywhere !important; } .breadcrumbs a:hover { color: #303030 !important; } .breadcrumbs a:focus-visible { outline: 2px solid #f19210 !important; outline-offset: 3px !important; border-radius: 3px !important; } @media (max-width: 767px) { .breadcrumbs { box-sizing: border-box !important; padding: 10px 20px !important; } .breadcrumbs .navigation-bullet { margin-left: 7px !important; margin-right: 7px !important; } } /* MY ORDER – NATIVE SHADOW COMPONENT THEME */ body.in-moje-objednavka .orderWithdraw__container { box-sizing: border-box !important; width: 100% !important; max-width: 1120px !important; margin: 28px auto 40px !important; padding: 0 36px !important; } body.in-moje-objednavka #order-withdraw.orderWithdraw--page { /* These names come from the component's adopted stylesheet. */ --Text-Font: var(--hl-button-font) !important; --Text-Body_Base: var(--hl-button-main-font-size) !important; --Text-Body_Small: 13px !important; --Line-Height-Body_Base: 1.55 !important; --Line-Height-Body_Small: 1.5 !important; --Letter-Spacing-Body_Base: 0px !important; --Letter-Spacing-Body_Small: 0px !important; --Letter-Spacing-Body_Large: 0px !important; --Global-Foregrounds-Content-Primary: #303030 !important; --Global-Foregrounds-Content-Secondary: #666666 !important; --Global-Foregrounds-Content-Tertiary: #787878 !important; --Global-Foregrounds-Content-Link: #303030 !important; --Global-Foregrounds-Borders-Primary: #d6d6d6 !important; --Global-Foregrounds-Borders-Secondary: #e8e8e8 !important; --Global-Foregrounds-Borders-Activated: #f19210 !important; --Global-Backgrounds-Content-Primary: #ffffff !important; --Global-Backgrounds-Content-Secondary: #f7f7f7 !important; --Global-Backgrounds-Selected: #fff4e4 !important; --Global-Backgrounds-Button-Primary: var(--hl-button-primary-bg) !important; --Global-Backgrounds-Button-Primary_Hover: var(--hl-button-primary-hover) !important; --Global-Foregrounds-Button-Primary: var(--hl-button-primary-text) !important; --Global-Foregrounds-Button-Primary_Hover: var(--hl-button-primary-text) !important; --Corner-Radius: var(--hl-button-radius) !important; --Spacing-Gap_M: 15px !important; --Corner-Radius_Bigger: 14px !important; --Spacing-Gap_XL: 24px !important; box-sizing: border-box !important; min-width: 0 !important; border: 0 !important; border-radius: 20px !important; background-color: transparent !important; } @media (max-width: 991px) { body.in-moje-objednavka #order-withdraw.orderWithdraw--page { /* Keep text inputs at 16px on phones and tablets. */ --Text-Body_Base: 16px !important; --Text-Body_Small: 14px !important; --Spacing-Gap_XL: 20px !important; --Corner-Radius_Bigger: 12px !important; } } @media (max-width: 767px) { body.in-moje-objednavka .orderWithdraw__container { margin: 16px auto 28px !important; padding: 0 20px !important; } body.in-moje-objednavka #order-withdraw.orderWithdraw--page { border-radius: 16px !important; } } /* CATEGORY FILTERS — active v7 component; markup remains native Shoptet. */ #filters .filter-sections .filter-section.hl-filter-collapsible-v7 > h4.hl-filter-toggle-v7 { position: relative !important; cursor: pointer !important; user-select: none !important; padding-right: 32px !important; outline: none !important; } #filters .filter-sections .filter-section.hl-filter-collapsible-v7 > h4.hl-filter-toggle-v7::after { content: "" !important; position: absolute !important; top: 50% !important; right: 4px !important; width: 7px !important; height: 7px !important; border-right: 1.6px solid #555 !important; border-bottom: 1.6px solid #555 !important; transform: translateY(-65%) rotate(45deg) !important; transform-origin: center !important; transition: transform 0.2s ease, border-color 0.2s ease !important; } #filters .filter-sections .filter-section.hl-filter-collapsible-v7.is-open > h4.hl-filter-toggle-v7::after { transform: translateY(-35%) rotate(225deg) !important; } #filters .filter-sections .filter-section.hl-filter-collapsible-v7 > h4.hl-filter-toggle-v7:hover::after, #filters .filter-sections .filter-section.hl-filter-collapsible-v7 > h4.hl-filter-toggle-v7:focus::after { border-color: #f19210 !important; } #filters .filter-sections .filter-section.hl-filter-collapsible-v7:not(.is-open) > *:not(h4) { display: none !important; } /* Native keyboard-accessible scroll button; preserve the existing circle geometry. */ /* HOCKEYLAND — compact category navigation, scoped to the content listing. */ body.type-category #content ul.subcategories { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 10px !important; width: 100% !important; margin: 22px 0 0 !important; padding: 0 !important; list-style: none !important; } body.type-category #content ul.subcategories::before, body.type-category #content ul.subcategories::after { content: none !important; display: none !important; } body.type-category #content ul.subcategories > li { display: block !important; float: none !important; width: auto !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; } body.type-category #content ul.subcategories > li > a { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; box-sizing: border-box !important; width: 100% !important; height: 100% !important; min-height: 62px !important; padding: 11px 15px !important; margin: 0 !important; background: #f5f5f5 !important; border: 1px solid transparent !important; border-radius: 12px !important; color: #606060 !important; text-align: left !important; text-decoration: none !important; box-shadow: none !important; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease !important; } body.type-category #content ul.subcategories > li > a:hover { background: #fff6e9 !important; border-color: #f2d4aa !important; color: #303030 !important; } body.type-category #content ul.subcategories > li > a > .image { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 34px !important; width: 34px !important; height: 34px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } body.type-category #content ul.subcategories > li > a > .image img { display: block !important; width: 34px !important; height: 34px !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } body.type-category #content ul.subcategories > li > a > .text { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.4 !important; text-align: left !important; white-space: normal !important; overflow-wrap: break-word !important; } body.type-category #content ul.subcategories > li > a::before, body.type-category #content ul.subcategories > li > a > .text::after { content: none !important; display: none !important; } body.type-category #content ul.subcategories > li > a::after { content: "" !important; position: static !important; display: block !important; flex: 0 0 6px !important; width: 6px !important; height: 6px !important; margin: 0 2px 0 auto !important; padding: 0 !important; border: 0 !important; border-top: 1px solid currentColor !important; border-right: 1px solid currentColor !important; background: none !important; transform: rotate(45deg) !important; opacity: 0.7 !important; } @media (max-width: 991px) { body.type-category #content ul.subcategories { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 479px) { body.type-category #content ul.subcategories { gap: 8px !important; margin-top: 18px !important; } body.type-category #content ul.subcategories > li > a { min-height: 62px !important; gap: 9px !important; padding: 11px 10px !important; border-radius: 10px !important; } body.type-category #content ul.subcategories > li > a > .image { display: none !important; } body.type-category #content ul.subcategories > li > a > .text { font-size: 12px !important; line-height: 1.42 !important; } } /* HOCKEYLAND — bestsellers keep Shoptet's native expansion behaviour. */ body.type-category #content .products-top-wrapper { margin-top: 42px !important; margin-bottom: 42px !important; padding: 0 !important; } body.type-category #content .products-top-wrapper .products-top-header { margin: 0 0 22px !important; } body.type-category #content .products-top-wrapper .toggle-top-products.btn:not(:where(.loadMore__button)) { display: block !important; width: fit-content !important; max-width: 100% !important; min-width: 0 !important; min-height: 38px !important; height: auto !important; margin: 14px auto 0 !important; padding: 8px 4px !important; box-shadow: none !important; font-family: var(--hl-button-font) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 20px !important; text-align: center !important; text-decoration-line: underline !important; text-decoration-color: #c5c5c5 !important; text-underline-offset: 4px !important; text-transform: none !important; white-space: normal !important; cursor: pointer !important; } body.type-category #content .products-top-wrapper .toggle-top-products.btn:hover:not(:where(.loadMore__button)) { text-decoration-color: #f19210 !important; } body.type-category #content .products-top-wrapper .toggle-top-products::before, body.type-category #content .products-top-wrapper .toggle-top-products::after { content: none !important; display: none !important; } @media (max-width: 767px) { body.type-category #content .products-top-wrapper { margin-top: 30px !important; margin-bottom: 32px !important; } body.type-category #content .products-top-wrapper .products-top-header { margin-bottom: 18px !important; } body.type-category #content .products-top-wrapper .toggle-top-products.btn:not(:where(.loadMore__button)) { min-height: 44px !important; margin-top: 8px !important; padding-top: 12px !important; padding-bottom: 12px !important; } } /* HOCKEYLAND — regular product cards; inline rankings and cart widgets excluded. Row heights are measured from real content by initProductCardAlignment(). */ :is(.products, .product-list).hl-card-grid > .product.hl-card { display: flex !important; align-items: stretch !important; min-width: 0 !important; } :is(.products, .product-list).hl-card-grid > .product.hl-card > .p { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; padding-bottom: 20px !important; } .hl-card-grid > .hl-card > .p > a.image { position: relative !important; display: block !important; flex: 0 0 auto !important; box-sizing: content-box !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: var(--hl-card-flags-space, 0px) 0 0 !important; transition: opacity 160ms ease !important; } .hl-card-grid > .hl-card > .p > a.image > img { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; aspect-ratio: 1 !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; } .hl-card-grid > .hl-card > .p > a.image > .flags-default { position: absolute !important; top: 10px !important; right: 10px !important; left: 10px !important; bottom: auto !important; display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 4px !important; width: auto !important; height: auto !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; transform: none !important; } .hl-card-grid > .hl-card > .p > a.image > .flags-default > .flag { max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; } .hl-card-grid > .hl-card > .p > .p-in { display: block !important; flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; padding: 14px 0 0 !important; } .hl-card-grid > .hl-card > .p > .p-in > .p-in-in { box-sizing: border-box !important; width: 100% !important; height: auto !important; min-height: var(--hl-card-info-height, 0px) !important; margin: 0 !important; padding: 0 !important; } .hl-card-grid > .hl-card > .p .p-in .name { display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 16px !important; font-size: 14px !important; line-height: 1.4 !important; text-align: left !important; white-space: normal !important; overflow: visible !important; -webkit-line-clamp: unset !important; } .hl-card-grid > .hl-card > .p .p-in .availability { height: auto !important; min-height: 0 !important; margin: 9px 0 0 !important; padding: 0 16px !important; text-align: left !important; line-height: 1.4 !important; } .hl-card-grid > .hl-card > .p .p-in .p-bottom, .hl-card-grid > .hl-card > .p .p-in .p-bottom > div { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } .hl-card-grid > .hl-card > .p .p-in .prices { box-sizing: border-box !important; display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; align-content: flex-start !important; justify-content: flex-start !important; gap: 2px 6px !important; width: 100% !important; height: auto !important; min-height: var(--hl-card-price-height, 0px) !important; margin: 4px 0 0 !important; padding: 0 16px !important; white-space: normal !important; } .hl-card-grid > .hl-card > .p .p-in .p-tools { box-sizing: border-box !important; display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: var(--hl-card-tools-height, 0px) !important; margin: 0 !important; padding: 14px 16px 0 !important; } .hl-card-grid > .hl-card > .p .p-in .p-tools form { max-width: 100% !important; min-width: 0 !important; margin: 0 !important; } .hl-card-grid > .hl-card > .p .p-in .p-tools .btn:not(:where(.loadMore__button)) { box-sizing: border-box !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; white-space: normal !important; } .hl-card-grid > .hl-card > .p .p-in .p-desc, .hl-card-grid > .hl-card > .p .p-in p.p-desc { box-sizing: border-box !important; width: 100% !important; margin: 14px 0 0 !important; padding: 0 16px !important; color: #787878 !important; text-align: left !important; } @media (max-width: 767px) { .hl-card-grid > .hl-card > .p { padding-bottom: 16px !important; } .hl-card-grid > .hl-card > .p .p-in .name { font-size: 13px !important; } .hl-card-grid > .hl-card > .p .p-in :is(.name, .availability, .prices, .p-tools, .p-desc) { padding-left: 12px !important; padding-right: 12px !important; } .hl-card-grid > .hl-card > .p .p-in .price-final { font-size: 16px !important; } .hl-card-grid > .hl-card > .p .p-in .hl-card-original-price { font-size: 12px !important; } .hl-card-grid > .hl-card > .p .p-in .p-tools .btn:not(:where(.loadMore__button)) { padding-left: 13px !important; padding-right: 13px !important; font-size: 12.5px !important; } } /* HOCKEYLAND — newsletter, one treatment for native sidebar and footer forms. */ body.type-category #content .subcategories > li > a:focus-visible, body.type-category #content .toggle-top-products:focus-visible { outline: 2px solid #f19210 !important; outline-offset: 3px !important; } @media (prefers-reduced-motion: reduce) { body.type-category #content ul.subcategories > li > a { transition: none !important; } } /* Header colour is shared by the normal and fixed state. */ #header, #header.hl-sticky { background: #e6e6e6 !important; } #header > .container.navigation-wrapper, #header.hl-sticky > .container.navigation-wrapper, #header .navigation-buttons { background: transparent !important; } @media (min-width: 992px) { #header #navigation, #header .navigation-in { background: transparent !important; } } /* Remove both the former floating control and Shoptet's listing-only link. */ #scrollTopBtn, .listingControls .goToTop { display: none !important; } /* These links are empty in native markup. Supply a visible CSS chevron. */ .pagination .pagination__link--next, .pagination .pagination__link--prev { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; } .pagination .pagination__link--next::before, .pagination .pagination__link--prev::before { content: "" !important; display: block !important; position: static !important; width: 8px !important; height: 8px !important; margin: 0 3px 0 0 !important; padding: 0 !important; border: 0 !important; border-top: 1.5px solid currentColor !important; border-right: 1.5px solid currentColor !important; background: none !important; transform: rotate(45deg) !important; } .pagination .pagination__link--prev::before { margin: 0 0 0 3px !important; transform: rotate(-135deg) !important; } .pagination .pagination__link--next::after, .pagination .pagination__link--prev::after { content: none !important; } /* Keep the existing order form dimensions; remove only its grey surrounding panel. */ body.in-moje-objednavka #content-wrapper, body.in-moje-objednavka .orderWithdraw__container, body.in-moje-objednavka #order-withdraw.orderWithdraw--page { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } body.in-moje-objednavka #order-withdraw.orderWithdraw--page::before { background: transparent !important; } /* Category thumbnails, all listing categories. */ body.type-category #content ul.subcategories > li > a { background: #ededed !important; min-height: 76px !important; } body.type-category #content ul.subcategories > li > a:hover { background: #e3e3e3 !important; border-color: #d5d5d5 !important; } body.type-category #content ul.subcategories > li > a > .image { display: flex !important; flex-basis: 48px !important; width: 48px !important; height: 48px !important; } body.type-category #content ul.subcategories > li > a > .image img { width: 48px !important; height: 48px !important; } @media (max-width: 479px) { body.type-category #content ul.subcategories > li > a { min-height: 70px !important; padding: 10px !important; gap: 8px !important; } body.type-category #content ul.subcategories > li > a > .image { display: flex !important; flex: 0 0 32px !important; width: 32px !important; height: 32px !important; } body.type-category #content ul.subcategories > li > a > .image img { width: 32px !important; height: 32px !important; } } /* Quiet native newsletter cards, no promotional colour block. */ :is(.box-newsletter, .footer-newsletter).hl-newsletter { box-sizing: border-box !important; width: 100% !important; margin: 22px 0 !important; padding: 22px 20px !important; background: #f6f6f6 !important; border: 1px solid #e7e7e7 !important; border-radius: 14px !important; box-shadow: none !important; color: #303030 !important; } .hl-newsletter .newsletter-header { margin: 0 !important; padding: 0 !important; } .hl-newsletter .newsletter-header::before { content: "" !important; display: block !important; width: 27px !important; height: 25px !important; margin: 0 0 14px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='m3 6 9 7 9-7'/%3E%3C/svg%3E") center/contain no-repeat !important; } .hl-newsletter .hl-newsletter-kicker { display: none !important; } .hl-newsletter .newsletter-header :is(h3, .topic) { margin: 0 0 10px !important; padding: 0 !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #303030 !important; text-align: left !important; } .hl-newsletter .newsletter-header p { font-size: 12.5px !important; line-height: 1.65 !important; color: #666 !important; margin: 0 0 18px !important; } .hl-newsletter :is(#formNewsletterWidget, #formNewsletter), .hl-newsletter fieldset { display: block !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } .hl-newsletter :is(#formNewsletterWidget, #formNewsletter) .form-group { width: 100% !important; margin: 0 0 11px !important; } .hl-newsletter :is(#formNewsletterWidget, #formNewsletter) label[for] { display: block !important; position: static !important; margin: 0 0 7px !important; font-size: 12px !important; line-height: 1.4 !important; color: #666 !important; } .hl-newsletter :is(#formNewsletterWidget, #formNewsletter) input[type="email"] { box-sizing: border-box !important; width: 100% !important; height: 46px !important; border: 1px solid #d5d5d5 !important; border-radius: 10px !important; background: #fff !important; padding: 11px 13px !important; font-size: 14px !important; box-shadow: none !important; } .hl-newsletter :is(#formNewsletterWidget, #formNewsletter) button[type="submit"].btn:not(:where(.loadMore__button)) { position: static !important; width: 100% !important; min-height: 44px !important; height: auto !important; margin: 0 !important; padding: 10px 16px !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important; } .hl-newsletter :is(#formNewsletterWidget, #formNewsletter) button[type="submit"]::before, .hl-newsletter :is(#formNewsletterWidget, #formNewsletter) button[type="submit"]::after { content: none !important; } @media (max-width: 768px) { .container.footer-newsletter.hl-newsletter { width: calc(100% - 32px) !important; max-width: 560px !important; margin: 26px auto !important; } .hl-newsletter :is(#formNewsletterWidget, #formNewsletter) input[type="email"] { font-size: 16px !important; } } /* Search uses the live catalogue endpoint, with quiet grouped results. */ .hl-smart-search .search-whisperer { display: none !important; } .search-window-in .recommended-products, .search-window-in .search > h3 { display: none !important; } .content-window.search-window { overflow-y: auto !important; overscroll-behavior: contain; } .search-window-in { box-sizing: border-box !important; position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: min(960px, 100%) !important; max-width: 960px !important; margin: 0 auto !important; padding-left: 28px !important; padding-right: 28px !important; } .search-window-in { height: auto !important; min-height: 100% !important; overflow: visible !important; padding-top: 28px !important; padding-bottom: 40px !important; } .search-window-in > .container { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .search-window-in > button.btn.toggle-window-arr.toggle-window[data-target="search"]:not(:where(.loadMore__button)) { position: static !important; align-self: flex-start !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 42px !important; margin: 0 0 24px !important; padding: 9px 16px !important; font: 400 13px/1.5 Poppins,sans-serif !important; text-transform: none !important; box-shadow: none !important; } .search-window-in > button.btn.toggle-window-arr.toggle-window[data-target="search"] > span { color: inherit !important; font: inherit !important; } .search-window-in .search { position: static !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; left: auto !important; transform: none !important; } .search-window-in #formSearchForm { width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } .search-window-in .search > h2 { margin: 0 0 22px !important; font-size: 24px !important; line-height: 1.4 !important; } .hl-smart-search input::placeholder { opacity: 1; transition: opacity 160ms ease; } .hl-smart-search input.hl-placeholder-fade::placeholder { opacity: 0; } .hl-search-panel { display: grid; box-sizing: border-box; max-width: 100%; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); column-gap: 30px; row-gap: 24px; width: 100%; margin: 28px auto 0; align-items: start; text-align: left; } .hl-search-panel h3 { margin: 0 0 12px !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 500 !important; color: #666 !important; } .hl-search-panel ul { padding: 0 !important; margin: 0 !important; list-style: none !important; } .hl-search-panel li { margin: 0 !important; padding: 0 !important; } .hl-search-links { min-width: 0; } .hl-search-link { display: block; padding: 11px 0; border-bottom: 1px solid #eee; color: #303030; font-size: 13px; line-height: 1.5; text-decoration: none; } .hl-search-link:hover { color: #666; } .hl-search-products { grid-column: 2; grid-row: 1 / span 3; min-width: 0; } .hl-search-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 13px 10px; min-height: 78px; border: 1px solid #ececec; margin-bottom: 8px; border-radius: 10px; color: #303030; text-decoration: none; } .hl-search-item:hover { background: #f5f5f5; color: #303030; } .hl-search-item img { display: block; flex: 0 0 56px; width: 56px; height: 56px; object-fit: contain; } .hl-search-item-info { display: block; min-width: 0; flex: 1; } .hl-search-item-name { display: block; font-size: 13px; line-height: 1.45; } .hl-search-item-stock { display: block; margin-top: 5px; color: #647565; font-size: 11px; } .hl-search-item-price { flex: 0 0 auto; max-width: 110px; font-size: 13px; font-weight: 600; text-align: right; } .hl-search-recent { display: flex; flex-wrap: wrap; align-content: start; align-items: center; gap: 8px; } .hl-search-recent button { font: inherit; font-size: 12px; padding: 7px 11px; } .hl-search-recent .hl-search-clear { padding-left: 0; font-size: 11px; text-decoration: underline; } .hl-search-all { grid-column: 1/-1; justify-self: center; padding: 10px; color: #505050; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; } .hl-search-empty { grid-column: 1/-1; margin: 0; color: #666; font-size: 13px; line-height: 1.6; } @media(max-width:767px) { .search-window-in { padding-left: 20px !important; padding-right: 20px !important; } .hl-search-panel { grid-template-columns: minmax(0, 1fr); gap: 22px; } .hl-search-products { grid-column: auto; grid-row: auto; } .hl-search-item { grid-template-columns: 48px minmax(0,1fr); padding: 12px; gap: 3px 12px; } .hl-search-item img { grid-column: 1; grid-row: 1/span 2; } .hl-search-item-info { grid-column: 2; } .hl-search-item-price { grid-column: 2; text-align: left; max-width: none; } .hl-search-item img { width: 48px; height: 48px; flex-basis: 48px; } .hl-search-item-name, .hl-search-item-price { font-size: 12px; } .hl-search-item-price { max-width: 80px; } .hl-search-links ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 15px; } .hl-search-link { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .hl-smart-search input::placeholder { transition: none; } } /* Native global notices plus cart confirmation share one compact stack. */ #hl-notices { position: fixed !important; z-index: 10020 !important; left: max(16px, env(safe-area-inset-left)) !important; right: auto !important; top: auto !important; bottom: calc(20px + env(safe-area-inset-bottom)) !important; width: min(360px, calc(100vw - 32px)) !important; display: flex; flex-direction: column; gap: 9px; pointer-events: none; } #hl-notices .messages { position: static !important; inset: auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; } #hl-notices :is(.msg, .hl-notice) { position: relative !important; box-sizing: border-box !important; display: block; width: 100% !important; padding: 13px 42px 13px 15px !important; margin: 0 0 8px !important; border: 1px solid #dfe3e5 !important; border-radius: 11px !important; background: #f4f6f7 !important; color: #39454b !important; box-shadow: none !important; text-align: left !important; font: 400 13px/1.55 Poppins, sans-serif !important; pointer-events: auto; } #hl-notices :is(.msg-success, .hl-notice--success) { border-color: #cce2d1 !important; background: #edf7ef !important; color: #285937 !important; } #hl-notices :is(.msg-error, .hl-notice--error) { border-color: #edd1d1 !important; background: #fbf0f0 !important; color: #873c3c !important; } #hl-notices :is(.msg-warning, .hl-notice--warning) { border-color: #e8dfc7 !important; background: #faf7ee !important; color: #71603b !important; } #hl-notices :is(.msg)::before { display: none !important; } #hl-notices :is(.close, .hl-notice-close) { position: absolute !important; right: 5px !important; top: 6px !important; display: flex !important; align-items: center; justify-content: center; width: 30px !important; height: 30px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important; font: 24px/1 sans-serif !important; opacity: 0.7; cursor: pointer; } #hl-notices :is(.close, .hl-notice-close):hover { opacity: 1; background: rgb(0 0 0 / 4%) !important; } body.hl-sticky-cart-visible #hl-notices { bottom: calc(96px + env(safe-area-inset-bottom)) !important; } /* Native cart and checkout: one quiet visual system, original forms and states. */ :is(body.hl-checkout,body.ordering-process,#cart-widget) #content-wrapper { padding-top: 30px !important; padding-bottom: 48px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #content { width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #content-wrapper > .content-wrapper-in { display: block !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #content-wrapper .sidebar-left { display: block !important; float: none !important; width: 100% !important; padding: 0 !important; margin: 0 0 22px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #content-wrapper .sidebar-left > .btn:not(:where(.loadMore__button)) { padding: 10px 18px !important; box-shadow: none !important; font-size: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; min-height: 44px !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #content > .content-inner { width: 100% !important; padding: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #content > h1 { margin: 0 0 24px !important; font-size: clamp(24px, 2.4vw, 32px) !important; font-weight: 600 !important; text-align: left !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(#cart-wrapper, .cart-inner, #checkoutContent, #order-form) { box-sizing: border-box !important; max-width: 100% !important; min-width: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-inner { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header { counter-reset: checkout-step; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; width: 100% !important; padding: 0 0 22px !important; margin: 0 0 28px !important; border: 0 !important; border-bottom: 1px solid #e7e7e7 !important; background: transparent !important; box-shadow: none !important; list-style: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header::before, :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header::after, :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step::after { content: none !important; display: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step { counter-increment: checkout-step; display: flex !important; align-items: center !important; gap: 10px !important; float: none !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #888 !important; box-shadow: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step::before { content: counter(checkout-step) !important; position: static !important; display: flex !important; flex: 0 0 30px !important; align-items: center; justify-content: center; width: 30px !important; height: 30px !important; margin: 0 !important; border: 1px solid #dedede !important; border-radius: 50% !important; background: #f7f7f7 !important; color: #888 !important; font: 500 12px/1 Poppins, sans-serif !important; box-shadow: none !important; transform: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step.active { color: #303030 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step.active::before { background: #303030 !important; border-color: #303030 !important; color: #fff !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step.completed { color: #555 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step :is(a, strong, span) { position: static !important; display: inline !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; color: inherit !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.45 !important; text-transform: none !important; text-decoration: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step :is(a, strong)::before, :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step :is(a, strong)::after { content: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step span::before, :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step span::after { content: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(.co-box, .box-bg-default, .price-wrapper) { background: #fff !important; border: 1px solid #e4e4e4 !important; border-radius: 12px !important; box-shadow: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(.co-box, .box-bg-default) { box-sizing: border-box !important; float: none !important; width: 100% !important; padding: 24px !important; margin: 0 !important; min-width: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(.co-box, .box-bg-default) :is(.co-box, .box-bg-default) { padding: 0 !important; border: 0 !important; border-radius: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(h2, h3, h4) { color: #303030 !important; font-weight: 500 !important; line-height: 1.4 !important; text-transform: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) h2 { margin: 0 0 20px !important; font-size: 20px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) h3 { margin: 0 0 16px !important; font-size: 17px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) h4 { font-size: 15px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) h2.order-icon { padding: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) h2.order-icon::before { content: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #checkoutContent { display: grid !important; grid-template-columns: minmax(0, 1fr) 330px !important; gap: 22px !important; align-items: start !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #checkoutContent > * { min-width: 0 !important; grid-column: 1; width: auto !important; float: none !important; margin: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #checkoutContent > .order-summary { grid-column: 2; grid-row: 1 / span 3; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #select-country-payment { padding: 20px 24px !important; border: 1px solid #e4e4e4; border-radius: 12px; background: #fafafa; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .co-basic-information { padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #order-form.order-delivery-payment-form { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; justify-items: stretch !important; align-items: stretch !important; gap: 22px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #order-form.order-delivery-payment-form > input { grid-column: 1; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .shipping-billing-table { width: 100% !important; padding: 0 !important; margin: 0 !important; border: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .shipping-billing-table .radio-wrapper { position: relative !important; padding: 0 !important; margin: 0 0 9px !important; border: 1px solid #e1e1e1 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .shipping-billing-table .radio-wrapper:last-child { margin-bottom: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .shipping-billing-table .radio-wrapper.active { border-color: #909990 !important; background: #f5f8f5 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .shipping-billing-table .radio-wrapper.inactive-child { opacity: 0.48 !important; background: #f7f7f7 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .payment-info { flex: 1 1 190px !important; min-width: 0 !important; padding: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .shipping-billing-name { font-weight: 500 !important; font-size: 13px !important; text-transform: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .payment-info :is(small, .shipping-billing-description) { color: #777 !important; font-size: 11px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .payment-logo { flex: 0 0 52px !important; width: 52px !important; max-width: 52px !important; margin: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .payment-logo img { width: auto !important; max-width: 52px !important; max-height: 28px !important; object-fit: contain !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .payment-shipping-price { font-size: 13px !important; font-weight: 500 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary { position: static !important; width: auto !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary .price-wrapper { padding: 18px 0 0 !important; border: 0 !important; border-top: 1px solid #e7e7e7 !important; border-radius: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary .price-wrapper .price-label.price-primary { font-size: 15px !important; font-weight: 500 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary .price-wrapper strong.price-primary { font-size: 20px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary .price-wrapper .price-secondary { font-size: 11px !important; font-weight: 400 !important; color: #777 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #summary-box { padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary-item { padding: 12px 0 !important; border-bottom: 1px solid #eee !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary-item :is(a, span, strong) { font-size: 12px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary :is(.price-final, .price-primary) { color: #303030 !important; font-size: 21px !important; font-weight: 600 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary :is(.recapitulation-single, .recapitulation) { margin-top: 18px !important; padding-top: 14px !important; border-top: 1px solid #e7e7e7 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(.co-contact-information, .co-billing-address) .form-group:has(.form-control) { display: block !important; margin: 0 0 17px !important; padding: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(.co-contact-information, .co-billing-address, .co-box-additional) .form-group:has(.form-control) > label { position: static !important; display: block !important; float: none !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 0 7px !important; color: #555 !important; font-size: 12px !important; line-height: 1.5 !important; text-align: left !important; transform: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .form-control-wrapper { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(input, select, textarea).form-control { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-height: 46px !important; height: 46px !important; padding: 10px 13px !important; border: 1px solid #d4d4d4 !important; border-radius: 9px !important; background: #fff !important; color: #303030 !important; box-shadow: none !important; font-size: 14px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) textarea.form-control { height: auto !important; min-height: 100px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(input, select, textarea).form-control:focus { border-color: #777 !important; outline: 2px solid #777 !important; outline-offset: 3px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .form-control[disabled] { background: #f4f4f4 !important; color: #777 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .form-control.error-field { border-color: #b95656 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .phone-combined-input { width: 100% !important; max-width: none !important; align-items: center !important; gap: 8px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .phone-combined-input .js-phone-form-control.form-control { flex: 1 1 auto !important; min-width: 0 !important; padding-left: 13px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .country-flags { height: 46px !important; border-radius: 9px 0 0 9px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .co-box-additional .form-group { margin: 0 0 15px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(.consents, .co-box-additional, .company-shopping) label { color: #555 !important; font-size: 12px !important; line-height: 1.65 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #checkoutContent > .consents { padding: 0 !important; margin: -4px 0 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .next-step { grid-column: 1/-1 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 16px !important; width: 100% !important; margin: 26px 0 0 !important; padding: 22px 0 0 !important; border: 0 !important; border-top: 1px solid #e7e7e7 !important; background: transparent !important; box-shadow: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .next-step :is(.next-step-forward, #orderFormButton, #submit-order) { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; float: none !important; min-height: 48px !important; height: auto !important; margin: 0 !important; padding: 12px 24px !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; text-align: center !important; text-transform: none !important; box-shadow: none !important; transform: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(#cart-wrapper, #checkoutContent) .next-step .next-step-back { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 48px !important; height: auto !important; margin: 0 !important; font-weight: 400 !important; line-height: 1.5 !important; text-transform: none !important; box-shadow: none !important; font-size: 13px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .next-step :is(.next-step-forward, #orderFormButton, #submit-order)::before, :is(body.hl-checkout,body.ordering-process,#cart-widget) .next-step :is(.next-step-forward, #orderFormButton, #submit-order)::after { content: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #hl-checkout-payment-note { grid-column: 1/-1 !important; display: block !important; width: 100% !important; margin: -9px 0 0 !important; padding: 0 !important; color: #666 !important; font-size: 12px !important; line-height: 1.65 !important; text-align: left !important; background: transparent !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table { width: 100% !important; margin: 0 0 28px !important; border-collapse: collapse !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table tr { background: transparent !important; box-shadow: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table td { padding: 18px 12px !important; border: 0 !important; border-bottom: 1px solid #e7e7e7 !important; background: transparent !important; color: #555 !important; font-size: 13px !important; vertical-align: middle !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .cart-p-image { width: 100px !important; padding-left: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .cart-p-image img { width: 80px !important; height: 80px !important; object-fit: contain !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-name a { color: #303030 !important; font-weight: 500 !important; font-size: 14px !important; text-decoration: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-name a:hover { color: #777 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-name .show-related { color: #777 !important; font-size: 11px !important; font-weight: 400 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-total { color: #303030 !important; font-weight: 600 !important; white-space: nowrap; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .remove-item { border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #888 !important; box-shadow: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .remove-item:hover { background: #f2f2f2 !important; color: #444 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-related-product { border: 0 !important; background: #fafafa !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-related-product td { font-size: 12px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .summary.row { display: grid !important; grid-template-columns: minmax(0, 1fr) 330px !important; gap: 22px !important; margin: 24px 0 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .summary.row > div { order: 0 !important; float: none !important; width: auto !important; min-width: 0 !important; padding: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .price-wrapper { width: 100% !important; padding: 22px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .price-wrapper .price-primary { color: #303030 !important; font-size: 24px !important; font-weight: 600 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .extra { padding: 16px 0 !important; margin: 0 !important; color: #666 !important; font-size: 12px !important; background: transparent !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .price-range { background: #e7e7e7 !important; border-radius: 4px !important; box-shadow: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .price-range > div { background: #a3b2a5 !important; box-shadow: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .discount-coupon .btn:not(:where(.loadMore__button)) { box-shadow: none !important; } /* Paint-only hover transitions. No geometry animation or scroll resizes. */ a, button, input[type="button"], [role="button"], .hl-search-item, .hl-search-link, .hl-notice-close, #navigation a, #navigation li > a, .navigation-buttons a[data-target="search"], .navigation-buttons a[data-target="search"]::before, .navigation-buttons a[data-target="search"]::after, .navigation-buttons .top-nav-button-login, .navigation-buttons .top-nav-button-login::before, .navigation-buttons .top-nav-button-login::after, .navigation-buttons a[data-testid="headerCart"], .navigation-buttons a[data-testid="headerCart"]::before, .navigation-buttons a[data-testid="headerCart"]::after, .navigation-buttons a[data-testid="headerCart"] i[data-testid="headerCartCount"], #formNewsletterWidget button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button)), .box-newsletter button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button)), .newsletter-widget button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button)), .container.footer-newsletter button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button)), #carousel .carousel-control.left::after, #carousel .carousel-control.right::after, #carousel-dots button, .search-form.compact-form button[data-testid="searchBtn"], .search-form.js-search-main button[data-testid="searchBtn"], .search-form.compact-form .btn-arrow-right.btn-lg, .search-form.js-search-main .btn-arrow-right.btn-lg, #footer .custom-footer__articles ul > li > a, #footer .custom-footer__articles .hl-footer-faq-link, .site-msg.information .close, .site-msg.information .js-close-information-msg, .navigation-buttons button.top-nav-button.top-nav-button-login::before, .p-detail-tabs-wrapper .hidden-links > li:not(.active) > a, .p-detail-tabs-wrapper .hidden-links > li.active > a, .p-detail-tabs-wrapper .hidden-links > li > a.active, #navigation .navigation-in.menu > .navigationActions > li > a, #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"], #formLogin.login-form .alternative-links > a:is(*, :focus-visible, :active), #formSearchFormContent.search-form button[data-testid="searchBtn"], #formSearchFormContent.search-form .btn-arrow-right, #formSearchForm.search-form.compact-form button[data-testid="searchBtn"], #formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"], #formSearchFormContent button[data-testid="searchBtn"], #formSearchForm button[data-testid="searchBtn"], .content-window.search-window #formSearchForm button.btn.btn-default.btn-arrow-right.btn-lg[data-testid="searchBtn"]:not(:where(.loadMore__button)), .content-window-in.search-window-in #formSearchForm button.btn.btn-default.btn-arrow-right.btn-lg[data-testid="searchBtn"]:not(:where(.loadMore__button)), #formSearchForm.search-form.compact-form.js-search-main button.btn.btn-default.btn-arrow-right.btn-lg[data-testid="searchBtn"]:not(:where(.loadMore__button)), #categories .topic > a, #categories ul li > a, #categories .categories.expandable > .topic > a > .cat-trigger, #categories li.expandable > a > .cat-trigger, #navigation .menu-level-1 > li.appended-category > a, #navigation .menu-level-2.menu-level-2-appended > li > a, .breadcrumbs a, #filters .filter-sections .filter-section.hl-filter-collapsible-v7 > h4.hl-filter-toggle-v7::after, body.type-category #content ul.subcategories > li > a, #login .hl-login-close, #login .hl-login-forgot a, #login .hl-password-toggle, #login .hl-login-register a, #hl-notices :is(.close, .hl-notice-close), :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-name a, :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .remove-item { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease, filter 160ms ease, transform 160ms ease, fill 160ms ease, stroke 160ms ease, text-decoration-color 160ms ease !important; } input[type="submit"] { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease, filter 160ms ease, transform 160ms ease, fill 160ms ease, stroke 160ms ease, text-decoration-color 160ms ease !important; } .btn:not(:where(.loadMore__button)), #carousel .hl-carousel-button, .btn:not(.toggle-window):not(.btn-arrow-right):not([data-testid="searchBtn"]):not(.btn-cart):not( .btn-conversion ):is(*, :focus-visible, :active):not(:disabled):not([aria-disabled="true"]):not(:where(.loadMore__button)), #cart-widget .cart-window-in > button.toggle-window[data-target="cart"]:is(*, :focus-visible, :active):not(:disabled):not( [aria-disabled="true"] ), .btn.btn-cart:is(*, :focus-visible, :active):not(:disabled):not([aria-disabled="true"]):not(:where(.loadMore__button)), .btn.btn-conversion:is(*, :focus-visible, :active):not(:disabled):not([aria-disabled="true"]):not(:where(.loadMore__button)), .hl-sticky-cart__button:is(*, :focus-visible, :active):not(:disabled):not([aria-disabled="true"]), ul#homepage-tabs.shp-tabs > li.shp-tab:not(.active) > a, .p-detail-tabs > .shp-tab:not(.active) > .shp-tab-link, .p-detail-tabs-wrapper .p-detail-tabs > .shp-tab:not(.active) > .shp-tab-link, .p-detail-tabs-wrapper #p-detail-tabs > .shp-tab.active > .shp-tab-link, .p-detail-tabs-wrapper #p-detail-tabs > .shp-tab:not(.active) > .shp-tab-link, #category-header .listSorting__control--current, #category-header .listSorting__control:not(.listSorting__control--current), .search-window-in > button.btn.toggle-window-arr.toggle-window[data-target="search"]:is(*, :focus-visible, :active):not(:where(.loadMore__button)), body.type-category #content .products-top-wrapper .toggle-top-products.btn:not(:where(.loadMore__button)), #login #formLoginIncluded .submit-wrapper > .btn:not(:where(.loadMore__button)), .hl-newsletter :is(#formNewsletterWidget, #formNewsletter) button[type="submit"].btn:not(:where(.loadMore__button)), #login #formLoginIncluded .social-login-buttons .login-btn, .hl-search-recent button, :is(body.hl-checkout,body.ordering-process,#cart-widget) .next-step :is(.btn, #orderFormButton):not(:where(.loadMore__button)) { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease, filter 160ms ease, transform 160ms ease, fill 160ms ease, stroke 160ms ease, text-decoration-color 160ms ease !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(#cart-wrapper, #checkoutContent) .next-step .next-step-back { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease, filter 160ms ease, transform 160ms ease, fill 160ms ease, stroke 160ms ease, text-decoration-color 160ms ease !important; } @media (prefers-reduced-motion: reduce) { a, button, input[type="button"], [role="button"], .hl-search-item, .hl-search-link, .hl-notice-close, #navigation a, #navigation li > a, .navigation-buttons a[data-target="search"], .navigation-buttons a[data-target="search"]::before, .navigation-buttons a[data-target="search"]::after, .navigation-buttons .top-nav-button-login, .navigation-buttons .top-nav-button-login::before, .navigation-buttons .top-nav-button-login::after, .navigation-buttons a[data-testid="headerCart"], .navigation-buttons a[data-testid="headerCart"]::before, .navigation-buttons a[data-testid="headerCart"]::after, .navigation-buttons a[data-testid="headerCart"] i[data-testid="headerCartCount"], #formNewsletterWidget button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button)), .box-newsletter button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button)), .newsletter-widget button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button)), .container.footer-newsletter button.btn.btn-default.btn-arrow-right:not(:where(.loadMore__button)), #carousel .carousel-control.left::after, #carousel .carousel-control.right::after, #carousel-dots button, .search-form.compact-form button[data-testid="searchBtn"], .search-form.js-search-main button[data-testid="searchBtn"], .search-form.compact-form .btn-arrow-right.btn-lg, .search-form.js-search-main .btn-arrow-right.btn-lg, #footer .custom-footer__articles ul > li > a, #footer .custom-footer__articles .hl-footer-faq-link, .site-msg.information .close, .site-msg.information .js-close-information-msg, .navigation-buttons button.top-nav-button.top-nav-button-login::before, .p-detail-tabs-wrapper .hidden-links > li:not(.active) > a, .p-detail-tabs-wrapper .hidden-links > li.active > a, .p-detail-tabs-wrapper .hidden-links > li > a.active, #navigation .navigation-in.menu > .navigationActions > li > a, #navigation .navigation-in.menu > .navigationActions > li > a[data-testid="signin"], #formLogin.login-form .alternative-links > a:is(*, :focus-visible, :active), #formSearchFormContent.search-form button[data-testid="searchBtn"], #formSearchFormContent.search-form .btn-arrow-right, #formSearchForm.search-form.compact-form button[data-testid="searchBtn"], #formSearchFormContent.search-form.compact-form button[data-testid="searchBtn"], #formSearchFormContent button[data-testid="searchBtn"], #formSearchForm button[data-testid="searchBtn"], .content-window.search-window #formSearchForm button.btn.btn-default.btn-arrow-right.btn-lg[data-testid="searchBtn"]:not(:where(.loadMore__button)), .content-window-in.search-window-in #formSearchForm button.btn.btn-default.btn-arrow-right.btn-lg[data-testid="searchBtn"]:not(:where(.loadMore__button)), #formSearchForm.search-form.compact-form.js-search-main button.btn.btn-default.btn-arrow-right.btn-lg[data-testid="searchBtn"]:not(:where(.loadMore__button)), #categories .topic > a, #categories ul li > a, #categories .categories.expandable > .topic > a > .cat-trigger, #categories li.expandable > a > .cat-trigger, #navigation .menu-level-1 > li.appended-category > a, #navigation .menu-level-2.menu-level-2-appended > li > a, .breadcrumbs a, #filters .filter-sections .filter-section.hl-filter-collapsible-v7 > h4.hl-filter-toggle-v7::after, body.type-category #content ul.subcategories > li > a, #login .hl-login-close, #login .hl-login-forgot a, #login .hl-password-toggle, #login .hl-login-register a, #hl-notices :is(.close, .hl-notice-close), :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-name a, :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .remove-item { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } input[type="submit"] { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .btn:not(:where(.loadMore__button)), #carousel .hl-carousel-button, .btn:not(.toggle-window):not(.btn-arrow-right):not([data-testid="searchBtn"]):not(.btn-cart):not( .btn-conversion ):is(*, :focus-visible, :active):not(:disabled):not([aria-disabled="true"]):not(:where(.loadMore__button)), #cart-widget .cart-window-in > button.toggle-window[data-target="cart"]:is(*, :focus-visible, :active):not(:disabled):not( [aria-disabled="true"] ), .btn.btn-cart:is(*, :focus-visible, :active):not(:disabled):not([aria-disabled="true"]):not(:where(.loadMore__button)), .btn.btn-conversion:is(*, :focus-visible, :active):not(:disabled):not([aria-disabled="true"]):not(:where(.loadMore__button)), .hl-sticky-cart__button:is(*, :focus-visible, :active):not(:disabled):not([aria-disabled="true"]), ul#homepage-tabs.shp-tabs > li.shp-tab:not(.active) > a, .p-detail-tabs > .shp-tab:not(.active) > .shp-tab-link, .p-detail-tabs-wrapper .p-detail-tabs > .shp-tab:not(.active) > .shp-tab-link, .p-detail-tabs-wrapper #p-detail-tabs > .shp-tab.active > .shp-tab-link, .p-detail-tabs-wrapper #p-detail-tabs > .shp-tab:not(.active) > .shp-tab-link, #category-header .listSorting__control--current, #category-header .listSorting__control:not(.listSorting__control--current), .search-window-in > button.btn.toggle-window-arr.toggle-window[data-target="search"]:is( *, :focus-visible, :active ):not(:where(.loadMore__button)), body.type-category #content .products-top-wrapper .toggle-top-products.btn:not(:where(.loadMore__button)), #login #formLoginIncluded .submit-wrapper > .btn:not(:where(.loadMore__button)), .hl-newsletter :is(#formNewsletterWidget, #formNewsletter) button[type="submit"].btn:not(:where(.loadMore__button)), #login #formLoginIncluded .social-login-buttons .login-btn, .hl-search-recent button, :is(body.hl-checkout,body.ordering-process,#cart-widget) .next-step :is(.btn, #orderFormButton):not(:where(.loadMore__button)) { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(#cart-wrapper, #checkoutContent) .next-step .next-step-back { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* Opaque full-viewport search surface; only its content has a maximum width. */ .content-window.search-window { background: #fff !important; z-index: 10010 !important; } body.search-window-visible .content-window.search-window { position: fixed !important; inset: 0 !important; width: 100% !important; max-width: none !important; height: 100dvh !important; min-height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; } .search-window-in { background: transparent !important; } .hl-search-link, .hl-search-item-info { overflow-wrap: anywhere; } .hl-search-item-price { white-space: nowrap; } /* Rounded checkout steps remain native links; selected/completed states survive. */ :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step { padding: 14px 16px !important; border: 1px solid #e5e5e5 !important; border-radius: 12px !important; background: #f7f7f7 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step.active { border-color: #cfcfcf !important; background: #fff !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step.completed { background: #f5f7f5 !important; } /* Root scroll padding also covers native scrollIntoView and field focus. */ :root { --hl-anchor-offset: 24px; } html { scroll-padding-top: var(--hl-anchor-offset); } #header { transition: box-shadow 160ms ease !important; } #header:not(.hl-sticky):not(.hl-header-raised) { box-shadow: none !important; } #header.hl-sticky, #header.hl-header-raised, #header > .navigation-wrapper.hl-header-raised { box-shadow: 0 4px 12px rgb(0 0 0 / 5.5%) !important; } @media (prefers-reduced-motion: reduce) { #header { transition: none !important; } } /* v303: inline links in prose; component links keep their existing treatment. */ #content :is( p, li, dd, blockquote, .consents, .category-description, .basic-description, .extended-description, .news-item-detail, .faq-answer ) a[href]:not(.btn, [role="button"], .image, .name, .show-related, .shp-tab-link):not( :where( .product, .products, .subcategories, .cart-header, .pagination, .paginator, .breadcrumbs, .filters, .filter-section, .cart-table, .hl-search-panel, .social-login-buttons, .social-login, .shp-tabs, .benefitBanner, .news-item, .next-step ) * ), #footer p a[href]:not(.btn, [role="button"]), #faq .hl-faq-answer a[href]:not(.btn, [role="button"]) { color: #303030 !important; text-decoration-line: underline !important; text-decoration-thickness: 1px !important; text-decoration-color: #969696 !important; text-underline-offset: 3px !important; text-decoration-skip-ink: auto; transition: color 160ms ease, text-decoration-color 160ms ease !important; } #content :is( p, li, dd, blockquote, .consents, .category-description, .basic-description, .extended-description, .news-item-detail, .faq-answer ) a[href]:not(.btn, [role="button"], .image, .name, .show-related, .shp-tab-link):not( :where( .product, .products, .subcategories, .cart-header, .pagination, .paginator, .breadcrumbs, .filters, .filter-section, .cart-table, .hl-search-panel, .social-login-buttons, .social-login, .shp-tabs, .benefitBanner, .news-item, .next-step ) * ):hover, #footer p a[href]:not(.btn, [role="button"]):hover, #faq .hl-faq-answer a[href]:not(.btn, [role="button"]):hover { color: #666 !important; text-decoration-color: currentColor !important; } #content :is( p, li, dd, blockquote, .consents, .category-description, .basic-description, .extended-description, .news-item-detail, .faq-answer ) a[href]:not(.btn, [role="button"], .image, .name, .show-related, .shp-tab-link):not( :where( .product, .products, .subcategories, .cart-header, .pagination, .paginator, .breadcrumbs, .filters, .filter-section, .cart-table, .hl-search-panel, .social-login-buttons, .social-login, .shp-tabs, .benefitBanner, .news-item, .next-step ) * ):focus-visible, #footer p a[href]:not(.btn, [role="button"]):focus-visible, #faq .hl-faq-answer a[href]:not(.btn, [role="button"]):focus-visible { outline: 2px solid #777 !important; outline-offset: 3px !important; border-radius: 2px; } .hl-search-item-flags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; } .hl-search-picks { display: flex; flex-direction: column; gap: 16px; min-width: 0; grid-column: 2; grid-row: 1 / span 3; } .hl-search-picks .hl-search-refresh { align-self: flex-start; } @media(max-width:767px) { .hl-search-picks { grid-column: 1; grid-row: auto; } } .hl-search-item-flag { display: inline-block; padding: 2px 6px; border: 1px solid #e4e4e4; border-radius: 4px; background: #f6f6f6; color: #555; font-size: 10px; line-height: 1.4; } .hl-search-panel .hl-search-refresh { display: inline-block; min-height: 40px; margin: 6px 0 0; padding: 8px 0; box-shadow: none; font: inherit; font-size: 12px; text-decoration: underline; text-decoration-color: #aaa; text-underline-offset: 3px; transition: color 160ms ease, text-decoration-color 160ms ease; cursor: pointer; } .hl-search-panel .hl-search-refresh:hover { text-decoration-color: currentColor; } @media (prefers-reduced-motion: reduce) { #content :is( p, li, dd, blockquote, .consents, .category-description, .basic-description, .extended-description, .news-item-detail, .faq-answer ) a[href], #footer p a[href], #faq .hl-faq-answer a[href] { transition: none !important; } .hl-search-panel .hl-search-refresh { transition: none !important; } } /* Homepage: only the active panel is visible, also during first paint. */ body.in-index .homepage-tabs-wrapper #tab-content > .tab-pane:not(.active), body.in-index .homepage-tabs-wrapper #tab-content > .tab-pane[hidden] { display: none !important; } body.in-index .homepage-tabs-wrapper #tab-content > .tab-pane.active:not([hidden]) { display: block !important; opacity: 1 !important; } body.in-index .homepage-tabs-wrapper .products > .product:nth-of-type(n+37) { display: none !important; } #homepage-tabs [role="tab"]:focus-visible { outline: 2px solid #777 !important; outline-offset: 3px !important; } /* Account components: one shared treatment for the dialog and all three pages. */ :root { --hl-form-height: 48px; --hl-form-radius: 10px; --hl-form-border: #d6d6d6; --hl-form-ink: #303030; --hl-form-muted: #666; } body:is(.hl-account-page, .in-login, .in-registrace, .in-zapomenute-heslo, .in-prihlaseni) { background: #fff !important; } body.hl-account-page #content-wrapper .sidebar-left { display: none !important; } .hl-account-surface, dialog#login.hl-account-dialog { box-sizing: border-box !important; border: 1px solid #e4e4e4 !important; border-radius: 16px !important; background: #fff !important; color: var(--hl-form-ink) !important; box-shadow: none !important; } dialog#login.hl-account-dialog { position: fixed !important; inset: 0 !important; margin: auto !important; height: fit-content !important; min-height: 0 !important; max-height: calc(100vh - 32px) !important; max-height: calc(100dvh - 32px) !important; padding: 0 !important; overflow: auto !important; overscroll-behavior: contain; } dialog#login::backdrop { background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #login :is(.dialog__wrapper, .dialog__content) { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } #login .dialog__header, .hl-account-card > .hl-account-header { padding: 28px 28px 0 !important; margin: 0 !important; background: transparent !important; } #login .dialog__header { padding-left: 54px !important; padding-right: 54px !important; } #login #loginHeading, body.hl-account-page #content .hl-account-header h1 { margin: 0 !important; color: #303030 !important; font-size: 24px !important; font-weight: 600 !important; line-height: 1.35 !important; text-align: center !important; } .hl-account-header p { margin: 14px 0 0 !important; font-size: 13px !important; line-height: 1.7 !important; color: #666 !important; text-align: center !important; } #login #customerLogin, .hl-account-card > :is(#register-form, #formForgottenPassword, #formLogin) { box-sizing: border-box !important; width: 100% !important; max-width: none !important; padding: 26px 28px 28px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #formLoginIncluded.hl-account-form { margin: 0 !important; padding: 0 !important; } :is(#login, #register-form, #formForgottenPassword, #formLogin) .hl-account-form, :is(#register-form, #formForgottenPassword, #formLogin) :is(fieldset, .co-box) { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #register-form > :is(.co-registration, fieldset.box) { padding: 0 0 22px !important; margin: 0 0 22px !important; border-bottom: 1px solid #ededed !important; } :is(#register-form, #formForgottenPassword, #formLogin, #formLoginIncluded) .form-group { float: none !important; width: 100% !important; margin: 0 0 18px !important; padding: 0 !important; } :is(#register-form, #formForgottenPassword, #formLogin, #formLoginIncluded) .form-control-wrapper { box-sizing: border-box !important; position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; overflow: visible !important; } :is(#register-form, #formForgottenPassword, #formLogin, #formLoginIncluded) .form-group:has(.form-control) > label { position: static !important; display: block !important; float: none !important; width: auto !important; height: auto !important; margin: 0 0 8px !important; padding: 0 !important; color: #303030 !important; background: transparent !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.5 !important; text-align: left !important; transform: none !important; } :is(#register-form, #formForgottenPassword, #formLogin, #formLoginIncluded) :is(input, select, textarea).form-control { box-sizing: border-box !important; display: block !important; width: 100% !important; max-width: 100% !important; height: var(--hl-form-height) !important; min-height: var(--hl-form-height) !important; margin: 0 !important; padding: 12px 14px !important; border: 1px solid var(--hl-form-border) !important; border-radius: var(--hl-form-radius) !important; background: #fff !important; color: #303030 !important; font: 400 14px/1.5 Poppins,sans-serif !important; box-shadow: none !important; } :is(#register-form, #formForgottenPassword, #formLogin, #formLoginIncluded) .form-control::placeholder { color: #858585 !important; opacity: 1; } :is(#register-form, #formForgottenPassword, #formLogin, #formLoginIncluded) textarea.form-control { height: auto !important; min-height: 100px !important; } :is(#register-form, #formForgottenPassword, #formLogin, #formLoginIncluded) .form-control:focus { border-color: #777 !important; outline: 2px solid #777 !important; outline-offset: 3px !important; } :is(#register-form, #formForgottenPassword, #formLogin, #formLoginIncluded) :is(.error-field, .js-error-field, [aria-invalid="true"]).form-control { border-color: #b33b36 !important; } :is(#register-form, #formForgottenPassword, #formLogin, #formLoginIncluded) .js-validator-msg { font-size: 12px !important; line-height: 1.6 !important; margin-top: 7px !important; text-align: left !important; } :is(#register-form, #formForgottenPassword, #formLogin, #formLoginIncluded) .form-control:disabled { background: #f5f5f5 !important; color: #777 !important; } :is(#register-form, #formForgottenPassword, #formLogin, #formLoginIncluded) .form-legend { margin: 0 0 16px !important; color: #777 !important; font-size: 11px !important; text-align: left !important; } #register-form h2 { font-size: 17px !important; font-weight: 500 !important; line-height: 1.4 !important; margin: 0 0 18px !important; } #register-form .captcha-image { margin-bottom: 12px !important; } #register-form .captcha-image img { display: block; max-width: 100%; height: auto; } :is(#formLogin, #formLoginIncluded) .hl-login-forgot { text-align: right !important; margin: -2px 0 20px !important; } :is(#login, #register-form, #formForgottenPassword, #formLogin) a:not(.btn):not(.login-btn) { color: #505050 !important; font-size: 13px !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-thickness: 1px !important; } :is(#login, #register-form, #formForgottenPassword, #formLogin) a:not(.btn):not(.login-btn):hover { color: #787878 !important; } :is(#register-form, #formForgottenPassword, #formLogin, #formLoginIncluded) .submit-wrapper { margin: 22px 0 0 !important; text-align: center !important; } :is(#register-form, #formForgottenPassword, #formLogin, #formLoginIncluded) .submit-wrapper > .btn.btn-primary:not(:where(.loadMore__button)) { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 48px !important; padding: 12px 20px !important; margin: 0 !important; font: 500 14px/1.5 Poppins,sans-serif !important; letter-spacing: normal !important; text-transform: none !important; box-shadow: none !important; } :is(#register-form, #formForgottenPassword, #formLogin, #formLoginIncluded) .submit-wrapper > .btn.btn-primary:is(:disabled,[aria-disabled="true"]):not(:where(.loadMore__button)) { cursor: not-allowed !important; } :is(#register-form, #formForgottenPassword, #formLogin, #formLoginIncluded) .submit-wrapper > .btn:not(:where(.loadMore__button))::before, :is(#register-form, #formForgottenPassword, #formLogin, #formLoginIncluded) .submit-wrapper > .btn:not(:where(.loadMore__button))::after { content: none !important; display: none !important; } :is(#login, #register-form, #formForgottenPassword, #formLogin) :is(a,button,input,select,textarea):focus-visible { outline: 2px solid #777 !important; outline-offset: 3px !important; } :is(#register-form, #formLogin, #formLoginIncluded) :is(.social-login, .social-login-buttons) { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; width: 100% !important; margin: 22px 0 0 !important; } :is(#register-form, #formLogin, #formLoginIncluded) :is(.social-login > h2, .social-login-buttons-divider) { grid-column: 1/-1 !important; margin: 0 0 4px !important; color: #777 !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.5 !important; text-align: center !important; } :is(#register-form, #formLogin, #formLoginIncluded) :is(.social-login, .social-login-buttons) > .form-group { width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; overflow: visible !important; } :is(#register-form, #formLogin, #formLoginIncluded) a.login-btn:not([hidden]) { box-sizing: border-box !important; display: flex; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 44px !important; padding: 9px 12px !important; margin: 0 !important; box-shadow: none !important; text-decoration: none !important; font-size: 13px !important; line-height: 1.5 !important; text-align: center !important; } :is(#register-form, #formLogin, #formLoginIncluded) a.login-btn > strong { width: auto !important; flex: 0 1 auto !important; font-weight: 500 !important; font-size: inherit !important; } :is(#register-form, #formLogin, #formLoginIncluded) .login-btn :is(.login-google-icon,.login-seznam-icon) { position: static !important; flex: 0 0 22px !important; width: 22px !important; height: 22px !important; margin: 0 !important; background-size: 20px !important; background-position: center !important; } :is(#register-form, #formLogin, #formLoginIncluded) .login-btn .login-seznam-icon { background-color: #c00 !important; border-radius: 4px; background-size: 17px !important; } #login .hl-account-footer, .hl-account-card > .hl-account-footer { padding: 20px 28px !important; margin: 0 !important; border: 0 !important; border-top: 1px solid #e7e7e7 !important; border-radius: 0 0 16px 16px !important; background: #fafafa !important; color: #303030 !important; text-align: center !important; } .hl-account-surface .hl-account-footer h3 { margin: 0 0 6px !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.4 !important; } .hl-account-surface .hl-account-footer p { margin: 0 !important; font-size: 13px !important; line-height: 1.6 !important; color: #666 !important; } .hl-account-surface .hl-account-footer a { color: #505050 !important; text-decoration: underline !important; text-underline-offset: 3px; } #login .dialog__close { position: absolute !important; top: 12px !important; right: 12px !important; left: auto !important; width: 36px !important; padding: 0 !important; z-index: 2; } #login button.hl-login-close { display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #505050 !important; box-shadow: none !important; font: 28px/1 sans-serif !important; } #login .hl-login-close:hover { background: #f1f1f1 !important; } #login .hl-login-close::before, #login .hl-login-close::after { content: none !important; } :is(#register-form, #formLogin, #formLoginIncluded) input.form-control.hl-has-password-toggle { padding-right: 52px !important; } :is(#register-form, #formLogin, #formLoginIncluded) .hl-password-toggle { position: absolute !important; inset: 4px 4px auto auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 8px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #555 !important; box-shadow: none !important; } .hl-password-toggle svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .hl-password-toggle[aria-pressed="true"] .hl-eye-slash { opacity: 0; } :is(#register-form, #formLogin, #formLoginIncluded) .hl-password-toggle:hover { background: #f2f2f2 !important; } @media(max-width:767px) { #login .dialog__header, .hl-account-card > .hl-account-header { padding-top: 24px !important; } #login #customerLogin, .hl-account-card > :is(#register-form,#formForgottenPassword,#formLogin) { padding: 24px 20px !important; } #login #loginHeading, body.hl-account-page #content .hl-account-header h1 { font-size: 22px !important; } :is(#register-form,#formForgottenPassword,#formLogin,#formLoginIncluded) :is(input,select,textarea).form-control { font-size: 16px !important; } } /* Checkout finish: layout, typography and focus across all three native steps. */ :is(body.hl-checkout,body.ordering-process,#cart-widget) #content-wrapper { padding-left: 20px !important; padding-right: 20px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .next-step .order-button-text { font: inherit !important; color: inherit !important; text-transform: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .next-step :is(.next-step-back,.next-step-forward)::before, :is(body.hl-checkout,body.ordering-process,#cart-widget) .next-step :is(.next-step-back,.next-step-forward)::after { content: none !important; display: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(a,button,input,select,textarea,[tabindex]):focus-visible:not(:where(.quantity *)) { outline: 2px solid #777 !important; outline-offset: 3px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .form-control:is(.error-field,.js-error-field,[aria-invalid="true"]) { border-color: #b33b36 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .js-validator-msg { font-size: 12px !important; line-height: 1.6 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .form-legend { margin: 0 0 16px !important; text-align: left !important; font-size: 11px !important; color: #777 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .co-contact-information .form-group--inline:first-of-type { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px 16px !important; margin-bottom: 22px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .co-contact-information .form-group--inline > p.label { width: auto !important; margin: 0 !important; padding: 0 !important; font-size: 13px !important; color: #666 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .phone-combined-input { display: flex !important; gap: 0 !important; min-height: 46px !important; height: 46px !important; border: 1px solid #d4d4d4 !important; border-radius: 9px !important; background: #fff !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .phone-combined-input .country-flags { flex: 0 0 90px !important; width: 90px !important; height: 44px !important; margin: 0 !important; border: 0 !important; border-right: 1px solid #e5e5e5 !important; background: transparent !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .phone-combined-input input.js-phone-form-control.form-control { width: 0 !important; height: 44px !important; min-height: 44px !important; border: 0 !important; background: transparent !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .phone-combined-input:has(input:is(.error-field,.js-error-field,[aria-invalid="true"])) { border-color: #b33b36 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary .price-label.price-primary { font-size: 14px !important; font-weight: 500 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .price-wrapper > .price-primary > span[data-testid] { font: inherit !important; color: inherit !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-inner > h2.h4:has(+ .summary) { display: none !important; } body.in-krok-1 #checkoutContent > .order-summary { grid-row: 1 / span 2; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .consents label { overflow-wrap: anywhere; } /* One marker for the whole storefront. The dot and ring are painted on ONE pseudo-element, so independent native ::after offsets cannot separate them. */ body input:is([type="checkbox"],[type="radio"]):has(+ label) { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; clip-path: inset(50%) !important; pointer-events: none !important; } body input:is([type="checkbox"],[type="radio"]) + label { position: relative !important; display: block !important; box-sizing: border-box !important; min-height: 36px !important; padding: 7px 0 7px 30px !important; margin-left: 0 !important; line-height: 1.6 !important; cursor: pointer !important; touch-action: manipulation; } body input:is([type="checkbox"],[type="radio"]) + label::before { content: "" !important; display: block !important; position: absolute !important; box-sizing: border-box !important; width: 20px !important; height: 20px !important; min-width: 20px !important; left: 0 !important; right: auto !important; top: 50% !important; bottom: auto !important; margin: 0 !important; padding: 0 !important; border: 1px solid #999 !important; border-radius: 50% !important; background: #fff !important; background-origin: border-box !important; background-position: center !important; background-repeat: no-repeat !important; box-shadow: none !important; transform: translateY(-50%) !important; transition: border-color 160ms ease !important; } body input:is([type="checkbox"],[type="radio"]):checked + label::before { border-color: #555 !important; background: radial-gradient(circle at center, #303030 0 4px, transparent 4px) #fff !important; } body input:is([type="checkbox"],[type="radio"]) + label::after, body input:is([type="checkbox"],[type="radio"])::before, body input:is([type="checkbox"],[type="radio"])::after { content: none !important; display: none !important; } body input:is([type="checkbox"],[type="radio"]):focus-visible + label::before { outline: 2px solid #777 !important; outline-offset: 3px !important; } body input:is([type="checkbox"],[type="radio"]):is(.error-field,.js-error-field,[aria-invalid="true"]) + label::before { border-color: #b33b36 !important; } body input:is([type="checkbox"],[type="radio"]):disabled + label { color: #888 !important; cursor: not-allowed !important; } body input:is([type="checkbox"],[type="radio"]):disabled + label::before { border-color: #ccc !important; background: #f7f7f7 !important; } body input:is([type="checkbox"],[type="radio"]):disabled:checked + label::before { background: radial-gradient(circle at center, #aaa 0 4px, transparent 4px) #f7f7f7 !important; } /* Keep controls without a separate adjacent label visible and operable too. */ body input:is([type="checkbox"],[type="radio"]):not(:has(+ label)) { appearance: none !important; -webkit-appearance: none !important; position: relative !important; inset: auto !important; display: inline-block !important; width: 20px !important; height: 20px !important; min-width: 20px !important; opacity: 1 !important; clip-path: none !important; margin: 0 8px 0 0 !important; padding: 0 !important; border: 1px solid #999 !important; border-radius: 50% !important; background: #fff !important; vertical-align: middle; pointer-events: auto !important; } body input:is([type="checkbox"],[type="radio"]):not(:has(+ label)):checked { background: radial-gradient(circle at center, #303030 0 4px, transparent 4px) #fff !important; } body input:is([type="checkbox"],[type="radio"]):not(:has(+ label)):focus-visible { outline: 2px solid #777 !important; outline-offset: 3px !important; } body input:is([type="checkbox"],[type="radio"]):not(:has(+ label)):disabled { border-color: #ccc !important; background: #f7f7f7 !important; cursor: not-allowed !important; } body input:is([type="checkbox"],[type="radio"]):not(:has(+ label)):disabled:checked { background: radial-gradient(circle at center, #aaa 0 4px, transparent 4px) #f7f7f7 !important; } /* Shipping/payment labels retain their native input associations and row layout. */ body.ordering-process .shipping-billing-table .radio-wrapper > label { position: relative !important; display: grid !important; grid-template-columns: minmax(0,1fr) 52px auto !important; gap: 12px !important; padding: 16px 16px 16px 48px !important; min-height: 70px !important; } body.ordering-process .shipping-billing-table .radio-wrapper > label::before { left: 16px !important; } body.ordering-process .shipping-billing-table .payment-info { grid-column: 1 !important; width: auto !important; flex: none !important; } body.ordering-process .shipping-billing-table .payment-logo { grid-column: 2 !important; justify-self: center; } body.ordering-process .shipping-billing-table .payment-shipping-price { grid-column: 3 !important; white-space: nowrap !important; text-align: right !important; } body.ordering-process .shipping-billing-table .radio-wrapper:has(input:checked) { border-color: #909990 !important; background: #f5f8f5 !important; } body.ordering-process .shipping-billing-table .radio-wrapper:has(input:disabled) { background: #f7f7f7 !important; } body.ordering-process .shipping-billing-table .radio-wrapper > label .sublabel { display: block; font-size: 12px; line-height: 1.6; } @media(hover:none),(pointer:coarse) { body input:is([type="checkbox"],[type="radio"]) + label { min-height: 44px !important; } } /* Account shells must not inherit Step's .content.narrow horizontal padding. The card has the same outer width and inner spacing as the native dialog. */ .hl-account-surface { --hl-account-gutter: 28px; } #login .dialog__header, .hl-account-card > .hl-account-header { padding-left: var(--hl-account-gutter) !important; padding-right: var(--hl-account-gutter) !important; } #login #customerLogin, .hl-account-card > :is(#register-form,#formForgottenPassword,#formLogin) { padding-left: var(--hl-account-gutter) !important; padding-right: var(--hl-account-gutter) !important; } #login .hl-account-footer, .hl-account-card > .hl-account-footer { padding-left: var(--hl-account-gutter) !important; padding-right: var(--hl-account-gutter) !important; } .hl-account-surface .hl-account-footer a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px !important; text-underline-offset: 3px !important; text-decoration-thickness: 1px !important; } .hl-account-surface .hl-account-footer a:hover { color: #787878 !important; } :is(#formLogin,#formLoginIncluded) .hl-login-forgot a { display: inline-flex; align-items: center; min-height: 44px; touch-action: manipulation; } #login .dialog__close { width: 44px !important; top: 8px !important; right: 8px !important; } #login button.hl-login-close { width: 44px !important; height: 44px !important; min-height: 44px !important; min-width: 44px !important; } :is(#register-form,#formLogin,#formLoginIncluded) .hl-password-toggle { inset: 2px 2px auto auto !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; touch-action: manipulation; } /* An inactive native window must never intercept taps outside its zero-width box. */ body:not(.cart-window-visible) #cart-widget, body:not(.cart-window-visible) #cart-widget *, body:not(.search-window-visible) .content-window.search-window, body:not(.search-window-visible) .content-window.search-window * { visibility: hidden !important; pointer-events: none !important; } /* The header cart is an asynchronously populated native window. Component styling uses #cart-widget directly, including its FIRST response, without JS. */ #cart-widget { overscroll-behavior: contain; } #cart-widget .cart-window-in { box-sizing: border-box !important; position: relative !important; width: 100% !important; height: 100% !important; height: 100dvh !important; overflow-x: hidden !important; overflow-y: auto !important; padding: 24px max(20px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)) !important; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; } #cart-widget .cart-window-in > .place-cart-here { box-sizing: border-box !important; max-width: 1180px !important; } #cart-widget .cart-window-in > button.toggle-window[data-target="cart"] { box-sizing: border-box !important; max-width: 1180px !important; } #cart-widget .cart-window-in > .place-cart-here { width: 100% !important; margin: 0 auto !important; padding: 0 !important; } #cart-widget .cart-window-in > button.toggle-window[data-target="cart"] { position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; width: fit-content !important; min-height: 44px !important; height: auto !important; margin: 0 auto 24px !important; padding: 10px 16px !important; font: 400 13px/1.5 Poppins,sans-serif !important; text-transform: none !important; box-shadow: none !important; transform: none !important; touch-action: manipulation; } #cart-widget .cart-window-in > button.toggle-window[data-target="cart"]::before, #cart-widget .cart-window-in > button.toggle-window[data-target="cart"]::after { content: none !important; display: none !important; } #cart-widget .cart-window-in > button.toggle-window[data-target="cart"] > span { font: inherit !important; color: inherit !important; margin-left: 4px !important; } /* Full-page checkout shares the widget's usable width. */ body:is(.hl-checkout,.ordering-process) #content-wrapper { box-sizing: border-box !important; width: 100% !important; max-width: 1220px !important; } body:is(.hl-checkout,.ordering-process) #content { box-sizing: border-box !important; padding: 0 !important; min-width: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(input,select,textarea).form-control { min-height: var(--hl-form-height) !important; height: var(--hl-form-height) !important; padding: 12px 14px !important; border: 1px solid var(--hl-form-border) !important; border-radius: var(--hl-form-radius) !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) textarea.form-control { height: auto !important; min-height: 100px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(.co-contact-information,.co-billing-address,.co-box-additional) .form-group:has(.form-control) > label { color: #303030 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.5 !important; margin-bottom: 8px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .phone-combined-input { min-height: 48px !important; height: 48px !important; border-color: var(--hl-form-border) !important; border-radius: var(--hl-form-radius) !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .phone-combined-input .country-flags { height: 46px !important; border-radius: 9px 0 0 9px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .phone-combined-input input.js-phone-form-control.form-control { height: 46px !important; min-height: 46px !important; border: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .phone-combined-input:focus-within { border-color: #777 !important; outline: 2px solid #777 !important; outline-offset: 3px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .phone-combined-input input.js-phone-form-control:focus { outline: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .remove-item { box-sizing: border-box !important; width: 44px !important; height: 44px !important; min-height: 44px !important; touch-action: manipulation; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-name { overflow-wrap: anywhere; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-total .price-final { white-space: normal !important; overflow-wrap: anywhere; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .next-step :is(a,button) { touch-action: manipulation; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .remove-item::before { position: static !important; margin: 0 !important; line-height: 1 !important; } @media(min-width:1220px) { #cart-widget .cart-window-in > button.toggle-window[data-target="cart"] { margin-left: calc((100% - 1180px)/2) !important; } } @media(max-width:1219px) { #cart-widget .cart-window-in > button.toggle-window[data-target="cart"] { margin-left: 0 !important; } } @media(max-width:767px) { .hl-account-surface { --hl-account-gutter: 20px; } /* Separate rows guarantee no price/quantity overlap, even with long prices. */ } /* Explicit page gutters for all native account shells. Keep a single width owner instead of relying on .type-page versus .customer-page ancestors. */ :root { --hl-mobile-page-gutter: 24px; } :is(#register-form,#formLogin,#formLoginIncluded,#formForgottenPassword), :is(#register-form,#formLogin,#formLoginIncluded,#formForgottenPassword) :is(.form-group,.form-control,.social-login,.social-login-buttons) { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; } /* Native clearfix pseudo-elements become actual grid items in a CSS grid. They must not occupy the first/last summary cell. */ :is(body.hl-checkout,body.ordering-process,#cart-widget) .summary.row::before, :is(body.hl-checkout,body.ordering-process,#cart-widget) .summary.row::after { content: none !important; display: none !important; } @media(max-width:767px) { dialog#login.hl-account-dialog { box-sizing: border-box !important; } .search-window-in #formSearchForm.search-form.compact-form input[data-testid="searchInput"], #formSearchFormContent.search-form.compact-form input[data-testid="searchInput"], #formSearchFormContent.search-form input[data-testid="searchInput"] { min-width: 0 !important; text-overflow: ellipsis !important; font-size: 16px !important; padding-left: 18px !important; padding-right: 64px !important; } } /* The CARD owns its outside gap. Native .type-page/.customer-page wrappers cannot turn a 100%-wide card into a full-bleed surface on mobile. */ body.hl-account-page #content-wrapper.container { box-sizing: border-box !important; width: 100% !important; max-width: none !important; min-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.hl-account-page #content-wrapper > .breadcrumbs { box-sizing: border-box !important; width: calc(100% - 32px) !important; margin-left: auto !important; margin-right: auto !important; } body.hl-account-page #content-wrapper > .content-wrapper-in { box-sizing: border-box !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body.hl-account-page #content { box-sizing: border-box !important; float: none !important; width: 100% !important; max-width: 552px !important; min-width: 0 !important; margin: 36px auto 48px !important; padding: 0 !important; } body.hl-account-page #content > .content-inner { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body.hl-account-page #content .hl-account-card { box-sizing: border-box !important; width: calc(100% - 32px) !important; max-width: 520px !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; border: 1px solid #e4e4e4 !important; border-radius: 16px !important; } dialog#login.hl-account-dialog { box-sizing: border-box !important; width: calc(100% - 32px) !important; max-width: 520px !important; min-width: 0 !important; } @media(max-width:767px) { body.hl-account-page #content { margin-top: 24px !important; margin-bottom: 32px !important; } } /* Visible text actions share one ink/radius token. Icon-only controls retain their dedicated geometry and artwork. Existing component sizes stay intact. */ body :is(.btn,.hl-carousel-button,.hl-sticky-cart__button,.login-btn,.shp-tab-link) > :is(span,strong):not([class*="icon"]):not(.sr-only), body .next-step .order-button-text { color: inherit !important; -webkit-text-fill-color: currentColor !important; } body :is(.p-detail-tabs,#homepage-tabs) { border-radius: var(--hl-button-radius) !important; } /* The newsletter's secondary action stays quiet, with enough ink contrast. */ /* One native quantity component across listing, detail, cart and AJAX content. Dimensions match the supplied cart reference: 134 × 46px, three 44px cells. */ body .quantity:has(input.amount) { box-sizing: border-box !important; position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 134px !important; gap: 0 !important; width: 134px !important; min-width: 134px !important; max-width: 134px !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #d7d7d7 !important; border-radius: 9px !important; background: #fff !important; box-shadow: none !important; overflow: visible !important; } body .quantity:has(input.amount) > label { box-sizing: border-box !important; order: 0 !important; position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body .quantity:has(input.amount) input.amount { box-sizing: border-box !important; position: static !important; display: block !important; width: 44px !important; min-width: 0 !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #303030 !important; -webkit-text-fill-color: currentColor !important; box-shadow: none !important; font: 600 16px/44px Poppins,sans-serif !important; text-align: center !important; appearance: textfield !important; -moz-appearance: textfield !important; } body .quantity input.amount::-webkit-inner-spin-button, body .quantity input.amount::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; } body .quantity:has(input.amount) > :is(button.decrease,button.increase) { box-sizing: border-box !important; position: static !important; inset: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #555 !important; box-shadow: none !important; transform: none !important; font: 500 20px/1 Poppins,sans-serif !important; cursor: pointer; touch-action: manipulation; transition: background-color 160ms ease,color 160ms ease !important; } body .quantity:has(input.amount) > button.decrease { order: -1 !important; border-radius: 8px 0 0 8px !important; } body .quantity:has(input.amount) > button.increase { order: 1 !important; border-radius: 0 8px 8px 0 !important; } body .quantity:has(input.amount) > button > :is(.decrease__sign,.increase__sign) { position: static !important; inset: auto !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font: inherit !important; transform: none !important; } body .quantity:has(input.amount) > button::before, body .quantity:has(input.amount) > button::after { content: none !important; display: none !important; } body .quantity:has(input.amount) > button:hover:not(:disabled) { background: #f0f0f0 !important; } body .quantity:has(input.amount) > button:disabled { color: #aaa !important; cursor: not-allowed; } body .quantity:has(input.amount) :is(button,input):focus-visible { outline: 2px solid #777 !important; outline-offset: -3px !important; } body .quantity:has(input.amount) > :is(.increase-tooltip,.decrease-tooltip) { position: absolute; } body .quantity:has(input.amount) > :is(.increase-tooltip,.decrease-tooltip):not(.in) { pointer-events: none !important; } /* CSS 310: primary orange actions, quiet outlined secondary actions. */ body :is(.btn,.hl-sticky-cart__button,.login-btn,.shp-tab-link,.pagination__link,.listSorting__control,.listSorting__control--current,.hl-search-refresh,.next-step-forward,.next-step-back,.next-step-finish,.siteCookies__button,.siteCookies__link,:where(#orderFormButton,#submit-order)):where(:not(.btn-arrow-right,[data-testid="searchBtn"],.hl-login-close,[data-dialog-close],.remove-item,.loadMore__button)), body :where(#homepage-tabs) a, body .hl-search-recent button, body button.toggle-window:is([data-target="cart"],[data-target="search"]), body input[type="submit"] { box-sizing: border-box !important; color: var(--hl-action-ink,var(--hl-button-text)) !important; -webkit-text-fill-color: currentColor !important; border-radius: var(--hl-button-radius) !important; background: var(--hl-action-bg,var(--hl-button-background)) !important; border: 1px solid var(--hl-action-border,var(--hl-button-quiet-border)) !important; text-align: center !important; text-decoration: none !important; } body :is(.btn,.hl-sticky-cart__button,.login-btn,.shp-tab-link,.pagination__link,.listSorting__control,.listSorting__control--current,.hl-search-refresh,.next-step-forward,.next-step-back,.next-step-finish,.siteCookies__button,.siteCookies__link,:where(#orderFormButton,#submit-order)):where(:not(.btn-arrow-right,[data-testid="searchBtn"],.hl-login-close,[data-dialog-close],.remove-item,.loadMore__button)):is(:hover,:active), body :where(#homepage-tabs) a:is(:hover,:active), body .hl-search-recent button:is(:hover,:active), body button.toggle-window:is([data-target="cart"],[data-target="search"]):is(:hover,:active), body input[type="submit"]:is(:hover,:active) { background: var(--hl-action-hover,var(--hl-button-hover)) !important; border-color: var(--hl-action-hover-border,#787878) !important; } body :is(.btn-primary,.btn-cart,.btn-conversion,.siteCookies__button,.hl-sticky-cart__button,.next-step-forward,.next-step-finish), body :where(#orderFormButton,#submit-order), body :is(.shp-tab-link,.pagination__link,.listSorting__control,[role="tab"]):is(.active,[aria-selected="true"],[aria-current="page"]), body :is(.shp-tab,.pagination__item).active > :is(a,button), body .listSorting__control--current { --hl-action-bg: var(--hl-button-primary-bg) !important; --hl-action-hover: var(--hl-button-primary-hover) !important; --hl-action-border: var(--hl-button-primary-bg) !important; --hl-action-hover-border: var(--hl-button-primary-hover) !important; --hl-action-ink: var(--hl-button-primary-text) !important; } /* Step labels Detail as btn-primary; links to a product are secondary actions. */ body .p-tools > a.btn { --hl-action-bg: var(--hl-button-background) !important; --hl-action-hover: var(--hl-button-hover) !important; --hl-action-border: var(--hl-button-quiet-border) !important; --hl-action-hover-border: #787878 !important; --hl-action-ink: var(--hl-button-text) !important; } body :is(#formNewsletterWidget,#formNewsletter) button[type="submit"].btn { --hl-action-bg: #303030 !important; --hl-action-hover: #505050 !important; --hl-action-border: #303030 !important; --hl-action-hover-border: #505050 !important; --hl-action-ink: #fff !important; } body :is(.btn,.hl-sticky-cart__button,.login-btn,.shp-tab-link,.pagination__link,.listSorting__control,.listSorting__control--current,.hl-search-refresh,.next-step-forward,.next-step-back,.next-step-finish,.siteCookies__button,.siteCookies__link,:where(#orderFormButton,#submit-order)):where(:not(.btn-arrow-right,[data-testid="searchBtn"],.hl-login-close,[data-dialog-close],.remove-item,.loadMore__button)):focus-visible, body :where(#homepage-tabs) a:focus-visible, body .hl-search-recent button:focus-visible, body button.toggle-window:is([data-target="cart"],[data-target="search"]):focus-visible, body input[type="submit"]:focus-visible { outline: 2px solid #787878 !important; outline-offset: 3px !important; } body :is(.btn,.hl-sticky-cart__button,.login-btn,.shp-tab-link,.pagination__link,.listSorting__control,.listSorting__control--current,.hl-search-refresh,.next-step-forward,.next-step-back,.next-step-finish,.siteCookies__button,.siteCookies__link,:where(#orderFormButton,#submit-order)):where(:not(.btn-arrow-right,[data-testid="searchBtn"],.hl-login-close,[data-dialog-close],.remove-item,.loadMore__button)):is(:disabled,[aria-disabled="true"]), body :where(#homepage-tabs) a:is(:disabled,[aria-disabled="true"]), body .hl-search-recent button:is(:disabled,[aria-disabled="true"]), body button.toggle-window:is([data-target="cart"],[data-target="search"]):is(:disabled,[aria-disabled="true"]), body input[type="submit"]:is(:disabled,[aria-disabled="true"]) { color: #888 !important; background: #f5f5f5 !important; border-color: #d6d6d6 !important; cursor: not-allowed !important; } body .listSorting__control--current:is(:disabled,[aria-disabled="true"]) { color: #fff !important; background: var(--hl-button-primary-bg) !important; border-color: var(--hl-button-primary-bg) !important; } body :is(.siteCookies__button,.siteCookies__link) { min-height: 44px !important; padding: 10px 18px !important; } body .hl-search-refresh { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: var(--hl-button-height) !important; padding: var(--hl-button-padding-y) var(--hl-button-space-x) !important; } body .hl-search-recent button { min-height: 40px !important; } body .hl-search-recent .hl-search-clear { padding: 7px 11px !important; text-decoration: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(#cart-wrapper,#checkoutContent) .next-step .next-step-back { padding: 12px 24px !important; min-width: 96px !important; } /* Loading more products is a text action, not a competing filled CTA. */ body .btn.loadMore__button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; min-height: 44px !important; height: auto !important; padding: 10px 0 !important; margin-left: 0 !important; margin-right: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--hl-button-text) !important; -webkit-text-fill-color: currentColor !important; font-weight: 400 !important; text-transform: none !important; text-decoration: underline !important; text-underline-offset: 4px !important; text-decoration-thickness: 1px !important; transition: color 160ms ease,text-decoration-color 160ms ease !important; transform: none !important; } body .btn.loadMore__button:is(:hover,:active) { color: #787878 !important; text-decoration-thickness: 2px !important; background: transparent !important; } body .btn.loadMore__button:focus-visible { outline: 2px solid #787878 !important; outline-offset: 3px !important; } @media(prefers-reduced-motion:reduce) { body .btn.loadMore__button { transition: none !important; } } /* Original hero colours are independent of the commerce CTA palette. */ #carousel .hl-carousel-button { border: 0 !important; border-radius: 999px !important; } #carousel .hl-carousel-button--slide-1, #carousel .hl-carousel-button--slide-1:visited { background-color: #b4ecf2 !important; color: #273a3e !important; } #carousel .hl-carousel-button--slide-2, #carousel .hl-carousel-button--slide-2:visited { background-color: #e3f2ff !important; color: #203e9a !important; } #carousel .hl-carousel-button--slide-3, #carousel .hl-carousel-button--slide-3:visited { background-color: #b6a875 !important; color: #ffffff !important; } /* Checkout country select: keep the native accessible control and reveal its affordance. */ body.ordering-process #deliveryCountryId.form-control { appearance: none !important; -webkit-appearance: none !important; background-color: #fff !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22m5%208%205%205%205-5%22%20stroke%3D%22%23505050%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 18px 18px !important; padding-right: 48px !important; cursor: pointer; border-color: #b8b8b8 !important; } body.ordering-process #deliveryCountryId.form-control:hover { border-color: #787878 !important; } body.ordering-process #deliveryCountryId.form-control:focus-visible { outline: 2px solid #787878 !important; outline-offset: 3px !important; } /* The shipping/payment and final checkout right columns follow the viewport. The existing header observer maintains --hl-anchor-offset = header + 24px. Sticky remains bounded by its grid area and never replaces the native summary. */ body.ordering-process:is(.in-krok-1,.in-krok-2) #checkoutContent > .order-summary { position: static !important; } @media(min-width:992px) { body.ordering-process:is(.in-krok-1,.in-krok-2) #checkoutContent > .order-summary { position: sticky !important; top: var(--hl-anchor-offset,104px) !important; align-self: start !important; z-index: 2; max-height: calc(100vh - var(--hl-anchor-offset,104px) - 24px); max-height: calc(100dvh - var(--hl-anchor-offset,104px) - 24px); overflow-y: auto; } } /* The two first-step cards fill their shared grid row, including AJAX cart content. Intrinsic row sizing follows the taller card; mobile keeps independent rows. */ @media(min-width:992px) { :is(body.hl-checkout,body.ordering-process,#cart-widget) .summary.row { align-items: stretch !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .summary.row > div { display: flex !important; flex-direction: column !important; align-self: stretch !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .summary.row > div > :is(.box,.price-wrapper) { flex: 1 1 auto !important; height: auto !important; margin: 0 !important; } } /* MOBILE CHECKOUT — one responsive layout owner (page and first-click AJAX cart). Outside space is owned by width + margins, independently of native padding. Native controls/forms, validation and choice-marker artwork remain intact. Target #content-wrapper by ID: mobile Shoptet uses .container_resetted, while desktop uses .container. The wrapper class is not a layout contract. */ @media(max-width:991px) { body:is(.hl-checkout,.ordering-process) { background-color: #f5f6f7 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #content-wrapper { --hl-checkout-edge-left: 20px; --hl-checkout-edge-right: 20px; box-sizing: border-box !important; width: calc(100% - var(--hl-checkout-edge-left) - var(--hl-checkout-edge-right)) !important; max-width: none !important; min-width: 0 !important; margin: 0 var(--hl-checkout-edge-right) 0 var(--hl-checkout-edge-left) !important; padding: 20px 0 36px !important; background: transparent !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #content-wrapper > .content-wrapper-in, :is(body.hl-checkout,body.ordering-process,#cart-widget) #content, :is(body.hl-checkout,body.ordering-process,#cart-widget) #content > .content-inner, :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(#cart-wrapper,.cart-inner,#order-form) { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #content-wrapper .sidebar-left { margin: 0 0 20px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #content h1 { margin: 0 0 20px !important; font-size: 26px !important; line-height: 1.3 !important; } #cart-widget .cart-window-in { --hl-checkout-edge-left: 20px; --hl-checkout-edge-right: 20px; box-sizing: border-box !important; background: #f5f6f7 !important; padding: 20px 0 32px !important; padding-bottom: max(32px,env(safe-area-inset-bottom,0px)) !important; } #cart-widget .cart-window-in > .place-cart-here { box-sizing: border-box !important; width: calc(100% - var(--hl-checkout-edge-left) - var(--hl-checkout-edge-right)) !important; max-width: 100% !important; min-width: 0 !important; margin: 0 var(--hl-checkout-edge-right) 0 var(--hl-checkout-edge-left) !important; padding: 0 !important; } #cart-widget .cart-window-in > button.toggle-window[data-target="cart"] { margin-left: var(--hl-checkout-edge-left) !important; margin-right: var(--hl-checkout-edge-right) !important; } /* Compact, equally sized steps inside the same outside margins. */ :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header { gap: 8px !important; margin: 0 0 20px !important; padding: 0 !important; border: 0 !important; align-items: stretch !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step { box-sizing: border-box !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 8px !important; min-height: 82px !important; padding: 12px 9px !important; border-radius: 12px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step::before { flex: 0 0 24px !important; width: 24px !important; height: 24px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) ol.cart-header .step :is(a,strong,span) { font-size: 11px !important; line-height: 1.4 !important; overflow-wrap: anywhere !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #checkoutContent, :is(body.hl-checkout,body.ordering-process,#cart-widget) .summary.row { grid-template-columns: minmax(0,1fr) !important; gap: 16px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #checkoutContent > .order-summary { grid-column: 1 !important; grid-row: auto !important; position: static !important; max-height: none !important; overflow: visible !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #order-form.order-delivery-payment-form { gap: 16px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #checkoutContent > .co-box, :is(body.hl-checkout,body.ordering-process,#cart-widget) #order-form > .co-box, :is(body.hl-checkout,body.ordering-process,#cart-widget) #select-country-payment, :is(body.hl-checkout,body.ordering-process,#cart-widget) .summary.row > div > :is(.box,.price-wrapper) { box-sizing: border-box !important; padding: 18px !important; margin: 0 !important; border: 1px solid #e0e3e6 !important; border-radius: 14px !important; background: #fff !important; box-shadow: 0 2px 8px rgb(0 0 0 / 2%) !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #select-country-payment .co-basic-information { padding: 0 !important; border: 0 !important; background: transparent !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #select-country-payment .row { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #select-country-payment .row > div { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #select-country-payment .form-group { display: block !important; width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #select-country-payment label { position: static !important; display: block !important; float: none !important; width: auto !important; margin: 0 0 8px !important; padding: 0 !important; font-size: 13px !important; line-height: 1.5 !important; transform: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #deliveryCountryId.form-control { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) h2 { font-size: 18px !important; margin-bottom: 18px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) :is(input,select,textarea).form-control { font-size: 16px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .co-contact-information .form-group--inline:first-of-type { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .co-contact-information .login-button { max-width: 100% !important; white-space: normal !important; text-align: center !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .co-box-additional .form-group:last-child { margin-bottom: 0 !important; } /* The existing marker remains centered; only the surrounding option layout changes. */ body.ordering-process .shipping-billing-table .radio-wrapper > label { grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; gap: 10px !important; padding: 15px 12px 15px 44px !important; min-height: 70px !important; } body.ordering-process .shipping-billing-table .radio-wrapper > label::before { left: 13px !important; } body.ordering-process .shipping-billing-table .payment-shipping-price { grid-column: 2 !important; font-size: 12px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .payment-logo { display: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .shipping-billing-name { overflow-wrap: anywhere !important; line-height: 1.5 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .payment-info { flex-basis: auto !important; } /* Each cart item is a card. Quantity and price have disjoint hit areas. */ :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table, :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table tbody { display: block !important; width: 100% !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table { margin: 0 !important; border-spacing: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table tr.removeable { box-sizing: border-box !important; position: relative !important; display: grid !important; grid-template-columns: 56px minmax(0,1fr) !important; gap: 10px 12px !important; width: 100% !important; min-width: 0 !important; padding: 16px !important; margin: 0 0 14px !important; background: #fff !important; border: 1px solid #e0e3e6 !important; border-radius: 14px !important; box-shadow: 0 2px 8px rgb(0 0 0 / 2%) !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table td { box-sizing: border-box !important; display: block !important; width: auto !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .cart-p-image { grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 56px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .cart-p-image img { width: 56px !important; height: 56px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-name { grid-column: 2 !important; grid-row: 1 !important; padding-right: 30px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-name a { font-size: 13px !important; line-height: 1.5 !important; overflow-wrap: anywhere !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-availability { grid-column: 2 !important; grid-row: 2 !important; font-size: 12px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-quantity { grid-column: 1/-1 !important; grid-row: 3 !important; width: max-content !important; max-width: 100% !important; justify-self: start !important; align-self: center !important; margin-top: 6px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-total { position: static !important; grid-column: 1/-1 !important; grid-row: 3 !important; width: max-content !important; max-width: calc(100% - 146px) !important; justify-self: end !important; align-self: center !important; margin-top: 6px !important; font-size: 15px !important; text-align: right !important; white-space: normal !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-total .remove-item { position: absolute !important; top: 4px !important; right: 4px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-price, :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-cell > .p-label, :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-table .p-total > .p-label { display: none !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .cart-related-product td { grid-column: 1/-1 !important; padding: 12px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .summary.row { margin: 4px 0 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .extra { padding: 0 !important; line-height: 1.7 !important; } /* A single divider before the total, with calm, readable summary rows. */ :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary-item { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 14px !important; padding: 10px 0 !important; border: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary-item > div:first-child { min-width: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary-item > div:last-child:not(:first-child) { flex: 0 0 auto !important; white-space: nowrap !important; text-align: right !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary-item :is(a,span,strong) { line-height: 1.65 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary-item a { overflow-wrap: anywhere !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary :is(.recapitulation-single,.recapitulation) { margin-top: 0 !important; padding-top: 10px !important; border: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .recapitulation-shipping-billing-label { font-size: 12px !important; color: #666 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary-item.price { display: block !important; padding: 12px 0 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .order-summary .price-wrapper { padding: 16px 0 0 !important; background: transparent !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #checkoutContent > .consents { box-sizing: border-box !important; margin: 0 !important; padding: 0 4px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .consents label { min-height: 44px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .next-step, :is(body.hl-checkout,body.ordering-process,#cart-widget) #checkoutContent > .next-step { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 12px !important; margin: 20px 0 0 !important; padding: 0 !important; border: 0 !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #checkoutContent > .next-step { margin-top: 4px !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .next-step :is(.next-step-forward,.next-step-finish) { box-sizing: border-box !important; grid-row: 1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; white-space: normal !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) .next-step .next-step-back { grid-row: 2 !important; justify-self: start !important; } :is(body.hl-checkout,body.ordering-process,#cart-widget) #hl-checkout-payment-note { margin: 0 !important; padding: 0 !important; text-align: left !important; } } @media(min-width:768px) and (max-width:991px) { :is(body.hl-checkout,body.ordering-process,#cart-widget) #content-wrapper, #cart-widget .cart-window-in { --hl-checkout-edge-left: 24px; --hl-checkout-edge-right: 24px; } } @supports(padding:max(20px,env(safe-area-inset-left,0px))) { @media(max-width:767px) { :is(body.hl-checkout,body.ordering-process,#cart-widget) #content-wrapper, #cart-widget .cart-window-in { --hl-checkout-edge-left: max(20px,env(safe-area-inset-left,0px)); --hl-checkout-edge-right: max(20px,env(safe-area-inset-right,0px)); } } }