.datacap-visa-icon.stripe-icon{max-width:55px;height:auto}.datacap-mastercard-icon.datacap-icon{max-width:55px;height:auto}.datacap-amex-icon.datacap-icon{max-width:55px;height:auto}.datacap-discover-icon.datacap-icon{max-width:55px;height:auto}:root{--mw-red:#dd3333;--mw-gold:#fdb913;--mw-ink:#434343;--mw-gothic:"alternate-gothic-no-3-d", "Oswald", "Arial Narrow", sans-serif;--mw-balboa:"balboa", "Oswald", "Arial Narrow", sans-serif;--mw-body:"poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--mw-texture:url(data:image/jpeg;base64,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);
}

body,
button, input, select, textarea,
.site-title, p, li {
	font-family: var(--mw-body);
	color: var(--mw-ink);
}

/* ============================ HEADER ============================ */

.site-header {
	position: relative;
	background-color: #fff;
	background-image: var(--mw-texture);
	border-bottom: 5px solid var(--mw-red);
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
}

/* NB: the red block is painted by .mw-topbar::before (below), NOT by a fixed
   percentage of the header. A fixed 45% cannot know how wide the links are, so
   at tablet widths they overflowed the red and turned white-on-white. */

/* Storefront lays the header out with floats + explicit widths, so we override
   the widths rather than fight them, and pin the utility bar into the red block. */
.site-header .col-full {
	position: relative;
	z-index: 1;
}

.site-header .site-branding {
	float: left;
	width: auto;
	max-width: 50%;
	margin: 0;
	padding: 10px 0;
}

.site-header .site-branding .custom-logo-link img,
.site-header .site-branding img.custom-logo {
	max-height: 75px;
	max-width: 100%;
	width: auto;
	height: auto;
}

/* ---- corporate utility bar ----
   Base (below 1024px): a full-bleed red bar in normal flow. This cannot collide
   with the logo and the links are always on red, whatever their width. */
.mw-topbar {
	position: static;
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: .45rem calc(50vw - 50%);
	background: var(--mw-red);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}

.mw-topbar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.mw-topbar__list li {
	margin: 0;
	list-style: none;
}

.mw-topbar__list a {
	font-family: var(--mw-gothic);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	position: relative;
	display: inline-block;
	padding: 6px 0;
}

.mw-topbar__phone a {
	white-space: nowrap;
}

/* animated underline, as on the main site */
.mw-topbar__list a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	right: 50%;
	height: 2px;
	background: currentColor;
	transition: left .35s ease, right .35s ease;
}

.mw-topbar__list a:hover::after {
	left: 0;
	right: 0;
}

/* ---- primary nav row (black uppercase gothic) ---- */
.storefront-primary-navigation {
	position: relative;
	z-index: 1;
	background: transparent;
}

