/* ============================================================
   Ferre503 — Header (estilo Home Depot, mobile-first)
   3 niveles: utility / main (logo+search+actions) / category nav.
   Móvil: hamburger + logo + cart icons; nav colapsa en drawer.
   ============================================================ */

/* Reset Storefront header */
.site-header.woocommerce-active {
	background: transparent;
	border: 0;
	padding: 0;
	margin-bottom: 0;
}
.site-header .col-full { padding: 0; max-width: none; }

/* === UTILITY BAR (oculta en móvil para ahorrar espacio) === */
.f5-utility {
	display: none;
	background: var(--f5-navy-dark);
	color: var(--f5-white);
	font-size: var(--fs-xs);
}
@media (min-width: 768px) {
	.f5-utility { display: block; }
}
.f5-utility__inner {
	display: flex; align-items: center; justify-content: space-between;
	min-height: var(--header-utility-h);
	gap: var(--sp-4);
}
.f5-utility__left, .f5-utility__right {
	display: flex; align-items: center; gap: var(--sp-5);
}
.f5-utility__item {
	color: var(--f5-white);
	display: inline-flex; align-items: center; gap: var(--sp-2);
	padding: 6px 4px;
	font-weight: 500;
	letter-spacing: .01em;
}
.f5-utility__item:hover { color: var(--f5-orange); }

/* === MAIN HEADER === */
.f5-main-header {
	background: var(--f5-navy);
	color: var(--f5-white);
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	box-shadow: var(--sh-md);
}
.f5-main-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"hamburger logo actions"
		"search search search";
	align-items: center;
	gap: var(--sp-3);
	min-height: var(--header-main-h);
	padding-block: var(--sp-2);
}

@media (min-width: 1024px) {
	.f5-main-header__inner {
		grid-template-columns: auto minmax(280px, 1fr) auto;
		grid-template-areas: "logo search actions";
		gap: var(--sp-6);
		padding-block: var(--sp-3);
	}
}

.f5-hamburger {
	grid-area: hamburger;
	background: none; border: 0; padding: var(--sp-2);
	color: var(--f5-white);
	cursor: pointer;
	border-radius: var(--r-md);
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px;
}
.f5-hamburger:hover { background: rgba(255,255,255,.08); }
@media (min-width: 1024px) { .f5-hamburger { display: none; } }

.f5-logo {
	grid-area: logo;
	display: inline-flex; align-items: center;
	color: var(--f5-white);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: var(--fs-xl);
	letter-spacing: -0.02em;
	text-decoration: none;
}
.f5-logo:hover { color: var(--f5-white); }
.f5-logo__img { max-height: 40px; width: auto; }
@media (min-width: 1024px) {
	.f5-logo { font-size: var(--fs-2xl); }
	.f5-logo__img { max-height: 52px; }
}
.f5-logo__text { display: inline-flex; align-items: baseline; gap: 1px; }
.f5-logo__accent { color: var(--f5-orange); }

/* === SEARCH BAR === */
.f5-search {
	grid-area: search;
	display: flex;
	background: var(--f5-white);
	border-radius: var(--r-md);
	box-shadow: var(--sh-sm);
	/* overflow visible para no recortar el dropdown de autocompletado;
	   las esquinas redondeadas se aplican a los hijos. */
	overflow: visible;
	width: 100%;
}
.f5-search__input {
	flex: 1;
	border: 0;
	padding: 12px var(--sp-4);
	font-size: var(--fs-base);
	color: var(--c-text);
	background: var(--f5-white);
	min-width: 0;
	border-radius: var(--r-md) 0 0 var(--r-md);
}
.f5-search__input:focus { outline: 0; }
.f5-search__input::placeholder { color: var(--f5-muted); }

.f5-search__btn {
	background: var(--f5-orange);
	color: var(--f5-white);
	border: 0;
	padding: 0 var(--sp-4);
	display: inline-flex; align-items: center; gap: var(--sp-2);
	cursor: pointer;
	font-family: var(--ff-heading);
	font-weight: 700;
	letter-spacing: .02em;
	transition: background var(--dur-fast) var(--ease-out);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	flex-shrink: 0;
}
.f5-search__btn:hover { background: var(--f5-orange-dark); color: var(--f5-white); }
.f5-search__btn-label { display: none; }
@media (min-width: 768px) {
	.f5-search__btn { padding: 0 var(--sp-5); }
	.f5-search__btn-label { display: inline; }
}

