/* ============================================================
   eclarc masthead -- the header as row zero of the page grid.
   Loaded only on pages with body.ec-mh (see eclarc-masthead.php),
   and every rule is scoped to it besides.

   The hero, the set rows, the shop archive and the sticky header's
   backdrop all run on one six-column hairline grid (border-left on
   the grid, border-right on each cell). The header was the one band
   that ignored it: a 124px wordmark and three icons floating in
   1600px of white. Here it takes the same six columns, so its rules
   continue straight down into the hero and the product rows.
   ============================================================ */

body.ec-mh {
	--mh-ink: #111;
	--mh-mut: #767674;
	--mh-g: clamp(20px, 3vw, 48px);
}

/* The promo bar is the theme's #000; the logo cell hangs from it as
   one inverted L, so both are the system's one ink, #111. */
body.ec-mh .elementor-3591 .elementor-element-38643c99 {
	background-color: var(--mh-ink) !important;
}

/* 104px at 1600, so promo bar + masthead = 148px: the hero starts
   exactly where it did when the category links were their own row. */
body.ec-mh .elementor-3591 .elementor-element-22da596f {
	--mh-h: clamp(84px, 6.5vw, 104px);
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	padding: 0 !important;
	border-bottom: 1px solid var(--mh-ink) !important;
	background: #fff;
}

body.ec-mh .elementor-3591 .elementor-element-22da596f > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0 !important;
	max-width: none !important;
	width: 100%;
	padding: 0 !important;
	margin: 0;
	border-left: 1px solid var(--mh-ink);
	box-sizing: border-box;
}

body.ec-mh .elementor-3591 .elementor-element-22da596f > .e-con-inner > .elementor-element {
	--width: auto;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0;
	min-height: var(--mh-h);
	box-sizing: border-box;
	border-right: 1px solid var(--mh-ink);
}

/* --- column 1: the wordmark ------------------------------------ */
body.ec-mh .elementor-3591 .elementor-element-22da596f > .e-con-inner > .elementor-element.elementor-element-24cf160e {
	grid-column: 1;
	grid-row: 1;
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	padding-left: var(--mh-g) !important;
}

/* The one solid block in the header. It hangs from the black promo
   bar as a single inverted L, and answers the black "shop all
   designs" cell at the hero's opposite corner. Ink, not a colour:
   the only colour in the masthead is still the four photographs. */
body.ec-mh .elementor-3591 .elementor-element-22da596f > .e-con-inner > .elementor-element.elementor-element-24cf160e {
	background: var(--mh-ink);
}

body.ec-mh .elementor-3591 .elementor-element-251c2df0 {
	margin: 0 !important;
}

/* the wordmark is a black-on-transparent PNG (custom_logo 9437) */
body.ec-mh .elementor-3591 .elementor-element-251c2df0 img {
	filter: invert(1);
}

/* --- columns 2-5: the ranges ----------------------------------- */
body.ec-mh .elementor-3591 .elementor-element-22da596f > .e-con-inner > .elementor-element.elementor-element-ec1mhw {
	grid-column: 2 / span 4;
	grid-row: 1;
	border-right: 0 !important;
}

/* cart and checkout: the sticky height, so the empty band stays thin */
body.ec-mh.ec-mh-bare .elementor-3591 .elementor-element-22da596f {
	--mh-h: 56px;
}

/* cart and checkout: columns 2-5 stay one empty cell */
body.ec-mh.ec-mh-bare .elementor-3591 .elementor-element-22da596f > .e-con-inner > .elementor-element.elementor-element-ec1mhw {
	border-right: 1px solid var(--mh-ink) !important;
}

/* There the step bar's black "you are here" cell sits directly under
   the logo; a black logo cell would fuse with it into one shapeless
   mass, so on these two pages the wordmark is ink on white. */
body.ec-mh.ec-mh-bare .elementor-3591 .elementor-element-22da596f > .e-con-inner > .elementor-element.elementor-element-24cf160e {
	background: #fff;
}

body.ec-mh.ec-mh-bare .elementor-3591 .elementor-element-251c2df0 img {
	filter: none;
}

/* The masthead draws its own bottom rule, so whatever used to draw
   the line under the old header must not draw a second one: the
   step bar's top, the shop archive head's top, and on cart and
   checkout the theme's page heading, collapsed there to a 1px box
   that is nothing but its border. */
body.ec-mh .cart-checkout-nav,
body.ec-mh .ec-shop-head {
	border-top: 0 !important;
	margin-top: 0 !important;
}

body.ec-mh.ec-mh-bare .page-heading {
	border-bottom: 0 !important;
}

body.ec-mh .elementor-element-ec1mhw .elementor-widget-container {
	height: 100%;
}

