/**
 * Site header.
 *
 * Everything here is layered over Elementor's header template from the
 * outside. Nothing in this plugin edits the template or touches Elementor's
 * generated stylesheet -- that file is what paints the red band, from a global
 * colour, and it only rebuilds correctly during a normal page view. Leaving it
 * alone is deliberate.
 */

.elementor-location-header {
	--mbh-navy: #1b2a5b;
	--mbh-red: var(--e-global-color-75bbeba, #d8212a);
	/* A restrained full-width rule separates the header from page banners. */
	border-bottom: 2px solid var(--mbh-red);
	box-sizing: border-box;
}

/* Top bar ----------------------------------------------------------------- */

/* The red band, painted here as well as by Elementor.

   Elementor paints it from a global colour through its own generated
   stylesheet. That file is rebuilt whenever the header is saved, and it only
   comes back with globals resolved during a normal page view -- rebuilt any
   other way the band turns transparent, taking the white phone number and
   hours on it with it, because white on white shows nothing.

   Painting it here too costs nothing when Elementor's file is present (same
   colour, same global) and holds the band together when it is not. The band
   is kept shallow: it carries one line of small text, so the padding
   Elementor gives it leaves it far taller than it needs to be. */
.elementor-location-header .elementor-element-9af8076 {
	background-color: var(--mbh-red);
	padding-top: 3px !important;
	padding-bottom: 3px !important;
}

/* Nothing inside the band may prop it back open. */
.elementor-location-header .elementor-element-9af8076 .elementor-widget-container,
.elementor-location-header .elementor-element-9af8076 .elementor-widget {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.elementor-location-header .elementor-element-9af8076 .elementor-icon-list-item,
.elementor-location-header .elementor-element-9af8076 .elementor-icon-list-text,
.elementor-location-header .elementor-element-9af8076 .elementor-social-icon {
	line-height: 1.3;
}

.elementor-location-header .elementor-element-9af8076 .elementor-social-icon {
	width: 1.5em;
	height: 1.5em;
	font-size: 13px;
}

/* The phone number and the opening hours read as one line, set apart by a
   gap rather than pushed to opposite ends of the band. */
.elementor-location-header .elementor-icon-list-items.elementor-inline-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 16px;
	margin: 0;
}

/* Each entry is one icon beside one value, centred on a shared line.
   Elementor leaves the icon and the text as inline boxes, which sit on the
   text baseline rather than on each other's centre -- that is what left the
   row looking crooked once the values started wrapping. */
.elementor-location-header .elementor-icon-list-items.elementor-inline-items > li.elementor-icon-list-item,
.elementor-location-header .elementor-icon-list-items.elementor-inline-items > li.elementor-icon-list-item > a {
	display: flex;
	align-items: center;
	/* The text does not wrap, so a squeezed entry would spill rather than
	   reflow. Each keeps the width it asks for. */
	flex-shrink: 0;
	margin: 0;
	line-height: 1.3;
}

.elementor-location-header .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* A phone number and a set of opening hours are each a single value: they
   break between entries, never through the middle of one. */
.elementor-location-header .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-text {
	white-space: nowrap;
}

/* The band reads phone on the left, then the opening hours and the social
   marks together on the right.

   The hours sit in the same list as the phone number, in the left of the
   band's two columns, so they cannot be moved across to the icons without
   rewriting the Elementor template -- and that template is what paints the
   red, so it is left alone. Instead the left column takes all the room the
   icons do not need and the list spreads its two items to its own two ends,
   which leaves the hours right up against them.

   Desktop only: narrower than this the band centres and wraps instead. */
@media (min-width: 881px) {
	.elementor-location-header .elementor-element-ee39f9c > .elementor-container {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	/* Everything the social icons leave behind. */
	.elementor-location-header .elementor-element-c540c11 {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Only as wide as the icons themselves. */
	.elementor-location-header .elementor-element-12cf964 {
		flex: 0 0 auto;
		width: auto;
	}

	/* The widget carries `elementor-widget__width-initial`, and Elementor's
	   generated stylesheet sets its width from the template. That file loads
	   after this one and matches on the same weight, so it wins a tie --
	   hence the force. Without it the list never reaches the far end of the
	   column and the hours stay next to the phone number. */
	.elementor-location-header .elementor-widget.elementor-element-f36f8a2 {
		width: 100% !important;
		max-width: none !important;
		/* Shift the phone and hours left together so the final PM stays visible. */
		transform: translateX(-10px);
	}

	/* The wrappers between the widget and the list have to carry the width
	   through, or the list has nothing to spread across. */
	.elementor-location-header .elementor-element-f36f8a2 > .elementor-widget-container {
		width: 100%;
		overflow: visible !important;
	}

	.elementor-location-header .elementor-element-f36f8a2 .elementor-icon-list-items.elementor-inline-items {
		flex-wrap: nowrap;
		justify-content: space-between;
		width: 100%;
		/* Keep a small buffer before the first social mark without clipping PM. */
		padding-right: 12px;
	}
}

/* Social marks sit flat on the band rather than in filled circles. */
.elementor-location-header .elementor-social-icon {
	background-color: transparent !important;
	box-shadow: none;
}

.elementor-location-header .elementor-social-icon i,
.elementor-location-header .elementor-social-icon svg {
	color: #fff !important;
	fill: #fff !important;
}

/* Menu -------------------------------------------------------------------- */

.elementor-location-header .elementor-nav-menu > li > a.elementor-item {
	color: var(--mbh-navy) !important;
}

.elementor-location-header .elementor-nav-menu > li > a.elementor-item:hover,
.elementor-location-header .elementor-nav-menu > li > a.elementor-item:focus {
	color: var(--mbh-red) !important;
}

/* Factory Outlet is the way into the shop, so it is drawn as a button rather
   than another link. Keyed to that menu item's own id: it is a standing
   highlight, not the current page, so `.current-menu-item` would be wrong. */
.elementor-location-header .elementor-nav-menu > li.menu-item-198 > a.elementor-item {
	padding: 10px 22px;
	border-radius: 8px;
	background: var(--mbh-red);
	color: #fff !important;
}

.elementor-location-header .elementor-nav-menu > li.menu-item-198 > a.elementor-item:hover,
.elementor-location-header .elementor-nav-menu > li.menu-item-198 > a.elementor-item:focus,
.elementor-location-header .elementor-nav-menu > li.menu-item-198 > a.elementor-item.elementor-item-active {
	background: #c1161c;
	color: #fff !important;
}

/* The pill carries its own weight; the underline pointer would double up. */
.elementor-location-header .elementor-nav-menu > li.menu-item-198 > a.elementor-item::before,
.elementor-location-header .elementor-nav-menu > li.menu-item-198 > a.elementor-item::after {
	display: none !important;
}

/* Cart -------------------------------------------------------------------- */

/* The header's own cart widget is switched off for every device in the
   template. Rather than edit the template -- which would mean regenerating
   the stylesheet that paints the red band -- it is simply shown from here. */
.elementor-location-header .elementor-widget-woocommerce-menu-cart {
	display: block !important;
}

.elementor-location-header .elementor-menu-cart__toggle .elementor-button {
	background: transparent !important;
	border: 0 !important;
	padding: 0;
	color: var(--mbh-navy) !important;
}

.elementor-location-header .elementor-menu-cart__toggle .elementor-button-icon-qty {
	min-width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 999px;
	background: var(--mbh-red) !important;
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
}

/* Mini Ajax Woo Cart floats a second cart over every page. The design has
   one, in the header. Hidden rather than the plugin switched off, so nothing
   else it does is disturbed and this is one rule to undo. */
#cart-button,
.majc-cartbasket-open-icon {
	display: none !important;
}

/* Small screens ----------------------------------------------------------- */

@media (max-width: 880px) {
	.elementor-location-header .elementor-icon-list-items.elementor-inline-items {
		flex-wrap: wrap;
		justify-content: center;
		/* Whole entries wrap, so the row gap is the space between two of
		   them stacked -- it needs more than the 2px that separated lines
		   of a single broken value. */
		gap: 5px 18px;
	}

	.elementor-location-header .elementor-nav-menu > li.menu-item-198 > a.elementor-item {
		display: inline-block;
		padding: 8px 18px;
	}
}

/* Mini cart --------------------------------------------------------------
 *
 * The panel behind the header cart. Royal Elementor Addons replaces
 * WooCommerce's mini cart template with markup of its own (`wpr-` classes),
 * which Elementor's menu-cart stylesheet does not match -- so the panel
 * arrived with no styling at all: list bullets, and every thumbnail at its
 * full 300px, which pushed the subtotal and the checkout button off the
 * bottom of the screen.
 *
 * The rule that matters is the layout: the panel is a column, the item list
 * is the only part that scrolls, and the subtotal and buttons sit outside it.
 * However many items are in the cart, the way to the checkout stays on
 * screen. */

/* Elementor pins the side cart to `top: 0; bottom: 0` with a 200px floor, so
   an empty cart was as tall as the screen. Here it is only as tall as what is
   in it: short for one item, growing as more are added, and never past the
   viewport -- at which point the item list starts to scroll instead.

   Scoped through the widget class so these beat Elementor's own rules on
   specificity rather than on which stylesheet happens to load last. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
	display: flex;
	flex-direction: column;
	top: 0;
	bottom: auto;
	height: auto;
	min-height: 0;
	max-height: 100vh;
	/* Honours the phone's real viewport, address bar included. */
	max-height: 100dvh;
	padding: 18px 16px 16px;
	background: #fff;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	height: auto;
	/* `flex: 1` would set the basis to zero and, with no free space to grow
	   into in a content-sized panel, collapse this to nothing. It takes its
	   natural height and gives way only once the panel meets its ceiling. */
	flex: 0 1 auto;
	min-height: 0;
}

/* The close button is the first thing in the panel, and the panel starts at
   the very top of the viewport -- which is also where the WordPress admin
   bar sits, fixed, and painted above it. Logged out there is nothing there
   and none of this applies; logged in, the bar was taking a bite out of the
   top of the cross.

   The panel drops below the bar rather than under it, and gives back the
   same height so it still cannot run past the bottom of the screen. */
body.admin-bar .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
	top: 32px;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
}

/* WordPress makes the bar taller here. */
@media screen and (max-width: 782px) {
	body.admin-bar .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
		top: 46px;
		max-height: calc(100vh - 46px);
		max-height: calc(100dvh - 46px);
	}
}

