/* * EdenBoost header, menu and cart drawer (boards D-Header, T-Nav, T-Menu, T-Cart). Loaded site wide by * mu-plugins/eb-header.php while the new header is on; scoped under .ebh (header), .ebh-menu (phone * menu), .ebh-cd (cart drawer, inside Flatsome's #cart-popup). Phones first, desktop from 1024 px. * Platform colours and logos (--c, --i) and the widths at which platforms leave the row are printed * inline by the plugin. */ /* Manrope is self-hosted by the theme as a variable font but declared for 400 and 700 only, so 600 and 800 fell back to 700. Same files, the missing weights. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/manrope/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/manrope/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(../../fonts/manrope/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(../../fonts/manrope/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Tokens, sticky offset for anchors ---------- */ .ebh-on { --ebh-p: #1fa8e6; --ebh-cyan: #00c2d9; --ebh-pd: #0b7fb3; --ebh-navy: #0f1f33; --ebh-ink: #0f1f33; --ebh-text: #34465a; --ebh-muted: #56687b; --ebh-line: #e2ecf3; --ebh-soft: #f4f9fc; --ebh-tint: #eef8fd; --ebh-green: #157347; --ebh-font: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ebh-focus: 0 0 0 3px rgba(31, 168, 230, .55); } :root { --flatsome--header--sticky-height: 62px; } @media (min-width: 1024px) { :root { --flatsome--header--sticky-height: 76px; } } html.ebh-lock { overflow: hidden; } /* ---------- Resets against the theme's global element styles ---------- */ .ebh, .ebh-menu, .ebh-cd { font-family: var(--ebh-font); color: var(--ebh-text); line-height: 1.35; letter-spacing: normal; text-transform: none; -webkit-font-smoothing: antialiased; } .ebh *, .ebh-menu *, .ebh-cd * { box-sizing: border-box; } .ebh a, .ebh-menu a, .ebh-cd a { color: inherit; text-decoration: none; } .ebh a:hover, .ebh-menu a:hover, .ebh-cd a:hover { color: inherit; } .ebh ul, .ebh-menu ul, .ebh-cd ul { list-style: none; margin: 0; padding: 0; } .ebh li, .ebh-menu li, .ebh-cd li { margin: 0; padding: 0; } .ebh p, .ebh-menu p, .ebh-cd p { margin: 0; } .ebh strong, .ebh-menu strong, .ebh-cd strong { font-weight: 800; } .ebh img, .ebh-menu img, .ebh-cd img { max-width: none; } .ebh button, .ebh-menu button, .ebh-cd button { margin: 0; padding: 0; min-height: 0; width: auto; max-width: none; border: 0; border-radius: 0; background: none; box-shadow: none; text-shadow: none; font: inherit; color: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; vertical-align: middle; cursor: pointer; -webkit-appearance: none; appearance: none; } .ebh input[type="search"], .ebh-menu input[type="search"] { margin: 0; padding: 0; height: 100%; width: 100%; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font: inherit; font-size: 15.5px; color: var(--ebh-ink); -webkit-appearance: none; appearance: none; } .ebh input[type="search"]:focus, .ebh-menu input[type="search"]:focus { box-shadow: none; outline: 0; background: transparent; color: var(--ebh-ink); } .ebh input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .ebh input[type="search"]::placeholder, .ebh-menu input[type="search"]::placeholder { color: #8a9bb0; opacity: 1; } .ebh :focus-visible, .ebh-menu :focus-visible, .ebh-cd :focus-visible { outline: 3px solid rgba(31, 168, 230, .55); outline-offset: 2px; } .ebh .ebh-ic, .ebh-menu .ebh-ic, .ebh-cd .ebh-ic { display: block; flex: none; } .ebh-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Platform logos (mask) and badges ---------- */ .ebh-i { display: block; flex: none; width: 16px; height: 16px; background: var(--c, var(--ebh-pd)); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .ebh-i-more { background: linear-gradient(135deg, #1fa8e6, #00c2d9); -webkit-mask: none; mask: none; border-radius: 4px; } .ebh-b { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--c, var(--ebh-pd)); } .ebh-b .ebh-i { width: 18px; height: 18px; background: #fff; } .ebh-b40 { width: 40px; height: 40px; border-radius: 12px; } .ebh-b40 .ebh-i { width: 20px; height: 20px; } .ebh-b44 { width: 44px; height: 44px; border-radius: 13px; } .ebh-b44 .ebh-i { width: 22px; height: 22px; } .ebh-b48 { width: 48px; height: 48px; border-radius: 14px; } .ebh-b48 .ebh-i { width: 26px; height: 26px; } .ebh-b-none { background: linear-gradient(135deg, #1fa8e6, #00c2d9); } .ebh-lbl { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ebh-muted); } a.ebh-lbl:hover { color: var(--ebh-pd); } /* ---------- Header: sticky, the top bar scrolls away ---------- */ .ebh { position: -webkit-sticky; position: sticky; top: -32px; z-index: 990; display: block; width: 100%; background: #fff; } @media (min-width: 601px) { .admin-bar .ebh { top: calc(var(--wp-admin--admin-bar--height, 32px) - 32px); } } .ebh-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 16px; } .ebh-d { display: none !important; } /* Top bar */ .ebh-top { height: 32px; background: #0f1f33; color: rgba(255, 255, 255, .88); font-size: 12.5px; font-weight: 600; overflow: hidden; } .ebh-top-in { height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; } .ebh-top a { color: inherit; } .ebh-top strong { color: #fff; font-weight: 800; } .ebh-rt { display: flex; align-items: center; gap: 8px; } .ebh-top-sep { opacity: .5; } .ebh-rt-n { display: none; } .ebh-stars { color: #f5b623; letter-spacing: 1px; } .ebh-stars-off { color: rgba(255, 255, 255, .3); } /* Main row (phones: menu, logo in the middle, search, cart) */ .ebh-main { position: relative; background: #fff; border-bottom: 1px solid var(--ebh-line); } .ebh-main-in { height: 62px; display: flex; align-items: center; gap: 4px; padding: 0 8px; } .ebh-btn { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ebh-ink); } .ebh-logo { display: block; flex: none; margin: 0 auto; line-height: 0; } .ebh-logo-img { display: block; width: auto; height: 28px; } .ebh-logo-txt { font-size: 20px; font-weight: 800; color: var(--ebh-ink); } .ebh-nav { display: none; } .ebh-acts { display: flex; align-items: center; gap: 4px; flex: none; } .ebh-acts .ebh-sb .ebh-ic { width: 22px; height: 22px; } .ebh-acc { display: none; } .ebh-cart { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #0b7fb3; color: #fff; font-size: 14px; font-weight: 800; } .ebh a.ebh-cart, .ebh a.ebh-cart:hover { color: #fff; } .ebh-cart:hover { background: #096d9a; } .ebh-cart .ebh-ic { width: 21px; height: 21px; } .ebh-cart-total { display: none; } .ebh-cart-n { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #0f1f33; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; } .ebh-cart-n.is-empty { display: none; } /* Panels under the header (dropdowns, search): shown by the script, or by hover without it */ .ebh-pop { display: none; } .ebh-pop.is-open { display: block; } .ebh-dim { position: fixed; inset: 0; z-index: 989; background: rgba(15, 31, 51, .18); display: none; } .ebh-dim.is-on { display: block; } /* Search panel */ .ebh-search { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--ebh-line); box-shadow: 0 24px 48px rgba(15, 31, 51, .12); max-height: calc(100vh - 62px); overflow-y: auto; } .ebh-search-in { max-width: 820px; margin: 0 auto; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 16px; } .ebh-sf { position: relative; display: flex; align-items: center; gap: 8px; margin: 0; } .ebh-sf-l { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; margin: 0; border-radius: 14px; border: 1.5px solid #c9dbe8; background: var(--ebh-soft); color: var(--ebh-muted); font-weight: 400; cursor: text; } .ebh-sf-l:focus-within { border-color: #1fa8e6; box-shadow: 0 0 0 3px rgba(31, 168, 230, .18); background: #fff; } .ebh-sf-l .ebh-ic { width: 19px; height: 19px; } .ebh .ebh-sf-go { flex: none; height: 48px; padding: 0 18px; border-radius: 14px; background: #0b7fb3; color: #fff; font-size: 15px; font-weight: 800; } .ebh .ebh-sf-go:hover { background: #096d9a; } .ebh-sf .live-search-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; background: #fff; border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 31, 51, .16); text-align: left; overflow: hidden; } .ebh-sf .autocomplete-suggestions { max-height: 60vh; overflow-y: auto; } .ebh-sf .autocomplete-suggestion { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ebh-line); font-size: 14.5px; color: var(--ebh-ink); cursor: pointer; } .ebh-sf .autocomplete-suggestion:last-child { border-bottom: 0; } .ebh-sf .autocomplete-suggestion.autocomplete-selected { background: var(--ebh-tint); } .ebh-sf .autocomplete-suggestion img { width: 36px; height: 36px; margin: 0; border-radius: 10px; object-fit: cover; } .ebh-sf .autocomplete-suggestion .search-name { flex: 1; margin: 0; padding: 0; } .ebh-sf .autocomplete-suggestion .search-price { font-size: 13px; color: var(--ebh-muted); margin: 0; padding: 0; } .ebh-sf .autocomplete-no-suggestion { padding: 12px 14px; font-size: 14px; color: var(--ebh-muted); } /* Header search panel: the suggestions sit in the flow under the field, so the panel grows with them (the panel scrolls, and it clipped the absolutely placed list after one or two results). The list scrolls inside itself, so the search field stays in view. */ .ebh-search .ebh-sf { flex-wrap: wrap; } .ebh-search .ebh-sf .live-search-results { position: static; flex: 0 0 100%; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; } .ebh-search .ebh-sf .autocomplete-suggestions { position: static !important; width: auto !important; max-height: min(60vh, 520px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #fff; border: 1px solid var(--ebh-line); border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 31, 51, .12); } /* Chips ("Meistgekauft") */ .ebh-sec { display: flex; flex-direction: column; gap: 8px; } .ebh-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ebh-chip { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--ebh-line); background: #fff; font-size: 13.5px; font-weight: 800; color: var(--ebh-ink); white-space: nowrap; } .ebh-chip:hover { border-color: #1fa8e6; } .ebh-chip .ebh-i { width: 18px; height: 18px; } /* ---------- Service rows (desktop dropdown and phone accordion) ---------- */ .ebh-s { position: relative; display: flex; align-items: center; gap: 12px; } .ebh-s-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex-grow: 1; } .ebh-s-l { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .ebh-s-a { font-size: 15px; font-weight: 800; color: var(--ebh-ink); } .ebh-s-a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; } .ebh-s-a:focus-visible { outline: 0; } .ebh-s-a:focus-visible::after { box-shadow: var(--ebh-focus); } .ebh-s-p { font-size: 13px; color: var(--ebh-muted); white-space: nowrap; } .ebh-fl { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; align-self: flex-start; } .ebh-f { display: block; line-height: 0; border-radius: 50%; } .ebh-f img { display: block; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(15, 31, 51, .1); } .ebh-f:hover img { box-shadow: 0 0 0 2px #1fa8e6; } .ebh-fm { font-size: 12px; font-weight: 700; color: var(--ebh-muted); margin-left: 2px; } .ebh-pop-tag { flex: none; padding: 2px 8px; border-radius: 999px; background: #0f1f33; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .ebh-all { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: #0b7fb3; } .ebh a.ebh-all, .ebh-menu a.ebh-all { color: #0b7fb3; } .ebh-all:hover { text-decoration: underline; } /* ---------- Phone menu drawer (board T-Menu) ---------- */ .ebh-menu { display: none; position: fixed; inset: 0; z-index: 1010; } .ebh-menu.is-open { display: block; } .ebh-menu-bg { position: absolute; inset: 0; background: rgba(15, 31, 51, .45); } .ebh-menu-p { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; max-width: 420px; background: #fff; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-shadow: 12px 0 32px rgba(15, 31, 51, .2); animation: ebh-in .22s ease-out; } @keyframes ebh-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } } .ebh-menu-h { position: sticky; top: 0; z-index: 2; height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; background: #fff; border-bottom: 1px solid var(--ebh-line); } .ebh-menu-h .ebh-logo { margin: 0; } .ebh-menu-b { padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 18px; } .ebh-acc-l { gap: 0; } .ebh-acc-l > .ebh-lbl { margin-bottom: 6px; } .ebh-ma { border-bottom: 1px solid var(--ebh-line); } .ebh-menu .ebh-ma-b { width: 100%; min-height: 58px; padding: 8px 2px; display: flex; align-items: center; gap: 12px; text-align: left; } .ebh-ma-t { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; } .ebh-ma-t strong { font-size: 16px; color: var(--ebh-ink); } .ebh-ma-t span { font-size: 13px; color: var(--ebh-muted); } .ebh-ma-b .ebh-ic-chev { color: var(--ebh-muted); transition: transform .15s; } .ebh-ma-b[aria-expanded="true"] .ebh-ic-chev { transform: rotate(180deg); } .ebh-ma-p { display: none; flex-direction: column; gap: 2px; padding: 0 0 12px 46px; } .ebh-ma-p.is-open { display: flex; } .ebh-ma-p .ebh-sl { display: flex; flex-direction: column; gap: 2px; } .ebh-ma-p .ebh-s { gap: 8px; min-height: 42px; padding: 4px 84px 4px 10px; border-radius: 12px; } .ebh-ma-p .ebh-s.is-top, .ebh-ma-p .ebh-s:first-child { background: var(--ebh-soft); } .ebh-ma-p .ebh-s-b, .ebh-ma-p .ebh-pop-tag { display: none; } .ebh-ma-p .ebh-s-a { font-size: 15px; font-weight: 700; } .ebh-ma-p .ebh-s-a::after { border-radius: 12px; } .ebh-ma-p .ebh-s-p { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } .ebh-ma-p .ebh-f img { width: 15px; height: 15px; } .ebh-ma-p .ebh-all { padding: 8px 10px 0; } .ebh-ma-p .ebh-all .ebh-ic { width: 15px; height: 15px; } .ebh-mm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .ebh-mm a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 14px; border: 1px solid var(--ebh-line); background: #fff; font-size: 12.5px; font-weight: 700; color: var(--ebh-ink); text-align: center; } .ebh-mm a:hover { border-color: #1fa8e6; } .ebh-i24 { width: 24px; height: 24px; } .ebh-links { display: flex; flex-direction: column; border-top: 1px solid var(--ebh-line); padding-top: 6px; } .ebh-links a { display: flex; align-items: center; gap: 12px; min-height: 50px; font-size: 15.5px; font-weight: 700; color: var(--ebh-ink); } .ebh-links .ebh-ic { color: #0b7fb3; } .ebh-chatbox { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; background: var(--ebh-tint); border: 1px solid #cfe6f4; } .ebh-chatbox-t { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--ebh-ink); } .ebh-chatbox-t .ebh-dot { width: 8px; height: 8px; background: #1c9a5b; } .ebh-chatbox-t:hover { text-decoration: underline; } .ebh-chatbox-h { font-size: 14px; line-height: 1.5; color: var(--ebh-text); } .ebh-chatbox-r { font-size: 13.5px; color: var(--ebh-muted); } .ebh-chatbox-r .ebh-stars { color: #f5a623; } .ebh-chatbox-r .ebh-stars-off { color: #d5dee7; } .ebh-chatbox-r strong { color: var(--ebh-ink); } .ebh-dot { flex: none; display: block; width: 7px; height: 7px; border-radius: 50%; background: #3ad07a; } .ebh-menu .ebh-sf .live-search-results { position: static; margin-top: 6px; box-shadow: none; border: 1px solid var(--ebh-line); } .ebh-menu .ebh-sf .live-search-results:empty { display: none; } @media (max-width: 359px) { .ebh-top .ebh-stars { display: none; } } /* ---------- Desktop (1024 px and up) ---------- */ @media (min-width: 1024px) { .ebh { top: -36px; } .admin-bar .ebh { top: calc(var(--wp-admin--admin-bar--height, 32px) - 36px); } .ebh-wrap { padding: 0 24px; } .ebh-d { display: flex !important; } .ebh-m { display: none !important; } .ebh-top { height: 36px; font-size: 13px; color: rgba(255, 255, 255, .86); } .ebh-top-in { justify-content: space-between; gap: 24px; } .ebh-rt { gap: 6px; color: #fff; } .ebh a.ebh-rt { color: #fff; } .ebh-rt-n { display: inline; } .ebh-facts { align-items: center; gap: 22px; } .ebh-fact { display: flex; align-items: center; gap: 6px; } .ebh-fact .ebh-ic { color: #5fd0f5; } .ebh-svc { align-items: center; gap: 18px; } .ebh-svc a:hover { color: #fff; text-decoration: underline; } .ebh-chat { display: flex; align-items: center; gap: 6px; } .ebh-main { border-bottom: 1px solid var(--ebh-line); box-shadow: 0 2px 10px rgba(15, 31, 51, .04); } .ebh-main-in { height: 76px; gap: 28px; padding: 0 24px; } .ebh-mb { display: none; } .ebh-logo { margin: 0; } .ebh-logo-img { height: 34px; } .ebh-nav { display: block; flex: 1 1 auto; min-width: 0; } .ebh-nl { display: flex; align-items: center; gap: 2px; } .ebh-ni { position: static; } .ebh .ebh-nb { height: 44px; padding: 0 12px; border-radius: 12px; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--ebh-ink); white-space: nowrap; } .ebh .ebh-nb:hover { background: var(--ebh-soft); } .ebh .ebh-nb[aria-expanded="true"] { background: #eef8fd; color: #0b7fb3; } .ebh .ebh-nb[aria-expanded="true"] .ebh-i:not(.ebh-i-more) { background: #0b7fb3; } .ebh-nb .ebh-ic-chev { opacity: .55; } .ebh-acts { gap: 8px; } .ebh .ebh-sb, .ebh .ebh-acc { display: flex; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--ebh-line); background: #fff; } .ebh .ebh-sb:hover, .ebh .ebh-acc:hover { border-color: #c9dbe8; background: var(--ebh-soft); } .ebh .ebh-sb[aria-expanded="true"] { border-color: #1fa8e6; background: #eef8fd; color: #0b7fb3; } .ebh-acts .ebh-sb .ebh-ic { width: 19px; height: 19px; } .ebh-cart { width: auto; height: 42px; padding: 0 14px; gap: 8px; } .ebh-cart .ebh-ic { width: 19px; height: 19px; } .ebh-cart-total { display: block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ebh-cart-n { top: -7px; right: -7px; min-width: 20px; height: 20px; font-size: 11.5px; } /* Dropdowns: attached to the bottom of the header row */ .ebh-dd { position: absolute; left: 0; right: 0; top: 100%; z-index: 2; } .ebh-dd > .ebh-pop-in { width: calc(100% - 48px); max-width: 1200px; margin: 0 auto; background: #fff; border: 1px solid var(--ebh-line); border-top: 0; border-radius: 0 0 22px 22px; box-shadow: 0 24px 48px rgba(15, 31, 51, .12); max-height: calc(100vh - 100px); overflow-y: auto; } .ebh-dd-in { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; padding: 26px 28px 22px; } .ebh-dd-l { display: flex; flex-direction: column; gap: 14px; } .ebh-dd-h { display: flex; align-items: center; justify-content: space-between; } .ebh-dd-sort { font-size: 13px; color: var(--ebh-muted); } .ebh-dd .ebh-sl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; } .ebh-dd .ebh-s { padding: 10px 12px; border-radius: 14px; border: 1px solid transparent; background: #fff; } .ebh-dd .ebh-s.is-top { background: #f4f9fc; } .ebh-dd .ebh-s:hover { border-color: var(--ebh-line); background: var(--ebh-soft); } .ebh-dd .ebh-all { align-self: flex-start; font-size: 14.5px; } .ebh-tc { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 18px; background: radial-gradient(260px 160px at 100% 0%, rgba(0, 194, 217, .16), transparent 70%), linear-gradient(160deg, #f4f9fc 0%, #e6f3fb 100%); border: 1px solid var(--ebh-line); align-self: start; } .ebh-tc-tag { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ebh-ink); } .ebh-tc-n { font-size: 20px; line-height: 1.2; color: var(--ebh-ink); } .ebh-tc-p { font-size: 15px; color: var(--ebh-text); } .ebh-tc-p strong { font-size: 18px; color: var(--ebh-ink); } .ebh-tc-note { font-size: 13px; color: var(--ebh-muted); } .ebh-tc-go { margin-top: 4px; height: 44px; border-radius: 13px; background: #0b7fb3; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; } .ebh a.ebh-tc-go, .ebh a.ebh-tc-go:hover { color: #fff; } .ebh-tc-go:hover { background: #096d9a; } .ebh-more-in { padding: 24px 28px; display: flex; flex-direction: column; gap: 14px; } .ebh-mg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .ebh-mx { display: none; } .ebh-mc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ebh-line); background: #fff; } .ebh-mc:hover { border-color: #1fa8e6; box-shadow: 0 8px 24px rgba(15, 31, 51, .06); } .ebh-mc-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ebh-mc-t strong { font-size: 15px; color: var(--ebh-ink); } .ebh-mc-t span { font-size: 13px; color: var(--ebh-muted); } .ebh-search { max-height: calc(100vh - 100px); } .ebh-search-in { padding: 22px 24px 24px; } /* Without the script: hover or keyboard focus opens a dropdown */ html:not(.ebh-js) .ebh-ni:hover > .ebh-dd, html:not(.ebh-js) .ebh-ni:focus-within > .ebh-dd { display: block; } /* The drawer is for phones and tablets */ .ebh-menu, .ebh-menu.is-open { display: none; } } @media (min-width: 1024px) and (max-width: 1339px) { .ebh-fact3 { display: none; } } /* ---------- Cart drawer (board T-Cart), inside Flatsome's off-canvas #cart-popup ---------- */ /* Flatsome sets --drawer-width in an inline style printed after this file, so these selectors are stronger. */ body.ebh-on .off-canvas-cart .mfp-content, body.ebh-on .off-canvas .mfp-content.off-canvas-cart { --drawer-width: min(360px, 100vw); width: var(--drawer-width); background: #fff !important; box-shadow: -12px 0 32px rgba(15, 31, 51, .2); padding: 0; } .mfp-bg.off-canvas-cart { background: #0f1f33; } .mfp-bg.off-canvas-cart.mfp-ready { opacity: .45; } /* The drawer has its own close button. Flatsome puts data-class on .mfp-content, but its close button sits outside it (in .mfp-container), so target the popup that holds our drawer. */ .mfp-wrap:has(.ebh-cartpop) .mfp-close { display: none !important; } #cart-popup.ebh-cartpop { padding: 0; margin: 0; } #cart-popup.ebh-cartpop .widget_shopping_cart, #cart-popup.ebh-cartpop .widget_shopping_cart_content { display: block; margin: 0; padding: 0; } .ebh-cd { min-height: 100%; display: flex; flex-direction: column; background: #fff; font-size: 15px; } .ebh-cd-h { position: sticky; top: 0; z-index: 2; height: 62px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 18px; background: #fff; border-bottom: 1px solid var(--ebh-line); } .ebh-cd-title { display: flex; align-items: baseline; gap: 8px; } .ebh-cd-title strong { font-size: 18px; color: var(--ebh-ink); } .ebh-cd-title span { font-size: 14px; color: var(--ebh-muted); } .ebh-cd .ebh-btn { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ebh-ink); } .ebh-cd-b { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 14px; } .ebh-cd .ebh-cl { display: flex; flex-direction: column; gap: 14px; margin: 0; } .ebh-cd .ebh-ci { position: relative; display: flex; gap: 12px; padding: 12px; margin: 0; min-height: 0; border-radius: 16px; border: 1px solid var(--ebh-line); background: #fff; list-style: none; } .ebh-ci-t { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; } .ebh-cd .ebh-ci-n { font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--ebh-ink); } .ebh-cd a.ebh-ci-n:hover { color: #0b7fb3; } .ebh-ci-pk { font-size: 14px; color: var(--ebh-text); } .ebh-ci-pk strong { color: var(--ebh-ink); } .ebh-ci-bonus { color: #157347; font-weight: 800; } .ebh-ci-tg { font-size: 12.5px; color: var(--ebh-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ebh-ci-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 6px; } .ebh-ci-pr { font-size: 15px; color: var(--ebh-ink); white-space: nowrap; } .ebh-cd a.ebh-ci-rm, .ebh-cd a.remove.ebh-ci-rm { position: static; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 10px; border: 1px solid var(--ebh-line); background: #fff; color: var(--ebh-muted); font-size: 0; line-height: 1; opacity: 1; } .ebh-cd a.ebh-ci-rm:hover { border-color: #e0b4b4; color: #b42318; background: #fff5f5; } .ebh-cd-empty { margin: 0; padding: 16px; border-radius: 14px; background: var(--ebh-soft); font-size: 15px; color: var(--ebh-muted); text-align: center; } .ebh-cd-sum { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--ebh-tint); border: 1px solid #d5e6f1; } .ebh-cd-row { display: flex; justify-content: space-between; align-items: baseline; } .ebh-cd-row span { font-size: 15px; font-weight: 800; color: var(--ebh-ink); } .ebh-cd-row strong { font-size: 18px; color: var(--ebh-ink); } .ebh-cd-pts { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #5a4300; } .ebh-cd-pts .ebh-star { flex: none; display: block; } .ebh-cd-pts strong { color: #5a4300; } .ebh-cd a.ebh-cd-go { height: 54px; border-radius: 16px; background: #0b7fb3; color: #fff; font-size: 17px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 10px 24px rgba(11, 127, 179, .28); } .ebh-cd a.ebh-cd-go:hover { background: #096d9a; color: #fff; } .ebh-cd a.ebh-cd-view { align-self: center; font-size: 14px; font-weight: 800; color: #0b7fb3; } .ebh-cd a.ebh-cd-view:hover { text-decoration: underline; } .ebh-cd .woocommerce-mini-cart__buttons { margin: 0; padding: 0; border: 0; } .ebh-cd-prom { display: flex; flex-direction: column; gap: 8px; } .ebh-cd-prom li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--ebh-text); } .ebh-cd-pi { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ebh-tint); color: #0b7fb3; display: flex; align-items: center; justify-content: center; } .ebh-cd-pay { display: flex; flex-wrap: wrap; gap: 5px; } .ebh-cd-pay span { padding: 3px 8px; border-radius: 8px; background: #fff; border: 1px solid var(--ebh-line); font-size: 12px; font-weight: 700; color: var(--ebh-text); } .ebh-cd-x-sec { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--ebh-line); padding-top: 14px; } .ebh-cd-x-t { font-size: 15px; font-weight: 800; color: var(--ebh-ink); } .ebh-cd-x-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ebh-xc { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; border: 1px solid var(--ebh-line); background: #fff; } .ebh-xc:hover { border-color: #1fa8e6; } .ebh-xc > strong { font-size: 14px; line-height: 1.3; color: var(--ebh-ink); } .ebh-xc-p { font-size: 13px; color: var(--ebh-text); } .ebh-xc-p strong { font-size: 15px; color: var(--ebh-ink); } .ebh-xc-go { margin-top: 2px; height: 34px; border-radius: 10px; border: 1.5px solid #cfe0ec; color: #0b7fb3; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .ebh-cd .blockUI.blockOverlay { border-radius: 16px; } @media (prefers-reduced-motion: reduce) { .ebh-menu-p { animation: none; } .ebh-ma-b .ebh-ic-chev { transition: none; } }