/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Tema hijo personalizado para Swop basado en Astra
Author: Josue Gonzales
Author URI: https://swoplite.store
Template: astra
Version: 1.0
/* post = 3670 /*
==========================================
🌿 SWOP STYLE.CSS – TEMA HIJO ASTRA
Organizado por página y por versión (Desktop / Mobile)
Última actualización: Junio 2025
==========================================
*/

/* HOME post = 3670 */
/* TIENDA post = 3759 */
/* VENDER post = 7808 */
/* DASHBOARD post = 3823 */
/* MI CUENTA post = 553 */
/* NOSOTROS post = 9 */
/* CREAR CONTRASEÑA post = 10271 */


/* =========================================================================================== AJUSTES GENERALES DE LA WEB ======== */

/* === Swop: espacio para el header en páginas tipo page-builder === */

.ast-page-builder-template .site-content > .ast-container {
  	padding-top: 120px; /* valor base para desktop */
}

@media (max-width: 921px) {
	.ast-page-builder-template .site-content > .ast-container {
    	padding-top: 60px; /* más espacio en mobile si el menú es más alto */
  	}
}

@media (max-width: 480px) {
  .ast-page-builder-template .site-content > .ast-container {
    padding-top: 0px; /* para teléfonos más estrechos */
  }
}

/* === POLITICAS, TERMINOS Y PREGUNTAS === */
.page-id-7955 .entry-content.clear{
	margin-top:50px;
}
.page-id-7964 .entry-content.clear{
	margin-top:50px;
}

/* OCULTANDO BELOW HEADER */


.page-id-7815 .ast-below-header-wrap,
.page-id-7861 .ast-below-header-wrap,
.page-id-9 .ast-below-header-wrap,
.page-id-7955 .ast-below-header-wrap,
.page-id-7964 .ast-below-header-wrap,
.page-id-7808 .ast-below-header-wrap,
.page-id-3823 .ast-below-header-wrap,
.page-id-553 .ast-below-header-wrap, {
  	display: none !important;
	height: 0 !important;
  	padding: 0 !important;
  	margin: 0 !important;
  	border: none !important;
}


/* ======================================================================================================== HOME ======== */

/* Cambiar color del texto del menú principal */
.main-header-menu > li > a {
  color: #262626 !important;  /* Blanco */
}

/* Corrige la fuente de los inputs del formulario de login */
.woocommerce form .form-row input {
    font-family: Arial, sans-serif !important;
}

/* COLOR HOVER MENU */
.main-header-menu > li > a:hover {
	background:#F0F0F0;
	border-radius: 20px;
	height: 50px!important;

}
/* Reduce espacio entre productos */
ul.products li.product {
  	margin-bottom: 10px !important;
}


/* === ESTILO DE PRODUCTOS EN EL HOME === */

/* Aplica estilo de grilla y diseño de tarjeta DESKTOP */

.home ul.products {
  	max-width: 1400px;
  	margin: auto;
  	padding: 0px;
  	display: grid;
  	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  	gap: 20px;
}
.home ul.products li.product {
	background: #fff !important;
	text-align: center !important;
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	transition: transform 0.2s ease;
}
.woocommerce-js ul.products li.product .ast-woo-product-category {
	margin-bottom: 0px;
}
.home ul.products li.product h2 {
	color: black !important;
	text-align: center;
	font-size: 15px !important;
}	
.home ul.products li.product:hover {
	transform: translateY(-4px);
}
.home ul.products li.product img {
	border-radius: 10px;
  	object-fit: cover;
}
.woocommerce ul.products li.product .price {
	font-size: 22px !important;
}
.home ul.products li.product .button {
  	background-color: #5857f1;
  	color: white;
	display: inline-block;
  	border-radius: 20px;
  	padding: 12px 16px;
  	font-size: 14px;
  	text-transform: uppercase;
  	transition: background 0.3s ease;
}
.home ul.products li.product .button:hover {
  	background-color: #333;
	color:white;
}

/* === grilla y diseño de tarjeta MOBILE IPHONE === */

@media (max-width: 480px) {
	.home ul.products {
		gap: 4px 12px;
		}
	.home ul.products li.product {
		padding: 8px;
		}
	.home ul.products li.product h2 {
    	font-size: 13px !important;
    	text-align: center;
  		}
		.home ul.products li.product .price {
    	text-align: center;
		font-size:17px !important;
		}

	.home ul.products li.product .button {
  		background-color: #ffce01;
  		color: black;
		display: inline-block;
  		border-radius: 20px;
  		padding: 8px 6px;
  		font-size: 13px;
  		text-transform: uppercase;
  		transition: background 0.3s ease;
		}
}




















