/**
 * Identidad visual — Hierba Buena Grow
 *
 * Migrado desde "CSS adicional" del Customizer de Astra al child theme.
 * Se conservan las decisiones estéticas originales (negro + verde neón, glow,
 * tipografías Baloo 2 / Fredoka, logo con borde arcoíris). Los cambios respecto
 * del original son sólo técnicos y están comentados donde aplica.
 */

/* El @import de Google Fonts que estaba acá se movió a functions.php:
   un @import dentro de CSS bloquea el render hasta que resuelve, mientras que
   wp_enqueue_style + preconnect deja que la fuente cargue en paralelo. */

/* =========================================================================
   BASE
   ========================================================================= */

body,
.site {
	background-color: var(--hbg-negro);
	color: var(--hbg-texto);
	font-family: var(--hbg-fuente-texto);
}

h1, h2, h3, h4, h5,
.site-title,
.ast-woo-shop-archive-title {
	font-family: var(--hbg-fuente-titulo);
	font-weight: 700;
}

/* =========================================================================
   HEADER / NAVEGACIÓN
   ========================================================================= */

.site-header,
.ast-primary-header-bar,
.main-header-bar {
	background-color: var(--hbg-negro);
	border-bottom: 1px solid var(--hbg-neon);
}

/*
 * Estados del menú principal.
 *
 *   reposo  → blanco
 *   hover   → verde neón con glow y un leve empuje hacia arriba
 *   actual  → verde neón fijo, SIN subrayado
 *
 * El subrayado que había antes se sacó a pedido: la página actual se distingue
 * por el color y por el punto de abajo.
 */
.main-navigation ul li a,
.ast-header-navigation-arrow {
	color: #ffffff;
	font-family: var(--hbg-fuente-titulo);
	font-weight: 700;
	text-decoration: none;
	transition: color var(--hbg-transicion),
	            text-shadow var(--hbg-transicion),
	            transform var(--hbg-transicion);
}

.main-navigation > ul > li > a {
	position: relative;
}

/*
 * Astra pinta el menú con `.ast-builder-menu-1 … > .menu-link`, que es más
 * específico que `.main-navigation ul li a`, y usa `--ast-global-color-1` para
 * el ítem activo: de ahí salía el azul. Hay que igualarle la especificidad.
 */
.ast-builder-menu-1 .main-header-menu .menu-link:hover,
.ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link,
.main-navigation ul li a:hover,
.main-navigation ul li a:focus-visible {
	color: var(--hbg-neon);
	text-shadow: 0 0 12px rgba(57, 255, 20, 0.65);
	transform: translateY(-1px);
}

/* Página actual: verde con destello, sin subrayado ni marcador extra. */
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .menu-item.current-menu-ancestor > .menu-link,
.ast-builder-menu-1 .menu-item.current-menu-parent > .menu-link,
.ast-builder-menu-1 .current-menu-item > .ast-menu-toggle,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current-menu-parent > a {
	color: var(--hbg-neon);
	text-decoration: none;
	text-shadow: 0 0 10px rgba(57, 255, 20, 0.75),
	             0 0 22px rgba(57, 255, 20, 0.4);
}

/*
 * Compactar un poco el menú principal.
 *
 * Baloo 2 en 700 es ancha y con el interletrado por defecto los cuatro ítems se
 * comen mucho del header. Se recortan el espaciado y el padding lateral lo justo
 * para ganar aire sin que se vean apretados: el área táctil sigue holgada porque
 * el alto no se toca.
 *
 * Sólo aplica al primer nivel (`> .menu-item > .menu-link`): dentro de los
 * desplegables el interletrado normal se lee mejor.
 */
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link,
.main-navigation > ul > li > a {
	letter-spacing: -0.012em;
	padding-inline: 14px;
	/* Un par de puntos más que el default del tema, sin tocar el espaciado
	   que ya se había ajustado. */
	font-size: 1rem;
}

