/**
 * Deportes Eli — cabecera + barra superior
 *
 * Retoques visuales estilo minimalista (inspiración Nike):
 * distribución logo / menú / iconos, buscador píldora,
 * desplegables Astra refinados, flechas ocultas en escritorio.
 *
 * No altera el comportamiento de apertura/cierre de Astra.
 * No implementa mega menú.
 */

:root {
	--de-header-max: min(1400px, calc(100vw - 2rem));
	--de-header-pad: clamp(1.25rem, 2.5vw, 2rem);
	--de-navy: #0b1f3a;
	--de-ink: #111111;
	--de-muted: #757575;
	--de-topbar-bg: #0a0a0a;
	--de-topbar-text: #ffffff;
	--de-search-bg: #f5f5f5;
	--de-header-icon: 1.35rem;
}

/* -------------------------------------------------------------------------
   Barra superior (anuncio de envío)
   ------------------------------------------------------------------------- */

.de-topbar {
	background-color: var(--de-topbar-bg);
	color: var(--de-topbar-text);
	font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.de-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: var(--de-header-max);
	margin-inline: auto;
	padding: 0.45rem var(--de-header-pad);
	box-sizing: border-box;
	text-align: center;
}

.de-topbar__text {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--de-topbar-text);
}

@media (max-width: 767px) {
	.de-topbar__inner {
		padding-block: 0.4rem;
		padding-inline: 0.75rem;
	}

	.de-topbar__text {
		font-size: 0.625rem;
		letter-spacing: 0.05em;
	}
}

@media (max-width: 320px) {
	.de-topbar__text {
		font-size: 0.5625rem;
		letter-spacing: 0.04em;
	}
}

/* -------------------------------------------------------------------------
   1. Distribución header: logo izq. / menú centro / iconos der.
   ------------------------------------------------------------------------- */

.ast-hfb-header .ast-primary-header-bar .site-primary-header-wrap.ast-container {
	max-width: var(--de-header-max);
	width: 100%;
	padding-inline: var(--de-header-pad);
	box-sizing: border-box;
}

.ast-hfb-header .ast-primary-header-bar .ast-builder-grid-row-container-inner,
.ast-hfb-header .ast-primary-header-bar .ast-builder-grid-row {
	max-width: 100%;
}

@media (min-width: 922px) {
	.ast-desktop.ast-hfb-header .ast-primary-header-bar .ast-builder-grid-row.ast-grid-center-col-layout {
		grid-template-columns: auto 1fr auto !important;
		align-items: center;
		column-gap: clamp(1rem, 2vw, 2rem);
	}

	.ast-desktop.ast-hfb-header .site-header-primary-section-left {
		justify-content: flex-start;
		min-width: 0;
	}

	.ast-desktop.ast-hfb-header .site-header-primary-section-center {
		justify-content: center;
		min-width: 0;
	}

	.ast-desktop.ast-hfb-header .site-header-primary-section-right {
		justify-content: flex-end;
		align-items: center;
		gap: 0.35rem;
		min-width: 0;
	}

	/* Menú: tipografía limpia, sin apiñar */
	.ast-desktop.ast-hfb-header #ast-hf-menu-1 > .menu-item > .menu-link {
		font-family: "Inter", system-ui, -apple-system, sans-serif;
		font-size: 0.9375rem; /* 15px */
		font-weight: 500;
		letter-spacing: 0.01em;
		padding-inline: 0.55rem !important;
	}
}

/* -------------------------------------------------------------------------
   4. Ocultar flechas del menú principal solo en escritorio
       (se conservan .ast-menu-toggle y controles móviles)
   ------------------------------------------------------------------------- */

