/* ==========================================================================
   Capa de personalización del sitio — Así como tú
   Orden: tokens → header → tienda/loops → bloques.
   Los ajustes visuales del sitio viven aquí (versionados), no en el
   personalizador de WordPress.
   ========================================================================== */

/* ==========================================================================
   1. Tokens de marca
   ========================================================================== */

:root {
	--acm-pink: #ff2b53;
	--acm-pink-soft: #ff69bc;
	--acm-purple: #6e4c8f;
	--acm-cream: #fffdce;
	--acm-cream-soft: #fbf8f1;
	--acm-ink: #2c3338;
	--acm-success: #27ae60;
	--acm-pink-tint: #fff4f9;
	--acm-pink-bar: #ffd4e6;
	--acm-radius-pill: 22px;
	--acm-font-condensed: 'Roboto Condensed', sans-serif;
}

/* ==========================================================================
   2. Header
   ========================================================================== */

/* Buscador centrado entre logo e iconos. */
.site-header-inner {
	position: relative;
}

.header-search-center--wrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 40;
}

.header-search-always {
	width: 100%;
	max-width: clamp(220px, 40vw, 640px);
	pointer-events: auto;
}

.header-search-always .search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	padding: 0 8px;
	border-radius: var(--acm-radius-pill);
	height: 45px;
	border: 2px solid var(--acm-pink);
	box-shadow: none;
	position: relative;
}

.header-search-always .search-field {
	border: none;
	outline: none;
	flex: 1 1 auto;
	font-size: 14px;
	padding: 0 48px 0 20px;
	height: 24px;
	background: transparent;
}

