/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/**********************************************************************
 /$$$$$$$                                                            
| $$__  $$                                                           
| $$  \ $$ /$$$$$$   /$$$$$$   /$$$$$$   /$$$$$$   /$$$$$$   /$$$$$$ 
| $$$$$$$//$$__  $$ /$$__  $$ |____  $$ /$$__  $$ /$$__  $$ /$$__  $$
| $$____/| $$  \ $$| $$  \ $$  /$$$$$$$| $$  \__/| $$  \ $$| $$  \ $$
| $$     | $$  | $$| $$  | $$ /$$__  $$| $$      | $$  | $$| $$  | $$
| $$     |  $$$$$$/| $$$$$$$/|  $$$$$$$| $$      |  $$$$$$/|  $$$$$$/
|__/      \______/ | $$____/  \_______/|__/       \______/  \______/ 
                   | $$                                              
                   | $$                                              
                   |__/                                              
**********************************************************************/

:root {
	--pp-red:   #AA0003;
	--pp-cream: #FFF9F9;
	--pp-ink:   #272020;

	--pp-font:        var(--e-global-typography-text-font-family, "Heebo"), sans-serif;
	--pp-font-strong: var(--e-global-typography-primary-font-weight, 600);

	--pp-container: 1200px;
}


/* =====================================================================
   HEADER  —  Elementor → Theme Builder → Header (template #30)

   Every element carries a "pp-*" global class (Elementor → Class
   Manager). The classes are empty in Elementor; all styling lives here.

   pp-header
   ├─ pp-topbar > pp-topbar__inner
   │    ├─ pp-topbar__email   (icon + pp-topbar__text)
   │    ├─ pp-topbar__notice
   │    └─ pp-topbar__social
   └─ pp-mainbar > pp-mainbar__inner
        ├─ pp-nav      (pp-menu  = mobile hamburger, pp-nav__links)
        ├─ pp-logo
        └─ pp-actions  (pp-nav__links, pp-actions__icons > search + pp-cart)

   Selectors are prefixed with ".elementor" so they outrank Elementor's
   atomic base styles (.elementor .e-flexbox-base { padding: 10px … }).
   ===================================================================== */

.elementor .pp-header {
	position: relative;
	z-index: 100;
	flex-direction: column;
	gap: 0;
	padding: 0;
}

/* Shared --------------------------------------------------------------- */

.elementor .pp-icon {
	display: block;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	object-fit: contain;
	transition: opacity .2s;
}

.elementor a:hover > .pp-icon,
.elementor .pp-menu__toggle:hover .pp-icon {
	opacity: .7;
}

.elementor .pp-link {
	font-family: var(--pp-font);
	font-size: 12px;
	font-weight: var(--pp-font-strong);
	line-height: 20px;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--pp-ink);
	transition: color .2s;
}

.elementor .pp-link:hover,
.elementor .pp-link:focus-within {
	color: var(--pp-red);
}

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

.elementor .pp-topbar {
	justify-content: center;
	padding: 10px 20px;
	background-color: var(--pp-red);
}

.elementor .pp-topbar__inner {
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: var(--pp-container);
	margin: 0 auto;
	padding: 0;
}

/* Email + social share the leftover space equally, so the notice stays centred */
.elementor .pp-topbar__email,
.elementor .pp-topbar__social {
	flex: 1 1 0;
	align-items: center;
	width: auto;
	padding: 0;
}

.elementor .pp-topbar__email {
	gap: 10px;
	text-decoration: none;
}

.elementor .pp-topbar__social {
	justify-content: flex-end;
}

.elementor .pp-topbar__text {
	font-family: var(--pp-font);
	font-size: 12px;
	font-weight: 400;
	line-height: 15px;
	white-space: nowrap;
	color: var(--pp-cream);
}

.elementor .pp-topbar__notice {
	flex: 0 0 auto;
	margin: 0;
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
}

/* Main bar ------------------------------------------------------------- */

.elementor .pp-mainbar {
	justify-content: center;
	padding: 32px 20px;
	background-color: var(--pp-cream);
}

.elementor .pp-mainbar__inner {
	align-items: center;
	gap: 24px;
	max-width: var(--pp-container);
	margin: 0 auto;
	padding: 0;
}

