/* ─────────────────────────────────────────────────────────────
 * Galican Sport — Header responsive (Linus 2026-05-24)
 *
 * Objetivo: que header-galican.php deje de salirse del viewport
 * en móvil sin tocar el HTML salvo el botón hamburguesa.
 *
 * Estrategia: CSS aditivo. Solo cambia comportamiento en <1100px.
 * Desktop intacto.
 * ─────────────────────────────────────────────────────────────*/

/* No permitir scroll horizontal nunca */
html, body {
	overflow-x: hidden;
}

/* ───── Hamburguesa: visible solo cuando el .gal-nav está oculto ───── */
.gal-burger { display: none; }
@media (max-width: 1100px) {
	.gal-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-left: 2px;
		color: var(--gal-ink, #f4f5f7);
		background: transparent;
		border: 1px solid rgba(255,255,255,.10);
		border-radius: 8px;
		cursor: pointer;
		flex-shrink: 0;
	}
	.gal-burger svg { width: 22px; height: 22px; }
	.gal-burger:hover { background: rgba(255,255,255,.06); }
}

/* ───── Móvil <900px: simplificar el header drásticamente ───── */
@media (max-width: 900px) {

	/* Container con menos padding lateral */
	.gal-container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Header inner: solo logo + acciones, sin gap enorme */
	.gal-header-inner {
		height: 60px !important;
		gap: 8px !important;
	}

	/* Logo más pequeño */
	.gal-logo {
		height: 20px !important;
	}

	/* Iconos de acción: tamaño táctil 44x44 */
	.gal-header-actions .gal-icon-btn {
		width: 44px !important;
		height: 44px !important;
	}
	.gal-header-actions { gap: 4px !important; }

	/* Ocultar TODOS los iconos RRSS del header en movil — liberan espacio para hamburguesa (Linus 2026-05-24) */
	.gal-social--header-actions,
	.gal-social--topbar-home,
	.gal-social--topbar,
	.gal-topbar .gal-social { display: none !important; }
}

/* ───── Topbar mejor en móvil ───── */
@media (max-width: 720px) {
	.gal-topbar {
		font-size: 11px;
		padding: 6px 0;
	}
	.gal-topbar-inner {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 14px;
	}
	.gal-topbar-left {
		gap: 10px !important;
		justify-content: center;
		flex-wrap: wrap;
	}
	.gal-topbar-right {
		gap: 10px !important;
	}
	.gal-topbar-right a {
		padding: 2px 4px;
		min-width: 24px;
		text-align: center;
	}
}
@media (max-width: 480px) {
	/* En muy pequeño, ocultar todo el slogan del topbar excepto el primero */
	.gal-topbar-left span:nth-child(n+2) { display: none; }
}

