/* ==========================================================================
   HEC Custom Header — Search Drawer (dfd-layer + dfd-ext)
   Colores: primario #D90429 | secundario #111111 | texto #333333
   ========================================================================== */

/* ---- Reset header padre — ancho completo ---- */
.site-header.custom-header {
	display: block;
	padding: 0 !important;
	position: sticky;
	top: 0;
	z-index: 9000;
	box-shadow: 0 2px 12px rgba(0,0,0,.12);
	background: transparent;
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.hec-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
}

/* ==========================================================================
   1. TOP BAR
   ========================================================================== */
.hec-topbar {
	background: #111111;
	color: #fff;
	font-size: 12.5px;
	padding: 7px 0;
	border-bottom: 1px solid rgba(255,255,255,.05);
}
.hec-topbar .hec-container { justify-content: space-between; }
.hec-topbar__left,
.hec-topbar__right { display: flex; align-items: center; gap: 16px; }

.hec-topbar__item {
	display: flex; align-items: center; gap: 6px;
	color: #fff; text-decoration: none;
	font-size: 12.5px;
	transition: color .2s; white-space: nowrap;
}
.hec-topbar__item:hover { color: #fff; text-decoration: none; }
.hec-topbar__item svg { opacity: 1; flex-shrink: 0; }

/* Separador vertical */
.hec-topbar__sep {
	display: block;
	width: 1px;
	height: 16px;
	background: rgba(255,255,255,.15);
	flex-shrink: 0;
}

/* ── REDES SOCIALES ── */
.hec-topbar__social {
	display: flex;
	align-items: center;
	gap: 4px;
}

.hec-social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: #fff;
	text-decoration: none;
	transition:
		background .22s ease,
		color .22s ease,
		transform .22s ease,
		box-shadow .22s ease;
	flex-shrink: 0;
	position: relative;
}
.hec-social-icon svg { display: block; flex-shrink: 0; }

/* Hover genérico */
.hec-social-icon:hover {
	color: #fff;
	transform: translateY(-2px);
	text-decoration: none;
}

/* Facebook → azul #1877F2 */
.hec-social-icon--facebook:hover {
	background: #1877F2;
	box-shadow: 0 4px 14px rgba(24,119,242,.5);
}

/* Instagram → degradado brand */
.hec-social-icon--instagram:hover {
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	box-shadow: 0 4px 14px rgba(220,39,67,.45);
}

/* LinkedIn → azul #0A66C2 */
.hec-social-icon--linkedin:hover {
	background: #0A66C2;
	box-shadow: 0 4px 14px rgba(10,102,194,.5);
}

/* TikTok — por si se agrega */
.hec-social-icon--tiktok:hover {
	background: #010101;
	box-shadow: 0 4px 14px rgba(105,201,208,.4);
}

/* YouTube → rojo */
.hec-social-icon--youtube:hover {
	background: #FF0000;
	box-shadow: 0 4px 14px rgba(255,0,0,.4);
}

/* WhatsApp → verde */
.hec-social-icon--whatsapp:hover {
	background: #25D366;
	box-shadow: 0 4px 14px rgba(37,211,102,.4);
}

/* ── Pulse consecutivo: anillo que sale de cada ícono uno tras otro ── */
@keyframes hec-pulse-ring {
	0%        { box-shadow: 0 0 0 0    rgba(255,255,255,.6); }
	13%       { box-shadow: 0 0 0 9px  rgba(255,255,255,0);  }
	14%, 100% { box-shadow: 0 0 0 0    rgba(255,255,255,0);  }
}
.hec-social-icon::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	animation: hec-pulse-ring 4.5s ease-out infinite;
	pointer-events: none;
}
.hec-topbar__social .hec-social-icon:nth-child(1)::after { animation-delay: 0.00s; }
.hec-topbar__social .hec-social-icon:nth-child(2)::after { animation-delay: 0.75s; }
.hec-topbar__social .hec-social-icon:nth-child(3)::after { animation-delay: 1.50s; }
.hec-topbar__social .hec-social-icon:nth-child(4)::after { animation-delay: 2.25s; }
.hec-topbar__social .hec-social-icon:nth-child(5)::after { animation-delay: 3.00s; }
.hec-topbar__social .hec-social-icon:nth-child(6)::after { animation-delay: 3.75s; }
/* Detener pulse en hover para que los efectos de hover sean visibles */
.hec-social-icon:hover::after { animation-play-state: paused; opacity: 0; }

/* Ocultar social en mobile muy pequeño */
@media (max-width: 480px) {
	.hec-topbar__social { display: none; }
	.hec-topbar__sep { display: none; }
}

/* ==========================================================================
   2. MAIN BAR
   ========================================================================== */