.header-search-always .search-submit {
	background: transparent;
	border: none;
	padding: 6px 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* Solo la lupa dentro de la burbuja; sin fondo ni decoraciones. */
.header-search-always .search-form > .search-submit {
	position: absolute;
	right: 14px;
	top: calc(50% - 2.5px);
	transform: translateY(-50%);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: none !important;
	color: var(--acm-pink) !important;
	pointer-events: none;
	cursor: default;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	transition: opacity 120ms ease, transform 80ms ease, color 120ms ease;
	box-sizing: content-box;
	overflow: visible;
	flex: 0 0 auto;
}

.header-search-always .search-form.has-value > .search-submit,
.header-search-always .search-form .sd-search-enabled {
	opacity: 1 !important;
	pointer-events: auto !important;
	cursor: pointer !important;
}

.header-search-always .search-form > .search-submit:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* Ocultar la X nativa y cualquier decoración del input. */
.header-search-always .search-field::-webkit-search-cancel-button,
.header-search-always .search-field::-webkit-search-decoration,
.header-search-always .search-field::-ms-clear,
.header-search-always .search-field::-ms-reveal,
.header-search-always .search-field::-webkit-clear-button,
.header-search-always .search-field::-moz-clear,
.header-search-always .search-field::-moz-search-clear {
	display: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.header-search-always .search-field {
	-webkit-appearance: none;
	appearance: none;
	background-image: none !important;
}

.header-search-always .search-field::after,
.header-search-always .search-field::before {
	display: none !important;
	content: none !important;
}

/* Ocultar botones/controles ajenos (limpiar, reset, etc.). */
.header-search-always .search-form button[type='reset'],
.header-search-always .search-form .search-clear,
.header-search-always .search-form .search-reset,
.header-search-always .search-form .clear,
.header-search-always .search-form .search-remove,
.header-search-always .search-form .autocomplete-clear,
.header-search-always .search-form button:not(.search-submit),
.header-search-always .search-form a:not(.search-submit),
.header-search-always .search-form [class*='clear'],
.header-search-always .search-form [class*='reset'] {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.header-search-always .search-form:focus-within {
	box-shadow: 0 6px 22px rgba(255, 43, 83, 0.08);
	border-color: var(--acm-pink);
}

.header-search-always .search-form > label {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	display: block;
}

.header-search-always .search-form > label .search-field,
.header-search-always .search-form input.search-field {
	width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box;
	border: none !important;
	background: transparent !important;
	padding: 0 6px !important;
	height: 24px !important;
	line-height: 24px !important;
}

.header-search-always .search-field:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* Iconos del header por encima del buscador. */
.site-header-cart,
.header-wishlist-icon,
.wc-account-link {
	position: relative;
	z-index: 60;
}

/* Icono SVG de la lupa. */
.header-search-always .ws-svg-icon,
.header-search-always .search-submit .ws-svg-icon {
	background: transparent !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: inherit !important;
}

.header-search-always .ws-svg-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor !important;
	stroke: none !important;
	transform: translateY(1px);
}

/* Ocultar X/cancelar inyectadas junto a la lupa. */
.header-search-always .search-submit .icon-cancel,
.header-search-always .search-submit i.icon-cancel,
.header-search-always .search-submit .ws-svg-icon.icon-cancel,
.header-search-always .search-submit .ws-svg-icon .icon-cancel,
.header-search-always .search-submit .ws-svg-icon.icon-cancel svg,
.header-search-always .search-submit .icon-cancel svg {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

.header-search-always .search-submit .ws-svg-icon + .ws-svg-icon {
	display: none !important;
}

/* ==========================================================================
   3. Header: escalado del banner, logo y buscador según pantalla/zoom
   ========================================================================== */

@media (max-width: 1400px) {
	.bhfb-above_header_row .header-html {
		font-size: 12px;
		padding: 6px 14px;
	}

	.bhfb-main_header_row .custom-logo,
	.bhfb-main_header_row .site-branding img {
		max-width: 150px !important;
		width: auto !important;
		height: auto !important;
	}

	.header-search-always {
		max-width: 720px;
	}

	.header-search-always .search-form {
		height: 42px;
	}
}

@media (max-width: 1200px) {
	.bhfb-above_header_row .header-html {
		font-size: 11px;
		padding: 4px 12px;
	}

	.bhfb-main_header_row .custom-logo,
	.bhfb-main_header_row .site-branding img {
		max-width: 120px !important;
		width: auto !important;
		height: auto !important;
	}

	.header-search-always {
		max-width: 600px;
	}

	.header-search-always .search-form {
		height: 38px;
	}

	.header-search-always .search-field {
		font-size: 13px;
	}
}

@media (max-width: 1024px) {
	.header-search-always {
		max-width: 720px;
	}
}

@media (max-width: 1000px) {
	.bhfb-above_header_row .header-html {
		font-size: 10px;
		padding: 3px 10px;
	}

	.bhfb-main_header_row .custom-logo,
	.bhfb-main_header_row .site-branding img {
		max-width: 100px !important;
		width: auto !important;
		height: auto !important;
	}

	.header-search-always {
		max-width: 480px;
	}

	.header-search-always .search-form {
		height: 36px;
	}

	.header-search-always .search-field {
		font-size: 12px;
	}

	.site-header-cart .ws-svg-icon svg {
		width: 20px;
		height: 20px;
	}
}

@media (max-width: 768px) {
	.header-search-always,
	.header-search-center--wrap {
		display: none;
	}
}

@media (min-width: 1400px) {
	.header-search-always {
		max-width: 900px;
	}
}

@media (min-width: 711px) {
	.header-search-always {
		max-width: 880px;
	}

	.header-search-always .search-form {
		height: 45px;
	}

	.header-search-always .search-field {
		font-size: 14px;
		padding: 0 48px 0 20px;
		height: 24px;
	}

	.header-search-always .search-form > .search-submit {
		right: 14px;
		width: 36px;
		height: 36px;
	}
}

@media (max-width: 710px) {
	.header-search-always {
		max-width: 360px;
	}

	.header-search-always .search-form {
		height: 34px;
	}

	.header-search-always .search-field {
		font-size: 11px;
		padding: 0 34px 0 10px;
		height: 16px;
	}

	.header-search-always .search-form > .search-submit {
		right: 8px;
		width: 28px;
		height: 28px;
	}
}

/* ==========================================================================
   4. Tienda: tarjetas de producto y relacionados
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
	.products .product .loop-image-wrap,
	ul.products li.product .loop-image-wrap,
	.botiga-wc-loop-product .loop-image-wrap,
	.products .product .woocommerce-LoopProduct-link,
	ul.products li.product .woocommerce-LoopProduct-link,
	.product .images,
	.product .woocommerce-product-gallery__image {
		overflow: hidden;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.products .product img,
	ul.products li.product img,
	.botiga-wc-loop-product img,
	.product .images img {
		transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 300ms ease;
		transform-origin: center center;
		will-change: transform;
	}

	.products .product,
	ul.products li.product,
	.botiga-wc-loop-product {
		transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease;
		transform-origin: center center;
		will-change: transform, box-shadow;
	}

	.products .product:hover img,
	ul.products li.product:hover img,
	.botiga-wc-loop-product:hover img {
		transform: scale(1.08);
	}

	.products .product:hover,
	ul.products li.product:hover,
	.botiga-wc-loop-product:hover {
		transform: translateY(-8px);
		box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12);
		z-index: 2;
	}

	/* Productos de bloques (WooCommerce blocks). */
	.wc-block-grid__product img,
	.wp-block-woocommerce-products .wc-block-grid__product img,
	.wp-block-woocommerce .wc-block-grid__product img,
	.wc-block-grid__product {
		transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 300ms ease;
		transform-origin: center center;
		will-change: transform;
	}

	.wc-block-grid__product:hover img,
	.wp-block-woocommerce-products .wc-block-grid__product:hover img,
	.wp-block-woocommerce .wc-block-grid__product:hover img {
		transform: scale(1.08);
	}

	.wc-block-grid__product:hover {
		transform: translateY(-8px);
		box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12);
		z-index: 2;
	}

	/* Relacionados / recomendados: evitar recorte de sombras. */
	.related.products,
	.woocommerce .related.products,
	.woocommerce .upsells.products,
	.woocommerce .widget_recently_viewed_products,
	.home .products,
	.widget_woocommerce_recently_viewed,
	.related.products ul.products,
	.related .products,
	.woocommerce .related .products,
	.woocommerce .upsells .products,
	.upsells.products ul.products {
		overflow: visible !important;
	}

	.related.products li.product,
	.related .product,
	.upsells .product,
	.home .products li.product {
		overflow: visible;
		position: relative;
	}

	.related.products li.product:hover,
	.related .product:hover,
	.upsells .product:hover,
	.woocommerce .related.products li.product:hover,
	.woocommerce .upsells.products li.product:hover {
		transform: translateY(-8px);
		box-shadow: 0 26px 60px rgba(16, 24, 40, 0.08), -8px 10px 38px rgba(16, 24, 40, 0.04);
		z-index: 20;
	}

	/* Las imágenes ya traen el fondo crema; si el wrapper no recorta,
	   el zoom (scale 1.08) saca la caja crema fuera de la tarjeta. */
	.related.products li.product .loop-image-wrap,
	.related .product .loop-image-wrap,
	.upsells .product .loop-image-wrap {
		overflow: hidden !important;
	}
}

@media (max-width: 768px) {
	.products .product img,
	ul.products li.product img,
	.botiga-wc-loop-product img {
		transition: none;
		transform: none;
	}

	.products .product,
	ul.products li.product,
	.botiga-wc-loop-product {
		transform: none;
		box-shadow: none;
	}
}

/* Tienda: 2 columnas en móvil que sí caben. El tema usa
   repeat(2, 1fr) donde 1fr = minmax(auto, 1fr) y no deja encoger la
   columna por debajo del contenido, desbordando la grilla. */
@media screen and (max-width: 719px) {
	.woocommerce ul.products,
	.woocommerce .wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.woocommerce ul.products li.product {
		min-width: 0;
	}
}

/* ==========================================================================
   Tienda: cabecera y filtros en móvil
   El título resultaba enorme y el selector de orden se cortaba porque la
   columna es del 50% y el select tenía max-width 220px.
   ========================================================================== */

@media screen and (max-width: 767px) {
	.woocommerce-page-header {
		padding-top: 28px;
		padding-bottom: 28px;
	}

	.woocommerce-page-header + .content-wrapper {
		margin-top: 28px !important;
		margin-bottom: 40px;
	}

	.woocommerce-page-header .woocommerce-products-header__title.page-title {
		font-size: 24px;
	}

	.woocommerce-sorting-wrapper {
		margin-top: 16px;
		margin-bottom: 24px;
	}

	.woocommerce-sorting-wrapper .col-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.woocommerce-sorting-wrapper .botiga-sorting-left,
	.woocommerce-sorting-wrapper .botiga-sorting-right,
	.woocommerce-sorting-wrapper .botiga-sorting-right-inner {
		justify-content: flex-start;
		text-align: left;
	}

	.woocommerce-sorting-wrapper .botiga-sorting-left {
		margin-bottom: 8px;
	}

	.woocommerce-sorting-wrapper .woocommerce-result-count {
		color: rgba(44, 51, 56, 0.7);
		font-size: 13px;
	}

	.woocommerce-sorting-wrapper .woocommerce-ordering,
	.woocommerce-sorting-wrapper .woocommerce-ordering select {
		width: 100%;
		max-width: 100%;
	}

	/* Selector de orden más liviano (el tema lo deja alto y cuadrado). */
	.woocommerce-sorting-wrapper select {
		min-height: 42px !important;
		padding: 0 36px 0 14px !important;
		color: var(--acm-ink, #2c3338) !important;
		font-size: 14px;
		background-color: #fff !important;
		border: 1px solid rgba(44, 51, 56, 0.16) !important;
		border-radius: 10px !important;
		background-position: calc(100% - 12px) center !important;
	}
}

/* Producto: evitar que la última sección (productos relacionados) se
   solape con el footer. El tema le aplica margin-bottom:-120px y su
   ::after (blanco 50% en secciones pares, del personalizador) caía sobre
   el footer en móvil. */
@media screen and (max-width: 767px) {
	.single-product .site-main > .product > section.products:last-child {
		margin-bottom: 0 !important;
	}
}

/* ==========================================================================
   5. Bloques: tiles de marca y columnas clicables
   ========================================================================== */

.brand-tile {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 6px;
	overflow: hidden;
	background: transparent;
	position: relative;
}

.wp-block-column > a.brand-tile {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
}

.brand-caption {
	margin: 0;
	padding: 16px 12px;
	text-align: center;
	font-weight: 700;
	letter-spacing: 1px;
	background: var(--acm-pink);
	color: #fff;
	transition: background-color 180ms ease, color 180ms ease;
}

.wp-block-column[role='link'] {
	outline: none;
}

.wp-block-column[role='link'],
.brand-tile {
	box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14) !important;
	transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease !important;
	transform-origin: center center;
	will-change: transform, box-shadow;
}

.wp-block-column[role='link'] img,
.brand-tile img {
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 300ms ease;
	transform-origin: center center;
	will-change: transform;
	transform: none !important;
}

@media (hover: hover) and (pointer: fine) {
	.wp-block-column[role='link']:hover,
	.wp-block-column[role='link']:focus,
	.wp-block-column[role='link']:focus-within,
	.brand-tile:hover,
	.brand-tile:focus {
		transform: translateY(-8px) scale(1.06) !important;
		box-shadow: 0 50px 140px rgba(16, 24, 40, 0.24), 0 20px 60px rgba(16, 24, 40, 0.16), 0 8px 24px rgba(16, 24, 40, 0.1);
		z-index: 60 !important;
	}
}

@media (max-width: 768px) {
	.wp-block-column[role='link'],
	.brand-tile {
		box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12) !important;
		transition: none;
		transform: none;
	}

	.wp-block-column[role='link'] img,
	.brand-tile img {
		transition: none;
		transform: none;
	}
}