body.ec-mh .ec-mh {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	height: 100%;
	font-family: 'Hanken Grotesk', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.ec-mh .ec-mh__cell {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: var(--mh-h);
	border-right: 1px solid var(--mh-ink);
	background: #fff;
	color: var(--mh-ink);
	text-decoration: none;
	overflow: hidden;
}

body.ec-mh .ec-mh__txt {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	padding: 14px 0 14px 14px;
}

body.ec-mh .ec-mh__name {
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
}

body.ec-mh .ec-mh__price {
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	color: var(--mh-mut);
	white-space: nowrap;
}

/* The picture is a square the height of the row, flush to the cell's
   top, right and bottom rules. White packshot by default; the
   hand-held colour photograph on hover -- the same swap as every
   product cell on the site. */
body.ec-mh .ec-mh__img {
	position: relative;
	overflow: hidden;
	flex: 0 0 auto;
	width: var(--mh-h);
	align-self: stretch;
}

body.ec-mh .ec-mh__img img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0;
	border-radius: 0;
}

/* The packshots are square cutouts with ~9% white margin, and their
   objects differ in shape: a standing phone uses ~42% of the width, a
   charm is a thread. Each range gets its own zoom so the four objects
   read at a similar weight; the well clips the overshoot. */
body.ec-mh .ec-mh__pack {
	object-fit: contain;
	padding: 0;
	box-sizing: border-box;
	transform: scale(var(--mh-zoom, 1));
}

body.ec-mh .ec-mh__cell--phone-cases { --mh-zoom: 1.2; }
body.ec-mh .ec-mh__cell--phone-grips { --mh-zoom: 1; }
body.ec-mh .ec-mh__cell--magsafe-wallets { --mh-zoom: 1.08; }
body.ec-mh .ec-mh__cell--phone-charms { --mh-zoom: 1.3; }

body.ec-mh .ec-mh__alt {
	object-fit: cover;
	opacity: 0;
	transition: opacity .25s ease;
}

body.ec-mh .ec-mh__cell:hover .ec-mh__alt,
body.ec-mh .ec-mh__cell:focus-visible .ec-mh__alt {
	opacity: 1;
}

body.ec-mh .ec-mh__cell:focus-visible {
	outline: 2px solid var(--mh-ink);
	outline-offset: -3px;
}

/* You are here: on a range's archive its label block inverts, the
   same black cell the cart's step bar uses for the current step. */
body.ec-mh .ec-mh__cell[aria-current="page"] .ec-mh__txt,
body.ec-mh .ec-mh__cell.is-in .ec-mh__txt {
	background: var(--mh-ink);
	color: #fff;
}

body.ec-mh .ec-mh__cell[aria-current="page"] .ec-mh__price,
body.ec-mh .ec-mh__cell.is-in .ec-mh__price {
	color: rgba(255, 255, 255, .6);
}

/* --- column 6: search / account / bag as three square keys ----- */
body.ec-mh .elementor-3591 .elementor-element-22da596f > .e-con-inner > .elementor-element.elementor-element-185175ba {
	grid-column: 6;
	grid-row: 1;
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 !important;
	align-items: stretch;
}

body.ec-mh .elementor-3591 .elementor-element-185175ba > .elementor-element {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	min-width: 0;
}

body.ec-mh .elementor-3591 .elementor-element-185175ba > .elementor-element + .elementor-element {
	border-left: 1px solid var(--mh-ink);
}

body.ec-mh .elementor-3591 .elementor-element-185175ba .elementor-widget-container,
body.ec-mh .elementor-3591 .elementor-element-185175ba .etheme-elementor-off-canvas__wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