.storefront-primary-navigation .col-full {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

/* width:auto is the key - Storefront pins explicit px widths that block flexing.
   Storefront's own selectors are more specific, hence the child selectors + !important. */
.storefront-primary-navigation .col-full > .main-navigation,
.storefront-primary-navigation .col-full > .site-search,
.storefront-primary-navigation .col-full > .site-header-cart {
	float: none !important;
	width: auto !important;
	margin: 0;
}

.storefront-primary-navigation .col-full > .main-navigation {
	flex: 1 1 auto;
}

.storefront-primary-navigation .col-full > .site-search,
.storefront-primary-navigation .col-full > .site-header-cart {
	flex: 0 0 auto;
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	font-family: var(--mw-gothic);
	font-weight: 300;
	font-size: 20px;
	text-transform: uppercase;
	color: #000;
	padding: 15px 0;
	position: relative;
}

.main-navigation ul.menu > li > a::after,
.main-navigation ul.nav-menu > li > a::after {
	content: "";
	position: absolute;
	bottom: 20%;
	left: 50%;
	right: 50%;
	height: 2px;
	background: #000;
	transition: left .35s ease, right .35s ease;
}

.main-navigation ul.menu > li > a:hover::after,
.main-navigation ul.nav-menu > li > a:hover::after {
	left: 0;
	right: 0;
}

.main-navigation ul.menu > li:not(:last-child) {
	margin-right: 1.75rem;
}

/* search + cart sit right, compact, on the same line as the nav */
.site-header .site-search {
	float: none;
	width: auto;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	min-width: 200px;
}

.site-header .site-search .widget,
.site-header .site-search .widget_product_search form {
	margin: 0;
}

.site-header .site-header-cart {
	float: none;
	width: auto;
	flex: 0 0 auto;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header .site-header-cart li {
	list-style: none;
	margin: 0;
}

/* the basket glyph is an inline ::after, so it just needs breathing room */
.site-header .site-header-cart .cart-contents {
	white-space: nowrap;
}

.site-header .site-header-cart .cart-contents::after {
	margin-left: .55em;
}

/* ============================ FOOTER ============================ */

.site-footer {
	background-color: #fff;
	background-image: var(--mw-texture);
	color: var(--mw-ink);
	padding: 0;
	font-family: var(--mw-body);
}

.mw-footer {
	padding: 3rem 0 2rem;
	text-align: center;
}

.mw-footer__logo {
	margin-bottom: 1.5rem;
}

/* Storefront makes footer images block-level, so centre them explicitly */
.mw-footer__logo img,
.mw-footer__emerson img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.mw-footer__logo img {
	max-height: 110px;
	width: auto;
	height: auto;
}

/* rows with the thin centered divider used on the main site */
.mw-footer__row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .75rem;
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	font-family: var(--mw-gothic);
	font-size: 20px;
	color: #000;
}

.mw-footer__row::after {
	content: "";
	position: absolute;
	left: 25%;
	width: 50%;
	bottom: 0;
	height: 1px;
	background: rgba(0, 0, 0, .25);
}

.mw-footer__row a {
	color: #000;
	text-decoration: none;
}

.mw-footer__row a:hover {
	color: var(--mw-red);
}

.mw-sep {
	color: rgba(0, 0, 0, .35);
	padding: 0 .5rem;
}

.mw-footer__social {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
}

/* icons inherit the footer ink (Storefront styles footer links via #colophon,
   which outranks class selectors) - matches the main site's dark footer */
.mw-footer__social a {
	display: inline-flex;
	transition: transform .2s ease, color .2s ease;
}

.mw-footer__row .mw-footer__social a:hover {
	transform: translateY(-2px);
	color: var(--mw-red);
}

/* footer nav */
.mw-footer__nav ul {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
}

.mw-footer__nav li {
	margin: 0;
	list-style: none;
}

.mw-footer__nav a {
	font-family: var(--mw-gothic);
	font-size: 20px;
	color: #000;
	text-decoration: none;
	position: relative;
	display: inline-block;
	padding-bottom: 4px;
}

.mw-footer__nav a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	right: 50%;
	height: 2px;
	background: #000;
	transition: left .35s ease, right .35s ease;
}

.mw-footer__nav a:hover::after {
	left: 0;
	right: 0;
}

/* natural width is 300px; the % cap keeps it inside narrow viewports */
.mw-footer__emerson img {
	max-width: 100%;
	height: auto;
}

/* bottom colophon bar - Storefront nests the footer hook inside .col-full,
   so break out to full width the standard way */
.site-footer {
	overflow-x: hidden;
}

.mw-colophon {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: rgba(0, 0, 0, .04);
	border-top: 1px solid rgba(0, 0, 0, .08);
	padding: 1rem 2em;
	font-size: 14px;
	color: var(--mw-ink);
}

.mw-colophon .col-full {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
}

/* ============================ INTERIOR PAGES ============================ */

/* headings use Balboa, as on the main site (h2 = 32px black).
   Case is left alone so product and category copy is not mangled. */
h1, h2, h3, h4, h5, h6,
.woocommerce-products-header__title,
.widget .widget-title,
.widget .widgettitle {
	font-family: var(--mw-balboa);
	color: #000;
	font-weight: 700;
}

h2, .widget .widget-title, .widget .widgettitle {
	font-size: 32px;
}

/* --- red title band: the main site's interior banner treatment ---
   Applies to static pages (incl. cart/checkout/account) and shop archives.
   Single product pages are excluded - .page never matches there. */
/* Bleed the band with a box-shadow rather than negative margins.
   Margin/percentage maths centres on the *content column*, which the sidebar
   pushes off-centre - the band then sat ~139px left of the viewport and stopped
   short on the right. A box-shadow paints outside the border-box, is not
   clipped by the element's own overflow, never creates a scrollbar, and needs
   no compensating padding, so the title aligns with the column for free. */
.page .entry-header,
.woocommerce-products-header {
	position: relative;
	padding: 1.1rem 0;
	margin-bottom: 2.5rem;
	background: var(--mw-red);
}

/* Bleed left to the viewport edge with a pseudo-element. (A box-shadow is
   swallowed by the .hfeed wrapper's overflow-x:hidden; negative margins centre
   on the content column, which the sidebar pushes off-centre. A positioned
   child is clipped by that same wrapper - which is exactly what we want: it
   reaches the viewport edge and can never create a scrollbar.) */