@media (max-width: 1100px) {
	.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link,
	.main-navigation > ul > li > a {
		padding-inline: 10px;
	}
}

/* =========================================================================
   DROPDOWN DE MENÚ
   ========================================================================= */

/*
 * Submenú de "Tienda", con la misma piel que el desplegable del buscador.
 * Se usan selectores al nivel de Astra porque los suyos son más específicos que
 * `.main-navigation ul ul`.
 */
.ast-builder-menu-1 .main-header-menu .sub-menu,
.main-navigation ul ul {
	background-color: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-neon);
	border-radius: var(--hbg-radio);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
	padding: var(--hbg-e2);
}

.ast-builder-menu-1 .main-header-menu .sub-menu .menu-link,
.main-navigation ul ul li a {
	color: var(--hbg-texto-suave);
	border-bottom: none;
	border-radius: var(--hbg-radio-sm);
	text-shadow: none; /* el glow sobre texto chico de submenú perjudica la lectura */
	transition: background-color var(--hbg-transicion), color var(--hbg-transicion);
}

.ast-builder-menu-1 .main-header-menu .sub-menu .menu-link:hover,
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-item:hover > .menu-link,
.main-navigation ul ul li a:hover,
.main-navigation ul ul li a:focus-visible {
	background-color: rgba(57, 255, 20, 0.1);
	color: var(--hbg-neon);
	text-shadow: none;
	transform: none; /* el empuje del primer nivel acá descoloca la lista */
}

.ast-builder-menu-1 .main-header-menu .sub-menu .current-menu-item > .menu-link,
.main-navigation ul ul .current-menu-item > a {
	color: var(--hbg-neon);
	background-color: rgba(57, 255, 20, 0.08);
	text-shadow: none;
}

/* Tercer nivel (subcategorías dentro de una categoría). */
.main-navigation ul ul ul {
	border-color: rgba(57, 255, 20, 0.5);
}

/* =========================================================================
   LOGO
   ========================================================================= */

/*
 * El aro de colores y el recorte circular eran del logo sticker. Con el
 * logotipo de letras el aro le dibujaba un arcoíris detrás del texto y el
 * `border-radius` le comía las esquinas.
 *
 * Estaba declarado DOS veces en este mismo archivo, en dos bloques distintos;
 * sacar sólo el primero no cambiaba nada porque el segundo lo repone.
 */
.site-logo-img img,
.custom-logo {
	background: none;
	border-radius: 0;
	padding: 0;
	/* Late cada tanto: 6s de ciclo con el pulso al principio, así el resto del
	   tiempo queda quieto y no distrae. */
	animation: hbg-latido 6s ease-in-out infinite;
	transition: transform var(--hbg-transicion), filter var(--hbg-transicion);
}

@keyframes hbg-latido {
	0%, 82%, 100% { transform: scale(1); }
	88%           { transform: scale(1.055); }
	94%           { transform: scale(0.985); }
}

.custom-logo-link:hover .custom-logo,
.site-logo-img a:hover img {
	transform: scale(1.06);
	filter: drop-shadow(0 0 14px rgba(57, 255, 20, 0.55));
	animation-play-state: paused;
}

.custom-logo-link:focus-visible {
	outline: 3px solid var(--hbg-neon);
	outline-offset: 4px;
	border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
	.site-logo-img img,
	.custom-logo {
		animation: none;
	}
}

/* =========================================================================
   BUSCADOR
   ========================================================================= */

.ast-search-menu-icon input.search-field,
input[type="search"] {
	background-color: var(--hbg-negro);
	border: 2px solid var(--hbg-neon);
	color: var(--hbg-texto);
	border-radius: var(--hbg-radio-full);
	padding-inline: var(--hbg-e4);
}

input[type="search"]::placeholder {
	color: var(--hbg-texto-tenue);
}

.ast-search-menu-icon button {
	background-color: var(--hbg-neon);
	border: none;
	color: var(--hbg-negro);
}