@media (min-width: 922px) {
	.ast-desktop.ast-hfb-header #ast-hf-menu-1 > .menu-item > .menu-link > .dropdown-menu-toggle.ast-header-navigation-arrow {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* -------------------------------------------------------------------------
   3. Desplegables Astra — solo aspecto (sin mega menú)
   ------------------------------------------------------------------------- */

@media (min-width: 922px) {
	/*
	 * overflow debe quedar visible: overflow:hidden recortaba los
	 * submenús de 3er nivel (flyout lateral de Astra).
	 * El radio se aplica al contenedor + a primer/último ítem.
	 */
	.ast-desktop.ast-hfb-header #ast-hf-menu-1 .sub-menu {
		width: 240px !important;
		min-width: 240px !important;
		max-width: 260px !important;
		padding: 0.5rem 0 !important;
		background: #ffffff !important;
		border: 0 !important;
		border-radius: 14px !important;
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
		overflow: visible !important;
		z-index: 99999;
	}

	.ast-desktop.ast-hfb-header #ast-hf-menu-1 .sub-menu > .menu-item {
		border-bottom: 0 !important;
		position: relative;
	}

	.ast-desktop.ast-hfb-header #ast-hf-menu-1 .sub-menu > .menu-item > .menu-link {
		display: block;
		padding: 0.7rem 1.15rem !important;
		font-family: "Inter", system-ui, -apple-system, sans-serif;
		font-size: 0.875rem; /* 14px */
		font-weight: 400;
		line-height: 1.4;
		color: var(--de-ink) !important;
		white-space: normal;
		background: transparent !important;
		transition: background-color 0.18s ease, color 0.18s ease;
	}

	.ast-desktop.ast-hfb-header #ast-hf-menu-1 .sub-menu > .menu-item:first-child > .menu-link {
		border-radius: 14px 14px 0 0;
	}

	.ast-desktop.ast-hfb-header #ast-hf-menu-1 .sub-menu > .menu-item:last-child > .menu-link {
		border-radius: 0 0 14px 14px;
	}

	.ast-desktop.ast-hfb-header #ast-hf-menu-1 .sub-menu > .menu-item > .menu-link:hover,
	.ast-desktop.ast-hfb-header #ast-hf-menu-1 .sub-menu > .menu-item > .menu-link:focus {
		background-color: #f5f5f5 !important;
		color: var(--de-ink) !important;
	}

	/* Tercer nivel: flyout lateral Astra (mismo estilo, overflow visible) */
	.ast-desktop.ast-hfb-header #ast-hf-menu-1 .sub-menu .sub-menu {
		border-radius: 14px !important;
		overflow: visible !important;
		z-index: 100000;
	}
}

/* -------------------------------------------------------------------------
   2. Buscador — píldora al abrir (conserva slide-search de Astra)
   ------------------------------------------------------------------------- */

.ast-hfb-header .ast-header-search .ast-search-menu-icon.slide-search .search-field {
	border: 0 !important;
	border-radius: 999px !important;
	background-color: var(--de-search-bg) !important;
	box-shadow: none !important;
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 0.875rem;
	color: var(--de-ink);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, width 0.25s ease;
}

.ast-hfb-header .ast-header-search .ast-search-menu-icon.slide-search.ast-dropdown-active .search-field,
.ast-hfb-header .ast-header-search .ast-search-menu-icon.slide-search .search-field:focus {
	background-color: var(--de-search-bg) !important;
	outline: none;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.ast-hfb-header .ast-header-search .ast-search-menu-icon.slide-search .search-form {
	border-radius: 999px;
	overflow: hidden;
}

.ast-hfb-header .ast-header-search .ast-search-menu-icon.slide-search .search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: 0;
	box-shadow: none;
}

.ast-hfb-header .ast-header-search .ast-search-menu-icon.slide-search .search-submit .ast-icon,
.ast-hfb-header .ast-header-search .astra-search-icon .ast-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--de-header-icon);
	height: var(--de-header-icon);
	line-height: 1;
}

.ast-hfb-header .ast-header-search .ast-search-menu-icon.slide-search .search-submit .ast-icon svg,
.ast-hfb-header .ast-header-search .astra-search-icon .ast-icon svg {
	width: var(--de-header-icon);
	height: var(--de-header-icon);
	fill: currentColor;
}

@media (max-width: 921px) {
	.ast-hfb-header .ast-header-search .ast-search-menu-icon.slide-search .search-field {
		border-radius: 999px !important;
		background-color: var(--de-search-bg) !important;
	}
}

/* -------------------------------------------------------------------------
   5. Iconos header — tamaño y separación uniformes
   ------------------------------------------------------------------------- */

