/*
 * Hotel Supply — tema. Reutiliza las mismas variables --hs-* que el plugin
 * (assets/css/main.css se carga aparte de assets/css/hotelsupply.css del
 * plugin — ambos declaran las mismas variables con :root para que coincidan
 * si alguno de los dos se desactiva). El coral (--hs-accent) es un color de
 * marca deliberado — confirmado al ver el sitio en vivo renderizado el
 * 2026-09-02, no un accidente del tema generico anterior — y v1.1.0 lo usa
 * como franja de navegacion, igual que el sitio real.
 */

:root {
	--hs-primary: #e1122a;
	--hs-primary-hover: #b80e22;
	--hs-accent: #f25f70;
	--hs-success: #25923f;
	--hs-ink: #404040;
	--hs-ink-70: #595959;
	--hs-ink-40: #999999;
	--hs-border: #e0e0e0;
	--hs-bg-alt: #f7f5f4;
	--hs-bg: #ffffff;
	--hs-radius: 4px;
	--hs-font-heading: Georgia, 'Bitter', serif;
	--hs-font-body: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

	/*
	 * Curvas de movimiento (v1.4.0) — declaradas identicas a las del plugin
	 * (assets/css/hotelsupply.css) a proposito, igual que el resto de las
	 * variables --hs-*: si alguno de los dos se desactiva, el que quede sigue
	 * teniendo sus tokens completos.
	 */
	--hs-ease-out: cubic-bezier( 0.23, 1, 0.32, 1 );
	--hs-ease-in-out: cubic-bezier( 0.77, 0, 0.175, 1 );
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var( --hs-font-body );
	color: var( --hs-ink );
	background: var( --hs-bg );
	line-height: 1.55;
}

a { color: var( --hs-primary ); }
a:hover { color: var( --hs-primary-hover ); }

img { max-width: 100%; height: auto; }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
}