/* And here it stops being fixed altogether, so it scrolls away with the page
   and the panel goes back to the top. */
@media screen and (max-width: 600px) {
	body.admin-bar .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
		top: 0;
		max-height: 100vh;
		max-height: 100dvh;
	}
}

/* Clearance above the cross, and less below it than Elementor's 20px: the
   panel is meant to stay short. It is a flex child of the column, so it also
   has to be told not to give up height when the panel is full. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button {
	flex-shrink: 0;
	margin: 4px 0 12px;
}

/* Items ------------------------------------------------------------------- */

.elementor-menu-cart__main ul.wpr-woo-mini-cart,
.widget_shopping_cart_content ul.wpr-woo-mini-cart {
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elementor-menu-cart__main ul.wpr-woo-mini-cart > li.mini_cart_item,
.widget_shopping_cart_content ul.wpr-woo-mini-cart > li.mini_cart_item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid #ececec;
	list-style: none;
}

.wpr-mini-cart-image {
	width: 56px;
}

.wpr-mini-cart-image a {
	display: block;
}

.elementor-menu-cart__main .wpr-mini-cart-image img,
.widget_shopping_cart_content .wpr-mini-cart-image img {
	display: block;
	width: 56px;
	height: 56px;
	max-width: 56px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid #ececec;
}