.page .entry-header::before,
.woocommerce-products-header::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	width: 100vw;
	background: var(--mw-red);
}

.page .entry-header .entry-title,
.woocommerce-products-header .woocommerce-products-header__title {
	margin: 0;
	padding: 0;
	font-family: var(--mw-balboa);
	font-size: 48px;
	line-height: 1.1;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	position: relative;
	z-index: 1;
}

/* Below tablet there is no angled terminus, so the band also bleeds right and
   runs edge to edge. */
@media (max-width: 767px) {
	.page .entry-header::after,
	.woocommerce-products-header::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 100%;
		width: 100vw;
		background: var(--mw-red);
	}
}

/* From tablet up the band is terminated by the angled gold slash. */
@media (min-width: 768px) {
	.page .entry-header::after,
	.woocommerce-products-header::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 72%;
		/* skew(-20deg) pulls the bottom edge ~11px left (height/2 * tan20 * 2),
		   so the overhang must exceed that or a red sliver shows bottom-right */
		right: -16px;
		background: #fff;
		border-left: 8px solid var(--mw-gold);
		transform: skew(-20deg);
		z-index: 0;
	}
}

/* keep the shop archive's result-count/sorting row clear of the band */
.woocommerce-products-header + .woocommerce-notices-wrapper,
.storefront-sorting {
	margin-top: 0;
}

/* --- buttons: square brand shape (gold default, red primary) --- */
.site-content a.button,
.site-content button.button,
.site-content input.button,
.site-content a.button.alt,
.site-content button.button.alt,
.site-content input.button.alt,
.site-content .wp-block-button__link,
input.gform-button,
.gform_footer input[type=submit],
.gform_page_footer input[type=submit] {
	position: relative;
	z-index: 0;
	background-color: transparent;
	color: #000;
	font-family: var(--mw-gothic);
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	border-radius: 0;
	border: 0;
	padding: .6em 1.9em;
	text-shadow: none;
}

/* <a> and <button> can host a pseudo-element, so they get the real
   parallelogram: skewed shape behind straight text. */
.site-content a.button::before,
.site-content button.button::before,
.site-content .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--mw-gold);
	transform: none;
	transition: background .2s ease;
}

.site-content a.button.alt::before,
.site-content button.button.alt::before {
	background: var(--mw-red);
}

.site-content a.button:hover::before,
.site-content button.button:hover::before {
	background: var(--mw-red);
}

.site-content a.button.alt:hover::before,
.site-content button.button.alt:hover::before {
	background: #b52626;
}

.site-content a.button:hover,
.site-content button.button:hover {
	background-color: transparent;
	color: #fff;
}

/* <input> is a void element and cannot host ::before, so those get a flat
   brand fill instead - same colour, font and square corners, no skew. */
.site-content input.button,
input.gform-button,
.gform_footer input[type=submit],
.gform_page_footer input[type=submit] {
	position: static;
	background-color: var(--mw-gold);
	color: #000;
}

.site-content input.button.alt {
	background-color: var(--mw-red);
	color: #fff;
}

.site-content input.button:hover,
.gform_footer input[type=submit]:hover,
.gform_page_footer input[type=submit]:hover,
input.gform-button:hover {
	background-color: var(--mw-red);
	color: #fff;
}

.site-content input.button.alt:hover {
	background-color: #b52626;
}

/* WooCommerce Blocks (the block Cart/Checkout) ship their own button component
   that none of the .button selectors reach - e.g. "Proceed to Checkout" and
   "Place Order". Same skewed brand shape, red because they are primary actions. */
.site-content .wc-block-components-button {
	position: relative;
	z-index: 0;
	background-color: transparent !important;
	color: #fff !important;
	font-family: var(--mw-gothic);
	font-size: 20px;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	padding: .7em 1.9em;
}

.site-content .wc-block-components-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--mw-red);
	transform: none;
	transition: background .2s ease;
}

.site-content .wc-block-components-button:hover::before {
	background: #b52626;
}

/* the block button underlines its inner span with higher specificity */
.site-content .wc-block-components-button,
.site-content .wc-block-components-button__text,
.site-content .wc-block-components-button:hover,
.site-content .wc-block-components-button:hover .wc-block-components-button__text {
	color: inherit;
	text-decoration: none !important;
	box-shadow: none;
}

/* Gravity Forms 2.9+ renders buttons through its own theme framework, driven by
   custom properties whose selectors outrank plain class rules - set the tokens,
   and keep a direct override as a belt-and-braces fallback. */
