/* =========================================================
 * Header OZ-Thema-4.0 — Confeindustria Israel
 * 3 filas: marquee · logo+search+phone · cats+menu+ofertas
 * Colores: azul #171770 · amarillo #FCC62E
 * Mobile-first, responsive ≥768 / ≥1024 / ≥1280
 * ========================================================= */

:root {
	--oz-h-blue:          #171770;
	--oz-h-blue-dark:     #0f0f55;
	--oz-h-yellow:        #FCC62E;
	--oz-h-yellow-dark:   #e6b021;
	--oz-h-text:          #1f2937;
	--oz-h-text-light:    #6b7280;
	--oz-h-bg:            #ffffff;
	--oz-h-border:        #e5e7eb;
	--oz-h-divider:       rgba(23, 23, 112, .12);
	--oz-h-shadow:        0 2px 6px rgba(0, 0, 0, .08);
	--oz-h-radius:        10px;
	--oz-h-trans:         .2s ease;
}

/* ---------- Reset puntual ---------- */
.oz-header,
.oz-header * {
	box-sizing: border-box;
}
.oz-header ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.oz-header a {
	text-decoration: none;
	color: inherit;
}
.oz-header button {
	font: inherit;
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	padding: 0;
}

/* ---------- Layout base ---------- */
.oz-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 500;
	background: var(--oz-h-bg);
	color: var(--oz-h-text);
	box-shadow: var(--oz-h-shadow);
	transform: translateY(0);
	transition: transform 0.3s ease;
	will-change: transform;
}

.oz-header.is-hidden {
	transform: translateY(-100%);
}

.oz-header-spacer {
	width: 100%;
	flex: 0 0 auto;
}

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

.oz-header__container {
	width: 100%;
	max-width: 1750px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	gap: 24px;
}

/* =========================================================
 *  FILA 1: Marquee infinito
 * ========================================================= */
.oz-header__marquee {
	background: var(--oz-h-blue);
	color: #ffffff;
	overflow: hidden;
	padding: 8px 0;
	width: 100%;
	position: relative;
}

.oz-header__marquee-track {
	display: inline-flex;
	white-space: nowrap;
	animation: oz-marquee 40s linear infinite;
	will-change: transform;
}

.oz-header__marquee-item {
	display: inline-block;
	padding: 0 60px;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	color: #ffffff;
	text-transform: uppercase;
}

@keyframes oz-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.oz-header__marquee-track {
		animation: none;
	}
}

/* =========================================================
 *  FILA 2: Logo + buscador + teléfono
 * ========================================================= */
.oz-header__main {
	background: var(--oz-h-bg);
	border-bottom: 1px solid var(--oz-h-border);
}

.oz-header__main .oz-header__container {
	min-height: 88px;
	padding-top: 14px;
	padding-bottom: 14px;
}

/* ---------- Logo ---------- */
.oz-header__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}
.oz-header__logo .custom-logo-link,
.oz-header__logo a {
	display: inline-flex;
	align-items: center;
}
.oz-header__logo img {
	height: 60px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
}
.oz-header__logo-text {
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--oz-h-blue);
}

/* ---------- Buscador ---------- */
.oz-header__search {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 720px;
	margin: 0 auto;
}
.oz-header__search .oz-ls,
.oz-header__search .ozpls-figma,
.oz-header__search .ozpls-figma__form {
	width: 100% !important;
}
.oz-header__search .oz-ls,
.oz-header__search .ozpls-figma {
	position: relative !important;
}

.oz-header__search .ozpls-figma__form {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 44px;
	margin: 0;
	background: transparent !important;
	border-radius: 999px !important;
	overflow: visible !important;
}

.oz-header__search .ozpls-figma__inputWrap,
.oz-header__search .ozpls-figma__bar {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none;
	position: relative;
}

