/* HOCKEYLAND CUSTOM CSS v.298 — cleaned from v.297, 2026-10-19. Keep this stylesheet after Shoptet. Surviving cascade order and breakpoints are intentional. Use together with hockeyland-custom-v.43.js; active filter styles now live here. */ /* 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: 2px; --hl-button-space-x: 18px; --hl-button-padding-y: 8px; --hl-button-background: #ffffff; --hl-button-text: #303030; --hl-button-hover: #787878; --hl-button-primary-bg: #f19210; --hl-button-primary-hover: #ffaf41; --hl-button-primary-text: #ffffff; --hl-button-quiet-text: #a3a3a3; --hl-button-quiet-border: #d6d6d6; --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, .box-newsletter button.btn.btn-default.btn-arrow-right, .newsletter-widget button.btn.btn-default.btn-arrow-right { 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, #formNewsletterWidget button.btn.btn-default.btn-arrow-right:active, #formNewsletterWidget button.btn.btn-default.btn-arrow-right:focus, .box-newsletter button.btn.btn-default.btn-arrow-right:hover, .box-newsletter button.btn.btn-default.btn-arrow-right:active, .box-newsletter button.btn.btn-default.btn-arrow-right:focus, .newsletter-widget button.btn.btn-default.btn-arrow-right:hover, .newsletter-widget button.btn.btn-default.btn-arrow-right:active, .newsletter-widget button.btn.btn-default.btn-arrow-right:focus { 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::before, .box-newsletter button.btn.btn-default.btn-arrow-right::before, .newsletter-widget button.btn.btn-default.btn-arrow-right::before { content: "" !important; display: none !important; } #formNewsletterWidget button.btn.btn-default.btn-arrow-right::after, .box-newsletter button.btn.btn-default.btn-arrow-right::after, .newsletter-widget button.btn.btn-default.btn-arrow-right::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 { background-color: #f19210 !important; border-color: #f19210 !important; color: transparent !important; } .container.footer-newsletter button.btn.btn-default.btn-arrow-right:hover, .container.footer-newsletter button.btn.btn-default.btn-arrow-right:active, .container.footer-newsletter button.btn.btn-default.btn-arrow-right:focus { background-color: #ffaf41 !important; border-color: #ffaf41 !important; color: transparent !important; } .container.footer-newsletter button.btn.btn-default.btn-arrow-right::before { content: "" !important; display: none !important; } .container.footer-newsletter button.btn.btn-default.btn-arrow-right::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; border: 0 !important; border-radius: 999px !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; outline: 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 */ #carousel .hl-carousel-button--slide-1, #carousel .hl-carousel-button--slide-1:visited { background-color: #b4ecf2 !important; color: #273a3e !important; } /* 2. banner */ #carousel .hl-carousel-button--slide-2, #carousel .hl-carousel-button--slide-2:visited { background-color: #e3f2ff !important; color: #203e9a !important; } /* 3. banner */ #carousel .hl-carousel-button--slide-3, #carousel .hl-carousel-button--slide-3:visited { background-color: #b6a875 !important; color: #ffffff !important; } /* 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 */ #faq { scroll-margin-top: 50px; } .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 */ #scrollTopBtn { position: fixed !important; right: 24px !important; width: 46px !important; height: 46px !important; background: #f19210 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; opacity: 0; visibility: hidden; transform: translateY(10px); z-index: 9999 !important; } #scrollTopBtn.visible { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } #scrollTopBtn:hover { background: #ffaf41 !important; } #scrollTopBtn svg { width: 22px !important; height: 22px !important; } #scrollTopBtn path { stroke: #fff !important; stroke-width: 2.4 !important; fill: none !important; stroke-linecap: butt !important; stroke-linejoin: miter !important; } @media (max-width: 767px) { #scrollTopBtn { right: 16px !important; width: 42px !important; height: 42px !important; } } /* 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, .products .product .p-in .p-tools .btn, .product-list .product .p-in .p-tools .btn, .products-block .product .p-in .p-tools a.btn, .products .product .p-in .p-tools a.btn, .product-list .product .p-in .p-tools a.btn { 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]), .products .product .p-in .p-tools a.btn.btn-primary:not([hidden]), .product-list .product .p-in .p-tools a.btn.btn-primary:not([hidden]) { /* 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 */ #scrollTopBtn { bottom: var(--hl-scrolltop-bottom, 24px) !important; } @media (max-width: 767px) { #scrollTopBtn { bottom: var(--hl-scrolltop-bottom, 16px) !important; } } /* 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-window-in .recommended-products.hl-search-new-products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; width: 100% !important; max-width: 760px !important; margin: 18px auto 0 !important; } .search-window-in .hl-search-product { display: flex !important; flex-direction: column !important; min-width: 0 !important; padding: 12px !important; color: #303030 !important; text-decoration: none !important; background: #ffffff !important; border: 1px solid #e5e5e5 !important; border-radius: 14px !important; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important; } .search-window-in .hl-search-product:hover { transform: translateY(-2px) !important; border-color: #d6d6d6 !important; box-shadow: 0 7px 20px rgba(0, 0, 0, 0.08) !important; } .search-window-in .hl-search-product__image { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; aspect-ratio: 1 / 1 !important; margin: 0 0 10px !important; overflow: hidden !important; } .search-window-in .hl-search-product__image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; } .search-window-in .hl-search-product__name { display: -webkit-box !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; min-height: 40px !important; margin: 0 0 7px !important; color: #303030 !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 600 !important; } .search-window-in .hl-search-product__price { margin-top: auto !important; color: #303030 !important; font-size: 17px !important; line-height: 1.3 !important; font-weight: 700 !important; } .search-window-in .hl-search-product__badge { align-self: flex-start !important; margin: 0 0 9px !important; padding: 4px 10px !important; color: #ffffff !important; background: #2d8610 !important; border-radius: 999px !important; font-size: 11px !important; line-height: 1.25 !important; font-weight: 600 !important; } .search-window-in .hl-search-new-products.is-loading { min-height: 120px !important; } @media (max-width: 767px) { .search-window-in .recommended-products.hl-search-new-products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 14px !important; } .search-window-in .hl-search-product { padding: 10px !important; border-radius: 12px !important; } .search-window-in .hl-search-product__name { min-height: 36px !important; font-size: 13px !important; } .search-window-in .hl-search-product__price { font-size: 15px !important; } } /* SEARCH – NEW PRODUCTS IMAGE FIX */ .search-window-in .hl-search-product__image img { visibility: visible !important; opacity: 1 !important; } /* 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. */ .search-window-in .recommended-products.hl-search-new-products { margin-left: auto !important; margin-right: auto !important; } /* Obsah karet necháváme vlevo – měníme pouze polohu celého gridu. */ .search-window-in .hl-search-product { text-align: left !important; } @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: #eeeeee !important; z-index: 1000 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !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: #eeeeee !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 { border-radius: var(--hl-button-radius) !important; } .btn:not(.toggle-window):not(.btn-arrow-right):not([data-testid="searchBtn"]), .btn.btn-cart, .btn.btn-conversion, .hl-sticky-cart__button, #cart-widget .cart-window-in > button.toggle-window[data-target="cart"], #cart-widget .next-step--cart > button.next-step-back.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; border-width: var(--hl-button-border) !important; border-style: solid !important; border-radius: var(--hl-button-radius) !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; } .btn:not(.toggle-window):not(.btn-arrow-right):not([data-testid="searchBtn"]):not(.btn-cart):not( .btn-conversion ), #cart-widget .cart-window-in > button.toggle-window[data-target="cart"], #cart-widget .next-step--cart > button.next-step-back.toggle-window[data-target="cart"] { border-color: var(--hl-button-text) !important; background: var(--hl-button-background) !important; color: var(--hl-button-text) !important; -webkit-text-fill-color: currentColor !important; } .btn:not(.toggle-window):not(.btn-arrow-right):not([data-testid="searchBtn"]):not(.btn-cart):not( .btn-conversion ):is(:hover, :focus-visible, :active):not(:disabled):not([aria-disabled="true"]), #cart-widget .cart-window-in > button.toggle-window[data-target="cart"]:is(:hover, :focus-visible, :active):not(:disabled):not( [aria-disabled="true"] ), #cart-widget .next-step--cart > button.next-step-back.toggle-window[data-target="cart"]:is(:hover, :focus-visible, :active):not( :disabled ):not([aria-disabled="true"]) { border-color: var(--hl-button-hover) !important; background: var(--hl-button-background) !important; color: var(--hl-button-hover) !important; } .btn.btn-cart, .btn.btn-conversion, .hl-sticky-cart__button { border-color: var(--hl-button-primary-bg) !important; background: var(--hl-button-primary-bg) !important; color: var(--hl-button-primary-text) !important; -webkit-text-fill-color: currentColor !important; } .btn.btn-cart:is(:hover, :focus-visible, :active):not(:disabled):not([aria-disabled="true"]), .btn.btn-conversion:is(:hover, :focus-visible, :active):not(:disabled):not([aria-disabled="true"]), .hl-sticky-cart__button:is(:hover, :focus-visible, :active):not(:disabled):not( [aria-disabled="true"] ) { border-color: var(--hl-button-primary-hover) !important; background: var(--hl-button-primary-hover) !important; color: var(--hl-button-primary-text) !important; } #product-detail-form .btn.add-to-cart-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"]):focus-visible, .btn.btn-cart:focus-visible, .btn.btn-conversion:focus-visible, .hl-sticky-cart__button:focus-visible, #cart-widget .cart-window-in > button.toggle-window[data-target="cart"]:focus-visible, #cart-widget .next-step--cart > button.next-step-back.toggle-window[data-target="cart"]:focus-visible { outline: 2px solid var(--hl-button-focus) !important; outline-offset: 3px !important; } .btn:not(.toggle-window):not(.btn-arrow-right):not([data-testid="searchBtn"]):is( :disabled, [aria-disabled="true"] ), .btn.btn-cart:is(:disabled, [aria-disabled="true"]), .btn.btn-conversion:is(:disabled, [aria-disabled="true"]), .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"]), #cart-widget .next-step--cart > button.next-step-back.toggle-window[data-target="cart"]:is(:disabled, [aria-disabled="true"]) { opacity: 0.55 !important; cursor: not-allowed !important; } /* REMOVE LEGACY BUTTON ARROWS */ .btn::before, .btn::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 */ #cart-wrapper > ol.cart-header.step- { display: flex !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; margin: 0 0 34px !important; padding: 0 !important; list-style: none !important; border: 0 !important; background: transparent !important; } #cart-wrapper > ol.cart-header.step-::before, #cart-wrapper > ol.cart-header.step-::after { content: none !important; display: none !important; } #cart-wrapper > ol.cart-header.step- > li.step { position: relative !important; flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; border: 1px solid #e2e2e2 !important; border-radius: 9999px !important; background: #f5f5f5 !important; box-shadow: none !important; color: #5d5d5d !important; } #cart-wrapper > ol.cart-header.step- > li.step::before, #cart-wrapper > ol.cart-header.step- > li.step::after { content: none !important; display: none !important; } #cart-wrapper > ol.cart-header.step- > li.step > strong, #cart-wrapper > ol.cart-header.step- > li.step > a { gap: 9px !important; } #cart-wrapper > ol.cart-header.step- > li.step span { margin: 0 !important; padding: 0 !important; color: inherit !important; line-height: 1.25 !important; } #cart-wrapper > ol.cart-header.step- > li.step span::before { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 30px !important; height: 30px !important; margin-right: 9px !important; border-radius: 9999px !important; background: #e7e7e7 !important; color: #555555 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 30px !important; vertical-align: middle !important; } #cart-wrapper > ol.cart-header.step- > li.step-1 span::before { content: "1" !important; } #cart-wrapper > ol.cart-header.step- > li.step-2 span::before { content: "2" !important; } #cart-wrapper > ol.cart-header.step- > li.step-3 span::before { content: "3" !important; } #cart-wrapper > ol.cart-header.step- > li.step.active { border-color: rgba(241, 146, 16, 0.34) !important; background: #ffffff !important; color: #111111 !important; box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06) !important; } #cart-wrapper > ol.cart-header.step- > li.step.active span::before { background: #f19210 !important; color: #ffffff !important; } @media (max-width: 767px) { #cart-wrapper > ol.cart-header.step- { gap: 7px !important; margin-bottom: 24px !important; } #cart-wrapper > ol.cart-header.step- > li.step span::before { min-width: 24px !important; height: 24px !important; margin-right: 5px !important; font-size: 11px !important; line-height: 24px !important; } } /* 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; border-radius: 9999px !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; border: 0 !important; border-radius: 9999px !important; background: transparent !important; color: #444444 !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:not(.active) > a:hover { background: rgba(255, 255, 255, 0.58) !important; color: #111111 !important; } ul#homepage-tabs.shp-tabs > li.shp-tab.active { background: transparent !important; } ul#homepage-tabs.shp-tabs > li.shp-tab.active > a { background: #ffffff !important; color: #111111 !important; 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 */ #cart-wrapper > ol.cart-header.step- > li.step { min-height: 58px !important; padding: 8px 16px !important; } #cart-wrapper > ol.cart-header.step- > li.step > strong, #cart-wrapper > ol.cart-header.step- > li.step > a { position: static !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: inherit !important; text-decoration: none !important; } #cart-wrapper > ol.cart-header.step- > li.step > strong::before, #cart-wrapper > ol.cart-header.step- > li.step > strong::after, #cart-wrapper > ol.cart-header.step- > li.step > a::before, #cart-wrapper > ol.cart-header.step- > li.step > a::after { content: none !important; display: none !important; } #cart-wrapper > ol.cart-header.step- > li.step > strong > span, #cart-wrapper > ol.cart-header.step- > li.step > a > span { position: static !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: inherit !important; line-height: 1.2 !important; white-space: nowrap !important; } @media (max-width: 767px) { #cart-wrapper > ol.cart-header.step- > li.step { min-height: 50px !important; padding: 7px 9px !important; } #cart-wrapper > ol.cart-header.step- > li.step > strong > span, #cart-wrapper > ol.cart-header.step- > li.step > a > span { white-space: normal !important; text-align: center !important; } } /* ---------- 1. Stepper: all checkout pages ---------- */ ol.cart-header[class*="step-"] { display: flex !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; margin: 0 0 30px !important; padding: 0 !important; list-style: none !important; border: 0 !important; background: transparent !important; } ol.cart-header[class*="step-"]::before, ol.cart-header[class*="step-"]::after { content: none !important; display: none !important; } ol.cart-header[class*="step-"] > li.step { flex: 1 1 0 !important; min-width: 0 !important; min-height: 58px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 8px 16px !important; border: 1px solid #e1e1e1 !important; border-radius: 9999px !important; background: #f4f4f4 !important; box-shadow: none !important; color: #666666 !important; } ol.cart-header[class*="step-"] > li.step::before, ol.cart-header[class*="step-"] > li.step::after { content: none !important; display: none !important; } ol.cart-header[class*="step-"] > li.step > strong, ol.cart-header[class*="step-"] > li.step > a { position: static !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: inherit !important; text-decoration: none !important; } ol.cart-header[class*="step-"] > li.step > strong::before, ol.cart-header[class*="step-"] > li.step > strong::after, ol.cart-header[class*="step-"] > li.step > a::before, ol.cart-header[class*="step-"] > li.step > a::after { content: none !important; display: none !important; } ol.cart-header[class*="step-"] > li.step span { position: static !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: inherit !important; line-height: 1.2 !important; white-space: nowrap !important; } ol.cart-header[class*="step-"] > li.step span::before { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 30px !important; width: 30px !important; height: 30px !important; margin-right: 9px !important; border-radius: 9999px !important; background: #e4e4e4 !important; color: #555555 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 30px !important; } ol.cart-header[class*="step-"] > li.step-1 span::before { content: "1" !important; } ol.cart-header[class*="step-"] > li.step-2 span::before { content: "2" !important; } ol.cart-header[class*="step-"] > li.step-3 span::before { content: "3" !important; } ol.cart-header[class*="step-"] > li.step.active { border-color: rgba(241, 146, 16, 0.42) !important; background: #ffffff !important; color: #111111 !important; box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06) !important; } ol.cart-header[class*="step-"] > li.step.active span::before { background: #f19210 !important; color: #ffffff !important; } ol.cart-header[class*="step-"] > li.step.completed { border-color: #dedede !important; background: #f7f7f7 !important; color: #333333 !important; } ol.cart-header[class*="step-"] > li.step.completed span::before { background: #222222 !important; color: #ffffff !important; } /* ---------- 2. Checkout cards / sections ---------- */ #checkoutContent .box, #checkoutContent .co-box, #checkoutContent .box-bg-default, #checkoutContent .order-summary { border: 1px solid #e4e4e4 !important; border-radius: 18px !important; background: #ffffff !important; box-shadow: none !important; } #checkoutContent .co-basic-information, #checkoutContent .co-delivery-method, #checkoutContent .co-payment-method, #checkoutContent .order-summary { overflow: hidden !important; } #checkoutContent .co-basic-information { padding: 24px !important; } #checkoutContent .co-basic-information h2, #checkoutContent .co-basic-information h3, #checkoutContent .co-delivery-method > h2, #checkoutContent .co-delivery-method > h3, #checkoutContent .co-payment-method > h2, #checkoutContent .co-payment-method > h3, #checkoutContent .order-summary h2, #checkoutContent .order-summary h3 { margin-top: 0 !important; } /* ---------- 3. Country selector / form controls ---------- */ #checkoutContent select, #checkoutContent input[type="text"], #checkoutContent input[type="email"], #checkoutContent input[type="tel"], #checkoutContent input[type="number"], #checkoutContent textarea { border-radius: 12px !important; } /* ---------- 4. Delivery + payment option rows ---------- */ #checkoutContent .co-delivery-method .shipping-billing-table, #checkoutContent .co-payment-method .shipping-billing-table, #checkoutContent #order-billing-methods { border: 0 !important; background: transparent !important; } #checkoutContent .co-delivery-method .shipping-billing-table > div, #checkoutContent .co-payment-method .shipping-billing-table > div, #checkoutContent #order-billing-methods > div { border-color: #e7e7e7 !important; } #checkoutContent .co-delivery-method .shipping-billing-table > div:hover, #checkoutContent .co-payment-method .shipping-billing-table > div:hover, #checkoutContent #order-billing-methods > div:hover { background: #fafafa !important; } /* ---------- 5. Delivery/payment form layout ---------- */ #checkoutContent #order-form.order-delivery-payment-form { gap: 16px !important; } #checkoutContent #order-form.order-delivery-payment-form > .co-box { min-width: 0 !important; } /* ---------- 6. Order summary ---------- */ #checkoutContent .order-summary { margin-top: 16px !important; } #checkoutContent .order-summary-inner { padding: 24px !important; } #checkoutContent .order-summary-inner > * { border-color: #e7e7e7 !important; } /* ---------- 7. Bottom navigation ---------- */ #checkoutContent .next-step { margin-top: 22px !important; } #checkoutContent .next-step .btn, #checkoutContent .next-step a.btn, #checkoutContent .next-step button.btn { border-radius: 9999px !important; } /* ---------- 8. Mobile checkout ---------- */ @media (max-width: 767px) { ol.cart-header[class*="step-"] { gap: 6px !important; margin-bottom: 22px !important; } ol.cart-header[class*="step-"] > li.step { min-height: 50px !important; padding: 7px 8px !important; } ol.cart-header[class*="step-"] > li.step span { white-space: normal !important; text-align: center !important; font-size: 12px !important; } ol.cart-header[class*="step-"] > li.step span::before { flex-basis: 24px !important; width: 24px !important; height: 24px !important; margin-right: 5px !important; font-size: 11px !important; line-height: 24px !important; } #checkoutContent .co-basic-information { padding: 18px !important; } #checkoutContent .order-summary-inner { padding: 18px !important; } #checkoutContent .box, #checkoutContent .co-box, #checkoutContent .box-bg-default, #checkoutContent .order-summary { border-radius: 14px !important; } } /* 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; border: 0 !important; border-radius: 22px !important; background: #eeeeee !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; border: 0 !important; border-radius: 9999px !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: #444444 !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, #category-header .listSorting__controls { 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; border: 0 !important; border-radius: 0 !important; background: transparent !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; border: 1px solid #e4e4e4 !important; border-radius: 9999px !important; background: #f4f4f4 !important; font-size: 13px !important; line-height: 1.15 !important; text-align: center !important; white-space: normal !important; } #category-header .listSorting__control--current { border-color: rgba(241, 146, 16, 0.35) !important; background: #ffffff !important; color: #111111 !important; 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; } } /* GLOBAL CIRCULAR CHECKBOXES */ input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; padding: 0 !important; border: 1px solid #a9a9a9 !important; border-radius: 50% !important; background: #ffffff !important; background-image: none !important; box-shadow: none !important; vertical-align: middle !important; cursor: pointer !important; } input[type="checkbox"]:checked { border-color: #2f2f2f !important; background: #2f2f2f !important; } input[type="checkbox"]:checked::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #ffffff !important; transform: translate(-50%, -50%) !important; } input[type="checkbox"]:disabled { opacity: 0.4 !important; cursor: not-allowed !important; } /* Remove any visual generated directly by the hidden input. */ input[type="checkbox"]::before, input[type="checkbox"]::after { content: none !important; display: none !important; } /* Checked = one solid dark dot. */ input[type="checkbox"]:checked + label::before { background: #2f2f2f !important; } /* No checkmark, inner ring or second symbol. */ input[type="checkbox"] + label::after, input[type="checkbox"]:checked + label::after { content: none !important; display: none !important; } /* Disabled checkbox dot. */ input[type="checkbox"]:disabled + label::before { opacity: 1 !important; } /* CHECKBOXES – replace the old square with a radio-style circle */ input[type="checkbox"] { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; min-width: 1px !important; margin: 0 !important; pointer-events: none !important; } input[type="checkbox"] + label { position: relative !important; } input[type="checkbox"] + label::before { box-sizing: border-box !important; width: 18px !important; height: 18px !important; min-width: 18px !important; margin-right: 10px !important; border: 1.5px solid #8f8f8f !important; border-radius: 50% !important; background: #ffffff !important; background-image: none !important; box-shadow: none !important; } /* Inner dot */ input[type="checkbox"] + label::after { content: "" !important; display: block !important; position: absolute !important; width: 10px !important; height: 10px !important; border: 0 !important; border-radius: 50% !important; background: #2f2f2f !important; background-image: none !important; opacity: 0 !important; transform: scale(0.5) !important; transition: opacity 0.12s ease, transform 0.12s ease !important; } /* Shoptet filter labels */ input[type="checkbox"]:checked + label::after { opacity: 1 !important; transform: scale(1) !important; } input[type="checkbox"]:disabled + label::before { border-color: #dddddd !important; background: #f7f7f7 !important; } input[type="checkbox"]:disabled + label::after { background: #cfcfcf !important; } /* RADIO BUTTONS – unify selected state with the same visual language */ input[type="radio"] { accent-color: #2f2f2f; } /* 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, #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 { outline: none !important; 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 */ #continue-order-button, #orderFormButton, #submit-order, .next-step .btn.next-step-back, .next-step .btn.next-step-forward, .next-step .btn.next-step-finish, #cart-widget .next-step--cart > button.next-step-back.toggle-window[data-target="cart"] { min-height: var(--hl-button-height) !important; height: auto !important; padding: var(--hl-button-padding-y) var(--hl-button-space-x) !important; font-size: var(--hl-button-font-size) !important; font-weight: var(--hl-button-weight) !important; line-height: var(--hl-button-line-height) !important; } #continue-order-button .order-button-text, #orderFormButton .order-button-text, #submit-order .order-button-text, #submit-order .order-button-suffix, .next-step .btn.next-step-back .continue-shopping, .next-step .btn.next-step-forward .order-button-text, .next-step .btn.next-step-finish .order-button-text, .next-step .btn.next-step-finish .order-button-suffix { font-size: inherit !important; font-weight: inherit !important; } /* 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. */ .next-step.next-step--cart, .next-step.next-step--step-1, .next-step.next-step--step-2 { align-items: stretch !important; gap: var(--hl-checkout-actions-gap) !important; } .next-step.next-step--cart > .btn.next-step-back:not([hidden]), .next-step.next-step--cart > .btn.next-step-forward:not([hidden]), .next-step.next-step--step-1 > .btn.next-step-back:not([hidden]), .next-step.next-step--step-1 > .btn.next-step-forward:not([hidden]), .next-step.next-step--step-2 > .btn.next-step-back:not([hidden]), .next-step.next-step--step-2 > .btn.next-step-finish:not([hidden]) { display: inline-flex; align-items: center !important; justify-content: center !important; } /* CHECKOUT STEPPER / TOP SPACING */ ol.cart-header[class*="step-"] { margin-top: 24px !important; } /* CHECKOUT / FINAL ORDER BUTTON CENTERING */ #submit-order, .next-step button.next-step-finish { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 0 !important; } #submit-order .order-button-text, #submit-order .order-button-suffix, .next-step .next-step-finish .order-button-text, .next-step .next-step-finish .order-button-suffix { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important; line-height: 1.1 !important; } .next-step--step-2.hl-checkout-note-ready > #submit-order { flex-direction: row !important; } .next-step--step-2.hl-checkout-note-ready > #submit-order > .order-button-text { width: auto !important; line-height: inherit !important; } .hl-checkout-payment-note { display: block !important; box-sizing: border-box !important; position: static !important; float: none !important; width: 100% !important; max-width: 560px !important; margin: 12px auto 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: center !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; border-radius: 9999px !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; border: 0 !important; border-radius: 9999px !important; background: transparent !important; color: #444444 !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 { background: #ffffff !important; color: #111111 !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important; } .p-detail-tabs > .shp-tab:not(.active) > .shp-tab-link:hover { background: rgba(255, 255, 255, 0.48) !important; color: #111111 !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; border-radius: 0 !important; background: transparent !important; } .p-detail-tabs-wrapper .p-detail-tabs > .shp-tab > .shp-tab-link { border-radius: 9999px !important; background: #eeeeee !important; } .p-detail-tabs-wrapper .p-detail-tabs > .shp-tab.active > .shp-tab-link { background: #ffffff !important; 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, .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, .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 .p-detail-tabs > .shp-tab.active > .shp-tab-link, .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, .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, .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, .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 { background: #f19210 !important; border-color: #f19210 !important; color: #ffffff !important; box-shadow: none !important; } #category-header .listSorting__control:not(.listSorting__control--current):hover, #category-header .listSorting__control:not(.listSorting__control--current):focus { background: #d9d9d9 !important; border-color: #d9d9d9 !important; color: #111111 !important; 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; } } /* LOGIN PAGE POLISH */ #formLogin.login-form #loginEmail, #formLogin.login-form #loginPassword { border-radius: 12px !important; } /* Secondary actions – compact, quiet pair of pills instead of loose links. */ #formLogin.login-form .alternative-links { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; margin: 10px 0 18px !important; } #formLogin.login-form .alternative-links > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-height: var(--hl-button-height) !important; box-sizing: border-box !important; margin: 0 !important; padding: 8px var(--hl-button-space-x) !important; border: var(--hl-button-border) solid var(--hl-button-text) !important; border-radius: var(--hl-button-radius) !important; background: var(--hl-button-background) !important; color: var(--hl-button-text) !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; text-decoration: none !important; white-space: nowrap !important; box-shadow: none !important; transition: var(--hl-button-transition) !important; } #formLogin.login-form .alternative-links > a:is(:hover, :focus-visible, :active) { background: var(--hl-button-background) !important; border-color: var(--hl-button-hover) !important; color: var(--hl-button-hover) !important; text-decoration: none !important; } #formLogin.login-form .alternative-links > a:focus-visible { outline: 2px solid var(--hl-button-focus) !important; outline-offset: 3px !important; } @media (max-width: 767px) { #formLogin.login-form .alternative-links { gap: 7px !important; } } /* LOGIN PAGE / SECONDARY ACTION ALIGNMENT */ #formLogin.login-form .alternative-links { justify-content: flex-start !important; text-align: left !important; } #formLogin.login-form .alternative-links > a { flex: 0 0 auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* LOGIN PAGE / DESKTOP + MOBILE SECONDARY LINKS */ #formLogin.login-form p.alternative-links { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: flex-start !important; width: 100% !important; text-align: left !important; } #formLogin.login-form p.alternative-links > a { display: inline-flex !important; flex: 0 0 auto !important; align-self: flex-start !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !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, .content-window-in.search-window-in #formSearchForm button.btn.btn-default.btn-arrow-right.btn-lg[data-testid="searchBtn"]:hover, #formSearchForm.search-form.compact-form.js-search-main button.btn.btn-default.btn-arrow-right.btn-lg[data-testid="searchBtn"]:hover { background: #ffaf41 !important; background-color: #ffaf41 !important; } /* SCROLL TO TOP / HOVER MICRO-ANIMATION */ @media (prefers-reduced-motion: reduce) { #scrollTopBtn, #scrollTopBtn svg { transition: none !important; } #scrollTopBtn.visible:hover, #scrollTopBtn.visible:hover svg { transform: none !important; } } /* SCROLL TO TOP / COLOR-ONLY HOVER TRANSITION */ #scrollTopBtn { transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, bottom 0.28s ease, background-color 0.22s ease !important; } #scrollTopBtn.visible:hover { background: #ffaf41 !important; transform: none !important; box-shadow: none !important; } #scrollTopBtn svg, #scrollTopBtn.visible:hover svg { transform: none !important; transition: none !important; } /* LOGIN MODAL / ROUNDED EMAIL + PASSWORD */ #formLoginIncluded .form-control-wrapper, #formLoginIncluded input#loginWidgetEmail.form-control, #formLoginIncluded input#loginWidgetPassword.form-control { border-radius: 12px !important; } #formLoginIncluded .form-control-wrapper { overflow: hidden !important; } /* LOGIN MODAL / MATCH STANDALONE LOGIN LINKS */ #formLoginIncluded p.alternative-links { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 8px !important; width: 100% !important; margin: 12px 0 16px !important; padding: 0 !important; text-align: left !important; } #formLoginIncluded p.alternative-links > a { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; min-height: 34px !important; margin: 0 !important; padding: 6px 13px !important; border: 1px solid #dddddd !important; border-radius: 9999px !important; background: #eeeeee !important; color: #555555 !important; line-height: 1.2 !important; text-align: left !important; text-decoration: none !important; box-shadow: none !important; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease !important; } #formLoginIncluded p.alternative-links > a:hover { background: #dddddd !important; border-color: #d3d3d3 !important; color: #111111 !important; text-decoration: none !important; } /* 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; } @media (max-width: 767px) { #cart-widget .cart-empty .empty-cart-boxes > .col-md-6:last-child { margin-top: 32px !important; margin-bottom: 32px !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; } #cart-widget .cart-empty .empty-cart-boxes > .col-md-6:last-child, #cart-widget .cart-empty .empty-cart-boxes > .col-md-6:last-child .search { 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; } @media (max-width: 767px) { #cart-widget .cart-empty .cart-row > .col-xl-offset-1.col-xl-4 { margin-top: 30px !important; } } /* REGISTRATION / ROUNDED FORM FIELDS + SOCIAL LOGIN */ #register-form .form-control-wrapper, #register-form input.form-control, #register-form textarea.form-control, #register-form select.form-control { border-radius: 12px !important; } #register-form .form-control-wrapper { overflow: hidden !important; } #register-form .social-login .form-group, #register-form .social-login a.login-btn { border-radius: 12px !important; } #register-form .social-login .form-group { overflow: hidden !important; } /* FORGOTTEN PASSWORD / EMAIL FIELD RADIUS */ #formForgottenPassword input#email.form-control { border-radius: 12px !important; } /* REGISTRATION / ROUNDED SECTION BOXES */ #register-form fieldset.co-registration, #register-form .co-box.co-registration, #register-form #additionalInformation.co-registration { border-radius: 12px !important; } /* CHECKOUT / REMOVE REDUNDANT INNER CARD BORDERS */ #checkoutContent .co-billing-address > fieldset.box, #checkoutContent .co-box-additional #note > fieldset.box { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } /* SOCIAL LOGIN / ROUNDED GOOGLE + SEZNAM BUTTONS */ .social-login-buttons > .form-group, .social-login-buttons > .form-group > a.login-btn, .social-login > .form-group, .social-login > .form-group > a.login-btn { 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 { width: auto !important; min-width: 0 !important; } #cart-widget .next-step--cart > button.next-step-back.toggle-window[data-target="cart"] { width: 178px !important; min-width: 178px !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, #cart-widget .next-step--cart > button.next-step-back.toggle-window[data-target="cart"] > .continue-shopping, .next-step .btn > .continue-shopping, .next-step .btn > .order-button-text, .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; } @media (max-width: 767px) { #cart-widget .next-step--cart > button.next-step-back.toggle-window[data-target="cart"] { width: auto !important; min-width: 0 !important; } #cart-widget .cart-window-in > button.toggle-window[data-target="cart"] { margin-top: 14px !important; } } /* CART / REAL GAP BEFORE CHECKOUT CONTENT */ #cart-widget .cart-window-in > .container.place-cart-here { padding-top: 24px !important; padding-left: 36px !important; padding-right: 36px !important; } @media (max-width: 767px) { #cart-widget .cart-window-in > .container.place-cart-here { padding-left: 28px !important; padding-right: 28px !important; } } /* CART / CIRCULAR QUANTITY CONTROLS */ #cart-widget .quantity-form .quantity { display: inline-flex !important; align-items: center !important; gap: 8px !important; width: auto !important; height: auto !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #cart-widget .quantity-form .quantity > .decrease, #cart-widget .quantity-form .quantity > input.amount, #cart-widget .quantity-form .quantity > .increase { flex: 0 0 42px !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; padding: 0 !important; margin: 0 !important; border: 1px solid #d5d5d5 !important; border-radius: 50% !important; background: #ffffff !important; box-shadow: none !important; color: #303030 !important; text-align: center !important; line-height: 40px !important; box-sizing: border-box !important; } #cart-widget .quantity-form .quantity > .decrease, #cart-widget .quantity-form .quantity > .increase { display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: border-color 0.22s ease, color 0.22s ease, background-color 0.22s ease !important; } #cart-widget .quantity-form .quantity > input.amount { appearance: textfield !important; -moz-appearance: textfield !important; } #cart-widget .quantity-form .quantity > input.amount::-webkit-outer-spin-button, #cart-widget .quantity-form .quantity > input.amount::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } #cart-widget .quantity-form .quantity > .decrease:hover, #cart-widget .quantity-form .quantity > .increase:hover { border-color: #787878 !important; color: #787878 !important; background: #ffffff !important; } #cart-widget .quantity-form .quantity > .decrease::before, #cart-widget .quantity-form .quantity > .decrease::after, #cart-widget .quantity-form .quantity > .increase::before, #cart-widget .quantity-form .quantity > .increase::after { border-radius: 0 !important; } /* CART / CENTER QUANTITY +/- GLYPHS */ #cart-widget .quantity-form .quantity > .decrease, #cart-widget .quantity-form .quantity > .increase { position: relative !important; line-height: 1 !important; } #cart-widget .quantity-form .quantity > .decrease > span.decrease__sign, #cart-widget .quantity-form .quantity > .increase > span.increase__sign { position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; transform: translate(-50%, -50%) !important; } /* CART / QUANTITY CONTROL ORDER + CLEAN GLYPHS */ #cart-widget .quantity-form .quantity > input.amount { order: 2 !important; } #cart-widget .quantity-form .quantity > .decrease::before, #cart-widget .quantity-form .quantity > .decrease::after, #cart-widget .quantity-form .quantity > .increase::before, #cart-widget .quantity-form .quantity > .increase::after { content: none !important; display: none !important; } /* CART / QUANTITY CONTROLS – DOM-CORRECT LAYOUT */ #cart-widget .quantity-form .quantity > label { order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 42px !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #d5d5d5 !important; border-radius: 50% !important; background: #ffffff !important; box-shadow: none !important; box-sizing: border-box !important; overflow: hidden !important; } #cart-widget .quantity-form .quantity > label > .sr-only { position: absolute !important; } #cart-widget .quantity-form .quantity > label > input.amount { display: block !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; color: #303030 !important; font: inherit !important; line-height: 40px !important; text-align: center !important; box-sizing: border-box !important; appearance: textfield !important; -moz-appearance: textfield !important; } #cart-widget .quantity-form .quantity > label > input.amount::-webkit-outer-spin-button, #cart-widget .quantity-form .quantity > label > input.amount::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } #cart-widget .quantity-form .quantity > .decrease { order: 1 !important; } #cart-widget .quantity-form .quantity > .increase { order: 3 !important; } #cart-widget .quantity-form .quantity > .decrease, #cart-widget .quantity-form .quantity > .increase { flex: 0 0 42px !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #d5d5d5 !important; border-radius: 50% !important; background: #ffffff !important; box-shadow: none !important; box-sizing: border-box !important; } /* CART QUANTITY / LARGER PLUS & MINUS SYMBOLS */ #cart-widget .quantity-form .quantity > button.increase .increase__sign, #cart-widget .quantity-form .quantity > button.decrease .decrease__sign { font-size: 20px !important; font-weight: 500 !important; line-height: 1 !important; } /* GLOBAL QUANTITY CONTROL / CIRCULAR UI */ .quantity:has(> label > input.amount) { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 42px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } .quantity:has(> label > input.amount) > label { order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 42px !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; box-shadow: none !important; box-sizing: border-box !important; overflow: hidden !important; } .quantity:has(> label > input.amount) > label > .sr-only { position: absolute !important; } .quantity:has(> label > input.amount) > label > input.amount { display: block !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; font: inherit !important; line-height: 40px !important; text-align: center !important; box-sizing: border-box !important; appearance: textfield !important; -moz-appearance: textfield !important; } .quantity:has(> label > input.amount) > label > input.amount::-webkit-outer-spin-button, .quantity:has(> label > input.amount) > label > input.amount::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } .quantity:has(> label > input.amount) > button.decrease, .quantity:has(> label > input.amount) > button.increase { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 42px !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #d5d5d5 !important; border-radius: 50% !important; background: #ffffff !important; box-shadow: none !important; color: #303030 !important; line-height: 1 !important; box-sizing: border-box !important; cursor: pointer !important; transition: border-color 0.22s ease, color 0.22s ease !important; } .quantity:has(> label > input.amount) > button.decrease { order: 1 !important; } .quantity:has(> label > input.amount) > button.increase { order: 3 !important; } .quantity:has(> label > input.amount) > button.decrease::before, .quantity:has(> label > input.amount) > button.decrease::after, .quantity:has(> label > input.amount) > button.increase::before, .quantity:has(> label > input.amount) > button.increase::after { content: none !important; display: none !important; } .quantity:has(> label > input.amount) > button.decrease > .decrease__sign, .quantity:has(> label > input.amount) > button.increase > .increase__sign { position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1 !important; transform: translate(-50%, -50%) !important; } .quantity:has(> label > input.amount) > button.decrease:hover, .quantity:has(> label > input.amount) > button.increase:hover { border-color: #787878 !important; color: #787878 !important; background: #ffffff !important; } /* QUANTITY / EMPHASIZE CURRENT VALUE */ span.quantity > label { background: #f2f2f2 !important; border-color: #bdbdbd !important; } span.quantity > label input.amount { color: #303030 !important; font-weight: 500 !important; } /* QUANTITY / STRONGER CURRENT VALUE EMPHASIS */ .quantity:has(> label > input.amount) > label { background: #eeeeee !important; border: 2px solid #787878 !important; } .quantity:has(> label > input.amount) > label > input.amount { color: #303030 !important; font-weight: 600 !important; } /* CART / EMPHASIZE CURRENT QUANTITY VALUE */ #cart-widget .quantity:has(> label > input.amount) > label, #cart-wrapper .quantity:has(> label > input.amount) > label, .cart-content .quantity:has(> label > input.amount) > label { background: #eeeeee !important; border: 2px solid #787878 !important; } #cart-widget .quantity:has(> label > input.amount) > label > input.amount, #cart-wrapper .quantity:has(> label > input.amount) > label > input.amount, .cart-content .quantity:has(> label > input.amount) > label > input.amount { color: #303030 !important; font-weight: 600 !important; } /* 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; } } /* SEARCH OVERLAY – QUIET BACK ACTION */ .search-window-in > button.btn.toggle-window-arr.toggle-window[data-target="search"] { position: absolute !important; top: 24px !important; left: calc((100% - 560px) / 2) !important; right: auto !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; column-gap: 4px !important; width: auto !important; min-width: 100px !important; min-height: var(--hl-button-height) !important; height: auto !important; margin: 0 !important; padding: 8px var(--hl-button-space-x) !important; border: 1px solid var(--hl-button-quiet-border) !important; border-radius: var(--hl-button-radius) !important; background: var(--hl-button-background) !important; color: var(--hl-button-quiet-text) !important; -webkit-text-fill-color: currentColor !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; text-transform: none !important; text-decoration: none !important; transition: var(--hl-button-transition) !important; } .search-window-in > button.btn.toggle-window-arr.toggle-window[data-target="search"] > span { color: inherit !important; -webkit-text-fill-color: currentColor !important; font: inherit !important; text-transform: inherit !important; } .search-window-in > button.btn.toggle-window-arr.toggle-window[data-target="search"]:is( :hover, :focus-visible, :active ) { color: var(--hl-button-hover) !important; border-color: var(--hl-button-hover) !important; } .search-window-in > button.btn.toggle-window-arr.toggle-window[data-target="search"]:focus-visible { outline: 2px solid var(--hl-button-focus) !important; outline-offset: 3px !important; } @media (max-width: 767px) { .search-window-in > button.btn.toggle-window-arr.toggle-window[data-target="search"] { left: 20px !important; min-width: 0 !important; padding-left: 12px !important; padding-right: 12px !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-bg) !important; --Global-Foregrounds-Button-Primary_Hover: var(--hl-button-primary-hover) !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: 1px solid #eeeeee !important; border-radius: 20px !important; background-color: #f7f7f7 !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. */ #scrollTopBtn { border: 0 !important; padding: 0 !important; appearance: none; font: inherit; }