/*
Theme Name: Blacks Child Theme
Theme URI: https://blacks.themerex.net/
Description: Blacks is a Premium WordPress theme that has built-in support for popular Page Builders, slider with swipe gestures, and is SEO- and Retina-ready. The unique system of inheritance and override options allows setting up individual parameters for different sections of your site and supported plugins.
Author: ThemeREX
Author URI: https://themerex.net/
Version: 1.7.0
Tested up to: 6.8.1
Requires at least: 5.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, e-commerce, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
Text Domain: blacks
Template: blacks
*/


/* =Child-Theme customization starts here
------------------------------------------------------------ */
/* ------------------------------------------------------------------
   Selector de país (WCPBC)
   Markup: blacks-child/woocommerce-product-price-based-on-countries/country-selector.php
   Lógica: blacks-child/js/country-switcher.js

   Se renderiza dos veces en la cabecera (sección ancha y sección angosta),
   por eso todo se define por clase y nunca por id.
------------------------------------------------------------------ */

.custom-wcpbc-switcher {
	position: relative;
	display: inline-block;
	font-family: inherit;
	user-select: none;
	z-index: 99;
}

/* El toggle es un <button>: hay que neutralizar los estilos de botón del tema. */
.custom-wcpbc-switcher .switcher-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 12px;
	width: auto;
	min-width: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: #000;
	cursor: pointer;
}

.custom-wcpbc-switcher .switcher-toggle:hover,
.custom-wcpbc-switcher .switcher-toggle:focus {
	background: rgba(0, 0, 0, 0.05);
	color: #000;
}

.custom-wcpbc-switcher .country-flag {
	flex: 0 0 auto;
	width: 24px;
	height: 16px;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Flecha dibujada en CSS (el <span> va vacío y aria-hidden). */
.custom-wcpbc-switcher .switcher-arrow {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.7;
	transition: transform 0.2s;
}

.custom-wcpbc-switcher.is-open .switcher-arrow {
	transform: rotate(180deg);
}

.custom-wcpbc-switcher .switcher-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 160px;
	margin: 5px 0 0 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.custom-wcpbc-switcher.is-open .switcher-dropdown {
	display: block;
}

.custom-wcpbc-switcher .switcher-dropdown li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 15px;
	font-size: 15px;
	color: #333;
	cursor: pointer;
	transition: background 0.2s;
}

.custom-wcpbc-switcher .switcher-dropdown li:hover,
.custom-wcpbc-switcher .switcher-dropdown li:focus {
	background: #f5f5f5;
	outline: none;
}

.custom-wcpbc-switcher .switcher-dropdown li.active {
	font-weight: 600;
	background: #f9f9f9;
}

/* --- Modo "sólo bandera" -------------------------------------------
   En el toggle se oculta el nombre del país y queda únicamente la bandera.
   Dentro del desplegable los nombres siguen visibles: son necesarios para elegir.

   Se activa por debajo de 1280px, que es justo donde la cabecera ancha
   (sección oculta en tablet/móvil) da paso a la cabecera angosta.
   La clase `solo-bandera` permite además forzarlo desde Elementor.
------------------------------------------------------------------- */

.custom-wcpbc-switcher.solo-bandera .switcher-toggle .country-name {
	display: none;
}

.custom-wcpbc-switcher.solo-bandera .switcher-toggle {
	padding: 8px;
}

@media (max-width: 1279px) {
	.custom-wcpbc-switcher .switcher-toggle .country-name {
		display: none;
	}

	.custom-wcpbc-switcher .switcher-toggle {
		padding: 8px;
	}
}

/* ------------------------------------------------------------------
   Visibilidad por país (WCPBC)

   Las secciones duplicadas de la cabecera (layout "Header Home") y del
   pie (layout "Footer Home") llevan una de estas dos clases. La clase
   `wcpbc-country-<cc>` del <body> la añade blacks_child_add_country_class()
   en functions.php.

   Estas reglas estaban en el tema padre
   (blacks/skins/default/skin-upgrade/skin-upgrade.css); se movieron aquí
   para que sobrevivan a las actualizaciones de Blacks. El orden de carga
   está garantizado: skin-upgrade.css se encola con prioridad 1350 y
   style.css del child con 1500 (blacks/functions.php:356).
------------------------------------------------------------------ */