/* ==========================================================================
   6. Base y tipografía
   ========================================================================== */

body {
	font-family: 'Poppins', sans-serif;
}

.titulo-cloud-softy {
	font-family: 'Cloud Softy', sans-serif;
}

.titulo-artegra {
	font-family: 'Artegra Sans Condensed', sans-serif;
}

/* ==========================================================================
   7. Botones y enlaces
   ========================================================================== */

.button {
	background: var(--acm-pink) !important;
	font-weight: 700 !important;
}

.checkout-button.button.alt.wc-forward {
	background: var(--acm-pink) !important;
	font-weight: 700 !important;
}

.search-submit {
	background: var(--acm-pink) !important;
	border-radius: 23px !important;
}

.woocommerce-product-search .search-field {
	border: 2px solid var(--acm-pink);
	border-radius: 23px;
	padding: 10px 16px;
	outline: none;
}

.woocommerce-product-search .search-field:focus {
	border-color: var(--acm-pink);
	box-shadow: 0 0 0 2px rgba(255, 43, 83, 0.2);
}

.page-numbers.current,
.page-numbers a:hover,
.page-numbers a:active,
.page-numbers a:focus {
	background: var(--acm-pink) !important;
}

/* ==========================================================================
   8. Header: navegación y dropdowns
   ========================================================================== */