/* =========================================================================
   BOTONES
   ========================================================================= */

.button,
.add_to_cart_button,
.single_add_to_cart_button,
input[type="submit"],
.wp-block-button__link {
	background-color: var(--hbg-neon);
	color: var(--hbg-negro);
	font-family: var(--hbg-fuente-titulo);
	font-weight: 700;
	border: none;
	border-radius: var(--hbg-radio-sm);
	box-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
	transition: background-color var(--hbg-transicion),
	            box-shadow var(--hbg-transicion),
	            transform var(--hbg-transicion);
	/* Área táctil mínima de 44px (WCAG 2.5.5). */
	min-height: 44px;
	padding-inline: var(--hbg-e5);
}

.button:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background-color: #ffffff;
	color: var(--hbg-negro);
	box-shadow: 0 0 18px rgba(57, 255, 20, 0.9);
	transform: translateY(-2px);
}

.button:disabled,
.single_add_to_cart_button.disabled {
	background-color: var(--hbg-superficie-3);
	color: var(--hbg-texto-tenue);
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}

/* =========================================================================
   CARRITO
   ========================================================================= */

.ast-cart-menu-wrap .count {
	background-color: var(--hbg-neon);
	color: var(--hbg-negro);
	font-weight: 700;
}

/* =========================================================================
   PRECIOS
   ========================================================================= */

.woocommerce ul.products li.product .price,
.price ins {
	color: var(--hbg-neon);
	font-weight: 700;
	text-decoration: none;
}

/* Precio tachado de oferta: gris, no neón, para que el contraste comunique. */
.price del {
	color: var(--hbg-texto-tenue);
	font-weight: 500;
	opacity: 1;
}

/* =========================================================================
   SECCIONES DE HOME
   ========================================================================= */

.section-lima {
	background-color: var(--hbg-lima);
	color: var(--hbg-negro);
	padding: var(--hbg-e7) var(--hbg-e5);
}

/* Sobre lima, los links y botones invierten para mantener contraste. */
.section-lima a:not(.button) {
	color: var(--hbg-negro);
	text-decoration: underline;
}

.section-lima .button {
	background-color: var(--hbg-negro);
	color: var(--hbg-lima);
	box-shadow: none;
}

.section-lima .button:hover {
	background-color: #ffffff;
	color: var(--hbg-negro);
}

.gradient-title {
	background: linear-gradient(90deg, #ffffff 0%, var(--hbg-neon) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: var(--hbg-fuente-titulo);
	font-weight: 800;
	font-size: clamp(1.75rem, 4vw + 0.5rem, 2.5rem); /* antes 2.5rem fijo: se desbordaba en 375px */
	line-height: 1.15;
}

/* Fallback: si el navegador no soporta background-clip:text, el texto quedaría
   invisible. Esto le devuelve un color sólido. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.gradient-title {
		-webkit-text-fill-color: currentColor;
		color: var(--hbg-neon);
		background: none;
	}
}

/* =========================================================================
   FOOTER
   ========================================================================= */

.site-footer,
footer.site-footer {
	background-color: var(--hbg-negro);
	color: var(--hbg-neon);
	text-align: center;
	border-top: 1px solid var(--hbg-borde);
}

/* El aro arcoíris que iba acá se quitó junto con el de más arriba: ver el
   bloque LOGO. */

/* =========================================================================
   MEGA MENÚ DE 3 NIVELES

   Tienda → categoría → subcategoría → marcas

   Los niveles 2 y 3 se generan en PHP (inc/menu.php) y se muestran con CSS
   hover; el JS (megamenu.js) sólo agrega el retardo de salida y el volteo
   contra el borde de la pantalla. Sin JS el menú sigue funcionando.
   ========================================================================= */

/*
 * Ancho de los paneles.
 *
 * Astra le clava `width: 1000px` a TODOS los `.sub-menu`:
 *
 *     .ast-builder-menu-1 .sub-menu { width: 1000px }   → (0,2,0)
 *
 * Sale del ajuste `header-menu1-submenu-width` del Customizer. Con eso, el panel
 * de subcategorías medía 1000px y se dibujaba a `left: 100%` de otro panel de
 * 1000px: quedaba fuera de la pantalla, y por eso "no aparecía" aunque estuviera
 * en el DOM y visible. `min-width` no alcanzaba para corregirlo: hay que fijar
 * `width`, y con especificidad (0,3,0) para ganarle.
 */
.ast-builder-menu-1 .main-header-menu .hbg-mm__nivel,
.main-navigation .hbg-mm__nivel {
	width: 264px;
	min-width: 0;
	max-width: min(264px, 90vw);
	background-color: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-neon);
	border-radius: var(--hbg-radio);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.62);
	padding: var(--hbg-e2);
}

