/**
 * Header.
 *
 * Every rule is scoped under .elementor-location-header, which is the wrapper Elementor
 * prints around the header template and nothing else on the page. Nothing here can reach
 * the rest of the site, and deleting this file returns the header to exactly what
 * Elementor draws.
 *
 * Targeting that wrapper rather than classes added to the template is deliberate. The
 * header template then needs no editing at all — a template nobody touched cannot have
 * been broken by touching it — and the styling survives somebody rebuilding a section in
 * Elementor, which would change the generated element ids.
 *
 * The look is what most modern shops have settled on, for reasons rather than fashion: a
 * quiet white bar, a small logo, room around the menu, and the cart and wishlist as plain
 * icons. The shop's pink is used only where something is interactive, so a customer's eye
 * goes to what they can press rather than to the furniture.
 */

.elementor-location-header {
	--cb-ink: #1f2328;
	--cb-accent: #d63864;
	--cb-line: #ececef;

	background: #fff;
	border-bottom: 1px solid var( --cb-line );

	/* A header that follows the shopper down a long category page is the biggest single
	   difference between an old shop and a new one — the cart stays reachable. */
	position: sticky;
	top: 0;
	z-index: 99;
}

.admin-bar .elementor-location-header {
	top: 32px;
}

@media ( max-width: 782px ) {
	.admin-bar .elementor-location-header {
		top: 46px;
	}
}

/*
 * The header's own height, stated rather than inherited.
 *
 * Elementor sets no padding on this container, so its height came from whatever the
 * tallest thing inside it happened to be — which changed the moment the logo grew, and
 * left space above the row that nothing in the template accounted for. Fixing the row
 * height and the padding here means the header is the same size whatever goes in it.
 */
/*
 * Both the outer container and its inner wrapper, because a boxed container is two
 * elements and padding on either one adds to the height. Stated on both so there is no
 * second value hiding behind the first.
 */
.elementor-location-header > .e-con {
	padding-block: 0;
	min-height: 0;
}

/*
 * ---------------------------------------------------------------------------
 * THE HEADER HEIGHT. If the bar wants to be taller or shorter, this is the
 * number to change — nothing else in this file needs touching.
 * ---------------------------------------------------------------------------
 *
 * 72px is about where most modern shops sit: tall enough for a logo somebody can read,
 * short enough that it does not eat the top of a phone screen. Padding is zero, so the
 * number below is the height and there is no second value quietly adding to it.
 */
/*
 * The two layers of padding that actually made this header 100px tall for a 60px logo.
 *
 * A boxed container is an outer .e-con wrapping an .e-con-inner, and each of the three
 * columns inside is a container too. Elementor gives every one of them 10px top and
 * bottom by default, so the height was 60 for the logo plus 20 for the column plus 20 for
 * the inner. None of it is visible in the template and none of it is in this site's own
 * CSS — it is Elementor's default, applied three levels deep.
 *
 * The selectors are one level more specific than Elementor's own on purpose. Elementor's
 * stylesheet loads after this file, so at equal specificity it wins — which is exactly
 * why the plainer version of this rule appeared to do nothing.
 */
.elementor-location-header .e-con-boxed > .e-con-inner,
.elementor-location-header .e-con-inner > .e-con,
.elementor-location-header .e-con-inner > .e-con > .e-con-inner {
	padding-block: 0;
}

.elementor-location-header .e-con-inner {
	align-items: center;
	min-height: 72px;
}

/*
 * The columns stretch to the full row, so their contents need centring too — otherwise
 * removing the padding above just moves the gap from above the logo to below it.
 *
 * Both properties, because the columns do not agree on direction: the logo and menu
 * columns stack, the actions column is a row, and the axis that centres one is the axis
 * that stretches the other.
 */
.elementor-location-header .e-con-inner > .e-con {
	justify-content: center;
	align-items: center;
}