.gform_wrapper,
.gform-theme,
.gform-theme--foundation {
	--gf-ctrl-btn-bg-color-primary: var(--mw-gold);
	--gf-ctrl-btn-bg-color-hover-primary: var(--mw-red);
	--gf-ctrl-btn-color-primary: #000;
	--gf-ctrl-btn-color-hover-primary: #fff;
	--gf-ctrl-btn-border-color-primary: var(--mw-gold);
	--gf-ctrl-btn-border-color-hover-primary: var(--mw-red);
	--gf-ctrl-btn-radius: 0;
}

.gform_wrapper input.gform-button,
.gform_wrapper button.gform-button {
	background-color: var(--mw-gold) !important;
	border-color: var(--mw-gold) !important;
	color: #000 !important;
	border-radius: 0 !important;
	font-family: var(--mw-gothic) !important;
	font-size: 20px !important;
	text-transform: uppercase;
}

.gform_wrapper input.gform-button:hover,
.gform_wrapper button.gform-button:hover {
	background-color: var(--mw-red) !important;
	border-color: var(--mw-red) !important;
	color: #fff !important;
}

/* the primary <a>/<button> actions carry white text */
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	color: #fff;
}

/* --- no rectangular focus ring on click ---
   Pointer focus loses the outline (it traced the square box, not the shape).
   Keyboard focus keeps a visible ring via :focus-visible. */
.site-content a.button:focus,
.site-content button.button:focus,
.site-content input.button:focus,
.site-content .wc-block-components-button:focus,
.gform_wrapper input.gform-button:focus,
.gform_footer input[type=submit]:focus,
.menu-toggle:focus,
.site-header-cart a:focus {
	outline: none;
	box-shadow: none;
}

.site-content a.button:focus-visible,
.site-content button.button:focus-visible,
.site-content input.button:focus-visible,
.site-content .wc-block-components-button:focus-visible,
.gform_wrapper input.gform-button:focus-visible,
.gform_footer input[type=submit]:focus-visible,
.menu-toggle:focus-visible,
.site-header-cart a:focus-visible {
	outline: 2px solid var(--mw-red);
	outline-offset: 3px;
}

/* --- drop the word "Menu" from the toggle, keep the icon and the a11y name --- */
.menu-toggle span {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.menu-toggle {
	min-width: 44px;
}

/* ======================= MOBILE BAR + DRAWER ======================= */

/* the mobile bar only exists below the desktop breakpoint */
.mw-mobilebar {
	display: none;
}

.mw-drawer-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.mw-burger,
.mw-burger::before,
.mw-burger::after {
	display: block;
	width: 24px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform .25s ease, opacity .2s ease;
}

.mw-burger {
	position: relative;
}

.mw-burger::before,
.mw-burger::after {
	content: "";
	position: absolute;
	left: 0;
}

.mw-burger::before { top: -7px; }
.mw-burger::after  { top: 7px; }

/* burger morphs to an X while the drawer is open */
body.mw-drawer-open .mw-burger { background: transparent; }
body.mw-drawer-open .mw-burger::before { transform: translateY(7px) rotate(45deg); }
body.mw-drawer-open .mw-burger::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---- the drawer itself ---- */
.mw-drawer {
	position: fixed;
	inset: 0;
	z-index: 99999;
}

.mw-drawer[hidden] {
	display: none;
}

.mw-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .3s ease;
}

.mw-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 86vw;
	max-width: 340px;
	padding: 1rem 1.5rem 2rem;
	background-color: #fff;
	background-image: var(--mw-texture);
	border-left: 5px solid var(--mw-red);
	box-shadow: -6px 0 24px rgba(0, 0, 0, .25);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateX(100%);
	transition: transform .3s ease;
}

body.mw-drawer-open .mw-drawer__overlay { opacity: 1; }
body.mw-drawer-open .mw-drawer__panel { transform: translateX(0); }
body.mw-drawer-open { overflow: hidden; }

.mw-drawer__panel:focus {
	outline: none;
}

.mw-drawer__close {
	display: block;
	margin: 0 -.5rem 1rem auto;
	padding: .25rem .5rem;
	border: 0;
	background: transparent;
	font-size: 34px;
	line-height: 1;
	color: #000;
	cursor: pointer;
}

.mw-drawer__nav ul,
.mw-drawer__corp ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mw-drawer__nav li,
.mw-drawer__corp li {
	margin: 0;
	list-style: none;
}