/* ======================================================================================================== ESTILOS CART ======== */
body.page-id-554 {

  /* 🔹 TÍTULO "Totales del carrito" */
  .cart_totals h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #111827 !important; /* Gris oscuro */
    margin-bottom: 20px !important;
  }
}


  /* 🔹 BOTÓN "Proceder con la compra" */
  .wc-proceed-to-checkout a.checkout-button {
    background-color: #25D366 !important; /* Verde WhatsApp */
    color: #fff !important;
    font-size: 18px !important;
    font-weight: bold !important;
    padding: 14px 28px !important;
    border: none !important;
    border-radius: 12px !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    transition: background-color 0.3s ease !important;
  }
	}

.wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #1ebe5d !important;
  }
}



/* ======================================================================================================== ESTILOS TIENDA ======== */


/* Swop – Sidebar tienda */

.swop-sidebar-box {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.swop-sidebar-box h3 {
  margin-bottom: 10px;
  font-size: 16px;
  color: #222;
}

.swop-nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.swop-nav-links li {
  margin: 6px 0;
}

.swop-nav-links a {
  color: #007c6c;
  text-decoration: none;
  font-weight: 500;
}

.swop-nav-links a:hover {
  text-decoration: underline;
}












/* ======================================================================================== BANNER OFERTAS HOME ======== */


.swop-closet-label {
  font-family: 'Arial', sans-serif;
  font-size: 19px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: white;
  margin: 0;
	max-height:20px!important;
}


.swop-closet-label .icon {
  font-size: 20px;
}

.swop-closet-label .eco {
  font-weight: 600;
  color: white; /* Verde ecológico */
}

.swop-closet-label .arrow {
  color: white;
  font-size: 14px;
}

.swop-closet-label .recent {
  font-family: 'Georgia', serif;
  font-style: italic;
  color: white;
}
@media (max-width: 768px) {
	
.swop-closet-label {
  font-family: 'Arial', sans-serif;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: white;
  margin: 0;
	max-height:20px!important;
	}
}
/* ====================================== banner info home desktop ======== */

.swop-closet-destacado-label {
  font-family: 'Arial', sans-serif;
  font-size: 19px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: white;
  margin: 0;
		max-height:20px!important;


}
.swop-closet-destacado-label .icon {
  font-size: 20px;
}

.swop-closet-destacado-label .eco {
  font-weight: 600;
  color: white; /* Verde ecológico */
}

.swop-closet-destacado-label .arrow {
  color: white;
  font-size: 14px;
}

.swop-closet-destacado-label .recent {
  font-family: 'Georgia', serif;
  font-style: italic;
  color: white;
}

@media (max-width: 768px) {
	
.swop-closet-destacado-label {
  font-family: 'Arial', sans-serif;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: white;
  margin: 0;
	max-height:20px!important;
	}
}

/* ====================================== banner delivery home desktop ======== */


	
.swop-info-banner {
  background-color: #2A2A2A; /* Verde */
  color: #fed800;
  padding: 8px 140px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  gap: 12px;
  max-height: 60px;
  box-sizing: border-box;
}

.swop-banner-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
}

.envio-text {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 16px;
}

.swop-banner-right {
  display: flex;
  gap: 20px!important;
  font-size: 14px;
  flex-wrap: wrap;
	align-items: center;

}
.swop-icon {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

/* ====================================== banner info home mobile ======== */

.swop-info-banner-mobile {
  width: 100%;
  height: 30px;
  overflow: hidden;
  position: relative;
  color: #fed800;
  display: flex;
  align-items: normal;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
.swop-phrase-set {
  display: flex;
  flex-direction: column; /* IMPORTANTE: apila frases verticalmente */
  animation: slideBanner 12s infinite;
}

.swop-phrase-delivery {
	font-family: 'Georgia', serif;
  	font-style: italic;
	font-size: 16px;
	font-weight:600;
	gap:8px!important;
	align-items:center;
	min-height: 30px;
	flex-wrap:wrap;
	height: 30px;
	display: flex;
	justify-content: center;
	width: 100vw;
	flex-shrink: 0;
	white-space: nowrap;
	
}
.swop-phrase-moda {
	font-family: 'Georgia', serif;
	font-size: 16px;
	font-weight:500;
	gap:8px!important;
	align-items:center;
	min-height: 30px;
	flex-wrap:wrap;
	height: 30px;
	display: flex;
	justify-content: center;
	width: 100vw;
	flex-shrink: 0;
	white-space: nowrap;
	
}
.swop-phrase {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-height: 30px;
  width: 100vw; /* fuerza que cada frase ocupe todo el ancho */
  font-size: 13px;
  gap: 6px;
  flex-shrink: 0; /* impide que se encojan o colapsen */
  white-space: nowrap; /* evita salto de línea */
}
.swop-icon {
  	width: 20px;
  	height: 20px;
	vertical-align: middle;
	display: inline-block;
	object-fit: contain;
}

@keyframes slideBanner {
  0%, 15%   { transform: translateY(0%); }
  20%, 35%  { transform: translateY(-100%); }
  40%, 90%  { transform: translateY(-200%); }
  100%      { transform: translateY(0%); }
}