/**
 * Ficha de producto, en paridad con el prototipo aprobado
 * (`_project/prototipo/producto.html`, `_project/prototipo/css/style.css`
 * reglas `.product-detail`, `.product-gallery`, `.price-box`, etc.).
 */

.ace-product-detail {
	align-items: start;
	display: grid;
	gap: var(--wp--preset--spacing--50, 2rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem);
}

@media (max-width: 56.25rem) {
	.ace-product-detail {
		gap: var(--wp--preset--spacing--40, 1.5rem);
		grid-template-columns: minmax(0, 1fr);
		/*
		 * Sin aire antes de la galeria en movil -pedido de Adriano,
		 * 23/09/2026-: la foto tiene que arrancar pegada arriba de la
		 * pantalla. En escritorio se mantiene el margen de siempre.
		 */
		margin-block-start: 0;
	}

	/*
	 * `<main>` (`templates/single-product.html`) trae 48px de aire arriba
	 * fijo en cualquier ancho (`padding-top`), mas otros 24px que WordPress
	 * suma solo por ser el bloque de en medio entre la cabecera y el pie
	 * (`margin-block-start`, el espaciado automatico entre bloques del sitio
	 * -"block gap"-, no viene de este tema). En movil, para esta ficha
	 * puntual, los dos se anulan -la foto es lo primero que se ve, pegada
	 * arriba, sin ningun aire-. `!important` porque los dos vienen de un
	 * `style` en linea del bloque, que pesa mas que una regla de hoja de
	 * estilos comun.
	 */
	body.single-product main.wp-block-group {
		margin-block-start: 0 !important;
		padding-top: 0 !important;
	}
}

/*
 * En tablet y escritorio, la mitad del aire de siempre (24px en vez de
 * 48px) entre la cabecera y la ficha -pedido de Adriano, 23/09/2026-.
 */
@media (min-width: 56.25rem) {
	body.single-product main.wp-block-group {
		padding-top: 1.5rem !important;
	}
}

/* ---------- Galeria ---------- */

.ace-product-detail__gallery {
	min-inline-size: 0;
}

.ace-product-detail__main {
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--base-alt, #f1f0ee);
	border-radius: var(--wp--preset--border-radius--large, 1rem);
	overflow: hidden;
	position: relative;
}

/*
 * En movil la foto ocupa el ancho completo de la pantalla (no el ancho del
 * contenido, mas angosto): cancela exactamente el aire lateral que
 * `theme.json` le pone a todo el sitio (`--wp--custom--gutter`, la misma
 * variable en cualquier ancho) en vez de calcular contra el viewport -ese
 * calculo se rompe aca porque la galeria es un item de grilla, no un hijo
 * directo del contenedor centrado-. Sin `border-radius` en este ancho: una
 * esquina redondeada pegada al borde de la pantalla se ve como un error de
 * recorte, no como diseño. Va despues de las reglas base de arriba a
 * proposito: pesan lo mismo (una sola clase), asi que la que este mas abajo
 * en el archivo es la que gana.
 */
@media (max-width: 56.25rem) {
	.ace-product-detail__gallery {
		inline-size: calc(100% + var(--wp--custom--gutter) * 2);
		margin-inline: calc(var(--wp--custom--gutter) * -1);
	}

	.ace-product-detail__main {
		border-radius: 0;
	}
}

/*
 * Riel del carrusel: una foto por pantalla, `scroll-snap` la deja encajada
 * justo al soltar el dedo (no a mitad de camino entre dos fotos), igual que
 * el carrusel de "Tambien te puede interesar" (`carousel.css`). El
 * navegador resuelve el arrastre con el dedo solo -no hace falta JS para
 * el gesto en si, solo para sincronizar el chip y las miniaturas despues.
 */
