/* ------------------------------------------------------------------
* Header, footer and page shell.
*
* Two jobs:
*
* 1. Undo `html{background-color:#5b5b5b}`, which the source's captured
* stylesheet sets. With no page wrapper in the generated theme, that
* grey showed through every page — the "everything is grey" problem.
*
* 2. Style the rebuilt header and footer. The source ran Flatsome, whose
* icon font is not in this package, so the icons here are drawn with
* inline SVG instead of a webfont and need nothing extra to load.
*
* Accent colour is #1c6fc4 — the blue that replaced the site's reds.
* ---------------------------------------------------------------- */
:root {
--je-accent: #1c6fc4;
--je-accent-dark: #14559b;
--je-ink: #1a1a1a;
--je-bar: #000000;
--je-bar-text: #ffffff;
--je-muted: rgba(255, 255, 255, 0.66);
}
/* ---- accessibility helpers --------------------------------------
* Flatsome supplies these; without it the "Skip to content" link and
* every form label render as visible text at the top of the page.
* ---------------------------------------------------------------- */
.screen-reader-text,
.screen-reader-text span {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
position: absolute !important;
white-space: nowrap;
}
.skip-link {
position: absolute !important;
left: -9999px;
top: 0;
z-index: 999;
}
.skip-link:focus {
left: 8px;
top: 8px;
width: auto;
height: auto;
clip: auto;
clip-path: none;
padding: 10px 18px;
background: var(--je-accent);
color: #fff;
border-radius: 4px;
text-decoration: none;
}
/* ---- page shell -------------------------------------------------- */
html,
body {
background-color: #ffffff !important;
}
body {
color: var(--je-ink);
font-family: Lato, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#main {
display: block;
background: #ffffff;
min-height: 40vh;
}
/* The header rows use Flatsome's .container. Defining the width here too
means the header is laid out correctly even where that stylesheet is not
in play — scoped to the header so page content keeps its own container. */
.header-top > .container,
.header-top > .flex-row,
.header-main .header-inner,
.header-bottom > .flex-row {
max-width: 1220px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
width: 100%;
}
/* ---- top bar ----------------------------------------------------- */
.header-top {
background: var(--je-accent);
color: #fff;
min-height: 34px;
font-size: 13px;
}
.header-top .flex-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 34px;
}
.header-top ul {
display: flex;
align-items: center;
gap: 22px;
margin: 0;
padding: 0;
list-style: none;
}
.header-top a,
.header-top strong {
color: #fff;
text-decoration: none;
font-weight: 600;
letter-spacing: 0.02em;
}
.header-top a:hover {
color: #fff;
text-decoration: underline;
}
/* ---- main header ------------------------------------------------- */
.header-main {
background: #fff;
border-bottom: 1px solid #ececec;
}
.header-main .header-inner {
display: flex;
align-items: center;
gap: 24px;
min-height: 90px;
}
#logo {
flex: 0 0 auto;
max-width: 230px;
}
#logo a {
display: block;
line-height: 0;
}
#logo img {
max-height: 74px;
width: auto;
height: auto;
display: block;
}
.je-wordmark {
font-size: 24px;
font-weight: 800;
color: var(--je-accent);
line-height: 1.1;
letter-spacing: -0.01em;
}
.header-main .flex-grow {
flex: 1 1 auto;
min-width: 0;
}
.header-nav {
display: flex;
align-items: center;
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
.header-nav.nav-right {
justify-content: flex-end;
}
/* search box */
.header-search-form {
flex: 1 1 auto;
max-width: 620px;
}
.searchform .flex-row {
display: flex;
border: 2px solid var(--je-accent);
border-radius: 4px;
overflow: hidden;
background: #fff;
}
.searchform .search-field {
border: 0;
box-shadow: none;
height: 44px;
margin: 0;
padding: 0 14px;
width: 100%;
font-size: 15px;
background: #fff;
color: var(--je-ink);
}
.searchform .search-field:focus {
outline: 0;
box-shadow: none;
}
.searchform .ux-search-submit {
border: 0;
border-radius: 0;
background: var(--je-accent);
color: #fff;
height: 44px;
min-width: 56px;
margin: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.searchform .ux-search-submit:hover {
background: var(--je-accent-dark);
}
/* account + cart */
.header-nav .account-item a,
.header-nav .cart-item a {
display: flex;
align-items: center;
gap: 8px;
color: var(--je-ink);
text-decoration: none;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
}
.header-nav .account-item a:hover,
.header-nav .cart-item a:hover {
color: var(--je-accent);
}
.header-cart-total {
color: var(--je-accent);
}
/* ---- bottom navigation bar --------------------------------------- */
.header-bottom {
background: var(--je-bar);
min-height: 55px;
}
.header-bottom .flex-row {
display: flex;
align-items: center;
min-height: 55px;
}
.header-bottom-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.header-bottom-nav > li > a {
display: block;
padding: 10px 16px;
color: var(--je-bar-text);
text-decoration: none;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
border-radius: 3px;
transition: background 0.15s, color 0.15s;
}
.header-bottom-nav > li > a:hover,
.header-bottom-nav > li.current-menu-item > a,
.header-bottom-nav > li.current_page_item > a {
background: var(--je-accent);
color: #fff;
}
/* ---- icons (inline SVG, so no icon font is needed) ---------------- */
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 19px;
height: 19px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
vertical-align: middle;
flex: 0 0 auto;
}
.icon-search {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-user {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-shopping-cart {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-menu {
width: 26px;
height: 26px;
background-image: url('data:image/svg+xml;utf8,');
}
.icon-phone {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-envelop {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-map-pin-fill {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-angle-up {
background-image: url('data:image/svg+xml;utf8,');
}
.footer-wrapper [class^="icon-"],
.header-top [class^="icon-"] {
width: 16px;
height: 16px;
}
/* ---- back to top ------------------------------------------------- */
#top-link {
position: fixed;
right: 22px;
bottom: 90px;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--je-accent);
display: flex;
align-items: center;
justify-content: center;
z-index: 90;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
/* ---- mobile ------------------------------------------------------ */
.show-for-medium {
display: none;
}
.mobile-sidebar {
display: none;
}
@media (max-width: 849px) {
.hide-for-medium {
display: none !important;
}
.show-for-medium {
display: flex !important;
}
.header-main .header-inner {
min-height: 70px;
justify-content: space-between;
gap: 12px;
}
#logo img {
max-height: 52px;
}
.footer-widgets .row {
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.header-top .flex-row {
justify-content: center;
text-align: center;
}
}
@media (max-width: 549px) {
.footer-widgets .row {
grid-template-columns: 1fr;
}
}
/* The slide-out menu only exists as a target for the mobile button; it is
shown by the theme's own script, or by :target as a no-JS fallback. */
.mobile-sidebar:target,
.mobile-sidebar.is-open {
display: block;
position: fixed;
inset: 0 auto 0 0;
width: 300px;
max-width: 86vw;
background: #fff;
z-index: 200;
overflow-y: auto;
padding: 22px 18px;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.22);
}
.mobile-sidebar .nav-sidebar {
list-style: none;
margin: 18px 0 0;
padding: 0;
}
.mobile-sidebar .nav-sidebar > li > a {
display: block;
padding: 13px 4px;
border-bottom: 1px solid #eee;
color: var(--je-ink);
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
font-size: 13.5px;
letter-spacing: 0.03em;
}
.mobile-sidebar .nav-sidebar > li > a:hover {
color: var(--je-accent);
}
/* Mobile header rows are s too — kill the list markers. */
.mobile-nav,
.header-nav,
.nav {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-nav {
display: flex;
align-items: center;
gap: 10px;
}
.mobile-nav > li {
list-style: none;
}
.mobile-nav a {
display: flex;
align-items: center;
color: var(--je-ink);
text-decoration: none;
}
/* ==================================================================
* Footer — every class namespaced `je-`.
*
* The captured stylesheet owns .row / .col / .footer-* and sets
* `.col{width:100%}`, which collapsed the columns. Nothing here shares
* a name with it, so it cannot be overridden by accident.
* ================================================================ */
.je-footer {
background: #0b0b0b;
color: rgba(255, 255, 255, 0.68);
font-size: 14.5px;
line-height: 1.7;
position: relative;
margin-top: 60px;
}
.je-footer__grid {
max-width: 1220px;
margin: 0 auto;
padding: 58px 20px 40px;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 44px;
align-items: start;
}
.je-footer__col {
min-width: 0;
}
.je-footer__logo img,
.je-footer__logo .footer-logo-img {
max-width: 200px;
width: 100%;
height: auto;
display: block;
margin: 0 0 18px;
}
.je-footer__blurb {
margin: 0;
color: rgba(255, 255, 255, 0.68);
max-width: 42ch;
}
.je-footer__title {
color: #fff;
font-size: 15px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 12px;
padding: 0 0 10px;
position: relative;
}
.je-footer__title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 42px;
height: 3px;
border-radius: 2px;
background: var(--je-accent);
}
.je-footer__list {
list-style: none;
margin: 0;
padding: 0;
}
.je-footer__list li {
margin: 0 0 10px;
padding: 0;
list-style: none;
}
.je-footer__list a {
color: rgba(255, 255, 255, 0.68);
text-decoration: none;
transition: color 0.15s;
}
.je-footer__list a:hover {
color: #fff;
text-decoration: underline;
}
.je-footer__list--contact li {
display: flex;
align-items: flex-start;
gap: 11px;
margin-bottom: 14px;
}
.je-footer__list--contact i {
margin-top: 3px;
}
.je-footer__bar {
border-top: 1px solid rgba(255, 255, 255, 0.11);
background: #060606;
}
.je-footer__bar-inner {
max-width: 1220px;
margin: 0 auto;
padding: 17px 20px;
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}
.je-to-top {
position: fixed;
right: 22px;
bottom: 96px;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--je-accent);
display: flex;
align-items: center;
justify-content: center;
z-index: 90;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}
/* ---- mobile drawer ---- */
.je-drawer {
display: none;
}
.je-drawer.is-open {
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 320px;
max-width: 86vw;
background: #fff;
z-index: 200;
overflow-y: auto;
box-shadow: 4px 0 26px rgba(0, 0, 0, 0.25);
}
.je-drawer__inner {
padding: 22px 18px 40px;
}
.je-drawer__search {
margin-bottom: 18px;
}
.je-drawer__nav {
list-style: none;
margin: 0;
padding: 0;
}
.je-drawer__nav li {
list-style: none;
}
.je-drawer__nav a {
display: block;
padding: 14px 4px;
border-bottom: 1px solid #eee;
color: var(--je-ink);
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
font-size: 13.5px;
letter-spacing: 0.03em;
}
.je-drawer__nav a:hover {
color: var(--je-accent);
}
@media (max-width: 980px) {
.je-footer__grid {
grid-template-columns: 1fr 1fr;
gap: 34px;
}
}
@media (max-width: 560px) {
.je-footer__grid {
grid-template-columns: 1fr;
padding: 40px 18px 30px;
}
}
/* ---- top bar on phones -------------------------------------------
* The tagline is less use than a number you can tap, so the phone and
* email take its place below 850px.
* ---------------------------------------------------------------- */
.je-topbar-mobile {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.je-topbar-mobile li {
list-style: none;
}
.je-topbar-mobile a {
display: inline-flex;
align-items: center;
gap: 6px;
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 12.5px;
white-space: nowrap;
}
@media (max-width: 430px) {
/* Both will not fit on one line on a narrow phone. Wrapping to two lines
reads better than hiding the address behind a bare envelope icon. */
.je-topbar-mobile {
gap: 2px 14px;
padding: 5px 0;
}
.je-topbar-mobile a {
font-size: 12px;
}
}
/* ==================================================================
* Floating header + larger contact details
* ================================================================ */
/* Bigger, and with a little more room around them. */
.header-top {
min-height: 40px;
font-size: 14.5px;
}
.header-top .flex-row {
min-height: 40px;
}
.header-top a,
.header-top strong {
font-size: 14.5px;
font-weight: 700;
}
.header-top [class^="icon-"] {
width: 17px;
height: 17px;
}
.header-top ul {
gap: 26px;
}
/* ---- sticky ------------------------------------------------------
* The whole header rides along, shrinking slightly once the page has
* scrolled so it takes less of the screen.
* ---------------------------------------------------------------- */
#header.header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 120;
background: #fff;
transition: box-shadow 0.2s ease;
}
body.admin-bar #header.header {
top: 32px;
}
@media screen and (max-width: 782px) {
body.admin-bar #header.header {
top: 46px;
}
}
#header.is-stuck {
box-shadow: 0 2px 14px rgba(15, 23, 42, 0.13);
}
/* Shrink once scrolled: the announcement strip folds away and the logo
bar tightens, leaving the navigation to hand. */
#header.is-stuck .header-top {
max-height: 0;
min-height: 0;
overflow: hidden;
padding: 0;
opacity: 0;
transition: max-height 0.22s ease, opacity 0.18s ease;
}
#header .header-top {
max-height: 60px;
opacity: 1;
transition: max-height 0.22s ease, opacity 0.18s ease;
}
#header.is-stuck .header-main .header-inner {
min-height: 66px;
}
#header.is-stuck #logo img {
max-height: 50px;
transition: max-height 0.2s ease;
}
#logo img {
transition: max-height 0.2s ease;
}
#header.is-stuck .header-bottom {
min-height: 46px;
}
#header.is-stuck .header-bottom .flex-row {
min-height: 46px;
}
#header.is-stuck .header-bottom-nav > li > a {
padding-top: 8px;
padding-bottom: 8px;
}
@media (max-width: 849px) {
#header.is-stuck .header-main .header-inner {
min-height: 58px;
}
#header.is-stuck #logo img {
max-height: 42px;
}
}
/* ==================================================================
* Leftover orange accents
*
* The red-to-blue pass converted the reds. These are the oranges the
* source used on buttons and headings — #e59b53, #d38c48, #f0ad4e and
* friends — which stayed behind and now look out of place against an
* otherwise blue site. Targeted by element rather than by colour,
* because CSS cannot search and replace a value.
* ================================================================ */
.elementor-button,
.elementor-button-link,
a.elementor-button,
.elementor-widget-button .elementor-button,
.wp-block-button__link,
.button.primary,
input[type="submit"].button,
button.button:not(.je-filters__apply):not(.ux-search-submit) {
background-color: var(--je-accent, #1c6fc4) !important;
border-color: var(--je-accent, #1c6fc4) !important;
color: #fff !important;
}
.elementor-button:hover,
a.elementor-button:hover,
.wp-block-button__link:hover,
.button.primary:hover {
background-color: var(--je-accent-dark, #14559b) !important;
border-color: var(--je-accent-dark, #14559b) !important;
color: #fff !important;
}
/* Headings the source painted orange. */
.elementor-heading-title[style*="e59b53"],
.elementor-heading-title[style*="E59B53"],
.elementor-heading-title[style*="d38c48"],
.elementor-heading-title[style*="D38C48"],
.elementor-heading-title[style*="f0ad4e"],
.elementor-heading-title[style*="f0b849"] {
color: var(--je-accent, #1c6fc4) !important;
}
/* Inline styles the page builder wrote directly onto elements. */
[style*="background-color: #e59b53"],
[style*="background-color:#e59b53"],
[style*="background-color: #d38c48"],
[style*="background-color:#d38c48"],
[style*="background-color: #f0ad4e"],
[style*="background-color:#f0ad4e"] {
background-color: var(--je-accent, #1c6fc4) !important;
}
[style*="color: #e59b53"],
[style*="color:#e59b53"],
[style*="color: #d38c48"],
[style*="color:#d38c48"] {
color: var(--je-accent, #1c6fc4) !important;
}
/* A heading promoted from h2 to h1 keeps its original size, so the page
looks identical — only the document outline changes. */
h1.je-promoted-h1 {
font-size: 1.6em;
line-height: 1.3;
font-weight: 700;
margin: 1em 0 0.5em;
}
/* ==================================================================
* Mobile header corrections
*
* Two faults found by rendering it at 320–768px:
*
* 1. The top bar wraps to two lines on a narrow phone, but the
* max-height used for the sticky collapse was clipping the second
* line — the email address was cut in half.
* 2. There was no search box at all below 850px. The desktop one lives
* in the logo bar, which has no room on a phone, so the shop had no
* way to search on mobile.
* ================================================================ */
/* 1. Room for the top bar to wrap. It still collapses to nothing when
the header sticks; it just is not clipped when open. */
#header .header-top {
max-height: 220px;
}
/* 2. The mobile search row. */
.je-mobile-search {
display: none;
padding: 10px 16px 12px;
background: #fff;
border-bottom: 1px solid #ececec;
}
.je-mobile-search .searchform .flex-row {
border-width: 2px;
}
.je-mobile-search .search-field {
height: 42px;
font-size: 16px; /* 16px stops iOS zooming the page on focus */
}
.je-mobile-search .ux-search-submit {
height: 42px;
min-width: 52px;
}
@media (max-width: 849px) {
.je-mobile-search {
display: block;
}
/* Burger left, logo centred, cart right — the arrangement people
expect on a phone. */
.header-main .header-inner {
justify-content: space-between;
gap: 10px;
}
.header-main .show-for-medium.flex-left {
order: 1;
flex: 0 0 auto;
}
#logo {
order: 2;
flex: 1 1 auto;
max-width: none;
display: flex;
justify-content: center;
}
#logo img {
max-height: 46px;
margin: 0 auto;
}
.header-main .show-for-medium.flex-right {
order: 3;
flex: 0 0 auto;
}
/* The sticky header must not eat the screen on a phone. */
#header.is-stuck .je-mobile-search {
display: none;
}
}
/* Below 560px both details will not sit on one line, and stacking them
made the header 206px tall before any content. The phone is the one
worth a tap here; the email stays in the drawer and the footer. */
@media (max-width: 560px) {
.je-topbar-mobile {
gap: 0;
padding: 0;
}
.je-topbar-mobile li:nth-child(2) {
display: none;
}
.je-topbar-mobile a {
font-size: 13px;
}
.header-top,
.header-top .flex-row {
min-height: 34px;
}
}
/* A phone header should not eat a third of the screen. */
@media (max-width: 849px) {
.header-main .header-inner {
min-height: 60px;
}
.je-mobile-search {
padding: 8px 14px 10px;
}
}
/* Nothing may push the page sideways. */
html,
body {
overflow-x: hidden;
max-width: 100%;
}
/* The drawer carries the email, since the top bar drops it on small phones. */
.je-drawer__contact {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid #eee;
display: flex;
flex-direction: column;
gap: 12px;
}
.je-drawer__contact a {
display: flex;
align-items: center;
gap: 9px;
color: var(--je-ink, #1a1a1a);
text-decoration: none;
font-size: 14.5px;
font-weight: 700;
}
.je-drawer__contact [class^="icon-"] {
filter: brightness(0.3);
}
/* ==================================================================
* MOBILE HEADER (v2.3.1)
*
* The header measured 190px on a 375x812 phone — 23% of the screen, and
* sticky, so it never went away. It reflowed correctly, which is why
* measuring it for horizontal scroll said it was fine; it was not fine,
* because it was behaving as though it had desktop room.
*
* Two changes. At rest it is compact (about 130px), and it now carries
* both the phone and the email, which the old rules dropped below 560px.
* Once the page scrolls it collapses to the logo bar alone — about 56px —
* with search moved behind a toggle so it is still reachable.
* ================================================================ */
@media (max-width: 849px) {
/* ---- 1. top bar: compact, and both details present ---- */
.header-top,
.header-top .flex-row {
min-height: 30px;
}
.je-topbar-mobile {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 14px;
padding: 0;
min-width: 0;
}
/* Undo the old rule that hid the email outright below 560px. */
.je-topbar-mobile li {
min-width: 0;
display: block;
}
.je-topbar-mobile li:nth-child(2) {
display: block;
min-width: 0;
overflow: hidden;
}
.je-topbar-mobile a {
font-size: 11.5px;
font-weight: 700;
gap: 5px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.je-topbar-mobile i {
flex: 0 0 auto;
font-size: 12px;
}
/* ---- 2. logo bar ---- */
.header-main .header-inner {
min-height: 56px;
padding-top: 0;
padding-bottom: 0;
}
#logo img {
max-height: 40px;
}
/* ---- 3. search row ---- */
.je-mobile-search {
display: block;
padding: 7px 14px 8px;
}
.je-mobile-search .search-field {
height: 38px;
font-size: 16px; /* 16px or iOS zooms the page on focus */
}
.je-mobile-search .ux-search-submit {
height: 38px;
min-width: 46px;
}
/* ---- 4. collapse once the page moves ---- */
#header.is-stuck .header-top {
max-height: 0;
min-height: 0;
overflow: hidden;
opacity: 0;
border: 0;
transition: max-height 0.18s ease, opacity 0.14s ease;
}
#header.is-stuck .je-mobile-search {
display: none;
}
#header.is-stuck .header-main .header-inner {
min-height: 52px;
}
#header.is-stuck #logo img {
max-height: 34px;
}
/* ...but let the toggle bring search back. */
#header.is-stuck.je-search-open .je-mobile-search {
display: block;
}
.je-search-toggle-item {
display: block;
}
.je-search-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--je-ink, #1a1a1a);
}
.je-search-open .je-search-toggle {
color: var(--je-accent, #1c6fc4);
}
}
/* The toggle is only for phones — the desktop header has its own search. */
@media (min-width: 850px) {
.je-search-toggle-item {
display: none;
}
}
/* Very narrow phones (320-380px): both details still fit on one line, but
only just — measured at 292px of text in a 317px bar, which is too little
headroom to trust across fonts. Dropping a little type size and the gap
buys ~25px, and the bar gets real side padding so nothing touches the
screen edge. The email stays: hiding it was the old behaviour and it is
one of the two things the header is for. */
@media (max-width: 380px) {
.header-top .container,
.header-top .flex-row {
padding-left: 12px;
padding-right: 12px;
}
.je-topbar-mobile {
gap: 8px;
}
.je-topbar-mobile a {
font-size: 10.5px;
gap: 4px;
}
.je-topbar-mobile i {
font-size: 11px;
}
}