body:not(.wcpbc-country-hn) .mostrar-solo-honduras {
	display: none !important;
}

body:not(.wcpbc-country-gt) .mostrar-solo-guatemala {
	display: none !important;
}

/* ------------------------------------------------------------------
   Icono de "mi cuenta" de la cabecera

   El tema lo pinta con un glifo de la fuente Fontello:
   blacks/skins/default/plugins/trx_addons/trx_addons.css:3690 usa "\ea12"
   y skin-upgrade.css lo cambiaba a "\ea16". Aquí se sustituye por un SVG
   propio: se anula el glifo con content:'' y la silueta se pinta con una
   máscara CSS, así hereda el color del texto (currentColor) en cualquier
   esquema de la cabecera.

   Estaba en el tema padre (skin-upgrade.css); se movió aquí para que
   sobreviva a las actualizaciones de Blacks. Basta con la misma
   especificidad porque style.css del child carga después (prioridad 1500
   frente a 1350 de skin-upgrade.css).
------------------------------------------------------------------ */

.sc_layouts_login .sc_layouts_login_icon:before {
	content: '';
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	vertical-align: middle;
	margin-bottom: 2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3e%3ccircle cx='12' cy='7' r='4'/%3e%3c/svg%3e") no-repeat center / contain;
	mask: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3e%3ccircle cx='12' cy='7' r='4'/%3e%3c/svg%3e") no-repeat center / contain;
}

/* ------------------------------------------------------------------
   Selector de país de WCPBC en móvil: dejar sólo la bandera

   Se aplica al <select> nativo / Select2 que pinta el propio plugin
   (la clase `bandera-movil` se pone desde Elementor en la sección que lo
   contiene). El desplegable con banderas del child theme tiene su propia
   regla de "sólo bandera" más arriba en este archivo.

   Estaba en el tema padre (skin-upgrade.css); se movió aquí para que
   sobreviva a las actualizaciones de Blacks.
------------------------------------------------------------------ */

@media (max-width: 767px) {
	/* Limitamos el tamaño del texto renderizado, pero NO del contenedor para no cortar el menú desplegable */
	.bandera-movil .wcpbc-country-switcher,
	.bandera-movil .select2-selection {
		max-width: 50px !important;
		min-width: 50px !important;
		padding-right: 0 !important;
	}

	.bandera-movil .select2-selection__rendered {
		text-overflow: clip !important;
		white-space: nowrap !important;
		padding-right: 0 !important;
		max-width: 50px !important;
		overflow: hidden !important;
	}

	/* Ocultar flecha para ahorrar más espacio si es Select2 */
	.bandera-movil .select2-selection__arrow {
		display: none !important;
	}
}

/* ------------------------------------------------------------------
   Pie de página (layout de Elementor "Footer Home – Bookstore 1", ID 37142)

   Estructura: franja de destacados (.footer-destacados), cuatro columnas
   (.footer-principal, duplicada por país con mostrar-solo-*) y barra de
   copyright (.footer-inferior). Las clases se asignan en Elementor, en
   Avanzado > Clases CSS. Los colores salen de las variables del esquema
   del tema para que el pie siga al esquema del sitio (footer_scheme).
------------------------------------------------------------------ */

/* El tema pinta el pie con el color alterno del esquema
   ([class*=scheme_].footer_wrap en skins/default/css/style.css);
   el cliente lo quiere con el fondo normal del sitio. */
[class*=scheme_].footer_wrap.footer_custom_37142 {
	background-color: var(--theme-color-bg_color);
	color: var(--theme-color-text);
}

.footer_wrap .footer-destacados,
.footer_wrap .footer-principal,
.footer_wrap .footer-inferior {
	background-color: transparent;
}