/* Topbar */
.hs-topbar {
	background: var( --hs-ink );
	color: #fff;
	font-size: 0.85rem;
}
.hs-topbar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.hs-topbar__phone a { color: #fff; text-decoration: none; }
.hs-topbar__wa {
	color: #fff;
	background: var( --hs-success );
	padding: 4px 12px;
	border-radius: var( --hs-radius );
	text-decoration: none;
	font-weight: 600;
}

/* Header */
.hs-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}
.hs-header__wordmark {
	font-family: var( --hs-font-heading );
	font-weight: 700;
	color: var( --hs-primary );
	text-decoration: none;
	line-height: 1.15;
}
.hs-header__wordmark-line1 {
	display: block;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.hs-header__wordmark-line2 {
	display: block;
	font-family: var( --hs-font-body );
	font-size: 0.8rem;
	font-weight: 600;
	color: var( --hs-ink-70 );
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.hs-header__tagline {
	margin: 4px 0 0;
	font-size: 0.85rem;
	color: var( --hs-ink-70 );
}

/*
 * Franja de navegacion en coral (v1.1.0) — reemplaza el borde gris claro de
 * v1.0.0. Ver la nota al inicio del archivo sobre por que el coral es
 * intencional.
 */
.hs-header__navband {
	background: var( --hs-accent );
}
.hs-header__navband-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.hs-nav__toggle {
	display: none;
	background: none;
	border: 1px solid rgba( 255, 255, 255, 0.6 );
	border-radius: var( --hs-radius );
	padding: 10px 14px;
	cursor: pointer;
	color: #fff;
	transition: transform 120ms var( --hs-ease-out ), background-color 140ms ease;
}
/* Retroalimentacion en pointer-down — este boton solo existe en tactil. */
.hs-nav__toggle:active {
	transform: scale( 0.97 );
	background: rgba( 255, 255, 255, 0.14 );
}
.hs-nav__bars,
.hs-nav__bars::before,
.hs-nav__bars::after {
	content: '';
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
}
.hs-nav__bars {
	position: relative;
}
.hs-nav__bars::before {
	position: absolute;
	top: -6px;
	left: 0;
}
.hs-nav__bars::after {
	position: absolute;
	top: 6px;
	left: 0;
}
.hs-nav__list {
	list-style: none;
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 14px 0;
}
.hs-nav__list a {
	text-decoration: none;
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	transition: color 140ms ease;
}
@media ( hover: hover ) and ( pointer: fine ) {
	.hs-nav__list a:hover { color: var( --hs-ink ); }
}

/*
 * Submenus (v1.2.0) — defecto real confirmado en vivo el 2026-09-02: el
 * menu de WordPress trae items con hijos ("Nuestro Proceso" > "Nuestra
 * Empresa"; "Porta Menus" > Vintage/Natura/Metalix/Chic&Sleek) y v1.1.0
 * nunca daba estilo a <ul class="sub-menu">, asi que WordPress los pintaba
 * expandidos e inline, inflando la franja de navegacion completa. En
 * escritorio ahora es un dropdown al pasar el mouse; en movil, una lista
 * indentada dentro del mismo acordeon (sin un segundo nivel de toggle, para
 * mantenerlo simple).
 */
.hs-nav__list li { position: relative; }
.hs-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hs-nav__list .menu-item-has-children > a::after {
	content: '▾';
	margin-left: 6px;
	font-size: 0.7em;
	display: inline-block;
}

@media ( min-width: 721px ) {
	/*
	 * v1.4.0 — el desplegable aparecia y desaparecia de golpe. Frecuencia de
	 * uso: decenas de veces al dia (es navegacion), asi que segun el criterio
	 * de movimiento va "casi imperceptible": 150 ms, 4 px y una escala de
	 * 0.98 desde el propio disparador (transform-origin arriba a la
	 * izquierda), para insinuar de donde nace el menu en vez de que se
	 * materialice. Proposito nombrado: evitar el salto brusco y dar
	 * consistencia espacial.
	 *
	 * Herramienta: transicion + `display ... allow-discrete` + @starting-style
	 * — sin JavaScript. En navegadores sin soporte de allow-discrete, el
	 * display sigue conmutando de golpe y el desplegable se comporta
	 * exactamente como en v1.3.1: se degrada, no se rompe.
	 */
	.hs-nav__list .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		background: var( --hs-bg );
		border: 1px solid var( --hs-border );
		border-radius: 0 0 var( --hs-radius ) var( --hs-radius );
		min-width: 200px;
		padding: 8px 0;
		box-shadow: 0 8px 20px rgba( 0, 0, 0, 0.14 );
		z-index: 30;
		opacity: 0;
		transform: translateY( -4px ) scale( 0.98 );
		transform-origin: top left;
		transition: opacity 150ms var( --hs-ease-out ),
			transform 150ms var( --hs-ease-out ),
			display 150ms allow-discrete;
	}
	.hs-nav__list .sub-menu a {
		display: block;
		padding: 8px 16px;
		color: var( --hs-ink );
		font-weight: 600;
		font-size: 0.9rem;
		transition: color 140ms ease, background-color 140ms ease;
	}
	@media ( hover: hover ) and ( pointer: fine ) {
		.hs-nav__list .sub-menu a:hover {
			color: var( --hs-primary );
			background: var( --hs-bg-alt );
		}
	}
	.hs-nav__list li:hover > .sub-menu,
	.hs-nav__list li:focus-within > .sub-menu {
		display: block;
		opacity: 1;
		transform: translateY( 0 ) scale( 1 );
	}
	/* Estado de partida al montar: se sale por donde se entro. */
	@starting-style {
		.hs-nav__list li:hover > .sub-menu,
		.hs-nav__list li:focus-within > .sub-menu {
			opacity: 0;
			transform: translateY( -4px ) scale( 0.98 );
		}
	}
}

@media ( max-width: 720px ) {
	.hs-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
	/*
	 * v1.4.0 — el acordeon movil aparecia de golpe. Frecuencia: ocasional
	 * (una vez por visita, quiza dos), asi que aqui si cabe una animacion
	 * estandar: 200 ms. Misma tecnica que el desplegable de escritorio
	 * (allow-discrete + @starting-style, sin JavaScript) y misma direccion:
	 * baja desde la franja de navegacion, que es de donde cuelga.
	 * navigation.js no cambia — sigue solo conmutando la clase .is-open.
	 */
	.hs-nav__list {
		display: none;
		flex-direction: column;
		gap: 4px;
		width: 100%;
		padding: 8px 0 16px;
		opacity: 0;
		transform: translateY( -8px );
		transition: opacity 200ms var( --hs-ease-out ),
			transform 200ms var( --hs-ease-out ),
			display 200ms allow-discrete;
	}
	.hs-nav__list.is-open {
		display: flex;
		opacity: 1;
		transform: translateY( 0 );
		background: var( --hs-bg );
		margin: 0 -24px;
		padding: 12px 24px;
		border-radius: 0 0 var( --hs-radius ) var( --hs-radius );
	}
	@starting-style {
		.hs-nav__list.is-open {
			opacity: 0;
			transform: translateY( -8px );
		}
	}
	.hs-nav__list.is-open a { color: var( --hs-ink ); }
	.hs-nav__list.is-open a:hover { color: var( --hs-primary ); }
	.hs-nav__list .sub-menu {
		padding-left: 16px;
		margin: 4px 0 8px;
		border-left: 2px solid var( --hs-border );
	}
	.hs-nav__list .sub-menu a {
		font-size: 0.85rem;
		padding: 4px 0;
	}
}

/* Espacio para la barra fija movil del plugin (v1.1.0) — ver functions.php */
@media ( max-width: 720px ) {
	body.hs-has-sticky-bar {
		padding-bottom: 56px;
	}
}

/* Shared button (mirrors plugin's .hs-btn in case the plugin is inactive) */
.hs-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var( --hs-radius );
	font-weight: 700;
	text-decoration: none;
	background: var( --hs-primary );
	color: #fff;
	transition: background-color 160ms ease, transform 120ms var( --hs-ease-out );
}
.hs-btn:active { transform: scale( 0.97 ); }
.hs-btn--wa { background: var( --hs-success ); }
@media ( hover: hover ) and ( pointer: fine ) {
	.hs-btn--wa:hover { background: #1e7a34; color: #fff; }
}

/* Mismo criterio en el CTA de WhatsApp de la barra superior. */
.hs-topbar__wa {
	transition: background-color 160ms ease, transform 120ms var( --hs-ease-out );
}
.hs-topbar__wa:active { transform: scale( 0.97 ); }
@media ( hover: hover ) and ( pointer: fine ) {
	.hs-topbar__wa:hover { background: #1e7a34; }
}

/*
 * Foco visible (v1.4.0) — el tema no tenia ninguno propio, asi que quien
 * navega con teclado dependia del anillo por defecto del navegador, que
 * sobre la franja coral casi no se ve. Se pinta una sola vez para todo lo
 * enfocable en lugar de repetirlo control por control.
 */
:focus-visible {
	outline: 2px solid var( --hs-primary );
	outline-offset: 2px;
	border-radius: var( --hs-radius );
}
.hs-header__navband :focus-visible,
.hs-topbar :focus-visible {
	outline-color: #fff;
}

.hs-main { max-width: 1200px; margin: 0 auto; padding: 0 24px 48px; }
.hs-shop-link { text-align: center; padding: 24px 0 48px; }

/*
 * Contenido real de la pagina "Home" (v1.2.0) — banner de MasterSlider,
 * texto de introduccion, cualquier cosa que el equipo edite ahi. Sin
 * padding lateral propio para que un banner a ancho completo (como el
 * master-slider-parent que ya trae su propio max-width inline) no quede
 * encajonado dos veces.
 */
.hs-front__page-content {
	margin: 0 0 32px;
}
.hs-front__page-content > p:first-child {
	max-width: 1120px;
	margin: 0 auto 16px;
	padding: 0 24px;
	color: var( --hs-ink-70 );
}
.hs-front__page-content .master-slider-parent {
	margin: 0 auto;
}

.hs-article__title {
	font-family: var( --hs-font-heading );
	color: var( --hs-primary );
}
.hs-article__thumb img { border-radius: var( --hs-radius ); margin-bottom: 16px; }

/* Footer */
.hs-footer {
	background: var( --hs-bg-alt );
	border-top: 1px solid var( --hs-border );
	margin-top: 48px;
}
.hs-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 24px;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 24px;
}
.hs-footer__wordmark {
	font-family: var( --hs-font-heading );
	font-size: 1.2rem;
	color: var( --hs-primary );
	font-weight: 700;
	margin: 0 0 8px;
}
.hs-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hs-footer__menu a {
	text-decoration: none;
	color: var( --hs-ink );
}
.hs-footer__legal {
	border-top: 1px solid var( --hs-border );
	padding: 16px 24px;
	font-size: 0.8rem;
	color: var( --hs-ink-40 );
	max-width: 1200px;
	margin: 0 auto;
}
.hs-footer__legal a { color: var( --hs-ink-40 ); text-decoration: underline; }

/*
 * WooCommerce loop grid (light touch — WooCommerce's own markup does most
 * of the work). v1.3.1 — Oscar senalo que la imagen principal se veia
 * chica en el listado de productos dentro de una categoria/linea (p. ej.
 * /product-category/porta-menus/natura/): columnas mas anchas (220px ->
 * 280px) y una regla explicita para la imagen (antes no tenia ninguna,
 * dependia del tamano que WooCommerce trajera de fabrica). El plugin
 * (HSE_Woo::bigger_loop_image_size) sube en paralelo el tamano registrado
 * de 'woocommerce_thumbnail' de 300x300 a 450x450 para que haya
 * resolucion real detras de este tamano mas grande en fotos nuevas.
 */
/*
 * v1.5.3 — el hueco vacio de la primera celda. WooCommerce trae un clearfix
 * de la epoca de los floats: `ul.products::before/::after{content:" ";
 * display:table}`. Con el <ul> en `display:grid` esos dos pseudo-elementos
 * dejan de ser un clearfix y se convierten en DOS ITEMS de la reticula, que
 * se comen la primera celda y una de la ultima fila. Eso es el hueco que se
 * veia arriba a la izquierda de "Productos relacionados": no faltaba un
 * producto, sobraba un pseudo-elemento. Con la reticula el clearfix ya no
 * hace falta para nada.
 */
ul.products::before,
ul.products::after {
	content: none;
}

ul.products {
	display: grid !important;
	/*
	 * v1.5.2 — el ancho minimo de columna llega como variable desde el
	 * plugin (Ajustes -> Catalogo). Antes el plugin repetia esta misma regla
	 * con la misma especificidad y, como el tema carga despues, ganaba el
	 * tema: el ajuste del panel no hacia nada. No se notaba porque los dos
	 * defaults valian 280. Con la variable el valor tiene un solo dueno —el
	 * plugin— y la regla otro —el tema—, sin empate posible. El 280 de aqui
	 * es el respaldo para cuando el plugin no esta activo.
	 */
	grid-template-columns: repeat( auto-fill, minmax( var( --hs-loop-min, 280px ), 1fr ) );
	gap: 28px;
	list-style: none;
	padding: 0;
}
/*
 * v1.5.1 — LA razon real de que las cajas de producto salieran diminutas.
 * WooCommerce reparte su listado con floats y porcentajes
 * (`li.product { float: left; width: 30.75% }`, y 22.05% con la clase
 * columns-4 de los relacionados). Al poner `display:grid` en el <ul>, esa
 * anchura en porcentaje deja de medirse contra la fila y pasa a medirse
 * contra la CELDA: cada producto acababa ocupando un 22-30% de su propia
 * celda. Medido en vivo el 2026-09-02 en la ficha de producto: celda de
 * 365 px con la caja dentro a 81 px.
 *
 * En v1.3.1 se leyo el sintoma ("las imagenes se ven chicas") como un
 * problema de tamano y se ensancharon las celdas; ayudo un poco —celdas mas
 * grandes, 30% mas grande— pero nunca toco la causa. Esto si.
 *
 * Va con !important porque los selectores de WooCommerce
 * (`.woocommerce ul.products.columns-4 li.product`) son mas especificos que
 * cualquier cosa razonable desde aqui, y son varias clases de columnas.
 */
ul.products li.product {
	float: none !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	clear: none !important;
	border: 1px solid var( --hs-border );
	border-radius: var( --hs-radius );
	padding: 16px;
	text-align: center;
}
ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var( --hs-radius );
	margin-bottom: 12px;
}