.oz-header__search .ozpls-figma__input,
.oz-header__search .ozpls-figma__input:focus,
.oz-header__search .ozpls-figma__input:hover,
.oz-header__search .ozpls-figma__input:active {
	width: 100% !important;
	background: #ffffff !important;
	border: 1px solid #d1d5db !important;
	color: var(--oz-h-text) !important;
	-webkit-text-fill-color: var(--oz-h-text) !important;
	border-radius: 999px !important;
	padding: 0 50px 0 22px !important;
	font-family: Inter, system-ui, sans-serif !important;
	font-size: 14px !important;
	box-sizing: border-box !important;
	outline: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	height: 44px !important;
	appearance: none !important;
}

.oz-header__search .ozpls-figma__input:focus {
	border-color: var(--oz-h-blue) !important;
	box-shadow: 0 0 0 3px rgba(23, 23, 112, .12) !important;
}

.oz-header__search .ozpls-figma__input::placeholder {
	color: var(--oz-h-text-light) !important;
	-webkit-text-fill-color: var(--oz-h-text-light) !important;
}

.oz-header__search .ozpls-figma__btn {
	position: absolute !important;
	right: 4px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	height: 36px !important;
	width: 36px !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	z-index: 2 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
}
.oz-header__search .ozpls-figma__btn:hover { background: rgba(23, 23, 112, .08) !important; }
.oz-header__search .ozpls-figma__btnText { display: none !important; }
.oz-header__search .ozpls-figma__btn svg,
.oz-header__search .ozpls-figma__btn img { display: none !important; }
.oz-header__search .ozpls-figma__btn::after {
	content: "";
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M17 15.332L13.4588 11.8566C14.3807 10.5834 14.8767 9.04903 14.8752 7.47444C14.8752 3.35312 11.5386 0 7.43758 0C3.33659 0 0 3.35312 0 7.47444C0 11.5958 3.33659 14.9489 7.43758 14.9489C9.00441 14.9504 10.5313 14.452 11.7982 13.5255L15.2564 17L17 15.332ZM7.43758 12.5882C6.43103 12.5883 5.44706 12.2884 4.6101 11.7265C3.77315 11.1646 3.1208 10.3658 2.73557 9.43132C2.35034 8.4968 2.24952 7.46846 2.44587 6.47635C2.64221 5.48424 3.1269 4.57293 3.83864 3.85767C4.55038 3.1424 5.4572 2.6553 6.44442 2.45799C7.43163 2.26067 8.4549 2.36198 9.38482 2.74913C10.3147 3.13627 11.1095 3.79185 11.6687 4.63295C12.2278 5.47405 12.5262 6.4629 12.5261 7.47444C12.5246 8.83021 11.9879 10.13 11.034 11.0887C10.08 12.0473 8.78667 12.5866 7.43758 12.5882Z' fill='%23171770'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	display: block;
}

/* Live search panel — calza el ancho del buscador */
.oz-header__search .oz-ls__panel,
.oz-header__search .oz-live-search__dropdown {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	top: calc(100% + 6px) !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: var(--oz-h-text);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .12) !important;
	box-sizing: border-box !important;
}

/* ---------- Teléfono ---------- */
.oz-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	color: var(--oz-h-blue);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	font-weight: 600;
}
.oz-header__phone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid var(--oz-h-blue);
	color: var(--oz-h-blue);
	flex: 0 0 auto;
}
.oz-header__phone-icon svg {
	width: 18px;
	height: 18px;
}
.oz-header__phone-numbers {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.25;
	gap: 2px;
}
.oz-header__phone-number {
	white-space: nowrap;
	color: var(--oz-h-blue);
	text-decoration: none;
	transition: opacity var(--oz-h-trans);
}
.oz-header__phone-number:hover {
	opacity: .75;
}

/* =========================================================
 *  FILA 3: Categorías + menú + ofertas
 * ========================================================= */
.oz-header__nav-row {
	background: var(--oz-h-bg);
	border-bottom: 1px solid var(--oz-h-border);
	position: relative;
}

