/**
 * Ajustes de la ficha de producto.
 *
 * Paleta de la marca, la misma del kit de Elementor y de los correos:
 *   #0D281A casi negro · #204E36 verde oscuro · #22A366 verde
 *   #E3F1E5 verde claro · #EDEDED líneas
 */

/* ---------------------------------------------------------------
 * 1. El SKU, fuera de la vista
 *
 * A quien compra una corona a las tres de la mañana no le dice nada
 * «CFP-0036». Se oculta sólo en pantalla: sigue estando en el schema que
 * lee Google y en el mensaje de WhatsApp, que es donde sí sirve —ahí
 * identifica el arreglo sin abrir el enlace.
 * --------------------------------------------------------------- */
.woocommerce div.product .sku_wrapper,
.product_meta .sku_wrapper,
.sku_wrapper.detail-container {
	display: none !important;
}

/* ---------------------------------------------------------------
 * 2. Los botones de redes, fuera
 *
 * Cuatro rectángulos de colores —azul de Facebook, rojo de Pinterest,
 * azul de Twitter, azul de LinkedIn— justo antes de la descripción. En
 * una ficha fúnebre desentonan y no los usa nadie: nadie comparte una
 * corona en LinkedIn.
 * --------------------------------------------------------------- */
.elementor-widget-share-buttons,
.elementor-element-2081c770 {
	display: none !important;
}

/* ---------------------------------------------------------------
 * 3. El botón de añadir al carrito, más grande
 *
 * Medía 32,6 px de alto. Un pulgar necesita 44 como mínimo, y éste es el
 * botón que da de comer. Ahora va a 56, con el texto más grande y sin
 * apretarse contra el campo de cantidad.
 * --------------------------------------------------------------- */
.woocommerce div.product form.cart .button,
.woocommerce div.product button.single_add_to_cart_button,
button.single_add_to_cart_button {
	min-height: 56px !important;
	padding: 1em 2.2em !important;
	font-size: 1.12em !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	border-radius: 999px;
}

/* El campo de cantidad, a la misma altura y a 16px.
   Por debajo de 16px, iOS hace zoom automático al tocarlo y descoloca
   toda la página. */
.woocommerce div.product form.cart .quantity input.qty {
	min-height: 56px !important;
	font-size: 16px !important;
	text-align: center;
}

.woocommerce div.product form.cart {
	display: flex;
	align-items: stretch;
	gap: .7em;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------
 * 4. Las pestañas, en verde
 *
 * Venían en el crema del kit (#FDEFBE). Se cambian al verde de la marca:
 * la activa en blanco con el texto verde oscuro, las demás en verde claro.
 * --------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li {
	background-color: #E3F1E5 !important;
	border: 1px solid #CFE3D4 !important;
	border-bottom: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.tabs li a {
	color: #204E36 !important;
	font-weight: 600;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce-tabs ul.tabs li.active {
	background: #fff !important;
	border-bottom-color: #fff !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.active a {
	color: #0D281A !important;
}

/* Las dos esquinitas que WooCommerce dibuja con ::before y ::after
   llevaban la sombra del color viejo. */
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	border-color: #CFE3D4 !important;
	box-shadow: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::before {
	border-bottom-color: #CFE3D4 !important;
}

@media (max-width: 767px) {
	.woocommerce div.product .woocommerce-tabs ul.tabs li,
	.woocommerce-tabs ul.tabs li {
		margin: 0 2px 4px !important;
	}
}

/* ---------------------------------------------------------------
 * 5. Las líneas horizontales de las descripciones
 *
 * Trece fichas llevan <hr /> entre secciones. Cortan la lectura en seco y
 * el aire de los propios títulos ya separa lo suficiente.
 *
 * Se ocultan con CSS en vez de borrarlas de las trece descripciones: así
 * no se toca el texto que alguien escribió, y devolverlas es quitar estas
 * tres líneas.
 * --------------------------------------------------------------- */
.woocommerce-Tabs-panel--description hr,
#tab-description hr,
.woocommerce div.product .woocommerce-tabs .panel hr {
	display: none !important;
}