/*
 * Tarjeta de producto en el listado (v1.4.0) — misma gramatica que las
 * tarjetas de linea del plugin (.hs-line-card): el borde se tine y la
 * tarjeta sube 2 px al pasar el puntero. Proposito: indicar que la tarjeta
 * completa es pulsable. Consistencia espacial entre las dos cuadriculas del
 * sitio, que hasta v1.3.1 se comportaban distinto sin razon.
 */
ul.products li.product {
	transition: border-color 160ms ease, transform 160ms var( --hs-ease-out );
}
@media ( hover: hover ) and ( pointer: fine ) {
	ul.products li.product:hover {
		border-color: var( --hs-primary );
		transform: translateY( -2px );
	}
}

/*
 * Tipografia (v1.4.0) — el tema no daba ningun estilo a los encabezados, asi
 * que heredaban el interlineado de 1.55 del cuerpo. Segun el criterio del
 * grupo el interlineado va al reves que el tamano (apretado en titulos,
 * holgado en cuerpo) y el tracking depende del tamano (negativo en los
 * grandes, cerca de 0 en el cuerpo). Un valor fijo para todo esta mal en
 * algun sitio. No se toca el color: los titulos de producto de WooCommerce
 * ya heredan el rojo del enlace y cambiarlo seria un cambio de diseno, no de
 * tipografia.
 */