.oz-header__container--nav {
	min-height: 60px;
	padding-top: 8px;
	padding-bottom: 8px;
	gap: 24px;
}

/* ---------- Botón Categorías ---------- */
.oz-header__cats-wrap {
	position: relative;
	flex: 0 0 auto;
}

.oz-header__cats-master {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 200px;
	height: 44px;
	padding: 0 22px;
	border: 0 !important;
	border-radius: 8px;
	background: var(--oz-h-yellow) !important;
	color: var(--oz-h-blue) !important;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: background-color var(--oz-h-trans), transform var(--oz-h-trans);
	white-space: nowrap;
	cursor: pointer;
}
.oz-header__cats-master:hover {
	background: var(--oz-h-yellow-dark) !important;
}
.oz-header__cats-master[aria-expanded="true"] {
	background: var(--oz-h-yellow-dark) !important;
}

.oz-header__cats-master-icon {
	flex: 0 0 auto;
	color: var(--oz-h-blue);
}

/* ---------- Botón Menú (móvil/tablet) ---------- */
.oz-header__menu-master {
	display: none; /* sólo móvil/tablet */
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 140px;
	height: 44px;
	padding: 0 18px;
	border: 2px solid var(--oz-h-blue) !important;
	border-radius: 8px;
	background: transparent !important;
	color: var(--oz-h-blue) !important;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: background-color var(--oz-h-trans), color var(--oz-h-trans);
	white-space: nowrap;
	cursor: pointer;
	flex: 0 0 auto;
}
.oz-header__menu-master:hover,
.oz-header__menu-master[aria-expanded="true"] {
	background: var(--oz-h-blue) !important;
	color: #ffffff !important;
}
.oz-header__menu-master-icon {
	display: inline-flex;
	align-items: center;
	color: currentColor;
}

/* =========================================================
 *  Panel de categorías (jerárquico, integrado)
 * ========================================================= */
.oz-cats-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 280px;
	background: #ffffff;
	border: 1px solid var(--oz-h-border);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
	padding: 8px;
	z-index: 250;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--oz-h-trans), transform var(--oz-h-trans), visibility var(--oz-h-trans);
}
.oz-cats-menu:not([hidden]) {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.oz-cats-menu__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oz-cats-menu__item {
	position: relative;
	margin: 0;
}

.oz-cats-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 11px 14px;
	color: var(--oz-h-text);
	font-family: Inter, system-ui, sans-serif;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .005em;
	line-height: 1.25;
	border: 0;
	border-radius: 8px;
	background: transparent;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--oz-h-trans), color var(--oz-h-trans), padding-left var(--oz-h-trans);
}

.oz-cats-menu__link:hover,
.oz-cats-menu__link:focus-visible,
.oz-cats-menu__item.is-active > .oz-cats-menu__link,
.oz-cats-menu__link[aria-expanded="true"] {
	background: rgba(252, 198, 46, .18);
	color: var(--oz-h-blue);
	padding-left: 18px;
	outline: none;
}

.oz-cats-menu__caret {
	flex: 0 0 auto;
	opacity: .65;
	color: var(--oz-h-blue);
	transition: transform var(--oz-h-trans), opacity var(--oz-h-trans);
}
.oz-cats-menu__item.is-active > .oz-cats-menu__link .oz-cats-menu__caret,
.oz-cats-menu__link[aria-expanded="true"] .oz-cats-menu__caret {
	transform: translateX(2px);
	opacity: 1;
}

/* ----- Flyout L2/L3 ----- */
/* Se abre hacia la IZQUIERDA del panel: el panel está anclado al borde
   derecho de la pantalla, así que hay espacio sobrante a su izquierda. */