.wpr-mini-cart-name-and-quantity {
	min-width: 0;
}

.wpr-mini-cart-product-name a {
	text-decoration: none;
}

.elementor-menu-cart__main .wpr-mini-cart-name,
.widget_shopping_cart_content .wpr-mini-cart-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13.5px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--mbh-navy, #1b2a5b);
}

.wpr-mini-cart-quantity {
	margin-top: 3px;
	font-size: 12.5px;
	color: #6b6b6b;
}

/* The amount carries its own colour, so it has to be set on the amount --
   a colour on the row above it would never reach the price. */
.elementor-menu-cart__main .wpr-mini-cart-quantity .woocommerce-Price-amount,
.elementor-menu-cart__main .wpr-mini-cart-quantity .woocommerce-Price-amount *,
.widget_shopping_cart_content .wpr-mini-cart-quantity .woocommerce-Price-amount,
.widget_shopping_cart_content .wpr-mini-cart-quantity .woocommerce-Price-amount * {
	font-weight: 700;
	color: #1a1a1a;
}

/* Remove ------------------------------------------------------------------ */

.elementor-menu-cart__main a.wpr-remove-item-from-mini-cart,
.widget_shopping_cart_content a.wpr-remove-item-from-mini-cart {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
	color: #8a8a8a;
	background: #f2f2f2;
}