.ast-hfb-header .site-header-primary-section-right .ast-header-search,
.ast-hfb-header .site-header-primary-section-right .ast-header-account,
.ast-hfb-header .site-header-primary-section-right .ast-header-woo-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.ast-hfb-header .ast-header-account .ahfb-svg-iconset,
.ast-hfb-header .ast-header-account .ast-icon,
.ast-hfb-header .ast-header-woo-cart .ahfb-svg-iconset,
.ast-hfb-header .ast-header-woo-cart .ast-icon,
.ast-hfb-header .ast-header-search .astra-search-icon .ast-icon {
	width: var(--de-header-icon);
	height: var(--de-header-icon);
	line-height: 1;
	color: var(--de-ink);
	transition: color 0.18s ease, opacity 0.18s ease;
}

.ast-hfb-header .ast-header-account .ahfb-svg-iconset svg,
.ast-hfb-header .ast-header-account .ast-icon svg {
	width: var(--de-header-icon);
	height: var(--de-header-icon);
	fill: currentColor;
}

/*
 * Bolsa Lucide (stroke): fill:currentColor rellenaba los paths y
 * convertía el icono en un cuadrado negro. Solo carrito cabecera.
 */
.ast-hfb-header .ast-header-woo-cart .ahfb-svg-iconset svg,
.ast-hfb-header .ast-header-woo-cart .ast-icon svg,
.ast-hfb-header .ast-header-woo-cart svg.lucide-shopping-bag {
	width: var(--de-header-icon);
	height: var(--de-header-icon);
	fill: none !important;
	stroke: currentColor;
	stroke-width: 1.5;
}

.ast-hfb-header .ast-header-account a:hover .ast-icon,
.ast-hfb-header .ast-header-account a:hover .ahfb-svg-iconset,
.ast-hfb-header .ast-header-woo-cart a:hover .ast-icon,
.ast-hfb-header .ast-header-woo-cart a:hover .ahfb-svg-iconset,
.ast-hfb-header .ast-header-search .astra-search-icon:hover .ast-icon {
	color: var(--de-navy);
	opacity: 0.85;
}

@media (min-width: 922px) {
	.ast-desktop.ast-hfb-header .site-header-primary-section-right > .ast-builder-layout-element {
		padding-inline: 0.4rem;
	}
}

/* -------------------------------------------------------------------------
   6. Minicarrito desplegable (Astra + WooCommerce)
       Panel: .ast-site-header-cart .widget_shopping_cart
       Móvil (drawer): .astra-cart-drawer
   ------------------------------------------------------------------------- */

/* Evitar que contenedores del header recorten el flyout */
.ast-hfb-header .ast-header-woo-cart,
.ast-hfb-header .ast-site-header-cart,
.ast-hfb-header .ast-site-header-cart-data {
	overflow: visible;
}

.ast-hfb-header .ast-site-header-cart .widget_shopping_cart,
.ast-hfb-header .astra-cart-drawer {
	background-color: #ffffff !important;
	border: 1px solid #e8e8e8 !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
	/* overflow visible: no recortar la punta (::before/::after) ni el contenido */
	overflow: visible;
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	color: var(--de-ink);
}

/* Punta del desplegable alineada al fondo/borde nuevos */
.ast-hfb-header .ast-site-header-cart .widget_shopping_cart::after {
	border-bottom-color: #ffffff;
}

.ast-hfb-header .ast-site-header-cart .widget_shopping_cart::before {
	border-bottom-color: #e8e8e8;
}

.ast-hfb-header .ast-site-header-cart .widget_shopping_cart .product_list_widget,
.ast-hfb-header .astra-cart-drawer .product_list_widget {
	padding: 0.85rem 1.15rem !important;
}

.ast-hfb-header .ast-site-header-cart .widget_shopping_cart .product_list_widget li,
.ast-hfb-header .astra-cart-drawer .product_list_widget li {
	padding: 0.65rem 1.75rem 0.65rem 4.75rem !important;
	border-bottom-color: #f0f0f0 !important;
}