.footer_wrap .footer-destacados {
	padding: 50px 0 20px;
	border-top: 1px solid var(--theme-color-bd_color);
	border-bottom: 1px solid var(--theme-color-bd_color);
}

.footer_wrap .footer-principal {
	padding: 60px 0 40px;
}

.footer_wrap .footer-inferior {
	padding: 22px 0;
	border-top: 1px solid var(--theme-color-bd_color);
}

.footer_wrap .footer-inferior p {
	margin: 0;
}

/* --- Destacados: icono a la izquierda, título, texto y enlace --- */

.footer-destacados .sc_icons_simple .sc_icons_icon {
	color: var(--theme-color-text_link);
	width: 2.4em;
	height: 2.4em;
	line-height: 2.4em;
}

.footer-destacados .sc_icons_simple .sc_icons_icon > span,
.footer-destacados .sc_icons_simple .sc_icons_icon > span:before {
	width: auto;
	height: auto;
	font-size: 2.6rem;
	line-height: 1 !important;
}

.footer-destacados .sc_icons_simple .sc_icons_icon + .sc_icons_item_details {
	margin-left: 1.1em;
}

.footer-destacados .sc_icons_item_title {
	margin: 0 0 0.3em;
	font-size: 1.25rem;
}

.footer-destacados .sc_icons_item_description {
	margin: 0;
}

.footer-destacados .sc_icons_simple .sc_icons_item .sc_icons_item_more_link {
	margin-top: 0.6em;
	padding-bottom: 2px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--theme-color-text_link);
	border-bottom: 1px solid currentColor;
}

.footer-destacados .sc_icons_simple .sc_icons_item .sc_icons_item_more_link:after {
	content: '\203A';
	margin-left: 5px;
}

.footer-destacados .sc_icons_simple .sc_icons_item .sc_icons_item_more_link:hover {
	color: var(--theme-color-text_hover);
}

/* --- Columna 1: datos de contacto --- */

.footer-contacto .sc_icons_simple .sc_icons_item + .sc_icons_item {
	margin-top: 0.7em;
}

.footer-contacto .sc_icons_simple .sc_icons_icon {
	color: var(--theme-color-text_dark);
}

.footer-contacto .sc_icons_item_description p {
	margin: 0;
}

.footer-contacto .sc_icons_item_description strong {
	color: var(--theme-color-text_dark);
}

.footer-contacto .sc_icons_item_details {
	min-width: 0;
}

/* El correo es una sola palabra larga: se deja partir para que no invada la columna vecina. */
.footer-contacto .sc_icons_item_description a {
	color: inherit;
	overflow-wrap: anywhere;
}

.footer-contacto .sc_icons_item_description a:hover {
	color: var(--theme-color-text_link);
}

/* --- Redes sociales en círculos con borde (trx_sc_socials y social-icons) --- */

.footer-redes .socials_wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.footer-redes .socials_wrap .social_item {
	margin: 0;
}

.footer-redes .socials_wrap .social_item .social_icon,
.footer-redes .elementor-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	font-size: 16px;
	line-height: 46px;
	border: 1px solid var(--theme-color-bd_color);
	border-radius: 50%;
	background-color: transparent;
	color: var(--theme-color-text_dark);
	transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}

.footer-redes .elementor-social-icon i,
.footer-redes .elementor-social-icon svg {
	color: inherit;
	fill: currentColor;
}

.footer-redes .socials_wrap .social_item:hover .social_icon,
.footer-redes .elementor-social-icon:hover {
	border-color: var(--theme-color-text_link);
	background-color: var(--theme-color-text_link);
	color: var(--theme-color-inverse_link);
}

/* --- Columna 3: categorías (widget de WooCommerce) --- */

.footer-categorias .widget {
	margin: 0;
	padding: 0;
}

