; the account trigger an . */ #header .btn_search { cursor: pointer; } /* Mobile menu: 44px hamburger target (icon unchanged), page behind does not scroll while it is open. */ @media (max-width: 991px) { #header .navbar-header .navbar-toggler { min-width: 44px; min-height: 44px; } html.fs-menu-open, html.fs-menu-open body { overflow: hidden; } } /* Footer quote form (components/theme/site-footer-quote.tsx) in the theme newsletter block. */ #footer .fs-quote-form .input-wrapper input[type="email"] { width: 100%; } #footer .fs-quote-details { margin-top: 15px; text-align: start; } #footer .fs-quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 15px; } #footer .fs-quote-grid label { display: block; margin: 0; } #footer .fs-quote-grid label > span { display: block; margin-bottom: 4px; font-size: 13px; color: #22201d; } #footer .fs-quote-grid .fs-quote-wide { grid-column: 1 / -1; } #footer .fs-quote-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } #footer .fs-quote-note { margin: 10px 0; font-size: 12px; color: #6b6b6b; } #footer .fs-quote-note a { color: #22201d; text-decoration: underline; } #footer .fs-quote-details .alert, #footer .fs-quote-done { margin: 10px 0 0; border-radius: 0; text-align: start; } @media (max-width: 575px) { #footer .fs-quote-grid { grid-template-columns: 1fr; } } /* Side cart close: a real button over the theme's corner. */ #_desktop_cart .leo-dropdown-cart::after { content: none; } #_desktop_cart .leo-dropdown-cart .fs-cart-close { position: absolute; top: 13px; right: 13px; display: flex; align-items: center; justify-content: center; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #22201d; cursor: pointer; } #_desktop_cart .leo-dropdown-cart .fs-cart-close .material-icons { font-size: 22px; } [dir=rtl] #_desktop_cart .leo-dropdown-cart .fs-cart-close { right: auto; left: 13px; } /* RTL phone menu: the theme anchors the closed panel right but still slides it -100%, which parks it past the left edge where WebKit lets the page scroll sideways. Park it off the right edge instead, clipped by its zero-width wrapper until the menu opens. */ [dir=rtl] .off-canvas-nav-megamenu .offcanvas-mainnav { transform: translateX(100%); } [dir=rtl] .off-canvas-nav-megamenu:not(.active) { overflow: hidden; } /* The theme forces `.rtl *{direction:rtl!important}`, which overrides dir="ltr" (phone numbers, untranslated English lines, FAQ copy): let elements that ask for LTR keep it, so their full stop / "?" / "+91" stay where they belong. */ .rtl [dir=ltr], .rtl [dir=ltr] * { direction: ltr !important; } /* RTL editions: Latin product names take their own direction (no truncation from the wrong end). */ [dir=rtl] .product-miniature .product-title, [dir=rtl] .product-miniature .product-title a, [dir=rtl] .leo-dropdown-cart .product-name a, [dir=rtl] .lps-result-title { unicode-bidi: plaintext; } /* Text contrast: theme greys (#a1a1a0 2.6:1, #7a7a7a 4.3:1 on white) darkened to #6b6b6b (5.3:1). */ :root { --product-regular-price-color: #6b6b6b; --new-badge-background: #fade58; --new-badge-color: #22201d; } #product #wrapper .breadcrumb li a, #product #wrapper .breadcrumb li::after, .category-default a, .social-sharing span, .productcats .label, .product-detail .product-manufacturer .label, .product-detail .product-reference .label, .product-detail .product-quantities .label, .blog-item .blog-cat a, ul.lists > li .info, .elementor-12 .elementor-element.elementor-element-e68b8fe .widget-tab-title, .elementor-12 .elementor-element.elementor-element-18a4f67 .cat, .elementor-12 .elementor-element.elementor-element-18a4f67 .cat *, .elementor-12 .elementor-element.elementor-element-18a4f67 .created, .elementor-12 .elementor-element.elementor-element-18a4f67 .created *, .text-muted, .elementor-widget-text-editor, .elementor-widget-image-box .elementor-image-box-content .elementor-image-box-description, .elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-description, .elementor-widget-tabs .elementor-tab-content *, .elementor-widget-accordion .elementor-accordion .elementor-tab-content, .elementor-widget-toggle .elementor-toggle .elementor-tab-content { color: #6b6b6b; } .text-muted { color: #6b6b6b !important; } /* Touch targets in the header top bar and footer: at least 24px tall on phones. */ @media (max-width: 767px) { #header .js-dropdown > .btn-unstyle.popup-title { min-width: 24px; min-height: 24px; } #header .elementor-element-bea04ba a, #footer .elementor-widget-text-editor a, #footer .linklist-menu .list-item a, #footer .elementor-icon-list-item > a { display: inline-flex; align-items: center; min-height: 24px; } } /* ---- Devices (phones/tablets, motion) ---- */ /* Touch widths: top-bar toggles, links and social icons fill a 44px row; header icons get a 44px hit area (negative margin keeps the theme's icon spacing). */ @media (max-width: 1024px) { #header .elementor-element-bea04ba { padding-top: 0; padding-bottom: 0; } #header .elementor-element-7d2d02a > .elementor-element-populated { margin-top: 0; } #header .header_logo a { display: inline-block; } #header .elementor-element-bea04ba .js-dropdown > .btn-unstyle.popup-title, #header .elementor-element-bea04ba .linklist-menu .item-text, #header .elementor-element-bea04ba .elementor-text-editor a, #header .elementor-element-bea04ba .elementor-social-icon { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } #header .elementor-element-bea04ba .js-dropdown > .btn-unstyle.popup-title, #header .elementor-element-bea04ba .elementor-social-icon { min-width: 44px; } #header .elementor-element-bea04ba .elementor-social-icon:not(:last-child) { margin-right: 0; } #header .elementor-element-bea04ba .linklist-menu .list-item { margin-top: 0; margin-bottom: 0; } #header .header-top .btn_search, #header .header-top #_desktop_cart a.header, #header .header-top #leo_block_top > .popup-title { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -10px; } } /* Tablets: the theme's 50/50 columns wrap the quick links under the edition menus; size the columns to their content so the bar stays one row, and drop the social icons below 992px (the theme hides them on phones). */ @media (min-width: 768px) and (max-width: 1024px) { #header .elementor-element-bea04ba .elementor-element-be43490 { flex: 1 1 auto; width: auto; } #header .elementor-element-bea04ba .elementor-element-7d2d02a { flex: 0 0 auto; width: auto; } #header .elementor-element-bea04ba .elementor-element-be43490 > .elementor-column-wrap > .elementor-widget-wrap { flex-wrap: nowrap; justify-content: flex-start; } } @media (min-width: 768px) and (max-width: 991px) { #header .elementor-element-afc14fc { display: none; } } /* Phones/tablets: the theme only floats the header above 990px. Keep the logo/menu/cart row on screen; the top bar scrolls away (--fs-topbar-h is its live height, set by site-header). */ @media (max-width: 991px) { #page { overflow: clip; } #header { position: sticky; top: calc(-1 * var(--fs-topbar-h, 0px)); z-index: 1030; } #header.fs-header-stuck .header-top { box-shadow: 0 2px 12px rgba(34, 32, 29, 0.1); } html { scroll-padding-top: 80px; } } /* 992–1199px: the theme moves the menu to a second row (140px header); once the header floats (mini-navbar) keep it to one row like the >=1200px layout. */ @media (min-width: 992px) and (max-width: 1199px) { #header.mini-navbar .main__header { padding-top: 0 !important; } #header.mini-navbar .col__menu { order: 0; flex: 1; width: auto !important; padding-left: 24px; } [dir=rtl] #header.mini-navbar .col__menu { padding-left: 0; padding-right: 24px; } #header.mini-navbar .col__menu .elementor-element-aefa088 > .elementor-widget-container { padding-right: 16px; } #header.mini-navbar .col__menu .verticalmenu-button { font-size: 0; } #header.mini-navbar .col__menu .main--menu { flex: 1; } #header.mini-navbar .col__info { flex: 0 0 auto; } } /* prefers-reduced-motion: no entrance animations or long transitions (the hero and carousels stop auto-advancing in home5-template / hero-pause). */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } .elementor-invisible, .wow { visibility: visible !important; } } /* ---- Country editions: scripts, long labels, RTL ---- */ /* Inter Tight has no Arabic/Hebrew/CJK glyphs: name a native face per script instead of the platform's Arial/SC fallback. */ html:lang(ar) { --fs-script: "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma; } html:lang(he) { --fs-script: "Noto Sans Hebrew", "Arial Hebrew", "Segoe UI"; } html:lang(ja) { --fs-script: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP"; } html:lang(zh-Hant) { --fs-script: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC"; } html:lang(ko) { --fs-script: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR"; } html:is(:lang(ar), :lang(he), :lang(ja), :lang(zh-Hant), :lang(ko)) { --font-family-base: "Inter Tight", var(--fs-script), sans-serif; --font-family-heading: "Inter Tight", var(--fs-script), sans-serif; --font-family-megamenu: "Inter Tight", var(--fs-script), sans-serif; --font-family-senary: "Inter Tight", var(--fs-script), sans-serif; --font-family-septenary: "Inter Tight", var(--fs-script), sans-serif; --font-family-slider: "Inter Tight", var(--fs-script), sans-serif; } /* Long localized CTA labels (uk "Переглянути специфікацію", el, fi, hu) wrap inside the card button. */ .plist-style-1 .thumbnail-container .cart .btn-product { white-space: normal; max-width: 100%; height: auto; text-align: center; } .widget-tab-title { max-width: 100%; overflow-wrap: anywhere; } /* Safety net against sideways panning in RTL editions (slider tracks / parked panels overflow to the left). */ html[dir=rtl] body { overflow-x: clip; } /* RTL header: Elementor's per-widget spacing is physical (left/right) — mirror it so the category button keeps its gap before "Home" and the top-bar separators/icons sit between the items they divide. */ html[dir=rtl] .elementor-11 .elementor-element.elementor-element-aefa088 > .elementor-widget-container { padding: 0 0 0 54px; } html[dir=rtl] .elementor-13 .elementor-element.elementor-element-afc14fc { text-align: right; } html[dir=rtl] .elementor-13 .elementor-element.elementor-element-afc14fc > .elementor-widget-container { margin: 0 0 0 14px; padding: 0 0 0 15px; border-width: 0 0 0 1px; } html[dir=rtl] .elementor-13 .elementor-element.elementor-element-afc14fc .elementor-social-icon:not(:last-child) { margin-right: 0; margin-left: 15px; } html[dir=rtl] .elementor-13 .elementor-element.elementor-element-408b1b7 > .elementor-widget-container { margin: 0 15px 0 0; padding: 0 14px 0 0; border-width: 0 1px 0 0; } html[dir=rtl] .elementor-13 .elementor-element.elementor-element-408b1b7 .linklist-menu li.horizontal:after { right: auto; left: calc(-16px / 2); } html[dir=rtl] .elementor-13 .elementor-element.elementor-element-a2d3e6c > .elementor-widget-container { margin: 0 0 0 16px; } html[dir=rtl] .elementor-13 .elementor-element:is(.elementor-element-408b1b7, .elementor-element-2a87e5c) .list-items, html[dir=rtl] .elementor-13 .elementor-element:is(.elementor-element-408b1b7, .elementor-element-2a87e5c) .list-items * { text-align: right; justify-content: right; } /* RTL hero: the slide photos keep their subject on the right, so the caption stays on the clear left side; carry the scrim further right so right-aligned lines ending near the middle stay legible. */ html[dir=rtl] .page-home .iviewSlider::before, html[dir=rtl] .page-home .iview:not(:has(> .iviewSlider))::before { background: linear-gradient(90deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 78%); } /* Edition-switch toast on phones: one compact row (prompt, CTA, 44px close) instead of a 20%-of-viewport card. */ @media (max-width: 575px) { .fs-country-toast { padding: 6px 4px 6px 10px; } .fs-country-toast > div { align-items: center; gap: 8px; } /* long CTAs (e.g. "Zur Ausgabe für Deutschland wechseln") drop under the prompt instead of squeezing it */ .fs-country-toast > div > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .fs-country-toast p { flex: 1 1 130px; min-width: 0; font-size: 12px; line-height: 1.3; } .fs-country-toast .fs-country-toast__cta { margin-top: 0; padding: 8px 10px; } .fs-country-toast .fs-country-toast__close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; } } /* Full-screen menu overlay: hidden (opacity/visibility) but on-screen, so its lazy images loaded on every page. Not rendered until the theme runtime is up (only the theme can open it); then it is as before. */ html:not([data-olight-ready]) .box__menu--custom:not(.active) { content-visibility: hidden; } /* Currency signs (₹ on every page, ₴ ₪ ₺ zł in PDP price tables) from a 10 KB subset of Inter Tight latin-ext: declared after the theme's faces, so it is checked first for these characters and the 81 KB latin-ext file loads only for text that really needs it (e.g. Polish). Same font, same glyphs. */ @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/olight/fonts/inter-tight/inter-tight-currency.woff2) format("woff2"); unicode-range: U+0141-0142, U+20A0-20AB, U+20AD-20C0; } @font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/olight/fonts/inter-tight/inter-tight-currency-italic.woff2) format("woff2"); unicode-range: U+0141-0142, U+20A0-20AB, U+20AD-20C0; }