h1, h2, h3 {
	font-family: var( --hs-font-heading );
	margin: 0 0 16px;
}
h1 { line-height: 1.15; letter-spacing: -0.02em; }
h2 { line-height: 1.2; letter-spacing: -0.015em; }
h3 { line-height: 1.3; letter-spacing: -0.01em; }
h4, h5, h6 { line-height: 1.35; letter-spacing: 0; }

/*
 * Preferencias del sistema (v1.4.0) — se publican con el movimiento, no
 * despues. Menos y mas suave, no cero: los desplegables siguen apareciendo
 * y desapareciendo (la opacidad informa), pero sin desplazamiento ni escala.
 */
@media ( prefers-reduced-motion: reduce ) {
	.hs-nav__list,
	.hs-nav__list .sub-menu,
	.hs-nav__toggle,
	.hs-btn,
	.hs-topbar__wa,
	ul.products li.product {
		transition-duration: 1ms;
	}
	.hs-nav__list,
	.hs-nav__list.is-open,
	.hs-nav__list .sub-menu,
	.hs-nav__list li:hover > .sub-menu,
	.hs-nav__list li:focus-within > .sub-menu,
	.hs-nav__toggle:active,
	.hs-btn:active,
	.hs-topbar__wa:active,
	ul.products li.product:hover {
		transform: none;
	}
}