.oz-cats-menu__flyout {
	position: absolute;
	top: -8px;
	right: calc(100% + 6px);
	min-width: 320px;
	max-width: min(420px, calc(100vw - 360px));
	max-height: min(70vh, 520px);
	overflow-y: auto;
	background: #ffffff;
	color: var(--oz-h-text);
	border: 1px solid var(--oz-h-border);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateX(6px);
	transition: opacity var(--oz-h-trans), transform var(--oz-h-trans), visibility var(--oz-h-trans);
	z-index: 260;
	scrollbar-width: thin;
	scrollbar-color: var(--oz-h-blue) transparent;
}
.oz-cats-menu__flyout::-webkit-scrollbar { width: 8px; }
.oz-cats-menu__flyout::-webkit-scrollbar-thumb { background: var(--oz-h-blue); border-radius: 8px; }

.oz-cats-menu__item.is-active > .oz-cats-menu__flyout,
.oz-cats-menu__flyout:not([hidden]) {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.oz-cats-menu__flyout-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 6px 10px 10px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--oz-h-divider);
}
.oz-cats-menu__flyout-title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--oz-h-blue);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.oz-cats-menu__flyout-grid {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.oz-cats-menu__flyout-col { min-width: 0; }

.oz-cats-menu__flyout-col-title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 500;
	color: var(--oz-h-text);
	letter-spacing: .005em;
	line-height: 1.25;
	border: 0;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color var(--oz-h-trans), color var(--oz-h-trans), padding-left var(--oz-h-trans);
}
.oz-cats-menu__flyout-col-title:hover,
.oz-cats-menu__flyout-col-title:focus-visible {
	background: rgba(252, 198, 46, .18);
	color: var(--oz-h-blue);
	padding-left: 18px;
	outline: none;
}

.oz-cats-menu__flyout-sublist {
	margin: 2px 0 6px;
	padding: 0 0 0 12px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1px;
	border-left: 1px solid var(--oz-h-divider);
	margin-left: 18px;
}
.oz-cats-menu__flyout-sublist a {
	display: block;
	padding: 7px 12px;
	font-size: 13px;
	color: var(--oz-h-text-light);
	text-decoration: none;
	line-height: 1.35;
	border-radius: 8px;
	transition: background-color var(--oz-h-trans), color var(--oz-h-trans), padding-left var(--oz-h-trans);
}
.oz-cats-menu__flyout-sublist a:hover,
.oz-cats-menu__flyout-sublist a:focus-visible {
	background: rgba(252, 198, 46, .18);
	color: var(--oz-h-blue);
	padding-left: 16px;
	outline: none;
}

@media (max-width: 1199px) {
	.oz-cats-menu__flyout {
		right: 0;
		left: auto;
		top: calc(100% + 6px);
		transform: translateY(-6px);
		min-width: min(420px, calc(100vw - 32px));
		max-width: min(420px, calc(100vw - 32px));
	}
	.oz-cats-menu__item.is-active > .oz-cats-menu__flyout {
		transform: translateY(0);
	}
}

/* =========================================================
 *  Menú principal (fila 3)
 * ========================================================= */
.oz-header__nav {
	flex: 1 1 auto;
	display: none; /* sólo desktop */
	justify-content: center;
}
.oz-header__nav-list {
	display: flex;
	align-items: center;
	gap: 32px;
}
.oz-header__nav-list li { position: relative; }
.oz-header__nav-list a {
	display: inline-block;
	padding: 10px 0;
	color: var(--oz-h-text);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: normal;
	transition: color var(--oz-h-trans);
	white-space: nowrap;
}
.oz-header__nav-list a:hover,
.oz-header__nav-list .current-menu-item > a,
.oz-header__nav-list a[aria-current="page"] {
	color: var(--oz-h-blue);
}

/* Submenús del menú principal */
.oz-header__nav-list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #ffffff;
	color: var(--oz-h-text);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
	border: 1px solid var(--oz-h-border);
	border-radius: var(--oz-h-radius);
	padding: 6px 0;
	display: none;
	z-index: 200;
}
.oz-header__nav-list li:hover > .sub-menu,
.oz-header__nav-list li:focus-within > .sub-menu { display: block; }
.oz-header__nav-list .sub-menu a {
	display: block;
	color: var(--oz-h-text);
	padding: 10px 18px;
	font-weight: 500;
	font-size: 14px;
}
.oz-header__nav-list .sub-menu a:hover {
	background: rgba(252, 198, 46, .18);
	color: var(--oz-h-blue);
}

