/* =====================================================================
   Sharp-Rite — header, logo and footer
   Scoped to body.sr-header / body.sr-logo / body.sr-footer, so each is
   an independent choice and Flatsome's own header settings, layout and
   menus keep working exactly as configured.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Header
   ------------------------------------------------------------------- */

/* Info strip. Its background and text colours come from Theme Options
   ▸ Header ▸ Top Bar, as do capitalisation, dividers and which items
   appear. Only spacing and button shape are set here. */
body.sr-header #top-bar{min-height:38px}
body.sr-header #top-bar .nav>li>a:hover{opacity:1}
body.sr-header #top-bar .header-divider{opacity:1}
body.sr-header #top-bar .social-icons .button.is-outline:hover{transform:none}
body.sr-header #top-bar .account-item .button,
body.sr-header #top-bar .cart-item .button,
body.sr-header #top-bar .nav-top-link{background:transparent!important}

/* The bar floats over the page with nothing behind it, so page content
   scrolls underneath it. Flatsome's header background layers are all
   cleared; the white bar below is the only thing that paints. */
body.sr-header #header .header-main,
body.sr-header #header #masthead.header-main{
	background:transparent!important;background-color:transparent!important;
	background-image:none!important;box-shadow:none!important;
	height:auto!important;padding:0;
}
/* The theme is set to a full-width header, so the white bar is inset
   here rather than relying on Flatsome's container width. */
/* Flatsome's full-width transparent header forces max-width, height and
   margins on this row, and paints .header-bg-container over it, so both
   are pinned down here. */
/* Flatsome stacks three background layers behind the header
   (.header-bg-container, .header-bg-image and .header-bg-color).
   All three have to be cleared or one of them paints a full-width
   band behind the floating bar. */
body.sr-header #header .header-bg-container,
body.sr-header #header .header-bg-container.fill,
body.sr-header #header .header-bg-image,
body.sr-header #header .header-bg-image.fill,
body.sr-header #header .header-bg-color,
body.sr-header #header .header-bg-color.fill{
	background-color:transparent!important;background-image:none!important;box-shadow:none!important;
}
body.sr-header #header .header-main .header-inner.flex-row{
	position:relative;z-index:2;
	background:var(--sr-surface)!important;
	border-radius:var(--sr-r-lg)!important;
	box-shadow:0 10px 34px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.06)!important;
	max-width:1560px!important;width:calc(100% - 56px)!important;
	margin:16px auto!important;
	/* The bar grows to fit whatever logo size is set in Theme Options
	   ▸ Header ▸ Logo, rather than imposing a height of its own. */
	height:auto!important;min-height:66px!important;
	padding-top:5px!important;padding-bottom:5px!important;
	padding-left:24px!important;padding-right:18px!important;overflow:visible!important;
	transition:border-radius .2s,box-shadow .2s,margin .2s,height .2s;
}
/* Everything in the bar centres on its vertical midline, in both the
   normal and stuck states. */
body.sr-header #header .header-main .header-inner.flex-row{align-items:center!important}
/* Only the row's alignment is touched. The columns keep whatever
   display Flatsome gives them, so .show-for-medium / .hide-for-medium
   still hide and show at the right breakpoints. */
body.sr-header #header .header-main .header-inner.flex-row>.flex-col{
	min-height:0!important;height:auto!important;align-self:center;
}
/* The bar is always white, but Flatsome colours header links white on
   pages set to a transparent or dark header — which made the menu and
   search icons invisible there. The cart and account buttons keep their
   own colours. */
body.sr-header #header .header-main .header-inner .nav>li:not(.cart-item):not(.account-item)>a,
body.sr-header #header .header-main .header-inner .nav>li:not(.cart-item):not(.account-item)>a i,
body.sr-header #header .header-main .header-inner .nav>li:not(.cart-item):not(.account-item)>a svg,
body.sr-header #header .header-main .header-inner .mobile-nav>li:not(.cart-item):not(.account-item)>a,
body.sr-header #header .header-main .header-inner .mobile-nav>li:not(.cart-item):not(.account-item)>a i,
body.sr-header #header .header-main .header-inner .off-canvas-toggle:not(.cart-item),
body.sr-header #header .header-main .header-inner .header-search-form a,
body.sr-header #header .header-main .header-inner .icon-menu,
body.sr-header #header .header-main .header-inner .icon-search{
	color:var(--sr-ink)!important;text-shadow:none!important;opacity:1;
}
body.sr-header #header .header-main .header-inner .nav>li>a svg{fill:currentColor}
/* The menu toggle sits outside the nav list on some header layouts, so
   it is matched on its own attribute rather than by position. */
