/**
 * Samaruc Joyas — arreglos de la versión móvil (agosto 2026).
 *
 * Hoja aparte a propósito: se carga la ÚLTIMA, así que gana a las hojas
 * congeladas de Goldsmith/Elementor sin tener que sembrar !important por
 * todo style.css. Cada bloque documenta el fallo real que corrige.
 *
 * Se encola siempre desde inc/assets.php (las reglas van dentro de sus
 * propias media queries).
 */

/* =========================================================================
   1. Selector de idioma de GTranslate
   El plugin está configurado como flotante «bottom_left», pero su CSS de
   posicionamiento no llega a cargarse: el widget caía en medio del flujo y
   se plantaba encima de las fotos y los textos a media página. Lo fijamos
   nosotros abajo a la izquierda, que es donde debía estar.
   ====================================================================== */
.gtranslate_wrapper {
	position: fixed;
	left: 12px;
	bottom: 12px;
	z-index: 9990;
	width: auto;
}

.gt_float_switcher {
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	border-radius: 6px;
	overflow: hidden;
}

/* En móvil, el botón de WhatsApp vive abajo a la derecha: el de idioma se
   queda a la izquierda y algo más pequeño para no comerse la pantalla. */
@media (max-width: 767px) {
	.gtranslate_wrapper {
		left: 10px;
		bottom: 10px;
	}
	.gt_float_switcher {
		font-size: 13px !important;
	}
	.gt_float_switcher .gt-selected .gt-current-lang {
		padding: 4px 7px !important;
	}
}

/* =========================================================================
   2. «Mi cuenta» sin sesión iniciada
   El formulario de acceso usa el marcado nativo de WooCommerce, con clases
   `u-column1 col-1` / `u-column2 col-2`. Bootstrap (bootstrap-light.min.css)
   define `.col-1` como 8,33% de ancho, así que secuestraba la columna: el
   formulario quedaba en una tira de 66px con las letras en vertical.
   ====================================================================== */
.woocommerce-account .u-columns > .col-1,
.woocommerce-account .u-columns > .col-2,
.woocommerce-account .u-column1.col-1,
.woocommerce-account .u-column2.col-2 {
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	min-width: 0;
}

/* =========================================================================
   3. Barrido horizontal de la home
   El contenedor de productos destacados (#WC-products) es un contenedor
   e-con congelado de Elementor con `margin: 10px` y ancho 100%: sumaba
   400px en una pantalla de 390 y dejaba la página moviéndose de lado.
   ====================================================================== */
/* Pasa también en escritorio (1450 px de contenido en una ventana de 1440),
   así que el margen lateral se quita en todos los tamaños. El vertical se
   respeta: es el que separa la parrilla del bloque anterior. */
#WC-products {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}

/* Cinturón de seguridad general: nada debe generar scroll lateral. */
@media (max-width: 767px) {
	html,
	body {
		overflow-x: hidden;
		max-width: 100%;
	}
}

/* =========================================================================
   4. Carrito y caja: rejilla de Bootstrap sin contenedor
   Las plantillas de carrito/caja usan filas `.row`, que llevan un margen
   lateral de -12px pensado para vivir dentro de un `.container` con su
   relleno. Aquí cuelgan de contenedores congelados de Elementor que no lo
   tienen, así que la fila sobresalía de la pantalla (402px en una de 390) y
   la página se movía de lado. En móvil quitamos ese margen negativo y el
   relleno de sus columnas: a una sola columna no aportan nada.
   ====================================================================== */
@media (max-width: 767px) {
	.woocommerce-cart .woocommerce > .row,
	.woocommerce-checkout .woocommerce > .row,
	.woocommerce-cart .woocommerce .row,
	.woocommerce-checkout .woocommerce .row {
		margin-left: 0;
		margin-right: 0;
	}

	.woocommerce-cart .woocommerce .row > [class*="col-"],
	.woocommerce-checkout .woocommerce .row > [class*="col-"] {
		padding-left: 0;
		padding-right: 0;
	}
}

/* En el carrito y la caja el selector flotante se plantaba encima de los
   campos del formulario (tapaba «Código postal»). Durante el pago nadie
   cambia de idioma y tapar un campo obligatorio cuesta ventas: lo quitamos
   de en medio solo en esas dos páginas. */
.woocommerce-cart .gtranslate_wrapper,
.woocommerce-checkout .gtranslate_wrapper {
	display: none;
}

/* =========================================================================
   5. Rejilla de categorías en pantallas estrechas
   Las tarjetas van a dos columnas, así que en un móvil de 320px cada una
   mide 160px. Con el título a 20px + 20px de relleno a cada lado no cabía
   «PENDIENTES» ni «NOVEDADES»: la palabra se salía de su tarjeta y pisaba
   la de al lado. Se escala el texto y se recorta el relleno.
   ====================================================================== */
@media (max-width: 420px) {
	.ssj-cat-card__title {
		/* Escala con el ancho real de pantalla, con tope arriba y abajo. */
		font-size: clamp(14px, 5vw, 20px);
		padding: 16px 14px;
		letter-spacing: .5px;
		line-height: 1.15;
		/* Si aun así no cabe (nombres largos), parte la palabra en vez de
		   desbordarse. */
		overflow-wrap: anywhere;
		max-width: 100%;
	}
}

/* =========================================================================
   6. Precio en negrita (petición del cliente, agosto 2026)
   Estaba resuelto en style.css, pero ese archivo se ha reescrito varias
   veces y las reglas dejaron de aplicar (los precios volvieron a peso 400).
   Se replican aquí, que es la última hoja que se carga, para que no se
   pierdan otra vez. En la ficha el importe cuelga de .goldsmith-price-
   wrapper, así que hace falta el selector descendiente, no el hijo directo.
   ====================================================================== */
.goldsmith-product-loop-inner .price,
.goldsmith-product-loop-inner .price .woocommerce-Price-amount,
.goldsmith-product-loop-inner .price bdi,
.goldsmith-product-loop-inner .price ins,
.goldsmith-summary-item.goldsmith-price .woocommerce-Price-amount,
.goldsmith-summary-item.goldsmith-price bdi,
.goldsmith-summary-item.goldsmith-price ins {
	font-weight: 700;
	text-decoration: none;
}

/* El precio anterior de una rebaja se queda fino, para que destaque el nuevo.
   SIN opacity: el gris del precio antiguo (#9a9a9a con opacity:1) lo fija
   style.css a propósito, para tarjeta y ficha, y esta hoja se carga después.
   Un opacity aquí le ganaba el empate (0,2,1) y lo dejaba al 60%, más claro
   de lo diseñado. Solo el peso, que es lo que se perdía. */
.goldsmith-product-loop-inner .price del,
.goldsmith-product-loop-inner .price del .woocommerce-Price-amount,
.goldsmith-product-loop-inner .price del bdi,
.goldsmith-summary-item.goldsmith-price del,
.goldsmith-summary-item.goldsmith-price del .woocommerce-Price-amount,
.goldsmith-summary-item.goldsmith-price del bdi {
	font-weight: 400;
}

/* ------------------------------------------------------------------
   Footer: hueco bajo el copyright en móvil.
   El selector de idioma de GTranslate flota fijo en la esquina inferior
   izquierda y, con el pie ahora en oscuro, se comía la última línea del
   copyright. Le reservamos su altura al final de la barra legal.
   ------------------------------------------------------------------ */
@media (max-width: 782px) {
	.samaruc-footer__bottom {
		padding-bottom: 74px;
	}
}