/* =========================================================
 *  Botón Ofertas (amarillo)
 * ========================================================= */
.oz-header__offers-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
	height: 44px;
	padding: 0 24px;
	background: var(--oz-h-blue) !important;
	color: var(--oz-h-yellow) !important;
	border: 0;
	border-radius: 8px;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background-color var(--oz-h-trans), transform var(--oz-h-trans);
}
.oz-header__offers-btn:hover {
	background: var(--oz-h-blue-dark) !important;
	transform: translateY(-1px);
}

/* =========================================================
 *  Drawer (móvil): genérico
 * ========================================================= */
.oz-drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
}
.oz-drawer[hidden] { display: none; }

.oz-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	opacity: 0;
	transition: opacity .22s ease;
}
.oz-drawer.is-open .oz-drawer__backdrop { opacity: 1; }

.oz-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: min(86vw, 360px);
	background: #ffffff;
	color: var(--oz-h-text);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
	transition: transform .22s ease;
	display: flex;
	flex-direction: column;
}
.oz-drawer__panel--left {
	left: 0;
	transform: translateX(-100%);
}
.oz-drawer__panel--right {
	right: 0;
	transform: translateX(100%);
}
.oz-drawer.is-open .oz-drawer__panel--left,
.oz-drawer.is-open .oz-drawer__panel--right {
	transform: translateX(0);
}

/* Lista de teléfonos dentro del drawer del menú */
.oz-drawer__phones {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 16px 0 8px;
	padding-top: 16px;
	border-top: 1px solid var(--oz-h-border);
}
.oz-drawer__phone-item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(252, 198, 46, .14);
	color: var(--oz-h-blue);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--oz-h-trans);
}
.oz-drawer__phone-item:hover { background: rgba(252, 198, 46, .26); }
.oz-drawer__phone-item svg { flex: 0 0 auto; color: var(--oz-h-blue); }

.oz-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--oz-h-border);
	background: var(--oz-h-blue);
	color: #ffffff;
}
.oz-drawer__title {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.oz-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	color: #ffffff;
}
.oz-drawer__close:hover { background: rgba(255, 255, 255, .12); }

.oz-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 14px 14px 28px;
}

.oz-drawer__section {
	margin-bottom: 20px;
}
.oz-drawer__section-title {
	margin: 6px 6px 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--oz-h-text-light);
}