/* === HEADER ACTIONS (account, cart) === */
.f5-header-actions {
	grid-area: actions;
	display: flex; align-items: center; gap: var(--sp-2);
}
.f5-header-action {
	color: var(--f5-white);
	display: inline-flex; flex-direction: column; align-items: center;
	gap: 2px;
	padding: var(--sp-2);
	border-radius: var(--r-md);
	min-width: 48px;
	transition: background var(--dur-fast) var(--ease-out);
	text-decoration: none;
	font-size: var(--fs-xs);
	font-weight: 500;
}
.f5-header-action:hover { background: rgba(255,255,255,.08); color: var(--f5-white); }
.f5-header-action__label { display: none; }
@media (min-width: 768px) {
	.f5-header-action__label { display: inline; }
}
.f5-header-action--account { display: none; }
@media (min-width: 768px) { .f5-header-action--account { display: inline-flex; } }

.f5-header-action__icon-wrap { position: relative; display: inline-flex; }
.f5-cart-count {
	position: absolute;
	top: -6px; right: -8px;
	background: var(--f5-orange);
	color: var(--f5-white);
	font-family: var(--ff-mono);
	font-weight: 600;
	font-size: 11px;
	min-width: 18px; height: 18px;
	padding: 0 5px;
	border-radius: var(--r-pill);
	display: inline-flex; align-items: center; justify-content: center;
	line-height: 1;
}

/* === CATEGORY NAV BAR (desktop) === */
.f5-catnav {
	display: none;
	background: var(--f5-white);
	border-bottom: 1px solid var(--c-line);
	position: sticky;
	top: var(--header-main-h);
	z-index: calc(var(--z-header) - 1);
}
@media (min-width: 1024px) {
	.f5-catnav { display: block; }
}
.f5-catnav__inner {
	display: flex; align-items: stretch;
	min-height: var(--header-cat-h);
	gap: var(--sp-4);
}
.f5-catnav__shopbtn {
	background: var(--f5-navy);
	color: var(--f5-white);
	border: 0;
	padding: 0 var(--sp-5);
	display: inline-flex; align-items: center; gap: var(--sp-2);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: var(--fs-base);
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-left: calc(var(--container-pad) * -1);
	padding-left: var(--container-pad);
}
.f5-catnav__shopbtn:hover { background: var(--f5-navy-light); }

.f5-catnav__menu {
	display: flex; align-items: stretch;
	list-style: none; padding: 0; margin: 0;
	gap: 0;
	flex: 1;
	overflow-x: auto;
	scrollbar-width: none;
}
.f5-catnav__menu::-webkit-scrollbar { display: none; }
.f5-catnav__menu > li > a {
	display: inline-flex; align-items: center;
	padding: 0 var(--sp-4);
	color: var(--c-text);
	font-weight: 600;
	font-size: var(--fs-base);
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: color var(--dur-fast), border-color var(--dur-fast);
}
.f5-catnav__menu > li > a:hover {
	color: var(--f5-orange);
	border-bottom-color: var(--f5-orange);
}

/* === MOBILE DRAWER === */
.f5-drawer-overlay {
	position: fixed; inset: 0;
	background: rgba(6, 42, 99, .55);
	backdrop-filter: blur(2px);
	z-index: var(--z-overlay);
	opacity: 0;
	transition: opacity var(--dur-med) var(--ease-out);
}
.f5-drawer-overlay[data-open="true"] { opacity: 1; }
.f5-drawer-overlay[hidden] { display: block; pointer-events: none; }

.f5-drawer {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: min(86vw, 340px);
	background: var(--f5-white);
	z-index: var(--z-drawer);
	display: flex; flex-direction: column;
	transform: translateX(-100%);
	transition: transform var(--dur-med) var(--ease-out);
	box-shadow: var(--sh-xl);
	overflow: hidden;
}
.f5-drawer[data-open="true"] { transform: translateX(0); }
.f5-drawer[hidden] { display: flex; pointer-events: none; }