@media ( prefers-reduced-transparency: reduce ) {
	.hs-nav__toggle {
		border-color: #fff;
	}
	.hs-nav__toggle:active {
		background: var( --hs-primary-hover );
	}
}

@media ( prefers-contrast: more ) {
	.hs-nav__toggle {
		border-color: #fff;
		border-width: 2px;
	}
	.hs-nav__list .sub-menu {
		border-color: var( --hs-ink );
	}
	ul.products li.product {
		border-color: var( --hs-ink-70 );
	}
}

/*
 * Barra lateral del blog (v1.5.0). El ancho y el lado los decide el CSS del
 * Personalizador (inc/customizer.php); aqui solo va la piel, para que
 * cambiar de lado no obligue a tocar dos archivos.
 */
.hs-sidebar__widget {
	border: 1px solid var( --hs-border );
	border-radius: var( --hs-radius );
	padding: 20px;
	margin-bottom: 24px;
}
.hs-sidebar__title {
	font-family: var( --hs-font-heading );
	font-size: 1.05rem;
	margin: 0 0 12px;
}
.hs-sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hs-sidebar li {
	padding: 4px 0;
	border-bottom: 1px solid var( --hs-border );
}
.hs-sidebar li:last-child { border-bottom: 0; }

/*
 * Productos relacionados (v1.5.1). Aqui la imagen NO se recorta a cuadrado
 * como en el listado: se muestra completa y con su proporcion real, que es
 * lo que pidio Oscar. El ancho de estas cajas lo pone el plugin (Ajustes ->
 * Catalogo -> Ancho de "Productos relacionados"), igual que el resto de las
 * medidas del catalogo.
 */