/* ----- Drawer reset (listas / botones nativos) ----- */
.oz-drawer ul {
	list-style: none !important;
	margin: 0;
	padding: 0;
}
.oz-drawer li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}
.oz-drawer button {
	font: inherit;
	background: none;
	border: 0 !important;
	cursor: pointer;
	color: inherit;
	padding: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.oz-drawer a { text-decoration: none; color: inherit; }

/* ----- Categorías (drawer) ----- */
.oz-drawer__cats {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.oz-drawer__cat {
	list-style: none !important;
}
.oz-drawer__cat::marker { content: "" !important; }

.oz-drawer__cat-trigger {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 13px 14px;
	color: var(--oz-h-blue);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	border: 0 !important;
	border-radius: 8px;
	background: transparent;
	text-decoration: none;
	transition: background-color var(--oz-h-trans), color var(--oz-h-trans);
}
.oz-drawer__cat-trigger > span:not(.oz-drawer__cat-bullet) {
	flex: 1 1 auto;
	text-align: left;
}
.oz-drawer__cat-trigger:hover,
.oz-drawer__cat-trigger[aria-expanded="true"] {
	background: rgba(252, 198, 46, .18);
	color: var(--oz-h-blue);
}

/* Bullet decorativo para categorías principales (cuadradito amarillo) */
.oz-drawer__cat-bullet {
	display: inline-block;
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	background: var(--oz-h-yellow);
	border-radius: 2px;
}

.oz-drawer__cat-caret {
	flex: 0 0 auto;
	transition: transform var(--oz-h-trans);
	pointer-events: none;
	color: var(--oz-h-blue);
}
.oz-drawer__cat-trigger > *,
.jym-mobile-menu__l2-trigger > * {
	pointer-events: none;
}
.oz-drawer__cat-trigger[aria-expanded="true"] .oz-drawer__cat-caret {
	transform: rotate(180deg);
}

.oz-drawer__cat-sublist {
	padding: 4px 4px 8px 24px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.oz-drawer__cat-all {
	display: block;
	padding: 9px 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--oz-h-blue);
	border-radius: 6px;
}
.oz-drawer__cat-all:hover { background: rgba(23, 23, 112, .06); }

.jym-mobile-menu__l2-list { display: flex; flex-direction: column; gap: 2px; padding: 0; margin: 0; list-style: none; }
.jym-mobile-menu__l2 { list-style: none !important; }
.jym-mobile-menu__l2::marker { content: "" !important; }
.jym-mobile-menu__l2-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 9px 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--oz-h-text);
	border: 0 !important;
	border-radius: 6px;
	background: transparent;
	text-decoration: none;
	transition: background-color var(--oz-h-trans), color var(--oz-h-trans);
}
.jym-mobile-menu__l2-trigger:hover,
.jym-mobile-menu__l2-trigger[aria-expanded="true"] {
	background: rgba(252, 198, 46, .14);
	color: var(--oz-h-blue);
}
.jym-mobile-menu__l3-list {
	padding: 4px 4px 4px 14px;
	margin: 4px 0 4px 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	border-left: 1px solid var(--oz-h-divider);
}
.jym-mobile-menu__l3-list a,
.jym-mobile-menu__l2-all {
	display: block;
	padding: 7px 10px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--oz-h-text-light);
	border-radius: 6px;
	text-decoration: none;
}
.jym-mobile-menu__l3-list a:hover,
.jym-mobile-menu__l2-all:hover {
	background: rgba(252, 198, 46, .14);
	color: var(--oz-h-blue);
}

/* Menu principal (drawer) */
.oz-drawer__nav-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0;
	margin: 0;
	list-style: none;
}
.oz-drawer__nav-list a {
	display: block;
	padding: 12px 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--oz-h-text);
	border-radius: 8px;
	text-decoration: none;
}
.oz-drawer__nav-list a:hover {
	background: rgba(252, 198, 46, .18);
	color: var(--oz-h-blue);
}
.oz-drawer__nav-list .sub-menu {
	padding: 0 0 0 14px;
	margin: 4px 0 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	border-left: 1px solid var(--oz-h-divider);
}
.oz-drawer__nav-list .sub-menu a {
	font-size: 13px;
	font-weight: 500;
	color: var(--oz-h-text-light);
}

.oz-drawer__quote {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	margin-top: 8px;
	background: var(--oz-h-yellow);
	color: var(--oz-h-blue);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color var(--oz-h-trans);
}
.oz-drawer__quote:hover { background: var(--oz-h-yellow-dark); }

body.oz-drawer-open { overflow: hidden; }

/* =========================================================
 *  RESPONSIVE
 * ========================================================= */

/* --- Defaults (móvil/tablet) --- */
.oz-header__nav { display: none; }            /* menú principal sólo desktop */
.oz-header__phone { display: none; }          /* bloque teléfono sólo desktop */
.oz-header__cats-wrap { display: block; }     /* botón Categorías visible siempre */
.oz-header__menu-master { display: inline-flex; } /* botón Menú visible en móvil/tablet */
.oz-header__icon-btn { display: none; }       /* iconos móviles sólo en móvil */