.f5-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	background: var(--f5-navy);
	color: var(--f5-white);
	padding: var(--sp-4);
	min-height: 60px;
}
.f5-drawer__title {
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: var(--fs-xl);
	letter-spacing: -0.02em;
}
.f5-drawer__close {
	background: none; border: 0; color: var(--f5-white);
	padding: var(--sp-2); cursor: pointer;
	border-radius: var(--r-md);
	min-width: 44px; min-height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
}
.f5-drawer__close:hover { background: rgba(255,255,255,.1); }

.f5-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--sp-4);
	-webkit-overflow-scrolling: touch;
}

.f5-drawer__section-title {
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--f5-muted);
	margin: var(--sp-4) 0 var(--sp-2);
}
.f5-drawer__section-title:first-child { margin-top: 0; }

.f5-drawer__list {
	list-style: none; padding: 0; margin: 0 0 var(--sp-3);
	border-top: 1px solid var(--c-line);
}
.f5-drawer__list li { border-bottom: 1px solid var(--c-line); }
.f5-drawer__list a {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--sp-3) var(--sp-2);
	color: var(--c-text);
	font-weight: 500;
	font-size: var(--fs-md);
	text-decoration: none;
	min-height: 44px;
}
.f5-drawer__list a:hover { color: var(--f5-orange); background: var(--f5-light); }
.f5-drawer__count { color: var(--f5-muted); font-size: var(--fs-xs); font-family: var(--ff-mono); }

/* === MOBILE BOTTOM NAV === */
.f5-bottomnav {
	position: fixed; bottom: 0; left: 0; right: 0;
	background: var(--f5-white);
	border-top: 1px solid var(--c-line);
	display: flex;
	z-index: var(--z-bottomnav);
	box-shadow: 0 -2px 10px rgba(0,0,0,.06);
	padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 768px) {
	.f5-bottomnav { display: none; }
}
.f5-bottomnav__item {
	flex: 1;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 2px;
	padding: var(--sp-2) var(--sp-1);
	min-height: var(--bottomnav-h);
	background: none; border: 0;
	color: var(--c-text);
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	font-family: var(--ff-body);
	cursor: pointer;
	transition: color var(--dur-fast);
}
.f5-bottomnav__item:hover, .f5-bottomnav__item:active { color: var(--f5-orange); }
.f5-bottomnav__item.is-active { color: var(--f5-orange); }
.f5-bottomnav__item.is-active::before {
	content: "";
	position: absolute;
	top: 0; left: 25%; right: 25%;
	height: 3px;
	background: var(--f5-orange);
	border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.f5-bottomnav__icon-wrap { position: relative; display: inline-flex; }
.f5-bottomnav__badge {
	position: absolute;
	top: -4px; right: -8px;
	background: var(--f5-orange);
	color: var(--f5-white);
	font-family: var(--ff-mono);
	font-weight: 600;
	font-size: 10px;
	min-width: 16px; height: 16px;
	padding: 0 4px;
	border-radius: var(--r-pill);
	display: inline-flex; align-items: center; justify-content: center;
	line-height: 1;
}

/* === Breadcrumb estilo HD === */
.f5-breadcrumb {
	background: var(--f5-white);
	border-bottom: 1px solid var(--c-line);
	padding: var(--sp-2) 0;
	font-size: var(--fs-sm);
	color: var(--f5-muted);
}
.f5-breadcrumb a { color: var(--f5-navy); }
.f5-breadcrumb a:hover { color: var(--f5-orange); }

/* Body lock cuando drawer abierto */
body.f5-no-scroll {
	overflow: hidden;
	touch-action: none;
}

/* Search abierto desde bottom nav móvil */
body.f5-search-open .f5-main-header {
	position: fixed; top: 0; left: 0; right: 0;
}
body.f5-search-open .f5-search__input { animation: f5-search-focus var(--dur-med) var(--ease-out); }
@keyframes f5-search-focus {
	from { box-shadow: 0 0 0 0 var(--f5-orange-soft); }
	to   { box-shadow: 0 0 0 4px var(--f5-orange-soft); }
}