/* REF: FEAT-002 - Sección Green: reglas que en Green ganan por orden de carga y aquí no - Diego - 19/10/2026
   Mismo selector y especificidad que en greenstation.pe; este archivo se carga el último. */

/* Porto: contenedores de Elementor a todo el ancho dentro de .container-fluid (en Vape gana el
   max-width de Elementor 3.34, que carga después que Porto). */
:where(body.vs-green) .container-fluid .e-parent { max-width: calc(100% + 2 * var(--porto-fluid-spacing)); }

/* Ficha de producto (plantilla 3603 de Vape con el CSS de Green): elementos que Green no muestra. */
:where(body.vs-green) .elementor-3603 .elementor-element-daeca73,
:where(body.vs-green) .elementor-3603 .elementor-element-5d4ff29,
:where(body.vs-green) .elementor-3603 .elementor-element-2b9c703 { display: none !important; }
/* [stock_indicator]: en Green solo muestra el estado de stock; en Vape añade las tarjetas de entrega. */
:where(body.vs-green) .elementor-3603 .elementor-element-7151af9 .elementor-shortcode > :not(.estado-stock) { display: none !important; }
/* Bloque de entrega de Vape (tiendas, 90 min, envío) que se inserta en la ficha: Green no lo tiene. */
:where(body.vs-green) #vs-premium-wrapper-global,
:where(body.vs-green) .vs-sidebar,
:where(body.vs-green) .vs-sidebar-overlay,
:where(body.vs-green) #vs-stores-sidebar,
:where(body.vs-green) .vs-stores-sidebar { display: none !important; }

/* Mega menú: en carrito/pago/Mi cuenta algo de Vape deja display:block en línea en los .popup y el
   CSS de Green (top: 100%) los dejaba abiertos. Como en greenstation.pe: solo se ven al pasar el ratón. */
:where(body.vs-green) #header .mega-menu > li.menu-item:not(:hover) > .popup {
	display: none !important;
}

/* Filtros de la barra de la tienda: en greenstation.pe el body lleva la clase «dark» del skin oscuro de
   Porto y esta regla (de la plantilla 3466) solo aplica con ella. Vape no la lleva. */
body:where(.vs-green) .porto-product-filters .widget {
	background-color: rgba(75, 99, 118, 0) !important;
}

/* Corazón de favoritos de Vape (vs-wish) junto a «Añadir al carrito»: greenstation.pe no lo tiene. */
:where(body.vs-green) .vs-wish--single {
	display: none !important;
}

/* ── Carrito, pago y Mi cuenta con la imagen de Green ──────────────────────────────────────────────
   Son las páginas de Vape (su flujo, sus validaciones y sus campos) con el header y el footer de Green.
   Aquí solo se cambia el rojo de Vape por el verde de Green y se arreglan los textos que el CSS de
   Green (texto claro sobre fondo oscuro) dejaba invisibles. */
body:where(.vs-green) {
	--vs-green-acento: #6cde01;
}

/* Carrito */
body:where(.vs-green).woocommerce-cart .wc-proceed-to-checkout .checkout-button,
body:where(.vs-green).woocommerce-cart #main a.btn-v-dark[href*="checkout"] {
	background-color: var(--vs-green-acento) !important;
	border-color: var(--vs-green-acento) !important;
	color: #000 !important;
}
body:where(.vs-green).woocommerce-cart #main .elementor-icon-box-title a,
body:where(.vs-green).woocommerce-cart #main .elementor-icon {
	color: var(--vs-green-acento) !important;
}