@media ( max-width: 1024px ) {
	.elementor-location-header .e-con-inner {
		min-height: 60px;
	}
}

/*
 * The logo's wrapper, flattened — and this is what was making the header 100px tall for a
 * 60px logo.
 *
 * Elementor renders the logo as `a { display: inline-block }` holding an
 * `img { vertical-align: middle }`. An inline-block sits in a *line box*, so the parent's
 * line-height reserves space above and below it — space that belongs to the text the
 * container is not displaying, and that grows or shrinks with the font size rather than
 * with the logo. Roughly 24px of it here, which is most of the gap.
 *
 * Making the wrapper and the anchor flex removes the line box altogether; line-height: 0
 * finishes off any inline formatting left over. The image is then exactly as tall as the
 * height set above it, and nothing else.
 */
.elementor-location-header .elementor-widget-theme-site-logo,
.elementor-location-header .elementor-widget-theme-site-logo > div,
.elementor-location-header .elementor-widget-theme-site-logo a,
.elementor-location-header .elementor-widget-theme-site-logo figure {
	display: flex;
	align-items: center;
	line-height: 0;
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------------ logo */

/*
 * The source image is 800x436. Left to itself the browser draws it at whatever the column
 * allows, which is what made the header look top-heavy. Constraining the height and
 * letting the width follow keeps the mark crisp at any size.
 */
/*
 * Kept just under the row height, so the logo is the biggest thing in the bar without
 * being what decides how tall the bar is. Raising this beyond the row height above would
 * push the header open again, which is the loop this was stuck in.
 */
.elementor-location-header .elementor-widget-theme-site-logo img {
	height: 60px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
}

@media ( max-width: 1024px ) {
	.elementor-location-header .elementor-widget-theme-site-logo img {
		height: 46px;
	}
}

/* ------------------------------------------------------------------- nav */

.elementor-location-header .elementor-nav-menu > li > a.elementor-item {
	color: var( --cb-ink );
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .02em;
	padding: 10px 14px;
	border-radius: 8px;
	transition: color .15s ease, background-color .15s ease;
}

.elementor-location-header .elementor-nav-menu > li > a.elementor-item:hover,
.elementor-location-header .elementor-nav-menu > li > a.elementor-item:focus-visible {
	color: var( --cb-accent );
	background: #fbf3f6;
}

/* The section being viewed, marked by weight as well as colour so it is not carried by
   colour alone. */
.elementor-location-header .elementor-nav-menu > li > a.elementor-item-active,
.elementor-location-header .elementor-nav-menu > li.current-menu-item > a {
	color: var( --cb-accent );
	font-weight: 600;
}

/* --------------------------------------------------------------- the icons */

/*
 * The three icons are built by three different things — Elementor's cart widget, and two
 * shortcodes — so each arrives wrapped in its own nest of divs, at its own size, with its
 * badge hung off a different parent. Left alone they line up by accident, which is to say
 * they do not.
 *
 * So each one is forced into the same 44px square, centred, and every badge is positioned
 * against that square rather than against whatever the widget happened to wrap it in.
 * 44px because that is the smallest target a finger reliably hits.
 */
.elementor-location-header .elementor-widget-woocommerce-menu-cart,
.elementor-location-header .elementor-widget-shortcode,
.elementor-location-header .elementor-shortcode,
.elementor-location-header .elementor-menu-cart__wrapper,
.elementor-location-header .elementor-menu-cart__toggle_wrapper,
.elementor-location-header .elementor-menu-cart__toggle {
	display: flex;
	align-items: center;
	margin: 0;
}

.elementor-location-header .elementor-menu-cart__toggle_button,
.elementor-location-header .codebold-wishlist-link,
.elementor-location-header .cb-account-link {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Elementor renders the cart as a button. In a modern header the cart is an icon; the
	   box made it read as a call to action competing with the products. */
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var( --cb-ink ) !important;
	fill: currentColor;
	text-decoration: none;
	transition: color .15s ease;
}

.elementor-location-header .elementor-menu-cart__toggle_button:hover,
.elementor-location-header .codebold-wishlist-link:hover,
.elementor-location-header .cb-account-link:hover {
	color: var( --cb-accent ) !important;
}

/* The running total is noise beside a basket icon; the count is the useful part. */
.elementor-location-header .elementor-menu-cart__toggle_button .elementor-button-text {
	display: none;
}

/* Every icon the same size, whatever drew it. */
.elementor-location-header .elementor-button-icon svg,
.elementor-location-header .codebold-wishlist-heart svg,
.elementor-location-header .cb-account-icon svg {
	width: 23px;
	height: 23px;
	display: block;
}

/*
 * The icon wrappers must NOT be positioned, or they become the box the badge is measured
 * from — and this is exactly what put the cart's number on top of its basket.
 *
 * Elementor sets `.elementor-menu-cart__toggle .elementor-button-icon { position: relative }`,
 * which is two classes, the same weight as a plainer rule here, and its stylesheet loads
 * later — so the tie went to Elementor. The cart badge was then measured from the 23px
 * glyph while the wishlist badge was measured from the 44px button: identical offsets,
 * different boxes, one of them sitting over the icon.
 *
 * Naming the toggle makes this one level heavier, so both badges hang off the same 44px
 * square and the two icons finally agree.
 */
.elementor-location-header .elementor-menu-cart__toggle .elementor-button-icon,
.elementor-location-header .elementor-button-icon,
.elementor-location-header .codebold-wishlist-heart,
.elementor-location-header .cb-account-icon {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/*
 * Both badges, anchored to the 44px square rather than to the icon inside it — that is
 * what makes them land in the same place on every icon regardless of which widget drew
 * it. Same size, same colour, same offset: they mean the same thing in the same row, and
 * two different badges would read as an accident.
 */
.elementor-location-header .elementor-button-icon-qty,
.elementor-location-header .codebold-wishlist-count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var( --cb-accent );
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	display: inline-block;
	/* Elementor gives the cart badge its own font settings. */
	font-family: inherit;
	letter-spacing: 0;
	box-sizing: border-box;
}

/*
 * An empty basket and an empty wishlist show no badge at all. A red "0" that a shopper
 * cannot clear reads as a stuck notification.
 *
 * Both hide rules live here, after the shared style above. The wishlist plugin has its
 * own .is-empty rule of equal specificity, and this stylesheet loads after the plugin's —
 * so without repeating it here, the shared rule below would quietly win and the badge
 * would sit there showing zero.
 */
/*
 * Elementor Pro styles the cart bubble through a five-level selector:
 *
 *   .elementor-menu-cart--items-indicator-bubble .elementor-menu-cart__toggle
 *     .elementor-button-icon .elementor-button-icon-qty[data-counter]
 *
 * so a two-level rule here never stood a chance, whichever order the files loaded in.
 * Matching its shape and adding the header scope puts this one level above it. Written
 * out rather than reached for with !important, because the next person needs to see why
 * it is this long.
 */
.elementor-location-header .elementor-menu-cart--items-indicator-bubble .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter],
.elementor-location-header .codebold-wishlist-count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background-color: var( --cb-accent );
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	display: inline-block;
	box-sizing: border-box;
}

/* And the empty case, one level higher again so it beats the rule directly above. */
.elementor-location-header .elementor-menu-cart--items-indicator-bubble .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter="0"],
.elementor-location-header .codebold-wishlist-count.is-empty {
	display: none;
}

/* ------------------------------------------------------- narrow screens */

.elementor-location-header .elementor-menu-toggle {
	min-width: 44px;
	min-height: 44px;
	background: transparent;
	color: var( --cb-ink );
}

@media ( max-width: 1024px ) {
	.elementor-location-header .e-con-inner {
		gap: 10px;
	}
}