/* El primer nivel arranca pegado al ítem "Tienda", no a 1000px de ancho. */
.ast-builder-menu-1 .main-header-menu .hbg-mm.hbg-mm__nivel--categorias {
	width: 268px;
	max-width: min(268px, 92vw);
}

/*
 * APERTURA DEL PRIMER NIVEL POR TECLADO.
 *
 * El hover ya lo cubre Astra: su `menu-animation.min.css` esconde el submenú
 * con `.ast-desktop .astra-menu-animation-slide-down > .menu-item > .sub-menu`
 * (0,4,0) y lo muestra con la misma cadena más `:hover` (0,5,0). Verificado con
 * el mouse encima: el panel abre en 268x641 a (371,190), entero dentro de la
 * pantalla y sin scroll interno.
 *
 * Lo que Astra NO contempla es `:focus-within`, así que con Tab el menú
 * "Tienda" no se podía abrir; tampoco `[data-abierto]`, que es lo que usa
 * `megamenu.js` para sostener el panel mientras corre el retardo de salida.
 * Los niveles 2 y 3 ya tenían ambas cosas (ver más abajo); faltaban en el 1.
 *
 * Seis clases (0,6,0) para ganarle a la regla de ocultamiento sin `!important`
 * y sin desactivar la animación en el resto del sitio.
 */
.ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item:hover > .sub-menu,
.ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item:focus-within > .sub-menu,
.ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item[data-abierto="true"] > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/*
 * Los niveles 2 y 3 vuelan hacia el costado del ítem que los abre.
 *
 * Sobre la especificidad: Astra posiciona CUALQUIER submenú en hover con
 *
 *     .main-header-menu .menu-item:hover > .sub-menu { left: 0 }   → (0,4,0)
 *
 * Su regla de `left:100%` para submenús anidados exige `.toggled-on`, que su JS
 * sólo agrega en el menú mobile: en hover de escritorio nunca aplica. Por eso
 * los selectores de acá anteponen `.ast-builder-menu-1 .main-header-menu`, que
 * los lleva a (0,6,0) y les gana sin depender del orden de carga ni de
 * `!important`.
 */
.hbg-mm .hbg-mm__item {
	position: relative;
}

.ast-builder-menu-1 .main-header-menu .hbg-mm .hbg-mm__item > .hbg-mm__nivel,
.main-navigation .hbg-mm .hbg-mm__item > .hbg-mm__nivel {
	position: absolute;
	top: calc(var(--hbg-e2) * -1);
	left: 100%;
	right: auto;
	z-index: 2;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-6px);
	transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}

/* Se abre por hover, por foco de teclado, o porque el JS lo sostiene mientras
   corre el retardo de salida. */