/* ───── Mobile drawer (menú lateral) ───── */
.gal-mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s ease;
}
.gal-mobile-drawer[aria-hidden="false"] {
	pointer-events: auto;
	opacity: 1;
}
.gal-mobile-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.gal-mobile-drawer__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(85vw, 360px);
	background: #0a1628;
	color: var(--gal-ink, #f4f5f7);
	border-left: 1px solid rgba(255,255,255,.08);
	display: flex;
	flex-direction: column;
	padding: 20px 22px 24px;
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.2,.7,.2,1);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.gal-mobile-drawer[aria-hidden="false"] .gal-mobile-drawer__panel {
	transform: translateX(0);
}
.gal-mobile-drawer__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.gal-mobile-drawer__title {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gal-ink-2, #a7afbd);
}
.gal-mobile-drawer__close {
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 8px;
	color: inherit;
	cursor: pointer;
}
.gal-mobile-drawer__close svg { width: 20px; height: 20px; }
.gal-mobile-drawer__nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 24px;
}
.gal-mobile-drawer__nav a {
	display: block;
	padding: 14px 4px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--gal-ink, #f4f5f7);
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,.06);
	transition: color .15s ease;
}
.gal-mobile-drawer__nav a:hover,
.gal-mobile-drawer__nav a:focus { color: var(--gal-accent, #f4c544); }
.gal-mobile-drawer__langs {
	display: flex;
	gap: 4px;
	padding-top: 16px;
	margin-bottom: 20px;
}
.gal-mobile-drawer__langs a {
	flex: 1;
	padding: 10px 0;
	text-align: center;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: .14em;
	color: var(--gal-ink-2, #a7afbd);
	text-decoration: none;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 6px;
	transition: all .15s ease;
}
.gal-mobile-drawer__langs a:hover { color: var(--gal-ink, #f4f5f7); border-color: rgba(255,255,255,.20); }
.gal-mobile-drawer__langs a.is-active {
	background: rgba(244,197,68,.10);
	color: var(--gal-accent, #f4c544);
	border-color: rgba(244,197,68,.30);
}
.gal-mobile-drawer__social {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,.08);
}

/* Bloqueo de scroll cuando drawer abierto */
html.gal-drawer-open,
html.gal-drawer-open body {
	overflow: hidden;
}

/* En desktop, asegurar que el drawer no se vea ni intercepte clics */
@media (min-width: 1101px) {
	.gal-mobile-drawer { display: none !important; }
}

/* ───── Cookies banner: que no se salga ni tape contenido en móvil ───── */
@media (max-width: 480px) {
	.gal-cookies-banner,
	.gal-cookie-banner,
	[class*="cookie-banner"] {
		left: 8px !important;
		right: 8px !important;
		max-width: calc(100% - 16px) !important;
	}
}

/* ───── Footer: que no se salga ni tenga columnas pegadas ───── */
@media (max-width: 600px) {
	.gal-footer .gal-container {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}

/* ───── Asegurar que iframes/videos sean fluidos ───── */
.gal-body iframe,
.gal-body video,
.gal-body img {
	max-width: 100%;
	height: auto;
}

/* ───── Tablas responsive básicas (catalogo, fichas técnicas) ───── */
@media (max-width: 700px) {
	.gal-body table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}


/* ──────────────────────────────────────────────────────────────
 * Linus 2026-05-24 — Fix carrito/checkout drawer & burger
 * En vistas commerce (body.galican-commerce) hay overrides de
 * Woodmart + galican-commerce que rompen color de enlaces e iconos.
 * Aquí blindamos drawer y burger con selectores más específicos.
 * ────────────────────────────────────────────────────────────── */

/* Links del drawer: forzar blanco en TODAS las páginas (incluido cart/checkout) */
html body .gal-mobile-drawer__nav a,
html body.galican-commerce .gal-mobile-drawer__nav a {
	color: #f4f5f7 !important;
	text-decoration: none !important;
}
html body .gal-mobile-drawer__nav a:hover,
html body .gal-mobile-drawer__nav a:focus,
html body.galican-commerce .gal-mobile-drawer__nav a:hover,
html body.galican-commerce .gal-mobile-drawer__nav a:focus {
	color: #f4c544 !important;
}

/* Selector de idiomas dentro del drawer */
html body .gal-mobile-drawer__langs a,
html body.galican-commerce .gal-mobile-drawer__langs a {
	color: #a7afbd !important;
	text-decoration: none !important;
}
html body .gal-mobile-drawer__langs a.is-active,
html body.galican-commerce .gal-mobile-drawer__langs a.is-active {
	color: #f4c544 !important;
	background: rgba(244,197,68,.10) !important;
	border-color: rgba(244,197,68,.30) !important;
}

/* Botón cerrar (X) del drawer: SVG visible */
html body .gal-mobile-drawer__close,
html body.galican-commerce .gal-mobile-drawer__close {
	color: #f4f5f7 !important;
	background: transparent !important;
}
html body .gal-mobile-drawer__close svg,
html body.galican-commerce .gal-mobile-drawer__close svg {
	width: 20px !important;
	height: 20px !important;
	stroke: #f4f5f7 !important;
	fill: none !important;
}
html body .gal-mobile-drawer__close svg path,
html body .gal-mobile-drawer__close svg line,
html body.galican-commerce .gal-mobile-drawer__close svg path,
html body.galican-commerce .gal-mobile-drawer__close svg line {
	stroke: #f4f5f7 !important;
	fill: none !important;
	stroke-width: 1.8px !important;
}

/* Hamburguesa: SVG visible en cualquier contexto */
html body .gal-burger,
html body.galican-commerce .gal-burger {
	color: #f4f5f7 !important;
	background: transparent !important;
}
html body .gal-burger svg,
html body.galican-commerce .gal-burger svg {
	width: 22px !important;
	height: 22px !important;
	stroke: #f4f5f7 !important;
	fill: none !important;
	display: block !important;
}
html body .gal-burger svg path,
html body.galican-commerce .gal-burger svg path {
	stroke: #f4f5f7 !important;
	fill: none !important;
	stroke-width: 1.8px !important;
}

/* Título "MENÚ" arriba del drawer */
html body .gal-mobile-drawer__title,
html body.galican-commerce .gal-mobile-drawer__title {
	color: #a7afbd !important;
}

/* Backdrop: que mantenga su negro */
html body .gal-mobile-drawer__backdrop,
html body.galican-commerce .gal-mobile-drawer__backdrop {
	background: rgba(0,0,0,.55) !important;
}

/* Panel del drawer: forzar fondo oscuro (commerce a veces lo aclara) */
html body .gal-mobile-drawer__panel,
html body.galican-commerce .gal-mobile-drawer__panel {
	background: #0a1628 !important;
	color: #f4f5f7 !important;
}

/* Iconos del header siempre legibles */
html body.galican-commerce .gal-header .gal-icon-btn svg,
html body.galican-commerce .gal-header .gal-icon-btn svg path,
html body.galican-commerce .gal-header .gal-icon-btn svg circle {
	stroke: currentColor !important;
	fill: none !important;
}

/* ──────────────────────────────────────────────────────────────
 * Linus 2026-05-24 — Fix definitivo: Woodmart aplica
 *   button { padding: var(--btn-padding, 5px 20px); }
 * a TODO botón, aplastando el SVG de hamburguesa y cerrar.
 * ────────────────────────────────────────────────────────────── */

html body button.gal-burger,
html body button.gal-mobile-drawer__close,
html body button.home-burger,
html body button.home-drawer__close,
html body.galican-commerce button.gal-burger,
html body.galican-commerce button.gal-mobile-drawer__close {
	padding: 0 !important;
	--btn-padding: 0 !important;
	gap: 0 !important;
}

/* Asegurar tamaño táctil aunque algún tema apriete */
html body button.gal-burger,
html body button.home-burger,
html body.galican-commerce button.gal-burger {
	min-width: 44px !important;
	min-height: 44px !important;
	width: 44px !important;
	height: 44px !important;
	box-sizing: border-box !important;
}
html body button.gal-mobile-drawer__close,
html body button.home-drawer__close {
	min-width: 44px !important;
	min-height: 44px !important;
	width: 44px !important;
	height: 44px !important;
	box-sizing: border-box !important;
}

/* SVG dentro: no shrink, ancho fijo */
html body button.gal-burger svg,
html body button.home-burger svg,
html body.galican-commerce button.gal-burger svg {
	width: 22px !important;
	height: 22px !important;
	flex-shrink: 0 !important;
	min-width: 22px !important;
	min-height: 22px !important;
}
html body button.gal-mobile-drawer__close svg,
html body button.home-drawer__close svg {
	width: 20px !important;
	height: 20px !important;
	flex-shrink: 0 !important;
	min-width: 20px !important;
	min-height: 20px !important;
}

/* ──────────────────────────────────────────────────────────────
 * Linus 2026-05-24 — RRSS + cuenta visibles en header móvil
 * (sustituye al ocultarlas y meterlas solo en el drawer)
 * ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	/* Header actions ocupa más espacio, deja menos al logo si hace falta */
	.gal-header-actions {
		gap: 2px !important;
		flex-shrink: 0 !important;
	}

	/* Social en header: visible, formato icono solo (sin label) */
	.gal-header-actions .gal-social,
	.gal-header-actions .gal-social--header-actions {
		display: inline-flex !important;
		align-items: center;
	}
	.gal-header-actions .gal-social__label { display: none !important; }
	.gal-header-actions .gal-social__list {
		display: flex !important;
		gap: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}
	.gal-header-actions .gal-social__list li { list-style: none !important; }
	.gal-header-actions .gal-social__btn {
		width: 36px !important;
		height: 36px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important;
		--btn-padding: 0 !important;
	}
	.gal-header-actions .gal-social__btn svg {
		width: 18px !important;
		height: 18px !important;
		flex-shrink: 0 !important;
	}

	/* Cuenta visible en móvil, tamaño reducido para que quepa */
	.gal-icon-btn--account {
		display: inline-flex !important;
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		min-height: 36px !important;
	}
	.gal-icon-btn--account svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; }

	/* Carrito: mismo tamaño compacto */
	.gal-header-actions > .gal-icon-btn:not(.gal-burger):not(.gal-icon-btn--account) {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		min-height: 36px !important;
	}
	.gal-header-actions > .gal-icon-btn:not(.gal-burger):not(.gal-icon-btn--account) svg {
		width: 18px !important;
		height: 18px !important;
	}

	/* Hamburguesa: también 36 para uniformar (mantenemos tamaño táctil suficiente) */
	.gal-burger {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		min-height: 36px !important;
	}
	.gal-burger svg { width: 18px !important; height: 18px !important; }
}

/* En pantallas muy estrechas (<= 380px) reducimos aún más */
@media (max-width: 380px) {
	.gal-header-inner {
		padding-left: 8px !important;
		padding-right: 8px !important;
		gap: 4px !important;
	}
	.gal-container {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	.gal-header-actions .gal-social__btn,
	.gal-icon-btn--account,
	.gal-header-actions > .gal-icon-btn,
	.gal-burger {
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
		min-height: 32px !important;
	}
	.gal-header-actions .gal-social__btn svg,
	.gal-icon-btn--account svg,
	.gal-header-actions > .gal-icon-btn svg,
	.gal-burger svg {
		width: 16px !important;
		height: 16px !important;
	}
}

/* Quitar las RRSS y cuenta del drawer (ahora viven en el header) */
.gal-mobile-drawer__social {
	display: none !important;
}