.botiga-dropdown-ul > .botiga-dropdown-li:not(:last-child) {
	margin-right: 110px;
}

.bhfb-below_header_row .container-fluid {
	box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 10;
}

.dropdown-symbol {
	display: none !important;
}

/* Menú móvil (offcanvas): mostrar el caret para desplegar subcategorías.
   En escritorio se mantiene oculto (regla anterior) y el offcanvas solo
   se muestra en móvil, así que el header de escritorio no cambia. */
.botiga-offcanvas-menu .dropdown-symbol {
	display: inline-flex !important;
	align-items: center;
	cursor: pointer;
	position: relative;
	transition: transform 250ms ease;
}

/* Amplía el área táctil del caret (más a lo ancho) sin cambiar su tamaño
   visual ni el layout, para no seleccionar la categoría por accidente. */
.botiga-offcanvas-menu .dropdown-symbol::after {
	content: '';
	position: absolute;
	top: -6px;
	right: -14px;
	bottom: -6px;
	left: -14px;
}

/* Gira el caret cuando su submenú está abierto. La clase acm-open la
   sincroniza el JS con el estado real del submenú (evita :has()). */
.botiga-offcanvas-menu li.acm-open > .dropdown-symbol {
	transform: rotate(180deg);
}

/* Submenú: abre/cierra con transición suave en vez del salto
   display:none -> display:block del tema. */