.mw-drawer__nav a {
	display: block;
	padding: .85rem 0;
	font-family: var(--mw-gothic);
	font-size: 22px;
	text-transform: uppercase;
	color: #000;
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.mw-drawer__nav a:hover,
.mw-drawer__corp a:hover {
	color: var(--mw-red);
}

.mw-drawer__corp {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 3px solid var(--mw-red);
}

.mw-drawer__corp a {
	display: block;
	padding: .55rem 0;
	font-family: var(--mw-gothic);
	font-size: 18px;
	color: var(--mw-ink);
	text-decoration: none;
}

.mw-drawer__phone a {
	color: var(--mw-red);
	font-weight: 700;
}

/* never leave a drawer hanging around on desktop (e.g. after a resize) */
@media (min-width: 768px) {
	.mw-drawer {
		display: none !important;
	}
}

/* ============================ RESPONSIVE ============================ */

@media (min-width: 768px) {
	.site-header .site-branding img.custom-logo {
		max-height: 110px;
	}
}

/* Desktop only: lift the bar into the angled red block beside the logo.
   The red is drawn by the bar's own ::before, so it always hugs the links -
   it bleeds off-screen to the right and is clipped by .site-header's overflow.
   skewX displacement depends only on height, not width, so the far-right
   bleed does not distort the diagonal. */
@media (min-width: 1100px) {
	.mw-topbar {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		/* right:0 anchors to .col-full's PADDING box, which would push the links
		   past the content below. Pull them back by the container padding plus
		   the 1rem the nav row is itself inset, so the phone lands on the same
		   visual edge as the cart. ::before still bleeds off-screen. */
		padding: 0 calc(2.617924em + 1rem) 0 3rem;
		height: 62px;
		background: transparent;
		justify-content: flex-end;
	}

	.mw-topbar::before {
		content: "";position:absolute;top:0;bottom:0;left:0;right:-100vw;background:var(--mw-red);border-left:10px solid #fff;box-shadow:-10px 0 0 0 var(--mw-red);transform:skew(-20deg);z-index:-1}}@media (min-width:768px) and (max-width:1099px){.mw-topbar__list{gap:1.25rem}.mw-topbar__list a{font-size:18px}.main-navigation ul.menu>li>a,.main-navigation ul.nav-menu>li>a{font-size:18px}.main-navigation ul.menu>li:not(:last-child){margin-right:1rem}.storefront-primary-navigation .col-full>.main-navigation{min-width:0}.storefront-primary-navigation .col-full>.site-search{flex:1 1 140px;min-width:140px}}@media (max-width:767px){.site-header .site-branding{float:none!important;width:100%!important;max-width:100%;text-align:center;order:1}.site-header .site-branding img.custom-logo{margin-left:auto;margin-right:auto}.mw-topbar{display:none}.mw-mobilebar{display:flex;align-items:center;gap:.75rem;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:.35rem calc(50vw - 50%);background:var(--mw-red)}.mw-cartwrap{order:1;margin-left:0;display:flex;align-items:center;gap:.7rem}.mw-mobilebar .mw-drawer-toggle{order:2;margin-left:auto}.mw-cart{display:flex;flex-direction:column;line-height:1.05;color:#fff;text-decoration:none;font-family:var(--mw-gothic)}.mw-cart__total{font-size:19px;font-weight:700}.mw-cart__count{font-size:13px;opacity:.85}.mw-checkout{display:inline-block;background:#fff;color:var(--mw-red);font-family:var(--mw-gothic);font-size:16px;text-transform:uppercase;white-space:nowrap;padding:.45rem .9rem;text-decoration:none}.mw-checkout--empty{display:none}.storefront-primary-navigation .col-full{display:flex;flex-wrap:wrap;justify-content:center}.storefront-primary-navigation .col-full>.site-search{display:block!important;flex:1 1 100%;float:none;width:100%;max-width:340px;margin:0 auto .85rem;padding:0}.site-header .site-search .widget,.site-header .site-search form{margin:0}.storefront-primary-navigation .col-full>.main-navigation,.storefront-primary-navigation .col-full>.site-header-cart{display:none}.main-navigation .handheld-navigation{width:100%}.mw-topbar__list{flex-wrap:wrap;justify-content:center;gap:.75rem 1.25rem}.mw-topbar__list a{font-size:17px}.mw-footer__row,.mw-footer__nav ul{flex-direction:column;gap:.5rem}.mw-sep{display:none}.mw-colophon .col-full{justify-content:center;text-align:center}.page .entry-header .entry-title,.woocommerce-products-header .woocommerce-products-header__title{font-size:30px;padding:0 1.2em}.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{font-size:18px;padding:.6em 1.4em}}