/* Estilos del icono móvil (icon-only) */
.oz-header__icon-btn {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: transparent !important;
	color: var(--oz-h-blue) !important;
	border: 0 !important;
	flex: 0 0 auto;
	cursor: pointer;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--oz-h-trans), color var(--oz-h-trans);
}
.oz-header__icon-btn:hover {
	background: rgba(23, 23, 112, .08) !important;
}
.oz-header__icon-btn--cats {
	background: var(--oz-h-yellow) !important;
	color: var(--oz-h-blue) !important;
}
.oz-header__icon-btn--cats:hover {
	background: var(--oz-h-yellow-dark) !important;
}
.oz-header__icon-btn--menu {
	border: 2px solid var(--oz-h-blue) !important;
}
.oz-header__icon-btn--menu:hover {
	background: var(--oz-h-blue) !important;
	color: #ffffff !important;
}

/* --- Móvil + Tablet (< 1024px) --- */
@media (max-width: 1023px) {
	.oz-header__container {
		padding: 0 16px;
		gap: 10px;
	}
	.oz-header__main .oz-header__container {
		flex-wrap: wrap;
		min-height: 0;
		padding-top: 10px;
		padding-bottom: 10px;
		align-items: center;
	}
	.oz-header__logo {
		flex: 1 1 auto;
		justify-content: center;
		text-align: center;
	}
	.oz-header__logo img { height: 44px; margin: 0 auto; }
	.oz-header__search {
		flex: 1 1 100%;
		max-width: none;
		order: 10;
	}
	.oz-header__marquee-item {
		font-size: 11px;
		padding: 0 32px;
	}

	/* Iconos visibles en la fila del logo */
	.oz-header__icon-btn { display: inline-flex; }

	/* Fila 3 oculta — los botones se han movido a la fila 2 */
	.oz-header__nav-row { display: none; }
}

/* --- Tablet (≥ 768px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
	.oz-header__container { padding: 0 24px; }
	.oz-header__logo img { height: 50px; }
}

/* --- Desktop (≥ 1024px) --- */
@media (min-width: 1024px) {
	.oz-header__nav { display: flex; }
	.oz-header__phone { display: inline-flex; }
	.oz-header__menu-master { display: none; }
	.oz-header__container { padding: 0 32px; }
	.oz-header__logo img { height: 64px; }
}

/* --- Desktop wide (≥ 1280px) --- */
@media (min-width: 1280px) {
	.oz-header__main .oz-header__container { gap: 40px; }
	.oz-header__container--nav { gap: 32px; }
}

/* =========================================================
 *  Header compacto: desktop (≥ 1024px) — incluye PC ancho
 *  Una sola fila: Logo · Search · Nav · Categorías · Ofertas
 *  (coincide con el diseño Figma)
 * ========================================================= */