body.sr-header #header .header-main .header-inner [data-open="#main-menu"],
body.sr-header #header .header-main .header-inner [data-open="#main-menu"] i,
body.sr-header #header .header-main .header-inner [data-open="#main-menu"] span,
body.sr-header #header.transparent .header-main .header-inner [data-open="#main-menu"],
body.sr-header #header.transparent .header-main .header-inner [data-open="#main-menu"] i{
	color:var(--sr-ink)!important;background:transparent!important;text-shadow:none!important;
}
body.sr-header #header .header-main .header-inner .nav{align-items:center!important}
body.sr-header #header .header-main .header-inner .nav>li{display:flex;align-items:center}
/* Flatsome offsets the nav upward to centre it against the header
   height set in Theme Options; the bar sets its own height, so that
   offset is cleared and the row centres normally. */
body.sr-header #header .header-main .header-inner .nav,
body.sr-header #header .header-main .header-inner .flex-col>.nav{
	margin-top:0!important;margin-bottom:0!important;
	top:auto!important;bottom:auto!important;transform:none!important;
}
body.sr-header #header .header-wrapper.stuck .header-main{background:transparent!important;height:auto!important}
/* Flatsome's header shadow (Theme Options ▸ Header) draws a hairline
   across the full page width under the floating bar. The bar carries its
   own shadow, so the wrapper's is removed. */
body.sr-header #header .header-wrapper,
body.sr-header #header .header-wrapper.stuck,
body.sr-header #header .header-wrapper.stuck .header-bg-container{box-shadow:none!important}
body.sr-header #header .header-wrapper.stuck .header-main .header-inner.flex-row{
	margin-top:10px!important;margin-bottom:10px!important;
	height:auto!important;min-height:58px!important;padding-top:6px!important;padding-bottom:6px!important;
}
body.sr-header #header .header-wrapper.stuck .header-main .header-inner.flex-row>.flex-col{
	min-height:0!important;height:auto!important;align-self:center;
}
body.sr-header #header .header-wrapper.stuck .header-main .header-inner.flex-row{align-items:center!important}

/* Nav links become pills. The menu itself, its items and its order are
   still whatever is assigned in Appearance ▸ Menus. */
body.sr-header #header .header-main .nav>li>a{
	font-size:15px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--sr-ink);
	border-radius:999px;padding:0 15px;height:42px;display:inline-flex;align-items:center;
	transition:background .15s,color .15s;
}
body.sr-header #header .header-main .nav>li>a:hover,
body.sr-header #header .header-main .nav>li.active>a,
body.sr-header #header .header-main .nav>li.current-menu-item>a{background:var(--sr-bg);color:var(--sr-ink)}
body.sr-header #header .header-main .nav>li>a:before,
body.sr-header #header .header-main .nav>li>a:after{display:none!important}
body.sr-header .nav-dropdown{
	border:0;border-radius:var(--sr-r-md);box-shadow:0 10px 40px rgba(0,0,0,.12);padding:10px;margin-top:6px;
}
body.sr-header .nav-dropdown>li>a{
	border-radius:var(--sr-r-xs);padding:9px 12px;text-transform:none;letter-spacing:0;
	font-size:14.5px;border:0!important;
}
body.sr-header .nav-dropdown>li>a:hover{background:var(--sr-bg);color:var(--sr-red)}
body.sr-header .nav-dropdown li{border:0!important}

/* Cart and account */
body.sr-header #header .cart-item .header-cart-link{
	background:var(--sr-red)!important;color:#fff!important;border-radius:999px!important;
	height:34px;padding:0 13px;display:inline-flex;align-items:center;gap:7px;border:0!important;
	font-weight:600;font-size:13.5px;line-height:1;
}
body.sr-header #header .cart-item .header-cart-link:hover{background:var(--sr-red-dk)!important;color:#fff!important}
body.sr-header #header .cart-item .header-cart-link i,
body.sr-header #header .cart-item .cart-price{color:#fff!important}
body.sr-header #header .cart-item .header-cart-link i{font-size:15px}
/* In the strip the cart link is plain text, so it sits on whatever
   background Theme Options paints there rather than a red pill on red. */