.ace-product-detail__track {
	block-size: 100%;
	display: flex;
	inline-size: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.ace-product-detail__track::-webkit-scrollbar {
	display: none;
}

.ace-product-detail__slide {
	block-size: 100%;
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.ace-product-detail__main-img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
}

/*
 * Chip "1/2": esquina inferior derecha, fondo oscuro semitransparente para
 * quedar legible sobre cualquier foto sin tapar el producto -mismo lenguaje
 * "suave" que ya usan los iconos flotantes de la tarjeta del catalogo en
 * celular.
 */
.ace-product-detail__counter {
	background: rgba(0, 0, 0, 0.55);
	border-radius: var(--wp--preset--border-radius--pill, 999px);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	inset-block-end: 0.75rem;
	inset-inline-end: 0.75rem;
	padding-block: 0.25rem;
	padding-inline: 0.625rem;
	position: absolute;
}

/*
 * Mismo chip que el sello "Oferta"/"-15%" de la tarjeta del catalogo
 * (`.ace-product-card__badge`, `woocommerce.css`) -pedido de Adriano,
 * 23/09/2026: rojo de marca, rectangulo apenas curvado, no una pildora-.
 * `--pc-primary` esta disponible aca porque el body de la ficha de producto
 * tiene `.woocommerce-page` (ver el bloque de tokens mas arriba en
 * `woocommerce.css`).
 *
 * Esquina inferior izquierda en celular, igual que la tarjeta: ahi los
 * botones de favorito/compartir flotan arriba a la derecha de la foto
 * (`.ace-product-detail__actions-row--photo`) y el sello competiria con
 * ellos si tambien fuera arriba. En tablet/escritorio esos botones se van
 * de la foto (pasan junto al nombre), asi que el sello sube a la esquina
 * superior izquierda -pedido de Adriano, 23/09/2026, segunda vuelta-.
 */
.ace-product-detail__badge {
	background: var(--pc-primary, #ce2731);
	border-radius: 4px;
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 500;
	inset-block-end: 0.75rem;
	inset-inline-start: 0.75rem;
	letter-spacing: 0.03em;
	padding-block: 0.25rem;
	padding-inline: 0.625rem;
	position: absolute;
	text-transform: uppercase;
}

@media (min-width: 56.25rem) {
	.ace-product-detail__badge {
		inset-block-end: auto;
		inset-block-start: 0.75rem;
	}
}

.ace-product-detail__thumbs {
	display: flex;
	gap: 0.625rem;
	margin-block-start: 0.625rem;
}

.ace-product-detail__thumb {
	background: none;
	block-size: 4.5rem;
	border: 2px solid transparent;
	border-radius: 0.5rem;
	cursor: pointer;
	flex-shrink: 0;
	inline-size: 4.5rem;
	overflow: hidden;
	padding: 0;
}

.ace-product-detail__thumb img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
}

.ace-product-detail__thumb.is-active {
	border-color: var(--wp--preset--color--accent, #3f4a5a);
}

/* ---------- Informacion ---------- */

.ace-product-detail__info {
	min-inline-size: 0;
}

.ace-product-detail__name {
	font-size: var(--wp--preset--font-size--x-large, 1.75rem);
	line-height: 1.2;
	margin-block: 0.375rem 0.25rem;
}

/*
 * En tablet y escritorio, nombre y favorito/compartir en el mismo renglon
 * -pedido de Adriano, 23/09/2026-: el nombre crece y empuja los botones a
 * la derecha (`justify-content: space-between`). En celular esos botones
 * viven flotando sobre la foto (`.ace-product-detail__actions-row--photo`),
 * asi que la copia de aca (dentro de `.title-row`) se esconde; el nombre
 * sigue mostrandose igual, en su propio renglon, porque no esta escondido
 * el contenedor entero, solo esta copia de los botones.
 */
.ace-product-detail__title-row .ace-product-detail__actions-row {
	display: none;
}

@media (min-width: 56.25rem) {
	.ace-product-detail__title-row {
		align-items: center;
		display: flex;
		gap: 0.75rem;
		justify-content: space-between;
	}

	.ace-product-detail__title-row .ace-product-detail__actions-row {
		display: flex;
	}

	.ace-product-detail__name {
		margin-block: 0;
	}
}

.ace-product-detail__price-box {
	background: var(--wp--preset--color--base-alt, #f1f0ee);
	border-radius: var(--wp--preset--border-radius--medium, 0.75rem);
	margin-block: 0.875rem;
	padding: 0.875rem 1rem;
}

.ace-product-detail__price {
	font-size: var(--wp--preset--font-size--x-large, 1.75rem);
	font-weight: 600;
}

.ace-product-detail__price del {
	color: var(--wp--preset--color--contrast-muted, #6b6b6b);
	font-size: 1rem;
	font-weight: 400;
	margin-inline-end: 0.5rem;
}

.ace-product-detail__price ins {
	text-decoration: none;
}

.ace-product-detail__stock {
	align-items: center;
	color: var(--wp--preset--color--success, #2e7d32);
	display: flex;
	font-size: 0.875rem;
	gap: 0.4rem;
	margin-block-start: 0.5rem;
}

.ace-product-detail__stock-dot {
	background: currentColor;
	block-size: 0.5rem;
	border-radius: 999px;
	flex-shrink: 0;
	inline-size: 0.5rem;
}

.ace-product-detail__stock--out {
	color: var(--wp--preset--color--contrast-muted, #6b6b6b);
}

.ace-product-detail__consult {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0;
}

.ace-product-detail__variant-group,
.ace-product-detail__variations {
	margin-block-end: 0.875rem;
}

.ace-product-detail__variant-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	margin-block-end: 0.5rem;
}

.ace-product-detail__variant-chip {
	border: 1.5px solid var(--wp--preset--color--accent, #3f4a5a);
	border-radius: var(--wp--preset--border-radius--pill, 999px);
	color: var(--wp--preset--color--accent, #3f4a5a);
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 500;
	padding-block: 0.375rem;
	padding-inline: 0.875rem;
}

.ace-product-detail__qty-row {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	margin-block: 0.875rem;
}

.ace-product-detail__qty {
	align-items: center;
	border: 1.5px solid var(--wp--preset--color--hairline, #e2e1de);
	border-radius: var(--wp--preset--border-radius--pill, 999px);
	display: flex;
	min-block-size: 3rem;
	padding-inline: 0.375rem;
}

.ace-product-detail__qty button {
	align-items: center;
	background: none;
	block-size: 2.25rem;
	border: 0;
	cursor: pointer;
	display: flex;
	inline-size: 2.25rem;
	justify-content: center;
}

/*
 * Mismo "icon-sm" (18px) que usa el resto del sitio para +/-, el carrito del
 * boton de agregar y favoritos/compartir. Sin esto el icono generico
 * `.ace-icon` (22px por defecto, foundations.css) tironea de mas contra un
 * boton chico -y sin ESA base tampoco, quedaba directamente sin tamano.
 */
.ace-product-detail__qty .ace-icon,
.ace-product-detail__add .ace-icon,
.ace-product-detail__fav .ace-icon,
.ace-product-detail__share .ace-icon {
	block-size: 1.125rem;
	inline-size: 1.125rem;
}

.ace-product-detail__qty-value {
	font-weight: 600;
	min-inline-size: 1.5rem;
	text-align: center;
}

.ace-product-detail__add {
	flex: 1;
	gap: 0.5rem;
}

.ace-product-detail__actions-row {
	display: flex;
	flex-shrink: 0;
	gap: 0.5rem;
}

.ace-product-detail__fav,
.ace-product-detail__share {
	align-items: center;
	background: var(--wp--preset--color--base-alt, #f1f0ee);
	block-size: 2.25rem;
	border: 0;
	border-radius: var(--wp--preset--border-radius--pill, 999px);
	color: var(--wp--preset--color--contrast-alt, #3a3a3a);
	cursor: pointer;
	display: flex;
	inline-size: 2.25rem;
	justify-content: center;
}

/*
 * Corazon marcado: rojo de marca sobre fondo rosado y con el corazon relleno,
 * el mismo lenguaje que el corazon de las tarjetas del catalogo (mismo rojo y
 * mismo rosado). Antes pasaba de gris a un gris azulado casi igual y no se
 * notaba que estaba guardado (CR-04, C16).
 */
.ace-product-detail__fav.is-active {
	background: #fbe9ea;
	color: var(--pc-primary, #ce2731);
}

.ace-product-detail__fav.is-active .ace-icon {
	fill: currentColor;
}

/*
 * Dos copias de los mismos botones -pedido de Adriano, 23/09/2026- (ver el
 * comentario en `content-single-product.php`, donde se arman una sola vez):
 * en celular flotan sobre la foto, encolumnados en la esquina superior
 * derecha; en tablet y escritorio quedan como ya estaban, en fila junto al
 * nombre. Mobile-first: la version sobre la foto es la que se ve por
 * defecto, y a partir de 56.25rem (900px, el mismo ancho en el que la
 * galeria deja de ser columna unica) se invierte cual de las dos se ve.
 */
.ace-product-detail__actions-row--photo {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	inset-block-start: 0.75rem;
	inset-inline-end: 0.75rem;
	position: absolute;
	z-index: 2;
}

/*
 * Con el circulo de fondo blanco, igual que en tablet/escritorio -pedido de
 * Adriano, 23/09/2026, corrige el circulo transparente con sombra que se
 * probo primero-: ya traen ese estilo de `.ace-product-detail__fav,
 * .ace-product-detail__share` mas arriba, esta copia no necesita nada
 * propio.
 */

.ace-product-detail__top {
	display: none;
}

@media (min-width: 56.25rem) {
	.ace-product-detail__actions-row--photo {
		display: none;
	}

	.ace-product-detail__top {
		display: flex;
	}
}

.ace-product-detail__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-block-end: 0.875rem;
}

.ace-product-detail__trust-item {
	align-items: center;
	color: var(--wp--preset--color--contrast-alt, #3a3a3a);
	display: inline-flex;
	font-size: 0.8125rem;
	gap: 0.375rem;
}

.ace-product-detail__trust-item .ace-icon {
	block-size: 1.125rem;
	color: var(--wp--preset--color--success, #2e7d32);
	flex-shrink: 0;
	inline-size: 1.125rem;
}

.ace-product-detail__whatsapp {
	color: var(--wp--preset--color--contrast-alt, #3a3a3a);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	margin-block-end: 1rem;
	text-decoration: none;
}

.ace-product-detail__whatsapp:hover {
	text-decoration: underline;
}

.ace-product-detail__whatsapp .ace-icon {
	color: var(--wp--preset--color--success, #2e7d32);
	flex-shrink: 0;
	inline-size: 1.125rem;
}

/*
 * Descripcion recortada a unos pocos renglones (`is-expanded` la
 * destapa): un parrafo largo no debe empujar el resto de la columna
 * -precio, boton, WhatsApp- fuera de la vista sin pedirlo.
 */
.ace-product-detail__description {
	border-block-start: 1px solid var(--wp--preset--color--hairline, #e2e1de);
	margin-block-start: 0.875rem;
	padding-block-start: 0.875rem;
}

.ace-product-detail__description-title {
	font-size: 0.8125rem;
	font-weight: 500;
	margin: 0 0 0.375rem;
}

.ace-product-detail__description-text {
	color: var(--wp--preset--color--contrast-alt, #3a3a3a);
	display: -webkit-box;
	font-size: 0.875rem;
	line-height: 1.5;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.ace-product-detail__description-text.is-expanded {
	display: block;
	-webkit-line-clamp: unset;
}

.ace-product-detail__description-toggle {
	background: none;
	border: 0;
	color: var(--wp--preset--color--accent, #3f4a5a);
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-block-start: 0.375rem;
	padding: 0;
}

.ace-product-detail__description-toggle:hover {
	text-decoration: underline;
}

/* ---------- Formulario nativo de variaciones (producto variable) ----------
 * Solo un producto variable en el catalogo hoy; se reutiliza el formulario
 * de WooCommerce (recalcula precio/stock/imagen por Ajax) y se estiliza por
 * encima en vez de reconstruirlo. Ver nota en content-single-product.php.
 */
.ace-product-detail__variations .variations {
	border-collapse: collapse;
	inline-size: 100%;
	margin-block-end: 0.875rem;
}

.ace-product-detail__variations .variations td {
	padding-block: 0.375rem;
}

.ace-product-detail__variations .variations select {
	border: 1.5px solid var(--wp--preset--color--hairline, #e2e1de);
	border-radius: 0.5rem;
	font: inherit;
	/*
	 * `font: inherit` trae tambien el interlineado general del sitio
	 * (--line-height--base, 1.6) heredado de la fila de la tabla. Ese
	 * interlineado mide mas alto que los 2.75rem fijos del campo, y un
	 * <select> nativo no crece para hacerle lugar: recorta el renglon en
	 * vez de agrandarse, dejando tapada la mitad de abajo de las letras
	 * (mas visible en Safari/iOS que en Chrome). Se fija un interlineado
	 * propio, chico, para que el texto entre entero en la caja.
	 */
	line-height: 1.2;
	min-block-size: 2.75rem;
	/*
	 * WooCommerce (forms.css) dibuja su propia flecha con
	 * background-position: calc(100% - .5em) y reserva padding-right: 3em
	 * para que el texto no quede debajo. Antes esta regla ponia el mismo
	 * relleno a los dos lados (padding-inline), lo que le ganaba en cascada
	 * al padding-right de WooCommerce y dejaba el texto tapado por la
	 * flecha -se veia "cortado". Ahora se fija cada lado por separado.
	 */
	padding-inline-start: 0.625rem;
	padding-inline-end: 2.5rem;
	inline-size: 100%;
}

/*
 * Mismo valor que `.ace-btn--dark` (foundations.css), calcado del
 * prototipo: gris claro en reposo, se invierte a gris oscuro con el mouse
 * encima. No es `.ace-btn` porque WooCommerce arma este boton por su
 * cuenta -formulario de variaciones, ver content-single-product.php- y no
 * acepta agregarle clases propias.
 */
.ace-product-detail__variations .single_add_to_cart_button {
	align-items: center;
	background: var(--wp--preset--color--hairline, #e2e1de);
	border: 0;
	border-radius: var(--wp--preset--border-radius--pill, 999px);
	color: var(--wp--preset--color--contrast-alt, #3a3a3a);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 600;
	min-block-size: var(--wp--custom--target--min, 2.75rem);
	padding-inline: 1.5rem;
	text-decoration: none;
}

.ace-product-detail__variations .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--contrast-alt, #3a3a3a);
	color: var(--wp--preset--color--surface, #fff);
}

/*
 * WooCommerce agrega la clase `disabled` mientras no se eligio una
 * variante todavia (no puede saber el precio/stock hasta entonces): sin
 * este estilo propio, el boton pasaba al gris por defecto del navegador en
 * vez de una version atenuada del mismo boton.
 */
.ace-product-detail__variations .single_add_to_cart_button.disabled {
	background: var(--wp--preset--color--base-alt, #f1f0ee);
	color: var(--wp--preset--color--contrast-muted, #6b6b6b);
	cursor: not-allowed;
}

.ace-product-detail__variations .single_add_to_cart_button.disabled:hover {
	background: var(--wp--preset--color--base-alt, #f1f0ee);
	color: var(--wp--preset--color--contrast-muted, #6b6b6b);
}

/* ---------- Relacionados: debajo de las opiniones, carrusel del tema ----------
 * Pedido de Adriano del 24/08: en vez de convivir al lado de las
 * opiniones, "Tambien te puede interesar" pasa a su propio renglon
 * completo, debajo. Corregido el 28/08/2026: usa el mismo carrusel
 * generico y reutilizable del resto del sitio (`inc/carousel.php`,
 * `woocommerce/single-product/related.php`) en vez de una fila de scroll
 * armada aparte -asi tiene las mismas flechas, el mismo avance automatico
 * y la misma regla de "asomar la tarjeta siguiente" en movil/tablet que ya
 * aprobo Adriano para el carrusel de categorias de /ofertas/. El riel base
 * (`.ace-carousel__track`) ya trae `display:flex`, `gap` y `overflow-x`;
 * aca solo se fija el ancho de CADA tarjeta. Mismo criterio de ancho que ya
 * se uso para el problema de las tres columnas: `.ace-product-card` (el
 * mismo elemento que `li.product`) trae `width:100% !important` para
 * llenar su casilla en la grilla del catalogo, y hay que superarla con la
 * misma fuerza para que la tarjeta respete el ancho del carrusel en vez de
 * ocupar el carril entero.
 */
.related.products {
	margin-block-start: var(--wp--preset--spacing--60, 2.5rem);
}

.related.products h2 {
	font-size: var(--wp--preset--font-size--large, 1.375rem);
	/*
	 * Menos que antes (0.5rem, no 1rem): el propio riel ya suma su aire de
	 * sobra para la sombra de la tarjeta (ver `--ace-carousel-shadow-pad`
	 * mas abajo); sumar el margen viejo completo ademas de ese aire dejaba
	 * un hueco doble entre el titulo y la primera tarjeta.
	 */
	margin-block-end: 0.5rem;
}

/*
 * `.ace-product-card` tiene sombra propia (`--pc-shadow-card`, hasta
 * `--pc-shadow-card-hover` -"0 8px 20px"- mas un `translateY(-3px)` al
 * pasar el mouse), y el riel del carrusel recorta cualquier cosa que se
 * salga de su caja en el eje vertical (ver el comentario en
 * `.ace-carousel__track` de `carousel.css`) -sin este aire la sombra se ve
 * cortada en linea recta, "como debajo de una ventana" (Adriano, 28/08/2026,
 * viendo esta seccion en el navegador real). 1.5rem arriba y 2rem abajo
 * alcanza de sobra para la sombra en reposo y la de hover juntas. Mismo
 * motivo en el eje horizontal: sin `--ace-carousel-shadow-pad-inline`, la
 * sombra de la primera y la ultima tarjeta se cortaba contra el borde
 * izquierdo/derecho del riel (no hay otra tarjeta ahi que le preste su aire,
 * a diferencia de las del medio, que ya tienen el `gap` de sobra).
 */
/*
 * Misma separacion que la grilla de la tienda (2px, `ul.products` mas
 * arriba) en cualquier ancho de pantalla -pedido de Adriano, 23/09/2026: el
 * carrusel de "Tambien te puede interesar" tiene que verse tan apretado
 * como la grilla del catalogo, no solo en celular-. El selector lleva las
 * dos clases para ganarle al `gap` de `carousel.css` (0.75rem) sin importar
 * en que orden carguen las hojas.
 */
.ace-carousel__track.ace-related-carousel__track {
	--ace-carousel-shadow-pad: 1.5rem 2rem;
	--ace-carousel-shadow-pad-inline: 1.25rem;
	gap: 2px;
}

.ace-related-carousel__track li.product.ace-product-card {
	flex: 0 0 auto;
	inline-size: 12.5rem;
}

/* Celular: menos aire en las puntas, para que las tarjetas no queden angostas (21/09/2026). */
@media (max-width: 56.1875em) {
	.ace-carousel__track.ace-related-carousel__track {
		--ace-carousel-shadow-pad-inline: 0.5rem;
	}
}

@media (min-width: 56.25rem) {
	.ace-related-carousel__track li.product.ace-product-card {
		width: calc((100% - 3rem) / 5) !important;
		inline-size: auto;
	}
}

/*
 * Boton de agregar: "Agregar al pedido" en tablet y escritorio, "Agregar" en
 * celular (menos de 600px), donde comparte renglon con el selector de
 * cantidad. Una de las dos versiones queda con `display:none`, asi tampoco la
 * lee el lector de pantalla. Ver `add_button_label()` en `inc/woocommerce.php`.
 */
.ace-add-label--short {
	display: none;
}

@media (max-width: 37.4375em) {
	.ace-add-label--full {
		display: none;
	}

	.ace-add-label--short {
		display: inline;
	}
}