/* Pago: tarjetas blancas de Vape -> texto oscuro */
body:where(.vs-green).woocommerce-checkout #main :is(h1, h2, h3, h4, h5, h6),
body:where(.vs-green).woocommerce-checkout #main .woocommerce-message :is(strong, span),
body:where(.vs-green).woocommerce-checkout #main .vcm-resumen :is(bdi, .woocommerce-Price-currencySymbol) {
	color: #222 !important;
}
body:where(.vs-green).woocommerce-checkout #main .progress-text strong,
body:where(.vs-green).woocommerce-checkout #main .vcm-link-login,
body:where(.vs-green).woocommerce-checkout #main .vcm-resumen__total span,
body:where(.vs-green).woocommerce-checkout #main .vcm-resumen__total bdi,
body:where(.vs-green).woocommerce-checkout #main .vs-show-coupon,
body:where(.vs-green).woocommerce-checkout #main .woocommerce-billing-fields__field-wrapper > p:not(.form-row),
body:where(.vs-green).woocommerce-checkout #main .woocommerce-shipping-fields__field-wrapper > p#step-2-envio,
body:where(.vs-green).woocommerce-checkout #main [id^="step-"] {
	color: #4fa300 !important;
}
body:where(.vs-green).woocommerce-checkout #main .progress-bar,
body:where(.vs-green).woocommerce-checkout #main .vcm-stepper__item--active .vcm-stepper__circle,
body:where(.vs-green).woocommerce-checkout #main .vcm-btn-registrar,
body:where(.vs-green).woocommerce-checkout #main #place_order:not(:disabled):not(.disabled),
body:where(.vs-green).woocommerce-checkout #main .vcm-btn-continuar:not(:disabled),
body:where(.vs-green).woocommerce-checkout #main button.button.alt:not(:disabled):not(.disabled) {
	background-color: var(--vs-green-acento) !important;
	border-color: var(--vs-green-acento) !important;
	color: #000 !important;
}

/* Pin rojo de Vape de la tarjeta del correo: al verde de Green. */
body:where(.vs-green).woocommerce-checkout #main .vcm-correo-card__imagen {
	filter: hue-rotate(95deg) saturate(1.2);
}

/* Mi cuenta (fondo oscuro de Green): etiquetas y enlaces visibles, botones verdes, selects oscuros */
body:where(.vs-green).woocommerce-account #main label,
body:where(.vs-green).woocommerce-account #main label span:not(.required),
body:where(.vs-green).woocommerce-account #main .vs-terminos-label span,
body:where(.vs-green).woocommerce-account #main .woocommerce-privacy-policy-text {
	color: #777 !important;
}
body:where(.vs-green).woocommerce-account #main .vs-toggle-btn,
body:where(.vs-green).woocommerce-account #main .vs-terminos-label a,
body:where(.vs-green).woocommerce-account #main .woocommerce-privacy-policy-link,
body:where(.vs-green).woocommerce-account #main .lost_password a {
	color: var(--vs-green-acento) !important;
}
body:where(.vs-green).woocommerce-account #main .woocommerce-form :is(button, .button)[type="submit"] {
	background-color: var(--vs-green-acento) !important;
	border-color: var(--vs-green-acento) !important;
	color: #000 !important;
}
body:where(.vs-green).woocommerce-account #main select {
	background-color: rgb(13, 13, 13) !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── Menú lateral del móvil ──────────────────────────────────────────────────────────────────────────
   El de Vape (VaporSlideMenu: logo, iconos, pantallas por categoría, redes) con los colores de Green:
   fondo negro, texto y líneas en verde, logo de Green. Categorías en inc/greenstation-menu-movil.php. */