.ast-hfb-header .ast-site-header-cart .widget_shopping_cart p.buttons,
.ast-hfb-header .ast-site-header-cart .widget_shopping_cart p.total,
.ast-hfb-header .ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total,
.ast-hfb-header .ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons,
.ast-hfb-header .astra-cart-drawer .woocommerce-mini-cart__total,
.ast-hfb-header .astra-cart-drawer .woocommerce-mini-cart__buttons,
.ast-hfb-header .astra-cart-drawer p.buttons,
.ast-hfb-header .astra-cart-drawer p.total {
	padding: 0.85rem 1.15rem !important;
}

.ast-hfb-header .ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message,
.ast-hfb-header .ast-site-header-cart .widget_shopping_cart .ast-mini-cart-message,
.ast-hfb-header .astra-cart-drawer .woocommerce-mini-cart__empty-message {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 0.875rem;
	color: var(--de-muted);
	margin: 1.15rem !important;
}

/* Botones: Ver carrito / Finalizar compra / Seguir comprando */
.ast-hfb-header .ast-site-header-cart .widget_shopping_cart .buttons .button,
.ast-hfb-header .ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons .button,
.ast-hfb-header .astra-cart-drawer .buttons .button,
.ast-hfb-header .astra-cart-drawer .woocommerce-mini-cart__buttons .button {
	border-radius: 8px !important;
	font-family: "Inter", system-ui, -apple-system, sans-serif !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em;
	line-height: 1.3 !important;
	padding: 0.7rem 1rem !important;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ast-hfb-header .ast-site-header-cart .widget_shopping_cart .buttons .button + .button,
.ast-hfb-header .ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons .button + .button,
.ast-hfb-header .astra-cart-drawer .buttons .button + .button,
.ast-hfb-header .astra-cart-drawer .woocommerce-mini-cart__buttons .button + .button {
	margin-top: 0.5rem !important;
}

/* -------------------------------------------------------------------------
   Móvil / tablet: sin forzar grid de 3 columnas
   ------------------------------------------------------------------------- */

@media (max-width: 921px) {
	.ast-hfb-header .ast-primary-header-bar .site-primary-header-wrap.ast-container {
		padding-inline: 1rem;
	}
}

@media (max-width: 320px) {
	.ast-hfb-header .ast-primary-header-bar .site-primary-header-wrap.ast-container {
		padding-inline: 0.75rem;
	}
}

/* -------------------------------------------------------------------------
   7. Buscador THAPS (icon_style) en hueco del Header Builder
       Sustituye slide-search de Astra vía filtro PHP; conserva alineación.
   ------------------------------------------------------------------------- */

.ast-hfb-header .ast-header-search .de-thaps-search,
.ast-hfb-header .ast-header-search .thaps-search-box.icon_style {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.ast-hfb-header .ast-header-search .thaps-search-box.icon_style {
	max-width: none;
	width: auto;
}

.ast-hfb-header .ast-header-search .thaps-search-box.icon_style .click-icon,
.ast-hfb-header .ast-header-search .thaps-search-box.icon_style .click-icon .th-icon,
.ast-hfb-header .ast-header-search .thaps-search-box.icon_style .click-icon svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--de-header-icon);
	height: var(--de-header-icon);
	color: var(--de-ink);
	line-height: 1;
}

.ast-hfb-header .ast-header-search .thaps-search-box.icon_style .click-icon:hover .th-icon,
.ast-hfb-header .ast-header-search .thaps-search-box.icon_style .click-icon:hover svg {
	color: var(--de-navy);
	opacity: 0.85;
}

.ast-hfb-header .ast-header-search .thaps-search-box.icon_style .thaps-search-form {
	left: auto;
	right: 0;
	top: calc(100% + 10px);
	min-width: min(320px, calc(100vw - 2rem));
	z-index: 100050;
}