/* Left and right columns are equal width, so the logo sits dead centre */
.elementor .pp-nav,
.elementor .pp-actions {
	flex: 1 1 0;
	align-items: center;
	width: auto;
	padding: 0;
}

.elementor .pp-actions {
	justify-content: flex-end;
	gap: 40px;
}

.elementor .pp-nav__links,
.elementor .pp-actions__icons {
	align-items: center;
	gap: 40px;
	width: auto;
	padding: 0;
}

.elementor .pp-logo {
	flex-shrink: 0;
	width: 150px;
	height: auto;
}

/* Mini cart (Elementor Pro "Menu Cart" widget placed inside .pp-cart) -- */

.elementor .pp-cart {
	align-items: center;
	width: auto;
	min-width: 20px;
	padding: 0;
}

.elementor .pp-cart .elementor-widget-woocommerce-menu-cart {
	--toggle-button-text-color: var(--pp-ink);
	--toggle-button-icon-color: var(--pp-ink);
	--toggle-button-hover-text-color: var(--pp-red);
	--toggle-button-icon-hover-color: var(--pp-red);
	--toggle-button-background-color: transparent;
	--toggle-button-hover-background-color: transparent;
	--toggle-button-border-width: 0;
	--toggle-icon-size: 20px;
	--toggle-icon-padding: 0;
	--items-indicator-text-color: var(--pp-cream);
	--items-indicator-background-color: var(--pp-red);
	width: auto;
	font-family: var(--pp-font);
}

.elementor .pp-cart .elementor-menu-cart__toggle .elementor-button {
	gap: 0;
	padding: 0;
}

.elementor .pp-cart .elementor-button-icon[data-counter]::before {
	top: -6px;
	right: -8px;
	min-width: 15px;
	height: 15px;
	font-size: 9px;
	line-height: 15px;
}

/* Mobile menu (hidden on desktop) -------------------------------------- */

.elementor .pp-menu {
	display: none;
	width: auto;
}

.elementor .pp-menu__item,
.elementor .pp-menu__toggle-title {
	width: auto;
}

.elementor .pp-menu__toggle {
	width: auto;
	padding: 0;
	cursor: pointer;
	list-style: none;
}

.elementor .pp-menu__toggle::-webkit-details-marker {
	display: none;
}

.elementor .pp-menu__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 99;
	width: 100%;
	padding: 8px 16px 20px;
	background-color: var(--pp-cream);
	border-top: 1px solid rgba(39, 32, 32, .1);
	box-shadow: 0 12px 24px rgba(39, 32, 32, .08);
}

.elementor .pp-menu__links {
	flex-direction: column;
	gap: 0;
	padding: 0;
}

.elementor .pp-menu__link {
	display: block;
	padding: 12px 0;
	font-size: 14px;
	border-bottom: 1px solid rgba(39, 32, 32, .08);
}

.elementor .pp-menu__link:last-child {
	border-bottom: 0;
}

/* Tablet  (≤ 1024px, Elementor "Tablet" breakpoint) -------------------- */

@media (max-width: 1024px) {

	.elementor .pp-mainbar {
		padding: 17px 16px;
	}

	/* Panel is positioned against .pp-mainbar, so it spans the full width */
	.elementor .pp-mainbar__inner,
	.elementor .pp-nav,
	.elementor .pp-menu,
	.elementor .pp-menu__item {
		position: static;
	}

	.elementor .pp-menu {
		display: flex;
	}

	.elementor .pp-nav__links {
		display: none;
	}

	.elementor .pp-actions,
	.elementor .pp-actions__icons {
		gap: 15px;
	}
}

/* Mobile  (≤ 767px, Elementor "Mobile" breakpoint) --------------------- */

@media (max-width: 767px) {

	.elementor .pp-topbar {
		padding: 4px 16px;
	}

	.elementor .pp-topbar__inner {
		justify-content: center;
	}

	.elementor .pp-topbar__email,
	.elementor .pp-topbar__social {
		display: none;
	}

	.elementor .pp-topbar__text {
		font-size: 10px;
		line-height: 13px;
	}

	.elementor .pp-topbar__notice {
		white-space: normal;
	}
}