.related ul.products,
.up-sells ul.products,
.cross-sells ul.products {
	grid-template-columns: repeat( auto-fill, minmax( var( --hs-related-min, 350px ), 1fr ) );
}

/*
 * La foto se ajusta DENTRO de la caja: `contain` la escala hasta que quepa
 * entera a lo ancho y a lo alto, conservando su proporcion. Nunca se recorta
 * ni se deforma, aunque las fotos vengan en formatos distintos — que es el
 * caso aqui (unas apaisadas, otras casi cuadradas).
 */
.related ul.products li.product img,
.up-sells ul.products li.product img,
.cross-sells ul.products li.product img {
	width: 100%;
	height: var( --hs-related-img-h, 300px );
	aspect-ratio: auto;
	object-fit: contain;
}

/*
 * v1.5.3 — alto minimo de la tarjeta (Ajustes -> Catalogo -> "Alto de la
 * caja en relacionados"). Es min-height y no height a proposito: con height
 * fijo, un nombre de producto de dos lineas empujaria el boton fuera de la
 * caja. Con min-height todas las tarjetas arrancan igual de altas —los
 * botones quedan alineados— y la que necesite mas, crece. El respaldo es 0,
 * que deja el comportamiento automatico de siempre.
 */
.related ul.products li.product,
.up-sells ul.products li.product,
.cross-sells ul.products li.product {
	min-height: var( --hs-related-box-h, 0px );
}

/*
 * Pagina de error 404 (v1.6.2). Centrada y corta a proposito: lo que importa
 * son las salidas (buscador, lineas, WhatsApp), no el mensaje de error. El
 * numero grande va con aria-hidden en la plantilla — es decoracion, y quien
 * usa lector de pantalla no gana nada oyendo "cuatrocientos cuatro".
 */
.hs-404 {
	max-width: 640px;
	margin: 0 auto;
	padding: 48px 0 64px;
	text-align: center;
}
.hs-404__code {
	font-family: var( --hs-font-heading );
	font-size: 4rem;
	line-height: 1;
	margin: 0 0 8px;
	color: var( --hs-ink-40 );
}
.hs-404__lede {
	color: var( --hs-ink-70 );
	margin: 0 0 24px;
}
.hs-404__search {
	margin: 0 0 32px;
}
.hs-404__search form {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}
.hs-404__search input[type="search"] {
	flex: 1 1 240px;
	max-width: 360px;
	padding: 10px 14px;
	border: 1px solid var( --hs-border );
	border-radius: var( --hs-radius );
	font: inherit;
}
.hs-404__search input[type="submit"],
.hs-404__search button[type="submit"] {
	padding: 10px 20px;
	border: 0;
	border-radius: var( --hs-radius );
	background: var( --hs-primary );
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}
.hs-404__search label { display: block; }
.hs-404__subtitle {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --hs-ink-70 );
	margin: 0 0 12px;
}
.hs-404__links {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: center;
}
.hs-404__links a {
	font-weight: 700;
	text-decoration: none;
}
.hs-404__cta {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
}