.elementor-menu-cart__main a.wpr-remove-item-from-mini-cart:hover,
.elementor-menu-cart__main a.wpr-remove-item-from-mini-cart:focus,
.widget_shopping_cart_content a.wpr-remove-item-from-mini-cart:hover,
.widget_shopping_cart_content a.wpr-remove-item-from-mini-cart:focus {
	color: #fff;
	background: var(--mbh-red, #d8212a);
}

/* Footer ------------------------------------------------------------------ */

/* The separator, the subtotal and the buttons are the footer. A flex item
   shrinks before it scrolls, so each is pinned at its natural height: only
   the list above them gives way. */
.wpr-mini-cart-separator {
	flex-shrink: 0;
	height: 1px;
	margin: 0;
	background: #e2e2e2;
}

.elementor-menu-cart__main .woocommerce-mini-cart__total,
.widget_shopping_cart_content .woocommerce-mini-cart__total {
	flex-shrink: 0;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 14px 0;
	border: 0;
	font-size: 14px;
}

.elementor-menu-cart__main .woocommerce-mini-cart__total strong,
.widget_shopping_cart_content .woocommerce-mini-cart__total strong {
	font-weight: 600;
	color: var(--mbh-navy, #1b2a5b);
}

.elementor-menu-cart__main .woocommerce-mini-cart__total .woocommerce-Price-amount,
.elementor-menu-cart__main .woocommerce-mini-cart__total .woocommerce-Price-amount *,
.widget_shopping_cart_content .woocommerce-mini-cart__total .woocommerce-Price-amount,
.widget_shopping_cart_content .woocommerce-mini-cart__total .woocommerce-Price-amount * {
	font-size: 17px;
	font-weight: 700;
	color: #1a1a1a;
}

.elementor-menu-cart__main .woocommerce-mini-cart__buttons,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons {
	flex-shrink: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin: 0;
}

/* Shared groundwork. OceanWP floats both at `width: 48%` with
   `letter-spacing: 2px`, which in a grid cell leaves a box narrower than its
   own label -- the word then spills out of the button, white on a white
   panel, reading as clipped rather than as overflowing. Width, float and
   letter-spacing all have to be taken back from it. */
.elementor-menu-cart__main .woocommerce-mini-cart__buttons a.button,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.button {
	float: none;
	width: 100%;
	box-sizing: border-box;
	letter-spacing: normal;
	margin: 0;
	text-align: center;
}

/* OceanWP's clearfix on the same element becomes a grid item of its own,
   taking an empty cell below the buttons. */
.elementor-menu-cart__main .woocommerce-mini-cart__buttons::after,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons::after {
	content: none;
}

/* Checkout is the way forward, and the only button. Colours forced: the
   theme styles this element too and has already beaten a plain rule here
   once, on width. */
.elementor-menu-cart__main .woocommerce-mini-cart__buttons a.button.checkout,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.button.checkout {
	order: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	/* A comfortable touch target: this is the way to the checkout. */
	min-height: 46px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	color: #fff !important;
	background: var(--mbh-red, #d8212a) !important;
	border: 1px solid var(--mbh-red, #d8212a) !important;
}

.elementor-menu-cart__main .woocommerce-mini-cart__buttons a.button.checkout:hover,
.elementor-menu-cart__main .woocommerce-mini-cart__buttons a.button.checkout:focus,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.button.checkout:hover,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.button.checkout:focus {
	color: #fff !important;
	background: #c1161c !important;
	border-color: #c1161c !important;
}

/* View cart is a link, not a rival. It has to stay -- no menu links to the
   cart page, and it is the only place a quantity can be changed -- but two
   buttons in equal red left the customer choosing between identical calls
   to action. It comes first in the markup, so `order` is what moves it
   below the checkout button. */
.elementor-menu-cart__main .woocommerce-mini-cart__buttons a.button:not(.checkout),
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.button:not(.checkout) {
	order: 2;
	display: block;
	min-height: 0;
	padding: 2px 0 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 2px;
	color: #6b6b6b !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}

.elementor-menu-cart__main .woocommerce-mini-cart__buttons a.button:not(.checkout):hover,
.elementor-menu-cart__main .woocommerce-mini-cart__buttons a.button:not(.checkout):focus,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.button:not(.checkout):focus,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
	color: var(--mbh-red, #d8212a) !important;
}

/* Empty cart -------------------------------------------------------------- */

.elementor-menu-cart__main .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: 28px 0;
	text-align: center;
	font-size: 14px;
	color: #6b6b6b;
}

/* Small screens ----------------------------------------------------------- */

@media (max-width: 480px) {
	/* Scoped to match the panel rule above, which is set through the widget
	   class -- a bare `.elementor-menu-cart__main` here would lose to it. */
	.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
		padding: 16px 14px 14px;
	}
}

/* Keep the complete opening hours visible, including PM. */
.elementor-location-header .elementor-widget.elementor-element-f36f8a2 {
    width: 100% !important;
    max-width: 100% !important;
}
.elementor-location-header .elementor-element-f36f8a2 .elementor-icon-list-items.elementor-inline-items {
    flex-wrap: nowrap;
    box-sizing: border-box;
    align-items: center;
}
.elementor-location-header .elementor-element-f36f8a2 .elementor-icon-list-item {
    max-width: none;
}
.elementor-location-header .elementor-element-f36f8a2 .elementor-icon-list-text {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    overflow: visible;
    white-space: nowrap;
}
@media (max-width: 880px) {
    /* Keep contact details and social icons together in one compact row. */
    .elementor-location-header .elementor-element-ee39f9c > .elementor-container {
        flex-wrap: nowrap;
        align-items: center;
    }
    .elementor-location-header .elementor-element-c540c11 {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0;
    }
    .elementor-location-header .elementor-element-12cf964 {
        flex: 0 0 auto !important;
        width: auto !important;
    }
}

/* Keep phone and hours together on one line on narrow screens. */
@media (max-width: 880px) {
    .elementor-location-header .elementor-element-c540c11 > .elementor-widget-wrap {
        padding-left: 4px;
        padding-right: 4px;
    }
    .elementor-location-header .elementor-element-f36f8a2 .elementor-icon-list-items.elementor-inline-items {
        justify-content: flex-start;
        gap: 4px;
        padding-left: 0;
        padding-right: 0;
    }
    .elementor-location-header .elementor-element-f36f8a2,
    .elementor-location-header .elementor-element-f36f8a2 > .elementor-widget-container,
    .elementor-location-header .elementor-element-f36f8a2 .elementor-icon-list-items.elementor-inline-items,
    .elementor-location-header .elementor-element-f36f8a2 .elementor-icon-list-item {
        overflow: visible !important;
    }
    .elementor-location-header .elementor-element-f36f8a2 .elementor-icon-list-item {
        flex: 0 0 auto !important;
        width: max-content !important;
        max-width: 100% !important;
    }
    .elementor-location-header .elementor-element-f36f8a2 .elementor-icon-list-text {
        flex: 0 0 auto !important;
        width: max-content !important;
        max-width: none !important;
        overflow: visible !important;
        font-size: clamp(9px, 2.4vw, 12px) !important;
        padding-left: 2px;
        padding-right: 3px;
        letter-spacing: 0;
    }
    .elementor-location-header .elementor-element-f36f8a2 .elementor-icon-list-icon {
        flex: 0 0 12px !important;
        width: 12px !important;
        margin-right: 0 !important;
    }
    .elementor-location-header .elementor-element-f36f8a2 .elementor-icon-list-icon i {
        font-size: 12px !important;
    }
    .elementor-location-header .elementor-element-f36f8a2 .elementor-icon-list-icon svg {
        width: 12px !important;
        height: 12px !important;
    }
    /* The opening-hours entry is the second item; keep its icon smaller. */
    .elementor-location-header .elementor-element-f36f8a2 .elementor-icon-list-item:nth-child(2) .elementor-icon-list-icon {
        flex-basis: 10px !important;
        width: 10px !important;
    }
    .elementor-location-header .elementor-element-f36f8a2 .elementor-icon-list-item:nth-child(2) .elementor-icon-list-icon i {
        font-size: 10px !important;
    }
    .elementor-location-header .elementor-element-f36f8a2 .elementor-icon-list-item:nth-child(2) .elementor-icon-list-icon svg {
        width: 10px !important;
        height: 10px !important;
    }
    .elementor-location-header .elementor-element-12cf964 .elementor-social-icons-wrapper {
        display: flex;
        flex-wrap: nowrap;
        gap: 3px;
    }
    .elementor-location-header .elementor-element-12cf964 .elementor-grid-item {
        margin: 0 !important;
    }
    .elementor-location-header .elementor-element-12cf964 .elementor-social-icon {
        width: 12px;
        height: 12px;
        font-size: 9px;
    }
}