body:where(.vs-green) #side-nav-panel,
body:where(.vs-green) #side-nav-panel .menu-wrap,
body:where(.vs-green) #side-nav-panel .menu-screen,
body:where(.vs-green) #side-nav-panel .mobile-menu-header {
	background: #000 !important;
	box-shadow: none !important;
}
body:where(.vs-green) #side-nav-panel #mobileMenuLogo {
	content: url("https://vapestation.nyc3.digitaloceanspaces.com/2025/09/logo-green-station-245x66-1.png");
	height: 56px !important;
	max-width: 190px !important;
}
body:where(.vs-green) #side-nav-panel .mobile-menu .menu-item {
	border-bottom: 1px solid rgba(108, 222, 1, 0.35) !important;
}
body:where(.vs-green) #side-nav-panel .mobile-menu .menu-item > a,
body:where(.vs-green) #side-nav-panel .accordion-toggle {
	background: #000 !important;
	color: var(--vs-green-acento) !important;
	letter-spacing: 0.04em;
}
body:where(.vs-green) #side-nav-panel .mobile-menu .menu-item > a:hover,
body:where(.vs-green) #side-nav-panel .accordion-toggle:hover {
	background: #0d0d0d !important;
	color: #fff !important;
}
body:where(.vs-green) #side-nav-panel .mobile-menu .arrow::before,
body:where(.vs-green) #side-nav-panel .accordion-arrow::before,
body:where(.vs-green) #side-nav-panel .mobile-menu .menu-item.submenu-item > a:not(.accordion-toggle)::after,
body:where(.vs-green) #side-nav-panel .menu-item a[target="_blank"]::after,
body:where(.vs-green) #side-nav-panel .mobile-back-button {
	color: var(--vs-green-acento) !important;
}
body:where(.vs-green) #side-nav-panel .submenu-header {
	background: #0d0d0d !important;
	border-bottom: 2px solid var(--vs-green-acento) !important;
}
body:where(.vs-green) #side-nav-panel .submenu-header a {
	color: var(--vs-green-acento) !important;
}
body:where(.vs-green) #side-nav-panel .accordion-submenu {
	background: #0d0d0d !important;
}
body:where(.vs-green) #side-nav-panel .submenu-item-child {
	border-bottom: 1px solid rgba(108, 222, 1, 0.12) !important;
}
body:where(.vs-green) #side-nav-panel .submenu-item-child > a {
	color: #ddd !important;
}
body:where(.vs-green) #side-nav-panel .submenu-item-child > a:hover {
	color: var(--vs-green-acento) !important;
	background: rgba(108, 222, 1, 0.08) !important;
}
body:where(.vs-green) #side-nav-panel .social-section,
body:where(.vs-green) #side-nav-panel .submenu-image-container-bottom {
	background: #000 !important;
	border-top: 1px solid rgba(108, 222, 1, 0.35) !important;
}
body:where(.vs-green) #side-nav-panel .social-title {
	color: #fff !important;
}
body:where(.vs-green) #side-nav-panel .social-icon {
	background: transparent !important;
	color: var(--vs-green-acento) !important;
	width: 34px !important;
	height: 34px !important;
	overflow: visible !important;
}
body:where(.vs-green) #side-nav-panel .social-icon svg {
	width: 26px !important;
	height: 26px !important;
}
body:where(.vs-green) .side-nav-panel-close {
	color: var(--vs-green-acento) !important;
}

/* REF: FEAT-002 - Arreglos de la revisión en producción - Alejandro - 29/10/2026 */

/* Los contenedores a todo el ancho de Green sobresalen 20 px por lado (también en greenstation.pe)
   y la página se movía en horizontal. clip y no hidden: no crea contenedor de scroll. */
:where(body.vs-green) .page-wrapper { overflow-x: clip; }

/* Ficha: reseñas de Woo (salen en inglés y greenstation.pe no las muestra) y el enlace
   «( There are no reviews yet. )» junto a las estrellas, que lleva a ese formulario. */
:where(body.vs-green) .elementor-3603 .elementor-element-08feb6e,
:where(body.vs-green) .elementor-3603 .review-link.noreview { display: none !important; }

/* Artículo: los enlaces del texto heredaban #1f1f1f sobre negro (contraste 1,3:1, también en greenstation.pe). */
:where(body.vs-green) .elementor-3318 .elementor-element-82fa9cc a {
	color: var(--vs-green-acento);
	text-decoration: underline;
}

/* Footer: «Libro de reclamaciones» trae las clases de Elementor 3.32 (elementor-position-left) y
   el Elementor de Vape solo entiende las nuevas (inline-start): el ícono quedaba encima, recortado
   contra el borde. Mismo diseño que en Vape: ícono a la izquierda y texto al lado. */
@media (min-width: 768px) {
	:where(body.vs-green) .elementor-widget-icon-box.elementor-position-left .elementor-icon-box-wrapper {
		flex-direction: row;
		gap: 15px;
		text-align: start;
		line-height: 24px;
	}
}