/* ================================================
   RED POINT — MOBILE HEADER
   ================================================
   A separate component from `.rp-header`. It shares NO class names with the desktop bar, so
   nothing here can reach the desktop header and nothing there can reach this. The two are
   swapped by Elementor's responsive visibility on the widget instances, not by CSS.

   The Figma has no mobile frames — the file holds Homepage, Category and Product at desktop
   width only — so this is a designed fallback, not a specified layout.

   THE BAR IS 132px, AND THE HEADER CONTAINER'S OVERLAP MATCHES IT PER BREAKPOINT.

   The header is transparent — it sits on the hero photograph — so whatever it does not cover
   shows the body, which the theme's reset paints white. The container's negative bottom margin
   pulls the next section up under the bar, and that number has to equal the bar's height:

       desktop  -100px   (the 100px desktop bar)
       tablet   -132px   (this bar)
       mobile   -132px

   Those are set responsively on the container in the header template, NOT here. Change this
   height and change them with it — they are one decision:  10 + 34 + 8 + 70 + 10 = 132.
   ================================================ */

.rp-mheader {
	position: relative;
	width: 100%;
	background: transparent;   /* like the desktop bar, it floats over the hero */
	z-index: 10;
}

/* Fluid, not centred.
   Both rows span the full bar and their contents sit at the edges, so the layout uses whatever
   width the screen gives it instead of huddling in the middle of a wide phone or a tablet.
   The side padding scales with the viewport rather than being a fixed 20px. */
/* 132px, spent as: 10 padding + 34 icons + 8 gap + 70 logo + 10 padding. */
.rp-mheader__bar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 132px;
	padding: 10px clamp(16px, 5vw, 40px);
	box-sizing: border-box;
}

/* ------------------------------------------------
   TOP ROW — burger + icons */
.rp-mheader__row {
	/* ltr for the same reason as the desktop icon row: the design reads bag → account →
	   wishlist → search from the LEFT, and under RTL the row would fill backwards.
	   flex-start under ltr = the left edge, which is where the icons sit on desktop too. */
	display: flex;
	direction: ltr;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
}

/* Full width: the four icons spread across the bar rather than bunching at one edge. */
.rp-mheader__icons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 12px;
}

.rp-mheader__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 6px;
	border-radius: 100px;
	background-color: rgba(37, 37, 37, 0.2);
	color: #FFFFFF;
	box-sizing: border-box;
	transition: background-color 0.15s ease;
}

.rp-mheader__icon:hover {
	background-color: rgba(37, 37, 37, 0.5);
}

.rp-mheader__icon svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: none;
}

/* The cart badge is the shared component from the side cart, so it is styled here to match
   the smaller icon rather than restyled globally. */
.rp-mheader__icon .rp-cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 9999px;
	background-color: #FF3B3B;
	font-family: 'Google Sans', sans-serif;
	font-size: 9px;
	font-weight: 600;
	line-height: 1;
	color: #FFFFFF;
	box-sizing: border-box;
}

/* ------------------------------------------------
   BURGER — a control, not a menu */
/* Scoped under .rp-mheader (0,2,0) so the reset beats Hello Elementor's `.elementor button`
   (0,1,1), which otherwise gives it a border, a background and a padding box — the button was
   rendering as a small outlined rectangle with the bars squashed inside it. */
.rp-mheader .rp-mheader__burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	flex-shrink: 0;
	appearance: none;
	-webkit-appearance: none;
}

.rp-mheader .rp-mheader__burger-bar {
	display: block;
	width: 28px;
	height: 2px;
	flex-shrink: 0;   /* three bars in a 32px column must not be squeezed to hairlines */
	border-radius: 2px;
	background-color: #FFFFFF;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.rp-mheader .rp-mheader__burger.is-open .rp-mheader__burger-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.rp-mheader .rp-mheader__burger.is-open .rp-mheader__burger-bar:nth-child(2) {
	opacity: 0;
}