@media (min-width: 1024px) {
	/* El marquee (fila 1) se mantiene visible arriba del header. */

	/* Aplanamos fila 2 (main) y fila 3 (nav-row) para que sus hijos
	   queden como flex-items directos de <header.oz-header>. */
	.oz-header__main,
	.oz-header__nav-row,
	.oz-header__main > .oz-header__container,
	.oz-header__nav-row > .oz-header__container {
		display: contents;
	}

	/* El header se vuelve un flex NOWRAP de una sola fila.
	   El marquee se saca del flow con position: absolute para que
	   ocupe su propia "fila" arriba sin participar del wrap.
	   El padding-top reserva el espacio que ocupa el marquee. */
	.oz-header {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		column-gap: 0;
		row-gap: 0;
		padding: 36px 0 0 0;  /* hueco arriba para el marquee */
		background: var(--oz-h-bg);
		border-bottom: 1px solid var(--oz-h-border);
	}

	/* Marquee = ancla absoluta arriba, ancho completo del viewport. */
	.oz-header__marquee {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 1;
	}

	/* Fila única (nowrap) — gaps inspirados en Figma con clamp() para
	   que se compriman gradualmente. El search es el único item con
	   flex-shrink: 1, así absorbe el desbordamiento. */
	.oz-header__logo {
		flex: 0 0 auto;
		order: 1;
		padding-block: 12px;
		margin-left: max(48px, calc((100vw - 1750px) / 2));   /* "padding" izq. */
		margin-right: clamp(20px, 6vw, 109px);                 /* Logo → Search */
	}
	.oz-header__search {
		flex: 0 1 512px;        /* basis 512, puede SHRINK hasta 0 */
		order: 2;
		min-width: 0;
		max-width: 512px;
		margin: 0 auto 0 0;                                    /* push del grupo derecho */
	}
	.oz-header__nav {
		display: flex;
		flex: 0 0 auto;
		order: 3;
		justify-content: center;
		margin-left: clamp(16px, 5vw, 90px);                   /* Search → Nav (mín.) */
		margin-right: clamp(20px, 6vw, 104px);                 /* Nav → Categorías */
	}
	.oz-header__cats-wrap {
		flex: 0 0 auto;
		order: 4;
		margin-right: clamp(16px, 2.5vw, 41px);                /* Categorías → Ofertas */
	}
	.oz-header__offers-btn {
		flex: 0 0 auto;
		order: 5;
		margin-right: max(48px, calc((100vw - 1750px) / 2));   /* "padding" der. */
	}

	/* Elementos que NO aparecen en este layout */
	.oz-header__phone,
	.oz-header__icon-btn,
	.oz-header__menu-master { display: none; }

	/* Ajustes finos */
	.oz-header__nav-list    { gap: 18px; }
	.oz-header__nav-list a  { font-size: 14px; }
	.oz-header__logo img    { height: 56px; }

	/* ---------- Botones Categorías + Ofertas (estilo Figma) ----------
	   Ambos comparten fondo blanco + borde gris claro + texto azul.
	   Reescriben las reglas amarillo/azul originales. */
	.oz-header__cats-master,
	.oz-header__offers-btn {
		height: 40px;
		min-width: 0;
		background: #FFFFFF !important;
		border: 1px solid #F2F2F2 !important;
		color: #0C1555 !important;
		font-family: Roboto, Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 0;
		text-transform: uppercase;
		transition: background-color var(--oz-h-trans), border-color var(--oz-h-trans);
	}

	.oz-header__cats-master {
		width: auto;
		min-width: 0;
		justify-content: center;
		padding: 0 18px;                 /* simétrico izq./der. */
		gap: 10px;
	}
	.oz-header__cats-master-icon { color: #0C1555 !important; }

	.oz-header__offers-btn {
		padding: 0 16px;
	}

	/* Hover / activo: ligero gris para mantener la coherencia visual */
	.oz-header__cats-master:hover,
	.oz-header__cats-master[aria-expanded="true"],
	.oz-header__offers-btn:hover {
		background: #F8F8F8 !important;
		border-color: #E5E5E5 !important;
		color: #0C1555 !important;
		transform: none;
	}
}

/* --- Compactado extra para desktop angosto (1024 – 1199px) ---
   Sólo se compacta el nav y el logo. Los botones mantienen
   las medidas Figma (40px alto, 16px texto). */
@media (min-width: 1024px) and (max-width: 1199px) {
	.oz-header__nav-list    { gap: 12px; }
	.oz-header__nav-list a  { font-size: 13px; }
	.oz-header__logo img    { height: 48px; }
}

/* ── Logo del header más grande (es SVG → se agranda sin perder nitidez).
   Override final: gana en todos los breakpoints por orden de cascada,
   incluidas las reglas de 48/56px que lo dejaban chico en escritorio. ── */
.oz-header__logo img { height: 56px; }
@media (min-width: 768px)  { .oz-header__logo img { height: 66px; } }
@media (min-width: 1024px) { .oz-header__logo img { height: 76px; } }