body.sr-header #top-bar .cart-item .header-cart-link{
	height:30px;padding:0 11px;font-size:13px;
	background:transparent!important;color:inherit!important;
}
body.sr-header #top-bar .cart-item .header-cart-link:hover{background:transparent!important;color:inherit!important;opacity:.8}
body.sr-header #top-bar .cart-item .header-cart-link i,
body.sr-header #top-bar .cart-item .cart-price{color:inherit!important}
body.sr-header #header .header-main .cart-item .header-cart-link{height:44px;padding:0 17px;font-size:15px}
body.sr-header #header .header-main .account-item .nav-top-link{
	background:var(--sr-bg)!important;color:var(--sr-ink)!important;border:0!important;
	border-radius:999px!important;height:44px;padding:0 18px;font-weight:600;
}
body.sr-header #header .header-main .account-item .nav-top-link:hover{background:var(--sr-ink)!important;color:#fff!important}

/* Search field */
body.sr-header #header .searchform-wrapper input[type=search],
body.sr-header #header .search-field{
	border-radius:999px;background:var(--sr-bg);border:1.5px solid transparent;height:48px;padding:0 20px;
}
body.sr-header #header .searchform-wrapper input[type=search]:focus{border-color:var(--sr-ink);background:var(--sr-surface)}
body.sr-header .searchform .button.icon{border-radius:999px}
/* ---------------------------------------------------------------------
   Mobile menu panel
   ------------------------------------------------------------------- */
body.sr-header .off-canvas .nav-vertical>li>a,
body.sr-header .mobile-sidebar .nav-sidebar.nav-vertical>li>a{
	text-transform:none;letter-spacing:0;font-weight:600;font-size:19px;
	padding-top:15px;padding-bottom:15px;
}
body.sr-header .mobile-sidebar .nav-sidebar.nav-vertical>li>a>.header-account-title{font-size:inherit}
body.sr-header .mobile-sidebar .nav-sidebar .children>li>a{font-size:16px;font-weight:500}

/* The search row: the category select is sized by Flatsome's
   resize-select script, which leaves it too narrow once the field is
   given a pill shape, so a minimum width is set here and the row is
   kept on one line. */
body.sr-header .mobile-sidebar li.header-search-form{
	display:block!important;width:100%!important;padding:8px 16px 14px!important;
}
body.sr-header .mobile-sidebar .header-search-form,
body.sr-header .mobile-sidebar .header-search-form-wrapper,
body.sr-header .mobile-sidebar .searchform-wrapper,
body.sr-header .mobile-sidebar .searchform-wrapper form.searchform,
body.sr-header .mobile-sidebar form.searchform>.flex-row{
	width:100%!important;max-width:100%!important;float:none!important;
}
body.sr-header .mobile-sidebar form.searchform .flex-row{
	display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:8px;
}
body.sr-header .mobile-sidebar .search-form-categories{flex:0 0 auto!important;max-width:42%;width:auto!important}
body.sr-header .mobile-sidebar select.search_categories{
	width:auto!important;min-width:104px!important;max-width:100%!important;
	height:46px!important;border-radius:999px!important;
	padding:0 34px 0 16px!important;font-size:14px!important;margin:0!important;
}
body.sr-header .mobile-sidebar .flex-col.flex-grow{flex:1 1 auto!important;min-width:0}
body.sr-header .mobile-sidebar .search-field{
	height:46px!important;border-radius:999px!important;width:100%!important;margin:0!important;
}
body.sr-header .mobile-sidebar .ux-search-submit{min-height:46px;height:46px;width:46px;padding:0}

/* Contact links sit in a row rather than stacking down the panel. */
body.sr-header .mobile-sidebar ul.header-contact{
	flex-direction:row!important;flex-wrap:wrap!important;
	justify-content:center!important;align-items:center;gap:4px;
}
body.sr-header .mobile-sidebar ul.header-contact>li{
	width:auto!important;flex:0 0 auto!important;border:0!important;
}
body.sr-header .mobile-sidebar ul.header-contact>li>a{padding:8px 12px}

/* Social links match the contact links: plain icons, same colour, no
   outlined circle. */
body.sr-header .mobile-sidebar .social-icons{display:flex;justify-content:center;flex-wrap:wrap;gap:4px}
body.sr-header .mobile-sidebar .social-icons .button.is-outline,
body.sr-header .mobile-sidebar .social-icons .button.is-outline:hover{
	border:0!important;background:transparent!important;color:inherit!important;
	box-shadow:none!important;transform:none;
}
body.sr-header .mobile-sidebar .social-icons .button.is-outline:hover{opacity:.7}