.footer-categorias .product-categories {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-categorias .product-categories li {
	margin: 0 0 0.55em;
	padding: 0;
	list-style: none;
}

.footer_wrap .footer-categorias ul,
.footer_wrap .footer-categorias li {
	padding-left: 0;
	list-style: none !important;
}

.footer_wrap .footer-categorias li::marker {
	content: none;
}

/* La viñeta del tema es un punto en el primer enlace de cada <li>
   (.widget ul > li a:first-child:before en skins/default/css/style.css). */
.footer_wrap .footer-categorias .widget ul > li a:first-child:before {
	display: none;
}

.footer-categorias .product-categories .children {
	margin: 0.55em 0 0 1em;
}

/* --- Columna 4: boletín (Contact Form 7) --- */

.boletin-pie > p {
	display: flex;
	margin: 0;
}

.boletin-pie .wpcf7-form-control-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

/* Selectores con .wpcf7-form para ganar a los estilos de CF7 del tema. */
.wpcf7-form.boletin-pie input[type="email"] {
	width: 100%;
	height: 56px;
	padding: 0 20px;
	border: none;
	border-radius: 0;
	background-color: var(--theme-color-alter_bg_color);
	color: var(--theme-color-text_dark);
}

/* Botón cuadrado con sobre: el texto "Suscribirse" queda para lectores de pantalla. */
.wpcf7 .wpcf7-form.boletin-pie input.wpcf7-submit {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	font-size: 0;
	color: transparent;
	background: var(--theme-color-text_link) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='2' y='4' width='20' height='16' rx='2'/%3e%3cpath d='m22 7-10 6L2 7'/%3e%3c/svg%3e") no-repeat center / 22px;
	cursor: pointer;
}

.wpcf7 .wpcf7-form.boletin-pie input.wpcf7-submit:hover,
.wpcf7 .wpcf7-form.boletin-pie input.wpcf7-submit:focus {
	background-color: var(--theme-color-text_hover);
}

/* El JS del tema (skins/default/skin.js) envuelve el botón en .wpcf7-submit-style
   y pinta el fondo en .submit-style-in como píldora con avión de papel:
   se convierte en un cuadrado con el sobre de la fuente del tema. */
.wpcf7 .wpcf7-form.boletin-pie .wpcf7-submit-style {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
}

.wpcf7 .wpcf7-form.boletin-pie .wpcf7-submit-style .wpcf7-submit {
	width: 100%;
	padding: 0 !important;
}

.wpcf7 .wpcf7-form.boletin-pie .wpcf7-submit-style .submit-style-in {
	border-radius: 0;
}

.wpcf7 .wpcf7-form.boletin-pie .wpcf7-submit-style .submit-style-in:before {
	content: '\e9a3';
	left: 50%;
	margin-left: -0.5em;
	font-size: 20px;
	text-align: center;
}

.boletin-pie .wpcf7-spinner {
	display: none;
}

.boletin-pie .wpcf7-not-valid-tip {
	position: absolute;
	font-size: 0.8rem;
}

.boletin-pie .wpcf7-response-output {
	margin: 12px 0 0 !important;
	padding: 8px 12px !important;
	font-size: 0.9rem;
}

/* --- Barra inferior: copyright a la izquierda y enlaces a la derecha --- */

.footer-legales .elementor-icon-list-items.elementor-inline-items {
	justify-content: flex-end;
	gap: 6px 28px;
	margin: 0 !important;
}

.footer-legales .elementor-icon-list-item,
.footer-legales .elementor-icon-list-item.elementor-inline-item {
	margin: 0 !important;
	padding: 0 !important;
}

.footer-legales .elementor-icon-list-item:after {
	display: none;
}

.footer-legales .elementor-icon-list-text {
	color: var(--theme-color-text);
	transition: color 0.3s;
}

.footer-legales a:hover .elementor-icon-list-text {
	color: var(--theme-color-text_link);
}

@media (max-width: 767px) {
	.footer_wrap .footer-destacados {
		padding-top: 35px;
	}

	.footer_wrap .footer-principal {
		padding: 40px 0 30px;
	}

	.footer-inferior .elementor-column {
		text-align: center;
	}

	.footer-legales .elementor-icon-list-items.elementor-inline-items {
		justify-content: center;
		margin-top: 10px;
	}
}