.hec-main-bar { background: #fff; padding: 14px 0; }
.hec-main-bar .hec-container { gap: 20px; flex-wrap: nowrap; }

/* Logo */
.hec-logo { flex-shrink: 0; min-width: 130px; max-width: 210px; }

.hec-logo__link {
	display: block;
	text-decoration: none;
	outline: none;
}

/* Imagen del logo con efectos de contorno y profundidad */
.hec-logo__img,
.hec-logo img,
.hec-logo .custom-logo {
	max-height: 60px;
	width: auto;
	display: block;
	object-fit: contain;

	/* Drop-shadow sigue la silueta exacta del logo (no el bounding box) */
	filter:
		drop-shadow(0 1px 0 rgba(217,4,41,.55))
		drop-shadow(0 -1px 0 rgba(217,4,41,.55))
		drop-shadow(1px 0 0 rgba(217,4,41,.55))
		drop-shadow(-1px 0 0 rgba(217,4,41,.55))
		drop-shadow(0 3px 8px rgba(15,23,42,.18));

	transition: filter .28s ease, transform .28s ease;
	will-change: filter, transform;
}

/* Hover: glow rojo más intenso + leve escala */
.hec-logo__link:hover .hec-logo__img,
.hec-logo a:hover img,
.hec-logo a:hover .custom-logo {
	filter:
		drop-shadow(0 1px 0 rgba(217,4,41,.8))
		drop-shadow(0 -1px 0 rgba(217,4,41,.8))
		drop-shadow(1px 0 0 rgba(217,4,41,.8))
		drop-shadow(-1px 0 0 rgba(217,4,41,.8))
		drop-shadow(0 0 10px rgba(217,4,41,.38))
		drop-shadow(0 4px 12px rgba(15,23,42,.22));
	transform: scale(1.04);
}

.hec-site-title { font-size: 22px; font-weight: 800; color: #D90429; letter-spacing: -.5px; }

/* Search wrap */
.hec-search-wrap { flex: 1; min-width: 0; }

/* ==========================================================================
   INPUT-GROUP SEARCH-BAR (trigger en header)
   ========================================================================== */
.input-group.search-bar {
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 52px;
	border: 2.5px solid #D90429;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 3px 10px rgba(217,4,41,.1);
	transition: border-color .2s, box-shadow .2s;
}
.input-group.search-bar:hover,
.input-group.search-bar:focus-within {
	border-color: #111111;
	box-shadow: 0 4px 18px rgba(17,17,17,.18);
	cursor: pointer;
}

/* Prepend: category */
.input-group-prepend {
	display: flex; align-items: center;
	position: relative; background: #f7f7f9; flex-shrink: 0;
}
.search-bar__category {
	appearance: none; -webkit-appearance: none;
	border: none; outline: none; background: transparent;
	font-size: 13px; font-weight: 600; color: #333;
	padding: 0 36px 0 16px; height: 100%;
	min-width: 140px; max-width: 190px;
	cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Display version (trigger - not a real select) */
.search-bar__category--display {
	display: flex; align-items: center;
	font-size: 13px; font-weight: 600; color: #333;
	padding: 0 36px 0 16px; height: 100%;
	min-width: 140px; max-width: 190px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	cursor: pointer;
	background: #f7f7f9;
}
.search-bar__cat-arrow {
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	color: #888; pointer-events: none; display: flex; align-items: center;
}
.search-bar__cat-divider {
	display: block; width: 1px; height: 28px;
	background: #ddd; flex-shrink: 0; align-self: center;
}

/* Input area */
.search-bar__input-wrap { flex: 1; position: relative; display: flex; align-items: center; min-width: 0; }
.search-bar__input.form-control {
	width: 100%; height: 100%; border: none; outline: none;
	background: transparent; font-size: 15px; color: #222;
	padding: 0 44px 0 18px; box-shadow: none; border-radius: 0;
}
.search-bar__input.form-control::placeholder { color: #aaa; font-weight: 400; }
.search-bar__input.form-control::-webkit-search-cancel-button { display: none; }

/* Trigger input: puntero */
.search-bar__input--trigger { cursor: pointer; user-select: none; }

/* Clear button */
.search-bar__clear {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	background: #e5e5e5; border: none; border-radius: 50%;
	width: 22px; height: 22px; display: flex; align-items: center;
	justify-content: center; cursor: pointer; color: #666; padding: 0;
	transition: background .15s, color .15s;
}
.search-bar__clear:hover { background: #D90429; color: #fff; }

/* Submit button */
.input-group-append { display: flex; align-items: stretch; flex-shrink: 0; }
.search-bar__btn {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	background: #D90429; color: #fff; border: none;
	border-radius: 0 5px 5px 0; padding: 0 26px;
	font-size: 14px; font-weight: 700; letter-spacing: .6px;
	cursor: pointer; transition: background .2s; white-space: nowrap; height: 100%;
}
.search-bar__btn:hover { background: #111111; }

/* Drawer version: más alta */
.search-bar--drawer {
	height: 60px;
	border-radius: 10px;
	border-width: 2.5px;
	box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.search-bar--drawer .search-bar__input.form-control { font-size: 16px; }
.search-bar--drawer .search-bar__btn { padding: 0 32px; font-size: 15px; }
.search-bar--drawer .search-bar__category { font-size: 14px; }

/* ==========================================================================
   VARIABLES DE COLOR DEL DRAWER
   Primario: rojo | Secundario: negro | Blanco
   ========================================================================== */
:root {
	--dr-red:        #D90429;
	--dr-red-deep:   #8B0000;
	--dr-red-vivid:  #FF3333;
	--dr-black:      #111827;
	--dr-dark:       #192038;
	--dr-dark-mid:   #151d30;
	--dr-white:      #ffffff;
	--dr-gray:       #f4f4f6;
	--dr-border:     #ebebeb;
	/* Gradientes */
	--grad-red:      linear-gradient(135deg, var(--dr-red) 0%, var(--dr-red-deep) 100%);
	--grad-dark:     linear-gradient(180deg, #111827 0%, #192038 100%);
	--grad-card:     linear-gradient(to top, rgba(17,24,39,.88) 0%, rgba(17,24,39,.3) 60%, transparent 100%);
	--shadow-red:    0 8px 32px rgba(217,4,41,.35);
	--shadow-card:   0 6px 24px rgba(0,0,0,.12);
}

/* ==========================================================================
   3. dfd-ext — BACKDROP
   ========================================================================== */
.dfd-ext {
	position: fixed;
	inset: 0;
	background: rgba(5, 0, 10, 0.75);
	backdrop-filter: blur(5px) saturate(0.8);
	-webkit-backdrop-filter: blur(5px) saturate(0.8);
	z-index: 9500;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility .4s ease;
}
body.js-drawer-open .dfd-ext {
	opacity: 1;
	visibility: visible;
}

/* ==========================================================================
   4. dfd-layer — SEARCH DRAWER PANEL  🎨 DISEÑO ROJO / NEGRO / BLANCO
   ========================================================================== */
.dfd-layer {
	position: fixed;
	top: 0; left: 0; right: 0;
	background: #fff;
	z-index: 9600;
	transform: translateY(-110%);
	transition: transform .42s cubic-bezier(.4, 0, .2, 1);
	box-shadow: 0 20px 60px rgba(0,0,0,.4);
	max-height: 92vh;
	overflow-y: auto;
	overflow-x: hidden;
}
body.js-drawer-open .dfd-layer { transform: translateY(0); }

/* Scrollbar del drawer */
.dfd-layer::-webkit-scrollbar { width: 4px; }
.dfd-layer::-webkit-scrollbar-thumb { background: var(--dr-red); border-radius: 4px; }
.dfd-layer::-webkit-scrollbar-track { background: transparent; }

/* ── CABECERA OSCURA DEL DRAWER ── */
.dfd-layer__inner {
	background: linear-gradient(180deg, #111827 0%, #192038 100%);
	padding: 20px 0 22px;
	position: relative;
	overflow: hidden;
}

/* Línea roja fina en la base de la cabecera */
.dfd-layer__inner::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 2px;
	background: var(--grad-red);
	opacity: .85;
}

/* Sin glow ambiental — aspecto más limpio */
.dfd-layer__inner::before { display: none; }

/* Fila del formulario — search bar lo más ancha posible */
.dfd-layer__search-row {
	display: flex;
	align-items: center;
	gap: 14px;
	position: relative;
	z-index: 1;
	width: 100%;
}
.dfd-layer__search-row form {
	flex: 1;
	min-width: 0;
	width: 100%;   /* garantiza que ocupe todo el espacio disponible */
}

/* Search bar en cabecera oscura */
.search-bar--drawer {
	height: 58px;
	width: 100%;
	border: 1.5px solid rgba(255,255,255,.16);
	border-radius: 8px;
	background: rgba(255,255,255,.07);
	box-shadow: none;
	overflow: visible;
	transition: border-color .2s, background .2s;
}
.search-bar--drawer:hover,
.search-bar--drawer:focus-within {
	border-color: var(--dr-red);
	background: rgba(255,255,255,.1);
	box-shadow: 0 0 0 3px rgba(217,4,41,.15);
}

/* Category select en oscuro */
.search-bar--drawer .input-group-prepend { background: rgba(255,255,255,.06); }
.search-bar--drawer .search-bar__category {
	color: rgba(255,255,255,.85);
	font-size: 13px;
	min-width: 150px;
}
.search-bar--drawer .search-bar__category option { color: #222; background: #fff; }
.search-bar--drawer .search-bar__cat-arrow { color: rgba(255,255,255,.5); }
.search-bar--drawer .search-bar__cat-divider { background: rgba(255,255,255,.15); }

/* Input en oscuro */
.search-bar--drawer .search-bar__input.form-control {
	color: #fff;
	font-size: 16px;
	caret-color: var(--dr-red);
	background: transparent;
}
.search-bar--drawer .search-bar__input.form-control::placeholder { color: rgba(255,255,255,.4); }

/* Clear button en oscuro */
.search-bar--drawer .search-bar__clear {
	background: rgba(255,255,255,.15);
	color: rgba(255,255,255,.7);
}
.search-bar--drawer .search-bar__clear:hover { background: var(--dr-red); color: #fff; }

/* Botón BUSCAR — gradiente rojo */
.search-bar--drawer .search-bar__btn {
	background: var(--grad-red);
	border-radius: 0 8px 8px 0;
	padding: 0 28px;
	font-size: 14px;
	letter-spacing: .8px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
	transition: opacity .2s, box-shadow .2s;
}
.search-bar--drawer .search-bar__btn:hover {
	opacity: .9;
	box-shadow: var(--shadow-red);
}

/* Botón CERRAR — círculo con X */
.dfd-layer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: rgba(255,255,255,.18);
	border: 1.5px solid rgba(255,255,255,.28);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	flex-shrink: 0;
	transition: background .2s, border-color .2s, transform .18s, box-shadow .2s;
}
.dfd-layer__close:hover {
	background: var(--dr-red);
	border-color: var(--dr-red);
	color: #fff;
	transform: scale(1.08) rotate(90deg);
	box-shadow: var(--shadow-red);
}
.dfd-layer__close svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ==========================================================================
   5. RESULTS PANEL
   ========================================================================== */

/* El container dentro del drawer usa el ancho completo */
.dfd-layer .hec-container {
	max-width: 100%;
	padding: 0 40px;
	box-sizing: border-box;
}

.dfd-layer__results {
	background: #fafafa;
	padding: 24px 0 36px;
}

/* Fade-in */
@keyframes srd-fade-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
.dfd-results-initial,
.dfd-results-live { animation: srd-fade-in .25s ease both; }

/* Label del título de productos con búsqueda activa */
#srd-products-label {
	display: flex;
	align-items: center;
	gap: 4px;
}
#srd-products-label strong {
	color: var(--dr-red);
}
.srd-search-count {
	font-size: 10px;
	font-weight: 700;
	background: var(--dr-red);
	color: #fff;
	border-radius: 10px;
	padding: 1px 7px;
	margin-left: 4px;
	vertical-align: middle;
}

/* ── TÍTULOS DE SECCIÓN ── */
.srd-section__title {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 10px;
	font-weight: 700;
	color: #888;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	padding-bottom: 10px;
	margin-bottom: 14px;
	border-bottom: 1px solid #ececec;
}
.srd-section__title::after { display: none; }
.srd-section__title svg { color: var(--dr-red); flex-shrink: 0; opacity: .8; }

/* ── BÚSQUEDAS POPULARES ── */
.srd-popular-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 4px 0 20px;
}
.srd-popular-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #fff;
	color: #444;
	border: 1.5px solid #e0e0e0;
	border-radius: 6px;
	padding: 5px 13px;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .18s, color .18s, background .18s;
	white-space: nowrap;
}
.srd-popular-tag svg { color: #bbb; flex-shrink: 0; }
.srd-popular-tag:hover {
	border-color: var(--dr-red);
	color: var(--dr-red);
	background: #fff5f6;
	text-decoration: none;
}
.srd-popular-tag:hover svg { color: var(--dr-red); }

/* ═══════════════════════════════════════════════════════════
   CHIPS DE FILTRO — categorías horizontales scrollables
   ═══════════════════════════════════════════════════════════ */
.srd-section--filter {
	margin-bottom: 6px;
}

/* Fila de chips: scroll horizontal en overflow */
.srd-filter-chips {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0 14px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
}
.srd-filter-chips::-webkit-scrollbar { display: none; }

/* Chip individual */
.srd-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px;
	background: #fff;
	border: 1.5px solid #e4e4e4;
	border-radius: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: #555;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	transition: border-color .18s, color .18s, background .18s;
}
.srd-filter-chip:hover {
	background: #fff5f6;
	border-color: var(--dr-red);
	color: var(--dr-red);
}

/* Chip activo */
.srd-filter-chip.is-active {
	background: var(--dr-red);
	border-color: var(--dr-red);
	color: #fff;
	font-weight: 600;
}
.srd-filter-chip.is-active:hover { opacity: .9; }

/* Imagen del chip */
.srd-filter-chip__img {
	width: 20px; height: 20px;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid rgba(255,255,255,.3);
	flex-shrink: 0;
}
.srd-filter-chip:not(.is-active) .srd-filter-chip__img {
	border-color: #ddd;
}

/* Letra inicial cuando no hay imagen */
.srd-filter-chip__letter {
	width: 20px; height: 20px;
	border-radius: 50%;
	background: rgba(217,4,41,.12);
	color: var(--dr-red);
	font-size: 10px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.srd-filter-chip.is-active .srd-filter-chip__letter {
	background: rgba(255,255,255,.2);
	color: #fff;
}

/* Contador */
.srd-filter-chip__count {
	font-size: 10.5px;
	font-weight: 700;
	opacity: .65;
	margin-left: 1px;
}
.srd-filter-chip.is-active .srd-filter-chip__count { opacity: .85; }

/* Chips con resultados de búsqueda */
.srd-filter-chip.has-results {
	border-color: var(--dr-red);
	color: var(--dr-red);
}
.srd-filter-chip.no-results {
	opacity: .35;
	filter: grayscale(.8);
	pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   PRODUCTOS FULL WIDTH
   ═══════════════════════════════════════════════════════════ */
.srd-section--products-full {
	width: 100%;
}

/* Spinner de filtrado inline */
.srd-filter-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 4px;
	font-size: 13px;
	color: #888;
}

/* Grid full width: 6 columnas en desktop */
.srd-section--products-full .srd-random-grid {
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
}

/* Breakpoints del grid full-width */
@media (max-width: 1300px) {
	.srd-section--products-full .srd-random-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1050px) {
	.srd-section--products-full .srd-random-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
	.srd-section--products-full .srd-random-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.srd-filter-chips { padding-bottom: 10px; }
}
@media (max-width: 480px) {
	.srd-section--products-full .srd-random-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ── LIVE SEARCH: 2 columnas ── */
.dfd-results-live {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 0;
}
.dfd-col { padding: 0; }
.dfd-col--cats { border-right: 1px solid var(--dr-border); padding-right: 0; }
.dfd-col--products { padding-left: 24px; }

/* Category items en live search */
.srd-cat-item {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px 9px 2px; text-decoration: none; color: #333;
	font-size: 13px; font-weight: 500; border-bottom: 1px solid #f5f5f5;
	position: relative; transition: color .18s, padding-left .18s; overflow: hidden;
}
.srd-cat-item::before {
	content: ''; position: absolute; left: 0; top: 0; bottom: 0;
	width: 3px; background: var(--grad-red); transform: scaleY(0);
	border-radius: 0 2px 2px 0; transition: transform .2s;
}
.srd-cat-item:hover::before { transform: scaleY(1); }
.srd-cat-item:hover { color: var(--dr-red); padding-left: 8px; text-decoration: none; }

.srd-cat-icon {
	width: 32px; height: 32px;
	border-radius: 7px;
	background: linear-gradient(135deg, #f8f0f4, #f0e0e8);
	display: flex; align-items: center; justify-content: center;
	color: var(--dr-red); flex-shrink: 0; font-size: 13px; font-weight: 800; overflow: hidden;
	transition: background .2s;
}
.srd-cat-item:hover .srd-cat-icon { background: var(--grad-red); color: #fff; }
.srd-cat-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.srd-cat-name mark { background: transparent; color: var(--dr-red); font-weight: 700; }
.srd-cat-count { font-size: 10.5px; color: #bbb; margin-left: auto; background: #f5f5f5; border-radius: 10px; padding: 2px 7px; white-space: nowrap; }
.srd-cat-arrow { color: var(--dr-red); opacity: 0; transition: opacity .15s, transform .2s; font-size: 16px; }
.srd-cat-item:hover .srd-cat-arrow { opacity: 1; transform: translateX(3px); }

/* Product rows en live search */
.srd-products-list { display: flex; flex-direction: column; gap: 2px; }
.srd-product-item {
	display: flex; align-items: center; gap: 14px;
	padding: 9px 10px; text-decoration: none; color: #333;
	border-radius: 8px; cursor: pointer;
	transition: background .15s;
}
.srd-product-item:hover { background: #fff0f4; text-decoration: none; }
.srd-product-img {
	width: 54px; height: 54px; border-radius: 8px;
	object-fit: cover; background: var(--dr-gray); flex-shrink: 0;
	border: 1px solid var(--dr-border);
}
.srd-product-img--placeholder {
	width: 54px; height: 54px; border-radius: 8px;
	background: var(--dr-gray); display: flex; align-items: center;
	justify-content: center; color: #ddd; flex-shrink: 0;
}
.srd-product-info { flex: 1; min-width: 0; }
.srd-product-name {
	font-size: 13.5px; font-weight: 600; color: #222;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srd-product-name mark { background: transparent; color: var(--dr-red); font-weight: 700; }
.srd-product-cat { font-size: 11px; color: #999; margin-top: 2px; }
.srd-product-price {
	font-size: 14px; font-weight: 800; color: var(--dr-red);
	flex-shrink: 0; margin-left: 8px;
}

/* ── LOADING ── */
.srd-loading {
	display: flex; align-items: center; justify-content: center;
	gap: 12px; padding: 48px 20px; color: #888; font-size: 14px;
}
.srd-spinner {
	display: inline-block; width: 26px; height: 26px;
	border: 3px solid rgba(217,4,41,.2);
	border-top-color: var(--dr-red);
	border-radius: 50%; animation: srd-spin .7s linear infinite;
}
@keyframes srd-spin { to { transform: rotate(360deg); } }

/* ── NO RESULTS ── */
.srd-no-results {
	display: flex; flex-direction: column; align-items: center;
	padding: 56px 20px; text-align: center;
}
.srd-no-results svg { opacity: .25; }
.srd-no-results p { margin: 16px 0 4px; font-size: 15px; color: #444; font-weight: 600; }
.srd-no-results small { font-size: 13px; color: #bbb; }

/* ── FOOTER ── */
.srd-footer {
	margin-top: 20px;
	border-top: 1px solid #ececec;
	padding-top: 16px;
}
.srd-view-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: transparent;
	color: var(--dr-red);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3px;
	text-decoration: none;
	border: 1.5px solid var(--dr-red);
	border-radius: 6px;
	transition: background .18s, color .18s;
}
.srd-view-all:hover {
	background: var(--dr-red);
	color: #fff;
	text-decoration: none;
}
.srd-arrow { transition: transform .22s; }
.srd-view-all:hover .srd-arrow { transform: translateX(5px); }

/* ==========================================================================
   5b. PRODUCTOS ALEATORIOS — GRID
   ========================================================================== */
.srd-section--random .srd-section__title { justify-content: flex-start; }

/* Botón Mezclar */
.srd-shuffle-btn {
	display: inline-flex; align-items: center; gap: 6px;
	margin-left: auto;
	background: var(--dr-black);
	border: none;
	border-radius: 20px;
	padding: 5px 14px;
	font-size: 11.5px; font-weight: 700;
	color: rgba(255,255,255,.8);
	cursor: pointer;
	transition: background .2s, box-shadow .2s, transform .15s;
	white-space: nowrap;
	letter-spacing: .3px;
}
.srd-shuffle-btn:hover {
	background: var(--grad-red);
	color: #fff;
	box-shadow: var(--shadow-red);
	transform: translateY(-1px);
}
.srd-shuffle-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.srd-shuffle-icon { transition: transform .5s ease; }
.srd-shuffle-btn.is-loading .srd-shuffle-icon { animation: srd-spin .6s linear infinite; }

/* Grid de cards — siempre horizontal */
.srd-random-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);   /* 4 columnas en fila */
	grid-auto-flow: row;
	gap: 12px;
	padding: 6px 0 10px;
	animation: srd-fade-in .28s ease both;
	width: 100%;
}
/* Dentro del drawer: 4 columnas fijas para layout horizontal */
.dfd-initial-col--products .srd-random-grid {
	grid-template-columns: repeat(4, 1fr);
}

/* ── TARJETA DE PRODUCTO ── */
.srd-prod-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: #222;
	border: 1.5px solid var(--ip-border);
	box-shadow: var(--ip-shadow-sm);
	transition:
		transform .32s cubic-bezier(.34,1.2,.64,1),
		box-shadow .32s ease,
		border-color .25s ease;
	cursor: pointer;
	position: relative;
}
.srd-prod-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--ip-shadow-hv);
	border-color: var(--ip-red);
	text-decoration: none;
	color: #222;
}

/* Barra roja inferior en hover */
.srd-prod-card::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ip-red) 0%, #ff4757 50%, var(--ip-red) 100%);
	background-size: 200% auto;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .38s cubic-bezier(.4,0,.2,1);
	border-radius: 0 0 14px 14px;
	z-index: 2;
}
.srd-prod-card:hover::after { transform: scaleX(1); }

/* Thumbnail 1:1 */
.srd-prod-card__thumb {
	position: relative;
	width: 100%;
	padding-top: 100%;
	overflow: hidden;
	background: var(--dr-gray);
}
.srd-prod-card__thumb img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.4,0,.2,1), filter .4s ease;
}
.srd-prod-card:hover .srd-prod-card__thumb img { transform: scale(1.08); }

/* Overlay oscuro desde abajo en hover */
.srd-prod-card__thumb::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(15,23,42,.38) 0%, transparent 55%);
	opacity: 0;
	transition: opacity .32s ease;
}
.srd-prod-card:hover .srd-prod-card__thumb::after { opacity: 1; }

.srd-prod-card__no-img {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: #ddd;
}

/* Badge oferta */
.srd-prod-card__badge {
	position: absolute;
	top: 8px; left: 8px;
	background: var(--grad-red);
	color: #fff;
	font-size: 9.5px; font-weight: 800;
	padding: 4px 9px;
	border-radius: 5px;
	text-transform: uppercase;
	letter-spacing: .5px;
	z-index: 1;
	box-shadow: 0 2px 8px rgba(217,4,41,.4);
}

/* Body de la card */
.srd-prod-card__body {
	padding: 10px 12px 12px;
	display: flex; flex-direction: column; gap: 3px;
	flex: 1;
	border-top: 1px solid var(--ip-border);
	transition: border-color .2s;
}
.srd-prod-card:hover .srd-prod-card__body { border-color: rgba(217,4,41,.2); }

.srd-prod-card__cat {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 3px 8px;
	background: linear-gradient(135deg, var(--ip-cyan), var(--ip-cyan-dk));
	color: #fff;
	border-radius: 20px;
	font-size: 9.5px; font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	box-shadow: 0 2px 6px rgba(14,165,233,.3);
	line-height: 1;
}
.srd-prod-card__name {
	font-size: 12.5px; font-weight: 600; color: #1a1a1a;
	line-height: 1.35; margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .15s;
}
.srd-prod-card:hover .srd-prod-card__name { color: var(--ip-red); }

.srd-prod-card__sku {
	font-size: 10.5px;
	font-weight: 600;
	color: #94a3b8;
	letter-spacing: .3px;
	line-height: 1.3;
}
.srd-prod-card__price {
	font-size: 13.5px; font-weight: 800;
	color: var(--ip-amber);
	margin-top: auto; padding-top: 5px;
}
.srd-prod-card__price del {
	display: block;
	font-size: 12px; font-weight: 500;
	color: #94a3b8;
	text-decoration: line-through;
	line-height: 1.3;
}
.srd-prod-card__price ins {
	display: block;
	font-size: 13.5px; font-weight: 800;
	color: #16a34a;
	text-decoration: none;
	line-height: 1.3;
}

/* Estado cargando */
.srd-random-grid--loading { pointer-events: none; opacity: .45; filter: blur(1px); }
.srd-random-empty {
	grid-column: 1 / -1; text-align: center;
	color: #aaa; font-size: 13px; padding: 24px 0;
}

/* ── RESPONSIVE DRAWER ── */
@media (max-width: 1100px) {
	.dfd-initial-columns,
	.dfd-results-live { grid-template-columns: 200px 1fr; }
	.dfd-initial-col--products .srd-random-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
	.dfd-initial-columns,
	.dfd-results-live { grid-template-columns: 1fr; }

	.dfd-initial-col--cats,
	.dfd-col--cats {
		border-right: none;
		border-bottom: 1px solid var(--dr-border);
		max-height: none;
		padding-right: 0;
		padding-bottom: 14px;
		margin-bottom: 16px;
	}
	/* Cats como chips en mobile */
	.srd-init-cat-list {
		flex-direction: row; flex-wrap: wrap; gap: 7px;
	}
	.srd-init-cat-item {
		padding: 7px 13px;
		border-bottom: none;
		border: 1.5px solid var(--dr-border);
		border-radius: 20px;
		flex: none;
	}
	.srd-init-cat-item::before { display: none; }
	.srd-init-cat-item:hover {
		background: var(--dr-red);
		color: #fff;
		border-color: var(--dr-red);
		padding-left: 13px;
	}
	.srd-init-cat-item:hover .srd-init-cat-icon { background: rgba(255,255,255,.2); color: #fff; }
	.srd-init-cat-count,
	.srd-init-cat-arrow { display: none; }

	.dfd-col--products,
	.dfd-initial-col--products { padding-left: 0; }
	.dfd-initial-col--products .srd-random-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }

	.search-bar--drawer { height: 50px; }
}
@media (max-width: 600px) {
	.dfd-initial-col--products .srd-random-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ==========================================================================
   6. HEADER ACTIONS
   ========================================================================== */
.hec-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.hec-action-btn {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 12px; text-decoration: none; color: #333;
	border-radius: 6px; transition: background .2s, color .2s; white-space: nowrap;
}
.hec-action-btn:hover { background: #fff0f4; color: #D90429; text-decoration: none; }
.hec-action-icon { position: relative; display: flex; align-items: center; justify-content: center; }
.hec-action-label { display: flex; flex-direction: column; gap: 1px; }
.hec-action-label small { font-size: 11px; color: #888; line-height: 1; }
.hec-action-label strong { font-size: 13px; font-weight: 700; color: #333; line-height: 1; }
.hec-action-btn:hover .hec-action-label small,
.hec-action-btn:hover .hec-action-label strong { color: #D90429; }

.hec-cart-icon-wrap { position: relative; }
.cart-count {
	position: absolute; top: -8px; right: -8px;
	background: #D90429; color: #fff; font-size: 10px; font-weight: 700;
	min-width: 18px; height: 18px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	padding: 0 3px; line-height: 1; border: 2px solid #fff;
	transition: transform .2s;
}
.hec-cart-total { color: #D90429 !important; }

/* Mobile controls */
.hec-mobile-controls { display: none; align-items: center; gap: 8px; }

/* ==========================================================================
   7. NAV BAR
   ========================================================================== */
.hec-nav-bar { background: #D90429; }
.hec-nav-bar .hec-container {
	padding: 0 24px;
	min-height: 50px;
	justify-content: space-between;   /* menu izq, botón der */
}
.hec-nav { flex: 1; min-width: 0; }

/* ── Botón COTIZAR ── */
@keyframes hec-cotizar-pulse {
	0%   { box-shadow: 0 3px 10px rgba(0,0,0,.2), 0 0 0 0   rgba(255,255,255,.75); }
	65%  { box-shadow: 0 3px 10px rgba(0,0,0,.2), 0 0 0 14px rgba(255,255,255,0);  }
	100% { box-shadow: 0 3px 10px rgba(0,0,0,.2), 0 0 0 14px rgba(255,255,255,0);  }
}

.hec-btn-cotizar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-left: 20px;
	padding: 0 24px;
	height: 40px;
	background: #fff;
	color: #D90429;
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: .8px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 6px;
	border: 2.5px solid #fff;
	white-space: nowrap;
	transition: background .2s, color .2s, transform .15s, box-shadow .2s;
	animation: hec-cotizar-pulse 2.4s ease-out infinite;
}
.hec-btn-cotizar:hover {
	background: #D90429;
	color: #fff;
	border-color: rgba(255,255,255,.6);
	box-shadow: 0 5px 18px rgba(0,0,0,.35);
	transform: translateY(-1px);
	text-decoration: none;
	animation-play-state: paused;
}
.hec-btn-cotizar:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.hec-btn-cotizar svg { flex-shrink: 0; }
.hec-menu { display: flex; list-style: none; margin: 0; padding: 0; }
.hec-menu > li { position: relative; display: flex; align-items: stretch; }
.hec-menu > li > a {
	display: flex; align-items: center; padding: 14px 18px;
	color: #fff !important; text-decoration: none;
	font-size: 14px; font-weight: 600; white-space: nowrap;
	transition: background .18s; position: relative;
}
.hec-menu > li > a::after {
	content: ''; position: absolute; bottom: 0; left: 50%; right: 50%;
	height: 3px; background: #fff; transition: left .2s, right .2s;
}
.hec-menu > li:hover > a,
.hec-menu > li.current-menu-item > a,
.hec-menu > li.current-menu-parent > a { background: rgba(0,0,0,.15); }
.hec-menu > li:hover > a::after,
.hec-menu > li.current-menu-item > a::after { left: 0; right: 0; }
.hec-menu > li.menu-item-has-children > a { padding-right: 32px; }
.hec-menu > li.menu-item-has-children > a::before {
	content: '▾'; position: absolute; right: 12px; top: 50%;
	transform: translateY(-50%); font-size: 11px; opacity: .85; transition: transform .2s;
}
.hec-menu > li.menu-item-has-children:hover > a::before { transform: translateY(-50%) rotate(180deg); }
.hec-menu ul {
	list-style: none; margin: 0; padding: 0;
	position: absolute; top: 100%; left: 0;
	min-width: 230px; background: #fff;
	box-shadow: 0 10px 36px rgba(0,0,0,.16);
	border-radius: 0 0 10px 10px; border-top: 3px solid #D90429;
	z-index: 9100;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .2s, visibility .2s, transform .2s;
}
.hec-menu li:hover > ul,
.hec-menu li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.hec-menu ul li { position: relative; border-bottom: 1px solid #f5f5f5; }
.hec-menu ul li:last-child { border-bottom: none; }
.hec-menu ul li a {
	display: flex; align-items: center; justify-content: space-between;
	padding: 11px 18px; color: #333 !important; text-decoration: none;
	font-size: 13.5px; font-weight: 500;
	transition: background .15s, color .15s, padding-left .15s;
}
.hec-menu ul li a:hover { background: #fff0f4; color: #D90429 !important; padding-left: 24px; }
.hec-menu ul li.menu-item-has-children > a::after { content: '›'; font-size: 16px; color: #D90429; }
.hec-menu ul ul { top: 0; left: 100%; margin-top: -3px; border-radius: 0 10px 10px 10px; }

/* ==========================================================================
   8. RESPONSIVE MOBILE
   ========================================================================== */

/* ── Tablet ancho (1100px) ── */
@media (max-width: 1100px) {
	.search-bar__btn-text { display: none; }
	.search-bar__btn { padding: 0 18px; }
	.hec-action-label { display: none; }
	.hec-action-btn { padding: 8px; }
}

/* ── Tablet (900px) ── */
@media (max-width: 900px) {
	.search-bar__category,
	.search-bar__category--display {
		min-width: 100px; max-width: 130px; font-size: 12px;
	}
	/* Categoría en topbar: texto reducido */
	.hec-topbar__left, .hec-topbar__right { gap: 12px; }
	.hec-topbar__item { font-size: 12px; }
	/* Ocultar separador extra en topbar cuando hay poco espacio */
	.hec-topbar__sep { display: none; }
}

/* ── Mobile (768px) ── */
@media (max-width: 768px) {

	/* -- Topbar: ocultar en móvil -- */
	.hec-topbar { display: none; }

	/* -- Main Bar -- */
	.hec-main-bar { padding: 0; }
	.hec-main-bar .hec-container {
		flex-wrap: nowrap;
		padding: 10px 28px;
		justify-content: center;
		gap: 0 20px;
		align-items: center;
		min-height: 60px;
	}
	.hec-main-bar .hec-logo { flex: 1; max-width: 150px; }
	.hec-mobile-controls { flex-shrink: 0; }

	/* Redes sociales: debajo del trigger en el searchbar strip */
	.hec-mobile-socials {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		padding-top: 10px;
	}

	/* Logo */
	.hec-logo {
		flex: 1;
		min-width: 0;
		max-width: 160px;
	}
	.hec-logo__img,
	.hec-logo img,
	.hec-logo .custom-logo { max-height: 44px; }
	.hec-site-title { font-size: 18px; }

	/* Ocultar search y actions del desktop */
	.hec-search-wrap,
	.hec-actions { display: none !important; }

	/* Mostrar controles móvil */
	.hec-mobile-controls {
		display: flex;
		align-items: center;
		gap: 4px;
		flex-shrink: 0;
	}

	/* Botones de control */
	.hec-menu-toggle {
		background: transparent;
		border: none;
		cursor: pointer;
		width: 52px !important; height: 52px !important;
		border-radius: 12px !important;
		color: #333;
		display: flex; align-items: center; justify-content: center;
		transition: background .2s, color .2s, border-color .2s;
		flex-shrink: 0;
	}
	.hec-menu-toggle:hover {
		background: rgba(217,4,41,.08);
		color: #D90429;
		text-decoration: none;
	}

	/* Botón Cotizador — móvil */
	@keyframes hec-cot-pulse {
		0%   { box-shadow: 0 0 0 0   rgba(217,4,41,.9), 0 0 0 0   rgba(217,4,41,.5); }
		50%  { box-shadow: 0 0 0 12px rgba(217,4,41,.4), 0 0 0 6px  rgba(217,4,41,.6); }
		100% { box-shadow: 0 0 0 22px rgba(217,4,41,0),  0 0 0 14px rgba(217,4,41,0);  }
	}
	.hec-mobile-cotizar {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		width: 52px; height: 52px;
		border-radius: 12px;
		background: var(--dr-red, #D90429);
		color: #fff;
		text-decoration: none;
		flex-shrink: 0;
		animation: hec-cot-pulse 1.8s ease-out infinite;
		transition: background .2s, transform .15s;
		margin-right: 6px;
	}
	.hec-mobile-cotizar:hover {
		background: #b5021f;
		animation-play-state: paused;
		color: #fff;
		text-decoration: none;
	}
	.hec-mobile-cotizar:active { transform: scale(.94); }
	.hec-mobile-cotizar svg { width: 22px; height: 22px; flex-shrink: 0; }
	.hec-mobile-cotizar__label {
		font-size: 7.5px;
		font-weight: 700;
		letter-spacing: .04em;
		line-height: 1;
		text-transform: uppercase;
	}
	.hec-mobile-cotizar .cot-badge {
		position: absolute;
		top: 5px; right: 5px;
	}

	/* Carrito móvil — mismo tamaño que hec-mobile-search-toggle */
	.hec-mobile-cart {
		position: relative;
		display: flex; align-items: center; justify-content: center;
		width: 52px; height: 52px;
		border-radius: 12px;
		color: #333;
		text-decoration: none;
		transition: background .2s, color .2s;
	}
	.hec-mobile-cart svg { width: 26px; height: 26px; }
	.hec-mobile-cart:hover { background: rgba(217,4,41,.08); color: #D90429; text-decoration: none; }
	.hec-mobile-cart .cart-count {
		position: absolute;
		top: 2px; right: 2px;
		min-width: 16px; height: 16px;
		font-size: 9px;
		border-width: 1.5px;
	}

	/* Hamburger */
	.hec-hamburger {
		display: flex; flex-direction: column;
		justify-content: center; gap: 5px;
		width: 24px;
	}
	.hec-hamburger span {
		display: block; height: 2px;
		background: #333; border-radius: 2px;
		transition: transform .3s ease, opacity .3s ease;
	}
	.hec-menu-toggle.is-active .hec-hamburger span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.hec-menu-toggle.is-active .hec-hamburger span:nth-child(2) { opacity: 0; }
	.hec-menu-toggle.is-active .hec-hamburger span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* -- Nav Bar mobile -- */
	.hec-nav-bar { position: relative; }
	.hec-nav-bar .hec-container { padding: 0; min-height: 0; }
	.hec-btn-cotizar { display: none; } /* oculto en mobile — aparece en hec-mobile-controls */

	.hec-nav {
		width: 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height .38s cubic-bezier(.4,0,.2,1);
	}
	.hec-nav.is-open {
		max-height: 75vh;
		overflow-y: auto;
	}
	/* Scrollbar del menú */
	.hec-nav::-webkit-scrollbar { width: 3px; }
	.hec-nav::-webkit-scrollbar-thumb { background: #D90429; }

	.hec-menu {
		flex-direction: column;
		background: #fff;
		border-top: 3px solid #D90429;
	}
	.hec-menu > li {
		flex-direction: column;
		border-bottom: 1px solid #f0f0f0;
		position: relative;
	}
	.hec-menu > li:last-child { border-bottom: none; }
	.hec-menu > li > a {
		color: #222 !important;
		padding: 14px 20px;
		font-size: 14px;
		font-weight: 600;
	}
	.hec-menu > li > a::after,
	.hec-menu > li > a::before { display: none; }
	.hec-menu > li.current-menu-item > a { color: #D90429 !important; }

	/* Sub-menús */
	.hec-menu ul {
		position: static;
		opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border-top: none; border-radius: 0;
		display: none;
		background: #fafafa;
		border-left: 3px solid #D90429;
		margin-left: 16px;
	}
	.hec-menu li.is-expanded > ul { display: block; }
	.hec-menu ul li a {
		padding: 11px 20px;
		font-size: 13px;
		color: #444 !important;
	}
	.hec-menu ul li a:hover { background: #fff0f4; color: #D90429 !important; padding-left: 20px; }

	/* Botón expandir submenú */
	.hec-mobile-submenu-toggle {
		position: absolute;
		right: 0; top: 0;
		width: 50px; height: 100%;
		min-height: 48px;
		background: transparent; border: none;
		cursor: pointer;
		display: flex; align-items: center; justify-content: center;
		color: #D90429;
		font-size: 16px;
		transition: transform .25s;
	}
	.hec-mobile-submenu-toggle.is-open { transform: rotate(180deg); }

	/* ── SEARCH DRAWER — mobile full rework ─────────────────────────────────
	   Estrategia: drawer en flex-column ocupando todo el viewport.
	   Cabecera (search bar) siempre visible arriba; resultados scrollean abajo.
	   ──────────────────────────────────────────────────────────────────────── */

	/* Panel: flex-column, altura completa de pantalla */
	.dfd-layer {
		display: flex;
		flex-direction: column;
		height: 100dvh;
		max-height: 100dvh;
		overflow: hidden;         /* el panel NO scrollea; solo lo hace .dfd-layer__results */
		overscroll-behavior: contain;
	}

	/* Cabecera oscura: siempre visible en la parte superior */
	.dfd-layer__inner {
		flex-shrink: 0;
		padding: 14px 0 16px;
		position: relative;
		z-index: 1;
		/* Sombra para distinguirla del body de resultados al hacer scroll */
		box-shadow: 0 4px 16px rgba(0,0,0,.28);
	}
	.dfd-layer__inner::before { height: 70px; opacity: .45; }

	/* Área de resultados: ocupa el espacio restante y es la que scrollea */
	.dfd-layer__results {
		flex: 1;
		overflow-x: hidden;       /* evita desbordamiento horizontal del grid */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: 14px 0 40px;
	}

	/* Contenedor lateral ajustado — ancho contenido al viewport.
	   .hec-container tiene display:flex globalmente; forzamos que todos
	   los hijos dentro del drawer ocupen el 100% del ancho disponible. */
	.dfd-layer .hec-container {
		padding: 0 14px;
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
	}
	/* hec-results-container usa align-items:flex-start que impide stretch,
	   forzamos que el sidebar y el área principal sean 100% en column-mode */
	.dfd-layer .hec-results-container {
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100%;
	}
	.dfd-layer .hec-filters-sidebar,
	.dfd-layer .hec-results-main {
		width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}
	/* La sección y el grid heredan el 100% */
	.dfd-layer .srd-section--products-full,
	.dfd-layer .dfd-results-initial {
		width: 100%;
		min-width: 0;
	}

	/* Fila form + botón cerrar */
	.dfd-layer__search-row {
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
		padding-bottom: 0;
	}

	/* Search bar: altura adecuada para touch */
	.search-bar--drawer {
		height: 50px;
		border-radius: 10px;
	}

	/* Ocultar texto "BUSCAR": solo queda el ícono → libera espacio en el input */
	.search-bar--drawer .search-bar__btn-text { display: none; }
	.search-bar--drawer .search-bar__btn {
		padding: 0 16px;
		min-width: 50px;
		border-radius: 0 10px 10px 0;
	}
	.search-bar--drawer .search-bar__btn-icon { width: 20px; height: 20px; }

	/* Ocultar selector de categorías */
	.search-bar--drawer .input-group-prepend { display: none; }

	/* Botón cerrar: target táctil de 44 px (mínimo recomendado) */
	.dfd-layer__close {
		width: 44px;
		height: 44px;
		flex-shrink: 0;
	}

	/* Popular tags: scroll horizontal sin barra */
	.srd-popular-tags {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		margin-bottom: 12px;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.srd-popular-tags::-webkit-scrollbar { display: none; }
	.srd-popular-tag { flex-shrink: 0; font-size: 12.5px; }

	/* Chips de categoría: scroll horizontal ya configurado globalmente */
	.srd-filter-chips { padding-bottom: 10px; }

	/* Live results: columna única en mobile */
	.dfd-results-live { grid-template-columns: 1fr; }
	.dfd-col--cats {
		border-right: none;
		border-bottom: 1px solid #f0f0f0;
		padding-right: 0; padding-bottom: 14px; margin-bottom: 14px;
	}
	.dfd-col--products { padding-left: 0; }
	.srd-cat-item { border-radius: 8px; }

	/* Productos live: imagen más compacta */
	.srd-product-item { padding: 8px 4px; }
	.srd-product-img  { width: 48px; height: 48px; border-radius: 8px; }

	/* Footer */
	.srd-view-all { padding: 14px 16px; font-size: 13px; }

	/* ── Tarjetas dentro del drawer: grid de 3 columnas compacto ─────────────
	   En ~375 px cada card mide ≈109 px de ancho.
	   Thumbnail 62% + body mínimo → card ≈ 118 px de alto.
	   ──────────────────────────────────────────────────────────────────────── */

	/* Grid: 3 columnas fijas al ancho del contenedor */
	.dfd-layer .srd-section--products-full .srd-random-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 5px;
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	/* Card: radio pequeño, sin sombra pesada */
	.dfd-layer .srd-prod-card {
		border-radius: 7px;
		box-shadow: 0 1px 2px rgba(0,0,0,.06);
		transition: background .12s;
	}

	/* Sin efectos hover de desktop */
	.dfd-layer .srd-prod-card:hover  { transform: none; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
	.dfd-layer .srd-prod-card:active { background: #fff5f5; transform: scale(.96); }
	.dfd-layer .srd-prod-card:hover .srd-prod-card__thumb img { transform: none; }
	.dfd-layer .srd-prod-card::after        { display: none; }
	.dfd-layer .srd-prod-card__thumb::after { display: none; }

	/* Thumbnail: ratio 30% → imagen muy plana */
	.dfd-layer .srd-prod-card__thumb { padding-top: 30%; }

	/* Body: mínimo absoluto */
	.dfd-layer .srd-prod-card__body {
		padding: 3px 4px 4px;
		gap: 0;
	}
	.dfd-layer .srd-prod-card__name {
		font-size: 8.5px;
		font-weight: 600;
		line-height: 1.2;
		-webkit-line-clamp: 1;
	}
	.dfd-layer .srd-prod-card__sku   { display: none; }
	.dfd-layer .srd-prod-card__price { font-size: 8.5px; font-weight: 700; color: var(--dr-red); }
	.dfd-layer .srd-prod-card__cat   { display: none; }
	.dfd-layer .srd-prod-card__badge { display: none; }

	/* Sección título en results: más compacta */
	.srd-section__title { font-size: 9.5px; margin-bottom: 10px; padding-bottom: 8px; }

	/* No results: spacing reducido */
	.srd-no-results { padding: 30px 12px; }
}

/* ── Móvil pequeño (480px) ── */
@media (max-width: 480px) {

	.hec-logo { max-width: 130px; }
	.hec-logo__img, .hec-logo img, .hec-logo .custom-logo { max-height: 38px; }

	/* Drawer: sin border-radius, inner más compacto */
	.dfd-layer { border-radius: 0; }
	.dfd-layer__inner { padding: 11px 0 13px; }

	/* Contenedor: padding mínimo */
	.dfd-layer .hec-container { padding: 0 12px; }

	/* Search bar: ligeramente más baja */
	.search-bar--drawer { height: 46px; border-radius: 8px; }
	.search-bar--drawer .search-bar__btn { border-radius: 0 8px 8px 0; }

	/* Popular tags más pequeños */
	.srd-popular-tag { font-size: 12px; padding: 6px 11px; }

	/* Chips de categoría: más pequeños */
	.srd-filter-chip { font-size: 12px; padding: 6px 10px; }
	.srd-filter-chip__img { width: 18px; height: 18px; }
	.srd-filter-chip__letter { width: 18px; height: 18px; font-size: 9px; }

	/* Drawer: 2 columnas en pantallas ≤ 480px, misma densidad */
	.dfd-layer .srd-section--products-full .srd-random-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
	}
	.dfd-layer .srd-prod-card__name  { font-size: 11px; }
	.dfd-layer .srd-prod-card__price { font-size: 11.5px; }

	/* Botón mezclar: solo ícono */
	.srd-shuffle-btn span:not(.srd-shuffle-icon) { display: none; }
	.srd-shuffle-btn { padding: 5px 10px; }

	/* Sección título más compacta */
	.srd-section { margin-bottom: 18px; }
	.srd-section__title { font-size: 9px; margin-bottom: 8px; }

	/* Footer ver todos */
	.srd-footer { margin-top: 8px; }
	.srd-view-all { font-size: 12.5px; }

	/* No results */
	.srd-no-results { padding: 24px 12px; }
	.srd-no-results svg { width: 38px; height: 38px; }
}

/* ==========================================================================
   SIDEBAR DE FILTROS — Marca + Precio
   ========================================================================== */

/* Contenedor flex: sidebar izq + resultados der */
.hec-results-container {
	align-items: flex-start !important;
	gap: 0 !important;
}

.hec-filters-sidebar {
	width: 210px;
	flex-shrink: 0;
	border-right: 1px solid #e8e8e8;
	padding: 20px 20px 20px 0;
	align-self: flex-start;
	position: sticky;
	top: 0;
	background: transparent;
}

.hec-results-main {
	flex: 1;
	min-width: 0;
	padding-left: 24px;
}

/* Toggle visible solo en mobile */
.hec-filters-toggle { display: none; }

/* ── Grupos de filtro ── */
.hec-filter-group {
	margin-bottom: 24px;
}
.hec-filter-group:last-child { margin-bottom: 0; }

.hec-filter-group__title {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 10px;
	font-weight: 700;
	color: #888;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #ececec;
}
.hec-filter-group__title::after { display: none; }
.hec-filter-group__title svg { color: var(--dr-red); flex-shrink: 0; opacity: .8; }

/* ── Lista de marcas ── */
.hec-brand-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 200px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--dr-red) transparent;
}
.hec-brand-list::-webkit-scrollbar { width: 3px; }
.hec-brand-list::-webkit-scrollbar-thumb { background: var(--dr-red); border-radius: 3px; }

.hec-brand-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 10px;
	background: transparent;
	border: 1.5px solid transparent;
	border-radius: 7px;
	font-size: 12.5px;
	font-weight: 500;
	color: #444;
	cursor: pointer;
	text-align: left;
	transition: background .15s, border-color .15s, color .15s;
	width: 100%;
}
.hec-brand-item:hover {
	background: #fff0f2;
	border-color: rgba(217,4,41,.25);
	color: var(--dr-red);
}
.hec-brand-item.is-active {
	background: var(--grad-red);
	border-color: transparent;
	color: #fff;
	font-weight: 700;
}
.hec-brand-item__count {
	font-size: 10px;
	font-weight: 700;
	opacity: .6;
	background: rgba(0,0,0,.08);
	border-radius: 8px;
	padding: 1px 6px;
	flex-shrink: 0;
}
.hec-brand-item.is-active .hec-brand-item__count {
	background: rgba(255,255,255,.2);
	opacity: 1;
}

/* Auto-resaltado según resultados de búsqueda */
.hec-brand-item.has-results {
	border-color: rgba(217,4,41,.35);
	color: var(--dr-red);
	background: #fff5f6;
}
.hec-brand-item.has-results .hec-brand-item__count {
	background: rgba(217,4,41,.12);
	color: var(--dr-red);
	opacity: 1;
}
.hec-brand-item.no-results {
	opacity: .3;
	pointer-events: none;
	filter: grayscale(.6);
}

/* ── Price display ── */
.hec-price-display {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 700;
	color: var(--dr-black);
	margin-bottom: 14px;
}
.hec-price-sep {
	color: #bbb;
	font-weight: 400;
}

/* ── Dual range slider ── */
.hec-range-wrap {
	position: relative;
	height: 22px;
	margin-bottom: 16px;
}
.hec-range-track {
	position: absolute;
	top: 50%; left: 0; right: 0;
	transform: translateY(-50%);
	height: 4px;
	background: #e0e0e0;
	border-radius: 4px;
}
.hec-range-fill {
	position: absolute;
	height: 100%;
	background: var(--grad-red);
	border-radius: 4px;
}
.hec-range {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 4px;
	background: transparent;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	margin: 0;
}
.hec-range--min { z-index: 3; }
.hec-range--max { z-index: 4; }

.hec-range::-webkit-slider-thumb {
	pointer-events: all;
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--dr-red);
	cursor: pointer;
	border: 2.5px solid #fff;
	box-shadow: 0 2px 8px rgba(217,4,41,.4);
	transition: box-shadow .15s, transform .15s;
}
.hec-range::-webkit-slider-thumb:hover {
	box-shadow: 0 0 0 6px rgba(217,4,41,.15);
	transform: scale(1.15);
}
.hec-range::-moz-range-thumb {
	pointer-events: all;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--dr-red);
	cursor: pointer;
	border: 2.5px solid #fff;
	box-shadow: 0 2px 8px rgba(217,4,41,.4);
}

/* ── Botón Aplicar precio ── */
.hec-price-apply {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 8px 14px;
	background: var(--dr-black);
	color: #fff;
	border: none;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: .4px;
	transition: background .2s, box-shadow .2s, transform .15s;
}
.hec-price-apply:hover {
	background: var(--grad-red);
	box-shadow: var(--shadow-red);
	transform: translateY(-1px);
}
.hec-price-apply.is-applied {
	background: var(--grad-red);
	box-shadow: var(--shadow-red);
}

/* ==========================================================================
   RESPONSIVE — sidebar en mobile
   ========================================================================== */
@media (max-width: 860px) {
	.hec-results-container { flex-direction: column !important; }

	.hec-filters-sidebar {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--dr-border);
		padding: 12px 0 16px;
		position: static;
	}

	.hec-filters-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 9px 14px;
		background: #f7f7f9;
		border: 1.5px solid var(--dr-border);
		border-radius: 8px;
		font-size: 13px;
		font-weight: 700;
		color: #333;
		cursor: pointer;
		transition: background .15s, border-color .15s;
	}
	.hec-filters-toggle:hover { background: #fff0f2; border-color: var(--dr-red); color: var(--dr-red); }
	.hec-filters-toggle__chevron {
		margin-left: auto;
		transition: transform .25s;
	}
	.hec-filters-toggle[aria-expanded="true"] .hec-filters-toggle__chevron {
		transform: rotate(180deg);
	}

	.hec-filters-body {
		display: none;
		padding-top: 16px;
	}
	.hec-filters-body.is-open { display: flex; gap: 20px; flex-wrap: wrap; }

	.hec-filter-group { margin-bottom: 0; flex: 1; min-width: 200px; }

	.hec-brand-list { max-height: 150px; }

	.hec-results-main { padding-left: 0; padding-top: 16px; }
}

/* ── Filtros: ajuste fino en pantallas angostas ── */
@media (max-width: 480px) {
	.hec-filters-toggle { font-size: 12.5px; padding: 8px 12px; }
	.hec-filters-body.is-open { flex-direction: column; gap: 0; }
	.hec-filter-group { min-width: 0; width: 100%; }
	.hec-filter-group + .hec-filter-group { margin-top: 16px; }
	.hec-brand-list { max-height: 120px; }
	.hec-range::-webkit-slider-thumb { width: 22px; height: 22px; } /* thumb más fácil de arrastrar */
}

/* ── Pantallas muy pequeñas (≤ 360px) ── */
@media (max-width: 360px) {
	.dfd-layer .hec-container { padding: 0 10px; }
	.dfd-layer__inner { padding: 10px 0 12px; }
	.search-bar--drawer { height: 44px; }
	.dfd-layer__close { width: 40px; height: 40px; }
	.srd-section--products-full .srd-random-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
	}
	.srd-prod-card__body { padding: 6px 8px 8px; }
	.srd-prod-card__name { font-size: 11px; }
}

/* ==========================================================================
   MOBILE SEARCH BAR STRIP
   Visible solo en mobile — trigger prominente del Search Drawer
   ========================================================================== */
.hec-mobile-searchbar {
	display: none;
	background: linear-gradient(180deg, #111827 0%, #192038 100%);
	padding: 10px 0 12px;
	border-bottom: 2px solid rgba(217,4,41,.35);
}

.hec-mobile-searchbar .hec-container {
	display: block;
	padding: 0 14px;
}

.hec-mobile-searchbar__trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255,255,255,.08);
	border: 1.5px solid rgba(255,255,255,.16);
	border-radius: 10px;
	padding: 11px 14px;
	cursor: pointer;
	transition: background .2s, border-color .2s, box-shadow .2s;
	width: 100%;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

.hec-mobile-searchbar__trigger:hover,
.hec-mobile-searchbar__trigger:active {
	background: rgba(255,255,255,.13);
	border-color: var(--dr-red);
	box-shadow: 0 0 0 2px rgba(217,4,41,.18);
}

.hec-mobile-searchbar__icon {
	color: rgba(255,255,255,.5);
	flex-shrink: 0;
}

.hec-mobile-searchbar__placeholder {
	flex: 1;
	font-size: 14px;
	color: rgba(255,255,255,.38);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	user-select: none;
	pointer-events: none;
}
.hec-mobile-searchbar__placeholder::after {
	content: '|';
	margin-left: 1px;
	color: rgba(255,255,255,.55);
	animation: hec-cursor-blink 1s step-end infinite;
}
@keyframes hec-cursor-blink {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0; }
}

.hec-mobile-searchbar__action {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--dr-red);
	border-radius: 8px;
	color: #fff;
	flex-shrink: 0;
	box-shadow: 0 2px 10px rgba(217,4,41,.45);
	transition: background .2s, box-shadow .2s, transform .15s;
}

.hec-mobile-searchbar__trigger:hover .hec-mobile-searchbar__action,
.hec-mobile-searchbar__trigger:active .hec-mobile-searchbar__action {
	background: #b5021f;
	transform: scale(1.06);
}

@media (max-width: 768px) {
	.hec-mobile-searchbar { display: block; }
}

/* ── Redes sociales en main bar — oculto en desktop ── */
@media (min-width: 769px) {
	.hec-mobile-socials { display: none !important; }
}

.hec-mobile-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.12);
	color: rgba(255,255,255,.65);
	text-decoration: none;
	transition: background .2s, color .2s, border-color .2s, transform .15s;
	flex-shrink: 0;
	-webkit-tap-highlight-color: transparent;
}
.hec-mobile-social__link:hover,
.hec-mobile-social__link:active {
	background: var(--dr-red);
	border-color: var(--dr-red);
	color: #fff;
	transform: scale(1.08);
	text-decoration: none;
}

/* Colores de marca al hacer hover por red */
.hec-mobile-social__link--facebook:hover  { background: #1877f2; border-color: #1877f2; }
.hec-mobile-social__link--instagram:hover { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af); border-color: #dd2a7b; }
.hec-mobile-social__link--linkedin:hover  { background: #0a66c2; border-color: #0a66c2; }
.hec-mobile-social__link--youtube:hover   { background: #ff0000; border-color: #ff0000; }
.hec-mobile-social__link--tiktok:hover    { background: #010101; border-color: #69c9d0; }
.hec-mobile-social__link--whatsapp:hover  { background: #25d366; border-color: #25d366; }

.hec-mobile-social__link svg { display: block; }

@media (max-width: 480px) {
	.hec-mobile-searchbar { padding: 8px 0 10px; }
	.hec-mobile-searchbar .hec-container { padding: 0 12px; }
	.hec-mobile-searchbar__trigger { padding: 10px 12px; border-radius: 8px; }
	.hec-mobile-searchbar__placeholder { font-size: 13px; }
	.hec-mobile-socials { gap: 5px; padding-top: 6px; padding-bottom: 8px; }
	.hec-mobile-social__link { width: 32px; height: 32px; border-radius: 7px; }
}

/* Admin bar */
body.admin-bar .site-header.custom-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .site-header.custom-header { top: 46px; } }

/* Skip link */
.skip-link {
	position: absolute; top: -40px; left: 0;
	background: #D90429; color: #fff; padding: 8px 16px;
	z-index: 999999; text-decoration: none; font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 0; color: #fff; }

/* Cart badge update animation */
.cart-count.updating { animation: hec-pop .3s ease; }
@keyframes hec-pop { 0%{transform:scale(1)} 50%{transform:scale(1.5)} 100%{transform:scale(1)} }

/* ==========================================================================
   HEADER RETHEME — "Industrial Premium Dark"
   Flujo: slate-navy profundo → charcoal oscuro → rojo rico → página blanca
   Paleta: #080d1a (topbar) · #111827→#1a2438 (main) · gradiente rojo (nav)

   Estrategia de overrides:
   · Topbar: fondo más sofisticado que el negro plano
   · Main bar: oscuro unificado con topbar (reemplaza el blanco puro)
   · Search: glass oscuro con borde sutil → rojo en focus
   · Actions: texto blanco con hover rojo translúcido
   · Nav: gradiente rojo con más profundidad
   ========================================================================== */

/* ── Site-header: sombra más densa para header oscuro ────────────────────── */
.site-header.custom-header {
	box-shadow:
		0 4px 28px rgba(0,0,0,.52),
		0 1px 0   rgba(217,4,41,.22) !important;
}

/* ── 1. TOPBAR — slate-navy profundo ─────────────────────────────────────── */
.hec-topbar {
	background: linear-gradient(90deg, #06091a 0%, #0d1628 50%, #06091a 100%) !important;
	border-bottom: 1px solid rgba(217,4,41,.22) !important;
}
.hec-topbar__item {
	opacity: .76;
	transition: opacity .2s ease, color .2s ease !important;
}
.hec-topbar__item:hover {
	color: #fbbf24 !important;
	opacity: 1 !important;
	text-decoration: none !important;
}
.hec-topbar__sep {
	background: rgba(255,255,255,.1) !important;
}

/* ── 2. MAIN BAR — charcoal oscuro unificado ─────────────────────────────── */
.hec-main-bar {
	background: linear-gradient(180deg, #111827 0%, #192038 100%) !important;
	padding: 11px 0 !important;
	border-bottom: 1px solid rgba(255,255,255,.05) !important;
}

/* Logo: reemplaza outline por glow rojo sobre fondo oscuro */
.hec-logo__img,
.hec-logo img,
.hec-logo .custom-logo {
	filter:
		drop-shadow(0 0 10px rgba(217,4,41,.55))
		drop-shadow(0 3px 18px rgba(0,0,0,.6)) !important;
}
.hec-logo__link:hover .hec-logo__img,
.hec-logo a:hover img,
.hec-logo a:hover .custom-logo {
	filter:
		drop-shadow(0 0 16px rgba(217,4,41,.78))
		drop-shadow(0 5px 22px rgba(0,0,0,.65)) !important;
	transform: scale(1.04);
}

/* ── Search trigger (main bar) — glass oscuro ────────────────────────────── */
.hec-main-bar .input-group.search-bar {
	background:    rgba(255,255,255,.07) !important;
	border:        1.5px solid rgba(255,255,255,.13) !important;
	box-shadow:    inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.hec-main-bar .input-group.search-bar:hover,
.hec-main-bar .input-group.search-bar:focus-within {
	border-color: var(--dr-red) !important;
	background:   rgba(255,255,255,.1) !important;
	box-shadow:
		0 0 0 3px rgba(217,4,41,.15),
		inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Category prepend — glass más oscuro */
.hec-main-bar .input-group-prepend {
	background: rgba(255,255,255,.07) !important;
}
.hec-main-bar .search-bar__category,
.hec-main-bar .search-bar__category--display {
	color: rgba(255,255,255,.8) !important;
}
.hec-main-bar .search-bar__cat-arrow    { color: rgba(255,255,255,.42) !important; }
.hec-main-bar .search-bar__cat-divider  { background: rgba(255,255,255,.11) !important; }

/* Input text */
.hec-main-bar .search-bar__input.form-control {
	color:       #fff !important;
	caret-color: var(--dr-red) !important;
}
.hec-main-bar .search-bar__input.form-control::placeholder {
	color: rgba(255,255,255,.36) !important;
}

/* Clear button */
.hec-main-bar .search-bar__clear {
	background: rgba(255,255,255,.13) !important;
	color:      rgba(255,255,255,.68) !important;
}
.hec-main-bar .search-bar__clear:hover {
	background: var(--dr-red) !important;
	color:      #fff !important;
}

/* Botón BUSCAR: rojo más saturado con borde interior */
.hec-main-bar .search-bar__btn {
	background: var(--dr-red) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
	transition: background .2s, box-shadow .2s !important;
}
.hec-main-bar .search-bar__btn:hover {
	background: #b5021f !important;
	box-shadow:
		0 0 0 2px rgba(217,4,41,.28),
		inset 0 1px 0 rgba(255,255,255,.1) !important;
}

/* ── Acciones — íconos y texto en blanco ─────────────────────────────────── */
.hec-action-btn {
	color: rgba(255,255,255,.78) !important;
}
.hec-action-btn:hover {
	background: rgba(217,4,41,.15) !important;
	color:      #fff !important;
}
.hec-action-label small  { color: rgba(255,255,255,.48) !important; }
.hec-action-label strong { color: rgba(255,255,255,.92) !important; }
.hec-action-btn:hover .hec-action-label small,
.hec-action-btn:hover .hec-action-label strong { color: #fff !important; }

/* Total del carrito: ámbar para destacar precio sobre oscuro */
.hec-cart-total { color: #fbbf24 !important; }

/* Badge: sigue rojo */
.cart-count { background: var(--dr-red) !important; }

/* ── Controles móvil — blanco sobre oscuro ───────────────────────────────── */
/* Cotizador móvil: mantiene rojo sólido sobre header oscuro */
.hec-mobile-cotizar {
	background: var(--dr-red) !important;
	color: #fff !important;
	border: none !important;
}
.hec-mobile-cotizar:hover {
	background: #b5021f !important;
	color: #fff !important;
}
.hec-mobile-cotizar .cot-badge {
	background: #fff !important;
	color: var(--dr-red) !important;
}

/* Botón menú: fondo rojo sólido para máxima visibilidad en header oscuro */
.hec-menu-toggle {
	width: 52px !important;
	height: 52px !important;
	border-radius: 12px !important;
	color: rgba(255,255,255,.85) !important;
	border: 1.5px solid rgba(255,255,255,.18) !important;
	background: rgba(255,255,255,.07) !important;
	box-shadow: none !important;
}
.hec-menu-toggle:hover {
	background: rgba(217,4,41,.2) !important;
	border-color: var(--dr-red) !important;
	color: #fff !important;
}
.hec-menu-toggle.is-active {
	background: rgba(217,4,41,.25) !important;
	border-color: var(--dr-red) !important;
}
.hec-mobile-cart {
	width: 52px !important;
	height: 52px !important;
	border-radius: 12px !important;
	color: rgba(255,255,255,.85) !important;
	border: 1.5px solid rgba(255,255,255,.18) !important;
	background: rgba(255,255,255,.07) !important;
}
.hec-mobile-cart svg { width: 26px !important; height: 26px !important; }
.hec-mobile-cart:hover {
	background: rgba(217,4,41,.2) !important;
	border-color: var(--dr-red) !important;
	color: #fff !important;
	text-decoration: none !important;
}
.hec-hamburger span { background: rgba(255,255,255,.85) !important; }
.hec-menu-toggle.is-active .hec-hamburger span { background: #fff !important; }

/* ── 3. NAV BAR — gradiente rojo más profundo ────────────────────────────── */
.hec-nav-bar {
	background: linear-gradient(
		90deg,
		#8e0118 0%,
		#b5021f 18%,
		#D90429 50%,
		#b5021f 82%,
		#8e0118 100%
	) !important;
	border-top:  1px solid rgba(0,0,0,.22) !important;
	border-bottom: 1px solid rgba(0,0,0,.15) !important;
	box-shadow:  0 4px 22px rgba(0,0,0,.38) !important;
}

/* Menú activo: hover levemente más claro */
.hec-menu > li:hover > a,
.hec-menu > li.current-menu-item > a,
.hec-menu > li.current-menu-parent > a {
	background: rgba(255,255,255,.14) !important;
}

/* Botón COTIZAR: glass blanco sobre rojo */
.hec-btn-cotizar {
	background:   rgba(255,255,255,.12) !important;
	border-color: rgba(255,255,255,.52) !important;
	color:        #fff !important;
	backdrop-filter: blur(6px) !important;
	-webkit-backdrop-filter: blur(6px) !important;
}
.hec-btn-cotizar:hover {
	background:   rgba(255,255,255,.22) !important;
	border-color: #fff !important;
	color:        #fff !important;
	box-shadow:   0 4px 20px rgba(0,0,0,.35) !important;
}

/* ── Mobile: logo glow reducido ──────────────────────────────────────────── */
@media (max-width: 768px) {
	.hec-logo__img,
	.hec-logo img,
	.hec-logo .custom-logo {
		filter:
			drop-shadow(0 0 7px rgba(217,4,41,.45))
			drop-shadow(0 2px 10px rgba(0,0,0,.5)) !important;
	}
}