body.ec-mh .elementor-3591 .elementor-element-185175ba .elementor-button,
body.ec-mh .elementor-3591 .elementor-element-185175ba .etheme-elementor-off-canvas__toggle_button {
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* The bag's running total is the one number in the header that is
   not about a product; the count stays. */
body.ec-mh .elementor-3591 .elementor-element-7561a160 .elementor-button-text,
body.ec-mh .elementor-3591 .elementor-element-7561a160 .etheme-elementor-off-canvas-total-inner {
	display: none !important;
}

/* Rectangles, never pills: the count was a black circle sitting on the
   bag's handle. Now a square pinned flush into the key's top-right
   corner -- a small cell of the key -- and the bag icon is centred. */
body.ec-mh .elementor-3591 .elementor-element-22da596f .elementor-element-7561a160 {
	position: relative;
}

body.ec-mh .elementor-3591 .elementor-element-7561a160 .etheme-elementor-off-canvas__toggle_wrapper,
body.ec-mh .elementor-3591 .elementor-element-7561a160 .elementor-button-icon {
	position: static !important;
}

body.ec-mh .elementor-3591 .elementor-element-7561a160 .elementor-button-icon-qty {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	left: auto !important;
	bottom: auto !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 0 !important;
	line-height: 20px !important;
	font-size: 10px !important;
	padding: 0 !important;
	margin: 0 !important;
	transform: none !important;
	pointer-events: none;
	border-radius: 0 !important;
	font-family: 'Hanken Grotesk', Helvetica, Arial, sans-serif;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* --- sticky: the same grid at 56px, prices folded away --------- */
body.ec-mh .elementor-3591.sticky-on .elementor-element-22da596f {
	--mh-h: 56px;
}

body.ec-mh .elementor-3591.sticky-on .ec-mh__txt {
	justify-content: center;
	padding-block: 0;
}

/* labels only: at 56px a packshot is a smudge, and the product rows
   scrolling beneath are what the eye is on */
body.ec-mh .elementor-3591.sticky-on .ec-mh__price,
body.ec-mh .elementor-3591.sticky-on .ec-mh__img {
	display: none;
}

body.ec-mh .elementor-3591.sticky-on .elementor-element-251c2df0 img {
	width: 104px !important;
}

/* --- the homepage's old category row is this header now -------- */
body.ec-mh .ec-hero__mast {
	display: none !important;
}

/* the masthead's bottom rule is the hero's top rule; two would be 2px */
body.ec-mh .ec-hero__grid {
	border-top: 0 !important;
}

/* ============================================================
   Tablet and phone (the theme's mobile header runs to 1024px):
   [menu] [wordmark] [bag] as one row of cells, and -- on the
   homepage and the archives -- the four ranges as a rail beneath.
   ============================================================ */
@media (max-width: 1024px) {
	body.ec-mh .elementor-3591 .elementor-element-22da596f {
		--mh-h: 56px;
	}

	body.ec-mh .elementor-3591 .elementor-element-22da596f > .e-con-inner {
		/* the rail's four columns: menu | wordmark over 2-3 | bag */
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	body.ec-mh .elementor-3591 .elementor-element-22da596f > .e-con-inner > .elementor-element.elementor-element-629e9769 {
		grid-column: 1;
		grid-row: 1;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}

	body.ec-mh .elementor-3591 .elementor-element-629e9769 > .elementor-element {
		width: auto !important;
		margin: 0 !important;
	}

	body.ec-mh .elementor-3591 .elementor-element-22da596f > .e-con-inner > .elementor-element.elementor-element-24cf160e {
		grid-column: 2 / span 2;
		justify-content: center;
		padding-left: 0 !important;
		border-right: 0 !important;
	}

	body.ec-mh .elementor-3591 .elementor-element-185175ba > .elementor-element {
		border-left: 1px solid var(--mh-ink) !important;
	}

	body.ec-mh .elementor-3591 .elementor-element-22da596f > .e-con-inner > .elementor-element.elementor-element-185175ba {
		grid-column: 4;
		display: flex !important;
	}

	body.ec-mh .elementor-3591 .elementor-element-185175ba > .elementor-element {
		flex: 1 1 0;
		width: auto !important;
	}

	body.ec-mh .elementor-3591 .elementor-element-185175ba > .elementor-hidden-mobile,
	body.ec-mh .elementor-3591 .elementor-element-185175ba > .elementor-hidden-tablet {
		display: none !important;
	}

	body.ec-mh .elementor-3591 .elementor-element-22da596f > .e-con-inner > .elementor-element.elementor-element-ec1mhw {
		display: none !important;
	}

	body.ec-mh.ec-mh-rail .elementor-3591 .elementor-element-22da596f > .e-con-inner > .elementor-element.elementor-element-ec1mhw {
		display: block !important;
		grid-column: 1 / -1;
		grid-row: 2;
		min-height: 0;
		border-top: 1px solid var(--mh-ink);
	}

	/* the rail scrolls away with the page; only the logo row sticks */
	body.ec-mh.ec-mh-rail .elementor-3591.sticky-on .elementor-element-22da596f > .e-con-inner > .elementor-element.elementor-element-ec1mhw {
		display: none !important;
	}

	body.ec-mh .ec-mh__cell {
		min-height: 0;
	}

	body.ec-mh .ec-mh__img {
		width: 76px;
	}

	body.ec-mh .ec-mh__txt {
		padding: 12px 0 12px 14px;
		gap: 10px;
	}
}

/* Tablet: the rail keeps the desktop cell -- label left, square
   picture right -- at a height the packshots can be read at. */
@media (min-width: 601px) and (max-width: 1024px) {
	body.ec-mh .ec-mh__cell {
		min-height: 76px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	body.ec-mh .elementor-3591 .elementor-element-185175ba > .elementor-element-3bdda82f {
		display: flex !important;
	}
}

/* Phone: picture on top, label and price beneath, four across. */
@media (max-width: 600px) {
	body.ec-mh .ec-mh__cell {
		flex-direction: column;
	}

	body.ec-mh .ec-mh__img {
		order: -1;
		width: 100%;
		height: 58px;
		align-self: auto;
	}

	body.ec-mh .ec-mh__pack {
		padding: 6px 0 0;
	}

	body.ec-mh .ec-mh__txt {
		flex: 0 0 auto;
		padding: 7px 10px 10px;
		gap: 5px;
	}

	body.ec-mh .ec-mh__name {
		letter-spacing: .16em;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ec-mh .ec-mh__alt,
	body.ec-mh .ec-mh__pack {
		transition: none;
	}
}