.ast-builder-menu-1 .main-header-menu .hbg-mm .hbg-mm__item:hover > .hbg-mm__nivel,
.ast-builder-menu-1 .main-header-menu .hbg-mm .hbg-mm__item:focus-within > .hbg-mm__nivel,
.ast-builder-menu-1 .main-header-menu .hbg-mm .hbg-mm__item[data-abierto="true"] > .hbg-mm__nivel,
.main-navigation .hbg-mm .hbg-mm__item:hover > .hbg-mm__nivel,
.main-navigation .hbg-mm .hbg-mm__item:focus-within > .hbg-mm__nivel,
.main-navigation .hbg-mm .hbg-mm__item[data-abierto="true"] > .hbg-mm__nivel {
	left: 100%;
	right: auto;
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Volteo: si no entra a la derecha, el JS marca el <li> y sale por la izquierda. */
.ast-builder-menu-1 .main-header-menu .hbg-mm .hbg-mm__item[data-voltear="true"] > .hbg-mm__nivel,
.ast-builder-menu-1 .main-header-menu .hbg-mm .hbg-mm__item[data-voltear="true"]:hover > .hbg-mm__nivel,
.ast-builder-menu-1 .main-header-menu .hbg-mm .hbg-mm__item[data-voltear="true"][data-abierto="true"] > .hbg-mm__nivel,
.main-navigation .hbg-mm .hbg-mm__item[data-voltear="true"] > .hbg-mm__nivel {
	left: auto;
	right: 100%;
}

.ast-builder-menu-1 .main-header-menu .hbg-mm .hbg-mm__item[data-voltear="true"] > .hbg-mm__nivel {
	transform: translateX(6px);
}

.ast-builder-menu-1 .main-header-menu .hbg-mm .hbg-mm__item[data-voltear="true"]:hover > .hbg-mm__nivel,
.ast-builder-menu-1 .main-header-menu .hbg-mm .hbg-mm__item[data-voltear="true"][data-abierto="true"] > .hbg-mm__nivel {
	transform: none;
}

/*
 * Volteo VERTICAL.
 *
 * Cuando un panel largo (Semillas → Automáticas → 10 marcas, por ejemplo) se
 * pasaba del borde inferior, los ítems de abajo quedaban fuera de la pantalla y
 * sin forma de alcanzarlos. Con esta clase el panel deja de anclarse por el
 * borde superior del ítem y pasa a anclarse por el inferior, así crece hacia
 * arriba y entra completo.
 *
 * La pone `megamenu.js` sólo cuando midió que hace falta; si el panel entra
 * bien, no se toca nada y sigue abriendo hacia abajo como siempre.
 *
 * Va con un selector más específico que la regla de posición base (0,6,x) para
 * poder pisarle el `top`.
 */
.ast-builder-menu-1 .main-header-menu .hbg-mm .hbg-mm__item > .hbg-mm__nivel.hbg-mm__panel--flip-up,
.main-navigation .hbg-mm .hbg-mm__item > .hbg-mm__nivel.hbg-mm__panel--flip-up {
	top: auto;
	bottom: calc(var(--hbg-e2) * -1);
}

/* Puente invisible entre el ítem y su flyout: sin esto, el mouse cruza el hueco
   del borde y el submenú se cierra a mitad de camino. */
.hbg-mm .hbg-mm__item.hbg-mm__con-hijos > .hbg-mm__enlace::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	width: 14px;
}

.hbg-mm .hbg-mm__item[data-voltear="true"] > .hbg-mm__enlace::before {
	left: auto;
	right: 100%;
}

/* ------------------------------- ítems -------------------------------- */

.hbg-mm__encabezado {
	display: block;
	padding: var(--hbg-e2) var(--hbg-e3) 4px;
	color: var(--hbg-texto-tenue);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	pointer-events: none;
}

.ast-builder-menu-1 .main-header-menu .hbg-mm__enlace,
.main-navigation .hbg-mm__enlace {
	display: flex;
	align-items: center;
	gap: var(--hbg-e2);
	width: 100%;
	min-height: 38px;
	padding: 6px var(--hbg-e3);
	border-radius: var(--hbg-radio-sm);
	color: var(--hbg-texto-suave);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.87rem;
	font-weight: 600;
	line-height: 1.3;
	text-shadow: none;
	transition: background-color var(--hbg-transicion), color var(--hbg-transicion);
}