.rp-mheader .rp-mheader__burger.is-open .rp-mheader__burger-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ------------------------------------------------
   BOTTOM ROW — the logo with the menu button beside it.
   The logo is first in the DOM, so under RTL it paints on the RIGHT and the button sits
   immediately to its left. */
.rp-mheader__brand {
	display: flex;
	align-items: center;
	justify-content: space-between;   /* logo to the right edge, button to the left */
	gap: 14px;
	width: 100%;
}

.rp-mheader__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 70px;
	text-decoration: none;
	flex-shrink: 0;
}

.rp-mheader .rp-mheader__logo-mark {
	width: 49px;
	height: 70px;
	flex-shrink: 0;
	object-fit: contain;
}

.rp-mheader__logo-text {
	display: flex;
	flex-direction: column;
	font-family: 'Futurism', sans-serif;
	font-size: 48px;
	line-height: 0.72;   /* the client's leading, not the Figma's 0.56 — see the header widget */
	text-align: right;
}

.rp-mheader__logo-line--1 {
	color: #D8103A;   /* the wordmark's own red, deeper than the site accent */
}

.rp-mheader__logo-line--2 {
	color: #FFFFFF;
}

/* ------------------------------------------------
   THE MENU
   ------------------------------------------------
   Absolutely positioned so opening it does NOT grow the bar — the 100px height has to hold,
   or the header overlap stops matching. It overlays the page beneath instead, which is why it
   needs an opaque background of its own. */
/* A drawer off the LEFT edge, not a dropdown.
   `left` is PHYSICAL on purpose. Under RTL the logical properties (inset-inline-start) resolve
   to the RIGHT, which is the opposite of what was asked for — the drawer has to come from the
   left of the screen regardless of text direction.
   position:fixed so it spans the viewport height and is not clipped by the 132px bar. */
.rp-mheader__panel {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(82vw, 320px);
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 24px 20px;
	box-sizing: border-box;
	background-color: #0C0C0C;
	border-right: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 18px 0 44px rgba(0, 0, 0, 0.6);
	overflow-y: auto;
	z-index: 200;   /* above the bar, which sits at 10 */

	/* Closed: parked off-screen. visibility is delayed until the slide finishes so the panel
	   cannot be tabbed into while it is still on its way out. */
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform 0.28s ease, visibility 0s linear 0.28s;
}

.rp-mheader__panel.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.28s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.rp-mheader__panel {
		transition: none;
	}
}

.rp-mheader__link {
	display: block;
	padding: 14px 0;   /* a tap target, not a 16px line of text */
	font-family: 'Google Sans', sans-serif;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.2;
	color: var(--rp-navlink, #D7D7D7);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.rp-mheader__link:last-child {
	border-bottom: 0;
}

.rp-mheader__link:hover,
.rp-mheader__link:focus-visible {
	color: #FFFFFF;
}

.rp-mheader__link.is-active {
	font-weight: 700;
	color: #FFFFFF;
}

/* ------------------------------------------------
   THE CATEGORIES INSIDE THE MENU
   ------------------------------------------------
   The client asked for everything to live in this one menu, and on a phone the category strip
   is hidden altogether, so this is the ONLY route into the shop's categories at that width.

   `display: contents` so the rows take part in the panel's own flex column — the wrapper exists
   only to keep the widget's markup readable, and it must not introduce a box that breaks the
   even 2px rhythm between links or the shared bottom borders.

   The colour rule is what separates a category from a page. Same treatment as the strip's own
   drawer (.rp-catmenu__link), so the two lists read as one system. */
.rp-mheader__cats {
	display: contents;
}

.rp-mheader__link--cat {
	padding-inline-start: 12px;
	border-inline-start: 3px solid var(--rp-pill, #FF3B3B);
	font-size: 16px;   /* a shade under the page links — these are the second level */
}

/* Shown only when the desktop header has no links to mirror — an empty menu should say so
   rather than open as a blank box. */
.rp-mheader__empty {
	padding: 14px 0;
	font-family: 'Google Sans', sans-serif;
	font-size: 14px;
	color: var(--rp-muted, #818181);
}