.ast-hfb-header .ast-header-search .thaps-search-box.icon_style .thaps-from-wrap {
	border-radius: 999px;
	overflow: hidden;
	background-color: var(--de-search-bg);
	border: 0;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.ast-hfb-header .ast-header-search .thaps-search-box.icon_style .thaps-search-autocomplete {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 0.875rem;
	color: var(--de-ink);
	background-color: transparent;
	border: 0;
	box-shadow: none;
}

.ast-hfb-header .ast-header-search .thaps-search-box.icon_style.thaps-box-open .thaps-icon-arrow {
	left: auto;
	right: 12px;
}

/* Slot vacío en la cabecera no visible: reserva hueco sin duplicar THAPS. */
.ast-hfb-header .ast-header-search .de-thaps-search-slot:empty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--de-header-icon);
	min-height: var(--de-header-icon);
}

/* -------------------------------------------------------------------------
   7b. THAPS en cabecera móvil / tablet (≤ Astra break_point, p.ej. 921px)
   ------------------------------------------------------------------------- */

.ast-header-break-point #ast-mobile-header .site-header-primary-section-right {
	gap: 0.65rem;
	align-items: center;
}

.ast-header-break-point #ast-mobile-header .ast-header-search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	line-height: 1;
	overflow: visible;
}

.ast-header-break-point #ast-mobile-header .ast-header-search .de-thaps-search,
.ast-header-break-point #ast-mobile-header .ast-header-search .thaps-search-box.icon_style {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.ast-header-break-point #ast-mobile-header .thaps-search-box.icon_style .click-icon,
.ast-header-break-point #ast-mobile-header .thaps-search-box.icon_style .click-icon .th-icon,
.ast-header-break-point #ast-mobile-header .thaps-search-box.icon_style .click-icon svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--de-header-icon);
	height: var(--de-header-icon);
	color: var(--de-ink);
}

.ast-header-break-point #ast-mobile-header .ast-header-search .thaps-search-box.icon_style .thaps-search-form {
	position: fixed;
	left: 1rem !important;
	right: 1rem !important;
	top: var(--de-thaps-form-top, 120px);
	width: auto;
	min-width: 0;
	max-width: none;
	z-index: 100060;
}

.ast-header-break-point #ast-mobile-header .thaps-search-box.icon_style .thaps-from-wrap {
	border-radius: 999px;
	overflow: hidden;
	background-color: var(--de-search-bg);
	border: 0;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
}

.ast-header-break-point #ast-mobile-header .thaps-search-box.icon_style.thaps-box-open .thaps-icon-arrow {
	display: none;
}

@media (max-width: 390px) {
	.ast-header-break-point #ast-mobile-header .site-header-primary-section-right {
		gap: 0.5rem;
	}

	.ast-header-break-point #ast-mobile-header .thaps-search-box.icon_style .thaps-search-form {
		left: 0.75rem;
		right: 0.75rem;
	}
}

/* -------------------------------------------------------------------------
   8. Separar #ast-scroll-top (Astra) y FAB Taiowc (ambos bottom-right)
   ------------------------------------------------------------------------- */

#ast-scroll-top.ast-scroll-to-top-right {
	/* Encima del FAB: bottom Taiowc 36px + alto ~54px + hueco 12px */
	bottom: calc(36px + 54px + 12px);
	right: 36px;
	z-index: 99990;
}

.taiowc-fixed-cart.cart_fixed_1 .taiowc-content,
.taiowc-wrap.taiowc-fixed-cart .taiowc-content {
	z-index: 99991;
}

@media (max-width: 921px) {
	#ast-scroll-top.ast-scroll-to-top-right {
		bottom: calc(24px + 52px + 12px);
		right: 24px;
	}
}

@media (max-width: 767px) {
	#ast-scroll-top.ast-scroll-to-top-right {
		bottom: calc(16px + 52px + 12px + env(safe-area-inset-bottom, 0px));
		right: max(16px, env(safe-area-inset-right, 0px));
	}

	.taiowc-fixed-cart.cart_fixed_1 .taiowc-content,
	.taiowc-wrap.taiowc-fixed-cart .taiowc-content {
		bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
		right: max(16px, env(safe-area-inset-right, 0px)) !important;
	}
}

@media (max-width: 320px) {
	#ast-scroll-top.ast-scroll-to-top-right {
		bottom: calc(12px + 48px + 10px + env(safe-area-inset-bottom, 0px));
		right: max(12px, env(safe-area-inset-right, 0px));
	}
}