.ast-builder-menu-1 .main-header-menu .hbg-mm__enlace:hover,
.ast-builder-menu-1 .main-header-menu .hbg-mm__item:hover > .hbg-mm__enlace,
.main-navigation .hbg-mm__enlace:hover {
	background: rgba(57, 255, 20, 0.1);
	color: var(--hbg-neon);
	transform: none;
}

.hbg-mm__n {
	margin-inline-start: auto;
	color: var(--hbg-texto-tenue);
	font-size: 0.74rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* Flecha de "esto abre otro nivel". Va después del contador. */
.hbg-mm__flecha {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.65;
}

.hbg-mm__item[data-voltear="true"] > .hbg-mm__enlace .hbg-mm__flecha {
	transform: rotate(135deg);
}

/* `.hbg-mm__todos` se eliminó junto con el ítem "Ver todo en <categoría>". */

.hbg-mm__mas {
	color: var(--hbg-neon) !important;
	font-size: 0.8rem !important;
}

/*
 * Los paneles NO llevan scroll propio.
 *
 * Antes `.hbg-mm__nivel--marcas` tenía `max-height` + `overflow-y: auto`, y el
 * JS agregaba lo mismo en línea. Eso producía DOS barras, no una: por spec, si
 * `overflow-y` deja de ser `visible` y `overflow-x` sigue en `visible`, el
 * navegador calcula `overflow-x: auto`. Con que el contenido se pase un píxel
 * a lo ancho —el propio ancho de la barra vertical alcanza— aparece también la
 * horizontal.
 *
 * Cuando el panel no entra, `megamenu.js` lo sube o lo pasa a dos columnas.
 */

/* Dos columnas: la lista ocupa la mitad de alto y el panel duplica el ancho. */
.ast-builder-menu-1 .main-header-menu .hbg-mm__nivel.hbg-mm__panel--columnas,
.main-navigation .hbg-mm__nivel.hbg-mm__panel--columnas {
	width: 528px;
	max-width: min(528px, 94vw);
	column-count: 2;
	column-gap: var(--hbg-e3);
}

/* El encabezado ("Tipos", "Marcas") cruza las dos columnas. */
.hbg-mm__panel--columnas .hbg-mm__encabezado {
	column-span: all;
}

/* Ningún ítem debe quedar partido entre una columna y la siguiente. */
.hbg-mm__panel--columnas .hbg-mm__item {
	break-inside: avoid;
	page-break-inside: avoid;
}

/* =========================================================================
   ESPACIO SUPERIOR DEL CONTENIDO — uniforme en todo el sitio

   Astra imprime en línea:

       @media (min-width: 1200px) {
         .ast-plain-container.ast-no-sidebar #primary { margin-top: 60px }
       }

   Va con **ID**, o sea (1,2,0): ninguna cantidad de clases le gana, hay que
   usar un selector que también lleve `#primary`. Por debajo de 1200px Astra ya
   lo deja en 0, así que sólo hace falta pisar el tramo ancho.

   Antes esto vivía en tienda.css y aplicaba sólo a la ficha de producto; se
   generaliza para que Tienda, categorías, Servicios y Contacto arranquen todas
   a la misma distancia de la línea verde del header.
   ========================================================================= */

@media (min-width: 1200px) {
	.ast-plain-container.ast-no-sidebar #primary,
	.ast-separate-container.ast-no-sidebar #primary,
	.ast-narrow-container.ast-no-sidebar #primary {
		margin-top: var(--hbg-e4);
	}
}

/*
 * La portada es la excepción: el slider tiene que ir pegado al header, sin
 * ningún aire intermedio.
 */
@media (min-width: 1200px) {
	.home.ast-plain-container.ast-no-sidebar #primary {
		margin-top: 0;
	}
}