@media (max-width:849px){
	body.sr-header #header .header-main .header-inner.flex-row{
		margin:8px auto!important;border-radius:var(--sr-r-md)!important;
		width:calc(100% - 20px)!important;
		height:auto!important;min-height:58px!important;
		padding:8px 10px 8px 14px!important;
	}
	body.sr-header #header .header-main .header-inner.flex-row>.flex-col{min-height:0!important}
	body.sr-header #header .header-wrapper.stuck .header-main .header-inner.flex-row{
		margin:6px auto!important;height:auto!important;min-height:50px!important;
		padding-top:6px!important;padding-bottom:6px!important;
	}
}

/* ---------------------------------------------------------------------
   Logo
   Uses the logo and sticky logo already set in Theme Options; this only
   changes which one shows and at what size.
   ------------------------------------------------------------------- */
/* The logo stays in the bar's normal flow. The bar is given a height
   that fits the primary logo at its own aspect ratio, and the sticky
   bar below is shorter because it swaps in the single-line wordmark. */
body.sr-logo #header .header-main .header-inner.flex-row{
	overflow:visible!important;position:relative!important;
}
body.sr-logo #header #logo{
	position:static!important;z-index:6;overflow:visible;
	display:flex!important;align-items:center;
	width:auto!important;max-width:none!important;
	flex:0 0 auto!important;padding:0!important;margin:0!important;
}
body.sr-logo #header #logo a{
	position:static!important;display:flex!important;align-items:center;
	height:100%;width:auto!important;
	margin:0!important;padding:0!important;line-height:0;overflow:visible;
}
body.sr-logo #header #logo img{
	display:block;width:auto;margin:0!important;
	transition:opacity .2s;
}
/* Size comes from Theme Options ▸ Header ▸ Logo (its width setting and
   the image's own aspect ratio). Only the gap to the menu is set here. */
body.sr-logo #header #logo img.header-logo,
body.sr-logo #header #logo img.header-logo-dark{
	height:auto!important;margin:0 28px 0 0!important;
	/* No ceiling: the logo size set in Theme Options ▸ Header ▸ Logo
	   dictates the bar's height, which grows and shrinks with it. */
	max-height:none!important;width:auto!important;
}
body.sr-logo #header #logo img.header-logo-sticky{display:none!important}

/* Stuck: the single-line wordmark replaces the full logo. */
body.sr-logo #header .header-wrapper.stuck #logo img.header-logo,
body.sr-logo #header .header-wrapper.stuck #logo img.header-logo-dark{display:none!important}
body.sr-logo #header .header-wrapper.stuck #logo img.header-logo-sticky{
	display:block!important;height:auto!important;margin:0 28px 0 0!important;filter:none;
}

@media (max-width:849px){
	body.sr-logo #header #logo img.header-logo,
	body.sr-logo #header #logo img.header-logo-dark{height:auto!important;margin:0 12px 0 0!important}
	body.sr-logo #header .header-wrapper.stuck #logo img.header-logo-sticky{height:auto!important;margin:0 12px 0 0!important}
}

/* ---------------------------------------------------------------------
   Footer — shape, spacing and type only. Every footer background colour
   stays with Theme Options ▸ Footer, so Footer 1, Footer 2 and the
   bottom bar paint whatever is set there.
   ------------------------------------------------------------------- */
body.sr-footer #footer .footer-1{
	border:0;border-radius:var(--sr-r-xl) var(--sr-r-xl) 0 0;margin-top:40px;
	padding-top:48px!important;padding-bottom:40px!important;
}
body.sr-footer #footer .footer-2{
	border-radius:0;margin-top:0;box-shadow:none;
	padding-top:28px!important;padding-bottom:28px!important;
}
body.sr-footer #footer .widget{margin-bottom:0}
body.sr-footer #footer .widget-title{
	font-size:14px;font-weight:600;font-family:var(--sr-text);letter-spacing:0;
	text-transform:none;margin-bottom:14px;display:block;
}
body.sr-footer #footer .widget ul li{border:0!important;padding:4px 0}
body.sr-footer #footer .widget ul li a,
body.sr-footer #footer .widget p,
body.sr-footer #footer a{font-size:14.5px;line-height:1.6}
body.sr-footer #footer .is-divider{display:none}
body.sr-footer #footer input[type=email],
body.sr-footer #footer input[type=text]{border-radius:999px}
body.sr-footer .absolute-footer,body.sr-footer .absolute-footer.dark{
	font-size:13px;padding:22px 0;border-top:0;
}
body.sr-footer .back-to-top{border-radius:999px!important}