.botiga-offcanvas-menu .botiga-dropdown .sub-menu {
	display: block !important;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	/* Al cerrar: el texto se desvanece primero y luego colapsa la altura,
	   para que no se solape con los items de abajo. */
	transition: max-height 280ms ease, opacity 100ms ease, visibility 0s linear 100ms;
}

.botiga-offcanvas-menu .botiga-dropdown .sub-menu.toggled {
	max-height: 1200px;
	opacity: 1;
	visibility: visible;
	/* Al abrir: expande y el texto aparece con un leve retardo. */
	transition: max-height 300ms ease, opacity 200ms ease 120ms, visibility 0s linear;
}

/* Subcategorías del menú móvil: mismo rosa que los títulos del menú. */
.bhfb.bhfb-mobile_offcanvas .main-navigation .sub-menu.botiga-dropdown-ul a.botiga-dropdown-link {
	color: var(--acm-pink-soft, #ff69bc);
}

.bhfb.bhfb-mobile_offcanvas .main-navigation .sub-menu.botiga-dropdown-ul a.botiga-dropdown-link:hover {
	color: var(--acm-pink, #ff2b53);
}

@media (prefers-reduced-motion: reduce) {
	.botiga-offcanvas-menu .dropdown-symbol,
	.botiga-offcanvas-menu .botiga-dropdown .sub-menu {
		transition: none;
	}
}

@media (max-width: 1400px) {
	.bhfb-below_header_row .botiga-dropdown-link {
		padding: 10px 20px;
		font-size: 15px;
	}
}

@media (max-width: 1200px) {
	.bhfb-below_header_row .botiga-dropdown-link {
		padding: 8px 16px;
		font-size: 14px;
	}
}

@media (max-width: 1000px) {
	.bhfb-below_header_row .botiga-dropdown-link {
		padding: 6px 12px;
		font-size: 13px;
	}
}

/* ==========================================================================
   9. Barra de los títulos de sección (todo el sitio)
   La home la sobreescribe a crema en asicomotumakeup-home.css.
   ========================================================================== */

.wp-block-heading.has-text-align-center {
	background: var(--acm-pink-bar) !important;
	width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	max-width: none !important;
	box-sizing: border-box !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
}

/* ==========================================================================
   10. WooCommerce: carrito, checkout y listados
   ========================================================================== */

.woocommerce-cart .coupon,
.woocommerce-checkout .checkout_coupon {
	display: none !important;
}

.cart_totals {
	background: var(--acm-pink-tint) !important;
}

.merchant-payment-logos {
	display: none !important;
}

.stock.in-stock {
	display: none !important;
}

/* Ocultar la fila de Envío en el carrito */
.woocommerce-shipping-totals {
	display: none !important;
}

@media (max-width: 768px) {
	.loop-button-wrap.button-layout3 .button {
		padding: 5px 12px !important;
		font-size: 11px !important;
	}
}

/* ==========================================================================
   11. Formularios
   ========================================================================== */

.page-id-257 .wpforms-form button[type='submit'] {
	background-color: #000 !important;
	border-color: #000 !important;
	color: #fff !important;
}

.page-id-257 .wpforms-form button[type='submit']:hover {
	background-color: #000 !important;
}

.page-id-257 .wpforms-form input,
.page-id-257 .wpforms-form textarea {
	border-color: #000 !important;
}

/* ==========================================================================
   12. Tienda: muestras (swatches) y títulos de producto
   ========================================================================== */

.shop-swatches {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
	margin-top: 12px;
	margin-bottom: 8px;
}

.shop-swatch {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid #ddd;
	display: inline-block;
	cursor: pointer;
	transition: 0.25s;
}

.shop-swatch:hover {
	transform: scale(1.18);
	border: 1px solid #000;
}

/* En móvil las columnas son más angostas: muestras algo más pequeñas para
   que quepan sin deformarse. */
@media screen and (max-width: 719px) {
	.shop-swatches {
		gap: 5px;
	}

	.shop-swatch {
		width: 15px;
		height: 15px;
	}
}

.wpsf-product-title a {
	font-family: var(--acm-font-condensed) !important;
	/* Peso original del personalizador (30); se mantiene tal cual. */
	font-weight: 30 !important;
	font-size: 15px !important;
}

.woocommerce-loop-product__title a,
.botiga-wc-loop-product__title {
	font-family: var(--acm-font-condensed) !important;
	font-weight: 300 !important;
	font-size: 15px !important;
}

/* ==========================================================================
   13. Pie de página siempre al fondo
   En páginas con poco contenido (por ejemplo el carrito vacío) la página no
   llegaba a llenar la pantalla, así que el pie quedaba a media altura y por
   debajo se veía un espacio blanco. Con esto el contenido crece hasta llenar
   la pantalla y el pie queda pegado al borde inferior.
   ========================================================================== */

#page.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#page.site > .content-wrapper {
	flex: 1 0 auto;
}